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

@helixui/library 3.2.0-next.98 → 3.3.0-next.111

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

package/dist/shared/hx-date-picker-2iRG1p74.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-date-picker-2iRG1p74.js","sources":["../../src/components/hx-date-picker/hx-date-picker.styles.ts","../../src/components/hx-date-picker/hx-date-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDatePickerStyles = css`\n /* ============================================================\n Host\n ============================================================ */\n\n :host {\n display: block;\n position: relative;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ============================================================\n Field layout\n ============================================================ */\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));\n position: relative;\n }\n\n .field__label-wrapper {\n display: contents;\n }\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-date-picker-label-color, var(--hx-color-text-strong, #202b39));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .field__required-marker {\n color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n /* ============================================================\n Input wrapper\n ============================================================ */\n\n .field__input-wrapper {\n display: flex;\n align-items: stretch;\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-date-picker-border-color, var(--hx-color-border-strong, #66787b));\n border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-date-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: hidden;\n }\n\n .field__input-wrapper:focus-within {\n border-color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n color-mix(\n in srgb,\n var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n .field--error .field__input-wrapper {\n border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #e5493e));\n }\n\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--hx-date-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-date-picker-error-color, var(--hx-color-error-500, #e5493e))\n calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n transparent\n );\n }\n\n /* ============================================================\n Input element\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-date-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: default;\n }\n\n .field__input::placeholder {\n color: var(--hx-color-text-placeholder, #66787b);\n }\n\n .field__input:disabled {\n cursor: not-allowed;\n }\n\n /* ============================================================\n Calendar trigger button\n ============================================================ */\n\n .field__trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--hx-space-3, 0.75rem);\n border: none;\n border-left: var(--hx-border-width-thin, 1px) solid\n var(--hx-date-picker-border-color, var(--hx-color-border-strong, #66787b));\n background: transparent;\n color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #4a5362));\n cursor: pointer;\n flex-shrink: 0;\n transition: color var(--hx-transition-fast, 150ms ease);\n outline: none;\n }\n\n .field__trigger:focus-visible {\n color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n background-color: color-mix(\n in srgb,\n var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078)) 8%,\n transparent\n );\n }\n\n .field__trigger:hover:not(:disabled) {\n color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #202b39));\n background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0d1825) 4%, transparent);\n }\n\n .field__trigger:disabled {\n cursor: not-allowed;\n }\n\n /* ============================================================\n Calendar popover\n ============================================================ */\n\n .calendar {\n position: absolute;\n top: calc(100% + var(--hx-space-1, 0.25rem));\n left: 0;\n z-index: var(--hx-z-index-dropdown, 1000);\n min-width: var(--hx-date-picker-calendar-min-width, 18rem);\n background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #d6dbd5));\n border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));\n box-shadow: var(\n --hx-date-picker-calendar-shadow,\n var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))\n );\n padding: var(--hx-space-3, 0.75rem);\n outline: none;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .calendar {\n animation: calendar-appear var(--hx-transition-fast, 150ms ease) forwards;\n }\n }\n\n @keyframes calendar-appear {\n 0% {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* ============================================================\n Calendar navigation\n ============================================================ */\n\n .calendar__nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--hx-space-3, 0.75rem);\n }\n\n :is(.calendar__nav-btn, .calendar__day, .calendar__day-cell, .calendar__weekday) {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n :is(.calendar__nav-btn, .calendar__day) {\n width: var(--hx-touch-target-min, 2.75rem);\n height: var(--hx-touch-target-min, 2.75rem);\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n cursor: pointer;\n outline: none;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease);\n }\n\n .calendar__nav-btn {\n color: var(--hx-color-text-secondary, #313e4b);\n font-size: var(--hx-font-size-lg, 1.125rem);\n line-height: 1;\n }\n\n .calendar__nav-btn:hover {\n background-color: var(--hx-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n color: var(--hx-color-text-primary, #0d1825);\n }\n\n :is(.calendar__nav-btn, .calendar__day):focus-visible {\n box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n z-index: 1;\n }\n\n .calendar__nav-btn:disabled {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .calendar__month-label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-color-text-strong, #202b39);\n flex: 1;\n text-align: center;\n }\n\n /* ============================================================\n Calendar grid\n ============================================================ */\n\n .calendar__grid {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n }\n\n .calendar__row {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: var(--hx-space-1, 0.25rem);\n }\n\n .calendar__weekday {\n height: var(--hx-size-8, 2rem);\n font-size: var(--hx-font-size-xs, 0.75rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-color-text-muted, #4a5362);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n /* ============================================================\n Calendar day cells\n ============================================================ */\n\n .calendar__day {\n color: var(--hx-color-text-strong, #202b39);\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-family: inherit;\n position: relative;\n }\n\n .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {\n background-color: var(--hx-date-picker-day-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n color: var(--hx-color-text-primary, #0d1825);\n }\n\n .calendar__day--selected {\n background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));\n color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));\n font-weight: var(--hx-font-weight-semibold, 600);\n }\n\n .calendar__day--selected:hover {\n background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #0f7078));\n }\n\n .calendar__day--today:not(.calendar__day--selected) {\n font-weight: var(--hx-font-weight-bold, 700);\n color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #0f7078));\n }\n\n .calendar__day--today:not(.calendar__day--selected)::after {\n content: '';\n position: absolute;\n bottom: 0.2rem;\n left: 50%;\n transform: translate(-50%);\n width: 0.25rem;\n height: 0.25rem;\n border-radius: 50%;\n background-color: currentColor;\n }\n\n .calendar__day--disabled {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ============================================================\n Live region (screen reader announcements)\n ============================================================ */\n\n .calendar__live-region {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ============================================================\n Help text and error message\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\n .field__help-text {\n color: var(--hx-color-text-muted, #4a5362);\n }\n\n .field__error {\n color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #c92a2a));\n }\n\n /* ============================================================\n Reduced motion\n ============================================================ */\n\n @media (prefers-reduced-motion: reduce) {\n .field__input-wrapper,\n .field__trigger,\n .calendar__nav-btn,\n .calendar__day {\n transition: none;\n }\n }\n\n /* ============================================================\n Forced colors (Windows High Contrast)\n ============================================================ */\n\n @media (forced-colors: active) {\n .field__input-wrapper {\n border: 1px solid ButtonText;\n }\n\n .field__input-wrapper:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n box-shadow: none;\n }\n\n :is(.calendar__day:focus-visible, .calendar__nav-btn:focus-visible) {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n\n .calendar__day--selected {\n background-color: Highlight;\n color: HighlightText;\n border: 1px solid Highlight;\n }\n\n .calendar__day--today:not(.calendar__day--selected) {\n border: 2px solid LinkText;\n }\n\n .calendar__day--today:not(.calendar__day--selected)::after {\n display: none;\n }\n\n .calendar__day--disabled {\n color: GrayText;\n }\n\n .field--error .field__input-wrapper {\n border-color: LinkText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state, query } 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 { helixDatePickerStyles } from './hx-date-picker.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\n// PERF: hx-date-picker exceeds 5KB budget (7.98kb gzipped) -- calendar grid, date parsing, keyboard navigation, localization\n\nconst _nextDatePickerId = createIdCounter('hx-date-picker');\n\n/** Detail for the hx-change event dispatched by hx-date-picker. */\nexport interface HxDatePickerChangeDetail {\n value: string;\n date: Date | null;\n}\n\n/**\n * Date picker component for selecting dates with keyboard-accessible calendar popup.\n *\n * @summary Form-associated date picker with calendar popup and WCAG 2.1 AA accessibility.\n *\n * @tag hx-date-picker\n *\n * @slot label - Custom label content (overrides the label property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property).\n *\n * @fires {CustomEvent<{value: string, date: Date | null}>} hx-change - Emitted when the selected date changes.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around input and trigger.\n * @csspart input - The readonly text input displaying the formatted date.\n * @csspart trigger - The calendar icon button.\n * @csspart calendar - The calendar popup dialog.\n * @csspart month-nav - The month navigation header.\n * @csspart day - An individual day button in the calendar grid.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-date-picker-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-date-picker-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-date-picker-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-date-picker-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-date-picker-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-date-picker-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-date-picker-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-date-picker-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-date-picker-trigger-color=var(--hx-color-neutral-500)] - Trigger icon color.\n * @cssprop [--hx-date-picker-calendar-bg=var(--hx-color-neutral-0)] - Calendar background color.\n * @cssprop [--hx-date-picker-calendar-border-color=var(--hx-color-neutral-200)] - Calendar border color.\n * @cssprop [--hx-date-picker-calendar-min-width=18rem] - Calendar minimum width.\n * @cssprop [--hx-date-picker-selected-bg=var(--hx-color-primary-500)] - Selected day background.\n * @cssprop [--hx-date-picker-selected-color=var(--hx-color-neutral-0)] - Selected day text color.\n * @cssprop [--hx-date-picker-today-color=var(--hx-color-primary-600)] - Today indicator color.\n * @cssprop [--hx-date-picker-calendar-shadow=0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)] - Calendar popup box shadow.\n * @cssprop [--hx-date-picker-calendar-border-radius=var(--hx-border-radius-lg)] - Border radius.\n * @cssprop [--hx-date-picker-selected-hover-bg=var(--hx-color-primary-600)] - Background color.\n * @cssprop [--hx-date-picker-trigger-hover-color=var(--hx-color-neutral-700)] - Color.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-opacity] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-z-index-dropdown] - Z-index layer.\n */\n@customElement('hx-date-picker')\nexport class HelixDatePicker extends FormMixin(HelixElement) {\n static override styles = [helixDatePickerStyles, forcedColorsField];\n\n // ─── Form Association ───\n\n /**\n * Marks this component as form-associated for native form participation.\n * @internal\n */\n static override formAssociated = true;\n\n // ─── Properties ───\n\n /**\n * The name of the field, used for form submission.\n * @attr name\n */\n @property({ type: String, reflect: true })\n name = '';\n\n /**\n * The current value as an ISO 8601 date string (e.g. 2026-03-04).\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * The minimum selectable date as an ISO 8601 string.\n * @attr min\n */\n @property({ type: String })\n min = '';\n\n /**\n * The maximum selectable date as an ISO 8601 string.\n * @attr max\n */\n @property({ type: String })\n max = '';\n\n /**\n * The visible label text.\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 * Help text displayed below the field for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Display format hint shown as placeholder (e.g. MM/DD/YYYY).\n * @attr format\n */\n @property({ type: String })\n format = 'MM/DD/YYYY';\n\n /**\n * Locale string used for formatting the display value.\n * @attr locale\n */\n @property({ type: String })\n locale = 'en-US';\n\n /**\n * Validation message shown when the field is required but empty.\n * @attr required-message\n */\n @property({ type: String, attribute: 'required-message' })\n requiredMessage = 'This field is required.';\n\n /**\n * Accessible label for the calendar dialog.\n * @attr choose-date-label\n */\n @property({ type: String, attribute: 'choose-date-label' })\n chooseDateLabel = 'Choose a date';\n\n /**\n * Accessible label for the calendar trigger button when the calendar is closed.\n * @attr open-calendar-label\n */\n @property({ type: String, attribute: 'open-calendar-label' })\n openCalendarLabel = 'Open calendar';\n\n /**\n * Accessible label for the calendar trigger button when the calendar is open.\n * @attr close-calendar-label\n */\n @property({ type: String, attribute: 'close-calendar-label' })\n closeCalendarLabel = 'Close calendar';\n\n /**\n * Accessible label for the previous month navigation button.\n * @attr previous-month-label\n */\n @property({ type: String, attribute: 'previous-month-label' })\n previousMonthLabel = 'Previous month';\n\n /**\n * Accessible label for the next month navigation button.\n * @attr next-month-label\n */\n @property({ type: String, attribute: 'next-month-label' })\n nextMonthLabel = 'Next month';\n\n // ─── Internal State ───\n\n /**\n * Tracks whether the calendar popup is currently visible.\n * @internal\n */\n @state() private _isOpen = false;\n /**\n * The year currently displayed in the calendar view.\n * @internal\n */\n @state() private _viewYear: number = new Date().getFullYear();\n /**\n * The month (0-indexed) currently displayed in the calendar view.\n * @internal\n */\n @state() private _viewMonth: number = new Date().getMonth();\n /**\n * The day number currently focused within the calendar grid, or null when the calendar is closed.\n * @internal\n */\n @state() private _focusedDay: number | null = null;\n /**\n * The message announced to screen readers when the calendar month changes.\n * @internal\n */\n @state() private _liveMessage = '';\n\n /**\n * Cached calendar day grid for the current view month/year.\n * Recomputed in willUpdate() only when _viewMonth or _viewYear changes.\n * @internal\n */\n private _dayGrid: (Date | null)[] = [];\n\n /**\n * Cached aria-label strings for each date in the current grid, keyed by ISO date string.\n * Recomputed in willUpdate() alongside _dayGrid.\n * @internal\n */\n private _dayAriaLabels: Map<string, string> = new Map();\n\n // ─── Memoized formatters ───\n\n /**\n * Cached Intl.DateTimeFormat for weekday-short labels; keyed on locale.\n * Recreated only when locale changes.\n * @internal\n */\n private _weekdayFormatter: Intl.DateTimeFormat | null = null;\n /**\n * Cached Intl.DateTimeFormat for month-long labels; keyed on locale.\n * Recreated only when locale changes.\n * @internal\n */\n private _monthFormatter: Intl.DateTimeFormat | null = null;\n /**\n * Locale used when the cached formatters were last built.\n * @internal\n */\n private _formatterLocale = '';\n /**\n * Cached array of 7 weekday header strings.\n * Depends only on locale — recomputed lazily when locale changes.\n * @internal\n */\n private _cachedWeekdayNames: string[] | null = null;\n\n // ─── Internal References ───\n\n /**\n * Reference to the readonly text input element displaying the formatted date.\n * @internal\n */\n @query('.field__input')\n private _input: HTMLInputElement | undefined;\n\n /**\n * Reference to the calendar icon button that opens and closes the popup.\n * @internal\n */\n @query('.field__trigger')\n private _trigger: HTMLButtonElement | undefined;\n\n /**\n * Reference to the calendar popup dialog element.\n * @internal\n */\n @query('.calendar')\n private _calendar: HTMLDialogElement | undefined;\n\n // ─── Unique IDs ───\n\n /**\n * Unique base ID for this component instance, used to generate all child element IDs.\n * @internal\n */\n private _id = _nextDatePickerId();\n /**\n * Unique ID for the text input element, used for label association.\n * @internal\n */\n private _inputId = `${this._id}-input`;\n /**\n * Unique ID for the help text element, used for aria-describedby association.\n * @internal\n */\n private _helpTextId = `${this._id}-help`;\n /**\n * Unique ID for the error message element, used for aria-describedby association.\n * @internal\n */\n private _errorId = `${this._id}-error`;\n /**\n * Unique ID for the calendar popup dialog element, used for aria-controls association.\n * @internal\n */\n private _calendarId = `${this._id}-calendar`;\n /**\n * Unique ID for the ARIA live region element that announces month navigation changes.\n * @internal\n */\n private _liveRegionId = `${this._id}-live`;\n\n // ─── Slot Tracking ───\n\n /**\n * Whether the label slot has any assigned elements, used to switch between slotted and property-based label rendering.\n * @internal\n */\n @state() private _hasLabelSlot = false;\n /**\n * Whether the error slot has any assigned elements, used to switch between slotted and property-based error rendering.\n * @internal\n */\n @state() private _hasErrorSlot = false;\n\n /** @internal */\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._inputId}-slotted-label`;\n }\n }\n }\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedElements().length > 0;\n }\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleDocumentClick, true);\n }\n\n override willUpdate(changedProperties: PropertyValues<this>): void {\n super.willUpdate(changedProperties);\n\n // Sync form state before render so the browser form participation is\n // always up-to-date without causing an extra render cycle.\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n }\n\n // Recompute the day grid and aria-labels only when the viewed month/year\n // or locale changes — not on every render.\n const gridChanged =\n (changedProperties as Map<PropertyKey, unknown>).has('_viewMonth') ||\n (changedProperties as Map<PropertyKey, unknown>).has('_viewYear') ||\n changedProperties.has('locale') ||\n this._dayGrid.length === 0;\n\n if (gridChanged) {\n this._dayGrid = this._getDaysInGrid();\n this._dayAriaLabels = new Map(\n this._dayGrid\n .filter((d): d is Date => d !== null)\n .map((d) => [\n this._toISO(d),\n d.toLocaleDateString(this.locale, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n }),\n ]),\n );\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n // FormMixin calls _updateValidity() automatically after updated().\n // Force screen reader re-announcement when error text changes (a11y-v3-005)\n if (changedProperties.has('error') && this.error) {\n const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n if (errorEl) {\n const msg = this.error;\n requestAnimationFrame(() => {\n errorEl.textContent = '';\n requestAnimationFrame(() => {\n errorEl.textContent = msg;\n });\n });\n }\n }\n\n if ((changedProperties as Map<PropertyKey, unknown>).has('_isOpen')) {\n if (this._isOpen) {\n // Sync view to the currently selected date when opening.\n const selected = this._parseISODate(this.value);\n if (selected) {\n this._viewYear = selected.getFullYear();\n this._viewMonth = selected.getMonth();\n }\n void this.updateComplete.then(() => {\n this._calendar?.show();\n this._focusActiveDay();\n document.addEventListener('click', this._handleDocumentClick, true);\n });\n } else {\n this._calendar?.close();\n this._focusedDay = null;\n document.removeEventListener('click', this._handleDocumentClick, true);\n }\n }\n\n if (\n (changedProperties as Map<PropertyKey, unknown>).has('_viewMonth') ||\n (changedProperties as Map<PropertyKey, unknown>).has('_viewYear')\n ) {\n if (this._isOpen) {\n const monthName = this._getMonthName(this._viewMonth);\n this._liveMessage = `${monthName} ${this._viewYear}`;\n void this.updateComplete.then(() => {\n this._focusActiveDay();\n });\n }\n }\n }\n\n private readonly _handleDocumentClick = (e: MouseEvent): void => {\n if (!this._isOpen) return;\n const path = e.composedPath();\n if (!path.includes(this)) {\n this._closeCalendar();\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 || this.requiredMessage,\n this._input,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /** @internal */\n protected override _onFormReset(): void {\n this.value = '';\n this._internals.setFormValue(null);\n this._isOpen = false;\n this._resetInteractionState();\n }\n\n /** @internal */\n protected override _onFormStateRestore(\n state: File | string | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /** @internal */\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Public Methods ───\n\n override focus(options?: FocusOptions): void {\n this._trigger?.focus(options);\n }\n\n // ─── Date Utilities ───\n\n /** @internal */\n private _parseISODate(iso: string): Date | null {\n if (!iso) return null;\n const d = new Date(iso + 'T00:00:00');\n return isNaN(d.getTime()) ? null : d;\n }\n\n /** @internal */\n private _toISO(date: Date): string {\n const y = date.getFullYear();\n const m = String(date.getMonth() + 1).padStart(2, '0');\n const d = String(date.getDate()).padStart(2, '0');\n return `${y}-${m}-${d}`;\n }\n\n /** @internal */\n private _formatForDisplay(iso: string): string {\n const date = this._parseISODate(iso);\n if (!date) return '';\n return date.toLocaleDateString(this.locale, {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n });\n }\n\n /** @internal */\n private _isDateDisabled(date: Date): boolean {\n const iso = this._toISO(date);\n if (this.min && iso < this.min) return true;\n if (this.max && iso > this.max) return true;\n return false;\n }\n\n /** @internal */\n private _isSameDay(a: Date, b: Date): boolean {\n return (\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n );\n }\n\n /** @internal */\n private _isToday(date: Date): boolean {\n return this._isSameDay(date, new Date());\n }\n\n /**\n * Ensure memoized Intl.DateTimeFormat instances exist and match the current locale.\n * Rebuilds only when locale changes; also clears the cached weekday names.\n * @internal\n */\n private _ensureFormatters(): void {\n if (this._formatterLocale === this.locale && this._weekdayFormatter && this._monthFormatter) {\n return;\n }\n this._weekdayFormatter = new Intl.DateTimeFormat(this.locale, { weekday: 'short' });\n this._monthFormatter = new Intl.DateTimeFormat(this.locale, { month: 'long' });\n this._formatterLocale = this.locale;\n this._cachedWeekdayNames = null;\n }\n\n /** @internal */\n private _getMonthName(month: number): string {\n this._ensureFormatters();\n // _monthFormatter is guaranteed non-null after _ensureFormatters()\n const fmt = this._monthFormatter ?? new Intl.DateTimeFormat(this.locale, { month: 'long' });\n return fmt.format(new Date(2000, month, 1));\n }\n\n /** @internal */\n private _getDayName(dayIndex: number): string {\n // dayIndex: 0=Sun, 1=Mon, ...\n this._ensureFormatters();\n // _weekdayFormatter is guaranteed non-null after _ensureFormatters()\n const fmt =\n this._weekdayFormatter ?? new Intl.DateTimeFormat(this.locale, { weekday: 'short' });\n return fmt.format(new Date(2000, 0, 2 + dayIndex));\n }\n\n /**\n * Returns the 7 cached weekday header strings for the current locale.\n * Computed once per locale and reused across all renders.\n * @internal\n */\n private _getWeekdayNames(): string[] {\n this._ensureFormatters();\n if (!this._cachedWeekdayNames) {\n this._cachedWeekdayNames = Array.from({ length: 7 }, (_, i) => this._getDayName(i));\n }\n return this._cachedWeekdayNames;\n }\n\n // ─── Calendar Grid ───\n\n /**\n * Returns an array of Date objects (or null for padding cells) representing\n * the 6-week grid for the current view month.\n */\n /** @internal */\n private _getDaysInGrid(): (Date | null)[] {\n const firstOfMonth = new Date(this._viewYear, this._viewMonth, 1);\n const leadingBlanks = firstOfMonth.getDay(); // 0=Sun\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n\n const cells: (Date | null)[] = [];\n\n // Leading blank cells for days before the 1st\n for (let i = 0; i < leadingBlanks; i++) {\n cells.push(null);\n }\n\n // Days of current month\n for (let d = 1; d <= daysInMonth; d++) {\n cells.push(new Date(this._viewYear, this._viewMonth, d));\n }\n\n // Trailing blank cells to complete a full 7-column row\n const remainder = cells.length % 7;\n if (remainder !== 0) {\n for (let i = 0; i < 7 - remainder; i++) {\n cells.push(null);\n }\n }\n\n return cells;\n }\n\n // ─── Calendar Open/Close ───\n\n /** @internal */\n private _openCalendar(): void {\n if (this.disabled) return;\n this._isOpen = true;\n }\n\n /** @internal */\n private _closeCalendar(): void {\n this._isOpen = false;\n // Return focus to trigger after calendar closes.\n void this.updateComplete.then(() => {\n this._trigger?.focus();\n });\n }\n\n /** @internal */\n private _toggleCalendar(): void {\n if (this._isOpen) {\n this._closeCalendar();\n } else {\n this._openCalendar();\n }\n }\n\n // ─── Focus Management ───\n\n /** @internal */\n private _focusActiveDay(): void {\n if (!this._calendar) return;\n\n const selectedISO = this.value;\n const selected = this._parseISODate(selectedISO);\n\n // Try to focus: selected day > today (if in view) > first enabled day\n let targetDay: number | null = null;\n\n if (\n selected &&\n selected.getFullYear() === this._viewYear &&\n selected.getMonth() === this._viewMonth\n ) {\n targetDay = selected.getDate();\n } else {\n const today = new Date();\n if (today.getFullYear() === this._viewYear && today.getMonth() === this._viewMonth) {\n const todayDate = new Date(this._viewYear, this._viewMonth, today.getDate());\n if (!this._isDateDisabled(todayDate)) {\n targetDay = today.getDate();\n }\n }\n }\n\n if (targetDay === null) {\n // Find first enabled day in the month\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(this._viewYear, this._viewMonth, d);\n if (!this._isDateDisabled(date)) {\n targetDay = d;\n break;\n }\n }\n }\n\n if (targetDay !== null) {\n this._focusedDay = targetDay;\n void this.updateComplete.then(() => {\n const btn = this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${targetDay}\"]`);\n btn?.focus();\n });\n }\n }\n\n // ─── Month Navigation ───\n\n /** @internal */\n private _prevMonth(): void {\n if (this._viewMonth === 0) {\n this._viewMonth = 11;\n this._viewYear = this._viewYear - 1;\n } else {\n this._viewMonth = this._viewMonth - 1;\n }\n }\n\n /** @internal */\n private _nextMonth(): void {\n if (this._viewMonth === 11) {\n this._viewMonth = 0;\n this._viewYear = this._viewYear + 1;\n } else {\n this._viewMonth = this._viewMonth + 1;\n }\n }\n\n // ─── Day Selection ───\n\n /** @internal */\n private _selectDay(date: Date): void {\n if (this._isDateDisabled(date)) return;\n\n const iso = this._toISO(date);\n this.value = iso;\n this._internals.setFormValue(iso);\n this._handleInteractionInput();\n this._handleInteractionBlur();\n\n this.dispatchEvent(\n new CustomEvent<{ value: string; date: Date }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: iso, date },\n }),\n );\n\n this._closeCalendar();\n }\n\n /**\n * Delegated click handler for the calendar day grid.\n * A single handler on the grid container replaces per-cell closures,\n * eliminating 42 inline function allocations per render.\n * @internal\n */\n private readonly _handleGridClick = (e: Event): void => {\n const target = (e.target as Element).closest<HTMLElement>('[data-date]');\n if (!target) return;\n const iso = target.dataset['date'];\n if (!iso) return;\n const date = this._parseISODate(iso);\n if (date) {\n this._selectDay(date);\n }\n };\n\n // ─── Calendar Keyboard Navigation ───\n\n /** @internal */\n private _handleCalendarKeydown(e: KeyboardEvent): void {\n const { key } = e;\n\n if (key === 'Tab') {\n this._handleCalendarTab(e);\n return;\n }\n\n // Handle Escape to call _closeCalendar() with focus-restore.\n if (key === 'Escape') {\n e.stopPropagation();\n this._closeCalendar();\n return;\n }\n\n if (\n key !== 'ArrowLeft' &&\n key !== 'ArrowRight' &&\n key !== 'ArrowUp' &&\n key !== 'ArrowDown' &&\n key !== 'Enter' &&\n key !== ' ' &&\n key !== 'Home' &&\n key !== 'End' &&\n key !== 'PageUp' &&\n key !== 'PageDown'\n ) {\n return;\n }\n\n e.preventDefault();\n\n const currentFocused = this._focusedDay ?? 1;\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n\n if (key === 'Enter' || key === ' ') {\n const date = new Date(this._viewYear, this._viewMonth, currentFocused);\n if (!this._isDateDisabled(date)) {\n this._selectDay(date);\n }\n return;\n }\n\n if (key === 'PageUp') {\n this._prevMonth();\n return;\n }\n\n if (key === 'PageDown') {\n this._nextMonth();\n return;\n }\n\n if (key === 'Home') {\n // Move to start of current week (Sunday)\n const currentDate = new Date(this._viewYear, this._viewMonth, currentFocused);\n const dayOfWeek = currentDate.getDay();\n const newDay = currentFocused - dayOfWeek;\n if (newDay >= 1) {\n this._focusedDay = newDay;\n void this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n return;\n }\n\n if (key === 'End') {\n // Move to end of current week (Saturday)\n const currentDate = new Date(this._viewYear, this._viewMonth, currentFocused);\n const dayOfWeek = currentDate.getDay();\n const daysToSaturday = 6 - dayOfWeek;\n const newDay = currentFocused + daysToSaturday;\n if (newDay <= daysInMonth) {\n this._focusedDay = newDay;\n void this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n return;\n }\n\n let newDay = currentFocused;\n\n if (key === 'ArrowLeft') newDay = currentFocused - 1;\n if (key === 'ArrowRight') newDay = currentFocused + 1;\n if (key === 'ArrowUp') newDay = currentFocused - 7;\n if (key === 'ArrowDown') newDay = currentFocused + 7;\n\n if (newDay < 1) {\n // Wrap to previous month\n this._prevMonth();\n const prevDaysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n this._focusedDay = prevDaysInMonth + newDay;\n void this.updateComplete.then(() => {\n const day = this._focusedDay;\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${day}\"]`)?.focus();\n });\n return;\n }\n\n if (newDay > daysInMonth) {\n // Wrap to next month\n const overflow = newDay - daysInMonth;\n this._nextMonth();\n this._focusedDay = overflow;\n void this.updateComplete.then(() => {\n const day = this._focusedDay;\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${day}\"]`)?.focus();\n });\n return;\n }\n\n this._focusedDay = newDay;\n void this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n\n // ─── Navigation Boundary Checks ───\n\n /** @internal */\n private _isPrevMonthDisabled(): boolean {\n if (!this.min) return false;\n const firstOfCurrentView = new Date(this._viewYear, this._viewMonth, 1);\n const minDate = this._parseISODate(this.min);\n if (!minDate) return false;\n return firstOfCurrentView <= minDate;\n }\n\n /** @internal */\n private _isNextMonthDisabled(): boolean {\n if (!this.max) return false;\n const lastOfCurrentView = new Date(this._viewYear, this._viewMonth + 1, 0);\n const maxDate = this._parseISODate(this.max);\n if (!maxDate) return false;\n return lastOfCurrentView >= maxDate;\n }\n\n // ─── Focus Trap ───\n\n /** @internal */\n private _handleCalendarTab(e: KeyboardEvent): void {\n if (e.key !== 'Tab' || !this._isOpen) return;\n\n const focusableEls = this._calendar?.querySelectorAll<HTMLElement>(\n 'button:not([disabled]), [tabindex=\"0\"]',\n );\n if (!focusableEls || focusableEls.length === 0) return;\n\n const first = focusableEls[0];\n const last = focusableEls[focusableEls.length - 1];\n\n // In shadow DOM, document.activeElement returns the host element, not the\n // focused inner element. Use shadowRoot.activeElement exclusively so the\n // comparison is accurate and the trap cannot malfunction and strand users.\n const shadowActive = this.shadowRoot?.activeElement;\n\n if (e.shiftKey) {\n if (shadowActive === first) {\n e.preventDefault();\n last?.focus();\n }\n } else {\n if (shadowActive === last) {\n e.preventDefault();\n first?.focus();\n }\n }\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderWeekdayHeaders() {\n // Use pre-cached weekday names (only locale-dependent, never changes within a session)\n const names = this._getWeekdayNames();\n const headers = names.map(\n (name) =>\n html`<div class=\"calendar__weekday\" role=\"columnheader\" aria-label=${name}>\n ${name.slice(0, 2)}\n </div>`,\n );\n return html`<div class=\"calendar__row\" role=\"row\">${headers}</div>`;\n }\n\n /** @internal */\n private _renderDayGrid() {\n // Use the memoized grid — recomputed in willUpdate() only on month/year/locale change.\n const cells = this._dayGrid;\n const selectedDate = this._parseISODate(this.value);\n // Cache today once per render — avoids 42 new Date() allocations per keyboard navigation event.\n const today = new Date();\n\n const rows: ReturnType<typeof html>[] = [];\n\n for (let rowStart = 0; rowStart < cells.length; rowStart += 7) {\n const rowCells = cells.slice(rowStart, rowStart + 7).map((date) => {\n if (date === null) {\n return html`<div class=\"calendar__day-cell\" role=\"gridcell\" aria-hidden=\"true\"></div>`;\n }\n\n const isSelected = selectedDate ? this._isSameDay(date, selectedDate) : false;\n const isToday = this._isSameDay(date, today);\n const isDisabled = this._isDateDisabled(date);\n const isFocused = this._focusedDay === date.getDate();\n const dayNumber = date.getDate();\n const iso = this._toISO(date);\n // Read from the pre-computed aria-label map — no per-render toLocaleDateString calls.\n const ariaLabel = this._dayAriaLabels.get(iso) ?? iso;\n\n const dayClasses = {\n calendar__day: true,\n 'calendar__day--selected': isSelected,\n 'calendar__day--today': isToday,\n 'calendar__day--disabled': isDisabled,\n };\n\n // data-date carries the ISO string so the delegated grid click handler\n // (_handleGridClick) can identify the clicked day without any closure.\n // role=\"gridcell\" belongs on the cell container (ARIA 1.2 grid ownership rules),\n // not the inner <button>. aria-selected/aria-disabled/aria-current describe\n // the cell state and live on the gridcell element.\n return html`<div\n class=\"calendar__day-cell\"\n role=\"gridcell\"\n aria-selected=${isSelected ? 'true' : 'false'}\n aria-disabled=${isDisabled ? 'true' : nothing}\n aria-current=${isToday ? 'date' : nothing}\n >\n <button\n part=\"day\"\n class=${classMap(dayClasses)}\n type=\"button\"\n data-day=${dayNumber}\n data-date=${iso}\n aria-label=${ariaLabel}\n tabindex=${isFocused ? '0' : '-1'}\n ?disabled=${isDisabled}\n >\n ${dayNumber}\n </button>\n </div>`;\n });\n\n rows.push(html`<div class=\"calendar__row\" role=\"row\">${rowCells}</div>`);\n }\n\n return rows;\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n const displayValue = this._formatForDisplay(this.value);\n const monthName = this._getMonthName(this._viewMonth);\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 describedBy =\n [hasError ? this._errorId : null, this.helpText ? this._helpTextId : null]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n \n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._inputId}>\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 </div>\n\n \n <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._inputId}\n type=\"text\"\n readonly\n .value=${displayValue}\n placeholder=${ifDefined(this.format || undefined)}\n ?disabled=${this.disabled}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-haspopup=\"dialog\"\n @click=${this._openCalendar}\n />\n <button\n part=\"trigger\"\n class=\"field__trigger\"\n type=\"button\"\n aria-label=${this._isOpen ? this.closeCalendarLabel : this.openCalendarLabel}\n aria-haspopup=\"dialog\"\n aria-expanded=${this._isOpen ? 'true' : 'false'}\n aria-controls=${this._calendarId}\n ?disabled=${this.disabled}\n @click=${this._toggleCalendar}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n </svg>\n </button>\n </div>\n\n \n <dialog\n part=\"calendar\"\n class=\"calendar\"\n id=${this._calendarId}\n aria-label=${this.chooseDateLabel}\n @keydown=${this._handleCalendarKeydown}\n >\n \n <div\n id=${this._liveRegionId}\n class=\"calendar__live-region\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n ${this._liveMessage}\n </div>\n\n \n <div part=\"month-nav\" class=\"calendar__nav\">\n <button\n class=\"calendar__nav-btn\"\n type=\"button\"\n aria-label=${this.previousMonthLabel}\n ?disabled=${this._isPrevMonthDisabled()}\n @click=${this._prevMonth}\n >\n ‹\n </button>\n <span class=\"calendar__month-label\" aria-hidden=\"true\">\n ${monthName} ${this._viewYear}\n </span>\n <button\n class=\"calendar__nav-btn\"\n type=\"button\"\n aria-label=${this.nextMonthLabel}\n ?disabled=${this._isNextMonthDisabled()}\n @click=${this._nextMonth}\n >\n ›\n </button>\n </div>\n\n \n \n <div\n class=\"calendar__grid\"\n role=\"grid\"\n aria-label=\"${monthName} ${this._viewYear}\"\n @click=${this._handleGridClick}\n >\n ${this._renderWeekdayHeaders()} ${this._renderDayGrid()}\n </div>\n </dialog>\n\n \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 \n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-date-picker': HelixDatePicker;\n }\n}\n"],"names":["helixDatePickerStyles","css","_nextDatePickerId","createIdCounter","HelixDatePicker","FormMixin","HelixElement","e","target","iso","date","slot","slottedLabel","changedProperties","d","errorEl","_a","msg","selected","_b","monthName","state","_mode","disabled","options","y","m","a","b","month","dayIndex","_","i","leadingBlanks","daysInMonth","cells","remainder","selectedISO","targetDay","today","todayDate","btn","key","currentFocused","dayOfWeek","newDay","daysToSaturday","prevDaysInMonth","day","overflow","firstOfCurrentView","minDate","lastOfCurrentView","maxDate","focusableEls","first","last","shadowActive","headers","name","html","selectedDate","rows","rowStart","rowCells","isSelected","isToday","isDisabled","isFocused","dayNumber","ariaLabel","nothing","classMap","hasError","displayValue","fieldClasses","describedBy","ifDefined","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;AAAA;AAAA;AAAA;AAAA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"}

package/dist/shared/{hx-link-9Ig2DW6L.js → hx-link-C-O6vq0Q.js} RENAMED Viewed

@@ -43,10 +43,7 @@ const y = x`
   .link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-link-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
-      );
+      var(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -241,4 +238,4 @@ r = t([
 export {
   r as H
 };
-//# sourceMappingURL=hx-link-9Ig2DW6L.js.map
+//# sourceMappingURL=hx-link-C-O6vq0Q.js.map

package/dist/shared/hx-link-C-O6vq0Q.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-link-C-O6vq0Q.js","sources":["../../src/components/hx-link/hx-link.styles.ts","../../src/components/hx-link/hx-link.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixLinkStyles = css`\n :host {\n display: inline;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n /* --- Base Link --- */\n\n .link {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n color: var(--hx-link-color, var(--hx-color-primary-600, #0f7078));\n font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));\n font-size: inherit;\n line-height: inherit;\n text-decoration: var(--hx-link-text-decoration, underline);\n text-underline-offset: var(--hx-link-underline-offset, 2px);\n cursor: pointer;\n outline: 0;\n transition:\n color var(--hx-transition-fast, 150ms ease),\n text-decoration-color var(--hx-transition-fast, 150ms ease);\n }\n\n .link:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));\n text-decoration: var(--hx-link-text-decoration-hover, underline);\n }\n\n .link:active {\n color: var(--hx-link-color-active, var(--hx-color-primary-800, #07494a));\n }\n\n .link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n /* --- Variant: subtle --- */\n\n .link--subtle {\n color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #313e4b));\n text-decoration: none;\n }\n\n .link--subtle:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));\n text-decoration: underline;\n }\n\n /* --- Variant: danger --- */\n\n .link--danger {\n color: var(--hx-link-color-danger, var(--hx-color-error-text, #c92a2a));\n }\n\n .link--danger:hover {\n color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #a21312));\n }\n\n /* --- Disabled --- */\n\n .link--disabled {\n color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #8e9c98));\n text-decoration: none;\n cursor: not-allowed;\n }\n\n /* --- External link icon --- */\n\n .link__external-icon {\n display: inline-flex;\n width: 0.75em;\n height: 0.75em;\n flex-shrink: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .link {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .link {\n forced-color-adjust: none;\n color: LinkText;\n }\n\n .link:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .link--disabled {\n color: GrayText;\n }\n }\n\n /* --- Visually hidden (sr-only) --- */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { html, nothing, svg } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixLinkStyles } from './hx-link.styles.js';\nimport { forcedColorsLink } from '../../styles/forced-colors.js';\n\n/**\n * Variant options for the link component.\n */\nexport type LinkVariant = 'default' | 'subtle' | 'danger';\n\n/**\n * A semantic hyperlink component with accessibility-first design.\n * Renders a native `<a>` element for enabled state and a `<span>` for\n * disabled state with full keyboard and screen reader support.\n *\n * @summary Accessible hyperlink with external-link detection, disabled state,\n * and download support.\n *\n * @tag hx-link\n *\n * @slot - Default slot for link label text or content.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the link is clicked and is not disabled.\n *\n * @csspart link - The inner anchor or span element.\n * @csspart external-icon - The external link icon SVG (when target=\"_blank\").\n *\n * @cssprop [--hx-link-color=var(--hx-color-primary-500)] - Default link color.\n * @cssprop [--hx-link-color-hover=var(--hx-color-primary-700)] - Hover color.\n * @cssprop [--hx-link-color-active=var(--hx-color-primary-800)] - Active color.\n * @cssprop [--hx-link-color-disabled=var(--hx-color-neutral-400)] - Disabled color.\n * @cssprop [--hx-link-color-subtle=var(--hx-color-neutral-600)] - Subtle variant color.\n * @cssprop [--hx-link-color-danger=var(--hx-color-error-text)] - Danger variant color.\n * @cssprop [--hx-link-color-danger-hover=var(--hx-color-error-700)] - Danger variant hover color.\n * @cssprop [--hx-link-font-family=var(--hx-font-family-sans)] - Link font family.\n * @cssprop [--hx-link-text-decoration=underline] - Link text decoration.\n * @cssprop [--hx-link-text-decoration-hover=underline] - Hover text decoration.\n * @cssprop [--hx-link-underline-offset=2px] - Text underline offset.\n * @cssprop [--hx-link-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @note The `:visited` pseudo-class does not work inside Shadow DOM due to\n * browser privacy restrictions. This is a known platform limitation.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-primary-800] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-color-error-700] - Color.\n * @cssprop [--hx-color-neutral-400] - Color.\n */\n@customElement('hx-link')\nexport class HelixLink extends HelixElement {\n static override styles = [helixLinkStyles, forcedColorsLink];\n\n /**\n * The URL the link points to.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Where to display the linked URL (_self, _blank, etc.).\n * When set to \"_blank\", automatically adds rel=\"noopener noreferrer\"\n * and shows an external-link indicator.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Visual style variant of the link.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'subtle' | 'danger' = 'default';\n\n /**\n * Whether the link is disabled. Renders a span instead of an anchor.\n * The disabled span is keyboard-focusable (tabindex=\"0\") and announces\n * as a disabled link to screen readers.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Prompts the user to download the linked URL. When set to a string,\n * the value is used as the suggested filename.\n * @attr download\n */\n @property({ type: String })\n download: string | undefined = undefined;\n\n /**\n * Relationship between the current document and the linked URL.\n * Automatically set to \"noopener noreferrer\" when target=\"_blank\".\n * @attr rel\n */\n @property({ type: String })\n rel: string | undefined = undefined;\n\n // --- Event Handling ---\n\n /** @internal Blocks Enter and Space activation on disabled span. */\n private _handleDisabledKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n }\n }\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.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n }\n\n // --- Render Helpers ---\n\n /** @internal */\n private _computeRel(): string | undefined {\n if (this.rel) return this.rel;\n if (this.target === '_blank') return 'noopener noreferrer';\n return undefined;\n }\n\n /** @internal */\n private _renderExternalIcon() {\n if (this.target !== '_blank') return nothing;\n\n return html`\n <svg\n class=\"link__external-icon\"\n part=\"external-icon\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n ${svg`<path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" /><polyline points=\"15 3 21 3 21 9\" /><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />`}\n </svg>\n <span class=\"sr-only\">(opens in new tab)</span>\n `;\n }\n\n // --- Render ---\n\n override render() {\n const classes = {\n link: true,\n [`link--${this.variant}`]: this.variant !== 'default',\n 'link--disabled': this.disabled,\n };\n\n if (this.disabled) {\n return html`\n <span\n part=\"link\"\n class=${classMap(classes)}\n role=\"link\"\n aria-disabled=\"true\"\n tabindex=\"0\"\n @click=${this._handleClick}\n @keydown=${this._handleDisabledKeydown}\n >\n <slot></slot>\n </span>\n `;\n }\n\n return html`\n <a\n part=\"link\"\n class=${classMap(classes)}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${ifDefined(this._computeRel())}\n download=${ifDefined(this.download)}\n @click=${this._handleClick}\n >\n <slot></slot>\n ${this._renderExternalIcon()}\n </a>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-link': HelixLink;\n }\n}\n"],"names":["helixLinkStyles","css","HelixLink","HelixElement","nothing","html","svg","classes","classMap","ifDefined","forcedColorsLink","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-list-CkphGi9T.js → hx-list-MyEhh8c7.js} RENAMED Viewed

@@ -101,8 +101,7 @@ const _ = v`
   }
   :host([interactive]):focus-visible .list-item {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
@@ -132,8 +131,7 @@ const _ = v`
   }
   .list-item__link:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078));
+    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);
   }
@@ -466,4 +464,4 @@ export {
   p as H,
   o as a
 };
-//# sourceMappingURL=hx-list-CkphGi9T.js.map
+//# sourceMappingURL=hx-list-MyEhh8c7.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-list-MyEhh8c7.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n :host {\n display: block;\n }\n\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--hx-list-gap, 0);\n }\n\n /* ─── Variant: bulleted ─── */\n\n .list--bulleted {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: disc;\n }\n\n /* ─── Variant: numbered ─── */\n\n .list--numbered {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: decimal;\n }\n\n /* ─── Variant: interactive ─── */\n\n .list--interactive {\n list-style: none;\n padding: 0;\n }\n\n /* ─── Variant: description ─── */\n\n .list--description {\n padding: 0;\n list-style: none;\n }\n\n /* ─── Dividers ─── */\n\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-list-divider-color, var(--hx-color-neutral-200, #d6dbd5));\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n /* Divider borders are already using a border property, which forced-colors respects.\n Ensure the system color is used for divider borders. */\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom-color: CanvasText;\n }\n }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Base list item ─── */\n\n .list-item {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0d1825));\n font-family: var(--hx-list-item-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: default;\n box-sizing: border-box;\n width: 100%;\n }\n\n /* ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── */\n\n :host([interactive]) .list-item {\n cursor: pointer;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f5f8f3));\n }\n\n :host([interactive]):focus-visible .list-item {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Selected state ─── */\n\n .list-item--selected {\n background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #ebf8f8));\n color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #0f6363));\n }\n\n /* ─── Disabled state ─── */\n\n .list-item--disabled {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n /* ─── Link mode ─── */\n\n .list-item__link {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n .list-item__link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n /* ─── Slots ─── */\n\n .list-item__prefix,\n .list-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .list-item__body {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .list-item__label {\n display: block;\n }\n\n .list-item__description {\n display: block;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #66787b));\n margin-top: var(--hx-space-1, 0.25rem);\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([interactive]) .list-item {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast / forced-colors mode) ─── */\n\n @media (forced-colors: active) {\n /* Selected state: replace background-color with a visible border using system Highlight color */\n :host([interactive]) .list-item--selected {\n background-color: transparent;\n border: 2px solid Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n\n /* Hover state: use an outline instead of background-color */\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: transparent;\n outline: 1px solid Highlight;\n outline-offset: -1px;\n }\n\n /* Disabled state: use system GrayText color */\n :host([interactive][disabled]) .list-item,\n :host([interactive]) .list-item--disabled {\n color: GrayText;\n }\n\n /* Focus ring: ensure visibility in forced-colors mode */\n :host([interactive]):focus-visible .list-item {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n forced-color-adjust: none;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * A rich list item for use inside `hx-list`.\n *\n * @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n *\n * @tag hx-list-item\n *\n * @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-list-item-click -\n * Dispatched when the item is clicked and not disabled.\n *\n * @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n *\n * @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n */\n@customElement('hx-list-item')\nexport class HelixListItem extends HelixElement {\n static override styles = [helixListItemStyles, forcedColorsSurface];\n\n /**\n * Whether the item is disabled. Prevents interaction.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the item is selected (used in interactive mode).\n * @attr selected\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * When set, renders the item as a link (only in non-interactive variants).\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * The value associated with this item (used with hx-select).\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * Set by the parent hx-list to indicate this item is part of an interactive listbox.\n * Controls CSS styling and ARIA role via host attributes.\n * @attr interactive\n */\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n /**\n * Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n * @attr type\n */\n @property({ type: String, reflect: true })\n type: 'default' | 'term' | 'definition' = 'default';\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (\n changedProps.has('interactive') ||\n changedProps.has('selected') ||\n changedProps.has('disabled')\n ) {\n this._syncHostAria();\n }\n }\n\n /**\n * Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n */\n /** @internal */\n private _syncHostAria(): void {\n if (this.interactive) {\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', String(this.selected));\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n if (!this.disabled) {\n this.setAttribute('tabindex', '0');\n } else {\n this.removeAttribute('tabindex');\n }\n } else {\n this.removeAttribute('role');\n this.removeAttribute('aria-selected');\n this.removeAttribute('aria-disabled');\n this.removeAttribute('tabindex');\n }\n }\n\n /** @internal */\n private _dispatchListItemClick(): void {\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string | undefined }>('hx-list-item-click', {\n bubbles: true,\n composed: true,\n detail: { item: this, value: this.value },\n }),\n );\n }\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._dispatchListItemClick();\n }\n\n /** @internal */\n private _renderContent() {\n return html`\n <span part=\"prefix\" class=\"list-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span class=\"list-item__body\">\n <span part=\"label\" class=\"list-item__label\">\n <slot></slot>\n </span>\n <span part=\"description\" class=\"list-item__description\">\n <slot name=\"description\"></slot>\n </span>\n </span>\n <span part=\"suffix\" class=\"list-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n override render() {\n // Description list: render as <dt> (term) or <dd> (definition)\n if (this.type === 'term') {\n return html`\n <dt\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dt>\n `;\n }\n\n if (this.type === 'definition') {\n return html`\n <dd\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dd>\n `;\n }\n\n // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n if (this.interactive) {\n // In interactive mode, links are not rendered as <a> to avoid\n // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n return html`\n <li\n part=\"base\"\n role=\"presentation\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n // Non-interactive with href: render as link\n if (this.href !== undefined && !this.disabled) {\n return html`\n <li\n part=\"base\"\n class=\"list-item\"\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n ${this._renderContent()}\n </a>\n </li>\n `;\n }\n\n // Default non-interactive\n return html`\n <li\n part=\"base\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (!this.disabled) {\n this._dispatchListItemClick();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list-item': HelixListItem;\n }\n}\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n *\n * @summary Container for list items with optional dividers and interactive selection.\n *\n * @tag hx-list\n *\n * @slot - Default slot for `hx-list-item` elements.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-select - Dispatched\n * when an item is clicked in interactive mode.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-200] - Color.\n */\n@customElement('hx-list')\nexport class HelixList extends HelixElement {\n static override styles = [helixListStyles, forcedColorsSurface];\n\n /**\n * Visual variant of the list.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'plain' | 'bulleted' | 'numbered' | 'description' | 'interactive' = 'plain';\n\n /**\n * Whether to show dividers between list items.\n * @attr divided\n */\n @property({ type: Boolean, reflect: true })\n divided = false;\n\n /**\n * Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n * @attr label\n */\n @property({ type: String })\n label: string | undefined = undefined;\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 override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('variant')) {\n this._updateItemStates();\n }\n if (this.variant === 'interactive' && !this.label) {\n devWarn(\n 'hx-list',\n 'The \"label\" attribute is required when variant is \"interactive\". ' +\n 'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n );\n }\n }\n\n /**\n * Sets the `interactive` property on all child hx-list-item elements\n * so they can style and behave correctly without `:host-context()`.\n */\n /** @internal */\n private _updateItemStates(): void {\n const isInteractive = this.variant === 'interactive';\n const items = this.querySelectorAll('hx-list-item');\n for (const item of items) {\n (item as HelixListItem).interactive = isInteractive;\n }\n }\n\n /** @internal */\n private _handleSlotChange(): void {\n this._updateItemStates();\n }\n\n /** @internal */\n private readonly _handleKeydown = (e: KeyboardEvent): void => {\n if (this.variant !== 'interactive') return;\n\n const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n if (items.length === 0) return;\n\n const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n const currentIndex = focused ? items.indexOf(focused) : -1;\n\n let nextIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowUp':\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n break;\n case 'Home':\n e.preventDefault();\n nextIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n nextIndex = items.length - 1;\n break;\n default:\n return;\n }\n\n items[nextIndex]?.focus();\n };\n\n /** @internal */\n private _handleItemClick(e: Event): void {\n if (this.variant !== 'interactive') return;\n\n if (!(e.target instanceof HelixListItem)) return;\n const item = e.target;\n if (item.disabled) return;\n\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string | undefined }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item, value: item.value },\n }),\n );\n }\n\n override render() {\n const isInteractive = this.variant === 'interactive';\n const isNumbered = this.variant === 'numbered';\n const isDescription = this.variant === 'description';\n\n const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n if (isDescription) {\n return html`\n <dl\n part=\"base\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </dl>\n `;\n }\n\n if (isNumbered) {\n return html`\n <div\n part=\"base\"\n role=\"list\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n\n return html`\n <div\n part=\"base\"\n class=\"list list--${this.variant}\"\n role=${isInteractive ? 'listbox' : 'list'}\n aria-label=${isInteractive ? this.label || nothing : ifDefined(this.label)}\n aria-multiselectable=${isInteractive ? 'false' : nothing}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list': HelixList;\n }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","HelixElement","changedProps","e","html","classMap","nothing","ifDefined","forcedColorsSurface","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":";;;;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCAlBC,IAAsBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACoC5B,IAAME,IAAN,cAA4BC,EAAa;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,OAA2B,QAO3B,KAAA,QAA4B,QAQ5B,KAAA,cAAc,IAOd,KAAA,OAA0C;AAAA,EAAA;AAAA,EAEjC,QAAQC,GAA0C;AACzD,UAAM,QAAQA,CAAY,IAExBA,EAAa,IAAI,aAAa,KAC9BA,EAAa,IAAI,UAAU,KAC3BA,EAAa,IAAI,UAAU,MAE3B,KAAK,cAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,gBAAsB;AAC5B,IAAI,KAAK,eACP,KAAK,aAAa,QAAQ,QAAQ,GAClC,KAAK,aAAa,iBAAiB,OAAO,KAAK,QAAQ,CAAC,GACpD,KAAK,WACP,KAAK,aAAa,iBAAiB,MAAM,IAEzC,KAAK,gBAAgB,eAAe,GAEjC,KAAK,WAGR,KAAK,gBAAgB,UAAU,IAF/B,KAAK,aAAa,YAAY,GAAG,MAKnC,KAAK,gBAAgB,MAAM,GAC3B,KAAK,gBAAgB,eAAe,GACpC,KAAK,gBAAgB,eAAe,GACpC,KAAK,gBAAgB,UAAU;AAAA,EAEnC;AAAA;AAAA,EAGQ,yBAA+B;AACrC,SAAK;AAAA,MACH,IAAI,YAAgE,sBAAsB;AAAA,QACxF,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,MAAM,OAAO,KAAK,MAAA;AAAA,MAAM,CACzC;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,aAAaC,GAAqB;AACxC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,SAAK,uBAAA;AAAA,EACP;AAAA;AAAA,EAGQ,iBAAiB;AACvB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBT;AAAA,EAES,SAAS;AAEhB,WAAI,KAAK,SAAS,SACTA;AAAA;AAAA;AAAA,kBAGKC,EAAS,EAAE,aAAa,IAAM,uBAAuB,KAAK,UAAU,CAAC;AAAA,0BAC7D,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA,YAE9C,KAAK,gBAAgB;AAAA;AAAA,UAKzB,KAAK,SAAS,eACTF;AAAA;AAAA;AAAA,kBAGKC,EAAS,EAAE,aAAa,IAAM,uBAAuB,KAAK,UAAU,CAAC;AAAA,0BAC7D,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA,YAE9C,KAAK,gBAAgB;AAAA;AAAA,UAOzB,KAAK,cAGAF;AAAA;AAAA;AAAA;AAAA,kBAIKC,EAAS;AAAA,MACf,aAAa;AAAA,MACb,uBAAuB,KAAK;AAAA,MAC5B,uBAAuB,KAAK;AAAA,IAAA,CAC7B,CAAC;AAAA,mBACO,KAAK,YAAY;AAAA,qBACf,KAAK,cAAc;AAAA;AAAA,YAE5B,KAAK,gBAAgB;AAAA;AAAA,UAMzB,KAAK,SAAS,UAAa,CAAC,KAAK,WAC5BD;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKa,KAAK,WAAW,SAASE,CAAO;AAAA;AAAA,4CAEdC,EAAU,KAAK,IAAI,CAAC,WAAW,KAAK,YAAY;AAAA,cAC9E,KAAK,gBAAgB;AAAA;AAAA;AAAA,UAOxBH;AAAA;AAAA;AAAA,gBAGKC,EAAS;AAAA,MACf,aAAa;AAAA,MACb,uBAAuB,KAAK;AAAA,MAC5B,uBAAuB,KAAK;AAAA,IAAA,CAC7B,CAAC;AAAA;AAAA,wBAEc,KAAK,WAAW,SAASC,CAAO;AAAA,iBACvC,KAAK,YAAY;AAAA,mBACf,KAAK,cAAc;AAAA;AAAA,UAE5B,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAG7B;AAAA;AAAA,EAGQ,eAAeH,GAAwB;AAC7C,KAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACG,KAAK,YACR,KAAK,uBAAA;AAAA,EAGX;AACF;AA1NaH,EACK,SAAS,CAACD,GAAqBS,CAAmB;AAOlEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/BV,EAQX,WAAA,YAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BV,EAeX,WAAA,YAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfV,EAsBX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5BfV,EA6BX,WAAA,SAAA,CAAA;AAQAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApC/BV,EAqCX,WAAA,eAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3C9BV,EA4CX,WAAA,QAAA,CAAA;AA5CWA,IAANS,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBX,CAAA;;;;;;ACPN,IAAMY,IAAN,cAAwBX,EAAa;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,UAA6E,SAO7E,KAAA,UAAU,IAOV,KAAA,QAA4B,QA6C5B,KAAiB,iBAAiB,CAACE,MAA2B;;AAC5D,UAAI,KAAK,YAAY,cAAe;AAEpC,YAAMU,IAAQ,MAAM,KAAK,KAAK,iBAAgC,8BAA8B,CAAC;AAC7F,UAAIA,EAAM,WAAW,EAAG;AAExB,YAAMC,IAAU,KAAK,cAA6B,oBAAoB,GAChEC,IAAeD,IAAUD,EAAM,QAAQC,CAAO,IAAI;AAExD,UAAIE,IAAYD;AAEhB,cAAQZ,EAAE,KAAA;AAAA,QACR,KAAK;AACH,UAAAA,EAAE,eAAA,GACFa,IAAYD,IAAeF,EAAM,SAAS,IAAIE,IAAe,IAAI;AACjE;AAAA,QACF,KAAK;AACH,UAAAZ,EAAE,eAAA,GACFa,IAAYD,IAAe,IAAIA,IAAe,IAAIF,EAAM,SAAS;AACjE;AAAA,QACF,KAAK;AACH,UAAAV,EAAE,eAAA,GACFa,IAAY;AACZ;AAAA,QACF,KAAK;AACH,UAAAb,EAAE,eAAA,GACFa,IAAYH,EAAM,SAAS;AAC3B;AAAA,QACF;AACE;AAAA,MAAA;AAGJ,OAAAI,IAAAJ,EAAMG,CAAS,MAAf,QAAAC,EAAkB;AAAA,IACpB;AAAA,EAAA;AAAA,EA5ES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA,EAES,QAAQf,GAA0C;AACzD,UAAM,QAAQA,CAAY,GACtBA,EAAa,IAAI,SAAS,KAC5B,KAAK,kBAAA,GAEH,KAAK,YAAY,iBAAkB,KAAK;AAAA,EAO9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,oBAA0B;AAChC,UAAMgB,IAAgB,KAAK,YAAY,eACjCL,IAAQ,KAAK,iBAAiB,cAAc;AAClD,eAAWM,KAAQN;AAChB,MAAAM,EAAuB,cAAcD;AAAA,EAE1C;AAAA;AAAA,EAGQ,oBAA0B;AAChC,SAAK,kBAAA;AAAA,EACP;AAAA;AAAA,EAuCQ,iBAAiBf,GAAgB;AAGvC,QAFI,KAAK,YAAY,iBAEjB,EAAEA,EAAE,kBAAkBH,GAAgB;AAC1C,UAAMmB,IAAOhB,EAAE;AACf,IAAIgB,EAAK,YAET,KAAK;AAAA,MACH,IAAI,YAAgE,aAAa;AAAA,QAC/E,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAAA,GAAM,OAAOA,EAAK,MAAA;AAAA,MAAM,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AAChB,UAAMD,IAAgB,KAAK,YAAY,eACjCE,IAAa,KAAK,YAAY,YAC9BC,IAAgB,KAAK,YAAY,eAEjCC,IAAOlB,sBAAyB,KAAK,iBAAiB;AAE5D,WAAIiB,IACKjB;AAAA;AAAA;AAAA,8BAGiB,KAAK,OAAO;AAAA,uBACnBG,EAAU,KAAK,KAAK,CAAC;AAAA,gCACZ,KAAK,gBAAgB;AAAA;AAAA,YAEzCe,CAAI;AAAA;AAAA,UAKRF,IACKhB;AAAA;AAAA;AAAA;AAAA,8BAIiB,KAAK,OAAO;AAAA,uBACnBG,EAAU,KAAK,KAAK,CAAC;AAAA,gCACZ,KAAK,gBAAgB;AAAA;AAAA,YAEzCe,CAAI;AAAA;AAAA,UAKLlB;AAAA;AAAA;AAAA,4BAGiB,KAAK,OAAO;AAAA,eACzBc,IAAgB,YAAY,MAAM;AAAA,qBAC5BA,IAAgB,KAAK,SAASZ,IAAUC,EAAU,KAAK,KAAK,CAAC;AAAA,+BACnDW,IAAgB,UAAUZ,CAAO;AAAA,8BAClC,KAAK,gBAAgB;AAAA;AAAA,UAEzCgB,CAAI;AAAA;AAAA;AAAA,EAGZ;AACF;AAtKaV,EACK,SAAS,CAACf,GAAiBW,CAAmB;AAO9DC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BE,EAQX,WAAA,WAAA,CAAA;AAOAH,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BE,EAeX,WAAA,WAAA,CAAA;AAOAH,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfE,EAsBX,WAAA,SAAA,CAAA;AAtBWA,IAANH,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXC,CAAA;"}

package/dist/shared/{hx-nav-item-DH2tXcj1.js → hx-nav-item-xqRPOCWX.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { css as A, html as c, nothing as h } from "lit";
+import { css as A, html as h, nothing as c } from "lit";
 import { property as p, customElement as T, state as $ } from "lit/decorators.js";
 import { H as I } from "./helix-element-BNEYeiys.js";
 import { c as E } from "./id-counter-DuX8vsui.js";
-const S = A`
+const H = A`
   :host {
     display: block;
     height: 100%;
@@ -31,7 +31,10 @@ const S = A`
     transition: width var(--hx-transition-normal, 300ms) ease;
     overflow: hidden;
     border-inline-end: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
   }
   /* ─── Collapsed State ─── */
@@ -49,7 +52,10 @@ const S = A`
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
     overflow: hidden;
   }
@@ -76,7 +82,10 @@ const S = A`
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-border-strong, #66787b));
+      var(
+        --hx-side-nav-border-color,
+        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))
+      );
     overflow: hidden;
   }
@@ -107,16 +116,28 @@ const S = A`
   }
   .side-nav__toggle:hover {
+    /* Read both deprecated --hx-color-border-on-dark-subtle (3.2.0/3.2.1 API)
+       and canonical --hx-color-surface-on-dark-overlay-subtle so consumer
+       overrides on either name reach paint. Deprecated removal: 4.0.0.
+       Hex fallback for browsers without color-mix(). */
     background-color: var(
       --hx-color-border-on-dark-subtle,
-      rgba(255, 255, 255, 0.1)
-    ); /* fallback for browsers without color-mix() */
+      var(--hx-color-surface-on-dark-overlay-subtle, rgba(255, 255, 255, 0.1))
+    );
     color: var(--hx-side-nav-toggle-hover-color, var(--hx-color-text-inverse, #ffffff));
   }
   @supports (color: color-mix(in srgb, red 50%, blue)) {
+    /* Fold color-mix() into the same deprecated-first chain so consumer
+       overrides on either token reach paint on the modern path too. */
     .side-nav__toggle:hover {
-      background-color: color-mix(in srgb, currentColor 15%, transparent);
+      background-color: var(
+        --hx-color-border-on-dark-subtle,
+        var(
+          --hx-color-surface-on-dark-overlay-subtle,
+          color-mix(in srgb, currentColor 15%, transparent)
+        )
+      );
     }
   }
@@ -186,10 +207,10 @@ const S = A`
     }
   }
 `;
-var H = Object.defineProperty, B = Object.getOwnPropertyDescriptor, u = (e, o, a, i) => {
+var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, u = (e, o, a, i) => {
   for (var t = i > 1 ? void 0 : i ? B(o, a) : o, l = e.length - 1, n; l >= 0; l--)
     (n = e[l]) && (t = (i ? n(o, a, t) : n(t)) || t);
-  return i && t && H(o, a, t), t;
+  return i && t && S(o, a, t), t;
 };
 let x = class extends I {
   constructor() {
@@ -231,9 +252,9 @@ let x = class extends I {
    */
   /** @internal */
   _handleKeydown(e) {
-    var b, w, y, k, C;
+    var _, y, w, k, C;
     if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
-    const a = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot:not([name])");
+    const a = (_ = this.shadowRoot) == null ? void 0 : _.querySelector("slot:not([name])");
     if (!a) return;
     const i = a.assignedElements({ flatten: !0 }).filter(
       (r) => r.tagName.toLowerCase() === "hx-nav-item" && !r.hasAttribute("disabled")
@@ -242,7 +263,7 @@ let x = class extends I {
     const t = [];
     for (const r of i)
       if (t.push(r), r.hasAttribute("expanded")) {
-        const s = (w = r.shadowRoot) == null ? void 0 : w.querySelector('slot[name="children"]');
+        const s = (y = r.shadowRoot) == null ? void 0 : y.querySelector('slot[name="children"]');
         if (s) {
           const g = s.assignedElements({ flatten: !0 }).filter(
             (m) => m.tagName.toLowerCase() === "hx-nav-item" && !m.hasAttribute("disabled")
@@ -255,7 +276,7 @@ let x = class extends I {
     let n = -1;
     for (let r = 0; r < t.length; r++) {
       const s = t[r];
-      if (s && (s === l || s.contains(l) || ((y = s.shadowRoot) == null ? void 0 : y.contains(l)) === !0)) {
+      if (s && (s === l || s.contains(l) || ((w = s.shadowRoot) == null ? void 0 : w.contains(l)) === !0)) {
         n = r;
         break;
       }
@@ -290,8 +311,8 @@ let x = class extends I {
     e.preventDefault();
     let f;
     e.key === "ArrowDown" ? f = n < t.length - 1 ? n + 1 : 0 : e.key === "ArrowUp" ? f = n > 0 ? n - 1 : t.length - 1 : e.key === "Home" ? f = 0 : f = t.length - 1;
-    const _ = t[f];
-    _ && _.focus();
+    const b = t[f];
+    b && b.focus();
   }
   // ─── Event Handling ───
   /** @internal */
@@ -313,14 +334,14 @@ let x = class extends I {
   // ─── Render ───
   /** @internal */
   _renderToggleIcon() {
-    return c`<svg viewBox="0 0 20 20" aria-hidden="true">
+    return h`<svg viewBox="0 0 20 20" aria-hidden="true">
       <path
         d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
       />
     </svg>`;
   }
   render() {
-    return c`
+    return h`
       <nav part="nav" class="side-nav" aria-label=${this.label}>
         <div part="header" class="side-nav__header">
           <slot name="header"></slot>
@@ -346,7 +367,7 @@ let x = class extends I {
     `;
   }
 };
-x.styles = [S];
+x.styles = [H];
 u([
   p({ type: Boolean, reflect: !0 })
 ], x.prototype, "collapsed", 2);
@@ -356,7 +377,7 @@ u([
 x = u([
   T("hx-side-nav")
 ], x);
-const N = A`
+const D = A`
   :host {
     display: block;
     /* The host background must be a concrete color so that axe-core can
@@ -658,10 +679,10 @@ const N = A`
     }
   }
 `;
-var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, v = (e, o, a, i) => {
+var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, v = (e, o, a, i) => {
   for (var t = i > 1 ? void 0 : i ? j(o, a) : o, l = e.length - 1, n; l >= 0; l--)
     (n = e[l]) && (t = (i ? n(o, a, t) : n(t)) || t);
-  return i && t && D(o, a, t), t;
+  return i && t && N(o, a, t), t;
 };
 const L = E("hx-nav-item");
 let d = class extends I {
@@ -707,7 +728,7 @@ let d = class extends I {
   }
   /** @internal */
   _renderExpandArrow() {
-    return c`<span class="nav-item__arrow" aria-hidden="true">
+    return h`<span class="nav-item__arrow" aria-hidden="true">
       <svg viewBox="0 0 20 20">
         <path
           d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
@@ -717,7 +738,7 @@ let d = class extends I {
   }
   // ─── Render ───
   render() {
-    const e = this._getDirectText(), o = c`
+    const e = this._getDirectText(), o = h`
       <span part="icon" class="nav-item__icon">
         <slot name="icon"></slot>
       </span>
@@ -727,30 +748,30 @@ let d = class extends I {
       <span part="badge" class="nav-item__badge">
         <slot name="badge"></slot>
       </span>
-      ${this._hasChildren ? this._renderExpandArrow() : h}
-      ${this._isCollapsed ? c`<span id=${this._tooltipId} class="nav-item__tooltip" role="tooltip">${e}</span>` : h}
-    `, a = this.href && !this._hasChildren ? c`<a
+      ${this._hasChildren ? this._renderExpandArrow() : c}
+      ${this._isCollapsed ? h`<span id=${this._tooltipId} class="nav-item__tooltip" role="tooltip">${e}</span>` : c}
+    `, a = this.href && !this._hasChildren ? h`<a
             part="link"
             class="nav-item__link"
             href=${this.href}
-            aria-current=${this.active ? "page" : h}
-            aria-disabled=${this.disabled ? "true" : h}
-            aria-describedby=${this._isCollapsed ? this._tooltipId : h}
+            aria-current=${this.active ? "page" : c}
+            aria-disabled=${this.disabled ? "true" : c}
+            aria-describedby=${this._isCollapsed ? this._tooltipId : c}
             tabindex=${this.disabled ? "-1" : "0"}
           >
             ${o}
-          </a>` : c`<button
+          </a>` : h`<button
             part="link"
             class="nav-item__link"
-            aria-disabled=${this.disabled ? "true" : h}
-            aria-expanded=${this._hasChildren ? String(this.expanded) : h}
-            aria-describedby=${this._isCollapsed ? this._tooltipId : h}
+            aria-disabled=${this.disabled ? "true" : c}
+            aria-expanded=${this._hasChildren ? String(this.expanded) : c}
+            aria-describedby=${this._isCollapsed ? this._tooltipId : c}
             tabindex=${this.disabled ? "-1" : "0"}
             @click=${this._handleToggle}
           >
             ${o}
           </button>`;
-    return c`
+    return h`
       <div class="nav-item">
         ${a}
         <div part="children" class="nav-item__children" role="group">
@@ -762,7 +783,7 @@ let d = class extends I {
     `;
   }
 };
-d.styles = [N];
+d.styles = [D];
 v([
   p({ type: String })
 ], d.prototype, "href", 2);
@@ -788,4 +809,4 @@ export {
   d as H,
   x as a
 };
-//# sourceMappingURL=hx-nav-item-DH2tXcj1.js.map
+//# sourceMappingURL=hx-nav-item-xqRPOCWX.js.map