@helixui/library 1.0.1 → 1.1.2

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-uXkTZq-W.js}

@@ -1,9 +1,8 @@
-import { css as x, LitElement as f, nothing as _, html as v } from "lit";
+import { css as _, 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 $ = _`
   :host {
     display: block;
     width: 100%;
@@ -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) ─── */
@@ -88,6 +96,12 @@ const S = x`
     color: var(--hx-meter-color-danger, var(--hx-color-danger-700, #b91c1c));
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .meter__indicator {
+      transition: none;
+    }
+  }
+
   /* ─── Native meter hidden (we use custom rendering) ─── */
 
   .meter__native {
@@ -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, f = i && u > n;
+    return !p && !f ? 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();
+    const e = this._percentage() / 100;
+    this.style.setProperty("--_value-ratio", String(Math.max(0, Math.min(1, e))));
   }
   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-uXkTZq-W.js.map

package/dist/shared/hx-meter-uXkTZq-W.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-meter-uXkTZq-W.js","sources":["../../src/components/hx-meter/hx-meter.styles.ts","../../src/components/hx-meter/hx-meter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMeterStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .meter {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    width: 100%;\n  }\n\n  .meter__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .meter__track {\n    position: relative;\n    width: 100%;\n    height: var(--hx-meter-track-height, var(--hx-size-2, 0.5rem));\n    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(--hx-meter-track-radius, var(--hx-radius-full, 9999px));\n    overflow: hidden;\n  }\n\n  .meter__indicator {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    background-color: var(--_indicator-color);\n    transform-origin: left center;\n    transform: scaleX(var(--_value-ratio, 0));\n    transition:\n      transform var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .meter__indicator {\n      transition: none;\n    }\n  }\n\n  /* ─── Default (no thresholds configured) ─── */\n\n  :host {\n    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));\n  }\n\n  /* ─── Semantic state colors ─── */\n\n  :host([data-state='optimum']) {\n    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));\n  }\n\n  :host([data-state='warning']) {\n    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));\n  }\n\n  :host([data-state='danger']) {\n    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-danger-500, #ef4444));\n  }\n\n  /* ─── State Label (WCAG 1.4.1) ─── */\n  /* Visible text label rendered below the track when a semantic state is active. */\n  /* Ensures the meter state is not conveyed by fill color alone.                 */\n  /* aria-hidden=\"true\" because aria-valuetext already includes the state for AT. */\n\n  .meter__state-label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  .meter__state-label[data-state='optimum'] {\n    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #15803d));\n  }\n\n  .meter__state-label[data-state='warning'] {\n    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #b45309));\n  }\n\n  .meter__state-label[data-state='danger'] {\n    color: var(--hx-meter-color-danger, var(--hx-color-danger-700, #b91c1c));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .meter__indicator {\n      transition: none;\n    }\n  }\n\n  /* ─── Native meter hidden (we use custom rendering) ─── */\n\n  .meter__native {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMeterStyles } from './hx-meter.styles.js';\n\ntype MeterState = 'optimum' | 'warning' | 'danger' | 'default';\n\n/**\n * A scalar measurement within a known range — e.g., disk usage, health score,\n * or any numeric value with defined min/max bounds. Supports low/high/optimum\n * threshold markers for semantic color feedback.\n *\n * @summary Scalar measurement gauge within a defined range.\n *\n * @tag hx-meter\n *\n * @slot label - Visible label rendered above the meter track. When using this\n *   slot without the `label` attribute, the accessible name is derived from the\n *   slot content via `aria-labelledby`. The `label` attribute is NOT required\n *   when slot content is provided — the component detects slot content and\n *   switches to `aria-labelledby` automatically.\n *\n * @csspart base - The outer wrapper element.\n * @csspart track - The unfilled track bar element.\n * @csspart indicator - The filled bar indicating the current value.\n * @csspart label - The label wrapper element.\n *\n * @cssprop [--hx-meter-track-height] - Height of the track bar.\n * @cssprop [--hx-meter-track-color] - Background color of the unfilled track.\n * @cssprop [--hx-meter-track-radius] - Border radius of the track.\n * @cssprop [--hx-meter-indicator-color] - Default filled bar color (no thresholds).\n * @cssprop [--hx-meter-color-optimum] - Color when value is in the optimum zone.\n * @cssprop [--hx-meter-color-warning] - Color when value is in a warning zone.\n * @cssprop [--hx-meter-color-danger] - Color when value is in the danger zone.\n * @cssprop [--hx-meter-label-color] - Label text color.\n */\n@customElement('hx-meter')\nexport class HelixMeter extends LitElement {\n  static override styles = [tokenStyles, helixMeterStyles];\n\n  /** @internal */\n  private static _counter = 0;\n  /** @internal */\n  private _uid = `hx-meter-${++HelixMeter._counter}`;\n\n  /**\n   * Current value of the meter.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /**\n   * Minimum value of the range.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum value of the range.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Threshold below which the value is considered suboptimal (lower range warning).\n   * @attr low\n   */\n  @property({ type: Number, reflect: true })\n  low?: number;\n\n  /**\n   * Threshold above which the value is considered suboptimal (upper range warning).\n   * @attr high\n   */\n  @property({ type: Number, reflect: true })\n  high?: number;\n\n  /**\n   * The optimal value within the range. Used to determine which zone is \"good\".\n   * @attr optimum\n   */\n  @property({ type: Number, reflect: true })\n  optimum?: number;\n\n  /**\n   * Accessible label for the meter. Used as the visible label text and as\n   * the source for `aria-labelledby`. When only slot content is provided\n   * (no `label` attribute), the slot content is used for the accessible name.\n   * @attr label\n   */\n  @property({ type: String })\n  label?: string;\n\n  /** @internal */\n  @state()\n  private _hasSlotContent = false;\n\n  /** @internal */\n  private _clampedValue(): number {\n    return Math.min(Math.max(this.value, this.min), this.max);\n  }\n\n  /** @internal */\n  private _percentage(): number {\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n    return ((this._clampedValue() - this.min) / range) * 100;\n  }\n\n  /** @internal */\n  private _resolveState(): MeterState {\n    const v = this._clampedValue();\n    const hasLow = this.low !== undefined;\n    const hasHigh = this.high !== undefined;\n    const hasOptimum = this.optimum !== undefined;\n\n    if (!hasLow && !hasHigh && !hasOptimum) return 'default';\n\n    // When hasLow/hasHigh/hasOptimum are true, the corresponding property is defined.\n    // Use nullish coalescing to satisfy the type checker while preserving the runtime logic.\n    const lowVal = this.low ?? 0;\n    const highVal = this.high ?? this.max;\n    const inLowZone = hasLow && v < lowVal;\n    const inHighZone = hasHigh && v > highVal;\n    const inMiddleZone = !inLowZone && !inHighZone;\n\n    if (!hasOptimum) {\n      if (inLowZone || inHighZone) return 'warning';\n      return 'optimum';\n    }\n\n    const opt = this.optimum ?? this.min;\n    const optimumInLow = hasLow && opt < lowVal;\n    const optimumInHigh = hasHigh && opt > highVal;\n    const optimumInMiddle = !optimumInLow && !optimumInHigh;\n\n    if (optimumInMiddle) {\n      if (inMiddleZone) return 'optimum';\n      return 'warning';\n    } else if (optimumInLow) {\n      if (inLowZone) return 'optimum';\n      if (inMiddleZone) return 'warning';\n      return 'danger';\n    } else {\n      // optimumInHigh\n      if (inHighZone) return 'optimum';\n      if (inMiddleZone) return 'warning';\n      return 'danger';\n    }\n  }\n\n  /** @internal */\n  private _onLabelSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override updated() {\n    // Set data-state on host so :host([data-state]) CSS selectors work\n    this.dataset['state'] = this._resolveState();\n    // Set --_value-ratio for GPU-compositable scaleX() transform on indicator\n    const ratio = this._percentage() / 100;\n    this.style.setProperty('--_value-ratio', String(Math.max(0, Math.min(1, ratio))));\n  }\n\n  // ─── WCAG 1.4.1: State label map ───\n  // The indicator bar color alone is insufficient for color-blind users.\n  // A visible state label is rendered below the track when a semantic state\n  // (optimum/warning/danger) is active, providing a non-color visual cue.\n  // aria-valuetext already embeds the state for AT users.\n\n  /** @internal */\n  private static readonly _STATE_LABELS: Partial<Record<MeterState, string>> = {\n    optimum: 'Optimum',\n    warning: 'Warning',\n    danger: 'Danger',\n  };\n\n  override render() {\n    const state = this._resolveState();\n    const clampedValue = this._clampedValue();\n    const stateLabel = state !== 'default' ? ` — ${state}` : '';\n    const ariaValuetext = `${clampedValue} of ${this.max}${stateLabel}`;\n    const hasVisibleLabel = this.label !== undefined || this._hasSlotContent;\n    const visibleStateLabel = HelixMeter._STATE_LABELS[state];\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"meter\"\n        role=\"meter\"\n        tabindex=\"0\"\n        aria-valuenow=${clampedValue}\n        aria-valuemin=${this.min}\n        aria-valuemax=${this.max}\n        aria-valuetext=${ariaValuetext}\n        aria-label=${ifDefined(!hasVisibleLabel ? `${clampedValue} of ${this.max}` : undefined)}\n        aria-labelledby=${ifDefined(hasVisibleLabel ? `${this._uid}-label` : undefined)}\n      >\n        <span\n          id=${`${this._uid}-label`}\n          part=\"label\"\n          class=\"meter__label\"\n          ?hidden=${!hasVisibleLabel}\n        >\n          <slot name=\"label\" @slotchange=${this._onLabelSlotChange}>${this.label ?? ''}</slot>\n        </span>\n        <div class=\"meter__track\" part=\"track\">\n          <div part=\"indicator\" class=\"meter__indicator\"></div>\n        </div>\n        ${visibleStateLabel\n          ? html`<span class=\"meter__state-label\" data-state=${state} aria-hidden=\"true\"\n              >${visibleStateLabel}</span\n            >`\n          : nothing}\n        <meter\n          class=\"meter__native\"\n          value=${clampedValue}\n          min=${this.min}\n          max=${this.max}\n          low=${ifDefined(this.low)}\n          high=${ifDefined(this.high)}\n          optimum=${ifDefined(this.optimum)}\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n        ></meter>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-meter': HelixMeter;\n  }\n}\n"],"names":["helixMeterStyles","css","HelixMeter","LitElement","range","v","hasLow","hasHigh","hasOptimum","lowVal","highVal","inLowZone","inHighZone","inMiddleZone","opt","optimumInLow","optimumInHigh","slot","ratio","state","clampedValue","stateLabel","ariaValuetext","hasVisibleLabel","visibleStateLabel","html","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}