@editora/ui-core 0.1.10 → 0.1.12

package/dist/split-button.esm.js

@@ -1,7 +1,7 @@
 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 { c as f } from "./portal-1cf392ca.mjs";
+import { c as g } from "./dismissable-layer-9c7e6b58.mjs";
+import { a as h } from "./positioner-fbd61bf1.mjs";
 import "./listbox-308789a0.mjs";
 import "./collection-a1aac0c6.mjs";
 import "./collection.esm.js";
@@ -24,11 +24,17 @@ const m = 160, x = `
     --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;
@@ -122,6 +128,7 @@ const m = 160, x = `
     --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"]) {
@@ -165,12 +172,12 @@ const m = 160, x = `
   .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);
@@ -206,9 +213,8 @@ const m = 160, x = `
     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;
   }
 
@@ -216,26 +222,30 @@ const m = 160, x = `
     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);
   }
@@ -245,15 +255,15 @@ const m = 160, x = `
     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;
@@ -264,7 +274,14 @@ const m = 160, x = `
     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"],
@@ -272,26 +289,49 @@ const m = 160, x = `
     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;
@@ -301,25 +341,26 @@ const m = 160, x = `
   }
 
   .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"],
@@ -332,6 +373,11 @@ const m = 160, x = `
     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,
@@ -339,7 +385,8 @@ const m = 160, x = `
   .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"],
@@ -347,22 +394,46 @@ const m = 160, x = `
     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-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"]::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-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],
@@ -371,22 +442,26 @@ const m = 160, x = `
   .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"]) {
@@ -406,20 +481,24 @@ const m = 160, x = `
     }
   }
 `;
-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;
+function _(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 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);
+    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 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(() => {
+    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
@@ -442,144 +521,155 @@ class y extends b {
   disconnectedCallback() {
     this._teardownMenu(!0), super.disconnectedCallback();
   }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i) {
-      if (t === "open") {
-        i != null ? this.openMenu() : this._beginCloseMenu();
+  attributeChangedCallback(e, t, n) {
+    if (t !== n) {
+      if (e === "open") {
+        n != 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";
+    var n, i, o;
+    const e = this.getAttribute("label") || "Run action", t = 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"}">
+        <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);
+    `), 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(t) {
-    this.hasAttribute("disabled") || this.dispatchEvent(new CustomEvent("primary-action", { detail: { originalEvent: t }, bubbles: !0, composed: !0 }));
+  _onPrimaryClick(e) {
+    this.hasAttribute("disabled") || this.dispatchEvent(new CustomEvent("primary-action", { detail: { originalEvent: e }, bubbles: !0, composed: !0 }));
   }
   _onToggleClick() {
     this.toggleMenu();
   }
-  _onKeyDown(t) {
-    (t.key === "ArrowDown" || t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.openMenu());
+  _onKeyDown(e) {
+    (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.openMenu());
   }
   _mountMenu() {
-    var d;
+    var c;
     if (this._portalEl)
       return;
-    const t = g();
-    if (!t)
+    const e = f();
+    if (!e)
       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);
+    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 = v;
+    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 a = document.createElement("p");
-        a.className = "menu-description", a.textContent = o, s.appendChild(a);
+        const u = document.createElement("p");
+        u.className = "menu-description", u.textContent = o, a.appendChild(u);
       }
-      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) {
+      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 = (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,
+    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 = h({
+      floating: t,
+      anchor: this.root.querySelector(".group") || this._toggleButton || this,
       placement: "bottom-start",
       offset: 6,
       fitViewport: !0
-    }), this._layer = h({
-      node: e,
+    }), this._layer = g({
+      node: t,
       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(() => {
+    }), 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 {
-        e.focus({ preventScroll: !0 });
+        t.focus({ preventScroll: !0 });
       } catch {
-        e.focus();
+        t.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]");
+    const e = this.root.querySelector('slot[name="menuitem"]');
+    return (e ? e.assignedElements({ flatten: !0 }) : []).filter((n) => n.getAttribute("slot") === "menuitem").map((n, i) => _(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(i);
+    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();
   }
-  _onMenuKeyDown(t) {
+  _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 (t.key === "Escape" || t.key === "Tab") {
-        t.preventDefault(), this.closeMenu();
+      if (e.key === "Escape" || e.key === "Tab") {
+        e.preventDefault(), this.closeMenu();
         return;
       }
-      if (t.key === "ArrowDown") {
-        t.preventDefault(), this._listbox.move(1, { focus: !1, scroll: !0 });
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), this._listbox.move(1, { focus: !1, scroll: !0 });
         return;
       }
-      if (t.key === "ArrowUp") {
-        t.preventDefault(), this._listbox.move(-1, { focus: !1, scroll: !0 });
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), this._listbox.move(-1, { focus: !1, scroll: !0 });
         return;
       }
-      if (t.key === "Home") {
-        t.preventDefault(), this._listbox.focusBoundary("first", { focus: !1, scroll: !0 });
+      if (e.key === "Home") {
+        e.preventDefault(), this._listbox.focusBoundary("first", { focus: !1, scroll: !0 });
         return;
       }
-      if (t.key === "End") {
-        t.preventDefault(), this._listbox.focusBoundary("last", { focus: !1, scroll: !0 });
+      if (e.key === "End") {
+        e.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);
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const t = this._listbox.getActiveItem();
+        t && this._selectMenuItem(t);
       }
     }
   }
   _syncToggleState() {
-    var t;
-    (t = this._toggleButton) == null || t.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    var e;
+    (e = this._toggleButton) == null || e.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
   }
-  _selectMenuItem(t) {
-    const e = Number(t.getAttribute("data-index") || -1);
+  _selectMenuItem(e) {
+    const t = Number(e.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()
+          index: t,
+          value: e.getAttribute("data-value") || void 0,
+          label: e.getAttribute("data-label") || (e.textContent || "").trim()
         },
         bubbles: !0,
         composed: !0
@@ -591,16 +681,16 @@ class y extends b {
       this._closeTimer = null, this._teardownMenu(!0);
     }, m));
   }
-  _setMenuState(t) {
-    var e;
-    (e = this._portalEl) == null || e.setAttribute("data-state", t);
+  _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(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) {
+  _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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/ui-core",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Framework-agnostic Web Components and primitives for the Editora UI ecosystem",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",