@editora/ui-core 0.1.9 → 0.1.10

package/dist/split-button.esm.js

@@ -0,0 +1,619 @@
+import { E as b } from "./ElementBase-909688f3.mjs";
+import { c as g } from "./portal-1cf392ca.mjs";
+import { c as h } from "./dismissable-layer-9c7e6b58.mjs";
+import { a as f } from "./positioner-fbd61bf1.mjs";
+import "./listbox-308789a0.mjs";
+import "./collection-a1aac0c6.mjs";
+import "./collection.esm.js";
+const m = 160, x = `
+  :host {
+    --ui-split-button-radius: 12px;
+    --ui-split-button-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-split-button-bg: var(--ui-color-primary, #2563eb);
+    --ui-split-button-bg-strong: color-mix(in srgb, var(--ui-split-button-bg) 84%, #0f172a 16%);
+    --ui-split-button-color: #ffffff;
+    --ui-split-button-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-split-button-bg) 20%, transparent);
+    --ui-split-button-menu-bg: var(--ui-color-surface, #ffffff);
+    --ui-split-button-menu-color: var(--ui-color-text, #0f172a);
+    --ui-split-button-menu-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 64%, transparent);
+    --ui-split-button-menu-radius: 14px;
+    --ui-split-button-menu-shadow: 0 22px 44px rgba(2, 6, 23, 0.16), 0 2px 8px rgba(2, 6, 23, 0.08);
+    --ui-split-button-menu-accent: color-mix(in srgb, var(--ui-split-button-bg) 8%, var(--ui-split-button-menu-bg));
+    --ui-split-button-menu-accent-strong: color-mix(in srgb, var(--ui-split-button-bg) 14%, var(--ui-split-button-menu-bg));
+    --ui-split-button-menu-shortcut: color-mix(in srgb, var(--ui-split-button-menu-color) 60%, transparent);
+    --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-list-padding-top: 2px;
+    --ui-split-button-menu-item-min-height: 42px;
+    --ui-split-button-menu-item-radius: 10px;
+    --ui-split-button-menu-item-padding: 10px 12px;
+    --ui-split-button-focus: var(--ui-color-focus-ring, #2563eb);
+    display: inline-flex;
+    position: relative;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .group {
+    display: inline-grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-width: 0;
+    border: var(--ui-split-button-border);
+    border-radius: var(--ui-split-button-radius);
+    overflow: hidden;
+    background: var(--ui-split-button-bg);
+    color: var(--ui-split-button-color);
+    box-shadow: var(--ui-split-button-shadow);
+  }
+
+  .button,
+  .toggle {
+    appearance: none;
+    border: 0;
+    margin: 0;
+    background: transparent;
+    color: inherit;
+    min-height: 40px;
+    font: 600 14px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    cursor: pointer;
+    transition: background-color 140ms ease, color 140ms ease;
+  }
+
+  .button {
+    padding: 0 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .toggle {
+    inline-size: 42px;
+    display: inline-grid;
+    place-items: center;
+    border-inline-start: 1px solid color-mix(in srgb, #ffffff 20%, transparent);
+  }
+
+  .button:hover,
+  .toggle:hover,
+  .button:focus-visible,
+  .toggle:focus-visible,
+  :host([open]) .toggle {
+    background: var(--ui-split-button-bg-strong);
+    outline: none;
+  }
+
+  .toggle svg {
+    inline-size: 14px;
+    block-size: 14px;
+  }
+
+  .slot-source {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    opacity: 0.72;
+    pointer-events: none;
+  }
+
+  :host([variant="neutral"]) {
+    --ui-split-button-bg: #ffffff;
+    --ui-split-button-bg-strong: #f8fafc;
+    --ui-split-button-color: #0f172a;
+    --ui-split-button-border: 1px solid color-mix(in srgb, #0f172a 12%, transparent);
+    --ui-split-button-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.08);
+    --ui-split-button-menu-bg: #ffffff;
+    --ui-split-button-menu-color: #0f172a;
+  }
+
+  :host([variant="flat"]) {
+    --ui-split-button-radius: 10px;
+    --ui-split-button-bg: #ffffff;
+    --ui-split-button-bg-strong: #f1f5f9;
+    --ui-split-button-color: #0f172a;
+    --ui-split-button-border: 1px solid #dbe4f0;
+    --ui-split-button-shadow: none;
+    --ui-split-button-menu-bg: #ffffff;
+    --ui-split-button-menu-color: #0f172a;
+    --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;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-split-button-bg: #111827;
+    --ui-split-button-bg-strong: #0b1220;
+    --ui-split-button-color: #f8fafc;
+    --ui-split-button-shadow: 0 1px 2px rgba(15, 23, 42, 0.2), 0 16px 36px rgba(15, 23, 42, 0.18);
+  }
+
+  :host([density="compact"]) {
+    --ui-split-button-radius: 10px;
+  }
+
+  :host([density="compact"]) .button,
+  :host([density="compact"]) .toggle {
+    min-height: 36px;
+    font-size: 13px;
+  }
+
+  :host([density="compact"]) .button {
+    padding-inline: 12px;
+  }
+
+  :host([density="compact"]) .toggle {
+    inline-size: 38px;
+  }
+
+  :host([density="comfortable"]) .button,
+  :host([density="comfortable"]) .toggle {
+    min-height: 44px;
+  }
+
+  :host([density="comfortable"]) .button {
+    padding-inline: 16px;
+  }
+
+  :host([density="comfortable"]) .toggle {
+    inline-size: 46px;
+  }
+`, v = `
+  .menu {
+    position: absolute;
+    display: grid;
+    gap: 6px;
+    min-width: 220px;
+    max-width: min(360px, calc(100vw - 16px));
+    max-height: min(420px, calc(100vh - 16px));
+    overflow: auto;
+    padding: 10px 8px 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);
+    color: var(--ui-split-button-menu-color);
+    box-shadow: var(--ui-split-button-menu-shadow);
+    box-sizing: border-box;
+    z-index: 1600;
+    backdrop-filter: blur(14px) saturate(1.08);
+    overflow: hidden auto;
+    opacity: 0;
+    transform: translateY(-6px) scale(0.985);
+    transform-origin: top left;
+    transition: opacity ${m}ms cubic-bezier(0.22, 1, 0.36, 1), transform ${m}ms cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: opacity, transform;
+  }
+
+  .menu[data-state="opening"],
+  .menu[data-state="closing"] {
+    pointer-events: none;
+  }
+
+  .menu[data-state="open"] {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  .menu[data-state="closing"] {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.99);
+  }
+
+  .menu::before {
+    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;
+    pointer-events: none;
+  }
+
+  .menu ui-listbox {
+    display: grid;
+    gap: var(--ui-split-button-menu-list-gap);
+    padding: var(--ui-split-button-menu-list-padding-top) 0 0;
+  }
+
+  .menu-header {
+    display: grid;
+    gap: 3px;
+    padding: 2px 8px 6px;
+  }
+
+  .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;
+    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;
+    letter-spacing: 0.01em;
+    color: var(--ui-split-button-menu-muted);
+  }
+
+  .menu [slot="menuitem"],
+  .menu [data-menu-item] {
+    appearance: none;
+    -webkit-appearance: none;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    inline-size: 100%;
+    gap: 12px;
+    align-items: center;
+    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-radius: var(--ui-split-button-menu-item-radius);
+    background: transparent;
+    color: inherit;
+    box-shadow: none;
+    text-align: start;
+    text-decoration: none;
+    font: 600 14px/1.32 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
+  }
+
+  .menu [slot="menuitem"] + [slot="menuitem"],
+  .menu [data-menu-item] + [data-menu-item] {
+    box-shadow: inset 0 1px 0 var(--ui-split-button-menu-separator);
+  }
+
+  .menu [slot="menuitem"]::before,
+  .menu [data-menu-item]::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block: 8px;
+    inline-size: 3px;
+    border-radius: 999px;
+    background: transparent;
+    transition: background-color 140ms ease;
+  }
+
+  .menu [slot="menuitem"] > :first-child,
+  .menu [data-menu-item] > :first-child,
+  .menu [data-menu-label] {
+    display: grid;
+    gap: 2px;
+    min-inline-size: 0;
+  }
+
+  .menu [data-menu-label] {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 620;
+  }
+
+  .menu [data-menu-description] {
+    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;
+    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;
+    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);
+  }
+
+  .menu [slot="menuitem"][data-tone="danger"],
+  .menu [data-menu-item][data-tone="danger"] {
+    color: color-mix(in srgb, var(--ui-split-button-menu-danger) 88%, var(--ui-split-button-menu-color));
+  }
+
+  .menu [slot="menuitem"][data-tone="danger"] [data-menu-description],
+  .menu [data-menu-item][data-tone="danger"] [data-menu-description] {
+    color: color-mix(in srgb, var(--ui-split-button-menu-danger) 68%, transparent);
+  }
+
+  .menu [slot="menuitem"][data-active="true"],
+  .menu [data-menu-item][data-active="true"],
+  .menu [slot="menuitem"]:hover,
+  .menu [data-menu-item]:hover,
+  .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);
+  }
+
+  .menu [slot="menuitem"][data-active="true"],
+  .menu [data-menu-item][data-active="true"] {
+    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-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"][disabled],
+  .menu [slot="menuitem"][aria-disabled="true"],
+  .menu [data-menu-item][disabled],
+  .menu [data-menu-item][aria-disabled="true"] {
+    opacity: 0.56;
+    pointer-events: none;
+  }
+
+  :host([menu-density="compact"]) {
+    --ui-split-button-menu-list-gap: 0px;
+    --ui-split-button-menu-list-padding-top: 2px;
+    --ui-split-button-menu-item-min-height: 40px;
+    --ui-split-button-menu-item-radius: 8px;
+    --ui-split-button-menu-item-padding: 9px 11px;
+  }
+
+  :host([menu-density="airy"]) {
+    --ui-split-button-menu-list-gap: 6px;
+    --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;
+  }
+
+  :host([menu-shape="flat"]) {
+    --ui-split-button-menu-radius: 10px;
+    --ui-split-button-menu-item-radius: 8px;
+  }
+
+  :host([menu-shape="soft"]) {
+    --ui-split-button-menu-radius: 18px;
+    --ui-split-button-menu-item-radius: 14px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu {
+      transition: none;
+      transform: none;
+    }
+  }
+`;
+function _(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 y extends b {
+  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(`
+      <style>${x}</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"}">
+          <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 = g();
+    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 = v;
+    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 = f({
+      floating: e,
+      anchor: this._toggleButton || this,
+      placement: "bottom-start",
+      offset: 6,
+      fitViewport: !0
+    }), this._layer = h({
+      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) => _(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", y);
+export {
+  y as UISplitButton
+};

package/dist/splitter.cjs.js

@@ -0,0 +1,70 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-1b301e7f.js"),l=`
+  :host {
+    --ui-splitter-size: 10px;
+    --ui-splitter-hit-area: 10px;
+    --ui-splitter-line: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
+    --ui-splitter-accent: var(--ui-color-primary, #2563eb);
+    --ui-splitter-handle-bg: color-mix(in srgb, var(--ui-splitter-line) 48%, transparent);
+    display: block;
+    position: relative;
+    flex: 0 0 auto;
+    inline-size: var(--ui-splitter-size);
+    min-inline-size: var(--ui-splitter-size);
+    block-size: 100%;
+    min-block-size: 100%;
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+
+  :host([orientation="vertical"]) {
+    inline-size: 100%;
+    min-inline-size: 100%;
+    block-size: var(--ui-splitter-size);
+    min-block-size: var(--ui-splitter-size);
+    cursor: row-resize;
+  }
+
+  .splitter {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+
+  .line {
+    inline-size: 2px;
+    block-size: 36px;
+    border-radius: 999px;
+    background: var(--ui-splitter-handle-bg);
+    transition: background-color 140ms ease, transform 140ms ease;
+  }
+
+  :host([orientation="vertical"]) .line {
+    inline-size: 36px;
+    block-size: 2px;
+  }
+
+  :host(:hover) .line,
+  :host(:focus-visible) .line,
+  :host([data-dragging="true"]) .line {
+    background: color-mix(in srgb, var(--ui-splitter-accent) 72%, white 28%);
+    transform: scale(1.04);
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .line {
+      transition: none !important;
+    }
+  }
+`;class s extends r.ElementBase{static get observedAttributes(){return["orientation","disabled","aria-label"]}connectedCallback(){super.connectedCallback(),this._syncAccessibility()}attributeChangedCallback(e,i,t){if(i!==t){if(e==="orientation"||e==="disabled"||e==="aria-label"){this._syncAccessibility();return}super.attributeChangedCallback(e,i,t)}}focus(e){super.focus(e)}_syncAccessibility(){const e=this.hasAttribute("disabled");this.setAttribute("role","separator"),this.setAttribute("tabindex",e?"-1":"0"),this.setAttribute("aria-orientation",this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"),this.setAttribute("aria-label",this.getAttribute("aria-label")||"Resize panels")}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+      <style>${l}</style>
+      <div class="splitter" part="splitter">
+        <div class="line" part="line"></div>
+      </div>
+    `),this._syncAccessibility()}}typeof customElements<"u"&&!customElements.get("ui-splitter")&&customElements.define("ui-splitter",s);exports.UISplitter=s;