@helixui/library 3.1.0-next.66 → 3.1.0-next.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +357 -357
- package/dist/components/hx-code-snippet/hx-code-snippet.styles.d.ts.map +1 -1
- package/dist/components/hx-code-snippet/index.js +1 -1
- package/dist/components/hx-rating/index.js +1 -1
- package/dist/components/hx-stat/index.js +1 -1
- package/dist/components/hx-status-indicator/index.js +1 -1
- package/dist/components/hx-steps/index.js +1 -1
- package/dist/components/hx-table/index.js +1 -1
- package/dist/components/hx-theme/hx-theme.d.ts.map +1 -1
- package/dist/components/hx-theme/index.js +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/css/helix-all.css +35 -32
- package/dist/css/helix-data.css +23 -20
- package/dist/css/helix-feedback.css +10 -10
- package/dist/css/helix-forms.css +2 -2
- package/dist/css/hx-code-snippet.css +18 -15
- package/dist/css/hx-rating.css +2 -2
- package/dist/css/hx-stat.css +3 -3
- package/dist/css/hx-status-indicator.css +1 -1
- package/dist/css/hx-table.css +5 -5
- package/dist/css/hx-toast.css +6 -6
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +21 -18
- package/dist/index.js +8 -8
- package/dist/shared/{hx-code-snippet-B7wUKzyb.js → hx-code-snippet-DssubcYM.js} +27 -24
- package/dist/shared/hx-code-snippet-DssubcYM.js.map +1 -0
- package/dist/shared/{hx-rating-C3E3ENJb.js → hx-rating-BO9kl9pb.js} +33 -33
- package/dist/shared/hx-rating-BO9kl9pb.js.map +1 -0
- package/dist/shared/{hx-stat-BTpykQAt.js → hx-stat-DTRyLF3a.js} +8 -8
- package/dist/shared/{hx-stat-BTpykQAt.js.map → hx-stat-DTRyLF3a.js.map} +1 -1
- package/dist/shared/{hx-status-indicator-X2QEWNFt.js → hx-status-indicator-DIGRGM2G.js} +6 -6
- package/dist/shared/{hx-status-indicator-X2QEWNFt.js.map → hx-status-indicator-DIGRGM2G.js.map} +1 -1
- package/dist/shared/{hx-step-CRNQlmSo.js → hx-step-D15gtcLm.js} +33 -33
- package/dist/shared/hx-step-D15gtcLm.js.map +1 -0
- package/dist/shared/{hx-td-Bra35cH4.js → hx-td-B737T0_c.js} +45 -45
- package/dist/shared/hx-td-B737T0_c.js.map +1 -0
- package/dist/shared/{hx-theme-DP4oPU1i.js → hx-theme-BiyQ7UUK.js} +3 -1
- package/dist/shared/hx-theme-BiyQ7UUK.js.map +1 -0
- package/dist/shared/{toast-factory-BPPnG3mM.js → toast-factory-M373dTcz.js} +28 -28
- package/dist/shared/toast-factory-M373dTcz.js.map +1 -0
- package/package.json +2 -2
- package/dist/shared/hx-code-snippet-B7wUKzyb.js.map +0 -1
- package/dist/shared/hx-rating-C3E3ENJb.js.map +0 -1
- package/dist/shared/hx-step-CRNQlmSo.js.map +0 -1
- package/dist/shared/hx-td-Bra35cH4.js.map +0 -1
- package/dist/shared/hx-theme-DP4oPU1i.js.map +0 -1
- package/dist/shared/toast-factory-BPPnG3mM.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@helixui/library",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.68",
|
|
4
4
|
"description": "Enterprise Web Component Library built with Lit 3.x",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"customElements": "custom-elements.json",
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"lit": "^3.3.2",
|
|
62
|
-
"@helixui/tokens": "3.0.0-next.
|
|
62
|
+
"@helixui/tokens": "3.0.0-next.68"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"@floating-ui/dom": "^1.7.6"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-code-snippet-B7wUKzyb.js","sources":["../../src/components/hx-code-snippet/hx-code-snippet.styles.ts","../../src/components/hx-code-snippet/hx-code-snippet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCodeSnippetStyles = css`\n :host {\n display: block;\n }\n\n :host([inline]) {\n display: inline;\n }\n\n /* ─── Inline Mode ─── */\n\n .code-snippet--inline {\n display: inline;\n font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));\n background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));\n color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));\n padding: var(--hx-code-snippet-inline-padding-y, 0.125em)\n var(--hx-code-snippet-inline-padding-x, 0.375em);\n border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));\n }\n\n /* ─── Block Mode Container ─── */\n\n .code-snippet {\n position: relative;\n background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));\n border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));\n overflow: hidden;\n }\n\n /* ─── Hidden Slot ─── */\n\n .code-snippet__slot {\n display: none;\n }\n\n /* ─── Header ─── */\n\n .code-snippet__header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-2, 0.5rem) 0;\n min-height: var(--hx-space-8, 2rem);\n }\n\n /* ─── Pre / Code ─── */\n\n .code-snippet__pre {\n margin: 0;\n padding: var(--hx-code-snippet-padding, var(--hx-space-4, 1rem));\n overflow-x: auto;\n white-space: pre;\n }\n\n .code-snippet__pre--wrap {\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .code-snippet__code {\n display: block;\n font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));\n line-height: var(--hx-line-height-relaxed, 1.75);\n color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));\n tab-size: var(--hx-code-snippet-tab-size, 2);\n }\n\n /* ─── Copy Button ─── */\n\n .code-snippet__copy-button {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n /* WCAG 2.5.5: minimum 44×44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background-color: var(--hx-color-neutral-800, #1e293b);\n color: var(--hx-color-neutral-200, #e2e8f0);\n font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-xs, 0.75rem);\n font-weight: var(--hx-font-weight-medium, 500);\n line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease);\n white-space: nowrap;\n z-index: 1; /* @audit-exception: local stacking context within shadow root */\n }\n\n .code-snippet__copy-button:hover {\n background-color: var(--hx-color-neutral-700, #334155);\n border-color: var(--hx-color-neutral-500, #64748b);\n }\n\n .code-snippet__copy-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .code-snippet__copy-button:active {\n /* Non-standard token — fallback 0.8 applies if token is absent */\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Expand Button ─── */\n\n .code-snippet__expand-button {\n display: block;\n width: 100%;\n /* WCAG 2.5.5: minimum 44×44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n border: none;\n border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);\n background-color: var(--hx-color-neutral-800, #1e293b);\n color: var(--hx-color-neutral-300, #cbd5e1);\n font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n text-align: center;\n cursor: pointer;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n .code-snippet__expand-button:hover {\n background-color: var(--hx-color-neutral-700, #334155);\n color: var(--hx-color-neutral-100, #f1f5f9);\n }\n\n .code-snippet__expand-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Line Numbers ─── */\n\n .code-snippet__line-number {\n display: inline-block;\n min-width: var(--hx-space-8, 2rem);\n padding-inline-end: var(--hx-space-3, 0.75rem);\n color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));\n user-select: none;\n text-align: end;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .code-snippet__copy-button {\n transition: none;\n }\n\n .code-snippet__expand-button {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .code-snippet {\n border: 1px solid CanvasText;\n }\n\n .code-snippet--inline {\n border: 1px solid CanvasText;\n }\n\n .code-snippet__copy-button {\n border-color: ButtonText;\n color: ButtonText;\n }\n\n .code-snippet__expand-button {\n border-top-color: CanvasText;\n color: ButtonText;\n }\n }\n\n /* ─── Screen-reader 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: 0;\n }\n`;\n","import { html, nothing, TemplateResult } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { HelixElement } from '../../base/index.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixCodeSnippetStyles } from './hx-code-snippet.styles.js';\n\n/**\n * A styled code block with optional copy button and max-lines truncation.\n * Supports block (`<pre><code>`) and inline (`<code>`) rendering modes.\n * No external syntax highlighting dependency — use the `language` attribute\n * as a hint for consumers integrating their own highlighter via slotted content.\n *\n * @summary Styled code display component with copy-to-clipboard and expand/collapse.\n *\n * @tag hx-code-snippet\n *\n * @slot - Code content as plain text. Note: HTML markup in slot content will be\n * stripped — only text content is extracted. Pre-highlighted HTML is not supported.\n *\n * @fires {CustomEvent<{text: string}>} hx-copy - Dispatched when the copy button is clicked.\n *\n * @csspart base - The outermost container (block: `<div>`, inline: `<code>`).\n * @csspart header - The header bar containing the copy button (block mode only).\n * @csspart code - The `<code>` element containing the content.\n * @csspart copy-button - The copy-to-clipboard button.\n * @csspart expand-button - The \"Show more / Show less\" button.\n *\n * @cssprop [--hx-code-snippet-bg=var(--hx-color-neutral-900,#0f172a)] - Background color.\n * @cssprop [--hx-code-snippet-color=var(--hx-color-neutral-100,#f1f5f9)] - Text color.\n * @cssprop [--hx-code-snippet-font-family=var(--hx-font-family-mono,monospace)] - Font family.\n * @cssprop [--hx-code-snippet-font-size=var(--hx-font-size-sm,0.875rem)] - Font size.\n * @cssprop [--hx-code-snippet-border-radius=var(--hx-border-radius-md,0.375rem)] - Border radius.\n * @cssprop [--hx-code-snippet-padding=var(--hx-space-4,1rem)] - Inner padding (block mode).\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-code-snippet-inline-bg=var(--hx-color-neutral-100)] - Background color.\n * @cssprop [--hx-code-snippet-inline-color=var(--hx-color-neutral-900)] - Color.\n * @cssprop [--hx-code-snippet-inline-padding-x=0.375em] - Padding.\n * @cssprop [--hx-code-snippet-inline-padding-y=0.125em] - Padding.\n * @cssprop [--hx-code-snippet-line-number-color=var(--hx-color-neutral-500)] - Color.\n * @cssprop [--hx-code-snippet-tab-size=2] - Number of spaces per tab character.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-mono] - Font family.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-line-height-relaxed] - Line height.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-8] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n */\n@customElement('hx-code-snippet')\nexport class HelixCodeSnippet extends HelixElement {\n static override styles = [helixCodeSnippetStyles];\n\n // ─── Public Properties ───\n\n /**\n * Language hint for consumers to apply syntax highlighting.\n * Does not affect rendering directly; it is applied as a `language-*` class\n * on the `<code>` element so external highlighters can target it.\n * @attr language\n */\n @property({ type: String, reflect: true })\n language: string = '';\n\n /**\n * When true, renders as an inline `<code>` element instead of a `<pre><code>` block.\n * @attr inline\n */\n @property({ type: Boolean, reflect: true })\n inline: boolean = false;\n\n /**\n * When true, enables word-wrap in block mode.\n * @attr wrap\n */\n @property({ type: Boolean, reflect: true })\n wrap: boolean = false;\n\n /**\n * When true, shows a copy-to-clipboard button. Add the `copyable` attribute to enable it.\n * @attr copyable\n */\n @property({ type: Boolean, reflect: true })\n copyable: boolean = false;\n\n /**\n * Maximum number of lines to display before showing a \"Show more\" button.\n * Set to 0 (default) to disable truncation.\n * @attr max-lines\n */\n @property({ type: Number, attribute: 'max-lines', reflect: true })\n maxLines: number = 0;\n\n /**\n * When true, prepends line numbers to each displayed line in block mode.\n * Line numbers are rendered as `aria-hidden` spans so screen readers skip them.\n * @attr line-numbers\n */\n @property({ type: Boolean, attribute: 'line-numbers', reflect: true })\n lineNumbers: boolean = false;\n\n /**\n * Label for the copy button in idle state.\n * @attr label-copy\n */\n @property({ type: String, attribute: 'label-copy' })\n labelCopy = 'Copy code';\n\n /**\n * Label for the copy button after successful copy.\n * @attr label-copied\n */\n @property({ type: String, attribute: 'label-copied' })\n labelCopied = 'Copied!';\n\n /**\n * Label for the expand button when content is collapsed.\n * @attr label-show-more\n */\n @property({ type: String, attribute: 'label-show-more' })\n labelShowMore = 'Show more';\n\n /**\n * Label for the expand button when content is expanded.\n * @attr label-show-less\n */\n @property({ type: String, attribute: 'label-show-less' })\n labelShowLess = 'Show less';\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _copied: boolean = false;\n /** @internal */\n @state() private _expanded: boolean = false;\n /** @internal */\n @state() private _codeText: string = '';\n\n /** @internal */\n private _copyTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Lifecycle ───\n\n override firstUpdated(): void {\n // Prevent flash of empty <code> before slotchange fires by eagerly reading\n // text content from host children that are already present on first render.\n if (!this._codeText) {\n const text = this.textContent?.trim() ?? '';\n if (text) {\n this._codeText = text;\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this._copyTimer !== null) {\n clearTimeout(this._copyTimer);\n this._copyTimer = null;\n }\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement | null;\n if (!slot) return;\n const nodes = slot.assignedNodes({ flatten: true });\n this._codeText = nodes.map((n) => n.textContent ?? '').join('');\n }\n\n /** @internal */\n private _handleCopy(): void {\n const text = this._codeText;\n\n navigator?.clipboard?.writeText(text).catch(() => {\n // Clipboard API unavailable (non-HTTPS environments such as Drupal staging) — emit event only.\n // Note: navigator.clipboard requires a secure context (HTTPS or localhost).\n // On HTTP, the copy event still fires but the clipboard is not populated.\n });\n\n this.dispatchEvent(\n new CustomEvent<{ text: string }>('hx-copy', {\n bubbles: true,\n composed: true,\n detail: { text },\n }),\n );\n\n this._copied = true;\n if (this._copyTimer !== null) clearTimeout(this._copyTimer);\n this._copyTimer = setTimeout(() => {\n this._copied = false;\n }, 2000);\n }\n\n /** @internal */\n private _handleExpand(): void {\n this._expanded = !this._expanded;\n }\n\n // ─── Helpers ───\n\n /** @internal */\n private _getDisplayLines(): string[] {\n const lines = this._codeText.split('\\n');\n if (!this.maxLines || this.maxLines <= 0 || this._expanded) {\n return lines;\n }\n if (lines.length <= this.maxLines) {\n return lines;\n }\n return lines.slice(0, this.maxLines);\n }\n\n /** @internal */\n private _isTruncated(): boolean {\n if (!this.maxLines || this.maxLines <= 0) return false;\n const lines = this._codeText.split('\\n');\n return lines.length > this.maxLines;\n }\n\n /** @internal */\n private _renderLines(lines: string[]): TemplateResult {\n if (!this.lineNumbers) {\n return html`${lines.join('\\n')}`;\n }\n return html`${lines.map(\n (line, i) =>\n html`<span aria-hidden=\"true\" class=\"code-snippet__line-number\">${i + 1}</span>${line +\n '\\n'}`,\n )}`;\n }\n\n // ─── Render ───\n\n override render(): TemplateResult | typeof nothing {\n if (this.inline) {\n return html`\n <code part=\"base code\" class=\"code-snippet code-snippet--inline\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </code>\n `;\n }\n\n const displayLines = this._getDisplayLines();\n const truncated = this._isTruncated();\n const preLabel = this.language ? `Code snippet: ${this.language}` : 'Code snippet';\n const codeClasses = classMap({\n 'code-snippet__code': true,\n [`language-${this.language}`]: Boolean(this.language),\n });\n\n return html`\n <div part=\"base\" class=\"code-snippet\">\n <div part=\"header\" class=\"code-snippet__header\">\n ${this.copyable\n ? html`\n <button\n part=\"copy-button\"\n class=\"code-snippet__copy-button\"\n type=\"button\"\n aria-label=${this._copied ? this.labelCopied : this.labelCopy}\n @click=${this._handleCopy}\n >\n ${this._copied ? this.labelCopied : this.labelCopy}\n </button>\n `\n : nothing}\n </div>\n\n <!-- Visually-hidden live region announces copy confirmation to assistive technology -->\n <span\n aria-live=\"polite\"\n style=\"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;\"\n >${this._copied ? this.labelCopied : ''}</span\n >\n\n <pre\n role=\"region\"\n aria-label=${preLabel}\n class=${classMap({\n 'code-snippet__pre': true,\n 'code-snippet__pre--wrap': this.wrap,\n })}\n ><code part=\"code\" class=${codeClasses}>${this._renderLines(displayLines)}</code></pre>\n\n <!-- Hidden slot to capture text content for display and copy -->\n <slot class=\"code-snippet__slot\" @slotchange=${this._handleSlotChange}></slot>\n\n ${truncated\n ? html`\n <button\n part=\"expand-button\"\n class=\"code-snippet__expand-button\"\n type=\"button\"\n aria-expanded=${this._expanded ? 'true' : 'false'}\n @click=${this._handleExpand}\n >\n ${this._expanded ? this.labelShowLess : this.labelShowMore}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-code-snippet': HelixCodeSnippet;\n }\n}\n"],"names":["helixCodeSnippetStyles","css","HelixCodeSnippet","HelixElement","text","_a","slot","nodes","n","lines","html","line","i","displayLines","truncated","preLabel","codeClasses","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-rating-C3E3ENJb.js","sources":["../../src/components/hx-rating/hx-rating.styles.ts","../../src/components/hx-rating/hx-rating.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixRatingStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Base Container ─── */\n\n .base {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-rating-gap, var(--hx-space-1, 0.25rem));\n font-size: var(--hx-rating-size, var(--hx-font-size-xl, 1.25rem));\n }\n\n .base--readonly {\n cursor: default;\n }\n\n .base--disabled {\n cursor: not-allowed;\n }\n\n /* ─── Symbol (each star) ─── */\n\n .symbol {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));\n line-height: 1;\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n .symbol:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n .symbol--full,\n .symbol--half {\n color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));\n }\n\n .symbol--disabled {\n cursor: not-allowed;\n }\n\n .base:not(.base--readonly) .symbol:hover {\n transform: scale(1.15);\n color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));\n }\n\n /* ─── Half-Star Layout ─── */\n\n .star-half {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 1em;\n height: 1em;\n }\n\n .star-half__filled {\n position: absolute;\n left: 0;\n top: 0;\n /* Clip to left 50% for the filled half */\n clip-path: inset(0 50% 0 0);\n }\n\n .star-half__empty {\n position: absolute;\n left: 0;\n top: 0;\n color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #cbd5e1));\n /* Clip to right 50% for the empty half */\n clip-path: inset(0 0 0 50%);\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .symbol {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .symbol {\n forced-color-adjust: none;\n color: ButtonText;\n }\n\n .symbol:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .symbol--full,\n .symbol--half {\n color: Highlight;\n }\n\n .star-half__empty {\n color: ButtonText;\n }\n\n .base:not(.base--readonly) .symbol:hover {\n color: Highlight;\n }\n\n .symbol--disabled {\n color: GrayText;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n :host([disabled]) .symbol {\n color: GrayText;\n }\n }\n`;\n","// @vrt-approved: A11Y-RATING-001 No VRT snapshots exist for hx-rating yet; this fix\n// corrects a WCAG 2.5.3 accessibility violation and does not change visual appearance.\n// VRT infrastructure for hx-rating to be added as a follow-up.\n// @accessibility-engineer-approved: A11Y-RATING-001\n// Star <span> elements are children of role=\"radiogroup\" or role=\"slider\" containers.\n// Keyboard navigation is handled at the container level (WAI-ARIA composite widget pattern)\n// per https://www.w3.org/WAI/ARIA/apg/patterns/radio/ and\n// https://www.w3.org/WAI/ARIA/apg/patterns/slider/. Individual star spans are not\n// keyboard focus targets — the container div receives @keydown. In the precision=0.5\n// slider branch, star spans carry role=\"presentation\" aria-hidden=\"true\" and are purely\n// decorative click/hover targets with no independent keyboard accessibility obligation.\n\nimport { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixRatingStyles } from './hx-rating.styles.js';\n\n// ─── Event Detail Interfaces ───\n\n/** Detail payload for the hx-change event. */\nexport interface HxRatingChangeDetail {\n /** The new rating value after the change. */\n value: number;\n}\n\n/** Detail payload for the hx-hover event. */\nexport interface HxRatingHoverDetail {\n /** The rating value being previewed on hover. */\n value: number;\n}\n\n/**\n * A star rating input component for user feedback and display.\n * Supports whole and half-star ratings, keyboard navigation, hover preview,\n * and native form participation via ElementInternals.\n *\n * ### Accessibility\n *\n * - **Interactive mode (precision=1)**: Uses `role=\"radiogroup\"` with individual `role=\"radio\"` stars.\n * Each star has `aria-label` (\"1 star\", \"2 stars\", etc.) and `aria-checked`.\n * - **Interactive mode (precision=0.5)**: Uses `role=\"slider\"` with `aria-valuemin`, `aria-valuemax`,\n * `aria-valuenow`, and `aria-valuetext` (e.g. \"2.5 out of 5 stars\"). Star elements are\n * `aria-hidden=\"true\"` decorative visuals. This avoids a WCAG 2.5.3 label-content-name mismatch\n * that would occur if a `role=\"radio\"` labeled \"3 stars\" were checked for a value of 2.5.\n * - **Readonly mode**: Uses `role=\"img\"` with a descriptive `aria-label` (\"Rating: 3 out of 5\").\n * - **Keyboard**: Arrow keys (Left/Right/Up/Down) adjust value by `precision` step.\n * Home sets to 0, End sets to `max`. Focus follows the active tab stop.\n * - **Disabled**: Sets `aria-disabled=\"true\"` on the group and prevents interaction.\n *\n * @summary Star rating input for user feedback and display.\n *\n * @tag hx-rating\n *\n * @slot icon - Custom rating icon. Receives `data-state` attribute (\"full\" | \"half\" | \"empty\").\n *\n * @fires {CustomEvent<HxRatingChangeDetail>} hx-change - Dispatched when the rating value changes.\n * @fires {CustomEvent<HxRatingHoverDetail>} hx-hover - Dispatched while hovering over a star for preview.\n *\n * @csspart base - The outer container element.\n * @csspart symbol - Each individual star/icon element.\n *\n * @cssprop [--hx-rating-color=var(--hx-color-warning-400,#fbbf24)] - Filled star color.\n * @cssprop [--hx-rating-empty-color=var(--hx-color-neutral-300,#d1d5db)] - Empty star color.\n * @cssprop [--hx-rating-hover-color=var(--hx-color-warning-300,#fcd34d)] - Star color on hover.\n * @cssprop [--hx-rating-size=var(--hx-font-size-xl,1.25rem)] - Star icon size.\n * @cssprop [--hx-rating-gap=var(--hx-space-1,0.25rem)] - Gap between stars.\n *\n * @example\n * ```html\n * <!-- Interactive rating -->\n * <hx-rating value=\"3\" max=\"5\" label=\"Product rating\"></hx-rating>\n *\n * <!-- Read-only display -->\n * <hx-rating value=\"4.5\" max=\"5\" precision=\"0.5\" readonly></hx-rating>\n * ```\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-warning-400] - Color.\n * @cssprop [--hx-color-warning-300] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n */\n@customElement('hx-rating')\nexport class HelixRating extends FormMixin(HelixElement) {\n static override styles = [helixRatingStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /**\n * The current rating value (0 to max).\n * @attr value\n */\n @property({ type: Number, reflect: true })\n value = 0;\n\n /**\n * The maximum number of stars.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 5;\n\n /**\n * The minimum selectable increment. Use 0.5 for half-star ratings.\n * @attr precision\n */\n @property({ type: Number, reflect: true })\n precision: 0.5 | 1 = 1;\n\n /**\n * When true, the rating is display-only and cannot be changed.\n * @attr readonly\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * When true, the rating is disabled and cannot be interacted with.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The name submitted with the form.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n /**\n * Accessible label for the rating group.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * When true, a non-zero rating is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Generates the accessible label for individual star elements.\n * Handles singular/plural automatically.\n * @param count - star count (1-based)\n */\n @property({ attribute: false })\n labelStar: (count: number) => string = (count) => (count === 1 ? '1 star' : `${count} stars`);\n\n /**\n * Generates the aria-valuetext for the composite rating widget.\n * @param value - current rating value\n * @param max - maximum rating value\n */\n @property({ attribute: false })\n labelValueText: (value: number, max: number) => string = (value, max) =>\n `${value} out of ${max} stars`;\n\n /** @internal */\n @state() private _hoverValue: number | null = null;\n\n /** @internal */\n private _defaultValue = 0;\n\n // ─── Lifecycle ───\n\n override firstUpdated(): void {\n this._defaultValue = this.value;\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('value') || changedProps.has('name')) {\n this._internals.setFormValue(String(this.value));\n }\n }\n\n protected override _onFormReset(): void {\n this.value = this._defaultValue;\n this._internals.setFormValue(String(this._defaultValue));\n this._resetInteractionState();\n }\n\n protected override _onFormStateRestore(\n state: string | File | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n const parsed = parseFloat(state);\n if (!isNaN(parsed)) {\n this.value = parsed;\n this._internals.setFormValue(state);\n }\n }\n }\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n /** @internal */\n override _updateValidity(): void {\n if (this.required && this.value === 0) {\n this._internals.setValidity(\n { valueMissing: true },\n 'Please select a rating.',\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"base\"]') ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n // ─── Helpers ───\n\n /** @internal */\n private get _displayValue(): number {\n return this._hoverValue ?? this.value;\n }\n\n /** @internal */\n private _clampAndSnap(v: number): number {\n const clamped = Math.min(Math.max(0, v), this.max);\n const steps = Math.round(clamped / this.precision);\n const snapped = steps * this.precision;\n return parseFloat(snapped.toFixed(this.precision === 0.5 ? 1 : 0));\n }\n\n /** @internal */\n private _ariaValueText(): string {\n return this.labelValueText(this.value, this.max);\n }\n\n /** @internal */\n private _getStarState(i: number): 'full' | 'half' | 'empty' {\n const dv = this._displayValue;\n if (dv >= i) return 'full';\n if (this.precision === 0.5 && dv >= i - 0.5) return 'half';\n return 'empty';\n }\n\n /** Star i is \"checked\" when its integer value or its half-value matches the current value. */\n /** @internal */\n private _isChecked(i: number): boolean {\n if (Math.abs(this.value - i) < 0.01) return true;\n if (this.precision === 0.5 && Math.abs(this.value - (i - 0.5)) < 0.01) return true;\n return false;\n }\n\n /** Resolve the clicked/hovered value from mouse position within a star element. */\n /** @internal */\n private _resolveValue(e: MouseEvent, i: number): number {\n if (this.precision === 0.5) {\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n const isLeftHalf = (e.clientX - rect.left) / rect.width < 0.5;\n return isLeftHalf ? i - 0.5 : i;\n }\n return i;\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _setValue(v: number): void {\n if (this.readonly || this.disabled) return;\n const next = this._clampAndSnap(v);\n this.value = next;\n this._internals.setFormValue(String(next));\n this._handleInteractionInput();\n this.dispatchEvent(\n new CustomEvent<HxRatingChangeDetail>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: next },\n }),\n );\n }\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (this.readonly || this.disabled) return;\n let next: number | null = null;\n\n switch (e.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n e.preventDefault();\n next = this._clampAndSnap(this.value + this.precision);\n break;\n case 'ArrowLeft':\n case 'ArrowDown':\n e.preventDefault();\n next = this._clampAndSnap(this.value - this.precision);\n break;\n case 'Home':\n e.preventDefault();\n next = 0;\n break;\n case 'End':\n e.preventDefault();\n next = this.max;\n break;\n default:\n return;\n }\n\n if (next !== null) {\n this._setValue(next);\n if (this.precision !== 0.5) {\n void this.updateComplete.then(() => {\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"symbol\"][tabindex=\"0\"]')?.focus();\n });\n }\n }\n }\n\n /** @internal */\n private _handleSymbolClick(e: MouseEvent, i: number): void {\n if (this.readonly || this.disabled) return;\n this._setValue(this._resolveValue(e, i));\n }\n\n /** @internal */\n private _handleSymbolMouseEnter(e: MouseEvent, i: number): void {\n if (this.readonly || this.disabled) return;\n const val = this._resolveValue(e, i);\n this._hoverValue = val;\n this.dispatchEvent(\n new CustomEvent<HxRatingHoverDetail>('hx-hover', {\n bubbles: true,\n composed: true,\n detail: { value: val },\n }),\n );\n }\n\n /** @internal */\n private _handleSymbolMouseMove(e: MouseEvent, i: number): void {\n if (this.readonly || this.disabled || this.precision !== 0.5) return;\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n const isLeftHalf = (e.clientX - rect.left) / rect.width < 0.5;\n const val = isLeftHalf ? i - 0.5 : i;\n if (val !== this._hoverValue) {\n this._hoverValue = val;\n this.dispatchEvent(\n new CustomEvent<HxRatingHoverDetail>('hx-hover', {\n bubbles: true,\n composed: true,\n detail: { value: val },\n }),\n );\n }\n }\n\n /** @internal */\n private _handleMouseLeave(): void {\n this._hoverValue = null;\n }\n\n // ─── SVG Star Icons ───\n\n /** @internal */\n private _renderFullStar() {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n >\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n />\n </svg>\n `;\n }\n\n /** @internal */\n private _renderHalfStar() {\n return html`\n <span class=\"star-half\" aria-hidden=\"true\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"1em\"\n height=\"1em\"\n class=\"star-half__filled\"\n >\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n />\n </svg>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n width=\"1em\"\n height=\"1em\"\n class=\"star-half__empty\"\n >\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n />\n </svg>\n </span>\n `;\n }\n\n /** @internal */\n private _renderEmptyStar() {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n >\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n />\n </svg>\n `;\n }\n\n /** @internal */\n private _renderStarIcon(state: 'full' | 'half' | 'empty') {\n if (state === 'full') return this._renderFullStar();\n if (state === 'half') return this._renderHalfStar();\n return this._renderEmptyStar();\n }\n\n // ─── Render ───\n\n override render() {\n // Interactive mode: fall back to 'Rating' so the group/slider always has a name.\n const ariaLabel = this.label || 'Rating';\n\n // WCAG 4.1.2: in readonly mode, build the aria-label from the consumer-provided\n // `label` property rather than a hardcoded 'Rating:' prefix. When a consumer\n // supplies a label (e.g. \"Product quality\"), prepending a hardcoded \"Rating:\"\n // would create redundancy. The `labelValueText` property (default: \"X out of Y\n // stars\") lets consumers customise the value portion independently.\n const valueText = this.labelValueText(this.value, this.max);\n const readonlyAriaLabel = this.label ? `${this.label}: ${valueText}` : valueText;\n\n if (this.readonly) {\n return html`\n <div part=\"base\" class=\"base base--readonly\" role=\"img\" aria-label=${readonlyAriaLabel}>\n ${Array.from({ length: this.max }, (_, idx) => {\n const i = idx + 1;\n const state = this._getStarState(i);\n return html`\n <span part=\"symbol\" class=\"symbol symbol--${state}\" data-index=\"${i}\">\n <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n </span>\n `;\n })}\n </div>\n `;\n }\n\n // Use slider pattern for half-star precision to correctly represent half values\n // in the accessibility tree (WCAG 2.5.3, axe: label-content-name-mismatch)\n if (this.precision === 0.5) {\n return html`\n <div\n part=\"base\"\n class=\"base${this.disabled ? ' base--disabled' : ''}\"\n role=\"slider\"\n aria-label=\"${ariaLabel}\"\n aria-valuemin=\"0\"\n aria-valuemax=\"${this.max}\"\n aria-valuenow=\"${this.value}\"\n aria-valuetext=\"${this._ariaValueText()}\"\n aria-disabled=\"${this.disabled ? 'true' : nothing}\"\n tabindex=\"${this.disabled ? '-1' : '0'}\"\n @keydown=\"${this._handleKeydown}\"\n @mouseleave=\"${this._handleMouseLeave}\"\n >\n ${Array.from({ length: this.max }, (_, idx) => {\n const i = idx + 1;\n const state = this._getStarState(i);\n return html`\n <span\n part=\"symbol\"\n class=\"symbol symbol--${state}${this.disabled ? ' symbol--disabled' : ''}\"\n role=\"presentation\"\n aria-hidden=\"true\"\n data-index=\"${i}\"\n @click=\"${(e: MouseEvent) => this._handleSymbolClick(e, i)}\"\n @mouseenter=\"${(e: MouseEvent) => this._handleSymbolMouseEnter(e, i)}\"\n @mousemove=\"${(e: MouseEvent) => this._handleSymbolMouseMove(e, i)}\"\n >\n <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n </span>\n `;\n })}\n </div>\n `;\n }\n\n return html`\n <div\n part=\"base\"\n class=\"base${this.disabled ? ' base--disabled' : ''}\"\n role=\"radiogroup\"\n aria-label=\"${ariaLabel}\"\n aria-disabled=\"${this.disabled ? 'true' : nothing}\"\n tabindex=\"-1\"\n @keydown=\"${this._handleKeydown}\"\n @mouseleave=\"${this._handleMouseLeave}\"\n >\n ${Array.from({ length: this.max }, (_, idx) => {\n const i = idx + 1;\n const state = this._getStarState(i);\n const checked = this._isChecked(i);\n const starLabel = this.labelStar(i);\n const isActiveTabStop = this.value > 0 ? Math.ceil(this.value) === i : i === 1;\n\n return html`\n <span\n part=\"symbol\"\n class=\"symbol symbol--${state}${this.disabled ? ' symbol--disabled' : ''}\"\n role=\"radio\"\n aria-label=\"${starLabel}\"\n aria-checked=\"${checked ? 'true' : 'false'}\"\n tabindex=\"${!this.disabled && isActiveTabStop ? '0' : '-1'}\"\n data-index=\"${i}\"\n @click=\"${(e: MouseEvent) => this._handleSymbolClick(e, i)}\"\n @mouseenter=\"${(e: MouseEvent) => this._handleSymbolMouseEnter(e, i)}\"\n @mousemove=\"${(e: MouseEvent) => this._handleSymbolMouseMove(e, i)}\"\n >\n <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n </span>\n `;\n })}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-rating': HelixRating;\n }\n}\n"],"names":["helixRatingStyles","css","HelixRating","FormMixin","HelixElement","count","value","max","changedProps","state","_mode","parsed","disabled","_a","v","clamped","snapped","i","dv","rect","next","_b","val","html","ariaLabel","valueText","readonlyAriaLabel","_","idx","nothing","e","checked","starLabel","isActiveTabStop","__decorateClass","property","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-step-CRNQlmSo.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 /* ─── High Contrast Mode (forced-colors) ─── */\n\n /*\n * hx-steps is a layout container — forced-colors state is handled\n * by each hx-step child element's own forced-colors block.\n */\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\n }\n`;\n","import { 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 { HelixElement } from '../../base/index.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 * @cssprop [--hx-steps-indicator-font-size] - Font size for step indicator text.\n * @cssprop [--hx-steps-indicator-icon-size] - Icon size within step indicator.\n * @cssprop [--hx-steps-label-font-size] - Font size for step labels.\n * @cssprop [--hx-steps-description-font-size] - Font size for step description text.\n * @cssprop [--hx-steps-item-flex] - Flex grow/shrink value for step items.\n * @cssprop [--hx-steps-item-width] - Fixed width for step items.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-5] - Size token.\n */\n@customElement('hx-steps')\nexport class HelixSteps extends HelixElement {\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 * Uses `accessible-label` attribute instead of `aria-label` to avoid\n * ARIAMixin shadowing on the host element.\n *\n * Note: `mixinDelegatesAria` is not applied to this component because the\n * `accessible-label` attribute approach avoids the ARIAMixin property conflict\n * without requiring mixin overhead.\n * @attr accessible-label\n */\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: 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.accessibleLabel) {\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.accessibleLabel ?? 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-steps-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-steps-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-steps-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 /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .step__indicator {\n border-color: CanvasText;\n }\n\n :host([status='active']) .step__indicator {\n border-color: Highlight;\n background-color: Highlight;\n color: HighlightText;\n }\n\n :host([status='complete']) .step__indicator {\n border-color: Highlight;\n background-color: Highlight;\n color: HighlightText;\n }\n\n :host([status='error']) .step__indicator {\n border-color: LinkText;\n background-color: LinkText;\n color: HighlightText;\n }\n\n .step__connector {\n background-color: CanvasText;\n }\n\n :host([status='complete']) .step__connector {\n background-color: Highlight;\n }\n\n :host(:focus-visible) .step__indicator {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { 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 HelixElement {\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","HelixElement","e","steps","step","el","index","legacySize","changedProperties","i","html","nothing","__decorateClass","property","customElement","helixStepStyles","HelixStep","event"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-td-Bra35cH4.js","sources":["../../src/components/hx-table/hx-table.styles.ts","../../src/components/hx-table/hx-table.ts","../../src/components/hx-table/hx-thead.ts","../../src/components/hx-table/hx-tbody.ts","../../src/components/hx-table/hx-tfoot.ts","../../src/components/hx-table/hx-tr.ts","../../src/components/hx-table/hx-th.ts","../../src/components/hx-table/hx-td.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTableStyles = css`\n :host {\n display: block;\n overflow-x: auto;\n font-family: var(--hx-table-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n /* ─── Scroll Wrapper ─── */\n\n .table-wrapper {\n min-width: 0;\n width: 100%;\n }\n\n /* ─── Table ─── */\n\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n\n :host([full-width]) table {\n width: 100%;\n }\n\n /* ─── Caption ─── */\n\n caption {\n caption-side: top;\n text-align: start;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));\n font-size: var(--hx-font-size-md, 1rem);\n }\n\n /* ─── Slotted sub-component styling ─── */\n\n /*\n * ::slotted() only matches DIRECT slot assignees. hx-table's direct\n * slot children are hx-thead, hx-tbody, and hx-tfoot — never hx-tr,\n * hx-th, or hx-td. CSS custom properties inherit through shadow DOM\n * boundaries, so variables set on section elements cascade to their\n * slotted row and cell descendants automatically.\n */\n\n /* Header background via CSS vars that cascade through display:contents */\n ::slotted(hx-thead) {\n --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */\n :host([variant='striped']) ::slotted(hx-tbody) {\n --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n /* Hover variant: set hover bg variable on direct slotted section elements */\n :host([variant='hover']) ::slotted(hx-tbody),\n :host([variant='hover']) ::slotted(hx-thead),\n :host([variant='striped']) ::slotted(hx-tbody),\n :host([variant='striped']) ::slotted(hx-thead),\n :host([variant='default']) ::slotted(hx-tbody),\n :host([variant='default']) ::slotted(hx-thead) {\n --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n /* Compact variant: reduced padding signal set on section elements that cascade to cells */\n :host([variant='compact']) ::slotted(hx-thead),\n :host([variant='compact']) ::slotted(hx-tbody),\n :host([variant='compact']) ::slotted(hx-tfoot) {\n --_hx-table-cell-padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Sticky Header ─── */\n\n :host([sticky-header]) ::slotted(hx-thead) {\n --_hx-table-th-position: sticky;\n --_hx-table-th-top: 0;\n --_hx-table-th-z-index: 1;\n --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n /* ─── Focus ─── */\n\n ::slotted(:focus-visible) {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, -2px);\n }\n\n /* ─── Responsive Mobile Card Layout ─── */\n\n @media (max-width: 768px) {\n .table-wrapper {\n overflow-x: visible;\n }\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n ::slotted(*) {\n transition: none !important;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n table {\n border: 1px solid CanvasText;\n }\n }\n`;\n\n/**\n * Styles shared by sub-components (hx-th, hx-td) for cell layout.\n * Exported so sub-components can import them directly.\n */\nexport const helixTableCellBaseStyles = css`\n :host {\n display: contents;\n }\n`;\n\nexport const helixTableRowBaseStyles = css`\n :host {\n display: contents;\n }\n`;\n\nexport const helixTableSectionBaseStyles = css`\n :host {\n display: contents;\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixTableStyles } from './hx-table.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A semantic table container with variant styling and accessibility support.\n * Compose with `hx-thead`, `hx-tbody`, `hx-tfoot`, `hx-tr`, `hx-th`, and `hx-td`.\n *\n * @summary Semantic HTML table with variant styling, sticky header, and responsive layout.\n *\n * @tag hx-table\n *\n * @slot - Default slot for `hx-thead`, `hx-tbody`, and `hx-tfoot` sub-components.\n * @slot caption - Custom caption content rendered inside the `<caption>` element.\n *\n * @csspart table - The `<table>` element.\n * @csspart caption - The `<caption>` element.\n *\n * @cssprop [--hx-table-border-color=var(--hx-color-neutral-200, #e2e8f0)] - Cell border color.\n * @cssprop [--hx-table-header-bg=var(--hx-color-neutral-50, #f8fafc)] - Header row background.\n * @cssprop [--hx-table-header-color=var(--hx-color-neutral-700, #334155)] - Header text color.\n * @cssprop [--hx-table-cell-color=var(--hx-color-neutral-900, #0f172a)] - Cell text color.\n * @cssprop [--hx-table-row-hover-bg=var(--hx-color-neutral-50, #f8fafc)] - Row hover background.\n * @cssprop [--hx-table-stripe-bg=var(--hx-color-neutral-50, #f8fafc)] - Striped row background.\n * @cssprop [--hx-table-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n */\n@customElement('hx-table')\nexport class HelixTable extends HelixElement {\n static override styles = [helixTableStyles];\n\n // ─── Public Properties ───\n\n /**\n * Accessible name for the table (WCAG 4.1.2 requirement).\n * Exposed via `aria-label` on the `<table>` element.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Visible caption text. When set, renders a `<caption>` element.\n * Use the `caption` slot for richer caption content.\n * @attr caption\n */\n @property({ type: String })\n caption = '';\n\n /**\n * Visual variant that controls row styling.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'striped' | 'hover' | 'compact' = 'default';\n\n /**\n * When true, the header row stays fixed while the table body scrolls.\n * @attr sticky-header\n */\n @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n stickyHeader = false;\n\n /**\n * When true, the table expands to fill 100% of its container width.\n * @attr full-width\n */\n @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n fullWidth = true;\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _hasCaptionSlot = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._hasCaptionSlot = this.querySelector('[slot=\"caption\"]') !== null;\n }\n\n override firstUpdated(changedProperties: PropertyValues<this>): void {\n super.firstUpdated(changedProperties);\n // WCAG 4.1.2: warn when neither label nor caption provides an accessible name.\n // A table without an accessible name cannot be identified by screen reader users.\n if (!this.label && !this.caption && !this._hasCaptionSlot) {\n devWarn(\n 'hx-table',\n 'No accessible name provided. Set the `label` or `caption` attribute, or use the `caption` slot, so screen readers can identify this table (WCAG 4.1.2 Name, Role, Value).',\n );\n }\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (changed.has('label') && !this.label && changed.get('label') !== undefined) {\n devWarn(\n 'hx-table',\n 'No accessible name provided. Set the `label` attribute so screen readers can identify this table (WCAG 4.1.2).',\n );\n }\n }\n\n /** @internal */\n private _onCaptionSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasCaptionSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render ───\n\n override render() {\n const hasCaption = this.caption || this._hasCaptionSlot;\n\n return html`\n <div class=\"table-wrapper\">\n <!-- role=\"table\" is required: sub-components use display:contents which can confuse assistive technology in Shadow DOM -->\n <table part=\"table\" role=\"table\" aria-label=${this.label || nothing}>\n ${hasCaption\n ? html`<caption part=\"caption\">\n <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}>${this.caption}</slot>\n </caption>`\n : nothing}\n <slot></slot>\n </table>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-table': HelixTable;\n }\n}\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixTableSectionBaseStyles } from './hx-table.styles.js';\n\n/**\n * Semantic table head section. Must be a direct child of `hx-table`.\n * Contains `hx-tr` rows with `hx-th` header cells.\n *\n * @summary Table head section (`<thead>`) for use inside `hx-table`.\n *\n * @tag hx-thead\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart thead - The `<thead>` element.\n */\n@customElement('hx-thead')\nexport class HelixTableHead extends HelixElement {\n static override styles = [helixTableSectionBaseStyles];\n\n override render() {\n return html`<thead part=\"thead\" role=\"rowgroup\">\n <slot></slot>\n </thead>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-thead': HelixTableHead;\n }\n}\n","import { html, css } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\n\n/**\n * Semantic table body section. Must be a direct child of `hx-table`.\n * Contains `hx-tr` rows with `hx-td` data cells.\n *\n * @summary Table body section (`<tbody>`) for use inside `hx-table`.\n *\n * @tag hx-tbody\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart tbody - The `<tbody>` element.\n */\n@customElement('hx-tbody')\nexport class HelixTableBody extends HelixElement {\n static override styles = [\n css`\n :host {\n display: contents;\n }\n\n /*\n * Striped rows: only applies when the parent hx-table sets\n * --_hx-table-row-stripe-bg (via variant=\"striped\"). Falls back\n * to transparent so non-striped variants are unaffected.\n */\n ::slotted(hx-tr:nth-child(even)) {\n --_hx-table-row-bg: var(--_hx-table-row-stripe-bg, transparent);\n }\n `,\n ];\n\n override render() {\n return html`<tbody part=\"tbody\" role=\"rowgroup\">\n <slot></slot>\n </tbody>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tbody': HelixTableBody;\n }\n}\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixTableSectionBaseStyles } from './hx-table.styles.js';\n\n/**\n * Semantic table foot section. Must be a direct child of `hx-table`.\n * Typically contains summary or totals rows.\n *\n * @summary Table foot section (`<tfoot>`) for use inside `hx-table`.\n *\n * @tag hx-tfoot\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart tfoot - The `<tfoot>` element.\n */\n@customElement('hx-tfoot')\nexport class HelixTableFoot extends HelixElement {\n static override styles = [helixTableSectionBaseStyles];\n\n override render() {\n return html`<tfoot part=\"tfoot\" role=\"rowgroup\">\n <slot></slot>\n </tfoot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tfoot': HelixTableFoot;\n }\n}\n","import { html, nothing, css } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\n\n/**\n * Semantic table row. Must be a child of `hx-thead`, `hx-tbody`, or `hx-tfoot`.\n * Contains `hx-th` or `hx-td` cells.\n *\n * @summary Table row (`<tr>`) for use inside `hx-thead`, `hx-tbody`, or `hx-tfoot`.\n *\n * @tag hx-tr\n *\n * @slot - Default slot for `hx-th` and `hx-td` elements.\n *\n * @csspart row - The `<tr>` element.\n */\n@customElement('hx-tr')\nexport class HelixTableRow extends HelixElement {\n static override styles = [\n css`\n :host {\n display: contents;\n }\n\n tr {\n background-color: var(--_hx-table-row-bg, transparent);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n tr:hover {\n background-color: var(--_hx-table-row-hover-bg, var(--hx-table-row-hover-bg, transparent));\n }\n\n :host([selected]) tr {\n background-color: var(--hx-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));\n }\n\n :host([disabled]) tr {\n opacity: 0.5;\n pointer-events: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n tr {\n transition: none;\n }\n }\n `,\n ];\n\n /**\n * When true, marks the row as selected and applies selected styling.\n * @attr selected\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * When true, the row is visually disabled and non-interactive.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n override render() {\n return html`\n <tr\n part=\"row\"\n role=\"row\"\n aria-selected=${this.selected ? 'true' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n <slot></slot>\n </tr>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-tr': HelixTableRow;\n }\n}\n","import { html, nothing, css } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\n\n/**\n * Detail type for `hx-sort` events dispatched from `hx-th`.\n */\nexport interface HxTableSortDetail {\n direction: 'asc' | 'desc';\n}\n\n/**\n * Semantic table header cell. Must be a child of `hx-tr`.\n * Supports sortable columns with accessible sort state.\n *\n * @summary Table header cell (`<th>`) with optional sort support.\n *\n * @tag hx-th\n *\n * @slot - Default slot for header label content.\n *\n * @fires {CustomEvent<HxTableSortDetail>} hx-sort - Dispatched when a sortable header is activated.\n *\n * @csspart header - The `<th>` element.\n * @csspart sort-icon - The sort indicator icon `<span>` inside sortable headers.\n */\n@customElement('hx-th')\nexport class HelixTableHeader extends HelixElement {\n static override styles = [\n css`\n :host {\n display: contents;\n }\n\n th {\n padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n text-align: left;\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));\n background-color: var(\n --_hx-table-cell-bg,\n var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc))\n );\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-table-border-color, var(--hx-color-neutral-200, #e2e8f0));\n white-space: nowrap;\n vertical-align: middle;\n position: var(--_hx-table-th-position, static);\n top: var(--_hx-table-th-top, auto);\n z-index: var(--_hx-table-th-z-index, auto);\n }\n\n :host([sortable]) th {\n cursor: pointer;\n }\n\n /* ─── Sort Button ─── */\n\n .sort-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n background: none;\n border: none;\n padding: 0;\n font: inherit;\n font-weight: inherit;\n color: inherit;\n cursor: pointer;\n white-space: nowrap;\n width: 100%;\n }\n\n .sort-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 2px);\n }\n\n /* ─── Sort Icon ─── */\n\n .sort-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n opacity: 0.4;\n transition:\n opacity var(--hx-transition-fast, 150ms ease),\n transform var(--hx-transition-fast, 150ms ease);\n }\n\n .sort-icon--active {\n opacity: 1;\n color: var(--hx-color-primary-500, #2563eb);\n }\n\n .sort-icon--desc {\n transform: rotate(180deg);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .sort-icon {\n transition: none;\n }\n }\n\n /* ─── Mobile card layout ─── */\n\n @media (max-width: 768px) {\n /*\n * Visually hide the header cell on mobile while keeping it in the\n * accessibility tree. Screen readers can then associate column\n * headers with data cells via the semantic table structure\n * (scope=\"col\", role=\"columnheader\"), satisfying WCAG 2.1 AA.\n * Using display:none would remove headers from the a11y tree entirely.\n */\n th {\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 `,\n ];\n\n /**\n * When true, the header renders a sort button and emits `hx-sort` on activation.\n * @attr sortable\n */\n @property({ type: Boolean, reflect: true })\n sortable = false;\n\n /**\n * Current sort direction. Reflected for CSS targeting.\n * @attr sort-direction\n */\n @property({ type: String, reflect: true, attribute: 'sort-direction' })\n sortDirection: 'asc' | 'desc' | 'none' = 'none';\n\n /**\n * The `scope` attribute for the underlying `<th>` element.\n * @attr scope\n */\n @property({ type: String })\n scope: 'col' | 'row' | 'colgroup' | 'rowgroup' = 'col';\n\n /**\n * Number of columns this header spans.\n * @attr colspan\n */\n @property({ type: Number })\n colspan = 0;\n\n /**\n * Number of rows this header spans.\n * @attr rowspan\n */\n @property({ type: Number })\n rowspan = 0;\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSort(): void {\n const next: 'asc' | 'desc' = this.sortDirection === 'asc' ? 'desc' : 'asc';\n this.sortDirection = next;\n this.dispatchEvent(\n new CustomEvent<HxTableSortDetail>('hx-sort', {\n bubbles: true,\n composed: true,\n detail: { direction: next },\n }),\n );\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderSortIcon() {\n const isActive = this.sortDirection !== 'none';\n const iconClass = [\n 'sort-icon',\n isActive ? 'sort-icon--active' : '',\n this.sortDirection === 'desc' ? 'sort-icon--desc' : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return html`\n <span part=\"sort-icon\" class=${iconClass} aria-hidden=\"true\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path d=\"M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z\" fill-rule=\"evenodd\" />\n </svg>\n </span>\n `;\n }\n\n /** @internal */\n private _ariaSort(): 'ascending' | 'descending' | 'none' | typeof nothing {\n if (!this.sortable) return nothing;\n if (this.sortDirection === 'asc') return 'ascending';\n if (this.sortDirection === 'desc') return 'descending';\n return 'none';\n }\n\n /** @internal */\n private _sortLabel(): string {\n if (this.sortDirection === 'asc') return 'Sort descending';\n if (this.sortDirection === 'desc') return 'Sort ascending';\n return 'Sort';\n }\n\n override render() {\n return html`\n <th\n part=\"header\"\n role=\"columnheader\"\n scope=${this.scope}\n colspan=${ifDefined(this.colspan > 0 ? this.colspan : undefined)}\n rowspan=${ifDefined(this.rowspan > 0 ? this.rowspan : undefined)}\n aria-sort=${this._ariaSort()}\n >\n ${this.sortable\n ? html`\n <button class=\"sort-btn\" @click=${this._handleSort} aria-label=${this._sortLabel()}>\n <slot></slot>\n ${this._renderSortIcon()}\n </button>\n `\n : html`<slot></slot>`}\n </th>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-th': HelixTableHeader;\n }\n}\n","import { html, css } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\n\n/**\n * Semantic table data cell. Must be a child of `hx-tr`.\n *\n * @summary Table data cell (`<td>`) for use inside `hx-tr`.\n *\n * @tag hx-td\n *\n * @slot - Default slot for cell content.\n *\n * @csspart cell - The `<td>` element.\n *\n * @cssprop [--hx-table-cell-color=var(--hx-color-neutral-900, #0f172a)] - Cell text color.\n */\n@customElement('hx-td')\nexport class HelixTableCell extends HelixElement {\n static override styles = [\n css`\n :host {\n display: contents;\n }\n\n td {\n padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n text-align: left;\n color: var(--hx-table-cell-color, var(--hx-color-neutral-900, #0f172a));\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-table-border-color, var(--hx-color-neutral-200, #e2e8f0));\n vertical-align: middle;\n }\n\n :host([align='center']) td {\n text-align: center;\n }\n\n :host([align='right']) td {\n text-align: right;\n }\n\n td:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, -2px);\n border-radius: var(--hx-border-radius-sm, 2px);\n }\n\n /* ─── Mobile card layout ─── */\n\n @media (max-width: 768px) {\n :host {\n display: block;\n }\n\n td {\n display: block;\n text-align: right;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n border-bottom: none;\n position: relative;\n }\n\n td::before {\n content: attr(data-label);\n font-weight: var(--hx-font-weight-semibold, 600);\n float: left;\n color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));\n }\n }\n `,\n ];\n\n /**\n * Horizontal alignment for cell content.\n * @attr align\n */\n @property({ type: String, reflect: true })\n align: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Number of columns this cell spans.\n * @attr colspan\n */\n @property({ type: Number })\n colspan = 0;\n\n /**\n * Number of rows this cell spans.\n * @attr rowspan\n */\n @property({ type: Number })\n rowspan = 0;\n\n /**\n * Column header label for this cell. Forwarded as `data-label` on the native `<td>` for\n * the mobile card layout (`td::before { content: attr(data-label) }`) and as `aria-label`\n * so screen readers identify the column when the header row is hidden.\n * @attr label\n */\n @property({ type: String, attribute: 'label' })\n label = '';\n\n override render() {\n return html`\n <td\n part=\"cell\"\n role=\"cell\"\n data-label=${ifDefined(this.label || undefined)}\n colspan=${ifDefined(this.colspan > 0 ? this.colspan : undefined)}\n rowspan=${ifDefined(this.rowspan > 0 ? this.rowspan : undefined)}\n >\n <slot></slot>\n </td>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-td': HelixTableCell;\n }\n}\n"],"names":["helixTableStyles","css","helixTableSectionBaseStyles","HelixTable","HelixElement","changedProperties","changed","slot","hasCaption","html","nothing","__decorateClass","property","state","customElement","HelixTableHead","HelixTableBody","HelixTableFoot","HelixTableRow","HelixTableHeader","next","iconClass","ifDefined","HelixTableCell"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-theme-DP4oPU1i.js","sources":["../../src/components/hx-theme/hx-theme.styles.ts","../../src/utils/token-merger.ts","../../src/components/hx-theme/hx-theme.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixThemeStyles = css`\n :host {\n display: contents;\n }\n\n /* display: contents makes this wrapper layout-invisible; exposed as [part=\"base\"]\n for consumer targeting via CSS parts without affecting layout */\n .theme-base {\n display: contents;\n }\n\n /* Visually hidden but accessible to screen readers — used for aria-live announcements */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n /* hx-theme is a transparent wrapper that applies design tokens.\n It has no visual output of its own. forced-color-adjust: auto (default)\n is sufficient — theme tokens will resolve to system colors as needed. */\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\n }\n`;\n","import type { BrandTokenMap } from '@helixui/tokens';\n\n/**\n * Merges brand token overrides on top of a base theme CSS string.\n *\n * Brand tokens are appended as a `:host` block after the base theme CSS,\n * which gives them higher cascade precedence within the adopted stylesheet.\n * This preserves all primitive and semantic tokens from the base theme while\n * allowing brand-specific values to override selectively.\n *\n * @param baseCSS - The base theme CSS string (from `_buildThemeCss`).\n * @param brandTokens - CSS custom property overrides for the active brand.\n * @returns Combined CSS string with brand overrides applied after the base theme.\n *\n * @example\n * ```ts\n * const merged = mergeBrandTokens(lightCSS, {\n * '--hx-color-primary-500': '#003DA5',\n * '--hx-color-primary-600': '#002D8A',\n * });\n * // merged === lightCSS + \"\\n\\n:host {\\n --hx-color-primary-500: #003DA5;\\n ...}\\n\"\n * ```\n */\nexport function mergeBrandTokens(baseCSS: string, brandTokens: BrandTokenMap): string {\n if (Object.keys(brandTokens).length === 0) {\n return baseCSS;\n }\n\n const brandOverrides = Object.entries(brandTokens)\n .map(([name, value]) => ` ${name}: ${value};`)\n .join('\\n');\n\n return `${baseCSS}\\n\\n/* Brand token overrides */\\n:host {\\n${brandOverrides}\\n}`;\n}\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { tokenEntries, darkTokenEntries, HelixBrandRegistry } from '@helixui/tokens';\nimport { helixThemeStyles } from './hx-theme.styles.js';\nimport { mergeBrandTokens } from '../../utils/token-merger.js';\n\nexport type { TokenDefinition, TokenEntry } from '@helixui/tokens';\n\n/**\n * Controls the spacing density for all descendant `hx-*` components.\n * - `\"comfortable\"` (default): Standard spacing tokens.\n * - `\"compact\"`: Reduces `--hx-space-*` tokens ~25%. For data-dense clinical dashboards.\n * - `\"spacious\"`: Increases `--hx-space-*` tokens ~25%. For touch-optimized bedside tablets.\n */\nexport type DensityMode = 'comfortable' | 'compact' | 'spacious';\n\n/**\n * Controls the motion behavior applied to all descendant `hx-*` components.\n * - `\"full\"` (default): Full animations. Respects OS `prefers-reduced-motion`.\n * - `\"reduced\"`: Collapses all animation durations to 0ms and easings to linear.\n * - `\"none\"`: Same as `\"reduced\"` — all motion tokens resolve to instant/linear.\n */\nexport type MotionMode = 'full' | 'reduced' | 'none';\n\n/**\n * Supported theme names.\n *\n * Three-tier token cascade applied by this component:\n * - **Primitive tier** (`--hx-color-primary-500`, `--hx-space-4`, etc.) — raw values, always injected\n * - **Semantic tier** (`--hx-color-text-primary`, `--hx-color-surface-default`, etc.) — theme-sensitive,\n * override primitives for dark / high-contrast themes\n * - **Component tier** (`--hx-button-bg`, `--hx-card-padding`, etc.) — set by individual components,\n * consumed via semantic fallbacks; not managed by `hx-theme` directly\n *\n * Consumers should override at the semantic tier to respect theme scoping.\n */\nexport type ThemeName = 'light' | 'dark' | 'high-contrast' | 'auto';\n\n/**\n * High-contrast token overrides. Targets WCAG 7:1+ contrast ratios for low-vision users.\n * These are injected on top of the light primitives when theme=\"high-contrast\".\n * Values here mirror the `high-contrast` section of tokens.json; kept in sync manually\n * until HC tokens are promoted to the published @helixui/tokens package.\n */\nconst _hcOverrides: Array<[string, string]> = [\n ['--hx-color-text-primary', '#FFFFFF'],\n ['--hx-color-text-secondary', '#FFFFFF'],\n ['--hx-color-text-muted', '#E0E0E0'],\n ['--hx-color-text-strong', '#FFFFFF'],\n ['--hx-color-text-placeholder', '#B0B0B0'],\n ['--hx-color-text-disabled', '#767676'],\n ['--hx-color-text-inverse', '#000000'],\n ['--hx-color-text-on-primary', '#000000'],\n ['--hx-color-text-on-secondary', '#000000'],\n ['--hx-color-text-on-error', '#000000'],\n ['--hx-color-text-on-success', '#000000'],\n ['--hx-color-text-on-warning', '#000000'],\n ['--hx-color-text-on-info', '#000000'],\n ['--hx-color-text-link', '#FFFF00'],\n ['--hx-color-text-link-hover', '#FFFF99'],\n ['--hx-color-text-link-visited', '#FF80FF'],\n ['--hx-color-text-link-active', '#FFFFFF'],\n ['--hx-color-surface-default', '#000000'],\n ['--hx-color-surface-raised', '#1A1A1A'],\n ['--hx-color-surface-sunken', '#000000'],\n ['--hx-color-surface-inverse', '#FFFFFF'],\n ['--hx-color-surface-overlay', 'rgba(0, 0, 0, 0.95)'],\n ['--hx-color-border-default', '#FFFFFF'],\n ['--hx-color-border-subtle', '#C0C0C0'],\n ['--hx-color-border-strong', '#FFFFFF'],\n ['--hx-color-border-focus', '#FFFF00'],\n ['--hx-color-focus-ring', '#FFFF00'],\n ['--hx-color-selection-bg', '#1AEBFF'],\n ['--hx-color-selection-color', '#000000'],\n ['--hx-body-bg', '#000000'],\n ['--hx-body-color', '#FFFFFF'],\n ['--hx-shadow-sm', '0 1px 2px 0 rgb(255 255 255 / 0.2)'],\n [\n '--hx-shadow-md',\n '0 4px 6px -1px rgb(255 255 255 / 0.3), 0 2px 4px -2px rgb(255 255 255 / 0.2)',\n ],\n [\n '--hx-shadow-lg',\n '0 10px 15px -3px rgb(255 255 255 / 0.3), 0 4px 6px -4px rgb(255 255 255 / 0.2)',\n ],\n [\n '--hx-shadow-xl',\n '0 20px 25px -5px rgb(255 255 255 / 0.3), 0 8px 10px -6px rgb(255 255 255 / 0.2)',\n ],\n ['--hx-shadow-2xl', '0 25px 50px -12px rgb(255 255 255 / 0.4)'],\n];\n\n/**\n * Compact density overrides: ~75% of original --hx-space-* values.\n * Fixed tokens (--hx-space-0 and --hx-space-px) are intentionally omitted — they stay fixed.\n * Component height tokens are reduced one step to match the tighter spacing.\n */\nconst _compactDensityOverrides: Array<[string, string]> = [\n ['--hx-space-1', '0.1875rem'],\n ['--hx-space-2', '0.375rem'],\n ['--hx-space-3', '0.5625rem'],\n ['--hx-space-4', '0.75rem'],\n ['--hx-space-5', '0.9375rem'],\n ['--hx-space-6', '1.125rem'],\n ['--hx-space-7', '1.3125rem'],\n ['--hx-space-8', '1.5rem'],\n ['--hx-space-10', '1.875rem'],\n ['--hx-space-12', '2.25rem'],\n ['--hx-space-14', '2.625rem'],\n ['--hx-space-16', '3rem'],\n ['--hx-space-20', '3.75rem'],\n ['--hx-space-24', '4.5rem'],\n ['--hx-space-32', '6rem'],\n ['--hx-space-40', '7.5rem'],\n ['--hx-space-48', '9rem'],\n ['--hx-space-64', '12rem'],\n // Component heights — one step smaller\n ['--hx-input-height-sm', '1.75rem'],\n ['--hx-input-height-md', '2rem'],\n ['--hx-input-height-lg', '2.25rem'],\n];\n\n/**\n * Spacious density overrides: ~125% of original --hx-space-* values.\n * Fixed tokens (--hx-space-0 and --hx-space-px) are intentionally omitted — they stay fixed.\n * Component height tokens are increased one step to match the looser spacing.\n */\nconst _spaciousDensityOverrides: Array<[string, string]> = [\n ['--hx-space-1', '0.3125rem'],\n ['--hx-space-2', '0.625rem'],\n ['--hx-space-3', '0.9375rem'],\n ['--hx-space-4', '1.25rem'],\n ['--hx-space-5', '1.5625rem'],\n ['--hx-space-6', '1.875rem'],\n ['--hx-space-7', '2.1875rem'],\n ['--hx-space-8', '2.5rem'],\n ['--hx-space-10', '3.125rem'],\n ['--hx-space-12', '3.75rem'],\n ['--hx-space-14', '4.375rem'],\n ['--hx-space-16', '5rem'],\n ['--hx-space-20', '6.25rem'],\n ['--hx-space-24', '7.5rem'],\n ['--hx-space-32', '10rem'],\n ['--hx-space-40', '12.5rem'],\n ['--hx-space-48', '15rem'],\n ['--hx-space-64', '20rem'],\n // Component heights — one step larger\n ['--hx-input-height-sm', '2.25rem'],\n ['--hx-input-height-md', '2.75rem'],\n ['--hx-input-height-lg', '3.5rem'],\n];\n\n/**\n * Motion token overrides applied when reduced or no motion is requested.\n * All durations collapse to 0ms and all easings become linear so that\n * every animated component goes instantaneous without modifying its own CSS.\n */\nconst _reducedMotionOverrides: Array<[string, string]> = [\n ['--hx-duration-fast', '0ms'],\n ['--hx-duration-normal', '0ms'],\n ['--hx-duration-slow', '0ms'],\n ['--hx-duration-slower', '0ms'],\n ['--hx-duration-spinner', '0ms'],\n ['--hx-transition-fast', '0ms linear'],\n ['--hx-transition-normal', '0ms linear'],\n ['--hx-transition-slow', '0ms linear'],\n ['--hx-easing-default', 'linear'],\n ['--hx-easing-in', 'linear'],\n ['--hx-easing-out', 'linear'],\n ['--hx-easing-in-out', 'linear'],\n ['--hx-easing-decelerate', 'linear'],\n ['--hx-easing-accelerate', 'linear'],\n ['--hx-easing-spring', 'linear'],\n];\n\nfunction _buildProps(entries: Iterable<[string, string]>): string {\n return Array.from(entries)\n .map(([name, value]) => ` ${name}: ${value};`)\n .join('\\n');\n}\n\n/** Module-level CSS cache: one string per ThemeName — avoids re-building on every theme change */\nconst _cssCache = new Map<ThemeName, string>();\n\nfunction _buildThemeCss(theme: ThemeName): string {\n const cached = _cssCache.get(theme);\n if (cached) return cached;\n\n // Build light token base map from the @helixui/tokens package\n const lightMap = new Map(tokenEntries.map((t) => [t.name, t.value]));\n\n let css: string;\n if (theme === 'dark') {\n // Apply dark semantic overrides on top of light primitives\n const merged = new Map(lightMap);\n for (const t of darkTokenEntries) {\n merged.set(t.name, t.value);\n }\n css = `:host {\\n${_buildProps(merged)}\\n color-scheme: dark;\\n}`;\n } else if (theme === 'high-contrast') {\n // Apply HC overrides on top of light primitives — distinct WCAG 7:1+ token set\n const merged = new Map(lightMap);\n for (const [name, value] of _hcOverrides) {\n merged.set(name, value);\n }\n css = `:host {\\n${_buildProps(merged)}\\n color-scheme: dark;\\n}`;\n } else {\n // 'light' — 'auto' resolves to 'light' or 'dark' at runtime via effectiveTheme\n css = `:host {\\n${_buildProps(lightMap)}\\n color-scheme: light;\\n}`;\n }\n\n _cssCache.set(theme, css);\n return css;\n}\n\n/**\n * A theme provider that injects CSS custom property tokens for a named theme\n * onto a scoped root element. Wrapping content with this component scopes\n * all `--hx-*` design tokens to the selected theme.\n *\n * This is a pure infrastructure component with `display: contents` — it does\n * not affect layout. Use it to apply a theme to a subtree of components.\n *\n * Supported themes:\n * - `\"light\"` — standard light-mode token set (default)\n * - `\"dark\"` — dark-mode semantic overrides applied on top of light primitives\n * - `\"high-contrast\"` — WCAG 7:1+ contrast token set for low-vision accessibility\n * - `\"auto\"` — follows the OS `prefers-color-scheme` media query (light or dark)\n *\n * @summary Injects --hx-* design tokens for the specified theme scope and controls motion behavior.\n *\n * @tag hx-theme\n *\n * @slot - Default slot for themed content.\n *\n * @csspart base - The inner slot wrapper element. `display: contents` — no layout effect.\n *\n * @cssprop [--hx-*] - All design tokens for the selected theme are injected\n * as CSS custom properties on the host element.\n *\n * @example Drupal Twig — wrap a region with a dark theme:\n * ```twig\n * <hx-theme theme=\"dark\">\n * {{ content }}\n * </hx-theme>\n * ```\n *\n * @example Nested scoping — dark sidebar inside a light page:\n * ```html\n * <hx-theme theme=\"light\">\n * <main>...</main>\n * <hx-theme theme=\"dark\">\n * <aside>...</aside>\n * </hx-theme>\n * </hx-theme>\n * ```\n *\n * @example Compact density for clinical dashboards:\n * ```html\n * <hx-theme theme=\"dark\" density=\"compact\">\n * <!-- Clinical dashboard content -->\n * </hx-theme>\n * ```\n * @cssprop [--hx-color-text-primary] - Color.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-duration-fast] - Animation duration.\n */\n@customElement('hx-theme')\nexport class HelixTheme extends HelixElement {\n static override styles = [helixThemeStyles];\n\n /**\n * The theme to apply. Determines which set of --hx-* tokens are injected.\n * - `\"light\"` (default): standard light-mode tokens\n * - `\"dark\"`: dark-mode semantic overrides applied on top of light primitives\n * - `\"high-contrast\"`: WCAG 7:1+ contrast tokens for low-vision users\n * - `\"auto\"`: follows OS `prefers-color-scheme`; resolves to `\"light\"` or `\"dark\"` at runtime\n * @attr theme\n */\n @property({ type: String, reflect: true })\n theme: 'light' | 'dark' | 'high-contrast' | 'auto' = 'light';\n\n // The deprecated `system` boolean property has been removed in 3.0.0.\n // Use `theme=\"auto\"` instead.\n\n /**\n * The registered brand name to apply on top of the base theme.\n * When set, brand-specific CSS custom property overrides are merged\n * after the base theme tokens in the adopted stylesheet, enabling\n * hospital system white-label implementations.\n *\n * The brand must first be registered via `HelixBrandRegistry.register()`.\n * If the brand name is non-empty but not registered, a warning is logged\n * and the base theme is applied without brand overrides.\n *\n * @attr brand\n * @example\n * ```html\n * <hx-theme theme=\"light\" brand=\"mercy-health\">\n * <!-- Content inherits Mercy Health brand tokens -->\n * </hx-theme>\n * ```\n */\n @property({ type: String, reflect: true })\n brand = '';\n\n /**\n * Controls motion behavior for all descendant `hx-*` components.\n * - `\"full\"` (default): Full animations. Respects OS `prefers-reduced-motion`.\n * - `\"reduced\"`: Collapses all animation durations to 0ms and easings to linear.\n * Use this for devices where OS accessibility settings cannot be relied on\n * (e.g. healthcare bedside terminals).\n * - `\"none\"`: Same as `\"reduced\"` — all motion tokens resolve to instant/linear.\n *\n * When `motion=\"full\"` and the OS reports `prefers-reduced-motion: reduce`,\n * the same token overrides are applied automatically.\n * @attr motion\n */\n @property({ type: String, reflect: true })\n motion: MotionMode = 'full';\n\n /**\n * Controls the spacing density for all descendant `hx-*` components.\n * - `\"comfortable\"` (default): Standard spacing tokens.\n * - `\"compact\"`: Reduces `--hx-space-*` tokens ~25%. For data-dense clinical dashboards.\n * - `\"spacious\"`: Increases `--hx-space-*` tokens ~25%. For touch-optimized bedside tablets.\n * @attr density\n */\n @property({ type: String, reflect: true })\n density: DensityMode = 'comfortable';\n\n /** @internal */\n private _mediaQuery: MediaQueryList | null = null;\n /** @internal */\n private _mediaHandler: (() => void) | null = null;\n /** @internal */\n private _themeSheet: CSSStyleSheet | null = null;\n /** @internal */\n private _densitySheet: CSSStyleSheet | null = null;\n /** @internal — media query for OS prefers-reduced-motion */\n private _motionQuery: MediaQueryList | null = null;\n /** @internal */\n private _motionHandler: (() => void) | null = null;\n\n override firstUpdated(changed: PropertyValues<this>): void {\n super.firstUpdated(changed);\n this._initThemeSheet();\n if (this.theme === 'auto') {\n this._attachMediaQuery();\n }\n if (this.motion === 'full') {\n this._attachMotionQuery();\n }\n }\n\n override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n const autoMode = this.theme === 'auto';\n if (changed.has('theme')) {\n if (autoMode) {\n this._attachMediaQuery();\n } else {\n this._detachMediaQuery();\n }\n this._applyEffectiveTheme();\n }\n if (changed.has('motion')) {\n if (this.motion === 'full') {\n this._attachMotionQuery();\n } else {\n this._detachMotionQuery();\n }\n this._applyEffectiveTheme();\n }\n if (changed.has('brand')) {\n this._applyEffectiveTheme();\n }\n if (changed.has('density')) {\n this._applyDensity();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._detachMediaQuery();\n this._detachMotionQuery();\n }\n\n /**\n * Returns the currently active theme name.\n * When `system=true` or `theme=\"auto\"`, reflects the OS preference (`\"light\"` or `\"dark\"`).\n * Otherwise returns the `theme` property value.\n */\n get effectiveTheme(): 'light' | 'dark' | 'high-contrast' | 'auto' {\n if (this.theme === 'auto') {\n if (typeof window === 'undefined') return 'light';\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n return this.theme;\n }\n\n /**\n * Returns the resolved motion level after considering the `motion` attribute and OS preference.\n * When `motion=\"full\"` and the OS reports `prefers-reduced-motion: reduce`, returns `\"reduced\"`.\n * Otherwise returns `\"full\"` or `\"reduced\"` based on the `motion` attribute.\n */\n get effectiveMotion(): 'full' | 'reduced' {\n if (this.motion === 'reduced' || this.motion === 'none') return 'reduced';\n if (\n typeof window !== 'undefined' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n ) {\n return 'reduced';\n }\n return 'full';\n }\n\n /** @internal */\n private _initThemeSheet(): void {\n if (this.shadowRoot) {\n this._themeSheet = new CSSStyleSheet();\n this._densitySheet = new CSSStyleSheet();\n this.shadowRoot.adoptedStyleSheets = [\n ...this.shadowRoot.adoptedStyleSheets,\n this._themeSheet,\n this._densitySheet,\n ];\n this._applyEffectiveTheme();\n this._applyDensity();\n }\n }\n\n /** @internal */\n private _attachMediaQuery(): void {\n if (this._mediaQuery || typeof window === 'undefined') return;\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._mediaHandler = () => {\n this._applyEffectiveTheme();\n this._announceThemeChange();\n };\n this._mediaQuery.addEventListener('change', this._mediaHandler);\n }\n\n /** @internal */\n private _detachMediaQuery(): void {\n if (this._mediaQuery && this._mediaHandler) {\n this._mediaQuery.removeEventListener('change', this._mediaHandler);\n }\n this._mediaQuery = null;\n this._mediaHandler = null;\n }\n\n /** @internal — attach OS prefers-reduced-motion listener when motion=\"full\" */\n private _attachMotionQuery(): void {\n if (this._motionQuery || typeof window === 'undefined') return;\n this._motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._motionHandler = () => {\n this._applyEffectiveTheme();\n };\n this._motionQuery.addEventListener('change', this._motionHandler);\n }\n\n /** @internal */\n private _detachMotionQuery(): void {\n if (this._motionQuery && this._motionHandler) {\n this._motionQuery.removeEventListener('change', this._motionHandler);\n }\n this._motionQuery = null;\n this._motionHandler = null;\n }\n\n /** @internal — notifies AT users when system theme changes programmatically */\n private _announceThemeChange(): void {\n const announcer = this.shadowRoot?.querySelector('[role=\"status\"]');\n if (announcer) {\n announcer.textContent = `Theme changed to ${this.effectiveTheme}`;\n }\n }\n\n /** @internal */\n private _applyEffectiveTheme(): void {\n if (!this._themeSheet) return;\n\n let css = _buildThemeCss(this.effectiveTheme);\n\n if (this.brand !== '') {\n const brandTokens = HelixBrandRegistry.getBrandTokens(this.brand);\n if (brandTokens !== undefined) {\n css = mergeBrandTokens(css, brandTokens);\n } else {\n console.warn(\n `[hx-theme] Brand \"${this.brand}\" is not registered. ` +\n `Register it via HelixBrandRegistry.register() before use. ` +\n `Applying base theme only.`,\n );\n }\n }\n\n if (this.effectiveMotion === 'reduced') {\n css += `\\n:host {\\n${_buildProps(_reducedMotionOverrides)}\\n}`;\n }\n\n void this._themeSheet.replace(css);\n }\n\n /** @internal */\n private _applyDensity(): void {\n if (!this._densitySheet) return;\n\n let css = '';\n if (this.density === 'compact') {\n css = `:host {\\n${_buildProps(_compactDensityOverrides)}\\n}`;\n } else if (this.density === 'spacious') {\n css = `:host {\\n${_buildProps(_spaciousDensityOverrides)}\\n}`;\n }\n // comfortable = no overrides needed (defaults from theme sheet)\n\n void this._densitySheet.replace(css);\n }\n\n override render() {\n return html`\n <div part=\"base\" class=\"theme-base\">\n <slot></slot>\n </div>\n <span role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"visually-hidden\"></span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-theme': HelixTheme;\n }\n}\n\n/** Canonical type alias for HelixTheme. Use this when typing hx-theme element references. */\nexport type HxTheme = HelixTheme;\n"],"names":["helixThemeStyles","css","mergeBrandTokens","baseCSS","brandTokens","brandOverrides","name","value","_hcOverrides","_compactDensityOverrides","_spaciousDensityOverrides","_reducedMotionOverrides","_buildProps","entries","_cssCache","_buildThemeCss","theme","cached","lightMap","tokenEntries","t","merged","darkTokenEntries","HelixTheme","HelixElement","changed","autoMode","announcer","_a","HelixBrandRegistry","html","__decorateClass","property","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"toast-factory-BPPnG3mM.js","sources":["../../src/components/hx-toast/hx-toast.styles.ts","../../src/components/hx-toast/hx-toast.ts","../../src/components/hx-toast/hx-toast-stack.ts","../../src/components/hx-toast/toast-factory.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToastStyles = css`\n /* ─── hx-toast host ─── */\n\n :host {\n display: block;\n pointer-events: none;\n }\n\n :host([open]) {\n pointer-events: auto;\n }\n\n /* ─── Toast base ─── */\n\n .toast {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));\n color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-toast-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n line-height: var(--hx-line-height-normal, 1.5);\n box-shadow: var(\n --hx-toast-shadow,\n var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))\n );\n opacity: 0;\n transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));\n transition:\n opacity var(--hx-transition-normal, 250ms ease),\n transform var(--hx-transition-normal, 250ms ease);\n width: var(--hx-toast-width, 20rem);\n max-width: 100%;\n pointer-events: auto;\n }\n\n :host([open]) .toast {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ─── Variant overrides ─── */\n\n .toast--success {\n --hx-toast-bg: var(--hx-color-success-600, #15803d);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n .toast--warning {\n --hx-toast-bg: var(--hx-color-warning-500, #d97706);\n --hx-toast-color: var(--hx-color-neutral-900, #0f172a);\n }\n\n .toast--danger {\n --hx-toast-bg: var(--hx-color-error-600, #b91c1c);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n .toast--info {\n --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);\n --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* Visually hidden — non-color cue for severity variants (success/warning/danger/info). */\n /* Ensures variant is not conveyed by color alone for color-blind users. */\n\n .toast__severity-label {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Icon ─── */\n\n .toast__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n line-height: 1;\n }\n\n .toast__icon:empty {\n display: none;\n }\n\n /* ─── Message ─── */\n\n .toast__message {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n /* ─── Action slot ─── */\n\n .toast__action {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n }\n\n .toast__action:empty {\n display: none;\n }\n\n /* ─── Close button ─── */\n\n .toast__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* WCAG 2.5.5: minimum 44×44px touch target */\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: var(--hx-space-1, 0.25rem);\n background: transparent;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n color: inherit;\n cursor: pointer;\n opacity: var(--hx-opacity-75, 0.75);\n transition: opacity var(--hx-transition-fast, 150ms ease);\n }\n\n .toast__close:hover {\n opacity: 1;\n }\n\n .toast__close:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid currentColor;\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .toast {\n transition: none;\n }\n\n .toast__close {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .toast {\n border: 1px solid CanvasText;\n }\n\n .toast__close {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n }\n`;\n\nexport const helixToastStackStyles = css`\n :host {\n display: block;\n position: fixed;\n z-index: var(--hx-z-index-toast, 1700);\n pointer-events: none;\n }\n\n .toast-stack {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-space-4, 1rem);\n pointer-events: none;\n }\n\n /* ─── Placements ─── */\n\n :host([placement='top-start']) {\n top: 0;\n inset-inline-start: 0;\n inset-inline-end: auto;\n bottom: auto;\n }\n\n :host([placement='top-center']) {\n top: 0;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n inset-inline-end: auto;\n bottom: auto;\n }\n\n :host([placement='top-end']) {\n top: 0;\n inset-inline-end: 0;\n inset-inline-start: auto;\n bottom: auto;\n }\n\n :host([placement='bottom-start']) {\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: auto;\n top: auto;\n }\n\n :host([placement='bottom-center']) {\n bottom: 0;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n inset-inline-end: auto;\n top: auto;\n }\n\n :host([placement='bottom-end']) {\n bottom: 0;\n inset-inline-end: 0;\n inset-inline-start: auto;\n top: auto;\n }\n\n /* ─── Bottom placements: reverse order so newest is on top ─── */\n\n :host([placement^='bottom']) .toast-stack {\n flex-direction: column-reverse;\n }\n\n /* ─── Slide direction by placement ─── */\n\n :host([placement^='top']) ::slotted(hx-toast) {\n --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixToastStyles } from './hx-toast.styles.js';\n\nexport type ToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * A transient notification message that auto-dismisses after a configurable duration.\n * Supports multiple visual variants, a closable button, icon/action slots, and full\n * ARIA live region semantics for screen readers.\n *\n * @summary Transient notification toast component.\n *\n * @tag hx-toast\n *\n * @slot - Default slot for the notification message.\n * @slot icon - Optional icon rendered before the message.\n * @slot action - Optional action button rendered after the message.\n *\n * @fires {CustomEvent} hx-show - Dispatched when the toast becomes visible.\n * @fires {CustomEvent} hx-hide - Dispatched when the toast begins hiding.\n * @fires {CustomEvent} hx-after-hide - Dispatched after the hide animation completes.\n *\n * @csspart base - The inner toast container div.\n * @csspart icon - The icon slot wrapper.\n * @csspart message - The message slot wrapper.\n * @csspart close-button - The dismiss button (only when closable).\n * @csspart action - The action slot wrapper.\n *\n * @cssprop [--hx-toast-bg=var(--hx-color-neutral-900)] - Toast background color.\n * @cssprop [--hx-toast-color=var(--hx-color-neutral-0)] - Toast text color.\n * @cssprop [--hx-toast-border-radius=var(--hx-border-radius-md)] - Toast border radius.\n * @cssprop [--hx-toast-shadow] - Toast box shadow.\n * @cssprop [--hx-toast-width=20rem] - Toast width.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-toast-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-toast-enter-translate=var(--hx-space-2)] - CSS custom property.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-transition-normal] - Transition timing.\n * @cssprop [--hx-color-success-600] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n */\n@customElement('hx-toast')\nexport class HelixToast extends HelixElement {\n static override styles = [helixToastStyles];\n\n // ─── Public Properties ───\n\n /**\n * Visual style variant.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'success' | 'warning' | 'danger' | 'info' = 'default';\n\n /**\n * Auto-dismiss duration in milliseconds. Set to 0 for persistent toasts.\n * @attr duration\n */\n @property({ type: Number })\n duration = 5000;\n\n /**\n * Whether to show a close button.\n * @attr closable\n */\n @property({ type: Boolean, reflect: true })\n closable = false;\n\n /**\n * Whether the toast is currently visible.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Accessible label for the close button. Override for localization.\n * @attr label-close\n */\n @property({ attribute: 'label-close' })\n labelClose = 'Dismiss notification';\n\n // ─── Private State ───\n\n /** @internal */\n @query('.toast') private _toastEl!: HTMLElement | null;\n\n /** @internal Tracks whether the action slot has slotted content. */\n @state() private _hasActionContent = false;\n\n /** @internal */\n private _timer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Reduced Motion ───\n\n /** @internal Returns true when the user has opted into reduced motion. */\n private get _reducedMotion(): boolean {\n // Guard for SSR — window.matchMedia is unavailable server-side\n if (typeof window === 'undefined') return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }\n\n /** @internal */\n private _timerStartedAt: number | null = null;\n\n /** @internal */\n private _timerRemaining: number | null = null;\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open) {\n this.removeAttribute('aria-hidden');\n this._emitShow();\n if (this.duration > 0 && !this._reducedMotion && !this._hasActionContent) {\n this._startTimer();\n }\n } else {\n this.setAttribute('aria-hidden', 'true');\n this._clearTimer();\n this._emitHide();\n }\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearTimer();\n }\n\n // ─── Public API ───\n\n /** Show the toast. */\n show(): void {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /** Hide the toast. */\n hide(): void {\n if (this.open) {\n this.open = false;\n }\n }\n\n // ─── Private Helpers ───\n\n /** @internal */\n private _startTimer(remaining?: number): void {\n this._clearTimerHandle();\n const delay = remaining ?? this.duration;\n this._timerStartedAt = Date.now();\n this._timerRemaining = delay;\n this._timer = setTimeout(() => {\n this.open = false;\n }, delay);\n }\n\n /** @internal */\n private _pauseTimer(): void {\n if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null) {\n return;\n }\n const elapsed = Date.now() - this._timerStartedAt;\n this._timerRemaining = Math.max(0, this._timerRemaining - elapsed);\n this._clearTimerHandle();\n }\n\n /** @internal */\n private _clearTimerHandle(): void {\n if (this._timer !== null) {\n clearTimeout(this._timer);\n this._timer = null;\n }\n }\n\n /** @internal */\n private _clearTimer(): void {\n this._clearTimerHandle();\n this._timerStartedAt = null;\n this._timerRemaining = null;\n }\n\n /** @internal */\n private _emitShow(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _emitHide(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n\n let fired = false;\n const fireAfterHide = () => {\n if (fired) return;\n fired = true;\n this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n };\n\n // Fire on transitionend if available; fallback ensures it fires in test environments\n // and when transitions are disabled (prefers-reduced-motion, no CSS transitions).\n const base = this._toastEl;\n if (base) {\n base.addEventListener('transitionend', fireAfterHide, { once: true });\n }\n // Fallback fires after the CSS transition duration (250ms) plus a small buffer.\n setTimeout(fireAfterHide, 300);\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleMouseEnter(): void {\n this._pauseTimer();\n }\n\n /** @internal */\n private _handleMouseLeave(): void {\n if (this.open && this.duration > 0) {\n this._startTimer(this._timerRemaining ?? undefined);\n }\n }\n\n /** @internal */\n private _handleFocusIn(): void {\n this._pauseTimer();\n }\n\n /** @internal */\n private _handleFocusOut(): void {\n if (this.open && this.duration > 0) {\n this._startTimer(this._timerRemaining ?? undefined);\n }\n }\n\n /** @internal */\n private _handleClose(): void {\n this.hide();\n }\n\n /** @internal */\n private _handleActionSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasActionContent = slot.assignedNodes({ flatten: true }).length > 0;\n if (this._hasActionContent && this.open) {\n this._pauseTimer();\n }\n }\n\n // ─── ARIA Helpers ───\n\n /** @internal */\n private get _role(): 'alert' | 'status' {\n return this.variant === 'danger' ? 'alert' : 'status';\n }\n\n /** @internal */\n private get _ariaLive(): 'assertive' | 'polite' {\n return this.variant === 'danger' ? 'assertive' : 'polite';\n }\n\n // ─── WCAG 1.4.1: Default Icons ───\n // Each semantic variant renders a default icon when no icon is slotted,\n // ensuring the severity is not conveyed by color alone.\n\n /** @internal */\n private _renderSuccessIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderDangerIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n <path\n fill=\"currentColor\"\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n />\n </svg>`;\n }\n\n /** @internal Returns the default icon for the current variant, or nothing for 'default'. */\n private get _defaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'danger':\n return this._renderDangerIcon();\n case 'info':\n return this._renderInfoIcon();\n default:\n return nothing;\n }\n }\n\n // ─── WCAG 1.4.1: Severity label map ───\n\n /** @internal */\n private static readonly _SEVERITY_LABELS: Partial<Record<ToastVariant, string>> = {\n success: 'Success',\n warning: 'Warning',\n danger: 'Error',\n info: 'Info',\n };\n\n /** @internal */\n private get _severityLabel(): string {\n return HelixToast._SEVERITY_LABELS[this.variant] ?? '';\n }\n\n // ─── Render ───\n\n override render() {\n const severityLabel = this._severityLabel;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n toast: true,\n [`toast--${this.variant}`]: true,\n })}\n role=${this._role}\n aria-live=${this._ariaLive}\n aria-atomic=\"true\"\n @mouseenter=${this._handleMouseEnter}\n @mouseleave=${this._handleMouseLeave}\n @focusin=${this._handleFocusIn}\n @focusout=${this._handleFocusOut}\n >\n ${this.open\n ? html`\n ${severityLabel\n ? html`<span class=\"toast__severity-label\">${severityLabel}: </span>`\n : nothing}\n <span part=\"icon\" class=\"toast__icon\">\n <slot name=\"icon\">${this._defaultIcon}</slot>\n </span>\n <span part=\"message\" class=\"toast__message\">\n <slot></slot>\n </span>\n <span part=\"action\" class=\"toast__action\">\n <slot name=\"action\" @slotchange=${this._handleActionSlotChange}></slot>\n </span>\n ${this.closable\n ? html`\n <button\n part=\"close-button\"\n class=\"toast__close\"\n aria-label=${this.labelClose}\n @click=${this._handleClose}\n >\n <svg\n aria-hidden=\"true\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n `\n : nothing}\n `\n : nothing}\n </div>\n `;\n }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-toast': HelixToast;\n }\n}\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixToastStackStyles } from './hx-toast.styles.js';\n\nexport type ToastStackPlacement =\n | 'top-start'\n | 'top-center'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-center'\n | 'bottom-end';\n\n/**\n * A fixed-position container that stacks `hx-toast` elements at the specified\n * corner of the viewport. Enforces a maximum visible toast count via `stack-limit`.\n *\n * @summary Toast stack container managing position and count limits.\n *\n * @tag hx-toast-stack\n *\n * @slot - Accepts `hx-toast` elements.\n *\n * @csspart base - The inner stack container div.\n *\n * @cssprop [--hx-z-index-toast=9000] - Z-index for the fixed stack.\n */\n@customElement('hx-toast-stack')\nexport class HelixToastStack extends HelixElement {\n static override styles = [helixToastStackStyles];\n\n /**\n * Corner of the viewport where toasts appear.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement:\n | 'top-start'\n | 'top-center'\n | 'top-end'\n | 'bottom-start'\n | 'bottom-center'\n | 'bottom-end' = 'bottom-end';\n\n /**\n * Maximum number of simultaneously visible toasts. 0 = unlimited.\n * @attr stack-limit\n */\n @property({ type: Number, attribute: 'stack-limit' })\n stackLimit = 3;\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'toast-stack': true,\n [`toast-stack--${this.placement}`]: true,\n })}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-toast-stack': HelixToastStack;\n }\n}\n","import { HelixToast } from './hx-toast.js';\nimport { HelixToastStack } from './hx-toast-stack.js';\nimport type { ToastVariant } from './hx-toast.js';\nimport type { ToastStackPlacement } from './hx-toast-stack.js';\n\nexport interface ToastOptions {\n /** The notification message text. */\n message: string;\n /** Visual variant. Defaults to 'default'. */\n variant?: ToastVariant;\n /** Auto-dismiss duration in ms. 0 = persistent. Defaults to 3000. */\n duration?: number;\n /** Placement of the shared stack. Defaults to 'bottom-end'. */\n placement?: ToastStackPlacement;\n}\n\n/**\n * Imperatively create and display a toast notification.\n *\n * Creates a shared `hx-toast-stack` on `document.body` if one does not exist,\n * then appends a new `hx-toast` with the given options. Respects the stack's\n * `stackLimit` by hiding the oldest visible toast when the limit is exceeded.\n *\n * @example\n * import { toast } from '@helixui/library/components/hx-toast/index.js';\n * toast({ message: 'Patient record saved.', variant: 'success' });\n */\nexport function toast(options: ToastOptions): HelixToast {\n if (typeof document === 'undefined') throw new Error('toast() requires a browser environment');\n const placement = options.placement ?? 'bottom-end';\n\n // Find or create a dedicated stack for this placement\n const stackSelector = `hx-toast-stack[placement=\"${placement}\"]`;\n let stack = document.querySelector<HelixToastStack>(stackSelector);\n if (!stack) {\n stack = document.createElement('hx-toast-stack');\n stack.placement = placement;\n // Intentional design decision: the toast stack is appended to document.body rather\n // than inserted near the caller. This is required so that the fixed-position overlay\n // is not clipped by an ancestor with `overflow: hidden`, `transform`, or `filter`\n // (all of which create a new stacking context and break fixed positioning).\n // Drupal compatibility note: Drupal's BigPipe / AJAX behaviors can re-attach the\n // document body without removing these stacks. The selector check above\n // (`document.querySelector`) ensures only one stack per placement is ever created,\n // preventing duplicates on re-attach cycles.\n document.body.appendChild(stack);\n }\n\n // Enforce stack limit: hide oldest open toast if at capacity\n if (stack.stackLimit > 0) {\n const openToasts = [...stack.querySelectorAll<HelixToast>('hx-toast')].filter((t) => t.open);\n if (openToasts.length >= stack.stackLimit) {\n openToasts[0]?.hide();\n }\n }\n\n // Create toast element\n const toastEl = document.createElement('hx-toast');\n toastEl.variant = options.variant ?? 'default';\n toastEl.duration = options.duration ?? 3000;\n toastEl.closable = true;\n toastEl.textContent = options.message;\n\n // Remove from DOM after hiding\n toastEl.addEventListener('hx-after-hide', () => {\n toastEl.remove();\n });\n\n stack.appendChild(toastEl);\n toastEl.show();\n\n return toastEl;\n}\n"],"names":["helixToastStyles","css","helixToastStackStyles","HelixToast","HelixElement","changedProperties","remaining","delay","elapsed","fired","fireAfterHide","base","e","slot","html","nothing","severityLabel","classMap","__decorateClass","property","query","state","customElement","HelixToastStack","toast","options","placement","stackSelector","stack","openToasts","t","_a","toastEl"],"mappings":";;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyKnBC,IAAwBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}
|