@helixui/library 1.0.1 → 1.1.2

package/dist/shared/hx-time-picker-DmLu7WUC.js.map

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

package/dist/shared/{hx-toggle-button-D4F1soEM.js → hx-toggle-button-D1jpDvSA.js}

@@ -1,8 +1,8 @@
-import { css as u, LitElement as g, html as b, nothing as d } from "lit";
-import { property as a, customElement as p } from "lit/decorators.js";
-import { classMap as c } from "lit/directives/class-map.js";
+import { css as b, LitElement as g, html as u, nothing as d } from "lit";
+import { query as p, property as s, customElement as c } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
 import { tokenStyles as x } from "@helixui/tokens/lit";
-const f = u`
+const v = b`
   :host {
     display: inline-block;
   }
@@ -207,49 +207,79 @@ const f = u`
     }
   }
 `;
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, o, n, i) => {
-  for (var r = i > 1 ? void 0 : i ? m(o, n) : o, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (r = (i ? h(o, n, r) : h(r)) || r);
-  return i && r && v(o, n, r), r;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, a, l, n) => {
+  for (var r = n > 1 ? void 0 : n ? y(a, l) : a, i = t.length - 1, h; i >= 0; i--)
+    (h = t[i]) && (r = (n ? h(a, l, r) : h(r)) || r);
+  return n && r && m(a, l, r), r;
 };
 let e = class extends g {
   constructor() {
-    super(), this.pressed = !1, this.variant = "secondary", this.size = "md", this.disabled = !1, this.name = void 0, this.value = void 0, this.label = void 0, this._internals = this.attachInternals();
+    super(), this.pressed = !1, this.variant = "secondary", this.size = "md", this.disabled = !1, this.name = void 0, this.value = void 0, this.label = void 0, this.required = !1, this._internals = this.attachInternals();
   }
   // ─── Form API ───
   /** Returns the associated form element, if any. */
   get form() {
     return this._internals.form;
   }
+  /** Returns the ValidityState object. */
+  get validity() {
+    return this._internals.validity;
+  }
+  /** Returns the current validation message. */
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  /** Checks whether the button satisfies its constraints. */
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  /** Reports validity and shows the browser's constraint validation UI. */
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
   // ─── Lifecycle ───
   firstUpdated(t) {
-    var o;
     if (super.firstUpdated(t), !this.label) {
-      const n = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot:not([name])");
-      (n ? n.assignedNodes({ flatten: !0 }).some((r) => {
-        var l;
-        return (l = r.textContent) == null ? void 0 : l.trim();
+      const a = this._defaultSlot;
+      (a ? a.assignedNodes({ flatten: !0 }).some((n) => {
+        var r;
+        return (r = n.textContent) == null ? void 0 : r.trim();
       }) : !1) || console.warn(
         "[hx-toggle-button] No accessible label found. Set the `label` attribute or provide slot text content for WCAG 4.1.2 compliance."
       );
     }
   }
   updated(t) {
-    super.updated(t), (t.has("pressed") || t.has("value")) && this._syncFormValue();
+    super.updated(t), (t.has("pressed") || t.has("value") || t.has("required")) && this._syncFormValue();
   }
   /** Called by the browser when the associated form is reset. */
   formResetCallback() {
     this.pressed = !1;
   }
   /** Called by the browser when restoring form state (e.g. bfcache). */
-  formStateRestoreCallback(t, o) {
+  formStateRestoreCallback(t, a) {
     this.pressed = typeof t == "string" && t === "pressed";
   }
+  /** Called when a parent fieldset is disabled/enabled. */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
   // ─── Private Helpers ───
+  /** @internal */
   _syncFormValue() {
-    this.pressed && this.value !== void 0 ? this._internals.setFormValue(this.value, "pressed") : this._internals.setFormValue(null);
+    this.pressed && this.value !== void 0 ? this._internals.setFormValue(this.value, "pressed") : this._internals.setFormValue(null), this._updateValidity();
+  }
+  /** @internal */
+  _updateValidity() {
+    var t;
+    this.required && !this.pressed ? this._internals.setValidity(
+      { valueMissing: !0 },
+      "Please activate this toggle button.",
+      ((t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="button"]')) ?? void 0
+    ) : this._internals.setValidity({});
   }
   // ─── Event Handling ───
+  /** @internal */
   _handleClick(t) {
     if (this.disabled) {
       t.preventDefault(), t.stopPropagation();
@@ -264,8 +294,9 @@ let e = class extends g {
     );
   }
   // ─── Render Helpers ───
+  /** @internal */
   _renderInner() {
-    return b`
+    return u`
       <span part="prefix" class="button__prefix">
         <slot name="prefix"></slot>
       </span>
@@ -285,10 +316,10 @@ let e = class extends g {
       [`button--${this.size}`]: !0,
       "button--pressed": this.pressed
     };
-    return b`
+    return u`
       <button
         part="button"
-        class=${c(t)}
+        class=${f(t)}
         ?disabled=${this.disabled}
         type="button"
         aria-pressed=${this.pressed ? "true" : "false"}
@@ -300,33 +331,39 @@ let e = class extends g {
     `;
   }
 };
-e.styles = [x, f];
+e.styles = [x, v];
 e.formAssociated = !0;
-s([
-  a({ type: Boolean, reflect: !0 })
+o([
+  p("slot:not([name])")
+], e.prototype, "_defaultSlot", 2);
+o([
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "pressed", 2);
-s([
-  a({ type: String, reflect: !0 })
+o([
+  s({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-s([
-  a({ type: String, reflect: !0, attribute: "hx-size" })
+o([
+  s({ type: String, reflect: !0, attribute: "hx-size" })
 ], e.prototype, "size", 2);
-s([
-  a({ type: Boolean, reflect: !0 })
+o([
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
-s([
-  a({ type: String })
+o([
+  s({ type: String })
 ], e.prototype, "name", 2);
-s([
-  a({ type: String })
+o([
+  s({ type: String })
 ], e.prototype, "value", 2);
-s([
-  a({ type: String })
+o([
+  s({ type: String })
 ], e.prototype, "label", 2);
-e = s([
-  p("hx-toggle-button")
+o([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+e = o([
+  c("hx-toggle-button")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-toggle-button-D4F1soEM.js.map
+//# sourceMappingURL=hx-toggle-button-D1jpDvSA.js.map

package/dist/shared/hx-toggle-button-D1jpDvSA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-toggle-button-D1jpDvSA.js","sources":["../../src/components/hx-toggle-button/hx-toggle-button.styles.ts","../../src/components/hx-toggle-button/hx-toggle-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToggleButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Base Button ─── */\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);\n    border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));\n    line-height: var(--hx-line-height-tight, 1.25);\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    text-decoration: none;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .button:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .button--sm {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    font-size: var(--hx-font-size-md, 1rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--secondary {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .button--secondary:hover {\n    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);\n  }\n\n  .button--tertiary {\n    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--tertiary:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n  }\n\n  .button--ghost {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n  }\n\n  .button--outline {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .button--outline:hover {\n    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);\n  }\n\n  /* ─── Pressed State ─── */\n\n  /*\n   * Primary: already uses solid primary bg; pressed deepens to primary-700\n   * to give clear visual feedback without introducing a new color.\n   */\n  .button--primary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1d4ed8));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /*\n   * Secondary: unpressed is outlined/transparent; pressed fills with primary bg\n   * so the state change is immediately legible.\n   */\n  .button--secondary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */\n  .button--tertiary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #1d4ed8)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);\n    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);\n  }\n\n  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */\n  .button--ghost.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #1d4ed8)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */\n  .button--outline.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-900, #0f172a)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);\n    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Prefix / Suffix / Label ─── */\n\n  .button__prefix,\n  .button__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .button__label {\n    flex: 1 1 auto;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixToggleButtonStyles } from './hx-toggle-button.styles.js';\n\n/**\n * A two-state toggle button that communicates a pressed/unpressed status to\n * assistive technology via `aria-pressed`. Supports multiple visual variants\n * and sizes, prefix/suffix slots, full ElementInternals form association, and\n * a distinct pressed visual state for every variant.\n *\n * @summary Two-state toggle button with pressed/unpressed ARIA semantics.\n *\n * @tag hx-toggle-button\n *\n * @slot - Default slot for the button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{pressed: boolean}>} hx-toggle - Dispatched when the\n *   toggle state changes. Not dispatched when the button is disabled.\n *\n * @csspart button - The native `<button>` element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n *\n * @cssprop [--hx-toggle-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-toggle-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-toggle-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-toggle-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-toggle-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-toggle-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-toggle-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-toggle-button-pressed-bg=var(--hx-color-primary-500)] - Background when pressed (variant-specific fallback applies).\n * @cssprop [--hx-toggle-button-pressed-color=var(--hx-color-neutral-0)] - Text color when pressed (variant-specific fallback applies).\n */\n@customElement('hx-toggle-button')\nexport class HelixToggleButton extends LitElement {\n  static override styles = [tokenStyles, helixToggleButtonStyles];\n\n  // ─── Form Association ───\n\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Public Properties ───\n\n  /**\n   * Whether the toggle button is in the pressed state.\n   * Reflected as an attribute so CSS selectors like `:host([pressed])` work.\n   * @attr pressed\n   */\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' = 'secondary';\n\n  /**\n   * Size of the button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the button is disabled. Prevents all interaction and form actions.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Form field name submitted via ElementInternals when the button is pressed.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Form field value submitted via ElementInternals when the button is pressed.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * Accessible label forwarded to the inner `<button>` as `aria-label`.\n   * Required for icon-only toggle buttons where no visible text is present.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  /**\n   * When true, the button must be in the pressed state for the form to be submitted.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  // ─── Form API ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Returns the current validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Checks whether the button satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n\n    if (!this.label) {\n      const slot = this._defaultSlot;\n      const hasSlotText = slot\n        ? slot.assignedNodes({ flatten: true }).some((n) => n.textContent?.trim())\n        : false;\n      if (!hasSlotText) {\n        console.warn(\n          '[hx-toggle-button] No accessible label found. Set the `label` attribute or provide slot text content for WCAG 4.1.2 compliance.',\n        );\n      }\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('pressed') ||\n      changedProperties.has('value') ||\n      changedProperties.has('required')\n    ) {\n      this._syncFormValue();\n    }\n  }\n\n  /** Called by the browser when the associated form is reset. */\n  formResetCallback(): void {\n    this.pressed = false;\n  }\n\n  /** Called by the browser when restoring form state (e.g. bfcache). */\n  formStateRestoreCallback(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    this.pressed = typeof state === 'string' && state === 'pressed';\n  }\n\n  /** Called when a parent fieldset is disabled/enabled. */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this.pressed && this.value !== undefined) {\n      // Pass explicit state 'pressed' so formStateRestoreCallback can reliably detect it.\n      this._internals.setFormValue(this.value, 'pressed');\n    } else {\n      this._internals.setFormValue(null);\n    }\n    this._updateValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.pressed) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        'Please activate this toggle button.',\n        this.shadowRoot?.querySelector<HTMLElement>('[part=\"button\"]') ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.pressed = !this.pressed;\n    this._syncFormValue();\n\n    /**\n     * Dispatched when the toggle state changes.\n     * @event hx-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ pressed: boolean }>('hx-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { pressed: this.pressed },\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderInner() {\n    return html`\n      <span part=\"prefix\" class=\"button__prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span part=\"label\" class=\"button__label\">\n        <slot></slot>\n      </span>\n      <span part=\"suffix\" class=\"button__suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n      'button--pressed': this.pressed,\n    };\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(classes)}\n        ?disabled=${this.disabled}\n        type=\"button\"\n        aria-pressed=${this.pressed ? 'true' : 'false'}\n        aria-label=${this.label ?? nothing}\n        @click=${this._handleClick}\n      >\n        ${this._renderInner()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toggle-button': HelixToggleButton;\n  }\n}\n"],"names":["helixToggleButtonStyles","css","HelixToggleButton","LitElement","changedProperties","slot","_a","state","_mode","disabled","e","html","classes","classMap","nothing","tokenStyles","__decorateClass","query","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-tooltip-Bk1iQRHs.js → hx-tooltip-kh7QFPKu.js}

@@ -1,8 +1,8 @@
-import { css as v, LitElement as g, html as x } from "lit";
-import { property as p, state as f, customElement as w } from "lit/decorators.js";
-import { tokenStyles as y } from "@helixui/tokens/lit";
-import { computePosition as b, offset as T, flip as D, shift as $, arrow as E } from "@floating-ui/dom";
-const S = v`
+import { css as u, LitElement as _, html as g } from "lit";
+import { property as d, state as v, query as p, customElement as f } from "lit/decorators.js";
+import { tokenStyles as x } from "@helixui/tokens/lit";
+import { computePosition as y, offset as b, flip as w, shift as T, arrow as D } from "@floating-ui/dom";
+const E = u`
   :host {
     display: inline-block;
   }
@@ -54,14 +54,14 @@ const S = v`
     }
   }
 `;
-var C = Object.defineProperty, k = Object.getOwnPropertyDescriptor, h = (t, e, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? k(e, i) : e, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (o = (s ? a(e, i, o) : a(o)) || o);
-  return s && o && C(e, i, o), o;
+var $ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, e, i, l) => {
+  for (var s = l > 1 ? void 0 : l ? S(e, i) : e, n = t.length - 1, h; n >= 0; n--)
+    (h = t[n]) && (s = (l ? h(e, i, s) : h(s)) || s);
+  return l && s && $(e, i, s), s;
 };
-let P = 0, n = class extends g {
+let C = 0, o = class extends _ {
   constructor() {
-    super(...arguments), this.placement = "top", this.showDelay = 300, this.hideDelay = 100, this._visible = !1, this._showTimer = null, this._hideTimer = null, this._tooltipId = `hx-tooltip-${++P}`, this._lightDomDescription = null, this._handleKeydown = (t) => {
+    super(...arguments), this.placement = "top", this.showDelay = 300, this.hideDelay = 100, this._visible = !1, this._showTimer = null, this._hideTimer = null, this._tooltipId = `hx-tooltip-${++C}`, this._lightDomDescription = null, this._handleKeydown = (t) => {
       t instanceof KeyboardEvent && t.key === "Escape" && this._visible && (this._clearTimers(), this._hide());
     };
   }
@@ -77,56 +77,59 @@ let P = 0, n = class extends g {
     this._setupTriggerAria();
   }
   // ─── ARIA setup ───
+  /** @internal */
   _setupTriggerAria() {
-    var o, r;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot:not([name])");
+    const t = this._defaultSlot;
     if (!t) return;
-    const e = t.assignedElements()[0], i = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
-      'slot[name="content"]'
-    ), s = (i == null ? void 0 : i.assignedElements().map((a) => a.textContent).join(" ").trim()) ?? "";
-    this._lightDomDescription || (this._lightDomDescription = document.createElement("span"), this._lightDomDescription.id = this._tooltipId, this._lightDomDescription.style.cssText = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0", this.appendChild(this._lightDomDescription)), this._lightDomDescription.textContent = s, e && e.setAttribute("aria-describedby", this._tooltipId);
+    const e = t.assignedElements()[0], i = this._contentSlot, l = (i == null ? void 0 : i.assignedElements().map((s) => s.textContent).join(" ").trim()) ?? "";
+    !this._lightDomDescription && typeof document < "u" && (this._lightDomDescription = document.createElement("span"), this._lightDomDescription.id = this._tooltipId, this._lightDomDescription.style.cssText = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0", this.appendChild(this._lightDomDescription)), this._lightDomDescription && (this._lightDomDescription.textContent = l), e && e.setAttribute("aria-describedby", this._tooltipId);
   }
   // ─── Show/Hide ───
+  /** @internal */
   _scheduleShow() {
     this._clearTimers(), this._showTimer = setTimeout(() => {
       this._show();
     }, this.showDelay);
   }
+  /** @internal */
   _scheduleHide() {
     this._clearTimers(), this._hideTimer = setTimeout(() => {
       this._hide();
     }, this.hideDelay);
   }
+  /** @internal */
   async _show() {
     this._visible = !0, await this.updateComplete, await this._updatePosition();
   }
+  /** @internal */
   _hide() {
     this._visible = !1;
   }
+  /** @internal */
   _clearTimers() {
     this._showTimer !== null && (clearTimeout(this._showTimer), this._showTimer = null), this._hideTimer !== null && (clearTimeout(this._hideTimer), this._hideTimer = null);
   }
   // ─── Positioning ───
+  /** @internal */
   async _updatePosition() {
-    var d, c, m;
-    const t = (d = this.shadowRoot) == null ? void 0 : d.querySelector(".trigger-wrapper"), e = (c = this.shadowRoot) == null ? void 0 : c.querySelector('[part="tooltip"]'), i = (m = this.shadowRoot) == null ? void 0 : m.querySelector('[part="arrow"]');
+    const t = this._triggerWrapper, e = this._tooltipEl, i = this._arrowEl;
     if (!t || !e || !i) return;
-    const { x: s, y: o, placement: r, middlewareData: a } = await b(t, e, {
+    const { x: l, y: s, placement: n, middlewareData: h } = await y(t, e, {
       placement: this.placement,
       strategy: "fixed",
-      middleware: [T(8), D(), $({ padding: 8 }), E({ element: i })]
+      middleware: [b(8), w(), T({ padding: 8 }), D({ element: i })]
     });
     Object.assign(e.style, {
-      left: `${s}px`,
-      top: `${o}px`
+      left: `${l}px`,
+      top: `${s}px`
     });
-    const l = a.arrow, u = r.split("-")[0] ?? "top", _ = { top: "bottom", right: "left", bottom: "top", left: "right" }[u] ?? "bottom";
+    const a = h.arrow, c = n.split("-")[0] ?? "top", m = { top: "bottom", right: "left", bottom: "top", left: "right" }[c] ?? "bottom";
     Object.assign(i.style, {
-      left: (l == null ? void 0 : l.x) != null ? `${l.x}px` : "",
-      top: (l == null ? void 0 : l.y) != null ? `${l.y}px` : "",
+      left: (a == null ? void 0 : a.x) != null ? `${a.x}px` : "",
+      top: (a == null ? void 0 : a.y) != null ? `${a.y}px` : "",
       right: "",
       bottom: "",
-      [_]: `${-(i.offsetWidth / 2)}px`
+      [m]: `${-(i.offsetWidth / 2)}px`
     });
   }
   /**
@@ -137,13 +140,12 @@ let P = 0, n = class extends g {
    * @internal
    */
   _handleTriggerMouseleave() {
-    var i;
-    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])"), e = t == null ? void 0 : t.assignedElements()[0];
-    e && (e === document.activeElement || e.contains(document.activeElement)) || this._scheduleHide();
+    const t = this._defaultSlot, e = t == null ? void 0 : t.assignedElements()[0], i = typeof document < "u" ? document.activeElement : null;
+    e && (e === i || e.contains(i)) || this._scheduleHide();
   }
   // ─── Render ───
   render() {
-    return x`
+    return g`
       <div
         class="trigger-wrapper"
         @mouseenter=${this._scheduleShow}
@@ -168,23 +170,38 @@ let P = 0, n = class extends g {
     `;
   }
 };
-n.styles = [y, S];
-h([
-  p({ type: String, reflect: !0 })
-], n.prototype, "placement", 2);
-h([
-  p({ type: Number, attribute: "show-delay" })
-], n.prototype, "showDelay", 2);
-h([
-  p({ type: Number, attribute: "hide-delay" })
-], n.prototype, "hideDelay", 2);
-h([
-  f()
-], n.prototype, "_visible", 2);
-n = h([
-  w("hx-tooltip")
-], n);
+o.styles = [x, E];
+r([
+  d({ type: String, reflect: !0 })
+], o.prototype, "placement", 2);
+r([
+  d({ type: Number, attribute: "show-delay" })
+], o.prototype, "showDelay", 2);
+r([
+  d({ type: Number, attribute: "hide-delay" })
+], o.prototype, "hideDelay", 2);
+r([
+  v()
+], o.prototype, "_visible", 2);
+r([
+  p("slot:not([name])")
+], o.prototype, "_defaultSlot", 2);
+r([
+  p('slot[name="content"]')
+], o.prototype, "_contentSlot", 2);
+r([
+  p(".trigger-wrapper")
+], o.prototype, "_triggerWrapper", 2);
+r([
+  p('[part="tooltip"]')
+], o.prototype, "_tooltipEl", 2);
+r([
+  p('[part="arrow"]')
+], o.prototype, "_arrowEl", 2);
+o = r([
+  f("hx-tooltip")
+], o);
 export {
-  n as H
+  o as H
 };
-//# sourceMappingURL=hx-tooltip-Bk1iQRHs.js.map
+//# sourceMappingURL=hx-tooltip-kh7QFPKu.js.map

package/dist/shared/hx-tooltip-kh7QFPKu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tooltip-kh7QFPKu.js","sources":["../../src/components/hx-tooltip/hx-tooltip.styles.ts","../../src/components/hx-tooltip/hx-tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTooltipStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='tooltip'] {\n    position: fixed;\n    z-index: var(--hx-tooltip-z-index, 9999);\n    max-width: var(--hx-tooltip-max-width, 280px);\n    padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));\n    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    box-shadow: var(\n      --hx-tooltip-shadow,\n      var(--hx-shadow-sm, 0 2px 8px var(--hx-overlay-black-20, rgba(0, 0, 0, 0.2)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-tooltip-transition-duration, 0.15s) ease,\n      visibility var(--hx-tooltip-transition-duration, 0.15s) ease;\n    overflow-wrap: break-word;\n  }\n\n  [part='tooltip'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-tooltip-arrow-size, 8px);\n    height: var(--hx-tooltip-arrow-size, 8px);\n    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='tooltip'] {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { helixTooltipStyles } from './hx-tooltip.styles.js';\n\nlet _tooltipCounter = 0;\n\n/**\n * A tooltip that displays contextual help text on hover or focus.\n *\n * @summary Contextual help text and abbreviations with smart positioning.\n *\n * @tag hx-tooltip\n *\n * @slot - Default slot for the trigger element.\n * @slot content - Tooltip content to display.\n *\n * @csspart tooltip - The tooltip container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-tooltip-bg=var(--hx-color-neutral-900)] - Tooltip background color.\n * @cssprop [--hx-tooltip-color=var(--hx-color-neutral-50)] - Tooltip text color.\n * @cssprop [--hx-tooltip-font-size=var(--hx-font-size-xs)] - Tooltip font size.\n * @cssprop [--hx-tooltip-max-width=280px] - Maximum tooltip width.\n * @cssprop [--hx-tooltip-padding] - Tooltip padding.\n * @cssprop [--hx-tooltip-border-radius=var(--hx-border-radius-sm)] - Tooltip border radius.\n * @cssprop [--hx-tooltip-shadow] - Tooltip box shadow.\n * @cssprop [--hx-tooltip-z-index=9999] - Tooltip z-index.\n * @cssprop [--hx-tooltip-transition-duration=0.15s] - Show/hide transition duration.\n * @cssprop [--hx-tooltip-arrow-size=8px] - Size of the arrow indicator.\n *\n * @example\n * ```html\n * <hx-tooltip>\n *   <button>Hover me</button>\n *   <span slot=\"content\">Helpful context here</span>\n * </hx-tooltip>\n * ```\n *\n * @example Drupal/Twig usage\n * ```twig\n * <hx-tooltip>\n *   <button type=\"button\">{{ trigger_label }}</button>\n *   <span slot=\"content\">{{ tooltip_text }}</span>\n * </hx-tooltip>\n * ```\n */\n\n@customElement('hx-tooltip')\nexport class HelixTooltip extends LitElement {\n  static override styles = [tokenStyles, helixTooltipStyles];\n\n  /**\n   * Preferred placement of the tooltip relative to the trigger.\n   * Supports all Floating UI placement values including alignment variants\n   * (e.g. 'top-start', 'bottom-end') and 'auto'.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement: Placement = 'top';\n\n  /**\n   * Delay in milliseconds before the tooltip is shown.\n   * @attr show-delay\n   */\n  @property({ type: Number, attribute: 'show-delay' })\n  showDelay = 300;\n\n  /**\n   * Delay in milliseconds before the tooltip is hidden.\n   * @attr hide-delay\n   */\n  @property({ type: Number, attribute: 'hide-delay' })\n  hideDelay = 100;\n\n  /** @internal */\n  @state() private _visible = false;\n\n  /** @internal */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n  /** @internal */\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** @internal */\n  private readonly _tooltipId = `hx-tooltip-${++_tooltipCounter}`;\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('slot[name=\"content\"]') private _contentSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('.trigger-wrapper') private _triggerWrapper!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"tooltip\"]') private _tooltipEl!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"arrow\"]') private _arrowEl!: HTMLElement | null;\n\n  /**\n   * Visually-hidden description element in light DOM.\n   * Necessary because aria-describedby cannot cross Shadow DOM boundaries —\n   * ARIA ID references are scoped to the element's root node. This element\n   * lives in the document scope so the trigger's aria-describedby resolves correctly.\n   * @internal\n   */\n  private _lightDomDescription: HTMLSpanElement | null = null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n    this._clearTimers();\n    this._lightDomDescription?.remove();\n    this._lightDomDescription = null;\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\n  // ─── ARIA setup ───\n\n  /** @internal */\n  private _setupTriggerAria(): void {\n    const slot = this._defaultSlot;\n    if (!slot) return;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    // Sync content from the content slot into a visually-hidden light DOM element.\n    // aria-describedby cannot cross Shadow DOM boundaries, so the referenced element\n    // must live in the document scope (light DOM), not inside the shadow root.\n    const contentSlot = this._contentSlot;\n    const contentText =\n      contentSlot\n        ?.assignedElements()\n        .map((el) => el.textContent)\n        .join(' ')\n        .trim() ?? '';\n\n    // Guard for SSR — document is unavailable server-side\n    if (!this._lightDomDescription && typeof document !== 'undefined') {\n      this._lightDomDescription = document.createElement('span');\n      this._lightDomDescription.id = this._tooltipId;\n      // Visually hidden but accessible to screen readers via aria-describedby\n      this._lightDomDescription.style.cssText =\n        'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n      this.appendChild(this._lightDomDescription);\n    }\n    if (this._lightDomDescription) {\n      this._lightDomDescription.textContent = contentText;\n    }\n\n    if (trigger) {\n      trigger.setAttribute('aria-describedby', this._tooltipId);\n    }\n  }\n\n  // ─── Show/Hide ───\n\n  /** @internal */\n  private _scheduleShow(): void {\n    this._clearTimers();\n    this._showTimer = setTimeout(() => {\n      void this._show();\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  private _scheduleHide(): void {\n    this._clearTimers();\n    this._hideTimer = setTimeout(() => {\n      this._hide();\n    }, this.hideDelay);\n  }\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    this._visible = true;\n    await this.updateComplete;\n    await this._updatePosition();\n  }\n\n  /** @internal */\n  private _hide(): void {\n    this._visible = false;\n  }\n\n  /** @internal */\n  private _clearTimers(): void {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const reference = this._triggerWrapper;\n    const tooltipEl = this._tooltipEl;\n    const arrowEl = this._arrowEl;\n\n    if (!reference || !tooltipEl || !arrowEl) return;\n\n    const { x, y, placement, middlewareData } = await computePosition(reference, tooltipEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(8), flip(), shift({ padding: 8 }), arrow({ element: arrowEl })],\n    });\n\n    Object.assign(tooltipEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const arrowData = middlewareData.arrow;\n    const basePlacement = placement.split('-')[0] ?? 'top';\n    const staticSide =\n      ({ top: 'bottom', right: 'left', bottom: 'top', left: 'right' } as Record<string, string>)[\n        basePlacement\n      ] ?? 'bottom';\n\n    // Offset is derived from the arrow element's actual size so that custom\n    // --hx-tooltip-arrow-size values position the arrow correctly.\n    Object.assign(arrowEl.style, {\n      left: arrowData?.x != null ? `${arrowData.x}px` : '',\n      top: arrowData?.y != null ? `${arrowData.y}px` : '',\n      right: '',\n      bottom: '',\n      [staticSide]: `${-(arrowEl.offsetWidth / 2)}px`,\n    });\n  }\n\n  // ─── Events ───\n\n  /** @internal */\n  private _handleKeydown = (e: Event): void => {\n    if (!(e instanceof KeyboardEvent)) return;\n    if (e.key === 'Escape' && this._visible) {\n      this._clearTimers();\n      this._hide();\n    }\n  };\n\n  /**\n   * Handle mouseleave on the trigger wrapper.\n   * Does not schedule hide if keyboard focus is still on the trigger element,\n   * preventing mixed keyboard+mouse interactions from dismissing the tooltip\n   * while the user is still navigating by keyboard.\n   * @internal\n   */\n  private _handleTriggerMouseleave(): void {\n    const slot = this._defaultSlot;\n    const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n    // Guard for SSR — document is unavailable server-side\n    const active = typeof document !== 'undefined' ? document.activeElement : null;\n    if (trigger && (trigger === active || trigger.contains(active))) {\n      return;\n    }\n    this._scheduleHide();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @mouseenter=${this._scheduleShow}\n        @mouseleave=${this._handleTriggerMouseleave}\n        @focusin=${this._scheduleShow}\n        @focusout=${this._scheduleHide}\n      >\n        <slot @slotchange=${this._setupTriggerAria}></slot>\n      </div>\n      <div\n        part=\"tooltip\"\n        id=${this._tooltipId}\n        role=\"tooltip\"\n        aria-hidden=${String(!this._visible)}\n        class=${this._visible ? 'visible' : ''}\n        @mouseenter=${this._clearTimers}\n        @mouseleave=${this._scheduleHide}\n      >\n        <slot name=\"content\" @slotchange=${this._setupTriggerAria}></slot>\n        <div part=\"arrow\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tooltip': HelixTooltip;\n  }\n}\n"],"names":["helixTooltipStyles","css","_tooltipCounter","HelixTooltip","LitElement","e","_a","slot","trigger","contentSlot","contentText","el","reference","tooltipEl","arrowEl","x","y","placement","middlewareData","computePosition","offset","flip","shift","arrow","arrowData","basePlacement","staticSide","active","html","tokenStyles","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-top-nav-D2bQpns3.js → hx-top-nav-DYlnzDaU.js}

@@ -232,6 +232,7 @@ let l = class extends v {
     super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
   }
   // ─── Event Handling ───
+  /** @internal */
   _handleMobileToggle() {
     this._mobileOpen = !this._mobileOpen, this.dispatchEvent(
       new CustomEvent("hx-mobile-toggle", {
@@ -259,6 +260,7 @@ let l = class extends v {
     });
   }
   // ─── Render Helpers ───
+  /** @internal */
   _renderHamburgerIcon() {
     return d`
       <svg
@@ -339,4 +341,4 @@ l = s([
 export {
   l as H
 };
-//# sourceMappingURL=hx-top-nav-D2bQpns3.js.map
+//# sourceMappingURL=hx-top-nav-DYlnzDaU.js.map