npm - @helixui/library - Versions diffs - 3.6.0 → 3.8.0-next.145 - Mend

@helixui/library 3.6.0 → 3.8.0-next.145

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (413) hide show

package/dist/shared/{hx-overflow-menu-DFjJAziP.js.map → hx-overflow-menu-LrTteeR1.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-overflow-menu-DFjJAziP.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","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';\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 /\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 /* @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._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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"}
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-pagination-C7y8GVyU.js → hx-pagination-D726PyTM.js} RENAMED Viewed

@@ -61,7 +61,10 @@ const z = x`
   .button:hover:not(:disabled) {
     background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
-    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #429797));
+    border-color: var(
+      --hx-pagination-hover-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
   .button:focus-visible {
@@ -71,10 +74,10 @@ const z = x`
   }
   .button[aria-current='page'] {
-    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797));
+    background: var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078));
     border-color: var(
       --hx-pagination-active-border-color,
-      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797))
+      var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078))
     );
     color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
@@ -475,4 +478,4 @@ o = s([
 export {
   o as H
 };
-//# sourceMappingURL=hx-pagination-C7y8GVyU.js.map
+//# sourceMappingURL=hx-pagination-D726PyTM.js.map

package/dist/shared/hx-pagination-D726PyTM.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-pagination-D726PyTM.js","sources":["../../src/components/hx-pagination/hx-pagination.styles.ts","../../src/components/hx-pagination/hx-pagination.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPaginationStyles = css`\n :host {\n display: block;\n font-family: var(--hx-pagination-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n .pagination-root {\n display: flex;\n align-items: center;\n gap: var(--hx-space-4, 1rem);\n flex-wrap: wrap;\n }\n\n nav {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .list {\n display: flex;\n align-items: center;\n gap: var(--hx-pagination-gap, var(--hx-space-1, 0.25rem));\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .item {\n display: flex;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n padding: 0 var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-pagination-border-color, var(--hx-color-border-strong, #66787b));\n border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));\n background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));\n color: var(--hx-pagination-color, var(--hx-color-text-primary, #0d1825));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms) ease,\n border-color var(--hx-transition-fast, 150ms) ease,\n color var(--hx-transition-fast, 150ms) ease;\n text-decoration: none;\n white-space: nowrap;\n }\n\n .button:hover:not(:disabled) {\n background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n border-color: var(\n --hx-pagination-hover-border-color,\n var(--hx-color-action-primary-bg, #0f7078)\n );\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .button[aria-current='page'] {\n background: var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078));\n border-color: var(\n --hx-pagination-active-border-color,\n var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078))\n );\n color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));\n font-weight: var(--hx-font-weight-semibold, 600);\n cursor: default;\n pointer-events: none;\n }\n\n .button:disabled {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #4a5362));\n font-size: var(--hx-font-size-sm, 0.875rem);\n user-select: none;\n }\n\n .button[aria-disabled='true'] {\n cursor: default;\n pointer-events: none;\n }\n\n /* Page size selector */\n .page-size-wrapper {\n display: flex;\n align-items: center;\n }\n\n .page-size-label {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-pagination-page-size-label-color, var(--hx-color-text-muted, #4a5362));\n white-space: nowrap;\n }\n\n .page-size-select {\n min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));\n padding: 0 var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-pagination-border-color, var(--hx-color-border-strong, #66787b));\n border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));\n background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));\n color: var(--hx-pagination-color, var(--hx-color-text-primary, #0d1825));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n }\n\n .page-size-select:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* Visually hidden — used for aria-live status messages */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n\n /* Windows High Contrast / forced-colors support */\n @media (forced-colors: active) {\n .button {\n border: 1px solid ButtonText;\n color: ButtonText;\n background: ButtonFace;\n forced-color-adjust: none;\n }\n\n .button:hover:not(:disabled) {\n border-color: Highlight;\n color: Highlight;\n }\n\n .button:focus-visible {\n outline-color: Highlight;\n }\n\n .button[aria-current='page'] {\n background: Highlight;\n border-color: Highlight;\n color: HighlightText;\n }\n\n .button:disabled {\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n .button[aria-disabled='true'] {\n color: GrayText;\n }\n\n .page-size-select {\n border-color: ButtonText;\n color: ButtonText;\n background: ButtonFace;\n forced-color-adjust: none;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixPaginationStyles } from './hx-pagination.styles.js';\n\n/** Detail for the hx-page-change event dispatched by hx-pagination. */\nexport interface HxPageChangeDetail {\n page: number;\n}\n\n/** Detail for the hx-page-size-change event dispatched by hx-pagination. */\nexport interface HxPageSizeChangeDetail {\n pageSize: number;\n}\n\n/**\n * A pagination component for navigating content listings.\n *\n * @summary Page navigation with page numbers, prev/next, and ellipsis.\n *\n * @tag hx-pagination\n *\n * @csspart nav - The wrapping `<nav>` element.\n * @csspart list - The `<ul>` containing pagination items.\n * @csspart item - Each `<li>` item.\n * @csspart button - Each page button or prev/next control.\n * @csspart ellipsis - The ellipsis (`…`) span between page groups.\n * @csspart page-size-wrapper - The wrapper `<div>` around the page-size selector.\n * @csspart page-size-label - The `<label>` element for the page-size selector.\n * @csspart page-size-select - The `<select>` element for page-size.\n *\n * @cssprop [--hx-pagination-gap=0.25rem] - Gap between pagination buttons. Inherits from --hx-spacing-1.\n * @cssprop [--hx-pagination-button-size=2.25rem] - Minimum width and height of each button.\n * @cssprop [--hx-pagination-border-color] - Border color of buttons. Inherits from --hx-color-border (final fallback: #d1d5db).\n * @cssprop [--hx-pagination-border-radius] - Border radius of buttons. Inherits from --hx-border-radius-md (final fallback: 0.375rem).\n * @cssprop [--hx-pagination-bg] - Background color of buttons. Inherits from --hx-color-surface (final fallback: #ffffff).\n * @cssprop [--hx-pagination-color] - Text color of buttons. Inherits from --hx-color-text-primary (final fallback: #111827).\n * @cssprop [--hx-pagination-hover-bg] - Background color of buttons on hover. Inherits from --hx-color-surface-hover (final fallback: #f3f4f6).\n * @cssprop [--hx-pagination-hover-border-color] - Border color of buttons on hover. Inherits from --hx-color-primary (final fallback: #2563eb).\n * @cssprop [--hx-pagination-active-bg] - Background color of the active/current page button. Inherits from --hx-color-primary (final fallback: #2563eb).\n * @cssprop [--hx-pagination-active-color] - Text color of the active/current page button. Inherits from --hx-color-surface (final fallback: #ffffff).\n * @cssprop [--hx-pagination-active-border-color] - Border color of the active/current page button. Defaults to --hx-pagination-active-bg.\n * @cssprop [--hx-pagination-ellipsis-color] - Color of ellipsis characters. Inherits from --hx-color-text-secondary (final fallback: #6b7280).\n * @cssprop [--hx-transition-fast=150ms] - Duration used for hover/focus transitions.\n *\n * @fires {CustomEvent<{ page: number }>} hx-page-change - Fired when the user navigates to a new page.\n * @fires {CustomEvent<{ pageSize: number }>} hx-page-size-change - Fired when the user selects a new page size.\n *\n * @example\n * ```html\n * <hx-pagination total-pages=\"10\" current-page=\"1\"></hx-pagination>\n * ```\n *\n * @example Drupal / Twig integration\n * ```twig\n * {#\n * Drupal's pager uses 0-based page index in the URL (?page=N).\n * This component is 1-based, so add 1 to the Drupal page value.\n * Listen to hx-page-change and update the URL query param:\n * element.addEventListener('hx-page-change', (e) => {\n * const params = new URLSearchParams(location.search);\n * params.set('page', e.detail.page - 1); // convert back to 0-based\n * history.pushState({}, '', '?' + params.toString());\n * });\n * #}\n * <hx-pagination\n * total-pages=\"{{ total_pages }}\"\n * current-page=\"{{ pager.current_page + 1 }}\"\n * label=\"{{ 'Pagination'|t }}\"\n * {{ show_first_last ? 'show-first-last' : '' }}\n * ></hx-pagination>\n * ```\n * @cssprop [--hx-pagination-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-pagination-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-color-neutral-500] - Color.\n */\n@customElement('hx-pagination')\nexport class HelixPagination extends HelixElement {\n static override styles = [helixPaginationStyles, forcedColorsInteractive];\n\n /**\n * Total number of pages.\n * @attr total-pages\n */\n @property({ type: Number, attribute: 'total-pages', reflect: true })\n totalPages = 1;\n\n /**\n * The currently active page (1-based).\n * @attr current-page\n */\n @property({ type: Number, attribute: 'current-page' })\n currentPage = 1;\n\n /**\n * Number of page buttons shown on each side of the current page.\n * @attr sibling-count\n */\n @property({ type: Number, attribute: 'sibling-count', reflect: true })\n siblingCount = 1;\n\n /**\n * Number of pages always shown at the start and end of the list.\n * @attr boundary-count\n */\n @property({ type: Number, attribute: 'boundary-count', reflect: true })\n boundaryCount = 1;\n\n /**\n * Whether to show First and Last page buttons.\n * @attr show-first-last\n */\n @property({ type: Boolean, attribute: 'show-first-last', reflect: true })\n showFirstLast = false;\n\n /**\n * Accessible label for the `<nav>` element.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'Pagination';\n\n /**\n * The number of items displayed per page. When set, a page-size selector\n * `<select>` is rendered. Set `show-page-size` to display the selector.\n * @attr page-size\n */\n @property({ type: Number, attribute: 'page-size', reflect: true })\n pageSize = 25;\n\n /**\n * Whether to show the page-size selector UI.\n * @attr show-page-size\n */\n @property({ type: Boolean, attribute: 'show-page-size', reflect: true })\n showPageSize = false;\n\n /**\n * Label text for the rows-per-page selector.\n * @attr label-rows-per-page\n */\n @property({ type: String, attribute: 'label-rows-per-page' })\n labelRowsPerPage = 'Rows per page:';\n\n /**\n * Accessible label for the \"First page\" navigation button.\n * @attr first-page-label\n */\n @property({ attribute: 'first-page-label' })\n firstPageLabel = 'First page';\n\n /**\n * Accessible label for the \"Previous page\" navigation button.\n * @attr previous-page-label\n */\n @property({ attribute: 'previous-page-label' })\n previousPageLabel = 'Previous page';\n\n /**\n * Accessible label for the \"Next page\" navigation button.\n * @attr next-page-label\n */\n @property({ attribute: 'next-page-label' })\n nextPageLabel = 'Next page';\n\n /**\n * Accessible label for the \"Last page\" navigation button.\n * @attr last-page-label\n */\n @property({ attribute: 'last-page-label' })\n lastPageLabel = 'Last page';\n\n /**\n * Function to format the page navigation announcement. Override for i18n.\n */\n @property({ attribute: false })\n labelPageMessage: (current: number, total: number) => string = (current, total) =>\n `Page ${current} of ${total}`;\n\n /**\n * Function to format page button aria-labels. Override for i18n.\n */\n @property({ attribute: false })\n labelPageButton: (page: number) => string = (page) => `Page ${page}`;\n\n /** Tracks the roving tabindex target. Null means default to currentPage. */\n /** @internal */\n @state() private _rovingKey: number | string | null = null;\n\n /** Text for the aria-live region, updated on navigation. */\n /** @internal */\n @state() private _liveMessage = '';\n\n /** Memoization cache for _buildPageRange. */\n /** @internal */\n private _pageRangeCache: { key: string; result: Array<number | 'ellipsis'> } | null = null;\n\n // ─── Helpers ───\n\n /** @internal */\n private _buildPageRange(): Array<number | 'ellipsis'> {\n const key = `${this.totalPages}-${this.currentPage}-${this.siblingCount}-${this.boundaryCount}`;\n if (this._pageRangeCache?.key === key) return this._pageRangeCache.result;\n\n const total = Math.max(1, this.totalPages);\n const current = Math.min(Math.max(1, this.currentPage), total);\n const boundary = Math.max(0, this.boundaryCount);\n const sibling = Math.max(0, this.siblingCount);\n\n const startPages = this._range(1, Math.min(boundary, total));\n const endPages = this._range(Math.max(total - boundary + 1, boundary + 1), total);\n\n const siblingStart = Math.max(\n Math.min(current - sibling, total - boundary - sibling * 2 - 1),\n boundary + 2,\n );\n const siblingEnd = Math.min(\n Math.max(current + sibling, boundary + sibling * 2 + 2),\n endPages.length > 0 ? (endPages[0] ?? total) - 2 : total - 1,\n );\n\n const items: Array<number | 'ellipsis'> = [];\n\n for (const p of startPages) items.push(p);\n\n if (siblingStart > boundary + 2) {\n items.push('ellipsis');\n } else if (boundary + 1 < siblingStart) {\n items.push(boundary + 1);\n }\n\n for (const p of this._range(siblingStart, siblingEnd)) items.push(p);\n\n if (siblingEnd < total - boundary - 1) {\n items.push('ellipsis');\n } else if (siblingEnd < total - boundary) {\n items.push(total - boundary);\n }\n\n for (const p of endPages) items.push(p);\n\n this._pageRangeCache = { key, result: items };\n return items;\n }\n\n /** @internal */\n private _range(start: number, end: number): number[] {\n const result: number[] = [];\n for (let i = start; i <= end; i++) result.push(i);\n return result;\n }\n\n /** @internal */\n private _navigate(page: number): void {\n const clamped = Math.min(Math.max(1, page), this.totalPages);\n if (clamped === this.currentPage) return;\n\n this.currentPage = clamped;\n this._rovingKey = null; // reset so focus follows the new current page\n this._liveMessage = this.labelPageMessage(clamped, this.totalPages);\n this.dispatchEvent(\n new CustomEvent<{ page: number }>('hx-page-change', {\n detail: { page: clamped },\n bubbles: true,\n composed: true,\n }),\n );\n\n // PAGINATION-005: restore focus to the new current-page button after render\n void this.updateComplete.then(() => {\n const btn = this.shadowRoot?.querySelector<HTMLButtonElement>(\n `button[data-roving-key=\"${clamped}\"]`,\n );\n btn?.focus();\n });\n }\n\n /** @internal */\n private _handlePageSizeChange(e: Event): void {\n const select = e.target as HTMLSelectElement;\n const newSize = Number(select.value);\n if (newSize === this.pageSize) return;\n\n this.pageSize = newSize;\n this.dispatchEvent(\n new CustomEvent<{ pageSize: number }>('hx-page-size-change', {\n detail: { pageSize: newSize },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal */\n private get _effectiveRovingKey(): number | string {\n return this._rovingKey ?? this.currentPage;\n }\n\n /** @internal */\n private _handleFocusin(e: FocusEvent): void {\n const btn = e.target as HTMLElement;\n if (btn.tagName !== 'BUTTON') return;\n const key = btn.dataset['rovingKey'];\n if (key === undefined) return;\n this._rovingKey = isNaN(Number(key)) ? key : Number(key);\n }\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End')\n return;\n e.preventDefault();\n\n const list = this.shadowRoot?.querySelector('.list');\n if (!list) return;\n\n // Collect all non-disabled buttons (disabled prev/next excluded; aria-disabled current page included)\n const buttons = Array.from(list.querySelectorAll<HTMLButtonElement>('button:not([disabled])'));\n const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;\n const currentIdx = focused ? buttons.indexOf(focused) : 0;\n\n let nextIdx: number;\n if (e.key === 'Home') {\n nextIdx = 0;\n } else if (e.key === 'End') {\n nextIdx = buttons.length - 1;\n } else {\n nextIdx =\n e.key === 'ArrowLeft'\n ? Math.max(0, currentIdx - 1)\n : Math.min(buttons.length - 1, currentIdx + 1);\n }\n\n if (nextIdx !== currentIdx || e.key === 'Home' || e.key === 'End') {\n const nextBtn = buttons[nextIdx];\n if (!nextBtn) return;\n const key = nextBtn.dataset['rovingKey'];\n if (key !== undefined) {\n this._rovingKey = isNaN(Number(key)) ? key : Number(key);\n }\n nextBtn.focus();\n }\n }\n\n // ─── Render ───\n\n override render() {\n const pages = this._buildPageRange();\n const isFirst = this.currentPage <= 1;\n const isLast = this.currentPage >= this.totalPages;\n const rovingKey = this._effectiveRovingKey;\n\n return html`\n <div class=\"pagination-root\">\n ${this.showPageSize\n ? html`\n <div part=\"page-size-wrapper\" class=\"page-size-wrapper\">\n <label part=\"page-size-label\" class=\"page-size-label\">\n ${this.labelRowsPerPage}\n <select\n part=\"page-size-select\"\n class=\"page-size-select\"\n @change=${this._handlePageSizeChange}\n >\n ${[10, 25, 50, 100].map(\n (n) =>\n html`<option value=${n} ?selected=${n === this.pageSize}>${n}</option>`,\n )}\n </select>\n </label>\n </div>\n `\n : nothing}\n\n <nav part=\"nav\" aria-label=${this.label}>\n <span class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\"\n >${this._liveMessage}</span\n >\n <ul\n part=\"list\"\n class=\"list\"\n role=\"list\"\n @keydown=${this._handleKeydown}\n @focusin=${this._handleFocusin}\n >\n ${this.showFirstLast\n ? html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isFirst}\n tabindex=${rovingKey === 'first' ? 0 : -1}\n data-roving-key=\"first\"\n aria-label=${this.firstPageLabel}\n @click=${() => this._navigate(1)}\n >\n «\n </button>\n </li>\n `\n : nothing}\n\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isFirst}\n tabindex=${rovingKey === 'prev' ? 0 : -1}\n data-roving-key=\"prev\"\n aria-label=${this.previousPageLabel}\n @click=${() => this._navigate(this.currentPage - 1)}\n >\n ‹\n </button>\n </li>\n\n ${repeat(\n pages,\n (page, i) => (page === 'ellipsis' ? `ellipsis-${i}` : `page-${page}`),\n (page) => {\n if (page === 'ellipsis') {\n return html`\n <li part=\"item\" class=\"item\">\n <span part=\"ellipsis\" class=\"ellipsis\" aria-hidden=\"true\">…</span>\n </li>\n `;\n }\n const isCurrent = page === this.currentPage;\n return html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=${classMap({ button: true })}\n aria-disabled=${isCurrent ? 'true' : nothing}\n tabindex=${rovingKey === page ? 0 : -1}\n data-roving-key=${page}\n aria-current=${isCurrent ? 'page' : nothing}\n aria-label=${this.labelPageButton(page)}\n @click=${() => this._navigate(page)}\n >\n ${page}\n </button>\n </li>\n `;\n },\n )}\n\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isLast}\n tabindex=${rovingKey === 'next' ? 0 : -1}\n data-roving-key=\"next\"\n aria-label=${this.nextPageLabel}\n @click=${() => this._navigate(this.currentPage + 1)}\n >\n ›\n </button>\n </li>\n\n ${this.showFirstLast\n ? html`\n <li part=\"item\" class=\"item\">\n <button\n part=\"button\"\n class=\"button\"\n ?disabled=${isLast}\n tabindex=${rovingKey === 'last' ? 0 : -1}\n data-roving-key=\"last\"\n aria-label=${this.lastPageLabel}\n @click=${() => this._navigate(this.totalPages)}\n >\n »\n </button>\n </li>\n `\n : nothing}\n </ul>\n </nav>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-pagination': HelixPagination;\n }\n}\n\n/** Canonical type alias for HelixPagination. Use this when typing hx-pagination element references. */\nexport type HxPagination = HelixPagination;\n"],"names":["helixPaginationStyles","css","HelixPagination","HelixElement","current","total","page","key","_a","boundary","sibling","startPages","endPages","siblingStart","siblingEnd","items","p","start","end","result","i","clamped","btn","e","select","newSize","list","buttons","focused","_b","currentIdx","nextIdx","nextBtn","pages","isFirst","isLast","rovingKey","html","n","nothing","repeat","isCurrent","classMap","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -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