@editora/ui-core 0.1.25 → 0.2.1

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);
   }
 
@@ -330,7 +330,7 @@
   }
 
   .error {
-    color: var(--ui-color-danger, #dc2626);
+    color: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     font-weight: 600;
   }
 
@@ -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);
@@ -395,10 +395,10 @@
     padding-inline: 8px;
     border-radius: 999px;
     background: color-mix(in srgb, var(--ui-transfer-accent) 12%, transparent);
-    color: color-mix(in srgb, var(--ui-transfer-accent) 76%, var(--ui-transfer-text));
+    color: color-mix(in srgb, var(--ui-transfer-accent) 45%, 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);
   }
 
@@ -489,7 +489,7 @@
     font-size: 12px;
     line-height: 1;
     font-weight: 800;
-    color: color-mix(in srgb, var(--ui-transfer-check-accent) 86%, var(--ui-transfer-text));
+    color: color-mix(in srgb, var(--ui-transfer-check-accent) 45%, var(--ui-transfer-text));
     opacity: 0;
     transform: scale(0.85);
     transition:
@@ -516,7 +516,7 @@
 
   :host([selection-indicator="tick"]) .indicator-mark {
     font-size: 15px;
-    color: color-mix(in srgb, var(--ui-transfer-check-accent) 88%, var(--ui-transfer-text));
+    color: color-mix(in srgb, var(--ui-transfer-check-accent) 45%, var(--ui-transfer-text));
   }
 
   :host([selection-indicator="tick"]) .item[data-selected="false"] .indicator-mark {
@@ -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 {
@@ -656,7 +655,7 @@
       min-inline-size: 0;
     }
   }
-`;function s(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function k(n){if(!n)return[];try{const e=JSON.parse(n);if(!Array.isArray(e))return[];const t=[];return e.forEach(r=>{if(!r||typeof r!="object")return;const a={value:String(r.value??""),label:String(r.label??r.value??""),disabled:!!r.disabled};r.description&&(a.description=String(r.description)),a.value&&t.push(a)}),t}catch{return[]}}function w(n){if(!n)return[];try{const e=JSON.parse(n);return Array.isArray(e)?e.map(t=>String(t)):[]}catch{return[]}}function A(n,e){return new Set(Array.from(n).filter(t=>e.has(t)))}function R(n){return n==="tick"||n==="none"?n:"checkbox"}function p(n,e){return n==null?e:n===""||n==="true"||n==="1"||n==="yes"?!0:n==="false"||n==="0"||n==="no"?!1:e}function $(n){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="${n==="right"?"M9 6l6 6-6 6":"M15 6l-6 6 6 6"}"/></svg>`}class S extends q.ElementBase{constructor(){super(...arguments),this._options=[],this._value=[],this._selectedAvailable=new Set,this._selectedChosen=new Set,this._formUnregister=null,this._suppressValueAttr=!1,this._delegatedListenersAttached=!1,this._handleRootClick=e=>{const t=e.target;if(!t)return;const r=t.closest(".move-btn");if(r&&this.root.contains(r)){this._move(r.getAttribute("data-action"));return}const a=t.closest(".item");a&&this.root.contains(a)&&this._toggleItem(a)},this._handleRootKeyDown=e=>{const t=e.target;if(!t)return;const r=t.closest(".item");r&&this.root.contains(r)&&this._onItemKeyDown(e,r)}}static get observedAttributes(){return["options","value","label","description","error","name","disabled","variant","tone","size","radius","elevation","available-label","selected-label","available-empty-label","selected-empty-label","selection-indicator","add-action-label","remove-action-label","show-action-labels","show-action-counts","show-panel-counts"]}get value(){return[...this._value]}set value(e){this._applyValue(e,"api")}connectedCallback(){super.connectedCallback(),this._attachDelegatedListeners(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),this._detachDelegatedListeners(),super.disconnectedCallback()}attributeChangedCallback(e,t,r){t!==r&&(e==="options"&&(this._options=k(r)),e==="value"&&!this._suppressValueAttr&&(this._value=w(r)),e==="name"&&this.isConnected&&this._registerWithForm(),e==="disabled"&&(this._selectedAvailable.clear(),this._selectedChosen.clear()),this.isConnected&&this.requestRender())}render(){this._options.length||(this._options=k(this.getAttribute("options"))),!this._value.length&&this.getAttribute("value")&&(this._value=w(this.getAttribute("value")));const e=new Set(this._value),t=this._options.filter(i=>!e.has(i.value)),r=this._options.filter(i=>e.has(i.value)),a=new Set(t.map(i=>i.value)),l=new Set(r.map(i=>i.value));this._selectedAvailable=A(this._selectedAvailable,a),this._selectedChosen=A(this._selectedChosen,l);const o=this.getAttribute("label")||"",c=this.getAttribute("description")||"",d=this.getAttribute("error")||"",b=this.getAttribute("available-label")||"Available",h=this.getAttribute("selected-label")||"Selected",C=this.getAttribute("available-empty-label")||"No items available to add.",L=this.getAttribute("selected-empty-label")||"No items selected yet.",E=R(this.getAttribute("selection-indicator")),m=this.getAttribute("add-action-label")||"Add selected",g=this.getAttribute("remove-action-label")||"Remove selected",u=p(this.getAttribute("show-action-labels"),!0),f=p(this.getAttribute("show-action-counts"),!0),v=p(this.getAttribute("show-panel-counts"),!0),x=this.getAttribute("radius"),I=x?` style="--ui-transfer-panel-radius:${s(x)};"`:"",z=()=>E==="none"?"":'<span class="indicator" part="indicator" aria-hidden="true"><span class="indicator-box"><span class="indicator-mark">✓</span></span></span>',y=i=>u?`<span class="move-btn-text">${s(i)}</span>`:"",_=i=>f?`<span class="move-btn-count">${i}</span>`:"",V=t.length?t.map(i=>`<div
+`;function s(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function k(n){if(!n)return[];try{const e=JSON.parse(n);if(!Array.isArray(e))return[];const t=[];return e.forEach(r=>{if(!r||typeof r!="object")return;const a={value:String(r.value??""),label:String(r.label??r.value??""),disabled:!!r.disabled};r.description&&(a.description=String(r.description)),a.value&&t.push(a)}),t}catch{return[]}}function w(n){if(!n)return[];try{const e=JSON.parse(n);return Array.isArray(e)?e.map(t=>String(t)):[]}catch{return[]}}function A(n,e){return new Set(Array.from(n).filter(t=>e.has(t)))}function R(n){return n==="tick"||n==="none"?n:"checkbox"}function p(n,e){return n==null?e:n===""||n==="true"||n==="1"||n==="yes"?!0:n==="false"||n==="0"||n==="no"?!1:e}function $(n){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="${n==="right"?"M9 6l6 6-6 6":"M15 6l-6 6 6 6"}"/></svg>`}class S extends q.ElementBase{constructor(){super(...arguments),this._options=[],this._value=[],this._selectedAvailable=new Set,this._selectedChosen=new Set,this._formUnregister=null,this._suppressValueAttr=!1,this._delegatedListenersAttached=!1,this._handleRootClick=e=>{const t=e.target;if(!t)return;const r=t.closest(".move-btn");if(r&&this.root.contains(r)){this._move(r.getAttribute("data-action"));return}const a=t.closest(".item");a&&this.root.contains(a)&&this._toggleItem(a)},this._handleRootKeyDown=e=>{const t=e.target;if(!t)return;const r=t.closest(".item");r&&this.root.contains(r)&&this._onItemKeyDown(e,r)}}static get observedAttributes(){return["options","value","label","description","error","name","disabled","variant","tone","size","radius","elevation","available-label","selected-label","available-empty-label","selected-empty-label","selection-indicator","add-action-label","remove-action-label","show-action-labels","show-action-counts","show-panel-counts"]}get value(){return[...this._value]}set value(e){this._applyValue(e,"api")}connectedCallback(){super.connectedCallback(),this._attachDelegatedListeners(),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),this._detachDelegatedListeners(),super.disconnectedCallback()}attributeChangedCallback(e,t,r){t!==r&&(e==="options"&&(this._options=k(r)),e==="value"&&!this._suppressValueAttr&&(this._value=w(r)),e==="name"&&this.isConnected&&this._registerWithForm(),e==="disabled"&&(this._selectedAvailable.clear(),this._selectedChosen.clear()),this.isConnected&&this.requestRender())}render(){this._options.length||(this._options=k(this.getAttribute("options"))),!this._value.length&&this.getAttribute("value")&&(this._value=w(this.getAttribute("value")));const e=new Set(this._value),t=this._options.filter(i=>!e.has(i.value)),r=this._options.filter(i=>e.has(i.value)),a=new Set(t.map(i=>i.value)),l=new Set(r.map(i=>i.value));this._selectedAvailable=A(this._selectedAvailable,a),this._selectedChosen=A(this._selectedChosen,l);const o=this.getAttribute("label")||"",c=this.getAttribute("description")||"",d=this.getAttribute("error")||"",b=this.getAttribute("available-label")||"Available",h=this.getAttribute("selected-label")||"Selected",C=this.getAttribute("available-empty-label")||"No items available to add.",L=this.getAttribute("selected-empty-label")||"No items selected yet.",E=R(this.getAttribute("selection-indicator")),g=this.getAttribute("add-action-label")||"Add selected",m=this.getAttribute("remove-action-label")||"Remove selected",u=p(this.getAttribute("show-action-labels"),!0),f=p(this.getAttribute("show-action-counts"),!0),v=p(this.getAttribute("show-panel-counts"),!0),x=this.getAttribute("radius"),I=x?` style="--ui-transfer-panel-radius:${s(x)};"`:"",z=()=>E==="none"?"":'<span class="indicator" part="indicator" aria-hidden="true"><span class="indicator-box"><span class="indicator-mark">✓</span></span></span>',y=i=>u?`<span class="move-btn-text">${s(i)}</span>`:"",_=i=>f?`<span class="move-btn-count">${i}</span>`:"",V=t.length?t.map(i=>`<div
               class="item"
               part="item available-item"
               role="option"
@@ -706,14 +705,14 @@
             <div class="summary" part="summary">${t.length} available</div>
           </section>
           <div class="actions" part="actions">
-            <button class="move-btn" part="action-button action-add" data-compact="${!u&&!f}" data-action="add" type="button"${u?"":` aria-label="${s(m)}"`}${this._selectedAvailable.size?"":" disabled"}>
+            <button class="move-btn" part="action-button action-add" data-compact="${!u&&!f}" data-action="add" type="button"${u?"":` aria-label="${s(g)}"`}${this._selectedAvailable.size?"":" disabled"}>
               <span class="move-btn-icon" aria-hidden="true">${$("right")}</span>
-              ${y(m)}
+              ${y(g)}
               ${_(this._selectedAvailable.size||0)}
             </button>
-            <button class="move-btn" part="action-button action-remove" data-compact="${!u&&!f}" data-action="remove" type="button"${u?"":` aria-label="${s(g)}"`}${this._selectedChosen.size?"":" disabled"}>
+            <button class="move-btn" part="action-button action-remove" data-compact="${!u&&!f}" data-action="remove" type="button"${u?"":` aria-label="${s(m)}"`}${this._selectedChosen.size?"":" disabled"}>
               <span class="move-btn-icon" aria-hidden="true">${$("left")}</span>
-              ${y(g)}
+              ${y(m)}
               ${_(this._selectedChosen.size||0)}
             </button>
           </div>

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);
   }
 
@@ -331,7 +331,7 @@ const q = `
   }
 
   .error {
-    color: var(--ui-color-danger, #dc2626);
+    color: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     font-weight: 600;
   }
 
@@ -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);
@@ -396,10 +396,10 @@ const q = `
     padding-inline: 8px;
     border-radius: 999px;
     background: color-mix(in srgb, var(--ui-transfer-accent) 12%, transparent);
-    color: color-mix(in srgb, var(--ui-transfer-accent) 76%, var(--ui-transfer-text));
+    color: color-mix(in srgb, var(--ui-transfer-accent) 45%, 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);
   }
 
@@ -490,7 +490,7 @@ const q = `
     font-size: 12px;
     line-height: 1;
     font-weight: 800;
-    color: color-mix(in srgb, var(--ui-transfer-check-accent) 86%, var(--ui-transfer-text));
+    color: color-mix(in srgb, var(--ui-transfer-check-accent) 45%, var(--ui-transfer-text));
     opacity: 0;
     transform: scale(0.85);
     transition:
@@ -517,7 +517,7 @@ const q = `
 
   :host([selection-indicator="tick"]) .indicator-mark {
     font-size: 15px;
-    color: color-mix(in srgb, var(--ui-transfer-check-accent) 88%, var(--ui-transfer-text));
+    color: color-mix(in srgb, var(--ui-transfer-check-accent) 45%, var(--ui-transfer-text));
   }
 
   :host([selection-indicator="tick"]) .item[data-selected="false"] .indicator-mark {
@@ -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);