npm - @helixui/library - Versions diffs - 3.2.0-next.91 → 3.2.0-next.94 - Mend

@helixui/library 3.2.0-next.91 → 3.2.0-next.94

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 (222) hide show

package/dist/shared/hx-top-nav-DP6OFS8C.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-top-nav-DP6OFS8C.js","sources":["../../src/components/hx-top-nav/hx-top-nav.styles.ts","../../src/components/hx-top-nav/hx-top-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTopNavStyles = css`\n /* ─── Host ─── */\n\n :host {\n display: block;\n }\n\n /* ─── Header wrapper (landmark) ─── */\n\n header {\n display: block;\n margin: 0;\n padding: 0;\n }\n\n /* ─── Sticky mode ─── */\n\n :host([sticky]) .nav {\n position: sticky;\n top: 0;\n /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */\n z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));\n }\n\n /* ─── Nav container ─── */\n\n .nav {\n background-color: var(--hx-top-nav-bg, var(--hx-color-surface-default, #ffffff));\n color: var(--hx-top-nav-color, var(--hx-color-text-strong, #202b39));\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));\n font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n /* ─── Bar row (always visible) ─── */\n\n .nav__bar {\n display: flex;\n align-items: center;\n min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n gap: var(--hx-space-4, 1rem);\n }\n\n /* ─── Logo ─── */\n\n .nav__logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n /* ─── Mobile toggle (hamburger) ─── */\n\n .mobile-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-start: auto;\n /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */\n padding: var(--hx-space-3, 0.75rem);\n background: transparent;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n color: var(--hx-top-nav-toggle-color, var(--hx-color-text-strong, #202b39));\n cursor: pointer;\n line-height: 0;\n }\n\n .mobile-toggle:hover {\n background: var(--hx-top-nav-toggle-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n }\n\n .mobile-toggle:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .mobile-toggle__icon {\n width: var(--hx-space-6, 1.5rem);\n height: var(--hx-space-6, 1.5rem);\n }\n\n /* ─── Collapsible panel (mobile) ─── */\n\n .nav__collapsible {\n display: none;\n flex-direction: column;\n width: 100%;\n padding-block: var(--hx-space-3, 0.75rem);\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));\n }\n\n .nav__collapsible--open {\n display: flex;\n animation: hx-mobile-nav-open var(--hx-duration-fast, 100ms) ease-out;\n }\n\n /* ─── Menu and actions in collapsible (mobile) ─── */\n\n .nav__menu,\n .nav__actions {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n }\n\n .nav__actions {\n margin-top: var(--hx-space-3, 0.75rem);\n padding-top: var(--hx-space-3, 0.75rem);\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));\n }\n\n /* ─── Desktop breakpoint ─── */\n\n /* NOTE: CSS @media queries do not support custom properties.\n This value corresponds to --hx-breakpoint-md (768px). */\n @media (min-width: 768px) {\n /* Make nav a flex row so bar and collapsible sit side-by-side */\n .nav {\n display: flex;\n align-items: center;\n padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n }\n\n .nav__bar {\n flex-shrink: 0;\n padding-inline: 0;\n min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n }\n\n /* Hide hamburger on desktop */\n .mobile-toggle {\n display: none;\n }\n\n /* Collapsible becomes a standard inline flex row */\n .nav__collapsible {\n display: flex;\n flex-direction: row;\n align-items: center;\n flex: 1;\n padding-block: 0;\n border-top: none;\n margin-inline-start: auto;\n gap: var(--hx-space-4, 1rem);\n animation: none;\n }\n\n /* Override open modifier — always visible on desktop regardless of state */\n .nav__collapsible--open {\n display: flex;\n animation: none;\n }\n\n /* Menu grows to fill available space */\n .nav__menu {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n flex: 1;\n padding-inline: 0;\n }\n\n /* Actions sit at the far right */\n .nav__actions {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-top: 0;\n padding-top: 0;\n padding-inline: 0;\n border-top: none;\n flex-shrink: 0;\n }\n }\n\n /* ─── Mobile menu open animation ─── */\n\n @keyframes hx-mobile-nav-open {\n from {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .nav__collapsible--open {\n animation: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .nav {\n border-bottom-color: CanvasText;\n }\n\n .mobile-toggle {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n\n .nav__collapsible {\n border-top-color: CanvasText;\n }\n\n .nav__actions {\n border-top-color: CanvasText;\n }\n }\n`;\n","import { html, svg } 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 { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixTopNavStyles } from './hx-top-nav.styles.js';\n\n/**\n * Top-of-page site navigation bar with logo, menu items, and utility area.\n * Supports sticky positioning, responsive hamburger menu, and full slot-driven\n * content composition for Drupal and other CMS consumers.\n *\n * @summary Site-level navigation bar with logo, nav items, and action slots.\n *\n * @tag hx-top-nav\n *\n * @slot logo - Brand area rendered on the left side.\n * @slot - Default slot for primary navigation items rendered in the center.\n * IMPORTANT: Do NOT place a `<nav>` element in this slot — the component\n * already renders a `<nav>` landmark internally. Use a `<div>` or bare links.\n * @slot actions - Utility area rendered on the right side (search, user menu, etc.).\n *\n * @fires {CustomEvent<{open: boolean}>} hx-mobile-toggle - Dispatched when the\n * hamburger button is toggled. Detail contains the new open state.\n *\n * @csspart header - The outer `<header>` landmark element.\n * @csspart nav - The `<nav>` element inside the header.\n * @csspart logo - The logo slot container.\n * @csspart menu - The primary navigation slot container.\n * @csspart actions - The actions slot container.\n * @csspart mobile-toggle - The hamburger toggle button.\n *\n * @cssprop [--hx-top-nav-bg=var(--hx-color-neutral-0)] - Navigation bar background color.\n * @cssprop [--hx-top-nav-color=var(--hx-color-neutral-800)] - Navigation bar text color.\n * @cssprop [--hx-top-nav-border-color=var(--hx-color-neutral-200)] - Bottom border color.\n * @cssprop [--hx-top-nav-height=var(--hx-space-16)] - Navigation bar height.\n * @cssprop [--hx-top-nav-padding-x=var(--hx-space-6)] - Horizontal padding.\n * @cssprop [--hx-top-nav-z-index=var(--hx-z-index-sticky)] - Z-index for sticky mode.\n * @cssprop [--hx-top-nav-toggle-color=var(--hx-color-neutral-700)] - Hamburger icon color.\n * @cssprop [--hx-top-nav-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-z-index-sticky] - Z-index layer.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-16] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\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-duration-fast] - Animation duration.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n */\n@customElement('hx-top-nav')\nexport class HelixTopNav extends HelixElement {\n static override styles = [helixTopNavStyles, forcedColorsInteractive];\n\n // ─── Public Properties ───\n\n /**\n * When true, the navigation bar sticks to the top of the viewport during scroll.\n * @attr sticky\n */\n @property({ type: Boolean, reflect: true })\n sticky = false;\n\n /**\n * Accessible label applied to the `<nav>` element via `aria-label`.\n * @attr label\n */\n @property({ type: String })\n label = 'Site Navigation';\n\n // ─── Private State ───\n\n /** Whether the mobile collapsible menu is currently open. */\n /** @internal */\n @state() private _mobileOpen = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleMobileToggle(): void {\n this._mobileOpen = !this._mobileOpen;\n\n /**\n * Dispatched when the hamburger button is toggled.\n * @event hx-mobile-toggle\n */\n this.dispatchEvent(\n new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n bubbles: true,\n composed: true,\n detail: { open: this._mobileOpen },\n }),\n );\n\n if (this._mobileOpen) {\n // Move focus to first truly interactive element in the default slot (WCAG 2.4.3).\n // A plain HTMLElement (e.g. <div>) is not keyboard-reachable; we must find a\n // focusable descendant to avoid trapping focus on a non-interactive node.\n void this.updateComplete.then(() => {\n const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex=\"0\"]';\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n let firstFocusable: HTMLElement | null = null;\n for (const el of assigned) {\n if (!(el instanceof HTMLElement)) continue;\n if (el.matches(FOCUSABLE_SELECTOR)) {\n firstFocusable = el;\n break;\n }\n const found = el.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n if (found) {\n firstFocusable = found;\n break;\n }\n }\n firstFocusable?.focus();\n });\n }\n }\n\n /** @internal */\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (e.key === 'Escape' && this._mobileOpen) {\n this._mobileOpen = false;\n this.dispatchEvent(\n new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n bubbles: true,\n composed: true,\n detail: { open: false },\n }),\n );\n // Return focus to the toggle button after Lit re-render completes\n void this.updateComplete.then(() => {\n this.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"mobile-toggle\"]')?.focus();\n });\n }\n };\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderHamburgerIcon() {\n return html`\n <svg\n class=\"mobile-toggle__icon\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n ${this._mobileOpen\n ? svg`\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n `\n : svg`\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n `}\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const menuClasses = {\n nav__collapsible: true,\n 'nav__collapsible--open': this._mobileOpen,\n };\n\n return html`\n <header part=\"header\">\n <nav part=\"nav\" class=\"nav\" aria-label=${this.label}>\n <div class=\"nav__bar\">\n <div part=\"logo\" class=\"nav__logo\">\n <slot name=\"logo\"></slot>\n </div>\n\n <button\n part=\"mobile-toggle\"\n class=\"mobile-toggle\"\n type=\"button\"\n aria-expanded=${String(this._mobileOpen)}\n aria-controls=\"nav-menu\"\n aria-label=${this._mobileOpen ? 'Close navigation' : 'Open navigation'}\n @click=${this._handleMobileToggle}\n >\n ${this._renderHamburgerIcon()}\n </button>\n </div>\n\n <div id=\"nav-menu\" class=${classMap(menuClasses)}>\n <div part=\"menu\" class=\"nav__menu\">\n <slot></slot>\n </div>\n\n <div part=\"actions\" class=\"nav__actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </nav>\n </header>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-top-nav': HelixTopNav;\n }\n}\n"],"names":["helixTopNavStyles","css","HelixTopNav","HelixElement","e","_b","_a","FOCUSABLE_SELECTOR","slot","assigned","firstFocusable","el","found","html","svg","menuClasses","classMap","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-tree-item-DtMC3DTa.js → hx-tree-item-Dt0Ozqyr.js} RENAMED Viewed

@@ -21,7 +21,7 @@ const C = b`
   .tree:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
+      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -314,10 +314,7 @@ const E = b`
   .item-row:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-tree-item-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, -2px);
   }
@@ -376,10 +373,7 @@ const E = b`
   .expand-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-tree-item-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -707,4 +701,4 @@ export {
   l as H,
   d as a
 };
-//# sourceMappingURL=hx-tree-item-DtMC3DTa.js.map
+//# sourceMappingURL=hx-tree-item-Dt0Ozqyr.js.map

package/dist/shared/hx-tree-item-Dt0Ozqyr.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-tree-item-Dt0Ozqyr.js","sources":["../../src/components/hx-tree-view/hx-tree-view.styles.ts","../../src/components/hx-tree-view/hx-tree-view.ts","../../src/components/hx-tree-view/hx-tree-item.styles.ts","../../src/components/hx-tree-view/hx-tree-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTreeViewStyles = css`\n :host {\n display: block;\n contain: layout style;\n font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n * {\n box-sizing: border-box;\n }\n\n .tree {\n display: block;\n outline: none;\n }\n\n .tree:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .tree:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixTreeViewStyles } from './hx-tree-view.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport type { HelixTreeItem, HxTreeItemSelectDetail } from './hx-tree-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Selection mode for the tree. */\nexport type TreeSelection = 'none' | 'single' | 'multiple';\n\n/** Detail type for the `hx-select` event. */\nexport interface HxSelectDetail {\n /** The tree item that was selected or deselected. */\n item: HelixTreeItem;\n /** Whether the item is now selected. */\n selected: boolean;\n}\n\n/**\n * A hierarchical tree component for navigating nested data structures.\n * Used in healthcare applications for org charts, ICD-10 code hierarchies, and department navigation.\n *\n * Implements WAI-ARIA tree view pattern with `role=\"tree\"` on the container\n * and `role=\"treeitem\"` on each item. Supports `aria-label` via the `label` property\n * for screen reader identification. Full keyboard navigation: Arrow keys for movement,\n * Enter/Space for selection, Home/End for first/last item.\n *\n * ## Scale Limits\n *\n * This component renders all tree items simultaneously in the DOM. It is suitable for\n * trees with up to ~500 visible items. For large taxonomies (e.g., ICD-10 with 70,000+\n * codes), use async/lazy loading: only render top-level nodes initially and populate\n * child nodes on `hx-select` or expand events. The component exposes the `expanded`\n * property on `hx-tree-item` for programmatic control of subtrees, enabling consumer-level\n * virtualization strategies without requiring changes to this component.\n *\n * @summary Hierarchical tree view with expand/collapse and keyboard navigation.\n *\n * @tag hx-tree-view\n *\n * @slot - Default slot for hx-tree-item elements.\n *\n * @fires {CustomEvent<HxSelectDetail>} hx-select - Dispatched when a tree item is selected or deselected.\n *\n * @csspart tree - The tree container element with role=\"tree\".\n *\n * @cssprop [--hx-tree-font-family=var(--hx-font-family-sans)] - Tree font family.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n */\n@customElement('hx-tree-view')\nexport class HelixTreeView extends HelixElement {\n static override styles = [helixTreeViewStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /**\n * Accessible label for the tree. Applied as `aria-label` on the tree container.\n * Provides context to screen readers about the tree's purpose.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n /**\n * Selection mode for the tree.\n * - `none` — items cannot be selected\n * - `single` — only one item can be selected at a time\n * - `multiple` — multiple items can be selected\n * @attr selection\n */\n @property({ type: String, reflect: true })\n selection: 'none' | 'single' | 'multiple' = 'none';\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _currentIndex = 0;\n\n /** Tracks whether the tree has any visible items, to decide the container tabindex. */\n /** @internal */\n @state() private _hasVisibleItems = false;\n\n // ─── Visible items cache ───\n\n /**\n * Cached flat list of visible items (depth-first, respects collapsed nodes).\n * Set to null to invalidate; rebuilt on next access.\n * @internal\n */\n private _cachedVisibleItems: HelixTreeItem[] | null = null;\n\n /**\n * Invalidate the visible-items cache. Call after any expand/collapse or structural change.\n * @internal\n */\n private _invalidateVisibleItemsCache(): void {\n this._cachedVisibleItems = null;\n }\n\n // ─── Internal Helpers ───\n\n /**\n * Returns a flat ordered list of all visible (not inside a collapsed item) hx-tree-items\n * in depth-first order. Result is cached; invalidated on expand/collapse/slotchange.\n */\n /** @internal */\n private _getVisibleItems(): HelixTreeItem[] {\n if (!this._cachedVisibleItems) {\n this._cachedVisibleItems = this._collectVisibleItems(this);\n }\n return this._cachedVisibleItems;\n }\n\n /** @internal */\n private _collectVisibleItems(container: Element): HelixTreeItem[] {\n const items: HelixTreeItem[] = [];\n for (const child of Array.from(container.children)) {\n if (child.tagName.toLowerCase() === 'hx-tree-item') {\n const item = child as HelixTreeItem;\n items.push(item);\n if (item.expanded) {\n items.push(...this._collectVisibleItems(item));\n }\n } else {\n items.push(...this._collectVisibleItems(child));\n }\n }\n return items;\n }\n\n /** @internal */\n private _getSelectedItems(): HelixTreeItem[] {\n return Array.from(this.querySelectorAll<HelixTreeItem>('hx-tree-item[selected]'));\n }\n\n /**\n * Updates the roving tabindex across all visible items so that only the\n * item at `activeIndex` has `tabindex=\"0\"`. All others receive `tabindex=\"-1\"`.\n * This is called whenever the active item changes (navigation, initial render).\n */\n /** @internal */\n private _updateRovingTabindex(items: HelixTreeItem[], activeIndex: number): void {\n items.forEach((item, i) => {\n item.setRovingActive(i === activeIndex);\n });\n }\n\n /** @internal */\n private _focusItem(index: number): void {\n const items = this._getVisibleItems();\n if (items.length === 0) return;\n const clamped = Math.max(0, Math.min(index, items.length - 1));\n this._currentIndex = clamped;\n this._updateRovingTabindex(items, clamped);\n items[clamped]?.focus();\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleTreeItemSelect(e: Event): void {\n if (!(e instanceof CustomEvent)) return;\n const event = e as CustomEvent<HxTreeItemSelectDetail>;\n const item = event.detail.item;\n\n if (this.selection === 'none') return;\n\n if (this.selection === 'single') {\n const wasSelected = item.selected;\n this._getSelectedItems().forEach((i) => {\n i.selected = false;\n });\n item.selected = !wasSelected;\n } else if (this.selection === 'multiple') {\n item.selected = !item.selected;\n }\n\n this.dispatchEvent(\n new CustomEvent<HxSelectDetail>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item, selected: item.selected },\n }),\n );\n }\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n const items = this._getVisibleItems();\n if (items.length === 0) return;\n\n let currentIndex = this._currentIndex;\n const focused = document.activeElement;\n\n for (let i = 0; i < items.length; i++) {\n if (items[i] === focused || items[i]?.shadowRoot?.activeElement) {\n currentIndex = i;\n break;\n }\n }\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n // Intentional design: wrap-around from last to first item provides\n // a continuous navigation loop, consistent with the component's\n // circular keyboard navigation model.\n const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this._focusItem(next);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n // Intentional design: wrap-around from first to last item (see ArrowDown note).\n const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this._focusItem(prev);\n break;\n }\n case 'ArrowLeft': {\n e.preventDefault();\n const currentItem = items[currentIndex];\n if (!currentItem) break;\n if (currentItem.expanded && currentItem.hasChildItems) {\n currentItem.expanded = false;\n this._invalidateVisibleItemsCache();\n } else {\n const parentItem = currentItem.parentElement?.closest('hx-tree-item') as\n | HelixTreeItem\n | undefined;\n if (parentItem) {\n const parentIndex = items.indexOf(parentItem);\n if (parentIndex >= 0) {\n this._focusItem(parentIndex);\n }\n }\n }\n break;\n }\n case 'ArrowRight': {\n e.preventDefault();\n const currentItem = items[currentIndex];\n if (!currentItem) break;\n if (currentItem.hasChildItems) {\n if (!currentItem.expanded) {\n currentItem.expanded = true;\n this._invalidateVisibleItemsCache();\n } else {\n this._focusItem(currentIndex + 1);\n }\n }\n break;\n }\n case 'Home': {\n e.preventDefault();\n this._focusItem(0);\n break;\n }\n case 'End': {\n e.preventDefault();\n this._focusItem(items.length - 1);\n break;\n }\n default: {\n // WAI-ARIA APG typeahead: a printable character moves focus to the next visible\n // item whose label starts with that character (case-insensitive).\n if (e.key.length === 1) {\n e.preventDefault();\n const matchIndex = this._findTypeaheadMatch(e.key.toLowerCase(), currentIndex);\n if (matchIndex !== -1) {\n this._focusItem(matchIndex);\n }\n }\n break;\n }\n }\n }\n\n /**\n * Finds the next visible item (starting after `currentIndex`, wrapping around) whose\n * label text begins with the given lowercase character. Returns -1 if no match.\n * @internal\n */\n private _findTypeaheadMatch(char: string, currentIndex: number): number {\n const items = this._getVisibleItems();\n if (items.length === 0) return -1;\n for (let i = 1; i <= items.length; i++) {\n const index = (currentIndex + i) % items.length;\n const item = items[index];\n if (item && item.labelText.toLowerCase().startsWith(char)) {\n return index;\n }\n }\n return -1;\n }\n\n /** @internal */\n private _handleFocusIn(e: FocusEvent): void {\n // With roving tabindex, the tree container (tabindex=\"-1\") should only receive\n // focus when the tree is empty. If focus does land on the container (e.g. the\n // tree is empty or programmatic focus), redirect to the active item if present.\n if (e.target === e.currentTarget) {\n const items = this._getVisibleItems();\n if (items.length > 0) {\n this._focusItem(this._currentIndex);\n }\n }\n }\n\n /**\n * Compute and push ARIA position metadata (level, posInSet, setSize, selectable) to all\n * direct hx-tree-item children of a container in a single O(n) pass.\n * Each item also recurses for its own children, building the full tree in O(total-items) total.\n * @internal\n */\n private _updateAriaMetadataForContainer(container: Element, level: number): void {\n const selectable = this.selection === 'single' || this.selection === 'multiple';\n const children = Array.from(container.children).filter(\n (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n ) as HelixTreeItem[];\n const setSize = children.length;\n children.forEach((item, index) => {\n item.setAriaMetadata(level, index + 1, setSize, selectable);\n // Recurse into child items so the full tree is updated in one traversal\n this._updateAriaMetadataForContainer(item, level + 1);\n });\n }\n\n /**\n * Initializes the roving tabindex after items are first slotted in.\n * Ensures the active item (index 0 by default) has tabindex=\"0\" from the start,\n * so a Tab into the tree lands directly on the first item without a redirect.\n * Also updates `_hasVisibleItems` so the container tabindex re-renders correctly.\n * Pushes O(n) ARIA metadata to all items to replace the O(n^2) per-item ancestor walk.\n */\n /** @internal */\n private _handleSlotChange(): void {\n this._invalidateVisibleItemsCache();\n // Push ARIA metadata from parent in a single O(n) traversal\n this._updateAriaMetadataForContainer(this, 1);\n const items = this._getVisibleItems();\n this._hasVisibleItems = items.length > 0;\n if (items.length === 0) return;\n // Clamp _currentIndex in case items were removed.\n const clamped = Math.min(this._currentIndex, items.length - 1);\n this._currentIndex = clamped;\n this._updateRovingTabindex(items, clamped);\n }\n\n // ─── Lifecycle ───\n\n override firstUpdated(): void {\n if (!this.label) {\n devWarn(\n 'hx-tree-view',\n 'No accessible label provided. Set the `label` attribute on hx-tree-view so screen readers can identify this tree (WCAG 4.1.2).',\n );\n }\n }\n\n // ─── Render ───\n\n override render() {\n // Roving tabindex pattern (WCAG 2.4.3 Fix):\n // The tree container is NOT a Tab stop (tabindex=\"-1\"). Tab focus goes\n // directly to the active item, which carries tabindex=\"0\". The container\n // is only a landing target (tabindex=\"0\") when the tree is empty.\n const containerTabindex = this._hasVisibleItems ? '-1' : '0';\n\n return html`\n <div\n part=\"tree\"\n class=\"tree\"\n role=\"tree\"\n tabindex=${containerTabindex}\n aria-label=${this.label || 'Tree'}\n aria-multiselectable=${this.selection === 'none'\n ? nothing\n : this.selection === 'multiple'\n ? 'true'\n : 'false'}\n @hx-tree-item-select=${this._handleTreeItemSelect}\n @keydown=${this._handleKeyDown}\n @focusin=${this._handleFocusIn}\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tree-view': HelixTreeView;\n }\n}\n\n/** Canonical type alias for HelixTreeView. Use this when typing hx-tree-view element references. */\nexport type HxTreeView = HelixTreeView;\n","import { css } from 'lit';\n\nexport const helixTreeItemStyles = css`\n :host {\n display: block;\n contain: layout style;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Item Container ─── */\n\n .item {\n display: block;\n }\n\n /* ─── Item Row ─── */\n\n .item-row {\n display: flex;\n align-items: center;\n min-height: var(--hx-touch-target-min, 44px);\n gap: var(--hx-tree-item-gap, var(--hx-space-2, 0.5rem));\n padding: var(--hx-tree-item-padding-y, var(--hx-space-2, 0.5rem))\n var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem));\n padding-inline-start: calc(\n var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem)) + var(--_indent-level, 0) *\n var(--hx-tree-indent-size, 1.5rem)\n );\n border-radius: var(--hx-tree-item-border-radius, var(--hx-border-radius-sm, 0.25rem));\n cursor: pointer;\n outline: none;\n color: var(--hx-tree-item-color, var(--hx-color-neutral-900, #0d1825));\n font-family: var(--hx-tree-item-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-tree-item-font-size, var(--hx-font-size-sm, 0.875rem));\n line-height: var(--hx-line-height-normal, 1.5);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n user-select: none;\n }\n\n .item-row:hover {\n background-color: var(--hx-tree-item-hover-bg, var(--hx-color-neutral-100, #ebeee9));\n }\n\n .item-row:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, -2px);\n }\n\n /* ─── Selected State ─── */\n\n :host([selected]) .item-row {\n background-color: var(--hx-tree-item-selected-bg, var(--hx-color-primary-100, #dbf0f0));\n color: var(--hx-tree-item-selected-color, var(--hx-color-primary-800, #07494a));\n }\n\n :host([selected]) .item-row:hover {\n background-color: var(--hx-tree-item-selected-hover-bg, var(--hx-color-primary-200, #bce1e1));\n }\n\n /* ─── Disabled State ─── */\n\n :host([disabled]) .item-row {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ─── Expand Icon ─── */\n\n .expand-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n }\n\n .expand-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n padding: 0;\n border: none;\n background: transparent;\n color: var(--hx-tree-item-expand-icon-color, var(--hx-color-neutral-500, #66787b));\n cursor: pointer;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n transition: transform var(--hx-transition-fast, 150ms ease);\n pointer-events: auto;\n }\n\n .expand-btn:hover {\n background-color: var(\n --hx-tree-item-expand-hover-bg,\n var(--hx-overlay-black-6, rgba(0, 0, 0, 0.06))\n );\n }\n\n .expand-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .expand-btn svg {\n width: var(--hx-space-3, 0.75rem);\n height: var(--hx-space-3, 0.75rem);\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n :host([expanded]) .expand-btn svg {\n transform: rotate(90deg);\n }\n\n .expand-placeholder {\n display: block;\n width: var(--hx-space-4, 1rem);\n flex-shrink: 0;\n }\n\n /* ─── Icon Slot ─── */\n\n .item-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-tree-item-icon-color, var(--hx-color-neutral-500, #66787b));\n }\n\n .item-icon:empty {\n display: none;\n }\n\n /* ─── Label ─── */\n\n .item-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* ─── Children (animated) ─── */\n\n .children {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--hx-transition-base, 200ms ease);\n --_indent-level: calc(var(--_indent-level, 0) + 1);\n }\n\n .children--expanded {\n grid-template-rows: 1fr;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .item-row,\n .expand-btn,\n .expand-btn svg,\n .children {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .item-row:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: -2px;\n }\n\n .expand-btn:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n :host([selected]) .item-row {\n outline: 2px solid Highlight;\n }\n }\n\n .children-inner {\n overflow: hidden;\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixTreeItemStyles } from './hx-tree-item.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/** Detail type for the `hx-tree-item-select` event. */\nexport interface HxTreeItemSelectDetail {\n /** The tree item that was selected or activated. */\n item: HelixTreeItem;\n}\n\n/**\n * A tree item used within an hx-tree-view component.\n * Supports expand/collapse, selection, keyboard navigation, and icon/children slots.\n *\n * @summary Individual item within an hx-tree-view hierarchical tree.\n *\n * @tag hx-tree-item\n *\n * @slot - Default slot for the item label content. This text is also used to label the children group.\n * @slot icon - Custom icon shown before the label.\n * @slot children - Nested hx-tree-item elements for sub-tree.\n *\n * @csspart item - The outer item container.\n * @csspart row - The interactive item row (contains expand icon, icon slot, and label).\n * @csspart expand-icon - The expand/collapse toggle button.\n * @csspart label - The label text content area.\n * @csspart children - The children container.\n *\n * @cssprop [--hx-tree-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-tree-item-hover-bg=var(--hx-color-neutral-100)] - Hover background color.\n * @cssprop [--hx-tree-item-selected-bg=var(--hx-color-primary-100)] - Selected background color.\n * @cssprop [--hx-tree-item-selected-color=var(--hx-color-primary-800)] - Selected text color.\n * @cssprop [--hx-tree-item-padding-x=var(--hx-space-2)] - Horizontal padding.\n * @cssprop [--hx-tree-item-padding-y=var(--hx-space-1)] - Vertical padding.\n * @cssprop [--hx-tree-indent-size=1.5rem] - Indentation size per level.\n *\n * @fires {CustomEvent<HxTreeItemSelectDetail>} hx-tree-item-select - Dispatched when this item is clicked or activated via keyboard.\n */\n@customElement('hx-tree-item')\nexport class HelixTreeItem extends HelixElement {\n static override styles = [helixTreeItemStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /**\n * Whether the item is expanded (showing children).\n * @attr expanded\n */\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /**\n * Whether the item is selected.\n * @attr selected\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * Whether the item is disabled (non-interactive).\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n // ─── Internal State ───\n\n /**\n * Tracks whether any elements are assigned to the children slot, controlling expand icon visibility.\n * @internal\n */\n @state() private _hasChildren = false;\n\n /**\n * Whether this item is the roving-tabindex active item in the tree.\n * @internal\n */\n @state() private _rovingActive = false;\n\n /**\n * Text content from the default slot, used to label the children group for screen readers.\n * @internal\n */\n @state() private _labelText = '';\n\n /**\n * Cached ARIA position metadata. Computed once on connect and on slotchange\n * of the parent container, avoiding repeated DOM traversal on every render.\n * @internal\n */\n @state() private _level = 1;\n /**\n * One-based position of this item within its sibling set, set as aria-posinset.\n * @internal\n */\n @state() private _posInSet = 1;\n /**\n * Total count of sibling hx-tree-item elements at the same level, set as aria-setsize.\n * @internal\n */\n @state() private _setSize = 1;\n /**\n * Whether the owning hx-tree-view supports item selection (single or multiple mode).\n * @internal\n */\n @state() private _selectable = false;\n\n /** @internal */\n @query('.item-row') private _itemRowEl!: HTMLElement | null;\n\n // ─── Computed ARIA ───\n\n /**\n * Whether this item has slotted children.\n * @returns True if one or more elements are assigned to the children slot.\n */\n get hasChildItems(): boolean {\n return this._hasChildren;\n }\n\n /**\n * The text content of the item's label slot, used for typeahead keyboard navigation.\n * Returns an empty string until the label slot has been assigned.\n */\n get labelText(): string {\n return this._labelText;\n }\n\n /**\n * Recompute all cached ARIA metadata in a single DOM pass.\n * Called on connect, slotchange, and whenever structural context may change.\n * @internal\n */\n private _updateAriaMetadata(): void {\n // Compute nesting level by counting ancestor hx-tree-item elements.\n let level = 1;\n let el: Element | null = this.parentElement;\n while (el) {\n if (el.tagName.toLowerCase() === 'hx-tree-item') level++;\n el = el.parentElement;\n }\n this._level = level;\n\n // Compute position-in-set and set-size from sibling hx-tree-item elements.\n const parent = this.parentElement;\n if (parent) {\n const siblings = Array.from(parent.children).filter(\n (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n );\n this._posInSet = siblings.indexOf(this) + 1;\n this._setSize = siblings.length;\n } else {\n this._posInSet = 1;\n this._setSize = 1;\n }\n\n // Determine if the owning tree supports selection.\n const tree = this.closest('hx-tree-view');\n if (tree) {\n const selection = tree.getAttribute('selection');\n this._selectable = selection === 'single' || selection === 'multiple';\n } else {\n this._selectable = false;\n }\n }\n\n /**\n * Set ARIA position metadata from the parent hx-tree-view in a single O(n) pass.\n * Calling this avoids the O(n^2) ancestor-walk + sibling-iteration in _updateAriaMetadata\n * when the parent already knows the layout.\n * @internal\n */\n setAriaMetadata(level: number, posInSet: number, setSize: number, selectable: boolean): void {\n this._level = level;\n this._posInSet = posInSet;\n this._setSize = setSize;\n this._selectable = selectable;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._updateAriaMetadata();\n }\n\n // ─── Children Detection ───\n\n /**\n * Updates _hasChildren and recomputes ARIA metadata when the children slot assignment changes.\n * @internal\n */\n private _handleChildrenSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasChildren = slot.assignedElements().length > 0;\n this._updateAriaMetadata();\n }\n\n /**\n * Captures the text content from the default (label) slot for use on the children group label.\n * @internal\n */\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._labelText = nodes\n .map((n) => n.textContent ?? '')\n .join('')\n .trim();\n }\n\n // ─── Event Handlers ───\n\n /**\n * Toggles the expanded state when the expand/collapse button is clicked, stopping event propagation.\n * @internal\n */\n private _handleExpandClick(e: Event): void {\n e.stopPropagation();\n if (this.disabled) return;\n this.expanded = !this.expanded;\n }\n\n /**\n * Dispatches the hx-tree-item-select event when the item is activated via click or keyboard.\n * @internal\n */\n private _handleRowClick(): void {\n if (this.disabled) return;\n this.dispatchEvent(\n new CustomEvent<HxTreeItemSelectDetail>('hx-tree-item-select', {\n bubbles: true,\n composed: true,\n detail: { item: this },\n }),\n );\n }\n\n /**\n * Handles keyboard interaction for the tree item, including expand/collapse, activation, and delegation of list-navigation keys to the parent tree.\n * @internal\n */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (this.disabled) return;\n\n switch (e.key) {\n case 'ArrowRight':\n e.preventDefault();\n if (this._hasChildren && !this.expanded) {\n this.expanded = true;\n }\n break;\n case 'ArrowLeft':\n e.preventDefault();\n if (this._hasChildren && this.expanded) {\n this.expanded = false;\n }\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n this._handleRowClick();\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n case 'Home':\n case 'End':\n // Bubble up to hx-tree-view for navigation\n break;\n }\n }\n\n // ─── Public API ───\n\n /**\n * Sets the roving tabindex state for this item.\n * When `active` is true, the item row gets `tabindex=\"0\"` making it the\n * Tab-reachable item in the tree. All other items should be set to false.\n * Called by the parent hx-tree-view to manage the roving tabindex pattern.\n */\n setRovingActive(active: boolean): void {\n this._rovingActive = active;\n }\n\n /** Focus this item's interactive row element. */\n override focus(): void {\n this._itemRowEl?.focus();\n }\n\n // ─── Render ───\n\n /**\n * Renders the expand/collapse chevron button, or a placeholder span when the item has no children.\n * @internal\n */\n private _renderExpandIcon() {\n if (!this._hasChildren) {\n return html`<span class=\"expand-placeholder\" aria-hidden=\"true\"></span>`;\n }\n return html`\n <button\n part=\"expand-icon\"\n class=\"expand-btn\"\n tabindex=\"-1\"\n aria-label=\"${this.expanded ? 'Collapse' : 'Expand'}\"\n @click=${this._handleExpandClick}\n >\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <polyline points=\"6 4 10 8 6 12\" />\n </svg>\n </button>\n `;\n }\n\n override render() {\n const ariaExpanded = this._hasChildren ? String(this.expanded) : nothing;\n const ariaSelected = this._selectable ? String(this.selected) : nothing;\n\n return html`\n <div part=\"item\" class=\"item\">\n <div\n part=\"row\"\n class=\"item-row\"\n role=\"treeitem\"\n tabindex=${this._rovingActive ? '0' : '-1'}\n aria-expanded=${ariaExpanded}\n aria-selected=${ariaSelected}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-level=${this._level}\n aria-posinset=${this._posInSet}\n aria-setsize=${this._setSize}\n @click=${this._handleRowClick}\n @keydown=${this._handleKeyDown}\n >\n ${this._renderExpandIcon()}\n <span class=\"item-icon\">\n <slot name=\"icon\"></slot>\n </span>\n <span part=\"label\" class=\"item-label\">\n <slot @slotchange=${this._handleLabelSlotChange}></slot>\n </span>\n </div>\n <div\n part=\"children\"\n class=${classMap({ children: true, 'children--expanded': this.expanded })}\n role=\"group\"\n aria-label=${this._labelText ? `${this._labelText} children` : 'children'}\n aria-hidden=${!this.expanded || nothing}\n >\n <div class=\"children-inner\">\n <slot name=\"children\" @slotchange=${this._handleChildrenSlotChange}></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tree-item': HelixTreeItem;\n }\n}\n\n/** Canonical type alias for HelixTreeItem. Use this when typing hx-tree-item element references. */\nexport type HxTreeItem = HelixTreeItem;\n"],"names":["helixTreeViewStyles","css","HelixTreeView","HelixElement","container","items","child","item","activeIndex","i","index","clamped","_a","wasSelected","currentIndex","focused","_b","next","prev","currentItem","parentItem","_c","parentIndex","matchIndex","char","level","selectable","children","c","setSize","containerTabindex","html","nothing","forcedColorsSurface","__decorateClass","property","state","customElement","helixTreeItemStyles","HelixTreeItem","el","parent","siblings","tree","selection","posInSet","slot","nodes","n","active","ariaExpanded","ariaSelected","classMap","query"],"mappings":";;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACuD5B,IAAMC,IAAN,cAA4BC,EAAa;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAWL,KAAA,QAAQ,IAUR,KAAA,YAA4C,QAKnC,KAAQ,gBAAgB,GAIxB,KAAQ,mBAAmB,IASpC,KAAQ,sBAA8C;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9C,+BAAqC;AAC3C,SAAK,sBAAsB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASQ,mBAAoC;AAC1C,WAAK,KAAK,wBACR,KAAK,sBAAsB,KAAK,qBAAqB,IAAI,IAEpD,KAAK;AAAA,EACd;AAAA;AAAA,EAGQ,qBAAqBC,GAAqC;AAChE,UAAMC,IAAyB,CAAA;AAC/B,eAAWC,KAAS,MAAM,KAAKF,EAAU,QAAQ;AAC/C,UAAIE,EAAM,QAAQ,YAAA,MAAkB,gBAAgB;AAClD,cAAMC,IAAOD;AACb,QAAAD,EAAM,KAAKE,CAAI,GACXA,EAAK,YACPF,EAAM,KAAK,GAAG,KAAK,qBAAqBE,CAAI,CAAC;AAAA,MAEjD;AACE,QAAAF,EAAM,KAAK,GAAG,KAAK,qBAAqBC,CAAK,CAAC;AAGlD,WAAOD;AAAA,EACT;AAAA;AAAA,EAGQ,oBAAqC;AAC3C,WAAO,MAAM,KAAK,KAAK,iBAAgC,wBAAwB,CAAC;AAAA,EAClF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,sBAAsBA,GAAwBG,GAA2B;AAC/E,IAAAH,EAAM,QAAQ,CAACE,GAAME,MAAM;AACzB,MAAAF,EAAK,gBAAgBE,MAAMD,CAAW;AAAA,IACxC,CAAC;AAAA,EACH;AAAA;AAAA,EAGQ,WAAWE,GAAqB;;AACtC,UAAML,IAAQ,KAAK,iBAAA;AACnB,QAAIA,EAAM,WAAW,EAAG;AACxB,UAAMM,IAAU,KAAK,IAAI,GAAG,KAAK,IAAID,GAAOL,EAAM,SAAS,CAAC,CAAC;AAC7D,SAAK,gBAAgBM,GACrB,KAAK,sBAAsBN,GAAOM,CAAO,IACzCC,IAAAP,EAAMM,CAAO,MAAb,QAAAC,EAAgB;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,sBAAsB,GAAgB;AAC5C,QAAI,EAAE,aAAa,aAAc;AAEjC,UAAML,IADQ,EACK,OAAO;AAE1B,QAAI,KAAK,cAAc,QAEvB;AAAA,UAAI,KAAK,cAAc,UAAU;AAC/B,cAAMM,IAAcN,EAAK;AACzB,aAAK,kBAAA,EAAoB,QAAQ,CAACE,MAAM;AACtC,UAAAA,EAAE,WAAW;AAAA,QACf,CAAC,GACDF,EAAK,WAAW,CAACM;AAAA,MACnB,MAAA,CAAW,KAAK,cAAc,eAC5BN,EAAK,WAAW,CAACA,EAAK;AAGxB,WAAK;AAAA,QACH,IAAI,YAA4B,aAAa;AAAA,UAC3C,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,MAAAA,GAAM,UAAUA,EAAK,SAAA;AAAA,QAAS,CACzC;AAAA,MAAA;AAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,eAAe,GAAwB;;AAC7C,UAAMF,IAAQ,KAAK,iBAAA;AACnB,QAAIA,EAAM,WAAW,EAAG;AAExB,QAAIS,IAAe,KAAK;AACxB,UAAMC,IAAU,SAAS;AAEzB,aAASN,IAAI,GAAGA,IAAIJ,EAAM,QAAQI;AAChC,UAAIJ,EAAMI,CAAC,MAAMM,MAAWC,KAAAJ,IAAAP,EAAMI,CAAC,MAAP,gBAAAG,EAAU,eAAV,QAAAI,EAAsB,eAAe;AAC/D,QAAAF,IAAeL;AACf;AAAA,MACF;AAGF,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK,aAAa;AAChB,UAAE,eAAA;AAIF,cAAMQ,IAAOH,IAAeT,EAAM,SAAS,IAAIS,IAAe,IAAI;AAClE,aAAK,WAAWG,CAAI;AACpB;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,UAAE,eAAA;AAEF,cAAMC,IAAOJ,IAAe,IAAIA,IAAe,IAAIT,EAAM,SAAS;AAClE,aAAK,WAAWa,CAAI;AACpB;AAAA,MACF;AAAA,MACA,KAAK,aAAa;AAChB,UAAE,eAAA;AACF,cAAMC,IAAcd,EAAMS,CAAY;AACtC,YAAI,CAACK,EAAa;AAClB,YAAIA,EAAY,YAAYA,EAAY;AACtC,UAAAA,EAAY,WAAW,IACvB,KAAK,6BAAA;AAAA,aACA;AACL,gBAAMC,KAAaC,IAAAF,EAAY,kBAAZ,gBAAAE,EAA2B,QAAQ;AAGtD,cAAID,GAAY;AACd,kBAAME,IAAcjB,EAAM,QAAQe,CAAU;AAC5C,YAAIE,KAAe,KACjB,KAAK,WAAWA,CAAW;AAAA,UAE/B;AAAA,QACF;AACA;AAAA,MACF;AAAA,MACA,KAAK,cAAc;AACjB,UAAE,eAAA;AACF,cAAMH,IAAcd,EAAMS,CAAY;AACtC,YAAI,CAACK,EAAa;AAClB,QAAIA,EAAY,kBACTA,EAAY,WAIf,KAAK,WAAWL,IAAe,CAAC,KAHhCK,EAAY,WAAW,IACvB,KAAK,6BAAA;AAKT;AAAA,MACF;AAAA,MACA,KAAK,QAAQ;AACX,UAAE,eAAA,GACF,KAAK,WAAW,CAAC;AACjB;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,UAAE,eAAA,GACF,KAAK,WAAWd,EAAM,SAAS,CAAC;AAChC;AAAA,MACF;AAAA,MACA,SAAS;AAGP,YAAI,EAAE,IAAI,WAAW,GAAG;AACtB,YAAE,eAAA;AACF,gBAAMkB,IAAa,KAAK,oBAAoB,EAAE,IAAI,YAAA,GAAeT,CAAY;AAC7E,UAAIS,MAAe,MACjB,KAAK,WAAWA,CAAU;AAAA,QAE9B;AACA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,oBAAoBC,GAAcV,GAA8B;AACtE,UAAMT,IAAQ,KAAK,iBAAA;AACnB,QAAIA,EAAM,WAAW,EAAG,QAAO;AAC/B,aAASI,IAAI,GAAGA,KAAKJ,EAAM,QAAQI,KAAK;AACtC,YAAMC,KAASI,IAAeL,KAAKJ,EAAM,QACnCE,IAAOF,EAAMK,CAAK;AACxB,UAAIH,KAAQA,EAAK,UAAU,cAAc,WAAWiB,CAAI;AACtD,eAAOd;AAAA,IAEX;AACA,WAAO;AAAA,EACT;AAAA;AAAA,EAGQ,eAAe,GAAqB;AAI1C,IAAI,EAAE,WAAW,EAAE,iBACH,KAAK,iBAAA,EACT,SAAS,KACjB,KAAK,WAAW,KAAK,aAAa;AAAA,EAGxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,gCAAgCN,GAAoBqB,GAAqB;AAC/E,UAAMC,IAAa,KAAK,cAAc,YAAY,KAAK,cAAc,YAC/DC,IAAW,MAAM,KAAKvB,EAAU,QAAQ,EAAE;AAAA,MAC9C,CAACwB,MAAMA,EAAE,QAAQ,kBAAkB;AAAA,IAAA,GAE/BC,IAAUF,EAAS;AACzB,IAAAA,EAAS,QAAQ,CAACpB,GAAMG,MAAU;AAChC,MAAAH,EAAK,gBAAgBkB,GAAOf,IAAQ,GAAGmB,GAASH,CAAU,GAE1D,KAAK,gCAAgCnB,GAAMkB,IAAQ,CAAC;AAAA,IACtD,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUQ,oBAA0B;AAChC,SAAK,6BAAA,GAEL,KAAK,gCAAgC,MAAM,CAAC;AAC5C,UAAMpB,IAAQ,KAAK,iBAAA;AAEnB,QADA,KAAK,mBAAmBA,EAAM,SAAS,GACnCA,EAAM,WAAW,EAAG;AAExB,UAAMM,IAAU,KAAK,IAAI,KAAK,eAAeN,EAAM,SAAS,CAAC;AAC7D,SAAK,gBAAgBM,GACrB,KAAK,sBAAsBN,GAAOM,CAAO;AAAA,EAC3C;AAAA;AAAA,EAIS,eAAqB;AAC5B,IAAK,KAAK;AAAA,EAMZ;AAAA;AAAA,EAIS,SAAS;AAKhB,UAAMmB,IAAoB,KAAK,mBAAmB,OAAO;AAEzD,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKQD,CAAiB;AAAA,qBACf,KAAK,SAAS,MAAM;AAAA,+BACV,KAAK,cAAc,SACtCE,IACA,KAAK,cAAc,aACjB,SACA,OAAO;AAAA,+BACU,KAAK,qBAAqB;AAAA,mBACtC,KAAK,cAAc;AAAA,mBACnB,KAAK,cAAc;AAAA;AAAA,4BAEV,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGhD;AACF;AAlVa9B,EACK,SAAS,CAACF,GAAqBiC,CAAmB;AAUlEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAV9BjC,EAWX,WAAA,SAAA,CAAA;AAUAgC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApB9BjC,EAqBX,WAAA,aAAA,CAAA;AAKiBgC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA1BIlC,EA0BM,WAAA,iBAAA,CAAA;AAIAgC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9BIlC,EA8BM,WAAA,oBAAA,CAAA;AA9BNA,IAANgC,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChBnC,CAAA;ACvDN,MAAMoC,IAAsBrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACyC5B,IAAMsC,IAAN,cAA4BpC,EAAa;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,WAAW,IAQF,KAAQ,eAAe,IAMvB,KAAQ,gBAAgB,IAMxB,KAAQ,aAAa,IAOrB,KAAQ,SAAS,GAKjB,KAAQ,YAAY,GAKpB,KAAQ,WAAW,GAKnB,KAAQ,cAAc;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW/B,IAAI,gBAAyB;AAC3B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,YAAoB;AACtB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,sBAA4B;AAElC,QAAIsB,IAAQ,GACRe,IAAqB,KAAK;AAC9B,WAAOA;AACL,MAAIA,EAAG,QAAQ,YAAA,MAAkB,kBAAgBf,KACjDe,IAAKA,EAAG;AAEV,SAAK,SAASf;AAGd,UAAMgB,IAAS,KAAK;AACpB,QAAIA,GAAQ;AACV,YAAMC,IAAW,MAAM,KAAKD,EAAO,QAAQ,EAAE;AAAA,QAC3C,CAACb,MAAMA,EAAE,QAAQ,kBAAkB;AAAA,MAAA;AAErC,WAAK,YAAYc,EAAS,QAAQ,IAAI,IAAI,GAC1C,KAAK,WAAWA,EAAS;AAAA,IAC3B;AACE,WAAK,YAAY,GACjB,KAAK,WAAW;AAIlB,UAAMC,IAAO,KAAK,QAAQ,cAAc;AACxC,QAAIA,GAAM;AACR,YAAMC,IAAYD,EAAK,aAAa,WAAW;AAC/C,WAAK,cAAcC,MAAc,YAAYA,MAAc;AAAA,IAC7D;AACE,WAAK,cAAc;AAAA,EAEvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,gBAAgBnB,GAAeoB,GAAkBhB,GAAiBH,GAA2B;AAC3F,SAAK,SAASD,GACd,KAAK,YAAYoB,GACjB,KAAK,WAAWhB,GAChB,KAAK,cAAcH;AAAA,EACrB;AAAA;AAAA,EAIS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,oBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,0BAA0B,GAAgB;AAChD,UAAMoB,IAAO,EAAE;AACf,SAAK,eAAeA,EAAK,iBAAA,EAAmB,SAAS,GACrD,KAAK,oBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,uBAAuB,GAAgB;AAE7C,UAAMC,IADO,EAAE,OACI,cAAc,EAAE,SAAS,IAAM;AAClD,SAAK,aAAaA,EACf,IAAI,CAACC,MAAMA,EAAE,eAAe,EAAE,EAC9B,KAAK,EAAE,EACP,KAAA;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,mBAAmB,GAAgB;AAEzC,IADA,EAAE,gBAAA,GACE,MAAK,aACT,KAAK,WAAW,CAAC,KAAK;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,kBAAwB;AAC9B,IAAI,KAAK,YACT,KAAK;AAAA,MACH,IAAI,YAAoC,uBAAuB;AAAA,QAC7D,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,KAAA;AAAA,MAAK,CACtB;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,eAAe,GAAwB;AAC7C,QAAI,MAAK;AAET,cAAQ,EAAE,KAAA;AAAA,QACR,KAAK;AACH,YAAE,eAAA,GACE,KAAK,gBAAgB,CAAC,KAAK,aAC7B,KAAK,WAAW;AAElB;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACE,KAAK,gBAAgB,KAAK,aAC5B,KAAK,WAAW;AAElB;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AACH,YAAE,eAAA,GACF,KAAK,gBAAA;AACL;AAAA,MAMA;AAAA,EAEN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,gBAAgBC,GAAuB;AACrC,SAAK,gBAAgBA;AAAA,EACvB;AAAA;AAAA,EAGS,QAAc;;AACrB,KAAArC,IAAA,KAAK,eAAL,QAAAA,EAAiB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,oBAAoB;AAC1B,WAAK,KAAK,eAGHmB;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKW,KAAK,WAAW,aAAa,QAAQ;AAAA,iBAC1C,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAR3BA;AAAA,EAeX;AAAA,EAES,SAAS;AAChB,UAAMmB,IAAe,KAAK,eAAe,OAAO,KAAK,QAAQ,IAAIlB,GAC3DmB,IAAe,KAAK,cAAc,OAAO,KAAK,QAAQ,IAAInB;AAEhE,WAAOD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMU,KAAK,gBAAgB,MAAM,IAAI;AAAA,0BAC1BmB,CAAY;AAAA,0BACZC,CAAY;AAAA,0BACZ,KAAK,WAAW,SAASnB,CAAO;AAAA,uBACnC,KAAK,MAAM;AAAA,0BACR,KAAK,SAAS;AAAA,yBACf,KAAK,QAAQ;AAAA,mBACnB,KAAK,eAAe;AAAA,qBAClB,KAAK,cAAc;AAAA;AAAA,YAE5B,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKJ,KAAK,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKzCoB,EAAS,EAAE,UAAU,IAAM,sBAAsB,KAAK,UAAU,CAAC;AAAA;AAAA,uBAE5D,KAAK,aAAa,GAAG,KAAK,UAAU,cAAc,UAAU;AAAA,wBAC3D,CAAC,KAAK,YAAYpB,CAAO;AAAA;AAAA;AAAA,gDAGD,KAAK,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5E;AACF;AA7TaO,EACK,SAAS,CAACD,GAAqBL,CAAmB;AASlEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BI,EAUX,WAAA,YAAA,CAAA;AAOAL,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BI,EAiBX,WAAA,YAAA,CAAA;AAOAL,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvB/BI,EAwBX,WAAA,YAAA,CAAA;AAQiBL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhCIG,EAgCM,WAAA,gBAAA,CAAA;AAMAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtCIG,EAsCM,WAAA,iBAAA,CAAA;AAMAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA5CIG,EA4CM,WAAA,cAAA,CAAA;AAOAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAnDIG,EAmDM,WAAA,UAAA,CAAA;AAKAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxDIG,EAwDM,WAAA,aAAA,CAAA;AAKAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7DIG,EA6DM,WAAA,YAAA,CAAA;AAKAL,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAlEIG,EAkEM,WAAA,eAAA,CAAA;AAGWL,EAAA;AAAA,EAA3BmB,EAAM,WAAW;AAAA,GArEPd,EAqEiB,WAAA,cAAA,CAAA;AArEjBA,IAANL,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChBE,CAAA;"}

package/figma-inventory.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-04-26T01:48:15.557Z",
+  "generatedAt": "2026-04-26T04:57:16.568Z",
   "sourceCem": "custom-elements.json",
   "helixVersion": "3.2.0",
   "tokensVersion": "3.2.0",
@@ -18790,12 +18790,12 @@
         {
           "description": "Color of the divider between primary and trigger.",
           "name": "--hx-split-button-divider-color",
-          "default": "var(--hx-color-primary-400)",
+          "default": "var(--hx-color-primary-900)",
           "figmaBinding": {
             "target": "Fill",
             "layerSelector": "root",
             "semanticToken": "color/primary",
-            "fallbackPrimitive": "color/primary/400",
+            "fallbackPrimitive": "color/primary/900",
             "literalFallback": null
           }
         },

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@helixui/library",
-  "version": "3.2.0-next.91",
+  "version": "3.2.0-next.94",
   "description": "Enterprise Web Component Library built with Lit 3.x",
   "type": "module",
   "sideEffects": [
@@ -59,7 +59,7 @@
   "customElements": "custom-elements.json",
   "dependencies": {
     "lit": "^3.3.2",
-    "@helixui/tokens": "3.2.0-next.91"
+    "@helixui/tokens": "3.2.0-next.94"
   },
   "peerDependencies": {
     "@floating-ui/dom": "^1.7.6"

package/dist/shared/hx-accordion-cnKg4_la.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-accordion-cnKg4_la.js","sources":["../../src/components/hx-accordion/hx-accordion.styles.ts","../../src/components/hx-accordion/hx-accordion-item.styles.ts","../../src/components/hx-accordion/hx-accordion-item.ts","../../src/components/hx-accordion/hx-accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAccordionStyles = css`\n :host {\n display: block;\n font-family: var(--hx-accordion-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n .accordion {\n border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));\n overflow: hidden;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .accordion {\n border: 2px solid CanvasText;\n }\n }\n`;\n","import { css } from 'lit';\n\nexport const helixAccordionItemStyles = css`\n :host {\n display: block;\n }\n\n .item {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-accordion-border-color, var(--hx-color-neutral-200, #d6dbd5));\n font-family: var(--hx-accordion-item-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n :host(:first-child) .item {\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-accordion-border-color, var(--hx-color-neutral-200, #d6dbd5));\n }\n\n /* Remove native details marker */\n .trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-accordion-trigger-padding, var(--hx-space-4, 1rem));\n cursor: pointer;\n list-style: none;\n font-size: var(--hx-font-size-md, 1rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-accordion-trigger-color, var(--hx-color-neutral-800, #202b39));\n background-color: var(--hx-accordion-trigger-bg, transparent);\n user-select: none;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n /* Hide the native details disclosure triangle */\n .trigger::-webkit-details-marker {\n display: none;\n }\n\n .trigger::marker {\n display: none;\n }\n\n .item--disabled .trigger {\n cursor: not-allowed;\n }\n\n :host(:not([disabled])) .trigger:hover {\n background-color: var(--hx-accordion-trigger-hover-bg, var(--hx-color-neutral-50, #f5f8f3));\n }\n\n .trigger:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));\n outline-offset: var(--hx-focus-ring-offset, -2px);\n }\n\n /* ─── Icon ─── */\n\n .icon {\n flex-shrink: 0;\n width: var(--hx-accordion-icon-size, var(--hx-size-5, 1.25rem));\n height: var(--hx-accordion-icon-size, var(--hx-size-5, 1.25rem));\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--hx-accordion-icon-color, var(--hx-color-neutral-500, #66787b));\n transition: transform var(--hx-transition-normal, 250ms ease);\n }\n\n .item--expanded .icon {\n transform: rotate(180deg);\n }\n\n /* ─── Content animation via CSS grid trick ─── */\n\n .content-wrapper {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--hx-transition-normal, 250ms ease);\n overflow: hidden;\n }\n\n .item--expanded .content-wrapper,\n details[open]:not(.item--expanded) .content-wrapper {\n grid-template-rows: 1fr;\n }\n\n .content-inner {\n overflow: hidden;\n }\n\n .content {\n padding: var(--hx-accordion-content-padding, 0 var(--hx-space-4, 1rem) var(--hx-space-4, 1rem));\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n color: var(--hx-accordion-content-color, var(--hx-color-neutral-600, #4a5362));\n }\n\n /* ─── Disabled host ─── */\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .trigger {\n transition: none;\n }\n\n .icon {\n transition: none;\n }\n\n .content-wrapper {\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 color: ButtonText;\n background-color: ButtonFace;\n }\n\n .trigger:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: -2px;\n }\n\n .item {\n border-bottom-color: CanvasText;\n }\n\n :host(:first-child) .item {\n border-top-color: CanvasText;\n }\n\n .item--disabled .trigger {\n color: GrayText;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .icon {\n color: ButtonText;\n }\n\n .content {\n color: CanvasText;\n }\n }\n`;\n","import { html, svg, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixAccordionItemStyles } from './hx-accordion-item.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst chevronIcon = svg`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n`;\n\nconst _nextAccordionItemId = createIdCounter('hx-accordion-item');\n\n/** Detail for hx-expand and hx-collapse events dispatched by hx-accordion-item. */\nexport interface HxAccordionToggleDetail {\n expanded: boolean;\n itemId: string;\n}\n\n/**\n * An individual accordion item with collapsible content.\n *\n * @summary Collapsible panel that can be expanded or collapsed.\n *\n * @tag hx-accordion-item\n *\n * @slot trigger - The heading/trigger content for this item.\n * @slot - Default slot for the collapsible body content.\n *\n * @attr {number} level - Heading level (1–6) for the trigger via `role=\"heading\" aria-level`.\n * Defaults to 3. Set this to match the document outline — e.g., use `level=\"2\"` when the\n * accordion appears under an `<h1>` landmark.\n *\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-expand - Dispatched when the item is expanded.\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-collapse - Dispatched when the item is collapsed.\n *\n * @csspart item - The outer details element container.\n * @csspart trigger - The summary/trigger element.\n * @csspart content - The collapsible content area.\n * @csspart icon - The expand/collapse icon.\n *\n * @cssprop [--hx-accordion-border-color=var(--hx-color-neutral-200)] - Border color between items.\n * @cssprop [--hx-accordion-trigger-padding=var(--hx-space-4)] - Trigger padding.\n * @cssprop [--hx-accordion-trigger-color=var(--hx-color-neutral-800)] - Trigger text color.\n * @cssprop [--hx-accordion-trigger-bg=transparent] - Trigger background color.\n * @cssprop [--hx-accordion-trigger-hover-bg=var(--hx-color-neutral-50)] - Trigger hover background.\n * @cssprop [--hx-accordion-icon-color=var(--hx-color-neutral-500)] - Icon color.\n * @cssprop [--hx-accordion-content-padding=0 var(--hx-space-4) var(--hx-space-4)] - Content padding.\n * @cssprop [--hx-accordion-content-color=var(--hx-color-neutral-600)] - Content text color.\n */\n@customElement('hx-accordion-item')\nexport class HelixAccordionItem extends HelixElement {\n static override styles = [helixAccordionItemStyles, forcedColorsInteractive];\n\n /** @internal */\n private _uid = _nextAccordionItemId();\n\n /**\n * Whether this item is expanded.\n * @attr expanded\n */\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /**\n * Whether this item is disabled (cannot be toggled).\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\n * trigger. Defaults to 3. Set to match the document outline around the\n * accordion so screen readers surface accordion items in the heading list.\n * @attr level\n */\n @property({ type: Number })\n level: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.closest('hx-accordion')) {\n devWarn(\n 'hx-accordion-item',\n 'Used outside hx-accordion. Single-expand coordination will not function.',\n );\n }\n }\n\n // ─── Slot Handlers ───\n\n /** @internal */\n private _handleTriggerSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes({ flatten: true }).length > 0;\n if (!hasContent) {\n devWarn(\n 'hx-accordion-item',\n 'trigger slot is empty — provide a visible label for keyboard and screen reader users.',\n );\n }\n }\n\n // ─── Heading Level Helper ───\n\n /**\n * Returns a clamped heading level (1–6) for use as `aria-level` on the\n * `<summary>` element. Per the WAI-ARIA APG Accordion pattern, the\n * `<summary>` must be a **direct child** of `<details>` for native\n * disclosure behaviour to work. Instead of wrapping `<summary>` inside\n * an `<h3>` (which breaks the native toggle), we apply\n * `role=\"heading\" aria-level=\"N\"` directly on `<summary>`.\n */\n /** @internal */\n private get _headingLevel(): number {\n return Math.max(1, Math.min(6, this.level));\n }\n\n // ─── Toggle Logic ───\n\n /** @internal */\n private _toggle(): void {\n if (this.disabled) return;\n\n const willExpand = !this.expanded;\n this.expanded = willExpand;\n\n this._dispatchToggleEvent(willExpand);\n }\n\n /** @internal */\n _dispatchToggleEvent(expanded: boolean): void {\n const detail = { expanded, itemId: this.id || '' };\n const options = { bubbles: true, composed: true, detail };\n\n if (expanded) {\n this.dispatchEvent(\n new CustomEvent<{ expanded: boolean; itemId: string }>('hx-expand', options),\n );\n } else {\n this.dispatchEvent(\n new CustomEvent<{ expanded: boolean; itemId: string }>('hx-collapse', options),\n );\n }\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSummaryClick(e: MouseEvent): void {\n e.preventDefault();\n this._toggle();\n }\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this._toggle();\n }\n }\n\n // ─── Render ───\n\n override render() {\n const itemClasses = {\n item: true,\n 'item--expanded': this.expanded,\n 'item--disabled': this.disabled,\n };\n\n return html`\n <details part=\"item\" class=${classMap(itemClasses)} ?open=${this.expanded}>\n <summary\n id=${`${this._uid}-trigger`}\n part=\"trigger\"\n class=\"trigger\"\n role=\"heading\"\n aria-level=${this._headingLevel}\n tabindex=${this.disabled ? '-1' : '0'}\n aria-expanded=${this.expanded ? 'true' : 'false'}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-controls=${`${this._uid}-content`}\n @click=${this._handleSummaryClick}\n @keydown=${this._handleKeyDown}\n >\n <slot name=\"trigger\" @slotchange=${this._handleTriggerSlotChange}></slot>\n <span part=\"icon\" class=\"icon\">${chevronIcon}</span>\n </summary>\n <div class=\"content-wrapper\">\n <div class=\"content-inner\">\n <div\n id=${`${this._uid}-content`}\n part=\"content\"\n class=\"content\"\n role=\"region\"\n aria-labelledby=${`${this._uid}-trigger`}\n aria-hidden=${this.expanded ? nothing : 'true'}\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </details>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-accordion-item': HelixAccordionItem;\n }\n}\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixAccordionStyles } from './hx-accordion.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport './hx-accordion-item.js';\nimport type { HelixAccordionItem } from './hx-accordion-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An accordion container that manages collapsible content sections.\n *\n * @summary Collapsible content sections with single or multi-expand modes.\n *\n * @tag hx-accordion\n *\n * @slot - Default slot for hx-accordion-item elements.\n *\n * @csspart accordion - The outer container wrapping all accordion items.\n *\n * @cssprop [--hx-accordion-border-radius=var(--hx-border-radius-md)] - Outer border radius.\n *\n * @example\n * ```html\n * <hx-accordion mode=\"single\">\n * <hx-accordion-item>\n * <span slot=\"trigger\">What is this?</span>\n * <p>Answer content here.</p>\n * </hx-accordion-item>\n * </hx-accordion>\n * ```\n * @cssprop [--hx-accordion-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n */\n@customElement('hx-accordion')\nexport class HelixAccordion extends HelixElement {\n static override styles = [helixAccordionStyles, forcedColorsInteractive];\n\n /**\n * Expansion mode: 'single' collapses all other items when one expands.\n * 'multi' allows multiple items open simultaneously.\n * @attr mode\n */\n @property({ type: String, reflect: true })\n mode: 'single' | 'multi' = 'single';\n\n // ─── Lifecycle ───\n\n /** @internal */\n private _mutationObserver: MutationObserver | null = null;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('hx-expand', this._handleChildExpand);\n this.addEventListener('keydown', this._handleKeyDown);\n // Re-enforce single mode when reconnected with pre-expanded items\n this._enforceSingleMode();\n // Watch for dynamically added accordion items that may violate single-expand\n if (typeof MutationObserver !== 'undefined') {\n this._mutationObserver = new MutationObserver((mutations) => {\n const hasNewItems = mutations.some((m) =>\n Array.from(m.addedNodes).some(\n (n) => n instanceof Element && n.tagName.toLowerCase() === 'hx-accordion-item',\n ),\n );\n if (hasNewItems) {\n this._enforceSingleMode();\n }\n });\n this._mutationObserver.observe(this, { childList: true });\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('hx-expand', this._handleChildExpand);\n this.removeEventListener('keydown', this._handleKeyDown);\n this._mutationObserver?.disconnect();\n this._mutationObserver = null;\n }\n\n protected override firstUpdated(): void {\n this._enforceSingleMode();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('mode')) {\n const validModes: string[] = ['single', 'multi'];\n if (!validModes.includes(this.mode)) {\n devWarn(\n 'hx-accordion',\n `Invalid mode \"${this.mode}\". Expected one of: ${validModes.join(', ')}. Clamping to \"single\".`,\n );\n this.mode = 'single';\n return;\n }\n // When switching from multi to single, enforce single-expand immediately\n this._enforceSingleMode();\n }\n }\n\n // ─── Single-expand coordination ───\n\n /** @internal */\n private _enforceSingleMode(): void {\n if (this.mode !== 'single') return;\n\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n let foundExpanded = false;\n\n items.forEach((item) => {\n if (item.expanded) {\n if (foundExpanded) {\n item.expanded = false;\n } else {\n foundExpanded = true;\n }\n }\n });\n }\n\n /**\n * Handles expand events from child accordion items to enforce single-expand mode.\n * @internal\n */\n private _handleChildExpand = (e: Event): void => {\n if (this.mode !== 'single') return;\n\n const expandedItem = e.composedPath()[0] as HelixAccordionItem;\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n\n items.forEach((item) => {\n if (item !== expandedItem && item.expanded) {\n item.expanded = false;\n item._dispatchToggleEvent(false);\n }\n });\n };\n\n // ─── Arrow key navigation (ARIA APG Accordion pattern) ───\n\n /**\n * Handles keyboard navigation between accordion triggers using arrow, Home, and End keys.\n * @internal\n */\n private _handleKeyDown = (e: KeyboardEvent): void => {\n const triggers = this._getTriggers();\n if (triggers.length === 0) return;\n\n const activeEl = this.shadowRoot?.activeElement ?? document.activeElement;\n let currentItem: HelixAccordionItem | null = null;\n\n const items = Array.from(this.querySelectorAll<HelixAccordionItem>('hx-accordion-item'));\n for (const item of items) {\n const summary = item.shadowRoot?.querySelector('[part=\"trigger\"]');\n if (summary === activeEl || item.shadowRoot?.activeElement === summary) {\n currentItem = item;\n break;\n }\n }\n\n if (!currentItem) return;\n\n const enabledItems = items.filter((item) => !item.disabled);\n const currentIndex = enabledItems.indexOf(currentItem);\n if (currentIndex === -1) return;\n\n let targetIndex = -1;\n\n switch (e.key) {\n case 'ArrowDown':\n targetIndex = (currentIndex + 1) % enabledItems.length;\n break;\n case 'ArrowUp':\n targetIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;\n break;\n case 'Home':\n targetIndex = 0;\n break;\n case 'End':\n targetIndex = enabledItems.length - 1;\n break;\n default:\n return;\n }\n\n e.preventDefault();\n const targetItem = enabledItems[targetIndex];\n const targetSummary = targetItem?.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n targetSummary?.focus();\n };\n\n /** @internal */\n private _getTriggers(): HTMLElement[] {\n const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n const triggers: HTMLElement[] = [];\n items.forEach((item) => {\n const summary = item.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n if (summary) triggers.push(summary);\n });\n return triggers;\n }\n\n // ─── Slot validation ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target;\n if (!(slot instanceof HTMLSlotElement)) return;\n const invalid = slot\n .assignedElements()\n .filter((el) => el.tagName.toLowerCase() !== 'hx-accordion-item');\n if (invalid.length > 0) {\n devWarn(\n 'hx-accordion',\n `Default slot expects <hx-accordion-item> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n );\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div part=\"accordion\" class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-accordion': HelixAccordion;\n }\n}\n"],"names":["helixAccordionStyles","css","helixAccordionItemStyles","chevronIcon","svg","_nextAccordionItemId","createIdCounter","HelixAccordionItem","HelixElement","willExpand","expanded","options","itemClasses","html","classMap","nothing","forcedColorsInteractive","__decorateClass","property","customElement","HelixAccordion","expandedItem","item","activeEl","_a","currentItem","items","summary","_b","_c","enabledItems","currentIndex","targetIndex","targetItem","targetSummary","_d","mutations","m","n","changedProperties","validModes","devWarn","foundExpanded","triggers","slot","invalid","el"],"mappings":"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"}

package/dist/shared/hx-button-ebUV8KhT.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-button-ebUV8KhT.js","sources":["../../src/components/hx-button/hx-button.styles.ts","../../src/components/hx-button/hx-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n :host([full]) {\n display: block;\n width: 100%;\n }\n\n :host([full]) .button {\n width: 100%;\n justify-content: center;\n }\n\n /* ─── Base Button ─── */\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);\n border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-button-bg, var(--hx-color-primary-500, #429797));\n color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n text-decoration: none;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, #6ab1b1));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .button:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── */\n\n /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.\n min-height uses --hx-touch-target-min to guarantee the interactive area\n meets the threshold even though the visual size token is smaller. */\n .button--sm {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n }\n\n .button--md {\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n font-size: var(--hx-font-size-md, 1rem);\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .button--lg {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Style Variants ─── */\n\n .button--primary {\n --hx-button-bg: var(--hx-color-action-primary-bg, #429797);\n /* Inline #0d1825 matches text.on-primary's resolved primitive (neutral-900);\n cold-start without the semantic still paints AA-tuned dark-on-primary\n rather than white-on-primary (3.43:1 fail). */\n --hx-button-color: var(--hx-color-text-on-primary, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n .button--secondary {\n --hx-button-bg: transparent;\n /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.\n primary-600 (#0F7078) on white = 5.82:1 — AA pass. */\n --hx-button-color: var(--hx-color-action-secondary-fg, #0f7078);\n --hx-button-border-color: var(--hx-color-action-secondary-border, #0f7078);\n }\n\n .button--secondary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-secondary-bg-hover, #ebf8f8));\n }\n\n .button--tertiary {\n --hx-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n --hx-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n .button--tertiary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n }\n\n .button--danger {\n --hx-button-bg: var(--hx-color-action-danger-bg, #e5493e);\n /* Inline #0d1825 matches text.on-error's resolved primitive (neutral-900);\n cold-start without the semantic still paints AA-tuned dark-on-error\n rather than white-on-error (3.92:1 fail). */\n --hx-button-color: var(--hx-color-text-on-error, #0d1825);\n --hx-button-border-color: transparent;\n }\n\n /* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).\n error-600 (#C92A2A) drops that to 3.28:1 — AA fail. text.on-error-strong\n resolves to neutral-0 across modes (no dark flip) so the darker hover fill\n stays legible. Mirrors hx-toast precedent (commit 300e21ab0); routed\n through the semantic tier in 3.2.1 token-cascade remediation. */\n .button--danger:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-hover, #c92a2a));\n --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);\n }\n\n /* Pressed state binds explicitly to action.danger.bg-active (error-700,\n #A21312) + text.on-error-strong (neutral-0) = 7.96:1 AA. Base\n .button:active filter:brightness(0.8) would compound on top of bg-hover\n (#C92A2A) and produce ~3.3:1 sub-AA on the bound colors. Override the\n filter to none. HC override on action.danger.bg-active flips to HC\n error-500 so the on-error-strong (HC = #000) pair is AA in HC too. */\n .button--danger:active {\n --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-danger-bg-active, #a21312));\n --hx-button-color: var(--hx-color-text-on-error-strong, #ffffff);\n filter: none;\n }\n\n .button--ghost {\n --hx-button-bg: transparent;\n /* primary-500 (#429797) text on white surface = 3.44:1 — fails AA.\n primary-600 (#0F7078) on white = 5.82:1 — AA pass. */\n --hx-button-color: var(--hx-color-action-ghost-fg, #0f7078);\n --hx-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-ghost-bg-hover, #ebf8f8));\n }\n\n .button--outline {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-button-border-color: var(--hx-color-border-strong, #8e9c98);\n }\n\n .button--outline:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));\n }\n\n /* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.\n primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. text.on-primary-strong\n resolves to neutral-0 across modes (no dark flip) for the darker hover fill.\n Mirrors hx-toast precedent (commit 300e21ab0); routed through the semantic\n tier in 3.2.1 token-cascade remediation. */\n .button--primary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-hover, #0f7078));\n --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);\n }\n\n /* Pressed state binds explicitly to action.primary.bg-active (primary-700,\n #0F6363) + text.on-primary-strong (neutral-0) = 7.03:1 AA. The base\n .button:active filter:brightness(0.8) would compound on top of bg-hover\n (#0F7078) and produce ~3.7:1 sub-AA on the bound colors. Override the\n filter to none so the action.*.bg-active token is what actually paints. */\n .button--primary:active {\n --hx-button-bg: var(--hx-button-active-bg, var(--hx-color-action-primary-bg-active, #0f6363));\n --hx-button-color: var(--hx-color-text-on-primary-strong, #ffffff);\n filter: none;\n }\n\n /* ─── Disabled ─── */\n\n /* Note: opacity is applied on :host([disabled]) above — do NOT add opacity here.\n Stacking opacity on both :host and .button[disabled] would multiply to 0.25. */\n .button[disabled] {\n cursor: not-allowed;\n }\n\n /* ─── Loading State ─── */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button__spinner {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: hx-spin var(--hx-duration-spinner, 750ms) linear infinite;\n }\n\n @keyframes hx-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n\n .button__spinner {\n animation: none;\n opacity: var(--hx-opacity-muted, 0.6);\n }\n }\n\n /* ─── Inverted Mode ─── */\n\n /* Override text color and filter-based hover/active for all variants */\n :host([inverted]) .button {\n color: var(--hx-button-inverted-color, var(--hx-color-text-inverse, #ffffff));\n filter: none;\n }\n\n :host([inverted]) .button:hover {\n filter: none;\n }\n\n :host([inverted]) .button:active {\n filter: none;\n }\n\n :host([inverted]) .button:focus-visible {\n /* WCAG 1.4.11: focus indicator needs ≥3:1 against adjacent colors.\n border-on-dark-default (overlay-white-30) ≈ 2.7:1 on neutral-900 — fails.\n border-on-dark-strong (overlay-white-70) ≈ 5:1 — passes. */\n outline-color: var(\n --hx-button-inverted-focus-ring-color,\n var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))\n );\n }\n\n /* Primary inverted — hover/pressed lift to action.primary.bg-inverted-hover\n (primary-400, light teal). The base :host([inverted]) .button rule binds\n color to text.inverse, which flips by mode (neutral-0 in light, neutral-900\n in dark). On a permanent light-teal fill, white text drops to 2.4:1 in\n light mode (AA fail). Pin color to text.on-primary (neutral-900, no\n dark-mode flip) for both hover and active so the foreground is dark in\n both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).\n Pressed === hover visually in inverted mode is acceptable UX (the\n transient absence of pointer over the button signals release).\n The fallback chain wraps --hx-button-active-bg (highest precedence) and\n --hx-button-hover-bg so consumer overrides on either prop apply under\n :host([inverted]) — the two share a paint here, so either knob is\n honored, with active-bg winning when both are set. */\n :host([inverted]) .button--primary:hover,\n :host([inverted]) .button--primary:active {\n --hx-button-bg: var(\n --hx-button-active-bg,\n var(--hx-button-hover-bg, var(--hx-color-action-primary-bg-inverted-hover, #6ab1b1))\n );\n color: var(\n --hx-button-inverted-primary-interactive-color,\n var(--hx-color-text-on-primary, #0d1825)\n );\n }\n\n /* Danger inverted — sister to primary. Hover/pressed lift to\n action.danger.bg-inverted-hover (error-400, #FC7264). Same foreground\n contract: text.inverse fails in light mode (white on light red ≈ 2.6:1);\n pin to text.on-error (neutral-900, no dark-mode flip) for 6.58:1 in both\n modes. Same active-bg → hover-bg → semantic fallback chain as primary. */\n :host([inverted]) .button--danger:hover,\n :host([inverted]) .button--danger:active {\n --hx-button-bg: var(\n --hx-button-active-bg,\n var(--hx-button-hover-bg, var(--hx-color-action-danger-bg-inverted-hover, #fc7264))\n );\n color: var(\n --hx-button-inverted-danger-interactive-color,\n var(--hx-color-text-on-error, #0d1825)\n );\n }\n\n /* Secondary inverted — white border and translucent hover fill */\n :host([inverted]) .button--secondary {\n --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--secondary:hover {\n --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));\n }\n\n /* Tertiary inverted — resting at subtle (10%) lifts to default (30%) on hover\n so the runtime hover delta is visually distinct, not collapsed onto a\n single token. */\n :host([inverted]) .button--tertiary {\n --hx-button-bg: var(--hx-color-border-on-dark-subtle, rgba(255, 255, 255, 0.1));\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--tertiary:hover {\n --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));\n }\n\n /* Ghost inverted — transparent base, translucent hover bg */\n :host([inverted]) .button--ghost {\n --hx-button-bg: transparent;\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--ghost:hover {\n --hx-button-bg: var(\n --hx-button-inverted-ghost-hover-bg,\n var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3))\n );\n }\n\n /* Outline inverted — white border */\n :host([inverted]) .button--outline {\n --hx-button-border-color: var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--outline:hover {\n --hx-button-bg: var(--hx-color-border-on-dark-default, rgba(255, 255, 255, 0.3));\n }\n\n /* ─── Prefix / Suffix / Label ─── */\n\n .button__prefix,\n .button__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .button__label {\n flex: 1 1 auto;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .button {\n /* Ensure button outline is visible in Windows High Contrast mode.\n ButtonText/ButtonFace are system colors recognized by the browser. */\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .button:hover {\n /* Hover affordance must survive in HC. Highlight/HighlightText is the\n OS-level \"selected\" pair, mirroring the forcedColorsInteractive mixin's\n hover contract — kept inline since this component owns its bespoke HC\n block (XOR rule). */\n background-color: Highlight;\n color: HighlightText;\n border-color: Highlight;\n }\n\n .button:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .button[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .button--loading .button__spinner {\n /* Ensure spinner is visible in HCM */\n forced-color-adjust: auto;\n }\n }\n`;\n","import { html, nothing, type TemplateResult, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixButtonStyles } from './hx-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Detail for the hx-click event dispatched by hx-button. */\nexport interface HxButtonClickDetail {\n originalEvent: MouseEvent;\n}\n\n/**\n * A production-grade button component for user interaction. Supports multiple\n * visual variants, sizes, loading state, prefix/suffix slots, anchor rendering,\n * and full ElementInternals form association.\n *\n * @summary Primary interactive element for triggering actions and form submission.\n *\n * @tag hx-button\n *\n * @slot - Default slot for button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the button is clicked and is neither disabled nor loading.\n *\n * @csspart button - The native button or anchor element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n * @csspart spinner - The loading spinner SVG element.\n *\n * @cssprop [--hx-button-bg=var(--hx-color-action-primary-bg)] - Button background color (3.2.1 cascade — variant rules route through action.{primary,secondary,ghost,danger}.bg).\n * @cssprop [--hx-button-hover-bg] - Hover background override (primary and danger variants only). Other variants (secondary/outline, ghost) keep their hover fills routed through their semantic action.* tokens and do not consume this hook. Under [inverted] for primary/danger, hover and active share a paint (combined :hover, :active rule), so this override applies to both states unless --hx-button-active-bg also takes precedence.\n * @cssprop [--hx-button-active-bg] - Pressed/active background override (primary and danger variants only, including their inverted modes). Takes precedence over --hx-button-hover-bg in the fallback chain. Standard-mode primary/danger default to action.{primary,danger}.bg-active (with filter:none) for AA-pinned pressed contrast. Inverted-mode primary/danger reuse action.{primary,danger}.bg-inverted-hover (combined :hover, :active rule); setting --hx-button-active-bg under [inverted] therefore overrides the lifted hover fill as well as the pressed fill — the two share a paint in inverted mode. Other variants do not consume this hook.\n * @cssprop [--hx-button-color=var(--hx-color-text-on-primary)] - Button text color (variants route through text.on-{role} / text.on-{role}-strong).\n * @cssprop [--hx-button-border-color=transparent] - Button border color (secondary/outline variants route through action.secondary.border).\n * @cssprop [--hx-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @cssprop [--hx-button-inverted-color=var(--hx-color-text-inverse)] - Text color when inverted (resolves to neutral-0).\n * @cssprop [--hx-button-inverted-primary-interactive-color=var(--hx-color-text-on-primary)] - Foreground override for inverted primary hover and pressed (combined :hover, :active rule). Defaults to text.on-primary (neutral-900, no dark-mode flip) so dark text rides the lifted primary-400 fill — text.inverse on light teal collapses to ~2.4:1 in light mode.\n * @cssprop [--hx-button-inverted-danger-interactive-color=var(--hx-color-text-on-error)] - Foreground override for inverted danger hover and pressed (combined :hover, :active rule). Defaults to text.on-error (neutral-900); same rationale as the primary override.\n * @cssprop [--hx-button-inverted-ghost-hover-bg=var(--hx-color-border-on-dark-default)] - Ghost hover bg when inverted (overlay-white-30 ≈ 5:1 vs neutral-900).\n * @cssprop [--hx-button-inverted-focus-ring-color=var(--hx-color-border-on-dark-strong)] - Focus ring color when inverted (overlay-white-70 = ~5:1 vs neutral-900).\n *\n * @cssprop [--hx-color-action-primary-bg] - Primary variant resting fill (3.2.1 semantic action layer).\n * @cssprop [--hx-color-action-primary-bg-hover] - Primary variant hover fill.\n * @cssprop [--hx-color-action-primary-bg-active] - Primary variant active/pressed fill.\n * @cssprop [--hx-color-action-secondary-fg] - Secondary/outline variant fg (resolves to primary-600 light, primary-400 dark). Consumed only by .button--secondary; the actual border/surface paint for outline currently routes through --hx-color-border-strong / --hx-color-surface-raised in styles, with this token reserved for the foreground.\n * @cssprop [--hx-color-action-secondary-border] - Secondary/outline variant border (3.2.1 semantic; outline still routes through --hx-color-border-strong by default).\n * @cssprop [--hx-color-action-secondary-bg-hover] - Secondary/outline variant hover fill (3.2.1 semantic; outline still routes through --hx-color-surface-raised by default).\n * @cssprop [--hx-color-action-ghost-fg] - Ghost variant fg.\n * @cssprop [--hx-color-action-ghost-bg-hover] - Ghost variant hover fill.\n * @cssprop [--hx-color-action-danger-bg] - Danger variant resting fill.\n * @cssprop [--hx-color-action-danger-bg-hover] - Danger variant hover fill.\n * @cssprop [--hx-color-action-danger-bg-active] - Danger variant active fill.\n * @cssprop [--hx-color-action-primary-bg-inverted-hover] - Primary variant hover/pressed fill on dark/inverted surface (resolves to primary-400, 7.27:1 on neutral-900).\n * @cssprop [--hx-color-action-danger-bg-inverted-hover] - Danger variant hover/pressed fill on dark/inverted surface (resolves to error-400, 6.58:1 on neutral-900).\n * @cssprop [--hx-color-text-on-primary] - Foreground for primary fill (resolves to neutral-900 — AA-tuned for primary-500).\n * @cssprop [--hx-color-text-on-primary-strong] - Foreground for primary-hover fill (resolves to neutral-0 across modes).\n * @cssprop [--hx-color-text-on-error] - Foreground for danger fill (resolves to neutral-900).\n * @cssprop [--hx-color-text-on-error-strong] - Foreground for danger-hover fill (resolves to neutral-0 across modes).\n * @cssprop [--hx-color-text-primary] - Foreground for tertiary variant on surface.sunken.\n * @cssprop [--hx-color-surface-sunken] - Tertiary variant resting fill.\n * @cssprop [--hx-color-surface-raised] - Tertiary variant hover fill.\n * @cssprop [--hx-color-border-on-dark-subtle] - Inverted-tertiary resting border (overlay-white-10).\n * @cssprop [--hx-color-border-on-dark-default] - Inverted-tertiary hover border + inverted-secondary/ghost hover border (overlay-white-30).\n * @cssprop [--hx-color-border-on-dark-strong] - Inverted focus-visible outline (overlay-white-70).\n */\n@customElement('hx-button')\nexport class HelixButton extends mixinDelegatesAria(HelixElement) {\n // 3.2.1: forced-colors deference is owned by the bespoke @media block in\n // hx-button.styles.ts (covers loading/disabled/focus, not just the base).\n // Do NOT also compose forcedColorsInteractive here — the mixin's docstring\n // forbids dual composition (XOR rule) and the dual approach was flagged in\n // the token-cascade campaign findings.\n static override styles = [helixButtonStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n // ─── Public Properties ───\n\n /**\n * Visual style variant of the button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n /**\n * Size of the 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 button is disabled. Prevents all interaction and form actions.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the button is in a loading state. Shows spinner, prevents interaction,\n * and sets aria-busy. Does not set the disabled attribute.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * The type attribute for the underlying button element. Ignored when href is set.\n * @attr type\n */\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * When set, renders an anchor element instead of a button.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Anchor target attribute. Only used when href is set.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Form field name submitted via ElementInternals.setFormValue on submit.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Form field value submitted via ElementInternals.setFormValue on submit.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * When true, the button stretches to fill its container width.\n * Sets the host to `display: block` and the inner element to `width: 100%`.\n * @attr full\n */\n @property({ type: Boolean, reflect: true })\n full = false;\n\n /**\n * When true, flips button colors for placement on dark or gradient backgrounds.\n * Forces text to white and adjusts hover/focus ring colors across all variants.\n *\n * **Mode scope:** `[inverted]` is validated for placement on a dark *region*\n * within a light-mode-active page (hero banners, gradient sections, dark\n * cards). It is NOT validated for use within a dark-mode-active root\n * context: in dark mode, `surface.inverse` flips to a light surface\n * (neutral-100), and the lifted `-400` hover/active fills lose UI-floor\n * contrast against it (primary 2.10:1, danger 2.32:1 vs WCAG 1.4.11's 3:1\n * floor). Mode-aware fill stops + foreground for the dark-mode-inverted\n * combination are tracked as a 3.2.x follow-up.\n *\n * @attr inverted\n */\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n /**\n * Accessible label for icon-only or text-less buttons.\n * Required when the button has no visible text content.\n *\n * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n * `accessible-label` takes precedence when both are set.\n *\n * @attr accessible-label\n */\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: string = '';\n\n /**\n * Returns the effective label for the button, checking accessible-label first,\n * then the aria-label attribute, falling back to empty string.\n * @internal\n */\n private get _effectiveLabel(): string {\n return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n }\n\n // ─── Form API ───\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Lifecycle ───\n\n /** @internal */\n private static readonly _VALID_VARIANTS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'danger',\n 'ghost',\n 'outline',\n ] as const;\n\n // Prevents double-warn on browsers that fire slotchange for empty initial slots.\n private _emptySlotWarnEmitted = false;\n\n override firstUpdated(changedProperties: PropertyValues<this>): void {\n super.firstUpdated(changedProperties);\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n const hasContent = (slot?.assignedNodes({ flatten: true }) ?? []).some(\n (n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0,\n );\n if (!hasContent && !this._effectiveLabel) {\n this._emptySlotWarnEmitted = true;\n devWarn(\n 'hx-button',\n 'hx-button has no slot content and no accessible-label — button will have no accessible name.',\n );\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n const validVariants: string[] = [...HelixButton._VALID_VARIANTS];\n if (!validVariants.includes(this.variant)) {\n devWarn(\n 'hx-button',\n `Invalid variant \"${this.variant}\". Expected one of: ${validVariants.join(', ')}. Clamping to \"primary\".`,\n );\n this.variant = 'primary';\n }\n }\n }\n\n // ─── Slot Handlers ───\n\n /** @internal */\n private _handleDefaultSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const hasContent = slot\n .assignedNodes({ flatten: true })\n .some((n) => n.nodeType !== Node.TEXT_NODE || (n.textContent?.trim().length ?? 0) > 0);\n if (!hasContent && !this._effectiveLabel && !this._emptySlotWarnEmitted) {\n devWarn(\n 'hx-button',\n 'hx-button has no slot content and no accessible-label — button will have no accessible name.',\n );\n }\n // Only reset once content arrives so the guard stays armed for browsers\n // that fire a second slotchange for the same empty initial slot.\n if (hasContent) {\n this._emptySlotWarnEmitted = false;\n }\n }\n\n // ─── Event Handling ───\n\n /**\n * @private\n * @internal\n */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled || this.loading) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /**\n * Dispatched when the button is clicked.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n\n // Handle form submission/reset if form-associated and not in anchor mode\n if (this.href === undefined && this.type === 'submit' && this._internals.form) {\n if (this.name !== undefined && this.value !== undefined) {\n this._internals.setFormValue(this.value);\n }\n this._internals.form.requestSubmit();\n } else if (this.href === undefined && this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n\n // ─── Render Helpers ───\n\n /**\n * @private\n * @internal\n */\n private _renderSpinner(): TemplateResult {\n return html`\n <svg\n class=\"button__spinner\"\n part=\"spinner\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <circle\n class=\"button__spinner-track\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n opacity=\"0.3\"\n />\n <path\n class=\"button__spinner-arc\"\n d=\"M12 2a10 10 0 0 1 10 10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n />\n </svg>\n `;\n }\n\n /**\n * @private\n * @internal\n */\n private _renderInner(): TemplateResult {\n return html`\n ${this.loading ? this._renderSpinner() : nothing}\n <span part=\"prefix\" class=\"button__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n 'button--loading': this.loading,\n };\n\n if (this.href !== undefined) {\n return html`\n <a\n part=\"button\"\n class=${classMap(classes)}\n href=${this.disabled || this.loading ? nothing : ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n aria-label=${this._effectiveLabel || nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </a>\n `;\n }\n\n return html`\n <button\n part=\"button\"\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${this._effectiveLabel || nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-button': HelixButton;\n }\n interface HTMLElementEventMap {\n 'hx-click': CustomEvent<{ originalEvent: MouseEvent }>;\n }\n}\n"],"names":["helixButtonStyles","css","HelixButton","mixinDelegatesAria","HelixElement","_a","_b","disabled","changedProperties","slot","n","validVariants","devWarn","e","hasContent","html","nothing","classes","classMap","ifDefined","__decorateClass","property","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}

package/dist/shared/hx-card-CU1QnjNb.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-card-CU1QnjNb.js","sources":["../../src/components/hx-card/hx-card.styles.ts","../../src/components/hx-card/hx-card.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-card styles.\n *\n * Component-tier tokens with two-level var() fallback:\n * var(--hx-card-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * neutral-0 = #FFFFFF, neutral-200 = #D6DBD5, neutral-800 = #202B39,\n * neutral-600 = #4A5362, primary-500 = #429797.\n */\nexport const helixCardStyles = css`\n :host {\n display: block;\n color: var(--hx-card-color, inherit);\n background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));\n }\n\n .card {\n display: flex;\n flex-direction: column;\n gap: var(--hx-card-gap, var(--hx-space-4, 1rem));\n background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));\n color: var(--hx-card-color, var(--hx-color-text-strong, #202b39));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));\n border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n overflow: hidden;\n font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));\n transition:\n box-shadow var(--hx-transition-normal, 250ms ease),\n transform var(--hx-transition-normal, 250ms ease);\n }\n\n /* ─── Elevation Variants ─── */\n\n .card--flat {\n box-shadow: none;\n }\n\n .card--raised {\n box-shadow: var(--hx-card-shadow, var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)));\n }\n\n .card--floating {\n box-shadow: var(\n --hx-card-shadow-floating,\n var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1))\n );\n }\n\n /* ─── Style Variants ─── */\n\n .card--default {\n /* Default styling — uses base styles */\n }\n\n .card--featured {\n border-color: var(--hx-card-featured-border-color, var(--hx-color-primary-500, #429797));\n border-width: var(--hx-card-featured-border-width, var(--hx-border-width-medium, 2px));\n }\n\n .card--compact .card__body {\n padding: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__heading {\n padding-top: var(--hx-space-3, 0.75rem);\n padding-inline-end: var(--hx-space-3, 0.75rem);\n padding-inline-start: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__footer {\n padding-inline-end: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-inline-start: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__actions {\n padding-inline-end: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-inline-start: var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Interactive ─── */\n\n .card--interactive {\n cursor: pointer;\n }\n\n .card--interactive:hover {\n box-shadow: var(--hx-card-shadow-hover, var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)));\n transform: translateY(var(--hx-transform-lift-md, -2px));\n }\n\n .card--interactive:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-card-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .card--interactive:active {\n transform: translateY(0);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .card {\n transition: none;\n }\n\n .card--interactive:hover {\n transform: none;\n }\n\n .card--interactive:active {\n transform: none;\n }\n }\n\n /* ─── Hidden empty slot wrappers ─── */\n\n [hidden] {\n display: none !important;\n }\n\n /* ─── Sections ─── */\n\n .card__image {\n overflow: hidden;\n line-height: 0;\n }\n\n .card__image ::slotted(img) {\n width: 100%;\n aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);\n display: block;\n object-fit: cover;\n }\n\n .card__heading {\n padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: 0;\n padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n font-size: var(--hx-font-size-xl, 1.25rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: var(--hx-line-height-tight, 1.25);\n }\n\n .card__body {\n padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n flex: 1;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n /*\n * Body color cascades: component-tier --hx-card-body-color overrides\n * the host-tier --hx-card-color, which falls back to text-secondary.\n * Preserves the propagation contract: setting --hx-card-color on the\n * host flows into the body slot (and through to slotted light-DOM\n * descendants via flat-tree inheritance).\n */\n color: var(--hx-card-body-color, var(--hx-card-color, var(--hx-color-text-secondary, #313e4b)));\n }\n\n .card__footer {\n padding-top: 0;\n padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n }\n\n .card__actions {\n display: flex;\n gap: var(--hx-space-2, 0.5rem);\n padding-top: var(--hx-space-4, 1rem);\n padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-border-default, #d6dbd5));\n margin-top: auto;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n @media (forced-colors: active) {\n .card {\n border-color: CanvasText;\n }\n\n .card__actions {\n border-top-color: CanvasText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } 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 { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixCardStyles } from './hx-card.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextCardId = createIdCounter('hx-card');\n\n/**\n * A flexible card component for displaying grouped content.\n *\n * @summary Content container with image, heading, body, footer, and action slots.\n *\n * @tag hx-card\n *\n * @slot image - Optional image or media content at the top of the card.\n * @slot heading - The card heading/title content. Use a semantic heading element (h2, h3, etc.) for proper accessibility.\n * @slot - Default slot for the card body content.\n * @slot footer - Optional footer content below the body.\n * @slot actions - Optional action buttons, rendered with a top border separator. Do NOT use together with hx-href (interactive card + focusable actions is an ARIA anti-pattern).\n *\n * @fires {CustomEvent<{href: string, originalEvent: MouseEvent | KeyboardEvent}>} hx-click - Dispatched when an interactive card (with hx-href) is clicked.\n *\n * @csspart card - The outer card container element.\n * @csspart image - The image slot container.\n * @csspart heading - The heading slot container.\n * @csspart body - The body slot container.\n * @csspart footer - The footer slot container.\n * @csspart actions - The actions slot container.\n *\n * @cssprop [--hx-card-bg=var(--hx-color-neutral-0)] - Card background color.\n * @cssprop [--hx-card-color=var(--hx-color-neutral-800)] - Card text color.\n * @cssprop [--hx-card-border-color=var(--hx-color-neutral-200)] - Card border color.\n * @cssprop [--hx-card-border-radius=var(--hx-border-radius-lg)] - Card border radius.\n * @cssprop [--hx-card-padding=var(--hx-space-6)] - Internal padding for card sections.\n * @cssprop [--hx-card-gap=var(--hx-space-4)] - Gap between card sections.\n * @cssprop [--hx-card-image-aspect-ratio=16/9] - Aspect ratio for the image slot.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-border-width-medium] - Width.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-card-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-card-font-family=var(--hx-font-family-sans)] - Font family for card text content.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-shadow-lg] - Box shadow.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-shadow-xl] - Box shadow.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-transform-lift-md] - Transform applied on hover to lift the card.\n * @cssprop [--hx-transition-normal] - Transition timing.\n */\n@customElement('hx-card')\nexport class HelixCard extends HelixElement {\n /** @internal */\n static override shadowRootOptions = {\n ...HelixElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles = [helixCardStyles, forcedColorsSurface];\n\n /**\n * Visual style variant of the card.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'featured' | 'compact' = 'default';\n\n /**\n * Elevation (shadow depth) of the card.\n * @attr elevation\n */\n @property({ type: String, reflect: true })\n elevation: 'flat' | 'raised' | 'floating' = 'flat';\n\n /**\n * Optional URL. When set, the card becomes interactive (clickable)\n * and navigates to this URL on click.\n * Uses the hx-href attribute to avoid conflicting with the native HTML href attribute.\n * @attr hx-href\n */\n @property({ type: String, attribute: 'hx-href' })\n href: string | undefined = undefined;\n\n /**\n * Accessible label for interactive cards. Use this to provide a meaningful\n * description of the card's purpose rather than exposing the raw URL.\n * Only applies when hx-href is set.\n * @attr hx-label\n */\n @property({ type: String, attribute: 'hx-label' })\n label: string | undefined = undefined;\n\n // ─── Slot Detection ───\n\n /**\n * Tracks whether any content is assigned to the image slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasImage = false;\n\n /**\n * Tracks whether any content is assigned to the heading slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasHeading = false;\n\n /**\n * Tracks whether any content is assigned to the footer slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasFooter = false;\n\n /**\n * Tracks whether any content is assigned to the actions slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasActions = false;\n\n /**\n * Text content extracted from the heading slot, used as a fallback accessible\n * name for interactive cards when no explicit `hx-label` is provided.\n * @internal\n */\n @state() private _headingText = '';\n\n /**\n * Unique identifier for this card instance, used in ARIA attributes.\n * @internal\n */\n private _cardId = _nextCardId();\n /**\n * Unique identifier for the heading element, used in aria-labelledby.\n * @internal\n */\n private _headingId = `${this._cardId}-heading`;\n\n /** @internal */\n private _onImageSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasImage = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _onHeadingSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasHeading = nodes.length > 0;\n this._headingText = nodes\n .map((n) => n.textContent?.trim() ?? '')\n .join(' ')\n .trim();\n }\n\n /** @internal */\n private _onFooterSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _onActionsSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;\n if (this._hasActions && this.href) {\n devWarn(\n 'hx-card',\n 'Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: ' +\n 'interactive controls cannot be nested inside role=\"link\". ' +\n 'Use either hx-href or the actions slot, not both.',\n );\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n // WCAG 4.1.2: interactive cards (with hx-href) must have an accessible name\n if (\n (changedProperties.has('href') || changedProperties.has('label')) &&\n this.href &&\n !this.label &&\n !this._headingText\n ) {\n devWarn(\n 'hx-card',\n \"Interactive card (hx-href is set) is missing an accessible name. Set `hx-label` or provide heading slot content to describe the card's destination or purpose (WCAG 4.1.2).\",\n );\n }\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n if (!this.href) return;\n\n /**\n * Dispatched when an interactive card is clicked.\n * Includes the target href in the detail.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ href: string; originalEvent: MouseEvent | KeyboardEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { href: this.href, originalEvent },\n }),\n );\n }\n\n /** @internal */\n private _handleClick(e: MouseEvent): void {\n this._dispatchCardClick(e);\n }\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (!this.href) return;\n\n // WCAG 2.1.1 / ARIA APG: role=\"link\" activates on Enter only.\n // Space is reserved for scrolling and must not activate links.\n if (e.key === 'Enter') {\n e.preventDefault();\n this._dispatchCardClick(e);\n }\n }\n\n // ─── Render ───\n\n override render() {\n const isInteractive = !!this.href;\n\n const classes = {\n card: true,\n [`card--${this.variant}`]: true,\n [`card--${this.elevation}`]: true,\n 'card--interactive': isInteractive,\n };\n\n return html`\n <div\n part=\"card\"\n class=${classMap(classes)}\n role=${isInteractive ? 'link' : nothing}\n tabindex=${isInteractive ? '0' : nothing}\n aria-label=${isInteractive && this.label ? this.label : nothing}\n aria-labelledby=${this._hasHeading && !this.label ? this._headingId : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeyDown}\n >\n <div class=\"card__image\" part=\"image\" ?hidden=${!this._hasImage}>\n <slot name=\"image\" @slotchange=${this._onImageSlotChange}></slot>\n </div>\n\n <div\n class=\"card__heading\"\n part=\"heading\"\n id=${this._headingId}\n ?hidden=${!this._hasHeading}\n >\n <slot name=\"heading\" @slotchange=${this._onHeadingSlotChange}></slot>\n </div>\n\n <div class=\"card__body\" part=\"body\">\n <slot></slot>\n </div>\n\n <div class=\"card__footer\" part=\"footer\" ?hidden=${!this._hasFooter}>\n <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n </div>\n\n <div class=\"card__actions\" part=\"actions\" ?hidden=${!this._hasActions}>\n <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-card': HelixCard;\n }\n}\n"],"names":["helixCardStyles","css","_nextCardId","createIdCounter","HelixCard","HelixElement","e","slot","nodes","n","_a","changedProperties","originalEvent","isInteractive","classes","html","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-clinical-status-BmSjfSEN.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-clinical-status-BmSjfSEN.js","sources":["../../src/components/hx-clinical-status/hx-clinical-status.styles.ts","../../src/components/hx-clinical-status/hx-clinical-status.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixClinicalStatusStyles = css`\n :host {\n display: block;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Screen-reader-only utility ─── */\n /* @design-system-approved: WCAG standard visually-hidden technique for a11y */\n\n .sr-only {\n position: absolute;\n width: 1px; /* @design-system-approved: standard sr-only technique */\n height: 1px; /* @design-system-approved: standard sr-only technique */\n padding: 0;\n margin: -1px; /* @design-system-approved: standard sr-only technique */\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Container ─── */\n\n .clinical-status {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));\n border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-clinical-status-border-color, var(--hx-color-info-200, #bedcfc));\n border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid\n var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0c8beb));\n border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #eff6fe));\n color: var(--hx-clinical-status-color, var(--hx-color-info-800, #064172));\n font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Compact Mode ─── */\n\n .clinical-status--compact {\n padding: var(\n --hx-clinical-status-compact-padding,\n var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem)\n );\n gap: var(--hx-space-2, 0.5rem);\n font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n /* ─── Severity: info ─── */\n\n :host([severity='info']) .clinical-status,\n :host(:not([severity])) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-info-50, #eff6fe);\n --hx-clinical-status-border-color: var(--hx-color-info-200, #bedcfc);\n --hx-clinical-status-accent-color: var(--hx-color-info-500, #0c8beb);\n --hx-clinical-status-color: var(--hx-color-info-800, #064172);\n --hx-clinical-status-icon-color: var(--hx-color-info-500, #0c8beb);\n }\n\n /* ─── Severity: warning ─── */\n\n :host([severity='warning']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-warning-50, #fff3ea);\n --hx-clinical-status-border-color: var(--hx-color-warning-200, #facfae);\n --hx-clinical-status-accent-color: var(--hx-color-warning-500, #c2711c);\n --hx-clinical-status-color: var(--hx-color-warning-800, #603301);\n --hx-clinical-status-icon-color: var(--hx-color-warning-500, #c2711c);\n }\n\n /* ─── Severity: critical ─── */\n\n :host([severity='critical']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);\n --hx-clinical-status-border-color: var(--hx-color-error-200, #fccbc4);\n --hx-clinical-status-accent-color: var(--hx-color-error-500, #e5493e);\n --hx-clinical-status-color: var(--hx-color-error-800, #7a090a);\n --hx-clinical-status-icon-color: var(--hx-color-error-500, #e5493e);\n }\n\n /* ─── Severity: emergent ─── */\n\n :host([severity='emergent']) .clinical-status {\n --hx-clinical-status-bg: var(--hx-color-error-50, #fff2f0);\n --hx-clinical-status-border-color: var(--hx-color-error-300, #fda79c);\n --hx-clinical-status-accent-color: var(--hx-color-error-700, #a21312);\n --hx-clinical-status-color: var(--hx-color-error-900, #530d0a);\n --hx-clinical-status-icon-color: var(--hx-color-error-700, #a21312);\n border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);\n font-weight: var(--hx-font-weight-semibold, 600);\n }\n\n /* ─── Icon ─── */\n\n .clinical-status__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0c8beb));\n }\n\n .clinical-status__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n .clinical-status--compact .clinical-status__icon svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n }\n\n /* ─── Message ─── */\n\n .clinical-status__message {\n flex: 1;\n min-width: 0;\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* @design-system-approved: WCAG 1.4.1 non-color severity indicator for screen readers */\n\n .clinical-status__severity-label {\n position: absolute;\n width: 1px; /* @design-system-approved: standard sr-only technique */\n height: 1px; /* @design-system-approved: standard sr-only technique */\n padding: 0;\n margin: -1px; /* @design-system-approved: standard sr-only technique */\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Actions ─── */\n\n .clinical-status__actions {\n display: none;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-inline-start: auto;\n flex-shrink: 0;\n }\n\n .clinical-status__actions--visible {\n display: flex;\n }\n\n /* ─── Dismiss Button ─── */\n\n .clinical-status__dismiss-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n min-width: var(--hx-touch-target-size, 44px);\n min-height: var(--hx-touch-target-size, 44px);\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-clinical-status-color, var(--hx-color-info-800, #064172));\n cursor: pointer;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n opacity: 0.7;\n }\n\n .clinical-status__dismiss-button:hover {\n opacity: 1;\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .clinical-status__dismiss-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-focus, #429797));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .clinical-status__dismiss-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n .clinical-status--compact .clinical-status__dismiss-button {\n min-width: var(--hx-space-8, 2rem);\n min-height: var(--hx-space-8, 2rem);\n }\n\n /* ─── Acknowledge Button ─── */\n\n .clinical-status__acknowledge-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n border: var(--hx-border-width-thin, 1px) solid currentColor;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: var(--hx-font-size-xs, 0.75rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n text-transform: uppercase;\n letter-spacing: var(--hx-letter-spacing-wide, 0.025em);\n cursor: pointer;\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-touch-target-size, 44px);\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n }\n\n .clinical-status__acknowledge-button:hover {\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .clinical-status__acknowledge-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-focus, #429797));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .clinical-status--compact .clinical-status__acknowledge-button {\n min-height: var(--hx-space-8, 2rem);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .clinical-status__dismiss-button,\n .clinical-status__acknowledge-button {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .clinical-status {\n border-color: CanvasText;\n border-inline-start-color: CanvasText;\n }\n\n .clinical-status__icon svg {\n fill: CanvasText;\n }\n\n .clinical-status__dismiss-button {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n\n .clinical-status__acknowledge-button {\n border-color: ButtonText;\n color: ButtonText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } 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 { HelixElement } from '../../base/index.js';\nimport { createIdCounter } from '../../base/index.js';\nimport { helixClinicalStatusStyles } from './hx-clinical-status.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/** Clinical severity level for alert fatigue prevention. */\nexport type ClinicalSeverity = 'info' | 'warning' | 'critical' | 'emergent';\n\nconst nextId = createIdCounter('hx-clinical-status');\n\n/**\n * A clinical status indicator designed for healthcare alert fatigue prevention.\n * Standardizes clinical alert presentations to reduce cognitive overload from\n * inconsistent color/icon combinations across healthcare interfaces.\n *\n * @summary Clinical status indicator for standardized healthcare alert fatigue prevention.\n *\n * @tag hx-clinical-status\n *\n * @slot - Default slot for additional message content.\n *\n * @fires {CustomEvent<void>} hx-dismiss - Dispatched when the user dismisses the status.\n * @fires {CustomEvent<{ severity: ClinicalSeverity; persistent: boolean }>} hx-acknowledge - Dispatched when the user acknowledges a critical/emergent status.\n *\n * @csspart container - The outer status container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart actions - The actions container (dismiss/acknowledge buttons).\n * @csspart dismiss-button - The dismiss button (only rendered when dismissible).\n * @csspart acknowledge-button - The acknowledge button (only rendered when acknowledgeable).\n *\n * @cssprop [--hx-clinical-status-bg=var(--hx-color-info-50)] - Background color.\n * @cssprop [--hx-clinical-status-color=var(--hx-color-info-800)] - Text color.\n * @cssprop [--hx-clinical-status-border-color=var(--hx-color-info-200)] - Border color.\n * @cssprop [--hx-clinical-status-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-clinical-status-border-width=var(--hx-border-width-thin)] - Border width.\n * @cssprop [--hx-clinical-status-accent-color=var(--hx-color-info-500)] - Left accent stripe color.\n * @cssprop [--hx-clinical-status-accent-width=4px] - Left accent stripe width.\n * @cssprop [--hx-clinical-status-padding=var(--hx-space-4)] - Container padding.\n * @cssprop [--hx-clinical-status-gap=var(--hx-space-3)] - Gap between elements.\n * @cssprop [--hx-clinical-status-icon-color=var(--hx-color-info-500)] - Icon color.\n * @cssprop [--hx-clinical-status-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-clinical-status-compact-padding] - Padding in compact mode.\n * @cssprop [--hx-clinical-status-emergent-accent-width=6px] - Accent width for emergent severity.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-300] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-700] - Color.\n * @cssprop [--hx-color-error-800] - Color.\n * @cssprop [--hx-color-error-900] - Color.\n * @cssprop [--hx-color-focus] - Color.\n * @cssprop [--hx-color-info-200] - Color.\n * @cssprop [--hx-color-info-50] - Color.\n * @cssprop [--hx-color-info-500] - Color.\n * @cssprop [--hx-color-info-800] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-warning-800] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\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-semibold] - Font weight.\n * @cssprop [--hx-letter-spacing-wide] - CSS custom property.\n * @cssprop [--hx-line-height-normal] - Line height.\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-space-5] - Spacing token.\n * @cssprop [--hx-space-8] - Spacing token.\n * @cssprop [--hx-touch-target-size] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n */\n@customElement('hx-clinical-status')\nexport class HelixClinicalStatus extends HelixElement {\n static override styles = [helixClinicalStatusStyles, forcedColorsSurface];\n\n // ─── Properties ───\n\n /**\n * Clinical severity level that determines visual styling and ARIA semantics.\n * - `info`: Informational, non-urgent (role=\"status\")\n * - `warning`: Requires attention but not immediate (role=\"status\")\n * - `critical`: Requires prompt clinical attention (role=\"alert\")\n * - `emergent`: Life-threatening, immediate action required (role=\"alert\")\n * @attr severity\n */\n @property({ type: String, reflect: true })\n severity: ClinicalSeverity = 'info';\n\n /**\n * Status message text. Displayed as the primary content of the indicator.\n * @attr message\n */\n @property({ type: String })\n message = '';\n\n /**\n * Whether the status can be dismissed by the user.\n * Critical and emergent statuses should require acknowledgment rather than simple dismissal.\n * @attr dismissible\n */\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /**\n * Whether the status survives page navigation.\n * Defaults to false for info/warning, true for critical/emergent.\n * When set explicitly, overrides the severity-based default.\n * @attr persistent\n */\n @property({ type: Boolean, reflect: true })\n persistent = false;\n\n /**\n * Optional custom icon name. When not set, a default severity-appropriate icon is shown.\n * @attr icon\n */\n @property({ type: String })\n icon = '';\n\n /**\n * Compact mode for dense clinical UIs (e.g. patient dashboards, bedside displays).\n * Reduces padding, font size, and icon size.\n * @attr compact\n */\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n // ─── State ───\n\n /** @internal */\n @state()\n private _hasSlottedContent = false;\n\n /** @internal */\n @state()\n private _acknowledged = false;\n\n /**\n * SSR-safe unique ID for ARIA relationships.\n * @internal\n */\n private _componentId = nextId();\n\n /**\n * Tracks whether `persistent` was explicitly set by the consumer.\n * @internal\n */\n private _persistentExplicitlySet = false;\n\n // ─── Private Helpers ───\n\n /** Returns true when the severity requires assertive announcement. */\n private get _isAssertive(): boolean {\n return this.severity === 'critical' || this.severity === 'emergent';\n }\n\n /** Returns the appropriate ARIA role based on severity. */\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n /** Returns the default severity label for screen readers (WCAG 1.4.1). */\n private _severityLabel(): string {\n const labels: Record<ClinicalSeverity, string> = {\n info: 'Info:',\n warning: 'Warning:',\n critical: 'Critical:',\n emergent: 'Emergent:',\n };\n return labels[this.severity] ?? '';\n }\n\n /** Returns true when the severity requires explicit acknowledgment. */\n private get _requiresAcknowledgment(): boolean {\n return this.severity === 'critical' || this.severity === 'emergent';\n }\n\n /** Effective persistent value, considering severity-based defaults. */\n private get _effectivePersistent(): boolean {\n if (this._persistentExplicitlySet) {\n return this.persistent;\n }\n return this._isAssertive;\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._internals.role = this._role;\n }\n\n override attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n super.attributeChangedCallback(name, _old, value);\n if (name === 'persistent') {\n this._persistentExplicitlySet = value !== null;\n }\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('severity')) {\n this._internals.role = this._role;\n }\n }\n\n // ─── Default Icons ───\n\n /** @internal */\n private _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderCriticalIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderEmergentIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1 4a1 1 0 112 0v4a1 1 0 11-2 0V6zm1 9a1.25 1.25 0 100-2.5A1.25 1.25 0 0010 15z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderDefaultIcon() {\n switch (this.severity) {\n case 'warning':\n return this._renderWarningIcon();\n case 'critical':\n return this._renderCriticalIcon();\n case 'emergent':\n return this._renderEmergentIcon();\n case 'info':\n default:\n return this._renderInfoIcon();\n }\n }\n\n /** @internal */\n private _renderCloseIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>`;\n }\n\n // ─── Slot Change Handling ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasSlottedContent = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleDismiss(): void {\n this.dispatchEvent(\n new CustomEvent<void>('hx-dismiss', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal */\n private _handleAcknowledge(): void {\n this._acknowledged = true;\n this.dispatchEvent(\n new CustomEvent<{ severity: ClinicalSeverity; persistent: boolean }>('hx-acknowledge', {\n bubbles: true,\n composed: true,\n detail: {\n severity: this.severity,\n persistent: this._effectivePersistent,\n },\n }),\n );\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n 'clinical-status': true,\n [`clinical-status--${this.severity}`]: true,\n 'clinical-status--compact': this.compact,\n };\n\n const severityLabel = this._severityLabel();\n const messageId = `${this._componentId}-message`;\n\n return html`\n <div part=\"container\" class=${classMap(classes)} aria-labelledby=${messageId}>\n <span class=\"clinical-status__severity-label\">${severityLabel}</span>\n\n <div part=\"icon\" class=\"clinical-status__icon\">\n ${this.icon\n ? html`<span class=\"clinical-status__custom-icon\">${this.icon}</span>`\n : this._renderDefaultIcon()}\n </div>\n\n <div id=${messageId} part=\"message\" class=\"clinical-status__message\">\n ${this.message}\n ${this._hasSlottedContent\n ? html`<div class=\"clinical-status__slot-content\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>`\n : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n </div>\n\n <div\n part=\"actions\"\n class=${classMap({\n 'clinical-status__actions': true,\n 'clinical-status__actions--visible': this.dismissible || this._requiresAcknowledgment,\n })}\n >\n ${this._requiresAcknowledgment && !this._acknowledged\n ? html`\n <button\n part=\"acknowledge-button\"\n class=\"clinical-status__acknowledge-button\"\n @click=${this._handleAcknowledge}\n >\n Acknowledge\n </button>\n `\n : nothing}\n ${this.dismissible\n ? html`\n <button\n part=\"dismiss-button\"\n class=\"clinical-status__dismiss-button\"\n aria-label=\"Dismiss clinical status\"\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-clinical-status': HelixClinicalStatus;\n }\n}\n\n/** Canonical type alias for the hx-clinical-status component. */\nexport type HxClinicalStatus = HelixClinicalStatus;\n"],"names":["helixClinicalStatusStyles","css","nextId","createIdCounter","HelixClinicalStatus","HelixElement","name","_old","value","changedProperties","html","e","slot","classes","severityLabel","messageId","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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"}