npm - @helixui/library - Versions diffs - 2.0.0 → 2.1.0-next.34 - Mend

@helixui/library 2.0.0 → 2.1.0-next.34

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

package/dist/shared/{hx-stat-CmkCUI8v.js → hx-stat-DKD2E7An.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { css as v, LitElement as p, html as i, nothing as c } from "lit";
-import { property as l, state as f, customElement as x } from "lit/decorators.js";
+import "./document-token-adoption-DuYNKd4k.js";
+import { property as l, state as x, customElement as f } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
-import { tokenStyles as g } from "@helixui/tokens/lit";
-const _ = v`
+const g = v`
   :host {
     display: block;
   }
@@ -109,10 +109,10 @@ const _ = v`
     display: none !important;
   }
 `;
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, r, o, n) => {
-  for (var a = n > 1 ? void 0 : n ? b(r, o) : r, h = t.length - 1, d; h >= 0; h--)
-    (d = t[h]) && (a = (n ? d(r, o, a) : d(a)) || a);
-  return n && a && m(r, o, a), a;
+var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, a, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? m(a, o) : a, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (r = (n ? d(a, o, r) : d(r)) || r);
+  return n && r && _(a, o, r), r;
 };
 let e = class extends p {
   constructor() {
@@ -126,8 +126,8 @@ let e = class extends p {
   }
   /** @internal */
   _onIconSlotChange(t) {
-    const r = t.target;
-    this._hasIcon = r.assignedNodes({ flatten: !0 }).length > 0;
+    const a = t.target;
+    this._hasIcon = a.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Render Helpers ───
   /** @internal */
@@ -171,7 +171,7 @@ let e = class extends p {
     const t = {
       stat: !0,
       [`stat--${this.size}`]: !0
-    }, r = this.trend !== "neutral", o = this.value && this.label ? `${this.value}: ${this.label}` : this.value || this.label || c;
+    }, a = this.trend !== "neutral", o = this.value && this.label ? `${this.value}: ${this.label}` : this.value || this.label || c;
     return i`
       <div
         part="container"
@@ -184,7 +184,7 @@ let e = class extends p {
             <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
           </span>
           <span part="value" class="stat__value" aria-hidden="true">${this.value}</span>
-          ${r ? i`
+          ${a ? i`
                 <span
                   part="trend"
                   class="stat__trend stat__trend--${this.trend}"
@@ -200,7 +200,7 @@ let e = class extends p {
     `;
   }
 };
-e.styles = [g, _];
+e.styles = [g];
 s([
   l({ type: String, reflect: !0 })
 ], e.prototype, "label", 2);
@@ -217,12 +217,12 @@ s([
   l({ attribute: "label-trend" })
 ], e.prototype, "labelTrend", 2);
 s([
-  f()
+  x()
 ], e.prototype, "_hasIcon", 2);
 e = s([
-  x("hx-stat")
+  f("hx-stat")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-stat-CmkCUI8v.js.map
+//# sourceMappingURL=hx-stat-DKD2E7An.js.map

package/dist/shared/hx-stat-DKD2E7An.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-stat-DKD2E7An.js","sources":["../../src/components/hx-stat/hx-stat.styles.ts","../../src/components/hx-stat/hx-stat.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStatStyles = css`\n :host {\n display: block;\n }\n\n .stat {\n display: flex;\n flex-direction: column;\n gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));\n font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));\n color: var(--hx-stat-color, var(--hx-color-neutral-800, #212529));\n }\n\n /* ─── Size Variants ─── */\n\n .stat--sm .stat__value {\n font-size: var(--hx-stat-value-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n line-height: var(--hx-line-height-tight, 1.25);\n font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n }\n\n .stat--sm .stat__label {\n font-size: var(--hx-stat-label-font-size-sm, var(--hx-font-size-xs, 0.75rem));\n }\n\n .stat--md .stat__value {\n font-size: var(--hx-stat-value-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n line-height: var(--hx-line-height-tight, 1.25);\n font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n }\n\n .stat--md .stat__label {\n font-size: var(--hx-stat-label-font-size-md, var(--hx-font-size-sm, 0.875rem));\n }\n\n .stat--lg .stat__value {\n font-size: var(--hx-stat-value-font-size-lg, var(--hx-font-size-5xl, 3rem));\n line-height: var(--hx-line-height-tight, 1.25);\n font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n }\n\n .stat--lg .stat__label {\n font-size: var(--hx-stat-label-font-size-lg, var(--hx-font-size-md, 1rem));\n }\n\n /* ─── Value ─── */\n\n .stat__header {\n display: flex;\n align-items: center;\n gap: var(--hx-stat-header-gap, var(--hx-space-2, 0.5rem));\n }\n\n .stat__value {\n color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #111827));\n }\n\n /* ─── Label ─── */\n\n .stat__label {\n color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #6c757d));\n font-weight: var(--hx-font-weight-normal, 400);\n }\n\n /* ─── Icon Slot ─── */\n\n .stat__icon {\n display: flex;\n align-items: center;\n color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #2563eb));\n flex-shrink: 0;\n }\n\n /* ─── Trend Indicator ─── */\n\n .stat__trend {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n padding: var(--hx-space-0-5, 0.125rem) var(--hx-space-1-5, 0.375rem);\n }\n\n .stat__trend--up {\n color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #15803d));\n background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));\n }\n\n .stat__trend--down {\n color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #b91c1c));\n background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));\n }\n\n .stat__trend-arrow {\n width: 0.75em;\n height: 0.75em;\n flex-shrink: 0;\n }\n\n /* ─── Hidden empty slot wrappers ─── */\n\n [hidden] {\n display: none !important;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { helixStatStyles } from './hx-stat.styles.js';\n\nexport type StatSize = 'sm' | 'md' | 'lg';\nexport type StatTrend = 'up' | 'down' | 'neutral';\n\n/**\n * A static stat display component for presenting key metrics in a healthcare dashboard.\n *\n * @summary Displays a labeled metric value with optional trend indicator and icon slot.\n *\n * @tag hx-stat\n *\n * @slot icon - Optional icon displayed alongside the stat value.\n *\n * @csspart container - The outer stat container element.\n * @csspart header - The row containing the value and optional icon.\n * @csspart value - The stat value element.\n * @csspart label - The stat label element.\n * @csspart trend - The trend indicator element (only rendered when trend is not 'neutral').\n * @csspart icon - The icon slot container.\n *\n * @cssprop [--hx-stat-gap=var(--hx-space-1)] - Gap between value and label.\n * @cssprop [--hx-stat-header-gap=var(--hx-space-2)] - Gap between icon and value in the header row.\n * @cssprop [--hx-stat-color=var(--hx-color-neutral-800)] - Default text color.\n * @cssprop [--hx-stat-value-color=var(--hx-color-neutral-900)] - Value text color.\n * @cssprop [--hx-stat-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-stat-icon-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-stat-value-font-weight=var(--hx-font-weight-bold)] - Value font weight.\n * @cssprop [--hx-stat-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-stat-value-font-size-sm=var(--hx-font-size-xl)] - Value font size at sm.\n * @cssprop [--hx-stat-value-font-size-md=var(--hx-font-size-3xl)] - Value font size at md.\n * @cssprop [--hx-stat-value-font-size-lg=var(--hx-font-size-5xl)] - Value font size at lg.\n * @cssprop [--hx-stat-label-font-size-sm=var(--hx-font-size-xs)] - Label font size at sm.\n * @cssprop [--hx-stat-label-font-size-md=var(--hx-font-size-sm)] - Label font size at md.\n * @cssprop [--hx-stat-label-font-size-lg=var(--hx-font-size-md)] - Label font size at lg.\n * @cssprop [--hx-stat-trend-up-color=var(--hx-color-success-700)] - Trend up text color.\n * @cssprop [--hx-stat-trend-up-bg=var(--hx-color-success-50)] - Trend up background color.\n * @cssprop [--hx-stat-trend-down-color=var(--hx-color-error-700)] - Trend down text color.\n * @cssprop [--hx-stat-trend-down-bg=var(--hx-color-error-50)] - Trend down background color.\n */\n@customElement('hx-stat')\nexport class HelixStat extends LitElement {\n static override styles = [helixStatStyles];\n\n /**\n * The metric label displayed below the value.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n /**\n * The metric value displayed prominently.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = '';\n\n /**\n * Trend direction indicator. 'neutral' hides the indicator.\n * @attr trend\n */\n @property({ type: String, reflect: true })\n trend: 'up' | 'down' | 'neutral' = 'neutral';\n\n /**\n * Size variant controlling font size.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Prefix label for trend indicator. Override for i18n.\n * @attr label-trend\n */\n @property({ attribute: 'label-trend' }) labelTrend = 'Trend';\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-stat', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as StatSize;\n }\n }\n\n // ─── Slot Detection ───\n\n /** @internal */\n @state() private _hasIcon = false;\n\n /** @internal */\n private _onIconSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderTrendArrow(trend: 'up' | 'down'): ReturnType<typeof html> {\n if (trend === 'up') {\n return html`\n <svg\n class=\"stat__trend-arrow\"\n aria-hidden=\"true\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 10V2M6 2L2 6M6 2L10 6\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n `;\n }\n return html`\n <svg\n class=\"stat__trend-arrow\"\n aria-hidden=\"true\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 2V10M6 10L2 6M6 10L10 6\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const containerClasses = {\n stat: true,\n [`stat--${this.size}`]: true,\n };\n\n const hasTrend = this.trend !== 'neutral';\n\n // WCAG 1.3.1: wrap value and label in a group so screen readers announce them\n // together with a combined accessible name instead of as disconnected text runs.\n const groupLabel =\n this.value && this.label\n ? `${this.value}: ${this.label}`\n : this.value || this.label || nothing;\n\n return html`\n <div\n part=\"container\"\n class=${classMap(containerClasses)}\n role=\"group\"\n aria-label=${groupLabel}\n >\n <div part=\"header\" class=\"stat__header\">\n <span part=\"icon\" class=\"stat__icon\" ?hidden=${!this._hasIcon}>\n <slot name=\"icon\" @slotchange=${this._onIconSlotChange}></slot>\n </span>\n <span part=\"value\" class=\"stat__value\" aria-hidden=\"true\">${this.value}</span>\n ${hasTrend\n ? html`\n <span\n part=\"trend\"\n class=\"stat__trend stat__trend--${this.trend}\"\n role=\"img\"\n aria-label=\"${this.labelTrend}: ${this.trend}\"\n >\n ${this._renderTrendArrow(this.trend as 'up' | 'down')}\n </span>\n `\n : nothing}\n </div>\n <span part=\"label\" class=\"stat__label\" aria-hidden=\"true\">${this.label}</span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-stat': HelixStat;\n }\n}\n"],"names":["helixStatStyles","css","HelixStat","LitElement","legacySize","e","slot","trend","html","containerClasses","hasTrend","groupLabel","nothing","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-status-indicator-Dl3Y34mc.js → hx-status-indicator-ClWpK6zz.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { css as d, LitElement as p, nothing as v, html as u } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as s, customElement as x } from "lit/decorators.js";
-import { tokenStyles as b } from "@helixui/tokens/lit";
-const _ = d`
+const b = d`
   :host {
     display: inline-flex;
     align-items: center;
@@ -128,10 +128,10 @@ const _ = d`
     --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
   }
 `;
-var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, r, n, o) => {
-  for (var a = o > 1 ? void 0 : o ? y(r, n) : r, l = t.length - 1, c; l >= 0; l--)
+var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (t, r, n, o) => {
+  for (var a = o > 1 ? void 0 : o ? f(r, n) : r, l = t.length - 1, c; l >= 0; l--)
     (c = t[l]) && (a = (o ? c(r, n, a) : c(a)) || a);
-  return o && a && f(r, n, a), a;
+  return o && a && _(r, n, a), a;
 };
 const h = {
   online: "Online",
@@ -175,7 +175,7 @@ let e = class extends p {
     `;
   }
 };
-e.styles = [b, _];
+e.styles = [b];
 i([
   s({ type: String, reflect: !0 })
 ], e.prototype, "status", 2);
@@ -197,4 +197,4 @@ e = i([
 export {
   e as H
 };
-//# sourceMappingURL=hx-status-indicator-Dl3Y34mc.js.map
+//# sourceMappingURL=hx-status-indicator-ClWpK6zz.js.map

package/dist/shared/hx-status-indicator-ClWpK6zz.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-status-indicator-ClWpK6zz.js","sources":["../../src/components/hx-status-indicator/hx-status-indicator.styles.ts","../../src/components/hx-status-indicator/hx-status-indicator.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStatusIndicatorStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n position: relative;\n flex-shrink: 0;\n --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #ced4da));\n /* Default size (md) — always defined so .indicator never collapses to 0x0 */\n --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));\n }\n\n .indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n flex-shrink: 0;\n }\n\n .indicator__dot {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: var(--_dot-color);\n position: relative;\n z-index: 1; /* dot above pulse ring within shadow root */\n }\n\n .indicator__pulse-ring {\n display: none;\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background-color: var(--hx-status-indicator-pulse-color, var(--_dot-color));\n opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */\n animation: hx-status-pulse var(--hx-status-indicator-pulse-duration, 1.5s) ease-out infinite;\n z-index: 0; /* pulse ring beneath dot within shadow root */\n }\n\n :host([pulse]) .indicator__pulse-ring {\n display: block;\n }\n\n @keyframes hx-status-pulse {\n 0% {\n transform: scale(1);\n opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */\n }\n 100% {\n transform: scale(var(--hx-status-indicator-pulse-scale, 2.5));\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([pulse]) .indicator__pulse-ring {\n animation: none;\n display: none;\n }\n }\n\n /* ─── Visible label (part=\"label\") ─── */\n\n .indicator__label {\n font-size: var(\n --hx-status-indicator-label-font-size,\n var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))\n );\n color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #374151));\n line-height: 1;\n white-space: nowrap;\n }\n\n /* ─── aria-live announcement region (visually hidden) ─── */\n\n .indicator__live-region {\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 /* ─── Size Variants ─── */\n\n :host([hx-size='sm']) {\n --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-space-2, 0.5rem));\n }\n\n :host([hx-size='md']) {\n --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));\n }\n\n :host([hx-size='lg']) {\n --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-space-4, 1rem));\n }\n\n /* ─── Status Colors ─── */\n\n :host([status='online']) {\n --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));\n }\n\n :host([status='offline']) {\n --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));\n }\n\n :host([status='away']) {\n --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));\n }\n\n :host([status='busy']) {\n --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500));\n }\n\n :host([status='unknown']) {\n --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { helixStatusIndicatorStyles } from './hx-status-indicator.styles.js';\n\nexport type StatusIndicatorStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown';\nexport type StatusIndicatorSize = 'sm' | 'md' | 'lg';\n\nconst STATUS_LABELS: Record<StatusIndicatorStatus, string> = {\n online: 'Online',\n offline: 'Offline',\n away: 'Away',\n busy: 'Busy',\n unknown: 'Unknown',\n};\n\n/**\n * A colored dot/badge indicating system or entity health status.\n * Supports an animated pulse ring and an optional visible text label.\n *\n * Status is conveyed through color AND an `aria-label` on the host element.\n * When `show-label` is set, a visible text label is rendered inside the component,\n * ensuring status is not communicated by color alone (WCAG 1.4.1 — Use of Color).\n *\n * Uses `role=\"img\"` with an auto-generated `aria-label` (e.g. \"Status: Online\").\n * When used decoratively alongside visible text that conveys the same status information\n * (e.g. \"Provider is available\"), set `aria-hidden=\"true\"` on the host element to prevent\n * duplicate announcements to screen reader users. This is the recommended composition\n * pattern in healthcare dashboards.\n *\n * @remarks\n * The status vocabulary (`online`, `offline`, `away`, `busy`, `unknown`) is the intentional\n * implementation canonical form for this component. Although a prior spec draft used\n * `active/inactive/error/warning`, the current vocabulary was approved as a deliberate\n * design decision for flexibility and UX clarity in healthcare dashboard contexts.\n *\n * @summary Status indicator dot component.\n *\n * @tag hx-status-indicator\n *\n * @csspart base - The dot element.\n * @csspart pulse-ring - The animated pulse ring element.\n * @csspart label - The visible status label text element (visible when show-label is set).\n *\n * @cssprop [--hx-status-indicator-color-online] - Override color for the \"online\" status dot.\n * @cssprop [--hx-status-indicator-color-offline] - Override color for the \"offline\" status dot.\n * @cssprop [--hx-status-indicator-color-away] - Override color for the \"away\" status dot.\n * @cssprop [--hx-status-indicator-color-busy] - Override color for the \"busy\" status dot.\n * @cssprop [--hx-status-indicator-color-unknown] - Override color for the \"unknown\" status dot.\n * @cssprop [--hx-status-indicator-size-sm] - Override size for the \"sm\" variant.\n * @cssprop [--hx-status-indicator-size-md] - Override size for the \"md\" variant.\n * @cssprop [--hx-status-indicator-size-lg] - Override size for the \"lg\" variant.\n * @cssprop [--hx-status-indicator-pulse-duration] - Override pulse animation duration.\n * @cssprop [--hx-status-indicator-pulse-scale] - Override pulse animation max scale.\n * @cssprop [--hx-status-indicator-pulse-color] - Override pulse ring color independently from dot color.\n * @cssprop [--hx-status-indicator-label-color] - Override label text color.\n * @cssprop [--hx-status-indicator-label-font-size] - Override label font size.\n */\n@customElement('hx-status-indicator')\nexport class HelixStatusIndicator extends LitElement {\n static override styles = [helixStatusIndicatorStyles];\n\n /**\n * The status to display.\n * @attr status\n */\n @property({ type: String, reflect: true })\n status: 'online' | 'offline' | 'away' | 'busy' | 'unknown' = 'unknown';\n\n /**\n * Size of the indicator dot.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether to show an animated pulse ring around the dot.\n * Animation is suppressed when prefers-reduced-motion is active.\n * @attr pulse\n * @remarks\n * In Twig (Drupal) templates, render as a bare attribute: `pulse` — NOT `pulse=\"true\"`.\n * The value is ignored; only attribute presence matters.\n */\n @property({ type: Boolean, reflect: true })\n pulse = false;\n\n /**\n * Accessible label for the indicator. Defaults to \"Status: {Status}\".\n * Set aria-hidden=\"true\" on the host when status is conveyed by adjacent text.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * When true, renders a visible text label next to the dot conveying the status.\n * Use this to satisfy WCAG 1.4.1 (Use of Color) when the indicator is not\n * accompanied by other visible text that conveys the same status information.\n * @attr show-label\n */\n @property({ type: Boolean, reflect: true, attribute: 'show-label' })\n showLabel = false;\n\n /** @internal */\n private _getLabel(): string {\n if (this.label) return this.label;\n const statusText = STATUS_LABELS[this.status] ?? 'Unknown';\n return `Status: ${statusText}`;\n }\n\n /** @internal */\n private _getStatusText(): string {\n return STATUS_LABELS[this.status] ?? 'Unknown';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-status-indicator', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as StatusIndicatorSize;\n }\n // T3-01-4: Place role=\"img\" on the host element for robust AT traversal.\n // Some screen reader + browser combinations skip shadow children; host-level\n // ARIA attributes are more reliable across the flat accessibility tree.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'img');\n }\n this.setAttribute('aria-label', this._getLabel());\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n // Keep host aria-label in sync when status or label properties change.\n if (changedProperties.has('status') || changedProperties.has('label')) {\n this.setAttribute('aria-label', this._getLabel());\n }\n }\n\n override render() {\n return html`\n <div class=\"indicator\">\n <div class=\"indicator__pulse-ring\" part=\"pulse-ring\"></div>\n <div class=\"indicator__dot\" part=\"base\"></div>\n </div>\n ${this.showLabel\n ? html`<span class=\"indicator__label\" part=\"label\">${this._getStatusText()}</span>`\n : nothing}\n \n <span class=\"indicator__live-region\" aria-live=\"polite\" aria-atomic=\"true\"\n >${this._getLabel()}</span\n >\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-status-indicator': HelixStatusIndicator;\n }\n}\n"],"names":["helixStatusIndicatorStyles","css","STATUS_LABELS","HelixStatusIndicator","LitElement","legacySize","changedProperties","html","nothing","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAA6BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACO1C,MAAMC,IAAuD;AAAA,EAC3D,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AA6CO,IAAMC,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,SAA6D,WAO7D,KAAA,OAA2B,MAW3B,KAAA,QAAQ,IAQR,KAAA,QAAQ,IASR,KAAA,YAAY;AAAA,EAAA;AAAA;AAAA,EAGJ,YAAoB;AAC1B,WAAI,KAAK,QAAc,KAAK,QAErB,WADYF,EAAc,KAAK,MAAM,KAAK,SACrB;AAAA,EAC9B;AAAA;AAAA,EAGQ,iBAAyB;AAC/B,WAAOA,EAAc,KAAK,MAAM,KAAK;AAAA,EACvC;AAAA;AAAA,EAIS,oBAA0B;AACjC,UAAM,kBAAA;AAGN,UAAMG,IAAa,KAAK,aAAa,MAAM;AAC3C,IAAIA,MAAe,QAAQ,CAAC,KAAK,aAAa,SAAS,MAErD,KAAK,OAAOA,IAKT,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,KAAK,GAEjC,KAAK,aAAa,cAAc,KAAK,UAAA,CAAW;AAAA,EAClD;AAAA,EAES,QAAQC,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,IAE3BA,EAAkB,IAAI,QAAQ,KAAKA,EAAkB,IAAI,OAAO,MAClE,KAAK,aAAa,cAAc,KAAK,UAAA,CAAW;AAAA,EAEpD;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,QAKH,KAAK,YACHA,gDAAmD,KAAK,eAAA,CAAgB,YACxEC,CAAO;AAAA;AAAA;AAAA,WAGN,KAAK,WAAW;AAAA;AAAA;AAAA,EAGzB;AACF;AApGaL,EACK,SAAS,CAACH,CAA0B;AAOpDS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BP,EAQX,WAAA,UAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAdpDP,EAeX,WAAA,QAAA,CAAA;AAWAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzB/BP,EA0BX,WAAA,SAAA,CAAA;AAQAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjCfP,EAkCX,WAAA,SAAA,CAAA;AASAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,cAAc;AAAA,GA1CxDP,EA2CX,WAAA,aAAA,CAAA;AA3CWA,IAANM,EAAA;AAAA,EADNE,EAAc,qBAAqB;AAAA,GACvBR,CAAA;"}

package/dist/shared/{hx-step-CmNwfcJx.js → hx-step-C2Jk4mHa.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { css as x, LitElement as v, nothing as m, html as d } from "lit";
+import { css as x, LitElement as v, nothing as f, html as d } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as a, customElement as u } from "lit/decorators.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const b = x`
+const m = x`
   :host {
     display: block;
@@ -54,10 +54,10 @@ const b = x`
     --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
   }
 `;
-var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (t, i, r, s) => {
-  for (var e = s > 1 ? void 0 : s ? g(i, r) : i, l = t.length - 1, h; l >= 0; l--)
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, i, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? _(i, r) : i, l = t.length - 1, h; l >= 0; l--)
     (h = t[l]) && (e = (s ? h(i, r, e) : h(e)) || e);
-  return s && e && _(i, r, e), e;
+  return s && e && b(i, r, e), e;
 };
 let c = class extends v {
   constructor() {
@@ -108,13 +108,13 @@ let c = class extends v {
   // ─── Render ───
   render() {
     return d`
-      <div part="base" class="steps" role="list" aria-label=${this.ariaLabel ?? m}>
+      <div part="base" class="steps" role="list" aria-label=${this.ariaLabel ?? f}>
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;
   }
 };
-c.styles = [f, b];
+c.styles = [m];
 p([
   a({ type: String, reflect: !0 })
 ], c.prototype, "orientation", 2);
@@ -127,7 +127,7 @@ p([
 c = p([
   u("hx-steps")
 ], c);
-const y = x`
+const g = x`
   :host {
     display: flex;
     flex: var(--hx-steps-item-flex, 1);
@@ -348,10 +348,10 @@ const y = x`
     }
   }
 `;
-var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (t, i, r, s) => {
-  for (var e = s > 1 ? void 0 : s ? w(i, r) : i, l = t.length - 1, h; l >= 0; l--)
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (t, i, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? z(i, r) : i, l = t.length - 1, h; l >= 0; l--)
     (h = t[l]) && (e = (s ? h(i, r, e) : h(e)) || e);
-  return s && e && z(i, r, e), e;
+  return s && e && y(i, r, e), e;
 };
 let o = class extends v {
   constructor() {
@@ -440,7 +440,7 @@ let o = class extends v {
     `;
   }
 };
-o.styles = [f, y];
+o.styles = [g];
 n([
   a({ type: String, reflect: !0 })
 ], o.prototype, "label", 2);
@@ -469,4 +469,4 @@ export {
   o as H,
   c as a
 };
-//# sourceMappingURL=hx-step-CmNwfcJx.js.map
+//# sourceMappingURL=hx-step-C2Jk4mHa.js.map

package/dist/shared/hx-step-C2Jk4mHa.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-step-C2Jk4mHa.js","sources":["../../src/components/hx-steps/hx-steps.styles.ts","../../src/components/hx-steps/hx-steps.ts","../../src/components/hx-steps/hx-step.styles.ts","../../src/components/hx-steps/hx-step.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStepsStyles = css`\n :host {\n display: block;\n\n /* ─── Size defaults (md) ─── */\n --hx-steps-indicator-size: var(--hx-size-8, 2rem);\n --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);\n --hx-steps-indicator-icon-size: var(--hx-size-4, 1rem);\n --hx-steps-label-font-size: var(--hx-font-size-sm, 0.875rem);\n --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);\n\n /* ─── Item layout defaults (horizontal) ─── */\n --hx-steps-item-flex: 1;\n --hx-steps-item-width: auto;\n }\n\n .steps {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n }\n\n /* ─── Orientation: vertical ─── */\n\n :host([orientation='vertical']) {\n --hx-steps-item-flex: initial;\n --hx-steps-item-width: 100%;\n }\n\n :host([orientation='vertical']) .steps {\n flex-direction: column;\n }\n\n /* ─── Size: sm ─── */\n\n :host([size='sm']) {\n --hx-steps-indicator-size: var(--hx-size-6, 1.5rem);\n --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);\n --hx-steps-indicator-icon-size: var(--hx-space-3, 0.75rem);\n --hx-steps-label-font-size: var(--hx-font-size-xs, 0.75rem);\n --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n /* ─── Size: lg ─── */\n\n :host([size='lg']) {\n --hx-steps-indicator-size: var(--hx-size-10, 2.5rem);\n --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);\n --hx-steps-indicator-icon-size: var(--hx-size-5, 1.25rem);\n --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);\n --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { helixStepsStyles } from './hx-steps.styles.js';\nimport type { HelixStep } from './hx-step.js';\n\n/**\n * A multi-step wizard / stepper progress indicator. Renders a sequence of\n * `<hx-step>` children as a horizontal or vertical step tracker with connector\n * lines and status-based styling.\n *\n * Provide an `aria-label` on `<hx-steps>` to describe the step process for assistive technology.\n *\n * @summary Multi-step progress indicator container.\n *\n * @tag hx-steps\n *\n * @slot - Default slot for `<hx-step>` elements.\n *\n * @fires {CustomEvent<{step: HelixStep, index: number}>} hx-step-click - Dispatched when\n * a step is clicked. Detail contains the clicked `step` element and its zero-based `index`.\n *\n * @csspart base - The inner wrapper element.\n *\n * @cssprop [--hx-steps-indicator-size=2rem] - Step indicator circle diameter.\n * @cssprop [--hx-steps-connector-color=var(--hx-color-neutral-200)] - Connector line color.\n * @cssprop [--hx-steps-label-color=var(--hx-color-neutral-600)] - Step label text color.\n * @cssprop [--hx-steps-description-color=var(--hx-color-neutral-500)] - Step description color.\n */\n@customElement('hx-steps')\nexport class HelixSteps extends LitElement {\n static override styles = [helixStepsStyles];\n\n // ─── Public Properties ───\n\n /**\n * Layout orientation of the steps.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Size variant of the steps.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Accessible label for the list. Forwarded to the inner list element.\n * @attr aria-label\n */\n @property({ type: String, attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-steps', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as 'sm' | 'md' | 'lg';\n }\n // STEPS-002: WCAG 2.1 SC 4.1.2 — the inner list must have an accessible name.\n // Warn developers when aria-label is missing so the list is not anonymous.\n if (!this.ariaLabel) {\n devWarn(\n 'hx-steps',\n 'An \"aria-label\" attribute is required to provide an accessible name for the steps list (WCAG 2.1 SC 4.1.2).',\n );\n }\n // WCAG 4.1.2: suppress the host element's implicit ARIA role so only the\n // inner div[role=\"list\"] is announced. Mirrors the hx-action-bar pattern.\n // Without this, the consumer's aria-label attribute on the host causes dual\n // announcement — once for the host element and once for the inner list.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'none');\n }\n this.addEventListener('hx-step-click-internal', this._handleStepClickInternal);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('hx-step-click-internal', this._handleStepClickInternal);\n }\n\n override firstUpdated(): void {\n this._syncChildren();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('orientation') || changedProperties.has('size')) {\n this._syncChildren();\n }\n }\n\n // ─── Child Sync ───\n\n /** @internal */\n private _getSteps(): HelixStep[] {\n return Array.from(this.querySelectorAll(':scope > hx-step')) as HelixStep[];\n }\n\n /** @internal */\n private _syncChildren(): void {\n const steps = this._getSteps();\n steps.forEach((step, i) => {\n step.orientation = this.orientation;\n step.size = this.size;\n step.index = i;\n });\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleSlotChange = (): void => {\n this._syncChildren();\n };\n\n /** @internal */\n private _handleStepClickInternal = (e: Event): void => {\n e.stopPropagation();\n const steps = this._getSteps();\n const step = e\n .composedPath()\n .find(\n (el): el is HelixStep => el instanceof Element && el.tagName.toLowerCase() === 'hx-step',\n );\n if (!step) return;\n const index = steps.indexOf(step);\n\n /**\n * Dispatched when a step is clicked.\n * @event hx-step-click\n */\n this.dispatchEvent(\n new CustomEvent<{ step: HelixStep; index: number }>('hx-step-click', {\n bubbles: true,\n composed: true,\n detail: { step, index },\n }),\n );\n };\n\n // ─── Render ───\n\n override render() {\n return html`\n <div part=\"base\" class=\"steps\" role=\"list\" aria-label=${this.ariaLabel ?? nothing}>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-steps': HelixSteps;\n }\n}\n","import { css } from 'lit';\n\nexport const helixStepStyles = css`\n :host {\n display: flex;\n flex: var(--hx-steps-item-flex, 1);\n width: var(--hx-steps-item-width, auto);\n min-width: 0;\n }\n\n /* ─── Visually Hidden (SR only) ─── */\n\n .sr-only {\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-width: 0;\n }\n\n /* ─── Step Wrapper ─── */\n\n .step {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n cursor: pointer;\n }\n\n /* ─── Focus ─── */\n\n :host(:focus-visible) .step__indicator {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-color-primary-500);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Track (indicator + connector) ─── */\n\n .step__track {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n }\n\n /* ─── Indicator ─── */\n\n .step__indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--hx-steps-indicator-size, 2rem);\n height: var(--hx-steps-indicator-size, 2rem);\n border-radius: var(--hx-border-radius-full, 9999px);\n border: var(--hx-border-width-medium, 2px) solid var(--hx-color-neutral-300);\n background-color: var(--hx-color-neutral-0);\n color: var(--hx-color-neutral-500);\n font-size: var(--hx-steps-indicator-font-size, var(--hx-font-size-sm));\n font-weight: var(--hx-font-weight-semibold);\n font-family: var(--hx-font-family-sans);\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease);\n position: relative;\n z-index: 1;\n }\n\n .step__indicator svg {\n width: var(--hx-steps-indicator-icon-size, 1rem);\n height: var(--hx-steps-indicator-icon-size, 1rem);\n }\n\n /* ─── Connector ─── */\n\n .step__connector {\n flex: 1;\n height: var(--hx-steps-connector-thickness, var(--hx-border-width, 2px));\n min-width: 0;\n background-color: var(--hx-steps-connector-color, var(--hx-color-neutral-200));\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n :host(:last-child) .step__connector {\n display: none;\n }\n\n /* ─── Label Area ─── */\n\n .step__label-area {\n text-align: center;\n margin-top: var(--hx-space-2, 0.5rem);\n width: 100%;\n padding: 0 var(--hx-space-1, 0.25rem);\n }\n\n .step__label {\n font-family: var(--hx-font-family-sans);\n font-size: var(--hx-steps-label-font-size, var(--hx-font-size-sm));\n font-weight: var(--hx-font-weight-medium);\n color: var(--hx-steps-label-color, var(--hx-color-neutral-600));\n line-height: var(--hx-line-height-tight, 1.25);\n }\n\n .step__description {\n font-family: var(--hx-font-family-sans);\n font-size: var(--hx-steps-description-font-size, var(--hx-font-size-xs));\n color: var(--hx-steps-description-color, var(--hx-color-neutral-500));\n margin-top: var(--hx-space-1, 0.25rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Status: active ─── */\n\n /* Active: outlined indicator (in-progress) — visually distinct from complete (filled) */\n :host([status='active']) .step__indicator {\n border-color: var(--hx-color-primary-500);\n background-color: var(--hx-color-primary-500);\n color: var(--hx-color-neutral-0);\n }\n\n :host([status='active']) .step__label {\n color: var(--hx-color-primary-700);\n font-weight: var(--hx-font-weight-semibold);\n }\n\n /* ─── Status: complete ─── */\n\n /* Complete: filled indicator with darker shade — visually distinct from active */\n :host([status='complete']) .step__indicator {\n border-color: var(--hx-color-primary-700);\n background-color: var(--hx-color-primary-700);\n color: var(--hx-color-neutral-0);\n }\n\n :host([status='complete']) .step__connector {\n background-color: var(--hx-steps-connector-complete-color, var(--hx-color-primary-500));\n }\n\n :host([status='complete']) .step__label {\n color: var(--hx-color-neutral-700);\n }\n\n /* ─── Status: error ─── */\n\n :host([status='error']) .step__indicator {\n border-color: var(--hx-color-error-500);\n background-color: var(--hx-color-error-500);\n color: var(--hx-color-neutral-0);\n }\n\n :host([status='error']) .step__label {\n color: var(--hx-color-error-700);\n }\n\n /* ─── Status: disabled ─── */\n\n :host([disabled]) .step {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n :host([disabled]) .step__indicator {\n border-color: var(--hx-color-neutral-300);\n background-color: var(--hx-color-neutral-100);\n color: var(--hx-color-neutral-400);\n }\n\n /* ─── Vertical Layout ─── */\n\n :host([orientation='vertical']) {\n flex: initial;\n width: 100%;\n }\n\n :host([orientation='vertical']) .step {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n :host([orientation='vertical']) .step__track {\n flex-direction: column;\n align-items: center;\n width: auto;\n flex-shrink: 0;\n }\n\n :host([orientation='vertical']) .step__connector {\n width: var(--hx-steps-connector-thickness, var(--hx-border-width, 2px));\n height: auto;\n min-height: var(--hx-space-8, 2rem);\n flex: 1;\n }\n\n :host([orientation='vertical']) .step__label-area {\n text-align: start;\n margin-top: 0;\n padding-bottom: var(--hx-space-4, 1rem);\n padding-inline-start: 0;\n }\n\n :host([orientation='vertical']:last-child) .step__label-area {\n padding-bottom: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .step__indicator {\n transition: none;\n }\n\n .step__connector {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { helixStepStyles } from './hx-step.styles.js';\n\n/**\n * An individual step, designed to be used inside an `<hx-steps>` container.\n * Represents a single step in a multi-step wizard or progress indicator.\n *\n * @summary Individual step item within an `<hx-steps>` progress indicator.\n *\n * @tag hx-step\n *\n * @slot icon - Custom icon for the step indicator. Shown when status is `pending` or `active`.\n * @slot label - Step label text. Falls back to the `label` property.\n * @slot description - Step description text. Falls back to the `description` property.\n *\n * @csspart base - The outermost wrapper element.\n * @csspart indicator - The circular step indicator.\n * @csspart connector - The line connecting this step to the next.\n * @csspart label - The step label element.\n * @csspart description - The step description element.\n *\n * @cssprop [--hx-steps-indicator-size=2rem] - Indicator circle diameter.\n * @cssprop [--hx-steps-indicator-font-size=var(--hx-font-size-sm)] - Indicator text size.\n * @cssprop [--hx-steps-indicator-icon-size=1rem] - Indicator icon size.\n * @cssprop [--hx-steps-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-steps-description-font-size=var(--hx-font-size-xs)] - Description font size.\n * @cssprop [--hx-steps-connector-color=var(--hx-color-neutral-200)] - Connector line color.\n * @cssprop [--hx-steps-connector-complete-color=var(--hx-color-primary-500)] - Connector color when step is complete.\n * @cssprop [--hx-steps-connector-thickness=var(--hx-border-width,2px)] - Connector line thickness.\n * @cssprop [--hx-steps-label-color=var(--hx-color-neutral-600)] - Label text color.\n * @cssprop [--hx-steps-description-color=var(--hx-color-neutral-500)] - Description text color.\n */\n@customElement('hx-step')\nexport class HelixStep extends LitElement {\n static override styles = [helixStepStyles];\n\n // ─── Public Properties ───\n\n /**\n * The step label text.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = '';\n\n /**\n * Current status of the step.\n * @attr status\n */\n @property({ type: String, reflect: true })\n status: 'pending' | 'active' | 'complete' | 'error' = 'pending';\n\n /**\n * Optional description text shown below the label.\n * @attr description\n */\n @property({ type: String, reflect: true })\n description = '';\n\n /**\n * Whether the step is disabled and non-interactive.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n // ─── Internal Properties (set by parent hx-steps) ───\n\n /**\n * Layout orientation. Set by the parent `<hx-steps>` container via JS property.\n * Do not set this attribute directly on `<hx-step>` — use the `orientation`\n * property on the parent `<hx-steps>` container instead. The parent will\n * propagate the value to all child steps via `_syncChildren()`.\n * @internal\n */\n @property({ attribute: false })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Size variant. Set by the parent `<hx-steps>` container via JS property.\n * Do not set this attribute directly on `<hx-step>` — use the `size` property\n * on the parent `<hx-steps>` container instead. The parent will propagate the\n * value to all child steps via `_syncChildren()`.\n * @internal\n */\n @property({ attribute: false })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Zero-based index of this step. Set by the parent `<hx-steps>` container.\n * @internal\n */\n @property({ type: Number })\n index = 0;\n\n // ─── Internal State ───\n\n /**\n * Text for the aria-live region, updated on status transitions.\n * Non-reactive: computed in willUpdate() to avoid an extra render cycle.\n * @internal\n */\n private _liveMessage = '';\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n this.setAttribute('tabindex', this.disabled ? '-1' : '0');\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override willUpdate(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('status')) {\n // STEPS-003: announce status transitions to screen readers via aria-live region.\n // Only announce on transitions (not initial render) by checking the previous value.\n // Using a non-reactive field here avoids scheduling an extra render cycle.\n const prev = changedProperties.get('status');\n if (prev !== undefined) {\n if (this.status === 'complete') {\n this._liveMessage = 'Complete';\n } else if (this.status === 'error') {\n this._liveMessage = 'Error';\n } else {\n this._liveMessage = '';\n }\n }\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('status')) {\n if (this.status === 'active') {\n this.setAttribute('aria-current', 'step');\n } else {\n this.removeAttribute('aria-current');\n }\n }\n if (changedProperties.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('tabindex', '-1');\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.setAttribute('tabindex', '0');\n this.removeAttribute('aria-disabled');\n }\n }\n if (changedProperties.has('orientation')) {\n this.setAttribute('orientation', this.orientation);\n }\n if (changedProperties.has('size')) {\n this.setAttribute('size', this.size);\n }\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this._handleClick();\n }\n };\n\n /** @internal */\n private _handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n /**\n * Internal event dispatched to signal step click to the parent container.\n * @internal\n */\n this.dispatchEvent(\n new CustomEvent<void>('hx-step-click-internal', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderCheckmark() {\n return html`\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M20 6L9 17l-5-5\" />\n </svg>\n <span class=\"sr-only\">Complete</span>\n `;\n }\n\n /** @internal */\n private _renderXMark() {\n return html`\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n >\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n <span class=\"sr-only\">Error</span>\n `;\n }\n\n /** @internal */\n private _renderIndicatorContent() {\n if (this.status === 'complete') {\n return this._renderCheckmark();\n }\n if (this.status === 'error') {\n return this._renderXMark();\n }\n return html`<slot name=\"icon\">${this.index + 1}</slot>`;\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div part=\"base\" class=\"step\" @click=${this._handleClick}>\n <div class=\"step__track\">\n <div part=\"indicator\" class=\"step__indicator\">${this._renderIndicatorContent()}</div>\n <div part=\"connector\" class=\"step__connector\" aria-hidden=\"true\"></div>\n </div>\n <div class=\"step__label-area\">\n <div part=\"label\" class=\"step__label\">\n <slot name=\"label\">${this.label}</slot>\n </div>\n <div part=\"description\" class=\"step__description\">\n <slot name=\"description\">${this.description}</slot>\n </div>\n </div>\n </div>\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveMessage}</div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-step': HelixStep;\n }\n}\n"],"names":["helixStepsStyles","css","HelixSteps","LitElement","e","steps","step","el","index","legacySize","changedProperties","i","html","nothing","__decorateClass","property","customElement","helixStepStyles","HelixStep","event"],"mappings":"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"}

package/dist/shared/{hx-structured-list-Db9rwLI_.js → hx-structured-list-DKlrv7kS.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { css as p, LitElement as h, nothing as x, html as u } from "lit";
+import { css as p, LitElement as h, nothing as b, html as u } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as l, customElement as v } from "lit/decorators.js";
-import { tokenStyles as b } from "@helixui/tokens/lit";
-const m = p`
+const x = p`
   :host {
     display: block;
     --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));
@@ -35,7 +35,7 @@ const m = p`
   :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {
     background: var(--_bg-stripe);
   }
-`, _ = p`
+`, m = p`
   :host {
     display: block;
   }
@@ -75,10 +75,10 @@ const m = p`
     display: none;
   }
 `;
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (c, s, a, o) => {
-  for (var r = o > 1 ? void 0 : o ? g(s, a) : s, i = c.length - 1, d; i >= 0; i--)
+var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (c, s, a, o) => {
+  for (var r = o > 1 ? void 0 : o ? f(s, a) : s, i = c.length - 1, d; i >= 0; i--)
     (d = c[i]) && (r = (o ? d(s, a, r) : d(r)) || r);
-  return o && r && f(s, a, r), r;
+  return o && r && _(s, a, r), r;
 };
 let e = class extends h {
   constructor() {
@@ -89,13 +89,13 @@ let e = class extends h {
   }
   render() {
     return u`
-      <div part="base" class="list" aria-label=${this.label || x}>
+      <div part="base" class="list" aria-label=${this.label || b}>
         <slot></slot>
       </div>
     `;
   }
 };
-e.styles = [b, m];
+e.styles = [x];
 t([
   l({ type: String })
 ], e.prototype, "label", 2);
@@ -131,7 +131,7 @@ let n = class extends h {
     `;
   }
 };
-n.styles = [b, _];
+n.styles = [m];
 n = t([
   v("hx-structured-list-row")
 ], n);
@@ -139,4 +139,4 @@ export {
   e as H,
   n as a
 };
-//# sourceMappingURL=hx-structured-list-Db9rwLI_.js.map
+//# sourceMappingURL=hx-structured-list-DKlrv7kS.js.map

package/dist/shared/hx-structured-list-DKlrv7kS.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-structured-list-DKlrv7kS.js","sources":["../../src/components/hx-structured-list/hx-structured-list.styles.ts","../../src/components/hx-structured-list/hx-structured-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStructuredListStyles = css`\n :host {\n display: block;\n --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));\n --_border-width: var(--hx-structured-list-border-width, var(--hx-border-width-thin, 1px));\n --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f8fafc));\n --_padding-block: var(--hx-structured-list-padding-block, var(--hx-space-4, 1rem));\n --_padding-inline: var(--hx-structured-list-padding-inline, var(--hx-space-4, 1rem));\n }\n\n :host([condensed]) {\n --_padding-block: var(--hx-structured-list-condensed-padding-block, var(--hx-space-2, 0.5rem));\n --_padding-inline: var(\n --hx-structured-list-condensed-padding-inline,\n var(--hx-space-3, 0.75rem)\n );\n }\n\n .list {\n display: block;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n :host([bordered]) .list {\n border: var(--_border-width) solid var(--_border-color);\n border-radius: var(--hx-border-radius-md, 0.375rem);\n overflow: hidden;\n }\n\n :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {\n background: var(--_bg-stripe);\n }\n`;\n\nexport const helixStructuredListRowStyles = css`\n :host {\n display: block;\n }\n\n .row {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n align-items: baseline;\n padding-block: var(--_padding-block, var(--hx-space-4, 1rem));\n padding-inline: var(--_padding-inline, var(--hx-space-4, 1rem));\n gap: var(--hx-space-4, 1rem);\n }\n\n :host(:not(:last-of-type)) .row {\n border-bottom: var(--_border-width, var(--hx-border-width-thin, 1px)) solid\n var(--_border-color, var(--hx-color-neutral-200, #e2e8f0));\n }\n\n .row__label {\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #374151));\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .row__value {\n color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #111827));\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .row__actions {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n .row__actions:empty {\n display: none;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n helixStructuredListStyles,\n helixStructuredListRowStyles,\n} from './hx-structured-list.styles.js';\n\n/**\n * Container for structured key-value data display. Renders as a list with\n * `role=\"list\"` on the host and `role=\"listitem\"` on each `hx-structured-list-row`,\n * preserving the list/listitem relationship across shadow DOM boundaries.\n * Use `hx-structured-list-row` as direct children.\n *\n * @summary Key-value data display container for detail and summary views.\n *\n * @tag hx-structured-list\n *\n * @slot - One or more `hx-structured-list-row` elements.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-structured-list-border-color=var(--hx-color-neutral-200)] - Border color when bordered.\n * @cssprop [--hx-structured-list-border-width=var(--hx-border-width-thin)] - Border width when bordered.\n * @cssprop [--hx-structured-list-stripe-bg=var(--hx-color-neutral-50)] - Stripe background color.\n * @cssprop [--hx-structured-list-padding-block=var(--hx-space-4)] - Row block padding.\n * @cssprop [--hx-structured-list-padding-inline=var(--hx-space-4)] - Row inline padding.\n * @cssprop [--hx-structured-list-condensed-padding-block=var(--hx-space-2)] - Row block padding (condensed).\n * @cssprop [--hx-structured-list-condensed-padding-inline=var(--hx-space-3)] - Row inline padding (condensed).\n */\n@customElement('hx-structured-list')\nexport class HelixStructuredList extends LitElement {\n static override styles = [helixStructuredListStyles];\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Set role on the host element so the list/listitem relationship is\n // preserved in the light DOM tree, crossing shadow boundaries correctly.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'list');\n }\n }\n\n /**\n * Accessible label for the list container. Use when multiple structured lists appear\n * on the same page so screen readers can distinguish them (WCAG 4.1.2).\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Renders a border around the entire list.\n * @attr bordered\n */\n @property({ type: Boolean, reflect: true })\n bordered = false;\n\n /**\n * Reduces row padding for denser layouts.\n * @attr condensed\n */\n @property({ type: Boolean, reflect: true })\n condensed = false;\n\n /**\n * Alternates row background colors for easier scanning.\n * @attr striped\n */\n @property({ type: Boolean, reflect: true })\n striped = false;\n\n override render() {\n return html`\n <div part=\"base\" class=\"list\" aria-label=${this.label || nothing}>\n <slot></slot>\n </div>\n `;\n }\n}\n\n/**\n * A single row within an `hx-structured-list`. Renders a label/value pair\n * with an optional actions area.\n *\n * @summary A label-value row for use inside `hx-structured-list`.\n *\n * @tag hx-structured-list-row\n *\n * @slot label - The term or key label (`<dt>` semantics).\n * @slot - The value or definition (`<dd>` semantics).\n * @slot actions - Optional action controls (edit button, etc.).\n *\n * @csspart base - The root row element.\n * @csspart label - The label (`dt`) cell.\n * @csspart value - The value (`dd`) cell.\n * @csspart actions - The actions cell.\n *\n * @cssprop [--hx-structured-list-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-structured-list-value-color=var(--hx-color-neutral-900)] - Value text color.\n */\n@customElement('hx-structured-list-row')\nexport class HelixStructuredListRow extends LitElement {\n static override styles = [helixStructuredListRowStyles];\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Set role on the host element so screen readers see listitem as a direct\n // child of the hx-structured-list host (which carries role=\"list\"),\n // preserving the list/listitem relationship across shadow boundaries.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n }\n\n override render() {\n return html`\n <div part=\"base\" class=\"row\">\n <div part=\"label\" class=\"row__label\">\n <slot name=\"label\"></slot>\n </div>\n <div part=\"value\" class=\"row__value\">\n <slot></slot>\n <div part=\"actions\" class=\"row__actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-structured-list': HelixStructuredList;\n 'hx-structured-list-row': HelixStructuredListRow;\n }\n}\n"],"names":["helixStructuredListStyles","css","helixStructuredListRowStyles","HelixStructuredList","LitElement","html","nothing","__decorateClass","property","customElement","HelixStructuredListRow"],"mappings":";;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoC5BC,IAA+BD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACPrC,IAAME,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBL,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU;AAAA,EAAA;AAAA,EApCD,oBAA0B;AACjC,UAAM,kBAAA,GAGD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,MAAM;AAAA,EAEpC;AAAA,EA+BS,SAAS;AAChB,WAAOC;AAAA,iDACsC,KAAK,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AAhDaH,EACK,SAAS,CAACH,CAAyB;AAiBnDO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjBfL,EAkBX,WAAA,SAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxB/BL,EAyBX,WAAA,YAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/B/BL,EAgCX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtC/BL,EAuCX,WAAA,WAAA,CAAA;AAvCWA,IAANI,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBN,CAAA;AAuEN,IAAMO,IAAN,cAAqCN,EAAW;AAAA,EAG5C,oBAA0B;AACjC,UAAM,kBAAA,GAID,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,UAAU;AAAA,EAExC;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT;AACF;AA5BaK,EACK,SAAS,CAACR,CAA4B;AAD3CQ,IAANH,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BC,CAAA;"}

package/dist/shared/{hx-style-scope-BroUu83L.js → hx-style-scope-CsQ2Phf_.js} RENAMED Viewed

@@ -1,4 +1,5 @@
 import { css as b, LitElement as x, html as C } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as f, customElement as $ } from "lit/decorators.js";
 const _ = b`
   :host {
@@ -33,10 +34,10 @@ function y(t, r) {
     }
     const o = t.indexOf("{", e);
     if (o === -1) break;
-    const s = t.slice(e, o), h = o + 1, p = g(t, o);
+    const s = t.slice(e, o), h = o + 1, p = m(t, o);
     if (p === -1) break;
-    const m = t.slice(h, p), S = v(s, r);
-    n.push(`${S}{${m}}`), e = p + 1;
+    const g = t.slice(h, p), S = v(s, r);
+    n.push(`${S}{${g}}`), e = p + 1;
   }
   return n.join("");
 }
@@ -65,10 +66,10 @@ function A(t, r) {
     return { text: t.slice(r), end: t.length };
   if (l(t, n) === ";")
     return { text: t.slice(r, n + 1), end: n + 1 };
-  const e = g(t, n);
+  const e = m(t, n);
   return e === -1 ? { text: t.slice(r), end: t.length } : { text: t.slice(r, e + 1), end: e + 1 };
 }
-function g(t, r) {
+function m(t, r) {
   let n = 0;
   for (let e = r; e < t.length; e++) {
     const i = l(t, e);
@@ -122,4 +123,4 @@ c = u([
 export {
   c as H
 };
-//# sourceMappingURL=hx-style-scope-BroUu83L.js.map
+//# sourceMappingURL=hx-style-scope-CsQ2Phf_.js.map

package/dist/shared/{hx-style-scope-BroUu83L.js.map → hx-style-scope-CsQ2Phf_.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-style-scope-BroUu83L.js","sources":["../../src/components/hx-style-scope/hx-style-scope.styles.ts","../../src/utilities/lightStyleRegistry.ts","../../src/utilities/generateScopedSelectors.ts","../../src/utilities/injectLightStyles.ts","../../src/components/hx-style-scope/hx-style-scope.ts"],"sourcesContent":["import { css } from 'lit';\n\n/*\n Styles for hx-style-scope.\n \n The element acts as a transparent wrapper — `display: contents` removes it\n * from the layout box model so slotted children lay out as if the wrapper\n * were absent. This prevents hx-style-scope from introducing unexpected\n * layout shifts or block-formatting-context changes.\n /\nexport const hxStyleScopeStyles = css`\n :host {\n display: contents;\n }\n`;\n","/\n @module lightStyleRegistry\n \n A Map-based registry that tracks which component stylesheets have been\n * injected into the document's light DOM. Used by injectLightStyles to\n * deduplicate style injection — each component type is injected at most once\n * per page load.\n \n @example\n * ```ts\n * import { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\n \n if (!isStyleRegistered('hx-card')) {\n * const el = document.createElement('style');\n * el.textContent = css;\n * document.head.appendChild(el);\n * registerStyle('hx-card', el);\n * }\n * ```\n /\n\n/\n Primary registry mapping component names to their injected HTMLStyleElement.\n * Keyed by component tag name (e.g. `'hx-card'`).\n /\nexport const lightStyleRegistry: Map<string, HTMLStyleElement> = new Map();\n\n/\n Returns true if a stylesheet for the given component has already been\n * injected into the document.\n \n @param componentName - The component tag name (e.g. `'hx-card'`).\n /\nexport function isStyleRegistered(componentName: string): boolean {\n return lightStyleRegistry.has(componentName);\n}\n\n/\n Records a stylesheet element in the registry for the given component.\n * Called after the element has been appended to the document.\n \n @param componentName - The component tag name (e.g. `'hx-card'`).\n * @param el - The HTMLStyleElement that was injected.\n /\nexport function registerStyle(componentName: string, el: HTMLStyleElement): void {\n lightStyleRegistry.set(componentName, el);\n}\n","/\n @module generateScopedSelectors\n \n Generates CSS with all selectors scoped under a `[data-hx-styled=\"componentName\"]`\n * attribute selector. This ensures injected light DOM styles only apply to content\n * wrapped in `<hx-style-scope component=\"...\">` and do not leak to the rest of the page.\n \n @example\n * ```ts\n * import { generateScopedSelectors } from './generateScopedSelectors.js';\n \n const scoped = generateScopedSelectors('hx-card', 'p { color: red; }');\n * // '[data-hx-styled=\"hx-card\"] p { color: red; }'\n * ```\n /\n\n/\n Wraps all CSS selectors to be scoped under `[data-hx-styled=\"componentName\"]`.\n \n Handles:\n * - Standard selectors: `p { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n * - `::slotted()` patterns: `::slotted(p) { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n - At-rules (`@media`, `@supports`, etc.) are preserved with their inner rules scoped\n * - `:host` selectors are replaced with the scope attribute selector\n \n @param componentName - The component tag name used as the scope identifier.\n * @param css - The CSS string to transform.\n * @returns The transformed CSS with all selectors scoped.\n /\nexport function generateScopedSelectors(componentName: string, css: string): string {\n const scopeAttr = `[data-hx-styled=\"${componentName}\"]`;\n return transformCss(css, scopeAttr);\n}\n\n/\n Returns the character at position `i` in `str`, or an empty string if out of bounds.\n * Avoids the `string \| undefined` issue from `noUncheckedIndexedAccess`.\n /\nfunction charAt(str: string, i: number): string {\n return str[i] ?? '';\n}\n\n/\n Recursively transforms CSS text, scoping all selectors under the given\n * attribute selector prefix.\n \n @param css - The CSS text to transform.\n * @param scopeAttr - The attribute selector to prepend (e.g. `[data-hx-styled=\"hx-card\"]`).\n * @returns The scoped CSS string.\n /\nfunction transformCss(css: string, scopeAttr: string): string {\n const result: string[] = [];\n let i = 0;\n const len = css.length;\n\n while (i < len) {\n // Skip whitespace\n while (i < len && /\\s/.test(charAt(css, i))) {\n result.push(charAt(css, i));\n i++;\n }\n\n if (i >= len) break;\n\n // Check for at-rule (e.g. @media, @supports, @keyframes)\n if (charAt(css, i) === '@') {\n const atBlock = extractAtRule(css, i);\n result.push(transformAtRule(atBlock.text, scopeAttr));\n i = atBlock.end;\n continue;\n }\n\n // Extract a selector block up to the opening brace\n const selectorEnd = css.indexOf('{', i);\n if (selectorEnd === -1) break;\n\n const selectorRaw = css.slice(i, selectorEnd);\n const bodyStart = selectorEnd + 1;\n const bodyEnd = findMatchingBrace(css, selectorEnd);\n\n if (bodyEnd === -1) break;\n\n const body = css.slice(bodyStart, bodyEnd);\n const scopedSelector = scopeSelector(selectorRaw, scopeAttr);\n result.push(`${scopedSelector}{${body}}`);\n i = bodyEnd + 1;\n }\n\n return result.join('');\n}\n\n/\n Scopes a raw selector string under the given attribute selector.\n * Handles comma-separated selectors, `::slotted()`, and `:host`.\n \n @param selectorRaw - The raw selector string (may be comma-separated).\n * @param scopeAttr - The attribute selector prefix.\n * @returns The scoped selector string.\n /\nfunction scopeSelector(selectorRaw: string, scopeAttr: string): string {\n return selectorRaw\n .split(',')\n .map((part) => {\n const trimmed = part.trim();\n\n // Replace ::slotted() with a direct descendant selector\n if (trimmed.startsWith('::slotted(') && trimmed.endsWith(')')) {\n const inner = trimmed.slice('::slotted('.length, -1).trim();\n return `${scopeAttr} ${inner}`;\n }\n\n // Replace :host with the scope attribute selector\n if (trimmed === ':host' \|\| trimmed.startsWith(':host(') \|\| trimmed.startsWith(':host ')) {\n return trimmed.replace(/^:host(\$[^)]\$)?/, scopeAttr);\n }\n\n // Standard selector — prepend scope\n return `${scopeAttr} ${trimmed}`;\n })\n .join(', ');\n}\n\n/\n Handles transformation of an at-rule block. For container at-rules\n * (`@media`, `@supports`, `@layer`, `@container`) the inner rules are scoped.\n * Non-container at-rules (e.g. `@keyframes`, `@charset`) are passed through unchanged.\n \n @param atRuleText - The full at-rule text including its block.\n * @param scopeAttr - The attribute selector prefix.\n * @returns The transformed at-rule text.\n /\nfunction transformAtRule(atRuleText: string, scopeAttr: string): string {\n const containerAtRules = /^@(media\|supports\|layer\|container\|document)\\b/;\n const braceIndex = atRuleText.indexOf('{');\n\n if (braceIndex === -1 \|\| !containerAtRules.test(atRuleText.trim())) {\n return atRuleText;\n }\n\n const head = atRuleText.slice(0, braceIndex + 1);\n const innerEnd = atRuleText.lastIndexOf('}');\n const inner = atRuleText.slice(braceIndex + 1, innerEnd);\n const tail = atRuleText.slice(innerEnd);\n\n return `${head}${transformCss(inner, scopeAttr)}${tail}`;\n}\n\n/\n Extracts a complete at-rule (potentially with a block) starting at index `start`.\n * Returns the text and the end index.\n /\nfunction extractAtRule(css: string, start: number): { text: string; end: number } {\n // Find either ';' (simple at-rule) or the matching '{...}' (block at-rule)\n let i = start;\n while (i < css.length && charAt(css, i) !== '{' && charAt(css, i) !== ';') {\n i++;\n }\n\n if (i >= css.length) {\n return { text: css.slice(start), end: css.length };\n }\n\n if (charAt(css, i) === ';') {\n return { text: css.slice(start, i + 1), end: i + 1 };\n }\n\n // Block at-rule — find matching closing brace\n const end = findMatchingBrace(css, i);\n if (end === -1) {\n return { text: css.slice(start), end: css.length };\n }\n\n return { text: css.slice(start, end + 1), end: end + 1 };\n}\n\n/\n Finds the index of the closing `}` that matches the `{` at `openIndex`.\n * Returns -1 if no matching brace is found.\n /\nfunction findMatchingBrace(css: string, openIndex: number): number {\n let depth = 0;\n for (let i = openIndex; i < css.length; i++) {\n const ch = charAt(css, i);\n if (ch === '{') depth++;\n else if (ch === '}') {\n depth--;\n if (depth === 0) return i;\n }\n }\n return -1;\n}\n","/\n @module injectLightStyles\n \n Core utility for injecting scoped `<style>` elements into `document.head`\n * to style light DOM slotted content in HELiX components. Uses the\n * `lightStyleRegistry` to deduplicate — each component type is injected at\n * most once per page lifetime.\n \n This is the primary mechanism for ensuring Drupal-slotted content inherits\n * proper typography and spacing when rendered into HELiX components.\n \n @example\n * ```ts\n * import { injectLightStyles } from '../../utilities/injectLightStyles.js';\n \n // In connectedCallback:\n * injectLightStyles('hx-card', 'p { font-size: var(--hx-font-size-md); }');\n * ```\n /\n\nimport { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\nimport { generateScopedSelectors } from './generateScopedSelectors.js';\n\n/\n Injects a scoped `<style>` element into `document.head` for light DOM content\n * belonging to `componentName`. The CSS is automatically scoped via\n * `generateScopedSelectors` so styles only apply inside\n * `[data-hx-styled=\"componentName\"]` wrappers.\n \n Safe to call multiple times — subsequent calls for the same `componentName`\n * are no-ops (deduplication via `lightStyleRegistry`).\n \n No-op in SSR environments where `document` is not defined.\n \n @param componentName - The component tag name used as the scope identifier\n * (e.g. `'hx-card'`). Must be unique per component type.\n * @param css - The raw CSS to scope and inject. Selectors will be prefixed with\n * `[data-hx-styled=\"componentName\"]`.\n /\nexport function injectLightStyles(componentName: string, css: string): void {\n if (typeof document === 'undefined') return;\n\n if (isStyleRegistered(componentName)) return;\n\n const scopedCss = generateScopedSelectors(componentName, css);\n\n const styleEl = document.createElement('style');\n styleEl.setAttribute('data-hx-light-styles', componentName);\n styleEl.textContent = scopedCss;\n\n document.head.appendChild(styleEl);\n registerStyle(componentName, styleEl);\n}\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hxStyleScopeStyles } from './hx-style-scope.styles.js';\nimport { injectLightStyles } from '../../utilities/injectLightStyles.js';\n\n/\n A transparent wrapper component that injects scoped light DOM styles for its\n * slotted children. Designed for use in Drupal Twig templates where slotted\n * content lives in the light DOM and cannot inherit Shadow DOM styles.\n \n On connection, the component:\n * 1. Sets `data-hx-styled` on itself so scoped CSS selectors resolve correctly.\n * 2. Calls `injectLightStyles` to inject a `<style>` into `document.head` — once\n * per component type, deduplicated via `lightStyleRegistry`.\n \n The element renders as `display: contents` so it does not affect layout.\n \n @summary Scoped light DOM style injection wrapper for Drupal-slotted content.\n \n @tag hx-style-scope\n \n @slot - Default slot for any light DOM content that should receive scoped styles.\n \n @example\n * ```html\n * <hx-style-scope component=\"hx-card\">\n * <p>This paragraph will receive hx-card light DOM styles.</p>\n * </hx-style-scope>\n * ```\n \n @example Drupal Twig usage via macro\n * ```twig\n * {% import '@helix/hx-style-scope.macro.twig' as hx %}\n * {{ hx.scope('hx-card', content) }}\n * ```\n /\n@customElement('hx-style-scope')\nexport class HxStyleScope extends LitElement {\n static override styles = [hxStyleScopeStyles];\n\n /\n The component tag name whose light DOM styles should be injected.\n * Must match a registered component name (e.g. `'hx-card'`).\n \n When set, the element also applies `data-hx-styled` to itself so that\n * scoped CSS selectors generated by `generateScopedSelectors` resolve\n * correctly against slotted child elements.\n \n @attr component\n /\n @property({ type: String, reflect: true })\n component: string = '';\n\n /\n The CSS to inject as scoped light DOM styles. When provided alongside\n * `component`, this CSS will be scoped under `[data-hx-styled=\"component\"]`\n * and injected into `document.head` (once per component type).\n \n If omitted, `injectLightStyles` is still called but with an empty string,\n * which is a no-op for actual style injection.\n \n @attr light-css\n /\n @property({ type: String, attribute: 'light-css' })\n lightCss: string = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._applyScope();\n }\n\n override updated(changed: Map<string, unknown>): void {\n if (changed.has('component') \|\| changed.has('lightCss')) {\n this._applyScope();\n }\n }\n\n /\n Applies the `data-hx-styled` attribute and triggers style injection.\n * Called on connect and whenever `component` or `lightCss` changes.\n */\n private _applyScope(): void {\n if (!this.component) return;\n\n // Set the scoping attribute so CSS selectors from generateScopedSelectors work.\n this.setAttribute('data-hx-styled', this.component);\n\n if (this.lightCss) {\n injectLightStyles(this.component, this.lightCss);\n }\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-style-scope': HxStyleScope;\n }\n}\n"],"names":["hxStyleScopeStyles","css","lightStyleRegistry","isStyleRegistered","componentName","registerStyle","el","generateScopedSelectors","scopeAttr","transformCss","charAt","str","i","result","len","atBlock","extractAtRule","transformAtRule","selectorEnd","selectorRaw","bodyStart","bodyEnd","findMatchingBrace","body","scopedSelector","scopeSelector","part","trimmed","inner","atRuleText","containerAtRules","braceIndex","head","innerEnd","tail","start","end","openIndex","depth","ch","injectLightStyles","scopedCss","styleEl","HxStyleScope","LitElement","changed","html","__decorateClass","property","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-style-scope-CsQ2Phf_.js","sources":["../../src/components/hx-style-scope/hx-style-scope.styles.ts","../../src/utilities/lightStyleRegistry.ts","../../src/utilities/generateScopedSelectors.ts","../../src/utilities/injectLightStyles.ts","../../src/components/hx-style-scope/hx-style-scope.ts"],"sourcesContent":["import { css } from 'lit';\n\n/*\n Styles for hx-style-scope.\n \n The element acts as a transparent wrapper — `display: contents` removes it\n * from the layout box model so slotted children lay out as if the wrapper\n * were absent. This prevents hx-style-scope from introducing unexpected\n * layout shifts or block-formatting-context changes.\n /\nexport const hxStyleScopeStyles = css`\n :host {\n display: contents;\n }\n`;\n","/\n @module lightStyleRegistry\n \n A Map-based registry that tracks which component stylesheets have been\n * injected into the document's light DOM. Used by injectLightStyles to\n * deduplicate style injection — each component type is injected at most once\n * per page load.\n \n @example\n * ```ts\n * import { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\n \n if (!isStyleRegistered('hx-card')) {\n * const el = document.createElement('style');\n * el.textContent = css;\n * document.head.appendChild(el);\n * registerStyle('hx-card', el);\n * }\n * ```\n /\n\n/\n Primary registry mapping component names to their injected HTMLStyleElement.\n * Keyed by component tag name (e.g. `'hx-card'`).\n /\nexport const lightStyleRegistry: Map<string, HTMLStyleElement> = new Map();\n\n/\n Returns true if a stylesheet for the given component has already been\n * injected into the document.\n \n @param componentName - The component tag name (e.g. `'hx-card'`).\n /\nexport function isStyleRegistered(componentName: string): boolean {\n return lightStyleRegistry.has(componentName);\n}\n\n/\n Records a stylesheet element in the registry for the given component.\n * Called after the element has been appended to the document.\n \n @param componentName - The component tag name (e.g. `'hx-card'`).\n * @param el - The HTMLStyleElement that was injected.\n /\nexport function registerStyle(componentName: string, el: HTMLStyleElement): void {\n lightStyleRegistry.set(componentName, el);\n}\n","/\n @module generateScopedSelectors\n \n Generates CSS with all selectors scoped under a `[data-hx-styled=\"componentName\"]`\n * attribute selector. This ensures injected light DOM styles only apply to content\n * wrapped in `<hx-style-scope component=\"...\">` and do not leak to the rest of the page.\n \n @example\n * ```ts\n * import { generateScopedSelectors } from './generateScopedSelectors.js';\n \n const scoped = generateScopedSelectors('hx-card', 'p { color: red; }');\n * // '[data-hx-styled=\"hx-card\"] p { color: red; }'\n * ```\n /\n\n/\n Wraps all CSS selectors to be scoped under `[data-hx-styled=\"componentName\"]`.\n \n Handles:\n * - Standard selectors: `p { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n * - `::slotted()` patterns: `::slotted(p) { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n - At-rules (`@media`, `@supports`, etc.) are preserved with their inner rules scoped\n * - `:host` selectors are replaced with the scope attribute selector\n \n @param componentName - The component tag name used as the scope identifier.\n * @param css - The CSS string to transform.\n * @returns The transformed CSS with all selectors scoped.\n /\nexport function generateScopedSelectors(componentName: string, css: string): string {\n const scopeAttr = `[data-hx-styled=\"${componentName}\"]`;\n return transformCss(css, scopeAttr);\n}\n\n/\n Returns the character at position `i` in `str`, or an empty string if out of bounds.\n * Avoids the `string \| undefined` issue from `noUncheckedIndexedAccess`.\n /\nfunction charAt(str: string, i: number): string {\n return str[i] ?? '';\n}\n\n/\n Recursively transforms CSS text, scoping all selectors under the given\n * attribute selector prefix.\n \n @param css - The CSS text to transform.\n * @param scopeAttr - The attribute selector to prepend (e.g. `[data-hx-styled=\"hx-card\"]`).\n * @returns The scoped CSS string.\n /\nfunction transformCss(css: string, scopeAttr: string): string {\n const result: string[] = [];\n let i = 0;\n const len = css.length;\n\n while (i < len) {\n // Skip whitespace\n while (i < len && /\\s/.test(charAt(css, i))) {\n result.push(charAt(css, i));\n i++;\n }\n\n if (i >= len) break;\n\n // Check for at-rule (e.g. @media, @supports, @keyframes)\n if (charAt(css, i) === '@') {\n const atBlock = extractAtRule(css, i);\n result.push(transformAtRule(atBlock.text, scopeAttr));\n i = atBlock.end;\n continue;\n }\n\n // Extract a selector block up to the opening brace\n const selectorEnd = css.indexOf('{', i);\n if (selectorEnd === -1) break;\n\n const selectorRaw = css.slice(i, selectorEnd);\n const bodyStart = selectorEnd + 1;\n const bodyEnd = findMatchingBrace(css, selectorEnd);\n\n if (bodyEnd === -1) break;\n\n const body = css.slice(bodyStart, bodyEnd);\n const scopedSelector = scopeSelector(selectorRaw, scopeAttr);\n result.push(`${scopedSelector}{${body}}`);\n i = bodyEnd + 1;\n }\n\n return result.join('');\n}\n\n/\n Scopes a raw selector string under the given attribute selector.\n * Handles comma-separated selectors, `::slotted()`, and `:host`.\n \n @param selectorRaw - The raw selector string (may be comma-separated).\n * @param scopeAttr - The attribute selector prefix.\n * @returns The scoped selector string.\n /\nfunction scopeSelector(selectorRaw: string, scopeAttr: string): string {\n return selectorRaw\n .split(',')\n .map((part) => {\n const trimmed = part.trim();\n\n // Replace ::slotted() with a direct descendant selector\n if (trimmed.startsWith('::slotted(') && trimmed.endsWith(')')) {\n const inner = trimmed.slice('::slotted('.length, -1).trim();\n return `${scopeAttr} ${inner}`;\n }\n\n // Replace :host with the scope attribute selector\n if (trimmed === ':host' \|\| trimmed.startsWith(':host(') \|\| trimmed.startsWith(':host ')) {\n return trimmed.replace(/^:host(\$[^)]\$)?/, scopeAttr);\n }\n\n // Standard selector — prepend scope\n return `${scopeAttr} ${trimmed}`;\n })\n .join(', ');\n}\n\n/\n Handles transformation of an at-rule block. For container at-rules\n * (`@media`, `@supports`, `@layer`, `@container`) the inner rules are scoped.\n * Non-container at-rules (e.g. `@keyframes`, `@charset`) are passed through unchanged.\n \n @param atRuleText - The full at-rule text including its block.\n * @param scopeAttr - The attribute selector prefix.\n * @returns The transformed at-rule text.\n /\nfunction transformAtRule(atRuleText: string, scopeAttr: string): string {\n const containerAtRules = /^@(media\|supports\|layer\|container\|document)\\b/;\n const braceIndex = atRuleText.indexOf('{');\n\n if (braceIndex === -1 \|\| !containerAtRules.test(atRuleText.trim())) {\n return atRuleText;\n }\n\n const head = atRuleText.slice(0, braceIndex + 1);\n const innerEnd = atRuleText.lastIndexOf('}');\n const inner = atRuleText.slice(braceIndex + 1, innerEnd);\n const tail = atRuleText.slice(innerEnd);\n\n return `${head}${transformCss(inner, scopeAttr)}${tail}`;\n}\n\n/\n Extracts a complete at-rule (potentially with a block) starting at index `start`.\n * Returns the text and the end index.\n /\nfunction extractAtRule(css: string, start: number): { text: string; end: number } {\n // Find either ';' (simple at-rule) or the matching '{...}' (block at-rule)\n let i = start;\n while (i < css.length && charAt(css, i) !== '{' && charAt(css, i) !== ';') {\n i++;\n }\n\n if (i >= css.length) {\n return { text: css.slice(start), end: css.length };\n }\n\n if (charAt(css, i) === ';') {\n return { text: css.slice(start, i + 1), end: i + 1 };\n }\n\n // Block at-rule — find matching closing brace\n const end = findMatchingBrace(css, i);\n if (end === -1) {\n return { text: css.slice(start), end: css.length };\n }\n\n return { text: css.slice(start, end + 1), end: end + 1 };\n}\n\n/\n Finds the index of the closing `}` that matches the `{` at `openIndex`.\n * Returns -1 if no matching brace is found.\n /\nfunction findMatchingBrace(css: string, openIndex: number): number {\n let depth = 0;\n for (let i = openIndex; i < css.length; i++) {\n const ch = charAt(css, i);\n if (ch === '{') depth++;\n else if (ch === '}') {\n depth--;\n if (depth === 0) return i;\n }\n }\n return -1;\n}\n","/\n @module injectLightStyles\n \n Core utility for injecting scoped `<style>` elements into `document.head`\n * to style light DOM slotted content in HELiX components. Uses the\n * `lightStyleRegistry` to deduplicate — each component type is injected at\n * most once per page lifetime.\n \n This is the primary mechanism for ensuring Drupal-slotted content inherits\n * proper typography and spacing when rendered into HELiX components.\n \n @example\n * ```ts\n * import { injectLightStyles } from '../../utilities/injectLightStyles.js';\n \n // In connectedCallback:\n * injectLightStyles('hx-card', 'p { font-size: var(--hx-font-size-md); }');\n * ```\n /\n\nimport { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\nimport { generateScopedSelectors } from './generateScopedSelectors.js';\n\n/\n Injects a scoped `<style>` element into `document.head` for light DOM content\n * belonging to `componentName`. The CSS is automatically scoped via\n * `generateScopedSelectors` so styles only apply inside\n * `[data-hx-styled=\"componentName\"]` wrappers.\n \n Safe to call multiple times — subsequent calls for the same `componentName`\n * are no-ops (deduplication via `lightStyleRegistry`).\n \n No-op in SSR environments where `document` is not defined.\n \n @param componentName - The component tag name used as the scope identifier\n * (e.g. `'hx-card'`). Must be unique per component type.\n * @param css - The raw CSS to scope and inject. Selectors will be prefixed with\n * `[data-hx-styled=\"componentName\"]`.\n /\nexport function injectLightStyles(componentName: string, css: string): void {\n if (typeof document === 'undefined') return;\n\n if (isStyleRegistered(componentName)) return;\n\n const scopedCss = generateScopedSelectors(componentName, css);\n\n const styleEl = document.createElement('style');\n styleEl.setAttribute('data-hx-light-styles', componentName);\n styleEl.textContent = scopedCss;\n\n document.head.appendChild(styleEl);\n registerStyle(componentName, styleEl);\n}\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hxStyleScopeStyles } from './hx-style-scope.styles.js';\nimport { injectLightStyles } from '../../utilities/injectLightStyles.js';\n\n/\n A transparent wrapper component that injects scoped light DOM styles for its\n * slotted children. Designed for use in Drupal Twig templates where slotted\n * content lives in the light DOM and cannot inherit Shadow DOM styles.\n \n On connection, the component:\n * 1. Sets `data-hx-styled` on itself so scoped CSS selectors resolve correctly.\n * 2. Calls `injectLightStyles` to inject a `<style>` into `document.head` — once\n * per component type, deduplicated via `lightStyleRegistry`.\n \n The element renders as `display: contents` so it does not affect layout.\n \n @summary Scoped light DOM style injection wrapper for Drupal-slotted content.\n \n @tag hx-style-scope\n \n @slot - Default slot for any light DOM content that should receive scoped styles.\n \n @example\n * ```html\n * <hx-style-scope component=\"hx-card\">\n * <p>This paragraph will receive hx-card light DOM styles.</p>\n * </hx-style-scope>\n * ```\n \n @example Drupal Twig usage via macro\n * ```twig\n * {% import '@helix/hx-style-scope.macro.twig' as hx %}\n * {{ hx.scope('hx-card', content) }}\n * ```\n /\n@customElement('hx-style-scope')\nexport class HxStyleScope extends LitElement {\n static override styles = [hxStyleScopeStyles];\n\n /\n The component tag name whose light DOM styles should be injected.\n * Must match a registered component name (e.g. `'hx-card'`).\n \n When set, the element also applies `data-hx-styled` to itself so that\n * scoped CSS selectors generated by `generateScopedSelectors` resolve\n * correctly against slotted child elements.\n \n @attr component\n /\n @property({ type: String, reflect: true })\n component: string = '';\n\n /\n The CSS to inject as scoped light DOM styles. When provided alongside\n * `component`, this CSS will be scoped under `[data-hx-styled=\"component\"]`\n * and injected into `document.head` (once per component type).\n \n If omitted, `injectLightStyles` is still called but with an empty string,\n * which is a no-op for actual style injection.\n \n @attr light-css\n /\n @property({ type: String, attribute: 'light-css' })\n lightCss: string = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._applyScope();\n }\n\n override updated(changed: Map<string, unknown>): void {\n if (changed.has('component') \|\| changed.has('lightCss')) {\n this._applyScope();\n }\n }\n\n /\n Applies the `data-hx-styled` attribute and triggers style injection.\n * Called on connect and whenever `component` or `lightCss` changes.\n */\n private _applyScope(): void {\n if (!this.component) return;\n\n // Set the scoping attribute so CSS selectors from generateScopedSelectors work.\n this.setAttribute('data-hx-styled', this.component);\n\n if (this.lightCss) {\n injectLightStyles(this.component, this.lightCss);\n }\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-style-scope': HxStyleScope;\n }\n}\n"],"names":["hxStyleScopeStyles","css","lightStyleRegistry","isStyleRegistered","componentName","registerStyle","el","generateScopedSelectors","scopeAttr","transformCss","charAt","str","i","result","len","atBlock","extractAtRule","transformAtRule","selectorEnd","selectorRaw","bodyStart","bodyEnd","findMatchingBrace","body","scopedSelector","scopeSelector","part","trimmed","inner","atRuleText","containerAtRules","braceIndex","head","innerEnd","tail","start","end","openIndex","depth","ch","injectLightStyles","scopedCss","styleEl","HxStyleScope","LitElement","changed","html","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-switch-C0Lp5RGy.js → hx-switch-BzMN37PV.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { css as p, LitElement as x, nothing as o, html as c } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as s, query as _, state as m, customElement as w } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const b = p`
+const f = p`
   :host {
     display: block;
   }
@@ -173,10 +173,10 @@ const b = p`
     }
   }
 `;
-var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (t, r, l, a) => {
-  for (var h = a > 1 ? void 0 : a ? k(r, l) : r, n = t.length - 1, d; n >= 0; n--)
+var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (t, r, l, a) => {
+  for (var h = a > 1 ? void 0 : a ? g(r, l) : r, n = t.length - 1, d; n >= 0; n--)
     (d = t[n]) && (h = (a ? d(r, l, h) : d(h)) || h);
-  return a && h && g(r, l, h), h;
+  return a && h && b(r, l, h), h;
 };
 let e = class extends x {
   constructor() {
@@ -322,7 +322,7 @@ let e = class extends x {
     `;
   }
 };
-e.styles = [f, b];
+e.styles = [f];
 e._instanceCounter = 0;
 e.formAssociated = !0;
 i([
@@ -370,4 +370,4 @@ e = i([
 export {
   e as H
 };
-//# sourceMappingURL=hx-switch-C0Lp5RGy.js.map
+//# sourceMappingURL=hx-switch-BzMN37PV.js.map