npm - @helixui/library - Versions diffs - 3.2.0 → 3.3.0-next.112 - Mend

@helixui/library 3.2.0 → 3.3.0-next.112

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

package/dist/shared/{hx-time-picker-m0z4nFB-.js.map → hx-time-picker-BoEIZwzv.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-time-picker-m0z4nFB-.js","sources":["../../src/components/hx-time-picker/hx-time-picker.styles.ts","../../src/components/hx-time-picker/hx-time-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTimePickerStyles = css`\n :host {\n display: block;\n position: relative;\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-time-picker-font-family, var(--hx-font-family-sans, sans-serif));\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-time-picker-label-color, var(--hx-color-text-strong, #202b39));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n .field__required-marker {\n color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n .field__combobox {\n position: relative;\n display: flex;\n align-items: center;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));\n border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-time-picker-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 overflow: visible;\n }\n .field__combobox:focus-within {\n border-color: var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n .field--error .field__combobox {\n border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));\n }\n .field--error .field__combobox:focus-within {\n border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-size-10, 2.5rem);\n width: 100%;\n cursor: text;\n }\n .field__input::placeholder {\n color: var(--hx-color-text-placeholder, #66787b);\n }\n .field__input:disabled {\n cursor: not-allowed;\n }\n .field__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n padding: 0 var(--hx-space-3, 0.75rem);\n color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));\n cursor: pointer;\n height: 100%;\n min-height: var(--hx-size-10, 2.5rem);\n flex-shrink: 0;\n border-inline-start: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));\n }\n .field__toggle:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: -2px;\n border-radius: 0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n }\n .field__listbox {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n inset-inline-start: 0;\n inset-inline-end: 0;\n z-index: var(--hx-z-index-dropdown, 1000);\n background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-border-strong, #8e9c98));\n border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-time-picker-listbox-shadow,\n 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)\n );\n max-height: var(--hx-time-picker-listbox-max-height, 16rem);\n overflow-y: auto;\n padding: var(--hx-space-1, 0.25rem) 0;\n list-style: none;\n margin: 0;\n }\n @media (prefers-reduced-motion: no-preference) {\n .field__listbox {\n animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;\n }\n }\n @keyframes hx-listbox-enter {\n 0% {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n .field__option {\n display: flex;\n align-items: center;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-md, 1rem);\n font-family: inherit;\n color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));\n cursor: pointer;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n .field__option:hover,\n .field__option--active {\n background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));\n color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));\n }\n .field__option--selected {\n background-color: var(\n --hx-time-picker-option-selected-bg,\n var(--hx-color-primary-100, #dbf0f0)\n );\n color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));\n font-weight: var(--hx-font-weight-medium, 500);\n }\n .field__option--selected.field__option--active {\n background-color: var(\n --hx-time-picker-option-selected-bg,\n var(--hx-color-primary-100, #dbf0f0)\n );\n }\n @media (prefers-reduced-motion: reduce) {\n .field__combobox,\n .field__option {\n transition: none;\n }\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, #4a5362);\n }\n .field__error {\n color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));\n }\n @media (forced-colors: active) {\n .field__combobox {\n border-color: ButtonText;\n background-color: Canvas;\n }\n .field__combobox:focus-within {\n outline: 3px solid Highlight;\n outline-offset: 0;\n box-shadow: none;\n }\n .field--error .field__combobox {\n border-color: LinkText;\n }\n .field--error .field__combobox:focus-within {\n outline-color: Highlight;\n box-shadow: none;\n }\n .field__toggle:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 0;\n }\n .field__listbox {\n border-color: ButtonText;\n background-color: Canvas;\n box-shadow: none;\n }\n .field__option:hover,\n .field__option--active {\n background-color: Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n .field__option--selected {\n background-color: Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n .field__error {\n color: LinkText;\n }\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 { live } from 'lit/directives/live.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { helixTimePickerStyles } from './hx-time-picker.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\n// ─── Time Slot ───────────────────────────────────────────────────────────────\n\ninterface TimeSlot {\n /** HH:MM in 24-hour format — canonical internal value. /\n value: string;\n /* Display label respecting the component's `format` property. /\n label: string;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\n/* Parse \"HH:MM\" into { hours, minutes }. Returns null when the string is not valid. /\nfunction parseHHMM(raw: string): { hours: number; minutes: number } \| null {\n const match = /^(\\d{1,2}):(\\d{2})$/.exec(raw.trim());\n if (!match) return null;\n const hours = parseInt(match[1] ?? '0', 10);\n const minutes = parseInt(match[2] ?? '0', 10);\n if (hours < 0 \|\| hours > 23 \|\| minutes < 0 \|\| minutes > 59) return null;\n return { hours, minutes };\n}\n\n/* Format { hours, minutes } as zero-padded \"HH:MM\". /\nfunction toHHMM(hours: number, minutes: number): string {\n return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;\n}\n\n/* Convert a 24-hour HH:MM value to a 12-hour display string (e.g. \"02:30 PM\"). /\nfunction to12h(value: string): string {\n const parsed = parseHHMM(value);\n if (!parsed) return value;\n const { hours, minutes } = parsed;\n const period = hours < 12 ? 'AM' : 'PM';\n const h = hours % 12 === 0 ? 12 : hours % 12;\n return `${String(h).padStart(2, '0')}:${String(minutes).padStart(2, '0')} ${period}`;\n}\n\n/\n Generate ordered time slots between `minTime` and `maxTime` (inclusive) at\n * `stepMinutes` intervals. Both bounds are HH:MM strings; defaults fall back\n * to \"00:00\" / \"23:59\".\n /\nfunction generateSlots(\n minTime: string,\n maxTime: string,\n stepMinutes: number,\n format: '12h' \| '24h',\n): TimeSlot[] {\n const minParsed = parseHHMM(minTime) ?? { hours: 0, minutes: 0 };\n const maxParsed = parseHHMM(maxTime) ?? { hours: 23, minutes: 59 };\n\n const minTotal = minParsed.hours 60 + minParsed.minutes;\n const maxTotal = maxParsed.hours * 60 + maxParsed.minutes;\n\n // Guard against degenerate step values\n const step = Math.max(1, Math.round(stepMinutes));\n\n const slots: TimeSlot[] = [];\n for (let t = minTotal; t <= maxTotal; t += step) {\n const h = Math.floor(t / 60) % 24;\n const m = t % 60;\n const value = toHHMM(h, m);\n slots.push({\n value,\n label: format === '12h' ? to12h(value) : value,\n });\n }\n return slots;\n}\n\n/** Clamp a raw HH:MM value to the [min, max] range; return '' when value is empty. /\nfunction clampValue(value: string, minTime: string, maxTime: string): string {\n if (!value) return '';\n const parsed = parseHHMM(value);\n if (!parsed) return '';\n\n const total = parsed.hours 60 + parsed.minutes;\n const minParsed = parseHHMM(minTime) ?? { hours: 0, minutes: 0 };\n const maxParsed = parseHHMM(maxTime) ?? { hours: 23, minutes: 59 };\n const minTotal = minParsed.hours * 60 + minParsed.minutes;\n const maxTotal = maxParsed.hours * 60 + maxParsed.minutes;\n\n if (total < minTotal) return toHHMM(minParsed.hours, minParsed.minutes);\n if (total > maxTotal) return toHHMM(maxParsed.hours, maxParsed.minutes);\n return toHHMM(parsed.hours, parsed.minutes);\n}\n\n/*\n Attempt to parse a user-typed string (12 h or 24 h) into an HH:MM value.\n * Returns null when the string cannot be resolved.\n /\nfunction parseUserInput(raw: string): string \| null {\n const trimmed = raw.trim().toUpperCase();\n\n // 24-hour \"HH:MM\" or \"H:MM\"\n const hhmm = parseHHMM(trimmed);\n if (hhmm) return toHHMM(hhmm.hours, hhmm.minutes);\n\n // 12-hour patterns: \"2:30 PM\", \"2:30PM\", \"02:30 AM\", \"230 pm\", \"2 PM\"\n const twelve =\n /^(\\d{1,2})(?::(\\d{2}))?\\s(AM\|PM)$/.exec(trimmed) ??\n /^(\\d{1,2})(\\d{2})\\s(AM\|PM)$/.exec(trimmed);\n\n if (twelve) {\n let hours = parseInt(twelve[1] ?? '0', 10);\n const minutes = twelve[2] !== undefined ? parseInt(twelve[2], 10) : 0;\n const period = twelve[3] ?? '';\n if (hours < 1 \|\| hours > 12 \|\| minutes < 0 \|\| minutes > 59) return null;\n if (period === 'AM') {\n hours = hours === 12 ? 0 : hours;\n } else {\n hours = hours === 12 ? 12 : hours + 12;\n }\n return toHHMM(hours, minutes);\n }\n\n return null;\n}\n\nconst _nextTimePickerId = createIdCounter('hx-time-picker');\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/* Detail for the hx-change event dispatched by hx-time-picker. /\nexport interface HxTimePickerChangeDetail {\n value: string;\n}\n\n/\n A time-picker component with a combobox pattern: a text input with format\n * masking and a dropdown listbox of pre-generated time slots.\n \n @summary Form-associated time picker with 12h/24h format support and dropdown listbox.\n \n @tag hx-time-picker\n \n @slot label - Custom label content; overrides the rendered label element when used.\n * @slot help-text - Help text displayed below the field.\n * @slot error - Custom error content; overrides the `error` property.\n \n @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the selected time changes. Detail value is HH:MM (24h).\n \n @csspart label - The label element.\n * @csspart input - The text input element.\n * @csspart toggle - The clock icon toggle button.\n * @csspart listbox - The dropdown `<ul>` element.\n * @csspart option - Each `<li>` option in the listbox.\n * @csspart field - The outer field wrapper element.\n * @csspart error - The error message element.\n * @csspart help-text - The help text element.\n \n @cssprop [--hx-time-picker-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-time-picker-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-time-picker-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-time-picker-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-time-picker-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-time-picker-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-time-picker-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-time-picker-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-time-picker-chevron-color=var(--hx-color-neutral-500)] - Toggle chevron color.\n * @cssprop [--hx-time-picker-listbox-bg=var(--hx-color-neutral-0)] - Listbox background.\n * @cssprop [--hx-time-picker-listbox-max-height=16rem] - Maximum height of the dropdown.\n * @cssprop [--hx-time-picker-listbox-shadow=0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)] - Box shadow for the dropdown listbox.\n * @cssprop [--hx-time-picker-option-color=var(--hx-color-neutral-800)] - Option text color.\n * @cssprop [--hx-time-picker-option-hover-bg=var(--hx-color-primary-50)] - Option hover background.\n * @cssprop [--hx-time-picker-option-hover-color=var(--hx-color-primary-700)] - Option hover text color.\n * @cssprop [--hx-time-picker-option-selected-bg=var(--hx-color-primary-100)] - Selected option background.\n * @cssprop [--hx-time-picker-option-selected-color=var(--hx-color-primary-800)] - Selected option text color.\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-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-space-3] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-z-index-dropdown] - Z-index layer.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-color-primary-800] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n /\n@customElement('hx-time-picker')\nexport class HelixTimePicker extends FormMixin(HelixElement) {\n static override styles = [helixTimePickerStyles, forcedColorsField];\n\n // ─── Form Association ───\n\n /\n Declares this element as form-associated so it participates in native form submission.\n * @internal\n /\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /\n The name submitted with the form. Value is always HH:MM (24-hour).\n * @attr name\n /\n @property({ type: String, reflect: true })\n name = '';\n\n /\n The current value in HH:MM (24-hour) format.\n * @attr value\n /\n @property({ type: String, reflect: true })\n value = '';\n\n /\n The earliest selectable time in HH:MM format.\n * @attr min\n /\n @property({ type: String })\n min = '00:00';\n\n /\n The latest selectable time in HH:MM format.\n * @attr max\n /\n @property({ type: String })\n max = '23:59';\n\n /\n Step interval between dropdown options, in minutes. Defaults to 30.\n * @attr step\n /\n @property({ type: Number })\n step = 30;\n\n /\n The visible label text for the field.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n /\n Whether the field is required for form submission.\n * @attr required\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n Whether the field is disabled.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\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 Display format for the time input. '12h' shows AM/PM; '24h' is bare HH:MM.\n * @attr format\n /\n @property({ type: String, reflect: true })\n format: '12h' \| '24h' = '12h';\n\n // ─── Internal State ───\n\n /\n Whether the dropdown listbox is currently open.\n * @internal\n /\n @state() private _open = false;\n /\n Index of the currently keyboard-active option in the listbox; -1 when none is active.\n * @internal\n /\n @state() private _activeIndex = -1;\n /\n The display string shown in the text input, formatted according to the current `format` property.\n * @internal\n /\n @state() private _inputDisplayValue = '';\n /\n Whether the label slot has slotted content assigned to it.\n * @internal\n /\n @state() private _hasLabelSlot = false;\n /\n Whether the error slot has slotted content assigned to it.\n * @internal\n /\n @state() private _hasErrorSlot = false;\n /\n Whether the help-text slot has slotted content assigned to it.\n * @internal\n /\n @state() private _hasHelpSlot = false;\n /\n The ID of the slotted label element, used for aria-labelledby cross-root linking.\n * @internal\n /\n @state() private _slottedLabelId = '';\n\n // ─── Stable IDs (monotonically incrementing counter for SSR safety) ───\n\n private readonly _id = _nextTimePickerId();\n /\n Unique ID for the listbox element, referenced by `aria-controls` on the combobox input.\n * @internal\n /\n private readonly _listboxId = `${this._id}-listbox`;\n /\n Unique ID for the error message element, referenced by `aria-describedby` on the input.\n * @internal\n /\n private readonly _errorId = `${this._id}-error`;\n /\n Unique ID for the help text element, referenced by `aria-describedby` on the input.\n * @internal\n /\n private readonly _helpId = `${this._id}-help`;\n\n // ─── Query References ───\n\n /\n Reference to the text input element inside the shadow DOM.\n * @internal\n /\n @query('.field__input')\n private _inputEl: HTMLInputElement \| undefined;\n\n /\n Reference to the listbox `<ul>` element inside the shadow DOM.\n * @internal\n /\n @query('.field__listbox')\n private _listboxEl: HTMLUListElement \| undefined;\n\n // ─── Memoized slot generation (avoids regenerating on every render call) ───\n\n /\n Memoized array of generated time slots; null until first access.\n * @internal\n /\n private _cachedSlots: TimeSlot[] \| null = null;\n /\n Cache key composed of min, max, step, and format; used to detect when slots must be regenerated.\n * @internal\n /\n private _slotsKey = '';\n\n /\n Lazily generates and caches the list of time slots based on current min, max, step, and format.\n * @internal\n /\n private get _slots(): TimeSlot[] {\n const key = `${this.min}\|${this.max}\|${this.step}\|${this.format}`;\n if (this._cachedSlots === null \|\| key !== this._slotsKey) {\n this._slotsKey = key;\n this._cachedSlots = generateSlots(this.min, this.max, this.step, this.format);\n }\n return this._cachedSlots;\n }\n\n // ─── Outside-click handler (bound reference for add/removeEventListener) ───\n\n /\n Closes the listbox when a click is detected outside the component; bound for stable add/removeEventListener calls.\n * @internal\n /\n private readonly _handleOutsideClick = (e: MouseEvent): void => {\n if (!this.isConnected) return;\n if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n this._closeListbox();\n }\n };\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._handleOutsideClick);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleOutsideClick);\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n // Keep display value in sync whenever the canonical value or format changes\n if (changed.has('value') \|\| changed.has('format')) {\n this._inputDisplayValue = this.value\n ? this.format === '12h'\n ? to12h(this.value)\n : this.value\n : '';\n }\n }\n\n override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (changed.has('value')) {\n this._internals.setFormValue(this.value \|\| null);\n }\n // When the listbox opens, scroll the selected (or active) option into view\n if ((changed as Map<PropertyKey, unknown>).has('_open') && this._open) {\n this._scrollActiveOptionIntoView();\n }\n // Force screen reader re-announcement when error text changes (a11y-v3-005)\n if (changed.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 override _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error \|\| 'Please select a time.',\n this._inputEl ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /* @internal /\n protected override _onFormReset(): void {\n this.value = '';\n this._inputDisplayValue = '';\n this._internals.setFormValue(null);\n this._closeListbox();\n this._resetInteractionState();\n }\n\n /* @internal /\n protected override _onFormStateRestore(\n state: File \| string \| FormData \| null,\n _mode: 'restore' \| 'autocomplete',\n ): void {\n // Only string states are valid for this component; ignore File/FormData\n if (typeof state !== 'string') return;\n // Validate and clamp before assigning; ignore out-of-spec values\n const clamped = clampValue(state, this.min, this.max);\n this.value = clamped;\n }\n\n /* @internal /\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Listbox helpers ───\n\n /* @internal /\n private _openListbox(): void {\n if (this._open) return;\n // Pre-set active index to currently selected slot (or 0)\n const selectedIndex = this._slots.findIndex((s) => s.value === this.value);\n this._activeIndex = selectedIndex >= 0 ? selectedIndex : 0;\n this._open = true;\n }\n\n /* @internal /\n private _closeListbox(): void {\n if (!this._open) return;\n this._open = false;\n this._activeIndex = -1;\n this._handleInteractionBlur();\n }\n\n /* @internal /\n private _scrollActiveOptionIntoView(): void {\n if (!this._listboxEl) return;\n const active = this._listboxEl.querySelector<HTMLElement>('.field__option--active');\n active?.scrollIntoView({ block: 'nearest' });\n }\n\n /* @internal /\n private _selectSlot(slot: TimeSlot): void {\n const clamped = clampValue(slot.value, this.min, this.max);\n this.value = clamped;\n this._handleInteractionInput();\n this._closeListbox();\n this._dispatchChange(clamped);\n }\n\n // ─── Slot tracking ───\n\n /* @internal /\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasLabelSlot = nodes.length > 0;\n if (this._hasLabelSlot) {\n // Forward aria-labelledby: ensure the slotted label element has an ID so\n // the shadow-DOM input can reference it via aria-labelledby (A-03).\n const labelEl = nodes.find((n) => n.nodeType === Node.ELEMENT_NODE) as\n \| HTMLElement\n \| undefined;\n if (labelEl) {\n if (!labelEl.id) {\n labelEl.id = `${this._id}-slotted-label`;\n }\n this._slottedLabelId = labelEl.id;\n }\n } else {\n this._slottedLabelId = '';\n }\n }\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 /* @internal /\n private _handleHelpSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Event Dispatch ───\n\n /* @internal /\n private _dispatchChange(value: string): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value },\n }),\n );\n }\n\n // ─── Input Handlers ───\n\n /* @internal /\n private _handleInputClick(): void {\n if (!this.disabled) this._openListbox();\n }\n\n /* @internal /\n private _handleToggleClick(e: MouseEvent): void {\n e.stopPropagation();\n if (this.disabled) return;\n if (this._open) {\n this._closeListbox();\n } else {\n this._openListbox();\n this._inputEl?.focus();\n }\n }\n\n /* @internal /\n private _handleInputInput(e: Event): void {\n const target = e.target as HTMLInputElement;\n this._inputDisplayValue = target.value;\n // Open the listbox as the user types\n if (!this._open) this._openListbox();\n }\n\n /* @internal /\n private _handleInputChange(e: Event): void {\n const target = e.target as HTMLInputElement;\n const raw = target.value.trim();\n\n if (!raw) {\n // User cleared the field\n this.value = '';\n this._handleInteractionInput();\n this._handleInteractionBlur();\n this._internals.setFormValue(null);\n this._dispatchChange('');\n return;\n }\n\n const parsed = parseUserInput(raw);\n if (parsed) {\n const clamped = clampValue(parsed, this.min, this.max);\n this.value = clamped;\n this._handleInteractionInput();\n this._handleInteractionBlur();\n this._dispatchChange(clamped);\n } else {\n // Revert display to last known good value\n this._inputDisplayValue = this.value\n ? this.format === '12h'\n ? to12h(this.value)\n : this.value\n : '';\n }\n }\n\n /* @internal /\n private _handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!this._open) {\n this._openListbox();\n } else {\n this._activeIndex = Math.min(this._activeIndex + 1, this._slots.length - 1);\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (this._open) {\n this._activeIndex = Math.max(this._activeIndex - 1, 0);\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'Enter':\n if (this._open && this._activeIndex >= 0) {\n e.preventDefault();\n const slot = this._slots[this._activeIndex];\n if (slot) this._selectSlot(slot);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n this._closeListbox();\n break;\n\n case 'Home':\n if (this._open) {\n e.preventDefault();\n this._activeIndex = 0;\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'End':\n if (this._open) {\n e.preventDefault();\n this._activeIndex = this._slots.length - 1;\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'Tab':\n this._closeListbox();\n break;\n }\n }\n\n /* @internal /\n private _handleOptionPointerDown(e: MouseEvent): void {\n // Prevent the input from losing focus when clicking an option\n e.preventDefault();\n }\n\n /* @internal /\n private _handleOptionClick(slot: TimeSlot): void {\n this._selectSlot(slot);\n this._inputEl?.focus();\n }\n\n /* @internal /\n private _handleOptionMouseEnter(index: number): void {\n this._activeIndex = index;\n }\n\n // ─── Public API ───\n\n /* Moves focus to the time input element. /\n override focus(options?: FocusOptions): void {\n this._inputEl?.focus(options);\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error \|\| this._hasErrorSlot;\n const slots = this._slots;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n };\n\n const activeDescendant =\n this._open && this._activeIndex >= 0\n ? `${this._listboxId}-option-${this._activeIndex}`\n : undefined;\n\n const placeholder = this.format === '12h' ? 'hh:mm AM' : 'hh:mm';\n\n // WCAG 1.3.1: the help-text div with _helpId always renders in the DOM unconditionally.\n // Always include _helpId in describedBy — an empty target is harmless for AT and ensures\n // the link is established immediately without waiting for the slotchange event to fire.\n const describedBy =\n [hasError ? this._errorId : null, this._helpId].filter(Boolean).join(' ') \|\| undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._id}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\"></span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n\n <!-- Combobox wrapper; role=\"combobox\" lives on the input per ARIA 1.2 -->\n <div class=\"field__combobox\">\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._id}\n type=\"text\"\n inputmode=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n role=\"combobox\"\n aria-expanded=${this._open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n .value=${live(this._inputDisplayValue)}\n placeholder=${placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n name=${ifDefined(this.name \|\| undefined)}\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-labelledby=${ifDefined(\n this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : undefined,\n )}\n @click=${this._handleInputClick}\n @input=${this._handleInputInput}\n @change=${this._handleInputChange}\n @keydown=${this._handleInputKeyDown}\n />\n\n <!-- Toggle button -->\n <button\n part=\"toggle\"\n type=\"button\"\n class=\"field__toggle\"\n tabindex=\"-1\"\n aria-label=${this._open ? 'Close time picker' : 'Open time picker'}\n ?disabled=${this.disabled}\n @click=${this._handleToggleClick}\n >\n <!-- Clock icon -->\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.25\" />\n <path\n d=\"M8 4.5V8L10.5 10\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Dropdown listbox: always in DOM so aria-controls is never a dangling reference (WCAG 4.1.2). Hidden via the boolean hidden attribute when closed. -->\n <ul\n part=\"listbox\"\n class=\"field__listbox\"\n id=${this._listboxId}\n role=\"listbox\"\n aria-label=${this.label \|\| 'Time options'}\n ?hidden=${!this._open}\n >\n ${this._open\n ? repeat(\n slots,\n (slot) => slot.value,\n (slot, index) => {\n const isSelected = slot.value === this.value;\n const isActive = index === this._activeIndex;\n return html`\n <li\n part=\"option\"\n class=${classMap({\n field__option: true,\n 'field__option--selected': isSelected,\n 'field__option--active': isActive,\n })}\n id=\"${this._listboxId}-option-${index}\"\n role=\"option\"\n aria-selected=${isSelected ? 'true' : 'false'}\n @pointerdown=${this._handleOptionPointerDown}\n @click=${() => this._handleOptionClick(slot)}\n @mouseenter=${() => this._handleOptionMouseEnter(index)}\n >\n ${slot.label}\n </li>\n `;\n },\n )\n : nothing}\n </ul>\n </div>\n\n <!-- Error slot / property -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this.error\n ? html`\n <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>\n `\n : nothing}\n </slot>\n\n <!-- Help slot -->\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-time-picker': HelixTimePicker;\n }\n}\n"],"names":["helixTimePickerStyles","css","parseHHMM","raw","match","hours","minutes","toHHMM","to12h","value","parsed","period","h","generateSlots","minTime","maxTime","stepMinutes","format","minParsed","maxParsed","minTotal","maxTotal","step","slots","t","m","clampValue","total","parseUserInput","trimmed","hhmm","twelve","_nextTimePickerId","createIdCounter","HelixTimePicker","FormMixin","HelixElement","_a","key","changed","errorEl","msg","state","_mode","clamped","disabled","selectedIndex","s","active","slot","nodes","labelEl","n","target","index","options","hasError","fieldClasses","activeDescendant","placeholder","describedBy","html","classMap","nothing","live","ifDefined","repeat","isSelected","isActive","forcedColorsField","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACsBrC,SAASC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"}
1	+ {"version":3,"file":"hx-time-picker-BoEIZwzv.js","sources":["../../src/components/hx-time-picker/hx-time-picker.styles.ts","../../src/components/hx-time-picker/hx-time-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTimePickerStyles = css`\n :host {\n display: block;\n position: relative;\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-time-picker-font-family, var(--hx-font-family-sans, sans-serif));\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-time-picker-label-color, var(--hx-color-text-strong, #202b39));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n .field__required-marker {\n color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n .field__combobox {\n position: relative;\n display: flex;\n align-items: center;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));\n border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-time-picker-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 overflow: visible;\n }\n .field__combobox:focus-within {\n border-color: var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n .field--error .field__combobox {\n border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));\n }\n .field--error .field__combobox:focus-within {\n border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-family: inherit;\n font-size: var(--hx-font-size-md, 1rem);\n color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));\n line-height: var(--hx-line-height-normal, 1.5);\n min-height: var(--hx-size-10, 2.5rem);\n width: 100%;\n cursor: text;\n }\n .field__input::placeholder {\n color: var(--hx-color-text-placeholder, #66787b);\n }\n .field__input:disabled {\n cursor: not-allowed;\n }\n .field__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n padding: 0 var(--hx-space-3, 0.75rem);\n color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));\n cursor: pointer;\n height: 100%;\n min-height: var(--hx-size-10, 2.5rem);\n flex-shrink: 0;\n border-inline-start: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));\n }\n .field__toggle:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: -2px;\n border-radius: 0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n }\n .field__listbox {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n inset-inline-start: 0;\n inset-inline-end: 0;\n z-index: var(--hx-z-index-dropdown, 1000);\n background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));\n border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-time-picker-listbox-shadow,\n 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)\n );\n max-height: var(--hx-time-picker-listbox-max-height, 16rem);\n overflow-y: auto;\n padding: var(--hx-space-1, 0.25rem) 0;\n list-style: none;\n margin: 0;\n }\n @media (prefers-reduced-motion: no-preference) {\n .field__listbox {\n animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;\n }\n }\n @keyframes hx-listbox-enter {\n 0% {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n .field__option {\n display: flex;\n align-items: center;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-md, 1rem);\n font-family: inherit;\n color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));\n cursor: pointer;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n .field__option:hover,\n .field__option--active {\n background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));\n color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));\n }\n .field__option--selected {\n background-color: var(\n --hx-time-picker-option-selected-bg,\n var(--hx-color-primary-100, #dbf0f0)\n );\n color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));\n font-weight: var(--hx-font-weight-medium, 500);\n }\n .field__option--selected.field__option--active {\n background-color: var(\n --hx-time-picker-option-selected-bg,\n var(--hx-color-primary-100, #dbf0f0)\n );\n }\n @media (prefers-reduced-motion: reduce) {\n .field__combobox,\n .field__option {\n transition: none;\n }\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, #4a5362);\n }\n .field__error {\n color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));\n }\n @media (forced-colors: active) {\n .field__combobox {\n border-color: ButtonText;\n background-color: Canvas;\n }\n .field__combobox:focus-within {\n outline: 3px solid Highlight;\n outline-offset: 0;\n box-shadow: none;\n }\n .field--error .field__combobox {\n border-color: LinkText;\n }\n .field--error .field__combobox:focus-within {\n outline-color: Highlight;\n box-shadow: none;\n }\n .field__toggle:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 0;\n }\n .field__listbox {\n border-color: ButtonText;\n background-color: Canvas;\n box-shadow: none;\n }\n .field__option:hover,\n .field__option--active {\n background-color: Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n .field__option--selected {\n background-color: Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n .field__error {\n color: LinkText;\n }\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 { live } from 'lit/directives/live.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { helixTimePickerStyles } from './hx-time-picker.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\n// ─── Time Slot ───────────────────────────────────────────────────────────────\n\ninterface TimeSlot {\n /** HH:MM in 24-hour format — canonical internal value. /\n value: string;\n /* Display label respecting the component's `format` property. /\n label: string;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\n/* Parse \"HH:MM\" into { hours, minutes }. Returns null when the string is not valid. /\nfunction parseHHMM(raw: string): { hours: number; minutes: number } \| null {\n const match = /^(\\d{1,2}):(\\d{2})$/.exec(raw.trim());\n if (!match) return null;\n const hours = parseInt(match[1] ?? '0', 10);\n const minutes = parseInt(match[2] ?? '0', 10);\n if (hours < 0 \|\| hours > 23 \|\| minutes < 0 \|\| minutes > 59) return null;\n return { hours, minutes };\n}\n\n/* Format { hours, minutes } as zero-padded \"HH:MM\". /\nfunction toHHMM(hours: number, minutes: number): string {\n return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;\n}\n\n/* Convert a 24-hour HH:MM value to a 12-hour display string (e.g. \"02:30 PM\"). /\nfunction to12h(value: string): string {\n const parsed = parseHHMM(value);\n if (!parsed) return value;\n const { hours, minutes } = parsed;\n const period = hours < 12 ? 'AM' : 'PM';\n const h = hours % 12 === 0 ? 12 : hours % 12;\n return `${String(h).padStart(2, '0')}:${String(minutes).padStart(2, '0')} ${period}`;\n}\n\n/\n Generate ordered time slots between `minTime` and `maxTime` (inclusive) at\n * `stepMinutes` intervals. Both bounds are HH:MM strings; defaults fall back\n * to \"00:00\" / \"23:59\".\n /\nfunction generateSlots(\n minTime: string,\n maxTime: string,\n stepMinutes: number,\n format: '12h' \| '24h',\n): TimeSlot[] {\n const minParsed = parseHHMM(minTime) ?? { hours: 0, minutes: 0 };\n const maxParsed = parseHHMM(maxTime) ?? { hours: 23, minutes: 59 };\n\n const minTotal = minParsed.hours 60 + minParsed.minutes;\n const maxTotal = maxParsed.hours * 60 + maxParsed.minutes;\n\n // Guard against degenerate step values\n const step = Math.max(1, Math.round(stepMinutes));\n\n const slots: TimeSlot[] = [];\n for (let t = minTotal; t <= maxTotal; t += step) {\n const h = Math.floor(t / 60) % 24;\n const m = t % 60;\n const value = toHHMM(h, m);\n slots.push({\n value,\n label: format === '12h' ? to12h(value) : value,\n });\n }\n return slots;\n}\n\n/** Clamp a raw HH:MM value to the [min, max] range; return '' when value is empty. /\nfunction clampValue(value: string, minTime: string, maxTime: string): string {\n if (!value) return '';\n const parsed = parseHHMM(value);\n if (!parsed) return '';\n\n const total = parsed.hours 60 + parsed.minutes;\n const minParsed = parseHHMM(minTime) ?? { hours: 0, minutes: 0 };\n const maxParsed = parseHHMM(maxTime) ?? { hours: 23, minutes: 59 };\n const minTotal = minParsed.hours * 60 + minParsed.minutes;\n const maxTotal = maxParsed.hours * 60 + maxParsed.minutes;\n\n if (total < minTotal) return toHHMM(minParsed.hours, minParsed.minutes);\n if (total > maxTotal) return toHHMM(maxParsed.hours, maxParsed.minutes);\n return toHHMM(parsed.hours, parsed.minutes);\n}\n\n/*\n Attempt to parse a user-typed string (12 h or 24 h) into an HH:MM value.\n * Returns null when the string cannot be resolved.\n /\nfunction parseUserInput(raw: string): string \| null {\n const trimmed = raw.trim().toUpperCase();\n\n // 24-hour \"HH:MM\" or \"H:MM\"\n const hhmm = parseHHMM(trimmed);\n if (hhmm) return toHHMM(hhmm.hours, hhmm.minutes);\n\n // 12-hour patterns: \"2:30 PM\", \"2:30PM\", \"02:30 AM\", \"230 pm\", \"2 PM\"\n const twelve =\n /^(\\d{1,2})(?::(\\d{2}))?\\s(AM\|PM)$/.exec(trimmed) ??\n /^(\\d{1,2})(\\d{2})\\s(AM\|PM)$/.exec(trimmed);\n\n if (twelve) {\n let hours = parseInt(twelve[1] ?? '0', 10);\n const minutes = twelve[2] !== undefined ? parseInt(twelve[2], 10) : 0;\n const period = twelve[3] ?? '';\n if (hours < 1 \|\| hours > 12 \|\| minutes < 0 \|\| minutes > 59) return null;\n if (period === 'AM') {\n hours = hours === 12 ? 0 : hours;\n } else {\n hours = hours === 12 ? 12 : hours + 12;\n }\n return toHHMM(hours, minutes);\n }\n\n return null;\n}\n\nconst _nextTimePickerId = createIdCounter('hx-time-picker');\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/* Detail for the hx-change event dispatched by hx-time-picker. /\nexport interface HxTimePickerChangeDetail {\n value: string;\n}\n\n/\n A time-picker component with a combobox pattern: a text input with format\n * masking and a dropdown listbox of pre-generated time slots.\n \n @summary Form-associated time picker with 12h/24h format support and dropdown listbox.\n \n @tag hx-time-picker\n \n @slot label - Custom label content; overrides the rendered label element when used.\n * @slot help-text - Help text displayed below the field.\n * @slot error - Custom error content; overrides the `error` property.\n \n @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the selected time changes. Detail value is HH:MM (24h).\n \n @csspart label - The label element.\n * @csspart input - The text input element.\n * @csspart toggle - The clock icon toggle button.\n * @csspart listbox - The dropdown `<ul>` element.\n * @csspart option - Each `<li>` option in the listbox.\n * @csspart field - The outer field wrapper element.\n * @csspart error - The error message element.\n * @csspart help-text - The help text element.\n \n @cssprop [--hx-time-picker-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-time-picker-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-time-picker-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-time-picker-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-time-picker-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-time-picker-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-time-picker-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-time-picker-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-time-picker-chevron-color=var(--hx-color-neutral-500)] - Toggle chevron color.\n * @cssprop [--hx-time-picker-listbox-bg=var(--hx-color-neutral-0)] - Listbox background.\n * @cssprop [--hx-time-picker-listbox-max-height=16rem] - Maximum height of the dropdown.\n * @cssprop [--hx-time-picker-listbox-shadow=0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)] - Box shadow for the dropdown listbox.\n * @cssprop [--hx-time-picker-option-color=var(--hx-color-neutral-800)] - Option text color.\n * @cssprop [--hx-time-picker-option-hover-bg=var(--hx-color-primary-50)] - Option hover background.\n * @cssprop [--hx-time-picker-option-hover-color=var(--hx-color-primary-700)] - Option hover text color.\n * @cssprop [--hx-time-picker-option-selected-bg=var(--hx-color-primary-100)] - Selected option background.\n * @cssprop [--hx-time-picker-option-selected-color=var(--hx-color-primary-800)] - Selected option text color.\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-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-space-3] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-z-index-dropdown] - Z-index layer.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-color-primary-800] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n /\n@customElement('hx-time-picker')\nexport class HelixTimePicker extends FormMixin(HelixElement) {\n static override styles = [helixTimePickerStyles, forcedColorsField];\n\n // ─── Form Association ───\n\n /\n Declares this element as form-associated so it participates in native form submission.\n * @internal\n /\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /\n The name submitted with the form. Value is always HH:MM (24-hour).\n * @attr name\n /\n @property({ type: String, reflect: true })\n name = '';\n\n /\n The current value in HH:MM (24-hour) format.\n * @attr value\n /\n @property({ type: String, reflect: true })\n value = '';\n\n /\n The earliest selectable time in HH:MM format.\n * @attr min\n /\n @property({ type: String })\n min = '00:00';\n\n /\n The latest selectable time in HH:MM format.\n * @attr max\n /\n @property({ type: String })\n max = '23:59';\n\n /\n Step interval between dropdown options, in minutes. Defaults to 30.\n * @attr step\n /\n @property({ type: Number })\n step = 30;\n\n /\n The visible label text for the field.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n /\n Whether the field is required for form submission.\n * @attr required\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n Whether the field is disabled.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\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 Display format for the time input. '12h' shows AM/PM; '24h' is bare HH:MM.\n * @attr format\n /\n @property({ type: String, reflect: true })\n format: '12h' \| '24h' = '12h';\n\n // ─── Internal State ───\n\n /\n Whether the dropdown listbox is currently open.\n * @internal\n /\n @state() private _open = false;\n /\n Index of the currently keyboard-active option in the listbox; -1 when none is active.\n * @internal\n /\n @state() private _activeIndex = -1;\n /\n The display string shown in the text input, formatted according to the current `format` property.\n * @internal\n /\n @state() private _inputDisplayValue = '';\n /\n Whether the label slot has slotted content assigned to it.\n * @internal\n /\n @state() private _hasLabelSlot = false;\n /\n Whether the error slot has slotted content assigned to it.\n * @internal\n /\n @state() private _hasErrorSlot = false;\n /\n Whether the help-text slot has slotted content assigned to it.\n * @internal\n /\n @state() private _hasHelpSlot = false;\n /\n The ID of the slotted label element, used for aria-labelledby cross-root linking.\n * @internal\n /\n @state() private _slottedLabelId = '';\n\n // ─── Stable IDs (monotonically incrementing counter for SSR safety) ───\n\n private readonly _id = _nextTimePickerId();\n /\n Unique ID for the listbox element, referenced by `aria-controls` on the combobox input.\n * @internal\n /\n private readonly _listboxId = `${this._id}-listbox`;\n /\n Unique ID for the error message element, referenced by `aria-describedby` on the input.\n * @internal\n /\n private readonly _errorId = `${this._id}-error`;\n /\n Unique ID for the help text element, referenced by `aria-describedby` on the input.\n * @internal\n /\n private readonly _helpId = `${this._id}-help`;\n\n // ─── Query References ───\n\n /\n Reference to the text input element inside the shadow DOM.\n * @internal\n /\n @query('.field__input')\n private _inputEl: HTMLInputElement \| undefined;\n\n /\n Reference to the listbox `<ul>` element inside the shadow DOM.\n * @internal\n /\n @query('.field__listbox')\n private _listboxEl: HTMLUListElement \| undefined;\n\n // ─── Memoized slot generation (avoids regenerating on every render call) ───\n\n /\n Memoized array of generated time slots; null until first access.\n * @internal\n /\n private _cachedSlots: TimeSlot[] \| null = null;\n /\n Cache key composed of min, max, step, and format; used to detect when slots must be regenerated.\n * @internal\n /\n private _slotsKey = '';\n\n /\n Lazily generates and caches the list of time slots based on current min, max, step, and format.\n * @internal\n /\n private get _slots(): TimeSlot[] {\n const key = `${this.min}\|${this.max}\|${this.step}\|${this.format}`;\n if (this._cachedSlots === null \|\| key !== this._slotsKey) {\n this._slotsKey = key;\n this._cachedSlots = generateSlots(this.min, this.max, this.step, this.format);\n }\n return this._cachedSlots;\n }\n\n // ─── Outside-click handler (bound reference for add/removeEventListener) ───\n\n /\n Closes the listbox when a click is detected outside the component; bound for stable add/removeEventListener calls.\n * @internal\n /\n private readonly _handleOutsideClick = (e: MouseEvent): void => {\n if (!this.isConnected) return;\n if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n this._closeListbox();\n }\n };\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._handleOutsideClick);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleOutsideClick);\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n // Keep display value in sync whenever the canonical value or format changes\n if (changed.has('value') \|\| changed.has('format')) {\n this._inputDisplayValue = this.value\n ? this.format === '12h'\n ? to12h(this.value)\n : this.value\n : '';\n }\n }\n\n override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (changed.has('value')) {\n this._internals.setFormValue(this.value \|\| null);\n }\n // When the listbox opens, scroll the selected (or active) option into view\n if ((changed as Map<PropertyKey, unknown>).has('_open') && this._open) {\n this._scrollActiveOptionIntoView();\n }\n // Force screen reader re-announcement when error text changes (a11y-v3-005)\n if (changed.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 override _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error \|\| 'Please select a time.',\n this._inputEl ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /* @internal /\n protected override _onFormReset(): void {\n this.value = '';\n this._inputDisplayValue = '';\n this._internals.setFormValue(null);\n this._closeListbox();\n this._resetInteractionState();\n }\n\n /* @internal /\n protected override _onFormStateRestore(\n state: File \| string \| FormData \| null,\n _mode: 'restore' \| 'autocomplete',\n ): void {\n // Only string states are valid for this component; ignore File/FormData\n if (typeof state !== 'string') return;\n // Validate and clamp before assigning; ignore out-of-spec values\n const clamped = clampValue(state, this.min, this.max);\n this.value = clamped;\n }\n\n /* @internal /\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Listbox helpers ───\n\n /* @internal /\n private _openListbox(): void {\n if (this._open) return;\n // Pre-set active index to currently selected slot (or 0)\n const selectedIndex = this._slots.findIndex((s) => s.value === this.value);\n this._activeIndex = selectedIndex >= 0 ? selectedIndex : 0;\n this._open = true;\n }\n\n /* @internal /\n private _closeListbox(): void {\n if (!this._open) return;\n this._open = false;\n this._activeIndex = -1;\n this._handleInteractionBlur();\n }\n\n /* @internal /\n private _scrollActiveOptionIntoView(): void {\n if (!this._listboxEl) return;\n const active = this._listboxEl.querySelector<HTMLElement>('.field__option--active');\n active?.scrollIntoView({ block: 'nearest' });\n }\n\n /* @internal /\n private _selectSlot(slot: TimeSlot): void {\n const clamped = clampValue(slot.value, this.min, this.max);\n this.value = clamped;\n this._handleInteractionInput();\n this._closeListbox();\n this._dispatchChange(clamped);\n }\n\n // ─── Slot tracking ───\n\n /* @internal /\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasLabelSlot = nodes.length > 0;\n if (this._hasLabelSlot) {\n // Forward aria-labelledby: ensure the slotted label element has an ID so\n // the shadow-DOM input can reference it via aria-labelledby (A-03).\n const labelEl = nodes.find((n) => n.nodeType === Node.ELEMENT_NODE) as\n \| HTMLElement\n \| undefined;\n if (labelEl) {\n if (!labelEl.id) {\n labelEl.id = `${this._id}-slotted-label`;\n }\n this._slottedLabelId = labelEl.id;\n }\n } else {\n this._slottedLabelId = '';\n }\n }\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 /* @internal /\n private _handleHelpSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Event Dispatch ───\n\n /* @internal /\n private _dispatchChange(value: string): void {\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value },\n }),\n );\n }\n\n // ─── Input Handlers ───\n\n /* @internal /\n private _handleInputClick(): void {\n if (!this.disabled) this._openListbox();\n }\n\n /* @internal /\n private _handleToggleClick(e: MouseEvent): void {\n e.stopPropagation();\n if (this.disabled) return;\n if (this._open) {\n this._closeListbox();\n } else {\n this._openListbox();\n this._inputEl?.focus();\n }\n }\n\n /* @internal /\n private _handleInputInput(e: Event): void {\n const target = e.target as HTMLInputElement;\n this._inputDisplayValue = target.value;\n // Open the listbox as the user types\n if (!this._open) this._openListbox();\n }\n\n /* @internal /\n private _handleInputChange(e: Event): void {\n const target = e.target as HTMLInputElement;\n const raw = target.value.trim();\n\n if (!raw) {\n // User cleared the field\n this.value = '';\n this._handleInteractionInput();\n this._handleInteractionBlur();\n this._internals.setFormValue(null);\n this._dispatchChange('');\n return;\n }\n\n const parsed = parseUserInput(raw);\n if (parsed) {\n const clamped = clampValue(parsed, this.min, this.max);\n this.value = clamped;\n this._handleInteractionInput();\n this._handleInteractionBlur();\n this._dispatchChange(clamped);\n } else {\n // Revert display to last known good value\n this._inputDisplayValue = this.value\n ? this.format === '12h'\n ? to12h(this.value)\n : this.value\n : '';\n }\n }\n\n /* @internal /\n private _handleInputKeyDown(e: KeyboardEvent): void {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!this._open) {\n this._openListbox();\n } else {\n this._activeIndex = Math.min(this._activeIndex + 1, this._slots.length - 1);\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (this._open) {\n this._activeIndex = Math.max(this._activeIndex - 1, 0);\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'Enter':\n if (this._open && this._activeIndex >= 0) {\n e.preventDefault();\n const slot = this._slots[this._activeIndex];\n if (slot) this._selectSlot(slot);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n this._closeListbox();\n break;\n\n case 'Home':\n if (this._open) {\n e.preventDefault();\n this._activeIndex = 0;\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'End':\n if (this._open) {\n e.preventDefault();\n this._activeIndex = this._slots.length - 1;\n this._scrollActiveOptionIntoView();\n }\n break;\n\n case 'Tab':\n this._closeListbox();\n break;\n }\n }\n\n /* @internal /\n private _handleOptionPointerDown(e: MouseEvent): void {\n // Prevent the input from losing focus when clicking an option\n e.preventDefault();\n }\n\n /* @internal /\n private _handleOptionClick(slot: TimeSlot): void {\n this._selectSlot(slot);\n this._inputEl?.focus();\n }\n\n /* @internal /\n private _handleOptionMouseEnter(index: number): void {\n this._activeIndex = index;\n }\n\n // ─── Public API ───\n\n /* Moves focus to the time input element. /\n override focus(options?: FocusOptions): void {\n this._inputEl?.focus(options);\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error \|\| this._hasErrorSlot;\n const slots = this._slots;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n };\n\n const activeDescendant =\n this._open && this._activeIndex >= 0\n ? `${this._listboxId}-option-${this._activeIndex}`\n : undefined;\n\n const placeholder = this.format === '12h' ? 'hh:mm AM' : 'hh:mm';\n\n // WCAG 1.3.1: the help-text div with _helpId always renders in the DOM unconditionally.\n // Always include _helpId in describedBy — an empty target is harmless for AT and ensures\n // the link is established immediately without waiting for the slotchange event to fire.\n const describedBy =\n [hasError ? this._errorId : null, this._helpId].filter(Boolean).join(' ') \|\| undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._id}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\"></span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n\n <!-- Combobox wrapper; role=\"combobox\" lives on the input per ARIA 1.2 -->\n <div class=\"field__combobox\">\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._id}\n type=\"text\"\n inputmode=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n role=\"combobox\"\n aria-expanded=${this._open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n .value=${live(this._inputDisplayValue)}\n placeholder=${placeholder}\n ?required=${this.required}\n ?disabled=${this.disabled}\n name=${ifDefined(this.name \|\| undefined)}\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-labelledby=${ifDefined(\n this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : undefined,\n )}\n @click=${this._handleInputClick}\n @input=${this._handleInputInput}\n @change=${this._handleInputChange}\n @keydown=${this._handleInputKeyDown}\n />\n\n <!-- Toggle button -->\n <button\n part=\"toggle\"\n type=\"button\"\n class=\"field__toggle\"\n tabindex=\"-1\"\n aria-label=${this._open ? 'Close time picker' : 'Open time picker'}\n ?disabled=${this.disabled}\n @click=${this._handleToggleClick}\n >\n <!-- Clock icon -->\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.25\" />\n <path\n d=\"M8 4.5V8L10.5 10\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Dropdown listbox: always in DOM so aria-controls is never a dangling reference (WCAG 4.1.2). Hidden via the boolean hidden attribute when closed. -->\n <ul\n part=\"listbox\"\n class=\"field__listbox\"\n id=${this._listboxId}\n role=\"listbox\"\n aria-label=${this.label \|\| 'Time options'}\n ?hidden=${!this._open}\n >\n ${this._open\n ? repeat(\n slots,\n (slot) => slot.value,\n (slot, index) => {\n const isSelected = slot.value === this.value;\n const isActive = index === this._activeIndex;\n return html`\n <li\n part=\"option\"\n class=${classMap({\n field__option: true,\n 'field__option--selected': isSelected,\n 'field__option--active': isActive,\n })}\n id=\"${this._listboxId}-option-${index}\"\n role=\"option\"\n aria-selected=${isSelected ? 'true' : 'false'}\n @pointerdown=${this._handleOptionPointerDown}\n @click=${() => this._handleOptionClick(slot)}\n @mouseenter=${() => this._handleOptionMouseEnter(index)}\n >\n ${slot.label}\n </li>\n `;\n },\n )\n : nothing}\n </ul>\n </div>\n\n <!-- Error slot / property -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this.error\n ? html`\n <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>\n `\n : nothing}\n </slot>\n\n <!-- Help slot -->\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpId}>\n <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-time-picker': HelixTimePicker;\n }\n}\n"],"names":["helixTimePickerStyles","css","parseHHMM","raw","match","hours","minutes","toHHMM","to12h","value","parsed","period","h","generateSlots","minTime","maxTime","stepMinutes","format","minParsed","maxParsed","minTotal","maxTotal","step","slots","t","m","clampValue","total","parseUserInput","trimmed","hhmm","twelve","_nextTimePickerId","createIdCounter","HelixTimePicker","FormMixin","HelixElement","_a","key","changed","errorEl","msg","state","_mode","clamped","disabled","selectedIndex","s","active","slot","nodes","labelEl","n","target","index","options","hasError","fieldClasses","activeDescendant","placeholder","describedBy","html","classMap","nothing","live","ifDefined","repeat","isSelected","isActive","forcedColorsField","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACsBrC,SAASC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"}

package/dist/shared/{hx-toggle-button-Dd8clXB4.js → hx-toggle-button-iLiYrMbD.js} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { css as b, html as u, nothing as d } from "lit";
-import { query as g, property as s, customElement as p } from "lit/decorators.js";
+import { css as d, html as u, nothing as b } from "lit";
+import { query as g, property as a, customElement as p } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 import { f as x } from "./forced-colors-CTEDFRGa.js";
 import { H as f } from "./helix-element-BNEYeiys.js";
-const v = b`
+const v = d`
   :host {
     display: inline-block;
   }
@@ -41,10 +41,7 @@ const v = b`
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-toggle-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
-      );
+      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -126,7 +123,7 @@ const v = b`
   .button--outline {
     --hx-toggle-button-bg: transparent;
     --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
-    --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-toggle-button-border-color: var(--hx-color-border-strong, #66787b);
   }
   .button--outline:hover {
@@ -175,8 +172,8 @@ const v = b`
       --hx-toggle-button-pressed-color,
       var(--hx-color-primary-700, #0f6363)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-400, #6ab1b1);
-    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #6ab1b1);
+    --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
+    box-shadow: inset 0 0 0 1px var(--hx-color-primary-600, #0f7078);
   }
   /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
@@ -264,10 +261,10 @@ const v = b`
     }
   }
 `;
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, a, i, n) => {
-  for (var r = n > 1 ? void 0 : n ? y(a, i) : a, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (r = (n ? h(a, i, r) : h(r)) || r);
-  return n && r && m(a, i, r), r;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, s, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? y(s, i) : s, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (r = (n ? h(s, i, r) : h(r)) || r);
+  return n && r && m(s, i, r), r;
 };
 let e = class extends f {
   constructor() {
@@ -293,8 +290,8 @@ let e = class extends f {
   // ─── Lifecycle ───
   firstUpdated(t) {
     if (super.firstUpdated(t), !this.label) {
-      const a = this._defaultSlot;
-      (a ? a.assignedNodes({ flatten: !0 }).some((n) => {
+      const s = this._defaultSlot;
+      (s ? s.assignedNodes({ flatten: !0 }).some((n) => {
         var r;
         return (r = n.textContent) == null ? void 0 : r.trim();
       }) : !1) || console.warn(
@@ -308,7 +305,7 @@ let e = class extends f {
   _onFormReset() {
     this.pressed = !1;
   }
-  _onFormStateRestore(t, a) {
+  _onFormStateRestore(t, s) {
     this.pressed = typeof t == "string" && t === "pressed";
   }
   _onFormDisabled(t) {
@@ -373,7 +370,7 @@ let e = class extends f {
         ?disabled=${this.disabled}
         type="button"
         aria-pressed=${this.pressed ? "true" : "false"}
-        aria-label=${this.label ?? d}
+        aria-label=${this.label ?? b}
         @click=${this._handleClick}
       >
         ${this._renderInner()}
@@ -387,28 +384,28 @@ o([
   g("slot:not([name])")
 ], e.prototype, "_defaultSlot", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "pressed", 2);
 o([
-  s({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 o([
-  s({ type: String, reflect: !0, attribute: "hx-size" })
+  a({ type: String, reflect: !0, attribute: "hx-size" })
 ], e.prototype, "size", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 o([
-  s({ type: String })
+  a({ type: String })
 ], e.prototype, "name", 2);
 o([
-  s({ type: String })
+  a({ type: String })
 ], e.prototype, "value", 2);
 o([
-  s({ type: String })
+  a({ type: String })
 ], e.prototype, "label", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "required", 2);
 e = o([
   p("hx-toggle-button")
@@ -416,4 +413,4 @@ e = o([
 export {
   e as H
 };
-//# sourceMappingURL=hx-toggle-button-Dd8clXB4.js.map
+//# sourceMappingURL=hx-toggle-button-iLiYrMbD.js.map

package/dist/shared/hx-toggle-button-iLiYrMbD.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-toggle-button-iLiYrMbD.js","sources":["../../src/components/hx-toggle-button/hx-toggle-button.styles.ts","../../src/components/hx-toggle-button/hx-toggle-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToggleButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Base Button ─── */\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);\n border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));\n color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));\n font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n text-decoration: none;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\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 /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.\n min-height uses --hx-touch-target-min to guarantee the interactive area\n meets the threshold even though the visual size token is smaller. */\n .button--sm {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n }\n\n .button--md {\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n font-size: var(--hx-font-size-md, 1rem);\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .button--lg {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Style Variants ─── */\n\n .button--primary {\n --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);\n --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);\n --hx-toggle-button-border-color: transparent;\n }\n\n /*\n * secondary/ghost paint primary text on the surface (white). primary-500\n * (#429797) on white = 3.43:1 — fails AA at body sizes. shift to\n * primary-600 (#0F7078) = 6.06:1 — AA pass. border keeps primary-500\n * for the brand affordance (3:1 non-text contrast still met).\n */\n .button--secondary {\n --hx-toggle-button-bg: transparent;\n --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);\n --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);\n }\n\n .button--secondary:hover {\n --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);\n }\n\n .button--tertiary {\n --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-toggle-button-border-color: transparent;\n }\n\n .button--tertiary:hover {\n --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n }\n\n .button--ghost {\n --hx-toggle-button-bg: transparent;\n --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);\n --hx-toggle-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n }\n\n .button--outline {\n --hx-toggle-button-bg: transparent;\n --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);\n --hx-toggle-button-border-color: var(--hx-color-border-strong, #66787b);\n }\n\n .button--outline:hover {\n --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n }\n\n /* ─── Pressed State ─── */\n\n /*\n * Primary: already uses solid primary bg; pressed deepens to primary-700\n * to give clear visual feedback without introducing a new color.\n *\n * AA fix: text.on-primary (= neutral-900 #0D1825) on primary-700 (#0F6363)\n * = 2.54:1 — fails AA. Pin fg at neutral-0 for the darker pressed fill\n * (neutral-0 on primary-700 = 7.03:1, AAA pass). Mirrors hx-toast\n * precedent (commit 300e21ab0) and hx-button hover treatment.\n * Note: secondary.pressed below uses primary-500 and stays at 5.20:1 —\n * leave it alone.\n */\n .button--primary.button--pressed {\n --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #0f6363));\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-neutral-0, #ffffff)\n );\n --hx-toggle-button-border-color: transparent;\n }\n\n /*\n * Secondary: unpressed is outlined/transparent; pressed fills with primary bg\n * so the state change is immediately legible.\n */\n .button--secondary.button--pressed {\n --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-text-on-primary, #ffffff)\n );\n --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);\n }\n\n /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */\n .button--tertiary.button--pressed {\n --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-primary-700, #0f6363)\n );\n --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);\n box-shadow: inset 0 0 0 1px var(--hx-color-primary-600, #0f7078);\n }\n\n /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */\n .button--ghost.button--pressed {\n --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-primary-700, #0f6363)\n );\n --hx-toggle-button-border-color: transparent;\n }\n\n /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */\n .button--outline.button--pressed {\n --hx-toggle-button-bg: var(\n --hx-toggle-button-pressed-bg,\n var(--hx-color-surface-sunken, #ebeee9)\n );\n --hx-toggle-button-color: var(\n --hx-toggle-button-pressed-color,\n var(--hx-color-text-primary, #0d1825)\n );\n --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);\n box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);\n }\n\n /* ─── Disabled ─── */\n\n .button[disabled] {\n cursor: not-allowed;\n }\n\n /* ─── Prefix / Suffix / Label ─── */\n\n .button__prefix,\n .button__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .button__label {\n flex: 1 1 auto;\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--pressed {\n background-color: Highlight;\n color: HighlightText;\n border-color: Highlight;\n box-shadow: none;\n }\n\n .button[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixToggleButtonStyles } from './hx-toggle-button.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\n\n/** Detail for the hx-toggle event dispatched by hx-toggle-button. */\nexport interface HxToggleDetail {\n pressed: boolean;\n}\n\n/**\n * A two-state toggle button that communicates a pressed/unpressed status to\n * assistive technology via `aria-pressed`. Supports multiple visual variants\n * and sizes, prefix/suffix slots, full ElementInternals form association, and\n * a distinct pressed visual state for every variant.\n *\n * @summary Two-state toggle button with pressed/unpressed ARIA semantics.\n *\n * @tag hx-toggle-button\n *\n * @slot - Default slot for the button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{pressed: boolean}>} hx-toggle - Dispatched when the\n * toggle state changes. Not dispatched when the button is disabled.\n *\n * @csspart button - The native `<button>` element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n *\n * @cssprop [--hx-toggle-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-toggle-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-toggle-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-toggle-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-toggle-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-toggle-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-toggle-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-toggle-button-pressed-bg=var(--hx-color-primary-500)] - Background when pressed (variant-specific fallback applies).\n * @cssprop [--hx-toggle-button-pressed-color=var(--hx-color-neutral-0)] - Text color when pressed (variant-specific fallback applies).\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-filter-brightness-hover] - CSS filter.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n */\n@customElement('hx-toggle-button')\nexport class HelixToggleButton extends HelixElement {\n static override styles = [helixToggleButtonStyles, forcedColorsInteractive];\n\n // ─── Form Association ───\n\n /** @internal */\n static override formAssociated = true;\n\n /** @internal */\n @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n\n // ─── Public Properties ───\n\n /**\n * Whether the toggle button is in the pressed state.\n * Reflected as an attribute so CSS selectors like `:host([pressed])` work.\n * @attr pressed\n */\n @property({ type: Boolean, reflect: true })\n pressed = false;\n\n /**\n * Visual style variant of the button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' = 'secondary';\n\n /**\n * Size of the button.\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. Prevents all interaction and form actions.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Form field name submitted via ElementInternals when the button is pressed.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Form field value submitted via ElementInternals when the button is pressed.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * Accessible label forwarded to the inner `<button>` as `aria-label`.\n * Required for icon-only toggle buttons where no visible text is present.\n * @attr label\n */\n @property({ type: String })\n label: string | undefined = undefined;\n\n /**\n * When true, the button must be in the pressed state for the form to be submitted.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n // ─── Form API ───\n\n /** Returns the ValidityState object. */\n override get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Returns the current validation message. */\n override get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Checks whether the button satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n // ─── Lifecycle ───\n\n override firstUpdated(changedProperties: PropertyValues<this>): void {\n super.firstUpdated(changedProperties);\n\n if (!this.label) {\n const slot = this._defaultSlot;\n const hasSlotText = slot\n ? slot.assignedNodes({ flatten: true }).some((n) => n.textContent?.trim())\n : false;\n if (!hasSlotText) {\n console.warn(\n '[hx-toggle-button] No accessible label found. Set the `label` attribute or provide slot text content for WCAG 4.1.2 compliance.',\n );\n }\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (\n changedProperties.has('pressed') ||\n changedProperties.has('value') ||\n changedProperties.has('required')\n ) {\n this._syncFormValue();\n }\n }\n\n protected override _onFormReset(): void {\n this.pressed = false;\n }\n\n protected override _onFormStateRestore(\n state: string | File | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n this.pressed = typeof state === 'string' && state === 'pressed';\n }\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Private Helpers ───\n\n /** @internal */\n private _syncFormValue(): void {\n if (this.pressed && this.value !== undefined) {\n // Pass explicit state 'pressed' so formStateRestoreCallback can reliably detect it.\n this._internals.setFormValue(this.value, 'pressed');\n } else {\n this._internals.setFormValue(null);\n }\n this._updateValidity();\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && !this.pressed) {\n this._internals.setValidity(\n { valueMissing: true },\n 'Please activate this toggle button.',\n this.shadowRoot?.querySelector<HTMLElement>('[part=\"button\"]') ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this.pressed = !this.pressed;\n this._syncFormValue();\n\n /**\n * Dispatched when the toggle state changes.\n * @event hx-toggle\n */\n this.dispatchEvent(\n new CustomEvent<{ pressed: boolean }>('hx-toggle', {\n bubbles: true,\n composed: true,\n detail: { pressed: this.pressed },\n }),\n );\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderInner() {\n return html`\n <span part=\"prefix\" class=\"button__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot></slot>\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n 'button--pressed': this.pressed,\n };\n\n return html`\n <button\n part=\"button\"\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n type=\"button\"\n aria-pressed=${this.pressed ? 'true' : 'false'}\n aria-label=${this.label ?? nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-toggle-button': HelixToggleButton;\n }\n}\n"],"names":["helixToggleButtonStyles","css","HelixToggleButton","HelixElement","changedProperties","slot","_a","state","_mode","disabled","e","html","classes","classMap","nothing","forcedColorsInteractive","__decorateClass","query","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAA0BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/{hx-top-nav-CchPYaiV.js → hx-top-nav-DP6OFS8C.js} RENAMED Viewed

@@ -78,10 +78,7 @@ const f = v`
   .mobile-toggle:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-top-nav-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -232,8 +229,8 @@ const f = v`
   }
 `;
 var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (n, e, t, o) => {
-  for (var a = o > 1 ? void 0 : o ? _(e, t) : e, r = n.length - 1, i; r >= 0; r--)
-    (i = n[r]) && (a = (o ? i(e, t, a) : i(a)) || a);
+  for (var a = o > 1 ? void 0 : o ? _(e, t) : e, i = n.length - 1, r; i >= 0; i--)
+    (r = n[i]) && (a = (o ? r(e, t, a) : r(a)) || a);
   return o && a && u(e, t, a), a;
 };
 let l = class extends g {
@@ -271,15 +268,15 @@ let l = class extends g {
       var a;
       const n = 'a[href], button:not([disabled]), [tabindex="0"]', e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])"), t = (e == null ? void 0 : e.assignedElements({ flatten: !0 })) ?? [];
       let o = null;
-      for (const r of t) {
-        if (!(r instanceof HTMLElement)) continue;
-        if (r.matches(n)) {
-          o = r;
+      for (const i of t) {
+        if (!(i instanceof HTMLElement)) continue;
+        if (i.matches(n)) {
+          o = i;
           break;
         }
-        const i = r.querySelector(n);
-        if (i) {
-          o = i;
+        const r = i.querySelector(n);
+        if (r) {
+          o = r;
           break;
         }
       }
@@ -368,4 +365,4 @@ l = s([
 export {
   l as H
 };
-//# sourceMappingURL=hx-top-nav-CchPYaiV.js.map
+//# sourceMappingURL=hx-top-nav-DP6OFS8C.js.map

package/dist/shared/hx-top-nav-DP6OFS8C.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-top-nav-DP6OFS8C.js","sources":["../../src/components/hx-top-nav/hx-top-nav.styles.ts","../../src/components/hx-top-nav/hx-top-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTopNavStyles = css`\n /* ─── Host ─── */\n\n :host {\n display: block;\n }\n\n /* ─── Header wrapper (landmark) ─── */\n\n header {\n display: block;\n margin: 0;\n padding: 0;\n }\n\n /* ─── Sticky mode ─── */\n\n :host([sticky]) .nav {\n position: sticky;\n top: 0;\n /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */\n z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));\n }\n\n /* ─── Nav container ─── */\n\n .nav {\n background-color: var(--hx-top-nav-bg, var(--hx-color-surface-default, #ffffff));\n color: var(--hx-top-nav-color, var(--hx-color-text-strong, #202b39));\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));\n font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));\n }\n\n /* ─── Bar row (always visible) ─── */\n\n .nav__bar {\n display: flex;\n align-items: center;\n min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n gap: var(--hx-space-4, 1rem);\n }\n\n /* ─── Logo ─── */\n\n .nav__logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n /* ─── Mobile toggle (hamburger) ─── */\n\n .mobile-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-start: auto;\n /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */\n padding: var(--hx-space-3, 0.75rem);\n background: transparent;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n color: var(--hx-top-nav-toggle-color, var(--hx-color-text-strong, #202b39));\n cursor: pointer;\n line-height: 0;\n }\n\n .mobile-toggle:hover {\n background: var(--hx-top-nav-toggle-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n }\n\n .mobile-toggle:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .mobile-toggle__icon {\n width: var(--hx-space-6, 1.5rem);\n height: var(--hx-space-6, 1.5rem);\n }\n\n /* ─── Collapsible panel (mobile) ─── */\n\n .nav__collapsible {\n display: none;\n flex-direction: column;\n width: 100%;\n padding-block: var(--hx-space-3, 0.75rem);\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));\n }\n\n .nav__collapsible--open {\n display: flex;\n animation: hx-mobile-nav-open var(--hx-duration-fast, 100ms) ease-out;\n }\n\n /* ─── Menu and actions in collapsible (mobile) ─── */\n\n .nav__menu,\n .nav__actions {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n }\n\n .nav__actions {\n margin-top: var(--hx-space-3, 0.75rem);\n padding-top: var(--hx-space-3, 0.75rem);\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));\n }\n\n /* ─── Desktop breakpoint ─── */\n\n /* NOTE: CSS @media queries do not support custom properties.\n This value corresponds to --hx-breakpoint-md (768px). */\n @media (min-width: 768px) {\n /* Make nav a flex row so bar and collapsible sit side-by-side */\n .nav {\n display: flex;\n align-items: center;\n padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n }\n\n .nav__bar {\n flex-shrink: 0;\n padding-inline: 0;\n min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n }\n\n /* Hide hamburger on desktop */\n .mobile-toggle {\n display: none;\n }\n\n /* Collapsible becomes a standard inline flex row */\n .nav__collapsible {\n display: flex;\n flex-direction: row;\n align-items: center;\n flex: 1;\n padding-block: 0;\n border-top: none;\n margin-inline-start: auto;\n gap: var(--hx-space-4, 1rem);\n animation: none;\n }\n\n /* Override open modifier — always visible on desktop regardless of state */\n .nav__collapsible--open {\n display: flex;\n animation: none;\n }\n\n /* Menu grows to fill available space */\n .nav__menu {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n flex: 1;\n padding-inline: 0;\n }\n\n /* Actions sit at the far right */\n .nav__actions {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-top: 0;\n padding-top: 0;\n padding-inline: 0;\n border-top: none;\n flex-shrink: 0;\n }\n }\n\n /* ─── Mobile menu open animation ─── */\n\n @keyframes hx-mobile-nav-open {\n from {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .nav__collapsible--open {\n animation: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .nav {\n border-bottom-color: CanvasText;\n }\n\n .mobile-toggle {\n color: ButtonText;\n border: 1px solid ButtonText;\n }\n\n .nav__collapsible {\n border-top-color: CanvasText;\n }\n\n .nav__actions {\n border-top-color: CanvasText;\n }\n }\n`;\n","import { html, svg } 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 { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixTopNavStyles } from './hx-top-nav.styles.js';\n\n/**\n * Top-of-page site navigation bar with logo, menu items, and utility area.\n * Supports sticky positioning, responsive hamburger menu, and full slot-driven\n * content composition for Drupal and other CMS consumers.\n *\n * @summary Site-level navigation bar with logo, nav items, and action slots.\n *\n * @tag hx-top-nav\n *\n * @slot logo - Brand area rendered on the left side.\n * @slot - Default slot for primary navigation items rendered in the center.\n * IMPORTANT: Do NOT place a `<nav>` element in this slot — the component\n * already renders a `<nav>` landmark internally. Use a `<div>` or bare links.\n * @slot actions - Utility area rendered on the right side (search, user menu, etc.).\n *\n * @fires {CustomEvent<{open: boolean}>} hx-mobile-toggle - Dispatched when the\n * hamburger button is toggled. Detail contains the new open state.\n *\n * @csspart header - The outer `<header>` landmark element.\n * @csspart nav - The `<nav>` element inside the header.\n * @csspart logo - The logo slot container.\n * @csspart menu - The primary navigation slot container.\n * @csspart actions - The actions slot container.\n * @csspart mobile-toggle - The hamburger toggle button.\n *\n * @cssprop [--hx-top-nav-bg=var(--hx-color-neutral-0)] - Navigation bar background color.\n * @cssprop [--hx-top-nav-color=var(--hx-color-neutral-800)] - Navigation bar text color.\n * @cssprop [--hx-top-nav-border-color=var(--hx-color-neutral-200)] - Bottom border color.\n * @cssprop [--hx-top-nav-height=var(--hx-space-16)] - Navigation bar height.\n * @cssprop [--hx-top-nav-padding-x=var(--hx-space-6)] - Horizontal padding.\n * @cssprop [--hx-top-nav-z-index=var(--hx-z-index-sticky)] - Z-index for sticky mode.\n * @cssprop [--hx-top-nav-toggle-color=var(--hx-color-neutral-700)] - Hamburger icon color.\n * @cssprop [--hx-top-nav-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-z-index-sticky] - Z-index layer.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-16] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-duration-fast] - Animation duration.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n */\n@customElement('hx-top-nav')\nexport class HelixTopNav extends HelixElement {\n static override styles = [helixTopNavStyles, forcedColorsInteractive];\n\n // ─── Public Properties ───\n\n /**\n * When true, the navigation bar sticks to the top of the viewport during scroll.\n * @attr sticky\n */\n @property({ type: Boolean, reflect: true })\n sticky = false;\n\n /**\n * Accessible label applied to the `<nav>` element via `aria-label`.\n * @attr label\n */\n @property({ type: String })\n label = 'Site Navigation';\n\n // ─── Private State ───\n\n /** Whether the mobile collapsible menu is currently open. */\n /** @internal */\n @state() private _mobileOpen = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleMobileToggle(): void {\n this._mobileOpen = !this._mobileOpen;\n\n /**\n * Dispatched when the hamburger button is toggled.\n * @event hx-mobile-toggle\n */\n this.dispatchEvent(\n new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n bubbles: true,\n composed: true,\n detail: { open: this._mobileOpen },\n }),\n );\n\n if (this._mobileOpen) {\n // Move focus to first truly interactive element in the default slot (WCAG 2.4.3).\n // A plain HTMLElement (e.g. <div>) is not keyboard-reachable; we must find a\n // focusable descendant to avoid trapping focus on a non-interactive node.\n void this.updateComplete.then(() => {\n const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex=\"0\"]';\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n let firstFocusable: HTMLElement | null = null;\n for (const el of assigned) {\n if (!(el instanceof HTMLElement)) continue;\n if (el.matches(FOCUSABLE_SELECTOR)) {\n firstFocusable = el;\n break;\n }\n const found = el.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n if (found) {\n firstFocusable = found;\n break;\n }\n }\n firstFocusable?.focus();\n });\n }\n }\n\n /** @internal */\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (e.key === 'Escape' && this._mobileOpen) {\n this._mobileOpen = false;\n this.dispatchEvent(\n new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n bubbles: true,\n composed: true,\n detail: { open: false },\n }),\n );\n // Return focus to the toggle button after Lit re-render completes\n void this.updateComplete.then(() => {\n this.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"mobile-toggle\"]')?.focus();\n });\n }\n };\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderHamburgerIcon() {\n return html`\n <svg\n class=\"mobile-toggle__icon\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n ${this._mobileOpen\n ? svg`\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n `\n : svg`\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n `}\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const menuClasses = {\n nav__collapsible: true,\n 'nav__collapsible--open': this._mobileOpen,\n };\n\n return html`\n <header part=\"header\">\n <nav part=\"nav\" class=\"nav\" aria-label=${this.label}>\n <div class=\"nav__bar\">\n <div part=\"logo\" class=\"nav__logo\">\n <slot name=\"logo\"></slot>\n </div>\n\n <button\n part=\"mobile-toggle\"\n class=\"mobile-toggle\"\n type=\"button\"\n aria-expanded=${String(this._mobileOpen)}\n aria-controls=\"nav-menu\"\n aria-label=${this._mobileOpen ? 'Close navigation' : 'Open navigation'}\n @click=${this._handleMobileToggle}\n >\n ${this._renderHamburgerIcon()}\n </button>\n </div>\n\n <div id=\"nav-menu\" class=${classMap(menuClasses)}>\n <div part=\"menu\" class=\"nav__menu\">\n <slot></slot>\n </div>\n\n <div part=\"actions\" class=\"nav__actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </nav>\n </header>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-top-nav': HelixTopNav;\n }\n}\n"],"names":["helixTopNavStyles","css","HelixTopNav","HelixElement","e","_b","_a","FOCUSABLE_SELECTOR","slot","assigned","firstFocusable","el","found","html","svg","menuClasses","classMap","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-tree-item-DtMC3DTa.js → hx-tree-item-C2CiWuDE.js} RENAMED Viewed

@@ -20,8 +20,7 @@ const C = b`
   }
   .tree:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -314,10 +313,7 @@ const E = b`
   .item-row:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-tree-item-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, -2px);
   }
@@ -376,10 +372,7 @@ const E = b`
   .expand-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-tree-item-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -707,4 +700,4 @@ export {
   l as H,
   d as a
 };
-//# sourceMappingURL=hx-tree-item-DtMC3DTa.js.map
+//# sourceMappingURL=hx-tree-item-C2CiWuDE.js.map