@helixui/library 1.0.1 → 1.1.2-next.1

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

@@ -1,9 +1,9 @@
-import { css as p, LitElement as f, html as c, nothing as h } 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, i) => {
-  for (var n = i > 1 ? void 0 : i ? w(t, s) : t, r = e.length - 1, o; r >= 0; r--)
+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 && I(t, s, 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,6 +44,7 @@ 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, i) => {
@@ -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 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,9 +101,10 @@ 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((i) => {
       var r;
@@ -106,16 +112,19 @@ let d = class extends f {
     });
     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"]), i = t.assignedElements().filter((n) => !s.has(n.tagName.toLowerCase()));
-    i.length > 0 && g(
+    i.length > 0 && y(
       "hx-menu",
       `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,11 +134,14 @@ 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"
@@ -143,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")
@@ -236,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, 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 && C(t, s, n), n;
+  return i && n && T(t, s, n), n;
 };
 let a = class extends f {
   constructor() {
@@ -257,16 +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")
@@ -286,6 +308,7 @@ let a = class extends f {
       );
     }
   }
+  /** @internal */
   _handleClick(e) {
     if (this.disabled || this.loading) {
       e.preventDefault(), e.stopPropagation();
@@ -293,6 +316,7 @@ let a = class extends f {
     }
     this._activate();
   }
+  /** @internal */
   _handleKeyDown(e) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault(), this._activate();
@@ -306,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"
@@ -324,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"
@@ -342,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
@@ -355,6 +382,7 @@ let a = class extends f {
       </svg>
     `;
   }
+  /** @internal */
   _getRole() {
     switch (this.type) {
       case "checkbox":
@@ -370,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}
@@ -400,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;
   }
@@ -436,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, i) => {
-  for (var n = i > 1 ? void 0 : i ? E(t, s) : t, r = e.length - 1, o; r >= 0; r--)
+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"
@@ -451,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 {
@@ -460,4 +491,4 @@ export {
   m as a,
   a as b
 };
-//# sourceMappingURL=hx-menu-divider-DR8klkFT.js.map
+//# sourceMappingURL=hx-menu-divider-DR4G_rqw.js.map

package/dist/shared/hx-menu-divider-DR4G_rqw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-menu-divider-DR4G_rqw.js","sources":["../../src/components/hx-menu/hx-menu.styles.ts","../../src/components/hx-menu/hx-menu.ts","../../src/components/hx-menu/hx-menu-item.styles.ts","../../src/components/hx-menu/hx-menu-item.ts","../../src/components/hx-menu/hx-menu-divider.styles.ts","../../src/components/hx-menu/hx-menu-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMenuStyles = css`\n  :host {\n    display: block;\n  }\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    padding: var(--hx-space-1, 0.25rem);\n    background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-menu-shadow,\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1)\n    );\n    min-width: var(--hx-menu-min-width, 10rem);\n    outline: none;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuStyles } from './hx-menu.styles.js';\nimport type { HelixMenuItem } from './hx-menu-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A menu container that manages keyboard navigation over a list of menu items.\n * Use with `hx-menu-item` and `hx-menu-divider`.\n *\n * @summary Context/action menu with keyboard-navigable items.\n *\n * @tag hx-menu\n *\n * @slot - Default slot for hx-menu-item and hx-menu-divider elements.\n *\n * @fires {CustomEvent<{item: HelixMenuItem, value: string}>} hx-select - Dispatched when an item is selected.\n * @fires {CustomEvent<void>} hx-close - Dispatched when Escape is pressed.\n *\n * @csspart base - The root menu element.\n *\n * @cssprop [--hx-menu-bg=var(--hx-color-neutral-0)] - Menu background color.\n * @cssprop [--hx-menu-border-color=var(--hx-color-neutral-200)] - Menu border color.\n * @cssprop [--hx-menu-border-radius=var(--hx-border-radius-md)] - Menu border radius.\n * @cssprop [--hx-menu-shadow] - Menu box shadow.\n * @cssprop [--hx-menu-min-width=10rem] - Minimum menu width.\n */\n@customElement('hx-menu')\nexport class HelixMenu extends LitElement {\n  static override styles = [tokenStyles, helixMenuStyles];\n\n  /**\n   * Accessible label for the menu. Rendered as `aria-label` on the inner\n   * `role=\"menu\"` element when set.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Index of the currently focused menu item within the list of enabled items.\n   * @internal\n   */\n  private _focusedIndex = -1;\n\n  /**\n   * Accumulated character buffer for typeahead search within menu items.\n   * @internal\n   */\n  private _typeaheadBuffer = '';\n\n  /**\n   * Timer handle that clears the typeahead buffer after a period of inactivity.\n   * @internal\n   */\n  private _typeaheadTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** @internal */\n  private _getItems(): HelixMenuItem[] {\n    return Array.from(this.querySelectorAll<HelixMenuItem>('hx-menu-item')).filter(\n      (item) => !item.disabled && !item.loading,\n    );\n  }\n\n  /**\n   * Synchronize roving tabindex across all enabled items.\n   * Only the active item (or first item if none active) gets tabindex=0.\n   */\n  /** @internal */\n  private _syncRovingTabIndex(): void {\n    const items = this._getItems();\n    const activeIndex = this._focusedIndex >= 0 ? this._focusedIndex : 0;\n    items.forEach((item, i) => {\n      item.setRovingTabIndex(i === activeIndex ? 0 : -1);\n    });\n  }\n\n  /** Focus the first menu item. */\n  focusFirst(): void {\n    const items = this._getItems();\n    const first = items[0];\n    if (first !== undefined) {\n      this._focusedIndex = 0;\n      this._syncRovingTabIndex();\n      first.focus();\n    }\n  }\n\n  /** Focus the last menu item. */\n  focusLast(): void {\n    const items = this._getItems();\n    const last = items[items.length - 1];\n    if (last !== undefined) {\n      this._focusedIndex = items.length - 1;\n      this._syncRovingTabIndex();\n      last.focus();\n    }\n  }\n\n  /** @internal */\n  private _focusItem(index: number): void {\n    const items = this._getItems();\n    if (items.length === 0) return;\n    this._focusedIndex = Math.max(0, Math.min(index, items.length - 1));\n    this._syncRovingTabIndex();\n    const target = items[this._focusedIndex];\n    if (target !== undefined) target.focus();\n  }\n\n  /** @internal */\n  private _updateFocusedIndex(): void {\n    const items = this._getItems();\n    const active = this.shadowRoot?.activeElement ?? document.activeElement;\n    // Find the active item by checking if any item's shadow root contains the active element\n    const idx = items.findIndex((item) => item.matches(':focus-within') || item === active);\n    if (idx !== -1) this._focusedIndex = idx;\n  }\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    this._updateFocusedIndex();\n    const items = this._getItems();\n    if (items.length === 0) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        this._focusItem(this._focusedIndex + 1 < items.length ? this._focusedIndex + 1 : 0);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this._focusItem(this._focusedIndex > 0 ? this._focusedIndex - 1 : items.length - 1);\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._focusItem(0);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._focusItem(items.length - 1);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.dispatchEvent(new CustomEvent<void>('hx-close', { bubbles: true, composed: true }));\n        break;\n      default:\n        if (e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {\n          this._handleTypeahead(e.key, items);\n        }\n        break;\n    }\n  }\n\n  /** @internal */\n  private _handleTypeahead(char: string, items: HelixMenuItem[]): void {\n    if (this._typeaheadTimer !== null) {\n      clearTimeout(this._typeaheadTimer);\n    }\n    this._typeaheadBuffer += char.toLowerCase();\n    this._typeaheadTimer = setTimeout(() => {\n      this._typeaheadBuffer = '';\n      this._typeaheadTimer = null;\n    }, 500);\n\n    const match = items.findIndex((item) => {\n      if (item.disabled || item.hasAttribute('disabled')) return false;\n      const text = item.textContent?.trim().toLowerCase() ?? '';\n      return text.startsWith(this._typeaheadBuffer);\n    });\n\n    if (match !== -1) {\n      this._focusItem(match);\n    }\n  }\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target;\n    if (!(slot instanceof HTMLSlotElement)) return;\n    const validTags = new Set(['hx-menu-item', 'hx-menu-divider']);\n    const invalid = slot\n      .assignedElements()\n      .filter((el) => !validTags.has(el.tagName.toLowerCase()));\n    if (invalid.length > 0) {\n      devWarn(\n        'hx-menu',\n        `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n      );\n    }\n    // Initialize roving tabindex when items are slotted\n    this._syncRovingTabIndex();\n  }\n\n  /** @internal */\n  private _handleItemSelect(e: Event): void {\n    if (!(e instanceof CustomEvent)) return;\n    const detail = (e as CustomEvent<{ item: HelixMenuItem; value: string }>).detail;\n    const items = this._getItems();\n    this._focusedIndex = items.indexOf(detail.item);\n\n    this.dispatchEvent(\n      new CustomEvent<{ item: HelixMenuItem; value: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item: detail.item, value: detail.value },\n      }),\n    );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._typeaheadTimer !== null) {\n      clearTimeout(this._typeaheadTimer);\n      this._typeaheadTimer = null;\n    }\n  }\n\n  override firstUpdated(): void {\n    if (!this.label) {\n      devWarn(\n        'hx-menu',\n        'No accessible label provided. Set the `label` attribute on hx-menu so screen readers can identify this menu (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"menu\"\n        role=\"menu\"\n        aria-label=${this.label || 'Menu'}\n        @keydown=${this._handleKeyDown}\n        @hx-item-select=${this._handleItemSelect}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-menu': HelixMenu;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixMenuItemStyles = 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  .menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    cursor: pointer;\n    color: var(--hx-menu-item-color, var(--hx-color-neutral-900, #0f172a));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n    line-height: var(--hx-line-height-tight, 1.25);\n    user-select: none;\n    -webkit-user-select: none;\n    outline: none;\n    background: none;\n    width: 100%;\n    box-sizing: border-box;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .menu-item:hover,\n  .menu-item:focus-visible {\n    background-color: var(--hx-menu-item-hover-bg, var(--hx-color-neutral-100, #f1f5f9));\n  }\n\n  .menu-item:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-menu-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-menu-item-focus-ring-offset, 0px);\n  }\n\n  .menu-item__prefix,\n  .menu-item__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .menu-item__label {\n    flex: 1 1 auto;\n  }\n\n  .menu-item__checked-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    width: 1em;\n    opacity: 0;\n    transition: opacity var(--hx-transition-fast, 150ms ease);\n  }\n\n  .menu-item--checked .menu-item__checked-icon {\n    opacity: 1;\n  }\n\n  .menu-item__submenu-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n  }\n\n  .menu-item__spinner {\n    width: 1em;\n    height: 1em;\n    flex-shrink: 0;\n    animation: hx-menu-spin var(--hx-duration-spinner, 750ms) linear infinite;\n  }\n\n  @keyframes hx-menu-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .menu-item {\n      transition: none;\n    }\n\n    .menu-item__checked-icon {\n      transition: none;\n    }\n\n    .menu-item__spinner {\n      animation: none;\n      opacity: var(--hx-opacity-muted, 0.6);\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuItemStyles } from './hx-menu-item.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A single interactive item for use inside `hx-menu`. Supports normal, checkbox,\n * and radio types, loading state, prefix/suffix slots, and submenu nesting.\n * Use `aria-label` on the parent `hx-menu` to provide an accessible name.\n *\n * @summary Interactive item within an hx-menu.\n *\n * @tag hx-menu-item\n *\n * @slot - Default slot for the item label.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Shortcut text or icon rendered after the label.\n * @slot submenu - A nested hx-menu for submenu content.\n *\n * @fires {CustomEvent<{item: HelixMenuItem, value: string}>} hx-item-select - Dispatched when the item is activated via click, Enter, or Space.\n * @fires {CustomEvent<{item: HelixMenuItem}>} hx-item-submenu-open - Dispatched when ArrowRight is pressed on an item with a submenu.\n *\n * @csspart base - The root item element.\n * @csspart prefix - Prefix slot wrapper.\n * @csspart label - Label slot wrapper.\n * @csspart suffix - Suffix slot wrapper.\n * @csspart submenu-icon - The chevron icon indicating a submenu.\n * @csspart checked-icon - The checkmark icon for checkbox-type items.\n *\n * @cssprop [--hx-menu-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-menu-item-hover-bg=var(--hx-color-neutral-100)] - Item hover/focus background.\n */\n@customElement('hx-menu-item')\nexport class HelixMenuItem extends LitElement {\n  static override styles = [tokenStyles, helixMenuItemStyles];\n\n  /**\n   * @internal Managed by parent hx-menu for roving tabindex.\n   * Only the active item in the menu has tabindex=0; all others have -1.\n   */\n  @state()\n  private _rovingTabIndex = -1;\n\n  /** @internal Set the roving tabindex value. Called by parent hx-menu. */\n  setRovingTabIndex(value: number): void {\n    this._rovingTabIndex = value;\n  }\n\n  /**\n   * The value associated with this item, emitted in the hx-select event.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Whether the item is disabled. Prevents interaction and event dispatch.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the item is checked. Only meaningful when type=\"checkbox\".\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * The type of menu item. \"checkbox\" renders a checkmark and toggles checked state.\n   * \"radio\" renders a checkmark and emits selection for radio-group behavior.\n   * @attr type\n   */\n  @property({ type: String, reflect: true })\n  type: 'normal' | 'checkbox' | 'radio' = 'normal';\n\n  /**\n   * Whether the item is in a loading state. Shows a spinner and prevents interaction.\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /** @internal */\n  @state()\n  private _hasSubmenu = false;\n\n  /** @internal */\n  @query('.menu-item') private _menuItemEl!: HTMLElement | null;\n\n  /** Focus the inner interactive element. */\n  override focus(options?: FocusOptions): void {\n    this._menuItemEl?.focus(options);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // WCAG 4.1.2: menuitem role is only valid inside a role=\"menu\" or role=\"menubar\" container.\n    // Check the closest ancestor with a menu role.\n    const menuHost = this.closest('hx-menu, hx-split-button, [role=\"menu\"], [role=\"menubar\"]');\n    if (!menuHost) {\n      devWarn(\n        'hx-menu-item',\n        'hx-menu-item must be used inside an hx-menu or an element with role=\"menu\". ' +\n          'An orphaned menuitem violates WCAG 1.3.1 (Info and Relationships).',\n      );\n    }\n  }\n\n  /** @internal */\n  private _handleSubmenuSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSubmenu = slot.assignedElements().length > 0;\n  }\n\n  /** @internal */\n  private _activate(): void {\n    if (this.disabled || this.loading) return;\n\n    if (this.type === 'checkbox') {\n      this.checked = !this.checked;\n    } else if (this.type === 'radio') {\n      const menu = this.closest('hx-menu');\n      if (menu) {\n        menu\n          .querySelectorAll<HelixMenuItem>(':scope > hx-menu-item[type=\"radio\"]')\n          .forEach((sibling) => {\n            sibling.checked = sibling === this;\n          });\n      } else {\n        this.checked = true;\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<{ item: HelixMenuItem; value: string }>('hx-item-select', {\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 || this.loading) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    this._activate();\n  }\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._activate();\n      return;\n    }\n\n    if (e.key === 'ArrowRight' && this._hasSubmenu) {\n      e.preventDefault();\n      this.dispatchEvent(\n        new CustomEvent<{ item: HelixMenuItem }>('hx-item-submenu-open', {\n          bubbles: true,\n          composed: true,\n          detail: { item: this },\n        }),\n      );\n    }\n  }\n\n  /** @internal */\n  private _renderCheckedIcon() {\n    return html`\n      <span part=\"checked-icon\" class=\"menu-item__checked-icon\" aria-hidden=\"true\">\n        <svg\n          width=\"1em\"\n          height=\"1em\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  /** @internal */\n  private _renderSubmenuIcon() {\n    return html`\n      <span part=\"submenu-icon\" class=\"menu-item__submenu-icon\" aria-hidden=\"true\">\n        <svg\n          width=\"1em\"\n          height=\"1em\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <polyline points=\"9 18 15 12 9 6\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  /** @internal */\n  private _renderSpinner() {\n    return html`\n      <svg class=\"menu-item__spinner\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\" opacity=\"0.3\" />\n        <path\n          d=\"M12 2a10 10 0 0 1 10 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _getRole(): string {\n    switch (this.type) {\n      case 'checkbox':\n        return 'menuitemcheckbox';\n      case 'radio':\n        return 'menuitemradio';\n      default:\n        return 'menuitem';\n    }\n  }\n\n  override render() {\n    const role = this._getRole();\n    const hasCheckableRole = this.type === 'checkbox' || this.type === 'radio';\n    const classes = {\n      'menu-item': true,\n      'menu-item--checked': this.checked,\n    };\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap(classes)}\n        role=${role}\n        tabindex=${this.disabled ? '-1' : String(this._rovingTabIndex)}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        aria-checked=${hasCheckableRole ? (this.checked ? 'true' : 'false') : nothing}\n        aria-haspopup=${this._hasSubmenu ? 'true' : nothing}\n        aria-busy=${this.loading ? 'true' : nothing}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeyDown}\n      >\n        ${this.loading ? this._renderSpinner() : nothing}\n        ${hasCheckableRole ? this._renderCheckedIcon() : nothing}\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\"></slot>\n        </span>\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot></slot>\n        </span>\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\"></slot>\n        </span>\n        ${this._hasSubmenu ? this._renderSubmenuIcon() : nothing}\n        <slot name=\"submenu\" @slotchange=${this._handleSubmenuSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-menu-item': HelixMenuItem;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixMenuDividerStyles = css`\n  :host {\n    display: block;\n  }\n\n  .menu-divider {\n    height: var(--hx-border-width-thin, 1px);\n    background-color: var(--hx-menu-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n    margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuDividerStyles } from './hx-menu-divider.styles.js';\n\n/**\n * A visual separator for grouping items within an `hx-menu`.\n *\n * @summary Horizontal divider between menu sections.\n *\n * @tag hx-menu-divider\n *\n * @csspart base - The root separator element.\n *\n * @cssprop [--hx-menu-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n */\n@customElement('hx-menu-divider')\nexport class HelixMenuDivider extends LitElement {\n  static override styles = [tokenStyles, helixMenuDividerStyles];\n\n  override render() {\n    return html`<div\n      part=\"base\"\n      class=\"menu-divider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n    ></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-menu-divider': HelixMenuDivider;\n  }\n}\n"],"names":["helixMenuStyles","css","HelixMenu","LitElement","item","items","activeIndex","first","last","index","target","active","_a","idx","char","match","slot","validTags","invalid","el","devWarn","detail","html","tokenStyles","__decorateClass","property","customElement","helixMenuItemStyles","HelixMenuItem","value","options","menu","sibling","role","hasCheckableRole","classes","classMap","nothing","state","query","helixMenuDividerStyles","HelixMenuDivider"],"mappings":"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"}

package/dist/shared/{hx-meter-CZ7lnMra.js → hx-meter-CVs4A649.js}

@@ -1,9 +1,8 @@
-import { css as x, LitElement as f, nothing as _, html as v } from "lit";
+import { css as f, LitElement as g, nothing as x, html as v } from "lit";
 import { property as h, state as b, customElement as w } from "lit/decorators.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
-import { styleMap as y } from "lit/directives/style-map.js";
-import { tokenStyles as $ } from "@helixui/tokens/lit";
-const S = x`
+import { tokenStyles as y } from "@helixui/tokens/lit";
+const $ = f`
   :host {
     display: block;
     width: 100%;
@@ -26,9 +25,9 @@ const S = x`
   .meter__track {
     position: relative;
     width: 100%;
-    height: var(--hx-meter-track-height, var(--hx-size-2, 0.5rem));
+    height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));
     background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));
-    border-radius: var(--hx-meter-track-radius, var(--hx-radius-full, 9999px));
+    border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
     overflow: hidden;
   }
 
@@ -37,11 +36,20 @@ const S = x`
     inset-block: 0;
     inset-inline-start: 0;
     height: 100%;
+    width: 100%;
     border-radius: inherit;
     background-color: var(--_indicator-color);
+    transform-origin: left center;
+    transform: scaleX(var(--_value-ratio, 0));
     transition:
-      width var(--hx-duration-fast, 150ms) ease,
-      background-color var(--hx-duration-fast, 150ms) ease;
+      transform var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .meter__indicator {
+      transition: none;
+    }
   }
 
   /* ─── Default (no thresholds configured) ─── */
@@ -61,7 +69,7 @@ const S = x`
   }
 
   :host([data-state='danger']) {
-    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-danger-500, #ef4444));
+    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #dc2626));
   }
 
   /* ─── State Label (WCAG 1.4.1) ─── */
@@ -85,7 +93,13 @@ const S = x`
   }
 
   .meter__state-label[data-state='danger'] {
-    color: var(--hx-meter-color-danger, var(--hx-color-danger-700, #b91c1c));
+    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .meter__indicator {
+      transition: none;
+    }
   }
 
   /* ─── Native meter hidden (we use custom rendering) ─── */
@@ -102,74 +116,76 @@ const S = x`
     border: 0;
   }
 `;
-var L = Object.defineProperty, V = Object.getOwnPropertyDescriptor, l = (r, t, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? V(t, a) : t, o = r.length - 1, n; o >= 0; o--)
-    (n = r[o]) && (i = (s ? n(t, a, i) : n(i)) || i);
-  return s && i && L(t, a, i), i;
+var S = Object.defineProperty, L = Object.getOwnPropertyDescriptor, s = (e, t, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? L(t, i) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (a = (o ? l(t, i, a) : l(a)) || a);
+  return o && a && S(t, i, a), a;
 };
-let e = class extends f {
+let r = class extends g {
   constructor() {
-    super(...arguments), this._uid = `hx-meter-${++e._counter}`, this.value = 0, this.min = 0, this.max = 100, this._hasSlotContent = !1;
+    super(...arguments), this._uid = `hx-meter-${++r._counter}`, this.value = 0, this.min = 0, this.max = 100, this._hasSlotContent = !1;
   }
+  /** @internal */
   _clampedValue() {
     return Math.min(Math.max(this.value, this.min), this.max);
   }
+  /** @internal */
   _percentage() {
-    const r = this.max - this.min;
-    return r === 0 ? 0 : (this._clampedValue() - this.min) / r * 100;
+    const e = this.max - this.min;
+    return e === 0 ? 0 : (this._clampedValue() - this.min) / e * 100;
   }
+  /** @internal */
   _resolveState() {
-    const r = this._clampedValue(), t = this.low !== void 0, a = this.high !== void 0, s = this.optimum !== void 0;
-    if (!t && !a && !s) return "default";
-    const i = this.low ?? 0, o = this.high ?? this.max, n = t && r < i, c = a && r > o, d = !n && !c;
-    if (!s)
-      return n || c ? "warning" : "optimum";
-    const u = this.optimum ?? this.min, p = t && u < i, g = a && u > o;
-    return !p && !g ? d ? "optimum" : "warning" : p ? n ? "optimum" : d ? "warning" : "danger" : c ? "optimum" : d ? "warning" : "danger";
-  }
-  _onLabelSlotChange(r) {
-    const t = r.target;
+    const e = this._clampedValue(), t = this.low !== void 0, i = this.high !== void 0, o = this.optimum !== void 0;
+    if (!t && !i && !o) return "default";
+    const a = this.low ?? 0, n = this.high ?? this.max, l = t && e < a, c = i && e > n, d = !l && !c;
+    if (!o)
+      return l || c ? "warning" : "optimum";
+    const u = this.optimum ?? this.min, p = t && u < a, _ = i && u > n;
+    return !p && !_ ? d ? "optimum" : "warning" : p ? l ? "optimum" : d ? "warning" : "danger" : c ? "optimum" : d ? "warning" : "danger";
+  }
+  /** @internal */
+  _onLabelSlotChange(e) {
+    const t = e.target;
     this._hasSlotContent = t.assignedNodes({ flatten: !0 }).length > 0;
   }
-  updated() {
-    this.dataset.state = this._resolveState();
+  updated(e) {
+    super.updated(e), this.dataset.state = this._resolveState();
+    const t = this._percentage() / 100;
+    this.style.setProperty("--_value-ratio", String(Math.max(0, Math.min(1, t))));
   }
   render() {
-    const r = this._percentage(), t = this._resolveState(), a = this._clampedValue(), s = t !== "default" ? ` — ${t}` : "", i = `${a} of ${this.max}${s}`, o = this.label !== void 0 || this._hasSlotContent, n = e._STATE_LABELS[t];
+    const e = this._resolveState(), t = this._clampedValue(), i = e !== "default" ? ` — ${e}` : "", o = `${t} of ${this.max}${i}`, a = this.label !== void 0 || this._hasSlotContent, n = r._STATE_LABELS[e];
     return v`
       <div
         part="base"
         class="meter"
         role="meter"
         tabindex="0"
-        aria-valuenow=${a}
+        aria-valuenow=${t}
         aria-valuemin=${this.min}
         aria-valuemax=${this.max}
-        aria-valuetext=${i}
-        aria-label=${m(o ? void 0 : `${a} of ${this.max}`)}
-        aria-labelledby=${m(o ? `${this._uid}-label` : void 0)}
+        aria-valuetext=${o}
+        aria-label=${m(a ? void 0 : `${t} of ${this.max}`)}
+        aria-labelledby=${m(a ? `${this._uid}-label` : void 0)}
       >
         <span
           id=${`${this._uid}-label`}
           part="label"
           class="meter__label"
-          ?hidden=${!o}
+          ?hidden=${!a}
         >
           <slot name="label" @slotchange=${this._onLabelSlotChange}>${this.label ?? ""}</slot>
         </span>
         <div class="meter__track" part="track">
-          <div
-            part="indicator"
-            class="meter__indicator"
-            style=${y({ width: `${r}%` })}
-          ></div>
+          <div part="indicator" class="meter__indicator"></div>
         </div>
-        ${n ? v`<span class="meter__state-label" data-state=${t} aria-hidden="true"
+        ${n ? v`<span class="meter__state-label" data-state=${e} aria-hidden="true"
               >${n}</span
-            >` : _}
+            >` : x}
         <meter
           class="meter__native"
-          value=${a}
+          value=${t}
           min=${this.min}
           max=${this.max}
           low=${m(this.low)}
@@ -182,41 +198,41 @@ let e = class extends f {
     `;
   }
 };
-e.styles = [$, S];
-e._counter = 0;
-e._STATE_LABELS = {
+r.styles = [y, $];
+r._counter = 0;
+r._STATE_LABELS = {
   optimum: "Optimum",
   warning: "Warning",
   danger: "Danger"
 };
-l([
+s([
   h({ type: Number, reflect: !0 })
-], e.prototype, "value", 2);
-l([
+], r.prototype, "value", 2);
+s([
   h({ type: Number, reflect: !0 })
-], e.prototype, "min", 2);
-l([
+], r.prototype, "min", 2);
+s([
   h({ type: Number, reflect: !0 })
-], e.prototype, "max", 2);
-l([
+], r.prototype, "max", 2);
+s([
   h({ type: Number, reflect: !0 })
-], e.prototype, "low", 2);
-l([
+], r.prototype, "low", 2);
+s([
   h({ type: Number, reflect: !0 })
-], e.prototype, "high", 2);
-l([
+], r.prototype, "high", 2);
+s([
   h({ type: Number, reflect: !0 })
-], e.prototype, "optimum", 2);
-l([
+], r.prototype, "optimum", 2);
+s([
   h({ type: String })
-], e.prototype, "label", 2);
-l([
+], r.prototype, "label", 2);
+s([
   b()
-], e.prototype, "_hasSlotContent", 2);
-e = l([
+], r.prototype, "_hasSlotContent", 2);
+r = s([
   w("hx-meter")
-], e);
+], r);
 export {
-  e as H
+  r as H
 };
-//# sourceMappingURL=hx-meter-CZ7lnMra.js.map
+//# sourceMappingURL=hx-meter-CVs4A649.js.map