@helixui/library 3.1.0 → 3.2.0-next.100

package/dist/shared/{hx-theme-DfEy-SJA.js → hx-theme-BiyQ7UUK.js}

@@ -1,8 +1,8 @@
 import { css as m, html as p } from "lit";
-import { property as d, customElement as u } from "lit/decorators.js";
+import { property as l, customElement as u } from "lit/decorators.js";
 import { HelixBrandRegistry as x, tokenEntries as f, darkTokenEntries as y } from "@helixui/tokens";
 import { H as _ } from "./helix-element-BNEYeiys.js";
-const g = m`
+const F = m`
   :host {
     display: contents;
   }
@@ -37,10 +37,10 @@ const g = m`
     }
   }
 `;
-function F(e, t) {
+function g(e, t) {
   if (Object.keys(t).length === 0)
     return e;
-  const s = Object.entries(t).map(([r, i]) => `  ${r}: ${i};`).join(`
+  const s = Object.entries(t).map(([i, r]) => `  ${i}: ${r};`).join(`
 `);
   return `${e}
 
@@ -49,17 +49,27 @@ function F(e, t) {
 ${s}
 }`;
 }
-var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (e, t, s, r) => {
-  for (var i = r > 1 ? void 0 : r ? w(t, s) : t, o = e.length - 1, n; o >= 0; o--)
-    (n = e[o]) && (i = (r ? n(t, s, i) : n(i)) || i);
-  return r && i && v(t, s, i), i;
+var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? w(t, s) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
+  return i && r && v(t, s, r), r;
 };
 const b = [
   ["--hx-color-text-primary", "#FFFFFF"],
   ["--hx-color-text-secondary", "#FFFFFF"],
   ["--hx-color-text-muted", "#E0E0E0"],
+  ["--hx-color-text-strong", "#FFFFFF"],
+  ["--hx-color-text-placeholder", "#B0B0B0"],
   ["--hx-color-text-disabled", "#767676"],
   ["--hx-color-text-inverse", "#000000"],
+  ["--hx-color-text-on-primary", "#000000"],
+  ["--hx-color-text-on-secondary", "#000000"],
+  ["--hx-color-text-on-error", "#000000"],
+  ["--hx-color-text-on-success", "#000000"],
+  ["--hx-color-text-on-warning", "#000000"],
+  ["--hx-color-text-on-info", "#000000"],
+  ["--hx-color-error-text", "#FCA5A5"],
+  ["--hx-color-success-text", "#86EFAC"],
   ["--hx-color-text-link", "#FFFF00"],
   ["--hx-color-text-link-hover", "#FFFF99"],
   ["--hx-color-text-link-visited", "#FF80FF"],
@@ -67,6 +77,7 @@ const b = [
   ["--hx-color-surface-default", "#000000"],
   ["--hx-color-surface-raised", "#1A1A1A"],
   ["--hx-color-surface-sunken", "#000000"],
+  ["--hx-color-surface-inverse", "#FFFFFF"],
   ["--hx-color-surface-overlay", "rgba(0, 0, 0, 0.95)"],
   ["--hx-color-border-default", "#FFFFFF"],
   ["--hx-color-border-subtle", "#C0C0C0"],
@@ -154,38 +165,38 @@ const b = [
   ["--hx-easing-accelerate", "linear"],
   ["--hx-easing-spring", "linear"]
 ];
-function a(e) {
+function n(e) {
   return Array.from(e).map(([t, s]) => `  ${t}: ${s};`).join(`
 `);
 }
-const l = /* @__PURE__ */ new Map();
+const d = /* @__PURE__ */ new Map();
 function T(e) {
-  const t = l.get(e);
+  const t = d.get(e);
   if (t) return t;
-  const s = new Map(f.map((i) => [i.name, i.value]));
-  let r;
+  const s = new Map(f.map((r) => [r.name, r.value]));
+  let i;
   if (e === "dark") {
-    const i = new Map(s);
+    const r = new Map(s);
     for (const o of y)
-      i.set(o.name, o.value);
-    r = `:host {
-${a(i)}
+      r.set(o.name, o.value);
+    i = `:host {
+${n(r)}
   color-scheme: dark;
 }`;
   } else if (e === "high-contrast") {
-    const i = new Map(s);
-    for (const [o, n] of b)
-      i.set(o, n);
-    r = `:host {
-${a(i)}
+    const r = new Map(s);
+    for (const [o, a] of b)
+      r.set(o, a);
+    i = `:host {
+${n(r)}
   color-scheme: dark;
 }`;
   } else
-    r = `:host {
-${a(s)}
+    i = `:host {
+${n(s)}
   color-scheme: light;
 }`;
-  return l.set(e, r), r;
+  return d.set(e, i), i;
 }
 let h = class extends _ {
   constructor() {
@@ -258,13 +269,13 @@ let h = class extends _ {
     let e = T(this.effectiveTheme);
     if (this.brand !== "") {
       const t = x.getBrandTokens(this.brand);
-      t !== void 0 ? e = F(e, t) : console.warn(
+      t !== void 0 ? e = g(e, t) : console.warn(
         `[hx-theme] Brand "${this.brand}" is not registered. Register it via HelixBrandRegistry.register() before use. Applying base theme only.`
       );
     }
     this.effectiveMotion === "reduced" && (e += `
 :host {
-${a(Q)}
+${n(Q)}
 }`), this._themeSheet.replace(e);
   }
   /** @internal */
@@ -272,9 +283,9 @@ ${a(Q)}
     if (!this._densitySheet) return;
     let e = "";
     this.density === "compact" ? e = `:host {
-${a(S)}
+${n(S)}
 }` : this.density === "spacious" && (e = `:host {
-${a(M)}
+${n(M)}
 }`), this._densitySheet.replace(e);
   }
   render() {
@@ -286,18 +297,18 @@ ${a(M)}
     `;
   }
 };
-h.styles = [g];
+h.styles = [F];
 c([
-  d({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], h.prototype, "theme", 2);
 c([
-  d({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], h.prototype, "brand", 2);
 c([
-  d({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], h.prototype, "motion", 2);
 c([
-  d({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], h.prototype, "density", 2);
 h = c([
   u("hx-theme")
@@ -305,4 +316,4 @@ h = c([
 export {
   h as H
 };
-//# sourceMappingURL=hx-theme-DfEy-SJA.js.map
+//# sourceMappingURL=hx-theme-BiyQ7UUK.js.map

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

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

package/dist/shared/{hx-time-picker-tPUfgElQ.js → hx-time-picker-BoEIZwzv.js}

@@ -2,12 +2,13 @@ import { css as C, nothing as _, html as x } from "lit";
 import { property as h, state as p, query as w, customElement as E } from "lit/decorators.js";
 import { F as L } from "./FormMixin-B8PXk5RQ.js";
 import { classMap as I } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
+import { ifDefined as v } from "lit/directives/if-defined.js";
 import { live as D } from "lit/directives/live.js";
 import { repeat as M } from "lit/directives/repeat.js";
-import { H } from "./helix-element-BNEYeiys.js";
-import { c as O } from "./id-counter-DuX8vsui.js";
-const V = C`
+import { b as H } from "./forced-colors-CTEDFRGa.js";
+import { H as O } from "./helix-element-BNEYeiys.js";
+import { c as V } from "./id-counter-DuX8vsui.js";
+const A = C`
   :host {
     display: block;
     position: relative;
@@ -31,11 +32,11 @@ const V = C`
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
   .field__combobox {
@@ -43,9 +44,9 @@ const V = C`
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -62,14 +63,14 @@ const V = C`
       );
   }
   .field--error .field__combobox {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
   }
   .field--error .field__combobox:focus-within {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-time-picker-error-color, var(--hx-color-error-500))
+        var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -82,14 +83,14 @@ const V = C`
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-time-picker-color, var(--hx-color-neutral-800));
+    color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
     cursor: text;
   }
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder, #66787b);
   }
   .field__input:disabled {
     cursor: not-allowed;
@@ -101,13 +102,13 @@ const V = C`
     border: none;
     background: transparent;
     padding: 0 var(--hx-space-3, 0.75rem);
-    color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
+    color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
     cursor: pointer;
     height: 100%;
     min-height: var(--hx-size-10, 2.5rem);
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
   }
   .field__toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
@@ -121,9 +122,9 @@ const V = C`
     inset-inline-start: 0;
     inset-inline-end: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
-    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-time-picker-listbox-shadow,
@@ -156,23 +157,29 @@ const V = C`
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-md, 1rem);
     font-family: inherit;
-    color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
+    color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__option:hover,
   .field__option--active {
-    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
-    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
+    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
+    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));
   }
   .field__option--selected {
-    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
-    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
+    background-color: var(
+      --hx-time-picker-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
+    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));
     font-weight: var(--hx-font-weight-medium, 500);
   }
   .field__option--selected.field__option--active {
-    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+    background-color: var(
+      --hx-time-picker-option-selected-bg,
+      var(--hx-color-primary-100, #dbf0f0)
+    );
   }
   @media (prefers-reduced-motion: reduce) {
     .field__combobox,
@@ -186,10 +193,10 @@ const V = C`
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__help-text {
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted, #4a5362);
   }
   .field__error {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
   }
   @media (forced-colors: active) {
     .field__combobox {
@@ -233,10 +240,10 @@ const V = C`
     }
   }
 `;
-var A = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
-  for (var r = i > 1 ? void 0 : i ? T(t, o) : t, a = e.length - 1, n; a >= 0; a--)
+var T = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
+  for (var r = i > 1 ? void 0 : i ? P(t, o) : t, a = e.length - 1, n; a >= 0; a--)
     (n = e[a]) && (r = (i ? n(t, o, r) : n(r)) || r);
-  return i && r && A(t, o, r), r;
+  return i && r && T(t, o, r), r;
 };
 function d(e) {
   const t = /^(\d{1,2}):(\d{2})$/.exec(e.trim());
@@ -244,7 +251,7 @@ function d(e) {
   const o = parseInt(t[1] ?? "0", 10), i = parseInt(t[2] ?? "0", 10);
   return o < 0 || o > 23 || i < 0 || i > 59 ? null : { hours: o, minutes: i };
 }
-function m(e, t) {
+function f(e, t) {
   return `${String(e).padStart(2, "0")}:${String(t).padStart(2, "0")}`;
 }
 function k(e) {
@@ -253,39 +260,39 @@ function k(e) {
   const { hours: o, minutes: i } = t, r = o < 12 ? "AM" : "PM", a = o % 12 === 0 ? 12 : o % 12;
   return `${String(a).padStart(2, "0")}:${String(i).padStart(2, "0")} ${r}`;
 }
-function P(e, t, o, i) {
-  const r = d(e) ?? { hours: 0, minutes: 0 }, a = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = a.hours * 60 + a.minutes, u = Math.max(1, Math.round(o)), f = [];
-  for (let v = n; v <= c; v += u) {
-    const $ = Math.floor(v / 60) % 24, S = v % 60, g = m($, S);
-    f.push({
+function q(e, t, o, i) {
+  const r = d(e) ?? { hours: 0, minutes: 0 }, a = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = a.hours * 60 + a.minutes, u = Math.max(1, Math.round(o)), m = [];
+  for (let b = n; b <= c; b += u) {
+    const $ = Math.floor(b / 60) % 24, S = b % 60, g = f($, S);
+    m.push({
       value: g,
       label: i === "12h" ? k(g) : g
     });
   }
-  return f;
+  return m;
 }
 function y(e, t, o) {
   if (!e) return "";
   const i = d(e);
   if (!i) return "";
   const r = i.hours * 60 + i.minutes, a = d(t) ?? { hours: 0, minutes: 0 }, n = d(o) ?? { hours: 23, minutes: 59 }, c = a.hours * 60 + a.minutes, u = n.hours * 60 + n.minutes;
-  return r < c ? m(a.hours, a.minutes) : r > u ? m(n.hours, n.minutes) : m(i.hours, i.minutes);
+  return r < c ? f(a.hours, a.minutes) : r > u ? f(n.hours, n.minutes) : f(i.hours, i.minutes);
 }
-function q(e) {
+function z(e) {
   const t = e.trim().toUpperCase(), o = d(t);
-  if (o) return m(o.hours, o.minutes);
+  if (o) return f(o.hours, o.minutes);
   const i = /^(\d{1,2})(?::(\d{2}))?\s*(AM|PM)$/.exec(t) ?? /^(\d{1,2})(\d{2})\s*(AM|PM)$/.exec(t);
   if (i) {
     let r = parseInt(i[1] ?? "0", 10);
     const a = i[2] !== void 0 ? parseInt(i[2], 10) : 0, n = i[3] ?? "";
-    return r < 1 || r > 12 || a < 0 || a > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, m(r, a));
+    return r < 1 || r > 12 || a < 0 || a > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, f(r, a));
   }
   return null;
 }
-const z = O("hx-time-picker");
-let s = class extends L(H) {
+const F = V("hx-time-picker");
+let s = class extends L(O) {
   constructor() {
-    super(...arguments), this.name = "", this.value = "", this.min = "00:00", this.max = "23:59", this.step = 30, this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.format = "12h", this._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._slottedLabelId = "", this._id = z(), this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._cachedSlots = null, this._slotsKey = "", this._handleOutsideClick = (e) => {
+    super(...arguments), this.name = "", this.value = "", this.min = "00:00", this.max = "23:59", this.step = 30, this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.format = "12h", this._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._slottedLabelId = "", this._id = F(), this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._cachedSlots = null, this._slotsKey = "", this._handleOutsideClick = (e) => {
       var t;
       this.isConnected && !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && this._closeListbox();
     };
@@ -296,7 +303,7 @@ let s = class extends L(H) {
    */
   get _slots() {
     const e = `${this.min}|${this.max}|${this.step}|${this.format}`;
-    return (this._cachedSlots === null || e !== this._slotsKey) && (this._slotsKey = e, this._cachedSlots = P(this.min, this.max, this.step, this.format)), this._cachedSlots;
+    return (this._cachedSlots === null || e !== this._slotsKey) && (this._slotsKey = e, this._cachedSlots = q(this.min, this.max, this.step, this.format)), this._cachedSlots;
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -420,7 +427,7 @@ let s = class extends L(H) {
       this.value = "", this._handleInteractionInput(), this._handleInteractionBlur(), this._internals.setFormValue(null), this._dispatchChange("");
       return;
     }
-    const i = q(o);
+    const i = z(o);
     if (i) {
       const r = y(i, this.min, this.max);
       this.value = r, this._handleInteractionInput(), this._handleInteractionBlur(), this._dispatchChange(r);
@@ -513,14 +520,14 @@ let s = class extends L(H) {
             placeholder=${r}
             ?required=${this.required}
             ?disabled=${this.disabled}
-            name=${b(this.name || void 0)}
+            name=${v(this.name || void 0)}
             aria-autocomplete="list"
             aria-controls=${this._listboxId}
-            aria-activedescendant=${b(i)}
+            aria-activedescendant=${v(i)}
             aria-invalid=${e ? "true" : _}
-            aria-describedby=${b(a)}
+            aria-describedby=${v(a)}
             aria-required=${this.required ? "true" : _}
-            aria-labelledby=${b(
+            aria-labelledby=${v(
       this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : void 0
     )}
             @click=${this._handleInputClick}
@@ -572,14 +579,14 @@ let s = class extends L(H) {
       t,
       (n) => n.value,
       (n, c) => {
-        const u = n.value === this.value, f = c === this._activeIndex;
+        const u = n.value === this.value, m = c === this._activeIndex;
         return x`
                       <li
                         part="option"
                         class=${I({
           field__option: !0,
           "field__option--selected": u,
-          "field__option--active": f
+          "field__option--active": m
         })}
                         id="${this._listboxId}-option-${c}"
                         role="option"
@@ -613,7 +620,7 @@ let s = class extends L(H) {
     `;
   }
 };
-s.styles = [V];
+s.styles = [A, H];
 s.formAssociated = !0;
 l([
   h({ type: String, reflect: !0 })
@@ -678,4 +685,4 @@ s = l([
 export {
   s as H
 };
-//# sourceMappingURL=hx-time-picker-tPUfgElQ.js.map
+//# sourceMappingURL=hx-time-picker-BoEIZwzv.js.map