@helixui/library 3.1.0 → 3.2.0

package/dist/shared/{hx-structured-list-CqNbaEXg.js → hx-structured-list-m_-dMJbC.js}

@@ -1,12 +1,13 @@
-import { css as p, nothing as b, html as h } from "lit";
+import { css as p, nothing as m, html as h } from "lit";
 import { property as l, customElement as u } from "lit/decorators.js";
-import { H as v } from "./helix-element-BNEYeiys.js";
+import { a as v } from "./forced-colors-CTEDFRGa.js";
+import { H as b } from "./helix-element-BNEYeiys.js";
 const x = p`
   :host {
     display: block;
-    --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #d6dbd5));
     --_border-width: var(--hx-structured-list-border-width, var(--hx-border-width-thin, 1px));
-    --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f5f8f3));
     --_padding-block: var(--hx-structured-list-padding-block, var(--hx-space-4, 1rem));
     --_padding-inline: var(--hx-structured-list-padding-inline, var(--hx-space-4, 1rem));
   }
@@ -43,7 +44,7 @@ const x = p`
       border-color: CanvasText;
     }
   }
-`, m = p`
+`, f = p`
   :host {
     display: block;
   }
@@ -59,17 +60,17 @@ const x = p`
 
   :host(:not(:last-of-type)) .row {
     border-bottom: var(--_border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--_border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--_border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   .row__label {
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #313e4b));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .row__value {
-    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0d1825));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -91,12 +92,12 @@ const x = p`
     }
   }
 `;
-var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (c, o, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? _(o, a) : o, i = c.length - 1, d; i >= 0; i--)
+var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (c, o, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? g(o, a) : o, i = c.length - 1, d; i >= 0; i--)
     (d = c[i]) && (r = (s ? d(o, a, r) : d(r)) || r);
-  return s && r && f(o, a, r), r;
+  return s && r && _(o, a, r), r;
 };
-let e = class extends v {
+let e = class extends b {
   constructor() {
     super(...arguments), this.label = "", this.bordered = !1, this.condensed = !1, this.striped = !1;
   }
@@ -105,13 +106,13 @@ let e = class extends v {
   }
   render() {
     return h`
-      <div part="base" class="list" aria-label=${this.label || b}>
+      <div part="base" class="list" aria-label=${this.label || m}>
         <slot></slot>
       </div>
     `;
   }
 };
-e.styles = [x];
+e.styles = [x, v];
 t([
   l({ type: String })
 ], e.prototype, "label", 2);
@@ -127,7 +128,7 @@ t([
 e = t([
   u("hx-structured-list")
 ], e);
-let n = class extends v {
+let n = class extends b {
   connectedCallback() {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
   }
@@ -147,7 +148,7 @@ let n = class extends v {
     `;
   }
 };
-n.styles = [m];
+n.styles = [f, v];
 n = t([
   u("hx-structured-list-row")
 ], n);
@@ -155,4 +156,4 @@ export {
   e as H,
   n as a
 };
-//# sourceMappingURL=hx-structured-list-CqNbaEXg.js.map
+//# sourceMappingURL=hx-structured-list-m_-dMJbC.js.map

package/dist/shared/hx-structured-list-m_-dMJbC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-structured-list-m_-dMJbC.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, #d6dbd5));\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, #f5f8f3));\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  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    :host([bordered]) .list {\n      border-color: CanvasText;\n    }\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, #d6dbd5));\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, #313e4b));\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, #0d1825));\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  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    :host(:not(:last-of-type)) .row {\n      border-bottom-color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport {\n  helixStructuredListStyles,\n  helixStructuredListRowStyles,\n} from './hx-structured-list.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * Container for structured key-value data display. Renders as a list with\n * `role=\"list\"` on the host and `role=\"listitem\"` on each `hx-structured-list-row`,\n * preserving the list/listitem relationship across shadow DOM boundaries.\n * Use `hx-structured-list-row` 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 * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n */\n@customElement('hx-structured-list')\nexport class HelixStructuredList extends HelixElement {\n  static override styles = [helixStructuredListStyles, forcedColorsSurface];\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   * Accessible label for the list container. Use when multiple structured lists appear\n   * on the same page so screen readers can distinguish them (WCAG 4.1.2).\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\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\" aria-label=${this.label || nothing}>\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 HelixElement {\n  static override styles = [helixStructuredListRowStyles, forcedColorsSurface];\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","HelixElement","html","nothing","forcedColorsSurface","__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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4C5BC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACNrC,IAAME,IAAN,cAAkCC,EAAa;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBL,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU;AAAA,EAAA;AAAA,EApCD,oBAA0B;AACjC,UAAM,kBAAA,GAGD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,MAAM;AAAA,EAEpC;AAAA,EA+BS,SAAS;AAChB,WAAOC;AAAA,iDACsC,KAAK,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AAhDaH,EACK,SAAS,CAACH,GAA2BO,CAAmB;AAiBxEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjBfN,EAkBX,WAAA,SAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxB/BN,EAyBX,WAAA,YAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/B/BN,EAgCX,WAAA,aAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtC/BN,EAuCX,WAAA,WAAA,CAAA;AAvCWA,IAANK,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBP,CAAA;AAuEN,IAAMQ,IAAN,cAAqCP,EAAa;AAAA,EAG9C,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;AA5BaM,EACK,SAAS,CAACT,GAA8BK,CAAmB;AADhEI,IAANH,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BC,CAAA;"}

package/dist/shared/{hx-switch-DqOD9JR7.js → hx-switch-Dougzsgp.js}

@@ -1,11 +1,12 @@
 import { css as x, nothing as c, html as l } from "lit";
-import { property as i, query as _, state as m, customElement as w } from "lit/decorators.js";
+import { property as i, query as w, state as m, customElement as _ } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
 import { F as b } from "./FormMixin-B8PXk5RQ.js";
+import { b as v } from "./forced-colors-CTEDFRGa.js";
 import { H as f } from "./helix-element-BNEYeiys.js";
-import { c as v } from "./id-counter-DuX8vsui.js";
-const g = x`
+import { c as g } from "./id-counter-DuX8vsui.js";
+const k = x`
   :host {
     display: block;
   }
@@ -48,7 +49,7 @@ const g = x`
     border: none;
     padding: 0;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #cbd5e1));
+    background-color: var(--hx-switch-track-bg, var(--hx-color-border-strong, #8e9c98));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms ease);
     outline: none;
@@ -60,13 +61,21 @@ const g = x`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-switch-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .switch--checked .switch__track {
-    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #429797));
+  }
+
+  .switch:not(.switch--checked) .switch__track:hover {
+    background-color: var(--hx-switch-track-hover-bg, var(--hx-color-border-strong, #8e9c98));
+  }
+
+  .switch--checked .switch__track:hover {
+    background-color: var(--hx-switch-track-checked-hover-bg, var(--hx-color-primary-600, #0f7078));
   }
 
   /* --- Thumb --- */
@@ -74,7 +83,7 @@ const g = x`
   .switch__thumb {
     position: absolute;
     border-radius: var(--hx-border-radius-full, 9999px);
-    background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-switch-thumb-bg, var(--hx-color-surface-default, #ffffff));
     box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
     transition: transform var(--hx-transition-fast, 150ms ease);
   }
@@ -144,7 +153,7 @@ const g = x`
   .switch__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-switch-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
     user-select: none;
@@ -152,7 +161,7 @@ const g = x`
   }
 
   .switch__required-marker {
-    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -160,13 +169,13 @@ const g = x`
 
   .switch__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-switch-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .switch__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-switch-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -237,15 +246,15 @@ const g = x`
     }
   }
 `;
-var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (t, r, o, a) => {
-  for (var h = a > 1 ? void 0 : a ? y(r, o) : r, n = t.length - 1, d; n >= 0; n--)
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, s = (t, r, o, a) => {
+  for (var h = a > 1 ? void 0 : a ? z(r, o) : r, n = t.length - 1, d; n >= 0; n--)
     (d = t[n]) && (h = (a ? d(r, o, h) : d(h)) || h);
-  return a && h && k(r, o, h), h;
+  return a && h && y(r, o, h), h;
 };
-const z = v("hx-switch");
+const S = g("hx-switch");
 let e = class extends b(f) {
   constructor() {
-    super(...arguments), this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.size = "md", this.error = "", this.helpText = "", this.requiredMessage = "This field is required.", this._hasErrorSlot = !1, this._hasDefaultSlot = !1, this._switchId = z(), this._labelId = `${this._switchId}-label`, this._helpTextId = `${this._switchId}-help`, this._errorId = `${this._switchId}-error`;
+    super(...arguments), this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.size = "md", this.error = "", this.helpText = "", this.requiredMessage = "This field is required.", this._hasErrorSlot = !1, this._hasDefaultSlot = !1, this._switchId = S(), this._labelId = `${this._switchId}-label`, this._helpTextId = `${this._switchId}-help`, this._errorId = `${this._switchId}-error`;
   }
   // ─── Lifecycle ───
   updated(t) {
@@ -364,7 +373,7 @@ let e = class extends b(f) {
     `;
   }
 };
-e.styles = [g];
+e.styles = [k, v];
 e.formAssociated = !0;
 s([
   i({ type: Boolean, reflect: !0 })
@@ -397,7 +406,7 @@ s([
   i({ attribute: "required-message" })
 ], e.prototype, "requiredMessage", 2);
 s([
-  _(".switch__track")
+  w(".switch__track")
 ], e.prototype, "_trackEl", 2);
 s([
   m()
@@ -406,9 +415,9 @@ s([
   m()
 ], e.prototype, "_hasDefaultSlot", 2);
 e = s([
-  w("hx-switch")
+  _("hx-switch")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-switch-DqOD9JR7.js.map
+//# sourceMappingURL=hx-switch-Dougzsgp.js.map

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

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

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

@@ -1,7 +1,8 @@
-import { css as v, html as _, nothing as $ } from "lit";
+import { css as v, html as _, nothing as I } from "lit";
 import { property as h, state as g, customElement as m } from "lit/decorators.js";
-import { d as C } from "./dev-warn-YlwPHjtX.js";
-import { H as y } from "./helix-element-BNEYeiys.js";
+import { f as y } from "./forced-colors-CTEDFRGa.js";
+import { d as E } from "./dev-warn-YlwPHjtX.js";
+import { H as T } from "./helix-element-BNEYeiys.js";
 import { c as N } from "./id-counter-DuX8vsui.js";
 const O = v`
   :host {
@@ -33,7 +34,7 @@ const O = v`
     flex-wrap: nowrap;
     gap: 0;
     border-bottom: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #d6dbd5));
     overflow-x: auto;
     scrollbar-width: none;
   }
@@ -50,7 +51,7 @@ const O = v`
     --_tab-indicator-bottom-color: transparent;
     --_tab-indicator-end-color: var(
       --hx-tabs-indicator-color,
-      var(--hx-color-primary-500, #2563eb)
+      var(--hx-color-primary-500, #429797)
     );
   }
 
@@ -58,7 +59,7 @@ const O = v`
     flex-direction: column;
     border-bottom: none;
     border-inline-end: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #d6dbd5));
     overflow-x: visible;
     overflow-y: auto;
     min-width: var(--hx-tabs-vertical-width, 12rem);
@@ -92,15 +93,15 @@ const O = v`
     }
   }
 `;
-var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, p = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? k(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+var k = Object.defineProperty, H = Object.getOwnPropertyDescriptor, p = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? H(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
-  return i && s && I(e, a, s), s;
+  return i && s && k(e, a, s), s;
 };
-const H = N("hx-tabs");
-let b = class extends y {
+const L = N("hx-tabs");
+let b = class extends T {
   constructor() {
-    super(...arguments), this._id = H(), this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._pendingIndex = null, this._handleTabSelect = (t) => {
+    super(...arguments), this._id = L(), this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._pendingIndex = null, this._handleTabSelect = (t) => {
       if (!(t instanceof CustomEvent)) return;
       t.stopPropagation();
       const e = t.composedPath().find((a) => a instanceof Element && a.tagName.toLowerCase() === "hx-tab");
@@ -111,7 +112,7 @@ let b = class extends y {
         a ? this._activateTab(a, !1) : this._activePanel = "";
       }
     }, this._handleKeydown = (t) => {
-      var T, w, P, S;
+      var w, P, S, C;
       const e = this._getTabs();
       if (e.length === 0)
         return;
@@ -120,19 +121,19 @@ let b = class extends y {
         return;
       const o = e.find((u) => u === document.activeElement);
       if (t.key === " " || t.key === "Enter") {
-        o && !o.disabled && (t.preventDefault(), this._activateTab(o), (w = (T = o.shadowRoot) == null ? void 0 : T.querySelector("button")) == null || w.focus());
+        o && !o.disabled && (t.preventDefault(), this._activateTab(o), (P = (w = o.shadowRoot) == null ? void 0 : w.querySelector("button")) == null || P.focus());
         return;
       }
       t.preventDefault();
       let n = o ? e.indexOf(o) : -1;
       if (n === -1) {
-        const u = e.find((A) => A.panel === this._activePanel);
+        const u = e.find(($) => $.panel === this._activePanel);
         n = u ? e.indexOf(u) : 0;
       }
       let d;
       t.key === "Home" ? d = 0 : t.key === "End" ? d = e.length - 1 : t.key === s ? d = (n + 1) % e.length : d = n <= 0 ? e.length - 1 : n - 1;
       const l = e[d];
-      l && ((S = (P = l.shadowRoot) == null ? void 0 : P.querySelector("button")) == null || S.focus(), this.activation === "automatic" && !l.disabled && this._activateTab(l));
+      l && ((C = (S = l.shadowRoot) == null ? void 0 : S.querySelector("button")) == null || C.focus(), this.activation === "automatic" && !l.disabled && this._activateTab(l));
     };
   }
   // ─── Attribute Observation ───
@@ -260,14 +261,14 @@ let b = class extends y {
     const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="tab"]'), e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
     if (t) {
       const s = t.assignedElements().filter((r) => r.tagName.toLowerCase() !== "hx-tab");
-      s.length > 0 && C(
+      s.length > 0 && E(
         "hx-tabs",
         `Slot "tab" expects <hx-tab> elements. Found unexpected: ${s.map((r) => `<${r.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
     if (e) {
       const s = e.assignedElements().filter((r) => r.tagName.toLowerCase() !== "hx-tab-panel");
-      s.length > 0 && C(
+      s.length > 0 && E(
         "hx-tabs",
         `Default slot expects <hx-tab-panel> elements. Found unexpected: ${s.map((r) => `<${r.tagName.toLowerCase()}>`).join(", ")}`
       );
@@ -293,7 +294,7 @@ let b = class extends y {
     `;
   }
 };
-b.styles = [O];
+b.styles = [O, y];
 p([
   h({ type: String, reflect: !0 })
 ], b.prototype, "orientation", 2);
@@ -309,7 +310,7 @@ p([
 b = p([
   m("hx-tabs")
 ], b);
-const L = v`
+const z = v`
   :host {
     display: inline-block;
   }
@@ -337,7 +338,7 @@ const L = v`
     font-family: var(--hx-tabs-tab-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-tabs-tab-font-size, var(--hx-font-size-md, 1rem));
     font-weight: var(--hx-tabs-tab-font-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #4a5362));
     line-height: var(--hx-line-height-tight, 1.25);
     cursor: pointer;
     white-space: nowrap;
@@ -354,17 +355,17 @@ const L = v`
   /* ─── Hover State ─── */
 
   .tab:not([aria-selected='true']):not([aria-disabled='true']):hover {
-    color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #1e293b));
-    background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #202b39));
+    background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f5f8f3));
   }
 
   /* ─── Selected State ─── */
 
   .tab[aria-selected='true'] {
-    color: var(--hx-tabs-tab-active-color, var(--hx-color-primary-600, #1d4ed8));
+    color: var(--hx-tabs-tab-active-color, var(--hx-color-primary-600, #0f7078));
     border-bottom-color: var(
       --_tab-indicator-bottom-color,
-      var(--hx-tabs-indicator-color, var(--hx-color-primary-500, #2563eb))
+      var(--hx-tabs-indicator-color, var(--hx-color-primary-500, #429797))
     );
     border-inline-end-color: var(--_tab-indicator-end-color, transparent);
     font-weight: var(--hx-tabs-tab-active-font-weight, var(--hx-font-weight-semibold, 600));
@@ -376,7 +377,7 @@ const L = v`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-tabs-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -390,7 +391,7 @@ const L = v`
 
   .tab[aria-disabled='true'] {
     pointer-events: none;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-tabs-tab-disabled-color, var(--hx-color-neutral-400, #8e9c98));
   }
 
   /* ─── Prefix / Suffix Slots ─── */
@@ -436,12 +437,12 @@ const L = v`
     }
   }
 `;
-var z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, f = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? D(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, f = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? j(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
-  return i && s && z(e, a, s), s;
+  return i && s && D(e, a, s), s;
 };
-let c = class extends y {
+let c = class extends T {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1, this.disabled = !1, this.controls = "", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1;
   }
@@ -479,7 +480,7 @@ let c = class extends y {
         role="tab"
         aria-selected=${this.selected ? "true" : "false"}
         aria-disabled=${this.disabled ? "true" : "false"}
-        aria-controls=${this.controls || $}
+        aria-controls=${this.controls || I}
         tabindex=${this.selected ? "0" : "-1"}
         @click=${this._handleClick}
       >
@@ -494,7 +495,7 @@ let c = class extends y {
     `;
   }
 };
-c.styles = [L];
+c.styles = [z, y];
 f([
   h({ type: String, reflect: !0 })
 ], c.prototype, "panel", 2);
@@ -516,7 +517,7 @@ f([
 c = f([
   m("hx-tab")
 ], c);
-const j = v`
+const M = v`
   :host {
     display: block;
   }
@@ -533,7 +534,7 @@ const j = v`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-tabs-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -543,7 +544,7 @@ const j = v`
     padding: var(--hx-tabs-panel-padding, var(--hx-space-4, 1rem));
     font-family: var(--hx-tab-panel-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #313e4b));
     line-height: var(--hx-line-height-normal, 1.5);
     outline: none;
   }
@@ -561,12 +562,12 @@ const j = v`
     }
   }
 `;
-var M = Object.defineProperty, K = Object.getOwnPropertyDescriptor, E = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? K(e, a) : e, r = t.length - 1, o; r >= 0; r--)
+var K = Object.defineProperty, R = Object.getOwnPropertyDescriptor, A = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? R(e, a) : e, r = t.length - 1, o; r >= 0; r--)
     (o = t[r]) && (s = (i ? o(e, a, s) : o(s)) || s);
-  return i && s && M(e, a, s), s;
+  return i && s && K(e, a, s), s;
 };
-let x = class extends y {
+let x = class extends T {
   constructor() {
     super(...arguments), this.name = "";
   }
@@ -583,11 +584,11 @@ let x = class extends y {
     `;
   }
 };
-x.styles = [j];
-E([
+x.styles = [M, y];
+A([
   h({ type: String, reflect: !0 })
 ], x.prototype, "name", 2);
-x = E([
+x = A([
   m("hx-tab-panel")
 ], x);
 export {
@@ -595,4 +596,4 @@ export {
   x as a,
   b
 };
-//# sourceMappingURL=hx-tab-panel-BIzKfW5i.js.map
+//# sourceMappingURL=hx-tab-panel-CbkO9VKu.js.map