@editora/ui-core 0.1.10 → 0.1.12

package/dist/split-button.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-1b301e7f.js"),h=require("./portal-d8d7fbca.js"),f=require("./dismissable-layer-193e3bed.js"),x=require("./positioner-accc6e5f.js");require("./listbox-ef2f708e.js");require("./collection-a2969ad2.js");require("./collection.cjs.js");const m=160,v=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-1b301e7f.js"),g=require("./portal-d8d7fbca.js"),h=require("./dismissable-layer-193e3bed.js"),x=require("./positioner-accc6e5f.js");require("./listbox-ef2f708e.js");require("./collection-a2969ad2.js");require("./collection.cjs.js");const m=160,v=`
   :host {
     --ui-split-button-radius: 12px;
     --ui-split-button-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
@@ -17,11 +17,17 @@
     --ui-split-button-menu-separator: color-mix(in srgb, var(--ui-split-button-menu-color) 10%, transparent);
     --ui-split-button-menu-muted: color-mix(in srgb, var(--ui-split-button-menu-color) 58%, transparent);
     --ui-split-button-menu-danger: var(--ui-color-danger, #dc2626);
-    --ui-split-button-menu-list-gap: 0px;
+    --ui-split-button-menu-option-border: transparent;
+    --ui-split-button-menu-option-border-strong: color-mix(in srgb, var(--ui-split-button-bg) 24%, transparent);
+    --ui-split-button-menu-option-shadow: none;
+    --ui-split-button-menu-affordance-bg: transparent;
+    --ui-split-button-menu-affordance-border: color-mix(in srgb, var(--ui-split-button-menu-color) 24%, transparent);
+    --ui-split-button-menu-affordance-size: 18px;
+    --ui-split-button-menu-list-gap: 2px;
     --ui-split-button-menu-list-padding-top: 2px;
-    --ui-split-button-menu-item-min-height: 42px;
+    --ui-split-button-menu-item-min-height: 44px;
     --ui-split-button-menu-item-radius: 10px;
-    --ui-split-button-menu-item-padding: 10px 12px;
+    --ui-split-button-menu-item-padding: 10px 10px;
     --ui-split-button-focus: var(--ui-color-focus-ring, #2563eb);
     display: inline-flex;
     position: relative;
@@ -115,6 +121,7 @@
     --ui-split-button-menu-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
     --ui-split-button-menu-accent: #eef4ff;
     --ui-split-button-menu-accent-strong: #e0ecff;
+    --ui-split-button-menu-option-border: transparent;
   }
 
   :host([variant="contrast"]) {
@@ -158,12 +165,12 @@
   .menu {
     position: absolute;
     display: grid;
-    gap: 6px;
-    min-width: 220px;
+    gap: 8px;
+    min-width: 240px;
     max-width: min(360px, calc(100vw - 16px));
     max-height: min(420px, calc(100vh - 16px));
     overflow: auto;
-    padding: 10px 8px 8px;
+    padding: 8px;
     border: var(--ui-split-button-menu-border);
     border-radius: calc(var(--ui-split-button-menu-radius) + 2px);
     background: var(--ui-split-button-menu-bg);
@@ -199,9 +206,8 @@
     content: "";
     position: absolute;
     inset: 0 0 auto 0;
-    block-size: 3px;
-    background: linear-gradient(90deg, var(--ui-split-button-bg), color-mix(in srgb, var(--ui-split-button-bg) 68%, white));
-    opacity: 0.96;
+    block-size: 1px;
+    background: color-mix(in srgb, var(--ui-split-button-menu-color) 10%, transparent);
     pointer-events: none;
   }
 
@@ -209,26 +215,30 @@
     display: grid;
     gap: var(--ui-split-button-menu-list-gap);
     padding: var(--ui-split-button-menu-list-padding-top) 0 0;
+    position: relative;
+    z-index: 1;
   }
 
   .menu-header {
     display: grid;
-    gap: 3px;
-    padding: 2px 8px 6px;
+    gap: 4px;
+    padding: 4px 6px 2px;
+    position: relative;
+    z-index: 1;
   }
 
   .menu-heading {
     margin: 0;
     min-inline-size: 0;
     font: 700 13px/1.25 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    letter-spacing: 0.01em;
+    letter-spacing: 0.015em;
     color: var(--ui-split-button-menu-color);
   }
 
   .menu-description {
     margin: 0;
     min-inline-size: 0;
-    font: 500 12px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 12px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     letter-spacing: 0.01em;
     color: var(--ui-split-button-menu-muted);
   }
@@ -238,15 +248,15 @@
     appearance: none;
     -webkit-appearance: none;
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     inline-size: 100%;
     gap: 12px;
-    align-items: center;
+    align-items: start;
     position: relative;
     min-height: var(--ui-split-button-menu-item-min-height);
     margin: 0;
     padding: var(--ui-split-button-menu-item-padding);
-    border: 0;
+    border: 1px solid var(--ui-split-button-menu-option-border);
     border-radius: var(--ui-split-button-menu-item-radius);
     background: transparent;
     color: inherit;
@@ -257,7 +267,14 @@
     letter-spacing: 0.01em;
     cursor: pointer;
     outline: none;
-    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
+    overflow: hidden;
+    isolation: isolate;
+    transition:
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease,
+      transform 140ms ease,
+      box-shadow 140ms ease;
   }
 
   .menu [slot="menuitem"] + [slot="menuitem"],
@@ -265,26 +282,49 @@
     box-shadow: inset 0 1px 0 var(--ui-split-button-menu-separator);
   }
 
-  .menu [slot="menuitem"]::before,
-  .menu [data-menu-item]::before {
+  .menu [data-menu-affordance] {
+    inline-size: var(--ui-split-button-menu-affordance-size);
+    block-size: var(--ui-split-button-menu-affordance-size);
+    display: inline-grid;
+    place-items: center;
+    border-radius: 999px;
+    background: var(--ui-split-button-menu-affordance-bg);
+    border: 1.5px solid var(--ui-split-button-menu-affordance-border);
+    color: color-mix(in srgb, var(--ui-split-button-bg) 82%, var(--ui-split-button-menu-color));
+    transition:
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease,
+      transform 140ms ease;
+  }
+
+  .menu [data-menu-affordance]::before {
     content: "";
-    position: absolute;
-    inset-inline-start: 0;
-    inset-block: 8px;
-    inline-size: 3px;
+    inline-size: 7px;
+    block-size: 7px;
     border-radius: 999px;
-    background: transparent;
-    transition: background-color 140ms ease;
+    background: currentColor;
+    opacity: 0;
+    transition: transform 140ms ease, opacity 140ms ease;
   }
 
-  .menu [slot="menuitem"] > :first-child,
-  .menu [data-menu-item] > :first-child,
+  .menu [slot="menuitem"] > :nth-child(2),
+  .menu [data-menu-item] > :nth-child(2),
   .menu [data-menu-label] {
     display: grid;
-    gap: 2px;
+    gap: 3px;
     min-inline-size: 0;
   }
 
+  .menu [data-menu-text] {
+    padding-block-start: 1px;
+  }
+
+  .menu [slot="menuitem"][data-has-description="false"],
+  .menu [data-menu-item][data-has-description="false"] {
+    align-items: center;
+  }
+
   .menu [data-menu-label] {
     min-inline-size: 0;
     overflow: hidden;
@@ -294,25 +334,26 @@
   }
 
   .menu [data-menu-description] {
+    display: -webkit-box;
     min-inline-size: 0;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font: 500 12px/1.35 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+    font: 500 12px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     color: var(--ui-split-button-menu-muted);
   }
 
-  .menu [slot="menuitem"] > :last-child,
-  .menu [data-menu-item] > :last-child,
   .menu [data-menu-shortcut] {
     justify-self: end;
+    align-self: center;
+    white-space: nowrap;
     font: 600 12px/1 "IBM Plex Mono", "SFMono-Regular", "SF Mono", Consolas, monospace;
     letter-spacing: 0.03em;
     color: var(--ui-split-button-menu-shortcut);
-    padding: 5px 7px;
-    border-radius: 8px;
-    background: color-mix(in srgb, var(--ui-split-button-menu-color) 5%, transparent);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-split-button-menu-color) 10%, transparent);
+    padding: 0;
+    background: none;
+    box-shadow: none;
   }
 
   .menu [slot="menuitem"][data-tone="danger"],
@@ -325,6 +366,11 @@
     color: color-mix(in srgb, var(--ui-split-button-menu-danger) 68%, transparent);
   }
 
+  .menu [slot="menuitem"][data-tone="danger"] [data-menu-affordance],
+  .menu [data-menu-item][data-tone="danger"] [data-menu-affordance] {
+    color: color-mix(in srgb, var(--ui-split-button-menu-danger) 88%, var(--ui-split-button-menu-color));
+  }
+
   .menu [slot="menuitem"][data-active="true"],
   .menu [data-menu-item][data-active="true"],
   .menu [slot="menuitem"]:hover,
@@ -332,7 +378,8 @@
   .menu [slot="menuitem"]:focus-visible,
   .menu [data-menu-item]:focus-visible {
     background: var(--ui-split-button-menu-accent);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-split-button-bg) 16%, transparent);
+    border-color: var(--ui-split-button-menu-option-border-strong);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-split-button-bg) 10%, transparent);
   }
 
   .menu [slot="menuitem"][data-active="true"],
@@ -340,22 +387,46 @@
     background: var(--ui-split-button-menu-accent-strong);
   }
 
-  .menu [slot="menuitem"][data-active="true"]::before,
-  .menu [data-menu-item][data-active="true"]::before,
-  .menu [slot="menuitem"]:hover::before,
-  .menu [data-menu-item]:hover::before,
-  .menu [slot="menuitem"]:focus-visible::before,
-  .menu [data-menu-item]:focus-visible::before {
-    background: var(--ui-split-button-bg);
+  .menu [slot="menuitem"][data-active="true"] [data-menu-affordance],
+  .menu [data-menu-item][data-active="true"] [data-menu-affordance],
+  .menu [slot="menuitem"]:hover [data-menu-affordance],
+  .menu [data-menu-item]:hover [data-menu-affordance],
+  .menu [slot="menuitem"]:focus-visible [data-menu-affordance],
+  .menu [data-menu-item]:focus-visible [data-menu-affordance] {
+    background: color-mix(in srgb, var(--ui-split-button-bg) 10%, transparent);
+    border-color: color-mix(in srgb, var(--ui-split-button-bg) 28%, transparent);
+    color: color-mix(in srgb, var(--ui-split-button-bg) 88%, var(--ui-split-button-menu-color));
   }
 
-  .menu [slot="menuitem"][data-tone="danger"][data-active="true"]::before,
-  .menu [data-menu-item][data-tone="danger"][data-active="true"]::before,
-  .menu [slot="menuitem"][data-tone="danger"]:hover::before,
-  .menu [data-menu-item][data-tone="danger"]:hover::before,
-  .menu [slot="menuitem"][data-tone="danger"]:focus-visible::before,
-  .menu [data-menu-item][data-tone="danger"]:focus-visible::before {
-    background: var(--ui-split-button-menu-danger);
+  .menu [slot="menuitem"][data-active="true"] [data-menu-affordance]::before,
+  .menu [data-menu-item][data-active="true"] [data-menu-affordance]::before,
+  .menu [slot="menuitem"]:hover [data-menu-affordance]::before,
+  .menu [data-menu-item]:hover [data-menu-affordance]::before,
+  .menu [slot="menuitem"]:focus-visible [data-menu-affordance]::before,
+  .menu [data-menu-item]:focus-visible [data-menu-affordance]::before {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .menu [slot="menuitem"][data-tone="danger"][data-active="true"],
+  .menu [data-menu-item][data-tone="danger"][data-active="true"],
+  .menu [slot="menuitem"][data-tone="danger"]:hover,
+  .menu [data-menu-item][data-tone="danger"]:hover,
+  .menu [slot="menuitem"][data-tone="danger"]:focus-visible,
+  .menu [data-menu-item][data-tone="danger"]:focus-visible {
+    border-color: color-mix(in srgb, var(--ui-split-button-menu-danger) 28%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-split-button-menu-danger) 14%, transparent);
+  }
+
+  .menu [slot="menuitem"][data-tone="danger"][data-active="true"] [data-menu-affordance],
+  .menu [data-menu-item][data-tone="danger"][data-active="true"] [data-menu-affordance],
+  .menu [slot="menuitem"][data-tone="danger"]:hover [data-menu-affordance],
+  .menu [data-menu-item][data-tone="danger"]:hover [data-menu-affordance],
+  .menu [slot="menuitem"][data-tone="danger"]:focus-visible [data-menu-affordance],
+  .menu [data-menu-item][data-tone="danger"]:focus-visible [data-menu-affordance] {
+    background: color-mix(in srgb, var(--ui-split-button-menu-danger) 14%, #ffffff);
+    border-color: color-mix(in srgb, var(--ui-split-button-menu-danger) 30%, transparent);
+    color: var(--ui-split-button-menu-danger);
   }
 
   .menu [slot="menuitem"][disabled],
@@ -364,22 +435,26 @@
   .menu [data-menu-item][aria-disabled="true"] {
     opacity: 0.56;
     pointer-events: none;
+    transform: none;
+    box-shadow: none;
   }
 
   :host([menu-density="compact"]) {
-    --ui-split-button-menu-list-gap: 0px;
+    --ui-split-button-menu-list-gap: 1px;
     --ui-split-button-menu-list-padding-top: 2px;
-    --ui-split-button-menu-item-min-height: 40px;
+    --ui-split-button-menu-item-min-height: 38px;
     --ui-split-button-menu-item-radius: 8px;
-    --ui-split-button-menu-item-padding: 9px 11px;
+    --ui-split-button-menu-item-padding: 8px 10px;
+    --ui-split-button-menu-affordance-size: 16px;
   }
 
   :host([menu-density="airy"]) {
-    --ui-split-button-menu-list-gap: 6px;
+    --ui-split-button-menu-list-gap: 4px;
     --ui-split-button-menu-list-padding-top: 6px;
     --ui-split-button-menu-item-min-height: 50px;
     --ui-split-button-menu-item-radius: 14px;
-    --ui-split-button-menu-item-padding: 12px 14px;
+    --ui-split-button-menu-item-padding: 12px 12px;
+    --ui-split-button-menu-affordance-size: 20px;
   }
 
   :host([menu-shape="flat"]) {
@@ -398,13 +473,13 @@
       transform: none;
     }
   }
-`;function y(p,t){const e=p.cloneNode(!0);return e.setAttribute("slot","menuitem"),e.setAttribute("data-menu-item","true"),e.setAttribute("data-index",String(t)),e.setAttribute("tabindex","-1"),e.id||(e.id=`ui-split-button-item-${Math.random().toString(36).slice(2,9)}`),e}class b extends g.ElementBase{constructor(){super(),this._portalEl=null,this._portalRoot=null,this._layer=null,this._positioner=null,this._listbox=null,this._triggerButton=null,this._toggleButton=null,this._menuItems=[],this._lastFocused=null,this._closeTimer=null,this._onPrimaryClick=this._onPrimaryClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["label","menu-label","menu-heading","menu-description","variant","density","menu-density","menu-shape","disabled","open"]}openMenu(){var t,e;this.hasAttribute("disabled")||this.hasAttribute("open")&&((t=this._portalEl)==null?void 0:t.getAttribute("data-state"))!=="closing"||!this._portalEl&&this._collectMenuItems().length===0||(this._lastFocused=document.activeElement||this._toggleButton,this._clearCloseTimer(),this._portalEl&&(this._setMenuState("opening"),this._portalEl.style.pointerEvents="auto",(e=this._positioner)==null||e.update(),requestAnimationFrame(()=>this._setMenuState("open"))),this.setAttribute("open",""),queueMicrotask(()=>{if(!this._portalEl)this._mountMenu();else try{this._portalEl.focus({preventScroll:!0})}catch{this._portalEl.focus()}}))}closeMenu(){this.hasAttribute("open")&&this.removeAttribute("open")}toggleMenu(){this.hasAttribute("open")?this.closeMenu():this.openMenu()}connectedCallback(){super.connectedCallback(),this.hasAttribute("open")&&this.openMenu()}disconnectedCallback(){this._teardownMenu(!0),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i){if(t==="open"){i!=null?this.openMenu():this._beginCloseMenu();return}this.isConnected&&this.requestRender()}}render(){var i,n,o;const t=this.getAttribute("label")||"Run action",e=this.getAttribute("menu-label")||"Open action menu";this.setContent(`
+`;function y(d,e){const t=d.cloneNode(!0);if(t.setAttribute("slot","menuitem"),t.setAttribute("data-menu-item","true"),t.setAttribute("data-index",String(e)),t.setAttribute("role","menuitem"),t.setAttribute("tabindex","-1"),t.classList.add("menu-option"),t.setAttribute("data-has-description",t.querySelector("[data-menu-description]")?"true":"false"),t.setAttribute("data-has-shortcut",t.querySelector("[data-menu-shortcut]")?"true":"false"),t.hasAttribute("disabled")&&t.setAttribute("aria-disabled","true"),!t.querySelector("[data-menu-affordance]")){const n=document.createElement("span");n.setAttribute("data-menu-affordance","true"),n.setAttribute("aria-hidden","true"),t.prepend(n)}return t.id||(t.id=`ui-split-button-item-${Math.random().toString(36).slice(2,9)}`),t}class b extends f.ElementBase{constructor(){super(),this._portalEl=null,this._portalRoot=null,this._layer=null,this._positioner=null,this._listbox=null,this._triggerButton=null,this._toggleButton=null,this._menuItems=[],this._lastFocused=null,this._closeTimer=null,this._onPrimaryClick=this._onPrimaryClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onMenuPointerDown=this._onMenuPointerDown.bind(this),this._onMenuPointerMove=this._onMenuPointerMove.bind(this)}static get observedAttributes(){return["label","menu-label","menu-heading","menu-description","variant","density","menu-density","menu-shape","disabled","open"]}openMenu(){var e,t;this.hasAttribute("disabled")||this.hasAttribute("open")&&((e=this._portalEl)==null?void 0:e.getAttribute("data-state"))!=="closing"||!this._portalEl&&this._collectMenuItems().length===0||(this._lastFocused=document.activeElement||this._toggleButton,this._clearCloseTimer(),this._portalEl&&(this._setMenuState("opening"),this._portalEl.style.pointerEvents="auto",(t=this._positioner)==null||t.update(),requestAnimationFrame(()=>this._setMenuState("open"))),this.setAttribute("open",""),queueMicrotask(()=>{if(!this._portalEl)this._mountMenu();else try{this._portalEl.focus({preventScroll:!0})}catch{this._portalEl.focus()}}))}closeMenu(){this.hasAttribute("open")&&this.removeAttribute("open")}toggleMenu(){this.hasAttribute("open")?this.closeMenu():this.openMenu()}connectedCallback(){super.connectedCallback(),this.hasAttribute("open")&&this.openMenu()}disconnectedCallback(){this._teardownMenu(!0),super.disconnectedCallback()}attributeChangedCallback(e,t,n){if(t!==n){if(e==="open"){n!=null?this.openMenu():this._beginCloseMenu();return}this.isConnected&&this.requestRender()}}render(){var n,i,o;const e=this.getAttribute("label")||"Run action",t=this.getAttribute("menu-label")||"Open action menu";this.setContent(`
       <style>${v}</style>
       <div class="group" part="group">
-        <button class="button" part="button" type="button">${t}</button>
-        <button class="toggle" part="toggle" type="button" aria-label="${e}" aria-haspopup="menu" aria-expanded="${this.hasAttribute("open")?"true":"false"}">
+        <button class="button" part="button" type="button">${e}</button>
+        <button class="toggle" part="toggle" type="button" aria-label="${t}" aria-haspopup="menu" aria-expanded="${this.hasAttribute("open")?"true":"false"}">
           <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="m5 8 5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
         </button>
       </div>
       <div class="slot-source"><slot name="menuitem"></slot></div>
-    `),this._triggerButton=this.root.querySelector(".button"),this._toggleButton=this.root.querySelector(".toggle"),this._syncToggleState(),(i=this._triggerButton)==null||i.addEventListener("click",this._onPrimaryClick),(n=this._toggleButton)==null||n.addEventListener("click",this._onToggleClick),(o=this._toggleButton)==null||o.addEventListener("keydown",this._onKeyDown)}_onPrimaryClick(t){this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("primary-action",{detail:{originalEvent:t},bubbles:!0,composed:!0}))}_onToggleClick(){this.toggleMenu()}_onKeyDown(t){(t.key==="ArrowDown"||t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.openMenu())}_mountMenu(){var d;if(this._portalEl)return;const t=h.createPortalContainer();if(!t)return;this._portalRoot=t,this._portalRoot.classList.add("ui-split-button-portal");const e=document.createElement("div");e.className="menu",e.setAttribute("role","menu"),e.setAttribute("data-state","opening"),e.tabIndex=-1,e.style.pointerEvents="auto";const i=document.createElement("style");i.textContent=_;const n=this.getAttribute("menu-heading")||"",o=this.getAttribute("menu-description")||"",r=n||o?(()=>{const s=document.createElement("div");if(s.className="menu-header",n){const a=document.createElement("p");a.className="menu-heading",a.textContent=n,s.appendChild(a)}if(o){const a=document.createElement("p");a.className="menu-description",a.textContent=o,s.appendChild(a)}return s})():null,u=document.createElement("ui-listbox");if(u.setAttribute("item-selector",'[slot="menuitem"]'),u.setAttribute("item-role","menuitem"),u.setAttribute("active-attribute","data-active"),this._menuItems=this._collectMenuItems(),this._menuItems.length===0){this.removeAttribute("open");return}const l=(d=this.root.querySelector(".group"))==null?void 0:d.getBoundingClientRect();l&&Number.isFinite(l.width)&&l.width>0&&(e.style.minWidth=`${Math.max(236,Math.round(l.width))}px`),this._menuItems.forEach(s=>u.appendChild(s)),u.refresh(),e.append(i),r&&e.appendChild(r),e.appendChild(u),this._portalRoot.appendChild(e),this._portalEl=e,this._listbox=u,this._positioner=x.createPositioner({floating:e,anchor:this._toggleButton||this,placement:"bottom-start",offset:6,fitViewport:!0}),this._layer=f.createDismissableLayer({node:e,trigger:this._toggleButton,closeOnEscape:!0,closeOnPointerOutside:!0,onDismiss:()=>this.closeMenu()}),u.addEventListener("click",s=>this._onMenuClick(s)),u.addEventListener("keydown",s=>this._onMenuKeyDown(s));const c=this._listbox.focusBoundary("first",{focus:!1,scroll:!1});c&&this._listbox.setActiveItem(c,{focus:!1,scroll:!1}),this._syncToggleState(),requestAnimationFrame(()=>this._setMenuState("open")),queueMicrotask(()=>{try{e.focus({preventScroll:!0})}catch{e.focus()}})}_collectMenuItems(){const t=this.root.querySelector('slot[name="menuitem"]');return(t?t.assignedElements({flatten:!0}):[]).filter(i=>i.getAttribute("slot")==="menuitem").map((i,n)=>y(i,n))}_onMenuClick(t){var n,o;const e=t.composedPath(),i=this._menuItems.find(r=>e.includes(r));if(!i){const r=(o=(n=t.target)==null?void 0:n.closest)==null?void 0:o.call(n,"[data-menu-item]");r&&this._selectMenuItem(r);return}this._selectMenuItem(i)}_onMenuKeyDown(t){if(this._listbox){if(t.key==="Escape"||t.key==="Tab"){t.preventDefault(),this.closeMenu();return}if(t.key==="ArrowDown"){t.preventDefault(),this._listbox.move(1,{focus:!1,scroll:!0});return}if(t.key==="ArrowUp"){t.preventDefault(),this._listbox.move(-1,{focus:!1,scroll:!0});return}if(t.key==="Home"){t.preventDefault(),this._listbox.focusBoundary("first",{focus:!1,scroll:!0});return}if(t.key==="End"){t.preventDefault(),this._listbox.focusBoundary("last",{focus:!1,scroll:!0});return}if(t.key==="Enter"||t.key===" "){t.preventDefault();const e=this._listbox.getActiveItem();e&&this._selectMenuItem(e)}}}_syncToggleState(){var t;(t=this._toggleButton)==null||t.setAttribute("aria-expanded",this.hasAttribute("open")?"true":"false")}_selectMenuItem(t){const e=Number(t.getAttribute("data-index")||-1);this.dispatchEvent(new CustomEvent("select",{detail:{index:e,value:t.getAttribute("data-value")||void 0,label:t.getAttribute("data-label")||(t.textContent||"").trim()},bubbles:!0,composed:!0})),this.closeMenu()}_beginCloseMenu(){this._portalEl&&(this._clearCloseTimer(),this._setMenuState("closing"),this._portalEl.style.pointerEvents="none",this._closeTimer=window.setTimeout(()=>{this._closeTimer=null,this._teardownMenu(!0)},m))}_setMenuState(t){var e;(e=this._portalEl)==null||e.setAttribute("data-state",t)}_clearCloseTimer(){this._closeTimer!=null&&(window.clearTimeout(this._closeTimer),this._closeTimer=null)}_teardownMenu(t=!1){var e,i,n;if(this._clearCloseTimer(),(e=this._layer)==null||e.destroy(),this._layer=null,(i=this._positioner)==null||i.destroy(),this._positioner=null,this._listbox=null,(n=this._portalEl)!=null&&n.parentElement&&this._portalEl.parentElement.removeChild(this._portalEl),this._portalEl=null,this._portalRoot=null,this._syncToggleState(),t){const o=this._toggleButton||this._lastFocused;o&&o.isConnected&&queueMicrotask(()=>{try{o.focus({preventScroll:!0})}catch{o.focus()}})}this._lastFocused=null}}typeof customElements<"u"&&!customElements.get("ui-split-button")&&customElements.define("ui-split-button",b);exports.UISplitButton=b;
+    `),this._triggerButton=this.root.querySelector(".button"),this._toggleButton=this.root.querySelector(".toggle"),this._syncToggleState(),(n=this._triggerButton)==null||n.addEventListener("click",this._onPrimaryClick),(i=this._toggleButton)==null||i.addEventListener("click",this._onToggleClick),(o=this._toggleButton)==null||o.addEventListener("keydown",this._onKeyDown)}_onPrimaryClick(e){this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("primary-action",{detail:{originalEvent:e},bubbles:!0,composed:!0}))}_onToggleClick(){this.toggleMenu()}_onKeyDown(e){(e.key==="ArrowDown"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.openMenu())}_mountMenu(){var c;if(this._portalEl)return;const e=g.createPortalContainer();if(!e)return;this._portalRoot=e,this._portalRoot.classList.add("ui-split-button-portal");const t=document.createElement("div");t.className="menu",t.setAttribute("role","menu"),t.setAttribute("data-state","opening"),t.tabIndex=-1,t.style.pointerEvents="auto";const n=document.createElement("style");n.textContent=_;const i=this.getAttribute("menu-heading")||"",o=this.getAttribute("menu-description")||"",r=i||o?(()=>{const a=document.createElement("div");if(a.className="menu-header",i){const u=document.createElement("p");u.className="menu-heading",u.textContent=i,a.appendChild(u)}if(o){const u=document.createElement("p");u.className="menu-description",u.textContent=o,a.appendChild(u)}return a})():null,s=document.createElement("ui-listbox");if(s.setAttribute("item-selector",'[slot="menuitem"]'),s.setAttribute("item-role","menuitem"),s.setAttribute("active-attribute","data-active"),this._menuItems=this._collectMenuItems(),this._menuItems.length===0){this.removeAttribute("open");return}const l=(c=this.root.querySelector(".group"))==null?void 0:c.getBoundingClientRect();l&&Number.isFinite(l.width)&&l.width>0&&(t.style.minWidth=`${Math.max(260,Math.round(l.width))}px`),this._menuItems.forEach(a=>s.appendChild(a)),s.refresh(),t.append(n),r&&t.appendChild(r),t.appendChild(s),this._portalRoot.appendChild(t),this._portalEl=t,this._listbox=s,this._positioner=x.createPositioner({floating:t,anchor:this.root.querySelector(".group")||this._toggleButton||this,placement:"bottom-start",offset:6,fitViewport:!0}),this._layer=h.createDismissableLayer({node:t,trigger:this._toggleButton,closeOnEscape:!0,closeOnPointerOutside:!0,onDismiss:()=>this.closeMenu()}),s.addEventListener("click",a=>this._onMenuClick(a)),s.addEventListener("pointerdown",this._onMenuPointerDown),s.addEventListener("pointermove",this._onMenuPointerMove,{passive:!0}),s.addEventListener("keydown",a=>this._onMenuKeyDown(a));const p=this._listbox.focusBoundary("first",{focus:!1,scroll:!1});p&&this._listbox.setActiveItem(p,{focus:!1,scroll:!1}),this._syncToggleState(),requestAnimationFrame(()=>this._setMenuState("open")),queueMicrotask(()=>{try{t.focus({preventScroll:!0})}catch{t.focus()}})}_collectMenuItems(){const e=this.root.querySelector('slot[name="menuitem"]');return(e?e.assignedElements({flatten:!0}):[]).filter(n=>n.getAttribute("slot")==="menuitem").map((n,i)=>y(n,i))}_onMenuClick(e){var i,o;const t=e.composedPath(),n=this._menuItems.find(r=>t.includes(r));if(!n){const r=(o=(i=e.target)==null?void 0:i.closest)==null?void 0:o.call(i,"[data-menu-item]");r&&this._selectMenuItem(r);return}this._selectMenuItem(n)}_onMenuPointerDown(e){var n,i;(i=(n=e.target)==null?void 0:n.closest)!=null&&i.call(n,"[data-menu-item]")&&e.preventDefault()}_onMenuPointerMove(e){var n,i;if(!this._listbox)return;const t=(i=(n=e.target)==null?void 0:n.closest)==null?void 0:i.call(n,"[data-menu-item]");!t||t.hasAttribute("disabled")||t.getAttribute("aria-disabled")==="true"||this._listbox.getActiveItem()!==t&&this._listbox.setActiveItem(t,{focus:!1,scroll:!1})}_onMenuKeyDown(e){if(this._listbox){if(e.key==="Escape"||e.key==="Tab"){e.preventDefault(),this.closeMenu();return}if(e.key==="ArrowDown"){e.preventDefault(),this._listbox.move(1,{focus:!1,scroll:!0});return}if(e.key==="ArrowUp"){e.preventDefault(),this._listbox.move(-1,{focus:!1,scroll:!0});return}if(e.key==="Home"){e.preventDefault(),this._listbox.focusBoundary("first",{focus:!1,scroll:!0});return}if(e.key==="End"){e.preventDefault(),this._listbox.focusBoundary("last",{focus:!1,scroll:!0});return}if(e.key==="Enter"||e.key===" "){e.preventDefault();const t=this._listbox.getActiveItem();t&&this._selectMenuItem(t)}}}_syncToggleState(){var e;(e=this._toggleButton)==null||e.setAttribute("aria-expanded",this.hasAttribute("open")?"true":"false")}_selectMenuItem(e){const t=Number(e.getAttribute("data-index")||-1);this.dispatchEvent(new CustomEvent("select",{detail:{index:t,value:e.getAttribute("data-value")||void 0,label:e.getAttribute("data-label")||(e.textContent||"").trim()},bubbles:!0,composed:!0})),this.closeMenu()}_beginCloseMenu(){this._portalEl&&(this._clearCloseTimer(),this._setMenuState("closing"),this._portalEl.style.pointerEvents="none",this._closeTimer=window.setTimeout(()=>{this._closeTimer=null,this._teardownMenu(!0)},m))}_setMenuState(e){var t;(t=this._portalEl)==null||t.setAttribute("data-state",e)}_clearCloseTimer(){this._closeTimer!=null&&(window.clearTimeout(this._closeTimer),this._closeTimer=null)}_teardownMenu(e=!1){var t,n,i;if(this._clearCloseTimer(),(t=this._layer)==null||t.destroy(),this._layer=null,(n=this._positioner)==null||n.destroy(),this._positioner=null,this._listbox=null,(i=this._portalEl)!=null&&i.parentElement&&this._portalEl.parentElement.removeChild(this._portalEl),this._portalEl=null,this._portalRoot=null,this._syncToggleState(),e){const o=this._toggleButton||this._lastFocused;o&&o.isConnected&&queueMicrotask(()=>{try{o.focus({preventScroll:!0})}catch{o.focus()}})}this._lastFocused=null}}typeof customElements<"u"&&!customElements.get("ui-split-button")&&customElements.define("ui-split-button",b);exports.UISplitButton=b;