npm - @helixui/library - Versions diffs - 3.0.0-next.65 → 3.1.0-next.66 - Mend

@helixui/library 3.0.0-next.65 → 3.1.0-next.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (408) hide show

package/dist/shared/hx-combobox-DLwnvHVd.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-combobox-DLwnvHVd.js","sources":["../../src/components/hx-combobox/hx-combobox.styles.ts","../../src/components/hx-combobox/hx-combobox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixComboboxStyles = css`\n :host {\n display: block;\n }\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n * {\n box-sizing: border-box;\n }\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));\n position: relative;\n }\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1, 0.25rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #334155));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n .field__required-marker {\n color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n .field__input-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));\n border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));\n transition:\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n }\n .field__input-wrapper:focus-within {\n border-color: var(\n --hx-combobox-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n );\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(\n --hx-combobox-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n )\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n .field--error .field__input-wrapper {\n border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));\n }\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-combobox-error-color, var(--hx-color-error-500, #dc2626))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n .field__prefix,\n .field__suffix {\n display: flex;\n align-items: center;\n padding: 0 var(--hx-space-2, 0.5rem);\n color: var(--hx-color-text-muted, #64748b);\n flex-shrink: 0;\n }\n .field__input {\n flex: 1;\n min-width: 0;\n min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\n border: none;\n background: transparent;\n outline: none;\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n }\n .field__input::placeholder {\n color: var(--hx-color-text-placeholder, #94a3b8);\n }\n .field__input--sm {\n min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));\n font-size: var(--hx-font-size-sm, 0.875rem);\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n }\n .field__input--lg {\n min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));\n font-size: var(--hx-font-size-lg, 1.125rem);\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n }\n .field__clear-button,\n .field__loading-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-end: var(--hx-space-2, 0.5rem);\n flex-shrink: 0;\n color: var(--hx-color-text-placeholder, #94a3b8);\n }\n .field__clear-button {\n width: 1.25rem;\n height: 1.25rem;\n border: none;\n background: transparent;\n cursor: pointer;\n padding: 0;\n border-radius: var(--hx-border-radius-full, 9999px);\n transition: color var(--hx-transition-fast, 150ms ease);\n }\n .field__clear-button:hover {\n color: var(--hx-color-text-strong, #334155);\n }\n .field__clear-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n .field__loading-indicator {\n width: 1rem;\n height: 1rem;\n }\n .field__loading-spinner {\n width: 1rem;\n height: 1rem;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n animation: hx-spin 0.7s linear infinite;\n }\n @keyframes hx-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .field__loading-spinner {\n animation: none;\n }\n }\n .field__listbox {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n left: 0;\n right: 0;\n z-index: var(--hx-z-index-dropdown, 1000);\n background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));\n border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-combobox-listbox-shadow,\n 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 12%, transparent)\n );\n max-height: var(--hx-combobox-listbox-max-height, 16rem);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n .field__listbox[hidden] {\n display: none;\n }\n .field__options {\n overflow-y: auto;\n flex: 1;\n padding: var(--hx-space-1, 0.25rem) 0;\n }\n .field__option {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n .field__option:hover {\n background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n }\n .field__option--selected {\n background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));\n font-weight: var(--hx-font-weight-medium, 500);\n }\n .field__option--focused {\n background-color: var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-combobox-option-focus-ring-offset, -2px);\n }\n .field__option--focused.field__option--selected {\n background-color: var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));\n }\n .field__option--disabled {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n .field__option-label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .field__no-options {\n padding: var(--hx-space-3, 0.75rem);\n text-align: center;\n color: var(--hx-color-text-placeholder, #94a3b8);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n .field__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 .field__help-text,\n .field__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n .field__help-text {\n color: var(--hx-color-text-muted, #64748b);\n }\n .field__error {\n color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));\n }\n @media (prefers-reduced-motion: reduce) {\n .field__input-wrapper,\n .field__option,\n .field__clear-button,\n .field__chip-remove {\n transition: none;\n }\n }\n @media (forced-colors: active) {\n .field__input-wrapper {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n .field__input {\n color: FieldText;\n }\n .field__input::placeholder {\n color: GrayText;\n }\n .field__input-wrapper:focus-within {\n border-color: Highlight;\n box-shadow: none;\n }\n .field__listbox {\n forced-color-adjust: none;\n background-color: Canvas;\n border: 2px solid CanvasText;\n box-shadow: none;\n }\n .field__option {\n color: CanvasText;\n }\n .field__option:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .field__option--selected {\n background-color: Highlight;\n color: HighlightText;\n }\n .field__option--focused {\n outline-color: Highlight;\n background-color: Highlight;\n color: HighlightText;\n }\n .field__option--disabled {\n color: GrayText;\n opacity: 1;\n }\n .field__chip {\n forced-color-adjust: none;\n background-color: Highlight;\n color: HighlightText;\n border: 1px solid HighlightText;\n }\n .field__chip-remove:focus-visible {\n outline-color: Highlight;\n }\n .field__clear-button:focus-visible {\n outline-color: Highlight;\n }\n .field--error .field__input-wrapper {\n border-color: LinkText;\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .field__input-wrapper {\n border-color: GrayText;\n color: GrayText;\n }\n :host([disabled]) .field__input {\n color: GrayText;\n }\n .field__label {\n color: CanvasText;\n }\n .field__help-text {\n color: GrayText;\n }\n .field__error {\n color: LinkText;\n }\n }\n :host([multiple]) .field__input-wrapper {\n flex-wrap: wrap;\n padding: var(--hx-space-1, 0.25rem);\n gap: var(--hx-space-1, 0.25rem);\n align-items: center;\n }\n :host([multiple]) .field__input {\n min-width: 8rem;\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n flex-shrink: 1;\n }\n .field__chip {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n padding: 0 var(--hx-space-1, 0.25rem) 0 var(--hx-space-2, 0.5rem);\n height: 1.5rem;\n background-color: var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));\n color: var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e3a8a));\n border-radius: var(--hx-border-radius-full, 9999px);\n font-size: var(--hx-font-size-sm, 0.875rem);\n white-space: nowrap;\n max-width: 12rem;\n flex-shrink: 0;\n }\n .field__chip-label {\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 8rem;\n }\n .field__chip-remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n border: none;\n background: none;\n cursor: pointer;\n padding: 0;\n color: inherit;\n opacity: 0.7;\n border-radius: 50%;\n line-height: 1;\n transition: opacity var(--hx-transition-fast, 150ms ease);\n }\n .field__chip-remove:hover {\n opacity: 1;\n background-color: var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe));\n }\n .field__chip-remove:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 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 { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { helixComboboxStyles } from './hx-combobox.styles.js';\n\n// PERF: hx-combobox exceeds 5KB budget (6.87kb gzipped) -- typeahead filtering, multi-select chips, async loading\n\n// ─── Internal option model ───\n\n// P1-7: Exported so TypeScript consumers can type option arrays programmatically\nexport interface ComboboxOption {\n value: string;\n label: string;\n disabled: boolean;\n}\n\n// P2-13: Exported size type for TypeScript consumers\nexport type HxComboboxSize = 'sm' | 'md' | 'lg';\n\nconst _nextComboboxId = createIdCounter('hx-combobox');\n\n/** Detail for hx-input and hx-change events dispatched by hx-combobox. */\nexport interface HxComboboxDetail {\n value: string;\n}\n\n/**\n * A form-associated combobox component combining a text input with a listbox\n * for autocomplete and typeahead. Supports filtering, free-text entry,\n * keyboard navigation, and async option loading.\n *\n * @summary Form-associated combobox with autocomplete, filtering, and keyboard navigation.\n *\n * @tag hx-combobox\n *\n * @slot option - Slot for `<option>` elements that populate the listbox.\n * @slot prefix - Content to display before the text input.\n * @slot suffix - Content to display after the text input.\n * @slot empty-label - Content shown when no options match the filter.\n * @slot label - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched on each keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when an option is selected.\n * @fires {CustomEvent<void>} hx-clear - Dispatched when the clear button is activated.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the listbox opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the listbox closes.\n *\n * @csspart input - The native text input element.\n * @csspart listbox - The dropdown panel containing options.\n * @csspart trigger - The input wrapper element acting as the combobox trigger.\n * @csspart clear-button - The button that clears the current value.\n * @csspart loading-indicator - The loading spinner shown during async operations.\n * @csspart field - The outer field wrapper element.\n * @csspart label - The label element.\n * @csspart option - An individual option item in the listbox.\n * @csspart error - The error message element.\n * @csspart help-text - The help text element.\n *\n * @cssprop [--hx-combobox-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-combobox-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-combobox-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-combobox-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-combobox-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-combobox-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-combobox-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-combobox-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-combobox-listbox-bg=var(--hx-color-neutral-0)] - Listbox background color.\n * @cssprop [--hx-combobox-option-hover-bg=var(--hx-color-primary-50)] - Option hover background.\n * @cssprop [--hx-combobox-option-selected-bg=var(--hx-color-primary-100)] - Selected option background.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-opacity] - CSS custom property.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-input-height-md] - Height.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-input-height-sm] - Height.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-input-height-lg] - Height.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-z-index-dropdown] - Z-index layer.\n * @cssprop [--hx-combobox-listbox-shadow] - CSS custom property.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-combobox-listbox-max-height=16rem] - Height.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-combobox-option-focus-ring-offset=-2px] - Focus ring styling.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-combobox-chip-bg=var(--hx-color-primary-100)] - Background color.\n * @cssprop [--hx-combobox-chip-color=var(--hx-color-primary-800)] - Color.\n * @cssprop [--hx-color-primary-800] - Color.\n * @cssprop [--hx-combobox-chip-remove-hover-bg=var(--hx-color-primary-200)] - Background color.\n * @cssprop [--hx-color-primary-200] - Color.\n */\n@customElement('hx-combobox')\nexport class HelixCombobox extends FormMixin(HelixElement) {\n static override styles = [helixComboboxStyles];\n\n // ─── Form Association ───\n\n /** Marks this element as form-associated for ElementInternals support. @internal */\n static override formAssociated = true;\n\n // ─── Stable IDs ───\n\n /** @internal */\n private _id = _nextComboboxId();\n /** @internal */\n private _listboxId = `${this._id}-listbox`;\n /** @internal */\n private _helpTextId = `${this._id}-help`;\n /** @internal */\n private _errorId = `${this._id}-error`;\n /** @internal */\n private _labelId = `${this._id}-label`;\n /** @internal */\n private _liveRegionId = `${this._id}-live`;\n\n // ─── Public Properties ───\n\n /**\n * The visible label text for the combobox.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Placeholder text shown in the input when no value is entered.\n * @attr placeholder\n */\n @property({ type: String })\n placeholder = '';\n\n /**\n * The current value of the combobox.\n * @attr value\n */\n @property({ type: String, reflect: true })\n value = '';\n\n /**\n * Whether the combobox is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the combobox is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The name used for form submission.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n /**\n * Error message to display. When set, the field enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the combobox for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Size variant of the combobox.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size', reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether multiple options can be selected.\n * @attr multiple\n */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /**\n * Whether the combobox shows a clear button when a value is set.\n * @attr clearable\n */\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n /**\n * Whether the combobox is in a loading state (shows spinner).\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Debounce delay in milliseconds for the filter input event.\n * @attr filter-debounce\n */\n @property({ type: Number, attribute: 'filter-debounce' })\n filterDebounce = 0;\n\n /**\n * Accessible name for screen readers, if different from the visible label.\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 form\n * inputs with associated labels delegate accessible naming via `<label>`\n * association and `aria-labelledby`, not host-level ARIA delegation. The\n * `accessible-label` attribute is a fallback for label-free usage. The value is forwarded to the\n * internal input's `aria-label`.\n * @attr accessible-label\n */\n @property({ type: String, attribute: 'accessible-label' })\n accessibleLabel: string | null = null;\n\n /**\n * Text shown when no options match the current filter.\n * @attr label-no-options\n */\n @property({ type: String, attribute: 'label-no-options' })\n labelNoOptions = 'No options found';\n\n /**\n * Validation message shown when the field is required but empty.\n * @attr label-required\n */\n @property({ type: String, attribute: 'label-required' })\n labelRequired = 'Please select an option.';\n\n /**\n * Generates the accessible label for multi-select chip remove buttons.\n * @param label - the option label text\n */\n @property({ attribute: false })\n labelRemoveOption: (label: string) => string = (label) => `Remove ${label}`;\n\n // ─── Internal State ───\n\n /** Parsed option models derived from slotted `<option>` and `<optgroup>` elements. @internal */\n @state() private _options: ComboboxOption[] = [];\n /** Current text typed in the input, used to filter the option list. @internal */\n @state() private _filterText = '';\n /** Whether the listbox dropdown is currently visible. @internal */\n @state() private _open = false;\n /** Zero-based index of the keyboard-focused option within the filtered list; -1 means none. @internal */\n @state() private _focusedOptionIndex = -1;\n /** Whether the named error slot contains projected content. @internal */\n @state() private _hasErrorSlot = false;\n /** Live-region announcement text describing the current number of filtered options. @internal */\n @state() private _filterAnnouncement = '';\n\n // ─── Queries ───\n\n /** Reference to the native text input element inside the shadow DOM. @internal */\n @query('.field__input')\n private _input: HTMLInputElement | undefined;\n\n // ─── Debounce timer ───\n\n /** @internal */\n private _debounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Multiple Selection ───\n\n // P0-1: Derive selected values Set from the comma-separated value property\n /** @internal */\n private get _selectedValuesSet(): Set<string> {\n if (!this.multiple || !this.value) return new Set();\n return new Set(this.value.split(',').filter(Boolean));\n }\n\n // ─── Filtered options ───\n\n /** @internal */\n private get _filteredOptions(): ComboboxOption[] {\n if (!this._filterText) return this._options;\n const lower = this._filterText.toLowerCase();\n return this._options.filter((o) => o.label.toLowerCase().includes(lower));\n }\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n // Safety net: remove listener if component is removed while dropdown is open\n if (typeof document !== 'undefined') {\n document.removeEventListener('click', this._handleOutsideClick);\n }\n if (this._debounceTimer !== null) {\n clearTimeout(this._debounceTimer);\n }\n // Reset open state to prevent persisted open state on reconnect\n if (this._open) {\n this._open = false;\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this._updateFormValue();\n }\n // Force screen reader re-announcement when error text changes (a11y-v3-005)\n if (changedProperties.has('error') && this.error) {\n const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n if (errorEl) {\n const msg = this.error;\n requestAnimationFrame(() => {\n errorEl.textContent = '';\n requestAnimationFrame(() => {\n errorEl.textContent = msg;\n });\n });\n }\n }\n }\n\n // ─── Form Integration ───\n\n /** @internal */\n private _updateFormValue(): void {\n this._internals.setFormValue(this.value || null);\n }\n\n /** @internal */\n override _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || this.labelRequired,\n this._input,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** @internal */\n protected override _onFormReset(): void {\n this.value = '';\n this._filterText = '';\n this._internals.setFormValue(null);\n this._resetInteractionState();\n }\n\n /** @internal */\n // P1-6: Correct signature per WHATWG spec — includes mode param and all state types\n protected override _onFormStateRestore(\n state: File | string | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /** @internal */\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Option Syncing from Slot ───\n\n /** @internal */\n private _handleSlotChange(): void {\n this._readOptions();\n }\n\n /** @internal */\n private _parseOption(el: HTMLOptionElement): ComboboxOption {\n return { value: el.value, label: el.textContent?.trim() ?? el.value, disabled: el.disabled };\n }\n\n /** @internal */\n private _readOptions(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"option\"]');\n if (!slot) return;\n\n const parsed: ComboboxOption[] = [];\n\n for (const el of slot.assignedElements({ flatten: true })) {\n if (el instanceof HTMLOptionElement) {\n parsed.push(this._parseOption(el));\n } else if (el instanceof HTMLOptGroupElement) {\n for (const child of Array.from(el.children)) {\n if (child instanceof HTMLOptionElement) parsed.push(this._parseOption(child));\n }\n }\n }\n\n this._options = parsed;\n }\n\n // ─── Slot Change Handlers ───\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Dropdown Control ───\n\n /** @internal */\n private _openDropdown(): void {\n if (this.disabled || this._open) return;\n this._open = true;\n this._focusedOptionIndex = -1;\n if (typeof document !== 'undefined') {\n document.addEventListener('click', this._handleOutsideClick);\n }\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _closeDropdown(): void {\n if (!this._open) return;\n this._open = false;\n this._focusedOptionIndex = -1;\n this._handleInteractionBlur();\n if (typeof document !== 'undefined') {\n document.removeEventListener('click', this._handleOutsideClick);\n }\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n }\n\n // ─── Input Handling ───\n\n /** @internal */\n private _handleInput(e: Event): void {\n const input = e.target as HTMLInputElement;\n this._filterText = input.value;\n\n if (!this._open) {\n this._openDropdown();\n }\n\n this._focusedOptionIndex = -1;\n\n if (this.filterDebounce > 0) {\n if (this._debounceTimer !== null) {\n clearTimeout(this._debounceTimer);\n }\n this._debounceTimer = setTimeout(() => {\n this._emitInput();\n this._announceFilterResults();\n }, this.filterDebounce);\n } else {\n this._emitInput();\n this._announceFilterResults();\n }\n }\n\n /** @internal */\n private _announceFilterResults(): void {\n const count = this._filteredOptions.length;\n this._filterAnnouncement =\n count === 0\n ? 'No matching options'\n : `${count} ${count === 1 ? 'option' : 'options'} available`;\n }\n\n /** @internal */\n private _emitInput(): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this._filterText },\n }),\n );\n }\n\n /** @internal */\n private _handleFocus(): void {\n this._openDropdown();\n }\n\n // ─── Keyboard Navigation ───\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (this.disabled) return;\n\n const filtered = this._filteredOptions;\n const enabledIndices = filtered\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled)\n .map(({ i }) => i);\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : -1;\n break;\n }\n const nextDown = enabledIndices.find((i) => i > this._focusedOptionIndex);\n this._focusedOptionIndex =\n nextDown !== undefined ? nextDown : (enabledIndices[0] ?? this._focusedOptionIndex);\n break;\n }\n case 'ArrowUp': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n const lastEnabled = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : -1;\n break;\n }\n const prevUp = [...enabledIndices].reverse().find((i) => i < this._focusedOptionIndex);\n const lastEnabledUp = enabledIndices[enabledIndices.length - 1];\n this._focusedOptionIndex =\n prevUp !== undefined ? prevUp : (lastEnabledUp ?? this._focusedOptionIndex);\n break;\n }\n case 'Enter': {\n e.preventDefault();\n if (!this._open) {\n this._openDropdown();\n break;\n }\n if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < filtered.length) {\n const opt = filtered[this._focusedOptionIndex];\n if (opt) this._selectOption(opt);\n }\n break;\n }\n case 'Escape': {\n e.preventDefault();\n this._closeDropdown();\n this._filterText = '';\n if (this._input) this._input.value = '';\n break;\n }\n case 'Tab': {\n this._closeDropdown();\n break;\n }\n // P1-1: Home/End keyboard navigation for option list\n case 'Home': {\n e.preventDefault();\n if (!this._open) this._openDropdown();\n this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? -1) : -1;\n break;\n }\n case 'End': {\n e.preventDefault();\n if (!this._open) this._openDropdown();\n this._focusedOptionIndex =\n enabledIndices.length > 0 ? (enabledIndices[enabledIndices.length - 1] ?? -1) : -1;\n break;\n }\n default:\n break;\n }\n }\n\n // ─── Selection ───\n\n // P0-1: Handle both single and multiple selection modes\n /** @internal */\n private _selectOption(option: ComboboxOption): void {\n if (option.disabled) return;\n if (this.multiple) {\n const current = this._selectedValuesSet;\n const next = new Set(current);\n if (next.has(option.value)) {\n next.delete(option.value);\n } else {\n next.add(option.value);\n }\n this.value = [...next].join(',');\n // Keep dropdown open for multiple selection so user can pick more\n } else {\n this.value = option.value;\n this._closeDropdown();\n }\n this._handleInteractionInput();\n this._filterText = '';\n if (this._input) this._input.value = '';\n this._dispatchChange();\n }\n\n // P0-1: Remove a single value from multi-selection\n /** @internal */\n private _removeValue(val: string): void {\n const next = this._selectedValuesSet;\n next.delete(val);\n this.value = [...next].join(',');\n this._dispatchChange();\n }\n\n // ─── Clear ───\n\n /** @internal */\n private _handleClear(e: Event): void {\n e.stopPropagation();\n this.value = '';\n this._filterText = '';\n if (this._input) {\n this._input.value = '';\n this._input.focus();\n }\n this._internals.setFormValue(null);\n this._updateValidity();\n this.dispatchEvent(new CustomEvent<void>('hx-clear', { bubbles: true, composed: true }));\n }\n\n // ─── Event Dispatchers ───\n\n /** @internal */\n private _dispatchChange(): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Outside Click Handler ───\n\n /** @internal */\n private _handleOutsideClick = (e: MouseEvent): void => {\n if (this._open && !e.composedPath().includes(this)) {\n this._closeDropdown();\n }\n };\n\n // ─── Public Methods ───\n\n /** Moves focus to the text input. */\n override focus(options?: FocusOptions): void {\n this._input?.focus(options);\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _optionId(index: number): string {\n return `${this._id}-option-${index}`;\n }\n\n /** @internal */\n private get _displayValue(): string {\n // P0-1: In multiple mode, chips render selected values — input shows only filter text\n if (this.multiple) return '';\n if (!this.value) return '';\n const opt = this._options.find((o) => o.value === this.value);\n return opt ? opt.label : this.value;\n }\n\n /** @internal */\n private _renderOptions() {\n const filtered = this._filteredOptions;\n\n if (filtered.length === 0) {\n return html`\n <slot name=\"empty-label\">\n <div class=\"field__no-options\">${this.labelNoOptions}</div>\n </slot>\n `;\n }\n\n return repeat(\n filtered,\n (opt) => opt.value,\n (opt, index) => {\n // P0-1: Use Set membership for multiple mode, direct equality for single mode\n const isSelected = this.multiple\n ? this._selectedValuesSet.has(opt.value)\n : opt.value === this.value;\n const isFocused = index === this._focusedOptionIndex;\n\n return html`\n <div\n id=${this._optionId(index)}\n part=\"option\"\n role=\"option\"\n class=${classMap({\n field__option: true,\n 'field__option--selected': isSelected,\n 'field__option--focused': isFocused,\n 'field__option--disabled': opt.disabled,\n })}\n aria-selected=${this.multiple\n ? isSelected\n ? 'true'\n : 'false'\n : isSelected\n ? 'true'\n : nothing}\n aria-disabled=${opt.disabled ? 'true' : nothing}\n @click=${() => this._selectOption(opt)}\n >\n <span class=\"field__option-label\">${opt.label}</span>\n </div>\n `;\n },\n );\n }\n\n // ─── Main Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n const showClear = this.clearable && !!this.value && !this.disabled;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n 'field--open': this._open,\n };\n\n const inputClasses = {\n field__input: true,\n [`field__input--${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError || this._hasErrorSlot ? this._errorId : null,\n this.helpText ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n const activedescendant =\n this._open && this._focusedOptionIndex >= 0\n ? this._optionId(this._focusedOptionIndex)\n : undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n \n <slot name=\"label\">\n ${this.label\n ? html`<label id=${this._labelId} for=${this._id} part=\"label\" class=\"field__label\">\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>`\n : nothing}\n </slot>\n\n \n <div part=\"trigger\" class=\"field__input-wrapper\">\n \n <slot name=\"prefix\" class=\"field__prefix\"></slot>\n\n \n ${this.multiple && this._selectedValuesSet.size > 0\n ? [...this._selectedValuesSet].map((val) => {\n const opt = this._options.find((o) => o.value === val);\n const label = opt ? opt.label : val;\n return html`\n <span class=\"field__chip\">\n <span class=\"field__chip-label\">${label}</span>\n <button\n type=\"button\"\n class=\"field__chip-remove\"\n aria-label=${this.labelRemoveOption(label)}\n @click=${(e: Event) => {\n e.stopPropagation();\n this._removeValue(val);\n }}\n >\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M1 1L7 7M7 1L1 7\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n </span>\n `;\n })\n : nothing}\n\n \n <input\n part=\"input\"\n type=\"text\"\n id=${this._id}\n class=${classMap(inputClasses)}\n role=\"combobox\"\n aria-expanded=${this._open ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n aria-controls=${this._listboxId}\n aria-activedescendant=${ifDefined(activedescendant)}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-label=${ifDefined(this.accessibleLabel || undefined)}\n aria-labelledby=${ifDefined(\n this.label && !this.accessibleLabel ? this._labelId : undefined,\n )}\n aria-busy=${this.loading ? 'true' : nothing}\n .value=${this._filterText || (this._open ? '' : this._displayValue)}\n placeholder=${ifDefined(this.placeholder || undefined)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name || undefined)}\n autocomplete=\"off\"\n @input=${this._handleInput}\n @focus=${this._handleFocus}\n @keydown=${this._handleKeydown}\n />\n\n \n ${this.loading\n ? html`\n <div part=\"loading-indicator\" class=\"field__loading-indicator\" aria-hidden=\"true\">\n <div class=\"field__loading-spinner\"></div>\n </div>\n `\n : nothing}\n\n \n ${showClear\n ? html`\n <button\n part=\"clear-button\"\n type=\"button\"\n class=\"field__clear-button\"\n aria-label=${`Clear ${this.label || this.accessibleLabel || 'selection'}`}\n tabindex=\"0\"\n @click=${this._handleClear}\n >\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M1 1L11 11M11 1L1 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n `\n : nothing}\n\n \n <slot name=\"suffix\" class=\"field__suffix\"></slot>\n </div>\n\n \n <div\n part=\"listbox\"\n role=\"listbox\"\n id=${this._listboxId}\n class=\"field__listbox\"\n aria-label=${ifDefined(this.label || this.accessibleLabel || undefined)}\n aria-multiselectable=${this.multiple ? 'true' : nothing}\n ?hidden=${!this._open}\n >\n <div class=\"field__options\">${this._renderOptions()}</div>\n </div>\n\n \n <slot name=\"option\" @slotchange=${this._handleSlotChange} style=\"display:none;\"></slot>\n\n \n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${hasError\n ? html`<div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>`\n : nothing}\n </slot>\n\n \n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n\n \n <div id=${this._liveRegionId} aria-live=\"polite\" aria-atomic=\"true\" class=\"field__sr-only\">\n ${this._filterAnnouncement}\n </div>\n </div>\n `;\n }\n}\n\n/**\n * Per-component event map for type-safe addEventListener on hx-combobox.\n * The `hx-change` detail is `{ value: string }` only — no `checked` property.\n */\nexport interface HxComboboxEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n 'hx-change': CustomEvent<{ value: string }>;\n 'hx-clear': CustomEvent<void>;\n 'hx-show': CustomEvent<void>;\n 'hx-hide': CustomEvent<void>;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-combobox': HelixCombobox;\n }\n interface HTMLElementEventMap {\n 'hx-input': CustomEvent<{ value: string }>;\n 'hx-clear': CustomEvent<void>;\n 'hx-show': CustomEvent<void>;\n 'hx-hide': CustomEvent<void>;\n }\n}\n\nexport type { HelixCombobox as HxCombobox };\n"],"names":["helixComboboxStyles","css","_nextComboboxId","createIdCounter","HelixCombobox","FormMixin","HelixElement","label","lower","o","changedProperties","errorEl","_a","msg","state","_mode","disabled","el","slot","parsed","child","input","count","filtered","enabledIndices","i","nextDown","lastEnabled","prevUp","lastEnabledUp","opt","option","current","next","val","options","index","html","repeat","isSelected","isFocused","classMap","nothing","hasError","showClear","fieldClasses","inputClasses","describedBy","activedescendant","e","ifDefined","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}

package/dist/shared/hx-container-DVI7sxfX.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-container-DVI7sxfX.js","sources":["../../src/components/hx-container/hx-container.styles.ts","../../src/components/hx-container/hx-container.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixContainerStyles = css`\n :host {\n display: block;\n contain: layout style;\n width: 100%;\n background-color: var(--hx-container-bg, transparent);\n box-sizing: border-box;\n }\n\n /* ─── Vertical Padding Variants ─── /\n\n :host([padding='sm']) {\n padding-top: var(--hx-space-6, 1.5rem);\n padding-bottom: var(--hx-space-6, 1.5rem);\n }\n\n :host([padding='md']) {\n padding-top: var(--hx-space-12, 3rem);\n padding-bottom: var(--hx-space-12, 3rem);\n }\n\n :host([padding='lg']) {\n padding-top: var(--hx-space-16, 4rem);\n padding-bottom: var(--hx-space-16, 4rem);\n }\n\n :host([padding='xl']) {\n padding-top: var(--hx-space-24, 6rem);\n padding-bottom: var(--hx-space-24, 6rem);\n }\n\n :host([padding='2xl']) {\n padding-top: var(--hx-space-32, 8rem);\n padding-bottom: var(--hx-space-32, 8rem);\n }\n\n / ─── Inner Container ─── /\n\n .container__inner {\n margin-inline-start: auto;\n margin-inline-end: auto;\n padding-inline-start: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n padding-inline-end: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n box-sizing: border-box;\n width: 100%;\n }\n\n / ─── Width Variants ─── /\n\n .container__inner--full {\n max-width: none;\n }\n\n .container__inner--content {\n max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));\n }\n\n .container__inner--narrow {\n max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));\n }\n\n .container__inner--sm {\n max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));\n }\n\n .container__inner--md {\n max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));\n }\n\n .container__inner--lg {\n max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));\n }\n\n .container__inner--xl {\n max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n / hx-container is a layout wrapper with no state communicated via color.\n forced-color-adjust: auto (default) is sufficient. /\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\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 { helixContainerStyles } from './hx-container.styles.js';\n\n/\n A layout container that constrains content width and provides\n * consistent vertical spacing and horizontal gutters.\n \n Uses a two-layer model: the outer host spans full width (background,\n * vertical padding), while the inner wrapper constrains max-width,\n * centers content, and applies horizontal gutters.\n \n ## Accessibility\n \n `hx-container` is a purely visual layout primitive with no semantic meaning.\n * It carries no ARIA role and is intentionally transparent to assistive\n * technologies. Screen readers announce the container's children directly,\n * not the container itself.\n \n The inner wrapper always centers content horizontally (via `margin: auto`).\n * This is by design for page-layout use cases. If you need non-centered\n * alignment at a specific breakpoint, override `margin-left` and\n * `margin-right` on `::part(inner)` from your stylesheet.\n \n @summary Layout primitive for constraining content width with consistent spacing.\n \n @tag hx-container\n \n @slot - Default slot for container content.\n \n @csspart inner - The inner wrapper that constrains max-width and applies gutters.\n \n @cssprop [--hx-container-bg=transparent] - Background color on the outer wrapper.\n * @cssprop [--hx-container-gutter=var(--hx-space-6)] - Horizontal padding on the inner box.\n * @cssprop [--hx-container-max-width] - Override the max-width set by the width property.\n * @cssprop [--hx-container-content=72rem] - Max-width for the content width preset.\n * @cssprop [--hx-container-narrow=48rem] - Max-width for the narrow width preset.\n * @cssprop [--hx-container-sm=640px] - Max-width for the sm width preset.\n * @cssprop [--hx-container-md=768px] - Max-width for the md width preset.\n * @cssprop [--hx-container-lg=1024px] - Max-width for the lg width preset.\n * @cssprop [--hx-container-xl=1280px] - Max-width for the xl width preset.\n /\n@customElement('hx-container')\nexport class HelixContainer extends HelixElement {\n static override styles = [helixContainerStyles];\n\n /\n Controls the max-width of the inner content wrapper.\n * @attr width\n * @example\n * // Width presets and their default max-width values:\n * // full → no max-width constraint\n * // content → 72rem (1152px)\n * // narrow → 48rem (768px) — override with --hx-container-narrow\n * // sm → 640px — override with --hx-container-sm\n * // md → 768px — override with --hx-container-md\n * // lg → 1024px — override with --hx-container-lg\n * // xl → 1280px — override with --hx-container-xl\n /\n @property({ type: String, reflect: true })\n width: 'full' \| 'content' \| 'narrow' \| 'sm' \| 'md' \| 'lg' \| 'xl' = 'content';\n\n /\n Vertical padding applied to the outer wrapper.\n * @attr padding\n /\n @property({ type: String, reflect: true })\n padding: 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' = 'none';\n\n // ─── Render ───\n\n override render() {\n const classes = {\n container__inner: true,\n [`container__inner--${this.width}`]: true,\n };\n\n return html`\n <div part=\"inner\" class=${classMap(classes)}>\n <slot></slot>\n </div>\n `;\n }\n}\n\n/* Canonical type alias for the hx-container component. */\nexport type HxContainer = HelixContainer;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-container': HelixContainer;\n }\n}\n"],"names":["helixContainerStyles","css","HelixContainer","HelixElement","classes","html","classMap","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;~~AC4C7B~~,IAAMC,IAAN,cAA6BC,EAAa;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAiBL,KAAA,QAAmE,WAOnE,KAAA,UAAsD;AAAA,EAAA;AAAA;AAAA,EAI7C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,kBAAkB;AAAA,MAClB,CAAC,qBAAqB,KAAK,KAAK,EAAE,GAAG;AAAA,IAAA;AAGvC,WAAOC;AAAA,gCACqBC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAI/C;AACF;AAxCaF,EACK,SAAS,CAACF,CAAoB;AAgB9CO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9BN,EAiBX,WAAA,SAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvB9BN,EAwBX,WAAA,WAAA,CAAA;AAxBWA,IAANK,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBP,CAAA;"}
1	+ {"version":3,"file":"hx-container-DVI7sxfX.js","sources":["../../src/components/hx-container/hx-container.styles.ts","../../src/components/hx-container/hx-container.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixContainerStyles = css`\n :host {\n display: block;\n contain: layout style;\n width: 100%;\n background-color: var(--hx-container-bg, transparent);\n box-sizing: border-box;\n }\n\n /* ─── Vertical Padding Variants ─── /\n\n :host([padding='sm']) {\n padding-top: var(--hx-space-6, 1.5rem);\n padding-bottom: var(--hx-space-6, 1.5rem);\n }\n\n :host([padding='md']) {\n padding-top: var(--hx-space-12, 3rem);\n padding-bottom: var(--hx-space-12, 3rem);\n }\n\n :host([padding='lg']) {\n padding-top: var(--hx-space-16, 4rem);\n padding-bottom: var(--hx-space-16, 4rem);\n }\n\n :host([padding='xl']) {\n padding-top: var(--hx-space-24, 6rem);\n padding-bottom: var(--hx-space-24, 6rem);\n }\n\n :host([padding='2xl']) {\n padding-top: var(--hx-space-32, 8rem);\n padding-bottom: var(--hx-space-32, 8rem);\n }\n\n / ─── Inner Container ─── /\n\n .container__inner {\n margin-inline-start: auto;\n margin-inline-end: auto;\n padding-inline-start: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n padding-inline-end: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n box-sizing: border-box;\n width: 100%;\n }\n\n / ─── Width Variants ─── /\n\n .container__inner--full {\n max-width: none;\n }\n\n .container__inner--content {\n max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));\n }\n\n .container__inner--narrow {\n max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));\n }\n\n .container__inner--sm {\n max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));\n }\n\n .container__inner--md {\n max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));\n }\n\n .container__inner--lg {\n max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));\n }\n\n .container__inner--xl {\n max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n / hx-container is a layout wrapper with no state communicated via color.\n forced-color-adjust: auto (default) is sufficient. /\n @media (forced-colors: active) {\n :host {\n forced-color-adjust: auto;\n }\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 { helixContainerStyles } from './hx-container.styles.js';\n\n/\n A layout container that constrains content width and provides\n * consistent vertical spacing and horizontal gutters.\n \n Uses a two-layer model: the outer host spans full width (background,\n * vertical padding), while the inner wrapper constrains max-width,\n * centers content, and applies horizontal gutters.\n \n ## Accessibility\n \n `hx-container` is a purely visual layout primitive with no semantic meaning.\n * It carries no ARIA role and is intentionally transparent to assistive\n * technologies. Screen readers announce the container's children directly,\n * not the container itself.\n \n The inner wrapper always centers content horizontally (via `margin: auto`).\n * This is by design for page-layout use cases. If you need non-centered\n * alignment at a specific breakpoint, override `margin-left` and\n * `margin-right` on `::part(inner)` from your stylesheet.\n \n @summary Layout primitive for constraining content width with consistent spacing.\n \n @tag hx-container\n \n @slot - Default slot for container content.\n \n @csspart inner - The inner wrapper that constrains max-width and applies gutters.\n \n @cssprop [--hx-container-bg=transparent] - Background color on the outer wrapper.\n * @cssprop [--hx-container-gutter=var(--hx-space-6)] - Horizontal padding on the inner box.\n * @cssprop [--hx-container-max-width] - Override the max-width set by the width property.\n * @cssprop [--hx-container-content=72rem] - Max-width for the content width preset.\n * @cssprop [--hx-container-narrow=48rem] - Max-width for the narrow width preset.\n * @cssprop [--hx-container-sm=640px] - Max-width for the sm width preset.\n * @cssprop [--hx-container-md=768px] - Max-width for the md width preset.\n * @cssprop [--hx-container-lg=1024px] - Max-width for the lg width preset.\n * @cssprop [--hx-container-xl=1280px] - Max-width for the xl width preset.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-12] - Spacing token.\n * @cssprop [--hx-space-16] - Spacing token.\n * @cssprop [--hx-space-24] - Spacing token.\n * @cssprop [--hx-space-32] - Spacing token.\n /\n@customElement('hx-container')\nexport class HelixContainer extends HelixElement {\n static override styles = [helixContainerStyles];\n\n /\n Controls the max-width of the inner content wrapper.\n * @attr width\n * @example\n * // Width presets and their default max-width values:\n * // full → no max-width constraint\n * // content → 72rem (1152px)\n * // narrow → 48rem (768px) — override with --hx-container-narrow\n * // sm → 640px — override with --hx-container-sm\n * // md → 768px — override with --hx-container-md\n * // lg → 1024px — override with --hx-container-lg\n * // xl → 1280px — override with --hx-container-xl\n /\n @property({ type: String, reflect: true })\n width: 'full' \| 'content' \| 'narrow' \| 'sm' \| 'md' \| 'lg' \| 'xl' = 'content';\n\n /\n Vertical padding applied to the outer wrapper.\n * @attr padding\n /\n @property({ type: String, reflect: true })\n padding: 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' = 'none';\n\n // ─── Render ───\n\n override render() {\n const classes = {\n container__inner: true,\n [`container__inner--${this.width}`]: true,\n };\n\n return html`\n <div part=\"inner\" class=${classMap(classes)}>\n <slot></slot>\n </div>\n `;\n }\n}\n\n/* Canonical type alias for the hx-container component. */\nexport type HxContainer = HelixContainer;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-container': HelixContainer;\n }\n}\n"],"names":["helixContainerStyles","css","HelixContainer","HelixElement","classes","html","classMap","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACiD7B,IAAMC,IAAN,cAA6BC,EAAa;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAiBL,KAAA,QAAmE,WAOnE,KAAA,UAAsD;AAAA,EAAA;AAAA;AAAA,EAI7C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,kBAAkB;AAAA,MAClB,CAAC,qBAAqB,KAAK,KAAK,EAAE,GAAG;AAAA,IAAA;AAGvC,WAAOC;AAAA,gCACqBC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAI/C;AACF;AAxCaF,EACK,SAAS,CAACF,CAAoB;AAgB9CO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9BN,EAiBX,WAAA,SAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvB9BN,EAwBX,WAAA,WAAA,CAAA;AAxBWA,IAANK,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBP,CAAA;"}

package/dist/shared/hx-copy-button-8deNUdwP.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-copy-button-8deNUdwP.js","sources":["../../src/components/hx-copy-button/hx-copy-button.styles.ts","../../src/components/hx-copy-button/hx-copy-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCopyButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2);\n border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);\n border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-copy-button-bg, transparent);\n color: var(--hx-copy-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n flex-shrink: 0;\n font-family: var(--hx-copy-button-font-family, var(--hx-font-family-sans));\n font-weight: var(--hx-font-weight-medium);\n white-space: nowrap;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n .button:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── /\n\n .button--sm {\n padding: var(--hx-space-1);\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-sm);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n min-width: var(--hx-size-10);\n height: var(--hx-size-10);\n font-size: var(--hx-font-size-md);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n min-width: var(--hx-size-12);\n height: var(--hx-size-12);\n font-size: var(--hx-font-size-lg);\n }\n\n / ─── Copied / Success State ─── /\n\n .button--copied {\n color: var(--hx-color-success-text, var(--hx-color-primary-500));\n / Secondary non-color indicator required per WCAG 1.4.1 (use of color).\n A border provides visual differentiation for users with color blindness. /\n border-color: var(--hx-color-success-500, var(--hx-color-primary-500));\n }\n\n / ─── Icon Container ─── /\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1em;\n height: 1em;\n line-height: 1;\n pointer-events: none;\n flex-shrink: 0;\n }\n\n / ─── Disabled ─── /\n\n .button[disabled] {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled);\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-width: 0;\n }\n\n / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n .button {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .button:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .button[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n .button--copied {\n border-color: Highlight;\n color: Highlight;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCopyButtonStyles } from './hx-copy-button.styles.js';\n\n/* Minimum allowed value for feedbackDuration (ms). /\nconst MIN_FEEDBACK_DURATION = 300;\n\n/* Allowed size values for runtime validation. /\nconst VALID_SIZES = new Set(['sm', 'md', 'lg']);\n\n/\n A clipboard copy button component that writes a given value to the system\n * clipboard. Provides idle and success states with configurable feedback\n * duration, slot-based icon overrides, and an accessible live region that\n * announces copy completion to screen reader users.\n \n The `aria-label` reflects the current copy state: idle shows `label`,\n * copied state appends \" — Copied\" so screen reader users who re-focus the\n * button after copy receive an accurate accessible name.\n \n Note: `aria-pressed` is intentionally NOT used. This is not a toggle button;\n * copied is a transient feedback state, not a persistent on/off toggle.\n \n @summary One-click clipboard copy with accessible success feedback.\n \n @tag hx-copy-button\n \n @slot - Optional label text rendered inside the button alongside the icon.\n * @slot copy-icon - Icon shown in the idle (pre-copy) state.\n * @slot success-icon - Icon shown after a successful clipboard write.\n \n @fires {CustomEvent<{value: string}>} hx-copy - Dispatched after the value\n * has been successfully written to the clipboard.\n * @fires {CustomEvent<{value: string; error: Error}>} hx-copy-error - Dispatched\n * when the clipboard write fails (permission denied, iframe restriction, etc.).\n * The `error` detail contains the caught error for diagnostic use.\n \n @csspart button - The native button element.\n * @csspart icon - The icon container span wrapping the active icon slot.\n \n @cssprop [--hx-copy-button-bg=transparent] - Button background color.\n * @cssprop [--hx-copy-button-color=var(--hx-color-primary-500)] - Icon and text color.\n * @cssprop [--hx-copy-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-copy-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-copy-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n /\n@customElement('hx-copy-button')\nexport class HelixCopyButton extends HelixElement {\n static override styles = [helixCopyButtonStyles];\n\n // ─── Public Properties ───\n\n /\n The text value to write to the clipboard on click. Required for the\n * component to perform a copy operation.\n * @attr value\n /\n @property({ type: String })\n value = '';\n\n /\n Accessible label applied as `aria-label` and `title` on the button.\n * @attr label\n /\n @property({ type: String })\n label = 'Copy to clipboard';\n\n /\n Duration in milliseconds to display the success (copied) state before\n * reverting to the idle state. Values below 300 ms are clamped to 300 ms\n * to ensure the success announcement remains visible long enough for\n * assistive technology and human perception.\n * @attr feedback-duration\n /\n @property({ type: Number, attribute: 'feedback-duration' })\n feedbackDuration = 2000;\n\n /\n Visual size of the button. Maps to fixed height and padding tokens.\n * Accepts: 'sm' \| 'md' \| 'lg'. Invalid values are silently coerced to 'md'.\n \n Accessibility (WCAG 2.5.8): The `sm` variant uses `--hx-size-8` for\n * its minimum width and height. Ensure this token resolves to at least 24×24 px\n * (WCAG 2.5.8 AA minimum target size). For touch-primary interfaces such as\n * mobile clinical apps, prefer `md` or `lg` to meet the 44×44 px recommended\n * target size (WCAG 2.5.5 AAA / Apple HIG / Android guidelines).\n \n @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n Whether the button is disabled. When true, click events are suppressed\n * and clipboard writes do not occur.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Text announced to screen readers and appended to aria-label after a\n * successful copy. Also used as the content of the aria-live announcement.\n * @attr label-copied\n /\n @property({ type: String, attribute: 'label-copied' })\n labelCopied = 'Copied';\n\n /\n Accessible label announced when copy fails. Override for i18n.\n * @attr label-error\n /\n @property({ type: String, attribute: 'label-error' })\n labelError = 'Copy failed';\n\n // ─── Private State ───\n\n /* True while the success feedback window is active. /\n /* @internal /\n @state() private _copied = false;\n\n /* Non-empty string shown in the aria-live region; cleared when not active. /\n /* @internal /\n @state() private _announcement = '';\n\n /* Timeout handle used to revert the copied state. /\n /* @internal /\n private _feedbackTimer: ReturnType<typeof setTimeout> \| null = null;\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearFeedbackTimer();\n }\n\n // ─── Private Helpers ───\n\n /\n Returns the effective feedback duration, clamped to the minimum allowed\n * value. Prevents zero/negative timeouts that would cause the success state\n * to immediately revert with no visible or audible feedback.\n /\n /* @internal /\n private _effectiveDuration(): number {\n return Math.max(this.feedbackDuration, MIN_FEEDBACK_DURATION);\n }\n\n /\n Returns the effective size, falling back to 'md' if the runtime value is\n * not in the set of valid sizes. Prevents `button--xl` and similar class\n * names that have no matching CSS rule.\n /\n /* @internal /\n private _effectiveSize(): 'sm' \| 'md' \| 'lg' {\n return VALID_SIZES.has(this.size) ? this.size : 'md';\n }\n\n /* @internal /\n private _clearFeedbackTimer(): void {\n if (this._feedbackTimer !== null) {\n clearTimeout(this._feedbackTimer);\n this._feedbackTimer = null;\n }\n }\n\n /* @internal /\n private async _copyToClipboard(): Promise<void> {\n await navigator?.clipboard?.writeText(this.value);\n }\n\n // ─── Event Handling ───\n\n /* @internal /\n private _handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n void this._performCopy();\n }\n\n /* @internal /\n private async _performCopy(): Promise<void> {\n try {\n await this._copyToClipboard();\n } catch (error: unknown) {\n // Clipboard write failed — notify consumers and announce failure.\n this._announcement = this.labelError;\n\n /\n Dispatched when the clipboard write fails (permission denied, iframe\n * restriction, browser security policy, etc.).\n * @event hx-copy-error\n /\n this.dispatchEvent(\n new CustomEvent<{ value: string; error: Error }>('hx-copy-error', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n error: error instanceof Error ? error : new Error(String(error)),\n },\n }),\n );\n return;\n }\n\n this._clearFeedbackTimer();\n this._copied = true;\n this._announcement = this.labelCopied;\n\n /\n Dispatched after the value has been successfully written to the\n * clipboard.\n * @event hx-copy\n /\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-copy', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n\n this._feedbackTimer = setTimeout(() => {\n this._copied = false;\n this._announcement = '';\n this._feedbackTimer = null;\n }, this._effectiveDuration());\n }\n\n // ─── Render Helpers ───\n\n /* @internal /\n private _buttonClasses() {\n const size = this._effectiveSize();\n return {\n button: true,\n [`button--${size}`]: true,\n 'button--copied': this._copied,\n };\n }\n\n /* @internal */\n private _renderIcon() {\n // Show success-icon slot when copied, copy-icon slot otherwise.\n return html`\n <span part=\"icon\" class=\"icon\">\n ${this._copied\n ? html`<slot name=\"success-icon\"></slot>`\n : html`<slot name=\"copy-icon\"></slot>`}\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n // Reflect copied state in aria-label so re-focused button has an accurate\n // accessible name (WCAG 1.3.1). The live region handles the initial\n // announcement; this covers re-focus scenarios.\n const ariaLabel = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;\n\n return html`\n <button\n part=\"button\"\n class=${classMap(this._buttonClasses())}\n type=\"button\"\n ?disabled=${this.disabled}\n aria-label=${ariaLabel}\n title=${this.label}\n @click=${this._handleClick}\n >\n ${this._renderIcon()}\n <slot></slot>\n </button>\n\n <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n ${this._announcement \|\| nothing}\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-copy-button': HelixCopyButton;\n }\n}\n"],"names":["helixCopyButtonStyles","css","MIN_FEEDBACK_DURATION","VALID_SIZES","HelixCopyButton","HelixElement","_a","error","html","ariaLabel","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-copy-button-8deNUdwP.js","sources":["../../src/components/hx-copy-button/hx-copy-button.styles.ts","../../src/components/hx-copy-button/hx-copy-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCopyButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2);\n border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);\n border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-copy-button-bg, transparent);\n color: var(--hx-copy-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n flex-shrink: 0;\n font-family: var(--hx-copy-button-font-family, var(--hx-font-family-sans));\n font-weight: var(--hx-font-weight-medium);\n white-space: nowrap;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n .button:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── /\n\n .button--sm {\n padding: var(--hx-space-1);\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-sm);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n min-width: var(--hx-size-10);\n height: var(--hx-size-10);\n font-size: var(--hx-font-size-md);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n min-width: var(--hx-size-12);\n height: var(--hx-size-12);\n font-size: var(--hx-font-size-lg);\n }\n\n / ─── Copied / Success State ─── /\n\n .button--copied {\n color: var(--hx-color-success-text, var(--hx-color-primary-500));\n / Secondary non-color indicator required per WCAG 1.4.1 (use of color).\n A border provides visual differentiation for users with color blindness. /\n border-color: var(--hx-color-success-500, var(--hx-color-primary-500));\n }\n\n / ─── Icon Container ─── /\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1em;\n height: 1em;\n line-height: 1;\n pointer-events: none;\n flex-shrink: 0;\n }\n\n / ─── Disabled ─── /\n\n .button[disabled] {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled);\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-width: 0;\n }\n\n / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n .button {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .button:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .button[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n .button--copied {\n border-color: Highlight;\n color: Highlight;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCopyButtonStyles } from './hx-copy-button.styles.js';\n\n/* Minimum allowed value for feedbackDuration (ms). /\nconst MIN_FEEDBACK_DURATION = 300;\n\n/* Allowed size values for runtime validation. /\nconst VALID_SIZES = new Set(['sm', 'md', 'lg']);\n\n/\n A clipboard copy button component that writes a given value to the system\n * clipboard. Provides idle and success states with configurable feedback\n * duration, slot-based icon overrides, and an accessible live region that\n * announces copy completion to screen reader users.\n \n The `aria-label` reflects the current copy state: idle shows `label`,\n * copied state appends \" — Copied\" so screen reader users who re-focus the\n * button after copy receive an accurate accessible name.\n \n Note: `aria-pressed` is intentionally NOT used. This is not a toggle button;\n * copied is a transient feedback state, not a persistent on/off toggle.\n \n @summary One-click clipboard copy with accessible success feedback.\n \n @tag hx-copy-button\n \n @slot - Optional label text rendered inside the button alongside the icon.\n * @slot copy-icon - Icon shown in the idle (pre-copy) state.\n * @slot success-icon - Icon shown after a successful clipboard write.\n \n @fires {CustomEvent<{value: string}>} hx-copy - Dispatched after the value\n * has been successfully written to the clipboard.\n * @fires {CustomEvent<{value: string; error: Error}>} hx-copy-error - Dispatched\n * when the clipboard write fails (permission denied, iframe restriction, etc.).\n * The `error` detail contains the caught error for diagnostic use.\n \n @csspart button - The native button element.\n * @csspart icon - The icon container span wrapping the active icon slot.\n \n @cssprop [--hx-copy-button-bg=transparent] - Button background color.\n * @cssprop [--hx-copy-button-color=var(--hx-color-primary-500)] - Icon and text color.\n * @cssprop [--hx-copy-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-copy-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-copy-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-success-text] - Color.\n * @cssprop [--hx-copy-button-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-filter-brightness-hover] - 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-sans] - Font family.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n /\n@customElement('hx-copy-button')\nexport class HelixCopyButton extends HelixElement {\n static override styles = [helixCopyButtonStyles];\n\n // ─── Public Properties ───\n\n /\n The text value to write to the clipboard on click. Required for the\n * component to perform a copy operation.\n * @attr value\n /\n @property({ type: String })\n value = '';\n\n /\n Accessible label applied as `aria-label` and `title` on the button.\n * @attr label\n /\n @property({ type: String })\n label = 'Copy to clipboard';\n\n /\n Duration in milliseconds to display the success (copied) state before\n * reverting to the idle state. Values below 300 ms are clamped to 300 ms\n * to ensure the success announcement remains visible long enough for\n * assistive technology and human perception.\n * @attr feedback-duration\n /\n @property({ type: Number, attribute: 'feedback-duration' })\n feedbackDuration = 2000;\n\n /\n Visual size of the button. Maps to fixed height and padding tokens.\n * Accepts: 'sm' \| 'md' \| 'lg'. Invalid values are silently coerced to 'md'.\n \n Accessibility (WCAG 2.5.8): The `sm` variant uses `--hx-size-8` for\n * its minimum width and height. Ensure this token resolves to at least 24×24 px\n * (WCAG 2.5.8 AA minimum target size). For touch-primary interfaces such as\n * mobile clinical apps, prefer `md` or `lg` to meet the 44×44 px recommended\n * target size (WCAG 2.5.5 AAA / Apple HIG / Android guidelines).\n \n @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n Whether the button is disabled. When true, click events are suppressed\n * and clipboard writes do not occur.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Text announced to screen readers and appended to aria-label after a\n * successful copy. Also used as the content of the aria-live announcement.\n * @attr label-copied\n /\n @property({ type: String, attribute: 'label-copied' })\n labelCopied = 'Copied';\n\n /\n Accessible label announced when copy fails. Override for i18n.\n * @attr label-error\n /\n @property({ type: String, attribute: 'label-error' })\n labelError = 'Copy failed';\n\n // ─── Private State ───\n\n /* True while the success feedback window is active. /\n /* @internal /\n @state() private _copied = false;\n\n /* Non-empty string shown in the aria-live region; cleared when not active. /\n /* @internal /\n @state() private _announcement = '';\n\n /* Timeout handle used to revert the copied state. /\n /* @internal /\n private _feedbackTimer: ReturnType<typeof setTimeout> \| null = null;\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearFeedbackTimer();\n }\n\n // ─── Private Helpers ───\n\n /\n Returns the effective feedback duration, clamped to the minimum allowed\n * value. Prevents zero/negative timeouts that would cause the success state\n * to immediately revert with no visible or audible feedback.\n /\n /* @internal /\n private _effectiveDuration(): number {\n return Math.max(this.feedbackDuration, MIN_FEEDBACK_DURATION);\n }\n\n /\n Returns the effective size, falling back to 'md' if the runtime value is\n * not in the set of valid sizes. Prevents `button--xl` and similar class\n * names that have no matching CSS rule.\n /\n /* @internal /\n private _effectiveSize(): 'sm' \| 'md' \| 'lg' {\n return VALID_SIZES.has(this.size) ? this.size : 'md';\n }\n\n /* @internal /\n private _clearFeedbackTimer(): void {\n if (this._feedbackTimer !== null) {\n clearTimeout(this._feedbackTimer);\n this._feedbackTimer = null;\n }\n }\n\n /* @internal /\n private async _copyToClipboard(): Promise<void> {\n await navigator?.clipboard?.writeText(this.value);\n }\n\n // ─── Event Handling ───\n\n /* @internal /\n private _handleClick(): void {\n if (this.disabled) {\n return;\n }\n\n void this._performCopy();\n }\n\n /* @internal /\n private async _performCopy(): Promise<void> {\n try {\n await this._copyToClipboard();\n } catch (error: unknown) {\n // Clipboard write failed — notify consumers and announce failure.\n this._announcement = this.labelError;\n\n /\n Dispatched when the clipboard write fails (permission denied, iframe\n * restriction, browser security policy, etc.).\n * @event hx-copy-error\n /\n this.dispatchEvent(\n new CustomEvent<{ value: string; error: Error }>('hx-copy-error', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n error: error instanceof Error ? error : new Error(String(error)),\n },\n }),\n );\n return;\n }\n\n this._clearFeedbackTimer();\n this._copied = true;\n this._announcement = this.labelCopied;\n\n /\n Dispatched after the value has been successfully written to the\n * clipboard.\n * @event hx-copy\n /\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-copy', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n\n this._feedbackTimer = setTimeout(() => {\n this._copied = false;\n this._announcement = '';\n this._feedbackTimer = null;\n }, this._effectiveDuration());\n }\n\n // ─── Render Helpers ───\n\n /* @internal /\n private _buttonClasses() {\n const size = this._effectiveSize();\n return {\n button: true,\n [`button--${size}`]: true,\n 'button--copied': this._copied,\n };\n }\n\n /* @internal */\n private _renderIcon() {\n // Show success-icon slot when copied, copy-icon slot otherwise.\n return html`\n <span part=\"icon\" class=\"icon\">\n ${this._copied\n ? html`<slot name=\"success-icon\"></slot>`\n : html`<slot name=\"copy-icon\"></slot>`}\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n // Reflect copied state in aria-label so re-focused button has an accurate\n // accessible name (WCAG 1.3.1). The live region handles the initial\n // announcement; this covers re-focus scenarios.\n const ariaLabel = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;\n\n return html`\n <button\n part=\"button\"\n class=${classMap(this._buttonClasses())}\n type=\"button\"\n ?disabled=${this.disabled}\n aria-label=${ariaLabel}\n title=${this.label}\n @click=${this._handleClick}\n >\n ${this._renderIcon()}\n <slot></slot>\n </button>\n\n <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n ${this._announcement \|\| nothing}\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-copy-button': HelixCopyButton;\n }\n}\n"],"names":["helixCopyButtonStyles","css","MIN_FEEDBACK_DURATION","VALID_SIZES","HelixCopyButton","HelixElement","_a","error","html","ariaLabel","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-counter-CKfl_g8K.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-counter-CKfl_g8K.js","sources":["../../src/components/hx-counter/hx-counter.styles.ts","../../src/components/hx-counter/hx-counter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCounterStyles = css`\n :host {\n display: inline-block;\n }\n\n .counter {\n display: inline-flex;\n align-items: baseline;\n font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));\n color: var(--hx-counter-color, var(--hx-color-neutral-900, #0f172a));\n line-height: var(--hx-line-height-tight, 1.25);\n font-variant-numeric: tabular-nums;\n }\n\n /* ─── Size Variants ─── /\n\n .counter--sm {\n font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n }\n\n .counter--md {\n font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n }\n\n .counter--lg {\n font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));\n }\n\n / ─── Screen-reader only (visually hidden live region) ─── /\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 / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .counter {\n / Animation is handled in JS — reduced-motion consumers\n will see the final value immediately via the component logic /\n }\n }\n\n / ─── Forced Colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n / Counter is text-only — forced-color-adjust: auto (default) is sufficient.\n The browser maps the custom color properties to CanvasText automatically. /\n .counter {\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, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCounterStyles } from './hx-counter.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nexport type CounterSize = 'sm' \| 'md' \| 'lg';\nexport type CounterEasing = 'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out';\nexport type CounterFormat = 'integer' \| 'decimal';\n\n/\n Animated number counter that counts from 0 (or the previous value) to the\n * target value using requestAnimationFrame. Respects prefers-reduced-motion.\n \n @summary Displays an animated numeric counter that transitions to a target value.\n \n @tag hx-counter\n \n @csspart counter - The outer counter element.\n \n @cssprop [--hx-counter-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-counter-font-weight=var(--hx-font-weight-bold)] - Font weight.\n * @cssprop [--hx-counter-color=var(--hx-color-neutral-900)] - Counter text color.\n * @cssprop [--hx-counter-font-size-sm=var(--hx-font-size-xl)] - Font size at sm.\n * @cssprop [--hx-counter-font-size-md=var(--hx-font-size-3xl)] - Font size at md.\n * @cssprop [--hx-counter-font-size-lg=var(--hx-font-size-5xl)] - Font size at lg.\n /\n@customElement('hx-counter')\nexport class HelixCounter extends HelixElement {\n static override styles = [helixCounterStyles];\n\n /\n The target numeric value to count to.\n * @attr value\n /\n @property({ type: Number })\n value = 0;\n\n /\n Animation duration in milliseconds.\n * @attr duration\n /\n @property({ type: Number })\n duration = 1000;\n\n /\n Easing function applied to the animation progress.\n * @attr easing\n /\n @property({ type: String })\n easing: 'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' = 'ease-out';\n\n /\n Number format. 'integer' rounds to the nearest whole number;\n * 'decimal' shows two decimal places.\n * @attr format\n /\n @property({ type: String })\n format: 'integer' \| 'decimal' = 'integer';\n\n /\n String prepended to the formatted value (e.g., '$').\n * @attr prefix\n /\n @property({ type: String })\n prefix = '';\n\n /\n String appended to the formatted value (e.g., '%').\n * @attr suffix\n /\n @property({ type: String })\n suffix = '';\n\n /\n Size variant controlling font size.\n * @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n Accessible label describing the counter's context (e.g. \"Total patients\", \"Active alerts\").\n * WCAG 4.1.2: a numeric value alone is meaningless without context for screen readers.\n * When provided, the value is applied as aria-label on the counter element.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n // ─── Internal State ───\n\n /* @internal /\n @state() private _displayValue = 0;\n\n /\n The final value announced to screen readers once animation completes.\n * Updated only at animation end so AT users hear the result, not every frame.\n * @internal\n /\n @state() private _announcedValue = '';\n\n /* @internal /\n private _animationId: number \| null = null;\n /* @internal /\n private _startTime: number \| null = null;\n /* @internal /\n private _startValue = 0;\n /* @internal /\n private _prefersReducedMotion = false;\n /* @internal /\n private _motionMql: MediaQueryList \| null = null;\n /\n Normalized easing value after validation. Set once per animation start\n * to avoid repeated devWarn calls on every requestAnimationFrame tick.\n * @internal\n /\n private _resolvedEasing: 'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' = 'ease-out';\n /* @internal /\n private readonly _handleMotionChange = (e: MediaQueryListEvent): void => {\n this._prefersReducedMotion = e.matches;\n if (this._prefersReducedMotion) {\n this._cancelAnimation();\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n this.requestUpdate();\n }\n };\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-counter', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as CounterSize;\n }\n\n // WCAG 4.1.2: a numeric value without context is meaningless to screen readers.\n // Normalize: whitespace-only labels are treated as empty.\n if (!(this.label \|\| '').trim()) {\n devWarn(\n 'hx-counter',\n 'hx-counter requires a label for screen reader accessibility (WCAG 4.1.2). Provide the `label` attribute.',\n );\n }\n\n // Guard for SSR — window.matchMedia and requestAnimationFrame are unavailable server-side\n if (typeof window === 'undefined') {\n this._displayValue = this.value;\n return;\n }\n\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._motionMql = mq;\n this._prefersReducedMotion = mq.matches;\n mq.addEventListener('change', this._handleMotionChange);\n\n if (this._prefersReducedMotion) {\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n } else {\n this._startAnimation();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._cancelAnimation();\n this._motionMql?.removeEventListener('change', this._handleMotionChange);\n this._motionMql = null;\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n if (this._prefersReducedMotion) {\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n } else {\n this._startValue = this._displayValue;\n this._startTime = null;\n this._startAnimation();\n }\n }\n }\n\n // ─── Animation ───\n\n /* @internal /\n private _cancelAnimation(): void {\n if (this._animationId !== null) {\n cancelAnimationFrame(this._animationId);\n this._animationId = null;\n }\n }\n\n /\n Validates `this.easing` once per animation start and stores the result in\n * `_resolvedEasing`. This prevents devWarn from firing on every rAF tick for\n * an invalid easing value — the warning is emitted at most once per call.\n * @internal\n /\n private _normalizeEasing(): void {\n const validEasings: Array<'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out'> = [\n 'linear',\n 'ease-in',\n 'ease-out',\n 'ease-in-out',\n ];\n if (validEasings.includes(this.easing)) {\n this._resolvedEasing = this.easing;\n } else {\n devWarn(\n 'hx-counter',\n `Unrecognized easing value \"${this.easing as string}\". Falling back to \"linear\". Valid values: ease-in, ease-out, ease-in-out, linear.`,\n );\n this._resolvedEasing = 'linear';\n }\n }\n\n /* @internal /\n private _applyEasing(t: number): number {\n switch (this._resolvedEasing) {\n case 'linear':\n return t;\n case 'ease-in':\n return t t;\n case 'ease-out':\n return t * (2 - t);\n case 'ease-in-out':\n return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n }\n }\n\n /** @internal /\n private _startAnimation(): void {\n this._cancelAnimation();\n this._normalizeEasing();\n\n let effectiveDuration: number;\n if (this.duration <= 0) {\n devWarn('hx-counter', `duration must be > 0 (received ${this.duration}). Clamping to 1ms.`);\n effectiveDuration = 1;\n } else {\n effectiveDuration = this.duration;\n }\n\n const step = (timestamp: number): void => {\n if (this._startTime === null) {\n this._startTime = timestamp;\n }\n\n const elapsed = timestamp - this._startTime;\n const rawProgress = Math.min(elapsed / effectiveDuration, 1);\n const easedProgress = this._applyEasing(rawProgress);\n\n this._displayValue = this._startValue + (this.value - this._startValue) easedProgress;\n\n if (rawProgress < 1) {\n this._animationId = requestAnimationFrame(step);\n } else {\n this._displayValue = this.value;\n this._animationId = null;\n // WCAG 4.1.2: announce the final value only once, at animation end.\n // _announcedValue feeds the off-screen live region so screen readers\n // hear a single announcement rather than one per animation frame.\n this._announcedValue = this._buildAnnouncement();\n }\n };\n\n this._animationId = requestAnimationFrame(step);\n }\n\n // ─── Formatting ───\n\n /** @internal /\n private _formatValue(): string {\n const num =\n this.format === 'integer'\n ? Math.round(this._displayValue)\n : parseFloat(this._displayValue.toFixed(2));\n\n return `${this.prefix}${num.toLocaleString()}${this.suffix}`;\n }\n\n /\n Builds the string announced to screen readers at animation end.\n * Includes label context when present so users hear \"Total patients: 1,284\"\n * rather than a bare number with no semantic context.\n * @internal\n */\n private _buildAnnouncement(): string {\n const normalizedLabel = (this.label \|\| '').trim();\n if (!normalizedLabel) {\n // No label means the number lacks context — return empty to prevent\n // announcing a context-free number to screen readers.\n return '';\n }\n const formatted = this._formatValue();\n return `${normalizedLabel}: ${formatted}`;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n counter: true,\n [`counter--${this.size}`]: true,\n };\n\n const trimmedLabel = (this.label \|\| '').trim();\n\n return html`\n <span\n part=\"counter\"\n role=\"status\"\n aria-live=\"off\"\n class=${classMap(classes)}\n aria-label=${trimmedLabel ? `${trimmedLabel}: ${this._formatValue()}` : nothing}\n >\n ${this._formatValue()}\n </span>\n <!--\n WCAG 4.1.2: off-screen live region updated only at animation end.\n Prevents screen readers from announcing every intermediate frame value.\n -->\n <span\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n aria-hidden=${this._announcedValue ? nothing : 'true'}\n >${this._announcedValue}</span\n >\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-counter': HelixCounter;\n }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","HelixElement","legacySize","mq","_a","changedProps","devWarn","t","effectiveDuration","step","timestamp","elapsed","rawProgress","easedProgress","num","normalizedLabel","formatted","classes","trimmedLabel","html","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-counter-CKfl_g8K.js","sources":["../../src/components/hx-counter/hx-counter.styles.ts","../../src/components/hx-counter/hx-counter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCounterStyles = css`\n :host {\n display: inline-block;\n }\n\n .counter {\n display: inline-flex;\n align-items: baseline;\n font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));\n color: var(--hx-counter-color, var(--hx-color-neutral-900, #0f172a));\n line-height: var(--hx-line-height-tight, 1.25);\n font-variant-numeric: tabular-nums;\n }\n\n /* ─── Size Variants ─── /\n\n .counter--sm {\n font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n }\n\n .counter--md {\n font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n }\n\n .counter--lg {\n font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));\n }\n\n / ─── Screen-reader only (visually hidden live region) ─── /\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 / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .counter {\n / Animation is handled in JS — reduced-motion consumers\n will see the final value immediately via the component logic /\n }\n }\n\n / ─── Forced Colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n / Counter is text-only — forced-color-adjust: auto (default) is sufficient.\n The browser maps the custom color properties to CanvasText automatically. /\n .counter {\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, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCounterStyles } from './hx-counter.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nexport type CounterSize = 'sm' \| 'md' \| 'lg';\nexport type CounterEasing = 'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out';\nexport type CounterFormat = 'integer' \| 'decimal';\n\n/\n Animated number counter that counts from 0 (or the previous value) to the\n * target value using requestAnimationFrame. Respects prefers-reduced-motion.\n \n @summary Displays an animated numeric counter that transitions to a target value.\n \n @tag hx-counter\n \n @csspart counter - The outer counter element.\n \n @cssprop [--hx-counter-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-counter-font-weight=var(--hx-font-weight-bold)] - Font weight.\n * @cssprop [--hx-counter-color=var(--hx-color-neutral-900)] - Counter text color.\n * @cssprop [--hx-counter-font-size-sm=var(--hx-font-size-xl)] - Font size at sm.\n * @cssprop [--hx-counter-font-size-md=var(--hx-font-size-3xl)] - Font size at md.\n * @cssprop [--hx-counter-font-size-lg=var(--hx-font-size-5xl)] - Font size at lg.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-font-size-3xl] - Font size.\n * @cssprop [--hx-font-size-5xl] - Font size.\n /\n@customElement('hx-counter')\nexport class HelixCounter extends HelixElement {\n static override styles = [helixCounterStyles];\n\n /\n The target numeric value to count to.\n * @attr value\n /\n @property({ type: Number })\n value = 0;\n\n /\n Animation duration in milliseconds.\n * @attr duration\n /\n @property({ type: Number })\n duration = 1000;\n\n /\n Easing function applied to the animation progress.\n * @attr easing\n /\n @property({ type: String })\n easing: 'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' = 'ease-out';\n\n /\n Number format. 'integer' rounds to the nearest whole number;\n * 'decimal' shows two decimal places.\n * @attr format\n /\n @property({ type: String })\n format: 'integer' \| 'decimal' = 'integer';\n\n /\n String prepended to the formatted value (e.g., '$').\n * @attr prefix\n /\n @property({ type: String })\n prefix = '';\n\n /\n String appended to the formatted value (e.g., '%').\n * @attr suffix\n /\n @property({ type: String })\n suffix = '';\n\n /\n Size variant controlling font size.\n * @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n Accessible label describing the counter's context (e.g. \"Total patients\", \"Active alerts\").\n * WCAG 4.1.2: a numeric value alone is meaningless without context for screen readers.\n * When provided, the value is applied as aria-label on the counter element.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n // ─── Internal State ───\n\n /* @internal /\n @state() private _displayValue = 0;\n\n /\n The final value announced to screen readers once animation completes.\n * Updated only at animation end so AT users hear the result, not every frame.\n * @internal\n /\n @state() private _announcedValue = '';\n\n /* @internal /\n private _animationId: number \| null = null;\n /* @internal /\n private _startTime: number \| null = null;\n /* @internal /\n private _startValue = 0;\n /* @internal /\n private _prefersReducedMotion = false;\n /* @internal /\n private _motionMql: MediaQueryList \| null = null;\n /\n Normalized easing value after validation. Set once per animation start\n * to avoid repeated devWarn calls on every requestAnimationFrame tick.\n * @internal\n /\n private _resolvedEasing: 'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' = 'ease-out';\n /* @internal /\n private readonly _handleMotionChange = (e: MediaQueryListEvent): void => {\n this._prefersReducedMotion = e.matches;\n if (this._prefersReducedMotion) {\n this._cancelAnimation();\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n this.requestUpdate();\n }\n };\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-counter', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as CounterSize;\n }\n\n // WCAG 4.1.2: a numeric value without context is meaningless to screen readers.\n // Normalize: whitespace-only labels are treated as empty.\n if (!(this.label \|\| '').trim()) {\n devWarn(\n 'hx-counter',\n 'hx-counter requires a label for screen reader accessibility (WCAG 4.1.2). Provide the `label` attribute.',\n );\n }\n\n // Guard for SSR — window.matchMedia and requestAnimationFrame are unavailable server-side\n if (typeof window === 'undefined') {\n this._displayValue = this.value;\n return;\n }\n\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._motionMql = mq;\n this._prefersReducedMotion = mq.matches;\n mq.addEventListener('change', this._handleMotionChange);\n\n if (this._prefersReducedMotion) {\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n } else {\n this._startAnimation();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._cancelAnimation();\n this._motionMql?.removeEventListener('change', this._handleMotionChange);\n this._motionMql = null;\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n if (this._prefersReducedMotion) {\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n } else {\n this._startValue = this._displayValue;\n this._startTime = null;\n this._startAnimation();\n }\n }\n }\n\n // ─── Animation ───\n\n /* @internal /\n private _cancelAnimation(): void {\n if (this._animationId !== null) {\n cancelAnimationFrame(this._animationId);\n this._animationId = null;\n }\n }\n\n /\n Validates `this.easing` once per animation start and stores the result in\n * `_resolvedEasing`. This prevents devWarn from firing on every rAF tick for\n * an invalid easing value — the warning is emitted at most once per call.\n * @internal\n /\n private _normalizeEasing(): void {\n const validEasings: Array<'linear' \| 'ease-in' \| 'ease-out' \| 'ease-in-out'> = [\n 'linear',\n 'ease-in',\n 'ease-out',\n 'ease-in-out',\n ];\n if (validEasings.includes(this.easing)) {\n this._resolvedEasing = this.easing;\n } else {\n devWarn(\n 'hx-counter',\n `Unrecognized easing value \"${this.easing as string}\". Falling back to \"linear\". Valid values: ease-in, ease-out, ease-in-out, linear.`,\n );\n this._resolvedEasing = 'linear';\n }\n }\n\n /* @internal /\n private _applyEasing(t: number): number {\n switch (this._resolvedEasing) {\n case 'linear':\n return t;\n case 'ease-in':\n return t t;\n case 'ease-out':\n return t * (2 - t);\n case 'ease-in-out':\n return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n }\n }\n\n /** @internal /\n private _startAnimation(): void {\n this._cancelAnimation();\n this._normalizeEasing();\n\n let effectiveDuration: number;\n if (this.duration <= 0) {\n devWarn('hx-counter', `duration must be > 0 (received ${this.duration}). Clamping to 1ms.`);\n effectiveDuration = 1;\n } else {\n effectiveDuration = this.duration;\n }\n\n const step = (timestamp: number): void => {\n if (this._startTime === null) {\n this._startTime = timestamp;\n }\n\n const elapsed = timestamp - this._startTime;\n const rawProgress = Math.min(elapsed / effectiveDuration, 1);\n const easedProgress = this._applyEasing(rawProgress);\n\n this._displayValue = this._startValue + (this.value - this._startValue) easedProgress;\n\n if (rawProgress < 1) {\n this._animationId = requestAnimationFrame(step);\n } else {\n this._displayValue = this.value;\n this._animationId = null;\n // WCAG 4.1.2: announce the final value only once, at animation end.\n // _announcedValue feeds the off-screen live region so screen readers\n // hear a single announcement rather than one per animation frame.\n this._announcedValue = this._buildAnnouncement();\n }\n };\n\n this._animationId = requestAnimationFrame(step);\n }\n\n // ─── Formatting ───\n\n /** @internal /\n private _formatValue(): string {\n const num =\n this.format === 'integer'\n ? Math.round(this._displayValue)\n : parseFloat(this._displayValue.toFixed(2));\n\n return `${this.prefix}${num.toLocaleString()}${this.suffix}`;\n }\n\n /\n Builds the string announced to screen readers at animation end.\n * Includes label context when present so users hear \"Total patients: 1,284\"\n * rather than a bare number with no semantic context.\n * @internal\n */\n private _buildAnnouncement(): string {\n const normalizedLabel = (this.label \|\| '').trim();\n if (!normalizedLabel) {\n // No label means the number lacks context — return empty to prevent\n // announcing a context-free number to screen readers.\n return '';\n }\n const formatted = this._formatValue();\n return `${normalizedLabel}: ${formatted}`;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n counter: true,\n [`counter--${this.size}`]: true,\n };\n\n const trimmedLabel = (this.label \|\| '').trim();\n\n return html`\n <span\n part=\"counter\"\n role=\"status\"\n aria-live=\"off\"\n class=${classMap(classes)}\n aria-label=${trimmedLabel ? `${trimmedLabel}: ${this._formatValue()}` : nothing}\n >\n ${this._formatValue()}\n </span>\n <!--\n WCAG 4.1.2: off-screen live region updated only at animation end.\n Prevents screen readers from announcing every intermediate frame value.\n -->\n <span\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n aria-hidden=${this._announcedValue ? nothing : 'true'}\n >${this._announcedValue}</span\n >\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-counter': HelixCounter;\n }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","HelixElement","legacySize","mq","_a","changedProps","devWarn","t","effectiveDuration","step","timestamp","elapsed","rawProgress","easedProgress","num","normalizedLabel","formatted","classes","trimmedLabel","html","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}