@helixui/library 1.1.2 → 2.0.0-next.31

package/dist/shared/{hx-switch-BgX8kuWt.js → hx-switch-BzMN37PV.js}

@@ -1,9 +1,9 @@
 import { css as p, LitElement as x, nothing as o, html as c } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as s, query as _, state as m, customElement as w } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const b = p`
+const f = p`
   :host {
     display: block;
   }
@@ -52,7 +52,10 @@ const b = p`
 
   .switch__track:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-switch-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -170,10 +173,10 @@ const b = p`
     }
   }
 `;
-var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (t, r, l, a) => {
-  for (var h = a > 1 ? void 0 : a ? k(r, l) : r, n = t.length - 1, d; n >= 0; n--)
+var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (t, r, l, a) => {
+  for (var h = a > 1 ? void 0 : a ? g(r, l) : r, n = t.length - 1, d; n >= 0; n--)
     (d = t[n]) && (h = (a ? d(r, l, h) : d(h)) || h);
-  return a && h && g(r, l, h), h;
+  return a && h && b(r, l, h), h;
 };
 let e = class extends x {
   constructor() {
@@ -213,15 +216,15 @@ let e = class extends x {
       this._trackEl ?? void 0
     ) : this._internals.setValidity({});
   }
-  /** Called by the form when it resets. */
+  /** @internal */
   formResetCallback() {
     this.checked = !1, this._internals.setFormValue(null);
   }
-  /** Called when the form restores state (e.g., back/forward navigation). */
+  /** @internal */
   formStateRestoreCallback(t, r) {
     typeof t == "string" && (this.checked = t === this.value);
   }
-  /** Called when a parent fieldset is disabled/enabled. */
+  /** @internal */
   formDisabledCallback(t) {
     this.disabled = t;
   }
@@ -319,7 +322,7 @@ let e = class extends x {
     `;
   }
 };
-e.styles = [f, b];
+e.styles = [f];
 e._instanceCounter = 0;
 e.formAssociated = !0;
 i([
@@ -367,4 +370,4 @@ e = i([
 export {
   e as H
 };
-//# sourceMappingURL=hx-switch-BgX8kuWt.js.map
+//# sourceMappingURL=hx-switch-BzMN37PV.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-switch-BzMN37PV.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-font-family-sans, sans-serif);\n  }\n\n  .switch__control-row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\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, #ced4da));\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, #343a40));\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, #6c757d));\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","import { LitElement, 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 { helixSwitchStyles } from './hx-switch.styles.js';\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.\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 LitElement {\n  static override styles = [helixSwitchStyles];\n\n  /** Monotonic counter for deterministic, unique IDs across instances. */\n  /** @internal */\n  private static _instanceCounter = 0;\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** ElementInternals instance for form association, validation, and ARIA. */\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\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 })\n  name = '';\n\n  /**\n   * The value submitted when the switch is checked.\n   * @attr value\n   */\n  @property({ type: String })\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      this._updateValidity();\n    }\n    if (changedProperties.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the switch satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** Recalculates and sets the validity state based on required and checked. */\n  /** @internal */\n  private _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  /** @internal */\n  formResetCallback(): void {\n    this.checked = false;\n    this._internals.setFormValue(null);\n  }\n\n  /** @internal */\n  formStateRestoreCallback(state: File | string | null, _mode: 'restore' | 'autocomplete'): void {\n    if (typeof state === 'string') {\n      this.checked = state === this.value;\n    }\n  }\n\n  /** @internal */\n  formDisabledCallback(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\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 = `hx-switch-${++HelixSwitch._instanceCounter}`;\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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-switch': HelixSwitch;\n  }\n}\n\n/** @deprecated Use HxSwitch instead. */\nexport type WcSwitch = HelixSwitch;\nexport type HxSwitch = HelixSwitch;\n"],"names":["helixSwitchStyles","css","HelixSwitch","LitElement","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;;;;;;ACwC1B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAgB1C,cAAc;AACZ,UAAA,GAYF,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,2BAiFT,KAAQ,gBAAgB,IAIxB,KAAQ,kBAAkB,IA6DnC,KAAQ,YAAY,aAAa,EAAED,EAAY,gBAAgB,IAG/D,KAAQ,WAAW,GAAG,KAAK,SAAS,UAGpC,KAAQ,cAAc,GAAG,KAAK,SAAS,SAGvC,KAAQ,WAAW,GAAG,KAAK,SAAS,UApOlC,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA,EA4ES,QAAQE,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,IAC3BA,EAAkB,IAAI,SAAS,KAAKA,EAAkB,IAAI,OAAO,OACnE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI,GAC7D,KAAK,gBAAA,IAEHA,EAAkB,IAAI,UAAU,KAClC,KAAK,gBAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,WAA0B;AAC5B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,gBAAyB;AACvB,WAAO,KAAK,WAAW,cAAA;AAAA,EACzB;AAAA;AAAA,EAGA,iBAA0B;AACxB,WAAO,KAAK,WAAW,eAAA;AAAA,EACzB;AAAA;AAAA;AAAA,EAIQ,kBAAwB;AAC9B,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;AAAA,EAGA,oBAA0B;AACxB,SAAK,UAAU,IACf,KAAK,WAAW,aAAa,IAAI;AAAA,EACnC;AAAA;AAAA,EAGA,yBAAyBC,GAA6BC,GAAyC;AAC7F,IAAI,OAAOD,KAAU,aACnB,KAAK,UAAUA,MAAU,KAAK;AAAA,EAElC;AAAA;AAAA,EAGA,qBAAqBE,GAAyB;AAC5C,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,SAErB,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;AA5TajB,EACK,SAAS,CAACF,CAAiB;AADhCE,EAKI,mBAAmB;AALvBA,EAUJ,iBAAiB;AAmBxBkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5B/BnB,EA6BX,WAAA,WAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnC/BnB,EAoCX,WAAA,YAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/BnB,EA2CX,WAAA,YAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjDfnB,EAkDX,WAAA,QAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxDfnB,EAyDX,WAAA,SAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/DfnB,EAgEX,WAAA,SAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAtEpDnB,EAuEX,WAAA,QAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7EfnB,EA8EX,WAAA,SAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GApFvCnB,EAqFX,WAAA,YAAA,CAAA;AAOAkB,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,mBAAA,CAAoB;AAAA,GA3FhCnB,EA4FX,WAAA,mBAAA,CAAA;AA6EQkB,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GAxKZpB,EAyKH,WAAA,YAAA,CAAA;AAISkB,EAAA;AAAA,EAAhBf,EAAA;AAAM,GA7KIH,EA6KM,WAAA,iBAAA,CAAA;AAIAkB,EAAA;AAAA,EAAhBf,EAAA;AAAM,GAjLIH,EAiLM,WAAA,mBAAA,CAAA;AAjLNA,IAANkB,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,GACbrB,CAAA;"}

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

@@ -1,8 +1,8 @@
-import { css as x, LitElement as _, nothing as $, html as m } from "lit";
+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 { tokenStyles as w } from "@helixui/tokens/lit";
-import { d as E } from "./dev-warn-YlwPHjtX.js";
-const L = x`
+import { d as C } from "./dev-warn-YlwPHjtX.js";
+const N = v`
   :host {
     display: block;
     font-family: var(--hx-font-family-sans, sans-serif);
@@ -79,138 +79,163 @@ const L = x`
     }
   }
 `;
-var k = Object.defineProperty, z = Object.getOwnPropertyDescriptor, p = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? z(e, a) : e, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
-  return i && s && k(e, a, s), s;
+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;
 };
-let I = 0, d = class extends _ {
+let k = 0, b = class extends _ {
   constructor() {
-    super(...arguments), this._id = `hx-tabs-${++I}`, this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = 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);
+    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);
     }, 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 = (t) => {
-      var P, S, T, C;
-      const e = this._getEnabledTabs();
-      if (e.length === 0)
+    }, this._handleKeydown = (e) => {
+      var w, T, P, S;
+      const t = this._getTabs();
+      if (t.length === 0)
         return;
       const a = this.orientation === "horizontal", i = a ? "ArrowLeft" : "ArrowUp", s = a ? "ArrowRight" : "ArrowDown";
-      if (![i, s, "Home", "End", " ", "Enter"].includes(t.key))
+      if (![i, s, "Home", "End", " ", "Enter"].includes(e.key))
         return;
-      const r = e.find((u) => u === document.activeElement);
-      if (t.key === " " || t.key === "Enter") {
-        r && (t.preventDefault(), this._activateTab(r), (S = (P = r.shadowRoot) == null ? void 0 : P.querySelector("button")) == null || S.focus());
+      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());
         return;
       }
-      t.preventDefault();
-      let c = r ? e.indexOf(r) : -1;
-      if (c === -1) {
-        const u = e.find((O) => O.panel === this._activePanel);
-        c = u ? e.indexOf(u) : 0;
+      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;
       }
-      let n;
-      t.key === "Home" ? n = 0 : t.key === "End" ? n = e.length - 1 : t.key === s ? n = (c + 1) % e.length : n = c <= 0 ? e.length - 1 : c - 1;
-      const f = e[n];
-      f && ((C = (T = f.shadowRoot) == null ? void 0 : T.querySelector("button")) == null || C.focus(), this.activation === "automatic" && this._activateTab(f));
+      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];
+      l && ((S = (P = l.shadowRoot) == null ? void 0 : P.querySelector("button")) == null || S.focus(), this.activation === "automatic" && !l.disabled && this._activateTab(l));
     };
   }
+  // ─── Attribute Observation ───
+  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) {
+      const i = parseInt(a, 10);
+      if (!isNaN(i) && i >= 0)
+        if (this.hasUpdated) {
+          const s = this._getTabs()[i];
+          s && !s.disabled && this._activateTab(s, !1);
+        } else
+          this._pendingIndex = i;
+    }
+  }
   // ─── Public API ───
   /**
    * Gets or sets the zero-based index of the currently selected tab.
    * Setting this programmatically activates the tab at the given index.
+   * Can also be set via the `selected-index` HTML attribute for server-side
+   * pre-selection (e.g. Drupal Twig templates).
    */
   get selectedIndex() {
-    return this._getTabs().findIndex((t) => t.panel === this._activePanel);
+    return this._getTabs().findIndex((e) => e.panel === this._activePanel);
   }
-  set selectedIndex(t) {
-    const e = this._getTabs()[t];
-    e && !e.disabled && this._activateTab(e, !0);
+  set selectedIndex(e) {
+    const t = this._getTabs()[e];
+    t && !t.disabled && this._activateTab(t, !0);
   }
   /** @internal */
   _getTabs() {
     return this._cachedTabs || (this._cachedTabs = Array.from(this.querySelectorAll(":scope > hx-tab")).filter(
-      (t) => t.tagName.toLowerCase() === "hx-tab"
+      (e) => e.tagName.toLowerCase() === "hx-tab"
     )), this._cachedTabs;
   }
   /** @internal */
   _getPanels() {
     return this._cachedPanels || (this._cachedPanels = Array.from(this.querySelectorAll(":scope > hx-tab-panel")).filter(
-      (t) => t.tagName.toLowerCase() === "hx-tab-panel"
+      (e) => e.tagName.toLowerCase() === "hx-tab-panel"
     )), this._cachedPanels;
   }
   /** @internal */
   _getEnabledTabs() {
-    return this._getTabs().filter((t) => !t.disabled);
+    return this._getTabs().filter((e) => !e.disabled);
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("hx-tab-select", this._handleTabSelect), this.addEventListener("keydown", this._handleKeydown), this._observer = new MutationObserver(() => {
+    super.connectedCallback(), this.addEventListener("hx-tab-select", this._handleTabSelect), this.addEventListener("keydown", this._handleKeydown), typeof MutationObserver < "u" && (this._observer = new MutationObserver(() => {
       this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels();
     }), this._observer.observe(this, {
       subtree: !1,
       attributeFilter: ["panel", "name"]
-    });
+    }));
   }
   disconnectedCallback() {
-    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;
+    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;
   }
   firstUpdated() {
-    if (this.label, this._syncTabsAndPanels(), !this._activePanel) {
-      const t = this._getEnabledTabs()[0];
-      t && this._activateTab(t, !1);
+    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);
+        return;
+      }
+    }
+    if (!this._activePanel) {
+      const e = this._getEnabledTabs()[0];
+      e && this._activateTab(e, !1);
     }
   }
-  updated(t) {
-    super.updated(t), t.has("_activePanel") && this._updateTabsAndPanels();
+  updated(e) {
+    super.updated(e), e.has("_activePanel") && this._updateTabsAndPanels();
   }
   // ─── Tab / Panel Sync ───
   /** @internal */
   _syncTabsAndPanels() {
-    const t = this._getTabs(), e = this._getPanels();
-    t.forEach((a, i) => {
-      var c;
+    const e = this._getTabs(), t = this._getPanels();
+    e.forEach((a, i) => {
       const s = a.id || `hx-tab-${this._id}-${i}`;
       a.id = s;
-      const o = a.panel, r = e.find((n) => n.name === o) ?? e[i];
-      if (r) {
-        const n = r.id || `hx-panel-${this._id}-${i}`;
-        r.id = n, a.controls = n;
-        const f = ((c = a.textContent) == null ? void 0 : c.trim()) ?? "";
-        f ? (r.setAttribute("aria-label", f), r.removeAttribute("aria-labelledby")) : r.setAttribute("aria-labelledby", 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 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);
       }
     }), this._updateTabsAndPanels();
   }
   /** @internal */
   _updateTabsAndPanels() {
-    const t = this._getTabs(), e = this._getPanels();
-    t.forEach((a) => {
+    const e = this._getTabs(), t = this._getPanels();
+    e.forEach((a) => {
       const i = a.panel === this._activePanel;
       a.selected = i, a.tabIndex = i ? 0 : -1;
-    }), e.forEach((a) => {
+    }), t.forEach((a) => {
       a.name === this._activePanel ? (a.removeAttribute("hidden"), a.setAttribute("tabindex", "0")) : (a.setAttribute("hidden", ""), a.setAttribute("tabindex", "-1"));
     });
   }
   // ─── Tab Activation ───
   /** @internal */
-  _activateTab(t, e = !0) {
-    if (t.disabled)
+  _activateTab(e, t = !0) {
+    if (e.disabled)
       return;
     const a = this._getTabs(), i = this._activePanel;
-    if (this._activePanel = t.panel, e && i !== this._activePanel) {
-      const s = a.indexOf(t);
+    if (this._activePanel = e.panel, t && i !== this._activePanel) {
+      const s = a.indexOf(e);
       this.dispatchEvent(
         new CustomEvent("hx-tab-change", {
           bubbles: !0,
           composed: !0,
-          detail: { tabId: t.id, index: s }
+          detail: { tabId: e.id, index: s }
         })
       );
     }
@@ -218,19 +243,19 @@ let I = 0, d = class extends _ {
   /** @internal */
   _warnInvalidSlotContent() {
     var a, i;
-    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((o) => o.tagName.toLowerCase() !== "hx-tab");
-      s.length > 0 && E(
+    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");
+      s.length > 0 && C(
         "hx-tabs",
-        `Slot "tab" expects <hx-tab> elements. Found unexpected: ${s.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
+        `Slot "tab" expects <hx-tab> elements. Found unexpected: ${s.map((r) => `<${r.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
-    if (e) {
-      const s = e.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab-panel");
-      s.length > 0 && E(
+    if (t) {
+      const s = t.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((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
+        `Default slot expects <hx-tab-panel> elements. Found unexpected: ${s.map((r) => `<${r.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
   }
@@ -243,7 +268,7 @@ let I = 0, d = class extends _ {
           class="tablist"
           role="tablist"
           aria-orientation=${this.orientation}
-          aria-label=${this.label || $}
+          aria-label=${this.label || "Tabs"}
         >
           <slot name="tab" @slotchange=${this._handleSlotChange}></slot>
         </div>
@@ -254,23 +279,23 @@ let I = 0, d = class extends _ {
     `;
   }
 };
-d.styles = [w, L];
+b.styles = [N];
 p([
   h({ type: String, reflect: !0 })
-], d.prototype, "orientation", 2);
+], b.prototype, "orientation", 2);
 p([
   h({ type: String, attribute: "activation", reflect: !0 })
-], d.prototype, "activation", 2);
+], b.prototype, "activation", 2);
 p([
   h({ type: String, reflect: !0 })
-], d.prototype, "label", 2);
+], b.prototype, "label", 2);
 p([
   g()
-], d.prototype, "_activePanel", 2);
-d = p([
+], b.prototype, "_activePanel", 2);
+b = p([
   y("hx-tabs")
-], d);
-const N = x`
+], b);
+const L = v`
   :host {
     display: inline-block;
   }
@@ -334,15 +359,22 @@ const N = x`
 
   .tab:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-tabs-focus-ring-color,
+        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);
   }
 
   /* ─── Disabled State ─── */
 
-  .tab[aria-disabled='true'] {
+  :host([disabled]) {
     cursor: not-allowed;
+  }
+
+  .tab[aria-disabled='true'] {
+    pointer-events: none;
     color: var(--hx-color-neutral-400, #adb5bd);
   }
 
@@ -363,15 +395,19 @@ const N = x`
     }
   }
 `;
-var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, b = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(e, a) : e, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
-  return i && s && D(e, a, s), s;
+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;
 };
-let l = class extends _ {
+let c = class extends _ {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1, this.disabled = !1, this.controls = "", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1;
   }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.closest("hx-tabs");
+  }
   // ─── Event Handling ───
   /** @internal */
   _handleClick() {
@@ -384,14 +420,14 @@ let l = class extends _ {
     );
   }
   /** @internal */
-  _handlePrefixSlotChange(t) {
-    const e = t.target;
-    this._hasPrefixSlot = e.assignedNodes({ flatten: !0 }).length > 0;
+  _handlePrefixSlotChange(e) {
+    const t = e.target;
+    this._hasPrefixSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
   /** @internal */
-  _handleSuffixSlotChange(t) {
-    const e = t.target;
-    this._hasSuffixSlot = e.assignedNodes({ flatten: !0 }).length > 0;
+  _handleSuffixSlotChange(e) {
+    const t = e.target;
+    this._hasSuffixSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Render ───
   render() {
@@ -417,29 +453,29 @@ let l = class extends _ {
     `;
   }
 };
-l.styles = [w, N];
-b([
+c.styles = [L];
+f([
   h({ type: String, reflect: !0 })
-], l.prototype, "panel", 2);
-b([
+], c.prototype, "panel", 2);
+f([
   h({ type: Boolean, reflect: !0 })
-], l.prototype, "selected", 2);
-b([
+], c.prototype, "selected", 2);
+f([
   h({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-b([
+], c.prototype, "disabled", 2);
+f([
   h({ type: String, attribute: !1 })
-], l.prototype, "controls", 2);
-b([
+], c.prototype, "controls", 2);
+f([
   g()
-], l.prototype, "_hasPrefixSlot", 2);
-b([
+], c.prototype, "_hasPrefixSlot", 2);
+f([
   g()
-], l.prototype, "_hasSuffixSlot", 2);
-l = b([
+], c.prototype, "_hasSuffixSlot", 2);
+c = f([
   y("hx-tab")
-], l);
-const H = x`
+], c);
+const j = v`
   :host {
     display: block;
   }
@@ -454,7 +490,10 @@ const H = x`
 
   :host(:focus-visible) {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-tabs-focus-ring-color,
+        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);
   }
@@ -468,12 +507,12 @@ const H = x`
     outline: none;
   }
 `;
-var K = Object.defineProperty, R = Object.getOwnPropertyDescriptor, A = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? R(e, a) : e, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
-  return i && s && K(e, a, s), s;
+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;
 };
-let v = class extends _ {
+let x = class extends _ {
   constructor() {
     super(...arguments), this.name = "";
   }
@@ -490,16 +529,16 @@ let v = class extends _ {
     `;
   }
 };
-v.styles = [w, H];
-A([
+x.styles = [j];
+E([
   h({ type: String, reflect: !0 })
-], v.prototype, "name", 2);
-v = A([
+], x.prototype, "name", 2);
+x = E([
   y("hx-tab-panel")
-], v);
+], x);
 export {
-  l as H,
-  v as a,
-  d as b
+  c as H,
+  x as a,
+  b
 };
-//# sourceMappingURL=hx-tab-panel-DhOq67jj.js.map
+//# sourceMappingURL=hx-tab-panel-J58zOSjq.js.map