@editora/ui-core 0.1.24 → 0.2.0

package/dist/slider.esm.js

@@ -1,23 +1,22 @@
 import { E as f } from "./ElementBase-BeZT54Hj.mjs";
-const x = `
+const _ = `
   :host {
     --ui-slider-width: min(340px, 100%);
-    --ui-slider-track-size: 6px;
+    --ui-slider-track-size: 4px;
     --ui-slider-track-radius: 999px;
-    --ui-slider-thumb-size: 18px;
-    --ui-slider-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-slider-thumb-size: 16px;
+    --ui-slider-bg: transparent;
     --ui-slider-text: var(--ui-color-text, #0f172a);
     --ui-slider-muted: var(--ui-color-muted, #526175);
-    --ui-slider-track: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-slider-track: var(--ui-color-fill-active, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent));
     --ui-slider-fill: var(--ui-color-primary, #2563eb);
     --ui-slider-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-slider-shadow:
       none;
-    --ui-slider-thumb-shadow:
-      none;
-    --ui-slider-thumb-ring: 0 0 0 4px color-mix(in srgb, var(--ui-slider-focus) 18%, transparent);
-    --ui-slider-padding: 10px;
-    --ui-slider-radius: 14px;
+    --ui-slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.06);
+    --ui-slider-thumb-ring: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-ring-color, var(--ui-slider-focus));
+    --ui-slider-padding: 0px;
+    --ui-slider-radius: 0px;
     --ui-slider-label-size: 13px;
     --ui-slider-value-size: 12px;
     --ui-slider-indicator-size: 10px;
@@ -37,7 +36,7 @@ const x = `
     gap: 8px;
     color: var(--ui-slider-text);
     background: var(--ui-slider-bg);
-    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 60%, transparent);
+    border: 0;
     border-radius: var(--ui-slider-radius);
     box-shadow: var(--ui-slider-shadow);
     padding: var(--ui-slider-padding);
@@ -105,15 +104,12 @@ const x = `
     right: calc(100% - var(--ui-slider-end, 0%));
     block-size: var(--ui-slider-track-size);
     border-radius: var(--ui-slider-track-radius);
-    background: linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--ui-slider-fill) 86%, #ffffff 14%),
-      var(--ui-slider-fill)
-    );
+    background: var(--ui-slider-fill);
     pointer-events: none;
   }
 
   .track-indicator {
+    display: none;
     position: absolute;
     top: 50%;
     left: var(--ui-slider-end, 0%);
@@ -177,8 +173,8 @@ const x = `
     inline-size: var(--ui-slider-thumb-size);
     block-size: var(--ui-slider-thumb-size);
     border-radius: 50%;
-    border: 1px solid color-mix(in srgb, var(--ui-slider-fill) 42%, transparent);
-    background: color-mix(in srgb, var(--ui-slider-fill) 94%, #ffffff 6%);
+    border: 0;
+    background: #ffffff;
     box-shadow: var(--ui-slider-thumb-shadow);
     margin-top: calc((var(--ui-slider-track-size) - var(--ui-slider-thumb-size)) / 2);
     cursor: pointer;
@@ -189,8 +185,8 @@ const x = `
     inline-size: var(--ui-slider-thumb-size);
     block-size: var(--ui-slider-thumb-size);
     border-radius: 50%;
-    border: 1px solid color-mix(in srgb, var(--ui-slider-fill) 42%, transparent);
-    background: color-mix(in srgb, var(--ui-slider-fill) 94%, #ffffff 6%);
+    border: 0;
+    background: #ffffff;
     box-shadow: var(--ui-slider-thumb-shadow);
     cursor: pointer;
     transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
@@ -476,7 +472,7 @@ function h(n, t, e) {
 function b(n) {
   return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function m(n, t, e) {
+function v(n, t, e) {
   if (!n) return [];
   try {
     const r = JSON.parse(n);
@@ -493,11 +489,11 @@ function p(n, t = !1) {
   const e = String(n).toLowerCase();
   return e !== "false" && e !== "0" && e !== "off";
 }
-function _(n, t, e, r, i, l, u) {
+function x(n, t, e, r, i, l, u) {
   const s = Math.max(1, l - i), o = Math.round((t - i) / s * 100), d = Math.round((e - i) / s * 100), c = Math.round((r - i) / s * 100);
   return n === "percent" ? u ? `${d}% – ${c}%` : `${o}%` : n === "range" ? u ? `${e} – ${r}` : `${t}` : `${t}`;
 }
-const v = /* @__PURE__ */ new Set([
+const m = /* @__PURE__ */ new Set([
   "value",
   "value-start",
   "value-end",
@@ -553,7 +549,7 @@ class k extends f {
   }
   attributeChangedCallback(t, e, r) {
     if (e !== r) {
-      if (v.has(t) && this._trackWrap) {
+      if (m.has(t) && this._trackWrap) {
         this._syncFromAttributes(), this._syncDom();
         return;
       }
@@ -618,7 +614,7 @@ class k extends f {
   }
   _syncDom() {
     const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = Math.max(1e-4, a(this.getAttribute("step"), 1)), i = p(this.getAttribute("disabled")) || this.hasAttribute("disabled"), l = this.getAttribute("format") || (this._rangeMode ? "range" : "percent"), u = p(this.getAttribute("show-value"), !0), s = Math.max(1, e - t), o = (this._valueStart - t) / s * 100, d = (this._valueEnd - t) / s * 100;
-    this._startInput && (this._startInput.min = String(t), this._startInput.max = String(e), this._startInput.step = String(r), this._startInput.value = String(this._rangeMode ? this._valueStart : this._value), this._startInput.disabled = i, this._startInput.name = this._rangeMode ? this.getAttribute("name-start") || this.getAttribute("name") || "" : this.getAttribute("name") || "", this._startInput.setAttribute("aria-valuemin", String(t)), this._startInput.setAttribute("aria-valuemax", String(e)), this._startInput.setAttribute("aria-valuenow", String(this._rangeMode ? this._valueStart : this._value))), this._endInput && (this._endInput.min = String(t), this._endInput.max = String(e), this._endInput.step = String(r), this._endInput.value = String(this._valueEnd), this._endInput.disabled = i, this._endInput.name = this.getAttribute("name-end") || this.getAttribute("name") || "", this._endInput.setAttribute("aria-valuemin", String(t)), this._endInput.setAttribute("aria-valuemax", String(e)), this._endInput.setAttribute("aria-valuenow", String(this._valueEnd))), this._trackWrap && (this._trackWrap.style.setProperty("--ui-slider-start", `${this._rangeMode ? o : 0}%`), this._trackWrap.style.setProperty("--ui-slider-end", `${d}%`)), this._valueEl && (this._valueEl.textContent = _(l, this._value, this._valueStart, this._valueEnd, t, e, this._rangeMode), u ? this._valueEl.removeAttribute("hidden") : this._valueEl.setAttribute("hidden", "")), this.setAttribute("aria-valuemin", String(t)), this.setAttribute("aria-valuemax", String(e)), this.setAttribute("aria-valuenow", String(this.value)), this.setAttribute("aria-orientation", this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal"), this.setAttribute("aria-disabled", i ? "true" : "false");
+    this._startInput && (this._startInput.min = String(t), this._startInput.max = String(e), this._startInput.step = String(r), this._startInput.value = String(this._rangeMode ? this._valueStart : this._value), this._startInput.disabled = i, this._startInput.name = this._rangeMode ? this.getAttribute("name-start") || this.getAttribute("name") || "" : this.getAttribute("name") || "", this._startInput.setAttribute("aria-valuemin", String(t)), this._startInput.setAttribute("aria-valuemax", String(e)), this._startInput.setAttribute("aria-valuenow", String(this._rangeMode ? this._valueStart : this._value))), this._endInput && (this._endInput.min = String(t), this._endInput.max = String(e), this._endInput.step = String(r), this._endInput.value = String(this._valueEnd), this._endInput.disabled = i, this._endInput.name = this.getAttribute("name-end") || this.getAttribute("name") || "", this._endInput.setAttribute("aria-valuemin", String(t)), this._endInput.setAttribute("aria-valuemax", String(e)), this._endInput.setAttribute("aria-valuenow", String(this._valueEnd))), this._trackWrap && (this._trackWrap.style.setProperty("--ui-slider-start", `${this._rangeMode ? o : 0}%`), this._trackWrap.style.setProperty("--ui-slider-end", `${d}%`)), this._valueEl && (this._valueEl.textContent = x(l, this._value, this._valueStart, this._valueEnd, t, e, this._rangeMode), u ? this._valueEl.removeAttribute("hidden") : this._valueEl.setAttribute("hidden", "")), this.setAttribute("aria-valuemin", String(t)), this.setAttribute("aria-valuemax", String(e)), this.setAttribute("aria-valuenow", String(this.value)), this.setAttribute("aria-orientation", this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal"), this.setAttribute("aria-disabled", i ? "true" : "false");
   }
   _updateFromInput(t) {
     const e = a(this.getAttribute("min"), 0), r = Math.max(e, a(this.getAttribute("max"), 100)), i = Math.max(1e-4, a(this.getAttribute("step"), 1));
@@ -640,7 +636,7 @@ class k extends f {
     !e || e.type !== "range" || (this._updateFromInput(e), this._syncDom(), this._emit("change"));
   }
   _renderMarks(t, e) {
-    const r = m(this.getAttribute("marks"), t, e);
+    const r = v(this.getAttribute("marks"), t, e);
     if (!r.length) return '<div class="marks" part="marks" hidden></div>';
     const i = Math.max(1, e - t), l = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
     return `<div class="marks" part="marks">${r.map((s) => {
@@ -654,9 +650,9 @@ class k extends f {
   }
   render() {
     this._syncFromAttributes();
-    const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = this.getAttribute("label") || "", i = this.getAttribute("description") || "", l = !!r || !!i, u = this._renderMarks(t, e), s = m(this.getAttribute("marks"), t, e).length > 0, o = b(r), d = b(i), c = o ? `${o} start` : "Slider value", g = o ? `${o} end` : "Slider end value";
+    const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = this.getAttribute("label") || "", i = this.getAttribute("description") || "", l = !!r || !!i, u = this._renderMarks(t, e), s = v(this.getAttribute("marks"), t, e).length > 0, o = b(r), d = b(i), c = o ? `${o} start` : "Slider value", g = o ? `${o} end` : "Slider end value";
     this.setContent(`
-      <style>${x}</style>
+      <style>${_}</style>
       <div class="shell" part="shell" role="group" data-has-marks="${s}">
         <div class="meta" part="meta" ${l ? "" : "hidden"}>
           <span class="label" part="label" ${r ? "" : "hidden"}>${o}</span>
@@ -680,7 +676,7 @@ class k extends f {
     `), this._startInput = this.root.querySelector("input.start"), this._endInput = this.root.querySelector("input.end"), this._valueEl = this.root.querySelector(".value"), this._trackWrap = this.root.querySelector(".track-wrap"), this._syncDom();
   }
   shouldRenderOnAttributeChange(t, e, r) {
-    return !v.has(t);
+    return !m.has(t);
   }
 }
 typeof customElements < "u" && !customElements.get("ui-slider") && customElements.define("ui-slider", k);

package/dist/sortable.cjs.js

@@ -223,7 +223,6 @@
 
   .list-helper {
     font-size: 11.5px;
-    opacity: 0.85;
   }
 
   .empty {
@@ -365,7 +364,7 @@
     border-color: var(--ui-sortable-accent);
     background: color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-card));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-sortable-accent) 45%, transparent),
       var(--ui-sortable-card-shadow);
   }
 
@@ -452,7 +451,7 @@
   .item.item-ghost[data-refused] {
     border-color: var(--ui-sortable-danger, #dc2626);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-sortable-danger, #dc2626) 22%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-sortable-danger, #dc2626) 45%, transparent),
       var(--ui-sortable-lift-shadow);
   }
 
@@ -685,7 +684,7 @@
     margin-block-start: -1px;
     border-radius: 999px;
     background: var(--ui-sortable-accent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-sortable-accent) 45%, transparent);
     opacity: 0;
     transform: scaleX(0.35);
     transform-origin: center;
@@ -719,7 +718,7 @@
 
   .root[data-drop-indicator-visibility="always"] .dropzone[data-active="true"]::before {
     background: var(--ui-sortable-accent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-sortable-accent) 45%, transparent);
   }
 
   /* A card shows "drop inside" by highlighting itself, so its inside rail draws nothing. */

package/dist/sortable.esm.js

@@ -295,7 +295,6 @@ const ht = 1, Y = {
 
   .list-helper {
     font-size: 11.5px;
-    opacity: 0.85;
   }
 
   .empty {
@@ -437,7 +436,7 @@ const ht = 1, Y = {
     border-color: var(--ui-sortable-accent);
     background: color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-card));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-sortable-accent) 45%, transparent),
       var(--ui-sortable-card-shadow);
   }
 
@@ -524,7 +523,7 @@ const ht = 1, Y = {
   .item.item-ghost[data-refused] {
     border-color: var(--ui-sortable-danger, #dc2626);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-sortable-danger, #dc2626) 22%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-sortable-danger, #dc2626) 45%, transparent),
       var(--ui-sortable-lift-shadow);
   }
 
@@ -757,7 +756,7 @@ const ht = 1, Y = {
     margin-block-start: -1px;
     border-radius: 999px;
     background: var(--ui-sortable-accent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-sortable-accent) 45%, transparent);
     opacity: 0;
     transform: scaleX(0.35);
     transform-origin: center;
@@ -791,7 +790,7 @@ const ht = 1, Y = {
 
   .root[data-drop-indicator-visibility="always"] .dropzone[data-active="true"]::before {
     background: var(--ui-sortable-accent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-sortable-accent) 45%, transparent);
   }
 
   /* A card shows "drop inside" by highlighting itself, so its inside rail draws nothing. */

package/dist/spinning-text.cjs.js

@@ -15,19 +15,10 @@
     --ui-spinning-text-rotation: 1turn;
     --ui-spinning-text-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-spinning-text-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-spinning-text-bg:
-      radial-gradient(
-        circle at 50% 50%,
-        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 92%, transparent) 0%,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 62%,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, transparent) 100%
-      );
-    --ui-spinning-text-border-color:
-      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 84%, transparent);
+    --ui-spinning-text-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-spinning-text-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-spinning-text-border: 1px solid var(--ui-spinning-text-border-color);
-    --ui-spinning-text-shadow:
-      0 1px 3px rgba(15, 23, 42, 0.06),
-      0 24px 44px rgba(15, 23, 42, 0.12);
+    --ui-spinning-text-shadow: none;
     --ui-spinning-text-backdrop: none;
     --ui-spinning-text-orbit-color:
       color-mix(in srgb, var(--ui-spinning-text-accent) 18%, var(--ui-spinning-text-border-color));
@@ -315,7 +306,7 @@
     outline: none;
     border-color: color-mix(in srgb, var(--ui-spinning-text-focus-ring) 24%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-spinning-text-focus-ring) 18%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-spinning-text-focus-ring)),
       var(--ui-spinning-text-shadow);
   }
 

package/dist/spinning-text.esm.js

@@ -57,19 +57,10 @@ const C = "14s", D = " • ", h = "linear", N = 4, I = 1, L = 12, O = /* @__PURE
     --ui-spinning-text-rotation: 1turn;
     --ui-spinning-text-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-spinning-text-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-spinning-text-bg:
-      radial-gradient(
-        circle at 50% 50%,
-        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 92%, transparent) 0%,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 62%,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, transparent) 100%
-      );
-    --ui-spinning-text-border-color:
-      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 84%, transparent);
+    --ui-spinning-text-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-spinning-text-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-spinning-text-border: 1px solid var(--ui-spinning-text-border-color);
-    --ui-spinning-text-shadow:
-      0 1px 3px rgba(15, 23, 42, 0.06),
-      0 24px 44px rgba(15, 23, 42, 0.12);
+    --ui-spinning-text-shadow: none;
     --ui-spinning-text-backdrop: none;
     --ui-spinning-text-orbit-color:
       color-mix(in srgb, var(--ui-spinning-text-accent) 18%, var(--ui-spinning-text-border-color));
@@ -357,7 +348,7 @@ const C = "14s", D = " • ", h = "linear", N = 4, I = 1, L = 12, O = /* @__PURE
     outline: none;
     border-color: color-mix(in srgb, var(--ui-spinning-text-focus-ring) 24%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-spinning-text-focus-ring) 18%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-spinning-text-focus-ring)),
       var(--ui-spinning-text-shadow);
   }
 

package/dist/split-button.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.js"),f=require("./portal-DgpQ3Jo1.js"),g=require("./dismissable-layer-DNfrKA20.js"),h=require("./positioner-D_fqyx_j.js");require("./listbox-CTpRpuF7.js");const l=160,x=["--ui-split-button-menu-bg","--ui-split-button-menu-color","--ui-split-button-menu-border","--ui-split-button-menu-radius","--ui-split-button-menu-shadow","--ui-split-button-menu-accent","--ui-split-button-menu-accent-strong","--ui-split-button-menu-shortcut","--ui-split-button-menu-separator","--ui-split-button-menu-muted","--ui-split-button-menu-danger","--ui-split-button-menu-option-border","--ui-split-button-menu-option-border-strong","--ui-split-button-menu-option-shadow","--ui-split-button-menu-affordance-bg","--ui-split-button-menu-affordance-border","--ui-split-button-menu-affordance-size","--ui-split-button-menu-list-gap","--ui-split-button-menu-list-padding-top","--ui-split-button-menu-item-min-height","--ui-split-button-menu-item-radius","--ui-split-button-menu-item-padding"],v=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.js"),f=require("./portal-XbYR3m_q.js"),g=require("./dismissable-layer-DNfrKA20.js"),h=require("./positioner-DZ1FW6A9.js"),x=require("./overlay-motion-B56x1GoY.js");require("./listbox-CTpRpuF7.js");const l=160,v=["--ui-split-button-menu-bg","--ui-split-button-menu-color","--ui-split-button-menu-border","--ui-split-button-menu-radius","--ui-split-button-menu-shadow","--ui-split-button-menu-accent","--ui-split-button-menu-accent-strong","--ui-split-button-menu-shortcut","--ui-split-button-menu-separator","--ui-split-button-menu-muted","--ui-split-button-menu-danger","--ui-split-button-menu-option-border","--ui-split-button-menu-option-border-strong","--ui-split-button-menu-option-shadow","--ui-split-button-menu-affordance-bg","--ui-split-button-menu-affordance-border","--ui-split-button-menu-affordance-size","--ui-split-button-menu-list-gap","--ui-split-button-menu-list-padding-top","--ui-split-button-menu-item-min-height","--ui-split-button-menu-item-radius","--ui-split-button-menu-item-padding"],_=`
   :host {
     --ui-split-button-radius: 12px;
     --ui-split-button-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
@@ -161,7 +161,7 @@
   :host([density="comfortable"]) .toggle {
     inline-size: 46px;
   }
-`,_=`
+`,y=`
   .menu {
     position: absolute;
     display: grid;
@@ -473,8 +473,8 @@
       transform: none;
     }
   }
-`;function y(m,e){const t=m.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 c extends b.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(){this.hasAttribute("disabled")||this.hasAttribute("open")&&this._portalEl?.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",this._positioner?.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(){const e=this.getAttribute("label")||"Run action",t=this.getAttribute("menu-label")||"Open action menu";this.setContent(`
-      <style>${v}</style>
+`;function w(m,e){const t=m.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 c extends b.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(){this.hasAttribute("disabled")||this.hasAttribute("open")&&this._portalEl?.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",this._positioner?.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(){const e=this.getAttribute("label")||"Run action",t=this.getAttribute("menu-label")||"Open action menu";this.setContent(`
+      <style>${_}</style>
       <div class="group" part="group">
         <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"}">
@@ -482,4 +482,4 @@
         </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(),this._triggerButton?.addEventListener("click",this._onPrimaryClick),this._toggleButton?.addEventListener("click",this._onToggleClick),this._toggleButton?.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())}_applyPortalTokens(e){const t=window.getComputedStyle(this);x.forEach(n=>{const i=t.getPropertyValue(n).trim();i?e.style.setProperty(n,i):e.style.removeProperty(n)})}_mountMenu(){if(this._portalEl)return;const e=f.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")||"",r=this.getAttribute("menu-description")||"",d=i||r?(()=>{const s=document.createElement("div");if(s.className="menu-header",i){const a=document.createElement("p");a.className="menu-heading",a.textContent=i,s.appendChild(a)}if(r){const a=document.createElement("p");a.className="menu-description",a.textContent=r,s.appendChild(a)}return s})():null,o=document.createElement("ui-listbox");if(o.setAttribute("item-selector",'[slot="menuitem"]'),o.setAttribute("item-role","menuitem"),o.setAttribute("active-attribute","data-active"),this._menuItems=this._collectMenuItems(),this._menuItems.length===0){this.removeAttribute("open");return}const u=this.root.querySelector(".group")?.getBoundingClientRect();u&&Number.isFinite(u.width)&&u.width>0&&(t.style.minWidth=`${Math.max(260,Math.round(u.width))}px`),this._menuItems.forEach(s=>o.appendChild(s)),o.refresh(),t.append(n),d&&t.appendChild(d),t.appendChild(o),this._applyPortalTokens(t),this._portalRoot.appendChild(t),this._portalEl=t,this._listbox=o,this._positioner=h.createPositioner({floating:t,anchor:this.root.querySelector(".group")||this._toggleButton||this,placement:"bottom-start",offset:6,fitViewport:!0}),this._layer=g.createDismissableLayer({node:t,trigger:this._toggleButton,closeOnEscape:!0,closeOnPointerOutside:!0,onDismiss:()=>this.closeMenu()}),o.addEventListener("click",s=>this._onMenuClick(s)),o.addEventListener("pointerdown",this._onMenuPointerDown),o.addEventListener("pointermove",this._onMenuPointerMove,{passive:!0}),o.addEventListener("keydown",s=>this._onMenuKeyDown(s));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){const t=e.composedPath(),n=this._menuItems.find(i=>t.includes(i));if(!n){const i=e.target?.closest?.("[data-menu-item]");i&&this._selectMenuItem(i);return}this._selectMenuItem(n)}_onMenuPointerDown(e){e.target?.closest?.("[data-menu-item]")&&e.preventDefault()}_onMenuPointerMove(e){if(!this._listbox)return;const t=e.target?.closest?.("[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(){this._toggleButton?.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)},l))}_setMenuState(e){this._portalEl?.setAttribute("data-state",e)}_clearCloseTimer(){this._closeTimer!=null&&(window.clearTimeout(this._closeTimer),this._closeTimer=null)}_teardownMenu(e=!1){if(this._clearCloseTimer(),this._layer?.destroy(),this._layer=null,this._positioner?.destroy(),this._positioner=null,this._listbox=null,this._portalEl?.parentElement&&this._portalEl.parentElement.removeChild(this._portalEl),this._portalEl=null,this._portalRoot=null,this._syncToggleState(),e){const t=this._toggleButton||this._lastFocused;t&&t.isConnected&&queueMicrotask(()=>{try{t.focus({preventScroll:!0})}catch{t.focus()}})}this._lastFocused=null}}typeof customElements<"u"&&!customElements.get("ui-split-button")&&customElements.define("ui-split-button",c);exports.UISplitButton=c;
+    `),this._triggerButton=this.root.querySelector(".button"),this._toggleButton=this.root.querySelector(".toggle"),this._syncToggleState(),this._triggerButton?.addEventListener("click",this._onPrimaryClick),this._toggleButton?.addEventListener("click",this._onToggleClick),this._toggleButton?.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())}_applyPortalTokens(e){const t=window.getComputedStyle(this);v.forEach(n=>{const i=t.getPropertyValue(n).trim();i?e.style.setProperty(n,i):e.style.removeProperty(n)})}_mountMenu(){if(this._portalEl)return;const e=f.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=y;const i=this.getAttribute("menu-heading")||"",r=this.getAttribute("menu-description")||"",d=i||r?(()=>{const s=document.createElement("div");if(s.className="menu-header",i){const a=document.createElement("p");a.className="menu-heading",a.textContent=i,s.appendChild(a)}if(r){const a=document.createElement("p");a.className="menu-description",a.textContent=r,s.appendChild(a)}return s})():null,o=document.createElement("ui-listbox");if(o.setAttribute("item-selector",'[slot="menuitem"]'),o.setAttribute("item-role","menuitem"),o.setAttribute("active-attribute","data-active"),this._menuItems=this._collectMenuItems(),this._menuItems.length===0){this.removeAttribute("open");return}const u=this.root.querySelector(".group")?.getBoundingClientRect();u&&Number.isFinite(u.width)&&u.width>0&&(t.style.minWidth=`${Math.max(260,Math.round(u.width))}px`),this._menuItems.forEach(s=>o.appendChild(s)),o.refresh(),t.append(n),d&&t.appendChild(d),t.appendChild(o),this._applyPortalTokens(t),this._portalRoot.appendChild(t),this._portalEl=t,this._listbox=o,this._positioner=h.createPositioner({floating:t,anchor:this.root.querySelector(".group")||this._toggleButton||this,placement:"bottom-start",offset:6,fitViewport:!0}),x.liftToTopLayer(t),this._layer=g.createDismissableLayer({node:t,trigger:this._toggleButton,closeOnEscape:!0,closeOnPointerOutside:!0,onDismiss:()=>this.closeMenu()}),o.addEventListener("click",s=>this._onMenuClick(s)),o.addEventListener("pointerdown",this._onMenuPointerDown),o.addEventListener("pointermove",this._onMenuPointerMove,{passive:!0}),o.addEventListener("keydown",s=>this._onMenuKeyDown(s));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)=>w(n,i))}_onMenuClick(e){const t=e.composedPath(),n=this._menuItems.find(i=>t.includes(i));if(!n){const i=e.target?.closest?.("[data-menu-item]");i&&this._selectMenuItem(i);return}this._selectMenuItem(n)}_onMenuPointerDown(e){e.target?.closest?.("[data-menu-item]")&&e.preventDefault()}_onMenuPointerMove(e){if(!this._listbox)return;const t=e.target?.closest?.("[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(){this._toggleButton?.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)},l))}_setMenuState(e){this._portalEl?.setAttribute("data-state",e)}_clearCloseTimer(){this._closeTimer!=null&&(window.clearTimeout(this._closeTimer),this._closeTimer=null)}_teardownMenu(e=!1){if(this._clearCloseTimer(),this._layer?.destroy(),this._layer=null,this._positioner?.destroy(),this._positioner=null,this._listbox=null,this._portalEl?.parentElement&&this._portalEl.parentElement.removeChild(this._portalEl),this._portalEl=null,this._portalRoot=null,this._syncToggleState(),e){const t=this._toggleButton||this._lastFocused;t&&t.isConnected&&queueMicrotask(()=>{try{t.focus({preventScroll:!0})}catch{t.focus()}})}this._lastFocused=null}}typeof customElements<"u"&&!customElements.get("ui-split-button")&&customElements.define("ui-split-button",c);exports.UISplitButton=c;

package/dist/split-button.esm.js

@@ -1,9 +1,10 @@
 import { E as c } from "./ElementBase-BeZT54Hj.mjs";
-import { b } from "./portal-bR42gHvG.mjs";
+import { b } from "./portal-DeaM1tYY.mjs";
 import { c as f } from "./dismissable-layer-BmPIoK80.mjs";
-import { e as g } from "./positioner-D0VGxtYU.mjs";
+import { e as g } from "./positioner-BE8Nbho2.mjs";
+import { l as h } from "./overlay-motion-BX3dPLay.mjs";
 import "./listbox-hMVOhKHC.mjs";
-const l = 160, h = [
+const l = 160, x = [
   "--ui-split-button-menu-bg",
   "--ui-split-button-menu-color",
   "--ui-split-button-menu-border",
@@ -26,7 +27,7 @@ const l = 160, h = [
   "--ui-split-button-menu-item-min-height",
   "--ui-split-button-menu-item-radius",
   "--ui-split-button-menu-item-padding"
-], x = `
+], v = `
   :host {
     --ui-split-button-radius: 12px;
     --ui-split-button-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
@@ -189,7 +190,7 @@ const l = 160, h = [
   :host([density="comfortable"]) .toggle {
     inline-size: 46px;
   }
-`, v = `
+`, _ = `
   .menu {
     position: absolute;
     display: grid;
@@ -502,7 +503,7 @@ const l = 160, h = [
     }
   }
 `;
-function _(m, e) {
+function y(m, e) {
   const t = m.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");
@@ -510,7 +511,7 @@ function _(m, e) {
   }
   return t.id || (t.id = `ui-split-button-item-${Math.random().toString(36).slice(2, 9)}`), t;
 }
-class y extends c {
+class w extends c {
   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);
   }
@@ -552,7 +553,7 @@ class y extends c {
   render() {
     const e = this.getAttribute("label") || "Run action", t = this.getAttribute("menu-label") || "Open action menu";
     this.setContent(`
-      <style>${x}</style>
+      <style>${v}</style>
       <div class="group" part="group">
         <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"}">
@@ -573,7 +574,7 @@ class y extends c {
   }
   _applyPortalTokens(e) {
     const t = window.getComputedStyle(this);
-    h.forEach((n) => {
+    x.forEach((n) => {
       const i = t.getPropertyValue(n).trim();
       i ? e.style.setProperty(n, i) : e.style.removeProperty(n);
     });
@@ -586,7 +587,7 @@ class y extends c {
     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;
+    n.textContent = _;
     const i = this.getAttribute("menu-heading") || "", r = this.getAttribute("menu-description") || "", p = i || r ? (() => {
       const s = document.createElement("div");
       if (s.className = "menu-header", i) {
@@ -610,7 +611,7 @@ class y extends c {
       placement: "bottom-start",
       offset: 6,
       fitViewport: !0
-    }), this._layer = f({
+    }), h(t), this._layer = f({
       node: t,
       trigger: this._toggleButton,
       closeOnEscape: !0,
@@ -628,7 +629,7 @@ class y extends c {
   }
   _collectMenuItems() {
     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));
+    return (e ? e.assignedElements({ flatten: !0 }) : []).filter((n) => n.getAttribute("slot") === "menuitem").map((n, i) => y(n, i));
   }
   _onMenuClick(e) {
     const t = e.composedPath(), n = this._menuItems.find((i) => t.includes(i));
@@ -718,7 +719,7 @@ class y extends c {
     this._lastFocused = null;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-split-button") && customElements.define("ui-split-button", y);
+typeof customElements < "u" && !customElements.get("ui-split-button") && customElements.define("ui-split-button", w);
 export {
-  y as UISplitButton
+  w as UISplitButton
 };

package/dist/splitter.cjs.js

@@ -2,9 +2,9 @@
   :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);
+    --ui-splitter-line: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent));
+    --ui-splitter-accent: var(--ui-color-accent-solid, var(--ui-color-primary, #2563eb));
+    --ui-splitter-handle-bg: var(--ui-color-line-strong, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 90%, #64748b));
     display: block;
     position: relative;
     flex: 0 0 auto;
@@ -32,24 +32,65 @@
     place-items: center;
   }
 
+  /* The divider: a hairline across the whole gap, so the edge between two panels is always visible. */
+  .splitter::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(50% - 0.5px) auto;
+    inline-size: 1px;
+    background: var(--ui-splitter-line);
+    transition: background-color 140ms ease, inline-size 140ms ease, inset-inline-start 140ms ease;
+  }
+
+  :host([orientation="vertical"]) .splitter::before {
+    inset-block: calc(50% - 0.5px) auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: 1px;
+  }
+
+  /* The grip: a short pill in the middle that says "drag me". */
   .line {
-    inline-size: 2px;
-    block-size: 36px;
+    position: relative;
+    inline-size: 4px;
+    block-size: 28px;
     border-radius: 999px;
     background: var(--ui-splitter-handle-bg);
-    transition: background-color 140ms ease, transform 140ms ease;
+    transition: background-color 140ms ease;
   }
 
   :host([orientation="vertical"]) .line {
-    inline-size: 36px;
+    inline-size: 28px;
+    block-size: 4px;
+  }
+
+  :host(:hover) .splitter::before,
+  :host(:focus-visible) .splitter::before,
+  :host([data-dragging="true"]) .splitter::before {
+    background: var(--ui-splitter-accent);
+    inline-size: 2px;
+    inset-inline-start: calc(50% - 1px);
+  }
+
+  :host([orientation="vertical"]:hover) .splitter::before,
+  :host([orientation="vertical"]:focus-visible) .splitter::before,
+  :host([orientation="vertical"][data-dragging="true"]) .splitter::before {
+    inline-size: auto;
     block-size: 2px;
+    inset-inline-start: 0;
+    inset-block-start: calc(50% - 1px);
   }
 
   :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);
+    background: var(--ui-splitter-accent);
+  }
+
+  :host(:focus-visible) .line {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-splitter-accent));
+    outline-offset: 2px;
   }
 
   :host([disabled]) {
@@ -58,7 +99,8 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .line {
+    .line,
+    .splitter::before {
       transition: none !important;
     }
   }