@helixui/library 2.1.2 → 3.0.0-next.62

package/dist/shared/hx-switch-DqOD9JR7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-switch-DqOD9JR7.js","sources":["../../src/components/hx-switch/hx-switch.styles.ts","../../src/components/hx-switch/hx-switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSwitchStyles = 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  /* --- Layout --- */\n\n  .switch {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-switch-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height.\n     The track itself is smaller visually, but the row must meet the\n     interactive touch target threshold for all size variants. */\n  .switch__control-row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n  }\n\n  /* --- Track --- */\n\n  .switch__track {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    border: none;\n    padding: 0;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));\n    cursor: pointer;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    outline: none;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .switch__track:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-switch-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .switch--checked .switch__track {\n    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* --- Thumb --- */\n\n  .switch__thumb {\n    position: absolute;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));\n    box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* --- Size: sm (track 32x18, thumb 14px) --- */\n\n  .switch--sm .switch__track {\n    width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));\n    height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));\n  }\n\n  .switch--sm .switch__thumb {\n    width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n    height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--sm.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));\n  }\n\n  /* --- Size: md (track 40x22, thumb 18px) --- */\n\n  .switch--md .switch__track {\n    width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));\n    height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));\n  }\n\n  .switch--md .switch__thumb {\n    width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n    height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--md.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));\n  }\n\n  /* --- Size: lg (track 48x26, thumb 22px) --- */\n\n  .switch--lg .switch__track {\n    width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));\n    height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));\n  }\n\n  .switch--lg .switch__thumb {\n    width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n    height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--lg.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));\n  }\n\n  /* --- Label --- */\n\n  .switch__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .switch__required-marker {\n    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* --- Help Text & Error --- */\n\n  .switch__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .switch__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* --- Reduced Motion --- */\n\n  @media (prefers-reduced-motion: reduce) {\n    .switch__track,\n    .switch__thumb {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .switch__track {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      border: 2px solid ButtonText;\n    }\n\n    .switch__track:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .switch__thumb {\n      background-color: ButtonText;\n      box-shadow: none;\n    }\n\n    .switch--checked .switch__track {\n      background-color: Highlight;\n      border-color: Highlight;\n    }\n\n    .switch--checked .switch__thumb {\n      background-color: HighlightText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .switch__track {\n      border-color: GrayText;\n      background-color: ButtonFace;\n    }\n\n    :host([disabled]) .switch__thumb {\n      background-color: GrayText;\n    }\n\n    :host([disabled]) .switch__label {\n      color: GrayText;\n    }\n\n    .switch__label {\n      color: CanvasText;\n    }\n\n    .switch__help-text {\n      color: GrayText;\n    }\n\n    .switch__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixSwitchStyles } from './hx-switch.styles.js';\n\nconst _nextSwitchId = createIdCounter('hx-switch');\n\n/** Detail for the hx-change event dispatched by hx-switch. */\nexport interface HxSwitchChangeDetail {\n  checked: boolean;\n  value: string;\n}\n\n/**\n * A toggle switch component for on/off states.\n *\n * Uses `role=\"switch\"` with `aria-checked` to convey toggle state.\n * Supports keyboard activation via Space key (per ARIA APG switch pattern).\n * Label association is handled through `aria-labelledby`, and\n * error/help text are linked via `aria-describedby`.\n *\n * @summary Form-associated toggle switch with label, error, and help text.\n *\n * @tag hx-switch\n *\n * @slot - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the switch is toggled. Boolean-selection controls (`hx-switch`, `hx-checkbox`) include both `checked` (boolean state) and `value` (form value) in the detail; text-value controls (`hx-text-input`, `hx-combobox`, `hx-select`) emit only `{value}`.\n *\n * @csspart switch - The switch container (track + thumb wrapper).\n * @csspart track - The track background element.\n * @csspart thumb - The sliding thumb element.\n * @csspart label - The label text element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-switch-track-bg=var(--hx-color-neutral-300)] - Track background color.\n * @cssprop [--hx-switch-track-checked-bg=var(--hx-color-primary-500)] - Track background when checked.\n * @cssprop [--hx-switch-thumb-bg=var(--hx-color-neutral-0)] - Thumb background color.\n * @cssprop [--hx-switch-thumb-shadow=var(--hx-shadow-sm)] - Thumb box shadow.\n * @cssprop [--hx-switch-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-switch-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-switch-error-color=var(--hx-color-error-500)] - Error message color.\n * @cssprop [--hx-switch-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n */\n@customElement('hx-switch')\nexport class HelixSwitch extends FormMixin(HelixElement) {\n  static override styles = [helixSwitchStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * Whether the switch is toggled on.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Whether the switch is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the switch is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The name of the switch, used for form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * The value submitted when the switch is checked.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = 'on';\n\n  /**\n   * The visible label text for the switch.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Size variant of the switch.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Error message to display. When set, the switch enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the switch for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this._internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Recalculates and sets the validity state based on required and checked. */\n  /** @internal */\n  override _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.requiredMessage,\n        this._trackEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  protected override _onFormReset(): void {\n    this.checked = false;\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      this.checked = state === this.value;\n    }\n  }\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** Reference to the native button element acting as the switch track.  * @internal\n   */\n  @query('.switch__track')\n  private _trackEl: HTMLButtonElement | null | undefined;\n\n  /** Whether the error slot has assigned content. */\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n\n  /** Whether the default slot has assigned content (slotted label). */\n  /** @internal */\n  @state() private _hasDefaultSlot = false;\n\n  // ─── Slot Handlers ───\n\n  /** Updates _hasErrorSlot when error slot content changes. */\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** Updates _hasDefaultSlot when default slot content changes. */\n  /** @internal */\n  private _handleDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasDefaultSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Event Handling ───\n\n  /** Toggles checked state and dispatches hx-change event. */\n  /** @internal */\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this._handleInteractionInput();\n\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n  }\n\n  /** Handles click events on the track. */\n  /** @internal */\n  private _handleClick(): void {\n    this._toggle();\n  }\n\n  /** Handles keydown events — Space toggles the switch per ARIA APG. */\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      this._toggle();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the switch track element. */\n  override focus(options?: FocusOptions): void {\n    this._trackEl?.focus(options);\n  }\n\n  // ─── Render ───\n\n  /** Unique ID for this switch instance, used for ARIA associations. */\n  /** @internal */\n  private _switchId = _nextSwitchId();\n  /** ID for the label element, referenced by aria-labelledby. */\n  /** @internal */\n  private _labelId = `${this._switchId}-label`;\n  /** ID for the help text element, referenced by aria-describedby. */\n  /** @internal */\n  private _helpTextId = `${this._switchId}-help`;\n  /** ID for the error element, referenced by aria-describedby. */\n  /** @internal */\n  private _errorId = `${this._switchId}-error`;\n\n  override render() {\n    const hasError = !!this.error;\n    const hasLabel = !!this.label || this._hasDefaultSlot;\n\n    const containerClasses = {\n      switch: true,\n      'switch--checked': this.checked,\n      'switch--disabled': this.disabled,\n      'switch--required': this.required,\n      'switch--error': hasError,\n      [`switch--${this.size}`]: true,\n    };\n\n    const describedBy =\n      [\n        hasError || this._hasErrorSlot ? this._errorId : null,\n        this.helpText && !hasError ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"switch\" class=${classMap(containerClasses)}>\n        <div class=\"switch__control-row\">\n          <button\n            part=\"track\"\n            class=\"switch__track\"\n            id=${this._switchId}\n            type=\"button\"\n            role=\"switch\"\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-labelledby=${ifDefined(hasLabel ? this._labelId : undefined)}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-required=${this.required ? 'true' : nothing}\n            ?disabled=${this.disabled}\n            @click=${this._handleClick}\n            @keydown=${this._handleKeyDown}\n          >\n            <span part=\"thumb\" class=\"switch__thumb\"></span>\n          </button>\n\n          <label part=\"label\" class=\"switch__label\" id=${this._labelId} for=${this._switchId}>\n            <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required\n              ? html`<span class=\"switch__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </label>\n        </div>\n\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${hasError\n            ? html`<div part=\"error\" class=\"switch__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>`\n            : nothing}\n        </slot>\n\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"switch__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/**\n * Per-component event map for type-safe addEventListener on hx-switch.\n * The `hx-change` detail always includes both `checked` and `value` for this component.\n */\nexport interface HxSwitchEventMap {\n  'hx-change': CustomEvent<{ checked: boolean; value: string }>;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-switch': HelixSwitch;\n  }\n}\n\nexport type HxSwitch = HelixSwitch;\n"],"names":["helixSwitchStyles","css","_nextSwitchId","createIdCounter","HelixSwitch","FormMixin","HelixElement","changedProperties","state","_mode","disabled","e","slot","options","_a","hasError","hasLabel","containerClasses","describedBy","html","classMap","ifDefined","nothing","__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;;;;;;ACOjC,MAAMC,IAAgBC,EAAgB,WAAW;AA2C1C,IAAMC,IAAN,cAA0BC,EAAUC,CAAY,EAAE;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAeL,KAAA,UAAU,IAOV,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,OAAO,IAOP,KAAA,QAAQ,MAOR,KAAA,QAAQ,IAOR,KAAA,OAA2B,MAO3B,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,kBAAkB,2BAqDT,KAAQ,gBAAgB,IAIxB,KAAQ,kBAAkB,IA8DnC,KAAQ,YAAYJ,EAAA,GAGpB,KAAQ,WAAW,GAAG,KAAK,SAAS,UAGpC,KAAQ,cAAc,GAAG,KAAK,SAAS,SAGvC,KAAQ,WAAW,GAAG,KAAK,SAAS;AAAA,EAAA;AAAA;AAAA,EA5H3B,QAAQK,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,IAC3BA,EAAkB,IAAI,SAAS,KAAKA,EAAkB,IAAI,OAAO,MACnE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;AAAA,EAEjE;AAAA;AAAA;AAAA;AAAA,EAMS,kBAAwB;AAC/B,IAAI,KAAK,YAAY,CAAC,KAAK,UACzB,KAAK,WAAW;AAAA,MACd,EAAE,cAAc,GAAA;AAAA,MAChB,KAAK,SAAS,KAAK;AAAA,MACnB,KAAK,YAAY;AAAA,IAAA,IAGnB,KAAK,WAAW,YAAY,EAAE;AAAA,EAElC;AAAA,EAEmB,eAAqB;AACtC,SAAK,UAAU,IACf,KAAK,WAAW,aAAa,IAAI,GACjC,KAAK,uBAAA;AAAA,EACP;AAAA,EAEmB,oBACjBC,GACAC,GACM;AACN,IAAI,OAAOD,KAAU,aACnB,KAAK,UAAUA,MAAU,KAAK;AAAA,EAElC;AAAA,EAEmB,gBAAgBE,GAAyB;AAC1D,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAmBQ,uBAAuBC,GAAgB;AAC7C,UAAMC,IAAOD,EAAE;AACf,SAAK,gBAAgBC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACtE;AAAA;AAAA;AAAA,EAIQ,yBAAyBD,GAAgB;AAC/C,UAAMC,IAAOD,EAAE;AACf,SAAK,kBAAkBC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACxE;AAAA;AAAA;AAAA;AAAA,EAMQ,UAAgB;AACtB,IAAI,KAAK,aACT,KAAK,UAAU,CAAC,KAAK,SACrB,KAAK,wBAAA,GAEL,KAAK;AAAA,MACH,IAAI,YAAiD,aAAa;AAAA,QAChE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,MAAA;AAAA,MAAM,CACpD;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAIQ,eAAqB;AAC3B,SAAK,QAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAIQ,eAAeD,GAAwB;AAC7C,IAAIA,EAAE,QAAQ,QACZA,EAAE,eAAA,GACF,KAAK,QAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKS,MAAME,GAA8B;;AAC3C,KAAAC,IAAA,KAAK,aAAL,QAAAA,EAAe,MAAMD;AAAA,EACvB;AAAA,EAiBS,SAAS;AAChB,UAAME,IAAW,CAAC,CAAC,KAAK,OAClBC,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,iBAEhCC,IAAmB;AAAA,MACvB,QAAQ;AAAA,MACR,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,oBAAoB,KAAK;AAAA,MACzB,iBAAiBF;AAAA,MACjB,CAAC,WAAW,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,GAGtBG,IACJ;AAAA,MACEH,KAAY,KAAK,gBAAgB,KAAK,WAAW;AAAA,MACjD,KAAK,YAAY,CAACA,IAAW,KAAK,cAAc;AAAA,IAAA,EAE/C,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAElB,WAAOI;AAAA,iCACsBC,EAASH,CAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAK1C,KAAK,SAAS;AAAA;AAAA;AAAA,2BAGJ,KAAK,UAAU,SAAS,OAAO;AAAA,8BAC5BI,EAAUL,IAAW,KAAK,WAAW,MAAS,CAAC;AAAA,+BAC9CK,EAAUH,CAAW,CAAC;AAAA,2BAC1BH,IAAW,SAASO,CAAO;AAAA,4BAC1B,KAAK,WAAW,SAASA,CAAO;AAAA,wBACpC,KAAK,QAAQ;AAAA,qBAChB,KAAK,YAAY;AAAA,uBACf,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,yDAKe,KAAK,QAAQ,QAAQ,KAAK,SAAS;AAAA,gCAC5D,KAAK,wBAAwB,IAAI,KAAK,KAAK,UAAU,KAAK,WAC1EH,uEACAG,CAAO;AAAA;AAAA;AAAA;AAAA,yCAIkB,KAAK,sBAAsB;AAAA,YACxDP,IACEI,+CAAkD,KAAK,QAAQ;AAAA,kBAC3D,KAAK,KAAK;AAAA,wBAEdG,CAAO;AAAA;AAAA;AAAA,UAGX,KAAK,YAAY,CAACP,IAChBI;AAAA,mEACuD,KAAK,WAAW;AAAA,yCAC1C,KAAK,QAAQ;AAAA;AAAA,gBAG1CG,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAnRalB,EACK,SAAS,CAACJ,CAAiB;AADhCI,EAMK,iBAAiB;AASjCmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BpB,EAeX,WAAA,WAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArB/BpB,EAsBX,WAAA,YAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5B/BpB,EA6BX,WAAA,YAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnC9BpB,EAoCX,WAAA,QAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA1C9BpB,EA2CX,WAAA,SAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjDfpB,EAkDX,WAAA,SAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAxDpDpB,EAyDX,WAAA,QAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/DfpB,EAgEX,WAAA,SAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAtEvCpB,EAuEX,WAAA,YAAA,CAAA;AAOAmB,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,mBAAA,CAAoB;AAAA,GA7EhCpB,EA8EX,WAAA,mBAAA,CAAA;AAiDQmB,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GA9HZrB,EA+HH,WAAA,YAAA,CAAA;AAISmB,EAAA;AAAA,EAAhBf,EAAA;AAAM,GAnIIJ,EAmIM,WAAA,iBAAA,CAAA;AAIAmB,EAAA;AAAA,EAAhBf,EAAA;AAAM,GAvIIJ,EAuIM,WAAA,mBAAA,CAAA;AAvINA,IAANmB,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,GACbtB,CAAA;"}

package/dist/shared/{hx-tab-panel-J58zOSjq.js → hx-tab-panel-BIzKfW5i.js}

@@ -1,11 +1,12 @@
-import { css as v, LitElement as _, html as m, nothing as $ } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as h, state as g, customElement as y } from "lit/decorators.js";
+import { css as v, html as _, nothing as $ } from "lit";
+import { property as h, state as g, customElement as m } from "lit/decorators.js";
 import { d as C } from "./dev-warn-YlwPHjtX.js";
-const N = v`
+import { H as y } from "./helix-element-BNEYeiys.js";
+import { c as N } from "./id-counter-DuX8vsui.js";
+const O = v`
   :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-tabs-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   * {
@@ -32,7 +33,7 @@ const N = v`
     flex-wrap: nowrap;
     gap: 0;
     border-bottom: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
     overflow-x: auto;
     scrollbar-width: none;
   }
@@ -57,7 +58,7 @@ const N = v`
     flex-direction: column;
     border-bottom: none;
     border-inline-end: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
     overflow-x: visible;
     overflow-y: auto;
     min-width: var(--hx-tabs-vertical-width, 12rem);
@@ -78,46 +79,59 @@ const N = v`
       scroll-behavior: auto;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tablist {
+      border-bottom-color: CanvasText;
+    }
+
+    :host([orientation='vertical']) .tablist {
+      border-inline-end-color: CanvasText;
+    }
+  }
 `;
-var O = Object.defineProperty, I = Object.getOwnPropertyDescriptor, p = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? I(t, a) : t, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (s = (i ? n(t, a, s) : n(s)) || s);
-  return i && s && O(t, a, s), s;
+var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, p = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? k(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
+  return i && s && I(e, a, s), s;
 };
-let k = 0, b = class extends _ {
+const H = N("hx-tabs");
+let b = class extends y {
   constructor() {
-    super(...arguments), this._id = `hx-tabs-${++k}`, this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._pendingIndex = null, this._handleTabSelect = (e) => {
-      if (!(e instanceof CustomEvent)) return;
-      e.stopPropagation();
-      const t = e.composedPath().find((a) => a instanceof Element && a.tagName.toLowerCase() === "hx-tab");
-      t && this._activateTab(t);
+    super(...arguments), this._id = H(), this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._pendingIndex = null, this._handleTabSelect = (t) => {
+      if (!(t instanceof CustomEvent)) return;
+      t.stopPropagation();
+      const e = t.composedPath().find((a) => a instanceof Element && a.tagName.toLowerCase() === "hx-tab");
+      e && this._activateTab(e);
     }, this._handleSlotChange = () => {
       if (this._warnInvalidSlotContent(), this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels(), !this._getPanels().some((a) => a.name === this._activePanel)) {
         const a = this._getEnabledTabs()[0];
         a ? this._activateTab(a, !1) : this._activePanel = "";
       }
-    }, this._handleKeydown = (e) => {
-      var w, T, P, S;
-      const t = this._getTabs();
-      if (t.length === 0)
+    }, this._handleKeydown = (t) => {
+      var T, w, P, S;
+      const e = this._getTabs();
+      if (e.length === 0)
         return;
       const a = this.orientation === "horizontal", i = a ? "ArrowLeft" : "ArrowUp", s = a ? "ArrowRight" : "ArrowDown";
-      if (![i, s, "Home", "End", " ", "Enter"].includes(e.key))
+      if (![i, s, "Home", "End", " ", "Enter"].includes(t.key))
         return;
-      const n = t.find((u) => u === document.activeElement);
-      if (e.key === " " || e.key === "Enter") {
-        n && !n.disabled && (e.preventDefault(), this._activateTab(n), (T = (w = n.shadowRoot) == null ? void 0 : w.querySelector("button")) == null || T.focus());
+      const o = e.find((u) => u === document.activeElement);
+      if (t.key === " " || t.key === "Enter") {
+        o && !o.disabled && (t.preventDefault(), this._activateTab(o), (w = (T = o.shadowRoot) == null ? void 0 : T.querySelector("button")) == null || w.focus());
         return;
       }
-      e.preventDefault();
-      let o = n ? t.indexOf(n) : -1;
-      if (o === -1) {
-        const u = t.find((A) => A.panel === this._activePanel);
-        o = u ? t.indexOf(u) : 0;
+      t.preventDefault();
+      let n = o ? e.indexOf(o) : -1;
+      if (n === -1) {
+        const u = e.find((A) => A.panel === this._activePanel);
+        n = u ? e.indexOf(u) : 0;
       }
       let d;
-      e.key === "Home" ? d = 0 : e.key === "End" ? d = t.length - 1 : e.key === s ? d = (o + 1) % t.length : d = o <= 0 ? t.length - 1 : o - 1;
-      const l = t[d];
+      t.key === "Home" ? d = 0 : t.key === "End" ? d = e.length - 1 : t.key === s ? d = (n + 1) % e.length : d = n <= 0 ? e.length - 1 : n - 1;
+      const l = e[d];
       l && ((S = (P = l.shadowRoot) == null ? void 0 : P.querySelector("button")) == null || S.focus(), this.activation === "automatic" && !l.disabled && this._activateTab(l));
     };
   }
@@ -125,8 +139,8 @@ let k = 0, b = class extends _ {
   static get observedAttributes() {
     return [...super.observedAttributes ?? [], "selected-index"];
   }
-  attributeChangedCallback(e, t, a) {
-    if (super.attributeChangedCallback(e, t, a), e === "selected-index" && a !== null && t !== a) {
+  attributeChangedCallback(t, e, a) {
+    if (super.attributeChangedCallback(t, e, a), t === "selected-index" && a !== null && e !== a) {
       const i = parseInt(a, 10);
       if (!isNaN(i) && i >= 0)
         if (this.hasUpdated) {
@@ -144,27 +158,27 @@ let k = 0, b = class extends _ {
    * pre-selection (e.g. Drupal Twig templates).
    */
   get selectedIndex() {
-    return this._getTabs().findIndex((e) => e.panel === this._activePanel);
+    return this._getTabs().findIndex((t) => t.panel === this._activePanel);
   }
-  set selectedIndex(e) {
-    const t = this._getTabs()[e];
-    t && !t.disabled && this._activateTab(t, !0);
+  set selectedIndex(t) {
+    const e = this._getTabs()[t];
+    e && !e.disabled && this._activateTab(e, !0);
   }
   /** @internal */
   _getTabs() {
     return this._cachedTabs || (this._cachedTabs = Array.from(this.querySelectorAll(":scope > hx-tab")).filter(
-      (e) => e.tagName.toLowerCase() === "hx-tab"
+      (t) => t.tagName.toLowerCase() === "hx-tab"
     )), this._cachedTabs;
   }
   /** @internal */
   _getPanels() {
     return this._cachedPanels || (this._cachedPanels = Array.from(this.querySelectorAll(":scope > hx-tab-panel")).filter(
-      (e) => e.tagName.toLowerCase() === "hx-tab-panel"
+      (t) => t.tagName.toLowerCase() === "hx-tab-panel"
     )), this._cachedPanels;
   }
   /** @internal */
   _getEnabledTabs() {
-    return this._getTabs().filter((e) => !e.disabled);
+    return this._getTabs().filter((t) => !t.disabled);
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -176,66 +190,66 @@ let k = 0, b = class extends _ {
     }));
   }
   disconnectedCallback() {
-    var e;
-    super.disconnectedCallback(), this.removeEventListener("hx-tab-select", this._handleTabSelect), this.removeEventListener("keydown", this._handleKeydown), (e = this._observer) == null || e.disconnect(), this._observer = null;
+    var t;
+    super.disconnectedCallback(), this.removeEventListener("hx-tab-select", this._handleTabSelect), this.removeEventListener("keydown", this._handleKeydown), (t = this._observer) == null || t.disconnect(), this._observer = null;
   }
   firstUpdated() {
     if (this.label, this._syncTabsAndPanels(), this._pendingIndex !== null) {
-      const e = this._getTabs()[this._pendingIndex];
-      if (this._pendingIndex = null, e && !e.disabled) {
-        this._activateTab(e, !1);
+      const t = this._getTabs()[this._pendingIndex];
+      if (this._pendingIndex = null, t && !t.disabled) {
+        this._activateTab(t, !1);
         return;
       }
     }
     if (!this._activePanel) {
-      const e = this._getEnabledTabs()[0];
-      e && this._activateTab(e, !1);
+      const t = this._getEnabledTabs()[0];
+      t && this._activateTab(t, !1);
     }
   }
-  updated(e) {
-    super.updated(e), e.has("_activePanel") && this._updateTabsAndPanels();
+  updated(t) {
+    super.updated(t), t.has("_activePanel") && this._updateTabsAndPanels();
   }
   // ─── Tab / Panel Sync ───
   /** @internal */
   _syncTabsAndPanels() {
-    const e = this._getTabs(), t = this._getPanels();
-    e.forEach((a, i) => {
+    const t = this._getTabs(), e = this._getPanels();
+    t.forEach((a, i) => {
       const s = a.id || `hx-tab-${this._id}-${i}`;
       a.id = s;
-      const r = a.panel, n = t.find((o) => o.name === r) ?? t[i];
-      if (n) {
-        const o = n.id || `hx-panel-${this._id}-${i}`;
-        n.id = o, a.controls = o;
+      const r = a.panel, o = e.find((n) => n.name === r) ?? e[i];
+      if (o) {
+        const n = o.id || `hx-panel-${this._id}-${i}`;
+        o.id = n, a.controls = n;
         const d = Array.from(a.childNodes).filter(
           (l) => l.nodeType === Node.TEXT_NODE || l.nodeType === Node.ELEMENT_NODE && !l.hasAttribute("slot")
         ).map((l) => l.textContent ?? "").join("").trim();
-        d ? (n.setAttribute("aria-label", d), n.removeAttribute("aria-labelledby")) : n.setAttribute("aria-labelledby", s);
+        d ? (o.setAttribute("aria-label", d), o.removeAttribute("aria-labelledby")) : o.setAttribute("aria-labelledby", s);
       }
     }), this._updateTabsAndPanels();
   }
   /** @internal */
   _updateTabsAndPanels() {
-    const e = this._getTabs(), t = this._getPanels();
-    e.forEach((a) => {
+    const t = this._getTabs(), e = this._getPanels();
+    t.forEach((a) => {
       const i = a.panel === this._activePanel;
       a.selected = i, a.tabIndex = i ? 0 : -1;
-    }), t.forEach((a) => {
+    }), e.forEach((a) => {
       a.name === this._activePanel ? (a.removeAttribute("hidden"), a.setAttribute("tabindex", "0")) : (a.setAttribute("hidden", ""), a.setAttribute("tabindex", "-1"));
     });
   }
   // ─── Tab Activation ───
   /** @internal */
-  _activateTab(e, t = !0) {
-    if (e.disabled)
+  _activateTab(t, e = !0) {
+    if (t.disabled)
       return;
     const a = this._getTabs(), i = this._activePanel;
-    if (this._activePanel = e.panel, t && i !== this._activePanel) {
-      const s = a.indexOf(e);
+    if (this._activePanel = t.panel, e && i !== this._activePanel) {
+      const s = a.indexOf(t);
       this.dispatchEvent(
         new CustomEvent("hx-tab-change", {
           bubbles: !0,
           composed: !0,
-          detail: { tabId: e.id, index: s }
+          detail: { tabId: t.id, index: s }
         })
       );
     }
@@ -243,16 +257,16 @@ let k = 0, b = class extends _ {
   /** @internal */
   _warnInvalidSlotContent() {
     var a, i;
-    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="tab"]'), t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
-    if (e) {
-      const s = e.assignedElements().filter((r) => r.tagName.toLowerCase() !== "hx-tab");
+    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="tab"]'), e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
+    if (t) {
+      const s = t.assignedElements().filter((r) => r.tagName.toLowerCase() !== "hx-tab");
       s.length > 0 && C(
         "hx-tabs",
         `Slot "tab" expects <hx-tab> elements. Found unexpected: ${s.map((r) => `<${r.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
-    if (t) {
-      const s = t.assignedElements().filter((r) => r.tagName.toLowerCase() !== "hx-tab-panel");
+    if (e) {
+      const s = e.assignedElements().filter((r) => r.tagName.toLowerCase() !== "hx-tab-panel");
       s.length > 0 && C(
         "hx-tabs",
         `Default slot expects <hx-tab-panel> elements. Found unexpected: ${s.map((r) => `<${r.tagName.toLowerCase()}>`).join(", ")}`
@@ -261,7 +275,7 @@ let k = 0, b = class extends _ {
   }
   // ─── Render ───
   render() {
-    return m`
+    return _`
       <div class="tabs">
         <div
           part="tablist"
@@ -279,7 +293,7 @@ let k = 0, b = class extends _ {
     `;
   }
 };
-b.styles = [N];
+b.styles = [O];
 p([
   h({ type: String, reflect: !0 })
 ], b.prototype, "orientation", 2);
@@ -293,7 +307,7 @@ p([
   g()
 ], b.prototype, "_activePanel", 2);
 b = p([
-  y("hx-tabs")
+  m("hx-tabs")
 ], b);
 const L = v`
   :host {
@@ -312,6 +326,7 @@ const L = v`
     display: inline-flex;
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
+    min-height: var(--hx-touch-target-min, 44px);
     padding: var(--hx-tabs-tab-padding-y, var(--hx-space-2, 0.5rem))
       var(--hx-tabs-tab-padding-x, var(--hx-space-4, 1rem));
     border: none;
@@ -322,7 +337,7 @@ const L = v`
     font-family: var(--hx-tabs-tab-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-tabs-tab-font-size, var(--hx-font-size-md, 1rem));
     font-weight: var(--hx-tabs-tab-font-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #495057));
+    color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #475569));
     line-height: var(--hx-line-height-tight, 1.25);
     cursor: pointer;
     white-space: nowrap;
@@ -339,8 +354,8 @@ const L = v`
   /* ─── Hover State ─── */
 
   .tab:not([aria-selected='true']):not([aria-disabled='true']):hover {
-    color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #212529));
-    background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f8f9fa));
+    color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #1e293b));
+    background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f8fafc));
   }
 
   /* ─── Selected State ─── */
@@ -364,7 +379,7 @@ const L = v`
         var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   /* ─── Disabled State ─── */
@@ -375,7 +390,7 @@ const L = v`
 
   .tab[aria-disabled='true'] {
     pointer-events: none;
-    color: var(--hx-color-neutral-400, #adb5bd);
+    color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   /* ─── Prefix / Suffix Slots ─── */
@@ -394,13 +409,39 @@ const L = v`
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tab {
+      forced-color-adjust: none;
+      color: ButtonText;
+      border-bottom-color: transparent;
+      background-color: ButtonFace;
+    }
+
+    .tab[aria-selected='true'] {
+      color: HighlightText;
+      background-color: Highlight;
+      border-bottom-color: Highlight;
+    }
+
+    .tab:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .tab[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
 `;
-var z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, f = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? D(t, a) : t, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (s = (i ? n(t, a, s) : n(s)) || s);
-  return i && s && z(t, a, s), s;
+var z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, f = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? D(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
+  return i && s && z(e, a, s), s;
 };
-let c = class extends _ {
+let c = class extends y {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1, this.disabled = !1, this.controls = "", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1;
   }
@@ -420,18 +461,18 @@ let c = class extends _ {
     );
   }
   /** @internal */
-  _handlePrefixSlotChange(e) {
-    const t = e.target;
-    this._hasPrefixSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  _handlePrefixSlotChange(t) {
+    const e = t.target;
+    this._hasPrefixSlot = e.assignedNodes({ flatten: !0 }).length > 0;
   }
   /** @internal */
-  _handleSuffixSlotChange(e) {
-    const t = e.target;
-    this._hasSuffixSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  _handleSuffixSlotChange(t) {
+    const e = t.target;
+    this._hasSuffixSlot = e.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Render ───
   render() {
-    return m`
+    return _`
       <button
         part="tab"
         class="tab"
@@ -473,7 +514,7 @@ f([
   g()
 ], c.prototype, "_hasSuffixSlot", 2);
 c = f([
-  y("hx-tab")
+  m("hx-tab")
 ], c);
 const j = v`
   :host {
@@ -495,24 +536,37 @@ const j = v`
         var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   .panel {
     padding: var(--hx-tabs-panel-padding, var(--hx-space-4, 1rem));
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-tab-panel-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     outline: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    :host(:focus-visible) {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .panel {
+      color: CanvasText;
+    }
+  }
 `;
-var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, E = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? K(t, a) : t, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (s = (i ? n(t, a, s) : n(s)) || s);
-  return i && s && H(t, a, s), s;
+var M = Object.defineProperty, K = Object.getOwnPropertyDescriptor, E = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? K(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
+  return i && s && M(e, a, s), s;
 };
-let x = class extends _ {
+let x = class extends y {
   constructor() {
     super(...arguments), this.name = "";
   }
@@ -522,7 +576,7 @@ let x = class extends _ {
   }
   // ─── Render ───
   render() {
-    return m`
+    return _`
       <div part="panel" class="panel">
         <slot></slot>
       </div>
@@ -534,11 +588,11 @@ E([
   h({ type: String, reflect: !0 })
 ], x.prototype, "name", 2);
 x = E([
-  y("hx-tab-panel")
+  m("hx-tab-panel")
 ], x);
 export {
   c as H,
   x as a,
   b
 };
-//# sourceMappingURL=hx-tab-panel-J58zOSjq.js.map
+//# sourceMappingURL=hx-tab-panel-BIzKfW5i.js.map