@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/{hx-split-button-CHGy4FUc.js → hx-split-button-BA7P_ly5.js}

@@ -1,8 +1,8 @@
-import { css as v, LitElement as x, nothing as d, html as c } from "lit";
-import { query as m, state as g, property as u, customElement as f } from "lit/decorators.js";
+import { css as m, LitElement as v, nothing as x, html as d } from "lit";
+import { query as c, state as g, property as l, customElement as f } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
 import { tokenStyles as _ } from "@helixui/tokens/lit";
-const y = v`
+const y = m`
   :host {
     display: inline-block;
     position: relative;
@@ -29,7 +29,7 @@ const y = v`
     justify-content: center;
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
-    border-right: none;
+    border-inline-end: none;
     border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));
     background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));
@@ -52,7 +52,10 @@ const y = v`
 
   .split-button__primary:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-split-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
     position: relative;
@@ -78,7 +81,7 @@ const y = v`
     justify-content: center;
     flex-shrink: 0;
     border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);
-    border-left: var(--hx-border-width-thin, 1px) solid
+    border-inline-start: var(--hx-border-width-thin, 1px) solid
       var(--hx-split-button-divider-color, var(--hx-color-primary-400, #3b82f6));
     border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))
       var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
@@ -94,7 +97,10 @@ const y = v`
 
   .split-button__trigger:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-split-button-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-split-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     z-index: 1;
     position: relative;
@@ -284,7 +290,7 @@ const y = v`
       0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))
     );
     padding: var(--hx-space-1, 0.25rem);
-    z-index: var(--hx-z-index-dropdown, 200);
+    z-index: var(--hx-z-index-dropdown, 1000);
   }
 
   .split-button__menu--open {
@@ -307,13 +313,13 @@ const y = v`
   }
 `;
 var w = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (t, r, e, s) => {
-  for (var o = s > 1 ? void 0 : s ? k(r, e) : r, a = t.length - 1, l; a >= 0; a--)
-    (l = t[a]) && (o = (s ? l(r, e, o) : l(o)) || o);
+  for (var o = s > 1 ? void 0 : s ? k(r, e) : r, a = t.length - 1, u; a >= 0; a--)
+    (u = t[a]) && (o = (s ? u(r, e, o) : u(o)) || o);
   return s && o && w(r, e, o), o;
 };
-let M = 0, i = class extends x {
+let M = 0, i = class extends v {
   constructor() {
-    super(...arguments), this._open = !1, this.variant = "primary", this.size = "md", this.disabled = !1, this.label = void 0, this.triggerLabel = "More actions", this.menuLabel = "Secondary actions", this._menuId = `hx-split-button-menu-${++M}`, this._handleOutsideClick = (t) => {
+    super(...arguments), this._open = !1, this.variant = "primary", this.size = "md", this.disabled = !1, this.label = void 0, this.ariaLabel = "", this.labelTrigger = "More actions", this.labelMenu = "Secondary actions", this._menuId = `hx-split-button-menu-${++M}`, this._handleOutsideClick = (t) => {
       if (!this._open) return;
       const r = t.target;
       !this.contains(r) && r !== this && this._closeMenu();
@@ -329,6 +335,7 @@ let M = 0, i = class extends x {
     super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), document.removeEventListener("keydown", this._handleDocumentKeydown);
   }
   // ─── Primary Button Handlers ───
+  /** @internal */
   _handlePrimaryClick(t) {
     if (this.disabled) {
       t.preventDefault(), t.stopPropagation();
@@ -342,10 +349,12 @@ let M = 0, i = class extends x {
       })
     );
   }
+  /** @internal */
   _handlePrimaryKeydown(t) {
     this.disabled || t.key === "ArrowDown" && (t.preventDefault(), this._openMenu());
   }
   // ─── Trigger Button Handlers ───
+  /** @internal */
   _handleTriggerClick(t) {
     if (this.disabled) {
       t.preventDefault(), t.stopPropagation();
@@ -353,12 +362,14 @@ let M = 0, i = class extends x {
     }
     t.stopPropagation(), this._toggleMenu();
   }
+  /** @internal */
   _handleTriggerKeydown(t) {
     this.disabled || t.key === "ArrowDown" && (t.preventDefault(), this._openMenu());
   }
   // ─── Menu Key Navigation ───
+  /** @internal */
   _handleMenuKeydown(t) {
-    var s, o, a, l, b;
+    var s, o, a, u, b;
     const r = this._getMenuItems();
     if (r.length === 0) return;
     const e = r.findIndex((p) => p === document.activeElement);
@@ -380,7 +391,7 @@ let M = 0, i = class extends x {
         break;
       }
       case "Home": {
-        t.preventDefault(), (l = r[0]) == null || l.focus();
+        t.preventDefault(), (u = r[0]) == null || u.focus();
         break;
       }
       case "End": {
@@ -390,8 +401,10 @@ let M = 0, i = class extends x {
     }
   }
   // ─── Menu Item Selection ───
+  /** @internal */
   _handleMenuItemSelect(t) {
     var o, a;
+    if (!(t instanceof CustomEvent)) return;
     const r = t;
     this._closeMenu(), (o = this._triggerButton) == null || o.focus();
     const e = r.detail.item, s = ((a = e == null ? void 0 : e.textContent) == null ? void 0 : a.trim()) ?? "";
@@ -404,6 +417,7 @@ let M = 0, i = class extends x {
     );
   }
   // ─── Menu Helpers ───
+  /** @internal */
   _openMenu() {
     this._open || (this._open = !0, this.updateComplete.then(() => {
       var r;
@@ -411,9 +425,11 @@ let M = 0, i = class extends x {
     }).catch(() => {
     }));
   }
+  /** @internal */
   _closeMenu() {
     this._open = !1;
   }
+  /** @internal */
   _toggleMenu() {
     this._open ? this._closeMenu() : this._openMenu();
   }
@@ -423,6 +439,7 @@ let M = 0, i = class extends x {
    * .focus() on hosts works correctly. document.activeElement returns the host
    * element when the inner shadow element has focus, enabling correct index tracking.
    */
+  /** @internal */
   _getMenuItems() {
     var r;
     const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="menu"]');
@@ -443,7 +460,7 @@ let M = 0, i = class extends x {
       "split-button__chevron": !0,
       "split-button__chevron--open": this._open
     };
-    return c`
+    return d`
       <div class=${h(t)}>
         <!-- Primary action button -->
         <button
@@ -451,11 +468,11 @@ let M = 0, i = class extends x {
           class="split-button__primary"
           ?disabled=${this.disabled}
           type="button"
-          aria-label=${this.ariaLabel ?? (this.label || d)}
+          aria-label=${this.ariaLabel ?? (this.label || x)}
           @click=${this._handlePrimaryClick}
           @keydown=${this._handlePrimaryKeydown}
         >
-          ${this.label !== void 0 ? this.label : c`<slot></slot>`}
+          ${this.label !== void 0 ? this.label : d`<slot></slot>`}
         </button>
 
         <!-- Dropdown trigger button -->
@@ -464,9 +481,9 @@ let M = 0, i = class extends x {
           class="split-button__trigger"
           ?disabled=${this.disabled}
           aria-haspopup="menu"
-          aria-expanded=${this._open ? "true" : d}
+          aria-expanded=${this._open ? "true" : "false"}
           aria-controls=${this._menuId}
-          aria-label=${this.triggerLabel}
+          aria-label=${this.labelTrigger}
           type="button"
           @click=${this._handleTriggerClick}
           @keydown=${this._handleTriggerKeydown}
@@ -496,7 +513,7 @@ let M = 0, i = class extends x {
           id=${this._menuId}
           class=${h(r)}
           role="menu"
-          aria-label=${this.menuLabel}
+          aria-label=${this.labelMenu}
           @keydown=${this._handleMenuKeydown}
           @hx-item-select=${this._handleMenuItemSelect}
         >
@@ -508,36 +525,39 @@ let M = 0, i = class extends x {
 };
 i.styles = [_, y];
 n([
-  m(".split-button__menu")
+  c(".split-button__menu")
 ], i.prototype, "_menuPanel", 2);
 n([
-  m(".split-button__trigger")
+  c(".split-button__trigger")
 ], i.prototype, "_triggerButton", 2);
 n([
   g()
 ], i.prototype, "_open", 2);
 n([
-  u({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], i.prototype, "variant", 2);
 n([
-  u({ type: String, reflect: !0, attribute: "hx-size" })
+  l({ type: String, reflect: !0, attribute: "hx-size" })
 ], i.prototype, "size", 2);
 n([
-  u({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled", 2);
 n([
-  u({ type: String })
+  l({ type: String })
 ], i.prototype, "label", 2);
 n([
-  u({ type: String, attribute: "trigger-label" })
-], i.prototype, "triggerLabel", 2);
+  l({ type: String, attribute: "aria-label" })
+], i.prototype, "ariaLabel", 2);
 n([
-  u({ type: String, attribute: "menu-label" })
-], i.prototype, "menuLabel", 2);
+  l({ type: String, attribute: "label-trigger" })
+], i.prototype, "labelTrigger", 2);
+n([
+  l({ type: String, attribute: "label-menu" })
+], i.prototype, "labelMenu", 2);
 i = n([
   f("hx-split-button")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-split-button-CHGy4FUc.js.map
+//# sourceMappingURL=hx-split-button-BA7P_ly5.js.map

package/dist/shared/hx-split-button-BA7P_ly5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-split-button-BA7P_ly5.js","sources":["../../src/components/hx-split-button/hx-split-button.styles.ts","../../src/components/hx-split-button/hx-split-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitButtonStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Container ─── */\n\n  .split-button {\n    display: inline-flex;\n    align-items: stretch;\n    position: relative;\n  }\n\n  /* ─── Primary Button ─── */\n\n  .split-button__primary {\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-split-button-border-color, transparent);\n    border-inline-end: none;\n    border-radius: var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0\n      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-split-button-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-split-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    flex: 1 1 auto;\n  }\n\n  .split-button__primary:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-split-button-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    z-index: 1;\n    position: relative;\n  }\n\n  .split-button__primary:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .split-button__primary:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  .split-button__primary[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Trigger Button ─── */\n\n  .split-button__trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-split-button-border-color, transparent);\n    border-inline-start: var(--hx-border-width-thin, 1px) solid\n      var(--hx-split-button-divider-color, var(--hx-color-primary-400, #3b82f6));\n    border-radius: 0 var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem))\n      var(--hx-split-button-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;\n    background-color: var(--hx-split-button-bg, var(--hx-color-primary-500, #2563eb));\n    color: var(--hx-split-button-color, var(--hx-color-neutral-0, #ffffff));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .split-button__trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-split-button-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    z-index: 1;\n    position: relative;\n  }\n\n  .split-button__trigger:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .split-button__trigger:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  .split-button__trigger[disabled] {\n    cursor: not-allowed;\n  }\n\n  /* ─── Trigger Icon ─── */\n\n  .split-button__chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .split-button__chevron--open {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* sm */\n  .split-button--sm .split-button__primary {\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-size-8, 2rem);\n  }\n\n  .split-button--sm .split-button__trigger {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-size-8, 2rem);\n  }\n\n  /* md */\n  .split-button--md .split-button__primary {\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  .split-button--md .split-button__trigger {\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    min-height: var(--hx-size-10, 2.5rem);\n  }\n\n  /* lg */\n  .split-button--lg .split-button__primary {\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  .split-button--lg .split-button__trigger {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    min-height: var(--hx-size-12, 3rem);\n  }\n\n  /* ─── Variant: primary ─── */\n\n  .split-button--primary .split-button__primary,\n  .split-button--primary .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-primary-400, #3b82f6);\n  }\n\n  /* ─── Variant: secondary ─── */\n\n  .split-button--secondary .split-button__primary,\n  .split-button--secondary .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-border-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-divider-color: var(--hx-color-primary-300, #93c5fd);\n  }\n\n  .split-button--secondary .split-button__primary:hover,\n  .split-button--secondary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-primary-50, #eff6ff);\n    filter: none;\n  }\n\n  /* ─── Variant: tertiary ─── */\n\n  .split-button--tertiary .split-button__primary,\n  .split-button--tertiary .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .split-button--tertiary .split-button__primary:hover,\n  .split-button--tertiary .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-200, #e2e8f0);\n    filter: none;\n  }\n\n  /* ─── Variant: danger ─── */\n\n  .split-button--danger .split-button__primary,\n  .split-button--danger .split-button__trigger {\n    --hx-split-button-bg: var(--hx-color-error-500, #dc2626);\n    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-error-400, #f87171);\n  }\n\n  .split-button--danger .split-button__primary:hover,\n  .split-button--danger .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-error-600, #b91c1c);\n    filter: none;\n  }\n\n  /* ─── Variant: ghost ─── */\n\n  .split-button--ghost .split-button__primary,\n  .split-button--ghost .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-primary-500, #2563eb);\n    --hx-split-button-border-color: transparent;\n    --hx-split-button-divider-color: var(--hx-color-primary-200, #bfdbfe);\n  }\n\n  .split-button--ghost .split-button__primary:hover,\n  .split-button--ghost .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-100, #f1f5f9);\n    filter: none;\n  }\n\n  /* ─── Variant: outline ─── */\n\n  .split-button--outline .split-button__primary,\n  .split-button--outline .split-button__trigger {\n    --hx-split-button-bg: transparent;\n    --hx-split-button-color: var(--hx-color-neutral-900, #0f172a);\n    --hx-split-button-border-color: var(--hx-color-neutral-300, #cbd5e1);\n    --hx-split-button-divider-color: var(--hx-color-neutral-300, #cbd5e1);\n  }\n\n  .split-button--outline .split-button__primary:hover,\n  .split-button--outline .split-button__trigger:hover {\n    --hx-split-button-bg: var(--hx-color-neutral-50, #f8fafc);\n    filter: none;\n  }\n\n  /* ─── Dropdown Menu Panel ─── */\n\n  @keyframes hx-split-button-menu-open {\n    from {\n      opacity: 0;\n      transform: translateY(-4px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .split-button__menu {\n    display: none;\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    inset-inline-end: 0;\n    min-width: 100%;\n    max-height: var(--hx-split-button-menu-max-height, 18rem);\n    overflow-y: auto;\n    background-color: var(--hx-split-button-menu-bg, var(--hx-color-neutral-0, #ffffff));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-split-button-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    border-radius: var(--hx-split-button-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-split-button-menu-shadow,\n      0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),\n      0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))\n    );\n    padding: var(--hx-space-1, 0.25rem);\n    z-index: var(--hx-z-index-dropdown, 1000);\n  }\n\n  .split-button__menu--open {\n    display: block;\n    animation: hx-split-button-menu-open var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .split-button__primary,\n    .split-button__trigger,\n    .split-button__chevron {\n      transition: none;\n    }\n\n    .split-button__menu--open {\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSplitButtonStyles } from './hx-split-button.styles.js';\nimport type { HelixMenuItem } from '../hx-menu/hx-menu-item.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxSplitButtonIdCounter = 0;\n\n/**\n * A split button combining a primary action button with an attached dropdown\n * menu for secondary actions. Implements the ARIA menu button pattern for\n * full keyboard and screen reader support.\n *\n * @summary Primary action button with attached dropdown menu for secondary actions.\n *\n * @tag hx-split-button\n *\n * @slot - Primary button label text.\n * @slot menu - `hx-menu-item` children rendered in the dropdown panel.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n *   the primary button is clicked and is not disabled.\n * @fires {CustomEvent<{value: string; label: string}>} hx-select - Dispatched when\n *   a menu item is selected from the dropdown.\n *\n * @csspart button - The primary action button element.\n * @csspart trigger - The dropdown trigger button element.\n * @csspart menu - The dropdown menu panel.\n *\n * @cssprop [--hx-split-button-menu-max-height=18rem] - Maximum height of the dropdown menu panel before scrolling.\n * @cssprop [--hx-split-button-bg=var(--hx-color-primary-500)] - Background color for both buttons.\n * @cssprop [--hx-split-button-color=var(--hx-color-neutral-0)] - Text/icon color for both buttons.\n * @cssprop [--hx-split-button-border-color=transparent] - Border color.\n * @cssprop [--hx-split-button-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-split-button-divider-color=var(--hx-color-primary-400)] - Color of the divider between primary and trigger.\n * @cssprop [--hx-split-button-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-split-button-font-weight=var(--hx-font-weight-semibold)] - Font weight.\n * @cssprop [--hx-split-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-split-button-menu-bg=var(--hx-color-neutral-0)] - Dropdown menu background.\n * @cssprop [--hx-split-button-menu-border-color=var(--hx-color-neutral-200)] - Dropdown menu border color.\n * @cssprop [--hx-split-button-menu-border-radius=var(--hx-border-radius-md)] - Dropdown menu border radius.\n * @cssprop [--hx-split-button-menu-shadow] - Dropdown menu box shadow.\n */\n@customElement('hx-split-button')\nexport class HelixSplitButton extends LitElement {\n  static override styles = [tokenStyles, helixSplitButtonStyles];\n\n  // ─── Internal References ───\n\n  /**\n   * Reference to the dropdown menu panel element, used for positioning and focus management.\n   * @internal\n   */\n  @query('.split-button__menu')\n  private _menuPanel: HTMLElement | undefined;\n\n  /**\n   * Reference to the dropdown trigger button element, used to return focus after menu closes.\n   * @internal\n   */\n  @query('.split-button__trigger')\n  private _triggerButton: HTMLButtonElement | undefined;\n\n  // ─── Internal State ───\n\n  /**\n   * Tracks whether the dropdown menu is currently open.\n   * @internal\n   */\n  @state() private _open = false;\n\n  // ─── Public Properties ───\n\n  /**\n   * Visual style variant of the split button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n  /**\n   * Size of the split 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 split button is disabled. Both the primary button and the\n   * trigger are disabled when this is true.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Primary button label text. When set, overrides the default slot content.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  /**\n   * Accessible label for the primary action button. Required for icon-only usage\n   * or when the button label alone is insufficient context.\n   * @attr aria-label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = '';\n\n  /**\n   * Accessible label for the dropdown trigger button. Override for localization.\n   * @attr label-trigger\n   */\n  @property({ type: String, attribute: 'label-trigger' })\n  labelTrigger = 'More actions';\n\n  /**\n   * Accessible label for the dropdown menu panel. Override for localization.\n   * @attr label-menu\n   */\n  @property({ type: String, attribute: 'label-menu' })\n  labelMenu = 'Secondary actions';\n\n  // ─── Unique IDs ───\n\n  /**\n   * Stable unique ID for the dropdown menu panel element, used to wire aria-controls on the trigger button.\n   * @internal\n   */\n  private readonly _menuId = `hx-split-button-menu-${++_hxSplitButtonIdCounter}`;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    document.addEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  // ─── Outside-click / document keydown ───\n\n  /** @internal */\n  private readonly _handleOutsideClick = (e: MouseEvent): void => {\n    if (!this._open) return;\n    const target = e.target as Node;\n    if (!this.contains(target) && target !== this) {\n      this._closeMenu();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleDocumentKeydown = (e: KeyboardEvent): void => {\n    if (!this._open) return;\n    if (e.key === 'Tab') {\n      this._closeMenu();\n    }\n  };\n\n  // ─── Primary Button Handlers ───\n\n  /** @internal */\n  private _handlePrimaryClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the primary button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handlePrimaryKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  // ─── Trigger Button Handlers ───\n\n  /** @internal */\n  private _handleTriggerClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    // Stop propagation so _handleOutsideClick does not immediately close.\n    e.stopPropagation();\n    this._toggleMenu();\n  }\n\n  /** @internal */\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  // ─── Menu Key Navigation ───\n\n  /** @internal */\n  private _handleMenuKeydown(e: KeyboardEvent): void {\n    const items = this._getMenuItems();\n    if (items.length === 0) return;\n\n    // document.activeElement returns the hx-menu-item host element when its\n    // inner shadow DOM element has focus, which matches items[] directly.\n    const currentIndex = items.findIndex((item) => item === document.activeElement);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        items[next]?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        items[prev]?.focus();\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this._closeMenu();\n        this._triggerButton?.focus();\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        items[0]?.focus();\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        items[items.length - 1]?.focus();\n        break;\n      }\n    }\n  }\n\n  // ─── Menu Item Selection ───\n\n  /** @internal */\n  private _handleMenuItemSelect(e: Event): void {\n    if (!(e instanceof CustomEvent)) return;\n    const custom = e as CustomEvent<{ item: HelixMenuItem; value: string }>;\n    this._closeMenu();\n    this._triggerButton?.focus();\n\n    const item = custom.detail.item;\n    const label = item?.textContent?.trim() ?? '';\n\n    /**\n     * Dispatched when a menu item is selected.\n     * @event hx-select\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string; label: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value: custom.detail.value, label },\n      }),\n    );\n  }\n\n  // ─── Menu Helpers ───\n\n  /** @internal */\n  private _openMenu(): void {\n    if (this._open) return;\n    this._open = true;\n    // Focus the first enabled menu item after the panel renders\n    void this.updateComplete\n      .then(() => {\n        const items = this._getMenuItems();\n        items[0]?.focus();\n      })\n      .catch(() => undefined);\n  }\n\n  /** @internal */\n  private _closeMenu(): void {\n    this._open = false;\n  }\n\n  /** @internal */\n  private _toggleMenu(): void {\n    if (this._open) {\n      this._closeMenu();\n    } else {\n      this._openMenu();\n    }\n  }\n\n  /**\n   * Returns the enabled hx-menu-item host elements assigned to the `menu` slot.\n   * HelixMenuItem overrides focus() to delegate to its inner element, so calling\n   * .focus() on hosts works correctly. document.activeElement returns the host\n   * element when the inner shadow element has focus, enabling correct index tracking.\n   */\n  /** @internal */\n  private _getMenuItems(): HelixMenuItem[] {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\n    if (!slot) return [];\n\n    return slot\n      .assignedElements({ flatten: true })\n      .filter(\n        (el): el is HelixMenuItem =>\n          el.tagName.toLowerCase() === 'hx-menu-item' && !(el as HelixMenuItem).disabled,\n      );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const containerClasses = {\n      'split-button': true,\n      [`split-button--${this.variant}`]: true,\n      [`split-button--${this.size}`]: true,\n    };\n\n    const menuClasses = {\n      'split-button__menu': true,\n      'split-button__menu--open': this._open,\n    };\n\n    const chevronClasses = {\n      'split-button__chevron': true,\n      'split-button__chevron--open': this._open,\n    };\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <!-- Primary action button -->\n        <button\n          part=\"button\"\n          class=\"split-button__primary\"\n          ?disabled=${this.disabled}\n          type=\"button\"\n          aria-label=${this.ariaLabel ?? (this.label || nothing)}\n          @click=${this._handlePrimaryClick}\n          @keydown=${this._handlePrimaryKeydown}\n        >\n          ${this.label !== undefined ? this.label : html`<slot></slot>`}\n        </button>\n\n        <!-- Dropdown trigger button -->\n        <button\n          part=\"trigger\"\n          class=\"split-button__trigger\"\n          ?disabled=${this.disabled}\n          aria-haspopup=\"menu\"\n          aria-expanded=${this._open ? 'true' : 'false'}\n          aria-controls=${this._menuId}\n          aria-label=${this.labelTrigger}\n          type=\"button\"\n          @click=${this._handleTriggerClick}\n          @keydown=${this._handleTriggerKeydown}\n        >\n          <span class=${classMap(chevronClasses)} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"8\"\n              viewBox=\"0 0 12 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 1.5L6 6.5L11 1.5\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        </button>\n\n        <!-- Dropdown menu panel -->\n        <div\n          part=\"menu\"\n          id=${this._menuId}\n          class=${classMap(menuClasses)}\n          role=\"menu\"\n          aria-label=${this.labelMenu}\n          @keydown=${this._handleMenuKeydown}\n          @hx-item-select=${this._handleMenuItemSelect}\n        >\n          <slot name=\"menu\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-split-button': HelixSplitButton;\n  }\n}\n"],"names":["helixSplitButtonStyles","css","_hxSplitButtonIdCounter","HelixSplitButton","LitElement","e","target","items","currentIndex","item","next","_a","prev","_b","_c","_d","_e","custom","label","slot","el","containerClasses","menuClasses","chevronClasses","html","classMap","nothing","tokenStyles","__decorateClass","query","state","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACMtC,IAAIC,IAA0B,GAsCjBC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAyBI,KAAQ,QAAQ,IASzB,KAAA,UAAiF,WAOjF,KAAA,OAA2B,MAQ3B,KAAA,WAAW,IAOX,KAAA,QAA4B,QAQ5B,KAAS,YAAY,IAOrB,KAAA,eAAe,gBAOf,KAAA,YAAY,qBAQZ,KAAiB,UAAU,wBAAwB,EAAEF,CAAuB,IAmB5E,KAAiB,sBAAsB,CAACG,MAAwB;AAC9D,UAAI,CAAC,KAAK,MAAO;AACjB,YAAMC,IAASD,EAAE;AACjB,MAAI,CAAC,KAAK,SAASC,CAAM,KAAKA,MAAW,QACvC,KAAK,WAAA;AAAA,IAET,GAGA,KAAiB,yBAAyB,CAACD,MAA2B;AACpE,MAAK,KAAK,SACNA,EAAE,QAAQ,SACZ,KAAK,WAAA;AAAA,IAET;AAAA,EAAA;AAAA;AAAA,EA7BS,oBAA0B;AACjC,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,mBAAmB,GAC3D,SAAS,iBAAiB,WAAW,KAAK,sBAAsB;AAAA,EAClE;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,mBAAmB,GAC9D,SAAS,oBAAoB,WAAW,KAAK,sBAAsB;AAAA,EACrE;AAAA;AAAA;AAAA,EAwBQ,oBAAoBA,GAAqB;AAC/C,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAMA,SAAK;AAAA,MACH,IAAI,YAA2C,YAAY;AAAA,QACzD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,eAAeA,EAAA;AAAA,MAAE,CAC5B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,sBAAsBA,GAAwB;AACpD,IAAI,KAAK,YACLA,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACF,KAAK,UAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKQ,oBAAoBA,GAAqB;AAC/C,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,IAAAA,EAAE,gBAAA,GACF,KAAK,YAAA;AAAA,EACP;AAAA;AAAA,EAGQ,sBAAsBA,GAAwB;AACpD,IAAI,KAAK,YACLA,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACF,KAAK,UAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKQ,mBAAmBA,GAAwB;;AACjD,UAAME,IAAQ,KAAK,cAAA;AACnB,QAAIA,EAAM,WAAW,EAAG;AAIxB,UAAMC,IAAeD,EAAM,UAAU,CAACE,MAASA,MAAS,SAAS,aAAa;AAE9E,YAAQJ,EAAE,KAAA;AAAA,MACR,KAAK,aAAa;AAChB,QAAAA,EAAE,eAAA;AACF,cAAMK,IAAOF,IAAeD,EAAM,SAAS,IAAIC,IAAe,IAAI;AAClE,SAAAG,IAAAJ,EAAMG,CAAI,MAAV,QAAAC,EAAa;AACb;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,QAAAN,EAAE,eAAA;AACF,cAAMO,IAAOJ,IAAe,IAAIA,IAAe,IAAID,EAAM,SAAS;AAClE,SAAAM,IAAAN,EAAMK,CAAI,MAAV,QAAAC,EAAa;AACb;AAAA,MACF;AAAA,MACA,KAAK,UAAU;AACb,QAAAR,EAAE,eAAA,GACF,KAAK,WAAA,IACLS,IAAA,KAAK,mBAAL,QAAAA,EAAqB;AACrB;AAAA,MACF;AAAA,MACA,KAAK,QAAQ;AACX,QAAAT,EAAE,eAAA,IACFU,IAAAR,EAAM,CAAC,MAAP,QAAAQ,EAAU;AACV;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,QAAAV,EAAE,eAAA,IACFW,IAAAT,EAAMA,EAAM,SAAS,CAAC,MAAtB,QAAAS,EAAyB;AACzB;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA;AAAA,EAKQ,sBAAsBX,GAAgB;;AAC5C,QAAI,EAAEA,aAAa,aAAc;AACjC,UAAMY,IAASZ;AACf,SAAK,WAAA,IACLM,IAAA,KAAK,mBAAL,QAAAA,EAAqB;AAErB,UAAMF,IAAOQ,EAAO,OAAO,MACrBC,MAAQL,IAAAJ,KAAA,gBAAAA,EAAM,gBAAN,gBAAAI,EAAmB,WAAU;AAM3C,SAAK;AAAA,MACH,IAAI,YAA8C,aAAa;AAAA,QAC7D,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAOI,EAAO,OAAO,OAAO,OAAAC,EAAA;AAAA,MAAM,CAC7C;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKQ,YAAkB;AACxB,IAAI,KAAK,UACT,KAAK,QAAQ,IAER,KAAK,eACP,KAAK,MAAM;;AAEV,OAAAP,IADc,KAAK,cAAA,EACb,CAAC,MAAP,QAAAA,EAAU;AAAA,IACZ,CAAC,EACA,MAAM,MAAA;AAAA,KAAe;AAAA,EAC1B;AAAA;AAAA,EAGQ,aAAmB;AACzB,SAAK,QAAQ;AAAA,EACf;AAAA;AAAA,EAGQ,cAAoB;AAC1B,IAAI,KAAK,QACP,KAAK,WAAA,IAEL,KAAK,UAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASQ,gBAAiC;;AACvC,UAAMQ,KAAOR,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,WAAKQ,IAEEA,EACJ,iBAAiB,EAAE,SAAS,GAAA,CAAM,EAClC;AAAA,MACC,CAACC,MACCA,EAAG,QAAQ,kBAAkB,kBAAkB,CAAEA,EAAqB;AAAA,IAAA,IAN1D,CAAA;AAAA,EAQpB;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAmB;AAAA,MACvB,gBAAgB;AAAA,MAChB,CAAC,iBAAiB,KAAK,OAAO,EAAE,GAAG;AAAA,MACnC,CAAC,iBAAiB,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAc;AAAA,MAClB,sBAAsB;AAAA,MACtB,4BAA4B,KAAK;AAAA,IAAA,GAG7BC,IAAiB;AAAA,MACrB,yBAAyB;AAAA,MACzB,+BAA+B,KAAK;AAAA,IAAA;AAGtC,WAAOC;AAAA,mBACQC,EAASJ,CAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,KAAK,QAAQ;AAAA;AAAA,uBAEZ,KAAK,cAAc,KAAK,SAASK,EAAQ;AAAA,mBAC7C,KAAK,mBAAmB;AAAA,qBACtB,KAAK,qBAAqB;AAAA;AAAA,YAEnC,KAAK,UAAU,SAAY,KAAK,QAAQF,gBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOjD,KAAK,QAAQ;AAAA;AAAA,0BAET,KAAK,QAAQ,SAAS,OAAO;AAAA,0BAC7B,KAAK,OAAO;AAAA,uBACf,KAAK,YAAY;AAAA;AAAA,mBAErB,KAAK,mBAAmB;AAAA,qBACtB,KAAK,qBAAqB;AAAA;AAAA,wBAEvBC,EAASF,CAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAsBjC,KAAK,OAAO;AAAA,kBACTE,EAASH,CAAW,CAAC;AAAA;AAAA,uBAEhB,KAAK,SAAS;AAAA,qBAChB,KAAK,kBAAkB;AAAA,4BAChB,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD;AACF;AArXanB,EACK,SAAS,CAACwB,GAAa3B,CAAsB;AASrD4B,EAAA;AAAA,EADPC,EAAM,qBAAqB;AAAA,GATjB1B,EAUH,WAAA,cAAA,CAAA;AAOAyB,EAAA;AAAA,EADPC,EAAM,wBAAwB;AAAA,GAhBpB1B,EAiBH,WAAA,kBAAA,CAAA;AAQSyB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAzBI3B,EAyBM,WAAA,SAAA,CAAA;AASjByB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjC9B5B,EAkCX,WAAA,WAAA,CAAA;AAOAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAxCpD5B,EAyCX,WAAA,QAAA,CAAA;AAQAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhD/B5B,EAiDX,WAAA,YAAA,CAAA;AAOAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvDf5B,EAwDX,WAAA,SAAA,CAAA;AAQSyB,EAAA;AAAA,EADRG,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GA/DxC5B,EAgEF,WAAA,aAAA,CAAA;AAOTyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAtE3C5B,EAuEX,WAAA,gBAAA,CAAA;AAOAyB,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GA7ExC5B,EA8EX,WAAA,aAAA,CAAA;AA9EWA,IAANyB,EAAA;AAAA,EADNI,EAAc,iBAAiB;AAAA,GACnB7B,CAAA;"}

package/dist/shared/{hx-split-panel-DYtB45Tr.js → hx-split-panel-Bss54UN8.js}

@@ -1,7 +1,8 @@
-import { css as c, LitElement as u, nothing as d, html as h } from "lit";
-import { property as s, customElement as v } from "lit/decorators.js";
-import { tokenStyles as f } from "@helixui/tokens/lit";
-const b = c`
+import { css as d, LitElement as u, nothing as c, html as p } from "lit";
+import { property as r, customElement as v } from "lit/decorators.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+import { tokenStyles as b } from "@helixui/tokens/lit";
+const m = d`
   :host {
     display: flex;
     --_divider-size: var(--hx-split-panel-divider-size, 4px);
@@ -70,7 +71,7 @@ const b = c`
     flex: 1;
     background-color: var(--_divider-color);
     cursor: col-resize;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
     touch-action: none;
     user-select: none;
     -webkit-user-select: none;
@@ -117,12 +118,12 @@ const b = c`
   .collapse-controls {
     position: absolute;
     top: 50%;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 4px;
+    gap: var(--hx-space-1, 0.25rem);
     z-index: 2;
     pointer-events: auto;
   }
@@ -135,17 +136,20 @@ const b = c`
     background: var(--_divider-hover-color);
     border: 2px solid var(--hx-color-neutral-0);
     color: var(--hx-color-neutral-0);
-    width: 20px;
-    height: 20px;
+    width: var(--hx-size-5, 1.25rem);
+    height: var(--hx-size-5, 1.25rem);
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 8px;
+    font-size: var(--hx-split-panel-btn-icon-size, 0.5rem);
     padding: 0;
     line-height: 1;
     flex-shrink: 0;
+    /* WCAG 2.5.5: minimum 44×44px touch target via transparent hit-area */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   .collapse-btn:hover {
@@ -160,25 +164,31 @@ const b = c`
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .divider {
+      transition: none;
+    }
+  }
 `;
-var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, i, n, l) => {
-  for (var r = l > 1 ? void 0 : l ? _(i, n) : i, a = t.length - 1, p; a >= 0; a--)
-    (p = t[a]) && (r = (l ? p(i, n, r) : p(r)) || r);
-  return l && r && x(i, n, r), r;
+var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, i, n, a) => {
+  for (var s = a > 1 ? void 0 : a ? _(i, n) : i, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (s = (a ? h(i, n, s) : h(s)) || s);
+  return a && s && x(i, n, s), s;
 };
 let e = class extends u {
   constructor() {
-    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._onPointerDown = (t) => {
+    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this.resizeLabel = "Resize panels", this.collapseStartLabel = "Collapse start panel", this.collapseEndLabel = "Collapse end panel", this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0, this._onPointerDown = (t) => {
       if (this.disabled) return;
-      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this.position, t.preventDefault();
+      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this.position, this._cachedContainerWidth = this.offsetWidth, this._cachedContainerHeight = this.offsetHeight, t.preventDefault();
     }, this._onPointerMove = (t) => {
       if (!this._dragging) return;
-      const n = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, l = this._getHostSize();
-      if (l === 0) return;
-      const r = n / l * 100;
-      this._setPosition(this._positionAtDragStart + r);
+      const n = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, a = this.orientation === "horizontal" ? this._cachedContainerWidth : this._cachedContainerHeight;
+      if (a === 0) return;
+      const s = n / a * 100;
+      this._setPosition(this._positionAtDragStart + s);
     }, this._onPointerUp = () => {
-      this._dragging = !1;
+      this._dragging = !1, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0;
     }, this._onKeyDown = (t) => {
       if (!this.disabled)
         switch (t.key) {
@@ -211,9 +221,11 @@ let e = class extends u {
       this.collapsed = null;
     };
   }
+  /** @internal */
   _clamp(t) {
     return Math.min(this.max, Math.max(this.min, t));
   }
+  /** @internal */
   _snapToPoint(t) {
     if (!this.snap.length) return t;
     const i = 5;
@@ -221,6 +233,7 @@ let e = class extends u {
       if (Math.abs(t - n) <= i) return n;
     return t;
   }
+  /** @internal */
   _setPosition(t) {
     const i = this._clamp(this._snapToPoint(t));
     i !== this.position && (this.position = i, this.dispatchEvent(
@@ -231,6 +244,7 @@ let e = class extends u {
       })
     ));
   }
+  /** @internal */
   _getHostSize() {
     return this.orientation === "horizontal" ? this.offsetWidth : this.offsetHeight;
   }
@@ -240,19 +254,20 @@ let e = class extends u {
     this.collapsed === "start" ? (i == null && (this._positionBeforeCollapse = this.position), this._setPosition(this.min)) : this.collapsed === "end" ? (i == null && (this._positionBeforeCollapse = this.position), this._setPosition(this.max)) : this.collapsed === null && i !== null && i !== void 0 && this._setPosition(this._positionBeforeCollapse);
   }
   connectedCallback() {
-    super.connectedCallback(), this.positionInPixels !== void 0 && requestAnimationFrame(() => {
+    super.connectedCallback(), this.positionInPixels !== void 0 && typeof requestAnimationFrame < "u" && requestAnimationFrame(() => {
       if (this.positionInPixels !== void 0) {
         const t = this._getHostSize();
         t > 0 && this._setPosition(this.positionInPixels / t * 100);
       }
     });
   }
-  _startPanelStyle() {
-    return this.orientation === "horizontal" ? `width: ${this.position}%;` : `height: ${this.position}%;`;
+  /** @internal */
+  _startPanelStyleMap() {
+    return this.orientation === "horizontal" ? { width: `${this.position}%` } : { height: `${this.position}%` };
   }
   render() {
-    return h`
-      <div part="start" class="panel panel--start" style=${this._startPanelStyle()}>
+    return p`
+      <div part="start" class="panel panel--start" style=${f(this._startPanelStyleMap())}>
         <slot name="start"></slot>
       </div>
       <div class="divider-track">
@@ -260,19 +275,19 @@ let e = class extends u {
           part="divider"
           class="divider"
           role="separator"
-          aria-label="Resize panels"
+          aria-label=${this.resizeLabel}
           aria-orientation=${this.orientation === "horizontal" ? "vertical" : "horizontal"}
           aria-valuenow=${this.position}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
-          aria-disabled=${this.disabled ? "true" : d}
+          aria-disabled=${this.disabled ? "true" : c}
           tabindex=${this.disabled ? "-1" : "0"}
           @pointerdown=${this._onPointerDown}
           @pointermove=${this._onPointerMove}
           @pointerup=${this._onPointerUp}
           @keydown=${this._onKeyDown}
         ></div>
-        ${this.collapsible ? this.collapsed ? h`<div class="collapse-controls">
+        ${this.collapsible ? this.collapsed ? p`<div class="collapse-controls">
                 <button
                   type="button"
                   class="collapse-btn"
@@ -281,11 +296,11 @@ let e = class extends u {
                 >
                   ${this.collapsed === "start" ? "▶" : "◀"}
                 </button>
-              </div>` : h`<div class="collapse-controls">
+              </div>` : p`<div class="collapse-controls">
                 <button
                   type="button"
                   class="collapse-btn"
-                  aria-label="Collapse start panel"
+                  aria-label=${this.collapseStartLabel}
                   @click=${this._collapseStart}
                 >
                   ◀
@@ -293,12 +308,12 @@ let e = class extends u {
                 <button
                   type="button"
                   class="collapse-btn"
-                  aria-label="Collapse end panel"
+                  aria-label=${this.collapseEndLabel}
                   @click=${this._collapseEnd}
                 >
                   ▶
                 </button>
-              </div>` : d}
+              </div>` : c}
       </div>
       <div part="end" class="panel panel--end">
         <slot name="end"></slot>
@@ -306,24 +321,24 @@ let e = class extends u {
     `;
   }
 };
-e.styles = [f, b];
+e.styles = [b, m];
 o([
-  s({ type: Number, reflect: !0 })
+  r({ type: Number, reflect: !0 })
 ], e.prototype, "position", 2);
 o([
-  s({ type: Number, attribute: "position-in-pixels" })
+  r({ type: Number, attribute: "position-in-pixels" })
 ], e.prototype, "positionInPixels", 2);
 o([
-  s({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], e.prototype, "orientation", 2);
 o([
-  s({ type: Number, reflect: !0 })
+  r({ type: Number, reflect: !0 })
 ], e.prototype, "min", 2);
 o([
-  s({ type: Number, reflect: !0 })
+  r({ type: Number, reflect: !0 })
 ], e.prototype, "max", 2);
 o([
-  s({
+  r({
     attribute: "snap",
     converter: {
       fromAttribute(t) {
@@ -342,18 +357,27 @@ o([
   })
 ], e.prototype, "snap", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "collapsible", 2);
 o([
-  s({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], e.prototype, "collapsed", 2);
+o([
+  r({ attribute: "resize-label" })
+], e.prototype, "resizeLabel", 2);
+o([
+  r({ attribute: "collapse-start-label" })
+], e.prototype, "collapseStartLabel", 2);
+o([
+  r({ attribute: "collapse-end-label" })
+], e.prototype, "collapseEndLabel", 2);
 e = o([
   v("hx-split-panel")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-split-panel-DYtB45Tr.js.map
+//# sourceMappingURL=hx-split-panel-Bss54UN8.js.map