@helixui/library 3.1.0 → 3.2.0-next.76

package/dist/shared/{hx-toggle-button-L-uBJr-a.js → hx-toggle-button-Dd8clXB4.js}

@@ -1,8 +1,9 @@
-import { css as b, html as u, nothing as g } from "lit";
-import { query as d, property as s, customElement as c } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { H as x } from "./helix-element-BNEYeiys.js";
-const f = b`
+import { css as b, html as u, nothing as d } from "lit";
+import { query as g, property as s, customElement as p } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { f as x } from "./forced-colors-CTEDFRGa.js";
+import { H as f } from "./helix-element-BNEYeiys.js";
+const v = b`
   :host {
     display: inline-block;
   }
@@ -21,8 +22,8 @@ const f = b`
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
     border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-toggle-button-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -42,7 +43,7 @@ const f = b`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-toggle-button-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);
   }
@@ -81,49 +82,55 @@ const f = b`
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-toggle-button-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-toggle-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-toggle-button-border-color: transparent;
   }
 
+  /*
+   * secondary/ghost paint primary text on the surface (white). primary-500
+   * (#429797) on white = 3.43:1 — fails AA at body sizes. shift to
+   * primary-600 (#0F7078) = 6.06:1 — AA pass. border keeps primary-500
+   * for the brand affordance (3:1 non-text contrast still met).
+   */
   .button--secondary {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
+    --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
   }
 
   .button--secondary:hover {
-    --hx-toggle-button-bg: var(--hx-color-primary-50, #eff6ff);
+    --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);
   }
 
   .button--tertiary {
-    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
-    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);
+    --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
     --hx-toggle-button-border-color: transparent;
   }
 
   .button--tertiary:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   .button--ghost {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);
     --hx-toggle-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   .button--outline {
     --hx-toggle-button-bg: transparent;
-    --hx-toggle-button-color: var(--hx-color-neutral-900, #0f172a);
-    --hx-toggle-button-border-color: var(--hx-color-neutral-300, #cbd5e1);
+    --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);
+    --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);
   }
 
   .button--outline:hover {
-    --hx-toggle-button-bg: var(--hx-color-neutral-50, #f8fafc);
+    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   /* ─── Pressed State ─── */
@@ -131,9 +138,16 @@ const f = b`
   /*
    * Primary: already uses solid primary bg; pressed deepens to primary-700
    * to give clear visual feedback without introducing a new color.
+   *
+   * AA fix: text.on-primary (= neutral-900 #0D1825) on primary-700 (#0F6363)
+   * = 2.54:1 — fails AA. Pin fg at neutral-0 for the darker pressed fill
+   * (neutral-0 on primary-700 = 7.03:1, AAA pass). Mirrors hx-toast
+   * precedent (commit 300e21ab0) and hx-button hover treatment.
+   * Note: secondary.pressed below uses primary-500 and stays at 5.20:1 —
+   * leave it alone.
    */
   .button--primary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #0f6363));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-neutral-0, #ffffff)
@@ -146,44 +160,47 @@ const f = b`
    * so the state change is immediately legible.
    */
   .button--secondary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #2563eb));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-neutral-0, #ffffff)
+      var(--hx-color-text-on-primary, #ffffff)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #2563eb);
+    --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
   }
 
   /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
   .button--tertiary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1e40af)
+      var(--hx-color-primary-700, #0f6363)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
-    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
+    --hx-toggle-button-border-color: var(--hx-color-primary-400, #6ab1b1);
+    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #6ab1b1);
   }
 
   /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
   .button--ghost.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1e40af)
+      var(--hx-color-primary-700, #0f6363)
     );
     --hx-toggle-button-border-color: transparent;
   }
 
   /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */
   .button--outline.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-neutral-100, #f1f5f9));
+    --hx-toggle-button-bg: var(
+      --hx-toggle-button-pressed-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-neutral-900, #0f172a)
+      var(--hx-color-text-primary, #0d1825)
     );
-    --hx-toggle-button-border-color: var(--hx-color-neutral-500, #64748b);
-    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #64748b);
+    --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);
+    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);
   }
 
   /* ─── Disabled ─── */
@@ -247,12 +264,12 @@ const f = b`
     }
   }
 `;
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, a, l, n) => {
-  for (var o = n > 1 ? void 0 : n ? m(a, l) : a, i = t.length - 1, h; i >= 0; i--)
-    (h = t[i]) && (o = (n ? h(a, l, o) : h(o)) || o);
-  return n && o && v(a, l, o), o;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, a, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? y(a, i) : a, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (r = (n ? h(a, i, r) : h(r)) || r);
+  return n && r && m(a, i, r), r;
 };
-let e = class extends x {
+let e = class extends f {
   constructor() {
     super(...arguments), this.pressed = !1, this.variant = "secondary", this.size = "md", this.disabled = !1, this.name = void 0, this.value = void 0, this.label = void 0, this.required = !1;
   }
@@ -278,8 +295,8 @@ let e = class extends x {
     if (super.firstUpdated(t), !this.label) {
       const a = this._defaultSlot;
       (a ? a.assignedNodes({ flatten: !0 }).some((n) => {
-        var o;
-        return (o = n.textContent) == null ? void 0 : o.trim();
+        var r;
+        return (r = n.textContent) == null ? void 0 : r.trim();
       }) : !1) || console.warn(
         "[hx-toggle-button] No accessible label found. Set the `label` attribute or provide slot text content for WCAG 4.1.2 compliance."
       );
@@ -352,11 +369,11 @@ let e = class extends x {
     return u`
       <button
         part="button"
-        class=${p(t)}
+        class=${c(t)}
         ?disabled=${this.disabled}
         type="button"
         aria-pressed=${this.pressed ? "true" : "false"}
-        aria-label=${this.label ?? g}
+        aria-label=${this.label ?? d}
         @click=${this._handleClick}
       >
         ${this._renderInner()}
@@ -364,39 +381,39 @@ let e = class extends x {
     `;
   }
 };
-e.styles = [f];
+e.styles = [v, x];
 e.formAssociated = !0;
-r([
-  d("slot:not([name])")
+o([
+  g("slot:not([name])")
 ], e.prototype, "_defaultSlot", 2);
-r([
+o([
   s({ type: Boolean, reflect: !0 })
 ], e.prototype, "pressed", 2);
-r([
+o([
   s({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-r([
+o([
   s({ type: String, reflect: !0, attribute: "hx-size" })
 ], e.prototype, "size", 2);
-r([
+o([
   s({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
-r([
+o([
   s({ type: String })
 ], e.prototype, "name", 2);
-r([
+o([
   s({ type: String })
 ], e.prototype, "value", 2);
-r([
+o([
   s({ type: String })
 ], e.prototype, "label", 2);
-r([
+o([
   s({ type: Boolean, reflect: !0 })
 ], e.prototype, "required", 2);
-e = r([
-  c("hx-toggle-button")
+e = o([
+  p("hx-toggle-button")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-toggle-button-L-uBJr-a.js.map
+//# sourceMappingURL=hx-toggle-button-Dd8clXB4.js.map

package/dist/shared/hx-toggle-button-Dd8clXB4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-toggle-button-Dd8clXB4.js","sources":["../../src/components/hx-toggle-button/hx-toggle-button.styles.ts","../../src/components/hx-toggle-button/hx-toggle-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToggleButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Base Button ─── */\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);\n    border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));\n    color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));\n    font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));\n    line-height: var(--hx-line-height-tight, 1.25);\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    text-decoration: none;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-toggle-button-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  .button:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.\n     min-height uses --hx-touch-target-min to guarantee the interactive area\n     meets the threshold even though the visual size token is smaller. */\n  .button--sm {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    font-size: var(--hx-font-size-md, 1rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);\n    --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /*\n   * secondary/ghost paint primary text on the surface (white). primary-500\n   * (#429797) on white = 3.43:1 — fails AA at body sizes. shift to\n   * primary-600 (#0F7078) = 6.06:1 — AA pass. border keeps primary-500\n   * for the brand affordance (3:1 non-text contrast still met).\n   */\n  .button--secondary {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);\n    --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);\n  }\n\n  .button--secondary:hover {\n    --hx-toggle-button-bg: var(--hx-color-primary-50, #ebf8f8);\n  }\n\n  .button--tertiary {\n    --hx-toggle-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n    --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--tertiary:hover {\n    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n  }\n\n  .button--ghost {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-primary-600, #0f7078);\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n  }\n\n  .button--outline {\n    --hx-toggle-button-bg: transparent;\n    --hx-toggle-button-color: var(--hx-color-text-primary, #0d1825);\n    --hx-toggle-button-border-color: var(--hx-color-border-strong, #8e9c98);\n  }\n\n  .button--outline:hover {\n    --hx-toggle-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n  }\n\n  /* ─── Pressed State ─── */\n\n  /*\n   * Primary: already uses solid primary bg; pressed deepens to primary-700\n   * to give clear visual feedback without introducing a new color.\n   *\n   * AA fix: text.on-primary (= neutral-900 #0D1825) on primary-700 (#0F6363)\n   * = 2.54:1 — fails AA. Pin fg at neutral-0 for the darker pressed fill\n   * (neutral-0 on primary-700 = 7.03:1, AAA pass). Mirrors hx-toast\n   * precedent (commit 300e21ab0) and hx-button hover treatment.\n   * Note: secondary.pressed below uses primary-500 and stays at 5.20:1 —\n   * leave it alone.\n   */\n  .button--primary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #0f6363));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-neutral-0, #ffffff)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /*\n   * Secondary: unpressed is outlined/transparent; pressed fills with primary bg\n   * so the state change is immediately legible.\n   */\n  .button--secondary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-text-on-primary, #ffffff)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);\n  }\n\n  /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */\n  .button--tertiary.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #0f6363)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-primary-400, #6ab1b1);\n    box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #6ab1b1);\n  }\n\n  /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */\n  .button--ghost.button--pressed {\n    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbf0f0));\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-primary-700, #0f6363)\n    );\n    --hx-toggle-button-border-color: transparent;\n  }\n\n  /* Outline pressed: fills with a neutral tint, darkens the border, and adds an inset shadow for WCAG 3:1 non-text contrast. */\n  .button--outline.button--pressed {\n    --hx-toggle-button-bg: var(\n      --hx-toggle-button-pressed-bg,\n      var(--hx-color-surface-sunken, #ebeee9)\n    );\n    --hx-toggle-button-color: var(\n      --hx-toggle-button-pressed-color,\n      var(--hx-color-text-primary, #0d1825)\n    );\n    --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);\n    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Prefix / Suffix / Label ─── */\n\n  .button__prefix,\n  .button__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .button__label {\n    flex: 1 1 auto;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .button {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 2px solid ButtonText;\n    }\n\n    .button:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .button--pressed {\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      box-shadow: none;\n    }\n\n    .button[disabled] {\n      background-color: ButtonFace;\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixToggleButtonStyles } from './hx-toggle-button.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\n\n/** Detail for the hx-toggle event dispatched by hx-toggle-button. */\nexport interface HxToggleDetail {\n  pressed: boolean;\n}\n\n/**\n * A two-state toggle button that communicates a pressed/unpressed status to\n * assistive technology via `aria-pressed`. Supports multiple visual variants\n * and sizes, prefix/suffix slots, full ElementInternals form association, and\n * a distinct pressed visual state for every variant.\n *\n * @summary Two-state toggle button with pressed/unpressed ARIA semantics.\n *\n * @tag hx-toggle-button\n *\n * @slot - Default slot for the button 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 * @fires {CustomEvent<{pressed: boolean}>} hx-toggle - Dispatched when the\n *   toggle state changes. Not dispatched when the button is disabled.\n *\n * @csspart button - The native `<button>` element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n *\n * @cssprop [--hx-toggle-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-toggle-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-toggle-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-toggle-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-toggle-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-toggle-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-toggle-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-toggle-button-pressed-bg=var(--hx-color-primary-500)] - Background when pressed (variant-specific fallback applies).\n * @cssprop [--hx-toggle-button-pressed-color=var(--hx-color-neutral-0)] - Text color when pressed (variant-specific fallback applies).\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-filter-brightness-hover] - CSS filter.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-primary-100] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n */\n@customElement('hx-toggle-button')\nexport class HelixToggleButton extends HelixElement {\n  static override styles = [helixToggleButtonStyles, forcedColorsInteractive];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n\n  // ─── Public Properties ───\n\n  /**\n   * Whether the toggle button is in the pressed state.\n   * Reflected as an attribute so CSS selectors like `:host([pressed])` work.\n   * @attr pressed\n   */\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' = 'secondary';\n\n  /**\n   * Size of the button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the button is disabled. Prevents all interaction and form actions.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Form field name submitted via ElementInternals when the button is pressed.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Form field value submitted via ElementInternals when the button is pressed.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * Accessible label forwarded to the inner `<button>` as `aria-label`.\n   * Required for icon-only toggle buttons where no visible text is present.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  /**\n   * When true, the button must be in the pressed state for the form to be submitted.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  // ─── Form API ───\n\n  /** Returns the ValidityState object. */\n  override get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Returns the current validation message. */\n  override get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Checks whether the button 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  // ─── Lifecycle ───\n\n  override firstUpdated(changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(changedProperties);\n\n    if (!this.label) {\n      const slot = this._defaultSlot;\n      const hasSlotText = slot\n        ? slot.assignedNodes({ flatten: true }).some((n) => n.textContent?.trim())\n        : false;\n      if (!hasSlotText) {\n        console.warn(\n          '[hx-toggle-button] No accessible label found. Set the `label` attribute or provide slot text content for WCAG 4.1.2 compliance.',\n        );\n      }\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('pressed') ||\n      changedProperties.has('value') ||\n      changedProperties.has('required')\n    ) {\n      this._syncFormValue();\n    }\n  }\n\n  protected override _onFormReset(): void {\n    this.pressed = false;\n  }\n\n  protected override _onFormStateRestore(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    this.pressed = typeof state === 'string' && state === 'pressed';\n  }\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this.pressed && this.value !== undefined) {\n      // Pass explicit state 'pressed' so formStateRestoreCallback can reliably detect it.\n      this._internals.setFormValue(this.value, 'pressed');\n    } else {\n      this._internals.setFormValue(null);\n    }\n    this._updateValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.pressed) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        'Please activate this toggle button.',\n        this.shadowRoot?.querySelector<HTMLElement>('[part=\"button\"]') ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.pressed = !this.pressed;\n    this._syncFormValue();\n\n    /**\n     * Dispatched when the toggle state changes.\n     * @event hx-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ pressed: boolean }>('hx-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { pressed: this.pressed },\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderInner() {\n    return html`\n      <span part=\"prefix\" class=\"button__prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span part=\"label\" class=\"button__label\">\n        <slot></slot>\n      </span>\n      <span part=\"suffix\" class=\"button__suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n      'button--pressed': this.pressed,\n    };\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(classes)}\n        ?disabled=${this.disabled}\n        type=\"button\"\n        aria-pressed=${this.pressed ? 'true' : 'false'}\n        aria-label=${this.label ?? nothing}\n        @click=${this._handleClick}\n      >\n        ${this._renderInner()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toggle-button': HelixToggleButton;\n  }\n}\n"],"names":["helixToggleButtonStyles","css","HelixToggleButton","HelixElement","changedProperties","slot","_a","state","_mode","disabled","e","html","classes","classMap","nothing","forcedColorsInteractive","__decorateClass","query","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAA0BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/{hx-tooltip-B_zfKvwc.js → hx-tooltip-nYOv9OLu.js}

@@ -1,7 +1,8 @@
 import { css as g, html as y } from "lit";
 import { property as d, state as b, query as p, customElement as w } from "lit/decorators.js";
-import { H as T } from "./helix-element-BNEYeiys.js";
-import { c as D } from "./id-counter-DuX8vsui.js";
+import { a as T } from "./forced-colors-CTEDFRGa.js";
+import { H as D } from "./helix-element-BNEYeiys.js";
+import { c as C } from "./id-counter-DuX8vsui.js";
 const E = g`
   :host {
     display: inline-block;
@@ -16,8 +17,8 @@ const E = g`
     z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
     max-width: var(--hx-tooltip-max-width, 280px);
     padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f8fafc));
+    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));
+    color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #ffffff));
     font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
     line-height: var(--hx-line-height-normal, 1.5);
@@ -43,7 +44,7 @@ const E = g`
     position: absolute;
     width: var(--hx-tooltip-arrow-size, 8px);
     height: var(--hx-tooltip-arrow-size, 8px);
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
+    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -55,6 +56,7 @@ const E = g`
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     [part='tooltip'] {
@@ -66,15 +68,15 @@ const E = g`
     }
   }
 `;
-var $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? C(e, i) : e, n = t.length - 1, h; n >= 0; n--)
+var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? $(e, i) : e, n = t.length - 1, h; n >= 0; n--)
     (h = t[n]) && (s = (a ? h(e, i, s) : h(s)) || s);
-  return a && s && $(e, i, s), s;
+  return a && s && S(e, i, s), s;
 };
-const S = D("hx-tooltip");
-let o = class extends T {
+const H = C("hx-tooltip");
+let o = class extends D {
   constructor() {
-    super(...arguments), this.placement = "top", this.showDelay = 300, this.hideDelay = 100, this._visible = !1, this._showTimer = null, this._hideTimer = null, this._tooltipId = S(), this._lightDomDescription = null, this._handleKeydown = (t) => {
+    super(...arguments), this.placement = "top", this.showDelay = 300, this.hideDelay = 100, this._visible = !1, this._showTimer = null, this._hideTimer = null, this._tooltipId = H(), this._lightDomDescription = null, this._handleKeydown = (t) => {
       t instanceof KeyboardEvent && t.key === "Escape" && this._visible && (this._clearTimers(), this._hide());
     };
   }
@@ -127,7 +129,7 @@ let o = class extends T {
   async _updatePosition() {
     const t = this._triggerWrapper, e = this._tooltipEl, i = this._arrowEl;
     if (!t || !e || !i) return;
-    const { computePosition: a, flip: s, shift: n, offset: h, arrow: c } = await import("@floating-ui/dom"), { x: m, y: u, placement: _, middlewareData: v } = await a(t, e, {
+    const { computePosition: a, flip: s, shift: n, offset: h, arrow: c } = await import("@floating-ui/dom"), { x: m, y: u, placement: _, middlewareData: f } = await a(t, e, {
       placement: this.placement,
       strategy: "fixed",
       middleware: [h(8), s(), n({ padding: 8 }), c({ element: i })]
@@ -136,12 +138,12 @@ let o = class extends T {
       left: `${m}px`,
       top: `${u}px`
     });
-    const l = v.arrow, f = _.split("-")[0] ?? "top", x = {
+    const l = f.arrow, v = _.split("-")[0] ?? "top", x = {
       top: "bottom",
       right: "left",
       bottom: "top",
       left: "right"
-    }[f] ?? "bottom";
+    }[v] ?? "bottom";
     Object.assign(i.style, {
       left: (l == null ? void 0 : l.x) != null ? `${l.x}px` : "",
       top: (l == null ? void 0 : l.y) != null ? `${l.y}px` : "",
@@ -188,7 +190,7 @@ let o = class extends T {
     `;
   }
 };
-o.styles = [E];
+o.styles = [E, T];
 r([
   d({ type: String, reflect: !0 })
 ], o.prototype, "placement", 2);
@@ -222,4 +224,4 @@ o = r([
 export {
   o as H
 };
-//# sourceMappingURL=hx-tooltip-B_zfKvwc.js.map
+//# sourceMappingURL=hx-tooltip-nYOv9OLu.js.map

package/dist/shared/hx-tooltip-nYOv9OLu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tooltip-nYOv9OLu.js","sources":["../../src/components/hx-tooltip/hx-tooltip.styles.ts","../../src/components/hx-tooltip/hx-tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-tooltip styles.\n *\n * Component-tier tokens with two-level var() fallback:\n *   var(--hx-tooltip-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n *   neutral-0 = #FFFFFF, neutral-900 = #0D1825 (surface-inverse anchor).\n */\nexport const helixTooltipStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='tooltip'] {\n    position: fixed;\n    z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));\n    max-width: var(--hx-tooltip-max-width, 280px);\n    padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));\n    color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #ffffff));\n    font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    box-shadow: var(\n      --hx-tooltip-shadow,\n      var(--hx-shadow-sm, 0 2px 8px var(--hx-overlay-black-20, rgba(0, 0, 0, 0.2)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease)),\n      visibility var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease));\n    overflow-wrap: break-word;\n  }\n\n  [part='tooltip'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-tooltip-arrow-size, 8px);\n    height: var(--hx-tooltip-arrow-size, 8px);\n    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='tooltip'] {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n  @media (forced-colors: active) {\n    [part='tooltip'] {\n      border: 1px solid CanvasText;\n    }\n\n    [part='arrow'] {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\n\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixTooltipStyles } from './hx-tooltip.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\nconst _nextTooltipId = createIdCounter('hx-tooltip');\n\n/**\n * A tooltip that displays contextual help text on hover or focus.\n *\n * @summary Contextual help text and abbreviations with smart positioning.\n *\n * @tag hx-tooltip\n *\n * @slot - Default slot for the trigger element.\n * @slot content - Tooltip content to display.\n *\n * @csspart tooltip - The tooltip container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-tooltip-bg=var(--hx-color-neutral-900)] - Tooltip background color.\n * @cssprop [--hx-tooltip-color=var(--hx-color-neutral-50)] - Tooltip text color.\n * @cssprop [--hx-tooltip-font-size=var(--hx-font-size-xs)] - Tooltip font size.\n * @cssprop [--hx-tooltip-max-width=280px] - Maximum tooltip width.\n * @cssprop [--hx-tooltip-padding] - Tooltip padding.\n * @cssprop [--hx-tooltip-border-radius=var(--hx-border-radius-sm)] - Tooltip border radius.\n * @cssprop [--hx-tooltip-shadow] - Tooltip box shadow.\n * @cssprop [--hx-tooltip-z-index=9999] - Tooltip z-index.\n * @cssprop [--hx-tooltip-transition-duration=0.15s] - Show/hide transition duration.\n * @cssprop [--hx-tooltip-arrow-size=8px] - Size of the arrow indicator.\n *\n * @example\n * ```html\n * <hx-tooltip>\n *   <button>Hover me</button>\n *   <span slot=\"content\">Helpful context here</span>\n * </hx-tooltip>\n * ```\n *\n * @example Drupal/Twig usage\n * ```twig\n * <hx-tooltip>\n *   <button type=\"button\">{{ trigger_label }}</button>\n *   <span slot=\"content\">{{ tooltip_text }}</span>\n * </hx-tooltip>\n * ```\n * @cssprop [--hx-tooltip-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-z-index-tooltip] - Z-index layer.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-shadow-sm] - Box shadow.\n * @cssprop [--hx-overlay-black-20] - Overlay color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n */\n\n@customElement('hx-tooltip')\nexport class HelixTooltip extends HelixElement {\n  static override styles = [helixTooltipStyles, forcedColorsSurface];\n\n  /**\n   * Preferred placement of the tooltip relative to the trigger.\n   * Supports all Floating UI placement values including alignment variants\n   * (e.g. 'top-start', 'bottom-end') and 'auto'.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /**\n   * Delay in milliseconds before the tooltip is shown.\n   * @attr show-delay\n   */\n  @property({ type: Number, attribute: 'show-delay' })\n  showDelay = 300;\n\n  /**\n   * Delay in milliseconds before the tooltip is hidden.\n   * @attr hide-delay\n   */\n  @property({ type: Number, attribute: 'hide-delay' })\n  hideDelay = 100;\n\n  /** @internal */\n  @state() private _visible = false;\n\n  /** @internal */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n  /** @internal */\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** @internal */\n  private readonly _tooltipId = _nextTooltipId();\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('slot[name=\"content\"]') private _contentSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('.trigger-wrapper') private _triggerWrapper!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"tooltip\"]') private _tooltipEl!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"arrow\"]') private _arrowEl!: HTMLElement | null;\n\n  /**\n   * Visually-hidden description element in light DOM.\n   * Necessary because aria-describedby cannot cross Shadow DOM boundaries —\n   * ARIA ID references are scoped to the element's root node. This element\n   * lives in the document scope so the trigger's aria-describedby resolves correctly.\n   * @internal\n   */\n  private _lightDomDescription: HTMLSpanElement | null = null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n    // Re-run ARIA setup on reconnection (firstUpdated does not re-run).\n    // hasUpdated is true after the first update cycle completes.\n    if (this.hasUpdated) {\n      this._setupTriggerAria();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n    this._clearTimers();\n    this._lightDomDescription?.remove();\n    this._lightDomDescription = null;\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\n  // ─── ARIA setup ───\n\n  /** @internal */\n  private _setupTriggerAria(): void {\n    const slot = this._defaultSlot;\n    if (!slot) return;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    // Sync content from the content slot into a visually-hidden light DOM element.\n    // aria-describedby cannot cross Shadow DOM boundaries, so the referenced element\n    // must live in the document scope (light DOM), not inside the shadow root.\n    const contentSlot = this._contentSlot;\n    const contentText =\n      contentSlot\n        ?.assignedElements()\n        .map((el) => el.textContent)\n        .join(' ')\n        .trim() ?? '';\n\n    // Guard for SSR — document is unavailable server-side\n    if (!this._lightDomDescription && typeof document !== 'undefined') {\n      this._lightDomDescription = document.createElement('span');\n      this._lightDomDescription.id = this._tooltipId;\n      // Visually hidden but accessible to screen readers via aria-describedby.\n      // Appended to document.body (not this element) so that the ID is in the\n      // document scope and resolves correctly across shadow DOM boundaries.\n      // Web components must not mutate their own light DOM children.\n      this._lightDomDescription.style.cssText =\n        'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n      document.body.appendChild(this._lightDomDescription);\n    }\n    if (this._lightDomDescription) {\n      this._lightDomDescription.textContent = contentText;\n    }\n\n    if (trigger) {\n      trigger.setAttribute('aria-describedby', this._tooltipId);\n    }\n  }\n\n  // ─── Show/Hide ───\n\n  /** @internal */\n  private _scheduleShow(): void {\n    this._clearTimers();\n    this._showTimer = setTimeout(() => {\n      void this._show();\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  private _scheduleHide(): void {\n    this._clearTimers();\n    this._hideTimer = setTimeout(() => {\n      this._hide();\n    }, this.hideDelay);\n  }\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    this._visible = true;\n    await this.updateComplete;\n    await this._updatePosition();\n  }\n\n  /** @internal */\n  private _hide(): void {\n    this._visible = false;\n  }\n\n  /** @internal */\n  private _clearTimers(): void {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const reference = this._triggerWrapper;\n    const tooltipEl = this._tooltipEl;\n    const arrowEl = this._arrowEl;\n\n    if (!reference || !tooltipEl || !arrowEl) return;\n\n    const { computePosition, flip, shift, offset, arrow } = await import('@floating-ui/dom');\n    const { x, y, placement, middlewareData } = await computePosition(reference, tooltipEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(8), flip(), shift({ padding: 8 }), arrow({ element: arrowEl })],\n    });\n\n    Object.assign(tooltipEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const arrowData = middlewareData.arrow;\n    const basePlacement = placement.split('-')[0] ?? 'top';\n    const oppositeSide: Record<string, string> = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    };\n    const staticSide = oppositeSide[basePlacement] ?? 'bottom';\n\n    // Offset is derived from the arrow element's actual size so that custom\n    // --hx-tooltip-arrow-size values position the arrow correctly.\n    Object.assign(arrowEl.style, {\n      left: arrowData?.x != null ? `${arrowData.x}px` : '',\n      top: arrowData?.y != null ? `${arrowData.y}px` : '',\n      right: '',\n      bottom: '',\n      [staticSide]: `${-(arrowEl.offsetWidth / 2)}px`,\n    });\n  }\n\n  // ─── Events ───\n\n  /** @internal */\n  private _handleKeydown = (e: Event): void => {\n    if (!(e instanceof KeyboardEvent)) return;\n    if (e.key === 'Escape' && this._visible) {\n      this._clearTimers();\n      this._hide();\n    }\n  };\n\n  /**\n   * Handle mouseleave on the trigger wrapper.\n   * Does not schedule hide if keyboard focus is still on the trigger element,\n   * preventing mixed keyboard+mouse interactions from dismissing the tooltip\n   * while the user is still navigating by keyboard.\n   * @internal\n   */\n  private _handleTriggerMouseleave(): void {\n    const slot = this._defaultSlot;\n    const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n    // Guard for SSR — document is unavailable server-side\n    const active = typeof document !== 'undefined' ? document.activeElement : null;\n    if (trigger && (trigger === active || trigger.contains(active))) {\n      return;\n    }\n    this._scheduleHide();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @mouseenter=${this._scheduleShow}\n        @mouseleave=${this._handleTriggerMouseleave}\n        @focusin=${this._scheduleShow}\n        @focusout=${this._scheduleHide}\n      >\n        <slot @slotchange=${this._setupTriggerAria}></slot>\n      </div>\n      <div\n        part=\"tooltip\"\n        id=${this._tooltipId}\n        role=\"tooltip\"\n        aria-hidden=${String(!this._visible)}\n        class=${this._visible ? 'visible' : ''}\n        @mouseenter=${this._clearTimers}\n        @mouseleave=${this._scheduleHide}\n      >\n        <slot name=\"content\" @slotchange=${this._setupTriggerAria}></slot>\n        <div part=\"arrow\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tooltip': HelixTooltip;\n  }\n}\n"],"names":["helixTooltipStyles","css","_nextTooltipId","createIdCounter","HelixTooltip","HelixElement","e","_a","slot","trigger","contentSlot","contentText","el","reference","tooltipEl","arrowEl","computePosition","flip","shift","offset","arrow","x","y","placement","middlewareData","arrowData","basePlacement","staticSide","active","html","forcedColorsSurface","__decorateClass","property","state","query","customElement"],"mappings":";;;;;AAUO,MAAMA,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACFlC,MAAMC,IAAiBC,EAAgB,YAAY;AAyD5C,IAAMC,IAAN,cAA2BC,EAAa;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,YAYiB,OAOjB,KAAA,YAAY,KAOZ,KAAA,YAAY,KAGH,KAAQ,WAAW,IAG5B,KAAQ,aAAmD,MAE3D,KAAQ,aAAmD,MAG3D,KAAiB,aAAaH,EAAA,GAoB9B,KAAQ,uBAA+C,MA0JvD,KAAQ,iBAAiB,CAACI,MAAmB;AAC3C,MAAMA,aAAa,iBACfA,EAAE,QAAQ,YAAY,KAAK,aAC7B,KAAK,aAAA,GACL,KAAK,MAAA;AAAA,IAET;AAAA,EAAA;AAAA;AAAA,EA5JS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,WAAW,KAAK,cAAc,GAGhD,KAAK,cACP,KAAK,kBAAA;AAAA,EAET;AAAA,EAES,uBAA6B;;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,WAAW,KAAK,cAAc,GACvD,KAAK,aAAA,IACLC,IAAA,KAAK,yBAAL,QAAAA,EAA2B,UAC3B,KAAK,uBAAuB;AAAA,EAC9B;AAAA,EAES,eAAqB;AAC5B,SAAK,kBAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAKQ,oBAA0B;AAChC,UAAMC,IAAO,KAAK;AAClB,QAAI,CAACA,EAAM;AACX,UAAMC,IAAUD,EAAK,iBAAA,EAAmB,CAAC,GAKnCE,IAAc,KAAK,cACnBC,KACJD,KAAA,gBAAAA,EACI,mBACD,IAAI,CAACE,MAAOA,EAAG,aACf,KAAK,KACL,WAAU;AAGf,IAAI,CAAC,KAAK,wBAAwB,OAAO,WAAa,QACpD,KAAK,uBAAuB,SAAS,cAAc,MAAM,GACzD,KAAK,qBAAqB,KAAK,KAAK,YAKpC,KAAK,qBAAqB,MAAM,UAC9B,+HACF,SAAS,KAAK,YAAY,KAAK,oBAAoB,IAEjD,KAAK,yBACP,KAAK,qBAAqB,cAAcD,IAGtCF,KACFA,EAAQ,aAAa,oBAAoB,KAAK,UAAU;AAAA,EAE5D;AAAA;AAAA;AAAA,EAKQ,gBAAsB;AAC5B,SAAK,aAAA,GACL,KAAK,aAAa,WAAW,MAAM;AACjC,MAAK,KAAK,MAAA;AAAA,IACZ,GAAG,KAAK,SAAS;AAAA,EACnB;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,SAAK,aAAA,GACL,KAAK,aAAa,WAAW,MAAM;AACjC,WAAK,MAAA;AAAA,IACP,GAAG,KAAK,SAAS;AAAA,EACnB;AAAA;AAAA,EAGA,MAAc,QAAuB;AACnC,SAAK,WAAW,IAChB,MAAM,KAAK,gBACX,MAAM,KAAK,gBAAA;AAAA,EACb;AAAA;AAAA,EAGQ,QAAc;AACpB,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA,EAGQ,eAAqB;AAC3B,IAAI,KAAK,eAAe,SACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa,OAEhB,KAAK,eAAe,SACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa;AAAA,EAEtB;AAAA;AAAA;AAAA,EAKA,MAAc,kBAAiC;AAC7C,UAAMI,IAAY,KAAK,iBACjBC,IAAY,KAAK,YACjBC,IAAU,KAAK;AAErB,QAAI,CAACF,KAAa,CAACC,KAAa,CAACC,EAAS;AAE1C,UAAM,EAAE,iBAAAC,GAAiB,MAAAC,GAAM,OAAAC,GAAO,QAAAC,GAAQ,OAAAC,EAAA,IAAU,MAAM,OAAO,kBAAkB,GACjF,EAAE,GAAAC,GAAG,GAAAC,GAAG,WAAAC,GAAW,gBAAAC,MAAmB,MAAMR,EAAgBH,GAAWC,GAAW;AAAA,MACtF,WAAW,KAAK;AAAA,MAChB,UAAU;AAAA,MACV,YAAY,CAACK,EAAO,CAAC,GAAGF,EAAA,GAAQC,EAAM,EAAE,SAAS,EAAA,CAAG,GAAGE,EAAM,EAAE,SAASL,EAAA,CAAS,CAAC;AAAA,IAAA,CACnF;AAED,WAAO,OAAOD,EAAU,OAAO;AAAA,MAC7B,MAAM,GAAGO,CAAC;AAAA,MACV,KAAK,GAAGC,CAAC;AAAA,IAAA,CACV;AAED,UAAMG,IAAYD,EAAe,OAC3BE,IAAgBH,EAAU,MAAM,GAAG,EAAE,CAAC,KAAK,OAO3CI,IANuC;AAAA,MAC3C,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,EAEwBD,CAAa,KAAK;AAIlD,WAAO,OAAOX,EAAQ,OAAO;AAAA,MAC3B,OAAMU,KAAA,gBAAAA,EAAW,MAAK,OAAO,GAAGA,EAAU,CAAC,OAAO;AAAA,MAClD,MAAKA,KAAA,gBAAAA,EAAW,MAAK,OAAO,GAAGA,EAAU,CAAC,OAAO;AAAA,MACjD,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,CAACE,CAAU,GAAG,GAAG,EAAEZ,EAAQ,cAAc,EAAE;AAAA,IAAA,CAC5C;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBQ,2BAAiC;AACvC,UAAMP,IAAO,KAAK,cACZC,IAAUD,KAAA,gBAAAA,EAAM,mBAAmB,IAEnCoB,IAAS,OAAO,WAAa,MAAc,SAAS,gBAAgB;AAC1E,IAAInB,MAAYA,MAAYmB,KAAUnB,EAAQ,SAASmB,CAAM,MAG7D,KAAK,cAAA;AAAA,EACP;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,sBAGW,KAAK,aAAa;AAAA,sBAClB,KAAK,wBAAwB;AAAA,mBAChC,KAAK,aAAa;AAAA,oBACjB,KAAK,aAAa;AAAA;AAAA,4BAEV,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,aAIrC,KAAK,UAAU;AAAA;AAAA,sBAEN,OAAO,CAAC,KAAK,QAAQ,CAAC;AAAA,gBAC5B,KAAK,WAAW,YAAY,EAAE;AAAA,sBACxB,KAAK,YAAY;AAAA,sBACjB,KAAK,aAAa;AAAA;AAAA,2CAEG,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI/D;AACF;AAlRazB,EACK,SAAS,CAACJ,GAAoB8B,CAAmB;AASjEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAT9B5B,EAUX,WAAA,aAAA,CAAA;AAmBA2B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GA5BxC5B,EA6BX,WAAA,aAAA,CAAA;AAOA2B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAnCxC5B,EAoCX,WAAA,aAAA,CAAA;AAGiB2B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvCI7B,EAuCM,WAAA,YAAA,CAAA;AAWkB2B,EAAA;AAAA,EAAlCG,EAAM,kBAAkB;AAAA,GAlDd9B,EAkDwB,WAAA,gBAAA,CAAA;AAEI2B,EAAA;AAAA,EAAtCG,EAAM,sBAAsB;AAAA,GApDlB9B,EAoD4B,WAAA,gBAAA,CAAA;AAEJ2B,EAAA;AAAA,EAAlCG,EAAM,kBAAkB;AAAA,GAtDd9B,EAsDwB,WAAA,mBAAA,CAAA;AAEA2B,EAAA;AAAA,EAAlCG,EAAM,kBAAkB;AAAA,GAxDd9B,EAwDwB,WAAA,cAAA,CAAA;AAEF2B,EAAA;AAAA,EAAhCG,EAAM,gBAAgB;AAAA,GA1DZ9B,EA0DsB,WAAA,YAAA,CAAA;AA1DtBA,IAAN2B,EAAA;AAAA,EADNI,EAAc,YAAY;AAAA,GACd/B,CAAA;"}