@helixui/library 3.2.0-next.102 → 3.2.0-next.110
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.
- package/custom-elements.json +17 -5
- package/dist/components/hx-button/hx-button.d.ts +3 -1
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts +1 -0
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-theme/hx-theme.d.ts +14 -2
- package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
- package/dist/components/hx-theme/index.js +1 -1
- package/dist/css/helix-all.css +51 -11
- package/dist/css/helix-core.css +35 -7
- package/dist/css/helix-navigation.css +16 -4
- package/dist/css/hx-button.css +35 -7
- package/dist/css/hx-side-nav.css +16 -4
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +2 -1
- package/dist/index.js +3 -3
- package/dist/shared/{hx-button-CHlkRQTe.js → hx-button-DPY6SPVT.js} +47 -19
- package/dist/shared/hx-button-DPY6SPVT.js.map +1 -0
- package/dist/shared/{hx-nav-item-Dap3DYgB.js → hx-nav-item-xqRPOCWX.js} +47 -35
- package/dist/shared/hx-nav-item-xqRPOCWX.js.map +1 -0
- package/dist/shared/{hx-theme-BiyQ7UUK.js → hx-theme-BsefFWTO.js} +83 -113
- package/dist/shared/hx-theme-BsefFWTO.js.map +1 -0
- package/figma-inventory.json +17 -2
- package/package.json +2 -2
- package/dist/shared/hx-button-CHlkRQTe.js.map +0 -1
- package/dist/shared/hx-nav-item-Dap3DYgB.js.map +0 -1
- package/dist/shared/hx-theme-BiyQ7UUK.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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 * <!-- Clinical dashboard content -->\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 * <!-- Content inherits Mercy Health brand tokens -->\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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"}
|