fix(ui): render dynamic tab panels and ids

packages/ui/components/Tabs.wrn

@@ -41,6 +41,18 @@ component Tabs {
       return String(item.value || item.id || index)
     }
 
+    shared function tabId(item, index) {
+      return "wrn-tab-" + valueOf(item, index)
+    }
+
+    shared function panelId(item, index) {
+      return "wrn-panel-" + valueOf(item, index)
+    }
+
+    shared function panelSlot(item, index) {
+      return "panel-" + valueOf(item, index)
+    }
+
     /*
      * In url mode the query parameter is the source of truth, not local state.
      *
@@ -130,8 +142,8 @@ component Tabs {
             role="tab"
             data-value='{valueOf(item, index)}'
             data-wrn-roving-item="true"
-            id='wrn-tab-{valueOf(item, index)}'
-            aria-controls='wrn-panel-{valueOf(item, index)}'
+            id='{tabId(item, index)}'
+            aria-controls='{panelId(item, index)}'
             aria-selected='{isSelected(item, index) ? "true" : "false"}'
             aria-disabled='{item.disabled ? "true" : "false"}'
             @click='selectTab(item, index, event)'
@@ -148,8 +160,8 @@ component Tabs {
           <div
             class="wrn-tabs__panel"
             role="tabpanel"
-            id='wrn-panel-{valueOf(item, index)}'
-            aria-labelledby='wrn-tab-{valueOf(item, index)}'
+            id='{panelId(item, index)}'
+            aria-labelledby='{tabId(item, index)}'
             tabindex="0"
             data-show='isSelected(item, index)'
           >
@@ -158,7 +170,7 @@ component Tabs {
             </h3>
             <p class="wrn-tabs__description" data-show="item.description">{item.description}</p>
             <div class="wrn-tabs__content" data-show="item.content">{item.content}</div>
-            <slot name="panel-{valueOf(item, index)}"></slot>
+            <slot name='{panelSlot(item, index)}'></slot>
           </div>
         {/each}
         <slot />