@helixui/library 3.1.0-next.70 → 3.1.0-next.72

package/dist/shared/forced-colors-CTEDFRGa.js

@@ -0,0 +1,117 @@
+import { css as o } from "lit";
+const e = o`
+  @media (forced-colors: active) {
+    button,
+    [part='button'],
+    [part='control'] {
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+
+    button:hover,
+    [part='button']:hover,
+    [part='control']:hover {
+      background-color: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
+    button:focus-visible,
+    [part='button']:focus-visible,
+    [part='control']:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: var(--hx-focus-ring-offset, 2px);
+    }
+
+    :host([disabled]),
+    :host([disabled]) button,
+    :host([disabled]) [part='button'],
+    :host([disabled]) [part='control'],
+    button[disabled],
+    [part='button'][disabled] {
+      color: GrayText;
+      border-color: GrayText;
+      background-color: ButtonFace;
+    }
+  }
+`, r = o`
+  @media (forced-colors: active) {
+    :host {
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+    }
+
+    [part='header'],
+    [part='footer'] {
+      border-color: CanvasText;
+    }
+  }
+`, i = o`
+  @media (forced-colors: active) {
+    input,
+    textarea,
+    select,
+    [part='input'],
+    [part='control'] {
+      background-color: Field;
+      color: FieldText;
+      border: 1px solid FieldText;
+    }
+
+    input::placeholder,
+    textarea::placeholder,
+    [part='input']::placeholder {
+      color: GrayText;
+    }
+
+    input:focus-visible,
+    textarea:focus-visible,
+    select:focus-visible,
+    [part='input']:focus-visible,
+    [part='control']:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: var(--hx-focus-ring-offset, 2px);
+    }
+
+    :host([disabled]),
+    input[disabled],
+    textarea[disabled],
+    select[disabled],
+    [part='input'][disabled] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+`, a = o`
+  @media (forced-colors: active) {
+    a,
+    [part='link'] {
+      color: LinkText;
+    }
+
+    a:visited,
+    [part='link']:visited {
+      color: VisitedText;
+    }
+
+    a:focus-visible,
+    [part='link']:focus-visible {
+      outline: 2px solid LinkText;
+      outline-offset: var(--hx-focus-ring-offset, 2px);
+    }
+
+    a[aria-disabled='true'],
+    [part='link'][aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+`;
+export {
+  r as a,
+  i as b,
+  a as c,
+  e as f
+};
+//# sourceMappingURL=forced-colors-CTEDFRGa.js.map

package/dist/shared/forced-colors-CTEDFRGa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors-CTEDFRGa.js","sources":["../../src/styles/forced-colors.ts"],"sourcesContent":["/**\n * Forced-colors mixins — OS-level Windows High Contrast / `forced-colors: active`\n * system-color deference for hx-* components.\n *\n * Compose into a component's `static styles` array. Each export is already\n * wrapped in `@media (forced-colors: active) { ... }` — consumers do NOT add\n * the media query themselves.\n *\n * Usage:\n *   import { forcedColorsInteractive } from '../../styles/forced-colors.js';\n *   static override styles = [helixButtonStyles, forcedColorsInteractive];\n *\n * System color keywords (Canvas, CanvasText, ButtonFace, ButtonText, Field,\n * FieldText, Highlight, HighlightText, LinkText, VisitedText, GrayText) are\n * the only reliable theming surface in forced-colors mode — browsers strip\n * decorative hex values. Use `forced-color-adjust: none` sparingly — only\n * where default mapping erases critical affordance.\n *\n * ──────────────────────────────────────────────────────────────────────────\n * COMPOSITION RULES — READ BEFORE USING\n *\n * Compose these mixins ONLY when the host component does not define its own\n * `@media (forced-colors: active) { ... }` block in the same `.styles.ts`.\n * Two stylesheets defining overlapping selectors inside the same media query\n * specificity-war: the later-loaded sheet wins, but the result depends on\n * `static styles` array order and is fragile to refactor.\n *\n * Pick exactly one of two approaches per component:\n *   1. Compose a mixin (preferred for the common cases). Don't add your own\n *      forced-colors block.\n *   2. Author a bespoke forced-colors block inline in the component's\n *      `.styles.ts`. Don't compose a mixin.\n *\n * If you genuinely need both (e.g., a niche component-specific affordance\n * the mixin doesn't cover), put the bespoke rules AFTER the mixin in the\n * `static styles` array and scope them to selectors the mixin does not\n * target. Document the divergence inline.\n * ──────────────────────────────────────────────────────────────────────────\n */\nimport { css } from 'lit';\n\n/**\n * INTERACTIVE — buttons, icon-buttons, switches, checkboxes, links-as-buttons.\n *\n * Do NOT use for:\n *   - surface containers (use `forcedColorsSurface`)\n *   - form text fields (use `forcedColorsField`)\n *   - inline links in prose (use `forcedColorsLink`)\n *\n * Matches the precedent set by hx-button: ButtonFace/ButtonText/ButtonText-\n * border, Highlight on focus, GrayText on disabled. Disabled controls keep\n * a ButtonFace background (not CanvasText) so the disabled state is visually\n * differentiable from an active button via GrayText foreground/border alone.\n */\nexport const forcedColorsInteractive = css`\n  @media (forced-colors: active) {\n    button,\n    [part='button'],\n    [part='control'] {\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 1px solid ButtonText;\n    }\n\n    button:hover,\n    [part='button']:hover,\n    [part='control']:hover {\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n    }\n\n    button:focus-visible,\n    [part='button']:focus-visible,\n    [part='control']:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: var(--hx-focus-ring-offset, 2px);\n    }\n\n    :host([disabled]),\n    :host([disabled]) button,\n    :host([disabled]) [part='button'],\n    :host([disabled]) [part='control'],\n    button[disabled],\n    [part='button'][disabled] {\n      color: GrayText;\n      border-color: GrayText;\n      background-color: ButtonFace;\n    }\n  }\n`;\n\n/**\n * SURFACE — cards, dialogs, drawers, popovers, tooltips, toasts, alerts, banners.\n *\n * Do NOT use for:\n *   - interactive controls (use `forcedColorsInteractive`)\n *   - input fields (use `forcedColorsField`)\n *\n * Canvas/CanvasText is the OS-level \"page\" palette — appropriate for\n * container surfaces that hold content but are not themselves actionable.\n * A 1px CanvasText border ensures the container edge is visible against\n * other Canvas-tinted surfaces in HC mode (where multi-tier background\n * elevation is erased).\n */\nexport const forcedColorsSurface = css`\n  @media (forced-colors: active) {\n    :host {\n      background: Canvas;\n      color: CanvasText;\n      border: 1px solid CanvasText;\n    }\n\n    [part='header'],\n    [part='footer'] {\n      border-color: CanvasText;\n    }\n  }\n`;\n\n/**\n * FIELD — text-input, textarea, select, combobox, number-input, date-picker,\n * time-picker, color-picker, file-upload, phi-field.\n *\n * Do NOT use for:\n *   - buttons or action triggers inside the field (compose `forcedColorsInteractive`\n *     separately for those parts)\n *   - inline labels (labels inherit CanvasText from the surrounding surface)\n *\n * Field/FieldText are the OS-level \"input\" palette — distinct from Canvas\n * so users see the tappable/typable region. Highlight outline on focus is\n * additive to the browser's native focus ring, matching hx-text-input\n * precedent. Invalid state does NOT restyle border (forced-colors strips\n * decorative cues); rely on the component's aria-invalid + help-text role\n * for error conveyance.\n */\nexport const forcedColorsField = css`\n  @media (forced-colors: active) {\n    input,\n    textarea,\n    select,\n    [part='input'],\n    [part='control'] {\n      background-color: Field;\n      color: FieldText;\n      border: 1px solid FieldText;\n    }\n\n    input::placeholder,\n    textarea::placeholder,\n    [part='input']::placeholder {\n      color: GrayText;\n    }\n\n    input:focus-visible,\n    textarea:focus-visible,\n    select:focus-visible,\n    [part='input']:focus-visible,\n    [part='control']:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: var(--hx-focus-ring-offset, 2px);\n    }\n\n    :host([disabled]),\n    input[disabled],\n    textarea[disabled],\n    select[disabled],\n    [part='input'][disabled] {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n`;\n\n/**\n * LINK — `<a>` inside hx-link, hx-text, hx-prose, or any component rendering\n * an inline hyperlink.\n *\n * Do NOT use for:\n *   - buttons styled as links (use `forcedColorsInteractive`)\n *   - navigation items acting as buttons (side-nav, top-nav items — those\n *     compose `forcedColorsInteractive`)\n *\n * LinkText / VisitedText are the OS-level hyperlink palette. Browsers draw\n * their own underline in forced-colors mode; the outline on focus-visible\n * is redundant-but-explicit for assistive-tech consistency.\n */\nexport const forcedColorsLink = css`\n  @media (forced-colors: active) {\n    a,\n    [part='link'] {\n      color: LinkText;\n    }\n\n    a:visited,\n    [part='link']:visited {\n      color: VisitedText;\n    }\n\n    a:focus-visible,\n    [part='link']:focus-visible {\n      outline: 2px solid LinkText;\n      outline-offset: var(--hx-focus-ring-offset, 2px);\n    }\n\n    a[aria-disabled='true'],\n    [part='link'][aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n`;\n"],"names":["forcedColorsInteractive","css","forcedColorsSurface","forcedColorsField","forcedColorsLink"],"mappings":";AAsDO,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,GAmD1BC,IAAsBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+BtBE,IAAoBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmDpBG,IAAmBH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/{hx-accordion-Wt52OOZD.js → hx-accordion-cnKg4_la.js}

@@ -1,10 +1,11 @@
-import { css as _, nothing as y, html as C, svg as S } from "lit";
+import { css as _, nothing as y, html as C, svg as I } from "lit";
 import { property as h, customElement as E } from "lit/decorators.js";
 import { classMap as O } from "lit/directives/class-map.js";
-import { H as $ } from "./helix-element-BNEYeiys.js";
+import { f as $ } from "./forced-colors-CTEDFRGa.js";
+import { H as k } from "./helix-element-BNEYeiys.js";
 import { c as D } from "./id-counter-DuX8vsui.js";
 import { d as w } from "./dev-warn-YlwPHjtX.js";
-const I = _`
+const T = _`
   :host {
     display: block;
     font-family: var(--hx-accordion-font-family, var(--hx-font-family-sans, sans-serif));
@@ -22,20 +23,20 @@ const I = _`
       border: 2px solid CanvasText;
     }
   }
-`, T = _`
+`, M = _`
   :host {
     display: block;
   }
 
   .item {
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #d6dbd5));
     font-family: var(--hx-accordion-item-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   :host(:first-child) .item {
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* Remove native details marker */
@@ -49,7 +50,7 @@ const I = _`
     list-style: none;
     font-size: var(--hx-font-size-md, 1rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-accordion-trigger-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-accordion-trigger-color, var(--hx-color-neutral-800, #202b39));
     background-color: var(--hx-accordion-trigger-bg, transparent);
     user-select: none;
     transition: background-color var(--hx-transition-fast, 150ms ease);
@@ -69,12 +70,12 @@ const I = _`
   }
 
   :host(:not([disabled])) .trigger:hover {
-    background-color: var(--hx-accordion-trigger-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-accordion-trigger-hover-bg, var(--hx-color-neutral-50, #f5f8f3));
   }
 
   .trigger:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
     outline-offset: var(--hx-focus-ring-offset, -2px);
   }
 
@@ -87,7 +88,7 @@ const I = _`
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--hx-accordion-icon-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-accordion-icon-color, var(--hx-color-neutral-500, #66787b));
     transition: transform var(--hx-transition-normal, 250ms ease);
   }
 
@@ -117,7 +118,7 @@ const I = _`
     padding: var(--hx-accordion-content-padding, 0 var(--hx-space-4, 1rem) var(--hx-space-4, 1rem));
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-accordion-content-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-accordion-content-color, var(--hx-color-neutral-600, #4a5362));
   }
 
   /* ─── Disabled host ─── */
@@ -182,12 +183,12 @@ const I = _`
     }
   }
 `;
-var M = Object.defineProperty, A = Object.getOwnPropertyDescriptor, m = (e, o, r, t) => {
-  for (var i = t > 1 ? void 0 : t ? A(o, r) : o, n = e.length - 1, a; n >= 0; n--)
+var A = Object.defineProperty, H = Object.getOwnPropertyDescriptor, m = (e, o, r, t) => {
+  for (var i = t > 1 ? void 0 : t ? H(o, r) : o, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (t ? a(o, r, i) : a(i)) || i);
-  return t && i && M(o, r, i), i;
+  return t && i && A(o, r, i), i;
 };
-const H = S`
+const L = I`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -202,10 +203,10 @@ const H = S`
   >
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
-`, L = D("hx-accordion-item");
-let s = class extends $ {
+`, j = D("hx-accordion-item");
+let s = class extends k {
   constructor() {
-    super(...arguments), this._uid = L(), this.expanded = !1, this.disabled = !1, this.level = 3;
+    super(...arguments), this._uid = j(), this.expanded = !1, this.disabled = !1, this.level = 3;
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -277,7 +278,7 @@ let s = class extends $ {
           @keydown=${this._handleKeyDown}
         >
           <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
-          <span part="icon" class="icon">${H}</span>
+          <span part="icon" class="icon">${L}</span>
         </summary>
         <div class="content-wrapper">
           <div class="content-inner">
@@ -297,7 +298,7 @@ let s = class extends $ {
     `;
   }
 };
-s.styles = [T];
+s.styles = [M, $];
 m([
   h({ type: Boolean, reflect: !0 })
 ], s.prototype, "expanded", 2);
@@ -310,12 +311,12 @@ m([
 s = m([
   E("hx-accordion-item")
 ], s);
-var j = Object.defineProperty, z = Object.getOwnPropertyDescriptor, k = (e, o, r, t) => {
-  for (var i = t > 1 ? void 0 : t ? z(o, r) : o, n = e.length - 1, a; n >= 0; n--)
+var z = Object.defineProperty, N = Object.getOwnPropertyDescriptor, S = (e, o, r, t) => {
+  for (var i = t > 1 ? void 0 : t ? N(o, r) : o, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (t ? a(o, r, i) : a(i)) || i);
-  return t && i && j(o, r, i), i;
+  return t && i && z(o, r, i), i;
 };
-let c = class extends $ {
+let c = class extends k {
   constructor() {
     super(...arguments), this.mode = "single", this._mutationObserver = null, this._handleChildExpand = (e) => {
       if (this.mode !== "single") return;
@@ -357,8 +358,8 @@ let c = class extends $ {
           return;
       }
       e.preventDefault();
-      const g = n[d], p = (x = g == null ? void 0 : g.shadowRoot) == null ? void 0 : x.querySelector('[part="trigger"]');
-      p == null || p.focus();
+      const p = n[d], g = (x = p == null ? void 0 : p.shadowRoot) == null ? void 0 : x.querySelector('[part="trigger"]');
+      g == null || g.focus();
     };
   }
   connectedCallback() {
@@ -429,15 +430,15 @@ let c = class extends $ {
     `;
   }
 };
-c.styles = [I];
-k([
+c.styles = [T, $];
+S([
   h({ type: String, reflect: !0 })
 ], c.prototype, "mode", 2);
-c = k([
+c = S([
   E("hx-accordion")
 ], c);
 export {
   c as H,
   s as a
 };
-//# sourceMappingURL=hx-accordion-Wt52OOZD.js.map
+//# sourceMappingURL=hx-accordion-cnKg4_la.js.map

package/dist/shared/hx-accordion-cnKg4_la.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-accordion-cnKg4_la.js","sources":["../../src/components/hx-accordion/hx-accordion.styles.ts","../../src/components/hx-accordion/hx-accordion-item.styles.ts","../../src/components/hx-accordion/hx-accordion-item.ts","../../src/components/hx-accordion/hx-accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAccordionStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-accordion-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  .accordion {\n    border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));\n    overflow: hidden;\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .accordion {\n      border: 2px solid CanvasText;\n    }\n  }\n`;\n","import { css } from 'lit';\n\nexport const helixAccordionItemStyles = css`\n  :host {\n    display: block;\n  }\n\n  .item {\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #d6dbd5));\n    font-family: var(--hx-accordion-item-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  :host(:first-child) .item {\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #d6dbd5));\n  }\n\n  /* Remove native details marker */\n  .trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-accordion-trigger-padding, var(--hx-space-4, 1rem));\n    cursor: pointer;\n    list-style: none;\n    font-size: var(--hx-font-size-md, 1rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-accordion-trigger-color, var(--hx-color-neutral-800, #202b39));\n    background-color: var(--hx-accordion-trigger-bg, transparent);\n    user-select: none;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* Hide the native details disclosure triangle */\n  .trigger::-webkit-details-marker {\n    display: none;\n  }\n\n  .trigger::marker {\n    display: none;\n  }\n\n  .item--disabled .trigger {\n    cursor: not-allowed;\n  }\n\n  :host(:not([disabled])) .trigger:hover {\n    background-color: var(--hx-accordion-trigger-hover-bg, var(--hx-color-neutral-50, #f5f8f3));\n  }\n\n  .trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Icon ─── */\n\n  .icon {\n    flex-shrink: 0;\n    width: var(--hx-accordion-icon-size, var(--hx-size-5, 1.25rem));\n    height: var(--hx-accordion-icon-size, var(--hx-size-5, 1.25rem));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--hx-accordion-icon-color, var(--hx-color-neutral-500, #66787b));\n    transition: transform var(--hx-transition-normal, 250ms ease);\n  }\n\n  .item--expanded .icon {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Content animation via CSS grid trick ─── */\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--hx-transition-normal, 250ms ease);\n    overflow: hidden;\n  }\n\n  .item--expanded .content-wrapper,\n  details[open]:not(.item--expanded) .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    overflow: hidden;\n  }\n\n  .content {\n    padding: var(--hx-accordion-content-padding, 0 var(--hx-space-4, 1rem) var(--hx-space-4, 1rem));\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    color: var(--hx-accordion-content-color, var(--hx-color-neutral-600, #4a5362));\n  }\n\n  /* ─── Disabled host ─── */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .trigger {\n      transition: none;\n    }\n\n    .icon {\n      transition: none;\n    }\n\n    .content-wrapper {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .trigger {\n      forced-color-adjust: none;\n      color: ButtonText;\n      background-color: ButtonFace;\n    }\n\n    .trigger:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: -2px;\n    }\n\n    .item {\n      border-bottom-color: CanvasText;\n    }\n\n    :host(:first-child) .item {\n      border-top-color: CanvasText;\n    }\n\n    .item--disabled .trigger {\n      color: GrayText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    .icon {\n      color: ButtonText;\n    }\n\n    .content {\n      color: CanvasText;\n    }\n  }\n`;\n","import { html, svg, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixAccordionItemStyles } from './hx-accordion-item.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst chevronIcon = svg`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <polyline points=\"6 9 12 15 18 9\"></polyline>\n  </svg>\n`;\n\nconst _nextAccordionItemId = createIdCounter('hx-accordion-item');\n\n/** Detail for hx-expand and hx-collapse events dispatched by hx-accordion-item. */\nexport interface HxAccordionToggleDetail {\n  expanded: boolean;\n  itemId: string;\n}\n\n/**\n * An individual accordion item with collapsible content.\n *\n * @summary Collapsible panel that can be expanded or collapsed.\n *\n * @tag hx-accordion-item\n *\n * @slot trigger - The heading/trigger content for this item.\n * @slot - Default slot for the collapsible body content.\n *\n * @attr {number} level - Heading level (1–6) for the trigger via `role=\"heading\" aria-level`.\n *   Defaults to 3. Set this to match the document outline — e.g., use `level=\"2\"` when the\n *   accordion appears under an `<h1>` landmark.\n *\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-expand - Dispatched when the item is expanded.\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-collapse - Dispatched when the item is collapsed.\n *\n * @csspart item - The outer details element container.\n * @csspart trigger - The summary/trigger element.\n * @csspart content - The collapsible content area.\n * @csspart icon - The expand/collapse icon.\n *\n * @cssprop [--hx-accordion-border-color=var(--hx-color-neutral-200)] - Border color between items.\n * @cssprop [--hx-accordion-trigger-padding=var(--hx-space-4)] - Trigger padding.\n * @cssprop [--hx-accordion-trigger-color=var(--hx-color-neutral-800)] - Trigger text color.\n * @cssprop [--hx-accordion-trigger-bg=transparent] - Trigger background color.\n * @cssprop [--hx-accordion-trigger-hover-bg=var(--hx-color-neutral-50)] - Trigger hover background.\n * @cssprop [--hx-accordion-icon-color=var(--hx-color-neutral-500)] - Icon color.\n * @cssprop [--hx-accordion-content-padding=0 var(--hx-space-4) var(--hx-space-4)] - Content padding.\n * @cssprop [--hx-accordion-content-color=var(--hx-color-neutral-600)] - Content text color.\n */\n@customElement('hx-accordion-item')\nexport class HelixAccordionItem extends HelixElement {\n  static override styles = [helixAccordionItemStyles, forcedColorsInteractive];\n\n  /** @internal */\n  private _uid = _nextAccordionItemId();\n\n  /**\n   * Whether this item is expanded.\n   * @attr expanded\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Whether this item is disabled (cannot be toggled).\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\n   * trigger. Defaults to 3. Set to match the document outline around the\n   * accordion so screen readers surface accordion items in the heading list.\n   * @attr level\n   */\n  @property({ type: Number })\n  level: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.closest('hx-accordion')) {\n      devWarn(\n        'hx-accordion-item',\n        'Used outside hx-accordion. Single-expand coordination will not function.',\n      );\n    }\n  }\n\n  // ─── Slot Handlers ───\n\n  /** @internal */\n  private _handleTriggerSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes({ flatten: true }).length > 0;\n    if (!hasContent) {\n      devWarn(\n        'hx-accordion-item',\n        'trigger slot is empty — provide a visible label for keyboard and screen reader users.',\n      );\n    }\n  }\n\n  // ─── Heading Level Helper ───\n\n  /**\n   * Returns a clamped heading level (1–6) for use as `aria-level` on the\n   * `<summary>` element. Per the WAI-ARIA APG Accordion pattern, the\n   * `<summary>` must be a **direct child** of `<details>` for native\n   * disclosure behaviour to work. Instead of wrapping `<summary>` inside\n   * an `<h3>` (which breaks the native toggle), we apply\n   * `role=\"heading\" aria-level=\"N\"` directly on `<summary>`.\n   */\n  /** @internal */\n  private get _headingLevel(): number {\n    return Math.max(1, Math.min(6, this.level));\n  }\n\n  // ─── Toggle Logic ───\n\n  /** @internal */\n  private _toggle(): void {\n    if (this.disabled) return;\n\n    const willExpand = !this.expanded;\n    this.expanded = willExpand;\n\n    this._dispatchToggleEvent(willExpand);\n  }\n\n  /** @internal */\n  _dispatchToggleEvent(expanded: boolean): void {\n    const detail = { expanded, itemId: this.id || '' };\n    const options = { bubbles: true, composed: true, detail };\n\n    if (expanded) {\n      this.dispatchEvent(\n        new CustomEvent<{ expanded: boolean; itemId: string }>('hx-expand', options),\n      );\n    } else {\n      this.dispatchEvent(\n        new CustomEvent<{ expanded: boolean; itemId: string }>('hx-collapse', options),\n      );\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSummaryClick(e: MouseEvent): void {\n    e.preventDefault();\n    this._toggle();\n  }\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._toggle();\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const itemClasses = {\n      item: true,\n      'item--expanded': this.expanded,\n      'item--disabled': this.disabled,\n    };\n\n    return html`\n      <details part=\"item\" class=${classMap(itemClasses)} ?open=${this.expanded}>\n        <summary\n          id=${`${this._uid}-trigger`}\n          part=\"trigger\"\n          class=\"trigger\"\n          role=\"heading\"\n          aria-level=${this._headingLevel}\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-expanded=${this.expanded ? 'true' : 'false'}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-controls=${`${this._uid}-content`}\n          @click=${this._handleSummaryClick}\n          @keydown=${this._handleKeyDown}\n        >\n          <slot name=\"trigger\" @slotchange=${this._handleTriggerSlotChange}></slot>\n          <span part=\"icon\" class=\"icon\">${chevronIcon}</span>\n        </summary>\n        <div class=\"content-wrapper\">\n          <div class=\"content-inner\">\n            <div\n              id=${`${this._uid}-content`}\n              part=\"content\"\n              class=\"content\"\n              role=\"region\"\n              aria-labelledby=${`${this._uid}-trigger`}\n              aria-hidden=${this.expanded ? nothing : 'true'}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </details>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-accordion-item': HelixAccordionItem;\n  }\n}\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixAccordionStyles } from './hx-accordion.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport './hx-accordion-item.js';\nimport type { HelixAccordionItem } from './hx-accordion-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An accordion container that manages collapsible content sections.\n *\n * @summary Collapsible content sections with single or multi-expand modes.\n *\n * @tag hx-accordion\n *\n * @slot - Default slot for hx-accordion-item elements.\n *\n * @csspart accordion - The outer container wrapping all accordion items.\n *\n * @cssprop [--hx-accordion-border-radius=var(--hx-border-radius-md)] - Outer border radius.\n *\n * @example\n * ```html\n * <hx-accordion mode=\"single\">\n *   <hx-accordion-item>\n *     <span slot=\"trigger\">What is this?</span>\n *     <p>Answer content here.</p>\n *   </hx-accordion-item>\n * </hx-accordion>\n * ```\n * @cssprop [--hx-accordion-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n */\n@customElement('hx-accordion')\nexport class HelixAccordion extends HelixElement {\n  static override styles = [helixAccordionStyles, forcedColorsInteractive];\n\n  /**\n   * Expansion mode: 'single' collapses all other items when one expands.\n   * 'multi' allows multiple items open simultaneously.\n   * @attr mode\n   */\n  @property({ type: String, reflect: true })\n  mode: 'single' | 'multi' = 'single';\n\n  // ─── Lifecycle ───\n\n  /** @internal */\n  private _mutationObserver: MutationObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-expand', this._handleChildExpand);\n    this.addEventListener('keydown', this._handleKeyDown);\n    // Re-enforce single mode when reconnected with pre-expanded items\n    this._enforceSingleMode();\n    // Watch for dynamically added accordion items that may violate single-expand\n    if (typeof MutationObserver !== 'undefined') {\n      this._mutationObserver = new MutationObserver((mutations) => {\n        const hasNewItems = mutations.some((m) =>\n          Array.from(m.addedNodes).some(\n            (n) => n instanceof Element && n.tagName.toLowerCase() === 'hx-accordion-item',\n          ),\n        );\n        if (hasNewItems) {\n          this._enforceSingleMode();\n        }\n      });\n      this._mutationObserver.observe(this, { childList: true });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-expand', this._handleChildExpand);\n    this.removeEventListener('keydown', this._handleKeyDown);\n    this._mutationObserver?.disconnect();\n    this._mutationObserver = null;\n  }\n\n  protected override firstUpdated(): void {\n    this._enforceSingleMode();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('mode')) {\n      const validModes: string[] = ['single', 'multi'];\n      if (!validModes.includes(this.mode)) {\n        devWarn(\n          'hx-accordion',\n          `Invalid mode \"${this.mode}\". Expected one of: ${validModes.join(', ')}. Clamping to \"single\".`,\n        );\n        this.mode = 'single';\n        return;\n      }\n      // When switching from multi to single, enforce single-expand immediately\n      this._enforceSingleMode();\n    }\n  }\n\n  // ─── Single-expand coordination ───\n\n  /** @internal */\n  private _enforceSingleMode(): void {\n    if (this.mode !== 'single') return;\n\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n    let foundExpanded = false;\n\n    items.forEach((item) => {\n      if (item.expanded) {\n        if (foundExpanded) {\n          item.expanded = false;\n        } else {\n          foundExpanded = true;\n        }\n      }\n    });\n  }\n\n  /**\n   * Handles expand events from child accordion items to enforce single-expand mode.\n   * @internal\n   */\n  private _handleChildExpand = (e: Event): void => {\n    if (this.mode !== 'single') return;\n\n    const expandedItem = e.composedPath()[0] as HelixAccordionItem;\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n\n    items.forEach((item) => {\n      if (item !== expandedItem && item.expanded) {\n        item.expanded = false;\n        item._dispatchToggleEvent(false);\n      }\n    });\n  };\n\n  // ─── Arrow key navigation (ARIA APG Accordion pattern) ───\n\n  /**\n   * Handles keyboard navigation between accordion triggers using arrow, Home, and End keys.\n   * @internal\n   */\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    const triggers = this._getTriggers();\n    if (triggers.length === 0) return;\n\n    const activeEl = this.shadowRoot?.activeElement ?? document.activeElement;\n    let currentItem: HelixAccordionItem | null = null;\n\n    const items = Array.from(this.querySelectorAll<HelixAccordionItem>('hx-accordion-item'));\n    for (const item of items) {\n      const summary = item.shadowRoot?.querySelector('[part=\"trigger\"]');\n      if (summary === activeEl || item.shadowRoot?.activeElement === summary) {\n        currentItem = item;\n        break;\n      }\n    }\n\n    if (!currentItem) return;\n\n    const enabledItems = items.filter((item) => !item.disabled);\n    const currentIndex = enabledItems.indexOf(currentItem);\n    if (currentIndex === -1) return;\n\n    let targetIndex = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        targetIndex = (currentIndex + 1) % enabledItems.length;\n        break;\n      case 'ArrowUp':\n        targetIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;\n        break;\n      case 'Home':\n        targetIndex = 0;\n        break;\n      case 'End':\n        targetIndex = enabledItems.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n    const targetItem = enabledItems[targetIndex];\n    const targetSummary = targetItem?.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n    targetSummary?.focus();\n  };\n\n  /** @internal */\n  private _getTriggers(): HTMLElement[] {\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n    const triggers: HTMLElement[] = [];\n    items.forEach((item) => {\n      const summary = item.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n      if (summary) triggers.push(summary);\n    });\n    return triggers;\n  }\n\n  // ─── Slot validation ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target;\n    if (!(slot instanceof HTMLSlotElement)) return;\n    const invalid = slot\n      .assignedElements()\n      .filter((el) => el.tagName.toLowerCase() !== 'hx-accordion-item');\n    if (invalid.length > 0) {\n      devWarn(\n        'hx-accordion',\n        `Default slot expects <hx-accordion-item> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"accordion\" class=\"accordion\">\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-accordion': HelixAccordion;\n  }\n}\n"],"names":["helixAccordionStyles","css","helixAccordionItemStyles","chevronIcon","svg","_nextAccordionItemId","createIdCounter","HelixAccordionItem","HelixElement","willExpand","expanded","options","itemClasses","html","classMap","nothing","forcedColorsInteractive","__decorateClass","property","customElement","HelixAccordion","expandedItem","item","activeEl","_a","currentItem","items","summary","_b","_c","enabledItems","currentIndex","targetIndex","targetItem","targetSummary","_d","mutations","m","n","changedProperties","validModes","devWarn","foundExpanded","triggers","slot","invalid","el"],"mappings":"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"}

package/dist/shared/{hx-action-bar-6UzmViHI.js → hx-action-bar-CitgcpGv.js}

@@ -1,8 +1,9 @@
 import { css as h, html as b } from "lit";
-import { property as c, state as f, customElement as p } from "lit/decorators.js";
-import { d as u } from "./dev-warn-YlwPHjtX.js";
-import { H as v } from "./helix-element-BNEYeiys.js";
-const x = h`
+import { property as c, state as f, customElement as u } from "lit/decorators.js";
+import { f as p } from "./forced-colors-CTEDFRGa.js";
+import { d as v } from "./dev-warn-YlwPHjtX.js";
+import { H as x } from "./helix-element-BNEYeiys.js";
+const m = h`
   :host {
     display: block;
   }
@@ -57,16 +58,16 @@ const x = h`
     background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(
       --hx-action-bar-border,
-      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #e2e8f0)
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)
     );
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Variant: filled ─── */
 
   .base--filled {
-    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f8fafc));
-    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));
+    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Size modifiers ─── */
@@ -134,15 +135,15 @@ const x = h`
     }
   }
 `;
-var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (e, t, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? g(t, i) : t, r = e.length - 1, o; r >= 0; r--)
-    (o = e[r]) && (s = (a ? o(t, i, s) : o(s)) || s);
-  return a && s && m(t, i, s), s;
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (e, t, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? y(t, r) : t, i = e.length - 1, o; i >= 0; i--)
+    (o = e[i]) && (s = (a ? o(t, r, s) : o(s)) || s);
+  return a && s && g(t, r, s), s;
 };
-let n = class extends v {
+let n = class extends x {
   constructor() {
     super(...arguments), this.size = "md", this.variant = "default", this.position = "top", this.accessibleLabel = "", this._ariaLabelAttr = "", this._focusableCache = null, this._hasOverflow = !1, this._handleKeydown = (e) => {
-      var t, i;
+      var t, r;
       if (e.key === "ArrowRight")
         e.preventDefault(), this._moveFocus("next");
       else if (e.key === "ArrowLeft")
@@ -150,11 +151,11 @@ let n = class extends v {
       else if (e.key === "Home") {
         e.preventDefault();
         const a = this._getFocusableItems();
-        a.length && (a.forEach((s, r) => s.setAttribute("tabindex", r === 0 ? "0" : "-1")), (t = a[0]) == null || t.focus());
+        a.length && (a.forEach((s, i) => s.setAttribute("tabindex", i === 0 ? "0" : "-1")), (t = a[0]) == null || t.focus());
       } else if (e.key === "End") {
         e.preventDefault();
         const a = this._getFocusableItems(), s = a.length - 1;
-        a.length && (a.forEach((r, o) => r.setAttribute("tabindex", o === s ? "0" : "-1")), (i = a[s]) == null || i.focus());
+        a.length && (a.forEach((i, o) => i.setAttribute("tabindex", o === s ? "0" : "-1")), (r = a[s]) == null || r.focus());
       }
     };
   }
@@ -169,7 +170,7 @@ let n = class extends v {
   connectedCallback() {
     super.connectedCallback();
     const e = this.getAttribute("size");
-    e !== null && !this.hasAttribute("hx-size") && (this.size = e), this.hasAttribute("role") ? this.getAttribute("role") !== "none" && u(
+    e !== null && !this.hasAttribute("hx-size") && (this.size = e), this.hasAttribute("role") ? this.getAttribute("role") !== "none" && v(
       "hx-action-bar",
       `Setting role="${this.getAttribute("role")}" on the host creates a duplicate toolbar announcement. The shadow DOM already contains role="toolbar". Set role="none" on the host to suppress it.`
     ) : this.setAttribute("role", "none"), this.addEventListener("keydown", this._handleKeydown);
@@ -185,22 +186,22 @@ let n = class extends v {
   _isFocusable(e) {
     if (e.hasAttribute("disabled") || e.disabled === !0) return !1;
     if (e.tabIndex >= 0) return !0;
-    const i = e.tagName.toLowerCase();
-    return i === "button" || i === "input" || i === "select" || i === "textarea";
+    const r = e.tagName.toLowerCase();
+    return r === "button" || r === "input" || r === "select" || r === "textarea";
   }
   /** @internal */
   _getFocusableItems() {
-    var i;
+    var r;
     if (this._focusableCache) return this._focusableCache;
-    const e = ((i = this.shadowRoot) == null ? void 0 : i.querySelectorAll("slot")) ?? [], t = [];
+    const e = ((r = this.shadowRoot) == null ? void 0 : r.querySelectorAll("slot")) ?? [], t = [];
     for (const a of Array.from(e)) {
       const s = a.assignedElements({ flatten: !0 });
-      for (const r of s)
-        if (r instanceof HTMLElement)
-          if (this._isFocusable(r))
-            t.push(r);
+      for (const i of s)
+        if (i instanceof HTMLElement)
+          if (this._isFocusable(i))
+            t.push(i);
           else {
-            const o = r.querySelectorAll("*");
+            const o = i.querySelectorAll("*");
             for (const d of Array.from(o))
               this._isFocusable(d) && t.push(d);
           }
@@ -213,19 +214,19 @@ let n = class extends v {
     this._focusableCache = null;
     const e = this._getFocusableItems();
     if (!e.length) return;
-    const t = e.findIndex((a) => a.getAttribute("tabindex") === "0"), i = t === -1 ? 0 : t;
-    e.forEach((a, s) => a.setAttribute("tabindex", s === i ? "0" : "-1"));
+    const t = e.findIndex((a) => a.getAttribute("tabindex") === "0"), r = t === -1 ? 0 : t;
+    e.forEach((a, s) => a.setAttribute("tabindex", s === r ? "0" : "-1"));
   }
   /** @internal */
   _moveFocus(e) {
-    var r;
+    var i;
     const t = this._getFocusableItems();
     if (!t.length) return;
-    const i = document.activeElement, a = t.indexOf(i);
+    const r = document.activeElement, a = t.indexOf(r);
     let s;
     e === "next" ? s = a < t.length - 1 ? a + 1 : 0 : s = a > 0 ? a - 1 : t.length - 1, t.forEach((o, d) => {
       o.setAttribute("tabindex", d === s ? "0" : "-1");
-    }), (r = t[s]) == null || r.focus();
+    }), (i = t[s]) == null || i.focus();
   }
   // ─── Event Handlers ───
   /** @internal */
@@ -235,14 +236,14 @@ let n = class extends v {
   }
   // ─── Render ───
   render() {
-    const e = this.position === "sticky", t = this.position === "bottom", i = e ? " base--sticky" : t ? " base--bottom" : "";
+    const e = this.position === "sticky", t = this.position === "bottom", r = e ? " base--sticky" : t ? " base--bottom" : "";
     return b`
       <div
         part="base"
         role="toolbar"
         aria-label=${this._effectiveLabel}
         aria-orientation="horizontal"
-        class="base base--${this.size} base--${this.variant}${i}"
+        class="base base--${this.size} base--${this.variant}${r}"
       >
         <div part="start" class="section section--start">
           <slot name="start" @slotchange=${this._handleSlotChange}></slot>
@@ -260,7 +261,7 @@ let n = class extends v {
     `;
   }
 };
-n.styles = [x];
+n.styles = [m, p];
 l([
   c({ type: String, reflect: !0, attribute: "hx-size" })
 ], n.prototype, "size", 2);
@@ -280,9 +281,9 @@ l([
   f()
 ], n.prototype, "_hasOverflow", 2);
 n = l([
-  p("hx-action-bar")
+  u("hx-action-bar")
 ], n);
 export {
   n as H
 };
-//# sourceMappingURL=hx-action-bar-6UzmViHI.js.map
+//# sourceMappingURL=hx-action-bar-CitgcpGv.js.map

package/dist/shared/hx-action-bar-CitgcpGv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-action-bar-CitgcpGv.js","sources":["../../src/components/hx-action-bar/hx-action-bar.styles.ts","../../src/components/hx-action-bar/hx-action-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixActionBarStyles = css`\n  :host {\n    display: block;\n  }\n\n  /* ─── Base ─── */\n\n  .base {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n    background: var(--hx-action-bar-bg, transparent);\n    border: var(--hx-action-bar-border, none);\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Sticky (top) ─── */\n\n  .base--sticky {\n    position: sticky;\n    top: 0;\n    padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));\n    z-index: var(--hx-action-bar-z-index, 10);\n    /*\n     * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container\n     * equal to the bar's rendered height so anchor targets are not hidden behind the bar.\n     * Example: .scroll-container { scroll-padding-top: 2.5rem; }\n     */\n  }\n\n  /* ─── Bottom sticky ─── */\n\n  .base--bottom {\n    position: sticky;\n    bottom: 0;\n    /*\n     * Respect iOS home-indicator safe area on devices with notch/home bar.\n     * Falls back to 0px on devices that do not support env().\n     */\n    padding-bottom: max(\n      var(--hx-action-bar-padding-block-end, 0px),\n      env(safe-area-inset-bottom, 0px)\n    );\n    z-index: var(--hx-action-bar-z-index, 10);\n  }\n\n  /* ─── Variant: outlined ─── */\n\n  .base--outlined {\n    background: var(--hx-action-bar-bg, var(--hx-color-surface-default, #ffffff));\n    border: var(\n      --hx-action-bar-border,\n      var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5)\n    );\n    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));\n  }\n\n  /* ─── Variant: filled ─── */\n\n  .base--filled {\n    background: var(--hx-action-bar-bg, var(--hx-color-surface-raised, #f5f8f3));\n    border-radius: var(--hx-action-bar-border-radius, var(--hx-border-radius-md, 0.375rem));\n  }\n\n  /* ─── Size modifiers ─── */\n\n  .base--sm {\n    padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  .base--md {\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  .base--lg {\n    padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n    gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Sections ─── */\n\n  .section {\n    display: flex;\n    align-items: center;\n    gap: inherit;\n  }\n\n  /*\n   * Equal flex-basis on start and end guarantees the center section is visually centered\n   * within the full bar width, regardless of how wide start and end content are.\n   */\n  .section--start {\n    flex: 1 1 0;\n    justify-content: flex-start;\n  }\n\n  .section--center {\n    flex: 0 0 auto;\n    justify-content: center;\n  }\n\n  .section--end {\n    flex: 1 1 0;\n    justify-content: flex-end;\n  }\n\n  /* ─── Slotted content ─── */\n\n  ::slotted(*) {\n    flex-shrink: 0;\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    /* Outlined variant: border is already present and will be honored by the browser */\n    .base--outlined {\n      border: 1px solid CanvasText;\n    }\n\n    /* Filled variant: background is suppressed — add border to maintain visual separation */\n    .base--filled {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixActionBarStyles } from './hx-action-bar.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n// Re-export size type for external consumers.\nexport type ActionBarSize = 'sm' | 'md' | 'lg';\n\n/**\n * A horizontal toolbar container for grouping related action buttons and controls.\n * Implements the ARIA toolbar pattern with roving tabindex keyboard navigation.\n *\n * @summary Horizontal action bar for grouping related controls.\n *\n * @tag hx-action-bar\n *\n * @slot start - Left-aligned actions.\n * @slot - Center content (default slot).\n * @slot end - Right-aligned actions.\n * @slot overflow - Actions revealed when the bar is constrained for space.\n *\n * @csspart base - The root toolbar container element.\n * @csspart start - The start (left) slot wrapper.\n * @csspart center - The center (default) slot wrapper.\n * @csspart end - The end (right) slot wrapper.\n * @csspart overflow - The overflow slot wrapper (hidden when no overflow content).\n *\n * @cssprop [--hx-action-bar-bg=transparent] - Bar background color (default variant).\n * @cssprop [--hx-action-bar-border=none] - Bar border (default variant).\n * @cssprop [--hx-action-bar-padding=var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)] - Inner padding.\n * @cssprop [--hx-action-bar-gap=var(--hx-space-2,0.5rem)] - Gap between slotted items.\n * @cssprop [--hx-action-bar-z-index=10] - Z-index when sticky or bottom position.\n *\n * @attr {string} accessible-label - Identifies the toolbar to assistive technology.\n *   When multiple toolbars appear on the same page, each must have a unique, descriptive label.\n *   Falls back to the native `aria-label` attribute if not set.\n *\n * @example\n * ```html\n * <hx-action-bar aria-label=\"Patient actions\">\n *   <hx-button slot=\"start\">Save</hx-button>\n *   <hx-button slot=\"end\" variant=\"ghost\">Cancel</hx-button>\n * </hx-action-bar>\n * ```\n * @cssprop [--hx-action-bar-padding-block-start=0px] - Padding.\n * @cssprop [--hx-action-bar-padding-block-end=0px] - Padding.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n */\n@customElement('hx-action-bar')\nexport class HelixActionBar extends HelixElement {\n  static override styles = [helixActionBarStyles, forcedColorsInteractive];\n\n  /**\n   * Size of the action bar — propagated as a data attribute to slotted children.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant controlling the bar background.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'outlined' | 'filled' = 'default';\n\n  /**\n   * Position and sticky behavior of the action bar.\n   * - `top` — normal flow (default)\n   * - `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n   *   scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n   * - `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support\n   * @attr position\n   */\n  @property({ type: String, reflect: true })\n  position: 'top' | 'bottom' | 'sticky' = 'top';\n\n  // The deprecated `sticky` boolean property has been removed in 3.0.0.\n  // Use `position=\"sticky\"` instead.\n\n  /**\n   * Accessible label for the toolbar.\n   * Required when multiple toolbars appear on the same page.\n   *\n   * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n   * The `accessible-label` attribute takes precedence when both are set.\n   *\n   * Previously this was exposed as the `ariaLabel` JS property, which shadowed\n   * the native `HTMLElement.ariaLabel`. That shadowing is removed; use\n   * `accessibleLabel` or the HTML attributes instead.\n   *\n   * @attr accessible-label\n   */\n  @property({ attribute: 'accessible-label' })\n  accessibleLabel: string = '';\n\n  /**\n   * Observed mirror of the host's `aria-label` attribute so Lit re-renders\n   * when consumers set `aria-label` (the standard HTML pattern).\n   * @internal\n   */\n  @property({ attribute: 'aria-label' })\n  private _ariaLabelAttr: string = '';\n\n  /**\n   * Returns the effective label for the toolbar, checking accessible-label first,\n   * then the aria-label attribute, falling back to 'Actions'.\n   * @internal\n   */\n  private get _effectiveLabel(): string {\n    return this.accessibleLabel || this._ariaLabelAttr || 'Actions';\n  }\n\n  /** Cached list of focusable items — invalidated on slot change. */\n  /** @internal */\n  private _focusableCache: HTMLElement[] | null = null;\n\n  /** Whether the overflow slot has assigned content.  * @internal\n   */\n  @state()\n  private _hasOverflow = false;\n\n  // ─── Lifecycle ───\n\n  /** Arrow function field — stable reference for add/removeEventListener. */\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      this._moveFocus('next');\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      this._moveFocus('prev');\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      // Move directly to first item — do NOT call _moveFocus which would visit other items first.\n      const items = this._getFocusableItems();\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n        items[0]?.focus();\n      }\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      const items = this._getFocusableItems();\n      const last = items.length - 1;\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n        items[last]?.focus();\n      }\n    }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-action-bar', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as ActionBarSize;\n    }\n    // Prevent dual aria-label announcement: the host carries the consumer's\n    // aria-label attribute while the inner div[role=\"toolbar\"] receives the\n    // same value. Setting role=\"none\" on the host hides it from the\n    // accessibility tree so only the toolbar is announced.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'none');\n    } else if (this.getAttribute('role') !== 'none') {\n      devWarn(\n        'hx-action-bar',\n        `Setting role=\"${this.getAttribute('role')}\" on the host creates a duplicate toolbar announcement. ` +\n          'The shadow DOM already contains role=\"toolbar\". Set role=\"none\" on the host to suppress it.',\n      );\n    }\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override firstUpdated(): void {\n    // Slot assignments are complete by firstUpdated; initialize roving tabindex\n    // immediately rather than waiting for the async slotchange event.\n    this._initRovingTabindex();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Focusable item discovery ───\n\n  /** @internal */\n  private _isFocusable(el: HTMLElement): boolean {\n    // Check disabled via DOM attribute (native elements) or property (custom elements)\n    if (el.hasAttribute('disabled')) return false;\n    const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n    if (elWithDisabled.disabled === true) return false;\n\n    // Use the IDL tabIndex property — covers both DOM attribute and ElementInternals settings.\n    // Custom elements (e.g. hx-button) that set tabIndex via ElementInternals are discoverable.\n    if (el.tabIndex >= 0) return true;\n\n    const tag = el.tagName.toLowerCase();\n    return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n  }\n\n  /** @internal */\n  private _getFocusableItems(): HTMLElement[] {\n    if (this._focusableCache) return this._focusableCache;\n\n    const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];\n    const items: HTMLElement[] = [];\n\n    for (const slot of Array.from(slots)) {\n      const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      for (const el of assigned) {\n        if (!(el instanceof HTMLElement)) continue;\n        if (this._isFocusable(el)) {\n          // Element is itself focusable — include it and do NOT also recurse into its children\n          // to prevent double-counting compound components (e.g. <a><button>).\n          items.push(el);\n        } else {\n          // Element is a non-focusable wrapper (e.g. <div>, <span>) — find focusable children.\n          const descendants = el.querySelectorAll<HTMLElement>('*');\n          for (const d of Array.from(descendants)) {\n            if (this._isFocusable(d)) {\n              items.push(d);\n            }\n          }\n        }\n      }\n    }\n\n    this._focusableCache = items;\n    return items;\n  }\n\n  // ─── Roving tabindex helpers ───\n\n  /** @internal */\n  private _initRovingTabindex(): void {\n    this._focusableCache = null; // invalidate cache on slot change\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n    // Find the currently active item. If none exists (e.g. first render or active item was\n    // removed), fall back to index 0. Then set ALL items explicitly so newly added items and\n    // items whose tabindex changed externally are always in a correct state.\n    const activeIndex = items.findIndex((el) => el.getAttribute('tabindex') === '0');\n    const targetIndex = activeIndex === -1 ? 0 : activeIndex;\n    items.forEach((el, i) => el.setAttribute('tabindex', i === targetIndex ? '0' : '-1'));\n  }\n\n  /** @internal */\n  private _moveFocus(direction: 'next' | 'prev'): void {\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n\n    const focused = document.activeElement as HTMLElement | null;\n    const currentIndex = items.indexOf(focused as HTMLElement);\n\n    let nextIndex: number;\n    if (direction === 'next') {\n      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n    } else {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n    }\n\n    items.forEach((el, i) => {\n      el.setAttribute('tabindex', i === nextIndex ? '0' : '-1');\n    });\n\n    items[nextIndex]?.focus();\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    if (slot.name === 'overflow') {\n      this._hasOverflow = slot.assignedElements({ flatten: true }).length > 0;\n    }\n    this._initRovingTabindex();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isSticky = this.position === 'sticky';\n    const isBottom = this.position === 'bottom';\n    const positionClass = isSticky ? ' base--sticky' : isBottom ? ' base--bottom' : '';\n\n    return html`\n      <div\n        part=\"base\"\n        role=\"toolbar\"\n        aria-label=${this._effectiveLabel}\n        aria-orientation=\"horizontal\"\n        class=\"base base--${this.size} base--${this.variant}${positionClass}\"\n      >\n        <div part=\"start\" class=\"section section--start\">\n          <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"center\" class=\"section section--center\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"end\" class=\"section section--end\">\n          <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"overflow\" class=\"section section--overflow\" ?hidden=${!this._hasOverflow}>\n          <slot name=\"overflow\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-action-bar': HelixActionBar;\n  }\n}\n"],"names":["helixActionBarStyles","css","HelixActionBar","HelixElement","items","el","_a","last","i","_b","legacySize","devWarn","tag","slots","slot","assigned","descendants","activeIndex","targetIndex","direction","focused","currentIndex","nextIndex","isSticky","isBottom","positionClass","html","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":"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"}