@helixui/library 3.1.0 → 3.2.0-next.100

package/dist/shared/hx-slider-m0aEClH1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-slider-m0aEClH1.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(\n          --hx-slider-focus-ring-color,\n          var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))\n        ),\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@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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"}

package/dist/shared/{hx-spinner-BKjuCdZB.js → hx-spinner-DL5AYr16.js}

@@ -2,8 +2,9 @@ import { css as h, html as f } from "lit";
 import { property as a, customElement as d } from "lit/decorators.js";
 import { styleMap as p } from "lit/directives/style-map.js";
 import { ifDefined as v } from "lit/directives/if-defined.js";
-import { H as m } from "./helix-element-BNEYeiys.js";
-const u = h`
+import { a as m } from "./forced-colors-CTEDFRGa.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
+const x = h`
   :host {
     display: inline-flex;
     align-items: center;
@@ -92,13 +93,13 @@ const u = h`
   /* ─── Variant Colors ─── */
 
   :host([variant='default']) {
-    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #475569));
-    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #4a5362));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   :host([variant='primary']) {
-    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #2563eb));
-    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbeafe));
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #429797));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbf0f0));
   }
 
   :host([variant='inverted']) {
@@ -132,32 +133,32 @@ const u = h`
     }
   }
 `;
-var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (e, i, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? _(i, s) : i, l = e.length - 1, c; l >= 0; l--)
-    (c = e[l]) && (r = (o ? c(i, s, r) : c(r)) || r);
-  return o && r && x(i, s, r), r;
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (r, i, s, o) => {
+  for (var e = o > 1 ? void 0 : o ? y(i, s) : i, l = r.length - 1, c; l >= 0; l--)
+    (c = r[l]) && (e = (o ? c(i, s, e) : c(e)) || e);
+  return o && e && _(i, s, e), e;
 };
-let t = class extends m {
+let t = class extends u {
   constructor() {
     super(...arguments), this.size = "md", this.variant = "default", this.label = "Loading", this.decorative = !1;
   }
   // ─── Lifecycle ───
   connectedCallback() {
     super.connectedCallback();
-    const e = this.getAttribute("size");
-    e !== null && !this.hasAttribute("hx-size") && (this.size = e);
+    const r = this.getAttribute("size");
+    r !== null && !this.hasAttribute("hx-size") && (this.size = r);
   }
   /** @internal */
   _isTokenSize() {
     return this.size === "sm" || this.size === "md" || this.size === "lg";
   }
   render() {
-    const e = !this._isTokenSize() && this.size ? p({ "--_spinner-size": this.size }) : p({}), i = this.decorative ? "presentation" : "status", s = this.decorative ? void 0 : this.label || void 0;
+    const r = !this._isTokenSize() && this.size ? p({ "--_spinner-size": this.size }) : p({}), i = this.decorative ? "presentation" : "status", s = this.decorative ? void 0 : this.label || void 0;
     return f`
       <div
         class="spinner"
         part="base"
-        style=${e}
+        style=${r}
         role=${i}
         aria-label=${v(s)}
       >
@@ -181,7 +182,7 @@ let t = class extends m {
     `;
   }
 };
-t.styles = [u];
+t.styles = [x, m];
 n([
   a({ type: String, reflect: !0, attribute: "hx-size" })
 ], t.prototype, "size", 2);
@@ -200,4 +201,4 @@ t = n([
 export {
   t as H
 };
-//# sourceMappingURL=hx-spinner-BKjuCdZB.js.map
+//# sourceMappingURL=hx-spinner-DL5AYr16.js.map

package/dist/shared/hx-spinner-DL5AYr16.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-spinner-DL5AYr16.js","sources":["../../src/components/hx-spinner/hx-spinner.styles.ts","../../src/components/hx-spinner/hx-spinner.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSpinnerStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_spinner-size);\n    height: var(--_spinner-size);\n    flex-shrink: 0;\n  }\n\n  .spinner__svg {\n    width: 100%;\n    height: 100%;\n    animation: hx-spinner-rotate var(--hx-duration-spinner, 750ms) linear infinite;\n  }\n\n  .spinner__track {\n    stroke: var(--_spinner-track-color);\n  }\n\n  .spinner__arc {\n    stroke: var(--_spinner-color);\n    /* SVG arc math: viewBox is 24×24, r=10, circumference = 2π × 10 ≈ 62.83.\n       stroke-dasharray: 56 creates a visible arc of ~89% of circumference.\n       stroke-dashoffset: 14 shifts the arc start to produce the ~75% visible gap aesthetic.\n       Adjust both proportionally if r or viewBox dimensions change. */\n    stroke-dasharray: 56;\n    stroke-dashoffset: 14;\n    animation: hx-spinner-dash var(--hx-duration-spinner, 750ms)\n      var(--hx-easing-in-out, ease-in-out) infinite;\n    transform-origin: center;\n  }\n\n  @keyframes hx-spinner-rotate {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes hx-spinner-dash {\n    0% {\n      stroke-dashoffset: 50;\n    }\n    50% {\n      stroke-dashoffset: 14;\n    }\n    100% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .spinner__svg {\n      animation: none;\n    }\n\n    .spinner__arc {\n      animation: none;\n      /* Maintain the static partial arc at full opacity so the loading state remains\n         clearly communicated without motion. A faded arc looks broken; full opacity\n         alongside the track ring unambiguously signals \"in progress\". */\n      stroke-dashoffset: 14;\n      opacity: 1;\n    }\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) {\n    --_spinner-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='md']) {\n    --_spinner-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) {\n    --_spinner-size: var(--hx-size-8, 2rem);\n  }\n\n  /* ─── Variant Colors ─── */\n\n  :host([variant='default']) {\n    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #4a5362));\n    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #d6dbd5));\n  }\n\n  :host([variant='primary']) {\n    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #429797));\n    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbf0f0));\n  }\n\n  :host([variant='inverted']) {\n    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-0, #ffffff));\n    /* Fallback for browsers without color-mix() support (Chrome < 111, Firefox < 113, Safari < 16.2).\n       rgba(255, 255, 255, 0.3) approximates the intended 30% white track color. */\n    --_spinner-track-color: var(\n      --hx-spinner-track-color,\n      var(--hx-overlay-white-30, rgba(255, 255, 255, 0.3))\n    );\n  }\n\n  @supports (color: color-mix(in srgb, white 30%, transparent)) {\n    :host([variant='inverted']) {\n      --_spinner-track-color: var(\n        --hx-spinner-track-color,\n        color-mix(in srgb, var(--hx-color-neutral-0, #ffffff) 30%, transparent)\n      );\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .spinner__track {\n      stroke: GrayText;\n    }\n\n    .spinner__arc {\n      stroke: CanvasText;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixSpinnerStyles } from './hx-spinner.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * Token size values for the spinner. Use these for standard sizing.\n * The `size` property also accepts any valid CSS size string (e.g. \"3rem\", \"48px\")\n * for custom sizes — the type widens to `string` in that usage.\n */\nexport type SpinnerSize = 'sm' | 'md' | 'lg';\n\n/**\n * A circular loading indicator for inline and overlay loading states.\n * Purely visual — no slots. Announces loading state to screen readers via\n * `role=\"status\"` and an `aria-label` (customizable via the `label` prop).\n *\n * When used alongside visible loading text, set `decorative` to suppress\n * duplicate AT announcements.\n *\n * **WCAG 4.1.2 — `aria-busy` pattern for consumers:**\n * When this spinner indicates that a region of the page is loading, set\n * `aria-busy=\"true\"` on the container element that wraps the loading content\n * and remove it (or set `aria-busy=\"false\"`) once loading completes. This\n * communicates the loading state to assistive technologies at the region level,\n * complementing the spinner's own `role=\"status\"` announcement.\n *\n * ```html\n * <section aria-busy=\"true\" aria-label=\"Patient records\">\n *   <hx-spinner label=\"Loading patient records\"></hx-spinner>\n * </section>\n * ```\n *\n * @summary Circular loading indicator component.\n *\n * @tag hx-spinner\n *\n * @csspart base - The SVG spinner element.\n *\n * @cssprop [--hx-spinner-color] - Spinner arc color. Defaults per variant.\n * @cssprop [--hx-spinner-track-color] - Spinner track color. Defaults per variant.\n * @cssprop [--hx-duration-spinner] - Duration of the rotation animation. Defaults to 750ms.\n * @cssprop [--hx-easing-in-out] - CSS custom property.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-overlay-white-30] - Overlay color.\n */\n@customElement('hx-spinner')\nexport class HelixSpinner extends HelixElement {\n  static override styles = [helixSpinnerStyles, forcedColorsSurface];\n\n  /**\n   * Size of the spinner. Accepts `SpinnerSize` token values ('sm' | 'md' | 'lg'),\n   * or any valid CSS size string (e.g. \"3rem\", \"48px\") for custom dimensions.\n   *\n   * The type is `SpinnerSize | string` which widens to `string` at the TypeScript\n   * level — this is intentional to support CSS size overrides. Use `SpinnerSize`\n   * values for standard sizing; custom strings bypass token-based scaling.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' | (string & Record<never, never>) = 'md';\n\n  /**\n   * Visual variant of the spinner.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'primary' | 'inverted' = 'default';\n\n  /**\n   * Accessible label announced to screen readers. Defaults to \"Loading\".\n   * Reflected as an attribute for Drupal/Twig compatibility.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Loading';\n\n  /**\n   * When true, the spinner is decorative and suppresses all ARIA announcements.\n   * Use this when the spinner appears alongside visible loading text to prevent\n   * duplicate announcements. Sets `role=\"presentation\"` and removes `aria-label`.\n   * @attr decorative\n   */\n  @property({ type: Boolean, reflect: true })\n  decorative = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-spinner', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize;\n    }\n  }\n\n  /** @internal */\n  private _isTokenSize(): this is { size: SpinnerSize } {\n    return this.size === 'sm' || this.size === 'md' || this.size === 'lg';\n  }\n\n  override render() {\n    const customSizeStyle =\n      !this._isTokenSize() && this.size ? styleMap({ '--_spinner-size': this.size }) : styleMap({});\n\n    // Decorative spinners use role=\"presentation\" to suppress AT announcements.\n    // Non-decorative spinners use role=\"status\" with aria-label for accessible naming.\n    // Guard against empty label (aria-label=\"\" is a WCAG failure).\n    const role = this.decorative ? 'presentation' : 'status';\n    const ariaLabel = this.decorative ? undefined : this.label || undefined;\n\n    return html`\n      <div\n        class=\"spinner\"\n        part=\"base\"\n        style=${customSizeStyle}\n        role=${role}\n        aria-label=${ifDefined(ariaLabel)}\n      >\n        <svg\n          class=\"spinner__svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <circle class=\"spinner__track\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"2.5\" fill=\"none\" />\n          <path\n            class=\"spinner__arc\"\n            d=\"M12 2a10 10 0 0 1 10 10\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-spinner': HelixSpinner;\n  }\n}\n"],"names":["helixSpinnerStyles","css","HelixSpinner","HelixElement","legacySize","customSizeStyle","styleMap","role","ariaLabel","html","ifDefined","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACyD3B,IAAMC,IAAN,cAA2BC,EAAa;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAaL,KAAA,OAA6D,MAO7D,KAAA,UAA8C,WAQ9C,KAAA,QAAQ,WASR,KAAA,aAAa;AAAA,EAAA;AAAA;AAAA,EAIJ,oBAA0B;AACjC,UAAM,kBAAA;AAGN,UAAMC,IAAa,KAAK,aAAa,MAAM;AAC3C,IAAIA,MAAe,QAAQ,CAAC,KAAK,aAAa,SAAS,MAErD,KAAK,OAAOA;AAAA,EAEhB;AAAA;AAAA,EAGQ,eAA8C;AACpD,WAAO,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ,KAAK,SAAS;AAAA,EACnE;AAAA,EAES,SAAS;AAChB,UAAMC,IACJ,CAAC,KAAK,aAAA,KAAkB,KAAK,OAAOC,EAAS,EAAE,mBAAmB,KAAK,KAAA,CAAM,IAAIA,EAAS,CAAA,CAAE,GAKxFC,IAAO,KAAK,aAAa,iBAAiB,UAC1CC,IAAY,KAAK,aAAa,SAAY,KAAK,SAAS;AAE9D,WAAOC;AAAA;AAAA;AAAA;AAAA,gBAIKJ,CAAe;AAAA,eAChBE,CAAI;AAAA,qBACEG,EAAUF,CAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBvC;AACF;AA9FaN,EACK,SAAS,CAACF,GAAoBW,CAAmB;AAYjEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAZpDX,EAaX,WAAA,QAAA,CAAA;AAOAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnB9BX,EAoBX,WAAA,WAAA,CAAA;AAQAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3B9BX,EA4BX,WAAA,SAAA,CAAA;AASAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApC/BX,EAqCX,WAAA,cAAA,CAAA;AArCWA,IAANU,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdZ,CAAA;"}

package/dist/shared/{hx-split-button-CGcJMmCG.js → hx-split-button-BxDFfx4D.js}

@@ -1,9 +1,10 @@
-import { css as m, nothing as v, html as c } from "lit";
-import { query as d, state as x, property as l, customElement as g } from "lit/decorators.js";
+import { css as m, nothing as x, html as d } from "lit";
+import { query as c, state as v, property as l, customElement as f } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
-import { H as f } from "./helix-element-BNEYeiys.js";
-import { c as _ } from "./id-counter-DuX8vsui.js";
-const y = m`
+import { f as g } from "./forced-colors-CTEDFRGa.js";
+import { H as _ } from "./helix-element-BNEYeiys.js";
+import { c as y } from "./id-counter-DuX8vsui.js";
+const w = m`
   :host {
     display: inline-block;
     position: relative;
@@ -33,8 +34,8 @@ const y = m`
     border-inline-end: none;
     border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -55,7 +56,7 @@ const y = m`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-split-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
@@ -83,11 +84,11 @@ const y = m`
     flex-shrink: 0;
     border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
     border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-split-button-divider-color, var(--hx-color-primary-900, #0b3232));
     border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
-    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -100,7 +101,7 @@ const y = m`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-split-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
@@ -174,10 +175,20 @@ const y = m`
 
   .split-button--primary .split-button__primary,
   .split-button--primary .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-400, #60a5fa);
+    --hx-split-button-divider-color: var(--hx-color-primary-900, #0b3232);
+  }
+
+  /* primary:hover — replace the universal brightness(0.9) filter (which would
+     drop primary-500 + on-primary contrast to ~4.4:1) with an explicit swap
+     to primary-600 and a neutral-0 foreground. Mirrors hx-button precedent. */
+  .split-button--primary .split-button__primary:hover,
+  .split-button--primary .split-button__trigger:hover {
+    --hx-split-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    filter: none;
   }
 
   /* ─── Variant: secondary ─── */
@@ -185,14 +196,14 @@ const y = m`
   .split-button--secondary .split-button__primary,
   .split-button--secondary .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);
-    --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);
+    --hx-split-button-color: var(--hx-color-primary-500, #429797);
+    --hx-split-button-border-color: var(--hx-color-primary-500, #429797);
+    --hx-split-button-divider-color: var(--hx-color-primary-300, #97cdcc);
   }
 
   .split-button--secondary .split-button__primary:hover,
   .split-button--secondary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-split-button-bg: var(--hx-color-primary-50, #ebf8f8);
     filter: none;
   }
 
@@ -200,15 +211,15 @@ const y = m`
 
   .split-button--tertiary .split-button__primary,
   .split-button--tertiary .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-split-button-bg: var(--hx-color-surface-sunken, #ebeee9);
+    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .split-button--tertiary .split-button__primary:hover,
   .split-button--tertiary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -216,15 +227,19 @@ const y = m`
 
   .split-button--danger .split-button__primary,
   .split-button--danger .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-error-500, #dc2626);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-bg: var(--hx-color-error-500, #e5493e);
+    --hx-split-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);
+    --hx-split-button-divider-color: var(--hx-color-error-400, #fc7264);
   }
 
+  /* danger:hover — on-error tokens are tuned for error-500. error-600 drops
+     the pair to 2.25:1 (AA fail). Pin fg at neutral-0 to keep the darker
+     hover fill legible. Mirrors hx-toast precedent (commit 300e21ab0). */
   .split-button--danger .split-button__primary:hover,
   .split-button--danger .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);
+    --hx-split-button-bg: var(--hx-color-error-600, #c92a2a);
+    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
     filter: none;
   }
 
@@ -233,14 +248,14 @@ const y = m`
   .split-button--ghost .split-button__primary,
   .split-button--ghost .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-split-button-color: var(--hx-color-primary-500, #429797);
     --hx-split-button-border-color: transparent;
-    --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);
+    --hx-split-button-divider-color: var(--hx-color-primary-200, #bce1e1);
   }
 
   .split-button--ghost .split-button__primary:hover,
   .split-button--ghost .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -249,14 +264,14 @@ const y = m`
   .split-button--outline .split-button__primary,
   .split-button--outline .split-button__trigger {
     --hx-split-button-bg: transparent;
-    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);
-    --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
-    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);
+    --hx-split-button-border-color: var(--hx-color-border-strong, #66787b);
+    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);
   }
 
   .split-button--outline .split-button__primary:hover,
   .split-button--outline .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);
     filter: none;
   }
 
@@ -281,9 +296,9 @@ const y = m`
     min-width: 100%;
     max-height: var(--hx-split-button-menu-max-height, 18rem);
     overflow-y: auto;
-    background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-split-button-menu-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-split-button-menu-shadow,
@@ -348,15 +363,15 @@ const y = m`
     }
   }
 `;
-var w = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (t, r, e, s) => {
-  for (var o = s > 1 ? void 0 : s ? k(r, e) : r, a = t.length - 1, u; a >= 0; a--)
-    (u = t[a]) && (o = (s ? u(r, e, o) : u(o)) || o);
-  return s && o && w(r, e, o), o;
+var k = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (t, r, e, s) => {
+  for (var o = s > 1 ? void 0 : s ? M(r, e) : r, a = t.length - 1, p; a >= 0; a--)
+    (p = t[a]) && (o = (s ? p(r, e, o) : p(o)) || o);
+  return s && o && k(r, e, o), o;
 };
-const M = _("hx-split-button");
-let i = class extends f {
+const C = y("hx-split-button");
+let i = class extends _ {
   constructor() {
-    super(...arguments), this._open = !1, this.variant = "primary", this.size = "md", this.disabled = !1, this.label = void 0, this.accessibleLabel = "", this.labelTrigger = "More actions", this.labelMenu = "Secondary actions", this._menuId = `${M()}-menu`, this._handleOutsideClick = (t) => {
+    super(...arguments), this._open = !1, this.variant = "primary", this.size = "md", this.disabled = !1, this.label = void 0, this.accessibleLabel = "", this.labelTrigger = "More actions", this.labelMenu = "Secondary actions", this._menuId = `${C()}-menu`, this._handleOutsideClick = (t) => {
       if (!this._open) return;
       const r = t.target;
       !this.contains(r) && r !== this && this._closeMenu();
@@ -406,21 +421,21 @@ let i = class extends f {
   // ─── Menu Key Navigation ───
   /** @internal */
   _handleMenuKeydown(t) {
-    var s, o, a, u, b;
+    var s, o, a, p, b;
     const r = this._getMenuItems();
     if (r.length === 0) return;
-    const e = r.findIndex((p) => p === document.activeElement);
+    const e = r.findIndex((u) => u === document.activeElement);
     switch (t.key) {
       case "ArrowDown": {
         t.preventDefault();
-        const p = e < r.length - 1 ? e + 1 : 0;
-        (s = r[p]) == null || s.focus();
+        const u = e < r.length - 1 ? e + 1 : 0;
+        (s = r[u]) == null || s.focus();
         break;
       }
       case "ArrowUp": {
         t.preventDefault();
-        const p = e > 0 ? e - 1 : r.length - 1;
-        (o = r[p]) == null || o.focus();
+        const u = e > 0 ? e - 1 : r.length - 1;
+        (o = r[u]) == null || o.focus();
         break;
       }
       case "Escape": {
@@ -428,7 +443,7 @@ let i = class extends f {
         break;
       }
       case "Home": {
-        t.preventDefault(), (u = r[0]) == null || u.focus();
+        t.preventDefault(), (p = r[0]) == null || p.focus();
         break;
       }
       case "End": {
@@ -497,7 +512,7 @@ let i = class extends f {
       "split-button__chevron": !0,
       "split-button__chevron--open": this._open
     };
-    return c`
+    return d`
       <div class=${h(t)}>
         <!-- Primary action button -->
         <button
@@ -505,11 +520,11 @@ let i = class extends f {
           class="split-button__primary"
           ?disabled=${this.disabled}
           type="button"
-          aria-label=${this.accessibleLabel ?? (this.label || v)}
+          aria-label=${this.accessibleLabel ?? (this.label || x)}
           @click=${this._handlePrimaryClick}
           @keydown=${this._handlePrimaryKeydown}
         >
-          ${this.label !== void 0 ? this.label : c`<slot></slot>`}
+          ${this.label !== void 0 ? this.label : d`<slot></slot>`}
         </button>
 
         <!-- Dropdown trigger button -->
@@ -560,15 +575,15 @@ let i = class extends f {
     `;
   }
 };
-i.styles = [y];
+i.styles = [w, g];
 n([
-  d(".split-button__menu")
+  c(".split-button__menu")
 ], i.prototype, "_menuPanel", 2);
 n([
-  d(".split-button__trigger")
+  c(".split-button__trigger")
 ], i.prototype, "_triggerButton", 2);
 n([
-  x()
+  v()
 ], i.prototype, "_open", 2);
 n([
   l({ type: String, reflect: !0 })
@@ -592,9 +607,9 @@ n([
   l({ type: String, attribute: "label-menu" })
 ], i.prototype, "labelMenu", 2);
 i = n([
-  g("hx-split-button")
+  f("hx-split-button")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-split-button-CGcJMmCG.js.map
+//# sourceMappingURL=hx-split-button-BxDFfx4D.js.map

package/dist/shared/hx-split-button-BxDFfx4D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-split-button-BxDFfx4D.js","sources":["../../src/components/hx-split-button/hx-split-button.styles.ts","../../src/components/hx-split-button/hx-split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitButtonStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Container ─── */\n\n  .split-button {\n    display: inline-flex;\n    align-items: stretch;\n    position: relative;\n  }\n\n  /* ─── Primary Button ─── */\n\n  .split-button__primary {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);\n    border-inline-end: none;\n    border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0\n      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));\n    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));\n    font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-split-button-font-weight, var(--hx-font-weight-semibold, 600));\n    line-height: var(--hx-line-height-tight, 1.25);\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    text-decoration: none;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n    flex: 1 1 auto;\n  }\n\n  .split-button__primary:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-split-button-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    z-index: 1;\n    position: relative;\n  }\n\n  .split-button__primary:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .split-button__primary:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  .split-button__primary[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Trigger Button ─── */\n\n  .split-button__trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);\n    border-inline-start: var(--hx-border-width-thin, 1px) solid\n      var(--hx-split-button-divider-color, var(--hx-color-primary-900, #0b3232));\n    border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))\n      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;\n    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #429797));\n    color: var(--hx-split-button-color, var(--hx-color-text-on-primary, #ffffff));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .split-button__trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-split-button-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-600, #0f7078))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    z-index: 1;\n    position: relative;\n  }\n\n  .split-button__trigger:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .split-button__trigger:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  .split-button__trigger[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Trigger Icon ─── */\n\n  .split-button__chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .split-button__chevron--open {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* sm */\n  .split-button--sm .split-button__primary {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .split-button--sm .split-button__trigger {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  /* md */\n  .split-button--md .split-button__primary {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    font-size: var(--hx-font-size-md, 1rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .split-button--md .split-button__trigger {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  /* lg */\n  .split-button--lg .split-button__primary {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  .split-button--lg .split-button__trigger {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Variant: primary ─── */\n\n  .split-button--primary .split-button__primary,\n  .split-button--primary .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-primary-500, #429797);\n    --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-primary-900, #0b3232);\n  }\n\n  /* primary:hover — replace the universal brightness(0.9) filter (which would\n     drop primary-500 + on-primary contrast to ~4.4:1) with an explicit swap\n     to primary-600 and a neutral-0 foreground. Mirrors hx-button precedent. */\n  .split-button--primary .split-button__primary:hover,\n  .split-button--primary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-primary-600, #0f7078);\n    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n    filter: none;\n  }\n\n  /* ─── Variant: secondary ─── */\n\n  .split-button--secondary .split-button__primary,\n  .split-button--secondary .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-primary-500, #429797);\n    --hx-split-button-border-color: var(--hx-color-primary-500, #429797);\n    --hx-split-button-divider-color: var(--hx-color-primary-300, #97cdcc);\n  }\n\n  .split-button--secondary .split-button__primary:hover,\n  .split-button--secondary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-primary-50, #ebf8f8);\n    filter: none;\n  }\n\n  /* ─── Variant: tertiary ─── */\n\n  .split-button--tertiary .split-button__primary,\n  .split-button--tertiary .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);\n  }\n\n  .split-button--tertiary .split-button__primary:hover,\n  .split-button--tertiary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n    filter: none;\n  }\n\n  /* ─── Variant: danger ─── */\n\n  .split-button--danger .split-button__primary,\n  .split-button--danger .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-error-500, #e5493e);\n    --hx-split-button-color: var(--hx-color-text-on-error, #ffffff);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-error-400, #fc7264);\n  }\n\n  /* danger:hover — on-error tokens are tuned for error-500. error-600 drops\n     the pair to 2.25:1 (AA fail). Pin fg at neutral-0 to keep the darker\n     hover fill legible. Mirrors hx-toast precedent (commit 300e21ab0). */\n  .split-button--danger .split-button__primary:hover,\n  .split-button--danger .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-error-600, #c92a2a);\n    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n    filter: none;\n  }\n\n  /* ─── Variant: ghost ─── */\n\n  .split-button--ghost .split-button__primary,\n  .split-button--ghost .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-primary-500, #429797);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-primary-200, #bce1e1);\n  }\n\n  .split-button--ghost .split-button__primary:hover,\n  .split-button--ghost .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n    filter: none;\n  }\n\n  /* ─── Variant: outline ─── */\n\n  .split-button--outline .split-button__primary,\n  .split-button--outline .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-text-primary, #0d1825);\n    --hx-split-button-border-color: var(--hx-color-border-strong, #66787b);\n    --hx-split-button-divider-color: var(--hx-color-border-default, #d6dbd5);\n  }\n\n  .split-button--outline .split-button__primary:hover,\n  .split-button--outline .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n    filter: none;\n  }\n\n  /* ─── Dropdown Menu Panel ─── */\n\n  @keyframes hx-split-button-menu-open {\n    from {\n      opacity: 0;\n      transform: translateY(-4px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .split-button__menu {\n    display: none;\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    inset-inline-end: 0;\n    min-width: 100%;\n    max-height: var(--hx-split-button-menu-max-height, 18rem);\n    overflow-y: auto;\n    background-color: var(--hx-split-button-menu-bg, var(--hx-color-surface-default, #ffffff));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-split-button-menu-border-color, var(--hx-color-border-default, #d6dbd5));\n    border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-split-button-menu-shadow,\n      0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),\n      0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))\n    );\n    padding: var(--hx-space-1, 0.25rem);\n    z-index: var(--hx-z-index-dropdown, 1000);\n  }\n\n  .split-button__menu--open {\n    display: block;\n    animation: hx-split-button-menu-open var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .split-button__primary,\n    .split-button__trigger,\n    .split-button__chevron {\n      transition: none;\n    }\n\n    .split-button__menu--open {\n      animation: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .split-button__primary,\n    .split-button__trigger {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 2px solid ButtonText;\n    }\n\n    .split-button__primary:focus-visible,\n    .split-button__trigger:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .split-button__primary[disabled],\n    .split-button__trigger[disabled] {\n      background-color: ButtonFace;\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    .split-button__menu {\n      background-color: Canvas;\n      border: 2px solid CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixSplitButtonStyles } from './hx-split-button.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport type { HelixMenuItem } from '../hx-menu/hx-menu-item.js';\n\nconst _nextSplitButtonId = createIdCounter('hx-split-button');\n\n/**\n * A split button combining a primary action button with an attached dropdown\n * menu for secondary actions. Implements the ARIA menu button pattern for\n * full keyboard and screen reader support.\n *\n * @summary Primary action button with attached dropdown menu for secondary actions.\n *\n * @tag hx-split-button\n *\n * @slot - Primary button label text.\n * @slot menu - `hx-menu-item` children rendered in the dropdown panel.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n *   the primary button is clicked and is not disabled.\n * @fires {CustomEvent<{value: string; label: string}>} hx-select - Dispatched when\n *   a menu item is selected from the dropdown.\n *\n * @csspart button - The primary action button element.\n * @csspart trigger - The dropdown trigger button element.\n * @csspart menu - The dropdown menu panel.\n *\n * @cssprop [--hx-split-button-menu-max-height=18rem] - Maximum height of the dropdown menu panel before scrolling.\n * @cssprop [--hx-split-button-bg=var(--hx-color-primary-500)] - Background color for both buttons.\n * @cssprop [--hx-split-button-color=var(--hx-color-neutral-0)] - Text/icon color for both buttons.\n * @cssprop [--hx-split-button-border-color=transparent] - Border color.\n * @cssprop [--hx-split-button-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-split-button-divider-color=var(--hx-color-primary-900)] - Color of the divider between primary and trigger.\n * @cssprop [--hx-split-button-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-split-button-font-weight=var(--hx-font-weight-semibold)] - Font weight.\n * @cssprop [--hx-split-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-split-button-menu-bg=var(--hx-color-neutral-0)] - Dropdown menu background.\n * @cssprop [--hx-split-button-menu-border-color=var(--hx-color-neutral-200)] - Dropdown menu border color.\n * @cssprop [--hx-split-button-menu-border-radius=var(--hx-border-radius-md)] - Dropdown menu border radius.\n * @cssprop [--hx-split-button-menu-shadow] - Dropdown menu box shadow.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-filter-brightness-hover] - CSS filter.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-color-primary-300] - Color.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-400] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n * @cssprop [--hx-color-primary-200] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-overlay-black-10] - Overlay color.\n * @cssprop [--hx-z-index-dropdown] - Z-index layer.\n */\n@customElement('hx-split-button')\nexport class HelixSplitButton extends HelixElement {\n  static override styles = [helixSplitButtonStyles, forcedColorsInteractive];\n\n  // ─── Internal References ───\n\n  /**\n   * Reference to the dropdown menu panel element, used for positioning and focus management.\n   * @internal\n   */\n  @query('.split-button__menu')\n  private _menuPanel: HTMLElement | undefined;\n\n  /**\n   * Reference to the dropdown trigger button element, used to return focus after menu closes.\n   * @internal\n   */\n  @query('.split-button__trigger')\n  private _triggerButton: HTMLButtonElement | undefined;\n\n  // ─── Internal State ───\n\n  /**\n   * Tracks whether the dropdown menu is currently open.\n   * @internal\n   */\n  @state() private _open = false;\n\n  // ─── Public Properties ───\n\n  /**\n   * Visual style variant of the split button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n  /**\n   * Size of the split button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the split button is disabled. Both the primary button and the\n   * trigger are disabled when this is true.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Primary button label text. When set, overrides the default slot content.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  /**\n   * Accessible label for the primary action button. Required for icon-only usage\n   * or when the button label alone is insufficient context.\n   * Uses `accessible-label` attribute instead of `aria-label` to avoid\n   * ARIAMixin shadowing on the host element.\n   *\n   * Note: `mixinDelegatesAria` is not applied to this component because the\n   * `accessible-label` attribute approach avoids the ARIAMixin property conflict\n   * without requiring mixin overhead.\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel = '';\n\n  /**\n   * Accessible label for the dropdown trigger button. Override for localization.\n   * @attr label-trigger\n   */\n  @property({ type: String, attribute: 'label-trigger' })\n  labelTrigger = 'More actions';\n\n  /**\n   * Accessible label for the dropdown menu panel. Override for localization.\n   * @attr label-menu\n   */\n  @property({ type: String, attribute: 'label-menu' })\n  labelMenu = 'Secondary actions';\n\n  // ─── Unique IDs ───\n\n  /**\n   * Stable unique ID for the dropdown menu panel element, used to wire aria-controls on the trigger button.\n   * @internal\n   */\n  private readonly _menuId = `${_nextSplitButtonId()}-menu`;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    document.addEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  // ─── Outside-click / document keydown ───\n\n  /** @internal */\n  private readonly _handleOutsideClick = (e: MouseEvent): void => {\n    if (!this._open) return;\n    const target = e.target as Node;\n    if (!this.contains(target) && target !== this) {\n      this._closeMenu();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleDocumentKeydown = (e: KeyboardEvent): void => {\n    if (!this._open) return;\n    if (e.key === 'Tab') {\n      this._closeMenu();\n    }\n  };\n\n  // ─── Primary Button Handlers ───\n\n  /** @internal */\n  private _handlePrimaryClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the primary button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handlePrimaryKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  // ─── Trigger Button Handlers ───\n\n  /** @internal */\n  private _handleTriggerClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    // Stop propagation so _handleOutsideClick does not immediately close.\n    e.stopPropagation();\n    this._toggleMenu();\n  }\n\n  /** @internal */\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  // ─── Menu Key Navigation ───\n\n  /** @internal */\n  private _handleMenuKeydown(e: KeyboardEvent): void {\n    const items = this._getMenuItems();\n    if (items.length === 0) return;\n\n    // document.activeElement returns the hx-menu-item host element when its\n    // inner shadow DOM element has focus, which matches items[] directly.\n    const currentIndex = items.findIndex((item) => item === document.activeElement);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        items[next]?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        items[prev]?.focus();\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this._closeMenu();\n        this._triggerButton?.focus();\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        items[0]?.focus();\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        items[items.length - 1]?.focus();\n        break;\n      }\n    }\n  }\n\n  // ─── Menu Item Selection ───\n\n  /** @internal */\n  private _handleMenuItemSelect(e: Event): void {\n    if (!(e instanceof CustomEvent)) return;\n    const custom = e as CustomEvent<{ item: HelixMenuItem; value: string }>;\n    this._closeMenu();\n    this._triggerButton?.focus();\n\n    const item = custom.detail.item;\n    const label = item?.textContent?.trim() ?? '';\n\n    /**\n     * Dispatched when a menu item is selected.\n     * @event hx-select\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string; label: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value: custom.detail.value, label },\n      }),\n    );\n  }\n\n  // ─── Menu Helpers ───\n\n  /** @internal */\n  private _openMenu(): void {\n    if (this._open) return;\n    this._open = true;\n    // Focus the first enabled menu item after the panel renders\n    void this.updateComplete\n      .then(() => {\n        const items = this._getMenuItems();\n        items[0]?.focus();\n      })\n      .catch(() => undefined);\n  }\n\n  /** @internal */\n  private _closeMenu(): void {\n    this._open = false;\n  }\n\n  /** @internal */\n  private _toggleMenu(): void {\n    if (this._open) {\n      this._closeMenu();\n    } else {\n      this._openMenu();\n    }\n  }\n\n  /**\n   * Returns the enabled hx-menu-item host elements assigned to the `menu` slot.\n   * HelixMenuItem overrides focus() to delegate to its inner element, so calling\n   * .focus() on hosts works correctly. document.activeElement returns the host\n   * element when the inner shadow element has focus, enabling correct index tracking.\n   */\n  /** @internal */\n  private _getMenuItems(): HelixMenuItem[] {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\n    if (!slot) return [];\n\n    return slot\n      .assignedElements({ flatten: true })\n      .filter(\n        (el): el is HelixMenuItem =>\n          el.tagName.toLowerCase() === 'hx-menu-item' && !(el as HelixMenuItem).disabled,\n      );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const containerClasses = {\n      'split-button': true,\n      [`split-button--${this.variant}`]: true,\n      [`split-button--${this.size}`]: true,\n    };\n\n    const menuClasses = {\n      'split-button__menu': true,\n      'split-button__menu--open': this._open,\n    };\n\n    const chevronClasses = {\n      'split-button__chevron': true,\n      'split-button__chevron--open': this._open,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <!-- Primary action button -->\n        <button\n          part=\"button\"\n          class=\"split-button__primary\"\n          ?disabled=${this.disabled}\n          type=\"button\"\n          aria-label=${this.accessibleLabel ?? (this.label || nothing)}\n          @click=${this._handlePrimaryClick}\n          @keydown=${this._handlePrimaryKeydown}\n        >\n          ${this.label !== undefined ? this.label : html`<slot></slot>`}\n        </button>\n\n        <!-- Dropdown trigger button -->\n        <button\n          part=\"trigger\"\n          class=\"split-button__trigger\"\n          ?disabled=${this.disabled}\n          aria-haspopup=\"menu\"\n          aria-expanded=${this._open ? 'true' : 'false'}\n          aria-controls=${this._menuId}\n          aria-label=${this.labelTrigger}\n          type=\"button\"\n          @click=${this._handleTriggerClick}\n          @keydown=${this._handleTriggerKeydown}\n        >\n          <span class=${classMap(chevronClasses)} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"8\"\n              viewBox=\"0 0 12 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 1.5L6 6.5L11 1.5\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        </button>\n\n        <!-- Dropdown menu panel -->\n        <div\n          part=\"menu\"\n          id=${this._menuId}\n          class=${classMap(menuClasses)}\n          role=\"menu\"\n          aria-label=${this.labelMenu}\n          @keydown=${this._handleMenuKeydown}\n          @hx-item-select=${this._handleMenuItemSelect}\n        >\n          <slot name=\"menu\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-split-button': HelixSplitButton;\n  }\n}\n"],"names":["helixSplitButtonStyles","css","_nextSplitButtonId","createIdCounter","HelixSplitButton","HelixElement","e","target","items","currentIndex","item","next","_a","prev","_b","_c","_d","_e","custom","label","slot","el","containerClasses","menuClasses","chevronClasses","html","classMap","nothing","forcedColorsInteractive","__decorateClass","query","state","property","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOtC,MAAMC,IAAqBC,EAAgB,iBAAiB;AA6ErD,IAAMC,IAAN,cAA+BC,EAAa;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAyBI,KAAQ,QAAQ,IASzB,KAAA,UAAiF,WAOjF,KAAA,OAA2B,MAQ3B,KAAA,WAAW,IAOX,KAAA,QAA4B,QAc5B,KAAA,kBAAkB,IAOlB,KAAA,eAAe,gBAOf,KAAA,YAAY,qBAQZ,KAAiB,UAAU,GAAGH,EAAA,CAAoB,SAmBlD,KAAiB,sBAAsB,CAACI,MAAwB;AAC9D,UAAI,CAAC,KAAK,MAAO;AACjB,YAAMC,IAASD,EAAE;AACjB,MAAI,CAAC,KAAK,SAASC,CAAM,KAAKA,MAAW,QACvC,KAAK,WAAA;AAAA,IAET,GAGA,KAAiB,yBAAyB,CAACD,MAA2B;AACpE,MAAK,KAAK,SACNA,EAAE,QAAQ,SACZ,KAAK,WAAA;AAAA,IAET;AAAA,EAAA;AAAA;AAAA,EA7BS,oBAA0B;AACjC,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,mBAAmB,GAC3D,SAAS,iBAAiB,WAAW,KAAK,sBAAsB;AAAA,EAClE;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,GAC9D,SAAS,oBAAoB,WAAW,KAAK,sBAAsB;AAAA,EACrE;AAAA;AAAA;AAAA,EAwBQ,oBAAoBA,GAAqB;AAC/C,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAMA,SAAK;AAAA,MACH,IAAI,YAA2C,YAAY;AAAA,QACzD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,eAAeA,EAAA;AAAA,MAAE,CAC5B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,sBAAsBA,GAAwB;AACpD,IAAI,KAAK,YACLA,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACF,KAAK,UAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKQ,oBAAoBA,GAAqB;AAC/C,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,IAAAA,EAAE,gBAAA,GACF,KAAK,YAAA;AAAA,EACP;AAAA;AAAA,EAGQ,sBAAsBA,GAAwB;AACpD,IAAI,KAAK,YACLA,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACF,KAAK,UAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKQ,mBAAmBA,GAAwB;;AACjD,UAAME,IAAQ,KAAK,cAAA;AACnB,QAAIA,EAAM,WAAW,EAAG;AAIxB,UAAMC,IAAeD,EAAM,UAAU,CAACE,MAASA,MAAS,SAAS,aAAa;AAE9E,YAAQJ,EAAE,KAAA;AAAA,MACR,KAAK,aAAa;AAChB,QAAAA,EAAE,eAAA;AACF,cAAMK,IAAOF,IAAeD,EAAM,SAAS,IAAIC,IAAe,IAAI;AAClE,SAAAG,IAAAJ,EAAMG,CAAI,MAAV,QAAAC,EAAa;AACb;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,QAAAN,EAAE,eAAA;AACF,cAAMO,IAAOJ,IAAe,IAAIA,IAAe,IAAID,EAAM,SAAS;AAClE,SAAAM,IAAAN,EAAMK,CAAI,MAAV,QAAAC,EAAa;AACb;AAAA,MACF;AAAA,MACA,KAAK,UAAU;AACb,QAAAR,EAAE,eAAA,GACF,KAAK,WAAA,IACLS,IAAA,KAAK,mBAAL,QAAAA,EAAqB;AACrB;AAAA,MACF;AAAA,MACA,KAAK,QAAQ;AACX,QAAAT,EAAE,eAAA,IACFU,IAAAR,EAAM,CAAC,MAAP,QAAAQ,EAAU;AACV;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,QAAAV,EAAE,eAAA,IACFW,IAAAT,EAAMA,EAAM,SAAS,CAAC,MAAtB,QAAAS,EAAyB;AACzB;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA;AAAA,EAKQ,sBAAsBX,GAAgB;;AAC5C,QAAI,EAAEA,aAAa,aAAc;AACjC,UAAMY,IAASZ;AACf,SAAK,WAAA,IACLM,IAAA,KAAK,mBAAL,QAAAA,EAAqB;AAErB,UAAMF,IAAOQ,EAAO,OAAO,MACrBC,MAAQL,IAAAJ,KAAA,gBAAAA,EAAM,gBAAN,gBAAAI,EAAmB,WAAU;AAM3C,SAAK;AAAA,MACH,IAAI,YAA8C,aAAa;AAAA,QAC7D,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAOI,EAAO,OAAO,OAAO,OAAAC,EAAA;AAAA,MAAM,CAC7C;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKQ,YAAkB;AACxB,IAAI,KAAK,UACT,KAAK,QAAQ,IAER,KAAK,eACP,KAAK,MAAM;;AAEV,OAAAP,IADc,KAAK,cAAA,EACb,CAAC,MAAP,QAAAA,EAAU;AAAA,IACZ,CAAC,EACA,MAAM,MAAA;AAAA,KAAe;AAAA,EAC1B;AAAA;AAAA,EAGQ,aAAmB;AACzB,SAAK,QAAQ;AAAA,EACf;AAAA;AAAA,EAGQ,cAAoB;AAC1B,IAAI,KAAK,QACP,KAAK,WAAA,IAEL,KAAK,UAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASQ,gBAAiC;;AACvC,UAAMQ,KAAOR,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,WAAKQ,IAEEA,EACJ,iBAAiB,EAAE,SAAS,GAAA,CAAM,EAClC;AAAA,MACC,CAACC,MACCA,EAAG,QAAQ,kBAAkB,kBAAkB,CAAEA,EAAqB;AAAA,IAAA,IAN1D,CAAA;AAAA,EAQpB;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAmB;AAAA,MACvB,gBAAgB;AAAA,MAChB,CAAC,iBAAiB,KAAK,OAAO,EAAE,GAAG;AAAA,MACnC,CAAC,iBAAiB,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAc;AAAA,MAClB,sBAAsB;AAAA,MACtB,4BAA4B,KAAK;AAAA,IAAA,GAG7BC,IAAiB;AAAA,MACrB,yBAAyB;AAAA,MACzB,+BAA+B,KAAK;AAAA,IAAA;AAGtC,WAAOC;AAAA,mBACQC,EAASJ,CAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,KAAK,QAAQ;AAAA;AAAA,uBAEZ,KAAK,oBAAoB,KAAK,SAASK,EAAQ;AAAA,mBACnD,KAAK,mBAAmB;AAAA,qBACtB,KAAK,qBAAqB;AAAA;AAAA,YAEnC,KAAK,UAAU,SAAY,KAAK,QAAQF,gBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOjD,KAAK,QAAQ;AAAA;AAAA,0BAET,KAAK,QAAQ,SAAS,OAAO;AAAA,0BAC7B,KAAK,OAAO;AAAA,uBACf,KAAK,YAAY;AAAA;AAAA,mBAErB,KAAK,mBAAmB;AAAA,qBACtB,KAAK,qBAAqB;AAAA;AAAA,wBAEvBC,EAASF,CAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAsBjC,KAAK,OAAO;AAAA,kBACTE,EAASH,CAAW,CAAC;AAAA;AAAA,uBAEhB,KAAK,SAAS;AAAA,qBAChB,KAAK,kBAAkB;AAAA,4BAChB,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD;AACF;AA3XanB,EACK,SAAS,CAACJ,GAAwB4B,CAAuB;AASjEC,EAAA;AAAA,EADPC,EAAM,qBAAqB;AAAA,GATjB1B,EAUH,WAAA,cAAA,CAAA;AAOAyB,EAAA;AAAA,EADPC,EAAM,wBAAwB;AAAA,GAhBpB1B,EAiBH,WAAA,kBAAA,CAAA;AAQSyB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAzBI3B,EAyBM,WAAA,SAAA,CAAA;AASjByB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjC9B5B,EAkCX,WAAA,WAAA,CAAA;AAOAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAxCpD5B,EAyCX,WAAA,QAAA,CAAA;AAQAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhD/B5B,EAiDX,WAAA,YAAA,CAAA;AAOAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvDf5B,EAwDX,WAAA,SAAA,CAAA;AAcAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GArE9C5B,EAsEX,WAAA,mBAAA,CAAA;AAOAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GA5E3C5B,EA6EX,WAAA,gBAAA,CAAA;AAOAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAnFxC5B,EAoFX,WAAA,aAAA,CAAA;AApFWA,IAANyB,EAAA;AAAA,EADNI,EAAc,iBAAiB;AAAA,GACnB7B,CAAA;"}