@helixui/library 3.8.0 → 3.9.0-next.150

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-number-input-Bvyc9kOi.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, 2px)\n      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\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, 0.25) * 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, 2px)\n      var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\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, 0.25) * 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) — WCAG 2.5.5 (Enhanced) AAA touch target. */\n    padding: var(--hx-space-2) var(--hx-space-3);\n    font-size: var(--hx-font-size-md);\n    min-height: var(--hx-touch-target-min, 2.75rem);\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-glyph {\n    pointer-events: none;\n    --hx-icon-size: 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 '../hx-icon/hx-icon.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 * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-number-input/AAA-AUDIT.md\n * @keyboard-contract activate=character-input; navigate=ArrowUp,ArrowDown; disabled-suppresses=true\n * @aria-pattern spinbutton\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated true\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-number-input\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\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`<hx-icon\n      class=\"field__stepper-glyph\"\n      library=\"helix\"\n      name=\"plus\"\n      aria-hidden=\"true\"\n    ></hx-icon>`;\n  }\n\n  /** @internal */\n  private _renderDecrementIcon() {\n    return html`<hx-icon\n      class=\"field__stepper-glyph\"\n      library=\"helix\"\n      name=\"dash\"\n      aria-hidden=\"true\"\n    ></hx-icon>`;\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-DFjJAziP.js → hx-overflow-menu-LrTteeR1.js}

@@ -1,5 +1,5 @@
-import { css as x, html as d, nothing as m } from "lit";
-import { property as h, state as g, query as v, customElement as _ } from "lit/decorators.js";
+import { css as x, html as u, nothing as m } from "lit";
+import { property as h, state as g, query as b, customElement as _ } from "lit/decorators.js";
 import { classMap as y } from "lit/directives/class-map.js";
 import { f as w } from "./forced-colors-CTEDFRGa.js";
 import { f as k } from "./aria-flatten-DY6v2vah.js";
@@ -175,6 +175,11 @@ const M = x`
       border: 2px solid CanvasText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated trigger icons (1em parity). */
+  .trigger__glyph {
+    --hx-icon-size: 1em;
+  }
 `;
 var S = Object.defineProperty, L = Object.getOwnPropertyDescriptor, l = (e, t, r, i) => {
   for (var o = i > 1 ? void 0 : i ? L(t, r) : t, n = e.length - 1, s; n >= 0; n--)
@@ -246,9 +251,9 @@ let a = class extends E {
         i.call(r, !0);
         const o = r.updateComplete;
         o && o.then(() => {
-          var c, u;
-          const n = (c = r.shadowRoot) == null ? void 0 : c.querySelector('slot[name="submenu"]'), s = n == null ? void 0 : n.assignedElements({ flatten: !0 }).find((b) => b.tagName.toLowerCase() === "hx-menu");
-          (u = s == null ? void 0 : s.focusFirst) == null || u.call(s);
+          var d, c;
+          const n = (d = r.shadowRoot) == null ? void 0 : d.querySelector('slot[name="submenu"]'), s = n == null ? void 0 : n.assignedElements({ flatten: !0 }).find((v) => v.tagName.toLowerCase() === "hx-menu");
+          (c = s == null ? void 0 : s.focusFirst) == null || c.call(s);
         }).catch(() => {
         });
       });
@@ -292,14 +297,14 @@ let a = class extends E {
   async _updatePosition() {
     const e = this._buttonEl, t = this._panelEl;
     if (!e || !t) return;
-    const { computePosition: r, flip: i, shift: o, offset: n } = await import("@floating-ui/dom"), { x: s, y: c } = await r(e, t, {
+    const { computePosition: r, flip: i, shift: o, offset: n } = await import("@floating-ui/dom"), { x: s, y: d } = await r(e, t, {
       placement: this.placement,
       strategy: "fixed",
       middleware: [n(4), i(), o({ padding: 8 })]
     });
     Object.assign(t.style, {
       left: `${s}px`,
-      top: `${c}px`
+      top: `${d}px`
     });
   }
   // ─── Focus management ───
@@ -383,35 +388,23 @@ let a = class extends E {
     r ? n = r : o ? n = o : n = this.label, this._resolvedTriggerLabel = n;
   }
   // ─── SVG Icons ───
-  /** @internal */
+  /**
+   * @internal Helix's curated set provides the horizontal `ellipsis` glyph.
+   * For the vertical variant we fall back to FA Free's `ellipsis-vertical`
+   * since it isn't part of helix's 32-glyph vocabulary.
+   */
   _renderIcon() {
-    return this.icon === "horizontal" ? d`
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="1em"
-          height="1em"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <circle cx="5" cy="12" r="2" />
-          <circle cx="12" cy="12" r="2" />
-          <circle cx="19" cy="12" r="2" />
-        </svg>
-      ` : d`
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-        fill="currentColor"
+    return this.icon === "horizontal" ? u`<hx-icon
+        class="trigger__glyph"
+        library="helix"
+        name="ellipsis"
         aria-hidden="true"
-      >
-        <circle cx="12" cy="5" r="2" />
-        <circle cx="12" cy="12" r="2" />
-        <circle cx="12" cy="19" r="2" />
-      </svg>
-    `;
+      ></hx-icon>` : u`<hx-icon
+      class="trigger__glyph"
+      library="fa-free"
+      name="ellipsis-vertical"
+      aria-hidden="true"
+    ></hx-icon>`;
   }
   // ─── Render ───
   render() {
@@ -420,7 +413,7 @@ let a = class extends E {
       [`trigger--${this.size}`]: !0,
       "trigger--open": this._open
     };
-    return d`
+    return u`
       <button
         part="button trigger"
         class=${y(e)}
@@ -434,7 +427,7 @@ let a = class extends E {
       >
         ${this._renderIcon()}
       </button>
-      ${this._open ? d`
+      ${this._open ? u`
             <div
               id=${this._panelId}
               part="panel menu"
@@ -478,10 +471,10 @@ l([
   g()
 ], a.prototype, "_resolvedTriggerLabel", 2);
 l([
-  v('[part~="button"]')
+  b('[part~="button"]')
 ], a.prototype, "_buttonEl", 2);
 l([
-  v('[part~="panel"]')
+  b('[part~="panel"]')
 ], a.prototype, "_panelEl", 2);
 a = l([
   _("hx-overflow-menu")
@@ -489,4 +482,4 @@ a = l([
 export {
   a as H
 };
-//# sourceMappingURL=hx-overflow-menu-DFjJAziP.js.map
+//# sourceMappingURL=hx-overflow-menu-LrTteeR1.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-overflow-menu-LrTteeR1.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(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\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(--hx-overflow-menu-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\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  /* hx-icon glyph sizing for the migrated trigger icons (1em parity). */\n  .trigger__glyph {\n    --hx-icon-size: 1em;\n  }\n`;\n","import { html, nothing, type PropertyValues } 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';\nimport '../hx-icon/hx-icon.js';\n\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixOverflowMenuStyles } from './hx-overflow-menu.styles.js';\nimport { flattenAccName } from '../../utils/aria-flatten.js';\nimport { getMenuItemTypeaheadLabel } from '../../utils/menu-label.js';\nimport { writeMenuItemRovingTabIndex } from '../../utils/menu-roving.js';\nimport { findClosestMenuAncestor } from '../../utils/menu-tree.js';\nimport {\n  installAriaIdrefMirror,\n  resolveIdrefTokens,\n  type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.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 * ## Architecture Note: Host-Attribute Trigger Label Mirror (group-5b)\n *\n * The composite has TWO ARIA-bearing surfaces inside its shadow DOM: the\n * trigger button (`role` defaulted from `<button>`, with `aria-haspopup`,\n * `aria-expanded`, `aria-controls`) and the panel (`role=\"menu\"` on the\n * inner div). The host wraps both — it cannot carry either canonical role\n * itself, so role placement remains on the inner elements.\n *\n * What Group 5b adds:\n * - **Roving tabindex** on slotted menu items (only the focused item has\n *   tabindex=0; arrow keys move focus and rewrite tabindex). Closing-Tab\n *   path is preserved (Tab moves focus past the menu and closes it).\n * - **First-character typeahead** with 500ms timeout matching `hx-menu`.\n * - **Host-attribute label mirror**: consumer-supplied `aria-label` /\n *   `aria-labelledby` on the host flow to the trigger button's\n *   `aria-label` (the trigger is the announced surface of the disclosure\n *   pattern; consumer override wins over the `label` property). The panel\n *   continues to use `labelMenu` for its own slot label.\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 * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-overflow-menu/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow,Home,End; activate=Enter,Space; dismiss=Escape; disabled-suppresses=true\n * @aria-pattern menu\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-overflow-menu\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\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. Used as a fallback when no\n   * consumer-supplied `aria-label` / `aria-labelledby` is present on the\n   * host. Consumer host attributes win in the AccName 1.2 §4.3.1 cascade.\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   * Resolved accessible name for the trigger button — written to the inner\n   * button's `aria-label`. Recomputed via the host-attribute mirror on\n   * every aria-* mutation. AccName 1.2 §4.3.1 precedence: host\n   * `aria-labelledby` (flattened) > host `aria-label` > `label` property.\n   * @internal\n   */\n  @state() private _resolvedTriggerLabel = '';\n\n  /**\n   * Index within `_getMenuItems()` of the item currently holding the\n   * roving tabindex (and thus visual focus). −1 means the panel has not\n   * been keyboard-focused yet (first key press lands on item 0).\n   * @internal\n   */\n  private _rovingIndex = -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  /**\n   * Handle for the shared host attribute / root id observer.\n   * @internal\n   */\n  private _ariaMirror: AriaIdrefMirrorHandle | null = null;\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    this._syncResolvedTriggerLabel();\n    this._ariaMirror = installAriaIdrefMirror(this, () => {\n      this._syncResolvedTriggerLabel();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleDocumentClick, true);\n    this.removeEventListener('keydown', this._handleKeydown);\n    if (this._typeaheadTimer !== null) {\n      clearTimeout(this._typeaheadTimer);\n      this._typeaheadTimer = null;\n    }\n    this._ariaMirror?.disconnect();\n    this._ariaMirror = null;\n  }\n\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('label')) {\n      this._syncResolvedTriggerLabel();\n    }\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._initRovingTabIndex();\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._rovingIndex = -1;\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    if (items.length === 0) return;\n    this._rovingIndex = 0;\n    this._applyRovingTabIndex();\n    items[0]?.focus();\n  }\n\n  /**\n   * Codex push-gate round-2 finding 3: write the roving tabindex through\n   * the right surface for each item shape. Implementation moved to the\n   * shared `writeMenuItemRovingTabIndex` util (round-8 finding 2) so\n   * `hx-dropdown` and any future host-canonical menu shape route through\n   * one source of truth instead of duplicating the host-vs-inner-element\n   * branch per component.\n   *\n   * - `hx-menu-item` is host-canonical: on the modern path the roving\n   *   tabindex must land on the host (it carries the announced role +\n   *   IDL ARIA), and on the fallback path it must land on the inner\n   *   `.menu-item` (the host is forced to `tabindex=-1` so there is\n   *   exactly one focusable surface per item). The util's\n   *   `setRovingTabIndex(value)` route handles both paths internally.\n   * - Plain slotted `[role=\"menuitem\"]` elements (legacy `<button>`-style\n   *   children) keep the direct `item.tabIndex = value` write.\n   *\n   * Without this routing, host-canonical items on the fallback path stay\n   * at `tabindex=-1` because the host write never reaches the inner\n   * focusable surface — Tab would land on a non-focusable host and arrow\n   * navigation would fail to advance the announced item.\n   * @internal\n   */\n\n  /**\n   * Initialize roving tabindex on all enabled menu items: only the first\n   * receives tabindex=0; the rest are tabindex=-1. Maintains the closing-\n   * Tab semantics required by APG (tabbing past the menu closes it via\n   * the keydown handler below).\n   * @internal\n   */\n  private _initRovingTabIndex(): void {\n    const items = this._getMenuItems();\n    items.forEach((item, i) => {\n      writeMenuItemRovingTabIndex(item, i === 0 ? 0 : -1);\n    });\n    this._rovingIndex = items.length > 0 ? 0 : -1;\n  }\n\n  /** @internal */\n  private _applyRovingTabIndex(): void {\n    const items = this._getMenuItems();\n    items.forEach((item, i) => {\n      writeMenuItemRovingTabIndex(item, i === this._rovingIndex ? 0 : -1);\n    });\n  }\n\n  /** @internal */\n  private _getMenuItems(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\n    // Allow-list of host-canonical menu-item shapes — `hx-menu-item` carries\n    // its `role` via `_internals.role` (AT-only, no DOM attribute), so the\n    // role-attribute checks below would miss it. Restrict the wc allow-list\n    // to known menu-item hosts so siblings like `hx-menu-divider`\n    // (`role=\"separator\"`) and decorative `hx-text` / `hx-icon` slotted into\n    // the panel are NOT treated as focus / typeahead targets — APG mandates\n    // separators stay non-focusable.\n    const isHostCanonicalMenuItem = (el: Element): boolean => el.localName === 'hx-menu-item';\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              isHostCanonicalMenuItem(el)),\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      // APG: Tab moves focus past the menu and closes it. Do not\n      // preventDefault; let focus advance naturally.\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      this._rovingIndex = next;\n      this._applyRovingTabIndex();\n      items[next]?.focus();\n      return;\n    }\n    // First-character typeahead — letters only, no modifier keys, ignore Space.\n    if (e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {\n      this._handleTypeahead(e.key);\n    }\n  };\n\n  /** @internal */\n  private _handleTypeahead(char: string): 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 items = this._getMenuItems();\n    // Codex push-gate round-7 finding 3: shared submenu-aware label\n    // extractor — see hx-menu / hx-dropdown for rationale.\n    const match = items.findIndex((item) => {\n      const text = getMenuItemTypeaheadLabel(item).toLowerCase();\n      return text.startsWith(this._typeaheadBuffer);\n    });\n\n    if (match !== -1) {\n      this._rovingIndex = match;\n      this._applyRovingTabIndex();\n      items[match]?.focus();\n    }\n  }\n\n  /** @internal */\n  private readonly _handleSlotClick = (e: Event): void => {\n    const target = e.target as HTMLElement;\n    // Group 5b round-3 (codex): bail FIRST on host-canonical `hx-menu-item`,\n    // independently of what `closest()` resolves with the legacy selectors.\n    // If a consumer slots a `[role=\"menuitem*\"]` descendant inside an\n    // `hx-menu-item`, `closest()` would resolve to the descendant first\n    // (nearest match) and the legacy localName guard would miss, double-firing\n    // `hx-select` (once here, once from `_handleSlotItemSelect`). The host\n    // owns its own dispatch path; descendants of the host must defer.\n    if (target.closest('hx-menu-item')) return;\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  /**\n   * Handle `hx-item-select` bubbling from slotted `hx-menu-item` children.\n   * The host-canonical shape owns its own activation (click + Enter/Space),\n   * so route its event through to the composite's `hx-select` contract and\n   * close the panel. Disabled items never emit `hx-item-select`, so no\n   * disabled-guard is needed here.\n   * @internal\n   */\n  private readonly _handleSlotItemSelect = (e: Event): void => {\n    const detail = (e as CustomEvent<{ item: HTMLElement; value: string }>).detail;\n    const value = detail?.value ?? '';\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  /**\n   * Bubbled `hx-item-submenu-open` from a slotted `hx-menu-item` host.\n   * Codex push-gate round-9 P1: when slotted `hx-menu-item`s open / close\n   * a nested submenu inside this panel (no enclosing `hx-menu`), the\n   * events fly past with no handler. Match the round-4\n   * `hx-menu._handleSubmenuOpen` shape so APG behaviour holds. Defer to\n   * an inner `hx-menu` when present (it owns the toggle). Otherwise this\n   * panel is the enclosing menu surface — call `setSubmenuOpen(true)` on\n   * the dispatching item and focus its first nested child.\n   * @internal\n   */\n  private readonly _handleSlotSubmenuOpen = (e: Event): void => {\n    if (!(e instanceof CustomEvent)) return;\n    const detail = (e as CustomEvent<{ item: HTMLElement }>).detail;\n    const item = detail?.item;\n    if (!item) return;\n    if (findClosestMenuAncestor(item) !== null) return;\n    queueMicrotask(() => {\n      if (e.defaultPrevented) return;\n      const setter = (item as HTMLElement & { setSubmenuOpen?: (v: boolean) => void })\n        .setSubmenuOpen;\n      if (typeof setter !== 'function') return;\n      setter.call(item, true);\n      const updateComplete = (item as HTMLElement & { updateComplete?: Promise<unknown> })\n        .updateComplete;\n      if (updateComplete) {\n        void updateComplete\n          .then(() => {\n            const submenuSlot = (\n              item as HTMLElement & { shadowRoot?: ShadowRoot | null }\n            ).shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"submenu\"]');\n            const nested = submenuSlot\n              ?.assignedElements({ flatten: true })\n              .find((el) => el.tagName.toLowerCase() === 'hx-menu') as\n              | (HTMLElement & { focusFirst?: () => void })\n              | undefined;\n            nested?.focusFirst?.();\n          })\n          .catch(() => undefined);\n      }\n    });\n  };\n\n  /**\n   * Bubbled `hx-item-submenu-close` from a slotted `hx-menu-item` host.\n   * Codex push-gate round-9 P1: when an inner `hx-menu` (a nested\n   * submenu) handles its own close, the event still bubbles through this\n   * panel — defer in that case so the panel stays open. When the\n   * dispatching item is top-level inside this panel (no enclosing\n   * `hx-menu`), there is no parent submenu to collapse, so close the\n   * composite's panel and return focus to the trigger.\n   * @internal\n   */\n  private readonly _handleSlotSubmenuClose = (e: Event): void => {\n    if (!(e instanceof CustomEvent)) return;\n    const detail = (e as CustomEvent<{ item: HTMLElement }>).detail;\n    const item = detail?.item;\n    if (!item) return;\n    if (findClosestMenuAncestor(item) !== null) return;\n    if (e.defaultPrevented) return;\n    this._hide();\n    // CodeRabbit MUST-FIX (WCAG 2.1.1 / 2.4.3): ArrowLeft close from a\n    // top-level slotted item dropped focus to <body>. Mirror the Escape\n    // branch and restore focus to the trigger so keyboard continuity is\n    // preserved.\n    this._buttonEl?.focus();\n  };\n\n  /** @internal */\n  private readonly _handleSlotChange = (): void => {\n    if (this._open) {\n      this._initRovingTabIndex();\n    }\n  };\n\n  // ─── Host-attribute trigger label mirror ───\n\n  /**\n   * Resolves the trigger button's accessible name from host attributes and\n   * the `label` property. AccName 1.2 §4.3.1 precedence:\n   *   1. Host `aria-labelledby` (resolved IDREFs, flattened)\n   *   2. Host `aria-label`\n   *   3. `label` property\n   * @internal\n   */\n  private _syncResolvedTriggerLabel(): void {\n    const liveLabelledBy = this.getAttribute('aria-labelledby');\n    const consumerLabelEls = resolveIdrefTokens(this, liveLabelledBy);\n\n    // CodeRabbit MUST-FIX: AccName 1.2 §4.3.2 — `aria-labelledby` references\n    // their target text content REGARDLESS of visibility. The previous\n    // outer visibility filter dropped legitimate accessible names from\n    // visually-hidden labels. `flattenAccName` already handles aria-hidden\n    // subtree pruning per §4.3.10.\n    const flattenedFromIdrefs = consumerLabelEls\n      .map((el) => flattenAccName(el))\n      .filter((t) => t.length > 0)\n      .join(' ')\n      .replace(/\\s+/g, ' ')\n      .trim();\n\n    const liveAriaLabel = this.getAttribute('aria-label');\n    const hostAriaLabel = liveAriaLabel !== null ? liveAriaLabel.trim() : '';\n\n    let resolved = '';\n    if (flattenedFromIdrefs) {\n      resolved = flattenedFromIdrefs;\n    } else if (hostAriaLabel) {\n      resolved = hostAriaLabel;\n    } else {\n      resolved = this.label;\n    }\n\n    this._resolvedTriggerLabel = resolved;\n  }\n\n  // ─── SVG Icons ───\n\n  /**\n   * @internal Helix's curated set provides the horizontal `ellipsis` glyph.\n   * For the vertical variant we fall back to FA Free's `ellipsis-vertical`\n   * since it isn't part of helix's 32-glyph vocabulary.\n   */\n  private _renderIcon() {\n    if (this.icon === 'horizontal') {\n      return html`<hx-icon\n        class=\"trigger__glyph\"\n        library=\"helix\"\n        name=\"ellipsis\"\n        aria-hidden=\"true\"\n      ></hx-icon>`;\n    }\n    return html`<hx-icon\n      class=\"trigger__glyph\"\n      library=\"fa-free\"\n      name=\"ellipsis-vertical\"\n      aria-hidden=\"true\"\n    ></hx-icon>`;\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._resolvedTriggerLabel}\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              @hx-item-select=${this._handleSlotItemSelect}\n              @hx-item-submenu-open=${this._handleSlotSubmenuOpen}\n              @hx-item-submenu-close=${this._handleSlotSubmenuClose}\n            >\n              <slot @slotchange=${this._handleSlotChange}></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","target","menuItem","value","detail","item","findClosestMenuAncestor","setter","updateComplete","submenuSlot","nested","el","installAriaIdrefMirror","changedProperties","trigger","panel","computePosition","flip","shift","offset","x","y","i","writeMenuItemRovingTabIndex","slot","isHostCanonicalMenuItem","char","match","getMenuItemTypeaheadLabel","liveLabelledBy","flattenedFromIdrefs","resolveIdrefTokens","flattenAccName","t","liveAriaLabel","hostAriaLabel","resolved","html","btnClasses","classMap","nothing","forcedColorsInteractive","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-phi-field-C19oxlrr.js → hx-phi-field-sZt_rYIL.js}

@@ -75,9 +75,8 @@ const b = c`
     opacity: var(--hx-opacity-50, 0.5);
   }
 
-  .phi-field__toggle svg {
-    width: 1em;
-    height: 1em;
+  .phi-field__glyph {
+    --hx-icon-size: 1em;
     pointer-events: none;
   }
 
@@ -115,12 +114,12 @@ const b = c`
     }
   }
 `;
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, t, s, o) => {
-  for (var a = o > 1 ? void 0 : o ? g(t, s) : t, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (a = (o ? d(t, s, a) : d(a)) || a);
-  return o && a && v(t, s, a), a;
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, i, s, o) => {
+  for (var a = o > 1 ? void 0 : o ? g(i, s) : i, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (a = (o ? d(i, s, a) : d(a)) || a);
+  return o && a && v(i, s, a), a;
 };
-let i = class extends _ {
+let t = class extends _ {
   constructor() {
     super(...arguments), this.data = "", this.fieldType = "ssn", this.fieldId = "", this.clipboardTimeout = 3e4, this.label = "", this.autoHideDelay = 60, this.disabled = !1, this._masked = !0, this._clipboardTimer = null, this._autoHideTimer = null, this._boundHandleVisibilityChange = () => {
       document.visibilityState === "hidden" && (this._masked && this._clipboardTimer === null || this._clearClipboard());
@@ -173,12 +172,12 @@ let i = class extends _ {
   }
   /** @internal Add interaction listeners to reset auto-hide timer. */
   _addAutoHideInteractionListeners() {
-    for (const e of i._AUTO_HIDE_INTERACTION_EVENTS)
+    for (const e of t._AUTO_HIDE_INTERACTION_EVENTS)
       this.addEventListener(e, this._boundResetAutoHideTimer);
   }
   /** @internal Remove interaction listeners. */
   _removeAutoHideInteractionListeners() {
-    for (const e of i._AUTO_HIDE_INTERACTION_EVENTS)
+    for (const e of t._AUTO_HIDE_INTERACTION_EVENTS)
       this.removeEventListener(e, this._boundResetAutoHideTimer);
   }
   /** @internal */
@@ -190,14 +189,14 @@ let i = class extends _ {
   /** @internal */
   _clearClipboard() {
     this._cancelClipboardTimer(), this._cancelAutoHideTimer(), this._masked = !0;
-    const e = (t) => {
+    const e = (i) => {
       this.dispatchEvent(
         new CustomEvent("hx-phi-access", {
           bubbles: !0,
           composed: !0,
           detail: {
             fieldId: this.fieldId || this.id || "",
-            action: t ? "clipboard-clear" : "clipboard-clear-failed",
+            action: i ? "clipboard-clear" : "clipboard-clear-failed",
             timestamp: (/* @__PURE__ */ new Date()).toISOString(),
             fieldType: this.fieldType
           }
@@ -209,17 +208,17 @@ let i = class extends _ {
       return;
     }
     try {
-      const t = navigator.clipboard;
-      if (!t) {
+      const i = navigator.clipboard;
+      if (!i) {
         e(!1);
         return;
       }
-      const s = t.writeText;
+      const s = i.writeText;
       if (typeof s != "function") {
         e(!1);
         return;
       }
-      Promise.resolve(s.call(t, "")).then(
+      Promise.resolve(s.call(i, "")).then(
         () => e(!0),
         () => e(!1)
       );
@@ -236,11 +235,11 @@ let i = class extends _ {
         return e ? `***${e[2]}**${e[4]}${e[5]}` : this.data.slice(0, -4).replace(/\d/g, "*") + this.data.slice(-4);
       }
       case "mrn": {
-        const e = this.data.split(""), t = [];
+        const e = this.data.split(""), i = [];
         e.forEach((l, d) => {
-          /[a-zA-Z0-9]/.test(l) && t.push(d);
+          /[a-zA-Z0-9]/.test(l) && i.push(d);
         });
-        const s = Math.min(4, t.length), o = t.length - s, a = new Set(t.slice(0, o));
+        const s = Math.min(4, i.length), o = i.length - s, a = new Set(i.slice(0, o));
         return e.map((l, d) => a.has(d) ? "*" : l).join("");
       }
       case "dob":
@@ -280,44 +279,25 @@ let i = class extends _ {
   // ─── Render Helpers ───
   /** @internal */
   _renderEyeIcon() {
-    return h`
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-      >
-        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-        <circle cx="12" cy="12" r="3" />
-      </svg>
-    `;
+    return h`<hx-icon
+      class="phi-field__glyph"
+      library="helix"
+      name="eye"
+      aria-hidden="true"
+    ></hx-icon>`;
   }
   /** @internal */
   _renderEyeOffIcon() {
-    return h`
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-      >
-        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
-        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
-        <line x1="1" y1="1" x2="23" y2="23" />
-      </svg>
-    `;
+    return h`<hx-icon
+      class="phi-field__glyph"
+      library="helix"
+      name="eye-off"
+      aria-hidden="true"
+    ></hx-icon>`;
   }
   // ─── Render ───
   render() {
-    const e = this.label || "Protected health information", t = `${e} is masked`, s = `${e} is revealed`, o = `Reveal ${e.toLowerCase()}`, a = `Hide ${e.toLowerCase()}`;
+    const e = this.label || "Protected health information", i = `${e} is masked`, s = `${e} is revealed`, o = `Reveal ${e.toLowerCase()}`, a = `Hide ${e.toLowerCase()}`;
     return h`
       <div
         part="container"
@@ -334,7 +314,7 @@ let i = class extends _ {
               >${this.data}</span
             >`}
         <span role="status" aria-live="polite" aria-atomic="true" class="phi-field__status">
-          ${this._masked ? t : s}
+          ${this._masked ? i : s}
         </span>
         <button
           part="toggle"
@@ -351,8 +331,8 @@ let i = class extends _ {
     `;
   }
 };
-i.styles = [b, m];
-i._AUTO_HIDE_INTERACTION_EVENTS = [
+t.styles = [b, m];
+t._AUTO_HIDE_INTERACTION_EVENTS = [
   "mouseenter",
   "mousemove",
   "focusin",
@@ -361,32 +341,32 @@ i._AUTO_HIDE_INTERACTION_EVENTS = [
 ];
 r([
   n({ attribute: !1 })
-], i.prototype, "data", 2);
+], t.prototype, "data", 2);
 r([
   n({ type: String, reflect: !0, attribute: "field-type" })
-], i.prototype, "fieldType", 2);
+], t.prototype, "fieldType", 2);
 r([
   n({ type: String, attribute: "field-id" })
-], i.prototype, "fieldId", 2);
+], t.prototype, "fieldId", 2);
 r([
   n({ type: Number, attribute: "clipboard-timeout" })
-], i.prototype, "clipboardTimeout", 2);
+], t.prototype, "clipboardTimeout", 2);
 r([
   n({ type: String })
-], i.prototype, "label", 2);
+], t.prototype, "label", 2);
 r([
   n({ type: Number, attribute: "auto-hide-delay" })
-], i.prototype, "autoHideDelay", 2);
+], t.prototype, "autoHideDelay", 2);
 r([
   n({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
+], t.prototype, "disabled", 2);
 r([
   p()
-], i.prototype, "_masked", 2);
-i = r([
+], t.prototype, "_masked", 2);
+t = r([
   f("hx-phi-field")
-], i);
+], t);
 export {
-  i as H
+  t as H
 };
-//# sourceMappingURL=hx-phi-field-C19oxlrr.js.map
+//# sourceMappingURL=hx-phi-field-sZt_rYIL.js.map