@helixui/library 3.8.0 → 3.9.0-next.150

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-rating-BGK4AxvI.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-border-strong, #66787b));\n    line-height: 1;\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .symbol:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #0f7078);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  .symbol--full,\n  .symbol--half {\n    color: var(--hx-rating-color, var(--hx-color-warning-400, #da904f));\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, #eeb383));\n  }\n\n  /* ─── Star Glyph (hx-icon) Sizing ─── */\n\n  .star-glyph {\n    --hx-icon-size: 1em;\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-border-strong, #66787b));\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 '../hx-icon/hx-icon.js';\nimport { HelixElement } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixRatingStyles } from './hx-rating.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.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 * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-warning-400] - Color.\n * @cssprop [--hx-color-warning-300] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n *\n * @aaa-certified 2026-05-09\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-rating/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow; activate=Space; disabled-suppresses=true\n * @aria-pattern radiogroup\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated true\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-rating\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-rating')\nexport class HelixRating extends FormMixin(HelixElement) {\n  static override styles = [helixRatingStyles, forcedColorsInteractive];\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    super.updated(changedProps);\n    if (changedProps.has('value') || changedProps.has('name')) {\n      this._internals.setFormValue(String(this.value));\n    }\n  }\n\n  protected override _onFormReset(): void {\n    this.value = this._defaultValue;\n    this._internals.setFormValue(String(this._defaultValue));\n    this._resetInteractionState();\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  /** @internal */\n  override _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._handleInteractionInput();\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`<hx-icon\n      class=\"star-glyph\"\n      library=\"helix\"\n      name=\"star-filled\"\n      aria-hidden=\"true\"\n    ></hx-icon>`;\n  }\n\n  /** @internal */\n  private _renderHalfStar() {\n    return html`\n      <span class=\"star-half\" aria-hidden=\"true\">\n        <hx-icon\n          class=\"star-glyph star-half__filled\"\n          library=\"helix\"\n          name=\"star-filled\"\n          aria-hidden=\"true\"\n        ></hx-icon>\n        <hx-icon\n          class=\"star-glyph star-half__empty\"\n          library=\"helix\"\n          name=\"star-outline\"\n          aria-hidden=\"true\"\n        ></hx-icon>\n      </span>\n    `;\n  }\n\n  /** @internal */\n  private _renderEmptyStar() {\n    return html`<hx-icon\n      class=\"star-glyph\"\n      library=\"helix\"\n      name=\"star-outline\"\n      aria-hidden=\"true\"\n    ></hx-icon>`;\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","FormMixin","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","forcedColorsInteractive","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-slider-Blmv_rwS.js → hx-slider-CkOk5BCY.js}

@@ -1,15 +1,15 @@
-import { css as b, nothing as m, html as h } from "lit";
-import { property as l, state as c, query as v, customElement as _ } from "lit/decorators.js";
-import { classMap as x } from "lit/directives/class-map.js";
+import { css as b, nothing as p, html as h } from "lit";
+import { property as l, state as m, query as v, customElement as _ } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-import { live as f } from "lit/directives/live.js";
-import { styleMap as p } from "lit/directives/style-map.js";
+import { live as x } from "lit/directives/live.js";
+import { styleMap as c } from "lit/directives/style-map.js";
 import { F as g } from "./FormMixin-B8PXk5RQ.js";
 import { f as y } from "./forced-colors-CTEDFRGa.js";
 import { d as w } from "./dev-warn-YlwPHjtX.js";
 import { H as S } from "./helix-element-BNEYeiys.js";
 import { c as k } from "./id-counter-DuX8vsui.js";
-const z = b`
+const $ = b`
   :host {
     display: block;
   }
@@ -302,10 +302,10 @@ const z = b`
     );
   }
 `;
-var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, s = (e, t, a, r) => {
+var z = Object.defineProperty, T = Object.getOwnPropertyDescriptor, s = (e, t, a, r) => {
   for (var o = r > 1 ? void 0 : r ? T(t, a) : t, n = e.length - 1, d; n >= 0; n--)
     (d = e[n]) && (o = (r ? d(t, a, o) : d(o)) || o);
-  return r && o && $(t, a, o), o;
+  return r && o && z(t, a, o), o;
 };
 const C = k("hx-slider");
 let i = class extends g(S) {
@@ -354,10 +354,70 @@ let i = class extends g(S) {
     e.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
   }
   // ─── Form Integration ───
+  /**
+   * Constraint validation: surfaces native `validity` flags through
+   * `ElementInternals.setValidity()` so the slider participates in
+   * `form.checkValidity()` / `form.reportValidity()`.
+   *
+   * Flags applied (in priority order):
+   *   - `rangeUnderflow` when `value < min`.
+   *   - `rangeOverflow` when `value > max`.
+   *   - `stepMismatch` when `step` is finite/positive and `value` is not
+   *     aligned to `min + n*step` within `step / 1000` floating-point
+   *     tolerance.
+   *
+   * Note: a `required` flag is intentionally NOT exposed on the slider
+   * public API. The `value` property defaults to `0` (a numerically valid
+   * value), so a `required` slider cannot meaningfully report
+   * `valueMissing` without an additional "user-touched" interaction
+   * tracker — exposing the flag would advertise validation behavior the
+   * leaf component cannot deliver. Consumers needing required-on-touch
+   * semantics should wire that at the form level rather than the leaf.
+   *
+   * The validity anchor is the native range input so browser
+   * `reportValidity()` focuses the correct element. If the input has not
+   * yet rendered (firstUpdated has not run), the anchor is omitted.
+   *
+   * Called automatically by `FormMixin.updated()` after every Lit cycle.
+   * @internal
+   */
+  _updateValidity() {
+    const e = this._input, t = this.value;
+    if (typeof t == "number" && Number.isFinite(t)) {
+      if (t < this.min) {
+        this._internals.setValidity(
+          { rangeUnderflow: !0 },
+          `Value must be at least ${this.min}.`,
+          e ?? void 0
+        );
+        return;
+      }
+      if (t > this.max) {
+        this._internals.setValidity(
+          { rangeOverflow: !0 },
+          `Value must be at most ${this.max}.`,
+          e ?? void 0
+        );
+        return;
+      }
+      if (Number.isFinite(this.step) && this.step > 0) {
+        const a = t - this.min, r = Math.round(a / this.step) * this.step, o = this.step / 1e3;
+        if (Math.abs(a - r) > o) {
+          this._internals.setValidity(
+            { stepMismatch: !0 },
+            `Value must be a multiple of ${this.step} starting from ${this.min}.`,
+            e ?? void 0
+          );
+          return;
+        }
+      }
+    }
+    this._internals.setValidity({});
+  }
   /** @internal */
   _onFormReset() {
     const e = this._clamp(this._defaultValue ?? this.min);
-    this.value = e, this._internals.setFormValue(String(e)), this._resetInteractionState();
+    this.value = e, this._internals.setFormValue(String(e)), this._resetInteractionState(), this._updateValidity();
   }
   /** @internal */
   _onFormStateRestore(e, t) {
@@ -430,7 +490,7 @@ let i = class extends g(S) {
       "slider--has-ticks": this.showTicks
     }, n = [this.helpText || this._hasHelpSlot ? this._helpId : null].filter(Boolean).join(" ") || void 0;
     return h`
-      <div part="slider" class=${x(o)}>
+      <div part="slider" class=${f(o)}>
         <!-- Label row -->
         <div class="slider__label-row">
           ${a ? h`<label
@@ -441,7 +501,7 @@ let i = class extends g(S) {
               >
                 <slot name="label" @slotchange=${this._handleLabelSlotChange}>${this.label}</slot>
               </label>` : h`<slot name="label" @slotchange=${this._handleLabelSlotChange}></slot>`}
-          ${this.showValue ? h`<span part="value-display" class="slider__value-display"> ${this.value} </span>` : m}
+          ${this.showValue ? h`<span part="value-display" class="slider__value-display"> ${this.value} </span>` : p}
         </div>
 
         <!-- Track -->
@@ -450,14 +510,14 @@ let i = class extends g(S) {
             <div
               part="fill"
               class="slider__fill"
-              style=${p({ "--_fill-ratio": String(e / 100) })}
+              style=${c({ "--_fill-ratio": String(e / 100) })}
             ></div>
 
             <input
               class="slider__input"
               id=${this._sliderId}
               type="range"
-              .value=${f(String(this.value))}
+              .value=${x(String(this.value))}
               min=${this.min}
               max=${this.max}
               step=${this.step}
@@ -475,7 +535,7 @@ let i = class extends g(S) {
             <span
               part="thumb"
               class="slider__thumb-visual"
-              style=${p({ "--fill-pct": String(e) })}
+              style=${c({ "--fill-pct": String(e) })}
               aria-hidden="true"
             ></span>
           </div>
@@ -487,10 +547,10 @@ let i = class extends g(S) {
       (d) => h`<span
                     part="tick"
                     class="slider__tick"
-                    style=${p({ left: `${d}%` })}
+                    style=${c({ left: `${d}%` })}
                   ></span>`
     )}
-            </div>` : m}
+            </div>` : p}
 
         <!-- Range labels -->
         ${r ? h`<div class="slider__range-labels">
@@ -507,14 +567,14 @@ let i = class extends g(S) {
              regardless of whether help content comes from the slot or the property. -->
         <div id=${this._helpId}>
           <slot name="help-text" @slotchange=${this._handleHelpSlotChange}>
-            ${this.helpText ? h`<div part="help-text" class="slider__help-text">${this.helpText}</div>` : m}
+            ${this.helpText ? h`<div part="help-text" class="slider__help-text">${this.helpText}</div>` : p}
           </slot>
         </div>
       </div>
     `;
   }
 };
-i.styles = [z, y];
+i.styles = [$, y];
 i.formAssociated = !0;
 s([
   l({ type: String, reflect: !0 })
@@ -553,16 +613,16 @@ s([
   l({ type: String, attribute: "aria-valuetext" })
 ], i.prototype, "valueText", 2);
 s([
-  c()
+  m()
 ], i.prototype, "_hasLabelSlot", 2);
 s([
-  c()
+  m()
 ], i.prototype, "_hasMinLabelSlot", 2);
 s([
-  c()
+  m()
 ], i.prototype, "_hasMaxLabelSlot", 2);
 s([
-  c()
+  m()
 ], i.prototype, "_hasHelpSlot", 2);
 s([
   v(".slider__input")
@@ -573,4 +633,4 @@ i = s([
 export {
   i as H
 };
-//# sourceMappingURL=hx-slider-Blmv_rwS.js.map
+//# sourceMappingURL=hx-slider-CkOk5BCY.js.map

package/dist/shared/{hx-slider-Blmv_rwS.js.map → hx-slider-CkOk5BCY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-slider-Blmv_rwS.js","sources":["../../src/components/hx-slider/hx-slider.styles.ts","../../src/components/hx-slider/hx-slider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSliderStyles = 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  /* ─── Container ─── */\n\n  .slider {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-slider-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Label Row ─── */\n\n  .slider__label-row {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .slider__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-slider-label-color, var(--hx-color-text-strong, #202b39));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .slider__value-display {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #313e4b));\n    line-height: var(--hx-line-height-normal, 1.5);\n    font-variant-numeric: tabular-nums;\n    min-width: var(--hx-size-8, 2rem);\n    text-align: end;\n  }\n\n  /* ─── Track Container ─── */\n\n  .slider__track-container {\n    position: relative;\n    width: 100%;\n  }\n\n  .slider__track {\n    position: relative;\n    width: 100%;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #d6dbd5));\n    overflow: visible;\n  }\n\n  /* ─── Size: sm ─── */\n\n  .slider--sm .slider__track {\n    height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));\n  }\n\n  .slider--sm .slider__input {\n    height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));\n  }\n\n  /* ─── Size: md ─── */\n\n  .slider--md .slider__track {\n    height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));\n  }\n\n  .slider--md .slider__input {\n    height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));\n  }\n\n  /* ─── Size: lg ─── */\n\n  .slider--lg .slider__track {\n    height: var(--hx-slider-track-height-lg, var(--hx-space-2, 0.5rem));\n  }\n\n  .slider--lg .slider__input {\n    height: var(--hx-slider-track-height-lg, var(--hx-space-2, 0.5rem));\n  }\n\n  /* ─── Fill ─── */\n\n  .slider__fill {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #429797));\n    pointer-events: none;\n    transform-origin: left center;\n    transform: scaleX(var(--_fill-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* Suppress fill animation on initial render — only animate on user interaction */\n  :host(:not([data-ready])) .slider__fill {\n    transition: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .slider__fill {\n      transition: none;\n    }\n  }\n\n  /* ─── Native Range Input ─── */\n\n  .slider__input {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    opacity: 0;\n    cursor: pointer;\n    -webkit-appearance: none;\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: none;\n    /* Expand the hit area so the thumb meets WCAG 2.5.8 touch target (44px).\n       The input's total height = track height + 2 * padding-block. With 0.75rem\n       (~12px) padding on each side and a track of ~6px, the total target area is\n       ~30px. We increase to 1rem (~16px) per side for a ~38px minimum, supplemented\n       by the visual thumb size. */\n    padding-block: var(--hx-slider-input-padding-block, 1rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n  }\n\n  /* In forced-color mode, restore native outline so the input remains focusable */\n  @media (forced-colors: active) {\n    .slider__input {\n      outline: revert;\n      opacity: 1;\n    }\n    .slider__input:focus-visible {\n      outline: 2px solid ButtonText;\n    }\n  }\n\n  .slider__input:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Thumb (visual, :before on a wrapper or via ::after on track) ─── */\n  /*\n   * The native thumb is hidden (opacity 0 on the input). We render a visible\n   * thumb element positioned by --fill-pct (a raw 0–100 number set in JS).\n   *\n   * Correct alignment formula keeps the thumb centered within the track at\n   * both extremes, preventing the left/right halves from clipping outside:\n   *   left = fillPct% * (1 – thumbSize/100%) + thumbSize * (1 – fillPct/100)\n   * Simplified: left = calc(var(--fill-pct,0)*1% + var(--_thumb-size)*(1 - var(--fill-pct,0)/100))\n   * Combined with translate(-50%,-50%) this places the thumb center correctly\n   * at every position from min to max.\n   */\n\n  .slider__thumb-visual {\n    position: absolute;\n    top: 50%;\n    /* Corrected position: thumb stays within track at all fill values */\n    left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));\n    transform: translate(-50%, -50%);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));\n    border: var(--hx-slider-thumb-border-width, 2px) solid\n      var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #429797));\n    box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n    pointer-events: none;\n    transition:\n      box-shadow var(--hx-transition-fast, 150ms ease),\n      transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .slider__thumb-visual {\n      transition: none;\n    }\n  }\n\n  .slider__input:focus-visible ~ .slider__thumb-visual {\n    box-shadow:\n      0 0 0 var(--hx-focus-ring-width, 2px)\n        var(--hx-slider-focus-ring-color, var(--hx-focus-ring-color, #0f7078)),\n      var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n  }\n\n  /* ─── Thumb sizes ─── */\n\n  .slider--sm .slider__thumb-visual {\n    --_thumb-size: var(--hx-slider-thumb-size-sm, var(--hx-size-3, 0.75rem));\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n  }\n\n  .slider--md .slider__thumb-visual {\n    --_thumb-size: var(--hx-slider-thumb-size-md, var(--hx-size-4, 1rem));\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n  }\n\n  .slider--lg .slider__thumb-visual {\n    --_thumb-size: var(--hx-slider-thumb-size-lg, var(--hx-size-5, 1.25rem));\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n  @media (forced-colors: active) {\n    .slider__fill {\n      background-color: Highlight;\n    }\n    .slider__track {\n      background-color: ButtonFace;\n      border: 1px solid ButtonText;\n    }\n    .slider__thumb-visual {\n      background-color: ButtonText;\n      border-color: ButtonText;\n    }\n    .slider__input:focus-visible ~ .slider__thumb-visual {\n      outline: 2px solid Highlight;\n    }\n  }\n\n  /* ─── Ticks ─── */\n\n  .slider__ticks {\n    position: relative;\n    width: 100%;\n    height: var(--hx-space-2, 0.5rem);\n    margin-top: var(--hx-space-1, 0.25rem);\n  }\n\n  .slider__tick {\n    position: absolute;\n    top: 0;\n    width: var(--hx-border-width-thin, 1px);\n    height: 100%;\n    background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #66787b));\n    transform: translateX(-50%);\n  }\n\n  /* ─── Range Labels ─── */\n\n  .slider__range-labels {\n    display: flex;\n    justify-content: space-between;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #4a5362));\n    line-height: var(--hx-line-height-normal, 1.5);\n    margin-top: var(--hx-space-0-5, 0.125rem);\n  }\n\n  /* ─── Help Text ─── */\n\n  .slider__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #4a5362));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Disabled state ─── */\n\n  .slider--disabled .slider__fill {\n    background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #66787b));\n  }\n\n  .slider--disabled .slider__thumb-visual {\n    border-color: var(\n      --hx-slider-disabled-thumb-border-color,\n      var(--hx-color-border-strong, #66787b)\n    );\n  }\n`;\n","import { TemplateResult, 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 { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixSliderStyles } from './hx-slider.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextSliderId = createIdCounter('hx-slider');\n\n/** Detail for hx-input and hx-change events dispatched by hx-slider. */\nexport interface HxSliderDetail {\n  value: number;\n}\n\n/**\n * A range slider component for selecting a numeric value within a min/max boundary.\n * Supports tick marks, value display, range labels, and native form participation\n * via ElementInternals.\n *\n * The native `<input type=\"range\">` receives `role=\"slider\"` with `aria-valuenow`,\n * `aria-valuemin`, and `aria-valuemax`. Label association uses `aria-labelledby`\n * when a label is present, or `aria-label` as a fallback. Help text is linked via\n * `aria-describedby`. Keyboard navigation follows the native range behavior:\n * Arrow keys increment/decrement by step, Home jumps to min, End jumps to max.\n *\n * @summary Form-associated range slider with label, ticks, and value display.\n *\n * @tag hx-slider\n *\n * @slot label - Custom label content (overrides the label property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot min-label - Label rendered at the minimum end of the slider.\n * @slot max-label - Label rendered at the maximum end of the slider.\n *\n * @fires {CustomEvent<{value: number}>} hx-input - Dispatched continuously while the user drags.\n * @fires {CustomEvent<{value: number}>} hx-change - Dispatched when the user releases the thumb.\n *\n * @csspart slider - The outer container element.\n * @csspart track - The track background element.\n * @csspart fill - The filled portion of the track showing progress.\n * @csspart thumb - The draggable thumb overlay element.\n * @csspart label - The label element.\n * @csspart value-display - The element displaying the current numeric value.\n * @csspart tick - Each individual tick mark element.\n * @csspart help-text - The help text element displayed below the slider.\n *\n * @cssprop [--hx-slider-track-bg=var(--hx-color-neutral-200)] - Track background color.\n * @cssprop [--hx-slider-fill-bg=var(--hx-color-primary-500)] - Fill/progress color.\n * @cssprop [--hx-slider-thumb-bg=var(--hx-color-neutral-0)] - Thumb background color.\n * @cssprop [--hx-slider-thumb-border-color=var(--hx-color-primary-500)] - Thumb border color.\n * @cssprop [--hx-slider-thumb-border-width=2px] - Thumb border width.\n * @cssprop [--hx-slider-thumb-shadow=var(--hx-shadow-sm)] - Thumb box shadow.\n * @cssprop [--hx-slider-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-slider-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-slider-value-color=var(--hx-color-neutral-600)] - Value display text color.\n * @cssprop [--hx-slider-tick-color=var(--hx-color-neutral-400)] - Tick mark color.\n * @cssprop [--hx-slider-range-label-color=var(--hx-color-neutral-500)] - Range label text color.\n * @cssprop [--hx-slider-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-slider-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-slider-track-height-sm=var(--hx-size-1)] - Height.\n * @cssprop [--hx-size-1] - Size token.\n * @cssprop [--hx-slider-track-height-md=var(--hx-size-1-5)] - Height.\n * @cssprop [--hx-size-1-5] - Size token.\n * @cssprop [--hx-slider-track-height-lg=var(--hx-space-2)] - Height.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-slider-input-padding-block=1rem] - Padding.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-shadow-sm] - Box shadow.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-slider-thumb-size-sm=var(--hx-size-3)] - CSS custom property.\n * @cssprop [--hx-size-3] - Size token.\n * @cssprop [--hx-slider-thumb-size-md=var(--hx-size-4)] - CSS custom property.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-slider-thumb-size-lg=var(--hx-size-5)] - CSS custom property.\n * @cssprop [--hx-size-5] - Size token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-space-0-5] - Spacing token.\n *\n * @aaa-certified 2026-05-09\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-slider/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow,Home,End,PageUp,PageDown; disabled-suppresses=true\n * @aria-pattern slider\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated true\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-slider\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-slider')\nexport class HelixSlider extends FormMixin(HelixElement) {\n  static override styles = [helixSliderStyles, forcedColorsInteractive];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The name submitted with the form.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * The current numeric value of the slider.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /**\n   * The minimum allowed value.\n   * @attr min\n   */\n  @property({ type: Number })\n  min = 0;\n\n  /**\n   * The maximum allowed value.\n   * @attr max\n   */\n  @property({ type: Number })\n  max = 100;\n\n  /**\n   * The stepping interval between values.\n   * @attr step\n   */\n  @property({ type: Number })\n  step = 1;\n\n  /**\n   * Whether the slider is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The visible label text for the slider.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Help text displayed below the slider for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * When true, the current value is shown next to the label.\n   * @attr show-value\n   */\n  @property({ type: Boolean, attribute: 'show-value' })\n  showValue = false;\n\n  /**\n   * When true, tick marks are rendered at each step interval.\n   * @attr show-ticks\n   */\n  @property({ type: Boolean, attribute: 'show-ticks' })\n  showTicks = false;\n\n  /**\n   * The size variant of the slider.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Human-readable text alternative for the current value, announced by screen readers\n   * instead of the numeric value. For example, on a pain scale: \"7 — Moderate-Severe\".\n   * @attr aria-valuetext\n   */\n  @property({ type: String, attribute: 'aria-valuetext' })\n  valueText = '';\n\n  // ─── Internal State ───\n\n  /** Whether the label slot has assigned content. */\n  /** @internal */\n  @state() private _hasLabelSlot = false;\n  /** Whether the min-label slot has assigned content. */\n  /** @internal */\n  @state() private _hasMinLabelSlot = false;\n  /** Whether the max-label slot has assigned content. */\n  /** @internal */\n  @state() private _hasMaxLabelSlot = false;\n  /** Whether the help slot has assigned content. */\n  /** @internal */\n  @state() private _hasHelpSlot = false;\n\n  // ─── Internal References ───\n\n  /**\n   * Reference to the native range `<input>` inside shadow DOM.\n   * @internal\n   */\n  @query('.slider__input')\n  private _input: HTMLInputElement | undefined;\n\n  // ─── Unique IDs ───\n\n  /** Unique ID for the native range input element. */\n  /** @internal */\n  private readonly _sliderId = _nextSliderId();\n  /** Unique ID for the label element, derived from _sliderId. */\n  /** @internal */\n  private readonly _labelId = `${this._sliderId}-label`;\n  /** Unique ID for the help text element, derived from _sliderId. */\n  /** @internal */\n  private readonly _helpId = `${this._sliderId}-help`;\n\n  /** Stored default value for form reset (captured in firstUpdated). */\n  /** @internal */\n  private _defaultValue: number | null = null;\n\n  // ─── Computed Values ───\n\n  /** @internal */\n  private _clamp(v: number): number {\n    return Math.min(Math.max(v, this.min), this.max);\n  }\n\n  /** @internal */\n  private _fillPercent(): number {\n    const clamped = this._clamp(this.value);\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n    return ((clamped - this.min) / range) * 100;\n  }\n\n  // Cached tick array — recomputed only when showTicks, min, max, or step change.\n  // Avoids redundant array allocation on every render during continuous drag updates.\n  /** @internal */\n  private _cachedTicks: number[] = [];\n\n  /** @internal */\n  private _computeTicks(): number[] {\n    if (!this.showTicks) return [];\n    const ticks: number[] = [];\n    const range = this.max - this.min;\n    if (range <= 0 || this.step <= 0) return ticks;\n    const count = Math.round(range / this.step);\n    for (let i = 0; i <= count; i++) {\n      ticks.push((i / count) * 100);\n    }\n    return ticks;\n  }\n\n  // ─── Lifecycle ───\n\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties);\n    if (\n      changedProperties.has('showTicks') ||\n      changedProperties.has('min') ||\n      changedProperties.has('max') ||\n      changedProperties.has('step')\n    ) {\n      this._cachedTicks = this._computeTicks();\n    }\n  }\n\n  override firstUpdated(): void {\n    // Capture the initial value for form reset (before any user interaction)\n    this._defaultValue = this.value;\n    // Enable fill transition after initial render to suppress animation on mount\n    requestAnimationFrame(() => this.setAttribute('data-ready', ''));\n    // WCAG 4.1.2: warn when no accessible name is available for the range input\n    if (!this.label && !this._hasLabelSlot) {\n      devWarn(\n        'hx-slider',\n        'No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled slider violates WCAG 2.1 AA (4.1.2 Name, Role, Value).',\n      );\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    // Guard: min must be less than max\n    if (changedProperties.has('min') || changedProperties.has('max')) {\n      if (this.min >= this.max) {\n        devWarn(\n          'hx-slider',\n          `Invalid configuration: min (${this.min}) must be less than max (${this.max}). Slider behavior is undefined when min >= max.`,\n        );\n      }\n    }\n    // Clamp value to [min, max] after any relevant property change\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('min') ||\n      changedProperties.has('max')\n    ) {\n      const clamped = this._clamp(this.value);\n      if (clamped !== this.value) {\n        this.value = clamped;\n        return;\n      }\n      this._internals.setFormValue(String(this.value));\n    } else if (changedProperties.has('name')) {\n      this._internals.setFormValue(String(this.value));\n    }\n    // Reflect aria-disabled on host for AT traversal\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  // ─── Form Integration ───\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    const resetTo = this._clamp(this._defaultValue ?? this.min);\n    this.value = resetTo;\n    this._internals.setFormValue(String(resetTo));\n    this._resetInteractionState();\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state !== 'string' || state === null) return;\n    const parsed = parseFloat(state);\n    if (!isNaN(parsed)) {\n      this.value = this._clamp(parsed);\n    }\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the native range input. */\n  override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  // ─── Slot Handlers ───\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleMinLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasMinLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleMaxLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasMaxLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    if (this.disabled) return;\n    const target = e.target as HTMLInputElement;\n    this.value = parseFloat(target.value);\n    this._internals.setFormValue(String(this.value));\n    this._handleInteractionInput();\n\n    /**\n     * Dispatched continuously while the user drags the thumb.\n     * @event hx-input\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: number }>('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleChange(e: Event): void {\n    if (this.disabled) return;\n    const target = e.target as HTMLInputElement;\n    this.value = parseFloat(target.value);\n    this._internals.setFormValue(String(this.value));\n    this._handleInteractionBlur();\n\n    /**\n     * Dispatched when the user releases the thumb after dragging.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: number }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Render ───\n\n  override render(): TemplateResult {\n    const fillPct = this._fillPercent();\n    const ticks = this._cachedTicks;\n    const hasLabel = !!this.label || this._hasLabelSlot;\n    const showRangeLabels = this._hasMinLabelSlot || this._hasMaxLabelSlot;\n\n    const containerClasses = {\n      slider: true,\n      [`slider--${this.size}`]: true,\n      'slider--disabled': this.disabled,\n      'slider--has-ticks': this.showTicks,\n    };\n\n    const describedBy =\n      [this.helpText || this._hasHelpSlot ? this._helpId : null].filter(Boolean).join(' ') ||\n      undefined;\n\n    return html`\n      <div part=\"slider\" class=${classMap(containerClasses)}>\n        <!-- Label row -->\n        <div class=\"slider__label-row\">\n          ${hasLabel\n            ? html`<label\n                part=\"label\"\n                class=\"slider__label\"\n                id=${this._labelId}\n                for=${this._sliderId}\n              >\n                <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>${this.label}</slot>\n              </label>`\n            : html`<slot name=\"label\" @slotchange=${this._handleLabelSlotChange}></slot>`}\n          ${this.showValue\n            ? html`<span part=\"value-display\" class=\"slider__value-display\"> ${this.value} </span>`\n            : nothing}\n        </div>\n\n        <!-- Track -->\n        <div class=\"slider__track-container\">\n          <div part=\"track\" class=\"slider__track\">\n            <div\n              part=\"fill\"\n              class=\"slider__fill\"\n              style=${styleMap({ '--_fill-ratio': String(fillPct / 100) })}\n            ></div>\n\n            <input\n              class=\"slider__input\"\n              id=${this._sliderId}\n              type=\"range\"\n              .value=${live(String(this.value))}\n              min=${this.min}\n              max=${this.max}\n              step=${this.step}\n              ?disabled=${this.disabled}\n              name=${ifDefined(this.name || undefined)}\n              aria-labelledby=${ifDefined(hasLabel ? this._labelId : undefined)}\n              aria-label=${ifDefined(!hasLabel ? 'Slider' : undefined)}\n              aria-valuetext=${ifDefined(this.valueText || undefined)}\n              aria-describedby=${ifDefined(describedBy)}\n              @input=${this._handleInput}\n              @change=${this._handleChange}\n            />\n\n            <!-- Visual thumb positioned by fill percentage (--fill-pct drives CSS calc) -->\n            <span\n              part=\"thumb\"\n              class=\"slider__thumb-visual\"\n              style=${styleMap({ '--fill-pct': String(fillPct) })}\n              aria-hidden=\"true\"\n            ></span>\n          </div>\n        </div>\n\n        <!-- Tick marks -->\n        ${this.showTicks && ticks.length > 0\n          ? html`<div class=\"slider__ticks\">\n              ${ticks.map(\n                (pct) =>\n                  html`<span\n                    part=\"tick\"\n                    class=\"slider__tick\"\n                    style=${styleMap({ left: `${pct}%` })}\n                  ></span>`,\n              )}\n            </div>`\n          : nothing}\n\n        <!-- Range labels -->\n        ${showRangeLabels\n          ? html`<div class=\"slider__range-labels\">\n              <slot name=\"min-label\" @slotchange=${this._handleMinLabelSlotChange}></slot>\n              <slot name=\"max-label\" @slotchange=${this._handleMaxLabelSlotChange}></slot>\n            </div>`\n          : html`\n              <!-- Always observe slot changes even when not rendered -->\n              <slot name=\"min-label\" hidden @slotchange=${this._handleMinLabelSlotChange}></slot>\n              <slot name=\"max-label\" hidden @slotchange=${this._handleMaxLabelSlotChange}></slot>\n            `}\n\n        <!-- Help text -->\n        <!-- WCAG 1.3.1: wrap slot in a persistent container so _helpId stays stable\n             regardless of whether help content comes from the slot or the property. -->\n        <div id=${this._helpId}>\n          <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>\n            ${this.helpText\n              ? html`<div part=\"help-text\" class=\"slider__help-text\">${this.helpText}</div>`\n              : nothing}\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-slider': HelixSlider;\n  }\n}\n"],"names":["helixSliderStyles","css","_nextSliderId","createIdCounter","HelixSlider","FormMixin","HelixElement","v","clamped","range","ticks","count","i","changedProperties","devWarn","resetTo","state","_mode","parsed","disabled","options","_a","slot","target","fillPct","hasLabel","showRangeLabels","containerClasses","describedBy","html","classMap","nothing","styleMap","live","ifDefined","pct","forcedColorsInteractive","__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;A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"}
+{"version":3,"file":"hx-slider-CkOk5BCY.js","sources":["../../src/components/hx-slider/hx-slider.styles.ts","../../src/components/hx-slider/hx-slider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSliderStyles = 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  /* ─── Container ─── */\n\n  .slider {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-slider-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Label Row ─── */\n\n  .slider__label-row {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .slider__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-slider-label-color, var(--hx-color-text-strong, #202b39));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .slider__value-display {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-slider-value-color, var(--hx-color-text-secondary, #313e4b));\n    line-height: var(--hx-line-height-normal, 1.5);\n    font-variant-numeric: tabular-nums;\n    min-width: var(--hx-size-8, 2rem);\n    text-align: end;\n  }\n\n  /* ─── Track Container ─── */\n\n  .slider__track-container {\n    position: relative;\n    width: 100%;\n  }\n\n  .slider__track {\n    position: relative;\n    width: 100%;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-slider-track-bg, var(--hx-color-border-default, #d6dbd5));\n    overflow: visible;\n  }\n\n  /* ─── Size: sm ─── */\n\n  .slider--sm .slider__track {\n    height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));\n  }\n\n  .slider--sm .slider__input {\n    height: var(--hx-slider-track-height-sm, var(--hx-size-1, 0.25rem));\n  }\n\n  /* ─── Size: md ─── */\n\n  .slider--md .slider__track {\n    height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));\n  }\n\n  .slider--md .slider__input {\n    height: var(--hx-slider-track-height-md, var(--hx-size-1-5, 0.375rem));\n  }\n\n  /* ─── Size: lg ─── */\n\n  .slider--lg .slider__track {\n    height: var(--hx-slider-track-height-lg, var(--hx-space-2, 0.5rem));\n  }\n\n  .slider--lg .slider__input {\n    height: var(--hx-slider-track-height-lg, var(--hx-space-2, 0.5rem));\n  }\n\n  /* ─── Fill ─── */\n\n  .slider__fill {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-slider-fill-bg, var(--hx-color-primary-500, #429797));\n    pointer-events: none;\n    transform-origin: left center;\n    transform: scaleX(var(--_fill-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* Suppress fill animation on initial render — only animate on user interaction */\n  :host(:not([data-ready])) .slider__fill {\n    transition: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .slider__fill {\n      transition: none;\n    }\n  }\n\n  /* ─── Native Range Input ─── */\n\n  .slider__input {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    opacity: 0;\n    cursor: pointer;\n    -webkit-appearance: none;\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: none;\n    /* Expand the hit area so the thumb meets WCAG 2.5.8 touch target (44px).\n       The input's total height = track height + 2 * padding-block. With 0.75rem\n       (~12px) padding on each side and a track of ~6px, the total target area is\n       ~30px. We increase to 1rem (~16px) per side for a ~38px minimum, supplemented\n       by the visual thumb size. */\n    padding-block: var(--hx-slider-input-padding-block, 1rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n  }\n\n  /* In forced-color mode, restore native outline so the input remains focusable */\n  @media (forced-colors: active) {\n    .slider__input {\n      outline: revert;\n      opacity: 1;\n    }\n    .slider__input:focus-visible {\n      outline: 2px solid ButtonText;\n    }\n  }\n\n  .slider__input:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Thumb (visual, :before on a wrapper or via ::after on track) ─── */\n  /*\n   * The native thumb is hidden (opacity 0 on the input). We render a visible\n   * thumb element positioned by --fill-pct (a raw 0–100 number set in JS).\n   *\n   * Correct alignment formula keeps the thumb centered within the track at\n   * both extremes, preventing the left/right halves from clipping outside:\n   *   left = fillPct% * (1 – thumbSize/100%) + thumbSize * (1 – fillPct/100)\n   * Simplified: left = calc(var(--fill-pct,0)*1% + var(--_thumb-size)*(1 - var(--fill-pct,0)/100))\n   * Combined with translate(-50%,-50%) this places the thumb center correctly\n   * at every position from min to max.\n   */\n\n  .slider__thumb-visual {\n    position: absolute;\n    top: 50%;\n    /* Corrected position: thumb stays within track at all fill values */\n    left: calc(var(--fill-pct, 0) * 1% + var(--_thumb-size, 1rem) * (1 - var(--fill-pct, 0) / 100));\n    transform: translate(-50%, -50%);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-slider-thumb-bg, var(--hx-color-surface-default, #ffffff));\n    border: var(--hx-slider-thumb-border-width, 2px) solid\n      var(--hx-slider-thumb-border-color, var(--hx-color-primary-500, #429797));\n    box-shadow: var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n    pointer-events: none;\n    transition:\n      box-shadow var(--hx-transition-fast, 150ms ease),\n      transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .slider__thumb-visual {\n      transition: none;\n    }\n  }\n\n  .slider__input:focus-visible ~ .slider__thumb-visual {\n    box-shadow:\n      0 0 0 var(--hx-focus-ring-width, 2px)\n        var(--hx-slider-focus-ring-color, var(--hx-focus-ring-color, #0f7078)),\n      var(--hx-slider-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n  }\n\n  /* ─── Thumb sizes ─── */\n\n  .slider--sm .slider__thumb-visual {\n    --_thumb-size: var(--hx-slider-thumb-size-sm, var(--hx-size-3, 0.75rem));\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n  }\n\n  .slider--md .slider__thumb-visual {\n    --_thumb-size: var(--hx-slider-thumb-size-md, var(--hx-size-4, 1rem));\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n  }\n\n  .slider--lg .slider__thumb-visual {\n    --_thumb-size: var(--hx-slider-thumb-size-lg, var(--hx-size-5, 1.25rem));\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n  @media (forced-colors: active) {\n    .slider__fill {\n      background-color: Highlight;\n    }\n    .slider__track {\n      background-color: ButtonFace;\n      border: 1px solid ButtonText;\n    }\n    .slider__thumb-visual {\n      background-color: ButtonText;\n      border-color: ButtonText;\n    }\n    .slider__input:focus-visible ~ .slider__thumb-visual {\n      outline: 2px solid Highlight;\n    }\n  }\n\n  /* ─── Ticks ─── */\n\n  .slider__ticks {\n    position: relative;\n    width: 100%;\n    height: var(--hx-space-2, 0.5rem);\n    margin-top: var(--hx-space-1, 0.25rem);\n  }\n\n  .slider__tick {\n    position: absolute;\n    top: 0;\n    width: var(--hx-border-width-thin, 1px);\n    height: 100%;\n    background-color: var(--hx-slider-tick-color, var(--hx-color-border-strong, #66787b));\n    transform: translateX(-50%);\n  }\n\n  /* ─── Range Labels ─── */\n\n  .slider__range-labels {\n    display: flex;\n    justify-content: space-between;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-slider-range-label-color, var(--hx-color-text-muted, #4a5362));\n    line-height: var(--hx-line-height-normal, 1.5);\n    margin-top: var(--hx-space-0-5, 0.125rem);\n  }\n\n  /* ─── Help Text ─── */\n\n  .slider__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-slider-help-text-color, var(--hx-color-text-muted, #4a5362));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Disabled state ─── */\n\n  .slider--disabled .slider__fill {\n    background-color: var(--hx-slider-disabled-fill-bg, var(--hx-color-border-strong, #66787b));\n  }\n\n  .slider--disabled .slider__thumb-visual {\n    border-color: var(\n      --hx-slider-disabled-thumb-border-color,\n      var(--hx-color-border-strong, #66787b)\n    );\n  }\n`;\n","import { TemplateResult, 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 { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixSliderStyles } from './hx-slider.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextSliderId = createIdCounter('hx-slider');\n\n/** Detail for hx-input and hx-change events dispatched by hx-slider. */\nexport interface HxSliderDetail {\n  value: number;\n}\n\n/**\n * A range slider component for selecting a numeric value within a min/max boundary.\n * Supports tick marks, value display, range labels, and native form participation\n * via ElementInternals.\n *\n * The native `<input type=\"range\">` receives `role=\"slider\"` with `aria-valuenow`,\n * `aria-valuemin`, and `aria-valuemax`. Label association uses `aria-labelledby`\n * when a label is present, or `aria-label` as a fallback. Help text is linked via\n * `aria-describedby`. Keyboard navigation follows the native range behavior:\n * Arrow keys increment/decrement by step, Home jumps to min, End jumps to max.\n *\n * @summary Form-associated range slider with label, ticks, and value display.\n *\n * @tag hx-slider\n *\n * @slot label - Custom label content (overrides the label property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot min-label - Label rendered at the minimum end of the slider.\n * @slot max-label - Label rendered at the maximum end of the slider.\n *\n * @fires {CustomEvent<{value: number}>} hx-input - Dispatched continuously while the user drags.\n * @fires {CustomEvent<{value: number}>} hx-change - Dispatched when the user releases the thumb.\n *\n * @csspart slider - The outer container element.\n * @csspart track - The track background element.\n * @csspart fill - The filled portion of the track showing progress.\n * @csspart thumb - The draggable thumb overlay element.\n * @csspart label - The label element.\n * @csspart value-display - The element displaying the current numeric value.\n * @csspart tick - Each individual tick mark element.\n * @csspart help-text - The help text element displayed below the slider.\n *\n * @cssprop [--hx-slider-track-bg=var(--hx-color-neutral-200)] - Track background color.\n * @cssprop [--hx-slider-fill-bg=var(--hx-color-primary-500)] - Fill/progress color.\n * @cssprop [--hx-slider-thumb-bg=var(--hx-color-neutral-0)] - Thumb background color.\n * @cssprop [--hx-slider-thumb-border-color=var(--hx-color-primary-500)] - Thumb border color.\n * @cssprop [--hx-slider-thumb-border-width=2px] - Thumb border width.\n * @cssprop [--hx-slider-thumb-shadow=var(--hx-shadow-sm)] - Thumb box shadow.\n * @cssprop [--hx-slider-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-slider-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-slider-value-color=var(--hx-color-neutral-600)] - Value display text color.\n * @cssprop [--hx-slider-tick-color=var(--hx-color-neutral-400)] - Tick mark color.\n * @cssprop [--hx-slider-range-label-color=var(--hx-color-neutral-500)] - Range label text color.\n * @cssprop [--hx-slider-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-slider-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-slider-track-height-sm=var(--hx-size-1)] - Height.\n * @cssprop [--hx-size-1] - Size token.\n * @cssprop [--hx-slider-track-height-md=var(--hx-size-1-5)] - Height.\n * @cssprop [--hx-size-1-5] - Size token.\n * @cssprop [--hx-slider-track-height-lg=var(--hx-space-2)] - Height.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-slider-input-padding-block=1rem] - Padding.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-shadow-sm] - Box shadow.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-slider-thumb-size-sm=var(--hx-size-3)] - CSS custom property.\n * @cssprop [--hx-size-3] - Size token.\n * @cssprop [--hx-slider-thumb-size-md=var(--hx-size-4)] - CSS custom property.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-slider-thumb-size-lg=var(--hx-size-5)] - CSS custom property.\n * @cssprop [--hx-size-5] - Size token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-space-0-5] - Spacing token.\n *\n * @aaa-certified 2026-05-09\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-slider/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow,Home,End,PageUp,PageDown; disabled-suppresses=true\n * @aria-pattern slider\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated true\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-slider\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-slider')\nexport class HelixSlider extends FormMixin(HelixElement) {\n  static override styles = [helixSliderStyles, forcedColorsInteractive];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The name submitted with the form.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * The current numeric value of the slider.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /**\n   * The minimum allowed value.\n   * @attr min\n   */\n  @property({ type: Number })\n  min = 0;\n\n  /**\n   * The maximum allowed value.\n   * @attr max\n   */\n  @property({ type: Number })\n  max = 100;\n\n  /**\n   * The stepping interval between values.\n   * @attr step\n   */\n  @property({ type: Number })\n  step = 1;\n\n  /**\n   * Whether the slider is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The visible label text for the slider.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Help text displayed below the slider for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * When true, the current value is shown next to the label.\n   * @attr show-value\n   */\n  @property({ type: Boolean, attribute: 'show-value' })\n  showValue = false;\n\n  /**\n   * When true, tick marks are rendered at each step interval.\n   * @attr show-ticks\n   */\n  @property({ type: Boolean, attribute: 'show-ticks' })\n  showTicks = false;\n\n  /**\n   * The size variant of the slider.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Human-readable text alternative for the current value, announced by screen readers\n   * instead of the numeric value. For example, on a pain scale: \"7 — Moderate-Severe\".\n   * @attr aria-valuetext\n   */\n  @property({ type: String, attribute: 'aria-valuetext' })\n  valueText = '';\n\n  // ─── Internal State ───\n\n  /** Whether the label slot has assigned content. */\n  /** @internal */\n  @state() private _hasLabelSlot = false;\n  /** Whether the min-label slot has assigned content. */\n  /** @internal */\n  @state() private _hasMinLabelSlot = false;\n  /** Whether the max-label slot has assigned content. */\n  /** @internal */\n  @state() private _hasMaxLabelSlot = false;\n  /** Whether the help slot has assigned content. */\n  /** @internal */\n  @state() private _hasHelpSlot = false;\n\n  // ─── Internal References ───\n\n  /**\n   * Reference to the native range `<input>` inside shadow DOM.\n   * @internal\n   */\n  @query('.slider__input')\n  private _input: HTMLInputElement | undefined;\n\n  // ─── Unique IDs ───\n\n  /** Unique ID for the native range input element. */\n  /** @internal */\n  private readonly _sliderId = _nextSliderId();\n  /** Unique ID for the label element, derived from _sliderId. */\n  /** @internal */\n  private readonly _labelId = `${this._sliderId}-label`;\n  /** Unique ID for the help text element, derived from _sliderId. */\n  /** @internal */\n  private readonly _helpId = `${this._sliderId}-help`;\n\n  /** Stored default value for form reset (captured in firstUpdated). */\n  /** @internal */\n  private _defaultValue: number | null = null;\n\n  // ─── Computed Values ───\n\n  /** @internal */\n  private _clamp(v: number): number {\n    return Math.min(Math.max(v, this.min), this.max);\n  }\n\n  /** @internal */\n  private _fillPercent(): number {\n    const clamped = this._clamp(this.value);\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n    return ((clamped - this.min) / range) * 100;\n  }\n\n  // Cached tick array — recomputed only when showTicks, min, max, or step change.\n  // Avoids redundant array allocation on every render during continuous drag updates.\n  /** @internal */\n  private _cachedTicks: number[] = [];\n\n  /** @internal */\n  private _computeTicks(): number[] {\n    if (!this.showTicks) return [];\n    const ticks: number[] = [];\n    const range = this.max - this.min;\n    if (range <= 0 || this.step <= 0) return ticks;\n    const count = Math.round(range / this.step);\n    for (let i = 0; i <= count; i++) {\n      ticks.push((i / count) * 100);\n    }\n    return ticks;\n  }\n\n  // ─── Lifecycle ───\n\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties);\n    if (\n      changedProperties.has('showTicks') ||\n      changedProperties.has('min') ||\n      changedProperties.has('max') ||\n      changedProperties.has('step')\n    ) {\n      this._cachedTicks = this._computeTicks();\n    }\n  }\n\n  override firstUpdated(): void {\n    // Capture the initial value for form reset (before any user interaction)\n    this._defaultValue = this.value;\n    // Enable fill transition after initial render to suppress animation on mount\n    requestAnimationFrame(() => this.setAttribute('data-ready', ''));\n    // WCAG 4.1.2: warn when no accessible name is available for the range input\n    if (!this.label && !this._hasLabelSlot) {\n      devWarn(\n        'hx-slider',\n        'No accessible label provided. Set the `label` attribute or use the label slot. An unlabeled slider violates WCAG 2.1 AA (4.1.2 Name, Role, Value).',\n      );\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    // Guard: min must be less than max\n    if (changedProperties.has('min') || changedProperties.has('max')) {\n      if (this.min >= this.max) {\n        devWarn(\n          'hx-slider',\n          `Invalid configuration: min (${this.min}) must be less than max (${this.max}). Slider behavior is undefined when min >= max.`,\n        );\n      }\n    }\n    // Clamp value to [min, max] after any relevant property change\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('min') ||\n      changedProperties.has('max')\n    ) {\n      const clamped = this._clamp(this.value);\n      if (clamped !== this.value) {\n        this.value = clamped;\n        return;\n      }\n      this._internals.setFormValue(String(this.value));\n    } else if (changedProperties.has('name')) {\n      this._internals.setFormValue(String(this.value));\n    }\n    // Reflect aria-disabled on host for AT traversal\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  // ─── Form Integration ───\n\n  /**\n   * Constraint validation: surfaces native `validity` flags through\n   * `ElementInternals.setValidity()` so the slider participates in\n   * `form.checkValidity()` / `form.reportValidity()`.\n   *\n   * Flags applied (in priority order):\n   *   - `rangeUnderflow` when `value < min`.\n   *   - `rangeOverflow` when `value > max`.\n   *   - `stepMismatch` when `step` is finite/positive and `value` is not\n   *     aligned to `min + n*step` within `step / 1000` floating-point\n   *     tolerance.\n   *\n   * Note: a `required` flag is intentionally NOT exposed on the slider\n   * public API. The `value` property defaults to `0` (a numerically valid\n   * value), so a `required` slider cannot meaningfully report\n   * `valueMissing` without an additional \"user-touched\" interaction\n   * tracker — exposing the flag would advertise validation behavior the\n   * leaf component cannot deliver. Consumers needing required-on-touch\n   * semantics should wire that at the form level rather than the leaf.\n   *\n   * The validity anchor is the native range input so browser\n   * `reportValidity()` focuses the correct element. If the input has not\n   * yet rendered (firstUpdated has not run), the anchor is omitted.\n   *\n   * Called automatically by `FormMixin.updated()` after every Lit cycle.\n   * @internal\n   */\n  override _updateValidity(): void {\n    const anchor = this._input;\n    const v = this.value;\n\n    if (typeof v === 'number' && Number.isFinite(v)) {\n      if (v < this.min) {\n        this._internals.setValidity(\n          { rangeUnderflow: true },\n          `Value must be at least ${this.min}.`,\n          anchor ?? undefined,\n        );\n        return;\n      }\n      if (v > this.max) {\n        this._internals.setValidity(\n          { rangeOverflow: true },\n          `Value must be at most ${this.max}.`,\n          anchor ?? undefined,\n        );\n        return;\n      }\n      if (Number.isFinite(this.step) && this.step > 0) {\n        const offset = v - this.min;\n        const nearest = Math.round(offset / this.step) * this.step;\n        const tolerance = this.step / 1000;\n        if (Math.abs(offset - nearest) > tolerance) {\n          this._internals.setValidity(\n            { stepMismatch: true },\n            `Value must be a multiple of ${this.step} starting from ${this.min}.`,\n            anchor ?? undefined,\n          );\n          return;\n        }\n      }\n    }\n\n    this._internals.setValidity({});\n  }\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    const resetTo = this._clamp(this._defaultValue ?? this.min);\n    this.value = resetTo;\n    this._internals.setFormValue(String(resetTo));\n    this._resetInteractionState();\n    this._updateValidity();\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' || state === null) return;\n    const parsed = parseFloat(state);\n    if (!isNaN(parsed)) {\n      this.value = this._clamp(parsed);\n    }\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the native range input. */\n  override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  // ─── Slot Handlers ───\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleMinLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasMinLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleMaxLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasMaxLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    if (this.disabled) return;\n    const target = e.target as HTMLInputElement;\n    this.value = parseFloat(target.value);\n    this._internals.setFormValue(String(this.value));\n    this._handleInteractionInput();\n\n    /**\n     * Dispatched continuously while the user drags the thumb.\n     * @event hx-input\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: number }>('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleChange(e: Event): void {\n    if (this.disabled) return;\n    const target = e.target as HTMLInputElement;\n    this.value = parseFloat(target.value);\n    this._internals.setFormValue(String(this.value));\n    this._handleInteractionBlur();\n\n    /**\n     * Dispatched when the user releases the thumb after dragging.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: number }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Render ───\n\n  override render(): TemplateResult {\n    const fillPct = this._fillPercent();\n    const ticks = this._cachedTicks;\n    const hasLabel = !!this.label || this._hasLabelSlot;\n    const showRangeLabels = this._hasMinLabelSlot || this._hasMaxLabelSlot;\n\n    const containerClasses = {\n      slider: true,\n      [`slider--${this.size}`]: true,\n      'slider--disabled': this.disabled,\n      'slider--has-ticks': this.showTicks,\n    };\n\n    const describedBy =\n      [this.helpText || this._hasHelpSlot ? this._helpId : null].filter(Boolean).join(' ') ||\n      undefined;\n\n    return html`\n      <div part=\"slider\" class=${classMap(containerClasses)}>\n        <!-- Label row -->\n        <div class=\"slider__label-row\">\n          ${hasLabel\n            ? html`<label\n                part=\"label\"\n                class=\"slider__label\"\n                id=${this._labelId}\n                for=${this._sliderId}\n              >\n                <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>${this.label}</slot>\n              </label>`\n            : html`<slot name=\"label\" @slotchange=${this._handleLabelSlotChange}></slot>`}\n          ${this.showValue\n            ? html`<span part=\"value-display\" class=\"slider__value-display\"> ${this.value} </span>`\n            : nothing}\n        </div>\n\n        <!-- Track -->\n        <div class=\"slider__track-container\">\n          <div part=\"track\" class=\"slider__track\">\n            <div\n              part=\"fill\"\n              class=\"slider__fill\"\n              style=${styleMap({ '--_fill-ratio': String(fillPct / 100) })}\n            ></div>\n\n            <input\n              class=\"slider__input\"\n              id=${this._sliderId}\n              type=\"range\"\n              .value=${live(String(this.value))}\n              min=${this.min}\n              max=${this.max}\n              step=${this.step}\n              ?disabled=${this.disabled}\n              name=${ifDefined(this.name || undefined)}\n              aria-labelledby=${ifDefined(hasLabel ? this._labelId : undefined)}\n              aria-label=${ifDefined(!hasLabel ? 'Slider' : undefined)}\n              aria-valuetext=${ifDefined(this.valueText || undefined)}\n              aria-describedby=${ifDefined(describedBy)}\n              @input=${this._handleInput}\n              @change=${this._handleChange}\n            />\n\n            <!-- Visual thumb positioned by fill percentage (--fill-pct drives CSS calc) -->\n            <span\n              part=\"thumb\"\n              class=\"slider__thumb-visual\"\n              style=${styleMap({ '--fill-pct': String(fillPct) })}\n              aria-hidden=\"true\"\n            ></span>\n          </div>\n        </div>\n\n        <!-- Tick marks -->\n        ${this.showTicks && ticks.length > 0\n          ? html`<div class=\"slider__ticks\">\n              ${ticks.map(\n                (pct) =>\n                  html`<span\n                    part=\"tick\"\n                    class=\"slider__tick\"\n                    style=${styleMap({ left: `${pct}%` })}\n                  ></span>`,\n              )}\n            </div>`\n          : nothing}\n\n        <!-- Range labels -->\n        ${showRangeLabels\n          ? html`<div class=\"slider__range-labels\">\n              <slot name=\"min-label\" @slotchange=${this._handleMinLabelSlotChange}></slot>\n              <slot name=\"max-label\" @slotchange=${this._handleMaxLabelSlotChange}></slot>\n            </div>`\n          : html`\n              <!-- Always observe slot changes even when not rendered -->\n              <slot name=\"min-label\" hidden @slotchange=${this._handleMinLabelSlotChange}></slot>\n              <slot name=\"max-label\" hidden @slotchange=${this._handleMaxLabelSlotChange}></slot>\n            `}\n\n        <!-- Help text -->\n        <!-- WCAG 1.3.1: wrap slot in a persistent container so _helpId stays stable\n             regardless of whether help content comes from the slot or the property. -->\n        <div id=${this._helpId}>\n          <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>\n            ${this.helpText\n              ? html`<div part=\"help-text\" class=\"slider__help-text\">${this.helpText}</div>`\n              : nothing}\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-slider': HelixSlider;\n  }\n}\n"],"names":["helixSliderStyles","css","_nextSliderId","createIdCounter","HelixSlider","FormMixin","HelixElement","v","clamped","range","ticks","count","i","changedProperties","devWarn","anchor","offset","nearest","tolerance","resetTo","state","_mode","parsed","disabled","options","_a","slot","target","fillPct","hasLabel","showRangeLabels","containerClasses","describedBy","html","classMap","nothing","styleMap","live","ifDefined","pct","forcedColorsInteractive","__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;A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"}

package/dist/shared/{hx-split-button-CdNz1XAu.js → hx-split-button-Bg9FHrFK.js}

@@ -130,6 +130,11 @@ const T = f`
     transform: rotate(180deg);
   }
 
+  /* hx-icon glyph sizing for the migrated chevron (12x8 → 12px). */
+  .split-button__chevron-glyph {
+    --hx-icon-size: 12px;
+  }
+
   /* ─── Size Variants ─── */
 
   /* sm */
@@ -613,21 +618,12 @@ let s = class extends M {
           @keydown=${this._handleTriggerKeydown}
         >
           <span class=${h(r)} aria-hidden="true">
-            <svg
-              width="12"
-              height="8"
-              viewBox="0 0 12 8"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M1 1.5L6 6.5L11 1.5"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
+            <hx-icon
+              class="split-button__chevron-glyph"
+              library="helix"
+              name="chevron-down"
+              aria-hidden="true"
+            ></hx-icon>
           </span>
         </button>
 
@@ -689,4 +685,4 @@ s = a([
 export {
   s as H
 };
-//# sourceMappingURL=hx-split-button-CdNz1XAu.js.map
+//# sourceMappingURL=hx-split-button-Bg9FHrFK.js.map