npm - @helixui/library - Versions diffs - 3.2.0 → 3.3.0-next.112 - Mend

@helixui/library 3.2.0 → 3.3.0-next.112

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

package/dist/shared/hx-theme-BiyQ7UUK.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-theme-BiyQ7UUK.js","sources":["../../src/components/hx-theme/hx-theme.styles.ts","../../src/utils/token-merger.ts","../../src/components/hx-theme/hx-theme.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixThemeStyles = css`\n :host {\n display: contents;\n }\n\n /* display: contents makes this wrapper layout-invisible; exposed as [part=\"base\"]\n for consumer targeting via CSS parts without affecting layout */\n .theme-base {\n display: contents;\n }\n\n /* Visually hidden but accessible to screen readers — used for aria-live announcements */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n /* hx-theme is a transparent wrapper that applies design tokens.\n It has no visual output of its own. forced-color-adjust: auto (default)\n is sufficient — theme tokens will resolve to system colors as needed. */\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\n }\n`;\n","import type { BrandTokenMap } from '@helixui/tokens';\n\n/**\n * Merges brand token overrides on top of a base theme CSS string.\n *\n * Brand tokens are appended as a `:host` block after the base theme CSS,\n * which gives them higher cascade precedence within the adopted stylesheet.\n * This preserves all primitive and semantic tokens from the base theme while\n * allowing brand-specific values to override selectively.\n *\n * @param baseCSS - The base theme CSS string (from `_buildThemeCss`).\n * @param brandTokens - CSS custom property overrides for the active brand.\n * @returns Combined CSS string with brand overrides applied after the base theme.\n *\n * @example\n * ```ts\n * const merged = mergeBrandTokens(lightCSS, {\n * '--hx-color-primary-500': '#003DA5',\n * '--hx-color-primary-600': '#002D8A',\n * });\n * // merged === lightCSS + \"\\n\\n:host {\\n --hx-color-primary-500: #003DA5;\\n ...}\\n\"\n * ```\n */\nexport function mergeBrandTokens(baseCSS: string, brandTokens: BrandTokenMap): string {\n if (Object.keys(brandTokens).length === 0) {\n return baseCSS;\n }\n\n const brandOverrides = Object.entries(brandTokens)\n .map(([name, value]) => ` ${name}: ${value};`)\n .join('\\n');\n\n return `${baseCSS}\\n\\n/* Brand token overrides */\\n:host {\\n${brandOverrides}\\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 { tokenEntries, darkTokenEntries, HelixBrandRegistry } from '@helixui/tokens';\nimport { helixThemeStyles } from './hx-theme.styles.js';\nimport { mergeBrandTokens } from '../../utils/token-merger.js';\n\nexport type { TokenDefinition, TokenEntry } from '@helixui/tokens';\n\n/**\n * Controls the spacing density for all descendant `hx-*` components.\n * - `\"comfortable\"` (default): Standard spacing tokens.\n * - `\"compact\"`: Reduces `--hx-space-*` tokens ~25%. For data-dense clinical dashboards.\n * - `\"spacious\"`: Increases `--hx-space-*` tokens ~25%. For touch-optimized bedside tablets.\n */\nexport type DensityMode = 'comfortable' | 'compact' | 'spacious';\n\n/**\n * Controls the motion behavior applied to all descendant `hx-*` components.\n * - `\"full\"` (default): Full animations. Respects OS `prefers-reduced-motion`.\n * - `\"reduced\"`: Collapses all animation durations to 0ms and easings to linear.\n * - `\"none\"`: Same as `\"reduced\"` — all motion tokens resolve to instant/linear.\n */\nexport type MotionMode = 'full' | 'reduced' | 'none';\n\n/**\n * Supported theme names.\n *\n * Three-tier token cascade applied by this component:\n * - **Primitive tier** (`--hx-color-primary-500`, `--hx-space-4`, etc.) — raw values, always injected\n * - **Semantic tier** (`--hx-color-text-primary`, `--hx-color-surface-default`, etc.) — theme-sensitive,\n * override primitives for dark / high-contrast themes\n * - **Component tier** (`--hx-button-bg`, `--hx-card-padding`, etc.) — set by individual components,\n * consumed via semantic fallbacks; not managed by `hx-theme` directly\n *\n * Consumers should override at the semantic tier to respect theme scoping.\n */\nexport type ThemeName = 'light' | 'dark' | 'high-contrast' | 'auto';\n\n/**\n * High-contrast token overrides. Targets WCAG 7:1+ contrast ratios for low-vision users.\n * These are injected on top of the light primitives when theme=\"high-contrast\".\n * Values here mirror the `high-contrast` section of tokens.json; kept in sync manually\n * until HC tokens are promoted to the published @helixui/tokens package.\n */\nconst _hcOverrides: Array<[string, string]> = [\n ['--hx-color-text-primary', '#FFFFFF'],\n ['--hx-color-text-secondary', '#FFFFFF'],\n ['--hx-color-text-muted', '#E0E0E0'],\n ['--hx-color-text-strong', '#FFFFFF'],\n ['--hx-color-text-placeholder', '#B0B0B0'],\n ['--hx-color-text-disabled', '#767676'],\n ['--hx-color-text-inverse', '#000000'],\n ['--hx-color-text-on-primary', '#000000'],\n ['--hx-color-text-on-secondary', '#000000'],\n ['--hx-color-text-on-error', '#000000'],\n ['--hx-color-text-on-success', '#000000'],\n ['--hx-color-text-on-warning', '#000000'],\n ['--hx-color-text-on-info', '#000000'],\n ['--hx-color-error-text', '#FCA5A5'],\n ['--hx-color-success-text', '#86EFAC'],\n ['--hx-color-text-link', '#FFFF00'],\n ['--hx-color-text-link-hover', '#FFFF99'],\n ['--hx-color-text-link-visited', '#FF80FF'],\n ['--hx-color-text-link-active', '#FFFFFF'],\n ['--hx-color-surface-default', '#000000'],\n ['--hx-color-surface-raised', '#1A1A1A'],\n ['--hx-color-surface-sunken', '#000000'],\n ['--hx-color-surface-inverse', '#FFFFFF'],\n ['--hx-color-surface-overlay', 'rgba(0, 0, 0, 0.95)'],\n ['--hx-color-border-default', '#FFFFFF'],\n ['--hx-color-border-subtle', '#C0C0C0'],\n ['--hx-color-border-strong', '#FFFFFF'],\n ['--hx-color-border-focus', '#FFFF00'],\n ['--hx-color-focus-ring', '#FFFF00'],\n ['--hx-color-selection-bg', '#1AEBFF'],\n ['--hx-color-selection-color', '#000000'],\n ['--hx-body-bg', '#000000'],\n ['--hx-body-color', '#FFFFFF'],\n ['--hx-shadow-sm', '0 1px 2px 0 rgb(255 255 255 / 0.2)'],\n [\n '--hx-shadow-md',\n '0 4px 6px -1px rgb(255 255 255 / 0.3), 0 2px 4px -2px rgb(255 255 255 / 0.2)',\n ],\n [\n '--hx-shadow-lg',\n '0 10px 15px -3px rgb(255 255 255 / 0.3), 0 4px 6px -4px rgb(255 255 255 / 0.2)',\n ],\n [\n '--hx-shadow-xl',\n '0 20px 25px -5px rgb(255 255 255 / 0.3), 0 8px 10px -6px rgb(255 255 255 / 0.2)',\n ],\n ['--hx-shadow-2xl', '0 25px 50px -12px rgb(255 255 255 / 0.4)'],\n];\n\n/**\n * Compact density overrides: ~75% of original --hx-space-* values.\n * Fixed tokens (--hx-space-0 and --hx-space-px) are intentionally omitted — they stay fixed.\n * Component height tokens are reduced one step to match the tighter spacing.\n */\nconst _compactDensityOverrides: Array<[string, string]> = [\n ['--hx-space-1', '0.1875rem'],\n ['--hx-space-2', '0.375rem'],\n ['--hx-space-3', '0.5625rem'],\n ['--hx-space-4', '0.75rem'],\n ['--hx-space-5', '0.9375rem'],\n ['--hx-space-6', '1.125rem'],\n ['--hx-space-7', '1.3125rem'],\n ['--hx-space-8', '1.5rem'],\n ['--hx-space-10', '1.875rem'],\n ['--hx-space-12', '2.25rem'],\n ['--hx-space-14', '2.625rem'],\n ['--hx-space-16', '3rem'],\n ['--hx-space-20', '3.75rem'],\n ['--hx-space-24', '4.5rem'],\n ['--hx-space-32', '6rem'],\n ['--hx-space-40', '7.5rem'],\n ['--hx-space-48', '9rem'],\n ['--hx-space-64', '12rem'],\n // Component heights — one step smaller\n ['--hx-input-height-sm', '1.75rem'],\n ['--hx-input-height-md', '2rem'],\n ['--hx-input-height-lg', '2.25rem'],\n];\n\n/**\n * Spacious density overrides: ~125% of original --hx-space-* values.\n * Fixed tokens (--hx-space-0 and --hx-space-px) are intentionally omitted — they stay fixed.\n * Component height tokens are increased one step to match the looser spacing.\n */\nconst _spaciousDensityOverrides: Array<[string, string]> = [\n ['--hx-space-1', '0.3125rem'],\n ['--hx-space-2', '0.625rem'],\n ['--hx-space-3', '0.9375rem'],\n ['--hx-space-4', '1.25rem'],\n ['--hx-space-5', '1.5625rem'],\n ['--hx-space-6', '1.875rem'],\n ['--hx-space-7', '2.1875rem'],\n ['--hx-space-8', '2.5rem'],\n ['--hx-space-10', '3.125rem'],\n ['--hx-space-12', '3.75rem'],\n ['--hx-space-14', '4.375rem'],\n ['--hx-space-16', '5rem'],\n ['--hx-space-20', '6.25rem'],\n ['--hx-space-24', '7.5rem'],\n ['--hx-space-32', '10rem'],\n ['--hx-space-40', '12.5rem'],\n ['--hx-space-48', '15rem'],\n ['--hx-space-64', '20rem'],\n // Component heights — one step larger\n ['--hx-input-height-sm', '2.25rem'],\n ['--hx-input-height-md', '2.75rem'],\n ['--hx-input-height-lg', '3.5rem'],\n];\n\n/**\n * Motion token overrides applied when reduced or no motion is requested.\n * All durations collapse to 0ms and all easings become linear so that\n * every animated component goes instantaneous without modifying its own CSS.\n */\nconst _reducedMotionOverrides: Array<[string, string]> = [\n ['--hx-duration-fast', '0ms'],\n ['--hx-duration-normal', '0ms'],\n ['--hx-duration-slow', '0ms'],\n ['--hx-duration-slower', '0ms'],\n ['--hx-duration-spinner', '0ms'],\n ['--hx-transition-fast', '0ms linear'],\n ['--hx-transition-normal', '0ms linear'],\n ['--hx-transition-slow', '0ms linear'],\n ['--hx-easing-default', 'linear'],\n ['--hx-easing-in', 'linear'],\n ['--hx-easing-out', 'linear'],\n ['--hx-easing-in-out', 'linear'],\n ['--hx-easing-decelerate', 'linear'],\n ['--hx-easing-accelerate', 'linear'],\n ['--hx-easing-spring', 'linear'],\n];\n\nfunction _buildProps(entries: Iterable<[string, string]>): string {\n return Array.from(entries)\n .map(([name, value]) => ` ${name}: ${value};`)\n .join('\\n');\n}\n\n/** Module-level CSS cache: one string per ThemeName — avoids re-building on every theme change */\nconst _cssCache = new Map<ThemeName, string>();\n\nfunction _buildThemeCss(theme: ThemeName): string {\n const cached = _cssCache.get(theme);\n if (cached) return cached;\n\n // Build light token base map from the @helixui/tokens package\n const lightMap = new Map(tokenEntries.map((t) => [t.name, t.value]));\n\n let css: string;\n if (theme === 'dark') {\n // Apply dark semantic overrides on top of light primitives\n const merged = new Map(lightMap);\n for (const t of darkTokenEntries) {\n merged.set(t.name, t.value);\n }\n css = `:host {\\n${_buildProps(merged)}\\n color-scheme: dark;\\n}`;\n } else if (theme === 'high-contrast') {\n // Apply HC overrides on top of light primitives — distinct WCAG 7:1+ token set\n const merged = new Map(lightMap);\n for (const [name, value] of _hcOverrides) {\n merged.set(name, value);\n }\n css = `:host {\\n${_buildProps(merged)}\\n color-scheme: dark;\\n}`;\n } else {\n // 'light' — 'auto' resolves to 'light' or 'dark' at runtime via effectiveTheme\n css = `:host {\\n${_buildProps(lightMap)}\\n color-scheme: light;\\n}`;\n }\n\n _cssCache.set(theme, css);\n return css;\n}\n\n/**\n * A theme provider that injects CSS custom property tokens for a named theme\n * onto a scoped root element. Wrapping content with this component scopes\n * all `--hx-*` design tokens to the selected theme.\n *\n * This is a pure infrastructure component with `display: contents` — it does\n * not affect layout. Use it to apply a theme to a subtree of components.\n *\n * Supported themes:\n * - `\"light\"` — standard light-mode token set (default)\n * - `\"dark\"` — dark-mode semantic overrides applied on top of light primitives\n * - `\"high-contrast\"` — WCAG 7:1+ contrast token set for low-vision accessibility\n * - `\"auto\"` — follows the OS `prefers-color-scheme` media query (light or dark)\n *\n * @summary Injects --hx-* design tokens for the specified theme scope and controls motion behavior.\n *\n * @tag hx-theme\n *\n * @slot - Default slot for themed content.\n *\n * @csspart base - The inner slot wrapper element. `display: contents` — no layout effect.\n *\n * @cssprop [--hx-*] - All design tokens for the selected theme are injected\n * as CSS custom properties on the host element.\n *\n * @example Drupal Twig — wrap a region with a dark theme:\n * ```twig\n * <hx-theme theme=\"dark\">\n * {{ content }}\n * </hx-theme>\n * ```\n *\n * @example Nested scoping — dark sidebar inside a light page:\n * ```html\n * <hx-theme theme=\"light\">\n * <main>...</main>\n * <hx-theme theme=\"dark\">\n * <aside>...</aside>\n * </hx-theme>\n * </hx-theme>\n * ```\n *\n * @example Compact density for clinical dashboards:\n * ```html\n * <hx-theme theme=\"dark\" density=\"compact\">\n * \n * </hx-theme>\n * ```\n * @cssprop [--hx-color-text-primary] - Color.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-duration-fast] - Animation duration.\n */\n@customElement('hx-theme')\nexport class HelixTheme extends HelixElement {\n static override styles = [helixThemeStyles];\n\n /**\n * The theme to apply. Determines which set of --hx-* tokens are injected.\n * - `\"light\"` (default): standard light-mode tokens\n * - `\"dark\"`: dark-mode semantic overrides applied on top of light primitives\n * - `\"high-contrast\"`: WCAG 7:1+ contrast tokens for low-vision users\n * - `\"auto\"`: follows OS `prefers-color-scheme`; resolves to `\"light\"` or `\"dark\"` at runtime\n * @attr theme\n */\n @property({ type: String, reflect: true })\n theme: 'light' | 'dark' | 'high-contrast' | 'auto' = 'light';\n\n // The deprecated `system` boolean property has been removed in 3.0.0.\n // Use `theme=\"auto\"` instead.\n\n /**\n * The registered brand name to apply on top of the base theme.\n * When set, brand-specific CSS custom property overrides are merged\n * after the base theme tokens in the adopted stylesheet, enabling\n * hospital system white-label implementations.\n *\n * The brand must first be registered via `HelixBrandRegistry.register()`.\n * If the brand name is non-empty but not registered, a warning is logged\n * and the base theme is applied without brand overrides.\n *\n * @attr brand\n * @example\n * ```html\n * <hx-theme theme=\"light\" brand=\"mercy-health\">\n * \n * </hx-theme>\n * ```\n */\n @property({ type: String, reflect: true })\n brand = '';\n\n /**\n * Controls motion behavior for all descendant `hx-*` components.\n * - `\"full\"` (default): Full animations. Respects OS `prefers-reduced-motion`.\n * - `\"reduced\"`: Collapses all animation durations to 0ms and easings to linear.\n * Use this for devices where OS accessibility settings cannot be relied on\n * (e.g. healthcare bedside terminals).\n * - `\"none\"`: Same as `\"reduced\"` — all motion tokens resolve to instant/linear.\n *\n * When `motion=\"full\"` and the OS reports `prefers-reduced-motion: reduce`,\n * the same token overrides are applied automatically.\n * @attr motion\n */\n @property({ type: String, reflect: true })\n motion: MotionMode = 'full';\n\n /**\n * Controls the spacing density for all descendant `hx-*` components.\n * - `\"comfortable\"` (default): Standard spacing tokens.\n * - `\"compact\"`: Reduces `--hx-space-*` tokens ~25%. For data-dense clinical dashboards.\n * - `\"spacious\"`: Increases `--hx-space-*` tokens ~25%. For touch-optimized bedside tablets.\n * @attr density\n */\n @property({ type: String, reflect: true })\n density: DensityMode = 'comfortable';\n\n /** @internal */\n private _mediaQuery: MediaQueryList | null = null;\n /** @internal */\n private _mediaHandler: (() => void) | null = null;\n /** @internal */\n private _themeSheet: CSSStyleSheet | null = null;\n /** @internal */\n private _densitySheet: CSSStyleSheet | null = null;\n /** @internal — media query for OS prefers-reduced-motion */\n private _motionQuery: MediaQueryList | null = null;\n /** @internal */\n private _motionHandler: (() => void) | null = null;\n\n override firstUpdated(changed: PropertyValues<this>): void {\n super.firstUpdated(changed);\n this._initThemeSheet();\n if (this.theme === 'auto') {\n this._attachMediaQuery();\n }\n if (this.motion === 'full') {\n this._attachMotionQuery();\n }\n }\n\n override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n const autoMode = this.theme === 'auto';\n if (changed.has('theme')) {\n if (autoMode) {\n this._attachMediaQuery();\n } else {\n this._detachMediaQuery();\n }\n this._applyEffectiveTheme();\n }\n if (changed.has('motion')) {\n if (this.motion === 'full') {\n this._attachMotionQuery();\n } else {\n this._detachMotionQuery();\n }\n this._applyEffectiveTheme();\n }\n if (changed.has('brand')) {\n this._applyEffectiveTheme();\n }\n if (changed.has('density')) {\n this._applyDensity();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._detachMediaQuery();\n this._detachMotionQuery();\n }\n\n /**\n * Returns the currently active theme name.\n * When `system=true` or `theme=\"auto\"`, reflects the OS preference (`\"light\"` or `\"dark\"`).\n * Otherwise returns the `theme` property value.\n */\n get effectiveTheme(): 'light' | 'dark' | 'high-contrast' | 'auto' {\n if (this.theme === 'auto') {\n if (typeof window === 'undefined') return 'light';\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n return this.theme;\n }\n\n /**\n * Returns the resolved motion level after considering the `motion` attribute and OS preference.\n * When `motion=\"full\"` and the OS reports `prefers-reduced-motion: reduce`, returns `\"reduced\"`.\n * Otherwise returns `\"full\"` or `\"reduced\"` based on the `motion` attribute.\n */\n get effectiveMotion(): 'full' | 'reduced' {\n if (this.motion === 'reduced' || this.motion === 'none') return 'reduced';\n if (\n typeof window !== 'undefined' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n ) {\n return 'reduced';\n }\n return 'full';\n }\n\n /** @internal */\n private _initThemeSheet(): void {\n if (this.shadowRoot) {\n this._themeSheet = new CSSStyleSheet();\n this._densitySheet = new CSSStyleSheet();\n this.shadowRoot.adoptedStyleSheets = [\n ...this.shadowRoot.adoptedStyleSheets,\n this._themeSheet,\n this._densitySheet,\n ];\n this._applyEffectiveTheme();\n this._applyDensity();\n }\n }\n\n /** @internal */\n private _attachMediaQuery(): void {\n if (this._mediaQuery || typeof window === 'undefined') return;\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._mediaHandler = () => {\n this._applyEffectiveTheme();\n this._announceThemeChange();\n };\n this._mediaQuery.addEventListener('change', this._mediaHandler);\n }\n\n /** @internal */\n private _detachMediaQuery(): void {\n if (this._mediaQuery && this._mediaHandler) {\n this._mediaQuery.removeEventListener('change', this._mediaHandler);\n }\n this._mediaQuery = null;\n this._mediaHandler = null;\n }\n\n /** @internal — attach OS prefers-reduced-motion listener when motion=\"full\" */\n private _attachMotionQuery(): void {\n if (this._motionQuery || typeof window === 'undefined') return;\n this._motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._motionHandler = () => {\n this._applyEffectiveTheme();\n };\n this._motionQuery.addEventListener('change', this._motionHandler);\n }\n\n /** @internal */\n private _detachMotionQuery(): void {\n if (this._motionQuery && this._motionHandler) {\n this._motionQuery.removeEventListener('change', this._motionHandler);\n }\n this._motionQuery = null;\n this._motionHandler = null;\n }\n\n /** @internal — notifies AT users when system theme changes programmatically */\n private _announceThemeChange(): void {\n const announcer = this.shadowRoot?.querySelector('[role=\"status\"]');\n if (announcer) {\n announcer.textContent = `Theme changed to ${this.effectiveTheme}`;\n }\n }\n\n /** @internal */\n private _applyEffectiveTheme(): void {\n if (!this._themeSheet) return;\n\n let css = _buildThemeCss(this.effectiveTheme);\n\n if (this.brand !== '') {\n const brandTokens = HelixBrandRegistry.getBrandTokens(this.brand);\n if (brandTokens !== undefined) {\n css = mergeBrandTokens(css, brandTokens);\n } else {\n console.warn(\n `[hx-theme] Brand \"${this.brand}\" is not registered. ` +\n `Register it via HelixBrandRegistry.register() before use. ` +\n `Applying base theme only.`,\n );\n }\n }\n\n if (this.effectiveMotion === 'reduced') {\n css += `\\n:host {\\n${_buildProps(_reducedMotionOverrides)}\\n}`;\n }\n\n void this._themeSheet.replace(css);\n }\n\n /** @internal */\n private _applyDensity(): void {\n if (!this._densitySheet) return;\n\n let css = '';\n if (this.density === 'compact') {\n css = `:host {\\n${_buildProps(_compactDensityOverrides)}\\n}`;\n } else if (this.density === 'spacious') {\n css = `:host {\\n${_buildProps(_spaciousDensityOverrides)}\\n}`;\n }\n // comfortable = no overrides needed (defaults from theme sheet)\n\n void this._densitySheet.replace(css);\n }\n\n override render() {\n return html`\n <div part=\"base\" class=\"theme-base\">\n <slot></slot>\n </div>\n <span role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"visually-hidden\"></span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-theme': HelixTheme;\n }\n}\n\n/** Canonical type alias for HelixTheme. Use this when typing hx-theme element references. */\nexport type HxTheme = HelixTheme;\n"],"names":["helixThemeStyles","css","mergeBrandTokens","baseCSS","brandTokens","brandOverrides","name","value","_hcOverrides","_compactDensityOverrides","_spaciousDensityOverrides","_reducedMotionOverrides","_buildProps","entries","_cssCache","_buildThemeCss","theme","cached","lightMap","tokenEntries","t","merged","darkTokenEntries","HelixTheme","HelixElement","changed","autoMode","announcer","_a","HelixBrandRegistry","html","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1 +0,0 @@

- {"version":3,"file":"hx-toggle-button-Dd8clXB4.js","sources":["../../src/components/hx-toggle-button/hx-toggle-button.styles.ts","../../src/components/hx-toggle-button/hx-toggle-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToggleButtonStyles = 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 /* ─── 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-toggle-button-border-color, transparent);\n border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));\n color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));\n font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-toggle-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(\n --hx-toggle-button-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))\n );\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-toggle-button-bg: var(--hx-color-primary-500, #429797);\n --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);\n --hx-toggle-button-border-color: transparent;\n }\n\n /*\n * secondary/ghost paint primary text on the surface (white). primary-500\n * (#429797) on white = 3.43:1 — fails AA at body sizes. shift to\n * primary-600 (#0F7078) = 6.06:1 — AA pass. border keeps primary-500\n * for the brand affordance (3:1 non-text contrast still met).\n */\n .button--secondary {\n --hx-toggle-button-bg: transparent;\n --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);\n --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);\n }\n\n .button--secondary:hover {\n --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);\n }\n\n .button--tertiary {\n --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-toggle-button-border-color: transparent;\n }\n\n .button--tertiary:hover {\n --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n }\n\n .button--ghost {\n --hx-toggle-button-bg: transparent;\n --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);\n --hx-toggle-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n }\n\n .button--outline {\n --hx-toggle-button-bg: transparent;\n --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);\n }\n\n .button--outline:hover {\n --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n }\n\n /* ─── Pressed State ─── */\n\n /*\n * Primary: already uses solid primary bg; pressed deepens to primary-700\n * to give clear visual feedback without introducing a new color.\n *\n * AA fix: text.on-primary (= neutral-900 #0D1825) on primary-700 (#0F6363)\n * = 2.54:1 — fails AA. Pin fg at neutral-0 for the darker pressed fill\n * (neutral-0 on primary-700 = 7.03:1, AAA pass). Mirrors hx-toast\n * precedent (commit 300e21ab0) and hx-button hover treatment.\n * Note: secondary.pressed below uses primary-500 and stays at 5.20:1 —\n * leave it alone.\n */\n .button--primary.button--pressed {\n --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #0f6363));\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-neutral-0, #ffffff)\n );\n --hx-toggle-button-border-color: transparent;\n }\n\n /*\n * Secondary: unpressed is outlined/transparent; pressed fills with primary bg\n * so the state change is immediately legible.\n */\n .button--secondary.button--pressed {\n --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-text-on-primary, #ffffff)\n );\n --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);\n }\n\n /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */\n .button--tertiary.button--pressed {\n --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-primary-700, #0f6363)\n );\n --hx-toggle-button-border-color: var(--hx-color-primary-400, #6ab1b1);\n box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #6ab1b1);\n }\n\n /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */\n .button--ghost.button--pressed {\n --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-primary-700, #0f6363)\n );\n --hx-toggle-button-border-color: transparent;\n }\n\n /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */\n .button--outline.button--pressed {\n --hx-toggle-button-bg: var(\n --hx-toggle-button-pressed-bg,\n var(--hx-color-surface-sunken, #ebeee9)\n );\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-text-primary, #0d1825)\n );\n --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);\n box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);\n }\n\n /* ─── Disabled ─── */\n\n .button[disabled] {\n cursor: not-allowed;\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 /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .button {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .button:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .button--pressed {\n background-color: Highlight;\n color: HighlightText;\n border-color: Highlight;\n box-shadow: none;\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`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixToggleButtonStyles } from './hx-toggle-button.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\n\n/** Detail for the hx-toggle event dispatched by hx-toggle-button. */\nexport interface HxToggleDetail {\n pressed: boolean;\n}\n\n/**\n * A two-state toggle button that communicates a pressed/unpressed status to\n * assistive technology via `aria-pressed`. Supports multiple visual variants\n * and sizes, prefix/suffix slots, full ElementInternals form association, and\n * a distinct pressed visual state for every variant.\n *\n * @summary Two-state toggle button with pressed/unpressed ARIA semantics.\n *\n * @tag hx-toggle-button\n *\n * @slot - Default slot for the 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<{pressed: boolean}>} hx-toggle - Dispatched when the\n * toggle state changes. Not dispatched when the button is disabled.\n *\n * @csspart button - The native `<button>` 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 *\n * @cssprop [--hx-toggle-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-toggle-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-toggle-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-toggle-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-toggle-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-toggle-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-toggle-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-toggle-button-pressed-bg=var(--hx-color-primary-500)] - Background when pressed (variant-specific fallback applies).\n * @cssprop [--hx-toggle-button-pressed-color=var(--hx-color-neutral-0)] - Text color when pressed (variant-specific fallback applies).\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-transition-fast] - Transition timing.\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-filter-brightness-hover] - CSS filter.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n */\n@customElement('hx-toggle-button')\nexport class HelixToggleButton extends HelixElement {\n static override styles = [helixToggleButtonStyles, forcedColorsInteractive];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n /** @internal */\n @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n\n // ─── Public Properties ───\n\n /**\n * Whether the toggle button is in the pressed state.\n * Reflected as an attribute so CSS selectors like `:host([pressed])` work.\n * @attr pressed\n */\n @property({ type: Boolean, reflect: true })\n pressed = false;\n\n /**\n * Visual style variant of the button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' = 'secondary';\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 * Form field name submitted via ElementInternals when the button is pressed.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Form field value submitted via ElementInternals when the button is pressed.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * Accessible label forwarded to the inner `<button>` as `aria-label`.\n * Required for icon-only toggle buttons where no visible text is present.\n * @attr label\n */\n @property({ type: String })\n label: string | undefined = undefined;\n\n /**\n * When true, the button must be in the pressed state for the form to be submitted.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n // ─── Form API ───\n\n /** Returns the ValidityState object. */\n override get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Returns the current validation message. */\n override get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Checks whether the button satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n // ─── Lifecycle ───\n\n override firstUpdated(changedProperties: PropertyValues<this>): void {\n super.firstUpdated(changedProperties);\n\n if (!this.label) {\n const slot = this._defaultSlot;\n const hasSlotText = slot\n ? slot.assignedNodes({ flatten: true }).some((n) => n.textContent?.trim())\n : false;\n if (!hasSlotText) {\n console.warn(\n '[hx-toggle-button] No accessible label found. Set the `label` attribute or provide slot text content for WCAG 4.1.2 compliance.',\n );\n }\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (\n changedProperties.has('pressed') ||\n changedProperties.has('value') ||\n changedProperties.has('required')\n ) {\n this._syncFormValue();\n }\n }\n\n protected override _onFormReset(): void {\n this.pressed = false;\n }\n\n protected override _onFormStateRestore(\n state: string | File | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n this.pressed = typeof state === 'string' && state === 'pressed';\n }\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Private Helpers ───\n\n /** @internal */\n private _syncFormValue(): void {\n if (this.pressed && this.value !== undefined) {\n // Pass explicit state 'pressed' so formStateRestoreCallback can reliably detect it.\n this._internals.setFormValue(this.value, 'pressed');\n } else {\n this._internals.setFormValue(null);\n }\n this._updateValidity();\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && !this.pressed) {\n this._internals.setValidity(\n { valueMissing: true },\n 'Please activate this toggle button.',\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"button\"]') ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this.pressed = !this.pressed;\n this._syncFormValue();\n\n /**\n * Dispatched when the toggle state changes.\n * @event hx-toggle\n */\n this.dispatchEvent(\n new CustomEvent<{ pressed: boolean }>('hx-toggle', {\n bubbles: true,\n composed: true,\n detail: { pressed: this.pressed },\n }),\n );\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderInner() {\n return html`\n <span part=\"prefix\" class=\"button__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot></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--pressed': this.pressed,\n };\n\n return html`\n <button\n part=\"button\"\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n type=\"button\"\n aria-pressed=${this.pressed ? 'true' : 'false'}\n aria-label=${this.label ?? nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-toggle-button': HelixToggleButton;\n }\n}\n"],"names":["helixToggleButtonStyles","css","HelixToggleButton","HelixElement","changedProperties","slot","_a","state","_mode","disabled","e","html","classes","classMap","nothing","forcedColorsInteractive","__decorateClass","query","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAA0BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/hx-top-nav-CchPYaiV.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-top-nav-CchPYaiV.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(\n --hx-top-nav-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 .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":";;;;;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;;;;;;AC6D1B,IAAMC,IAAN,cAA0BC,EAAa;AAAA,EA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"}

package/dist/shared/hx-tree-item-DtMC3DTa.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"hx-tree-item-DtMC3DTa.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-400, #6ab1b1));\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(\n --hx-tree-item-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 /* ─── 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(\n --hx-tree-item-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 .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":"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"}

package/dist/shared/toast-factory-DvDRAh0l.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"toast-factory-DvDRAh0l.js","sources":["../../src/components/hx-toast/hx-toast.styles.ts","../../src/components/hx-toast/hx-toast.ts","../../src/components/hx-toast/hx-toast-stack.ts","../../src/components/hx-toast/toast-factory.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-toast styles.\n *\n * Component-tier tokens with two-level var() fallback:\n * var(--hx-toast-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n * neutral-0 = #FFFFFF, neutral-900 = #0D1825 (surface-inverse anchor),\n * primary-600 = #0F7078, success-600 = #0E8A4A, warning-500 = #C2711C,\n * error-600 = #C92A2A.\n */\nexport const helixToastStyles = css`\n /* ─── hx-toast host ─── */\n\n :host {\n display: block;\n pointer-events: none;\n }\n\n :host([open]) {\n pointer-events: auto;\n }\n\n /* ─── Toast base ─── */\n\n .toast {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-toast-bg, var(--hx-color-surface-inverse, #0d1825));\n color: var(--hx-toast-color, var(--hx-color-text-inverse, #ffffff));\n font-family: var(--hx-toast-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 box-shadow: var(\n --hx-toast-shadow,\n var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))\n );\n opacity: 0;\n transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));\n transition:\n opacity var(--hx-transition-normal, 250ms ease),\n transform var(--hx-transition-normal, 250ms ease);\n width: var(--hx-toast-width, 20rem);\n max-width: 100%;\n pointer-events: auto;\n }\n\n :host([open]) .toast {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ─── Variant overrides ─── */\n\n /*\n * Toast variants paint on darker brand fills (primary-600/success-700/\n * error-600) because the lighter -500 fills can't pass AA against white\n * text in the precision-cool palette. The neutral-900 on-{role} tokens\n * are tuned for the lighter -500 surfaces and would fail here (e.g.\n * neutral-900 on primary-600 = 3.07:1), so we hold fg at neutral-0\n * directly for primary/success/danger.\n * - neutral-0 on primary-600 (#0F7078) = 5.39:1 — AA pass\n * - neutral-0 on success-700 (#146831) = 6.88:1 — AA pass\n * (success-600 #0E8A4A on white = 4.41:1 — drifts under AA at 14px)\n * - neutral-0 on error-600 (#C92A2A) = 5.92:1 — AA pass\n * - neutral-900 on warning-500 (#C2711C) = 4.83:1 — AA pass\n * (warning stays on the lighter -500 surface so on-warning works)\n */\n .toast--success {\n --hx-toast-bg: var(--hx-color-success-700, #146831);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n .toast--warning {\n --hx-toast-bg: var(--hx-color-warning-500, #c2711c);\n --hx-toast-color: var(--hx-color-text-on-warning, #0d1825);\n }\n\n .toast--danger {\n --hx-toast-bg: var(--hx-color-error-600, #c92a2a);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n .toast--info {\n --hx-toast-bg: var(--hx-color-primary-600, #0f7078);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* Visually hidden — non-color cue for severity variants (success/warning/danger/info). */\n /* Ensures variant is not conveyed by color alone for color-blind users. */\n\n .toast__severity-label {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Icon ─── */\n\n .toast__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n line-height: 1;\n }\n\n .toast__icon:empty {\n display: none;\n }\n\n /* ─── Message ─── */\n\n .toast__message {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n /* ─── Action slot ─── */\n\n .toast__action {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n }\n\n .toast__action:empty {\n display: none;\n }\n\n /* ─── Close button ─── */\n\n .toast__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* WCAG 2.5.5: minimum 44×44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: var(--hx-space-1, 0.25rem);\n background: transparent;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n color: inherit;\n cursor: pointer;\n opacity: var(--hx-opacity-75, 0.75);\n transition: opacity var(--hx-transition-fast, 150ms ease);\n }\n\n .toast__close:hover {\n opacity: 1;\n }\n\n .toast__close:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid currentColor;\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .toast {\n transition: none;\n }\n\n .toast__close {\n transition: none;\n }\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 .toast {\n border: 1px solid CanvasText;\n }\n\n .toast__close {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n }\n`;\n\nexport const helixToastStackStyles = css`\n :host {\n display: block;\n position: fixed;\n z-index: var(--hx-z-index-toast, 1700);\n pointer-events: none;\n }\n\n .toast-stack {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-space-4, 1rem);\n pointer-events: none;\n }\n\n /* ─── Placements ─── */\n\n :host([placement='top-start']) {\n top: 0;\n inset-inline-start: 0;\n inset-inline-end: auto;\n bottom: auto;\n }\n\n :host([placement='top-center']) {\n top: 0;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n inset-inline-end: auto;\n bottom: auto;\n }\n\n :host([placement='top-end']) {\n top: 0;\n inset-inline-end: 0;\n inset-inline-start: auto;\n bottom: auto;\n }\n\n :host([placement='bottom-start']) {\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: auto;\n top: auto;\n }\n\n :host([placement='bottom-center']) {\n bottom: 0;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n inset-inline-end: auto;\n top: auto;\n }\n\n :host([placement='bottom-end']) {\n bottom: 0;\n inset-inline-end: 0;\n inset-inline-start: auto;\n top: auto;\n }\n\n /* ─── Bottom placements: reverse order so newest is on top ─── */\n\n :host([placement^='bottom']) .toast-stack {\n flex-direction: column-reverse;\n }\n\n /* ─── Slide direction by placement ─── */\n\n :host([placement^='top']) ::slotted(hx-toast) {\n --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixToastStyles } from './hx-toast.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\nexport type ToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * A transient notification message that auto-dismisses after a configurable duration.\n * Supports multiple visual variants, a closable button, icon/action slots, and full\n * ARIA live region semantics for screen readers.\n *\n * @summary Transient notification toast component.\n *\n * @tag hx-toast\n *\n * @slot - Default slot for the notification message.\n * @slot icon - Optional icon rendered before the message.\n * @slot action - Optional action button rendered after the message.\n *\n * @fires {CustomEvent} hx-show - Dispatched when the toast becomes visible.\n * @fires {CustomEvent} hx-hide - Dispatched when the toast begins hiding.\n * @fires {CustomEvent} hx-after-hide - Dispatched after the hide animation completes.\n *\n * @csspart base - The inner toast container div.\n * @csspart icon - The icon slot wrapper.\n * @csspart message - The message slot wrapper.\n * @csspart close-button - The dismiss button (only when closable).\n * @csspart action - The action slot wrapper.\n *\n * @cssprop [--hx-toast-bg=var(--hx-color-neutral-900)] - Toast background color.\n * @cssprop [--hx-toast-color=var(--hx-color-neutral-0)] - Toast text color.\n * @cssprop [--hx-toast-border-radius=var(--hx-border-radius-md)] - Toast border radius.\n * @cssprop [--hx-toast-shadow] - Toast box shadow.\n * @cssprop [--hx-toast-width=20rem] - Toast width.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-toast-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-toast-enter-translate=var(--hx-space-2)] - CSS custom property.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-transition-normal] - Transition timing.\n * @cssprop [--hx-color-success-600] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n */\n@customElement('hx-toast')\nexport class HelixToast extends HelixElement {\n static override styles = [helixToastStyles, forcedColorsSurface];\n\n // ─── Public Properties ───\n\n /**\n * Visual style variant.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'success' | 'warning' | 'danger' | 'info' = 'default';\n\n /**\n * Auto-dismiss duration in milliseconds. Set to 0 for persistent toasts.\n * @attr duration\n */\n @property({ type: Number })\n duration = 5000;\n\n /**\n * Whether to show a close button.\n * @attr closable\n */\n @property({ type: Boolean, reflect: true })\n closable = false;\n\n /**\n * Whether the toast is currently visible.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Accessible label for the close button. Override for localization.\n * @attr label-close\n */\n @property({ attribute: 'label-close' })\n labelClose = 'Dismiss notification';\n\n // ─── Private State ───\n\n /** @internal */\n @query('.toast') private _toastEl!: HTMLElement | null;\n\n /** @internal Tracks whether the action slot has slotted content. */\n @state() private _hasActionContent = false;\n\n /** @internal */\n private _timer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Reduced Motion ───\n\n /** @internal Returns true when the user has opted into reduced motion. */\n private get _reducedMotion(): boolean {\n // Guard for SSR — window.matchMedia is unavailable server-side\n if (typeof window === 'undefined') return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }\n\n /** @internal */\n private _timerStartedAt: number | null = null;\n\n /** @internal */\n private _timerRemaining: number | null = null;\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open) {\n this.removeAttribute('aria-hidden');\n this._emitShow();\n if (this.duration > 0 && !this._reducedMotion && !this._hasActionContent) {\n this._startTimer();\n }\n } else {\n this.setAttribute('aria-hidden', 'true');\n this._clearTimer();\n this._emitHide();\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearTimer();\n }\n\n // ─── Public API ───\n\n /** Show the toast. */\n show(): void {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /** Hide the toast. */\n hide(): void {\n if (this.open) {\n this.open = false;\n }\n }\n\n // ─── Private Helpers ───\n\n /** @internal */\n private _startTimer(remaining?: number): void {\n this._clearTimerHandle();\n const delay = remaining ?? this.duration;\n this._timerStartedAt = Date.now();\n this._timerRemaining = delay;\n this._timer = setTimeout(() => {\n this.open = false;\n }, delay);\n }\n\n /** @internal */\n private _pauseTimer(): void {\n if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null) {\n return;\n }\n const elapsed = Date.now() - this._timerStartedAt;\n this._timerRemaining = Math.max(0, this._timerRemaining - elapsed);\n this._clearTimerHandle();\n }\n\n /** @internal */\n private _clearTimerHandle(): void {\n if (this._timer !== null) {\n clearTimeout(this._timer);\n this._timer = null;\n }\n }\n\n /** @internal */\n private _clearTimer(): void {\n this._clearTimerHandle();\n this._timerStartedAt = null;\n this._timerRemaining = null;\n }\n\n /** @internal */\n private _emitShow(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _emitHide(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n\n let fired = false;\n const fireAfterHide = () => {\n if (fired) return;\n fired = true;\n this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n };\n\n // Fire on transitionend if available; fallback ensures it fires in test environments\n // and when transitions are disabled (prefers-reduced-motion, no CSS transitions).\n const base = this._toastEl;\n if (base) {\n base.addEventListener('transitionend', fireAfterHide, { once: true });\n }\n // Fallback fires after the CSS transition duration (250ms) plus a small buffer.\n setTimeout(fireAfterHide, 300);\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleMouseEnter(): void {\n this._pauseTimer();\n }\n\n /** @internal */\n private _handleMouseLeave(): void {\n if (this.open && this.duration > 0) {\n this._startTimer(this._timerRemaining ?? undefined);\n }\n }\n\n /** @internal */\n private _handleFocusIn(): void {\n this._pauseTimer();\n }\n\n /** @internal */\n private _handleFocusOut(): void {\n if (this.open && this.duration > 0) {\n this._startTimer(this._timerRemaining ?? undefined);\n }\n }\n\n /** @internal */\n private _handleClose(): void {\n this.hide();\n }\n\n /** @internal */\n private _handleActionSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasActionContent = slot.assignedNodes({ flatten: true }).length > 0;\n if (this._hasActionContent && this.open) {\n this._pauseTimer();\n }\n }\n\n // ─── ARIA Helpers ───\n\n /** @internal */\n private get _role(): 'alert' | 'status' {\n return this.variant === 'danger' ? 'alert' : 'status';\n }\n\n /** @internal */\n private get _ariaLive(): 'assertive' | 'polite' {\n return this.variant === 'danger' ? 'assertive' : 'polite';\n }\n\n // ─── WCAG 1.4.1: Default Icons ───\n // Each semantic variant renders a default icon when no icon is slotted,\n // ensuring the severity is not conveyed by color alone.\n\n /** @internal */\n private _renderSuccessIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\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 _renderDangerIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\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 _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\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 Returns the default icon for the current variant, or nothing for 'default'. */\n private get _defaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'danger':\n return this._renderDangerIcon();\n case 'info':\n return this._renderInfoIcon();\n default:\n return nothing;\n }\n }\n\n // ─── WCAG 1.4.1: Severity label map ───\n\n /** @internal */\n private static readonly _SEVERITY_LABELS: Partial<Record<ToastVariant, string>> = {\n success: 'Success',\n warning: 'Warning',\n danger: 'Error',\n info: 'Info',\n };\n\n /** @internal */\n private get _severityLabel(): string {\n return HelixToast._SEVERITY_LABELS[this.variant] ?? '';\n }\n\n // ─── Render ───\n\n override render() {\n const severityLabel = this._severityLabel;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n toast: true,\n [`toast--${this.variant}`]: true,\n })}\n role=${this._role}\n aria-live=${this._ariaLive}\n aria-atomic=\"true\"\n @mouseenter=${this._handleMouseEnter}\n @mouseleave=${this._handleMouseLeave}\n @focusin=${this._handleFocusIn}\n @focusout=${this._handleFocusOut}\n >\n ${this.open\n ? html`\n ${severityLabel\n ? html`<span class=\"toast__severity-label\">${severityLabel}: </span>`\n : nothing}\n <span part=\"icon\" class=\"toast__icon\">\n <slot name=\"icon\">${this._defaultIcon}</slot>\n </span>\n <span part=\"message\" class=\"toast__message\">\n <slot></slot>\n </span>\n <span part=\"action\" class=\"toast__action\">\n <slot name=\"action\" @slotchange=${this._handleActionSlotChange}></slot>\n </span>\n ${this.closable\n ? html`\n <button\n part=\"close-button\"\n class=\"toast__close\"\n aria-label=${this.labelClose}\n @click=${this._handleClose}\n >\n <svg\n aria-hidden=\"true\"\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 >\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n `\n : nothing}\n `\n : nothing}\n </div>\n `;\n }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-toast': HelixToast;\n }\n}\n","import { html } 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 } from '../../base/index.js';\nimport { helixToastStackStyles } from './hx-toast.styles.js';\n\nexport type ToastStackPlacement =\n | 'top-start'\n | 'top-center'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-center'\n | 'bottom-end';\n\n/**\n * A fixed-position container that stacks `hx-toast` elements at the specified\n * corner of the viewport. Enforces a maximum visible toast count via `stack-limit`.\n *\n * @summary Toast stack container managing position and count limits.\n *\n * @tag hx-toast-stack\n *\n * @slot - Accepts `hx-toast` elements.\n *\n * @csspart base - The inner stack container div.\n *\n * @cssprop [--hx-z-index-toast=9000] - Z-index for the fixed stack.\n */\n@customElement('hx-toast-stack')\nexport class HelixToastStack extends HelixElement {\n static override styles = [helixToastStackStyles];\n\n /**\n * Corner of the viewport where toasts appear.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement:\n | 'top-start'\n | 'top-center'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-center'\n | 'bottom-end' = 'bottom-end';\n\n /**\n * Maximum number of simultaneously visible toasts. 0 = unlimited.\n * @attr stack-limit\n */\n @property({ type: Number, attribute: 'stack-limit' })\n stackLimit = 3;\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'toast-stack': true,\n [`toast-stack--${this.placement}`]: true,\n })}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-toast-stack': HelixToastStack;\n }\n}\n","import { HelixToast } from './hx-toast.js';\nimport { HelixToastStack } from './hx-toast-stack.js';\nimport type { ToastVariant } from './hx-toast.js';\nimport type { ToastStackPlacement } from './hx-toast-stack.js';\n\nexport interface ToastOptions {\n /** The notification message text. */\n message: string;\n /** Visual variant. Defaults to 'default'. */\n variant?: ToastVariant;\n /** Auto-dismiss duration in ms. 0 = persistent. Defaults to 3000. */\n duration?: number;\n /** Placement of the shared stack. Defaults to 'bottom-end'. */\n placement?: ToastStackPlacement;\n}\n\n/**\n * Imperatively create and display a toast notification.\n *\n * Creates a shared `hx-toast-stack` on `document.body` if one does not exist,\n * then appends a new `hx-toast` with the given options. Respects the stack's\n * `stackLimit` by hiding the oldest visible toast when the limit is exceeded.\n *\n * @example\n * import { toast } from '@helixui/library/components/hx-toast/index.js';\n * toast({ message: 'Patient record saved.', variant: 'success' });\n */\nexport function toast(options: ToastOptions): HelixToast {\n if (typeof document === 'undefined') throw new Error('toast() requires a browser environment');\n const placement = options.placement ?? 'bottom-end';\n\n // Find or create a dedicated stack for this placement\n const stackSelector = `hx-toast-stack[placement=\"${placement}\"]`;\n let stack = document.querySelector<HelixToastStack>(stackSelector);\n if (!stack) {\n stack = document.createElement('hx-toast-stack');\n stack.placement = placement;\n // Intentional design decision: the toast stack is appended to document.body rather\n // than inserted near the caller. This is required so that the fixed-position overlay\n // is not clipped by an ancestor with `overflow: hidden`, `transform`, or `filter`\n // (all of which create a new stacking context and break fixed positioning).\n // Drupal compatibility note: Drupal's BigPipe / AJAX behaviors can re-attach the\n // document body without removing these stacks. The selector check above\n // (`document.querySelector`) ensures only one stack per placement is ever created,\n // preventing duplicates on re-attach cycles.\n document.body.appendChild(stack);\n }\n\n // Enforce stack limit: hide oldest open toast if at capacity\n if (stack.stackLimit > 0) {\n const openToasts = [...stack.querySelectorAll<HelixToast>('hx-toast')].filter((t) => t.open);\n if (openToasts.length >= stack.stackLimit) {\n openToasts[0]?.hide();\n }\n }\n\n // Create toast element\n const toastEl = document.createElement('hx-toast');\n toastEl.variant = options.variant ?? 'default';\n toastEl.duration = options.duration ?? 3000;\n toastEl.closable = true;\n toastEl.textContent = options.message;\n\n // Remove from DOM after hiding\n toastEl.addEventListener('hx-after-hide', () => {\n toastEl.remove();\n });\n\n stack.appendChild(toastEl);\n toastEl.show();\n\n return toastEl;\n}\n"],"names":["helixToastStyles","css","helixToastStackStyles","HelixToast","HelixElement","changedProperties","remaining","delay","elapsed","fired","fireAfterHide","base","e","slot","html","nothing","severityLabel","classMap","forcedColorsSurface","__decorateClass","property","query","state","customElement","HelixToastStack","toast","options","placement","stackSelector","stack","openToasts","t","_a","toastEl"],"mappings":";;;;;AAYO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwLnBC,IAAwBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}