@helixui/library 0.3.3 → 1.0.0

package/dist/shared/{hx-structured-list-CMja1VXz.js.map → hx-structured-list-CMWllxGg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-structured-list-CMja1VXz.js","sources":["../../src/components/hx-structured-list/hx-structured-list.styles.ts","../../src/components/hx-structured-list/hx-structured-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStructuredListStyles = css`\n  :host {\n    display: block;\n    --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    --_border-width: var(--hx-structured-list-border-width, var(--hx-border-width-thin, 1px));\n    --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f8fafc));\n    --_padding-block: var(--hx-structured-list-padding-block, var(--hx-space-4, 1rem));\n    --_padding-inline: var(--hx-structured-list-padding-inline, var(--hx-space-4, 1rem));\n  }\n\n  :host([condensed]) {\n    --_padding-block: var(--hx-structured-list-condensed-padding-block, var(--hx-space-2, 0.5rem));\n    --_padding-inline: var(\n      --hx-structured-list-condensed-padding-inline,\n      var(--hx-space-3, 0.75rem)\n    );\n  }\n\n  .list {\n    display: block;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  :host([bordered]) .list {\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    overflow: hidden;\n  }\n\n  :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {\n    background: var(--_bg-stripe);\n  }\n`;\n\nexport const helixStructuredListRowStyles = css`\n  :host {\n    display: block;\n  }\n\n  .row {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n    align-items: baseline;\n    padding-block: var(--_padding-block, var(--hx-space-4, 1rem));\n    padding-inline: var(--_padding-inline, var(--hx-space-4, 1rem));\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  :host(:not(:last-of-type)) .row {\n    border-bottom: var(--_border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--_border-color, var(--hx-color-neutral-200, #e2e8f0));\n  }\n\n  .row__label {\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #374151));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .row__value {\n    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #111827));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .row__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .row__actions:empty {\n    display: none;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport {\n  helixStructuredListStyles,\n  helixStructuredListRowStyles,\n} from './hx-structured-list.styles.js';\n\n/**\n * Container for structured key-value data display. Renders as a description\n * list for accessible term/definition semantics. Use `hx-structured-list-row`\n * as direct children.\n *\n * @summary Key-value data display container for detail and summary views.\n *\n * @tag hx-structured-list\n *\n * @slot - One or more `hx-structured-list-row` elements.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-structured-list-border-color=var(--hx-color-neutral-200)] - Border color when bordered.\n * @cssprop [--hx-structured-list-border-width=var(--hx-border-width-thin)] - Border width when bordered.\n * @cssprop [--hx-structured-list-stripe-bg=var(--hx-color-neutral-50)] - Stripe background color.\n * @cssprop [--hx-structured-list-padding-block=var(--hx-space-4)] - Row block padding.\n * @cssprop [--hx-structured-list-padding-inline=var(--hx-space-4)] - Row inline padding.\n * @cssprop [--hx-structured-list-condensed-padding-block=var(--hx-space-2)] - Row block padding (condensed).\n * @cssprop [--hx-structured-list-condensed-padding-inline=var(--hx-space-3)] - Row inline padding (condensed).\n */\n@customElement('hx-structured-list')\nexport class HelixStructuredList extends LitElement {\n  static override styles = [tokenStyles, helixStructuredListStyles];\n\n  /**\n   * Renders a border around the entire list.\n   * @attr bordered\n   */\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  /**\n   * Reduces row padding for denser layouts.\n   * @attr condensed\n   */\n  @property({ type: Boolean, reflect: true })\n  condensed = false;\n\n  /**\n   * Alternates row background colors for easier scanning.\n   * @attr striped\n   */\n  @property({ type: Boolean, reflect: true })\n  striped = false;\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"list\" role=\"list\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * A single row within an `hx-structured-list`. Renders a label/value pair\n * with an optional actions area.\n *\n * @summary A label-value row for use inside `hx-structured-list`.\n *\n * @tag hx-structured-list-row\n *\n * @slot label - The term or key label (`<dt>` semantics).\n * @slot - The value or definition (`<dd>` semantics).\n * @slot actions - Optional action controls (edit button, etc.).\n *\n * @csspart base - The root row element.\n * @csspart label - The label (`dt`) cell.\n * @csspart value - The value (`dd`) cell.\n * @csspart actions - The actions cell.\n *\n * @cssprop [--hx-structured-list-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-structured-list-value-color=var(--hx-color-neutral-900)] - Value text color.\n */\n@customElement('hx-structured-list-row')\nexport class HelixStructuredListRow extends LitElement {\n  static override styles = [tokenStyles, helixStructuredListRowStyles];\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"row\" role=\"listitem\">\n        <div part=\"label\" class=\"row__label\">\n          <slot name=\"label\"></slot>\n        </div>\n        <div part=\"value\" class=\"row__value\">\n          <slot></slot>\n          <div part=\"actions\" class=\"row__actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-structured-list': HelixStructuredList;\n    'hx-structured-list-row': HelixStructuredListRow;\n  }\n}\n"],"names":["helixStructuredListStyles","css","helixStructuredListRowStyles","HelixStructuredList","LitElement","html","tokenStyles","__decorateClass","property","customElement","HelixStructuredListRow"],"mappings":";;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoC5BC,IAA+BD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACRrC,IAAME,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU;AAAA,EAAA;AAAA,EAED,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA/BaF,EACK,SAAS,CAACG,GAAaN,CAAyB;AAOhEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/BL,EAQX,WAAA,YAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BL,EAeX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArB/BL,EAsBX,WAAA,WAAA,CAAA;AAtBWA,IAANI,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBN,CAAA;AAsDN,IAAMO,IAAN,cAAqCN,EAAW;AAAA,EAG5C,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT;AACF;AAlBaK,EACK,SAAS,CAACJ,GAAaJ,CAA4B;AADxDQ,IAANH,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BC,CAAA;"}
+{"version":3,"file":"hx-structured-list-CMWllxGg.js","sources":["../../src/components/hx-structured-list/hx-structured-list.styles.ts","../../src/components/hx-structured-list/hx-structured-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStructuredListStyles = css`\n  :host {\n    display: block;\n    --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    --_border-width: var(--hx-structured-list-border-width, var(--hx-border-width-thin, 1px));\n    --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f8fafc));\n    --_padding-block: var(--hx-structured-list-padding-block, var(--hx-space-4, 1rem));\n    --_padding-inline: var(--hx-structured-list-padding-inline, var(--hx-space-4, 1rem));\n  }\n\n  :host([condensed]) {\n    --_padding-block: var(--hx-structured-list-condensed-padding-block, var(--hx-space-2, 0.5rem));\n    --_padding-inline: var(\n      --hx-structured-list-condensed-padding-inline,\n      var(--hx-space-3, 0.75rem)\n    );\n  }\n\n  .list {\n    display: block;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  :host([bordered]) .list {\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    overflow: hidden;\n  }\n\n  :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {\n    background: var(--_bg-stripe);\n  }\n`;\n\nexport const helixStructuredListRowStyles = css`\n  :host {\n    display: block;\n  }\n\n  .row {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n    align-items: baseline;\n    padding-block: var(--_padding-block, var(--hx-space-4, 1rem));\n    padding-inline: var(--_padding-inline, var(--hx-space-4, 1rem));\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  :host(:not(:last-of-type)) .row {\n    border-bottom: var(--_border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--_border-color, var(--hx-color-neutral-200, #e2e8f0));\n  }\n\n  .row__label {\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #374151));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .row__value {\n    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #111827));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .row__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .row__actions:empty {\n    display: none;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport {\n  helixStructuredListStyles,\n  helixStructuredListRowStyles,\n} from './hx-structured-list.styles.js';\n\n/**\n * Container for structured key-value data display. Renders as a description\n * list for accessible term/definition semantics. Use `hx-structured-list-row`\n * as direct children.\n *\n * @summary Key-value data display container for detail and summary views.\n *\n * @tag hx-structured-list\n *\n * @slot - One or more `hx-structured-list-row` elements.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-structured-list-border-color=var(--hx-color-neutral-200)] - Border color when bordered.\n * @cssprop [--hx-structured-list-border-width=var(--hx-border-width-thin)] - Border width when bordered.\n * @cssprop [--hx-structured-list-stripe-bg=var(--hx-color-neutral-50)] - Stripe background color.\n * @cssprop [--hx-structured-list-padding-block=var(--hx-space-4)] - Row block padding.\n * @cssprop [--hx-structured-list-padding-inline=var(--hx-space-4)] - Row inline padding.\n * @cssprop [--hx-structured-list-condensed-padding-block=var(--hx-space-2)] - Row block padding (condensed).\n * @cssprop [--hx-structured-list-condensed-padding-inline=var(--hx-space-3)] - Row inline padding (condensed).\n */\n@customElement('hx-structured-list')\nexport class HelixStructuredList extends LitElement {\n  static override styles = [tokenStyles, helixStructuredListStyles];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Set role on the host element so the list/listitem relationship is\n    // preserved in the light DOM tree, crossing shadow boundaries correctly.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'list');\n    }\n  }\n\n  /**\n   * Renders a border around the entire list.\n   * @attr bordered\n   */\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  /**\n   * Reduces row padding for denser layouts.\n   * @attr condensed\n   */\n  @property({ type: Boolean, reflect: true })\n  condensed = false;\n\n  /**\n   * Alternates row background colors for easier scanning.\n   * @attr striped\n   */\n  @property({ type: Boolean, reflect: true })\n  striped = false;\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"list\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * A single row within an `hx-structured-list`. Renders a label/value pair\n * with an optional actions area.\n *\n * @summary A label-value row for use inside `hx-structured-list`.\n *\n * @tag hx-structured-list-row\n *\n * @slot label - The term or key label (`<dt>` semantics).\n * @slot - The value or definition (`<dd>` semantics).\n * @slot actions - Optional action controls (edit button, etc.).\n *\n * @csspart base - The root row element.\n * @csspart label - The label (`dt`) cell.\n * @csspart value - The value (`dd`) cell.\n * @csspart actions - The actions cell.\n *\n * @cssprop [--hx-structured-list-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-structured-list-value-color=var(--hx-color-neutral-900)] - Value text color.\n */\n@customElement('hx-structured-list-row')\nexport class HelixStructuredListRow extends LitElement {\n  static override styles = [tokenStyles, helixStructuredListRowStyles];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Set role on the host element so screen readers see listitem as a direct\n    // child of the hx-structured-list host (which carries role=\"list\"),\n    // preserving the list/listitem relationship across shadow boundaries.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"row\">\n        <div part=\"label\" class=\"row__label\">\n          <slot name=\"label\"></slot>\n        </div>\n        <div part=\"value\" class=\"row__value\">\n          <slot></slot>\n          <div part=\"actions\" class=\"row__actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-structured-list': HelixStructuredList;\n    'hx-structured-list-row': HelixStructuredListRow;\n  }\n}\n"],"names":["helixStructuredListStyles","css","helixStructuredListRowStyles","HelixStructuredList","LitElement","html","tokenStyles","__decorateClass","property","customElement","HelixStructuredListRow"],"mappings":";;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoC5BC,IAA+BD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACRrC,IAAME,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAiBL,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU;AAAA,EAAA;AAAA,EA5BD,oBAA0B;AACjC,UAAM,kBAAA,GAGD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,MAAM;AAAA,EAEpC;AAAA,EAuBS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAxCaF,EACK,SAAS,CAACG,GAAaN,CAAyB;AAgBhEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BL,EAiBX,WAAA,YAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvB/BL,EAwBX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9B/BL,EA+BX,WAAA,WAAA,CAAA;AA/BWA,IAANI,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBN,CAAA;AA+DN,IAAMO,IAAN,cAAqCN,EAAW;AAAA,EAG5C,oBAA0B;AACjC,UAAM,kBAAA,GAID,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,UAAU;AAAA,EAExC;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT;AACF;AA5BaK,EACK,SAAS,CAACJ,GAAaJ,CAA4B;AADxDQ,IAANH,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BC,CAAA;"}

package/dist/shared/{hx-switch-BPvIcDpM.js → hx-switch-DkKchcuP.js}

@@ -220,6 +220,10 @@ let e = class extends x {
   formStateRestoreCallback(t, r) {
     typeof t == "string" && (this.checked = t === this.value);
   }
+  /** Called when a parent fieldset is disabled/enabled. */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
   // ─── Slot Handlers ───
   /** Updates _hasErrorSlot when error slot content changes. */
   _handleErrorSlotChange(t) {
@@ -274,6 +278,7 @@ let e = class extends x {
           <button
             part="track"
             class="switch__track"
+            id=${this._switchId}
             type="button"
             role="switch"
             aria-checked=${this.checked ? "true" : "false"}
@@ -288,9 +293,9 @@ let e = class extends x {
             <span part="thumb" class="switch__thumb"></span>
           </button>
 
-          <span part="label" class="switch__label" id=${this._labelId} @click=${this._handleClick}>
+          <label part="label" class="switch__label" id=${this._labelId} for=${this._switchId}>
             <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required ? c`<span class="switch__required-marker" aria-hidden="true">*</span>` : o}
-          </span>
+          </label>
         </div>
 
         <slot name="error" @slotchange=${this._handleErrorSlotChange}>
@@ -353,4 +358,4 @@ e = i([
 export {
   e as H
 };
-//# sourceMappingURL=hx-switch-BPvIcDpM.js.map
+//# sourceMappingURL=hx-switch-DkKchcuP.js.map

package/dist/shared/{hx-switch-BPvIcDpM.js.map → hx-switch-DkKchcuP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-switch-BPvIcDpM.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(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\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 { 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 { tokenStyles } from '@helixui/tokens/lit';\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 = [tokenStyles, helixSwitchStyles];\n\n  /** Monotonic counter for deterministic, unique IDs across instances. */\n  private static _instanceCounter = 0;\n\n  // ─── Form Association ───\n\n  /** Enables the element to participate in form submission and validation. */\n  static formAssociated = true;\n\n  /** ElementInternals instance for form association, validation, and ARIA. */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\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  // ─── 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  private _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        this._trackEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Called by the form when it resets. */\n  formResetCallback(): void {\n    this.checked = false;\n    this._internals.setFormValue(null);\n  }\n\n  /** Called when the form restores state (e.g., back/forward navigation). */\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  /** Reference to the native button element acting as the switch track. */\n  @query('.switch__track')\n  private _trackEl!: HTMLButtonElement | null;\n\n  /** Whether the error slot has assigned content. */\n  @state() private _hasErrorSlot = false;\n\n  /** Whether the default slot has assigned content (slotted label). */\n  @state() private _hasDefaultSlot = false;\n\n  // ─── Slot Handlers ───\n\n  /** Updates _hasErrorSlot when error slot content changes. */\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  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  private _toggle(): void {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n\n    this.dispatchEvent(\n      new CustomEvent('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  private _handleClick(): void {\n    this._toggle();\n  }\n\n  /** Handles keydown events — Space toggles the switch per ARIA APG. */\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  private _switchId = `hx-switch-${++HelixSwitch._instanceCounter}`;\n  /** ID for the label element, referenced by aria-labelledby. */\n  private _labelId = `${this._switchId}-label`;\n  /** ID for the help text element, referenced by aria-describedby. */\n  private _helpTextId = `${this._switchId}-help`;\n  /** ID for the error element, referenced by aria-describedby. */\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            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          <span part=\"label\" class=\"switch__label\" id=${this._labelId} @click=${this._handleClick}>\n            <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required\n              ? html`<span class=\"switch__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </span>\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","e","slot","options","_a","hasError","hasLabel","containerClasses","describedBy","html","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-switch-DkKchcuP.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(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\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 { 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 { tokenStyles } from '@helixui/tokens/lit';\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 = [tokenStyles, helixSwitchStyles];\n\n  /** Monotonic counter for deterministic, unique IDs across instances. */\n  private static _instanceCounter = 0;\n\n  // ─── Form Association ───\n\n  /** Enables the element to participate in form submission and validation. */\n  static formAssociated = true;\n\n  /** ElementInternals instance for form association, validation, and ARIA. */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\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  // ─── 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  private _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        this._trackEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Called by the form when it resets. */\n  formResetCallback(): void {\n    this.checked = false;\n    this._internals.setFormValue(null);\n  }\n\n  /** Called when the form restores state (e.g., back/forward navigation). */\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  /** Called when a parent fieldset is disabled/enabled. */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** Reference to the native button element acting as the switch track. */\n  @query('.switch__track')\n  private _trackEl: HTMLButtonElement | null | undefined;\n\n  /** Whether the error slot has assigned content. */\n  @state() private _hasErrorSlot = false;\n\n  /** Whether the default slot has assigned content (slotted label). */\n  @state() private _hasDefaultSlot = false;\n\n  // ─── Slot Handlers ───\n\n  /** Updates _hasErrorSlot when error slot content changes. */\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  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  private _toggle(): void {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n\n    this.dispatchEvent(\n      new CustomEvent('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  private _handleClick(): void {\n    this._toggle();\n  }\n\n  /** Handles keydown events — Space toggles the switch per ARIA APG. */\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  private _switchId = `hx-switch-${++HelixSwitch._instanceCounter}`;\n  /** ID for the label element, referenced by aria-labelledby. */\n  private _labelId = `${this._switchId}-label`;\n  /** ID for the help text element, referenced by aria-describedby. */\n  private _helpTextId = `${this._switchId}-help`;\n  /** ID for the error element, referenced by aria-describedby. */\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","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-tab-panel-C7h5lRpw.js → hx-tab-panel-CHB0u1zF.js}

@@ -1,7 +1,8 @@
-import { css as x, LitElement as _, nothing as E, html as m } from "lit";
+import { css as x, LitElement as _, nothing as $, html as m } from "lit";
 import { property as c, state as g, customElement as y } from "lit/decorators.js";
 import { tokenStyles as w } from "@helixui/tokens/lit";
-const O = x`
+import { d as E } from "./dev-warn-YlwPHjtX.js";
+const k = x`
   :host {
     display: block;
     font-family: var(--hx-font-family-sans, sans-serif);
@@ -78,44 +79,45 @@ const O = x`
     }
   }
 `;
-var k = Object.defineProperty, z = Object.getOwnPropertyDescriptor, f = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? z(t, a) : t, o = e.length - 1, n; o >= 0; o--)
-    (n = e[o]) && (s = (i ? n(t, a, s) : n(s)) || s);
-  return i && s && k(t, a, s), s;
+var z = Object.defineProperty, L = Object.getOwnPropertyDescriptor, f = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? L(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 && z(e, a, s), s;
 };
 let I = 0, h = 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 = (e) => {
-      e.stopPropagation();
-      const t = e.composedPath().find((a) => a instanceof Element && a.tagName.toLowerCase() === "hx-tab");
-      t && this._activateTab(t);
+    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);
     }, 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) => {
+    }, this._handleKeydown = (t) => {
       var P, S, T, C;
-      const t = this._getEnabledTabs();
-      if (t.length === 0)
+      const e = this._getEnabledTabs();
+      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((p) => p === document.activeElement);
-      if (e.key === " " || e.key === "Enter") {
-        n && (e.preventDefault(), this._activateTab(n), (S = (P = n.shadowRoot) == null ? void 0 : P.querySelector("button")) == null || S.focus());
+      const r = e.find((p) => p === 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());
         return;
       }
-      e.preventDefault();
-      let r = n ? t.indexOf(n) : -1;
-      if (r === -1) {
-        const p = t.find((A) => A.panel === this._activePanel);
-        r = p ? t.indexOf(p) : 0;
+      t.preventDefault();
+      let n = r ? e.indexOf(r) : -1;
+      if (n === -1) {
+        const p = e.find((O) => O.panel === this._activePanel);
+        n = p ? e.indexOf(p) : 0;
       }
       let b;
-      e.key === "Home" ? b = 0 : e.key === "End" ? b = t.length - 1 : e.key === s ? b = (r + 1) % t.length : b = r <= 0 ? t.length - 1 : r - 1;
-      const v = t[b];
+      t.key === "Home" ? b = 0 : t.key === "End" ? b = e.length - 1 : t.key === s ? b = (n + 1) % e.length : b = n <= 0 ? e.length - 1 : n - 1;
+      const v = e[b];
       v && ((C = (T = v.shadowRoot) == null ? void 0 : T.querySelector("button")) == null || C.focus(), this.activation === "automatic" && this._activateTab(v));
     };
   }
@@ -125,22 +127,24 @@ let I = 0, h = class extends _ {
    * Setting this programmatically activates the tab at the given index.
    */
   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);
   }
   _getTabs() {
-    return this._cachedTabs || (this._cachedTabs = Array.from(this.querySelectorAll(":scope > hx-tab"))), this._cachedTabs;
+    return this._cachedTabs || (this._cachedTabs = Array.from(this.querySelectorAll(":scope > hx-tab")).filter(
+      (t) => t.tagName.toLowerCase() === "hx-tab"
+    )), this._cachedTabs;
   }
   _getPanels() {
-    return this._cachedPanels || (this._cachedPanels = Array.from(
-      this.querySelectorAll(":scope > hx-tab-panel")
+    return this._cachedPanels || (this._cachedPanels = Array.from(this.querySelectorAll(":scope > hx-tab-panel")).filter(
+      (t) => t.tagName.toLowerCase() === "hx-tab-panel"
     )), this._cachedPanels;
   }
   _getEnabledTabs() {
-    return this._getTabs().filter((e) => !e.disabled);
+    return this._getTabs().filter((t) => !t.disabled);
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -152,52 +156,52 @@ let I = 0, h = 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._syncTabsAndPanels(), !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 ───
   _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 o = a.panel, n = t.find((r) => r.name === o) ?? t[i];
-      if (n) {
-        const r = n.id || `hx-panel-${this._id}-${i}`;
-        n.id = r, a.controls = r, n.setAttribute("aria-labelledby", 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, r.setAttribute("aria-labelledby", s);
       }
     }), this._updateTabsAndPanels();
   }
   _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 ───
-  _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 }
         })
       );
     }
@@ -205,17 +209,19 @@ let I = 0, h = 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((o) => o.tagName.toLowerCase() !== "hx-tab");
-      s.length > 0 && console.warn(
-        `[hx-tabs] Slot "tab" expects <hx-tab> elements. Found unexpected: ${s.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
+    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(
+        "hx-tabs",
+        `Slot "tab" expects <hx-tab> elements. Found unexpected: ${s.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
-    if (t) {
-      const s = t.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab-panel");
-      s.length > 0 && console.warn(
-        `[hx-tabs] Default slot expects <hx-tab-panel> elements. Found unexpected: ${s.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
+    if (e) {
+      const s = e.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab-panel");
+      s.length > 0 && E(
+        "hx-tabs",
+        `Default slot expects <hx-tab-panel> elements. Found unexpected: ${s.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
   }
@@ -228,7 +234,7 @@ let I = 0, h = class extends _ {
           class="tablist"
           role="tablist"
           aria-orientation=${this.orientation}
-          aria-label=${this.label || E}
+          aria-label=${this.label || $}
         >
           <slot name="tab" @slotchange=${this._handleSlotChange}></slot>
         </div>
@@ -239,7 +245,7 @@ let I = 0, h = class extends _ {
     `;
   }
 };
-h.styles = [w, O];
+h.styles = [w, k];
 f([
   c({ type: String, reflect: !0 })
 ], h.prototype, "orientation", 2);
@@ -255,7 +261,7 @@ f([
 h = f([
   y("hx-tabs")
 ], h);
-const D = x`
+const N = x`
   :host {
     display: inline-block;
   }
@@ -348,10 +354,10 @@ const D = x`
     }
   }
 `;
-var L = Object.defineProperty, N = Object.getOwnPropertyDescriptor, d = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? N(t, a) : t, o = e.length - 1, n; o >= 0; o--)
-    (n = e[o]) && (s = (i ? n(t, a, s) : n(s)) || s);
-  return i && s && L(t, a, s), s;
+var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, d = (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;
 };
 let l = class extends _ {
   constructor() {
@@ -367,13 +373,13 @@ let l = class extends _ {
       })
     );
   }
-  _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;
   }
-  _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() {
@@ -384,7 +390,7 @@ let l = class extends _ {
         role="tab"
         aria-selected=${this.selected ? "true" : "false"}
         aria-disabled=${this.disabled ? "true" : "false"}
-        aria-controls=${this.controls || E}
+        aria-controls=${this.controls || $}
         tabindex=${this.selected ? "0" : "-1"}
         @click=${this._handleClick}
       >
@@ -399,7 +405,7 @@ let l = class extends _ {
     `;
   }
 };
-l.styles = [w, D];
+l.styles = [w, N];
 d([
   c({ type: String, reflect: !0 })
 ], l.prototype, "panel", 2);
@@ -421,7 +427,7 @@ d([
 l = d([
   y("hx-tab")
 ], l);
-const j = x`
+const H = x`
   :host {
     display: block;
   }
@@ -450,10 +456,10 @@ const j = x`
     outline: none;
   }
 `;
-var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, $ = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? K(t, a) : t, o = e.length - 1, n; o >= 0; o--)
-    (n = e[o]) && (s = (i ? n(t, a, s) : n(s)) || s);
-  return i && s && H(t, a, s), s;
+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;
 };
 let u = class extends _ {
   constructor() {
@@ -472,11 +478,11 @@ let u = class extends _ {
     `;
   }
 };
-u.styles = [w, j];
-$([
+u.styles = [w, H];
+A([
   c({ type: String, reflect: !0 })
 ], u.prototype, "name", 2);
-u = $([
+u = A([
   y("hx-tab-panel")
 ], u);
 export {
@@ -484,4 +490,4 @@ export {
   u as a,
   h as b
 };
-//# sourceMappingURL=hx-tab-panel-C7h5lRpw.js.map
+//# sourceMappingURL=hx-tab-panel-CHB0u1zF.js.map

package/dist/shared/hx-tab-panel-CHB0u1zF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tab-panel-CHB0u1zF.js","sources":["../../src/components/hx-tabs/hx-tabs.styles.ts","../../src/components/hx-tabs/hx-tabs.ts","../../src/components/hx-tabs/hx-tab.styles.ts","../../src/components/hx-tabs/hx-tab.ts","../../src/components/hx-tabs/hx-tab-panel.styles.ts","../../src/components/hx-tabs/hx-tab-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTabsStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Container ─── */\n\n  .tabs {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-tabs-gap, 0);\n  }\n\n  :host([orientation='vertical']) .tabs {\n    flex-direction: row;\n  }\n\n  /* ─── Tablist ─── */\n\n  .tablist {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    gap: 0;\n    border-bottom: var(--hx-tabs-border-width, 1px) solid\n      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* ─── Vertical Orientation ─── */\n\n  :host([orientation='vertical']) {\n    --_tab-indicator-bottom: 0px;\n    --_tab-indicator-end: var(--hx-tabs-indicator-size, 2px);\n    --_tab-indicator-bottom-color: transparent;\n    --_tab-indicator-end-color: var(\n      --hx-tabs-indicator-color,\n      var(--hx-color-primary-500, #2563eb)\n    );\n  }\n\n  :host([orientation='vertical']) .tablist {\n    flex-direction: column;\n    border-bottom: none;\n    border-inline-end: var(--hx-tabs-border-width, 1px) solid\n      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));\n    overflow-x: visible;\n    overflow-y: auto;\n    min-width: var(--hx-tabs-vertical-width, 12rem);\n    flex-shrink: 0;\n  }\n\n  /* ─── Panels Container ─── */\n\n  .panels {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .tablist {\n      scroll-behavior: auto;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabsStyles } from './hx-tabs.styles.js';\nimport type { HelixTab } from './hx-tab.js';\nimport type { HelixTabPanel } from './hx-tab-panel.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxTabsIdCounter = 0;\n\n/**\n * A tabbed content organizer that manages a set of `<hx-tab>` and `<hx-tab-panel>` children.\n * Supports horizontal and vertical orientations, automatic and manual activation modes,\n * and full keyboard navigation per the ARIA Authoring Practices Guide.\n *\n * @summary Tab container that organizes content into selectable panels.\n *\n * @tag hx-tabs\n *\n * @slot tab - Slot for `<hx-tab>` elements. Rendered inside the tablist.\n * @slot - Default slot for `<hx-tab-panel>` elements.\n *\n * @fires {CustomEvent<{tabId: string, index: number}>} hx-tab-change - Dispatched when the active tab changes.\n *\n * @csspart tablist - The tablist container element.\n * @csspart panels - The panel content container element.\n *\n * @cssprop [--hx-tabs-border-color=var(--hx-color-neutral-200, #e9ecef)] - Tablist border color.\n * @cssprop [--hx-tabs-border-width=1px] - Tablist border width.\n * @cssprop [--hx-tabs-vertical-width=12rem] - Width of the tablist in vertical orientation.\n * @cssprop [--hx-tabs-gap=0] - Gap between the tablist and panels container.\n * @cssprop [--hx-tabs-tab-color=var(--hx-color-neutral-600, #495057)] - Inactive tab text color.\n * @cssprop [--hx-tabs-tab-active-color=var(--hx-color-primary-600, #1d4ed8)] - Active tab text color.\n * @cssprop [--hx-tabs-tab-hover-color=var(--hx-color-neutral-800, #212529)] - Tab hover text color.\n * @cssprop [--hx-tabs-tab-hover-bg=var(--hx-color-neutral-50, #f8f9fa)] - Tab hover background.\n * @cssprop [--hx-tabs-tab-font-size=var(--hx-font-size-md, 1rem)] - Tab font size.\n * @cssprop [--hx-tabs-tab-font-weight=var(--hx-font-weight-medium, 500)] - Tab font weight.\n * @cssprop [--hx-tabs-tab-active-font-weight=var(--hx-font-weight-semibold, 600)] - Active tab font weight.\n * @cssprop [--hx-tabs-tab-padding-x=var(--hx-space-4, 1rem)] - Horizontal tab padding.\n * @cssprop [--hx-tabs-tab-padding-y=var(--hx-space-2, 0.5rem)] - Vertical tab padding.\n * @cssprop [--hx-tabs-indicator-color=var(--hx-color-primary-500, #2563eb)] - Active indicator color.\n * @cssprop [--hx-tabs-indicator-size=2px] - Active indicator thickness.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color for tabs and panels.\n * @cssprop [--hx-tabs-panel-padding=var(--hx-space-4, 1rem)] - Panel inner padding.\n * @cssprop [--hx-tabs-panel-color=var(--hx-color-neutral-700, #343a40)] - Panel text color.\n */\n@customElement('hx-tabs')\nexport class HelixTabs extends LitElement {\n  static override styles = [tokenStyles, helixTabsStyles];\n\n  // ─── Internal ID ───\n\n  /** @internal */\n  private _id = `hx-tabs-${++_hxTabsIdCounter}`;\n\n  // ─── Properties ───\n\n  /**\n   * The layout orientation of the tabs.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Controls how keyboard navigation activates tabs.\n   * In `automatic` mode, focus also activates the tab.\n   * In `manual` mode, focus moves independently; Space or Enter activates.\n   * @attr activation\n   */\n  @property({ type: String, attribute: 'activation', reflect: true })\n  activation: 'manual' | 'automatic' = 'automatic';\n\n  /**\n   * Accessible label for the tablist. Rendered as `aria-label` on the tablist container.\n   * Provide a brief description of what the tabs represent (e.g., \"Patient record sections\").\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  // ─── State ───\n\n  /** @internal */\n  @state() private _activePanel = '';\n\n  // ─── Child Accessors ───\n\n  /** @internal */\n  private _cachedTabs: HelixTab[] | null = null;\n  /** @internal */\n  private _cachedPanels: HelixTabPanel[] | null = null;\n  /** @internal */\n  private _observer: MutationObserver | null = null;\n\n  // ─── Public API ───\n\n  /**\n   * Gets or sets the zero-based index of the currently selected tab.\n   * Setting this programmatically activates the tab at the given index.\n   */\n  get selectedIndex(): number {\n    return this._getTabs().findIndex((tab) => tab.panel === this._activePanel);\n  }\n\n  set selectedIndex(index: number) {\n    const tab = this._getTabs()[index];\n    if (tab && !tab.disabled) {\n      this._activateTab(tab, true);\n    }\n  }\n\n  private _getTabs(): HelixTab[] {\n    if (!this._cachedTabs) {\n      this._cachedTabs = Array.from(this.querySelectorAll(':scope > hx-tab')).filter(\n        (el): el is HelixTab => el.tagName.toLowerCase() === 'hx-tab',\n      );\n    }\n    return this._cachedTabs;\n  }\n\n  private _getPanels(): HelixTabPanel[] {\n    if (!this._cachedPanels) {\n      this._cachedPanels = Array.from(this.querySelectorAll(':scope > hx-tab-panel')).filter(\n        (el): el is HelixTabPanel => el.tagName.toLowerCase() === 'hx-tab-panel',\n      );\n    }\n    return this._cachedPanels;\n  }\n\n  private _getEnabledTabs(): HelixTab[] {\n    return this._getTabs().filter((tab) => !tab.disabled);\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-tab-select', this._handleTabSelect);\n    this.addEventListener('keydown', this._handleKeydown);\n    // Watch for panel/name attribute changes on child tabs and panels\n    this._observer = new MutationObserver(() => {\n      this._cachedTabs = null;\n      this._cachedPanels = null;\n      this._syncTabsAndPanels();\n    });\n    this._observer.observe(this, {\n      subtree: true,\n      attributeFilter: ['panel', 'name'],\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-tab-select', this._handleTabSelect);\n    this.removeEventListener('keydown', this._handleKeydown);\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  override firstUpdated(): void {\n    this._syncTabsAndPanels();\n    // Activate the first enabled tab if none is selected\n    if (!this._activePanel) {\n      const firstEnabled = this._getEnabledTabs()[0];\n      if (firstEnabled) {\n        this._activateTab(firstEnabled, false);\n      }\n    }\n  }\n\n  override updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_activePanel')) {\n      this._updateTabsAndPanels();\n    }\n  }\n\n  // ─── Tab / Panel Sync ───\n\n  private _syncTabsAndPanels(): void {\n    const tabs = this._getTabs();\n    const panels = this._getPanels();\n\n    tabs.forEach((tab, i) => {\n      const tabId = tab.id || `hx-tab-${this._id}-${i}`;\n      tab.id = tabId;\n\n      // Connect tab to its panel by aria-controls\n      const panelName = tab.panel;\n      const panel = panels.find((p) => p.name === panelName) ?? panels[i];\n      if (panel) {\n        const panelId = panel.id || `hx-panel-${this._id}-${i}`;\n        panel.id = panelId;\n        // Set controls on the tab so aria-controls lands on the inner button (role=\"tab\")\n        tab.controls = panelId;\n        panel.setAttribute('aria-labelledby', tabId);\n      }\n    });\n\n    this._updateTabsAndPanels();\n  }\n\n  private _updateTabsAndPanels(): void {\n    const tabs = this._getTabs();\n    const panels = this._getPanels();\n\n    tabs.forEach((tab) => {\n      const isSelected = tab.panel === this._activePanel;\n      tab.selected = isSelected;\n      // Dual tabindex is intentional: the inner button in hx-tab manages its own tabindex\n      // via the `selected` property. We also set it on the host element for the roving\n      // tabindex pattern so document.activeElement comparisons work correctly when the\n      // inner button is focused. This is safe because the inner button is the only\n      // focusable element in hx-tab's shadow DOM (WCAG 2.4.3).\n      tab.tabIndex = isSelected ? 0 : -1;\n    });\n\n    panels.forEach((panel) => {\n      const isActive = panel.name === this._activePanel;\n      if (isActive) {\n        panel.removeAttribute('hidden');\n        panel.setAttribute('tabindex', '0');\n      } else {\n        panel.setAttribute('hidden', '');\n        panel.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  // ─── Tab Activation ───\n\n  private _activateTab(tab: HelixTab, dispatchEvent = true): void {\n    if (tab.disabled) {\n      return;\n    }\n\n    const tabs = this._getTabs();\n    const previousPanel = this._activePanel;\n    this._activePanel = tab.panel;\n\n    if (dispatchEvent && previousPanel !== this._activePanel) {\n      const index = tabs.indexOf(tab);\n      /**\n       * Dispatched when the active tab changes.\n       * @event hx-tab-change\n       */\n      this.dispatchEvent(\n        new CustomEvent('hx-tab-change', {\n          bubbles: true,\n          composed: true,\n          detail: { tabId: tab.id, index },\n        }),\n      );\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleTabSelect = (e: Event): void => {\n    if (!(e instanceof CustomEvent)) return;\n    e.stopPropagation();\n    const tab = e\n      .composedPath()\n      .find((el): el is HelixTab => el instanceof Element && el.tagName.toLowerCase() === 'hx-tab');\n    if (tab) {\n      this._activateTab(tab);\n    }\n  };\n\n  /** @internal */\n  private _warnInvalidSlotContent(): void {\n    const tabSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tab\"]');\n    const panelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (tabSlot) {\n      const invalid = tabSlot\n        .assignedElements()\n        .filter((el) => el.tagName.toLowerCase() !== 'hx-tab');\n      if (invalid.length > 0) {\n        devWarn(\n          'hx-tabs',\n          `Slot \"tab\" expects <hx-tab> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n        );\n      }\n    }\n    if (panelSlot) {\n      const invalid = panelSlot\n        .assignedElements()\n        .filter((el) => el.tagName.toLowerCase() !== 'hx-tab-panel');\n      if (invalid.length > 0) {\n        devWarn(\n          'hx-tabs',\n          `Default slot expects <hx-tab-panel> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n        );\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleSlotChange = (): void => {\n    this._warnInvalidSlotContent();\n    this._cachedTabs = null;\n    this._cachedPanels = null;\n    this._syncTabsAndPanels();\n    // If the active panel was removed, fall back to the first enabled tab\n    const panels = this._getPanels();\n    const activePanelExists = panels.some((p) => p.name === this._activePanel);\n    if (!activePanelExists) {\n      const firstEnabled = this._getEnabledTabs()[0];\n      if (firstEnabled) {\n        this._activateTab(firstEnabled, false);\n      } else {\n        this._activePanel = '';\n      }\n    }\n  };\n\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    const enabledTabs = this._getEnabledTabs();\n    if (enabledTabs.length === 0) {\n      return;\n    }\n\n    const isHorizontal = this.orientation === 'horizontal';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n\n    const isNavigationKey = [prevKey, nextKey, 'Home', 'End', ' ', 'Enter'].includes(e.key);\n    if (!isNavigationKey) {\n      return;\n    }\n\n    // Determine focused tab — when a button inside shadow DOM is focused,\n    // document.activeElement returns the shadow host (hx-tab), not the inner button.\n    const focusedTab = enabledTabs.find((tab) => tab === document.activeElement);\n\n    if (e.key === ' ' || e.key === 'Enter') {\n      if (focusedTab) {\n        e.preventDefault();\n        this._activateTab(focusedTab);\n        focusedTab.shadowRoot?.querySelector('button')?.focus();\n      }\n      return;\n    }\n\n    e.preventDefault();\n\n    let currentIndex = focusedTab ? enabledTabs.indexOf(focusedTab) : -1;\n    // Fall back to the active tab's index if nothing is focused yet\n    if (currentIndex === -1) {\n      const activeTab = enabledTabs.find((tab) => tab.panel === this._activePanel);\n      currentIndex = activeTab ? enabledTabs.indexOf(activeTab) : 0;\n    }\n\n    let nextIndex: number;\n\n    if (e.key === 'Home') {\n      nextIndex = 0;\n    } else if (e.key === 'End') {\n      nextIndex = enabledTabs.length - 1;\n    } else if (e.key === nextKey) {\n      nextIndex = (currentIndex + 1) % enabledTabs.length;\n    } else {\n      // prevKey\n      nextIndex = currentIndex <= 0 ? enabledTabs.length - 1 : currentIndex - 1;\n    }\n\n    const targetTab = enabledTabs[nextIndex];\n    if (!targetTab) {\n      return;\n    }\n\n    // Focus the tab button inside the shadow root\n    targetTab.shadowRoot?.querySelector('button')?.focus();\n\n    if (this.activation === 'automatic') {\n      this._activateTab(targetTab);\n    }\n  };\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div class=\"tabs\">\n        <div\n          part=\"tablist\"\n          class=\"tablist\"\n          role=\"tablist\"\n          aria-orientation=${this.orientation}\n          aria-label=${this.label || nothing}\n        >\n          <slot name=\"tab\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"panels\" class=\"panels\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tabs': HelixTabs;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixTabStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    padding: var(--hx-tabs-tab-padding-y, var(--hx-space-2, 0.5rem))\n      var(--hx-tabs-tab-padding-x, var(--hx-space-4, 1rem));\n    border: none;\n    border-bottom: var(--_tab-indicator-bottom, var(--hx-tabs-indicator-size, 2px)) solid\n      transparent;\n    border-inline-end: var(--_tab-indicator-end, 0px) solid transparent;\n    background: none;\n    font-family: var(--hx-tabs-tab-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-tabs-tab-font-size, var(--hx-font-size-md, 1rem));\n    font-weight: var(--hx-tabs-tab-font-weight, var(--hx-font-weight-medium, 500));\n    color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #495057));\n    line-height: var(--hx-line-height-tight, 1.25);\n    cursor: pointer;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      border-inline-end-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n    position: relative;\n  }\n\n  /* ─── Hover State ─── */\n\n  .tab:not([aria-selected='true']):not([aria-disabled='true']):hover {\n    color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #212529));\n    background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f8f9fa));\n  }\n\n  /* ─── Selected State ─── */\n\n  .tab[aria-selected='true'] {\n    color: var(--hx-tabs-tab-active-color, var(--hx-color-primary-600, #1d4ed8));\n    border-bottom-color: var(\n      --_tab-indicator-bottom-color,\n      var(--hx-tabs-indicator-color, var(--hx-color-primary-500, #2563eb))\n    );\n    border-inline-end-color: var(--_tab-indicator-end-color, transparent);\n    font-weight: var(--hx-tabs-tab-active-font-weight, var(--hx-font-weight-semibold, 600));\n  }\n\n  /* ─── Focus State ─── */\n\n  .tab:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n  }\n\n  /* ─── Disabled State ─── */\n\n  .tab[aria-disabled='true'] {\n    cursor: not-allowed;\n    color: var(--hx-color-neutral-400, #adb5bd);\n  }\n\n  /* ─── Prefix / Suffix Slots ─── */\n\n  .tab__prefix,\n  .tab__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .tab {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabStyles } from './hx-tab.styles.js';\n\n/**\n * An individual tab button, designed to be used inside an `<hx-tabs>` container.\n * Must be placed in the `tab` named slot of `<hx-tabs>`.\n *\n * @summary Presentational tab button that activates a corresponding panel.\n *\n * @tag hx-tab\n *\n * @slot - Default slot for the tab label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @csspart tab - The underlying button element.\n * @csspart prefix - The container for prefix slot content (e.g. icons).\n * @csspart suffix - The container for suffix slot content (e.g. badges).\n *\n * @cssprop [--hx-tabs-tab-color=var(--hx-color-neutral-600, #495057)] - Inactive tab text color.\n * @cssprop [--hx-tabs-tab-active-color=var(--hx-color-primary-600, #1d4ed8)] - Active tab text color.\n * @cssprop [--hx-tabs-tab-hover-color=var(--hx-color-neutral-800, #212529)] - Tab hover text color.\n * @cssprop [--hx-tabs-tab-hover-bg=var(--hx-color-neutral-50, #f8f9fa)] - Tab hover background.\n * @cssprop [--hx-tabs-tab-font-size=var(--hx-font-size-md, 1rem)] - Tab font size.\n * @cssprop [--hx-tabs-tab-font-weight=var(--hx-font-weight-medium, 500)] - Tab font weight.\n * @cssprop [--hx-tabs-tab-active-font-weight=var(--hx-font-weight-semibold, 600)] - Active tab font weight.\n * @cssprop [--hx-tabs-tab-padding-x=var(--hx-space-4, 1rem)] - Horizontal tab padding.\n * @cssprop [--hx-tabs-tab-padding-y=var(--hx-space-2, 0.5rem)] - Vertical tab padding.\n * @cssprop [--hx-tabs-indicator-color=var(--hx-color-primary-500, #2563eb)] - Active indicator color.\n * @cssprop [--hx-tabs-indicator-size=2px] - Active indicator thickness.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color.\n */\n@customElement('hx-tab')\nexport class HelixTab extends LitElement {\n  static override styles = [tokenStyles, helixTabStyles];\n\n  // ─── Properties ───\n\n  /**\n   * The name of the `<hx-tab-panel>` this tab controls. Must match the `name`\n   * attribute on the corresponding `<hx-tab-panel>`.\n   * @attr panel\n   */\n  @property({ type: String, reflect: true })\n  panel = '';\n\n  /**\n   * Whether this tab is currently selected. Managed by the parent `<hx-tabs>`.\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Whether this tab is disabled. Prevents selection and keyboard navigation.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The id of the panel this tab controls. Set by the parent `<hx-tabs>` to establish the\n   * aria-controls relationship on the inner button element (which carries role=\"tab\").\n   * @internal\n   */\n  @property({ type: String, attribute: false })\n  controls = '';\n\n  // ─── Slot Visibility ───\n\n  /** @internal */\n  @state() private _hasPrefixSlot = false;\n  /** @internal */\n  @state() private _hasSuffixSlot = false;\n\n  // ─── Event Handling ───\n\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n    /**\n     * Internal event dispatched to signal tab selection to the parent container.\n     * Not part of the public API.\n     * @internal\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-tab-select', {\n        bubbles: true,\n        composed: true,\n        detail: { panel: this.panel },\n      }),\n    );\n  }\n\n  private _handlePrefixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleSuffixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <button\n        part=\"tab\"\n        class=\"tab\"\n        role=\"tab\"\n        aria-selected=${this.selected ? 'true' : 'false'}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-controls=${this.controls || nothing}\n        tabindex=${this.selected ? '0' : '-1'}\n        @click=${this._handleClick}\n      >\n        <span part=\"prefix\" class=\"tab__prefix\" ?hidden=${!this._hasPrefixSlot}>\n          <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n        </span>\n        <slot></slot>\n        <span part=\"suffix\" class=\"tab__suffix\" ?hidden=${!this._hasSuffixSlot}>\n          <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n        </span>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tab': HelixTab;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixTabPanelStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  :host(:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n  }\n\n  .panel {\n    padding: var(--hx-tabs-panel-padding, var(--hx-space-4, 1rem));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    outline: none;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabPanelStyles } from './hx-tab-panel.styles.js';\n\n/**\n * A content panel associated with an `<hx-tab>`, managed by a parent `<hx-tabs>`.\n *\n * @summary Tab content panel shown when its corresponding tab is selected.\n *\n * @tag hx-tab-panel\n *\n * @slot - Default slot for panel content.\n *\n * @csspart panel - The panel content wrapper.\n *\n * @cssprop [--hx-tabs-panel-padding=var(--hx-space-4, 1rem)] - Panel inner padding.\n * @cssprop [--hx-tabs-panel-color=var(--hx-color-neutral-700, #343a40)] - Panel text color.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color.\n */\n@customElement('hx-tab-panel')\nexport class HelixTabPanel extends LitElement {\n  static override styles = [tokenStyles, helixTabPanelStyles];\n\n  // ─── Properties ───\n\n  /**\n   * The name that corresponds to the `panel` attribute on the associated `<hx-tab>`.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tabpanel');\n    // tabindex is managed dynamically by the parent hx-tabs component:\n    // active panels get tabindex=\"0\", hidden panels get tabindex=\"-1\"\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"panel\" class=\"panel\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tab-panel': HelixTabPanel;\n  }\n}\n"],"names":["helixTabsStyles","css","_hxTabsIdCounter","HelixTabs","LitElement","e","tab","el","p","firstEnabled","enabledTabs","isHorizontal","prevKey","nextKey","focusedTab","_b","_a","currentIndex","activeTab","nextIndex","targetTab","_d","_c","index","changedProperties","tabs","panels","tabId","panelName","panel","panelId","isSelected","dispatchEvent","previousPanel","tabSlot","panelSlot","invalid","devWarn","html","nothing","tokenStyles","__decorateClass","property","state","customElement","helixTabStyles","HelixTab","slot","helixTabPanelStyles","HelixTabPanel"],"mappings":"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"}