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)}'
+            id='{tabId(item, index)}'
-            aria-controls='wrn-panel-{valueOf(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)}'
+            id='{panelId(item, index)}'
-            aria-labelledby='wrn-tab-{valueOf(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 />

packages/ui/test/ui.test.ts

@@ -2879,8 +2879,13 @@ test("tabs use wrn classes and declare real outputs instead of raw events", asyn
   expect(tabs).toHaveLength(2);
   expect(tabs[0]!.getAttribute("aria-selected")).toBe("true");
   expect(tabs[1]!.getAttribute("aria-selected")).toBe("false");
+  expect(tabs[0]!.id).toBe("wrn-tab-overview");
+  expect(tabs[0]!.getAttribute("aria-controls")).toBe("wrn-panel-overview");
   expect(dom.querySelector(".wrn-tabs")).not.toBeNull();
-  expect(dom.querySelectorAll('[role="tabpanel"]')).toHaveLength(2);
+  const panels = dom.querySelectorAll('[role="tabpanel"]');
+  expect(panels).toHaveLength(2);
+  expect(panels[0]!.id).toBe("wrn-panel-overview");
+  expect(panels[0]!.getAttribute("aria-labelledby")).toBe("wrn-tab-overview");
 });
 
 test("tabs in url mode declare the query parameter they sync to", async () => {