@editora/ui-core 0.1.25 → 0.2.1

package/dist/select.esm.js

@@ -1,36 +1,38 @@
 import { E as R } from "./ElementBase-BeZT54Hj.mjs";
-import { e as M } from "./control-name-Bpj7F34X.mjs";
-import { f as q, b as $, a as L } from "./collection-C7URGjEI.mjs";
-import { r as F } from "./listbox-hMVOhKHC.mjs";
-const D = `
+import { s as M, O as $ } from "./overlay-motion-BX3dPLay.mjs";
+import { e as q } from "./control-name-Bpj7F34X.mjs";
+import { f as L, b as F, a as D } from "./collection-C7URGjEI.mjs";
+import { r as O } from "./listbox-hMVOhKHC.mjs";
+const T = `
+  ${$}
+
   :host {
     --ui-select-width: var(--ui-width, min(340px, 100%));
-    --ui-select-min-height: var(--base-select-height-md, 42px);
-    --ui-select-radius: var(--base-select-radius, var(--ui-radius, 4px));
-    --ui-select-padding-x: var(--base-select-padding-x, 12px);
+    --ui-select-min-height: var(--base-select-height-md, var(--ui-control-height-2, 32px));
+    --ui-select-radius: var(--base-select-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
+    --ui-select-padding-x: var(--base-select-padding-x, var(--ui-control-padding-inline-2, 12px));
+    --ui-select-font-size: var(--ui-control-font-size-2, 14px);
 
     --ui-select-bg: var(--base-select-bg, var(--ui-color-surface, #ffffff));
-    --ui-select-border: var(--base-select-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
+    --ui-select-border: var(--base-select-border, 1px solid var(--ui-color-line, var(--ui-color-border, #cbd5e1)));
     --ui-select-border-color: color-mix(in srgb, var(--ui-select-border) 100%, transparent);
     --ui-select-text: var(--ui-color-text, #0f172a);
     --ui-select-muted: var(--ui-color-muted, #526175);
-    --ui-select-placeholder: color-mix(in srgb, var(--ui-select-text) 44%, transparent);
+    --ui-select-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-select-text) 62%, transparent));
     --ui-select-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-select-accent: var(--ui-color-primary, #2563eb);
     --ui-select-success: var(--ui-color-success, #15803d);
     --ui-select-warning: var(--ui-color-warning, #b45309);
-    --ui-select-error: var(--ui-color-danger, #dc2626);
+    --ui-select-error: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
 
     --ui-select-shadow: var(--base-select-shadow, none);
     --ui-select-elevation: var(--ui-select-shadow);
-    --ui-select-menu-bg: var(--base-select-menu-bg, color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent));
+    --ui-select-menu-bg: var(--base-select-menu-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-select-menu-color: var(--base-select-menu-color, var(--ui-select-text));
-    --ui-select-menu-border-color: color-mix(in srgb, var(--ui-select-border-color) 82%, transparent);
+    --ui-select-menu-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-select-border-color) 82%, transparent));
     --ui-select-menu-border: 1px solid var(--ui-select-menu-border-color);
-    --ui-select-menu-radius: var(--base-select-menu-radius, var(--ui-select-radius));
-    --ui-select-menu-shadow:
-      0 14px 34px rgba(15, 23, 42, 0.16),
-      0 3px 10px rgba(15, 23, 42, 0.08);
+    --ui-select-menu-radius: var(--base-select-menu-radius, calc(var(--ui-radius, 6px) + 2px));
+    --ui-select-menu-shadow: var(--shadow-5, 0 14px 34px rgba(15, 23, 42, 0.16));
     --ui-select-menu-padding: 0px;
     --ui-select-menu-gap: 8px;
     --ui-select-menu-max-height: min(320px, var(--ui-select-available-height, 320px));
@@ -102,6 +104,7 @@ const D = `
   }
 
   .control {
+    box-sizing: border-box;
     min-inline-size: 0;
     position: relative;
     display: block;
@@ -121,10 +124,14 @@ const D = `
 
   .control[data-open="true"],
   .control:focus-within {
-    border-color: color-mix(in srgb, var(--ui-select-focus) 62%, var(--ui-select-border-color));
-    box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--ui-select-focus) 18%, transparent),
-      var(--ui-select-elevation);
+    border-color: var(--ui-ring-color, var(--ui-select-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-select-focus));
+    outline-offset: -1px;
+    box-shadow: var(--ui-select-elevation);
+  }
+
+  .control:hover:not(:focus-within):not([data-open="true"]) {
+    border-color: var(--ui-color-line-strong, var(--ui-select-border-color));
   }
 
   .leading,
@@ -163,6 +170,7 @@ const D = `
   }
 
   .trigger {
+    display: block;
     inline-size: 100%;
     min-inline-size: 0;
     block-size: calc(var(--ui-select-min-height) - 2px);
@@ -171,8 +179,8 @@ const D = `
     outline: none;
     background: transparent;
     color: var(--ui-select-text);
-    font: 500 14px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    padding: 8px calc(var(--ui-select-padding-x) + 24px) 8px var(--ui-select-padding-x);
+    font: 500 var(--ui-select-font-size)/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 0 calc(var(--ui-select-padding-x) + 24px) 0 var(--ui-select-padding-x);
     margin: 0;
     cursor: pointer;
     text-align: left;
@@ -274,9 +282,7 @@ const D = `
     overflow-x: hidden;
     border: var(--ui-select-menu-border);
     border-radius: var(--ui-select-menu-radius);
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--ui-select-accent) 3%, transparent) 0%, transparent 100%),
-      var(--ui-select-menu-bg);
+    background: var(--ui-select-menu-bg);
     color: var(--ui-select-menu-color);
     box-shadow: var(--ui-select-menu-shadow);
     padding: var(--ui-select-menu-padding);
@@ -305,18 +311,8 @@ const D = `
     background-clip: padding-box;
   }
 
-  .panel[data-placement="top"] .menu {
-    transform-origin: bottom center;
-    animation: ui-select-menu-enter-top 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-
-  .panel[data-placement="bottom"] .menu {
-    transform-origin: top center;
-    animation: ui-select-menu-enter-bottom 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-
   .menu-group {
-    color: color-mix(in srgb, var(--ui-select-muted) 88%, transparent);
+    color: var(--ui-select-muted);
     font: 700 11px/1.3 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -479,17 +475,14 @@ const D = `
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-select-min-height: 34px;
-    --ui-select-padding-x: 10px;
+    --ui-select-min-height: var(--base-select-height-sm, var(--ui-control-height-1, 24px));
+    --ui-select-padding-x: var(--ui-control-padding-inline-1, 8px);
+    --ui-select-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-select-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
     --ui-select-menu-gap: 6px;
     --ui-select-menu-item-height: 34px;
   }
 
-  :host([size="sm"]) .trigger,
-  :host([size="1"]) .trigger {
-    font-size: 12px;
-  }
-
   :host([size="sm"]) .menu-item,
   :host([size="1"]) .menu-item {
     font-size: 12px;
@@ -498,17 +491,14 @@ const D = `
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-select-min-height: 46px;
-    --ui-select-padding-x: 13px;
+    --ui-select-min-height: var(--base-select-height-lg, var(--ui-control-height-3, 40px));
+    --ui-select-padding-x: var(--ui-control-padding-inline-3, 16px);
+    --ui-select-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-select-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     --ui-select-menu-gap: 10px;
     --ui-select-menu-item-height: 42px;
   }
 
-  :host([size="lg"]) .trigger,
-  :host([size="3"]) .trigger {
-    font-size: 15px;
-  }
-
   :host([size="lg"]) .menu-item,
   :host([size="3"]) .menu-item {
     font-size: 14px;
@@ -659,7 +649,7 @@ const D = `
   :host([invalid]) .control,
   :host([data-invalid="true"]) .control {
     box-shadow:
-      0 0 0 4px color-mix(in srgb, var(--ui-select-error) 18%, transparent),
+      0 0 0 1px var(--ui-select-error),
       var(--ui-select-elevation);
   }
 
@@ -673,28 +663,6 @@ const D = `
     }
   }
 
-  @keyframes ui-select-menu-enter-bottom {
-    from {
-      opacity: 0;
-      transform: translateY(-4px) scale(0.985);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @keyframes ui-select-menu-enter-top {
-    from {
-      opacity: 0;
-      transform: translateY(4px) scale(0.985);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .control,
     .indicator,
@@ -755,7 +723,7 @@ function h(p) {
 function v(p) {
   return String(p).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function O(p) {
+function U(p) {
   if (!p) return null;
   const e = String(p).trim();
   return e ? e === "none" ? "4px" : e === "full" ? "999px" : e === "large" ? "16px" : /^-?\\d+(\\.\\d+)?$/.test(e) ? `${e}px` : e : null;
@@ -789,7 +757,7 @@ const S = /* @__PURE__ */ new Set([
   "data-valid",
   "close-on-scroll"
 ]);
-class T extends R {
+class B extends R {
   constructor() {
     super(), this._controlEl = null, this._triggerEl = null, this._valueEl = null, this._panelEl = null, this._menuEl = null, this._observer = null, this._formUnregister = null, this._optionsSyncRaf = 0, this._panelPlacementRaf = 0, this._uid = Math.random().toString(36).slice(2, 8), this._options = [], this._menuItems = [], this._optionsFingerprint = "", this._menuRenderFingerprint = "", this._open = !1, this._activeIndex = -1, this._placement = "bottom", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerDown = this._onRootPointerDown.bind(this), this._onRootPointerMove = this._onRootPointerMove.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this), this._onWindowScroll = this._onWindowScroll.bind(this);
   }
@@ -1075,13 +1043,13 @@ class T extends R {
     return e.map((t) => `${t.value}
${t.label}
${t.disabled ? "1" : "0"}
${t.group}`).join("");
   }
   _firstEnabledIndex() {
-    return q(this._options, (e) => e.disabled);
+    return L(this._options, (e) => e.disabled);
   }
   _lastEnabledIndex() {
-    return $(this._options, (e) => e.disabled);
+    return F(this._options, (e) => e.disabled);
   }
   _selectedIndex() {
-    return L(this._options, this.value, (e) => e.value);
+    return D(this._options, this.value, (e) => e.value);
   }
   _checkPlacement() {
     return this.getAttribute("check-placement") === "start" ? "start" : "end";
@@ -1149,8 +1117,8 @@ class T extends R {
       a.className = "menu-item-label", a.textContent = r.label;
       const c = document.createElement("span");
       c.className = "menu-item-check", c.setAttribute("aria-hidden", "true");
-      const b = this.showCheck, m = this._checkPlacement();
-      c.hidden = !b, n.setAttribute("data-check-placement", m), b && m === "start" ? n.append(c, a) : n.append(a, c), e.appendChild(n), this._menuItems.push(n);
+      const m = this.showCheck, b = this._checkPlacement();
+      c.hidden = !m, n.setAttribute("data-check-placement", b), m && b === "start" ? n.append(c, a) : n.append(a, c), e.appendChild(n), this._menuItems.push(n);
     });
     const o = this._menuItems[0] || null, l = this._menuItems[this._menuItems.length - 1] || null;
     o && o.setAttribute("data-edge-start", "true"), l && l.setAttribute("data-edge-end", "true"), e.refresh(), this._menuRenderFingerprint = t, this._syncMenuSelectionState(), this._schedulePanelPlacement();
@@ -1161,7 +1129,7 @@ class T extends R {
     this._menuItems.forEach((i) => {
       const s = Number(i.dataset.index || "-1");
       i.setAttribute("aria-selected", s === e ? "true" : "false");
-    }), this._activeIndex = F(this._options, {
+    }), this._activeIndex = O(this._options, {
       selectedIndex: e,
       getDisabled: (i) => i.disabled
     });
@@ -1192,13 +1160,13 @@ class T extends R {
   _syncControlState() {
     const e = this._triggerEl, t = this._controlEl, i = this._valueEl, s = this._panelEl;
     if (!e || !t || !i || !s) return;
-    const o = this.getAttribute("label") || "", l = this.getAttribute("description") || "", r = this.getAttribute("error") || "", u = this.getAttribute("aria-label") || o || "Select", n = h(this.getAttribute("loading")), a = h(this.getAttribute("required")) || this.hasAttribute("required"), c = this.getAttribute("tabindex"), b = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", m = O(this.getAttribute("radius")), d = this.root.querySelector(".label"), x = this.root.querySelector(".label-text"), g = this.root.querySelector(".description"), f = this.root.querySelector(".description-text"), _ = this.root.querySelector(".error"), y = this.root.querySelector(".error-text"), w = this.root.querySelector(".meta"), A = this.root.querySelector(".required"), E = !!o || this._hasSlotContent("label"), k = !!l || this._hasSlotContent("description"), C = !!r || this._hasSlotContent("error"), I = this._hasSlotContent("leading"), z = this._hasSlotContent("trailing"), P = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
-    x && (x.textContent = o), f && (f.textContent = l), y && (y.textContent = r), d && (d.hidden = !E), g && (g.hidden = !k), _ && (_.hidden = !C), w && (w.hidden = !E && !k), A && (A.hidden = !a), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", P ? "true" : "false"), t.setAttribute("data-has-leading", String(I)), t.setAttribute("data-has-trailing", String(z)), e.disabled = this.disabled, e.setAttribute("aria-label", u), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", n ? "true" : "false"), e.setAttribute("aria-required", a ? "true" : "false"), b ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), c != null && !this.disabled ? e.setAttribute("tabindex", c) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.hidden = !this._open, s.setAttribute("data-placement", this._placement), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), m && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", m) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", n ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._schedulePanelPlacement();
+    const o = this.getAttribute("label") || "", l = this.getAttribute("description") || "", r = this.getAttribute("error") || "", u = this.getAttribute("aria-label") || o || "Select", n = h(this.getAttribute("loading")), a = h(this.getAttribute("required")) || this.hasAttribute("required"), c = this.getAttribute("tabindex"), m = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", b = U(this.getAttribute("radius")), d = this.root.querySelector(".label"), x = this.root.querySelector(".label-text"), g = this.root.querySelector(".description"), f = this.root.querySelector(".description-text"), _ = this.root.querySelector(".error"), y = this.root.querySelector(".error-text"), w = this.root.querySelector(".meta"), A = this.root.querySelector(".required"), E = !!o || this._hasSlotContent("label"), k = !!l || this._hasSlotContent("description"), C = !!r || this._hasSlotContent("error"), I = this._hasSlotContent("leading"), z = this._hasSlotContent("trailing"), P = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
+    x && (x.textContent = o), f && (f.textContent = l), y && (y.textContent = r), d && (d.hidden = !E), g && (g.hidden = !k), _ && (_.hidden = !C), w && (w.hidden = !E && !k), A && (A.hidden = !a), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", P ? "true" : "false"), t.setAttribute("data-has-leading", String(I)), t.setAttribute("data-has-trailing", String(z)), e.disabled = this.disabled, e.setAttribute("aria-label", u), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", n ? "true" : "false"), e.setAttribute("aria-required", a ? "true" : "false"), m ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), c != null && !this.disabled ? e.setAttribute("tabindex", c) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.setAttribute("data-placement", this._placement), M(s, this._open, String(this._placement).split("-")[0]), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), b && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", b) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", n ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._schedulePanelPlacement();
   }
   render() {
-    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("error") || "", s = h(this.getAttribute("required")) || this.hasAttribute("required"), o = this.getAttribute("aria-label") || e || "Select", l = !!e || this._hasSlotContent("label"), r = !!t || this._hasSlotContent("description"), u = !!i || this._hasSlotContent("error"), n = this._hasSlotContent("leading"), a = this._hasSlotContent("trailing"), c = `${this._uid}-label`, b = `${this._uid}-description`, m = `${this._uid}-error`, d = `${this._uid}-trigger`, x = `${this._uid}-listbox`, g = M(this, this._uid), f = [r ? b : "", u ? m : "", g.id].filter(Boolean).join(" ");
+    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("error") || "", s = h(this.getAttribute("required")) || this.hasAttribute("required"), o = this.getAttribute("aria-label") || e || "Select", l = !!e || this._hasSlotContent("label"), r = !!t || this._hasSlotContent("description"), u = !!i || this._hasSlotContent("error"), n = this._hasSlotContent("leading"), a = this._hasSlotContent("trailing"), c = `${this._uid}-label`, m = `${this._uid}-description`, b = `${this._uid}-error`, d = `${this._uid}-trigger`, x = `${this._uid}-listbox`, g = q(this, this._uid), f = [r ? m : "", u ? b : "", g.id].filter(Boolean).join(" ");
     this.setContent(`
-      <style>${D}</style>
+      <style>${T}</style>
       <slot class="content-slot"></slot>
       <div class="root" part="root">
         <div class="meta" part="meta" ${l || r ? "" : "hidden"}>
@@ -1206,7 +1174,7 @@ class T extends R {
             <slot name="label"><span class="label-text">${v(e)}</span></slot>
             <span class="required" aria-hidden="true" ${s ? "" : "hidden"}>*</span>
           </label>
-          <p class="description" part="description" id="${b}" ${r ? "" : "hidden"}>
+          <p class="description" part="description" id="${m}" ${r ? "" : "hidden"}>
             <slot name="description"><span class="description-text">${v(t)}</span></slot>
           </p>
         </div>
@@ -1246,7 +1214,7 @@ class T extends R {
             ></ui-listbox>
           </div>
         </div>
-        <p class="error" part="error" id="${m}" ${u ? "" : "hidden"}>
+        <p class="error" part="error" id="${b}" ${u ? "" : "hidden"}>
           <slot name="error"><span class="error-text">${v(i)}</span></slot>
         </p>
         ${g.html}
@@ -1254,7 +1222,7 @@ class T extends R {
     `), this._controlEl = this.root.querySelector(".control"), this._triggerEl = this.root.querySelector(".trigger"), this._valueEl = this.root.querySelector(".value"), this._panelEl = this.root.querySelector(".panel"), this._menuEl = this.root.querySelector(".menu"), this._menuItems = [], this._menuRenderFingerprint = "", this._syncOptionsData(), this._renderMenu(), !this._open && this._panelEl && (this._panelEl.hidden = !0), this._syncControlState();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", T);
+typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", B);
 export {
-  T as UISelect
+  B as UISelect
 };

package/dist/selection-popup.cjs.js

@@ -2,17 +2,16 @@
   :host {
     --ui-selection-popup-z: 1280;
     --ui-selection-popup-offset: 10px;
-    --ui-selection-popup-radius: 12px;
+    --ui-selection-popup-radius: calc(var(--ui-radius, 6px) + 2px);
     --ui-selection-popup-padding: 8px;
-    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-selection-popup-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-selection-popup-color: var(--ui-color-text, #0f172a);
     --ui-selection-popup-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-selection-popup-border: 1px solid var(--ui-selection-popup-border-color);
     --ui-selection-popup-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-selection-popup-accent: var(--ui-color-primary, #2563eb);
     --ui-selection-popup-enter-y: 6px;
-    --ui-selection-popup-shadow:
-      none;
+    --ui-selection-popup-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.12));
     color-scheme: light dark;
     position: fixed;
     inset: 0;

package/dist/selection-popup.esm.js

@@ -3,17 +3,16 @@ const E = `
   :host {
     --ui-selection-popup-z: 1280;
     --ui-selection-popup-offset: 10px;
-    --ui-selection-popup-radius: 12px;
+    --ui-selection-popup-radius: calc(var(--ui-radius, 6px) + 2px);
     --ui-selection-popup-padding: 8px;
-    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-selection-popup-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-selection-popup-color: var(--ui-color-text, #0f172a);
     --ui-selection-popup-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-selection-popup-border: 1px solid var(--ui-selection-popup-border-color);
     --ui-selection-popup-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-selection-popup-accent: var(--ui-color-primary, #2563eb);
     --ui-selection-popup-enter-y: 6px;
-    --ui-selection-popup-shadow:
-      none;
+    --ui-selection-popup-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.12));
     color-scheme: light dark;
     position: fixed;
     inset: 0;

package/dist/semantic-tokens.d.ts

@@ -0,0 +1,17 @@
+import type { ThemeTokens } from './theme';
+/**
+ * Semantic layer of the design tokens.
+ *
+ * Components should read roles ("the hover fill", "the focus ring", "control height 2"),
+ * not pick a step off a colour scale themselves. Every value here is derived from the
+ * 12-step scales of the active theme, so it follows the accent palette, the gray scale
+ * and light/dark mode without a component knowing about any of them.
+ *
+ * Step meaning follows the Radix Colors convention:
+ *   1-2 app/subtle background, 3-5 component fill (rest/hover/active),
+ *   6-8 borders (subtle/default/strong), 9-10 solid fill (rest/hover),
+ *   11-12 text (secondary/strong).
+ */
+export type SemanticTokenMap = Record<string, string>;
+export declare function deriveSemanticTokens(tokens: ThemeTokens): SemanticTokenMap;
+//# sourceMappingURL=semantic-tokens.d.ts.map

package/dist/semantic-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../src/semantic-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAWtD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,CAkE1E"}

package/dist/separator.cjs.js

@@ -111,22 +111,22 @@
 
   :host([tone="brand"]) {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 38%, transparent);
-    --ui-separator-label-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 68%, var(--ui-color-muted, #526175));
+    --ui-separator-label-color: var(--ui-color-accent-text, color-mix(in srgb, var(--ui-color-primary, #2563eb) 68%, var(--ui-color-muted, #526175)));
   }
 
   :host([tone="success"]) {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-success, #15803d) 40%, transparent);
-    --ui-separator-label-color: color-mix(in srgb, var(--ui-color-success, #15803d) 70%, var(--ui-color-muted, #526175));
+    --ui-separator-label-color: var(--ui-color-success-text, color-mix(in srgb, var(--ui-color-success, #15803d) 70%, var(--ui-color-muted, #526175)));
   }
 
   :host([tone="warning"]) {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 40%, transparent);
-    --ui-separator-label-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 70%, var(--ui-color-muted, #526175));
+    --ui-separator-label-color: var(--ui-color-warning-text, color-mix(in srgb, var(--ui-color-warning, #b45309) 70%, var(--ui-color-muted, #526175)));
   }
 
   :host([tone="danger"]) {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 40%, transparent);
-    --ui-separator-label-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 70%, var(--ui-color-muted, #526175));
+    --ui-separator-label-color: var(--ui-color-danger-text, color-mix(in srgb, var(--ui-color-danger, #dc2626) 70%, var(--ui-color-muted, #526175)));
   }
 
   :host([variant="dashed"]) .line {
@@ -207,13 +207,13 @@
       --ui-separator-glow: none;
     }
   }
-`;function p(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class i extends s.ElementBase{static get observedAttributes(){return["orientation","headless","variant","tone","size","inset","label","decorative"]}attributeChangedCallback(e,r,a){r!==a&&this.isConnected&&this.requestRender()}render(){const e=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",r=this.hasAttribute("decorative"),a=this.getAttribute("label")||"",t=e==="horizontal"&&(a.length>0||!!this.querySelector('[slot="label"]')),n=r?"presentation":"separator";this.setContent(`
+`;function c(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class i extends s.ElementBase{static get observedAttributes(){return["orientation","headless","variant","tone","size","inset","label","decorative"]}attributeChangedCallback(e,r,a){r!==a&&this.isConnected&&this.requestRender()}render(){const e=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",r=this.hasAttribute("decorative"),a=this.getAttribute("label")||"",t=e==="horizontal"&&(a.length>0||!!this.querySelector('[slot="label"]')),n=r?"presentation":"separator";this.setContent(`
       <style>${l}</style>
       <div class="root" part="root" role="${n}" ${r?"":`aria-orientation="${e}"`}>
         <div class="group" part="group" data-has-label="${t}">
           <span class="line line-start" part="line line-start"></span>
           <span class="label" part="label" ${t?"":"hidden"}>
-            <slot name="label">${p(a)}</slot>
+            <slot name="label">${c(a)}</slot>
           </span>
           <span class="line line-end" part="line line-end" ${t?"":"hidden"}></span>
         </div>

package/dist/separator.esm.js

@@ -112,22 +112,22 @@ const s = `
 
   :host([tone="brand"]) {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 38%, transparent);
-    --ui-separator-label-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 68%, var(--ui-color-muted, #526175));
+    --ui-separator-label-color: var(--ui-color-accent-text, color-mix(in srgb, var(--ui-color-primary, #2563eb) 68%, var(--ui-color-muted, #526175)));
   }
 
   :host([tone="success"]) {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-success, #15803d) 40%, transparent);
-    --ui-separator-label-color: color-mix(in srgb, var(--ui-color-success, #15803d) 70%, var(--ui-color-muted, #526175));
+    --ui-separator-label-color: var(--ui-color-success-text, color-mix(in srgb, var(--ui-color-success, #15803d) 70%, var(--ui-color-muted, #526175)));
   }
 
   :host([tone="warning"]) {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 40%, transparent);
-    --ui-separator-label-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 70%, var(--ui-color-muted, #526175));
+    --ui-separator-label-color: var(--ui-color-warning-text, color-mix(in srgb, var(--ui-color-warning, #b45309) 70%, var(--ui-color-muted, #526175)));
   }
 
   :host([tone="danger"]) {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 40%, transparent);
-    --ui-separator-label-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 70%, var(--ui-color-muted, #526175));
+    --ui-separator-label-color: var(--ui-color-danger-text, color-mix(in srgb, var(--ui-color-danger, #dc2626) 70%, var(--ui-color-muted, #526175)));
   }
 
   :host([variant="dashed"]) .line {
@@ -212,7 +212,7 @@ const s = `
 function l(o) {
   return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-class p extends n {
+class c extends n {
   static get observedAttributes() {
     return ["orientation", "headless", "variant", "tone", "size", "inset", "label", "decorative"];
   }
@@ -235,7 +235,7 @@ class p extends n {
     `);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-separator") && customElements.define("ui-separator", p);
+typeof customElements < "u" && !customElements.get("ui-separator") && customElements.define("ui-separator", c);
 export {
-  p as UISeparator
+  c as UISeparator
 };