@helixui/library 3.3.1 → 3.4.0-next.121

package/dist/shared/{hx-list-MyEhh8c7.js → hx-list-De66EtAP.js}

@@ -1,10 +1,12 @@
-import { css as v, html as a, nothing as h } from "lit";
-import { property as n, customElement as b } from "lit/decorators.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { a as x } from "./forced-colors-CTEDFRGa.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { H as y } from "./helix-element-BNEYeiys.js";
-const _ = v`
+import { css as _, html as n, nothing as f } from "lit";
+import { property as d, customElement as x } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { a as y } from "./forced-colors-CTEDFRGa.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { s as g, i as k, r as I } from "./aria-idref-CxvyzfQS.js";
+import { f as A } from "./aria-flatten-DY6v2vah.js";
+import { H as $ } from "./helix-element-BNEYeiys.js";
+const C = _`
   :host {
     display: block;
   }
@@ -62,7 +64,7 @@ const _ = v`
       border-bottom-color: CanvasText;
     }
   }
-`, g = v`
+`, w = _`
   :host {
     display: block;
   }
@@ -201,25 +203,49 @@ const _ = v`
     }
   }
 `;
-var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (t, e, r, s) => {
-  for (var i = s > 1 ? void 0 : s ? $(e, r) : e, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (i = (s ? d(e, r, i) : d(i)) || i);
-  return s && i && k(e, r, i), i;
+var L = Object.defineProperty, H = Object.getOwnPropertyDescriptor, h = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? H(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = (r ? l(t, s, i) : l(i)) || i);
+  return r && i && L(t, s, i), i;
 };
-let o = class extends y {
+let o = class extends $ {
   constructor() {
-    super(...arguments), this.disabled = !1, this.selected = !1, this.href = void 0, this.value = void 0, this.interactive = !1, this.type = "default";
+    super(...arguments), this.disabled = !1, this.selected = !1, this.href = void 0, this.value = void 0, this.interactive = !1, this.type = "default", this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "";
   }
-  updated(t) {
-    super.updated(t), (t.has("interactive") || t.has("selected") || t.has("disabled")) && this._syncHostAria();
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : g(this._internals), this._syncHostAria(), this._ariaMirror = k(this, () => {
+      this._syncHostAria();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    super.updated(e), (e.has("interactive") || e.has("selected") || e.has("disabled")) && this._syncHostAria();
   }
   /**
    * Syncs ARIA attributes to the host element when in interactive (listbox option) mode.
-   * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].
+   * Preserves the prior imperative `setAttribute('role', 'option')` path so existing
+   * consumer queries and tests continue to pass. ALSO mirrors the same surface onto
+   * `internals.role` / `internals.ariaSelected` (modern path) so cross-shadow IDREF
+   * resolution through `internals.ariaLabelledByElements` works on engines that
+   * support it.
    */
   /** @internal */
   _syncHostAria() {
-    this.interactive ? (this.setAttribute("role", "option"), this.setAttribute("aria-selected", String(this.selected)), this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0")) : (this.removeAttribute("role"), this.removeAttribute("aria-selected"), this.removeAttribute("aria-disabled"), this.removeAttribute("tabindex"));
+    var p;
+    const e = this._internals, t = this.interactive;
+    t ? (this.setAttribute("role", "option"), this.setAttribute("aria-selected", String(this.selected)), this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"), this._supportsIdrefRefs ? (e.role = "option", e.ariaSelected = this.selected ? "true" : "false", e.ariaDisabled = this.disabled ? "true" : null) : (e.role = null, e.ariaSelected = null, e.ariaDisabled = null)) : (this.removeAttribute("role"), this.removeAttribute("aria-selected"), this.removeAttribute("aria-disabled"), this.removeAttribute("tabindex"), e.role = null, e.ariaSelected = null, e.ariaDisabled = null);
+    const s = ((p = this.getAttribute("aria-label")) == null ? void 0 : p.trim()) || "", r = this.getAttribute("aria-labelledby"), i = I(this, r), a = i.length > 0;
+    if (this._supportsIdrefRefs && t) {
+      const u = e;
+      u.ariaLabelledByElements = a ? i : null, a ? e.ariaLabel = null : s ? e.ariaLabel = s : e.ariaLabel = null;
+    }
+    let l = "";
+    a ? l = i.map((u) => A(u)).filter(Boolean).join(" ") || s || "" : s && (l = s), this._resolvedAccessibleName = l;
   }
   /** @internal */
   _dispatchListItemClick() {
@@ -232,16 +258,16 @@ let o = class extends y {
     );
   }
   /** @internal */
-  _handleClick(t) {
+  _handleClick(e) {
     if (this.disabled) {
-      t.preventDefault(), t.stopPropagation();
+      e.preventDefault(), e.stopPropagation();
       return;
     }
     this._dispatchListItemClick();
   }
   /** @internal */
   _renderContent() {
-    return a`
+    return n`
       <span part="prefix" class="list-item__prefix">
         <slot name="prefix"></slot>
       </span>
@@ -259,27 +285,27 @@ let o = class extends y {
     `;
   }
   render() {
-    return this.type === "term" ? a`
+    return this.type === "term" ? n`
         <dt
           part="base"
-          class=${m({ "list-item": !0, "list-item--disabled": this.disabled })}
-          aria-disabled=${this.disabled ? "true" : h}
+          class=${b({ "list-item": !0, "list-item--disabled": this.disabled })}
+          aria-disabled=${this.disabled ? "true" : f}
         >
           ${this._renderContent()}
         </dt>
-      ` : this.type === "definition" ? a`
+      ` : this.type === "definition" ? n`
         <dd
           part="base"
-          class=${m({ "list-item": !0, "list-item--disabled": this.disabled })}
-          aria-disabled=${this.disabled ? "true" : h}
+          class=${b({ "list-item": !0, "list-item--disabled": this.disabled })}
+          aria-disabled=${this.disabled ? "true" : f}
         >
           ${this._renderContent()}
         </dd>
-      ` : this.interactive ? a`
+      ` : this.interactive ? n`
         <li
           part="base"
           role="presentation"
-          class=${m({
+          class=${b({
       "list-item": !0,
       "list-item--selected": this.selected,
       "list-item--disabled": this.disabled
@@ -289,27 +315,27 @@ let o = class extends y {
         >
           ${this._renderContent()}
         </li>
-      ` : this.href !== void 0 && !this.disabled ? a`
+      ` : this.href !== void 0 && !this.disabled ? n`
         <li
           part="base"
           class="list-item"
           role="listitem"
-          aria-disabled=${this.disabled ? "true" : h}
+          aria-disabled=${this.disabled ? "true" : f}
         >
-          <a class="list-item__link" href=${u(this.href)} @click=${this._handleClick}>
+          <a class="list-item__link" href=${m(this.href)} @click=${this._handleClick}>
             ${this._renderContent()}
           </a>
         </li>
-      ` : a`
+      ` : n`
       <li
         part="base"
-        class=${m({
+        class=${b({
       "list-item": !0,
       "list-item--selected": this.selected,
       "list-item--disabled": this.disabled
     })}
         role="listitem"
-        aria-disabled=${this.disabled ? "true" : h}
+        aria-disabled=${this.disabled ? "true" : f}
         @click=${this._handleClick}
         @keydown=${this._handleKeydown}
       >
@@ -318,73 +344,79 @@ let o = class extends y {
     `;
   }
   /** @internal */
-  _handleKeydown(t) {
-    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.disabled || this._dispatchListItemClick());
+  _handleKeydown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.disabled || this._dispatchListItemClick());
   }
 };
-o.styles = [g, x];
-c([
-  n({ type: Boolean, reflect: !0 })
+o.styles = [w, y];
+o.__testSupportsIdrefRefsOverride = null;
+h([
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-c([
-  n({ type: Boolean, reflect: !0 })
+h([
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "selected", 2);
-c([
-  n({ type: String })
+h([
+  d({ type: String })
 ], o.prototype, "href", 2);
-c([
-  n({ type: String })
+h([
+  d({ type: String })
 ], o.prototype, "value", 2);
-c([
-  n({ type: Boolean, reflect: !0 })
+h([
+  d({ type: Boolean, reflect: !0 })
 ], o.prototype, "interactive", 2);
-c([
-  n({ type: String, reflect: !0 })
+h([
+  d({ type: String, reflect: !0 })
 ], o.prototype, "type", 2);
-o = c([
-  b("hx-list-item")
+o = h([
+  x("hx-list-item")
 ], o);
-var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (t, e, r, s) => {
-  for (var i = s > 1 ? void 0 : s ? w(e, r) : e, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (i = (s ? d(e, r, i) : d(i)) || i);
-  return s && i && C(e, r, i), i;
+var R = Object.defineProperty, D = Object.getOwnPropertyDescriptor, v = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? D(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = (r ? l(t, s, i) : l(i)) || i);
+  return r && i && R(t, s, i), i;
 };
-let p = class extends y {
+let c = class extends $ {
   constructor() {
-    super(...arguments), this.variant = "plain", this.divided = !1, this.label = void 0, this._handleKeydown = (t) => {
-      var l;
+    super(...arguments), this.variant = "plain", this.divided = !1, this.label = void 0, this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "", this._handleKeydown = (e) => {
+      var a;
       if (this.variant !== "interactive") return;
-      const e = Array.from(this.querySelectorAll("hx-list-item:not([disabled])"));
-      if (e.length === 0) return;
-      const r = this.querySelector("hx-list-item:focus"), s = r ? e.indexOf(r) : -1;
-      let i = s;
-      switch (t.key) {
+      const t = Array.from(this.querySelectorAll("hx-list-item:not([disabled])"));
+      if (t.length === 0) return;
+      const s = this.querySelector("hx-list-item:focus"), r = s ? t.indexOf(s) : -1;
+      let i = r;
+      switch (e.key) {
         case "ArrowDown":
-          t.preventDefault(), i = s < e.length - 1 ? s + 1 : 0;
+          e.preventDefault(), i = r < t.length - 1 ? r + 1 : 0;
           break;
         case "ArrowUp":
-          t.preventDefault(), i = s > 0 ? s - 1 : e.length - 1;
+          e.preventDefault(), i = r > 0 ? r - 1 : t.length - 1;
           break;
         case "Home":
-          t.preventDefault(), i = 0;
+          e.preventDefault(), i = 0;
           break;
         case "End":
-          t.preventDefault(), i = e.length - 1;
+          e.preventDefault(), i = t.length - 1;
           break;
         default:
           return;
       }
-      (l = e[i]) == null || l.focus();
+      (a = t[i]) == null || a.focus();
     };
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown);
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : g(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = k(this, () => {
+      this._syncHostAriaSemantics();
+    });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
+    var e;
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
   }
-  updated(t) {
-    super.updated(t), t.has("variant") && this._updateItemStates(), this.variant === "interactive" && this.label;
+  updated(e) {
+    super.updated(e), e.has("variant") && (this._updateItemStates(), this._syncHostAriaSemantics()), e.has("label") && this._syncHostAriaSemantics(), this.variant === "interactive" && this.label;
   }
   /**
    * Sets the `interactive` property on all child hx-list-item elements
@@ -392,76 +424,100 @@ let p = class extends y {
    */
   /** @internal */
   _updateItemStates() {
-    const t = this.variant === "interactive", e = this.querySelectorAll("hx-list-item");
-    for (const r of e)
-      r.interactive = t;
+    const e = this.variant === "interactive", t = this.querySelectorAll("hx-list-item");
+    for (const s of t)
+      s.interactive = e;
+  }
+  /**
+   * Resolve the host's role for the current variant. Description variant
+   * uses native `<dl>` semantics (returns `null` so the host carries no
+   * explicit role). Interactive variant becomes `listbox`. All other
+   * variants are `list`.
+   * @internal
+   */
+  _hostRole() {
+    return this.variant === "description" ? null : this.variant === "interactive" ? "listbox" : "list";
+  }
+  /** @internal */
+  _syncHostAriaSemantics() {
+    var p;
+    const e = this._internals, t = this._hostRole();
+    !this._supportsIdrefRefs || t === null ? (e.role = null, e.ariaLabel = null, e.ariaMultiSelectable = null) : (e.role = t, e.ariaMultiSelectable = t === "listbox" ? "false" : null);
+    const s = ((p = this.getAttribute("aria-label")) == null ? void 0 : p.trim()) || "", r = this.getAttribute("aria-labelledby"), i = I(this, r), a = i.length > 0;
+    if (this._supportsIdrefRefs && t !== null) {
+      const u = e;
+      u.ariaLabelledByElements = a ? i : null;
+    }
+    let l = "";
+    a ? (l = i.map((S) => A(S)).filter(Boolean).join(" ") || s || this.label || "", this._supportsIdrefRefs && t !== null && (e.ariaLabel = null)) : s ? (l = s, this._supportsIdrefRefs && t !== null && (e.ariaLabel = s)) : this.label ? (l = this.label, this._supportsIdrefRefs && t !== null && (e.ariaLabel = this.label)) : (l = "", this._supportsIdrefRefs && t !== null && (e.ariaLabel = null)), this._resolvedAccessibleName !== l && (this._resolvedAccessibleName = l, this._supportsIdrefRefs || this.requestUpdate());
   }
   /** @internal */
   _handleSlotChange() {
     this._updateItemStates();
   }
   /** @internal */
-  _handleItemClick(t) {
-    if (this.variant !== "interactive" || !(t.target instanceof o)) return;
-    const e = t.target;
-    e.disabled || this.dispatchEvent(
+  _handleItemClick(e) {
+    if (this.variant !== "interactive" || !(e.target instanceof o)) return;
+    const t = e.target;
+    t.disabled || this.dispatchEvent(
       new CustomEvent("hx-select", {
         bubbles: !0,
         composed: !0,
-        detail: { item: e, value: e.value }
+        detail: { item: t, value: t.value }
       })
     );
   }
   render() {
-    const t = this.variant === "interactive", e = this.variant === "numbered", r = this.variant === "description", s = a`<slot @slotchange=${this._handleSlotChange}></slot>`;
-    return r ? a`
+    const e = this.variant === "interactive", t = this.variant === "numbered", s = this.variant === "description", r = n`<slot @slotchange=${this._handleSlotChange}></slot>`;
+    return s ? n`
         <dl
           part="base"
           class="list list--${this.variant}"
-          aria-label=${u(this.label)}
+          aria-label=${m(this.label)}
           @hx-list-item-click=${this._handleItemClick}
         >
-          ${s}
+          ${r}
         </dl>
-      ` : e ? a`
+      ` : t ? n`
         <div
           part="base"
           role="list"
           class="list list--${this.variant}"
-          aria-label=${u(this.label)}
+          aria-label=${m(this.label)}
           @hx-list-item-click=${this._handleItemClick}
         >
-          ${s}
+          ${r}
         </div>
-      ` : a`
+      ` : n`
       <div
         part="base"
         class="list list--${this.variant}"
-        role=${t ? "listbox" : "list"}
-        aria-label=${t ? this.label || h : u(this.label)}
-        aria-multiselectable=${t ? "false" : h}
+        role=${e ? "listbox" : "list"}
+        aria-label=${e ? this.label || f : m(this.label)}
+        aria-multiselectable=${e ? "false" : f}
         @hx-list-item-click=${this._handleItemClick}
       >
-        ${s}
+        ${r}
       </div>
     `;
   }
 };
-p.styles = [_, x];
-f([
-  n({ type: String, reflect: !0 })
-], p.prototype, "variant", 2);
-f([
-  n({ type: Boolean, reflect: !0 })
-], p.prototype, "divided", 2);
-f([
-  n({ type: String })
-], p.prototype, "label", 2);
-p = f([
-  b("hx-list")
-], p);
+c.styles = [C, y];
+c.__testSupportsIdrefRefsOverride = null;
+v([
+  d({ type: String, reflect: !0 })
+], c.prototype, "variant", 2);
+v([
+  d({ type: Boolean, reflect: !0 })
+], c.prototype, "divided", 2);
+v([
+  d({ type: String })
+], c.prototype, "label", 2);
+c = v([
+  x("hx-list")
+], c);
 export {
-  p as H,
+  c as H,
   o as a
 };
-//# sourceMappingURL=hx-list-MyEhh8c7.js.map
+//# sourceMappingURL=hx-list-De66EtAP.js.map

package/dist/shared/hx-list-De66EtAP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-list-De66EtAP.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n  :host {\n    display: block;\n  }\n\n  .list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-list-gap, 0);\n  }\n\n  /* ─── Variant: bulleted ─── */\n\n  .list--bulleted {\n    padding-inline-start: var(--hx-space-6, 1.5rem);\n    list-style: disc;\n  }\n\n  /* ─── Variant: numbered ─── */\n\n  .list--numbered {\n    padding-inline-start: var(--hx-space-6, 1.5rem);\n    list-style: decimal;\n  }\n\n  /* ─── Variant: interactive ─── */\n\n  .list--interactive {\n    list-style: none;\n    padding: 0;\n  }\n\n  /* ─── Variant: description ─── */\n\n  .list--description {\n    padding: 0;\n    list-style: none;\n  }\n\n  /* ─── Dividers ─── */\n\n  :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-list-divider-color, var(--hx-color-neutral-200, #d6dbd5));\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    /* Divider borders are already using a border property, which forced-colors respects.\n       Ensure the system color is used for divider borders. */\n    :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n      border-bottom-color: CanvasText;\n    }\n  }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Base list item ─── */\n\n  .list-item {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n    color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0d1825));\n    font-family: var(--hx-list-item-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: default;\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── */\n\n  :host([interactive]) .list-item {\n    cursor: pointer;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n    background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f5f8f3));\n  }\n\n  :host([interactive]):focus-visible .list-item {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Selected state ─── */\n\n  .list-item--selected {\n    background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #ebf8f8));\n    color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #0f6363));\n  }\n\n  /* ─── Disabled state ─── */\n\n  .list-item--disabled {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Link mode ─── */\n\n  .list-item__link {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-3, 0.75rem);\n    width: 100%;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  .list-item__link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  /* ─── Slots ─── */\n\n  .list-item__prefix,\n  .list-item__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .list-item__body {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .list-item__label {\n    display: block;\n  }\n\n  .list-item__description {\n    display: block;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #66787b));\n    margin-top: var(--hx-space-1, 0.25rem);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host([interactive]) .list-item {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast / forced-colors mode) ─── */\n\n  @media (forced-colors: active) {\n    /* Selected state: replace background-color with a visible border using system Highlight color */\n    :host([interactive]) .list-item--selected {\n      background-color: transparent;\n      border: 2px solid Highlight;\n      color: HighlightText;\n      forced-color-adjust: none;\n    }\n\n    /* Hover state: use an outline instead of background-color */\n    :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n      background-color: transparent;\n      outline: 1px solid Highlight;\n      outline-offset: -1px;\n    }\n\n    /* Disabled state: use system GrayText color */\n    :host([interactive][disabled]) .list-item,\n    :host([interactive]) .list-item--disabled {\n      color: GrayText;\n    }\n\n    /* Focus ring: ensure visibility in forced-colors mode */\n    :host([interactive]):focus-visible .list-item {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      forced-color-adjust: none;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport {\n  installAriaIdrefMirror,\n  resolveIdrefTokens,\n  supportsIdrefElementReferences,\n  type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\nimport { flattenAccName } from '../../utils/aria-flatten.js';\n\n/**\n * A rich list item for use inside `hx-list`.\n *\n * Group 7 host-canonical: `role=\"option\"` (interactive listbox mode) is\n * mirrored onto the **host** via `_internals.role` AND the legacy\n * setAttribute('role',...) path. The dual-surface pattern preserves the\n * existing imperative host-attribute behaviour (so consumers querying\n * `host.getAttribute('role')` still work) while adding cross-shadow IDREF\n * wiring through `internals.ariaLabelledByElements` for engines that\n * support it.\n *\n * @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n *\n * @tag hx-list-item\n *\n * @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-list-item-click -\n *   Dispatched when the item is clicked and not disabled.\n *\n * @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n *\n * @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n */\n@customElement('hx-list-item')\nexport class HelixListItem extends HelixElement {\n  static override styles = [helixListItemStyles, forcedColorsSurface];\n\n  /**\n   * Test seam (Group 7 host-canonical migration): see other Group 7 components.\n   * Production code MUST NOT touch this field.\n   * @internal\n   */\n  static __testSupportsIdrefRefsOverride: boolean | null = null;\n\n  /**\n   * Whether the item is disabled. Prevents interaction.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the item is selected (used in interactive mode).\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * When set, renders the item as a link (only in non-interactive variants).\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * The value associated with this item (used with hx-select).\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * Set by the parent hx-list to indicate this item is part of an interactive listbox.\n   * Controls CSS styling and ARIA role via host attributes.\n   * @attr interactive\n   */\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  /**\n   * Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n   * @attr type\n   */\n  @property({ type: String, reflect: true })\n  type: 'default' | 'term' | 'definition' = 'default';\n\n  // ─── Host-canonical ARIA bookkeeping ───\n\n  /** @internal */\n  private _supportsIdrefRefs = true;\n\n  /** @internal */\n  private _ariaMirror: AriaIdrefMirrorHandle | null = null;\n\n  /** @internal */\n  private _resolvedAccessibleName = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    const ctor = this.constructor as typeof HelixListItem;\n    this._supportsIdrefRefs =\n      ctor.__testSupportsIdrefRefsOverride !== null\n        ? ctor.__testSupportsIdrefRefsOverride\n        : supportsIdrefElementReferences(this._internals);\n    this._syncHostAria();\n    this._ariaMirror = installAriaIdrefMirror(this, () => {\n      this._syncHostAria();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ariaMirror?.disconnect();\n    this._ariaMirror = null;\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (\n      changedProps.has('interactive') ||\n      changedProps.has('selected') ||\n      changedProps.has('disabled')\n    ) {\n      this._syncHostAria();\n    }\n  }\n\n  /**\n   * Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n   * Preserves the prior imperative `setAttribute('role', 'option')` path so existing\n   * consumer queries and tests continue to pass. ALSO mirrors the same surface onto\n   * `internals.role` / `internals.ariaSelected` (modern path) so cross-shadow IDREF\n   * resolution through `internals.ariaLabelledByElements` works on engines that\n   * support it.\n   */\n  /** @internal */\n  private _syncHostAria(): void {\n    const internals = this._internals;\n    const isInteractiveOption = this.interactive;\n\n    if (isInteractiveOption) {\n      this.setAttribute('role', 'option');\n      this.setAttribute('aria-selected', String(this.selected));\n      if (this.disabled) {\n        this.setAttribute('aria-disabled', 'true');\n      } else {\n        this.removeAttribute('aria-disabled');\n      }\n      if (!this.disabled) {\n        this.setAttribute('tabindex', '0');\n      } else {\n        this.removeAttribute('tabindex');\n      }\n\n      if (this._supportsIdrefRefs) {\n        internals.role = 'option';\n        internals.ariaSelected = this.selected ? 'true' : 'false';\n        internals.ariaDisabled = this.disabled ? 'true' : null;\n      } else {\n        internals.role = null;\n        internals.ariaSelected = null;\n        internals.ariaDisabled = null;\n      }\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-selected');\n      this.removeAttribute('aria-disabled');\n      this.removeAttribute('tabindex');\n\n      internals.role = null;\n      internals.ariaSelected = null;\n      internals.ariaDisabled = null;\n    }\n\n    // Cross-shadow IDREF wiring (independent of role placement). Consumer-\n    // supplied `aria-labelledby` on the host resolves through the shared\n    // mirror, projecting onto `ariaLabelledByElements` on engines that\n    // support it.\n    const hostAriaLabel = this.getAttribute('aria-label')?.trim() || '';\n    const consumerLabelledBy = this.getAttribute('aria-labelledby');\n    const labelEls = resolveIdrefTokens(this, consumerLabelledBy);\n    const hasEffectiveLabelledBy = labelEls.length > 0;\n\n    type InternalsWithRefs = ElementInternals & {\n      ariaLabelledByElements: Element[] | null;\n    };\n\n    if (this._supportsIdrefRefs && isInteractiveOption) {\n      const refsInternals = internals as InternalsWithRefs;\n      refsInternals.ariaLabelledByElements = hasEffectiveLabelledBy ? labelEls : null;\n      if (hasEffectiveLabelledBy) {\n        // Element refs win on the modern path; clear ariaLabel so it isn't\n        // shadowed by a stale string.\n        internals.ariaLabel = null;\n      } else if (hostAriaLabel) {\n        internals.ariaLabel = hostAriaLabel;\n      } else {\n        internals.ariaLabel = null;\n      }\n    }\n\n    let resolved = '';\n    if (hasEffectiveLabelledBy) {\n      resolved =\n        labelEls\n          .map((el) => flattenAccName(el))\n          .filter(Boolean)\n          .join(' ') ||\n        hostAriaLabel ||\n        '';\n    } else if (hostAriaLabel) {\n      resolved = hostAriaLabel;\n    }\n    this._resolvedAccessibleName = resolved;\n  }\n\n  /** @internal */\n  private _dispatchListItemClick(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ item: HelixListItem; value: string | undefined }>('hx-list-item-click', {\n        bubbles: true,\n        composed: true,\n        detail: { item: this, value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this._dispatchListItemClick();\n  }\n\n  /** @internal */\n  private _renderContent() {\n    return html`\n      <span part=\"prefix\" class=\"list-item__prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span class=\"list-item__body\">\n        <span part=\"label\" class=\"list-item__label\">\n          <slot></slot>\n        </span>\n        <span part=\"description\" class=\"list-item__description\">\n          <slot name=\"description\"></slot>\n        </span>\n      </span>\n      <span part=\"suffix\" class=\"list-item__suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  override render() {\n    // Description list: render as <dt> (term) or <dd> (definition)\n    if (this.type === 'term') {\n      return html`\n        <dt\n          part=\"base\"\n          class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          ${this._renderContent()}\n        </dt>\n      `;\n    }\n\n    if (this.type === 'definition') {\n      return html`\n        <dd\n          part=\"base\"\n          class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          ${this._renderContent()}\n        </dd>\n      `;\n    }\n\n    // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n    // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n    if (this.interactive) {\n      // In interactive mode, links are not rendered as <a> to avoid\n      // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n      return html`\n        <li\n          part=\"base\"\n          role=\"presentation\"\n          class=${classMap({\n            'list-item': true,\n            'list-item--selected': this.selected,\n            'list-item--disabled': this.disabled,\n          })}\n          @click=${this._handleClick}\n          @keydown=${this._handleKeydown}\n        >\n          ${this._renderContent()}\n        </li>\n      `;\n    }\n\n    // Non-interactive with href: render as link\n    if (this.href !== undefined && !this.disabled) {\n      return html`\n        <li\n          part=\"base\"\n          class=\"list-item\"\n          role=\"listitem\"\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n            ${this._renderContent()}\n          </a>\n        </li>\n      `;\n    }\n\n    // Default non-interactive\n    return html`\n      <li\n        part=\"base\"\n        class=${classMap({\n          'list-item': true,\n          'list-item--selected': this.selected,\n          'list-item--disabled': this.disabled,\n        })}\n        role=\"listitem\"\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n      >\n        ${this._renderContent()}\n      </li>\n    `;\n  }\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.disabled) {\n        this._dispatchListItemClick();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-list-item': HelixListItem;\n  }\n}\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\nimport {\n  installAriaIdrefMirror,\n  resolveIdrefTokens,\n  supportsIdrefElementReferences,\n  type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\nimport { flattenAccName } from '../../utils/aria-flatten.js';\n\n/**\n * A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n *\n * Group 7 host-canonical: `role=\"list\"` (or `role=\"listbox\"` in interactive\n * mode) lives on the **host** via `_internals.role`, harmonizing with\n * `hx-structured-list` (the gold-standard exemplar for Group 7). The `<dl>`\n * description variant keeps native semantics — no host role assigned, since\n * `<dl>` IS the semantic surface and AT walks it directly.\n *\n * @summary Container for list items with optional dividers and interactive selection.\n *\n * @tag hx-list\n *\n * @slot - Default slot for `hx-list-item` elements.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-select - Dispatched\n *   when an item is clicked in interactive mode.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-200] - Color.\n */\n@customElement('hx-list')\nexport class HelixList extends HelixElement {\n  static override styles = [helixListStyles, forcedColorsSurface];\n\n  /**\n   * Test seam (Group 7 host-canonical migration): see other Group 7 components.\n   * Production code MUST NOT touch this field.\n   * @internal\n   */\n  static __testSupportsIdrefRefsOverride: boolean | null = null;\n\n  /**\n   * Visual variant of the list.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'plain' | 'bulleted' | 'numbered' | 'description' | 'interactive' = 'plain';\n\n  /**\n   * Whether to show dividers between list items.\n   * @attr divided\n   */\n  @property({ type: Boolean, reflect: true })\n  divided = false;\n\n  /**\n   * Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  // ─── Host-canonical ARIA bookkeeping ───\n\n  /** @internal */\n  private _supportsIdrefRefs = true;\n\n  /** @internal */\n  private _ariaMirror: AriaIdrefMirrorHandle | null = null;\n\n  /** @internal */\n  private _resolvedAccessibleName = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n    const ctor = this.constructor as typeof HelixList;\n    this._supportsIdrefRefs =\n      ctor.__testSupportsIdrefRefsOverride !== null\n        ? ctor.__testSupportsIdrefRefsOverride\n        : supportsIdrefElementReferences(this._internals);\n    this._syncHostAriaSemantics();\n    this._ariaMirror = installAriaIdrefMirror(this, () => {\n      this._syncHostAriaSemantics();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n    this._ariaMirror?.disconnect();\n    this._ariaMirror = null;\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (changedProps.has('variant')) {\n      this._updateItemStates();\n      this._syncHostAriaSemantics();\n    }\n    if (changedProps.has('label')) {\n      this._syncHostAriaSemantics();\n    }\n    if (this.variant === 'interactive' && !this.label) {\n      devWarn(\n        'hx-list',\n        'The \"label\" attribute is required when variant is \"interactive\". ' +\n          'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n      );\n    }\n  }\n\n  /**\n   * Sets the `interactive` property on all child hx-list-item elements\n   * so they can style and behave correctly without `:host-context()`.\n   */\n  /** @internal */\n  private _updateItemStates(): void {\n    const isInteractive = this.variant === 'interactive';\n    const items = this.querySelectorAll('hx-list-item');\n    for (const item of items) {\n      (item as HelixListItem).interactive = isInteractive;\n    }\n  }\n\n  /**\n   * Resolve the host's role for the current variant. Description variant\n   * uses native `<dl>` semantics (returns `null` so the host carries no\n   * explicit role). Interactive variant becomes `listbox`. All other\n   * variants are `list`.\n   * @internal\n   */\n  private _hostRole(): 'list' | 'listbox' | null {\n    if (this.variant === 'description') return null;\n    if (this.variant === 'interactive') return 'listbox';\n    return 'list';\n  }\n\n  /** @internal */\n  private _syncHostAriaSemantics(): void {\n    const internals = this._internals;\n    const role = this._hostRole();\n\n    if (!this._supportsIdrefRefs || role === null) {\n      // Either the engine lacks IDL element references, or the variant uses\n      // native <dl> semantics — clear host role/state writes so we don't\n      // duplicate AT surfaces.\n      internals.role = null;\n      internals.ariaLabel = null;\n      internals.ariaMultiSelectable = null;\n    } else {\n      internals.role = role;\n      // Listbox is single-select today (matches the prior hardcoded\n      // aria-multiselectable=\"false\" on the inner div). When multi-select\n      // becomes a use case, parameterise via a property.\n      internals.ariaMultiSelectable = role === 'listbox' ? 'false' : null;\n    }\n\n    const hostAriaLabel = this.getAttribute('aria-label')?.trim() || '';\n    const consumerLabelledBy = this.getAttribute('aria-labelledby');\n    const labelEls = resolveIdrefTokens(this, consumerLabelledBy);\n    const hasEffectiveLabelledBy = labelEls.length > 0;\n\n    type InternalsWithRefs = ElementInternals & {\n      ariaLabelledByElements: Element[] | null;\n    };\n\n    if (this._supportsIdrefRefs && role !== null) {\n      const refsInternals = internals as InternalsWithRefs;\n      refsInternals.ariaLabelledByElements = hasEffectiveLabelledBy ? labelEls : null;\n    }\n\n    let resolved = '';\n    if (hasEffectiveLabelledBy) {\n      const flattened =\n        labelEls\n          .map((el) => flattenAccName(el))\n          .filter(Boolean)\n          .join(' ') ||\n        hostAriaLabel ||\n        this.label ||\n        '';\n      resolved = flattened;\n      if (this._supportsIdrefRefs && role !== null) {\n        internals.ariaLabel = null;\n      }\n    } else if (hostAriaLabel) {\n      resolved = hostAriaLabel;\n      if (this._supportsIdrefRefs && role !== null) {\n        internals.ariaLabel = hostAriaLabel;\n      }\n    } else if (this.label) {\n      resolved = this.label;\n      if (this._supportsIdrefRefs && role !== null) {\n        internals.ariaLabel = this.label;\n      }\n    } else {\n      resolved = '';\n      if (this._supportsIdrefRefs && role !== null) {\n        internals.ariaLabel = null;\n      }\n    }\n\n    if (this._resolvedAccessibleName !== resolved) {\n      this._resolvedAccessibleName = resolved;\n      if (!this._supportsIdrefRefs) {\n        this.requestUpdate();\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._updateItemStates();\n  }\n\n  /** @internal */\n  private readonly _handleKeydown = (e: KeyboardEvent): void => {\n    if (this.variant !== 'interactive') return;\n\n    const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n    if (items.length === 0) return;\n\n    const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n    const currentIndex = focused ? items.indexOf(focused) : -1;\n\n    let nextIndex = currentIndex;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextIndex = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextIndex = items.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    items[nextIndex]?.focus();\n  };\n\n  /** @internal */\n  private _handleItemClick(e: Event): void {\n    if (this.variant !== 'interactive') return;\n\n    if (!(e.target instanceof HelixListItem)) return;\n    const item = e.target;\n    if (item.disabled) return;\n\n    this.dispatchEvent(\n      new CustomEvent<{ item: HelixListItem; value: string | undefined }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item, value: item.value },\n      }),\n    );\n  }\n\n  override render() {\n    const isInteractive = this.variant === 'interactive';\n    const isNumbered = this.variant === 'numbered';\n    const isDescription = this.variant === 'description';\n\n    const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n    // Dual-surface (Group 7 hx-progress-ring exemplar / hx-structured-list\n    // gold standard): inner element keeps role + label for legacy AT and\n    // consumer queries. Host adds cross-shadow IDREF wiring via internals.*\n    // in _syncHostAriaSemantics().\n    if (isDescription) {\n      return html`\n        <dl\n          part=\"base\"\n          class=\"list list--${this.variant}\"\n          aria-label=${ifDefined(this.label)}\n          @hx-list-item-click=${this._handleItemClick}\n        >\n          ${slot}\n        </dl>\n      `;\n    }\n\n    if (isNumbered) {\n      return html`\n        <div\n          part=\"base\"\n          role=\"list\"\n          class=\"list list--${this.variant}\"\n          aria-label=${ifDefined(this.label)}\n          @hx-list-item-click=${this._handleItemClick}\n        >\n          ${slot}\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"list list--${this.variant}\"\n        role=${isInteractive ? 'listbox' : 'list'}\n        aria-label=${isInteractive ? this.label || nothing : ifDefined(this.label)}\n        aria-multiselectable=${isInteractive ? 'false' : nothing}\n        @hx-list-item-click=${this._handleItemClick}\n      >\n        ${slot}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-list': HelixList;\n  }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","HelixElement","ctor","supportsIdrefElementReferences","installAriaIdrefMirror","_a","changedProps","internals","isInteractiveOption","hostAriaLabel","consumerLabelledBy","labelEls","resolveIdrefTokens","hasEffectiveLabelledBy","refsInternals","resolved","el","flattenAccName","html","classMap","nothing","ifDefined","forcedColorsSurface","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","isInteractive","item","role","isNumbered","isDescription","slot"],"mappings":"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"}