@helixui/library 2.1.2-next.53 → 2.1.2-next.57

package/dist/shared/hx-popover-ZGRFgBbx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-popover-ZGRFgBbx.js","sources":["../../src/components/hx-popover/hx-popover.styles.ts","../../src/components/hx-popover/hx-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopoverStyles = css`\n  :host {\n    /* P2-05: display:contents lets the trigger-wrapper control layout inline;\n       position:relative was vestigial — body uses position:fixed via Floating UI */\n    display: contents;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='body'] {\n    position: fixed;\n    z-index: var(--hx-popover-z-index, 9999);\n    max-width: var(--hx-popover-max-width, 320px);\n    padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));\n    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-popover-shadow,\n      var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-popover-transition-duration, 0.2s) ease,\n      visibility var(--hx-popover-transition-duration, 0.2s) ease;\n    word-wrap: break-word;\n  }\n\n  [part='body'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='body']:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-popover-arrow-size, 10px);\n    height: var(--hx-popover-arrow-size, 10px);\n    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='body'] {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    [part='body'] {\n      border-color: CanvasText;\n    }\n\n    [part='arrow'] {\n      border-color: CanvasText;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createIdCounter } from '../../base/index.js';\nimport { helixPopoverStyles } from './hx-popover.styles.js';\n\nconst _nextPopoverId = createIdCounter('hx-popover');\n\n/**\n * A popover that displays rich floating content attached to a trigger element.\n *\n * @summary Rich floating overlay attached to a trigger element.\n *\n * @tag hx-popover\n *\n * @slot anchor - The trigger element that opens the popover.\n * @slot - Default slot for popover body content.\n *\n * @csspart body - The popover body container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-popover-bg=var(--hx-color-neutral-0)] - Popover background color.\n * @cssprop [--hx-popover-color=var(--hx-color-neutral-900)] - Popover text color.\n * @cssprop [--hx-popover-font-size=var(--hx-font-size-sm)] - Popover font size.\n * @cssprop [--hx-popover-max-width=320px] - Maximum popover width.\n * @cssprop [--hx-popover-padding] - Popover padding.\n * @cssprop [--hx-popover-border-color=var(--hx-color-neutral-200)] - Popover border color.\n * @cssprop [--hx-popover-border-radius=var(--hx-border-radius-md)] - Popover border radius.\n * @cssprop [--hx-popover-shadow] - Popover box shadow.\n * @cssprop [--hx-popover-z-index=9999] - Popover z-index.\n * @cssprop [--hx-popover-transition-duration=0.2s] - Show/hide transition duration.\n * @cssprop [--hx-popover-arrow-size=10px] - Size of the arrow indicator.\n * @cssprop [--hx-popover-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color when the popover body receives focus.\n *\n * @fires {CustomEvent} hx-show - Emitted when the popover begins to show.\n * @fires {CustomEvent} hx-after-show - Emitted after the popover is fully visible.\n * @fires {CustomEvent} hx-hide - Emitted when the popover begins to hide.\n * @fires {CustomEvent} hx-after-hide - Emitted after the popover is fully hidden.\n *\n * @example\n * ```html\n * <hx-popover placement=\"bottom\" trigger=\"click\">\n *   <button slot=\"anchor\">Open Popover</button>\n *   <p>Rich popover content here.</p>\n * </hx-popover>\n * ```\n */\n\n@customElement('hx-popover')\nexport class HelixPopover extends LitElement {\n  static override styles = [helixPopoverStyles];\n\n  /**\n   * Whether the popover is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Preferred placement of the popover relative to the anchor.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom';\n\n  /**\n   * How the popover is triggered.\n   * @attr trigger\n   */\n  @property({ type: String, reflect: true })\n  trigger: 'click' | 'hover' | 'focus' | 'manual' = 'click';\n\n  /**\n   * Distance in pixels between the popover and the anchor.\n   * @attr distance\n   */\n  @property({ type: Number, reflect: true })\n  distance = 8;\n\n  /**\n   * Alignment offset in pixels along the anchor.\n   * @attr skidding\n   */\n  @property({ type: Number, reflect: true })\n  skidding = 0;\n\n  /**\n   * Whether to show an arrow pointing to the anchor.\n   * @attr arrow\n   */\n  @property({ type: Boolean, reflect: true })\n  arrow = false;\n\n  /**\n   * Accessible label for the popover body (sets aria-label on the dialog).\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Popover';\n\n  /**\n   * Tracks whether the popover body is currently visible.\n   * @internal\n   */\n  @state() private _visible = false;\n\n  /**\n   * The element that held focus before the popover opened, used to restore focus on close.\n   * @internal\n   */\n  private _previousFocus: HTMLElement | null = null;\n\n  /**\n   * Unique ID assigned to the popover body element.\n   * @internal\n   */\n  private readonly _popoverId = _nextPopoverId();\n\n  /**\n   * Timer ID for the deferred document click listener registration in _show().\n   * Stored so it can be cancelled in disconnectedCallback to prevent leaks.\n   * @internal\n   */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /**\n   * Timer ID for the hover-triggered hide delay.\n   * WCAG 1.4.13: hoverable content must remain visible while the pointer is\n   * over it. A 150 ms delay allows the pointer to move from the anchor into\n   * the popover body without the content dismissing prematurely.\n   * @internal\n   */\n  private _hoverHideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hoverHideTimer !== null) {\n      clearTimeout(this._hoverHideTimer);\n      this._hoverHideTimer = null;\n    }\n    document.removeEventListener('click', this._handleDocumentClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  override firstUpdated(): void {\n    // HIGH-02: set aria-haspopup=\"dialog\" once on the anchor so assistive technology\n    // announces the control's popup type before it is ever opened.\n    this._setAnchorAriaAttributes(false);\n    // Sync initial open state\n    if (this.open) {\n      void this._show();\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        void this._show();\n      } else {\n        void this._hide();\n      }\n    }\n  }\n\n  // ─── ARIA setup ───\n\n  // HIGH-02: set aria-haspopup=\"dialog\" on firstUpdated and keep aria-expanded in sync\n  /** @internal */\n  private _setAnchorAriaAttributes(expanded: boolean): void {\n    const anchorSlot = this.shadowRoot?.querySelector(\n      'slot[name=\"anchor\"]',\n    ) as HTMLSlotElement | null;\n    if (!anchorSlot) return;\n    const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n    if (anchorEl) {\n      anchorEl.setAttribute('aria-expanded', String(expanded));\n      anchorEl.setAttribute('aria-haspopup', 'dialog');\n      // aria-controls is omitted: the body lives in Shadow DOM and axe-core\n      // cannot resolve cross-root IDREF values, which causes a critical violation.\n    }\n  }\n\n  // ─── Focus helpers ───\n\n  /** Return all keyboard-focusable elements inside the popover body's slotted content. */\n  /** @internal */\n  private _getFocusableElements(): HTMLElement[] {\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    if (!bodyEl) return [];\n\n    // Gather focusable elements from the default slot's assigned nodes\n    const defaultSlot = bodyEl.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    if (!defaultSlot) return [];\n\n    const assigned = defaultSlot.assignedElements({ flatten: true });\n    const focusableSelector =\n      'a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), details > summary';\n\n    const result: HTMLElement[] = [];\n    for (const el of assigned) {\n      if (el.matches(focusableSelector)) {\n        result.push(el as HTMLElement);\n      }\n      const nested = el.querySelectorAll<HTMLElement>(focusableSelector);\n      result.push(...nested);\n    }\n    return result;\n  }\n\n  // ─── Show/Hide ───\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    if (this._visible) return;\n    // P0-02: save focus target before moving focus into dialog\n    this._previousFocus = document.activeElement as HTMLElement | null;\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n    this._visible = true;\n    this.open = true;\n    this._setAnchorAriaAttributes(true);\n    // P1-03 / HIGH-01: single keydown listener handles both Escape and focus trap.\n    // Registered synchronously before any await so it is in place before the first\n    // await el.updateComplete in tests.\n    document.addEventListener('keydown', this._handleDocumentKeydown);\n    await this.updateComplete;\n    // hx-after-show fires after Lit has rendered the visible state. Dispatching here\n    // (before _updatePosition) ensures it fires in the same microtask as the test's\n    // await-continuation, so tests can rely on a single await el.updateComplete.\n    this.dispatchEvent(new CustomEvent<void>('hx-after-show', { bubbles: true, composed: true }));\n    // WCAG 2.4.3: only move focus into the popover when it contains interactive\n    // content. For non-interactive (informational) popovers, stealing focus from\n    // the trigger is unexpected and disruptive for keyboard users.\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    if (bodyEl) {\n      const hasInteractive = this._getFocusableElements().length > 0;\n      if (hasInteractive) {\n        bodyEl.focus();\n      }\n    }\n    // P0-01: listen for outside clicks; deferred to avoid catching the opening click\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n    }\n    this._showTimer = setTimeout(() => {\n      this._showTimer = null;\n      document.addEventListener('click', this._handleDocumentClick);\n    }, 0);\n    await this._updatePosition();\n  }\n\n  // HIGH-03: _hideWithFocusRestore controls whether _previousFocus is restored.\n  // Escape and programmatic close restore focus; click-outside does not.\n  /** @internal */\n  private async _hide(restoreFocus = true): Promise<void> {\n    if (!this._visible) return;\n    document.removeEventListener('click', this._handleDocumentClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n    this._visible = false;\n    this.open = false;\n    this._setAnchorAriaAttributes(false);\n    // HIGH-03: only restore focus on Escape / programmatic close\n    if (restoreFocus) {\n      this._previousFocus?.focus();\n    }\n    this._previousFocus = null;\n    await this.updateComplete;\n    this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const anchorSlot = this.shadowRoot?.querySelector(\n      'slot[name=\"anchor\"]',\n    ) as HTMLSlotElement | null;\n    if (!anchorSlot) return;\n    const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    const arrowEl = this.arrow\n      ? (this.shadowRoot?.querySelector('[part=\"arrow\"]') as HTMLElement | null)\n      : null;\n\n    if (!anchorEl || !bodyEl) return;\n\n    const { computePosition, flip, shift, offset, arrow } = await import('@floating-ui/dom');\n\n    const middleware = [\n      offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n      flip(),\n      shift({ padding: 8 }),\n    ];\n\n    if (arrowEl) {\n      middleware.push(arrow({ element: arrowEl }));\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(anchorEl, bodyEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware,\n    });\n\n    Object.assign(bodyEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    if (arrowEl && middlewareData.arrow) {\n      const arrowData = middlewareData.arrow;\n      const basePlacement = placement.split('-')[0] ?? 'bottom';\n      const oppositeSide: Record<string, string> = {\n        top: 'bottom',\n        right: 'left',\n        bottom: 'top',\n        left: 'right',\n      };\n      const staticSide = oppositeSide[basePlacement] ?? 'bottom';\n\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]: '-5px',\n      });\n\n      // P2-02: hide the two border sides facing the popover body so only\n      // the outward-facing corner is visible (avoids the inner border line).\n      // Reset all four sides first, then make the two inner-facing ones transparent.\n      const borderSides = ['border-top', 'border-right', 'border-bottom', 'border-left'] as const;\n      for (const side of borderSides) {\n        arrowEl.style.setProperty(side, '');\n      }\n      // Maps base placement → the two sides that face inward toward the popover body\n      const innerBorderMap: Record<string, readonly [string, string]> = {\n        bottom: ['border-bottom', 'border-right'],\n        top: ['border-top', 'border-left'],\n        right: ['border-top', 'border-right'],\n        left: ['border-bottom', 'border-left'],\n      };\n      const innerSides = innerBorderMap[basePlacement] ?? ['border-bottom', 'border-right'];\n      arrowEl.style.setProperty(innerSides[0], '1px solid transparent');\n      arrowEl.style.setProperty(innerSides[1], '1px solid transparent');\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  // P1-03 / P0-01 / HIGH-01: single document-level keydown handler while popover is open.\n  // Handles Escape (close) and Tab (focus trap) in one listener to reduce overhead.\n  /**\n   * Handles Escape to close the popover and Tab/Shift+Tab to trap focus within it.\n   * @internal\n   */\n  private _handleDocumentKeydown = (e: KeyboardEvent): void => {\n    if (!this._visible) return;\n\n    if (e.key === 'Escape') {\n      // HIGH-03: Escape always restores focus to the prior element\n      void this._hide(true);\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      // HIGH-01: trap Tab/Shift+Tab focus within the popover body\n      const focusable = this._getFocusableElements();\n      if (focusable.length === 0) return;\n\n      const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n      const allFocusable = bodyEl ? [bodyEl, ...focusable] : focusable;\n      if (allFocusable.length === 0) return;\n\n      const first = allFocusable[0] as HTMLElement;\n      const last = allFocusable[allFocusable.length - 1] as HTMLElement;\n\n      if (e.shiftKey) {\n        if (document.activeElement === first || this.shadowRoot?.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last || this.shadowRoot?.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    }\n  };\n\n  // P0-01: close when click target is outside this component\n  /**\n   * Closes the popover when a click occurs outside the component boundary.\n   * @internal\n   */\n  private _handleDocumentClick = (e: Event): void => {\n    // Shadow DOM retargets events from within to the host at document level,\n    // so a click on the trigger wrapper appears as e.target === this.\n    if (e.target !== this && !this.contains(e.target as Node)) {\n      // HIGH-03: click-outside does NOT restore focus — let browser handle naturally\n      void this._hide(false);\n    }\n  };\n\n  /**\n   * Toggles the popover open/closed when the anchor is clicked in click trigger mode.\n   * @internal\n   */\n  private _handleAnchorClick = (): void => {\n    if (this.trigger !== 'click') return;\n    if (this._visible) {\n      void this._hide(true);\n    } else {\n      void this._show();\n    }\n  };\n\n  /**\n   * Opens the popover when the anchor receives a mouseenter event in hover trigger mode.\n   * @internal\n   */\n  private _handleAnchorMouseEnter = (): void => {\n    if (this.trigger !== 'hover') return;\n    void this._show();\n  };\n\n  /**\n   * Closes the popover when the anchor receives a mouseleave event in hover trigger mode.\n   * WCAG 1.4.13: applies a 150 ms delay so the pointer can move from anchor\n   * into the popover body without the content dismissing prematurely.\n   * @internal\n   */\n  private _handleAnchorMouseLeave = (): void => {\n    if (this.trigger !== 'hover') return;\n    this._scheduleHoverHide();\n  };\n\n  // CRITICAL-02: body hover handlers so moving the pointer from anchor into\n  // the popover content does not trigger a hide.\n  /** @internal */\n  private _handleBodyMouseEnter = (): void => {\n    // Cancel a pending hide that would have fired from the anchor's mouseleave.\n    if (this.trigger !== 'hover') return;\n    this._cancelHoverHide();\n  };\n\n  /** @internal */\n  private _handleBodyMouseLeave = (): void => {\n    if (this.trigger !== 'hover') return;\n    this._scheduleHoverHide();\n  };\n\n  /**\n   * Schedules a hide with a 150 ms delay for hover-triggered dismissal.\n   * WCAG 1.4.13: the delay allows the pointer to travel between the anchor\n   * and the popover body without the content disappearing.\n   * @internal\n   */\n  private _scheduleHoverHide(): void {\n    this._cancelHoverHide();\n    this._hoverHideTimer = setTimeout(() => {\n      this._hoverHideTimer = null;\n      void this._hide(false);\n    }, 150);\n  }\n\n  /**\n   * Cancels any pending hover-triggered hide.\n   * @internal\n   */\n  private _cancelHoverHide(): void {\n    if (this._hoverHideTimer !== null) {\n      clearTimeout(this._hoverHideTimer);\n      this._hoverHideTimer = null;\n    }\n  }\n\n  /** @internal */\n  private _handleAnchorFocusIn = (): void => {\n    // CRITICAL-02: keyboard users trigger hover-mode popovers via focusin\n    if (this.trigger !== 'focus' && this.trigger !== 'hover') return;\n    void this._show();\n  };\n\n  /** @internal */\n  private _handleAnchorFocusOut = (e: FocusEvent): void => {\n    // CRITICAL-02: for hover mode, only hide when focus leaves both the anchor\n    // and the popover body (i.e. relatedTarget is outside the component).\n    if (this.trigger !== 'focus' && this.trigger !== 'hover') return;\n    const related = e.relatedTarget as Node | null;\n    // If focus is moving into the shadow root (body element), keep popover open\n    if (related && (this.contains(related) || this.shadowRoot?.contains(related))) return;\n    void this._hide(true);\n  };\n\n  /** @internal */\n  private _handleAnchorSlotChange(): void {\n    this._setAnchorAriaAttributes(this._visible);\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @click=${this._handleAnchorClick}\n        @mouseenter=${this._handleAnchorMouseEnter}\n        @mouseleave=${this._handleAnchorMouseLeave}\n        @focusin=${this._handleAnchorFocusIn}\n        @focusout=${this._handleAnchorFocusOut}\n      >\n        <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n      </div>\n      <div\n        part=\"body\"\n        id=${this._popoverId}\n        role=\"dialog\"\n        aria-label=${this.label}\n        aria-hidden=${!this._visible ? 'true' : nothing}\n        tabindex=\"-1\"\n        ?inert=${!this._visible}\n        class=${this._visible ? 'visible' : ''}\n        @mouseenter=${this._handleBodyMouseEnter}\n        @mouseleave=${this._handleBodyMouseLeave}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\"></div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-popover': HelixPopover;\n  }\n}\n"],"names":["helixPopoverStyles","css","_nextPopoverId","createIdCounter","HelixPopover","LitElement","focusable","bodyEl","_a","allFocusable","first","last","_b","_c","related","changedProperties","expanded","anchorSlot","anchorEl","defaultSlot","assigned","focusableSelector","result","el","nested","restoreFocus","arrowEl","computePosition","flip","shift","offset","arrow","middleware","x","y","placement","middlewareData","arrowData","basePlacement","staticSide","borderSides","side","innerSides","html","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-popup-Cc4qz89i.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-popup-Cc4qz89i.js","sources":["../../src/components/hx-popup/hx-popup.styles.ts","../../src/components/hx-popup/hx-popup.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopupStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  [part='popup'] {\n    position: fixed;\n    z-index: var(--hx-popup-z-index, 9000);\n    inset: 0 auto auto 0;\n    box-sizing: border-box;\n    transition: var(--hx-popup-transition, none);\n  }\n\n  :host(:not([active])) [part='popup'] {\n    display: none;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-arrow-size, 8px);\n    height: var(--hx-arrow-size, 8px);\n    background: var(--hx-arrow-color, var(--hx-color-neutral-0, #ffffff));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='popup'] {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    [part='popup'] {\n      border: 1px solid CanvasText;\n    }\n\n    [part='arrow'] {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  computePosition,\n  flip as flipMiddleware,\n  shift as shiftMiddleware,\n  offset as offsetMiddleware,\n  arrow as arrowMiddleware,\n  autoUpdate,\n  size as sizeMiddleware,\n  autoPlacement as autoPlacementMiddleware,\n} from '@floating-ui/dom';\nimport type { Placement, Middleware } from '@floating-ui/dom';\nimport { helixPopupStyles } from './hx-popup.styles.js';\n\ntype PopupPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'auto';\n\n// More precise type matching @floating-ui/dom's arrow middleware data structure\ntype ArrowData = { x?: number; y?: number; centerOffset: number };\n\n/**\n * A low-level positioning primitive that anchors a floating panel to a reference element.\n * This is the base that hx-tooltip, hx-dropdown, and hx-popover build upon.\n *\n * @summary Low-level popup positioning utility.\n *\n * @tag hx-popup\n *\n * @slot anchor - The reference element the popup is anchored to.\n * @slot - Default slot for popup content.\n *\n * @csspart popup - The popup container element.\n * @csspart arrow - The arrow indicator element (only present when `arrow` is true).\n *\n * @cssprop [--hx-popup-z-index=9000] - Z-index of the popup container.\n * @cssprop [--hx-popup-transition=none] - Transition applied to the popup element.\n *   Consumers who need enter/exit animations can set this property AND override the\n *   default `display: none` hide mechanism via `::part(popup)`. Example:\n *   ```css\n *   hx-popup { --hx-popup-transition: opacity 0.2s ease; }\n *   hx-popup:not([active])::part(popup) { display: block; opacity: 0; pointer-events: none; }\n *   hx-popup[active]::part(popup) { opacity: 1; }\n *   ```\n * @cssprop [--hx-arrow-size=8px] - Size of the arrow element.\n * @cssprop [--hx-arrow-color=var(--hx-color-surface-overlay, #ffffff)] - Color of the arrow element.\n * @cssprop --hx-auto-size-available-width - Available width set by auto-size middleware (on :host).\n * @cssprop --hx-auto-size-available-height - Available height set by auto-size middleware (on :host).\n *\n * @fires {CustomEvent} hx-reposition - Emitted after the popup is repositioned.\n *\n * ## Accessibility Contract\n *\n * `hx-popup` is a **positioning utility**, not an interactive widget. It does not provide\n * ARIA semantics. Consumers are responsible for all accessibility:\n *\n * - **Popup role**: Add `role=\"tooltip\"`, `role=\"dialog\"`, `role=\"listbox\"`, etc. to the\n *   slotted popup content depending on its purpose.\n * - **Trigger state**: The element that triggers the popup MUST set `aria-expanded=\"true/false\"`.\n * - **Association**: Use `aria-controls` on the trigger to reference the popup content element,\n *   and `aria-labelledby` / `aria-describedby` as appropriate.\n * - **Focus management**: `hx-popup` does NOT trap focus. Consumers building dialogs or menus\n *   MUST implement focus trapping and keyboard dismiss (Escape key) themselves.\n * - **Visibility**: The popup is hidden via `display: none` (CSS) and the `inert` attribute\n *   when inactive. Both are reliable accessibility-tree hiding mechanisms.\n *\n * @example\n * ```html\n * <!-- Tooltip pattern -->\n * <hx-popup id=\"my-tooltip\" placement=\"bottom\" distance=\"8\">\n *   <button\n *     slot=\"anchor\"\n *     aria-describedby=\"tooltip-content\"\n *     aria-expanded=\"false\"\n *     aria-controls=\"my-tooltip\"\n *   >\n *     Trigger\n *   </button>\n *   <div id=\"tooltip-content\" role=\"tooltip\">Tooltip text</div>\n * </hx-popup>\n * ```\n *\n * ## Drupal Integration\n *\n * `hx-popup` is a JS utility — Twig provides markup only. No Drupal behavior file is\n * required for basic usage, since the `anchor` slot and `active` attribute are sufficient.\n *\n * ```twig\n * {# Basic Twig usage — prefer anchor slot in server-rendered contexts #}\n * <hx-popup id=\"my-popup\" placement=\"bottom\" distance=\"8\">\n *   <button\n *     slot=\"anchor\"\n *     aria-expanded=\"false\"\n *     aria-controls=\"popup-content\"\n *   >Open</button>\n *   <div id=\"popup-content\" role=\"dialog\" aria-label=\"Popup content\">...</div>\n * </hx-popup>\n * ```\n *\n * ```js\n * // Drupal behavior for toggle interaction\n * Drupal.behaviors.helixPopup = {\n *   attach(context) {\n *     context.querySelectorAll('hx-popup').forEach((popup) => {\n *       const trigger = popup.querySelector('[slot=\"anchor\"]');\n *       if (!trigger) return;\n *       trigger.addEventListener('click', () => {\n *         popup.active = !popup.active;\n *         trigger.setAttribute('aria-expanded', String(popup.active));\n *       });\n *     });\n *   },\n * };\n * ```\n *\n * For Drupal-generated dynamic IDs, prefer the anchor **slot** over the `anchor` CSS selector\n * attribute, since slot-based anchoring does not require knowing the element's ID at render time.\n * If you must use the CSS selector form with dynamic IDs, pass the ID via a Twig variable:\n * ```twig\n * <hx-popup anchor=\"#{{ element['#id'] }}\" placement=\"bottom\">...</hx-popup>\n * ```\n */\n@customElement('hx-popup')\nexport class HelixPopup extends LitElement {\n  static override styles = [helixPopupStyles];\n\n  /** @internal */\n  private _anchorSlotEl: Element | null = null;\n  /** @internal */\n  private _cleanupAutoUpdate: (() => void) | null = null;\n\n  /**\n   * The reference element to anchor the popup to.\n   *\n   * - **Attribute form** (`anchor=\"#selector\"`): Accepts a CSS selector string resolved via\n   *   `querySelector` from the component's root node. Use this in HTML/Twig markup.\n   * - **Property form** (`el.anchor = element`): Accepts an `Element` reference directly.\n   *   Setting an Element via JS property does NOT reflect to the attribute.\n   *\n   * If not set, the element in the `anchor` slot is used.\n   *\n   * @attr anchor\n   */\n  @property({ attribute: 'anchor' })\n  anchor: string | Element | null = null;\n\n  /**\n   * Preferred placement of the popup relative to the anchor.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'auto' = 'bottom';\n\n  /**\n   * Whether the popup is visible.\n   * @attr active\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Gap in pixels between the popup and the anchor element.\n   * @attr distance\n   */\n  @property({ type: Number, reflect: true })\n  distance = 0;\n\n  /**\n   * Offset in pixels along the anchor element's axis.\n   * @attr skidding\n   */\n  @property({ type: Number, reflect: true })\n  skidding = 0;\n\n  /**\n   * Whether to show an arrow pointing to the anchor element.\n   * @attr arrow\n   */\n  @property({ type: Boolean, reflect: true })\n  arrow = false;\n\n  /**\n   * Manual placement of the arrow along the popup edge.\n   * When not set, floating-ui calculates the optimal position.\n   * @attr arrow-placement\n   */\n  @property({ attribute: 'arrow-placement', reflect: true })\n  arrowPlacement: 'start' | 'center' | 'end' | null = null;\n\n  /**\n   * Minimum padding in pixels from the popup edge to the arrow.\n   * @attr arrow-padding\n   */\n  @property({ type: Number, attribute: 'arrow-padding' })\n  arrowPadding = 10;\n\n  /**\n   * When true, flips the popup to the opposite side to avoid overflow.\n   * @attr flip\n   */\n  @property({ type: Boolean, reflect: true })\n  flip = false;\n\n  /**\n   * Fallback placements to try when flipping. Accepts a JSON array string.\n   *\n   * @example\n   * ```html\n   * <!-- Try \"top\" then \"left\" before giving up -->\n   * <hx-popup flip flip-fallback-placements='[\"top\",\"left\"]'>...</hx-popup>\n   * ```\n   *\n   * @attr flip-fallback-placements\n   */\n  @property({\n    attribute: 'flip-fallback-placements',\n    converter: {\n      fromAttribute(value: string | null): PopupPlacement[] {\n        if (!value) return [];\n        try {\n          return JSON.parse(value) as PopupPlacement[];\n        } catch {\n          return [];\n        }\n      },\n      toAttribute(value: PopupPlacement[]): string {\n        return JSON.stringify(value);\n      },\n    },\n  })\n  flipFallbackPlacements: (\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'auto'\n  )[] = [];\n\n  /**\n   * When true, shifts the popup along the axis to remain in the viewport.\n   * @attr shift\n   */\n  @property({ type: Boolean, reflect: true })\n  shift = false;\n\n  /**\n   * When true, resizes the popup to fit within the viewport.\n   * Sets --hx-auto-size-available-width and --hx-auto-size-available-height CSS custom\n   * properties on `:host` so they cascade into shadow DOM and are readable from light DOM.\n   * @attr auto-size\n   */\n  @property({ type: Boolean, attribute: 'auto-size', reflect: true })\n  autoSize = false;\n\n  /**\n   * Positioning strategy passed to floating-ui's `computePosition`.\n   *\n   * - `'fixed'` (default): works for most cases; positions relative to the viewport.\n   * - `'absolute'`: use inside `overflow: hidden` / scroll containers where the popup is\n   *   positioned relative to the nearest positioned ancestor instead of the viewport.\n   *\n   * @attr strategy\n   */\n  @property({ reflect: true })\n  strategy: 'fixed' | 'absolute' = 'fixed';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.active) {\n      void this.updateComplete.then(() => this._startAutoUpdate());\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._stopAutoUpdate();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    const activeChanged = changedProperties.has('active');\n    const positioningChanged =\n      changedProperties.has('placement') ||\n      changedProperties.has('distance') ||\n      changedProperties.has('skidding') ||\n      changedProperties.has('arrow') ||\n      changedProperties.has('arrowPadding') ||\n      changedProperties.has('arrowPlacement') ||\n      changedProperties.has('flip') ||\n      changedProperties.has('flipFallbackPlacements') ||\n      changedProperties.has('shift') ||\n      changedProperties.has('autoSize') ||\n      changedProperties.has('anchor') ||\n      changedProperties.has('strategy');\n\n    if (activeChanged) {\n      if (this.active) {\n        this._startAutoUpdate();\n      } else {\n        this._stopAutoUpdate();\n        // Clean up autoSize custom properties when popup goes inactive\n        if (this.autoSize) {\n          this.style.removeProperty('--hx-auto-size-available-width');\n          this.style.removeProperty('--hx-auto-size-available-height');\n        }\n      }\n    } else if (positioningChanged && this.active) {\n      void this._reposition();\n    }\n\n    // Remove stale autoSize properties when autoSize is disabled\n    if (changedProperties.has('autoSize') && !this.autoSize) {\n      this.style.removeProperty('--hx-auto-size-available-width');\n      this.style.removeProperty('--hx-auto-size-available-height');\n    }\n  }\n\n  // ─── Anchor Resolution ───\n\n  /** @internal */\n  private _getAnchorElement(): Element | null {\n    if (this.anchor instanceof Element) {\n      return this.anchor;\n    }\n    if (typeof this.anchor === 'string') {\n      return (this.getRootNode() as Document | ShadowRoot).querySelector(this.anchor);\n    }\n    return this._anchorSlotEl;\n  }\n\n  /** @internal */\n  private _handleAnchorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements();\n    this._anchorSlotEl = assigned[0] ?? null;\n    if (this.active) {\n      void this._reposition();\n    }\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private _startAutoUpdate(): void {\n    this._stopAutoUpdate();\n    const anchorEl = this._getAnchorElement();\n    const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n    if (!anchorEl || !popupEl) return;\n\n    this._cleanupAutoUpdate = autoUpdate(anchorEl, popupEl, () => {\n      void this._reposition();\n    });\n  }\n\n  /** @internal */\n  private _stopAutoUpdate(): void {\n    this._cleanupAutoUpdate?.();\n    this._cleanupAutoUpdate = null;\n  }\n\n  /** @internal */\n  private async _reposition(): Promise<void> {\n    const anchorEl = this._getAnchorElement();\n    const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n    if (!anchorEl || !popupEl) return;\n\n    const arrowEl = this.arrow\n      ? (this.shadowRoot?.querySelector<HTMLElement>('[part=\"arrow\"]') ?? null)\n      : null;\n\n    const middleware: Middleware[] = [\n      offsetMiddleware({ mainAxis: this.distance, crossAxis: this.skidding }),\n    ];\n\n    if (this.placement === 'auto') {\n      middleware.push(autoPlacementMiddleware());\n    } else if (this.flip) {\n      middleware.push(\n        flipMiddleware({\n          fallbackPlacements: this.flipFallbackPlacements as Placement[],\n        }),\n      );\n    }\n\n    if (this.shift) {\n      middleware.push(shiftMiddleware({ padding: 8 }));\n    }\n\n    if (arrowEl) {\n      middleware.push(arrowMiddleware({ element: arrowEl, padding: this.arrowPadding }));\n    }\n\n    if (this.autoSize) {\n      middleware.push(\n        sizeMiddleware({\n          apply: ({ availableWidth, availableHeight }) => {\n            // Set on :host so the custom properties cascade into shadow DOM and\n            // are accessible from light DOM consumers via CSS inheritance.\n            this.style.setProperty('--hx-auto-size-available-width', `${availableWidth}px`);\n            this.style.setProperty('--hx-auto-size-available-height', `${availableHeight}px`);\n          },\n        }),\n      );\n    }\n\n    const effectivePlacement: Placement =\n      this.placement === 'auto' ? 'bottom' : (this.placement as Placement);\n\n    // Set position strategy before computing — inline style takes precedence over CSS\n    popupEl.style.position = this.strategy;\n\n    const { x, y, placement, middlewareData } = await computePosition(anchorEl, popupEl, {\n      placement: effectivePlacement,\n      strategy: this.strategy,\n      middleware,\n    });\n\n    Object.assign(popupEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    if (arrowEl) {\n      const arrowData = middlewareData.arrow as ArrowData | undefined;\n      this._positionArrow(arrowEl, placement, arrowData);\n    }\n\n    this.dispatchEvent(new CustomEvent<void>('hx-reposition', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _positionArrow(\n    arrowEl: HTMLElement,\n    placement: Placement,\n    arrowData: ArrowData | undefined,\n  ): void {\n    const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n    const staticSides = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    } as const;\n    const staticSide = staticSides[basePlacement];\n\n    const arrowStyle: Record<string, string> = {\n      left: '',\n      top: '',\n      right: '',\n      bottom: '',\n    };\n\n    if (this.arrowPlacement === 'start' || this.arrowPlacement === 'end') {\n      const isVertical = basePlacement === 'top' || basePlacement === 'bottom';\n      if (isVertical) {\n        arrowStyle[this.arrowPlacement === 'start' ? 'left' : 'right'] = `${this.arrowPadding}px`;\n      } else {\n        arrowStyle[this.arrowPlacement === 'start' ? 'top' : 'bottom'] = `${this.arrowPadding}px`;\n      }\n    } else {\n      // 'center' or null: use floating-ui computed position\n      if (arrowData?.x != null) arrowStyle.left = `${arrowData.x}px`;\n      if (arrowData?.y != null) arrowStyle.top = `${arrowData.y}px`;\n    }\n\n    arrowStyle[staticSide] = '-4px';\n    arrowEl.setAttribute('data-placement', basePlacement);\n    Object.assign(arrowEl.style, arrowStyle);\n  }\n\n  // ─── Public API ───\n\n  /**\n   * Forces the popup to recalculate its position.\n   */\n  async reposition(): Promise<void> {\n    await this._reposition();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n      <div part=\"popup\" ?inert=${!this.active}>\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\"></div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-popup': HelixPopup;\n  }\n}\n"],"names":["helixPopupStyles","css","HelixPopup","LitElement","changedProperties","activeChanged","positioningChanged","e","assigned","anchorEl","popupEl","_a","autoUpdate","arrowEl","_b","middleware","offsetMiddleware","autoPlacementMiddleware","flipMiddleware","shiftMiddleware","arrowMiddleware","sizeMiddleware","availableWidth","availableHeight","effectivePlacement","x","y","placement","middlewareData","computePosition","arrowData","basePlacement","staticSide","arrowStyle","html","nothing","__decorateClass","property","value","customElement"],"mappings":"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"}

package/dist/shared/hx-progress-bar-BY1uE6bN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-progress-bar-BY1uE6bN.js","sources":["../../src/components/hx-progress-bar/hx-progress-bar.styles.ts","../../src/components/hx-progress-bar/hx-progress-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixProgressBarStyles = css`\n  :host {\n    display: block;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  .progress-bar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  .progress-bar__label {\n    font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));\n    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));\n    line-height: var(--hx-line-height-tight, 1.25);\n  }\n\n  .progress-bar__track {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));\n    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));\n    width: 100%;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .progress-bar--sm .progress-bar__track {\n    height: var(--hx-progress-bar-height-sm, var(--hx-space-1, 0.25rem));\n  }\n\n  .progress-bar--md .progress-bar__track {\n    height: var(--hx-progress-bar-height-md, var(--hx-space-2, 0.5rem));\n  }\n\n  .progress-bar--lg .progress-bar__track {\n    height: var(--hx-progress-bar-height-lg, var(--hx-space-3, 0.75rem));\n  }\n\n  .progress-bar__fill {\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));\n    transform-origin: left center;\n    transform: scaleX(var(--_value-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar__fill {\n      transition: none;\n    }\n  }\n\n  /* ─── Variant Colors ─── */\n\n  .progress-bar--default .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);\n  }\n\n  .progress-bar--success .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);\n  }\n\n  .progress-bar--warning .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);\n  }\n\n  .progress-bar--danger .progress-bar__fill {\n    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);\n  }\n\n  /* ─── Indeterminate Animation ─── */\n\n  @keyframes hx-progress-indeterminate {\n    0% {\n      transform: translateX(-100%) scaleX(0.4);\n    }\n    50% {\n      transform: translateX(50%) scaleX(0.6);\n    }\n    100% {\n      transform: translateX(250%) scaleX(0.4);\n    }\n  }\n\n  .progress-bar--indeterminate .progress-bar__fill {\n    transform: translateX(-100%) scaleX(0.4);\n    transform-origin: left center;\n    animation: hx-progress-indeterminate var(--hx-progress-bar-indeterminate-duration, 1.5s)\n      ease-in-out infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar__fill {\n      transition: none;\n    }\n\n    .progress-bar--indeterminate .progress-bar__fill {\n      animation: none;\n      transform: scaleX(1);\n      opacity: var(--hx-opacity-disabled, 0.5); /* reduced from animation; no exact token for 0.4 */\n    }\n  }\n\n  /* ─── High Contrast Mode ─── */\n\n  @media (forced-colors: active) {\n    .progress-bar__track {\n      border: 1px solid ButtonText;\n      background-color: Canvas;\n    }\n\n    .progress-bar__fill {\n      background-color: Highlight;\n      forced-color-adjust: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createIdCounter } from '../../base/index.js';\nimport { helixProgressBarStyles } from './hx-progress-bar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextProgressBarId = createIdCounter('hx-progress-bar');\n\n/**\n * A linear progress indicator for determinate and indeterminate states.\n *\n * @summary Displays task completion progress or an indeterminate loading state.\n *\n * @tag hx-progress-bar\n *\n * @slot label - Visible label text rendered above the progress bar track.\n *\n * @csspart track - The outer track container element.\n * @csspart fill - The filled portion indicating progress.\n * @csspart label - The label slot wrapper element.\n *\n * @cssprop [--hx-progress-bar-track-bg=var(--hx-color-neutral-100)] - Track background color.\n * @cssprop [--hx-progress-bar-indicator-bg=var(--hx-color-primary-500)] - Indicator fill color.\n * @cssprop [--hx-progress-bar-border-radius=var(--hx-border-radius-full)] - Track border radius.\n * @cssprop [--hx-progress-bar-height-sm=var(--hx-size-1)] - Track height for size=\"sm\".\n * @cssprop [--hx-progress-bar-height-md=var(--hx-size-2)] - Track height for size=\"md\".\n * @cssprop [--hx-progress-bar-height-lg=var(--hx-size-3)] - Track height for size=\"lg\".\n * @cssprop [--hx-progress-bar-label-font-family=var(--hx-font-family-sans)] - Label font family.\n * @cssprop [--hx-progress-bar-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-progress-bar-label-font-weight=var(--hx-font-weight-medium)] - Label font weight.\n * @cssprop [--hx-progress-bar-label-color=var(--hx-color-neutral-700)] - Label text color.\n *\n * @fires {CustomEvent} hx-complete - Emitted when progress reaches 100%.\n */\n@customElement('hx-progress-bar')\nexport class HelixProgressBar extends LitElement {\n  static override styles = [helixProgressBarStyles];\n\n  /**\n   * Current progress value (min–max). Set to null for indeterminate state.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value: number | null = null;\n\n  /**\n   * Minimum value for the progress bar.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum value for the progress bar.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * When true, displays an animated indeterminate loading state regardless of value.\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Accessible label for the progress bar (maps to aria-label when no label slot content is used).\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Additional description for the progress operation, linked via aria-describedby.\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  description = '';\n\n  /**\n   * Size of the progress bar track.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the indicator color.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n\n  /** @internal */\n  @state() private _liveMessage = '';\n  /** @internal */\n  @state() private _hasLabelSlotContent = false;\n  /** @internal */\n  private _warnedAboutLabel = false;\n\n  /** @internal */\n  private _uid = _nextProgressBarId();\n\n  /** @internal */\n  private get _isIndeterminate(): boolean {\n    return this.indeterminate || this.value === null;\n  }\n\n  /** @internal */\n  private get _percentage(): number {\n    if (this._isIndeterminate) return 0;\n    if (this.value !== null && isNaN(this.value)) {\n      devWarn('hx-progress-bar', 'Invalid value: NaN. Defaulting to 0.');\n      return 0;\n    }\n    const range = this.max - this.min;\n    if (range <= 0) return 0;\n    const clamped = Math.max(this.min, Math.min(this.value ?? this.min, this.max));\n    return ((clamped - this.min) / range) * 100;\n  }\n\n  /** @internal */\n  private get _isComplete(): boolean {\n    return !this._isIndeterminate && this.value !== null && this.value >= this.max;\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if ((changedProps.has('value') || changedProps.has('max')) && this._isComplete) {\n      this._liveMessage = 'Complete';\n      this.dispatchEvent(new CustomEvent<void>('hx-complete', { bubbles: true, composed: true }));\n    } else if (changedProps.has('value') && !this._isComplete) {\n      this._liveMessage = '';\n    }\n\n    if (\n      changedProps.has('value') ||\n      changedProps.has('min') ||\n      changedProps.has('max') ||\n      changedProps.has('indeterminate')\n    ) {\n      const ratio = this._isIndeterminate ? 0 : this._percentage / 100;\n      this.style.setProperty('--_value-ratio', String(Math.max(0, Math.min(1, ratio))));\n    }\n\n    if (!this.label && !this._warnedAboutLabel) {\n      this._warnedAboutLabel = true;\n      devWarn(\n        'hx-progress-bar',\n        'No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled progressbar violates WCAG 2.1 AA (4.1.2 Name, Role, Value).',\n      );\n    }\n  }\n\n  /** @internal */\n  private _onLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── WCAG 1.4.1: Variant label map ───\n  // Semantic variants (success/warning/danger) must not rely on color alone.\n  // The variant label is included in aria-valuetext for AT users and rendered\n  // as visually-hidden text for users in high contrast or color-blind contexts.\n\n  /** @internal */\n  private static readonly _VARIANT_LABELS: Partial<Record<HelixProgressBar['variant'], string>> = {\n    success: 'Success',\n    warning: 'Warning',\n    danger: 'Danger',\n  };\n\n  /** @internal */\n  private get _variantLabel(): string {\n    return HelixProgressBar._VARIANT_LABELS[this.variant] ?? '';\n  }\n\n  override render() {\n    const labelId = `${this._uid}-label`;\n    const descId = this.description ? `${this._uid}-desc` : undefined;\n    const hasVisibleLabel = this._hasLabelSlotContent;\n\n    const classes = {\n      'progress-bar': true,\n      [`progress-bar--${this.size}`]: true,\n      [`progress-bar--${this.variant}`]: true,\n      'progress-bar--indeterminate': this._isIndeterminate,\n    };\n\n    const ariaValueNow = this._isIndeterminate ? undefined : (this.value ?? this.min);\n    const variantLabel = this._variantLabel;\n\n    // WCAG 1.4.1: Include variant label in aria-valuetext so AT users receive\n    // the semantic state (success/warning/danger) without relying on fill color.\n    const percentageText = this._isIndeterminate\n      ? 'In progress'\n      : `${Math.round(this._percentage)}%`;\n    const ariaValuetext = variantLabel ? `${percentageText} — ${variantLabel}` : percentageText;\n\n    return html`\n      <div class=${classMap(classes)}>\n        ${hasVisibleLabel || this.label\n          ? html`<span id=${labelId} part=\"label\" class=\"progress-bar__label\">\n              <slot name=\"label\" @slotchange=${this._onLabelSlotChange}></slot>\n            </span>`\n          : html`<slot name=\"label\" @slotchange=${this._onLabelSlotChange} hidden></slot>`}\n        ${this.description\n          ? html`<span id=${descId} class=\"sr-only\">${this.description}</span>`\n          : nothing}\n        <div\n          part=\"track\"\n          class=\"progress-bar__track\"\n          role=\"progressbar\"\n          aria-valuenow=${ifDefined(ariaValueNow)}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-valuetext=${ariaValuetext}\n          aria-label=${ifDefined(!hasVisibleLabel && this.label ? this.label : undefined)}\n          aria-labelledby=${ifDefined(hasVisibleLabel ? labelId : undefined)}\n          aria-describedby=${ifDefined(descId)}\n        >\n          <div part=\"fill\" class=\"progress-bar__fill\"></div>\n        </div>\n        ${variantLabel\n          ? html`<span class=\"sr-only progress-bar__variant-label\">${variantLabel}</span>`\n          : nothing}\n        <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveMessage}</div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-progress-bar': HelixProgressBar;\n  }\n}\n"],"names":["helixProgressBarStyles","css","_nextProgressBarId","createIdCounter","HelixProgressBar","LitElement","range","changedProps","ratio","e","slot","labelId","descId","hasVisibleLabel","classes","ariaValueNow","variantLabel","percentageText","ariaValuetext","html","classMap","nothing","ifDefined","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-progress-ring-Cs0WgWDJ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-progress-ring-Cs0WgWDJ.js","sources":["../../src/components/hx-progress-ring/hx-progress-ring.styles.ts","../../src/components/hx-progress-ring/hx-progress-ring.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixProgressRingStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* ─── Base Container ─── */\n\n  .progress-ring {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* ─── SVG ─── */\n\n  .progress-ring__svg {\n    transform: rotate(-90deg);\n    overflow: visible;\n  }\n\n  /* ─── Track ─── */\n\n  .progress-ring__track {\n    fill: none;\n    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #e2e8f0));\n  }\n\n  /* ─── Indicator ─── */\n\n  .progress-ring__indicator {\n    fill: none;\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #2563eb));\n    stroke-linecap: round;\n    transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);\n  }\n\n  /* ─── Variant Colors ─── */\n\n  :host([variant='success']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #16a34a));\n  }\n\n  :host([variant='warning']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #d97706));\n  }\n\n  :host([variant='danger']) .progress-ring__indicator {\n    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #dc2626));\n  }\n\n  /* ─── Indeterminate Animation ─── */\n\n  :host([indeterminate]) .progress-ring__svg {\n    animation: hx-progress-ring-rotate var(--hx-duration-spinner, 1400ms) linear infinite;\n  }\n\n  :host([indeterminate]) .progress-ring__indicator {\n    animation: hx-progress-ring-dash var(--hx-duration-spinner, 1400ms) ease-in-out infinite;\n    transition: none;\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n\n  @keyframes hx-progress-ring-rotate {\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  /*\n   * Indeterminate spinner keyframes — values are tuned for default strokeWidth=4\n   * (radius ≈ 48, circumference ≈ 301). The gap value 200 is intentionally smaller\n   * than the full circumference; the repeating pattern is a standard CSS spinner\n   * technique that produces an arc of ~35% coverage. At non-default strokeWidths\n   * the arc coverage will vary slightly but remains visually acceptable.\n   */\n  @keyframes hx-progress-ring-dash {\n    0% {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -124;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host([indeterminate]) .progress-ring__svg {\n      animation: none;\n    }\n\n    :host([indeterminate]) .progress-ring__indicator {\n      animation: none;\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35;\n    }\n\n    .progress-ring__indicator {\n      transition: none;\n    }\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) .progress-ring {\n    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\n  }\n\n  :host([hx-size='md']) .progress-ring,\n  .progress-ring {\n    width: var(--hx-size-12, 3rem);\n    height: var(--hx-size-12, 3rem);\n  }\n\n  :host([hx-size='lg']) .progress-ring {\n    width: var(--hx-size-16, 4rem);\n    height: var(--hx-size-16, 4rem);\n  }\n\n  /* ─── Label (center slot wrapper) ─── */\n\n  .progress-ring__label {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));\n    pointer-events: none;\n  }\n`;\n","import { LitElement, html, svg, TemplateResult, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { helixProgressRingStyles } from './hx-progress-ring.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * SVG-based circular progress indicator. Supports determinate and indeterminate modes,\n * multiple size variants, semantic color variants, and a center content slot.\n *\n * @summary Circular progress ring for indicating operation progress or loading state.\n *\n * @tag hx-progress-ring\n *\n * @slot - Default slot for center content (percentage text, icon, etc.).\n *\n * @csspart base - The SVG element.\n * @csspart track - The background circle track.\n * @csspart indicator - The progress arc indicator.\n * @csspart label - The center slot wrapper div.\n *\n * @cssprop [--hx-progress-ring-track-color=var(--hx-color-neutral-200)] - Track stroke color.\n * @cssprop [--hx-progress-ring-indicator-color=var(--hx-color-primary-500)] - Indicator stroke color.\n * @cssprop [--hx-progress-ring-label-color=var(--hx-color-neutral-900)] - Center label text color.\n */\n@customElement('hx-progress-ring')\nexport class HelixProgressRing extends LitElement {\n  static override styles = [helixProgressRingStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Current progress value (0–max). When null, renders in indeterminate mode.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value: number | null = null;\n\n  /**\n   * Maximum value for the progress range. Defaults to 100. Used for aria-valuemax.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Size of the ring. Controls SVG diameter.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Stroke width of the ring circles in SVG user units.\n   * @attr stroke-width\n   */\n  @property({ type: Number, attribute: 'stroke-width', reflect: true })\n  strokeWidth = 4;\n\n  /**\n   * Semantic color variant.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n\n  /**\n   * Accessible label for the progressbar. Exposed as aria-label.\n   * Set this attribute to satisfy WCAG 4.1.2. When absent, aria-busy reflects\n   * indeterminate state and a console warning is emitted.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private get _isIndeterminate(): boolean {\n    return this.value === null;\n  }\n\n  /** @internal */\n  private get _clampedValue(): number {\n    if (this.value === null) return 0;\n    return Math.min(this.max, Math.max(0, this.value));\n  }\n\n  /**\n   * SVG viewBox is 100x100. Radius leaves room for the stroke.\n   */\n  /** @internal */\n  private get _radius(): number {\n    return (100 - this.strokeWidth) / 2;\n  }\n\n  /** @internal */\n  private get _circumference(): number {\n    return 2 * Math.PI * this._radius;\n  }\n\n  /** @internal */\n  private get _strokeDashoffset(): number {\n    return this._circumference * (1 - this._clampedValue / this.max);\n  }\n\n  /** @internal */\n  private _labelWarned = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-progress-ring', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as 'sm' | 'md' | 'lg';\n    }\n    this.setAttribute('role', 'progressbar');\n    this.setAttribute('aria-valuemin', '0');\n  }\n\n  protected override willUpdate(_changed: PropertyValues<this>): void {\n    // Sync all dynamic ARIA attributes before render\n    this.setAttribute('aria-valuemax', String(this.max));\n\n    if (this._isIndeterminate) {\n      this.setAttribute('indeterminate', '');\n      this.setAttribute('aria-busy', 'true');\n      this.removeAttribute('aria-valuenow');\n      this.removeAttribute('aria-valuetext');\n    } else {\n      this.removeAttribute('indeterminate');\n      this.removeAttribute('aria-busy');\n      this.setAttribute('aria-valuenow', String(this._clampedValue));\n      this.setAttribute('aria-valuetext', `${this._clampedValue}% complete`);\n    }\n\n    if (this.label) {\n      this.setAttribute('aria-label', this.label);\n    } else {\n      this.removeAttribute('aria-label');\n      if (!this._labelWarned) {\n        this._labelWarned = true;\n        devWarn(\n          'hx-progress-ring',\n          'Missing accessible label. Set the `label` attribute for WCAG 4.1.2 compliance.',\n        );\n      }\n    }\n  }\n\n  // ─── Render ───\n\n  override render(): TemplateResult {\n    const cx = 50;\n    const cy = 50;\n    const r = this._radius;\n    const circumference = this._circumference;\n\n    return html`\n      <div class=\"progress-ring\">\n        <svg\n          class=\"progress-ring__svg\"\n          part=\"base\"\n          viewBox=\"0 0 100 100\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          ${svg`\n            <circle\n              class=\"progress-ring__track\"\n              part=\"track\"\n              cx=${cx}\n              cy=${cy}\n              r=${r}\n              stroke-width=${this.strokeWidth}\n            />\n            <circle\n              class=\"progress-ring__indicator\"\n              part=\"indicator\"\n              cx=${cx}\n              cy=${cy}\n              r=${r}\n              stroke-width=${this.strokeWidth}\n              stroke-dasharray=${\n                this._isIndeterminate ? '1 200' : `${circumference} ${circumference}`\n              }\n              stroke-dashoffset=${this._isIndeterminate ? '0' : this._strokeDashoffset}\n            />\n          `}\n        </svg>\n        <div class=\"progress-ring__label\" part=\"label\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-progress-ring': HelixProgressRing;\n  }\n}\n"],"names":["helixProgressRingStyles","css","HelixProgressRing","LitElement","legacySize","_changed","r","circumference","html","svg","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-radio-YEEsbUPN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-radio-YEEsbUPN.js","sources":["../../src/components/hx-radio-group/hx-radio-group.styles.ts","../../src/components/hx-radio-group/hx-radio-group.ts","../../src/components/hx-radio-group/hx-radio.styles.ts","../../src/components/hx-radio-group/hx-radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixRadioGroupStyles = css`\n  :host {\n    display: block;\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  /* ─── Fieldset ─── */\n\n  .fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Legend ─── */\n\n  .fieldset__legend {\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-radio-group-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding: 0;\n    margin-bottom: var(--hx-space-1, 0.25rem);\n  }\n\n  .fieldset__required-marker {\n    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Group Container ─── */\n\n  .fieldset__group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-radio-group-gap, var(--hx-space-3, 0.75rem));\n  }\n\n  :host([orientation='horizontal']) .fieldset__group {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* ─── Error State ─── */\n\n  .fieldset--error .fieldset__legend {\n    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .fieldset__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-radio-group-help-text-color, var(--hx-color-neutral-500, #6c757d));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .fieldset__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-radio-group-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .fieldset {\n      border: none;\n    }\n\n    .fieldset__legend {\n      color: CanvasText;\n    }\n\n    .fieldset--error .fieldset__legend {\n      color: LinkText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .fieldset__legend {\n      color: GrayText;\n    }\n\n    .fieldset__help-text {\n      color: GrayText;\n    }\n\n    .fieldset__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixRadioGroupStyles } from './hx-radio-group.styles.js';\nimport type { HelixRadio } from './hx-radio.js';\n\nconst _nextRadioGroupId = createIdCounter('hx-radio-group');\n\n/**\n * A form-associated radio group that manages a set of `<hx-radio>` children.\n *\n * @summary Form-associated radio group with label, validation, help text, and keyboard navigation.\n *\n * @tag hx-radio-group\n *\n * @slot - `<hx-radio>` elements.\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{value: string, checked: boolean}>} hx-change - Dispatched when the selected radio changes.\n * @fires {CustomEvent<{value: string}>} hx-radio-select - Internal event dispatched by `hx-radio` when selected; consumed by the group.\n *\n * @csspart fieldset - The fieldset wrapper.\n * @csspart legend - The legend/label.\n * @csspart group - The container for radio items.\n * @csspart error - The error message.\n * @csspart help-text - The help text.\n *\n * @cssprop [--hx-radio-group-gap=var(--hx-space-3, 0.75rem)] - Gap between radio items.\n * @cssprop [--hx-radio-group-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n * @cssprop [--hx-radio-group-error-color=var(--hx-color-error-500, #dc3545)] - Error message color.\n * @cssprop [--hx-radio-group-help-text-color=var(--hx-color-neutral-500, #6c757d)] - Help text color.\n */\n@customElement('hx-radio-group')\nexport class HelixRadioGroup extends HelixElement {\n  static override styles = [helixRadioGroupStyles];\n\n  // ─── Form Association ───\n\n  /**\n   * Enables ElementInternals form association for this component.\n   * @internal\n   */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The selected radio's value.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /**\n   * The name used for form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * The fieldset legend/label text.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether a selection is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the entire group 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 group enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the group for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Layout orientation of the radio items.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Queries the rendered group container element within the shadow root.\n   * @internal\n   */\n  private get _groupEl(): HTMLElement | null {\n    return this.renderRoot?.querySelector('.fieldset__group') ?? null;\n  }\n\n  /**\n   * Tracks whether the error slot has assigned content.\n   * @internal\n   */\n  @state() private _hasErrorSlot = false;\n\n  // ─── Internal IDs ───\n\n  /**\n   * Unique identifier for this radio group instance used in ARIA attributes.\n   * @internal\n   */\n  private _groupId = _nextRadioGroupId();\n  /**\n   * Unique identifier for the help text element, used in aria-describedby.\n   * @internal\n   */\n  private _helpTextId = `${this._groupId}-help`;\n  /**\n   * Unique identifier for the error element, used in aria-describedby.\n   * @internal\n   */\n  private _errorId = `${this._groupId}-error`;\n\n  // ─── Slot Handlers ───\n\n  /**\n   * Handles slotchange events on the error slot to detect assigned content.\n   * @internal\n   */\n  private _handleErrorSlotChange(e: Event): void {\n    if (!(e.target instanceof HTMLSlotElement)) return;\n    this._hasErrorSlot = e.target.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-radio-select', this._handleRadioSelect);\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-radio-select', this._handleRadioSelect);\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('value')) {\n      this._internals.setFormValue(this.value || null);\n      this._syncRadios();\n      this._updateValidity();\n    }\n    if (changedProperties.has('disabled')) {\n      this._syncRadios();\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n    this._syncRadios();\n    this._updateValidity();\n    // WCAG 4.1.2: warn when no accessible name is available for the radio group.\n    // The fieldset needs either a label prop (rendered as <legend>) or an aria-label\n    // attribute on the host element so screen readers can identify the group.\n    if (!this.label && !this.getAttribute('aria-label')) {\n      devWarn(\n        'hx-radio-group',\n        'No accessible label provided. Set the `label` attribute or add `aria-label` to the host element. An unlabeled radio group violates WCAG 2.1 AA (4.1.2 Name, Role, Value).',\n      );\n    }\n  }\n\n  // ─── Radio Management ───\n\n  /**\n   * Cached list of child hx-radio elements; invalidated on slot change.\n   * @internal\n   */\n  private _cachedRadios: HelixRadio[] | null = null;\n  /**\n   * Stores each radio's individual disabled state before group-level disabling overrides it.\n   * @internal\n   */\n  private _individualDisabledStates = new WeakMap<HelixRadio, boolean>();\n\n  /**\n   * Returns all child hx-radio elements, using the cache when available.\n   * @internal\n   */\n  private _getRadios(): HelixRadio[] {\n    if (!this._cachedRadios) {\n      this._cachedRadios = Array.from(this.querySelectorAll('hx-radio')) as HelixRadio[];\n    }\n    return this._cachedRadios;\n  }\n\n  /**\n   * Returns only the child hx-radio elements that are not disabled.\n   * @internal\n   */\n  private _getEnabledRadios(): HelixRadio[] {\n    return this._getRadios().filter((radio) => !radio.disabled && !this.disabled);\n  }\n\n  /**\n   * Synchronizes checked state, disabled state, and roving tabindex across all child radios.\n   * @internal\n   */\n  private _syncRadios(): void {\n    const radios = this._getRadios();\n    const enabledRadios = this._getEnabledRadios();\n\n    radios.forEach((radio) => {\n      const isChecked = radio.value === this.value && this.value !== '';\n      radio.checked = isChecked;\n\n      if (this.disabled) {\n        // Store individual disabled state before overriding with group disabled\n        if (!this._individualDisabledStates.has(radio)) {\n          this._individualDisabledStates.set(radio, radio.disabled);\n        }\n        radio.disabled = true;\n      } else {\n        // Restore individual disabled state when group is re-enabled\n        const originalDisabled = this._individualDisabledStates.get(radio);\n        if (originalDisabled !== undefined) {\n          radio.disabled = originalDisabled;\n          this._individualDisabledStates.delete(radio);\n        }\n      }\n    });\n\n    // Roving tabindex management\n    const checkedRadio = enabledRadios.find((r) => r.checked);\n    radios.forEach((radio) => {\n      radio.tabIndex = -1;\n    });\n\n    if (checkedRadio) {\n      checkedRadio.tabIndex = 0;\n    } else if (enabledRadios.length > 0) {\n      const firstRadio = enabledRadios[0];\n      if (firstRadio) {\n        firstRadio.tabIndex = 0;\n      }\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /**\n   * Handles the internal hx-radio-select event to update the group's selected value.\n   * @internal\n   */\n  private _handleRadioSelect = (e: Event): void => {\n    if (!(e instanceof CustomEvent)) return;\n    e.stopPropagation();\n\n    const newValue = (e.detail as { value: string }).value;\n    if (newValue === this.value) {\n      return;\n    }\n\n    this.value = newValue;\n    // Reactive update in updated() will call setFormValue, _syncRadios, _updateValidity\n\n    /**\n     * Dispatched when the selected radio changes.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string; checked: boolean }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value, checked: true },\n      }),\n    );\n  };\n\n  /**\n   * Handles keyboard navigation (arrow keys, Home, End, Space) within the radio group.\n   * @internal\n   */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    const enabledRadios = this._getEnabledRadios();\n    if (enabledRadios.length === 0) {\n      return;\n    }\n\n    const isHandledKey = [\n      'ArrowUp',\n      'ArrowDown',\n      'ArrowLeft',\n      'ArrowRight',\n      ' ',\n      'Home',\n      'End',\n    ].includes(e.key);\n    if (!isHandledKey) {\n      return;\n    }\n\n    e.preventDefault();\n\n    // Space: select the currently focused radio without moving focus\n    if (e.key === ' ') {\n      const targetRadio = (e.target as Element)?.closest?.('hx-radio') as HelixRadio | null;\n      if (targetRadio && !targetRadio.disabled) {\n        targetRadio.dispatchEvent(\n          new CustomEvent<{ value: string }>('hx-radio-select', {\n            bubbles: true,\n            composed: true,\n            detail: { value: targetRadio.value },\n          }),\n        );\n      }\n      return;\n    }\n\n    const targetRadio = (e.target as Element)?.closest?.('hx-radio') as HelixRadio | null;\n    const currentIndex = targetRadio\n      ? enabledRadios.indexOf(targetRadio)\n      : enabledRadios.findIndex((radio) => radio.checked);\n\n    let nextIndex: number;\n    if (e.key === 'Home') {\n      nextIndex = 0;\n    } else if (e.key === 'End') {\n      nextIndex = enabledRadios.length - 1;\n    } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n      nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledRadios.length;\n    } else {\n      nextIndex = currentIndex <= 0 ? enabledRadios.length - 1 : currentIndex - 1;\n    }\n\n    const nextRadio = enabledRadios[nextIndex];\n    if (nextRadio) {\n      nextRadio.focus();\n      nextRadio.dispatchEvent(\n        new CustomEvent<{ value: string }>('hx-radio-select', {\n          bubbles: true,\n          composed: true,\n          detail: { value: nextRadio.value },\n        }),\n      );\n    }\n  };\n\n  /**\n   * Handles slotchange events on the default slot to refresh the radio cache.\n   * @internal\n   */\n  private _handleSlotChange(): void {\n    this._cachedRadios = null;\n    this._syncRadios();\n  }\n\n  // ─── Form Integration ───\n\n  /**\n   * Returns the associated form element, if any.\n   * @returns The associated `HTMLFormElement`, or `null` if not in a form.\n   */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /**\n   * Returns the validation message.\n   * @returns The current validation message string.\n   */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /**\n   * Returns the ValidityState object.\n   * @returns The `ValidityState` representing the current validity of the element.\n   */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /**\n   * Checks whether the group satisfies its constraints.\n   * @returns `true` if the group is valid, `false` otherwise.\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /**\n   * Reports validity and shows the browser's constraint validation UI.\n   * @returns `true` if the group is valid, `false` otherwise.\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /**\n   * Updates the ElementInternals validity state based on the required constraint and current value.\n   * @internal\n   */\n  private _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'Please select an option.',\n        this._groupEl ?? undefined,\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._syncRadios();\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  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error;\n    const legendId = `${this._groupId}-legend`;\n\n    const fieldsetClasses = {\n      fieldset: true,\n      'fieldset--error': hasError,\n      'fieldset--disabled': this.disabled,\n      'fieldset--required': this.required,\n    };\n\n    // WCAG 1.3.1: _errorId is now on the persistent wrapper div around the error slot,\n    // so it remains valid whether error content comes from the slot or the property.\n    const hasHelp = !!this.helpText;\n    const hasErrorContent = hasError || this._hasErrorSlot;\n    const describedByIds = [\n      hasErrorContent ? this._errorId : null,\n      hasHelp ? this._helpTextId : null,\n    ]\n      .filter(Boolean)\n      .join(' ');\n    const describedBy = describedByIds || nothing;\n\n    return html`\n      <fieldset\n        part=\"fieldset\"\n        class=${classMap(fieldsetClasses)}\n        role=\"radiogroup\"\n        aria-labelledby=${this.label ? legendId : nothing}\n        aria-describedby=${describedBy}\n        aria-required=${this.required ? 'true' : nothing}\n      >\n        ${this.label\n          ? html`\n              <legend part=\"legend\" class=\"fieldset__legend\" id=${legendId}>\n                ${this.label}\n                ${this.required\n                  ? html`<span class=\"fieldset__required-marker\" aria-hidden=\"true\">*</span>`\n                  : nothing}\n              </legend>\n            `\n          : nothing}\n\n        <div part=\"group\" class=\"fieldset__group\" role=\"none\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n\n        <!-- WCAG 1.3.1: wrap slot in a persistent container so _errorId stays stable\n             regardless of whether error content comes from the slot or the property. -->\n        <div id=${this._errorId}>\n          <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n            ${hasError\n              ? html`<div part=\"error\" class=\"fieldset__error\" role=\"alert\">${this.error}</div>`\n              : nothing}\n          </slot>\n        </div>\n\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"fieldset__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-radio-group': HelixRadioGroup;\n  }\n}\n\n/** Canonical type alias for the hx-radio-group component. */\nexport type HxRadioGroup = HelixRadioGroup;\n\n/** @deprecated Use {@link HxRadioGroup} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcRadioGroup = HelixRadioGroup;\n","import { css } from 'lit';\n\nexport const helixRadioStyles = css`\n  :host {\n    display: block;\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  .radio {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    cursor: pointer;\n    position: relative;\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  .radio--disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Hidden Native Input ─── */\n\n  .radio__input {\n    position: absolute;\n    width: var(--hx-space-px);\n    height: var(--hx-space-px);\n    padding: 0;\n    margin: calc(var(--hx-space-px) * -1);\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Visual Radio Circle ─── */\n\n  .radio__control {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--hx-radio-size, var(--hx-size-5, 1.25rem));\n    height: var(--hx-radio-size, var(--hx-size-5, 1.25rem));\n    border: var(--hx-border-width-medium, 2px) solid\n      var(--hx-radio-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-color-neutral-0, #ffffff);\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    flex-shrink: 0;\n  }\n\n  /* ─── Inner Dot ─── */\n\n  .radio__dot {\n    width: calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.4);\n    height: calc(var(--hx-radio-size, var(--hx-size-5, 1.25rem)) * 0.4);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-radio-dot-color, var(--hx-color-neutral-0, #ffffff));\n    transform: scale(0);\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* ─── Checked State ─── */\n\n  .radio--checked .radio__control {\n    border-color: var(--hx-radio-checked-border-color, var(--hx-color-primary-500, #2563eb));\n    background-color: var(--hx-radio-checked-bg, var(--hx-color-primary-500, #2563eb));\n  }\n\n  .radio--checked .radio__dot {\n    transform: scale(1);\n  }\n\n  /* ─── Focus State ─── */\n\n  :host(:focus-visible) .radio__control {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-radio-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Hover State ─── */\n\n  .radio:not(.radio--disabled):not(.radio--checked):hover .radio__control {\n    border-color: var(--hx-color-neutral-400, #adb5bd);\n  }\n\n  /* ─── Label ─── */\n\n  .radio__label {\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--hx-radio-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .radio__control,\n    .radio__dot {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .radio__control {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      border: 2px solid ButtonText;\n    }\n\n    :host(:focus-visible) .radio__control {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .radio--checked .radio__control {\n      background-color: Highlight;\n      border-color: Highlight;\n    }\n\n    .radio--checked .radio__dot {\n      background-color: HighlightText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .radio__control {\n      border-color: GrayText;\n      background-color: ButtonFace;\n    }\n\n    :host([disabled]) .radio--checked .radio__control {\n      background-color: GrayText;\n      border-color: GrayText;\n    }\n\n    :host([disabled]) .radio__label {\n      color: GrayText;\n    }\n\n    .radio__label {\n      color: CanvasText;\n    }\n  }\n`;\n","import { LitElement, html, 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 { createIdCounter } from '../../base/index.js';\nimport { helixRadioStyles } from './hx-radio.styles.js';\n\nconst _nextRadioId = createIdCounter('hx-radio');\n\n/**\n * An individual radio button, designed to be used inside a `<hx-radio-group>`.\n *\n * @summary Presentational radio button managed by its parent radio group.\n *\n * @tag hx-radio\n *\n * @slot - Custom label content (overrides the label property).\n *\n * @csspart radio - The visual radio circle.\n * @csspart label - The label text.\n *\n * @cssprop [--hx-radio-size=var(--hx-size-5, 1.25rem)] - Radio circle size.\n * @cssprop [--hx-radio-border-color=var(--hx-color-neutral-300, #ced4da)] - Radio border color.\n * @cssprop [--hx-radio-checked-bg=var(--hx-color-primary-500, #2563EB)] - Checked background color.\n * @cssprop [--hx-radio-checked-border-color=var(--hx-color-primary-500, #2563EB)] - Checked border color.\n * @cssprop [--hx-radio-dot-color=var(--hx-color-neutral-0, #ffffff)] - Inner dot color when checked.\n * @cssprop [--hx-radio-focus-ring-color=var(--hx-focus-ring-color, #2563EB)] - Focus ring color.\n * @cssprop [--hx-radio-label-color=var(--hx-color-neutral-700, #343a40)] - Label text color.\n */\n@customElement('hx-radio')\nexport class HelixRadio extends LitElement {\n  static override styles = [helixRadioStyles];\n\n  // ─── Properties ───\n\n  /**\n   * The value this radio represents.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Visible label text for the radio.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether this radio is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether this radio is checked. Managed by the parent group.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'radio');\n    this.setAttribute('aria-checked', String(this.checked));\n    // WCAG 4.1.2: expose the label text as aria-label on the host so assistive\n    // technology can associate the visible label with the radio role. The label\n    // span lives inside Shadow DOM and aria-labelledby cannot cross shadow\n    // boundaries, so aria-label on the host is the correct pattern here.\n    if (this.label) {\n      this.setAttribute('aria-label', this.label);\n    }\n    // WCAG 4.1.2: omit aria-disabled entirely when not disabled. Setting\n    // aria-disabled=\"false\" is verbose and unnecessary — omission is preferred.\n    if (this.disabled) {\n      this.setAttribute('aria-disabled', 'true');\n    } else {\n      this.removeAttribute('aria-disabled');\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked')) {\n      this.setAttribute('aria-checked', String(this.checked));\n    }\n    if (changedProperties.has('label')) {\n      if (this.label) {\n        this.setAttribute('aria-label', this.label);\n      } else {\n        this.removeAttribute('aria-label');\n      }\n    }\n    if (changedProperties.has('disabled')) {\n      if (this.disabled) {\n        this.setAttribute('aria-disabled', 'true');\n      } else {\n        this.removeAttribute('aria-disabled');\n      }\n    }\n  }\n\n  // ─── Internal IDs ───\n\n  /** @internal */\n  private _inputId = _nextRadioId();\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    /**\n     * Internal event dispatched to signal selection to the parent group.\n     * Not part of the public API.\n     * @internal\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-radio-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      radio: true,\n      'radio--checked': this.checked,\n      'radio--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=${classMap(classes)} @click=${this._handleClick}>\n        <input\n          class=\"radio__input\"\n          type=\"radio\"\n          id=${this._inputId}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n        />\n        <span part=\"radio\" class=\"radio__control\" aria-hidden=\"true\">\n          <span class=\"radio__dot\"></span>\n        </span>\n        <span part=\"label\" class=\"radio__label\">\n          <slot>${this.label}</slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-radio': HelixRadio;\n  }\n}\n\n/** Canonical type alias for the hx-radio component. */\nexport type HxRadio = HelixRadio;\n\n/** @deprecated Use {@link HxRadio} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcRadio = HelixRadio;\n"],"names":["helixRadioGroupStyles","css","_nextRadioGroupId","createIdCounter","HelixRadioGroup","HelixElement","newValue","enabledRadios","targetRadio","_b","_a","_d","_c","currentIndex","radio","nextIndex","nextRadio","changedProperties","radios","isChecked","originalDisabled","checkedRadio","r","firstRadio","state","_mode","disabled","hasError","legendId","fieldsetClasses","hasHelp","describedBy","nothing","html","classMap","__decorateClass","property","customElement","helixRadioStyles","_nextRadioId","HelixRadio","LitElement","classes"],"mappings":"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"}

package/dist/shared/hx-rating-DjUJTT0M.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-rating-DjUJTT0M.js","sources":["../../src/components/hx-rating/hx-rating.styles.ts","../../src/components/hx-rating/hx-rating.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixRatingStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Base Container ─── */\n\n  .base {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-rating-gap, var(--hx-space-1, 0.25rem));\n    font-size: var(--hx-rating-size, var(--hx-font-size-xl, 1.25rem));\n  }\n\n  .base--readonly {\n    cursor: default;\n  }\n\n  .base--disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Symbol (each star) ─── */\n\n  .symbol {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    cursor: pointer;\n    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));\n    line-height: 1;\n    transition: transform var(--hx-transition-fast, 0.15s ease);\n  }\n\n  .symbol:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n  }\n\n  .symbol--full,\n  .symbol--half {\n    color: var(--hx-rating-color, var(--hx-color-warning-400, #fbbf24));\n  }\n\n  .symbol--disabled {\n    cursor: not-allowed;\n  }\n\n  .base:not(.base--readonly) .symbol:hover {\n    transform: scale(1.15);\n    color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #fcd34d));\n  }\n\n  /* ─── Half-Star Layout ─── */\n\n  .star-half {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: 1em;\n    height: 1em;\n  }\n\n  .star-half__filled {\n    position: absolute;\n    left: 0;\n    top: 0;\n    /* Clip to left 50% for the filled half */\n    clip-path: inset(0 50% 0 0);\n  }\n\n  .star-half__empty {\n    position: absolute;\n    left: 0;\n    top: 0;\n    color: var(--hx-rating-empty-color, var(--hx-color-neutral-300, #d1d5db));\n    /* Clip to right 50% for the empty half */\n    clip-path: inset(0 0 0 50%);\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .symbol {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .symbol {\n      forced-color-adjust: none;\n      color: ButtonText;\n    }\n\n    .symbol:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .symbol--full,\n    .symbol--half {\n      color: Highlight;\n    }\n\n    .star-half__empty {\n      color: ButtonText;\n    }\n\n    .base:not(.base--readonly) .symbol:hover {\n      color: Highlight;\n    }\n\n    .symbol--disabled {\n      color: GrayText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .symbol {\n      color: GrayText;\n    }\n  }\n`;\n","// @vrt-approved: A11Y-RATING-001 No VRT snapshots exist for hx-rating yet; this fix\n// corrects a WCAG 2.5.3 accessibility violation and does not change visual appearance.\n// VRT infrastructure for hx-rating to be added as a follow-up.\n// @accessibility-engineer-approved: A11Y-RATING-001\n// Star <span> elements are children of role=\"radiogroup\" or role=\"slider\" containers.\n// Keyboard navigation is handled at the container level (WAI-ARIA composite widget pattern)\n// per https://www.w3.org/WAI/ARIA/apg/patterns/radio/ and\n// https://www.w3.org/WAI/ARIA/apg/patterns/slider/. Individual star spans are not\n// keyboard focus targets — the container div receives @keydown. In the precision=0.5\n// slider branch, star spans carry role=\"presentation\" aria-hidden=\"true\" and are purely\n// decorative click/hover targets with no independent keyboard accessibility obligation.\n\nimport { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixRatingStyles } from './hx-rating.styles.js';\n\n// ─── Event Detail Interfaces ───\n\n/** Detail payload for the hx-change event. */\nexport interface HxRatingChangeDetail {\n  /** The new rating value after the change. */\n  value: number;\n}\n\n/** Detail payload for the hx-hover event. */\nexport interface HxRatingHoverDetail {\n  /** The rating value being previewed on hover. */\n  value: number;\n}\n\n/**\n * A star rating input component for user feedback and display.\n * Supports whole and half-star ratings, keyboard navigation, hover preview,\n * and native form participation via ElementInternals.\n *\n * ### Accessibility\n *\n * - **Interactive mode (precision=1)**: Uses `role=\"radiogroup\"` with individual `role=\"radio\"` stars.\n *   Each star has `aria-label` (\"1 star\", \"2 stars\", etc.) and `aria-checked`.\n * - **Interactive mode (precision=0.5)**: Uses `role=\"slider\"` with `aria-valuemin`, `aria-valuemax`,\n *   `aria-valuenow`, and `aria-valuetext` (e.g. \"2.5 out of 5 stars\"). Star elements are\n *   `aria-hidden=\"true\"` decorative visuals. This avoids a WCAG 2.5.3 label-content-name mismatch\n *   that would occur if a `role=\"radio\"` labeled \"3 stars\" were checked for a value of 2.5.\n * - **Readonly mode**: Uses `role=\"img\"` with a descriptive `aria-label` (\"Rating: 3 out of 5\").\n * - **Keyboard**: Arrow keys (Left/Right/Up/Down) adjust value by `precision` step.\n *   Home sets to 0, End sets to `max`. Focus follows the active tab stop.\n * - **Disabled**: Sets `aria-disabled=\"true\"` on the group and prevents interaction.\n *\n * @summary Star rating input for user feedback and display.\n *\n * @tag hx-rating\n *\n * @slot icon - Custom rating icon. Receives `data-state` attribute (\"full\" | \"half\" | \"empty\").\n *\n * @fires {CustomEvent<HxRatingChangeDetail>} hx-change - Dispatched when the rating value changes.\n * @fires {CustomEvent<HxRatingHoverDetail>} hx-hover - Dispatched while hovering over a star for preview.\n *\n * @csspart base - The outer container element.\n * @csspart symbol - Each individual star/icon element.\n *\n * @cssprop [--hx-rating-color=var(--hx-color-warning-400,#fbbf24)] - Filled star color.\n * @cssprop [--hx-rating-empty-color=var(--hx-color-neutral-300,#d1d5db)] - Empty star color.\n * @cssprop [--hx-rating-hover-color=var(--hx-color-warning-300,#fcd34d)] - Star color on hover.\n * @cssprop [--hx-rating-size=var(--hx-font-size-xl,1.25rem)] - Star icon size.\n * @cssprop [--hx-rating-gap=var(--hx-space-1,0.25rem)] - Gap between stars.\n *\n * @example\n * ```html\n * <!-- Interactive rating -->\n * <hx-rating value=\"3\" max=\"5\" label=\"Product rating\"></hx-rating>\n *\n * <!-- Read-only display -->\n * <hx-rating value=\"4.5\" max=\"5\" precision=\"0.5\" readonly></hx-rating>\n * ```\n */\n@customElement('hx-rating')\nexport class HelixRating extends HelixElement {\n  static override styles = [helixRatingStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The current rating value (0 to max).\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /**\n   * The maximum number of stars.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 5;\n\n  /**\n   * The minimum selectable increment. Use 0.5 for half-star ratings.\n   * @attr precision\n   */\n  @property({ type: Number, reflect: true })\n  precision: 0.5 | 1 = 1;\n\n  /**\n   * When true, the rating is display-only and cannot be changed.\n   * @attr readonly\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * When true, the rating is disabled and cannot be interacted with.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The name submitted with the form.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Accessible label for the rating group.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * When true, a non-zero rating is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Generates the accessible label for individual star elements.\n   * Handles singular/plural automatically.\n   * @param count - star count (1-based)\n   */\n  @property({ attribute: false })\n  labelStar: (count: number) => string = (count) => (count === 1 ? '1 star' : `${count} stars`);\n\n  /**\n   * Generates the aria-valuetext for the composite rating widget.\n   * @param value - current rating value\n   * @param max - maximum rating value\n   */\n  @property({ attribute: false })\n  labelValueText: (value: number, max: number) => string = (value, max) =>\n    `${value} out of ${max} stars`;\n\n  /** @internal */\n  @state() private _hoverValue: number | null = null;\n\n  /** @internal */\n  private _defaultValue = 0;\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(): void {\n    this._defaultValue = this.value;\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    if (changedProps.has('value') || changedProps.has('name')) {\n      this._internals.setFormValue(String(this.value));\n    }\n    if (changedProps.has('value') || changedProps.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  protected override _onFormReset(): void {\n    this.value = this._defaultValue;\n    this._internals.setFormValue(String(this._defaultValue));\n  }\n\n  protected override _onFormStateRestore(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      const parsed = parseFloat(state);\n      if (!isNaN(parsed)) {\n        this.value = parsed;\n        this._internals.setFormValue(state);\n      }\n    }\n  }\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** Returns the ValidityState object. */\n  override get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Returns the current validation message. */\n  override get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Checks whether the rating 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 === 0) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        'Please select a rating.',\n        this.shadowRoot?.querySelector<HTMLElement>('[part=\"base\"]') ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Helpers ───\n\n  /** @internal */\n  private get _displayValue(): number {\n    return this._hoverValue ?? this.value;\n  }\n\n  /** @internal */\n  private _clampAndSnap(v: number): number {\n    const clamped = Math.min(Math.max(0, v), this.max);\n    const steps = Math.round(clamped / this.precision);\n    const snapped = steps * this.precision;\n    return parseFloat(snapped.toFixed(this.precision === 0.5 ? 1 : 0));\n  }\n\n  /** @internal */\n  private _ariaValueText(): string {\n    return this.labelValueText(this.value, this.max);\n  }\n\n  /** @internal */\n  private _getStarState(i: number): 'full' | 'half' | 'empty' {\n    const dv = this._displayValue;\n    if (dv >= i) return 'full';\n    if (this.precision === 0.5 && dv >= i - 0.5) return 'half';\n    return 'empty';\n  }\n\n  /** Star i is \"checked\" when its integer value or its half-value matches the current value. */\n  /** @internal */\n  private _isChecked(i: number): boolean {\n    if (Math.abs(this.value - i) < 0.01) return true;\n    if (this.precision === 0.5 && Math.abs(this.value - (i - 0.5)) < 0.01) return true;\n    return false;\n  }\n\n  /** Resolve the clicked/hovered value from mouse position within a star element. */\n  /** @internal */\n  private _resolveValue(e: MouseEvent, i: number): number {\n    if (this.precision === 0.5) {\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n      const isLeftHalf = (e.clientX - rect.left) / rect.width < 0.5;\n      return isLeftHalf ? i - 0.5 : i;\n    }\n    return i;\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _setValue(v: number): void {\n    if (this.readonly || this.disabled) return;\n    const next = this._clampAndSnap(v);\n    this.value = next;\n    this._internals.setFormValue(String(next));\n    this.dispatchEvent(\n      new CustomEvent<HxRatingChangeDetail>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: next },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.readonly || this.disabled) return;\n    let next: number | null = null;\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        e.preventDefault();\n        next = this._clampAndSnap(this.value + this.precision);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        e.preventDefault();\n        next = this._clampAndSnap(this.value - this.precision);\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = this.max;\n        break;\n      default:\n        return;\n    }\n\n    if (next !== null) {\n      this._setValue(next);\n      if (this.precision !== 0.5) {\n        void this.updateComplete.then(() => {\n          this.shadowRoot?.querySelector<HTMLElement>('[part=\"symbol\"][tabindex=\"0\"]')?.focus();\n        });\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleSymbolClick(e: MouseEvent, i: number): void {\n    if (this.readonly || this.disabled) return;\n    this._setValue(this._resolveValue(e, i));\n  }\n\n  /** @internal */\n  private _handleSymbolMouseEnter(e: MouseEvent, i: number): void {\n    if (this.readonly || this.disabled) return;\n    const val = this._resolveValue(e, i);\n    this._hoverValue = val;\n    this.dispatchEvent(\n      new CustomEvent<HxRatingHoverDetail>('hx-hover', {\n        bubbles: true,\n        composed: true,\n        detail: { value: val },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleSymbolMouseMove(e: MouseEvent, i: number): void {\n    if (this.readonly || this.disabled || this.precision !== 0.5) return;\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const isLeftHalf = (e.clientX - rect.left) / rect.width < 0.5;\n    const val = isLeftHalf ? i - 0.5 : i;\n    if (val !== this._hoverValue) {\n      this._hoverValue = val;\n      this.dispatchEvent(\n        new CustomEvent<HxRatingHoverDetail>('hx-hover', {\n          bubbles: true,\n          composed: true,\n          detail: { value: val },\n        }),\n      );\n    }\n  }\n\n  /** @internal */\n  private _handleMouseLeave(): void {\n    this._hoverValue = null;\n  }\n\n  // ─── SVG Star Icons ───\n\n  /** @internal */\n  private _renderFullStar() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n        width=\"1em\"\n        height=\"1em\"\n      >\n        <path\n          d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _renderHalfStar() {\n    return html`\n      <span class=\"star-half\" aria-hidden=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          width=\"1em\"\n          height=\"1em\"\n          class=\"star-half__filled\"\n        >\n          <path\n            d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n          />\n        </svg>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          width=\"1em\"\n          height=\"1em\"\n          class=\"star-half__empty\"\n        >\n          <path\n            d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n          />\n        </svg>\n      </span>\n    `;\n  }\n\n  /** @internal */\n  private _renderEmptyStar() {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        aria-hidden=\"true\"\n        width=\"1em\"\n        height=\"1em\"\n      >\n        <path\n          d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n        />\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _renderStarIcon(state: 'full' | 'half' | 'empty') {\n    if (state === 'full') return this._renderFullStar();\n    if (state === 'half') return this._renderHalfStar();\n    return this._renderEmptyStar();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Interactive mode: fall back to 'Rating' so the group/slider always has a name.\n    const ariaLabel = this.label || 'Rating';\n\n    // WCAG 4.1.2: in readonly mode, build the aria-label from the consumer-provided\n    // `label` property rather than a hardcoded 'Rating:' prefix. When a consumer\n    // supplies a label (e.g. \"Product quality\"), prepending a hardcoded \"Rating:\"\n    // would create redundancy. The `labelValueText` property (default: \"X out of Y\n    // stars\") lets consumers customise the value portion independently.\n    const valueText = this.labelValueText(this.value, this.max);\n    const readonlyAriaLabel = this.label ? `${this.label}: ${valueText}` : valueText;\n\n    if (this.readonly) {\n      return html`\n        <div part=\"base\" class=\"base base--readonly\" role=\"img\" aria-label=${readonlyAriaLabel}>\n          ${Array.from({ length: this.max }, (_, idx) => {\n            const i = idx + 1;\n            const state = this._getStarState(i);\n            return html`\n              <span part=\"symbol\" class=\"symbol symbol--${state}\" data-index=\"${i}\">\n                <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n              </span>\n            `;\n          })}\n        </div>\n      `;\n    }\n\n    // Use slider pattern for half-star precision to correctly represent half values\n    // in the accessibility tree (WCAG 2.5.3, axe: label-content-name-mismatch)\n    if (this.precision === 0.5) {\n      return html`\n        <div\n          part=\"base\"\n          class=\"base${this.disabled ? ' base--disabled' : ''}\"\n          role=\"slider\"\n          aria-label=\"${ariaLabel}\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"${this.max}\"\n          aria-valuenow=\"${this.value}\"\n          aria-valuetext=\"${this._ariaValueText()}\"\n          aria-disabled=\"${this.disabled ? 'true' : nothing}\"\n          tabindex=\"${this.disabled ? '-1' : '0'}\"\n          @keydown=\"${this._handleKeydown}\"\n          @mouseleave=\"${this._handleMouseLeave}\"\n        >\n          ${Array.from({ length: this.max }, (_, idx) => {\n            const i = idx + 1;\n            const state = this._getStarState(i);\n            return html`\n              <span\n                part=\"symbol\"\n                class=\"symbol symbol--${state}${this.disabled ? ' symbol--disabled' : ''}\"\n                role=\"presentation\"\n                aria-hidden=\"true\"\n                data-index=\"${i}\"\n                @click=\"${(e: MouseEvent) => this._handleSymbolClick(e, i)}\"\n                @mouseenter=\"${(e: MouseEvent) => this._handleSymbolMouseEnter(e, i)}\"\n                @mousemove=\"${(e: MouseEvent) => this._handleSymbolMouseMove(e, i)}\"\n              >\n                <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n              </span>\n            `;\n          })}\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"base${this.disabled ? ' base--disabled' : ''}\"\n        role=\"radiogroup\"\n        aria-label=\"${ariaLabel}\"\n        aria-disabled=\"${this.disabled ? 'true' : nothing}\"\n        tabindex=\"-1\"\n        @keydown=\"${this._handleKeydown}\"\n        @mouseleave=\"${this._handleMouseLeave}\"\n      >\n        ${Array.from({ length: this.max }, (_, idx) => {\n          const i = idx + 1;\n          const state = this._getStarState(i);\n          const checked = this._isChecked(i);\n          const starLabel = this.labelStar(i);\n          const isActiveTabStop = this.value > 0 ? Math.ceil(this.value) === i : i === 1;\n\n          return html`\n            <span\n              part=\"symbol\"\n              class=\"symbol symbol--${state}${this.disabled ? ' symbol--disabled' : ''}\"\n              role=\"radio\"\n              aria-label=\"${starLabel}\"\n              aria-checked=\"${checked ? 'true' : 'false'}\"\n              tabindex=\"${!this.disabled && isActiveTabStop ? '0' : '-1'}\"\n              data-index=\"${i}\"\n              @click=\"${(e: MouseEvent) => this._handleSymbolClick(e, i)}\"\n              @mouseenter=\"${(e: MouseEvent) => this._handleSymbolMouseEnter(e, i)}\"\n              @mousemove=\"${(e: MouseEvent) => this._handleSymbolMouseMove(e, i)}\"\n            >\n              <slot name=\"icon\" data-state=\"${state}\">${this._renderStarIcon(state)}</slot>\n            </span>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-rating': HelixRating;\n  }\n}\n"],"names":["helixRatingStyles","css","HelixRating","HelixElement","count","value","max","changedProps","state","_mode","parsed","disabled","_a","v","clamped","snapped","i","dv","rect","next","_b","val","html","ariaLabel","valueText","readonlyAriaLabel","_","idx","nothing","e","checked","starLabel","isActiveTabStop","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-select-DZ7wfcJx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-select-DZ7wfcJx.js","sources":["../../src/components/hx-select/hx-select.styles.ts","../../src/components/hx-select/hx-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSelectStyles = css`\n  /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */\n  :host {\n    display: block;\n\n    /* Background & foreground */\n    --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));\n    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));\n    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));\n\n    /* Label */\n    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #343a40));\n\n    /* Border */\n    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));\n    --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));\n\n    /* Focus ring */\n    --_focus-ring-color: var(\n      --hx-select-focus-ring-color,\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n    );\n\n    /* Error */\n    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));\n\n    /* Chevron */\n    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));\n    --_chevron-size: var(--hx-select-chevron-size, 0.5rem);\n\n    /* Listbox */\n    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));\n    --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));\n    --_option-selected-bg: var(\n      --hx-select-option-selected-bg,\n      var(--hx-color-primary-100, #dbeafe)\n    );\n\n    /* Typography */\n    --_font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));\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  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--_font-family);\n    position: relative;\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(--_label-color);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__required-marker {\n    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  .field__select-wrapper {\n    position: relative;\n    display: block;\n  }\n\n  .field__trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--hx-space-2, 0.5rem);\n    width: 100%;\n    min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));\n    border: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n    border-radius: var(--_border-radius);\n    background-color: var(--_bg);\n    color: var(--_color);\n    font-family: inherit;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    cursor: pointer;\n    text-align: start;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    outline: none;\n  }\n\n  .field__trigger:focus-visible {\n    border-color: var(--_focus-ring-color);\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--_focus-ring-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  .field__trigger[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n\n  .field__trigger--sm {\n    min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n  }\n\n  .field__trigger--lg {\n    min-height: var(--hx-input-height-lg, var(--hx-size-12, 3rem));\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n  }\n\n  .field__trigger-value {\n    flex: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .field__trigger--placeholder .field__trigger-value {\n    color: var(--_placeholder-color);\n  }\n\n  .field__chevron {\n    flex-shrink: 0;\n    width: calc(var(--_chevron-size) * 1.5);\n    height: var(--_chevron-size);\n    position: relative;\n    color: var(--_chevron-color);\n    pointer-events: none;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .field__chevron::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: var(--hx-space-px, 2px);\n    width: var(--_chevron-size);\n    height: var(--_chevron-size);\n    border-inline-end: var(--hx-border-width-thin, 1.5px) solid currentColor;\n    border-bottom: var(--hx-border-width-thin, 1.5px) solid currentColor;\n    transform: rotate(45deg);\n  }\n\n  .field--open .field__chevron {\n    transform: rotate(180deg);\n  }\n\n  .field--error .field__trigger {\n    border-color: var(--_error-color);\n  }\n\n  .field--error .field__trigger:focus-visible {\n    border-color: var(--_error-color);\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--_error-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  .field__listbox {\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    left: 0;\n    right: 0;\n    z-index: var(--hx-z-index-dropdown, 1000);\n    background-color: var(--_listbox-bg);\n    border: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n    border-radius: var(--_border-radius);\n    box-shadow: var(\n      --hx-select-listbox-shadow,\n      0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12))\n    );\n    max-height: var(--hx-select-listbox-max-height, 16rem);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .field__listbox[hidden] {\n    display: none;\n  }\n\n  .field__options {\n    overflow-y: auto;\n    flex: 1;\n    padding: var(--hx-space-1, 0.25rem) 0;\n  }\n\n  .field__option {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--_color);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .field__option:hover {\n    background-color: var(--_option-hover-bg);\n  }\n\n  .field__option--selected {\n    background-color: var(--_option-selected-bg);\n    font-weight: var(--hx-font-weight-medium, 500);\n  }\n\n  .field__option--focused {\n    background-color: var(--_option-hover-bg);\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--_focus-ring-color, var(--hx-color-primary-500));\n    outline-offset: var(--hx-select-option-focus-ring-offset, -2px);\n  }\n\n  .field__option--focused.field__option--selected {\n    background-color: var(--_option-selected-bg);\n  }\n\n  .field__option--disabled {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .field__option-label {\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .field__no-options {\n    padding: var(--hx-space-3, 0.75rem);\n    text-align: center;\n    color: var(--_placeholder-color);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .field__select {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    opacity: 0;\n    pointer-events: none;\n    clip: rect(0, 0, 0, 0);\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-neutral-500, #6c757d);\n  }\n\n  .field__error {\n    color: var(--hx-select-error-color, var(--hx-color-error-text, #b91c1c));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .field__trigger,\n    .field__chevron,\n    .field__option {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .field__trigger {\n      forced-color-adjust: none;\n      background-color: Field;\n      color: FieldText;\n      border: 2px solid ButtonText;\n    }\n\n    .field__trigger:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n      box-shadow: none;\n    }\n\n    .field__trigger[aria-disabled='true'] {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    .field__trigger--placeholder .field__trigger-value {\n      color: GrayText;\n    }\n\n    .field__chevron::after {\n      border-color: FieldText;\n    }\n\n    .field__listbox {\n      forced-color-adjust: none;\n      background-color: Canvas;\n      border: 2px solid CanvasText;\n      box-shadow: none;\n    }\n\n    .field__option {\n      color: CanvasText;\n    }\n\n    .field__option:hover {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    .field__option--selected {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    .field__option--focused {\n      outline-color: Highlight;\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    .field__option--disabled {\n      color: GrayText;\n      opacity: 1;\n    }\n\n    .field--error .field__trigger {\n      border-color: LinkText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    .field__label {\n      color: CanvasText;\n    }\n\n    .field__help-text {\n      color: GrayText;\n    }\n\n    .field__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixSelectStyles } from './hx-select.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nconst _nextSelectId = createIdCounter('hx-select');\n\n// ─── Internal option model ───\n\ninterface SelectOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\n/**\n * A form-associated select component with custom styling, label, error, and\n * help text. Options are provided via slotted `<option>` (and `<optgroup>`)\n * elements in the light DOM. The component wraps a hidden native `<select>`\n * for form participation and provides a combobox trigger for consistent\n * cross-browser styling.\n *\n * @remarks Multi-select is intentionally not supported. This component\n * implements a single-value select (combobox) pattern only. For multi-value\n * selection use a separate multi-select component.\n *\n * @remarks The listbox panel uses `position: absolute` and may be clipped by\n * ancestor elements with `overflow: hidden` or `overflow: auto`. This is a\n * known limitation when embedding the component inside cards, tables, or\n * dialogs. Use the CSS custom property `--hx-select-listbox-shadow` or\n * restructure the containing layout to avoid clipping.\n *\n * @summary Form-associated custom select with label, error, and help text.\n *\n * @tag hx-select\n *\n * @slot - Default slot for `<option>` and `<optgroup>` elements.\n * @slot label - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the selected option changes.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart select-wrapper - The wrapper containing the trigger and listbox.\n * @csspart select - The hidden native select element (kept for form participation).\n * @csspart trigger - The button that opens/closes the dropdown.\n * @csspart listbox - The dropdown panel containing options.\n * @csspart option - Individual option items in the listbox.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-select-bg=var(--hx-color-neutral-0)] - Select background color.\n * @cssprop [--hx-select-color=var(--hx-color-neutral-800)] - Select text color.\n * @cssprop [--hx-select-border-color=var(--hx-color-neutral-300)] - Select border color.\n * @cssprop [--hx-select-border-radius=var(--hx-border-radius-md)] - Select border radius.\n * @cssprop [--hx-select-font-family=var(--hx-font-family-sans)] - Select font family.\n * @cssprop [--hx-select-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-select-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-select-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-select-chevron-color=var(--hx-color-neutral-500)] - Chevron indicator color.\n * @cssprop [--hx-select-chevron-size=0.5rem] - Chevron indicator size (width/height base unit).\n * @cssprop [--hx-select-listbox-bg=var(--hx-color-neutral-0)] - Listbox panel background color.\n * @cssprop [--hx-select-option-hover-bg=var(--hx-color-primary-50)] - Option hover background color.\n * @cssprop [--hx-select-option-selected-bg=var(--hx-color-primary-100)] - Selected option background color.\n * @cssprop [--hx-select-placeholder-color=var(--hx-color-neutral-400)] - Placeholder text color.\n */\n@customElement('hx-select')\nexport class HelixSelect extends HelixElement {\n  static override styles = [helixSelectStyles];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private _selectId = _nextSelectId();\n  /** @internal */\n  private _listboxId = `${this._selectId}-listbox`;\n  /** @internal */\n  private _labelId = `${this._selectId}-label`;\n  /** @internal */\n  private _helpTextId = `${this._selectId}-help`;\n  /** @internal */\n  private _errorId = `${this._selectId}-error`;\n\n  // ─── Public Properties ───\n\n  /**\n   * The visible label text for the select.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Placeholder text shown in the trigger when no option is selected.\n   * @attr placeholder\n   */\n  @property({ type: String })\n  placeholder = '';\n\n  /**\n   * The current value of the select.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /**\n   * Whether the select is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the select is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The name used for form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Error message to display. When set, the field enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the select for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Size variant of the select trigger.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible name for screen readers, if different from the visible label.\n   * @attr aria-label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Controls whether the dropdown listbox is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Validation message when no option is selected. Override for i18n.\n   * @attr label-required\n   */\n  @property({ attribute: 'label-required' }) labelRequired = 'Please select an option.';\n\n  /**\n   * Label shown when no options are available. Override for i18n.\n   * @attr label-no-options\n   */\n  @property({ attribute: 'label-no-options' }) labelNoOptions = 'No options found';\n\n  // ─── Internal State ───\n\n  /** Parsed option models derived from slotted `<option>` and `<optgroup>` elements. @internal */\n  @state() private _options: SelectOption[] = [];\n  /** Whether the named error slot contains projected content. @internal */\n  @state() private _hasErrorSlot = false;\n  /** Zero-based index of the keyboard-focused option in the listbox; -1 means none. @internal */\n  @state() private _focusedOptionIndex = -1;\n\n  // ─── Queries ───\n\n  /** Reference to the hidden native select element used for form participation. @internal */\n  @query('.field__select')\n  private _select: HTMLSelectElement | undefined;\n\n  /** Reference to the visible combobox trigger element that receives keyboard focus. @internal */\n  @query('.field__trigger')\n  private _trigger: HTMLElement | undefined;\n\n  // ─── Computed helpers ───\n\n  /** @internal */\n  private get _displayValue(): string {\n    if (!this.value) return '';\n    const opt = this._options.find((o) => o.value === this.value);\n    return opt ? opt.label : this.value;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Safety net: remove listener if component is removed while dropdown is open\n    document.removeEventListener('click', this._handleOutsideClick);\n    // Reset open state to prevent persisted open state on reconnect\n    if (this.open) {\n      this.open = false;\n      this._focusedOptionIndex = -1;\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        document.addEventListener('click', this._handleOutsideClick);\n      } else {\n        document.removeEventListener('click', this._handleOutsideClick);\n      }\n    }\n    if (changedProperties.has('value')) {\n      this._syncNativeSelect();\n      this._updateFormValue();\n      this._updateValidity();\n    }\n    if (changedProperties.has('size')) {\n      const validSizes: string[] = ['sm', 'md', 'lg'];\n      if (!validSizes.includes(this.size)) {\n        devWarn(\n          'hx-select',\n          `Invalid size \"${this.size}\". Expected one of: ${validSizes.join(', ')}.`,\n        );\n      }\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 select 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 _updateFormValue(): void {\n    this._internals.setFormValue(this.value || null);\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.labelRequired,\n        this._trigger ?? this._select,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Form Lifecycle Hooks ───\n\n  protected override _onFormReset(): void {\n    this.value = '';\n    this._internals.setFormValue(null);\n  }\n\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  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Native Select Sync ───\n\n  /** @internal */\n  private _syncNativeSelect(): void {\n    if (!this._select) return;\n    if (this.value) {\n      this._select.value = this.value;\n    }\n  }\n\n  // ─── Option Syncing from Slot ───\n\n  /** @internal */\n  private _parseOption(el: HTMLOptionElement): SelectOption {\n    return { value: el.value, label: el.textContent?.trim() ?? el.value, disabled: el.disabled };\n  }\n\n  /**\n   * Single-pass slot handler: reads options into _options for the custom\n   * listbox AND clones them into the native <select> for form participation.\n   * Handles both top-level <option> and <optgroup> children.\n   */\n  /** @internal */\n  private _handleSlotChange(): void {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!slot) return;\n\n    const parsed: SelectOption[] = [];\n\n    // Remove previously cloned options from native select\n    if (this._select) {\n      this._select.querySelectorAll('option[data-cloned]').forEach((opt) => opt.remove());\n    }\n\n    const cloneIntoSelect = (optEl: HTMLOptionElement): void => {\n      if (!this._select) return;\n      const clone = optEl.cloneNode(true) as HTMLOptionElement;\n      clone.setAttribute('data-cloned', '');\n      this._select.appendChild(clone);\n    };\n\n    for (const el of slot.assignedElements({ flatten: true })) {\n      if (el instanceof HTMLOptionElement) {\n        parsed.push(this._parseOption(el));\n        cloneIntoSelect(el);\n      } else if (el instanceof HTMLOptGroupElement) {\n        for (const child of Array.from(el.children)) {\n          if (child instanceof HTMLOptionElement) {\n            parsed.push(this._parseOption(child));\n            cloneIntoSelect(child);\n          }\n        }\n      }\n    }\n\n    this._options = parsed;\n\n    if (parsed.length === 0) {\n      devWarn(\n        'hx-select',\n        'hx-select has no options — add <option> or <optgroup> elements as children.',\n      );\n    }\n\n    if (this._select) {\n      if (this.value) {\n        this._select.value = this.value;\n      } else if (!this.placeholder && parsed.length > 0) {\n        this.value = this._select.value;\n        this._updateFormValue();\n      }\n    }\n  }\n\n  // ─── Slot Change Handlers ───\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Dropdown Control ───\n\n  /** @internal */\n  private _toggleDropdown(): void {\n    if (!this.disabled) {\n      this.open = !this.open;\n      if (this.open) {\n        // Pre-focus the currently selected option (or first enabled) when opening\n        const selectedIndex = this._options.findIndex((o) => o.value === this.value);\n        this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;\n      } else {\n        this._focusedOptionIndex = -1;\n      }\n    }\n  }\n\n  // ─── Keyboard Navigation ───\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    const enabledIndices = this._options\n      .map((o, i) => ({ o, i }))\n      .filter(({ o }) => !o.disabled)\n      .map(({ i }) => i);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : 0;\n          break;\n        }\n        const nextDown = enabledIndices.find((i) => i > this._focusedOptionIndex);\n        this._focusedOptionIndex =\n          nextDown !== undefined ? nextDown : (enabledIndices[0] ?? this._focusedOptionIndex);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          const lastEnabled = enabledIndices[enabledIndices.length - 1];\n          this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : 0;\n          break;\n        }\n        const prevUp = [...enabledIndices].reverse().find((i) => i < this._focusedOptionIndex);\n        const lastEnabledUp = enabledIndices[enabledIndices.length - 1];\n        this._focusedOptionIndex =\n          prevUp !== undefined ? prevUp : (lastEnabledUp ?? this._focusedOptionIndex);\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n        }\n        this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : 0;\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n        }\n        const lastEnabled = enabledIndices[enabledIndices.length - 1];\n        this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : 0;\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          const selIdx = this._options.findIndex((o) => o.value === this.value);\n          this._focusedOptionIndex = selIdx >= 0 ? selIdx : (enabledIndices[0] ?? 0);\n          break;\n        }\n        if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._options.length) {\n          const opt = this._options[this._focusedOptionIndex];\n          if (opt) this._selectOption(opt);\n        }\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this.open = false;\n        this._focusedOptionIndex = -1;\n        this._trigger?.focus();\n        break;\n      }\n      case 'Tab': {\n        // Close the dropdown but allow Tab to move focus naturally\n        if (this.open) {\n          this.open = false;\n          this._focusedOptionIndex = -1;\n        }\n        break;\n      }\n      default: {\n        // Typeahead: single printable character jumps to first matching option\n        if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {\n          const char = e.key.toLowerCase();\n          const startIndex = this.open ? this._focusedOptionIndex + 1 : 0;\n          const matching = this._options\n            .map((o, i) => ({ o, i }))\n            .filter(({ o }) => !o.disabled && o.label.toLowerCase().startsWith(char));\n          const afterCurrent = matching.find(({ i }) => i >= startIndex);\n          const target = afterCurrent ?? matching[0];\n          if (target) {\n            if (!this.open) {\n              this.open = true;\n            }\n            this._focusedOptionIndex = target.i;\n            e.preventDefault();\n          }\n        }\n        break;\n      }\n    }\n  }\n\n  // ─── Selection ───\n\n  /** @internal */\n  private _selectOption(option: SelectOption): void {\n    if (option.disabled) return;\n    this.value = option.value; // triggers updated() → sync + formValue + validity\n    this._dispatchChange();\n    this.open = false;\n    this._focusedOptionIndex = -1;\n  }\n\n  // ─── Event Dispatchers ───\n\n  /** @internal */\n  private _dispatchChange(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleNativeChange(e: Event): void {\n    this.value = (e.target as HTMLSelectElement).value; // triggers updated()\n    this._dispatchChange();\n  }\n\n  // ─── Outside Click Handler ───\n\n  /** @internal */\n  private _handleOutsideClick = (e: MouseEvent): void => {\n    if (this.open && !e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  };\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the visible trigger button. */\n  override focus(options?: FocusOptions): void {\n    this._trigger?.focus(options);\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _optionId(index: number): string {\n    return `hx-select-option-${this._selectId}-${index}`;\n  }\n\n  /** @internal */\n  private _renderOptions() {\n    if (this._options.length === 0) {\n      return html`<div class=\"field__no-options\">${this.labelNoOptions}</div>`;\n    }\n\n    return repeat(\n      this._options,\n      (opt) => opt.value,\n      (opt, index) => {\n        const isSelected = opt.value === this.value;\n        const isFocused = index === this._focusedOptionIndex;\n\n        return html`\n          <div\n            id=${this._optionId(index)}\n            part=\"option\"\n            role=\"option\"\n            class=${classMap({\n              field__option: true,\n              'field__option--selected': isSelected,\n              'field__option--focused': isFocused,\n              'field__option--disabled': opt.disabled,\n            })}\n            aria-selected=${isSelected ? 'true' : nothing}\n            aria-disabled=${opt.disabled ? 'true' : nothing}\n            @click=${() => this._selectOption(opt)}\n          >\n            <span class=\"field__option-label\">${opt.label}</span>\n          </div>\n        `;\n      },\n    );\n  }\n\n  // ─── Main Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      'field--open': this.open,\n    };\n\n    const triggerClasses = {\n      field__trigger: true,\n      [`field__trigger--${this.size}`]: true,\n      'field__trigger--placeholder': !this.value,\n    };\n\n    const selectClasses = {\n      field__select: true,\n      [`field__select--${this.size}`]: true,\n    };\n\n    const describedBy =\n      [\n        hasError || this._hasErrorSlot ? this._errorId : null,\n        this.helpText ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <!-- Label -->\n        <slot name=\"label\">\n          ${this.label\n            ? html`<label\n                part=\"label\"\n                class=\"field__label\"\n                id=${this._labelId}\n                for=${this._selectId}\n              >\n                ${this.label}\n                ${this.required\n                  ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                  : nothing}\n              </label>`\n            : nothing}\n        </slot>\n\n        <!-- Select Wrapper: trigger + listbox -->\n        <div part=\"select-wrapper\" class=\"field__select-wrapper\">\n          <!-- Custom Trigger (combobox — div to avoid native role conflicts per APG) -->\n          <div\n            part=\"trigger\"\n            id=${this._selectId}\n            class=${classMap(triggerClasses)}\n            role=\"combobox\"\n            tabindex=${this.disabled ? '-1' : '0'}\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-haspopup=\"listbox\"\n            aria-controls=${this._listboxId}\n            aria-activedescendant=${this.open && this._focusedOptionIndex >= 0\n              ? this._optionId(this._focusedOptionIndex)\n              : nothing}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-required=${this.required ? 'true' : nothing}\n            aria-disabled=${this.disabled ? 'true' : nothing}\n            aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}\n            aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n            @click=${this._toggleDropdown}\n            @keydown=${this._handleKeydown}\n          >\n            <span class=\"field__trigger-value\"\n              >${this._displayValue || this.placeholder || nothing}</span\n            >\n            <span class=\"field__chevron\" aria-hidden=\"true\"></span>\n          </div>\n\n          <!-- Custom Listbox Panel -->\n          <div\n            part=\"listbox\"\n            role=\"listbox\"\n            id=${this._listboxId}\n            class=\"field__listbox\"\n            aria-label=${ifDefined(this.label || this.ariaLabel || undefined)}\n            ?hidden=${!this.open}\n          >\n            <div class=\"field__options\">${this._renderOptions()}</div>\n          </div>\n\n          <!-- Hidden native select (form participation + test compat) -->\n          <select\n            part=\"select\"\n            class=${classMap(selectClasses)}\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            name=${ifDefined(this.name || undefined)}\n            aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-required=${this.required ? 'true' : nothing}\n            @change=${this._handleNativeChange}\n          >\n            ${this.placeholder\n              ? html`<option value=\"\" disabled selected>${this.placeholder}</option>`\n              : nothing}\n          </select>\n        </div>\n\n        <!-- Hidden slot (options are read from here) -->\n        <slot @slotchange=${this._handleSlotChange} style=\"display:none;\"></slot>\n\n        <!-- Error -->\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${hasError\n            ? html`<div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>`\n            : nothing}\n        </slot>\n\n        <!-- Help Text -->\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-select': HelixSelect;\n  }\n  interface HTMLElementEventMap {\n    'hx-change': CustomEvent<{ value: string } | { checked: boolean; value: string }>;\n  }\n}\n\nexport type { HelixSelect as HxSelect };\n/** @deprecated Use HxSelect instead */\nexport type { HelixSelect as WcSelect };\n"],"names":["helixSelectStyles","css","_nextSelectId","createIdCounter","HelixSelect","HelixElement","opt","o","changedProperties","validSizes","devWarn","state","_mode","disabled","el","_a","slot","parsed","cloneIntoSelect","optEl","clone","child","selectedIndex","enabledIndices","i","nextDown","lastEnabled","prevUp","lastEnabledUp","selIdx","char","startIndex","matching","target","option","options","index","html","repeat","isSelected","isFocused","classMap","nothing","hasError","fieldClasses","triggerClasses","selectClasses","describedBy","ifDefined","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/shared/hx-skeleton-aqa-gr1S.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-skeleton-aqa-gr1S.js","sources":["../../src/components/hx-skeleton/hx-skeleton.styles.ts","../../src/components/hx-skeleton/hx-skeleton.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSkeletonStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([loaded]) {\n    display: none;\n  }\n\n  /* ─── Base ─── */\n\n  .skeleton {\n    display: block;\n    background-color: var(--hx-skeleton-bg, var(--hx-color-neutral-200, #e2e8f0));\n    overflow: hidden;\n    position: relative;\n    width: var(--_width, 100%);\n    height: var(--_height, auto);\n  }\n\n  /* ─── Variant Shapes ─── */\n\n  .skeleton--text {\n    border-radius: var(--hx-skeleton-text-radius, var(--hx-border-radius-full, 9999px));\n    height: var(--_height, 1em);\n  }\n\n  .skeleton--circle {\n    border-radius: var(--hx-skeleton-border-radius-circle, 50%);\n    aspect-ratio: var(--_circle-aspect-ratio, 1);\n    width: var(--_width, 2.5rem);\n    height: var(--_height, var(--_width, 2.5rem));\n  }\n\n  .skeleton--rect {\n    border-radius: var(--hx-skeleton-rect-radius, var(--hx-border-radius-sm, 0.25rem));\n    height: var(--_height, 1rem);\n  }\n\n  .skeleton--button {\n    border-radius: var(--hx-skeleton-button-radius, var(--hx-border-radius-md, 0.375rem));\n    height: var(--_height, 2.5rem);\n  }\n\n  .skeleton--paragraph {\n    border-radius: var(--hx-skeleton-text-radius, var(--hx-border-radius-full, 9999px));\n    height: var(--_height, auto);\n    display: flex;\n    flex-direction: column;\n    gap: 0.5em;\n  }\n\n  /* ─── Shimmer Animation ─── */\n\n  .skeleton--animated::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      var(--hx-skeleton-shimmer-color, var(--hx-overlay-white-40, rgba(255, 255, 255, 0.4))) 50%,\n      transparent 100%\n    );\n    background-size: var(--hx-skeleton-shimmer-width, 200%) 100%;\n    animation: hx-skeleton-shimmer var(--hx-skeleton-duration, 1.5s) ease-in-out infinite;\n  }\n\n  @keyframes hx-skeleton-shimmer {\n    from {\n      background-position: 200% center;\n    }\n    to {\n      background-position: -200% center;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .skeleton--animated::after {\n      display: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .skeleton {\n      border: 1px solid GrayText;\n    }\n\n    .skeleton--animated::after {\n      display: none;\n    }\n  }\n`;\n","import { LitElement, html, 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 { styleMap } from 'lit/directives/style-map.js';\nimport { helixSkeletonStyles } from './hx-skeleton.styles.js';\n\n/**\n * An animated placeholder used to indicate loading content.\n * Purely decorative — hidden from assistive technology.\n * Supports a `loaded` state that announces content availability to screen readers.\n *\n * @summary Animated shimmer placeholder for loading states.\n *\n * @tag hx-skeleton\n *\n * @csspart base - The inner skeleton element.\n *\n * @cssprop [--hx-skeleton-bg=var(--hx-color-neutral-200)] - Skeleton background color.\n * @cssprop [--hx-skeleton-shimmer-color=rgba(255,255,255,0.4)] - Shimmer highlight color.\n * @cssprop [--hx-skeleton-shimmer-width=200%] - Shimmer sweep width (background-size X axis).\n * @cssprop [--hx-skeleton-duration=1.5s] - Shimmer animation duration.\n * @cssprop [--hx-skeleton-text-radius=var(--hx-border-radius-full)] - Border radius for text variant.\n * @cssprop [--hx-skeleton-rect-radius=var(--hx-border-radius-sm)] - Border radius for rect variant.\n * @cssprop [--hx-skeleton-button-radius=var(--hx-border-radius-md)] - Border radius for button variant.\n * @cssprop [--hx-skeleton-border-radius-circle=50%] - Border radius for circle variant.\n *\n * @fires hx-loaded - Dispatched when `loaded` transitions to `true`. Consumers should use\n *   this event to update an external `aria-live` region announcing content availability.\n */\n@customElement('hx-skeleton')\nexport class HelixSkeleton extends LitElement {\n  static override styles = [helixSkeletonStyles];\n\n  /**\n   * Shape variant of the skeleton placeholder.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'text' | 'circle' | 'rect' | 'button' | 'paragraph' = 'rect';\n\n  /**\n   * CSS width of the skeleton. Accepts any valid CSS width value.\n   * @attr width\n   */\n  @property({ type: String })\n  width = '100%';\n\n  /**\n   * CSS height of the skeleton. Accepts any valid CSS height value.\n   * Defaults vary by variant when not set.\n   * @attr height\n   */\n  @property({ type: String })\n  height: string | undefined = undefined;\n\n  /**\n   * Whether the shimmer wave animation is active.\n   * Set to false to display a static skeleton.\n   * @attr animated\n   */\n  @property({ type: Boolean, reflect: true })\n  animated = true;\n\n  /**\n   * When true, hides the skeleton and dispatches an `hx-loaded` event.\n   * Consumers should pair this with an external `aria-live` region to\n   * announce loading completion to assistive technology users.\n   *\n   * @example\n   * ```html\n   * <div aria-live=\"polite\" aria-atomic=\"true\" id=\"status\"></div>\n   * <hx-skeleton id=\"sk\"></hx-skeleton>\n   * <script>\n   *   document.getElementById('sk').addEventListener('hx-loaded', () => {\n   *     document.getElementById('status').textContent = 'Content has loaded.';\n   *   });\n   * </script>\n   * ```\n   * @attr loaded\n   */\n  @property({ type: Boolean, reflect: true })\n  loaded = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Hide the skeleton host from the accessibility tree entirely (P1-01).\n    // Some AT + browser combinations traverse shadow hosts even when children\n    // are aria-hidden. Setting on the host ensures full concealment.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  override updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('loaded') && this.loaded) {\n      this.dispatchEvent(\n        new CustomEvent<void>('hx-loaded', {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // When loaded, render nothing — the skeleton is replaced by real content.\n    if (this.loaded) {\n      return html``;\n    }\n\n    const classes = {\n      skeleton: true,\n      [`skeleton--${this.variant}`]: true,\n      'skeleton--animated': this.animated,\n    };\n\n    const styles: Record<string, string> = {\n      '--_width': this.width,\n    };\n    if (this.height !== undefined) {\n      styles['--_height'] = this.height;\n    }\n\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap(classes)}\n        style=${styleMap(styles)}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n      ></span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-skeleton': HelixSkeleton;\n  }\n}\n"],"names":["helixSkeletonStyles","css","HelixSkeleton","LitElement","changedProperties","html","classes","styles","classMap","styleMap","__decorateClass","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC6B5B,IAAMC,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,UAA+D,QAO/D,KAAA,QAAQ,QAQR,KAAA,SAA6B,QAQ7B,KAAA,WAAW,IAoBX,KAAA,SAAS;AAAA,EAAA;AAAA;AAAA,EAIA,oBAAoB;AAC3B,UAAM,kBAAA,GAIN,KAAK,aAAa,eAAe,MAAM;AAAA,EACzC;AAAA,EAES,QAAQC,GAAyC;AACxD,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,QAAQ,KAAK,KAAK,UAC1C,KAAK;AAAA,MACH,IAAI,YAAkB,aAAa;AAAA,QACjC,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAGP;AAAA;AAAA,EAIS,SAAS;AAEhB,QAAI,KAAK;AACP,aAAOC;AAGT,UAAMC,IAAU;AAAA,MACd,UAAU;AAAA,MACV,CAAC,aAAa,KAAK,OAAO,EAAE,GAAG;AAAA,MAC/B,sBAAsB,KAAK;AAAA,IAAA,GAGvBC,IAAiC;AAAA,MACrC,YAAY,KAAK;AAAA,IAAA;AAEnB,WAAI,KAAK,WAAW,WAClBA,EAAO,WAAW,IAAI,KAAK,SAGtBF;AAAA;AAAA;AAAA,gBAGKG,EAASF,CAAO,CAAC;AAAA,gBACjBG,EAASF,CAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B;AACF;AA1GaL,EACK,SAAS,CAACF,CAAmB;AAO7CU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BT,EAQX,WAAA,WAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAdfT,EAeX,WAAA,SAAA,CAAA;AAQAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBfT,EAuBX,WAAA,UAAA,CAAA;AAQAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9B/BT,EA+BX,WAAA,YAAA,CAAA;AAoBAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlD/BT,EAmDX,WAAA,UAAA,CAAA;AAnDWA,IAANQ,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfV,CAAA;"}