@editora/ui-core 0.1.24 → 0.2.0

package/dist/tooltip.esm.js

@@ -1,6 +1,7 @@
-import { E as x } from "./ElementBase-BeZT54Hj.mjs";
-import { s as E } from "./portal-bR42gHvG.mjs";
-const d = 140, w = 120, m = `
+import { E } from "./ElementBase-BeZT54Hj.mjs";
+import { s as w } from "./portal-DeaM1tYY.mjs";
+import { l as d } from "./overlay-motion-BX3dPLay.mjs";
+const m = 140, y = 120, _ = `
   .tooltip {
     color-scheme: light dark;
     --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-text, #0f172a) 92%, #0b1220 8%);
@@ -25,7 +26,7 @@ const d = 140, w = 120, m = `
     letter-spacing: 0.01em;
     opacity: 0;
     transform: translate3d(0, 4px, 0) scale(0.98);
-    transition: opacity ${d}ms ease, transform ${d}ms ease;
+    transition: opacity ${m}ms ease, transform ${m}ms ease;
     z-index: 3000;
     will-change: transform, opacity;
   }
@@ -159,26 +160,26 @@ const d = 140, w = 120, m = `
     }
   }
 `;
-function b(i) {
+function f(i) {
   if (i == null) return !1;
   const t = String(i).toLowerCase();
   return t !== "false" && t !== "0" && t !== "off";
 }
-function a(i, t) {
+function l(i, t) {
   const e = Number(i);
   return Number.isFinite(e) ? e : t;
 }
-function _(i) {
+function b(i) {
   return i === "top" || i === "right" || i === "bottom" || i === "left" ? i : "top";
 }
 function A(i) {
   const t = (i || "hover focus").trim().toLowerCase();
   return t ? new Set(t.split(/[\s,]+/).filter(Boolean)) : /* @__PURE__ */ new Set(["hover", "focus"]);
 }
-function l(i) {
-  return b(i);
+function u(i) {
+  return f(i);
 }
-class y extends x {
+class T extends E {
   constructor() {
     super(), this._portalEl = null, this._cleanup = null, this._id = `ui-tooltip-${Math.random().toString(36).slice(2, 9)}`, this._isOpen = !1, this._syncingOpenAttr = !1, this._openTimer = null, this._closeTimer = null, this._exitTimer = null, this._pointerInsidePortal = !1, this._onMouseEnter = this._onMouseEnter.bind(this), this._onMouseLeave = this._onMouseLeave.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onPortalMouseEnter = this._handlePortalMouseEnter.bind(this), this._onPortalMouseLeave = this._handlePortalMouseLeave.bind(this), this._onDocumentPointerDown = this._handleDocumentPointerDown.bind(this);
   }
@@ -237,16 +238,16 @@ class y extends x {
   _scheduleShow(t) {
     if (this.hasAttribute("disabled")) return;
     this._clearTimers();
-    const e = typeof t == "number" ? t : a(this.getAttribute("delay"), 250);
+    const e = typeof t == "number" ? t : l(this.getAttribute("delay"), 250);
     this._openTimer = setTimeout(() => {
       this.show(), this._openTimer = null;
     }, Math.max(0, e));
   }
   _scheduleHide(t) {
     this._clearTimers();
-    const e = typeof t == "number" ? t : a(this.getAttribute("close-delay"), 120);
+    const e = typeof t == "number" ? t : l(this.getAttribute("close-delay"), 120);
     this._closeTimer = setTimeout(() => {
-      if (l(this.getAttribute("interactive")) && this._pointerInsidePortal) {
+      if (u(this.getAttribute("interactive")) && this._pointerInsidePortal) {
         this._closeTimer = null;
         return;
       }
@@ -258,7 +259,7 @@ class y extends x {
     const t = document.createElement("div");
     if (t.className = "tooltip", t.id = this._id, t.setAttribute("role", "tooltip"), !this.hasAttribute("headless")) {
       const o = document.createElement("style");
-      o.setAttribute("data-ui-tooltip-style", ""), o.textContent = m, t.appendChild(o);
+      o.setAttribute("data-ui-tooltip-style", ""), o.textContent = _, t.appendChild(o);
     }
     const e = document.createElement("div");
     return e.className = "tooltip-content", t.appendChild(e), t.addEventListener("mouseenter", this._onPortalMouseEnter), t.addEventListener("mouseleave", this._onPortalMouseLeave), this._portalEl = t, t;
@@ -267,34 +268,34 @@ class y extends x {
     this._pointerInsidePortal = !0, this._closeTimer && (clearTimeout(this._closeTimer), this._closeTimer = null);
   }
   _handlePortalMouseLeave() {
-    this._pointerInsidePortal = !1, l(this.getAttribute("interactive")) && this._scheduleHide();
+    this._pointerInsidePortal = !1, u(this.getAttribute("interactive")) && this._scheduleHide();
   }
   _renderPortalContent() {
-    const t = this._ensurePortalEl(), e = this.getAttribute("text") || this.getAttribute("aria-label") || "", o = _(this.getAttribute("placement")), u = this.getAttribute("variant") || "default", f = this.getAttribute("size") || "md", v = this.getAttribute("tone") || "default", h = !this.hasAttribute("arrow") || b(this.getAttribute("arrow")), g = l(this.getAttribute("interactive")), c = this.hasAttribute("headless"), r = t.querySelector("style[data-ui-tooltip-style]");
-    if (!c && !r) {
+    const t = this._ensurePortalEl(), e = this.getAttribute("text") || this.getAttribute("aria-label") || "", o = b(this.getAttribute("placement")), r = this.getAttribute("variant") || "default", v = this.getAttribute("size") || "md", g = this.getAttribute("tone") || "default", h = !this.hasAttribute("arrow") || f(this.getAttribute("arrow")), x = u(this.getAttribute("interactive")), c = this.hasAttribute("headless"), n = t.querySelector("style[data-ui-tooltip-style]");
+    if (!c && !n) {
       const s = document.createElement("style");
-      s.setAttribute("data-ui-tooltip-style", ""), s.textContent = m, t.prepend(s);
-    } else c && r && r.remove();
-    t.setAttribute("data-variant", u), t.setAttribute("data-size", f), t.setAttribute("data-tone", v), t.setAttribute("data-placement", o), t.setAttribute("data-interactive", g ? "true" : "false");
+      s.setAttribute("data-ui-tooltip-style", ""), s.textContent = _, t.prepend(s);
+    } else c && n && n.remove();
+    t.setAttribute("data-variant", r), t.setAttribute("data-size", v), t.setAttribute("data-tone", g), t.setAttribute("data-placement", o), t.setAttribute("data-interactive", x ? "true" : "false");
     const p = t.querySelector(".tooltip-content");
     p && (p.textContent = e);
-    const n = t.querySelector(".arrow");
-    if (h && !n) {
+    const a = t.querySelector(".arrow");
+    if (h && !a) {
       const s = document.createElement("div");
       s.className = "arrow", t.appendChild(s);
     }
-    !h && n && n.remove();
+    !h && a && a.remove();
   }
   _reposition() {
     if (!this._portalEl) return;
     this._cleanup && (this._cleanup(), this._cleanup = null);
-    const t = _(this.getAttribute("placement")), e = a(this.getAttribute("offset"), 8);
-    this._cleanup = E(this, this._portalEl, {
+    const t = b(this.getAttribute("placement")), e = l(this.getAttribute("offset"), 8);
+    this._cleanup = w(this, this._portalEl, {
       placement: t,
       offset: e,
       shift: !0,
       flip: !0
-    });
+    }), this._portalEl.getAttribute("data-state") === "open" && d(this._portalEl);
   }
   _syncOpenAttr(t) {
     this._syncingOpenAttr = !0;
@@ -306,16 +307,21 @@ class y extends x {
   }
   show() {
     if (this.hasAttribute("disabled") || !(this.getAttribute("text") || this.getAttribute("aria-label") || "").trim()) return;
-    this._clearTimers(), this._renderPortalContent(), this._reposition(), this._portalEl && (this._portalEl.classList.remove("closing"), this._portalEl.classList.add("show"), this.setAttribute("aria-describedby", this._id)), this._bindDocumentDismiss();
+    this._clearTimers(), this._renderPortalContent(), this._reposition(), this._portalEl && (this._portalEl.classList.remove("closing"), this._portalEl.classList.add("show"), this._portalEl.setAttribute("data-state", "open"), d(this._portalEl), this.setAttribute("aria-describedby", this._id)), this._bindDocumentDismiss();
     const e = this._isOpen;
     this._isOpen = !0, this._syncOpenAttr(!0), e || (this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { open: !0 }, bubbles: !0, composed: !0 })));
   }
   hide(t = !1) {
-    this._clearTimers(), this._unbindDocumentDismiss(), this._cleanup && (this._cleanup(), this._cleanup = null);
+    this._clearTimers(), this._unbindDocumentDismiss(), this._cleanup && (this._cleanup({ remove: !1 }), this._cleanup = null);
     const e = this._portalEl;
-    e && (e.classList.remove("show"), e.classList.add("closing"), t ? this._removePortal() : this._exitTimer = setTimeout(() => {
-      this._removePortal(), this._exitTimer = null;
-    }, w)), this._pointerInsidePortal = !1, this.removeAttribute("aria-describedby");
+    if (e) {
+      e.classList.remove("show"), e.classList.add("closing"), e.setAttribute("data-state", "closed");
+      const r = typeof getComputedStyle == "function" ? parseFloat(getComputedStyle(e).transitionDuration || "0") : 0;
+      t || !(r > 0) ? this._removePortal() : this._exitTimer = setTimeout(() => {
+        this._removePortal(), this._exitTimer = null;
+      }, y);
+    }
+    this._pointerInsidePortal = !1, this.removeAttribute("aria-describedby");
     const o = this._isOpen;
     this._isOpen = !1, this._syncOpenAttr(!1), o && (this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { open: !1 }, bubbles: !0, composed: !0 })));
   }
@@ -360,7 +366,7 @@ class y extends x {
     this.setContent("<slot></slot>");
   }
 }
-typeof customElements < "u" && !customElements.get("ui-tooltip") && customElements.define("ui-tooltip", y);
+typeof customElements < "u" && !customElements.get("ui-tooltip") && customElements.define("ui-tooltip", T);
 export {
-  y as UITooltip
+  T as UITooltip
 };

package/dist/transfer-list.cjs.js

@@ -5,20 +5,20 @@
     --ui-transfer-muted: var(--ui-color-muted, #526175);
     --ui-transfer-shell-bg: transparent;
     --ui-transfer-shell-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 84%, transparent);
-    --ui-transfer-shell-border: 1px solid var(--ui-transfer-shell-border-color);
+    --ui-transfer-shell-border: 0;
     --ui-transfer-shell-shadow: none;
     --ui-transfer-shell-backdrop: none;
     --ui-transfer-panel-bg: var(--ui-color-surface, #ffffff);
-    --ui-transfer-panel-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-transfer-panel-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent));
     --ui-transfer-panel-border: 1px solid var(--ui-transfer-panel-border-color);
     --ui-transfer-panel-shadow: none;
     --ui-transfer-panel-backdrop: none;
     --ui-transfer-item-bg: color-mix(in srgb, var(--ui-transfer-panel-bg) 96%, transparent);
-    --ui-transfer-item-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-transfer-item-border-color: transparent;
     --ui-transfer-item-border: 1px solid var(--ui-transfer-item-border-color);
-    --ui-transfer-item-hover-bg: color-mix(in srgb, var(--ui-transfer-accent) 6%, var(--ui-transfer-panel-bg));
+    --ui-transfer-item-hover-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-transfer-accent) 6%, var(--ui-transfer-panel-bg)));
     --ui-transfer-item-hover-border-color: color-mix(in srgb, var(--ui-transfer-accent) 12%, var(--ui-transfer-item-border-color));
-    --ui-transfer-item-selected-bg: color-mix(in srgb, var(--ui-transfer-accent) 11%, var(--ui-transfer-panel-bg));
+    --ui-transfer-item-selected-bg: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-transfer-accent) 11%, var(--ui-transfer-panel-bg)));
     --ui-transfer-item-selected-border-color: color-mix(in srgb, var(--ui-transfer-accent) 28%, var(--ui-transfer-item-border-color));
     --ui-transfer-item-selected-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-transfer-accent) 10%, transparent);
     --ui-transfer-action-bg: color-mix(in srgb, var(--ui-transfer-accent) 8%, var(--ui-transfer-panel-bg));
@@ -32,13 +32,13 @@
     --ui-transfer-check-accent: var(--ui-transfer-accent);
     --ui-transfer-indicator-size: 18px;
     --ui-transfer-gap: 16px;
-    --ui-transfer-shell-padding: 16px;
+    --ui-transfer-shell-padding: 0px;
     --ui-transfer-panel-padding: 12px;
     --ui-transfer-panel-gap: 10px;
-    --ui-transfer-panel-radius: 20px;
-    --ui-transfer-shell-radius: calc(var(--ui-transfer-panel-radius) + 8px);
-    --ui-transfer-item-radius: 14px;
-    --ui-transfer-action-radius: 14px;
+    --ui-transfer-panel-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-shell-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-transfer-action-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-transfer-label-size: 14px;
     --ui-transfer-label-line-height: 20px;
     --ui-transfer-description-size: 13px;
@@ -78,12 +78,12 @@
   :host([size="sm"]),
   :host([size="1"]) {
     --ui-transfer-gap: 12px;
-    --ui-transfer-shell-padding: 12px;
+    --ui-transfer-shell-padding: 0px;
     --ui-transfer-panel-padding: 10px;
     --ui-transfer-panel-gap: 8px;
-    --ui-transfer-panel-radius: 16px;
-    --ui-transfer-item-radius: 12px;
-    --ui-transfer-action-radius: 12px;
+    --ui-transfer-panel-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-transfer-action-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-transfer-label-size: 13px;
     --ui-transfer-label-line-height: 18px;
     --ui-transfer-description-size: 12px;
@@ -114,12 +114,12 @@
   :host([size="md"]),
   :host([size="2"]) {
     --ui-transfer-gap: 16px;
-    --ui-transfer-shell-padding: 16px;
+    --ui-transfer-shell-padding: 0px;
     --ui-transfer-panel-padding: 12px;
     --ui-transfer-panel-gap: 10px;
-    --ui-transfer-panel-radius: 20px;
-    --ui-transfer-item-radius: 14px;
-    --ui-transfer-action-radius: 14px;
+    --ui-transfer-panel-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-transfer-action-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-transfer-label-size: 14px;
     --ui-transfer-label-line-height: 20px;
     --ui-transfer-description-size: 13px;
@@ -150,12 +150,12 @@
   :host([size="lg"]),
   :host([size="3"]) {
     --ui-transfer-gap: 18px;
-    --ui-transfer-shell-padding: 18px;
+    --ui-transfer-shell-padding: 0px;
     --ui-transfer-panel-padding: 14px;
     --ui-transfer-panel-gap: 12px;
-    --ui-transfer-panel-radius: 24px;
-    --ui-transfer-item-radius: 16px;
-    --ui-transfer-action-radius: 16px;
+    --ui-transfer-panel-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-transfer-action-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-transfer-label-size: 15px;
     --ui-transfer-label-line-height: 22px;
     --ui-transfer-description-size: 14px;
@@ -318,7 +318,7 @@
   .label {
     font-size: var(--ui-transfer-label-size);
     line-height: var(--ui-transfer-label-line-height);
-    font-weight: 700;
+    font-weight: 600;
     color: var(--ui-transfer-text);
   }
 
@@ -380,7 +380,7 @@
     min-inline-size: 0;
     font-size: var(--ui-transfer-title-size);
     line-height: var(--ui-transfer-title-line-height);
-    font-weight: 700;
+    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--ui-transfer-muted);
@@ -398,7 +398,7 @@
     color: color-mix(in srgb, var(--ui-transfer-accent) 76%, var(--ui-transfer-text));
     font-size: var(--ui-transfer-summary-size);
     line-height: 1;
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .panel-help,
@@ -446,7 +446,7 @@
     outline: none;
     border-color: color-mix(in srgb, var(--ui-transfer-accent) 26%, var(--ui-transfer-item-border-color));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-transfer-accent) 14%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-transfer-accent) 45%, transparent),
       var(--ui-transfer-item-selected-shadow);
   }
 
@@ -593,13 +593,12 @@
 
   .move-btn:hover:not(:disabled) {
     background: var(--ui-transfer-action-hover-bg);
-    transform: translateY(-1px);
   }
 
   .move-btn:focus-visible {
     outline: none;
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-transfer-accent) 16%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-transfer-accent) 45%, transparent),
       var(--ui-transfer-action-shadow);
   }
 
@@ -628,7 +627,7 @@
   .move-btn-text {
     font-size: var(--ui-transfer-button-size);
     line-height: var(--ui-transfer-button-line-height);
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .move-btn-count {

package/dist/transfer-list.esm.js

@@ -6,20 +6,20 @@ const q = `
     --ui-transfer-muted: var(--ui-color-muted, #526175);
     --ui-transfer-shell-bg: transparent;
     --ui-transfer-shell-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 84%, transparent);
-    --ui-transfer-shell-border: 1px solid var(--ui-transfer-shell-border-color);
+    --ui-transfer-shell-border: 0;
     --ui-transfer-shell-shadow: none;
     --ui-transfer-shell-backdrop: none;
     --ui-transfer-panel-bg: var(--ui-color-surface, #ffffff);
-    --ui-transfer-panel-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-transfer-panel-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent));
     --ui-transfer-panel-border: 1px solid var(--ui-transfer-panel-border-color);
     --ui-transfer-panel-shadow: none;
     --ui-transfer-panel-backdrop: none;
     --ui-transfer-item-bg: color-mix(in srgb, var(--ui-transfer-panel-bg) 96%, transparent);
-    --ui-transfer-item-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-transfer-item-border-color: transparent;
     --ui-transfer-item-border: 1px solid var(--ui-transfer-item-border-color);
-    --ui-transfer-item-hover-bg: color-mix(in srgb, var(--ui-transfer-accent) 6%, var(--ui-transfer-panel-bg));
+    --ui-transfer-item-hover-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-transfer-accent) 6%, var(--ui-transfer-panel-bg)));
     --ui-transfer-item-hover-border-color: color-mix(in srgb, var(--ui-transfer-accent) 12%, var(--ui-transfer-item-border-color));
-    --ui-transfer-item-selected-bg: color-mix(in srgb, var(--ui-transfer-accent) 11%, var(--ui-transfer-panel-bg));
+    --ui-transfer-item-selected-bg: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-transfer-accent) 11%, var(--ui-transfer-panel-bg)));
     --ui-transfer-item-selected-border-color: color-mix(in srgb, var(--ui-transfer-accent) 28%, var(--ui-transfer-item-border-color));
     --ui-transfer-item-selected-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-transfer-accent) 10%, transparent);
     --ui-transfer-action-bg: color-mix(in srgb, var(--ui-transfer-accent) 8%, var(--ui-transfer-panel-bg));
@@ -33,13 +33,13 @@ const q = `
     --ui-transfer-check-accent: var(--ui-transfer-accent);
     --ui-transfer-indicator-size: 18px;
     --ui-transfer-gap: 16px;
-    --ui-transfer-shell-padding: 16px;
+    --ui-transfer-shell-padding: 0px;
     --ui-transfer-panel-padding: 12px;
     --ui-transfer-panel-gap: 10px;
-    --ui-transfer-panel-radius: 20px;
-    --ui-transfer-shell-radius: calc(var(--ui-transfer-panel-radius) + 8px);
-    --ui-transfer-item-radius: 14px;
-    --ui-transfer-action-radius: 14px;
+    --ui-transfer-panel-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-shell-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-transfer-action-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-transfer-label-size: 14px;
     --ui-transfer-label-line-height: 20px;
     --ui-transfer-description-size: 13px;
@@ -79,12 +79,12 @@ const q = `
   :host([size="sm"]),
   :host([size="1"]) {
     --ui-transfer-gap: 12px;
-    --ui-transfer-shell-padding: 12px;
+    --ui-transfer-shell-padding: 0px;
     --ui-transfer-panel-padding: 10px;
     --ui-transfer-panel-gap: 8px;
-    --ui-transfer-panel-radius: 16px;
-    --ui-transfer-item-radius: 12px;
-    --ui-transfer-action-radius: 12px;
+    --ui-transfer-panel-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-transfer-action-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-transfer-label-size: 13px;
     --ui-transfer-label-line-height: 18px;
     --ui-transfer-description-size: 12px;
@@ -115,12 +115,12 @@ const q = `
   :host([size="md"]),
   :host([size="2"]) {
     --ui-transfer-gap: 16px;
-    --ui-transfer-shell-padding: 16px;
+    --ui-transfer-shell-padding: 0px;
     --ui-transfer-panel-padding: 12px;
     --ui-transfer-panel-gap: 10px;
-    --ui-transfer-panel-radius: 20px;
-    --ui-transfer-item-radius: 14px;
-    --ui-transfer-action-radius: 14px;
+    --ui-transfer-panel-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-transfer-action-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-transfer-label-size: 14px;
     --ui-transfer-label-line-height: 20px;
     --ui-transfer-description-size: 13px;
@@ -151,12 +151,12 @@ const q = `
   :host([size="lg"]),
   :host([size="3"]) {
     --ui-transfer-gap: 18px;
-    --ui-transfer-shell-padding: 18px;
+    --ui-transfer-shell-padding: 0px;
     --ui-transfer-panel-padding: 14px;
     --ui-transfer-panel-gap: 12px;
-    --ui-transfer-panel-radius: 24px;
-    --ui-transfer-item-radius: 16px;
-    --ui-transfer-action-radius: 16px;
+    --ui-transfer-panel-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-transfer-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-transfer-action-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-transfer-label-size: 15px;
     --ui-transfer-label-line-height: 22px;
     --ui-transfer-description-size: 14px;
@@ -319,7 +319,7 @@ const q = `
   .label {
     font-size: var(--ui-transfer-label-size);
     line-height: var(--ui-transfer-label-line-height);
-    font-weight: 700;
+    font-weight: 600;
     color: var(--ui-transfer-text);
   }
 
@@ -381,7 +381,7 @@ const q = `
     min-inline-size: 0;
     font-size: var(--ui-transfer-title-size);
     line-height: var(--ui-transfer-title-line-height);
-    font-weight: 700;
+    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--ui-transfer-muted);
@@ -399,7 +399,7 @@ const q = `
     color: color-mix(in srgb, var(--ui-transfer-accent) 76%, var(--ui-transfer-text));
     font-size: var(--ui-transfer-summary-size);
     line-height: 1;
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .panel-help,
@@ -447,7 +447,7 @@ const q = `
     outline: none;
     border-color: color-mix(in srgb, var(--ui-transfer-accent) 26%, var(--ui-transfer-item-border-color));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-transfer-accent) 14%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-transfer-accent) 45%, transparent),
       var(--ui-transfer-item-selected-shadow);
   }
 
@@ -594,13 +594,12 @@ const q = `
 
   .move-btn:hover:not(:disabled) {
     background: var(--ui-transfer-action-hover-bg);
-    transform: translateY(-1px);
   }
 
   .move-btn:focus-visible {
     outline: none;
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-transfer-accent) 16%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-transfer-accent) 45%, transparent),
       var(--ui-transfer-action-shadow);
   }
 
@@ -629,7 +628,7 @@ const q = `
   .move-btn-text {
     font-size: var(--ui-transfer-button-size);
     line-height: var(--ui-transfer-button-line-height);
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .move-btn-count {

package/dist/{tree-B_oQput6.mjs → tree-33fVNnaf.mjs}

@@ -57,9 +57,9 @@ function m(a, t, e = -1) {
 const v = `
   :host {
     --ui-tree-indent: 16px;
-    --ui-tree-radius: 14px;
-    --ui-tree-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent);
-    --ui-tree-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-tree-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-tree-bg: transparent;
+    --ui-tree-border: transparent;
     --ui-tree-text: var(--ui-color-text, #0f172a);
     --ui-tree-muted: var(--ui-color-muted, #526175);
     display: block;
@@ -71,8 +71,9 @@ const v = `
   .tree {
     min-inline-size: 0;
     display: grid;
-    gap: 4px;
-    padding: 10px;
+    gap: 2px;
+    padding: 0;
+    font-size: var(--ui-control-font-size-2, 14px);
     border: 1px solid var(--ui-tree-border);
     border-radius: var(--ui-tree-radius);
     background: var(--ui-tree-bg);

package/dist/{tree-SivHxcAy.js → tree-Dc02MChE.js}

@@ -1,9 +1,9 @@
 "use strict";const v=require("./ElementBase-DxbvhLJs.js"),p=require("./collection-qv8A8rq4.js"),f=require("./tree-item.cjs.js");function x(l,t){const e=[],i=t.getExpanded||(()=>!1),r=t.getDisabled||(()=>!1),s=(d,n,o)=>{d.forEach(a=>{const u=t.getChildren(a)||[],c={item:a,id:t.getId(a),label:t.getLabel(a),level:n,parentId:o,disabled:r(a),expanded:i(a),hasChildren:u.length>0};e.push(c),s(u,n+1,c.id)})};return s(l,1,null),e}function g(l,t){const e=[],i=t.getExpanded||(()=>!1),r=t.getDisabled||(()=>!1),s=(d,n,o)=>{d.forEach(a=>{const u=t.getChildren(a)||[],c=i(a),h={item:a,id:t.getId(a),label:t.getLabel(a),level:n,parentId:o,disabled:r(a),expanded:c,hasChildren:u.length>0};e.push(h),h.hasChildren&&c&&s(u,n+1,h.id)})};return s(l,1,null),e}function b(l,t){return l.findIndex(e=>e.id===t)}function _(l,t){const e=l[t];return e?.parentId?l.findIndex(i=>i.id===e.parentId):-1}function y(l,t,e=-1){const i=p.normalizeCollectionText(t);if(!i)return-1;for(let r=1;r<=l.length;r+=1){const s=(e+r+l.length)%l.length,d=l[s];if(!d.disabled&&p.normalizeCollectionText(d.label).startsWith(i))return s}return-1}const T=`
   :host {
     --ui-tree-indent: 16px;
-    --ui-tree-radius: 14px;
-    --ui-tree-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent);
-    --ui-tree-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-tree-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-tree-bg: transparent;
+    --ui-tree-border: transparent;
     --ui-tree-text: var(--ui-color-text, #0f172a);
     --ui-tree-muted: var(--ui-color-muted, #526175);
     display: block;
@@ -15,8 +15,9 @@
   .tree {
     min-inline-size: 0;
     display: grid;
-    gap: 4px;
-    padding: 10px;
+    gap: 2px;
+    padding: 0;
+    font-size: var(--ui-control-font-size-2, 14px);
     border: 1px solid var(--ui-tree-border);
     border-radius: var(--ui-tree-radius);
     background: var(--ui-tree-bg);

package/dist/tree-item.cjs.js

@@ -13,13 +13,13 @@
 
   .row {
     min-inline-size: 0;
-    min-block-size: 34px;
+    min-block-size: var(--ui-control-height-2, 32px);
     display: grid;
     grid-template-columns: auto auto minmax(0, 1fr) auto;
     align-items: center;
     gap: 8px;
-    padding: 6px 10px 6px calc(10px + (var(--ui-tree-level) - 1) * var(--ui-tree-indent));
-    border-radius: 10px;
+    padding: 4px 8px 4px calc(8px + (var(--ui-tree-level) - 1) * var(--ui-tree-indent));
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     cursor: default;
     outline: none;
     user-select: none;
@@ -28,17 +28,18 @@
   }
 
   .row:hover {
-    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, transparent);
+    background: var(--ui-color-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, transparent));
   }
 
   .row:focus-visible {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-focus-ring, #2563eb) 28%, transparent);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
+    outline-offset: -2px;
   }
 
   :host([selected]) .row {
-    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent);
-    color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
-    font-weight: 600;
+    background: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent));
+    color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    font-weight: 500;
   }
 
   :host([disabled]) .row {

package/dist/tree-item.esm.js

@@ -1,5 +1,5 @@
-import { E as r } from "./ElementBase-BeZT54Hj.mjs";
-const i = `
+import { E as i } from "./ElementBase-BeZT54Hj.mjs";
+const r = `
   :host {
     --ui-tree-indent: 16px;
     --ui-tree-level: 1;
@@ -14,13 +14,13 @@ const i = `
 
   .row {
     min-inline-size: 0;
-    min-block-size: 34px;
+    min-block-size: var(--ui-control-height-2, 32px);
     display: grid;
     grid-template-columns: auto auto minmax(0, 1fr) auto;
     align-items: center;
     gap: 8px;
-    padding: 6px 10px 6px calc(10px + (var(--ui-tree-level) - 1) * var(--ui-tree-indent));
-    border-radius: 10px;
+    padding: 4px 8px 4px calc(8px + (var(--ui-tree-level) - 1) * var(--ui-tree-indent));
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     cursor: default;
     outline: none;
     user-select: none;
@@ -29,17 +29,18 @@ const i = `
   }
 
   .row:hover {
-    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, transparent);
+    background: var(--ui-color-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, transparent));
   }
 
   .row:focus-visible {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-focus-ring, #2563eb) 28%, transparent);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
+    outline-offset: -2px;
   }
 
   :host([selected]) .row {
-    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent);
-    color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
-    font-weight: 600;
+    background: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent));
+    color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    font-weight: 500;
   }
 
   :host([disabled]) .row {
@@ -91,7 +92,7 @@ const i = `
     }
   }
 `;
-class t extends r {
+class t extends i {
   constructor() {
     super(...arguments), this._row = null, this._children = null, this._twist = null;
   }
@@ -123,7 +124,7 @@ class t extends r {
   }
   render() {
     this.setContent(`
-      <style>${i}</style>
+      <style>${r}</style>
       <div class="row" part="row" role="treeitem" tabindex="-1">
         <span class="twist" part="twist" data-action="toggle">▸</span>
         <span class="prefix" part="prefix"><slot name="prefix"></slot></span>

package/dist/tree.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tree-SivHxcAy.js");exports.UITree=e.UITree;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tree-Dc02MChE.js");exports.UITree=e.UITree;

package/dist/tree.esm.js

@@ -1,4 +1,4 @@
-import { U as o } from "./tree-B_oQput6.mjs";
+import { U as o } from "./tree-33fVNnaf.mjs";
 export {
   o as UITree
 };