@helixui/library 3.1.0 → 3.2.0-next.76

package/dist/shared/{hx-number-input-mOIZ3-46.js → hx-number-input-yUzFOSC1.js}

@@ -1,12 +1,13 @@
 import { css as f, html as a, nothing as h } from "lit";
-import { property as o, query as _, state as c, customElement as b } from "lit/decorators.js";
+import { property as l, query as _, state as c, customElement as b } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
 import { live as v } from "lit/directives/live.js";
 import { F as x } from "./FormMixin-B8PXk5RQ.js";
-import { H as g } from "./helix-element-BNEYeiys.js";
-import { c as y } from "./id-counter-DuX8vsui.js";
-const w = f`
+import { b as g } from "./forced-colors-CTEDFRGa.js";
+import { H as y } from "./helix-element-BNEYeiys.js";
+import { c as w } from "./id-counter-DuX8vsui.js";
+const S = f`
   :host {
     display: block;
   }
@@ -39,12 +40,12 @@ const w = f`
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
   }
 
   .field__required-marker {
-    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold);
   }
 
@@ -54,9 +55,9 @@ const w = f`
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
     border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
     transition:
       border-color var(--hx-transition-fast),
       box-shadow var(--hx-transition-fast);
@@ -80,18 +81,18 @@ const w = f`
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     /* Fallback for Safari < 16.2 (no color-mix support) */
     box-shadow: 0 0 0 var(--hx-focus-ring-width)
-      var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+      var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width)
       color-mix(
         in srgb,
-        var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
+        var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity) * 100%),
         transparent
       );
@@ -104,7 +105,7 @@ const w = f`
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-3);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     flex-shrink: 0;
   }
 
@@ -116,7 +117,7 @@ const w = f`
     outline: none;
     background: transparent;
     font-family: inherit;
-    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    color: var(--hx-number-input-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     width: 100%;
     /* Size: md (default) */
@@ -126,7 +127,7 @@ const w = f`
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder);
   }
 
   .field__input:disabled {
@@ -165,7 +166,7 @@ const w = f`
     flex-direction: column;
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn {
@@ -175,7 +176,7 @@ const w = f`
     background: transparent;
     border: none;
     cursor: pointer;
-    color: var(--hx-color-neutral-600);
+    color: var(--hx-color-text-secondary);
     padding: 0;
     flex: 1;
     min-width: var(--hx-size-8);
@@ -187,12 +188,12 @@ const w = f`
 
   .field__stepper-btn:not(:last-child) {
     border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn:hover:not(:disabled) {
-    background-color: var(--hx-color-neutral-50);
-    color: var(--hx-color-neutral-800);
+    background-color: var(--hx-color-surface-raised);
+    color: var(--hx-color-text-strong);
   }
 
   /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -231,13 +232,13 @@ const w = f`
 
   .field__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     line-height: var(--hx-line-height-normal);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal);
   }
 
@@ -331,15 +332,15 @@ const w = f`
     }
   }
 `;
-var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (e, t, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? $(t, r) : t, d = e.length - 1, u; d >= 0; d--)
+var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, o = (e, t, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? I(t, r) : t, d = e.length - 1, u; d >= 0; d--)
     (u = e[d]) && (n = (s ? u(t, r, n) : u(n)) || n);
-  return s && n && S(t, r, n), n;
+  return s && n && $(t, r, n), n;
 };
-const I = y("hx-number-input");
-let i = class extends x(g) {
+const T = w("hx-number-input");
+let i = class extends x(y) {
   constructor() {
-    super(...arguments), this.name = "", this.value = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.min = void 0, this.max = void 0, this.step = 1, this.label = "", this.error = "", this.helpText = "", this.size = "md", this.noStepper = !1, this.requiredMessage = "This field is required.", this.incrementLabel = "Increment", this.decrementLabel = "Decrement", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._defaultValue = null, this._longPressTimer = null, this._repeatInterval = null, this._inputId = I(), this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`;
+    super(...arguments), this.name = "", this.value = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.min = void 0, this.max = void 0, this.step = 1, this.label = "", this.error = "", this.helpText = "", this.size = "md", this.noStepper = !1, this.requiredMessage = "This field is required.", this.incrementLabel = "Increment", this.decrementLabel = "Decrement", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._defaultValue = null, this._longPressTimer = null, this._repeatInterval = null, this._inputId = T(), this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`;
   }
   // ─── Slot Tracking ───
   /** @internal */
@@ -678,13 +679,13 @@ let i = class extends x(g) {
     `;
   }
 };
-i.styles = [w];
+i.styles = [S, g];
 i.formAssociated = !0;
-l([
-  o({ type: String, reflect: !0 })
+o([
+  l({ type: String, reflect: !0 })
 ], i.prototype, "name", 2);
-l([
-  o({
+o([
+  l({
     type: Number,
     reflect: !0,
     converter: {
@@ -697,64 +698,64 @@ l([
     }
   })
 ], i.prototype, "value", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
+o([
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "required", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
+o([
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
+o([
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "readonly", 2);
-l([
-  o({ type: Number })
+o([
+  l({ type: Number })
 ], i.prototype, "min", 2);
-l([
-  o({ type: Number })
+o([
+  l({ type: Number })
 ], i.prototype, "max", 2);
-l([
-  o({ type: Number })
+o([
+  l({ type: Number })
 ], i.prototype, "step", 2);
-l([
-  o({ type: String })
+o([
+  l({ type: String })
 ], i.prototype, "label", 2);
-l([
-  o({ type: String })
+o([
+  l({ type: String })
 ], i.prototype, "error", 2);
-l([
-  o({ type: String, attribute: "help-text" })
+o([
+  l({ type: String, attribute: "help-text" })
 ], i.prototype, "helpText", 2);
-l([
-  o({ type: String, attribute: "hx-size" })
+o([
+  l({ type: String, attribute: "hx-size" })
 ], i.prototype, "size", 2);
-l([
-  o({ type: Boolean, attribute: "no-stepper" })
+o([
+  l({ type: Boolean, attribute: "no-stepper" })
 ], i.prototype, "noStepper", 2);
-l([
-  o({ attribute: "required-message" })
+o([
+  l({ attribute: "required-message" })
 ], i.prototype, "requiredMessage", 2);
-l([
-  o({ attribute: "increment-label" })
+o([
+  l({ attribute: "increment-label" })
 ], i.prototype, "incrementLabel", 2);
-l([
-  o({ attribute: "decrement-label" })
+o([
+  l({ attribute: "decrement-label" })
 ], i.prototype, "decrementLabel", 2);
-l([
+o([
   _(".field__input")
 ], i.prototype, "_input", 2);
-l([
+o([
   c()
 ], i.prototype, "_hasLabelSlot", 2);
-l([
+o([
   c()
 ], i.prototype, "_hasErrorSlot", 2);
-l([
+o([
   c()
 ], i.prototype, "_hasHelpSlot", 2);
-i = l([
+i = o([
   b("hx-number-input")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-number-input-mOIZ3-46.js.map
+//# sourceMappingURL=hx-number-input-yUzFOSC1.js.map

package/dist/shared/hx-number-input-yUzFOSC1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-number-input-yUzFOSC1.js","sources":["../../src/components/hx-number-input/hx-number-input.styles.ts","../../src/components/hx-number-input/hx-number-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixNumberInputStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1);\n    font-family: var(--hx-number-input-font-family, var(--hx-font-family-sans));\n  }\n\n  /* ─── Label ─── */\n\n  .field__label-wrapper {\n    display: contents;\n  }\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1);\n    font-size: var(--hx-font-size-sm);\n    font-weight: var(--hx-font-weight-medium);\n    color: var(--hx-number-input-label-color, var(--hx-color-text-strong));\n    line-height: var(--hx-line-height-normal);\n  }\n\n  .field__required-marker {\n    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));\n    font-weight: var(--hx-font-weight-bold);\n  }\n\n  /* ─── Input Wrapper ─── */\n\n  .field__input-wrapper {\n    display: flex;\n    align-items: stretch;\n    border: var(--hx-border-width-thin) solid\n      var(--hx-number-input-border-color, var(--hx-color-border-strong));\n    border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));\n    transition:\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    overflow: hidden;\n  }\n\n  .field__input-wrapper:focus-within {\n    border-color: var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n    /* Fallback for Safari < 16.2 (no color-mix support) */\n    box-shadow: 0 0 0 var(--hx-focus-ring-width)\n      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width)\n      color-mix(\n        in srgb,\n        var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color))\n          calc(var(--hx-focus-ring-opacity) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Error State ─── */\n\n  .field--error .field__input-wrapper {\n    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));\n  }\n\n  .field--error .field__input-wrapper:focus-within {\n    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));\n    /* Fallback for Safari < 16.2 (no color-mix support) */\n    box-shadow: 0 0 0 var(--hx-focus-ring-width)\n      var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width)\n      color-mix(\n        in srgb,\n        var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e))\n          calc(var(--hx-focus-ring-opacity) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Slots (Prefix / Suffix) ─── */\n\n  .field__prefix,\n  .field__suffix {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--hx-space-3);\n    color: var(--hx-color-text-muted);\n    flex-shrink: 0;\n  }\n\n  /* ─── Native Input ─── */\n\n  .field__input {\n    flex: 1;\n    border: none;\n    outline: none;\n    background: transparent;\n    font-family: inherit;\n    color: var(--hx-number-input-color, var(--hx-color-text-strong));\n    line-height: var(--hx-line-height-normal);\n    width: 100%;\n    /* Size: md (default) */\n    padding: var(--hx-space-2) var(--hx-space-3);\n    font-size: var(--hx-font-size-md);\n    min-height: var(--hx-size-10);\n  }\n\n  .field__input::placeholder {\n    color: var(--hx-color-text-placeholder);\n  }\n\n  .field__input:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Hide native browser spinners ─── */\n\n  .field__input[type='number']::-webkit-inner-spin-button,\n  .field__input[type='number']::-webkit-outer-spin-button {\n    display: none;\n  }\n\n  .field__input[type='number'] {\n    appearance: textfield;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .field--sm .field__input {\n    padding: var(--hx-space-1) var(--hx-space-2);\n    font-size: var(--hx-font-size-sm);\n    min-height: var(--hx-size-8);\n  }\n\n  .field--lg .field__input {\n    padding: var(--hx-space-3) var(--hx-space-4);\n    font-size: var(--hx-font-size-lg);\n    min-height: var(--hx-size-12);\n  }\n\n  /* ─── Stepper ─── */\n\n  .field__stepper {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    border-inline-start: var(--hx-border-width-thin) solid\n      var(--hx-number-input-border-color, var(--hx-color-border-strong));\n  }\n\n  .field__stepper-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--hx-color-text-secondary);\n    padding: 0;\n    flex: 1;\n    min-width: var(--hx-size-8);\n    line-height: 1;\n    transition: background-color var(--hx-transition-fast);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .field__stepper-btn:not(:last-child) {\n    border-bottom: var(--hx-border-width-thin) solid\n      var(--hx-number-input-border-color, var(--hx-color-border-strong));\n  }\n\n  .field__stepper-btn:hover:not(:disabled) {\n    background-color: var(--hx-color-surface-raised);\n    color: var(--hx-color-text-strong);\n  }\n\n  /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */\n  .field__stepper-btn:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  .field__stepper-btn:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: -2px;\n  }\n\n  .field__stepper-btn:disabled {\n    opacity: var(--hx-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  .field__stepper-btn svg {\n    pointer-events: none;\n    width: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));\n    height: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));\n  }\n\n  /* Size sm adjustments for stepper */\n  .field--sm .field__stepper-btn {\n    min-width: var(--hx-size-6);\n  }\n\n  /* Size lg adjustments for stepper */\n  .field--lg .field__stepper-btn {\n    min-width: var(--hx-size-10);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .field__help-text {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-color-text-muted);\n    line-height: var(--hx-line-height-normal);\n  }\n\n  .field__error {\n    font-size: var(--hx-font-size-xs);\n    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));\n    line-height: var(--hx-line-height-normal);\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field__input-wrapper {\n      transition: none;\n    }\n\n    .field__stepper-btn {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .field__input-wrapper {\n      forced-color-adjust: none;\n      background-color: Field;\n      color: FieldText;\n      border: 2px solid ButtonText;\n    }\n\n    .field__input {\n      color: FieldText;\n    }\n\n    .field__input::placeholder {\n      color: GrayText;\n    }\n\n    .field__input-wrapper:focus-within {\n      border-color: Highlight;\n      box-shadow: none;\n    }\n\n    .field__stepper {\n      border-color: ButtonText;\n    }\n\n    .field__stepper-btn {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border-color: ButtonText;\n    }\n\n    .field__stepper-btn:hover:not(:disabled) {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    .field__stepper-btn:focus-visible {\n      outline-color: Highlight;\n    }\n\n    .field__stepper-btn:disabled {\n      color: GrayText;\n      opacity: 1;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .field__input-wrapper {\n      border-color: GrayText;\n      color: GrayText;\n    }\n\n    :host([disabled]) .field__input {\n      color: GrayText;\n    }\n\n    .field--error .field__input-wrapper {\n      border-color: LinkText;\n    }\n\n    .field__label {\n      color: CanvasText;\n    }\n\n    .field__help-text {\n      color: GrayText;\n    }\n\n    .field__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixNumberInputStyles } from './hx-number-input.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\nconst _nextNumberInputId = createIdCounter('hx-number-input');\n\n/** Detail for hx-input and hx-change events dispatched by hx-number-input. */\nexport interface HxNumberInputDetail {\n  value: number | null;\n}\n\n/**\n * A numeric input component with stepper controls, label, validation, and\n * full form association. Designed for healthcare data-entry contexts where\n * precise numeric values (dosage, age, measurements) must be captured safely.\n *\n * @summary Form-associated numeric input with stepper buttons, bounds checking,\n *   label, error, and help text.\n *\n * @tag hx-number-input\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n * @slot prefix - Content rendered before the input (e.g., a unit icon).\n * @slot suffix - Content rendered after the input and before the stepper buttons (e.g., a unit label).\n *\n * @fires {CustomEvent<{value: number | null}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: number | null}>} hx-change - Dispatched when the input loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around prefix, input, suffix, and stepper.\n * @csspart input - The native input element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart stepper - The stepper button group container.\n * @csspart increment - The increment (+) button.\n * @csspart decrement - The decrement (-) button.\n *\n * @cssprop [--hx-number-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-number-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-number-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-number-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-number-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-number-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-number-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-number-input-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-opacity] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-number-input-icon-size=var(--hx-space-3)] - CSS custom property.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-transition-fast] - Transition timing.\n */\n@customElement('hx-number-input')\nexport class HelixNumberInput extends FormMixin(HelixElement) {\n  static override styles = [helixNumberInputStyles, forcedColorsField];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The name of the input, used for form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * The current numeric value of the input. Null when the field is empty.\n   * @attr value\n   */\n  @property({\n    type: Number,\n    reflect: true,\n    converter: {\n      fromAttribute: (attr: string | null): number | null => {\n        if (attr === null || attr === '') return null;\n        const n = Number(attr);\n        return isNaN(n) ? null : n;\n      },\n      toAttribute: (val: number | null): string | null => (val === null ? null : String(val)),\n    },\n  })\n  value: number | null = null;\n\n  /**\n   * Whether the input is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the input is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the input is read-only.\n   * @attr readonly\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Minimum allowed value. When reached, the decrement button is disabled.\n   * @attr min\n   */\n  @property({ type: Number })\n  min: number | undefined = undefined;\n\n  /**\n   * Maximum allowed value. When reached, the increment button is disabled.\n   * @attr max\n   */\n  @property({ type: Number })\n  max: number | undefined = undefined;\n\n  /**\n   * The amount to increment or decrement on each step action.\n   * @attr step\n   */\n  @property({ type: Number })\n  step = 1;\n\n  /**\n   * The visible label text for the input.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Error message to display. When set, the input enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the input for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Size variant controlling input padding and font size.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * When set, hides the +/- stepper buttons.\n   * @attr no-stepper\n   */\n  @property({ type: Boolean, attribute: 'no-stepper' })\n  noStepper = false;\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\n\n  /**\n   * Accessible label for the increment (+) stepper button.\n   * @attr increment-label\n   */\n  @property({ attribute: 'increment-label' })\n  incrementLabel = 'Increment';\n\n  /**\n   * Accessible label for the decrement (-) stepper button.\n   * @attr decrement-label\n   */\n  @property({ attribute: 'decrement-label' })\n  decrementLabel = 'Decrement';\n\n  // ─── Internal References ───\n\n  /** @internal */\n  @query('.field__input')\n  private _input: HTMLInputElement | undefined;\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _hasLabelSlot = false;\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n  /** @internal */\n  @state() private _hasHelpSlot = false;\n\n  /** The value captured at first render, used by formResetCallback. */\n  /** @internal */\n  private _defaultValue: number | null = null;\n\n  /** Timer ID for the long-press initial delay. */\n  /** @internal */\n  private _longPressTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** Interval ID for the long-press rapid-repeat phase. */\n  /** @internal */\n  private _repeatInterval: ReturnType<typeof setInterval> | null = null;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private readonly _inputId = _nextNumberInputId();\n  /** @internal */\n  private readonly _helpTextId = `${this._inputId}-help`;\n  /** @internal */\n  private readonly _errorId = `${this._inputId}-error`;\n\n  // ─── Slot Tracking ───\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n    if (this._hasLabelSlot) {\n      const slottedLabel = slot.assignedElements()[0];\n      if (slottedLabel && !slottedLabel.id) {\n        slottedLabel.id = `${this._inputId}-slotted-label`;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements();\n    this._hasErrorSlot = assigned.length > 0;\n    if (this._hasErrorSlot && assigned[0]) {\n      if (!assigned[0].id) assigned[0].id = this._errorId;\n    }\n  }\n\n  /** @internal */\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedElements().length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(): void {\n    this._defaultValue = this.value;\n    if (!this.label && !this._hasLabelSlot) {\n      devWarn(\n        'hx-number-input',\n        'No accessible label provided. Set the `label` attribute or use the `label` slot so screen readers can identify this input (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearLongPress();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('value')) {\n      if (this.value !== null && isNaN(this.value)) {\n        devWarn(\n          'hx-number-input',\n          'Received NaN as value. Resetting to null to prevent \"NaN\" from rendering in the input.',\n        );\n        this.value = null;\n        return;\n      }\n    }\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('required') ||\n      changedProperties.has('min') ||\n      changedProperties.has('max') ||\n      changedProperties.has('step')\n    ) {\n      this._syncFormValue();\n    }\n    // Force screen reader re-announcement when error text changes (a11y-v3-005)\n    if (changedProperties.has('error') && this.error) {\n      const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n      if (errorEl) {\n        const msg = this.error;\n        requestAnimationFrame(() => {\n          errorEl.textContent = '';\n          requestAnimationFrame(() => {\n            errorEl.textContent = msg;\n          });\n        });\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** @internal */\n  private _syncFormValue(): void {\n    this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n  }\n\n  /** @internal */\n  override _updateValidity(): void {\n    if (this.required && this.value === null) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.requiredMessage,\n        this._input ?? undefined,\n      );\n      return;\n    }\n\n    if (this.value !== null && this.min !== undefined && this.value < this.min) {\n      this._internals.setValidity(\n        { rangeUnderflow: true },\n        `Value must be at least ${this.min}.`,\n        this._input ?? undefined,\n      );\n      return;\n    }\n\n    if (this.value !== null && this.max !== undefined && this.value > this.max) {\n      this._internals.setValidity(\n        { rangeOverflow: true },\n        `Value must be at most ${this.max}.`,\n        this._input ?? undefined,\n      );\n      return;\n    }\n\n    if (this.value !== null && this.step && this.step !== 0) {\n      const step = this._finite(this.step) ?? 1;\n      const base = this._finite(this.min) ?? 0;\n      const remainder = Math.abs((this.value - base) % step);\n      const epsilon = 1e-9;\n      if (remainder > epsilon && Math.abs(remainder - step) > epsilon) {\n        this._internals.setValidity(\n          { stepMismatch: true },\n          `Value must be a multiple of ${step}.`,\n          this._input ?? undefined,\n        );\n        return;\n      }\n    }\n\n    this._internals.setValidity({});\n  }\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    this.value = this._defaultValue;\n    this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n    this._resetInteractionState();\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      const parsed = Number(state);\n      this.value = isNaN(parsed) ? null : parsed;\n    }\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Value Parsing ───\n\n  /** @internal */\n  private _finite(value: number | undefined): number | undefined {\n    return Number.isFinite(value) ? value : undefined;\n  }\n\n  /** @internal */\n  private _parseInput(raw: string): number | null {\n    if (raw === '' || raw === null) return null;\n    const parsed = parseFloat(raw);\n    return isNaN(parsed) ? null : parsed;\n  }\n\n  /** @internal */\n  private _clamp(v: number): number {\n    let result = v;\n    const min = this._finite(this.min);\n    const max = this._finite(this.max);\n    if (min !== undefined) result = Math.max(min, result);\n    if (max !== undefined) result = Math.min(max, result);\n    return result;\n  }\n\n  // ─── Stepper Helpers ───\n\n  /** @internal */\n  private get _atMin(): boolean {\n    return this.value !== null && this.min !== undefined && this.value <= this.min;\n  }\n\n  /** @internal */\n  private get _atMax(): boolean {\n    return this.value !== null && this.max !== undefined && this.value >= this.max;\n  }\n\n  /** @internal */\n  private _applyStep(delta: number): void {\n    if (this.disabled || this.readonly) return;\n\n    const current = this.value ?? 0;\n    const step = this._finite(this.step) ?? 1;\n    const next = this._clamp(parseFloat((current + delta * step).toFixed(10)));\n\n    if (next === this.value) return;\n    this.value = next;\n    this._handleInteractionInput();\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: number | null }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Long-press ───\n\n  /** @internal */\n  private _clearLongPress(): void {\n    if (this._longPressTimer !== null) {\n      clearTimeout(this._longPressTimer);\n      this._longPressTimer = null;\n    }\n    if (this._repeatInterval !== null) {\n      clearInterval(this._repeatInterval);\n      this._repeatInterval = null;\n    }\n  }\n\n  /** @internal */\n  private _startLongPress(delta: number): void {\n    this._applyStep(delta);\n    this._longPressTimer = setTimeout(() => {\n      this._repeatInterval = setInterval(() => {\n        this._applyStep(delta);\n      }, 100);\n    }, 400);\n  }\n\n  /** @internal */\n  private _handleStepperPointerDown(e: PointerEvent, delta: number): void {\n    if (this.disabled || this.readonly) return;\n    e.preventDefault();\n    this._startLongPress(delta);\n  }\n\n  /** @internal */\n  private _handleStepperPointerUp(): void {\n    this._clearLongPress();\n  }\n\n  // ─── Keyboard ───\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled || this.readonly) return;\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._applyStep(1);\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._applyStep(-1);\n    }\n  }\n\n  // ─── Input Events ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.value = this._parseInput(target.value);\n    this._handleInteractionInput();\n    this._syncFormValue();\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: number | null }>('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    const parsed = this._parseInput(target.value);\n    this.value = parsed !== null ? this._clamp(parsed) : null;\n    this._handleInteractionBlur();\n    this._syncFormValue();\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: number | null }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the input element. */\n  override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  /** Selects all text in the input. */\n  select(): void {\n    this._input?.select();\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderIncrementIcon() {\n    return html`<svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 12 12\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M6 1v10M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderDecrementIcon() {\n    return html`<svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 12 12\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d=\"M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n    </svg>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      'field--sm': this.size === 'sm',\n      'field--md': this.size === 'md',\n      'field--lg': this.size === 'lg',\n    };\n\n    const describedBy =\n      [\n        hasError ? this._errorId : null,\n        !hasError && (this.helpText || this._hasHelpSlot) ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    const displayValue = this.value !== null ? String(this.value) : '';\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label\n              ? html`\n                  <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n          <span class=\"field__prefix\">\n            <slot name=\"prefix\"></slot>\n          </span>\n\n          <input\n            part=\"input\"\n            class=\"field__input\"\n            id=${this._inputId}\n            type=\"number\"\n            .value=${live(displayValue)}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            step=${this.step}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            name=${ifDefined(this.name || undefined)}\n            aria-labelledby=${ifDefined(\n              this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n            )}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            @input=${this._handleInput}\n            @change=${this._handleChange}\n            @keydown=${this._handleKeyDown}\n          />\n\n          <span class=\"field__suffix\">\n            <slot name=\"suffix\"></slot>\n          </span>\n\n          ${this.noStepper\n            ? nothing\n            : html`\n                <div part=\"stepper\" class=\"field__stepper\">\n                  <button\n                    part=\"increment\"\n                    class=\"field__stepper-btn\"\n                    type=\"button\"\n                    aria-label=${this.incrementLabel}\n                    ?disabled=${this.disabled || this.readonly || this._atMax}\n                    tabindex=\"-1\"\n                    @pointerdown=${(e: PointerEvent) => this._handleStepperPointerDown(e, 1)}\n                    @pointerup=${this._handleStepperPointerUp}\n                    @pointerleave=${this._handleStepperPointerUp}\n                    @pointercancel=${this._handleStepperPointerUp}\n                  >\n                    ${this._renderIncrementIcon()}\n                  </button>\n                  <button\n                    part=\"decrement\"\n                    class=\"field__stepper-btn\"\n                    type=\"button\"\n                    aria-label=${this.decrementLabel}\n                    ?disabled=${this.disabled || this.readonly || this._atMin}\n                    tabindex=\"-1\"\n                    @pointerdown=${(e: PointerEvent) => this._handleStepperPointerDown(e, -1)}\n                    @pointerup=${this._handleStepperPointerUp}\n                    @pointerleave=${this._handleStepperPointerUp}\n                    @pointercancel=${this._handleStepperPointerUp}\n                  >\n                    ${this._renderDecrementIcon()}\n                  </button>\n                </div>\n              `}\n        </div>\n\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${this.error\n            ? html`\n                <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                  ${this.error}\n                </div>\n              `\n            : nothing}\n        </slot>\n\n        <div\n          part=\"help-text\"\n          class=\"field__help-text\"\n          id=${this._helpTextId}\n          ?hidden=${hasError || (!this.helpText && !this._hasHelpSlot)}\n        >\n          <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-number-input': HelixNumberInput;\n  }\n}\n"],"names":["helixNumberInputStyles","css","_nextNumberInputId","createIdCounter","HelixNumberInput","FormMixin","HelixElement","slot","slottedLabel","assigned","changedProperties","errorEl","_a","msg","step","base","remainder","epsilon","state","_mode","parsed","disabled","value","raw","v","result","min","max","delta","current","next","target","options","html","hasError","fieldClasses","describedBy","displayValue","classMap","nothing","live","ifDefined","e","forcedColorsField","__decorateClass","property","attr","n","val","query","customElement"],"mappings":";;;;;;;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/shared/{hx-overflow-menu-Dprb9lnT.js → hx-overflow-menu-BmKyAp5D.js}

@@ -1,9 +1,10 @@
-import { css as m, html as h, nothing as d } from "lit";
+import { css as p, html as h, nothing as d } from "lit";
 import { property as l, state as f, query as u, customElement as g } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
-import { H as x } from "./helix-element-BNEYeiys.js";
-import { c as b } from "./id-counter-DuX8vsui.js";
-const w = m`
+import { f as x } from "./forced-colors-CTEDFRGa.js";
+import { H as b } from "./helix-element-BNEYeiys.js";
+import { c as w } from "./id-counter-DuX8vsui.js";
+const y = p`
   :host {
     display: inline-block;
     position: relative;
@@ -23,7 +24,7 @@ const w = m`
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background-color: transparent;
-    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #313e4b));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -37,17 +38,23 @@ const w = m`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .trigger:hover:not([disabled]) {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(
+      --hx-overflow-menu-trigger-hover-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
   }
 
   .trigger--open {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    background-color: var(
+      --hx-overflow-menu-trigger-open-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
   }
 
   /* ─── Size Variants ─── */
@@ -80,8 +87,8 @@ const w = m`
     position: fixed;
     z-index: var(--hx-overflow-menu-panel-z-index, 1000);
     min-width: var(--hx-overflow-menu-panel-min-width, 160px);
-    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-surface-default, #ffffff));
+    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #d6dbd5));
     border-radius: var(
       --hx-overflow-menu-panel-border-radius,
       var(--hx-border-radius-md, 0.375rem)
@@ -106,7 +113,7 @@ const w = m`
     border: none;
     text-align: start;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #0f172a);
+    color: var(--hx-overflow-menu-item-color, var(--hx-color-text-primary, #0d1825));
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
@@ -115,7 +122,10 @@ const w = m`
   ::slotted([role='menuitem']:hover),
   ::slotted([role='menuitemcheckbox']:hover),
   ::slotted([role='menuitemradio']:hover) {
-    background-color: var(--hx-color-neutral-50, #f8fafc);
+    background-color: var(
+      --hx-overflow-menu-item-hover-bg,
+      var(--hx-color-surface-raised, #f5f8f3)
+    );
   }
 
   ::slotted([role='menuitem']:focus-visible),
@@ -124,7 +134,7 @@ const w = m`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: 0;
   }
@@ -168,15 +178,15 @@ const w = m`
     }
   }
 `;
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, r, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? _(r, t) : r, s = e.length - 1, c; s >= 0; s--)
+var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, r, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? k(r, t) : r, s = e.length - 1, c; s >= 0; s--)
     (c = e[s]) && (o = (i ? c(r, t, o) : c(o)) || o);
-  return i && o && y(r, t, o), o;
+  return i && o && _(r, t, o), o;
 };
-const k = b("hx-overflow-menu");
-let n = class extends x {
+const z = w("hx-overflow-menu");
+let n = class extends b {
   constructor() {
-    super(...arguments), this.placement = "bottom-end", this.size = "md", this.disabled = !1, this.icon = "vertical", this.label = "More actions", this.labelMenu = "Actions", this._open = !1, this._panelId = `${k()}-panel`, this._handleTriggerClick = (e) => {
+    super(...arguments), this.placement = "bottom-end", this.size = "md", this.disabled = !1, this.icon = "vertical", this.label = "More actions", this.labelMenu = "Actions", this._open = !1, this._panelId = `${z()}-panel`, this._handleTriggerClick = (e) => {
       e.stopPropagation(), this._toggle();
     }, this._handleDocumentClick = (e) => {
       if (!this._open) return;
@@ -242,14 +252,14 @@ let n = class extends x {
   async _updatePosition() {
     const e = this._buttonEl, r = this._panelEl;
     if (!e || !r) return;
-    const { computePosition: t, flip: i, shift: o, offset: s } = await import("@floating-ui/dom"), { x: c, y: p } = await t(e, r, {
+    const { computePosition: t, flip: i, shift: o, offset: s } = await import("@floating-ui/dom"), { x: c, y: m } = await t(e, r, {
       placement: this.placement,
       strategy: "fixed",
       middleware: [s(4), i(), o({ padding: 8 })]
     });
     Object.assign(r.style, {
       left: `${c}px`,
-      top: `${p}px`
+      top: `${m}px`
     });
   }
   // ─── Focus management ───
@@ -333,7 +343,7 @@ let n = class extends x {
     `;
   }
 };
-n.styles = [w];
+n.styles = [y, x];
 a([
   l({ type: String, reflect: !0 })
 ], n.prototype, "placement", 2);
@@ -367,4 +377,4 @@ n = a([
 export {
   n as H
 };
-//# sourceMappingURL=hx-overflow-menu-Dprb9lnT.js.map
+//# sourceMappingURL=hx-overflow-menu-BmKyAp5D.js.map

package/dist/shared/hx-overflow-menu-BmKyAp5D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-overflow-menu-BmKyAp5D.js","sources":["../../src/components/hx-overflow-menu/hx-overflow-menu.styles.ts","../../src/components/hx-overflow-menu/hx-overflow-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixOverflowMenuStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Trigger Button ─── */\n\n  .trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--hx-border-width-thin, 1px) solid transparent;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: transparent;\n    color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #313e4b));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease);\n    flex-shrink: 0;\n    padding: 0;\n    line-height: 1;\n  }\n\n  .trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-overflow-menu-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .trigger:hover:not([disabled]) {\n    background-color: var(\n      --hx-overflow-menu-trigger-hover-bg,\n      var(--hx-color-surface-sunken, #ebeee9)\n    );\n  }\n\n  .trigger--open {\n    background-color: var(\n      --hx-overflow-menu-trigger-open-bg,\n      var(--hx-color-surface-sunken, #ebeee9)\n    );\n  }\n\n  /* ─── Size Variants ─── */\n\n  .trigger--sm {\n    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\n    min-width: var(--hx-size-touch-target, 2.75rem);\n    min-height: var(--hx-size-touch-target, 2.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .trigger--md {\n    width: var(--hx-size-10, 2.5rem);\n    height: var(--hx-size-10, 2.5rem);\n    min-width: var(--hx-size-touch-target, 2.75rem);\n    min-height: var(--hx-size-touch-target, 2.75rem);\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  .trigger--lg {\n    width: var(--hx-size-12, 3rem);\n    height: var(--hx-size-12, 3rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n  }\n\n  /* ─── Panel ─── */\n\n  .panel {\n    position: fixed;\n    z-index: var(--hx-overflow-menu-panel-z-index, 1000);\n    min-width: var(--hx-overflow-menu-panel-min-width, 160px);\n    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-surface-default, #ffffff));\n    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #d6dbd5));\n    border-radius: var(\n      --hx-overflow-menu-panel-border-radius,\n      var(--hx-border-radius-md, 0.375rem)\n    );\n    box-shadow: var(\n      --hx-overflow-menu-panel-shadow,\n      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))\n    );\n    padding: var(--hx-space-1, 0.25rem) 0;\n    outline: none;\n  }\n\n  /* ─── Slot: menu items ─── */\n\n  ::slotted([role='menuitem']),\n  ::slotted([role='menuitemcheckbox']),\n  ::slotted([role='menuitemradio']) {\n    display: block;\n    width: 100%;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    background: none;\n    border: none;\n    text-align: start;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-overflow-menu-item-color, var(--hx-color-text-primary, #0d1825));\n    cursor: pointer;\n    white-space: nowrap;\n    box-sizing: border-box;\n  }\n\n  ::slotted([role='menuitem']:hover),\n  ::slotted([role='menuitemcheckbox']:hover),\n  ::slotted([role='menuitemradio']:hover) {\n    background-color: var(\n      --hx-overflow-menu-item-hover-bg,\n      var(--hx-color-surface-raised, #f5f8f3)\n    );\n  }\n\n  ::slotted([role='menuitem']:focus-visible),\n  ::slotted([role='menuitemcheckbox']:focus-visible),\n  ::slotted([role='menuitemradio']:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-overflow-menu-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))\n      );\n    outline-offset: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .trigger {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .trigger {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 2px solid ButtonText;\n    }\n\n    .trigger:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .trigger[disabled] {\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    .panel {\n      background-color: Canvas;\n      border: 2px solid CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixOverflowMenuStyles } from './hx-overflow-menu.styles.js';\n\nconst _nextOverflowMenuId = createIdCounter('hx-overflow-menu');\n\n/**\n * An overflow menu (kebab/meatball menu) that reveals hidden actions via a\n * floating panel. Composed from a trigger button and a slotted menu panel.\n *\n * @summary \"...\" or kebab icon button that reveals hidden actions.\n *\n * @tag hx-overflow-menu\n *\n * @slot - Menu items (e.g. `<button role=\"menuitem\">` or `<hx-menu-item>` elements).\n *\n * @fires {CustomEvent<{value: string}>} hx-select - Dispatched when a menu item is selected.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the panel opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the panel closes.\n *\n * @csspart button - The trigger icon button element.\n * @csspart trigger - Alias for button — the trigger icon button element.\n * @csspart panel - The floating menu panel container.\n * @csspart menu - Alias for panel — the floating menu panel container.\n *\n * @cssprop [--hx-overflow-menu-panel-bg=var(--hx-color-neutral-0,#fff)] - Panel background color.\n * @cssprop [--hx-overflow-menu-panel-border=1px solid var(--hx-color-neutral-200,#e5e7eb)] - Panel border.\n * @cssprop [--hx-overflow-menu-panel-border-radius=var(--hx-border-radius-md)] - Panel border radius.\n * @cssprop [--hx-overflow-menu-panel-shadow=0 4px 16px rgba(0,0,0,0.12)] - Panel box shadow.\n * @cssprop [--hx-overflow-menu-panel-min-width=160px] - Minimum panel width.\n * @cssprop [--hx-overflow-menu-panel-z-index=1000] - Panel z-index.\n * @cssprop [--hx-overflow-menu-button-color=var(--hx-color-neutral-600)] - Trigger icon color.\n *\n * @example\n * ```html\n * <hx-overflow-menu>\n *   <button role=\"menuitem\">Edit</button>\n *   <button role=\"menuitem\">Delete</button>\n * </hx-overflow-menu>\n * ```\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-overflow-menu-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-size-touch-target] - Size token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-overlay-black-12] - Overlay color.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n */\n@customElement('hx-overflow-menu')\nexport class HelixOverflowMenu extends HelixElement {\n  static override styles = [helixOverflowMenuStyles, forcedColorsInteractive];\n\n  /**\n   * Preferred placement of the floating panel relative to the trigger.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end' = 'bottom-end';\n\n  /**\n   * Size of the trigger button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the trigger button is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Icon orientation: vertical (kebab ⋮) or horizontal (meatball ···).\n   * @attr icon\n   */\n  @property({ type: String, reflect: true })\n  icon: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Accessible label for the trigger button.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'More actions';\n\n  /**\n   * Accessible label for the menu panel. Reflected as `label-menu`.\n   * @attr label-menu\n   */\n  @property({ type: String, reflect: true, attribute: 'label-menu' })\n  labelMenu = 'Actions';\n\n  /**\n   * Tracks whether the overflow menu panel is currently open and visible.\n   * @internal\n   */\n  @state() private _open = false;\n\n  /**\n   * Unique ID for the floating panel element, used to wire aria-controls on the trigger button.\n   * @internal\n   */\n  private readonly _panelId = `${_nextOverflowMenuId()}-panel`;\n\n  /** @internal */\n  @query('[part~=\"button\"]') private _buttonEl!: HTMLButtonElement | null;\n\n  /** @internal */\n  @query('[part~=\"panel\"]') private _panelEl!: HTMLElement | null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleDocumentClick, true);\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleDocumentClick, true);\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Open / Close ───\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    if (this._open || this.disabled) return;\n    this._open = true;\n    await this.updateComplete;\n    await this._updatePosition();\n    this._focusFirstItem();\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _hide(): void {\n    if (!this._open) return;\n    this._open = false;\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _toggle(): void {\n    if (this._open) {\n      this._hide();\n    } else {\n      void this._show();\n    }\n  }\n\n  // ─── Positioning (Floating UI) ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const trigger = this._buttonEl as HTMLElement | null;\n    const panel = this._panelEl;\n    if (!trigger || !panel) return;\n\n    const { computePosition, flip, shift, offset } = await import('@floating-ui/dom');\n    const { x, y } = await computePosition(trigger, panel, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(4), flip(), shift({ padding: 8 })],\n    });\n\n    Object.assign(panel.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  // ─── Focus management ───\n\n  /** @internal */\n  private _focusFirstItem(): void {\n    const items = this._getMenuItems();\n    items[0]?.focus();\n  }\n\n  /** @internal */\n  private _getMenuItems(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\n    return (\n      (slot\n        ?.assignedElements({ flatten: true })\n        .filter(\n          (el) =>\n            el instanceof HTMLElement &&\n            !el.hasAttribute('disabled') &&\n            !(el as HTMLButtonElement).disabled &&\n            (el.getAttribute('role') === 'menuitem' ||\n              el.getAttribute('role') === 'menuitemcheckbox' ||\n              el.getAttribute('role') === 'menuitemradio' ||\n              el.tagName.toLowerCase().startsWith('hx-')),\n        ) as HTMLElement[]) ?? []\n    );\n  }\n\n  // ─── Event Handlers (arrow function class fields — stable reference, no bind needed) ───\n\n  /** @internal */\n  private readonly _handleTriggerClick = (e: MouseEvent): void => {\n    e.stopPropagation();\n    this._toggle();\n  };\n\n  /** @internal */\n  private readonly _handleDocumentClick = (e: MouseEvent): void => {\n    if (!this._open) return;\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._hide();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._open) return;\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      this._hide();\n      this._buttonEl?.focus();\n      return;\n    }\n    if (e.key === 'Tab') {\n      this._hide();\n      return;\n    }\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n      e.preventDefault();\n      e.stopPropagation();\n      const items = this._getMenuItems();\n      if (items.length === 0) return;\n      const focused = items.indexOf(document.activeElement as HTMLElement);\n      let next: number;\n      if (e.key === 'ArrowDown') {\n        next = focused < 0 || focused >= items.length - 1 ? 0 : focused + 1;\n      } else if (e.key === 'ArrowUp') {\n        next = focused <= 0 ? items.length - 1 : focused - 1;\n      } else if (e.key === 'Home') {\n        next = 0;\n      } else {\n        next = items.length - 1;\n      }\n      items[next]?.focus();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleSlotClick = (e: Event): void => {\n    const target = e.target as HTMLElement;\n    const menuItem = target.closest(\n      '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]',\n    ) as HTMLElement | null;\n    if (!menuItem) return;\n    if (menuItem.hasAttribute('disabled') || (menuItem as HTMLButtonElement).disabled) return;\n    const value = menuItem.getAttribute('data-value') ?? menuItem.textContent?.trim() ?? '';\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value },\n      }),\n    );\n    this._hide();\n  };\n\n  // ─── SVG Icons ───\n\n  /** @internal */\n  private _renderIcon() {\n    if (this.icon === 'horizontal') {\n      return html`\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"1em\"\n          height=\"1em\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"5\" cy=\"12\" r=\"2\" />\n          <circle cx=\"12\" cy=\"12\" r=\"2\" />\n          <circle cx=\"19\" cy=\"12\" r=\"2\" />\n        </svg>\n      `;\n    }\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"12\" cy=\"5\" r=\"2\" />\n        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n        <circle cx=\"12\" cy=\"19\" r=\"2\" />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const btnClasses = {\n      trigger: true,\n      [`trigger--${this.size}`]: true,\n      'trigger--open': this._open,\n    };\n\n    return html`\n      <button\n        part=\"button trigger\"\n        class=${classMap(btnClasses)}\n        type=\"button\"\n        aria-label=${this.label}\n        aria-haspopup=\"menu\"\n        aria-expanded=${String(this._open)}\n        aria-controls=${this._open ? this._panelId : nothing}\n        ?disabled=${this.disabled}\n        @click=${this._handleTriggerClick}\n      >\n        ${this._renderIcon()}\n      </button>\n      ${this._open\n        ? html`\n            <div\n              id=${this._panelId}\n              part=\"panel menu\"\n              role=\"menu\"\n              aria-label=${this.labelMenu}\n              class=\"panel\"\n              @click=${this._handleSlotClick}\n            >\n              <slot></slot>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-overflow-menu': HelixOverflowMenu;\n  }\n}\n"],"names":["helixOverflowMenuStyles","css","_nextOverflowMenuId","createIdCounter","HelixOverflowMenu","HelixElement","_a","items","focused","next","_b","menuItem","value","trigger","panel","computePosition","flip","shift","offset","x","y","slot","el","html","btnClasses","classMap","nothing","forcedColorsInteractive","__decorateClass","property","state","query","customElement"],"mappings":"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"}