@helixui/library 1.0.0 → 1.1.1

package/dist/shared/{hx-list-CdRNgeoP.js → hx-list-DwInEX2H.js}

@@ -1,8 +1,9 @@
-import { css as f, LitElement as v, html as a, nothing as p } from "lit";
-import { property as o, customElement as b } from "lit/decorators.js";
-import { ifDefined as m } from "lit/directives/if-defined.js";
-import { tokenStyles as x } from "@helixui/tokens/lit";
-const y = f`
+import { css as v, LitElement as b, html as a, nothing as p } from "lit";
+import { property as o, customElement as x } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { tokenStyles as y } from "@helixui/tokens/lit";
+import { classMap as m } from "lit/directives/class-map.js";
+const _ = v`
   :host {
     display: block;
   }
@@ -50,7 +51,7 @@ const y = f`
     border-bottom: var(--hx-border-width-thin, 1px) solid
       var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
   }
-`, _ = f`
+`, g = v`
   :host {
     display: block;
   }
@@ -152,13 +153,19 @@ const y = f`
     color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));
     margin-top: var(--hx-space-1, 0.25rem);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([interactive]) .list-item {
+      transition: none;
+    }
+  }
 `;
-var g = 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--)
+var $ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, c = (t, e, r, s) => {
+  for (var i = s > 1 ? void 0 : s ? k(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 && g(e, r, i), i;
+  return s && i && $(e, r, i), i;
 };
-let n = class extends v {
+let n = class extends b {
   constructor() {
     super(...arguments), this.disabled = !1, this.selected = !1, this.href = void 0, this.value = void 0, this.interactive = !1, this.type = "default";
   }
@@ -169,14 +176,12 @@ let n = class extends v {
    * 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].
    */
+  /** @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"));
   }
-  _handleClick(t) {
-    if (this.disabled) {
-      t.preventDefault(), t.stopPropagation();
-      return;
-    }
+  /** @internal */
+  _dispatchListItemClick() {
     this.dispatchEvent(
       new CustomEvent("hx-list-item-click", {
         bubbles: !0,
@@ -185,6 +190,15 @@ let n = class extends v {
       })
     );
   }
+  /** @internal */
+  _handleClick(t) {
+    if (this.disabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    this._dispatchListItemClick();
+  }
+  /** @internal */
   _renderContent() {
     return a`
       <span part="prefix" class="list-item__prefix">
@@ -207,7 +221,7 @@ let n = class extends v {
     return this.type === "term" ? a`
         <dt
           part="base"
-          class="list-item ${this.disabled ? "list-item--disabled" : ""}"
+          class=${m({ "list-item": !0, "list-item--disabled": this.disabled })}
           aria-disabled=${this.disabled ? "true" : p}
         >
           ${this._renderContent()}
@@ -215,7 +229,7 @@ let n = class extends v {
       ` : this.type === "definition" ? a`
         <dd
           part="base"
-          class="list-item ${this.disabled ? "list-item--disabled" : ""}"
+          class=${m({ "list-item": !0, "list-item--disabled": this.disabled })}
           aria-disabled=${this.disabled ? "true" : p}
         >
           ${this._renderContent()}
@@ -224,7 +238,11 @@ let n = class extends v {
         <li
           part="base"
           role="presentation"
-          class="list-item ${this.selected ? "list-item--selected" : ""} ${this.disabled ? "list-item--disabled" : ""}"
+          class=${m({
+      "list-item": !0,
+      "list-item--selected": this.selected,
+      "list-item--disabled": this.disabled
+    })}
           @click=${this._handleClick}
           @keydown=${this._handleKeydown}
         >
@@ -237,14 +255,18 @@ let n = class extends v {
           role="listitem"
           aria-disabled=${this.disabled ? "true" : p}
         >
-          <a class="list-item__link" href=${m(this.href)} @click=${this._handleClick}>
+          <a class="list-item__link" href=${u(this.href)} @click=${this._handleClick}>
             ${this._renderContent()}
           </a>
         </li>
       ` : a`
       <li
         part="base"
-        class="list-item ${this.selected ? "list-item--selected" : ""} ${this.disabled ? "list-item--disabled" : ""}"
+        class=${m({
+      "list-item": !0,
+      "list-item--selected": this.selected,
+      "list-item--disabled": this.disabled
+    })}
         role="listitem"
         aria-disabled=${this.disabled ? "true" : p}
         @click=${this._handleClick}
@@ -254,11 +276,12 @@ let n = class extends v {
       </li>
     `;
   }
+  /** @internal */
   _handleKeydown(t) {
-    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.disabled || this._handleClick(t));
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.disabled || this._dispatchListItemClick());
   }
 };
-n.styles = [x, _];
+n.styles = [y, g];
 c([
   o({ type: Boolean, reflect: !0 })
 ], n.prototype, "disabled", 2);
@@ -278,14 +301,14 @@ c([
   o({ type: String, reflect: !0 })
 ], n.prototype, "type", 2);
 n = c([
-  b("hx-list-item")
+  x("hx-list-item")
 ], n);
-var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, u = (t, e, r, s) => {
-  for (var i = s > 1 ? void 0 : s ? w(e, r) : e, l = t.length - 1, d; l >= 0; l--)
+var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, f = (t, e, r, s) => {
+  for (var i = s > 1 ? void 0 : s ? C(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;
+  return s && i && w(e, r, i), i;
 };
-let h = class extends v {
+let h = class extends b {
   constructor() {
     super(...arguments), this.variant = "plain", this.divided = !1, this.label = void 0, this._handleKeydown = (t) => {
       var l;
@@ -326,14 +349,17 @@ let h = class extends v {
    * Sets the `interactive` property on all child hx-list-item elements
    * so they can style and behave correctly without `:host-context()`.
    */
+  /** @internal */
   _updateItemStates() {
     const t = this.variant === "interactive", e = this.querySelectorAll("hx-list-item");
     for (const r of e)
       r.interactive = t;
   }
+  /** @internal */
   _handleSlotChange() {
     this._updateItemStates();
   }
+  /** @internal */
   _handleItemClick(t) {
     if (this.variant !== "interactive" || !(t.target instanceof n)) return;
     const e = t.target;
@@ -351,7 +377,7 @@ let h = class extends v {
         <dl
           part="base"
           class="list list--${this.variant}"
-          aria-label=${m(this.label)}
+          aria-label=${u(this.label)}
           @hx-list-item-click=${this._handleItemClick}
         >
           ${s}
@@ -361,7 +387,7 @@ let h = class extends v {
           part="base"
           role="list"
           class="list list--${this.variant}"
-          aria-label=${m(this.label)}
+          aria-label=${u(this.label)}
           @hx-list-item-click=${this._handleItemClick}
         >
           ${s}
@@ -371,7 +397,7 @@ let h = class extends v {
         part="base"
         class="list list--${this.variant}"
         role=${t ? "listbox" : "list"}
-        aria-label=${m(this.label)}
+        aria-label=${u(this.label)}
         aria-multiselectable=${t ? "false" : p}
         @hx-list-item-click=${this._handleItemClick}
       >
@@ -380,21 +406,21 @@ let h = class extends v {
     `;
   }
 };
-h.styles = [x, y];
-u([
+h.styles = [y, _];
+f([
   o({ type: String, reflect: !0 })
 ], h.prototype, "variant", 2);
-u([
+f([
   o({ type: Boolean, reflect: !0 })
 ], h.prototype, "divided", 2);
-u([
+f([
   o({ type: String })
 ], h.prototype, "label", 2);
-h = u([
-  b("hx-list")
+h = f([
+  x("hx-list")
 ], h);
 export {
   h as H,
   n as a
 };
-//# sourceMappingURL=hx-list-CdRNgeoP.js.map
+//# sourceMappingURL=hx-list-DwInEX2H.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-list-DwInEX2H.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, #e2e8f0));\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, #0f172a));\n    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, #f8fafc));\n  }\n\n  :host([interactive]):focus-visible .list-item {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\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, #eff6ff));\n    color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1d4ed8));\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\n      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\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, #64748b));\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","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\n\n/**\n * A rich list item for use inside `hx-list`.\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 LitElement {\n  static override styles = [tokenStyles, helixListItemStyles];\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  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   * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n   */\n  /** @internal */\n  private _syncHostAria(): void {\n    if (this.interactive) {\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    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-selected');\n      this.removeAttribute('aria-disabled');\n      this.removeAttribute('tabindex');\n    }\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 { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\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 */\n@customElement('hx-list')\nexport class HelixList extends LitElement {\n  static override styles = [tokenStyles, helixListStyles];\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  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (changedProps.has('variant')) {\n      this._updateItemStates();\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  /** @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    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=${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","LitElement","changedProps","e","html","classMap","nothing","ifDefined","tokenStyles","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":"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"}

package/dist/shared/{hx-menu-divider-11Dp2VfM.js → hx-menu-divider-DR4G_rqw.js}

@@ -1,9 +1,9 @@
-import { css as p, LitElement as f, nothing as h, html as c } from "lit";
-import { property as u, customElement as x, state as _ } from "lit/decorators.js";
-import { tokenStyles as v } from "@helixui/tokens/lit";
-import { d as g } from "./dev-warn-YlwPHjtX.js";
-import { classMap as y } from "lit/directives/class-map.js";
-const k = p`
+import { css as p, LitElement as f, html as u, nothing as h } from "lit";
+import { property as c, customElement as x, state as v, query as g } from "lit/decorators.js";
+import { tokenStyles as _ } from "@helixui/tokens/lit";
+import { d as y } from "./dev-warn-YlwPHjtX.js";
+import { classMap as k } from "lit/directives/class-map.js";
+const I = p`
   :host {
     display: block;
   }
@@ -25,15 +25,16 @@ const k = p`
     outline: none;
   }
 `;
-var I = Object.defineProperty, w = Object.getOwnPropertyDescriptor, b = (e, t, s, n) => {
-  for (var i = n > 1 ? void 0 : n ? w(t, s) : t, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (i = (n ? o(t, s, i) : o(i)) || i);
-  return n && i && I(t, s, i), i;
+var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, b = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? C(t, s) : t, r = e.length - 1, o; r >= 0; r--)
+    (o = e[r]) && (n = (i ? o(t, s, n) : o(n)) || n);
+  return i && n && w(t, s, n), n;
 };
 let d = class extends f {
   constructor() {
-    super(...arguments), this.label = "", this._focusedIndex = -1, this._typeaheadBuffer = "";
+    super(...arguments), this.label = "", this._focusedIndex = -1, this._typeaheadBuffer = "", this._typeaheadTimer = null;
   }
+  /** @internal */
   _getItems() {
     return Array.from(this.querySelectorAll("hx-menu-item")).filter(
       (e) => !e.disabled && !e.loading
@@ -43,10 +44,11 @@ let d = class extends f {
    * Synchronize roving tabindex across all enabled items.
    * Only the active item (or first item if none active) gets tabindex=0.
    */
+  /** @internal */
   _syncRovingTabIndex() {
     const e = this._getItems(), t = this._focusedIndex >= 0 ? this._focusedIndex : 0;
-    e.forEach((s, n) => {
-      s.setRovingTabIndex(n === t ? 0 : -1);
+    e.forEach((s, i) => {
+      s.setRovingTabIndex(i === t ? 0 : -1);
     });
   }
   /** Focus the first menu item. */
@@ -59,6 +61,7 @@ let d = class extends f {
     const e = this._getItems(), t = e[e.length - 1];
     t !== void 0 && (this._focusedIndex = e.length - 1, this._syncRovingTabIndex(), t.focus());
   }
+  /** @internal */
   _focusItem(e) {
     const t = this._getItems();
     if (t.length === 0) return;
@@ -66,11 +69,13 @@ let d = class extends f {
     const s = t[this._focusedIndex];
     s !== void 0 && s.focus();
   }
+  /** @internal */
   _updateFocusedIndex() {
-    var n;
-    const e = this._getItems(), t = ((n = this.shadowRoot) == null ? void 0 : n.activeElement) ?? document.activeElement, s = e.findIndex((i) => i.matches(":focus-within") || i === t);
+    var i;
+    const e = this._getItems(), t = ((i = this.shadowRoot) == null ? void 0 : i.activeElement) ?? document.activeElement, s = e.findIndex((n) => n.matches(":focus-within") || n === t);
     s !== -1 && (this._focusedIndex = s);
   }
+  /** @internal */
   _handleKeyDown(e) {
     this._updateFocusedIndex();
     const t = this._getItems();
@@ -96,26 +101,30 @@ let d = class extends f {
           break;
       }
   }
+  /** @internal */
   _handleTypeahead(e, t) {
-    clearTimeout(this._typeaheadTimeout), this._typeaheadBuffer += e.toLowerCase(), this._typeaheadTimeout = setTimeout(() => {
-      this._typeaheadBuffer = "";
+    this._typeaheadTimer !== null && clearTimeout(this._typeaheadTimer), this._typeaheadBuffer += e.toLowerCase(), this._typeaheadTimer = setTimeout(() => {
+      this._typeaheadBuffer = "", this._typeaheadTimer = null;
     }, 500);
-    const s = t.findIndex((n) => {
+    const s = t.findIndex((i) => {
       var r;
-      return n.disabled || n.hasAttribute("disabled") ? !1 : (((r = n.textContent) == null ? void 0 : r.trim().toLowerCase()) ?? "").startsWith(this._typeaheadBuffer);
+      return i.disabled || i.hasAttribute("disabled") ? !1 : (((r = i.textContent) == null ? void 0 : r.trim().toLowerCase()) ?? "").startsWith(this._typeaheadBuffer);
     });
     s !== -1 && this._focusItem(s);
   }
+  /** @internal */
   _handleSlotChange(e) {
     const t = e.target;
     if (!(t instanceof HTMLSlotElement)) return;
-    const s = /* @__PURE__ */ new Set(["hx-menu-item", "hx-menu-divider"]), n = t.assignedElements().filter((i) => !s.has(i.tagName.toLowerCase()));
-    n.length > 0 && g(
+    const s = /* @__PURE__ */ new Set(["hx-menu-item", "hx-menu-divider"]), i = t.assignedElements().filter((n) => !s.has(n.tagName.toLowerCase()));
+    i.length > 0 && y(
       "hx-menu",
-      `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${n.map((i) => `<${i.tagName.toLowerCase()}>`).join(", ")}`
+      `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${i.map((n) => `<${n.tagName.toLowerCase()}>`).join(", ")}`
     ), this._syncRovingTabIndex();
   }
+  /** @internal */
   _handleItemSelect(e) {
+    if (!(e instanceof CustomEvent)) return;
     const t = e.detail, s = this._getItems();
     this._focusedIndex = s.indexOf(t.item), this.dispatchEvent(
       new CustomEvent("hx-select", {
@@ -125,13 +134,19 @@ let d = class extends f {
       })
     );
   }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._typeaheadTimer !== null && (clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null);
+  }
+  firstUpdated() {
+    this.label;
+  }
   render() {
-    return c`
+    return u`
       <div
         part="base"
         class="menu"
         role="menu"
-        aria-label=${this.label || h}
+        aria-label=${this.label || "Menu"}
         @keydown=${this._handleKeyDown}
         @hx-item-select=${this._handleItemSelect}
       >
@@ -140,9 +155,9 @@ let d = class extends f {
     `;
   }
 };
-d.styles = [v, k];
+d.styles = [_, I];
 b([
-  u({ type: String, reflect: !0 })
+  c({ type: String, reflect: !0 })
 ], d.prototype, "label", 2);
 d = b([
   x("hx-menu")
@@ -184,8 +199,8 @@ const S = p`
 
   .menu-item:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #3b82f6));
-    outline-offset: 0px;
+      var(--hx-menu-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-menu-item-focus-ring-offset, 0px);
   }
 
   .menu-item__prefix,
@@ -233,16 +248,24 @@ const S = p`
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .menu-item {
+      transition: none;
+    }
+
+    .menu-item__checked-icon {
+      transition: none;
+    }
+
     .menu-item__spinner {
       animation: none;
       opacity: var(--hx-opacity-muted, 0.6);
     }
   }
 `;
-var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (e, t, s, n) => {
-  for (var i = n > 1 ? void 0 : n ? $(t, s) : t, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (i = (n ? o(t, s, i) : o(i)) || i);
-  return n && i && C(t, s, i), i;
+var T = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? $(t, s) : t, r = e.length - 1, o; r >= 0; r--)
+    (o = e[r]) && (n = (i ? o(t, s, n) : o(n)) || n);
+  return i && n && T(t, s, n), n;
 };
 let a = class extends f {
   constructor() {
@@ -254,13 +277,18 @@ let a = class extends f {
   }
   /** Focus the inner interactive element. */
   focus(e) {
-    var t, s;
-    (s = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".menu-item")) == null || s.focus(e);
+    var t;
+    (t = this._menuItemEl) == null || t.focus(e);
   }
+  connectedCallback() {
+    super.connectedCallback(), this.closest('hx-menu, hx-split-button, [role="menu"], [role="menubar"]');
+  }
+  /** @internal */
   _handleSubmenuSlotChange(e) {
     const t = e.target;
     this._hasSubmenu = t.assignedElements().length > 0;
   }
+  /** @internal */
   _activate() {
     if (!(this.disabled || this.loading)) {
       if (this.type === "checkbox")
@@ -280,6 +308,7 @@ let a = class extends f {
       );
     }
   }
+  /** @internal */
   _handleClick(e) {
     if (this.disabled || this.loading) {
       e.preventDefault(), e.stopPropagation();
@@ -287,6 +316,7 @@ let a = class extends f {
     }
     this._activate();
   }
+  /** @internal */
   _handleKeyDown(e) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault(), this._activate();
@@ -300,8 +330,9 @@ let a = class extends f {
       })
     ));
   }
+  /** @internal */
   _renderCheckedIcon() {
-    return c`
+    return u`
       <span part="checked-icon" class="menu-item__checked-icon" aria-hidden="true">
         <svg
           width="1em"
@@ -318,8 +349,9 @@ let a = class extends f {
       </span>
     `;
   }
+  /** @internal */
   _renderSubmenuIcon() {
-    return c`
+    return u`
       <span part="submenu-icon" class="menu-item__submenu-icon" aria-hidden="true">
         <svg
           width="1em"
@@ -336,8 +368,9 @@ let a = class extends f {
       </span>
     `;
   }
+  /** @internal */
   _renderSpinner() {
-    return c`
+    return u`
       <svg class="menu-item__spinner" aria-hidden="true" viewBox="0 0 24 24" fill="none">
         <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.3" />
         <path
@@ -349,6 +382,7 @@ let a = class extends f {
       </svg>
     `;
   }
+  /** @internal */
   _getRole() {
     switch (this.type) {
       case "checkbox":
@@ -364,10 +398,10 @@ let a = class extends f {
       "menu-item": !0,
       "menu-item--checked": this.checked
     };
-    return c`
+    return u`
       <div
         part="base"
-        class=${y(s)}
+        class=${k(s)}
         role=${e}
         tabindex=${this.disabled ? "-1" : String(this._rovingTabIndex)}
         aria-disabled=${this.disabled ? "true" : h}
@@ -394,32 +428,35 @@ let a = class extends f {
     `;
   }
 };
-a.styles = [v, S];
+a.styles = [_, S];
 l([
-  _()
+  v()
 ], a.prototype, "_rovingTabIndex", 2);
 l([
-  u({ type: String })
+  c({ type: String })
 ], a.prototype, "value", 2);
 l([
-  u({ type: Boolean, reflect: !0 })
+  c({ type: Boolean, reflect: !0 })
 ], a.prototype, "disabled", 2);
 l([
-  u({ type: Boolean, reflect: !0 })
+  c({ type: Boolean, reflect: !0 })
 ], a.prototype, "checked", 2);
 l([
-  u({ type: String, reflect: !0 })
+  c({ type: String, reflect: !0 })
 ], a.prototype, "type", 2);
 l([
-  u({ type: Boolean, reflect: !0 })
+  c({ type: Boolean, reflect: !0 })
 ], a.prototype, "loading", 2);
 l([
-  _()
+  v()
 ], a.prototype, "_hasSubmenu", 2);
+l([
+  g(".menu-item")
+], a.prototype, "_menuItemEl", 2);
 a = l([
   x("hx-menu-item")
 ], a);
-const D = p`
+const E = p`
   :host {
     display: block;
   }
@@ -430,14 +467,14 @@ const D = p`
     margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));
   }
 `;
-var E = Object.getOwnPropertyDescriptor, T = (e, t, s, n) => {
-  for (var i = n > 1 ? void 0 : n ? E(t, s) : t, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (i = o(i) || i);
-  return i;
+var D = Object.getOwnPropertyDescriptor, M = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? D(t, s) : t, r = e.length - 1, o; r >= 0; r--)
+    (o = e[r]) && (n = o(n) || n);
+  return n;
 };
 let m = class extends f {
   render() {
-    return c`<div
+    return u`<div
       part="base"
       class="menu-divider"
       role="separator"
@@ -445,8 +482,8 @@ let m = class extends f {
     ></div>`;
   }
 };
-m.styles = [v, D];
-m = T([
+m.styles = [_, E];
+m = M([
   x("hx-menu-divider")
 ], m);
 export {
@@ -454,4 +491,4 @@ export {
   m as a,
   a as b
 };
-//# sourceMappingURL=hx-menu-divider-11Dp2VfM.js.map
+//# sourceMappingURL=hx-menu-divider-DR4G_rqw.js.map