@helixui/library 3.3.1 → 3.4.0-next.121

package/dist/shared/{hx-tab-panel-DspCrKqo.js → hx-tab-panel-BQtBXKLD.js}

@@ -1,10 +1,12 @@
-import { css as v, html as _, nothing as I } from "lit";
-import { property as h, state as g, customElement as m } from "lit/decorators.js";
-import { f as y } from "./forced-colors-CTEDFRGa.js";
-import { d as E } from "./dev-warn-YlwPHjtX.js";
-import { H as T } from "./helix-element-BNEYeiys.js";
-import { c as N } from "./id-counter-DuX8vsui.js";
-const O = v`
+import { css as g, html as v, nothing as C } from "lit";
+import { property as b, state as u, customElement as y } from "lit/decorators.js";
+import { f as E, b as H } from "./forced-colors-CTEDFRGa.js";
+import { d as P } from "./dev-warn-YlwPHjtX.js";
+import { s as S, i as T, r as m } from "./aria-idref-CxvyzfQS.js";
+import { f as I } from "./aria-flatten-DY6v2vah.js";
+import { H as A } from "./helix-element-BNEYeiys.js";
+import { c as $ } from "./id-counter-DuX8vsui.js";
+const R = g`
   :host {
     display: block;
     font-family: var(--hx-tabs-font-family, var(--hx-font-family-sans, sans-serif));
@@ -93,60 +95,59 @@ const O = v`
     }
   }
 `;
-var k = Object.defineProperty, H = Object.getOwnPropertyDescriptor, p = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? H(e, a) : e, r = t.length - 1, o; r >= 0; r--)
-    (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
-  return i && s && k(e, a, s), s;
+var k = Object.defineProperty, O = Object.getOwnPropertyDescriptor, p = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? O(e, s) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (a = (i ? r(e, s, a) : r(a)) || a);
+  return i && a && k(e, s, a), a;
 };
-const L = N("hx-tabs");
-let b = class extends T {
+const M = $("hx-tabs");
+let d = class extends A {
   constructor() {
-    super(...arguments), this._id = L(), this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._pendingIndex = null, this._handleTabSelect = (t) => {
+    super(...arguments), this._id = M(), this.orientation = "horizontal", this.activation = "manual", this.label = "", this._activePanel = "", this._supportsIdrefRefs = !0, this._ariaMirror = null, this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._pendingIndex = null, this._handleTabSelect = (t) => {
       if (!(t instanceof CustomEvent)) return;
       t.stopPropagation();
-      const e = t.composedPath().find((a) => a instanceof Element && a.tagName.toLowerCase() === "hx-tab");
+      const e = t.composedPath().find((s) => s instanceof Element && s.tagName.toLowerCase() === "hx-tab");
       e && this._activateTab(e);
     }, this._handleSlotChange = () => {
-      if (this._warnInvalidSlotContent(), this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels(), !this._getPanels().some((a) => a.name === this._activePanel)) {
-        const a = this._getEnabledTabs()[0];
-        a ? this._activateTab(a, !1) : this._activePanel = "";
+      if (this._warnInvalidSlotContent(), this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels(), !this._getPanels().some((s) => s.name === this._activePanel)) {
+        const s = this._getEnabledTabs()[0];
+        s ? this._activateTab(s, !1) : this._activePanel = "";
       }
     }, this._handleKeydown = (t) => {
-      var w, P, S, C;
       const e = this._getTabs();
       if (e.length === 0)
         return;
-      const a = this.orientation === "horizontal", i = a ? "ArrowLeft" : "ArrowUp", s = a ? "ArrowRight" : "ArrowDown";
-      if (![i, s, "Home", "End", " ", "Enter"].includes(t.key))
+      const s = this.orientation === "horizontal", i = s ? "ArrowLeft" : "ArrowUp", a = s ? "ArrowRight" : "ArrowDown";
+      if (![i, a, "Home", "End", " ", "Enter"].includes(t.key))
         return;
-      const o = e.find((u) => u === document.activeElement);
+      const r = e.find((_) => _ === document.activeElement);
       if (t.key === " " || t.key === "Enter") {
-        o && !o.disabled && (t.preventDefault(), this._activateTab(o), (P = (w = o.shadowRoot) == null ? void 0 : w.querySelector("button")) == null || P.focus());
+        r && !r.disabled && (t.preventDefault(), this._activateTab(r), r.focus());
         return;
       }
       t.preventDefault();
-      let n = o ? e.indexOf(o) : -1;
+      let n = r ? e.indexOf(r) : -1;
       if (n === -1) {
-        const u = e.find(($) => $.panel === this._activePanel);
-        n = u ? e.indexOf(u) : 0;
+        const _ = e.find((L) => L.panel === this._activePanel);
+        n = _ ? e.indexOf(_) : 0;
       }
-      let d;
-      t.key === "Home" ? d = 0 : t.key === "End" ? d = e.length - 1 : t.key === s ? d = (n + 1) % e.length : d = n <= 0 ? e.length - 1 : n - 1;
-      const l = e[d];
-      l && ((C = (S = l.shadowRoot) == null ? void 0 : S.querySelector("button")) == null || C.focus(), this.activation === "automatic" && !l.disabled && this._activateTab(l));
+      let h;
+      t.key === "Home" ? h = 0 : t.key === "End" ? h = e.length - 1 : t.key === a ? h = (n + 1) % e.length : h = n <= 0 ? e.length - 1 : n - 1;
+      const l = e[h];
+      l && (l.focus(), this.activation === "automatic" && !l.disabled && this._activateTab(l));
     };
   }
   // ─── Attribute Observation ───
   static get observedAttributes() {
     return [...super.observedAttributes ?? [], "selected-index"];
   }
-  attributeChangedCallback(t, e, a) {
-    if (super.attributeChangedCallback(t, e, a), t === "selected-index" && a !== null && e !== a) {
-      const i = parseInt(a, 10);
+  attributeChangedCallback(t, e, s) {
+    if (super.attributeChangedCallback(t, e, s), t === "selected-index" && s !== null && e !== s) {
+      const i = parseInt(s, 10);
       if (!isNaN(i) && i >= 0)
         if (this.hasUpdated) {
-          const s = this._getTabs()[i];
-          s && !s.disabled && this._activateTab(s, !1);
+          const a = this._getTabs()[i];
+          a && !a.disabled && this._activateTab(a, !1);
         } else
           this._pendingIndex = i;
     }
@@ -183,16 +184,18 @@ let b = class extends T {
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("hx-tab-select", this._handleTabSelect), this.addEventListener("keydown", this._handleKeydown), typeof MutationObserver < "u" && (this._observer = new MutationObserver(() => {
+    super.connectedCallback(), this._supportsIdrefRefs = S(this._internals), this.addEventListener("hx-tab-select", this._handleTabSelect), this.addEventListener("keydown", this._handleKeydown), typeof MutationObserver < "u" && (this._observer = new MutationObserver(() => {
       this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels();
     }), this._observer.observe(this, {
       subtree: !1,
       attributeFilter: ["panel", "name"]
-    }));
+    })), this._syncHostAriaSemantics(), this._ariaMirror = T(this, () => {
+      this._syncHostAriaSemantics();
+    });
   }
   disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), this.removeEventListener("hx-tab-select", this._handleTabSelect), this.removeEventListener("keydown", this._handleKeydown), (t = this._observer) == null || t.disconnect(), this._observer = null;
+    var t, e;
+    super.disconnectedCallback(), this.removeEventListener("hx-tab-select", this._handleTabSelect), this.removeEventListener("keydown", this._handleKeydown), (t = this._observer) == null || t.disconnect(), this._observer = null, (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
   }
   firstUpdated() {
     if (this.label, this._syncTabsAndPanels(), this._pendingIndex !== null) {
@@ -208,34 +211,56 @@ let b = class extends T {
     }
   }
   updated(t) {
-    super.updated(t), t.has("_activePanel") && this._updateTabsAndPanels();
+    super.updated(t), t.has("_activePanel") && this._updateTabsAndPanels(), (t.has("orientation") || t.has("label")) && this._syncHostAriaSemantics();
+  }
+  // ─── Host ARIA Sync ───
+  /**
+   * Mirror tablist semantics onto the host via ElementInternals so consumer-
+   * supplied `aria-label`, `aria-labelledby`, and the `label` property all
+   * reach the announced control. The host carries `role="tablist"` and the
+   * orientation reflects the `orientation` property reactively.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var o;
+    const t = this._internals;
+    t.role = "tablist", t.ariaOrientation = this.orientation;
+    const e = ((o = this.getAttribute("aria-label")) == null ? void 0 : o.trim()) || "", s = this.getAttribute("aria-labelledby"), i = m(this, s), a = i.length > 0;
+    if (this._supportsIdrefRefs) {
+      const r = t;
+      r.ariaLabelledByElements = a ? i : null;
+    }
+    e ? t.ariaLabel = e : a ? this._supportsIdrefRefs ? t.ariaLabel = null : t.ariaLabel = i.map((r) => I(r)).filter(Boolean).join(" ") || this.label || null : t.ariaLabel = this.label || null;
   }
   // ─── Tab / Panel Sync ───
   /** @internal */
   _syncTabsAndPanels() {
     const t = this._getTabs(), e = this._getPanels();
-    t.forEach((a, i) => {
-      const s = a.id || `hx-tab-${this._id}-${i}`;
-      a.id = s;
-      const r = a.panel, o = e.find((n) => n.name === r) ?? e[i];
-      if (o) {
-        const n = o.id || `hx-panel-${this._id}-${i}`;
-        o.id = n, a.controls = n;
-        const d = Array.from(a.childNodes).filter(
-          (l) => l.nodeType === Node.TEXT_NODE || l.nodeType === Node.ELEMENT_NODE && !l.hasAttribute("slot")
-        ).map((l) => l.textContent ?? "").join("").trim();
-        d ? (o.setAttribute("aria-label", d), o.removeAttribute("aria-labelledby")) : o.setAttribute("aria-labelledby", s);
+    t.forEach((s, i) => {
+      const a = s.id || `hx-tab-${this._id}-${i}`;
+      s.id = a;
+      const o = s.panel, r = e.find((n) => n.name === o) ?? e[i];
+      if (r) {
+        const n = r.id || `hx-panel-${this._id}-${i}`;
+        if (r.id = n, s.controls = n, s.setControlsPanel(r), r.setLabelledByTabs([s]), this._supportsIdrefRefs)
+          r.removeAttribute("aria-label"), r.removeAttribute("aria-labelledby");
+        else {
+          const h = Array.from(s.childNodes).filter(
+            (l) => l.nodeType === Node.TEXT_NODE || l.nodeType === Node.ELEMENT_NODE && !l.hasAttribute("slot")
+          ).map((l) => l.textContent ?? "").join("").trim();
+          h ? (r.setAttribute("aria-label", h), r.removeAttribute("aria-labelledby")) : r.setAttribute("aria-labelledby", a);
+        }
       }
     }), this._updateTabsAndPanels();
   }
   /** @internal */
   _updateTabsAndPanels() {
     const t = this._getTabs(), e = this._getPanels();
-    t.forEach((a) => {
-      const i = a.panel === this._activePanel;
-      a.selected = i, a.tabIndex = i ? 0 : -1;
-    }), e.forEach((a) => {
-      a.name === this._activePanel ? (a.removeAttribute("hidden"), a.setAttribute("tabindex", "0")) : (a.setAttribute("hidden", ""), a.setAttribute("tabindex", "-1"));
+    t.forEach((s) => {
+      const i = s.panel === this._activePanel;
+      s.selected = i, s.tabIndex = i ? 0 : -1;
+    }), e.forEach((s) => {
+      s.name === this._activePanel ? (s.removeAttribute("hidden"), s.setAttribute("tabindex", "0")) : (s.setAttribute("hidden", ""), s.setAttribute("tabindex", "-1"));
     });
   }
   // ─── Tab Activation ───
@@ -243,48 +268,42 @@ let b = class extends T {
   _activateTab(t, e = !0) {
     if (t.disabled)
       return;
-    const a = this._getTabs(), i = this._activePanel;
+    const s = this._getTabs(), i = this._activePanel;
     if (this._activePanel = t.panel, e && i !== this._activePanel) {
-      const s = a.indexOf(t);
+      const a = s.indexOf(t);
       this.dispatchEvent(
         new CustomEvent("hx-tab-change", {
           bubbles: !0,
           composed: !0,
-          detail: { tabId: t.id, index: s }
+          detail: { tabId: t.id, index: a }
         })
       );
     }
   }
   /** @internal */
   _warnInvalidSlotContent() {
-    var a, i;
-    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="tab"]'), e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
+    var s, i;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="tab"]'), e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
     if (t) {
-      const s = t.assignedElements().filter((r) => r.tagName.toLowerCase() !== "hx-tab");
-      s.length > 0 && E(
+      const a = t.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab");
+      a.length > 0 && P(
         "hx-tabs",
-        `Slot "tab" expects <hx-tab> elements. Found unexpected: ${s.map((r) => `<${r.tagName.toLowerCase()}>`).join(", ")}`
+        `Slot "tab" expects <hx-tab> elements. Found unexpected: ${a.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
     if (e) {
-      const s = e.assignedElements().filter((r) => r.tagName.toLowerCase() !== "hx-tab-panel");
-      s.length > 0 && E(
+      const a = e.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab-panel");
+      a.length > 0 && P(
         "hx-tabs",
-        `Default slot expects <hx-tab-panel> elements. Found unexpected: ${s.map((r) => `<${r.tagName.toLowerCase()}>`).join(", ")}`
+        `Default slot expects <hx-tab-panel> elements. Found unexpected: ${a.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
   }
   // ─── Render ───
   render() {
-    return _`
+    return v`
       <div class="tabs">
-        <div
-          part="tablist"
-          class="tablist"
-          role="tablist"
-          aria-orientation=${this.orientation}
-          aria-label=${this.label || "Tabs"}
-        >
+        <div part="tablist" class="tablist">
           <slot name="tab" @slotchange=${this._handleSlotChange}></slot>
         </div>
         <div part="panels" class="panels">
@@ -294,23 +313,26 @@ let b = class extends T {
     `;
   }
 };
-b.styles = [O, y];
+d.styles = [R, E];
+p([
+  b({ type: String, reflect: !0 })
+], d.prototype, "orientation", 2);
 p([
-  h({ type: String, reflect: !0 })
-], b.prototype, "orientation", 2);
+  b({ type: String, attribute: "activation", reflect: !0 })
+], d.prototype, "activation", 2);
 p([
-  h({ type: String, attribute: "activation", reflect: !0 })
-], b.prototype, "activation", 2);
+  b({ type: String, reflect: !0 })
+], d.prototype, "label", 2);
 p([
-  h({ type: String, reflect: !0 })
-], b.prototype, "label", 2);
+  u()
+], d.prototype, "_activePanel", 2);
 p([
-  g()
-], b.prototype, "_activePanel", 2);
-b = p([
-  m("hx-tabs")
-], b);
-const z = v`
+  u()
+], d.prototype, "_supportsIdrefRefs", 2);
+d = p([
+  y("hx-tabs")
+], d);
+const N = g`
   :host {
     display: inline-block;
   }
@@ -352,16 +374,19 @@ const z = v`
     position: relative;
   }
 
-  /* ─── Hover State ─── */
+  /* ─── Hover State ───
+     Group 5a host-canonical: drive visual state from host attributes
+     (selected / disabled are reflect: true), not from inner-element ARIA
+     attributes which now live on the host's ElementInternals. */
 
-  .tab:not([aria-selected='true']):not([aria-disabled='true']):hover {
+  :host(:not([selected]):not([disabled])) .tab:hover {
     color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #202b39));
     background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f5f8f3));
   }
 
   /* ─── Selected State ─── */
 
-  .tab[aria-selected='true'] {
+  :host([selected]) .tab {
     color: var(--hx-tabs-tab-active-color, var(--hx-color-primary-600, #0f7078));
     border-bottom-color: var(
       --_tab-indicator-bottom-color,
@@ -371,22 +396,30 @@ const z = v`
     font-weight: var(--hx-tabs-tab-active-font-weight, var(--hx-font-weight-semibold, 600));
   }
 
-  /* ─── Focus State ─── */
+  /* ─── Focus State ───
+     Focus lands on the HOST in Group 5a host-canonical mode. The inner
+     [part="tab"] is presentational (tabindex=-1). Use :host(:focus-visible). */
 
-  .tab:focus-visible {
+  :host(:focus-visible) .tab {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
+  /* Strip the default host focus ring — outline lands on the inner [part="tab"]
+     surface above for visual continuity with the existing component appearance. */
+  :host(:focus) {
+    outline: none;
+  }
+
   /* ─── Disabled State ─── */
 
   :host([disabled]) {
     cursor: not-allowed;
   }
 
-  .tab[aria-disabled='true'] {
+  :host([disabled]) .tab {
     pointer-events: none;
     color: var(--hx-tabs-tab-disabled-color, var(--hx-color-neutral-400, #8e9c98));
   }
@@ -418,34 +451,73 @@ const z = v`
       background-color: ButtonFace;
     }
 
-    .tab[aria-selected='true'] {
+    :host([selected]) .tab {
       color: HighlightText;
       background-color: Highlight;
       border-bottom-color: Highlight;
     }
 
-    .tab:focus-visible {
+    :host(:focus-visible) .tab {
       outline: 3px solid Highlight;
       outline-offset: 2px;
     }
 
-    .tab[aria-disabled='true'] {
+    :host([disabled]) .tab {
       color: GrayText;
     }
   }
 `;
-var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, f = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(e, a) : e, r = t.length - 1, o; r >= 0; r--)
-    (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
-  return i && s && D(e, a, s), s;
+var B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, f = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? D(e, s) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (a = (i ? r(e, s, a) : r(a)) || a);
+  return i && a && B(e, s, a), a;
 };
-let c = class extends T {
+let c = class extends A {
   constructor() {
-    super(...arguments), this.panel = "", this.selected = !1, this.disabled = !1, this.controls = "", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1;
+    super(...arguments), this.panel = "", this.selected = !1, this.disabled = !1, this.controls = "", this._supportsIdrefRefs = !0, this._ariaMirror = null, this._controlledPanel = null, this._hasPrefixSlot = !1, this._hasSuffixSlot = !1;
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this.closest("hx-tabs");
+    super.connectedCallback(), this._supportsIdrefRefs = S(this._internals), this.closest("hx-tabs"), this._syncHostAriaSemantics(), this._ariaMirror = T(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._ariaMirror) == null || t.disconnect(), this._ariaMirror = null;
+  }
+  updated(t) {
+    super.updated(t), (t.has("selected") || t.has("disabled") || t.has("controls") || t.has("panel")) && this._syncHostAriaSemantics();
+  }
+  /**
+   * Set by `<hx-tabs>` whenever the tab→panel relationship is recomputed.
+   * Drives `internals.ariaControlsElements` (modern path) so AT walks across
+   * the shadow boundary to the controlled panel by element reference.
+   * @internal
+   */
+  setControlsPanel(t) {
+    this._controlledPanel = t, this._syncHostAriaSemantics();
+  }
+  /**
+   * Mirror reactive ARIA state onto ElementInternals on the **host**. The
+   * inner `<button>` no longer carries role/aria-* on the modern path — the
+   * host is the canonical AT-announced surface. The button stays as the
+   * activation surface (Enter/Space/click) but is `tabindex=-1` and
+   * presentational from AT's perspective.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    const t = this._internals;
+    if (t.role = "tab", t.ariaSelected = this.selected ? "true" : "false", t.ariaDisabled = this.disabled ? "true" : null, this._supportsIdrefRefs) {
+      const a = t;
+      a.ariaControlsElements = this._controlledPanel ? [this._controlledPanel] : null;
+    }
+    const e = this.getAttribute("aria-labelledby"), s = this.getAttribute("aria-label"), i = m(this, e);
+    if (this._supportsIdrefRefs) {
+      const a = t;
+      a.ariaLabelledByElements = i.length > 0 ? i : null;
+    }
+    s && s.trim() ? t.ariaLabel = s : !this._supportsIdrefRefs && i.length > 0 ? t.ariaLabel = i.map((a) => I(a)).filter(Boolean).join(" ") || null : t.ariaLabel = null;
   }
   // ─── Event Handling ───
   /** @internal */
@@ -470,15 +542,31 @@ let c = class extends T {
   }
   // ─── Render ───
   render() {
-    return _`
+    return !this._supportsIdrefRefs && this.controls ? this.setAttribute("aria-controls", this.controls) : this._supportsIdrefRefs && this.hasAttribute("aria-controls") && this.removeAttribute("aria-controls"), this._supportsIdrefRefs ? v`
+        <div
+          part="tab"
+          class="tab"
+          tabindex="-1"
+          aria-disabled=${this.disabled ? "true" : C}
+          @click=${this._handleClick}
+        >
+          <span part="prefix" class="tab__prefix" ?hidden=${!this._hasPrefixSlot}>
+            <slot name="prefix" @slotchange=${this._handlePrefixSlotChange}></slot>
+          </span>
+          <slot></slot>
+          <span part="suffix" class="tab__suffix" ?hidden=${!this._hasSuffixSlot}>
+            <slot name="suffix" @slotchange=${this._handleSuffixSlotChange}></slot>
+          </span>
+        </div>
+      ` : v`
       <button
         part="tab"
         class="tab"
         role="tab"
+        tabindex="-1"
         aria-selected=${this.selected ? "true" : "false"}
         aria-disabled=${this.disabled ? "true" : "false"}
-        aria-controls=${this.controls || I}
-        tabindex=${this.selected ? "0" : "-1"}
+        aria-controls=${this.controls || C}
         @click=${this._handleClick}
       >
         <span part="prefix" class="tab__prefix" ?hidden=${!this._hasPrefixSlot}>
@@ -492,29 +580,32 @@ let c = class extends T {
     `;
   }
 };
-c.styles = [z, y];
+c.styles = [N, E];
 f([
-  h({ type: String, reflect: !0 })
+  b({ type: String, reflect: !0 })
 ], c.prototype, "panel", 2);
 f([
-  h({ type: Boolean, reflect: !0 })
+  b({ type: Boolean, reflect: !0 })
 ], c.prototype, "selected", 2);
 f([
-  h({ type: Boolean, reflect: !0 })
+  b({ type: Boolean, reflect: !0 })
 ], c.prototype, "disabled", 2);
 f([
-  h({ type: String, attribute: !1 })
+  b({ type: String, attribute: !1 })
 ], c.prototype, "controls", 2);
 f([
-  g()
+  u()
+], c.prototype, "_supportsIdrefRefs", 2);
+f([
+  u()
 ], c.prototype, "_hasPrefixSlot", 2);
 f([
-  g()
+  u()
 ], c.prototype, "_hasSuffixSlot", 2);
 c = f([
-  m("hx-tab")
+  y("hx-tab")
 ], c);
-const M = v`
+const z = g`
   :host {
     display: block;
   }
@@ -556,38 +647,71 @@ const M = v`
     }
   }
 `;
-var K = Object.defineProperty, R = Object.getOwnPropertyDescriptor, A = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? R(e, a) : e, r = t.length - 1, o; r >= 0; r--)
-    (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
-  return i && s && K(e, a, s), s;
+var j = Object.defineProperty, F = Object.getOwnPropertyDescriptor, w = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? F(e, s) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (a = (i ? r(e, s, a) : r(a)) || a);
+  return i && a && j(e, s, a), a;
 };
-let x = class extends T {
+let x = class extends A {
   constructor() {
-    super(...arguments), this.name = "";
+    super(...arguments), this.name = "", this._labelledByTabs = [], this._supportsIdrefRefs = !0, this._ariaMirror = null;
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "tabpanel");
+    super.connectedCallback(), this._supportsIdrefRefs = S(this._internals), this._internals.role = "tabpanel", this._syncHostAriaSemantics(), this._ariaMirror = T(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._ariaMirror) == null || t.disconnect(), this._ariaMirror = null;
+  }
+  updated(t) {
+    super.updated(t), this._syncHostAriaSemantics();
+  }
+  /**
+   * Set by `<hx-tabs>` whenever the tab→panel relationship is recomputed.
+   * Drives `internals.ariaLabelledByElements` so AT walks across the shadow
+   * boundary to the announcing tab host(s) by element reference rather than
+   * IDREF string. Pass an empty array to clear.
+   * @internal
+   */
+  setLabelledByTabs(t) {
+    this._labelledByTabs = t, this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _syncHostAriaSemantics() {
+    const t = this._internals;
+    t.role = "tabpanel";
+    const e = this.getAttribute("aria-labelledby"), s = this.getAttribute("aria-describedby"), i = m(this, e), a = m(this, s), o = this.getAttribute("aria-label"), r = i.length > 0 ? i : [...this._labelledByTabs];
+    if (this._supportsIdrefRefs) {
+      const n = t;
+      n.ariaLabelledByElements = r.length > 0 ? r : null, n.ariaDescribedByElements = a.length > 0 ? a : null, t.ariaLabel = o && o.trim() ? o : null;
+    } else
+      t.ariaLabel = o && o.trim() ? o : null;
   }
   // ─── Render ───
   render() {
-    return _`
+    return v`
       <div part="panel" class="panel">
         <slot></slot>
       </div>
     `;
   }
 };
-x.styles = [M, y];
-A([
-  h({ type: String, reflect: !0 })
+x.styles = [z, H];
+w([
+  b({ type: String, reflect: !0 })
 ], x.prototype, "name", 2);
-x = A([
-  m("hx-tab-panel")
+w([
+  u()
+], x.prototype, "_supportsIdrefRefs", 2);
+x = w([
+  y("hx-tab-panel")
 ], x);
 export {
   c as H,
   x as a,
-  b
+  d as b
 };
-//# sourceMappingURL=hx-tab-panel-DspCrKqo.js.map
+//# sourceMappingURL=hx-tab-panel-BQtBXKLD.js.map