@editora/ui-core 0.1.24 → 0.2.0

package/dist/dialog.esm.js

@@ -2,7 +2,8 @@ import { E as z } from "./ElementBase-BeZT54Hj.mjs";
 import { a as B, r as I } from "./scroll-lock-LfqXXqsu.mjs";
 import { c as M } from "./dismissable-layer-BmPIoK80.mjs";
 import { c as R } from "./focus-scope-CmEsG5UZ.mjs";
-const W = `
+import { l as P, c as W } from "./overlay-motion-BX3dPLay.mjs";
+const H = `
   :host {
     position: fixed;
     inset: 0;
@@ -13,17 +14,13 @@ const W = `
     color-scheme: light dark;
     --ui-dialog-backdrop: color-mix(in srgb, #020617 58%, transparent);
     --ui-dialog-backdrop-filter: none;
-    --ui-dialog-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 0%,
-      color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 24%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-dialog-bg: var(--color-panel-solid, var(--ui-color-surface-elevated, var(--ui-color-surface, #ffffff)));
     --ui-dialog-color: var(--ui-color-text, #0f172a);
     --ui-dialog-muted: var(--ui-color-muted, #526175);
-    --ui-dialog-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-dialog-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent));
     --ui-dialog-border: 1px solid var(--ui-dialog-border-color);
-    --ui-dialog-shadow: none;
-    --ui-dialog-radius: 16px;
+    --ui-dialog-shadow: var(--shadow-6, 0 24px 60px rgba(2, 6, 23, 0.28));
+    --ui-dialog-radius: calc(var(--ui-radius, 6px) * 2);
     --ui-dialog-padding-x: 24px;
     --ui-dialog-padding-y: 20px;
     --ui-dialog-width: min(560px, calc(100vw - 24px));
@@ -72,18 +69,21 @@ const W = `
     background: var(--ui-dialog-backdrop);
     -webkit-backdrop-filter: var(--ui-dialog-backdrop-filter);
     backdrop-filter: var(--ui-dialog-backdrop-filter);
-    opacity: 0;
-    transition: opacity var(--ui-dialog-duration) var(--ui-dialog-easing);
+    /* The overlay goes to the top layer (popover); undo the popover user-agent box. */
+    inline-size: 100%;
+    block-size: 100%;
+    max-inline-size: none;
+    max-block-size: none;
+    margin: 0;
+    border: 0;
+    overflow: visible;
+    color: inherit;
   }
 
   .overlay[hidden] {
     display: none;
   }
 
-  .overlay[data-open='true'] {
-    opacity: 1;
-  }
-
   .panel {
     position: relative;
     z-index: var(--ui-dialog-z);
@@ -97,20 +97,39 @@ const W = `
     color: var(--ui-dialog-color);
     box-shadow: var(--ui-dialog-shadow);
     padding: var(--ui-dialog-padding-y) var(--ui-dialog-padding-x);
-    transform: translate3d(0, 12px, 0) scale(0.985);
-    opacity: 0;
     transition:
-      transform var(--ui-dialog-duration) var(--ui-dialog-easing),
-      opacity var(--ui-dialog-duration) var(--ui-dialog-easing),
       border-color var(--ui-dialog-duration) var(--ui-dialog-easing),
       box-shadow var(--ui-dialog-duration) var(--ui-dialog-easing);
-    will-change: transform, opacity;
     backface-visibility: hidden;
   }
 
-  .overlay[data-open='true'] .panel {
-    transform: translate3d(0, 0, 0) scale(1);
-    opacity: 1;
+  /* Open and close are animations on data-state: a transition cannot run out of display: none. */
+  .overlay[data-state='open']:not([data-instant]) {
+    animation: ui-dialog-backdrop-in var(--ui-dialog-in-duration, 150ms) ease-out backwards;
+  }
+
+  .overlay[data-state='open']:not([data-instant]) .panel {
+    animation: ui-dialog-panel-in var(--ui-dialog-in-duration, 150ms) var(--ui-motion-enter-easing, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
+  }
+
+  .overlay[data-state='closed'] {
+    animation: ui-dialog-backdrop-out var(--ui-dialog-out-duration, 100ms) ease-in both;
+    pointer-events: none;
+  }
+
+  .overlay[data-state='closed'] .panel {
+    animation: ui-dialog-panel-out var(--ui-dialog-out-duration, 100ms) var(--ui-motion-exit-easing, cubic-bezier(0.4, 0, 1, 1)) both;
+  }
+
+  @keyframes ui-dialog-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes ui-dialog-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+  @keyframes ui-dialog-panel-in {
+    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); }
+    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+  }
+  @keyframes ui-dialog-panel-out {
+    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+    to { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); }
   }
 
   :host([state='error']) .panel {
@@ -199,8 +218,6 @@ const W = `
 
   .footer {
     margin-top: 20px;
-    padding-top: 16px;
-    border-top: 1px solid color-mix(in srgb, var(--ui-dialog-border-color) 82%, transparent);
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -280,7 +297,7 @@ const W = `
   }
 
   .error[data-empty='true'] {
-    visibility: hidden;
+    display: none;
   }
 
   :host([state='loading']) .btn,
@@ -376,8 +393,8 @@ const W = `
       box-shadow: none;
     }
   }
-`, P = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function g(n, t) {
+`, K = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function p(n, t) {
   if (n == null) return t;
   const i = n.trim().toLowerCase();
   return i !== "false" && i !== "0" && i !== "off";
@@ -385,18 +402,18 @@ function g(n, t) {
 function a(n) {
   return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function S() {
+function C() {
   return typeof window < "u" && typeof document < "u";
 }
-function C(n) {
+function S(n) {
   return window.setTimeout(n, 16);
 }
-function p(n) {
+function g(n) {
   n && window.clearTimeout(n);
 }
 const l = class l extends z {
   constructor() {
-    super(), this._isActive = !1, this._uid = Math.random().toString(36).slice(2, 10), this._dialogId = this._uid, this._lastFocused = null, this._terminalEmitted = !1, this._closeMeta = null, this._runtimeError = "", this._config = {}, this._dismissableLayer = null, this._focusScope = null, this._disconnectCleanupFrame = 0, this._restoreFocusFrame = 0, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onSubmit = this._onSubmit.bind(this);
+    super(), this._isActive = !1, this._uid = Math.random().toString(36).slice(2, 10), this._dialogId = this._uid, this._lastFocused = null, this._terminalEmitted = !1, this._closeMeta = null, this._runtimeError = "", this._config = {}, this._dismissableLayer = null, this._focusScope = null, this._disconnectCleanupFrame = 0, this._restoreFocusFrame = 0, this._presented = !1, this._finishClose = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onSubmit = this._onSubmit.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -424,10 +441,10 @@ const l = class l extends z {
     ];
   }
   connectedCallback() {
-    this._disconnectCleanupFrame && (p(this._disconnectCleanupFrame), this._disconnectCleanupFrame = 0), super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.addEventListener("submit", this._onSubmit), this._syncFromAttributes(), this._syncOpenState();
+    this._disconnectCleanupFrame && (g(this._disconnectCleanupFrame), this._disconnectCleanupFrame = 0), super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.addEventListener("submit", this._onSubmit), this._syncFromAttributes(), this._syncOpenState();
   }
   disconnectedCallback() {
-    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("submit", this._onSubmit), this._disconnectCleanupFrame && p(this._disconnectCleanupFrame), this._restoreFocusFrame && (p(this._restoreFocusFrame), this._restoreFocusFrame = 0), this._disconnectCleanupFrame = C(() => {
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("submit", this._onSubmit), this._disconnectCleanupFrame && g(this._disconnectCleanupFrame), this._restoreFocusFrame && (g(this._restoreFocusFrame), this._restoreFocusFrame = 0), this._disconnectCleanupFrame = S(() => {
       this._disconnectCleanupFrame = 0, !this.isConnected && (this._isActive && !this._terminalEmitted ? this.close("dismiss", "unmount") : (this._destroyRuntimeControllers(), this._deactivate()), super.disconnectedCallback());
     });
   }
@@ -447,25 +464,25 @@ const l = class l extends z {
     t ? this.setAttribute("open", "") : this.close("dismiss", "programmatic");
   }
   get dismissible() {
-    return g(this.getAttribute("dismissible") ?? this.getAttribute("closable"), !0);
+    return p(this.getAttribute("dismissible") ?? this.getAttribute("closable"), !0);
   }
   set dismissible(t) {
     this.setAttribute("dismissible", String(t)), this.setAttribute("closable", String(t));
   }
   get closeOnOverlay() {
-    return g(this.getAttribute("close-on-overlay") ?? this.getAttribute("close-on-backdrop"), !0);
+    return p(this.getAttribute("close-on-overlay") ?? this.getAttribute("close-on-backdrop"), !0);
   }
   set closeOnOverlay(t) {
     this.setAttribute("close-on-overlay", String(t)), this.setAttribute("close-on-backdrop", String(t));
   }
   get closeOnEsc() {
-    return g(this.getAttribute("close-on-esc"), !0);
+    return p(this.getAttribute("close-on-esc"), !0);
   }
   set closeOnEsc(t) {
     this.setAttribute("close-on-esc", String(t));
   }
   get lockWhileLoading() {
-    return g(this.getAttribute("lock-while-loading"), !0);
+    return p(this.getAttribute("lock-while-loading"), !0);
   }
   set lockWhileLoading(t) {
     this.setAttribute("lock-while-loading", String(t));
@@ -574,7 +591,7 @@ const l = class l extends z {
       }), this.dispatchEvent(new CustomEvent("hide", { bubbles: !0, composed: !0 })), this._terminalEmitted = !0, this._closeMeta = null;
     }
     const i = this._lastFocused;
-    this._lastFocused = null, i && this._canRestoreFocus(i) && (this._restoreFocusFrame && p(this._restoreFocusFrame), this._restoreFocusFrame = C(() => {
+    this._lastFocused = null, i && this._canRestoreFocus(i) && (this._restoreFocusFrame && g(this._restoreFocusFrame), this._restoreFocusFrame = S(() => {
       this._restoreFocusFrame = 0;
       try {
         this._canRestoreFocus(i) && i.focus();
@@ -608,14 +625,14 @@ const l = class l extends z {
   }
   _canRestoreFocus(t) {
     if (!t || !t.isConnected || t.disabled || t.getAttribute("aria-hidden") === "true") return !1;
-    if (!S()) return !0;
+    if (!C()) return !0;
     const i = window.getComputedStyle(t);
     return i.display !== "none" && i.visibility !== "hidden";
   }
   _collectFocusable(t) {
-    return Array.from(t.querySelectorAll(P)).filter((i) => {
+    return Array.from(t.querySelectorAll(K)).filter((i) => {
       if (i.disabled || i.getAttribute("aria-hidden") === "true") return !1;
-      const s = S() ? window.getComputedStyle(i) : null;
+      const s = C() ? window.getComputedStyle(i) : null;
       return !(s && (s.display === "none" || s.visibility === "hidden"));
     });
   }
@@ -649,7 +666,23 @@ const l = class l extends z {
   }
   _syncOpenUi() {
     const t = this.root.querySelector(".overlay"), i = this._queryPanel(), e = this.open;
-    !t || !i || (t.hidden = !e, t.setAttribute("data-open", String(e)), t.setAttribute("aria-hidden", e ? "false" : "true"), i.setAttribute("aria-hidden", e ? "false" : "true"));
+    if (!(!t || !i)) {
+      if (t.setAttribute("aria-hidden", e ? "false" : "true"), i.setAttribute("aria-hidden", e ? "false" : "true"), t.setAttribute("data-open", String(e)), e) {
+        this._finishClose?.(), this._finishClose = null, t.hidden = !1, t.setAttribute("data-state", "open"), this._presented || t.removeAttribute("data-instant"), this._presented = !0, this.hasAttribute("headless") || P(t, { resetBox: !1 });
+        return;
+      }
+      if (this._presented && !t.hidden) {
+        this._presented = !1, t.removeAttribute("data-instant"), this._finishClose = W(t, () => {
+          this._finishClose = null, t.hidden = !0;
+          try {
+            t.matches(":popover-open") && t.hidePopover();
+          } catch {
+          }
+        });
+        return;
+      }
+      this._finishClose || (this._presented = !1, t.setAttribute("data-state", "closed"), t.hidden = !0);
+    }
   }
   _syncRuntimeControllers() {
     if (this._destroyRuntimeControllers(), !this.open || !this._isTopMost()) return;
@@ -763,17 +796,17 @@ const l = class l extends z {
     }
   }
   render() {
-    const t = this._config.title ?? this.getAttribute("title") ?? "", i = this._config.description ?? this.getAttribute("description") ?? "", e = this._config.submitText ?? this.getAttribute("submit-text") ?? "Submit", s = this._config.cancelText ?? this.getAttribute("cancel-text") ?? "Cancel", o = this._config.loadingText ?? this.getAttribute("loading-text") ?? "Working...", r = t.trim(), h = i.trim(), c = !!this.querySelector('[slot="title"]'), d = !!this.querySelector('[slot="description"]'), f = !!(r || c), m = !!(h || d), E = !!this.querySelector('[slot="content"]'), L = !!this.querySelector('[slot="footer"]'), O = this._config.showCancel ?? !0, $ = this._config.showClose ?? this.dismissible, v = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", b = this.state === "loading", x = `ui-dialog-title-${this._uid}`, A = `ui-dialog-description-${this._uid}`, k = `ui-dialog-error-${this._uid}`, D = this.getAttribute("aria-label") || "", q = this.getAttribute("aria-labelledby") || "", w = this.getAttribute("aria-describedby") || "", _ = q || (f ? x : ""), F = D || (_ ? "" : "Dialog"), u = [];
-    w ? u.push(w) : (m && u.push(A), v && u.push(k));
-    const T = f || m ? `
+    const t = this._config.title ?? this.getAttribute("title") ?? "", i = this._config.description ?? this.getAttribute("description") ?? "", e = this._config.submitText ?? this.getAttribute("submit-text") ?? "Submit", s = this._config.cancelText ?? this.getAttribute("cancel-text") ?? "Cancel", o = this._config.loadingText ?? this.getAttribute("loading-text") ?? "Working...", r = t.trim(), h = i.trim(), c = !!this.querySelector('[slot="title"]'), d = !!this.querySelector('[slot="description"]'), f = !!(r || c), m = !!(h || d), E = !!this.querySelector('[slot="content"]'), L = !!this.querySelector('[slot="footer"]'), O = this._config.showCancel ?? !0, $ = this._config.showClose ?? this.dismissible, v = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", b = this.state === "loading", x = `ui-dialog-title-${this._uid}`, k = `ui-dialog-description-${this._uid}`, A = `ui-dialog-error-${this._uid}`, T = this.getAttribute("aria-label") || "", D = this.getAttribute("aria-labelledby") || "", w = this.getAttribute("aria-describedby") || "", _ = D || (f ? x : ""), F = T || (_ ? "" : "Dialog"), u = [];
+    w ? u.push(w) : (m && u.push(k), v && u.push(A));
+    const q = f || m ? `
           <header class="header" part="header">
             ${f ? `<h2 id="${x}" class="title" part="title"><slot name="title">${a(r)}</slot></h2>` : ""}
-            ${m ? `<p id="${A}" class="description" part="description"><slot name="description">${a(h)}</slot></p>` : ""}
+            ${m ? `<p id="${k}" class="description" part="description"><slot name="description">${a(h)}</slot></p>` : ""}
           </header>
         ` : "";
     this._destroyRuntimeControllers(), this.setContent(`
-      ${this.hasAttribute("headless") ? "" : `<style>${W}</style>`}
-      <div class="overlay" part="overlay" data-open="${String(this.open)}" ${this.open ? "" : "hidden"} aria-hidden="${this.open ? "false" : "true"}">
+      ${this.hasAttribute("headless") ? "" : `<style>${H}</style>`}
+      <div class="overlay" part="overlay" data-open="${String(this.open)}" data-state="${this.open ? "open" : "closed"}" ${this.open ? "data-instant" : "hidden"} aria-hidden="${this.open ? "false" : "true"}">
         <section
           class="panel"
           part="panel"
@@ -791,12 +824,12 @@ const l = class l extends z {
                    <path d="M12.5 3.5L3.5 12.5"></path>
                  </svg>
                </button>` : ""}
-          ${T}
+          ${q}
           <div class="body" part="body">
             ${E ? '<slot name="content"></slot>' : "<slot></slot>"}
           </div>
 
-          <div class="error" id="${k}" part="error" aria-live="polite" data-empty="${String(!v)}">${a(v)}</div>
+          <div class="error" id="${A}" part="error" aria-live="polite" data-empty="${String(!v)}">${a(v)}</div>
 
           <footer class="footer" part="footer">
             ${b ? `<span class="loading" part="loading"><span class="spinner" aria-hidden="true"></span><span>${a(o)}</span></span>` : '<span aria-hidden="true"></span>'}

package/dist/dock.cjs.js

@@ -1,44 +1,30 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-DxbvhLJs.js"),F=1.92,C=148,R=1,D=20,k=.18,_="12px",x="12px 14px",v="56px",O=56,z={xs:{gap:"8px",padding:"8px 10px",itemSize:40,iconSize:18,itemRadius:14},sm:{gap:"10px",padding:"10px 12px",itemSize:48,iconSize:20,itemRadius:16},md:{gap:_,padding:x,itemSize:56,iconSize:24,itemRadius:18},lg:{gap:"14px",padding:"14px 16px",itemSize:64,iconSize:28,itemRadius:20},xl:{gap:"18px",padding:"16px 20px",itemSize:74,iconSize:32,itemRadius:24}},P={calm:{response:.11,damping:.82,spread:.62,lift:.82},smooth:{response:.16,damping:.78,spread:.82,lift:1},snappy:{response:.22,damping:.74,spread:.92,lift:1.06},bouncy:{response:.24,damping:.66,spread:1,lift:1.12}},E=new Set(["gap","padding","radius","item-size","variant","tone","size","elevation"]),N=new Set(["orientation","magnification","distance","idle-scale","lift","smoothing","animation","gap","padding","item-size"]),I=new Set(["label-mode","label-placement"]),V=new Set(["none","sm","md","lg","full"]),q=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-DxbvhLJs.js"),F=1.92,C=148,R=1,D=20,x=.18,_="12px",k="12px 14px",v="56px",O=56,z={xs:{gap:"8px",padding:"8px 10px",itemSize:40,iconSize:18,itemRadius:14},sm:{gap:"10px",padding:"10px 12px",itemSize:48,iconSize:20,itemRadius:16},md:{gap:_,padding:k,itemSize:56,iconSize:24,itemRadius:18},lg:{gap:"14px",padding:"14px 16px",itemSize:64,iconSize:28,itemRadius:20},xl:{gap:"18px",padding:"16px 20px",itemSize:74,iconSize:32,itemRadius:24}},P={calm:{response:.11,damping:.82,spread:.62,lift:.82},smooth:{response:.16,damping:.78,spread:.82,lift:1},snappy:{response:.22,damping:.74,spread:.92,lift:1.06},bouncy:{response:.24,damping:.66,spread:1,lift:1.12}},E=new Set(["gap","padding","radius","item-size","variant","tone","size","elevation"]),N=new Set(["orientation","magnification","distance","idle-scale","lift","smoothing","animation","gap","padding","item-size"]),I=new Set(["label-mode","label-placement"]),V=new Set(["none","sm","md","lg","full"]),q=`
   :host {
     --ui-dock-gap: ${_};
-    --ui-dock-padding: ${x};
-    --ui-dock-radius: 24px;
+    --ui-dock-padding: ${k};
+    --ui-dock-radius: var(--ui-control-radius-4, calc(var(--ui-radius, 6px) + 6px));
     --ui-dock-item-size: ${v};
     --ui-dock-icon-size: 24px;
-    --ui-dock-item-radius: 18px;
+    --ui-dock-item-radius: calc(var(--ui-radius, 6px) + 2px);
     --ui-dock-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
-    --ui-dock-bg:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 90%, #ffffff 10%),
-        color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 96%, transparent)
-      );
+    --ui-dock-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-dock-color: var(--ui-color-text, var(--ui-text, #0f172a));
-    --ui-dock-border-color: color-mix(in srgb, #ffffff 24%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-dock-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-dock-border: 1px solid var(--ui-dock-border-color);
-    --ui-dock-shadow:
-      0 1px 3px rgba(15, 23, 42, 0.08),
-      0 24px 44px rgba(15, 23, 42, 0.14);
+    --ui-dock-shadow: var(--shadow-3, none);
     --ui-dock-backdrop: blur(16px) saturate(1.08);
-    --ui-dock-item-bg:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, #ffffff 86%, transparent),
-        color-mix(in srgb, var(--ui-dock-accent) 10%, rgba(255, 255, 255, 0.72))
-      );
-    --ui-dock-item-border: color-mix(in srgb, var(--ui-dock-accent) 16%, rgba(255, 255, 255, 0.72));
-    --ui-dock-item-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.08),
-      0 10px 18px rgba(15, 23, 42, 0.12);
-    --ui-dock-item-backdrop: blur(10px) saturate(1.02);
+    --ui-dock-item-bg: transparent;
+    --ui-dock-item-border: transparent;
+    --ui-dock-item-shadow: none;
+    --ui-dock-item-backdrop: none;
     --ui-dock-label-bg: rgba(15, 23, 42, 0.92);
     --ui-dock-label-color: #f8fafc;
     --ui-dock-label-border: rgba(255, 255, 255, 0.14);
-    --ui-dock-label-shadow: 0 14px 28px rgba(2, 6, 23, 0.28);
+    --ui-dock-label-shadow: var(--shadow-3, 0 8px 16px rgba(2, 6, 23, 0.2));
     --ui-dock-label-padding: 6px 10px;
     --ui-dock-label-font-size: 12px;
     --ui-dock-label-font-weight: 600;
-    --ui-dock-label-radius: 999px;
+    --ui-dock-label-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-dock-label-offset: 12px;
     --ui-dock-label-backdrop: blur(10px) saturate(1.04);
     --ui-dock-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
@@ -65,7 +51,7 @@
   :host([size="md"]),
   :host([size="2"]) {
     --ui-dock-gap: ${_};
-    --ui-dock-padding: ${x};
+    --ui-dock-padding: ${k};
     --ui-dock-item-size: ${v};
     --ui-dock-icon-size: 24px;
     --ui-dock-item-radius: 18px;
@@ -335,7 +321,7 @@
       scroll-behavior: auto;
     }
   }
-`;function g(s,e,t){return Math.min(t,Math.max(e,s))}function w(s,e){if(s==null||s.trim()==="")return e;const t=Number(s);return Number.isFinite(t)?t:e}function y(s,e){return Math.max(0,w(s,e))}function U(s,e){return g(w(s,e),.01,1)}function b(s){if(s==null||s.trim()==="")return null;const e=s.trim().split(/\s+/).filter(Boolean);return e.length?e.map(t=>/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:t).join(" "):null}function $(s){return typeof requestAnimationFrame=="function"?requestAnimationFrame(s):window.setTimeout(()=>s(Date.now()),16)}function A(s){if(s!=null){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(s);return}window.clearTimeout(s)}}function B(s){return s instanceof HTMLElement}function H(s){return s.hasAttribute("disabled")||s.getAttribute("aria-disabled")==="true"}function j(s){return s.hasAttribute("data-active")||s.getAttribute("aria-current")==="page"||s.getAttribute("aria-current")==="true"}function S(s,e){return s==="top"||s==="bottom"||s==="start"||s==="end"?s:e==="horizontal"?"top":"end"}function L(s,e,t){if(!s.length)return-1;let a=e;for(let n=0;n<s.length;n+=1)if(a=(a+t+s.length)%s.length,!s[a]?.disabled)return a;return-1}class M extends T.ElementBase{constructor(){super(),this._frameEl=null,this._slotEl=null,this._items=[],this._itemNames=new WeakMap,this._resizeObserver=null,this._mutationObserver=null,this._mediaQuery=null,this._raf=null,this._pointerActive=!1,this._pointerCoord=Number.NaN,this._focusedIndex=-1,this._rovingIndex=0,this._reducedMotion=!1,this._handleSlotChange=this._handleSlotChange.bind(this),this._handlePointerMove=this._handlePointerMove.bind(this),this._handlePointerLeave=this._handlePointerLeave.bind(this),this._handleFocusIn=this._handleFocusIn.bind(this),this._handleFocusOut=this._handleFocusOut.bind(this),this._handleKeyDown=this._handleKeyDown.bind(this),this._handleResize=this._handleResize.bind(this),this._handleLightDomMutation=this._handleLightDomMutation.bind(this),this._handleReducedMotionChange=this._handleReducedMotionChange.bind(this)}static get observedAttributes(){return["orientation","magnification","distance","idle-scale","lift","smoothing","animation","gap","padding","item-size","label-mode","label-placement","variant","tone","size","radius","elevation"]}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","toolbar"),this._observeLightDom(),this._bindReducedMotion(),this._syncHostStyles(),queueMicrotask(()=>this.refresh())}disconnectedCallback(){if(this._slotEl&&(this._slotEl.removeEventListener("slotchange",this._handleSlotChange),this._slotEl=null),this._frameEl&&(this._frameEl.removeEventListener("pointermove",this._handlePointerMove),this._frameEl.removeEventListener("pointerleave",this._handlePointerLeave),this._frameEl=null),this.removeEventListener("focusin",this._handleFocusIn),this.removeEventListener("focusout",this._handleFocusOut),this.removeEventListener("keydown",this._handleKeyDown),this._resizeObserver?.disconnect(),this._resizeObserver=null,this._mutationObserver?.disconnect(),this._mutationObserver=null,this._mediaQuery){try{this._mediaQuery.removeEventListener("change",this._handleReducedMotionChange)}catch{this._mediaQuery.removeListener(this._handleReducedMotionChange)}this._mediaQuery=null}A(this._raf),this._raf=null,super.disconnectedCallback()}refresh(){this._collectItems(),this._syncHostStyles(),this._measureItems(),this._syncTabIndices(),this._updateTargets(),this._queueAnimation()}focusItem(e){const t=typeof e=="number"?e:this._items.findIndex(a=>a.el.getAttribute("data-value")===String(e));t<0||t>=this._items.length||this._items[t]?.disabled||(this._focusedIndex=t,this._rovingIndex=t,this._syncTabIndices(),this._items[t]?.el.focus(),this._pointerActive=!1,this._pointerCoord=Number.NaN,this._updateTargets(),this._queueAnimation())}clearActive(){this._pointerActive=!1,this._pointerCoord=Number.NaN,this._focusedIndex=-1,this._updateTargets(),this._queueAnimation()}attributeChangedCallback(e,t,a){!e||t===a||!this.isConnected||(E.has(e)&&this._syncHostStyles(),I.has(e)&&this._syncItemChrome(),(N.has(e)||I.has(e)||E.has(e))&&this.refresh())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+`;function g(s,e,t){return Math.min(t,Math.max(e,s))}function L(s,e){if(s==null||s.trim()==="")return e;const t=Number(s);return Number.isFinite(t)?t:e}function y(s,e){return Math.max(0,L(s,e))}function U(s,e){return g(L(s,e),.01,1)}function b(s){if(s==null||s.trim()==="")return null;const e=s.trim().split(/\s+/).filter(Boolean);return e.length?e.map(t=>/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:t).join(" "):null}function $(s){return typeof requestAnimationFrame=="function"?requestAnimationFrame(s):window.setTimeout(()=>s(Date.now()),16)}function A(s){if(s!=null){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(s);return}window.clearTimeout(s)}}function B(s){return s instanceof HTMLElement}function H(s){return s.hasAttribute("disabled")||s.getAttribute("aria-disabled")==="true"}function j(s){return s.hasAttribute("data-active")||s.getAttribute("aria-current")==="page"||s.getAttribute("aria-current")==="true"}function S(s,e){return s==="top"||s==="bottom"||s==="start"||s==="end"?s:e==="horizontal"?"top":"end"}function w(s,e,t){if(!s.length)return-1;let a=e;for(let n=0;n<s.length;n+=1)if(a=(a+t+s.length)%s.length,!s[a]?.disabled)return a;return-1}class M extends T.ElementBase{constructor(){super(),this._frameEl=null,this._slotEl=null,this._items=[],this._itemNames=new WeakMap,this._resizeObserver=null,this._mutationObserver=null,this._mediaQuery=null,this._raf=null,this._pointerActive=!1,this._pointerCoord=Number.NaN,this._focusedIndex=-1,this._rovingIndex=0,this._reducedMotion=!1,this._handleSlotChange=this._handleSlotChange.bind(this),this._handlePointerMove=this._handlePointerMove.bind(this),this._handlePointerLeave=this._handlePointerLeave.bind(this),this._handleFocusIn=this._handleFocusIn.bind(this),this._handleFocusOut=this._handleFocusOut.bind(this),this._handleKeyDown=this._handleKeyDown.bind(this),this._handleResize=this._handleResize.bind(this),this._handleLightDomMutation=this._handleLightDomMutation.bind(this),this._handleReducedMotionChange=this._handleReducedMotionChange.bind(this)}static get observedAttributes(){return["orientation","magnification","distance","idle-scale","lift","smoothing","animation","gap","padding","item-size","label-mode","label-placement","variant","tone","size","radius","elevation"]}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","toolbar"),this._observeLightDom(),this._bindReducedMotion(),this._syncHostStyles(),queueMicrotask(()=>this.refresh())}disconnectedCallback(){if(this._slotEl&&(this._slotEl.removeEventListener("slotchange",this._handleSlotChange),this._slotEl=null),this._frameEl&&(this._frameEl.removeEventListener("pointermove",this._handlePointerMove),this._frameEl.removeEventListener("pointerleave",this._handlePointerLeave),this._frameEl=null),this.removeEventListener("focusin",this._handleFocusIn),this.removeEventListener("focusout",this._handleFocusOut),this.removeEventListener("keydown",this._handleKeyDown),this._resizeObserver?.disconnect(),this._resizeObserver=null,this._mutationObserver?.disconnect(),this._mutationObserver=null,this._mediaQuery){try{this._mediaQuery.removeEventListener("change",this._handleReducedMotionChange)}catch{this._mediaQuery.removeListener(this._handleReducedMotionChange)}this._mediaQuery=null}A(this._raf),this._raf=null,super.disconnectedCallback()}refresh(){this._collectItems(),this._syncHostStyles(),this._measureItems(),this._syncTabIndices(),this._updateTargets(),this._queueAnimation()}focusItem(e){const t=typeof e=="number"?e:this._items.findIndex(a=>a.el.getAttribute("data-value")===String(e));t<0||t>=this._items.length||this._items[t]?.disabled||(this._focusedIndex=t,this._rovingIndex=t,this._syncTabIndices(),this._items[t]?.el.focus(),this._pointerActive=!1,this._pointerCoord=Number.NaN,this._updateTargets(),this._queueAnimation())}clearActive(){this._pointerActive=!1,this._pointerCoord=Number.NaN,this._focusedIndex=-1,this._updateTargets(),this._queueAnimation()}attributeChangedCallback(e,t,a){!e||t===a||!this.isConnected||(E.has(e)&&this._syncHostStyles(),I.has(e)&&this._syncItemChrome(),(N.has(e)||I.has(e)||E.has(e))&&this.refresh())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
       <style>${q}</style>
       <div class="root" part="root">
         <div class="frame" part="frame">
@@ -344,4 +330,4 @@
           </div>
         </div>
       </div>
-    `),this._bindElements(),this._syncHostStyles(),this.refresh()}_bindElements(){const e=this.root.querySelector(".frame");e&&e!==this._frameEl&&(this._frameEl&&(this._frameEl.removeEventListener("pointermove",this._handlePointerMove),this._frameEl.removeEventListener("pointerleave",this._handlePointerLeave)),e.addEventListener("pointermove",this._handlePointerMove),e.addEventListener("pointerleave",this._handlePointerLeave),this._frameEl=e);const t=this.root.querySelector("slot");t&&t!==this._slotEl&&(this._slotEl&&this._slotEl.removeEventListener("slotchange",this._handleSlotChange),t.addEventListener("slotchange",this._handleSlotChange),this._slotEl=t),this.removeEventListener("focusin",this._handleFocusIn),this.removeEventListener("focusout",this._handleFocusOut),this.removeEventListener("keydown",this._handleKeyDown),this.addEventListener("focusin",this._handleFocusIn),this.addEventListener("focusout",this._handleFocusOut),this.addEventListener("keydown",this._handleKeyDown),this._ensureResizeObserver()}_observeLightDom(){this._mutationObserver||typeof MutationObserver>"u"||(this._mutationObserver=new MutationObserver(this._handleLightDomMutation),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0}))}_ensureResizeObserver(){this._resizeObserver||typeof ResizeObserver>"u"||(this._resizeObserver=new ResizeObserver(this._handleResize),this._resizeObserver.observe(this))}_bindReducedMotion(){if(typeof window>"u"||typeof window.matchMedia!="function")return;const e=window.matchMedia("(prefers-reduced-motion: reduce)");this._reducedMotion=e.matches,this._mediaQuery=e;try{e.addEventListener("change",this._handleReducedMotionChange)}catch{e.addListener(this._handleReducedMotionChange)}}_handleReducedMotionChange(e){this._reducedMotion=e.matches,this.refresh()}_handleSlotChange(){this.refresh()}_handleLightDomMutation(){this.refresh()}_handleResize(){this._measureItems(),this._updateTargets(),this._queueAnimation()}_handlePointerMove(e){if("pointerType"in e&&e.pointerType==="touch"||!this._frameEl)return;const t=this._frameEl.getBoundingClientRect(),n=this._orientation()==="horizontal"?e.clientX-t.left:e.clientY-t.top;this._pointerActive=!0,this._pointerCoord=n,this._measureItems(),this._updateTargets(),this._queueAnimation()}_handlePointerLeave(){this._pointerActive=!1,this._pointerCoord=Number.NaN,this._updateTargets(),this._queueAnimation()}_handleFocusIn(e){const t=e.target?.closest?.("[data-ui-dock-item]");if(!t)return;const a=this._items.findIndex(n=>n.el===t);a<0||(this._focusedIndex=a,this._rovingIndex=a,this._syncTabIndices(),this._pointerActive=!1,this._pointerCoord=Number.NaN,this._updateTargets(),this._queueAnimation())}_handleFocusOut(e){const t=e.relatedTarget;t&&this.contains(t)||(this._focusedIndex=-1,this._pointerActive||(this._updateTargets(),this._queueAnimation()))}_handleKeyDown(e){if(e.defaultPrevented||!this._items.length)return;const t=this._orientation(),a=t==="horizontal"?["ArrowLeft"]:["ArrowUp"],n=t==="horizontal"?["ArrowRight"]:["ArrowDown"];if(a.includes(e.key)){e.preventDefault();const i=L(this._items,this._rovingIndex,-1);i>=0&&this.focusItem(i);return}if(n.includes(e.key)){e.preventDefault();const i=L(this._items,this._rovingIndex,1);i>=0&&this.focusItem(i);return}if(e.key==="Home"){e.preventDefault();const i=this._items.findIndex(c=>!c.disabled);i>=0&&this.focusItem(i);return}if(e.key==="End"){e.preventDefault();for(let i=this._items.length-1;i>=0;i-=1)if(!this._items[i]?.disabled){this.focusItem(i);break}return}e.key==="Escape"&&this.clearActive()}_collectItems(){const e=new Map(this._items.map(n=>[n.el,n])),t=Array.from(this.children).filter(B).map(n=>{const i=e.get(n),c=n.querySelector("[data-ui-dock-icon]"),o=n.querySelector("[data-ui-dock-label]"),l=n.querySelector("[data-ui-dock-badge]");return{el:n,iconEl:c,labelEl:o,badgeEl:l,center:i?.center??0,currentScale:i?.currentScale??this._idleScale(),targetScale:i?.targetScale??this._idleScale(),currentLift:i?.currentLift??0,targetLift:i?.targetLift??0,labelVisible:i?.labelVisible??!1,disabled:H(n),sticky:j(n),scaleVelocity:i?.scaleVelocity??0,liftVelocity:i?.liftVelocity??0}});this._items=t;const a=this._items.findIndex(n=>n.sticky&&!n.disabled);a>=0?this._rovingIndex=a:(!this._items[this._rovingIndex]||this._items[this._rovingIndex]?.disabled)&&(this._rovingIndex=this._items.findIndex(n=>!n.disabled)),this._rovingIndex<0&&(this._rovingIndex=0),(this._focusedIndex>=this._items.length||this._items[this._focusedIndex]?.disabled)&&(this._focusedIndex=-1),this._syncItemChrome()}_syncItemChrome(){const e=S(this.getAttribute("label-placement"),this._orientation()),t=this._labelMode(),a=this._orientation();this._items.forEach(n=>{const{el:i,iconEl:c,labelEl:o,badgeEl:l,sticky:h}=n;i.setAttribute("data-ui-dock-item",""),i.style.setProperty("position","relative"),i.style.setProperty("display","inline-flex"),i.style.setProperty("align-items","center"),i.style.setProperty("justify-content","center"),i.style.setProperty("inline-size","var(--ui-dock-item-size)"),i.style.setProperty("block-size","var(--ui-dock-item-size)"),i.style.setProperty("min-inline-size","var(--ui-dock-item-size)"),i.style.setProperty("min-block-size","var(--ui-dock-item-size)"),i.style.setProperty("flex","0 0 var(--ui-dock-item-size)"),i.style.setProperty("box-sizing","border-box"),i.style.setProperty("background","transparent"),i.style.setProperty("border","none"),i.style.setProperty("padding","0"),i.style.setProperty("margin","0"),i.style.setProperty("color","inherit"),i.style.setProperty("text-decoration","none"),i.style.setProperty("outline","none"),i.style.setProperty("cursor",n.disabled?"not-allowed":"pointer"),i.style.setProperty("transform-origin",a==="horizontal"?"center bottom":"center center"),i.style.setProperty("touch-action","manipulation"),i.hasAttribute("tabindex")||(i.tabIndex=-1);const r=i.getAttribute("aria-label"),d=this._itemNames.get(i),u=d&&d.composed===r?d.base:r||o?.textContent?.trim()||i.getAttribute("data-label")||i.getAttribute("title")||"",m=l?.textContent?.trim()??"",f=u&&m&&!u.includes(m)?`${u}, ${m}`:u;f&&(f!==r&&i.setAttribute("aria-label",f),this._itemNames.set(i,{base:u,composed:f})),h?i.setAttribute("data-dock-current","true"):i.removeAttribute("data-dock-current"),c&&(c.style.setProperty("display","inline-flex"),c.style.setProperty("align-items","center"),c.style.setProperty("justify-content","center"),c.style.setProperty("inline-size","100%"),c.style.setProperty("block-size","100%"),c.style.setProperty("border-radius","var(--ui-dock-item-radius)"),c.style.setProperty("background","var(--ui-dock-item-bg)"),c.style.setProperty("border","1px solid var(--ui-dock-item-border)"),c.style.setProperty("box-shadow","var(--ui-dock-item-shadow)"),c.style.setProperty("backdrop-filter","var(--ui-dock-item-backdrop)"),c.style.setProperty("font-size","var(--ui-dock-icon-size)"),c.style.setProperty("color","inherit"),c.style.setProperty("overflow","hidden"),c.style.setProperty("box-sizing","border-box")),o&&(o.setAttribute("aria-hidden","true"),o.style.setProperty("position","absolute"),o.style.setProperty("pointer-events","none"),o.style.setProperty("white-space","nowrap"),o.style.setProperty("padding","var(--ui-dock-label-padding)"),o.style.setProperty("border-radius","var(--ui-dock-label-radius)"),o.style.setProperty("background","var(--ui-dock-label-bg)"),o.style.setProperty("color","var(--ui-dock-label-color)"),o.style.setProperty("border","1px solid var(--ui-dock-label-border)"),o.style.setProperty("box-shadow","var(--ui-dock-label-shadow)"),o.style.setProperty("backdrop-filter","var(--ui-dock-label-backdrop)"),o.style.setProperty("font-size","var(--ui-dock-label-font-size)"),o.style.setProperty("font-weight","var(--ui-dock-label-font-weight)"),o.style.setProperty("line-height","1.2"),o.style.setProperty("letter-spacing","0.01em"),o.style.setProperty("min-inline-size","max-content"),o.style.setProperty("z-index","3"),o.style.setProperty("display",t==="none"?"none":"inline-flex"),o.style.removeProperty("top"),o.style.removeProperty("bottom"),o.style.removeProperty("left"),o.style.removeProperty("right"),e==="top"?(o.style.setProperty("left","50%"),o.style.setProperty("bottom","calc(100% + var(--ui-dock-label-offset))")):e==="bottom"?(o.style.setProperty("left","50%"),o.style.setProperty("top","calc(100% + var(--ui-dock-label-offset))")):e==="start"?(o.style.setProperty("right","calc(100% + var(--ui-dock-label-offset))"),o.style.setProperty("top","50%")):(o.style.setProperty("left","calc(100% + var(--ui-dock-label-offset))"),o.style.setProperty("top","50%"))),l&&(l.setAttribute("aria-hidden","true"),l.style.setProperty("position","absolute"),l.style.setProperty("inset-inline-end","-2px"),l.style.setProperty("inset-block-start","-2px"),l.style.setProperty("display","inline-flex"),l.style.setProperty("align-items","center"),l.style.setProperty("justify-content","center"),l.style.setProperty("min-inline-size","18px"),l.style.setProperty("min-block-size","18px"),l.style.setProperty("padding","0 6px"),l.style.setProperty("border-radius","999px"),l.style.setProperty("background","var(--ui-dock-accent)"),l.style.setProperty("color","#ffffff"),l.style.setProperty("font-size","11px"),l.style.setProperty("font-weight","700"),l.style.setProperty("box-shadow","0 8px 18px color-mix(in srgb, var(--ui-dock-accent) 32%, rgba(15, 23, 42, 0.18))"),l.style.setProperty("z-index","4"))})}_syncTabIndices(){const e=this._items.findIndex(t=>!t.disabled);e>=0&&(this._rovingIndex<0||this._items[this._rovingIndex]?.disabled)&&(this._rovingIndex=e),this._items.forEach((t,a)=>{if(t.disabled){t.el.tabIndex=-1;return}t.el.tabIndex=a===this._rovingIndex?0:-1})}_measureItems(){if(!this._frameEl)return;const e=this._frameEl.getBoundingClientRect(),t=this._orientation(),a=t==="horizontal"?e.left:e.top;this._items.forEach(n=>{const i=n.el.getBoundingClientRect();n.center=(t==="horizontal"?i.left+i.width/2:i.top+i.height/2)-a})}_updateTargets(){const e=this._idleScale(),t=Math.max(e,this._magnification()),a=Math.max(1,this._distance()),n=this._lift()*this._motion().lift,i=this._labelMode();this._items.forEach((c,o)=>{let l=e;if(c.sticky&&(l=Math.max(l,e+(t-e)*.08)),this._pointerActive&&Number.isFinite(this._pointerCoord)){const r=Math.abs(this._pointerCoord-c.center),d=g(1-r/a,0,1);l=Math.max(l,e+(t-e)*d*d)}o===this._focusedIndex&&(l=Math.max(l,t)),c.disabled&&(l=e);const h=t===e?0:(l-e)/(t-e);c.targetScale=g(l,e,t),c.targetLift=h*n,c.labelVisible=i==="always"||i!=="none"&&(o===this._focusedIndex||h>.18)}),this._updateRuntimeState()}_applyFrame(e=!1){const t=this._smoothing(),a=this._motion(),n=g(a.response+t*.12,.05,.42),i=g(a.damping+(t-k)*.14,.52,.9),c=this._orientation(),o=S(this.getAttribute("label-placement"),c),l=this._mainAxisOffsets(a.spread);let h=!1;this._items.forEach((r,d)=>{e?(r.currentScale=r.targetScale,r.currentLift=r.targetLift,r.scaleVelocity=0,r.liftVelocity=0):(r.scaleVelocity=r.scaleVelocity*i+(r.targetScale-r.currentScale)*n,r.liftVelocity=r.liftVelocity*i+(r.targetLift-r.currentLift)*n,r.currentScale+=r.scaleVelocity,r.currentLift+=r.liftVelocity,Math.abs(r.targetScale-r.currentScale)<.002&&Math.abs(r.scaleVelocity)<.002&&(r.currentScale=r.targetScale,r.scaleVelocity=0),Math.abs(r.targetLift-r.currentLift)<.002&&Math.abs(r.liftVelocity)<.002&&(r.currentLift=r.targetLift,r.liftVelocity=0)),(Math.abs(r.targetScale-r.currentScale)>=.002||Math.abs(r.targetLift-r.currentLift)>=.002||Math.abs(r.scaleVelocity)>=.002||Math.abs(r.liftVelocity)>=.002)&&(h=!0);const u=l[d]??0,m=c==="horizontal"?u:o==="start"?-r.currentLift*.28:r.currentLift*.28,f=c==="horizontal"?-r.currentLift:u;if(r.el.style.setProperty("transform",`translate3d(${m}px, ${f}px, 0) scale(${r.currentScale})`),r.el.style.setProperty("z-index",String(100+Math.round(r.currentScale*100)+d)),r.iconEl){const p=d===this._focusedIndex?"0 0 0 3px color-mix(in srgb, var(--ui-dock-focus-ring) 26%, transparent), ":r.sticky?"0 0 0 2px color-mix(in srgb, var(--ui-dock-accent) 22%, transparent), ":"";r.iconEl.style.setProperty("box-shadow",`${p}var(--ui-dock-item-shadow)`),r.iconEl.style.setProperty("border-color",r.sticky||d===this._focusedIndex?"color-mix(in srgb, var(--ui-dock-accent) 30%, var(--ui-dock-item-border))":"var(--ui-dock-item-border)")}if(r.labelEl){const p=r.labelVisible;r.labelEl.style.setProperty("opacity",p?"1":"0"),r.labelEl.style.setProperty("visibility",p?"visible":"hidden"),r.labelEl.style.setProperty("transform",this._labelTransform(o,p)),r.labelEl.style.setProperty("filter",p?"blur(0px)":"blur(6px)")}}),h&&this._queueAnimation()}_queueAnimation(){if(this._reducedMotion){A(this._raf),this._raf=null,this._applyFrame(!0);return}this._raf==null&&(this._raf=$(()=>{this._raf=null,this._applyFrame(!1)}))}_mainAxisOffsets(e){if(this._items.length<2)return this._items.map(()=>0);const t=this._resolvedItemSizePx(),a=this._resolvedGapPx(),n=t+a,i=[0];for(let o=1;o<this._items.length;o+=1){const l=this._items[o-1],h=this._items[o],r=t*l.currentScale/2,d=t*h.currentScale/2,u=Math.max(0,r+d-n);i[o]=i[o-1]+u*e}const c=i[i.length-1]/2;return i.map(o=>o-c)}_labelTransform(e,t){return e==="top"?t?"translate3d(-50%, 0, 0)":"translate3d(-50%, 6px, 0)":e==="bottom"?t?"translate3d(-50%, 0, 0)":"translate3d(-50%, -6px, 0)":e==="start"?t?"translate3d(0, -50%, 0)":"translate3d(6px, -50%, 0)":t?"translate3d(0, -50%, 0)":"translate3d(-6px, -50%, 0)"}_syncHostStyles(){const e=b(this.getAttribute("gap"));e?this.style.setProperty("--ui-dock-gap",e):this.style.removeProperty("--ui-dock-gap");const t=b(this.getAttribute("padding"));t?this.style.setProperty("--ui-dock-padding",t):this.style.removeProperty("--ui-dock-padding");const a=b(this.getAttribute("item-size"));a?(this.style.setProperty("--ui-dock-item-size",a),this.style.setProperty("--ui-dock-icon-size",`calc(${a} * 0.44)`)):(this.style.removeProperty("--ui-dock-item-size"),this.style.removeProperty("--ui-dock-icon-size"));const n=this.getAttribute("radius");if(n&&!V.has(n)){const i=b(n)||n;this.style.setProperty("--ui-dock-radius",i),this.style.setProperty("--ui-dock-item-radius",`calc(${i} * 0.82)`)}else this.style.removeProperty("--ui-dock-radius"),this.style.removeProperty("--ui-dock-item-radius")}_orientation(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}_motion(){const e=this.getAttribute("animation");return e==="calm"||e==="snappy"||e==="bouncy"?P[e]:P.smooth}_labelMode(){const e=this.getAttribute("label-mode");return e==="always"||e==="none"?e:"hover"}_magnification(){return Math.max(this._idleScale(),y(this.getAttribute("magnification"),F))}_distance(){return y(this.getAttribute("distance"),C)}_idleScale(){return Math.max(.5,y(this.getAttribute("idle-scale"),R))}_lift(){return y(this.getAttribute("lift"),D)}_smoothing(){return U(this.getAttribute("smoothing"),k)}_sizeToken(){const e=this.getAttribute("size");return e==="xs"||e==="0"?"xs":e==="sm"||e==="1"?"sm":e==="lg"||e==="3"?"lg":e==="xl"||e==="4"?"xl":"md"}_resolvedItemSizePx(){const e=b(this.getAttribute("item-size"));if(e){const t=Number.parseFloat(e);if(Number.isFinite(t))return t}return z[this._sizeToken()]?.itemSize??O}_resolvedGapPx(){const e=b(this.getAttribute("gap"));if(e){const a=Number.parseFloat(e);if(Number.isFinite(a))return a}const t=z[this._sizeToken()];return t?Number.parseFloat(t.gap):Number.parseFloat(_)}_updateRuntimeState(){const e=this._focusedIndex>=0?"keyboard":this._pointerActive?"pointer":"idle";this.setAttribute("data-state",e)}}typeof customElements<"u"&&!customElements.get("ui-dock")&&customElements.define("ui-dock",M);exports.UIDock=M;
+    `),this._bindElements(),this._syncHostStyles(),this.refresh()}_bindElements(){const e=this.root.querySelector(".frame");e&&e!==this._frameEl&&(this._frameEl&&(this._frameEl.removeEventListener("pointermove",this._handlePointerMove),this._frameEl.removeEventListener("pointerleave",this._handlePointerLeave)),e.addEventListener("pointermove",this._handlePointerMove),e.addEventListener("pointerleave",this._handlePointerLeave),this._frameEl=e);const t=this.root.querySelector("slot");t&&t!==this._slotEl&&(this._slotEl&&this._slotEl.removeEventListener("slotchange",this._handleSlotChange),t.addEventListener("slotchange",this._handleSlotChange),this._slotEl=t),this.removeEventListener("focusin",this._handleFocusIn),this.removeEventListener("focusout",this._handleFocusOut),this.removeEventListener("keydown",this._handleKeyDown),this.addEventListener("focusin",this._handleFocusIn),this.addEventListener("focusout",this._handleFocusOut),this.addEventListener("keydown",this._handleKeyDown),this._ensureResizeObserver()}_observeLightDom(){this._mutationObserver||typeof MutationObserver>"u"||(this._mutationObserver=new MutationObserver(this._handleLightDomMutation),this._mutationObserver.observe(this,{childList:!0,subtree:!0,characterData:!0}))}_ensureResizeObserver(){this._resizeObserver||typeof ResizeObserver>"u"||(this._resizeObserver=new ResizeObserver(this._handleResize),this._resizeObserver.observe(this))}_bindReducedMotion(){if(typeof window>"u"||typeof window.matchMedia!="function")return;const e=window.matchMedia("(prefers-reduced-motion: reduce)");this._reducedMotion=e.matches,this._mediaQuery=e;try{e.addEventListener("change",this._handleReducedMotionChange)}catch{e.addListener(this._handleReducedMotionChange)}}_handleReducedMotionChange(e){this._reducedMotion=e.matches,this.refresh()}_handleSlotChange(){this.refresh()}_handleLightDomMutation(){this.refresh()}_handleResize(){this._measureItems(),this._updateTargets(),this._queueAnimation()}_handlePointerMove(e){if("pointerType"in e&&e.pointerType==="touch"||!this._frameEl)return;const t=this._frameEl.getBoundingClientRect(),n=this._orientation()==="horizontal"?e.clientX-t.left:e.clientY-t.top;this._pointerActive=!0,this._pointerCoord=n,this._measureItems(),this._updateTargets(),this._queueAnimation()}_handlePointerLeave(){this._pointerActive=!1,this._pointerCoord=Number.NaN,this._updateTargets(),this._queueAnimation()}_handleFocusIn(e){const t=e.target?.closest?.("[data-ui-dock-item]");if(!t)return;const a=this._items.findIndex(n=>n.el===t);a<0||(this._focusedIndex=a,this._rovingIndex=a,this._syncTabIndices(),this._pointerActive=!1,this._pointerCoord=Number.NaN,this._updateTargets(),this._queueAnimation())}_handleFocusOut(e){const t=e.relatedTarget;t&&this.contains(t)||(this._focusedIndex=-1,this._pointerActive||(this._updateTargets(),this._queueAnimation()))}_handleKeyDown(e){if(e.defaultPrevented||!this._items.length)return;const t=this._orientation(),a=t==="horizontal"?["ArrowLeft"]:["ArrowUp"],n=t==="horizontal"?["ArrowRight"]:["ArrowDown"];if(a.includes(e.key)){e.preventDefault();const i=w(this._items,this._rovingIndex,-1);i>=0&&this.focusItem(i);return}if(n.includes(e.key)){e.preventDefault();const i=w(this._items,this._rovingIndex,1);i>=0&&this.focusItem(i);return}if(e.key==="Home"){e.preventDefault();const i=this._items.findIndex(c=>!c.disabled);i>=0&&this.focusItem(i);return}if(e.key==="End"){e.preventDefault();for(let i=this._items.length-1;i>=0;i-=1)if(!this._items[i]?.disabled){this.focusItem(i);break}return}e.key==="Escape"&&this.clearActive()}_collectItems(){const e=new Map(this._items.map(n=>[n.el,n])),t=Array.from(this.children).filter(B).map(n=>{const i=e.get(n),c=n.querySelector("[data-ui-dock-icon]"),o=n.querySelector("[data-ui-dock-label]"),l=n.querySelector("[data-ui-dock-badge]");return{el:n,iconEl:c,labelEl:o,badgeEl:l,center:i?.center??0,currentScale:i?.currentScale??this._idleScale(),targetScale:i?.targetScale??this._idleScale(),currentLift:i?.currentLift??0,targetLift:i?.targetLift??0,labelVisible:i?.labelVisible??!1,disabled:H(n),sticky:j(n),scaleVelocity:i?.scaleVelocity??0,liftVelocity:i?.liftVelocity??0}});this._items=t;const a=this._items.findIndex(n=>n.sticky&&!n.disabled);a>=0?this._rovingIndex=a:(!this._items[this._rovingIndex]||this._items[this._rovingIndex]?.disabled)&&(this._rovingIndex=this._items.findIndex(n=>!n.disabled)),this._rovingIndex<0&&(this._rovingIndex=0),(this._focusedIndex>=this._items.length||this._items[this._focusedIndex]?.disabled)&&(this._focusedIndex=-1),this._syncItemChrome()}_syncItemChrome(){const e=S(this.getAttribute("label-placement"),this._orientation()),t=this._labelMode(),a=this._orientation();this._items.forEach(n=>{const{el:i,iconEl:c,labelEl:o,badgeEl:l,sticky:h}=n;i.setAttribute("data-ui-dock-item",""),i.style.setProperty("position","relative"),i.style.setProperty("display","inline-flex"),i.style.setProperty("align-items","center"),i.style.setProperty("justify-content","center"),i.style.setProperty("inline-size","var(--ui-dock-item-size)"),i.style.setProperty("block-size","var(--ui-dock-item-size)"),i.style.setProperty("min-inline-size","var(--ui-dock-item-size)"),i.style.setProperty("min-block-size","var(--ui-dock-item-size)"),i.style.setProperty("flex","0 0 var(--ui-dock-item-size)"),i.style.setProperty("box-sizing","border-box"),i.style.setProperty("background","transparent"),i.style.setProperty("border","none"),i.style.setProperty("padding","0"),i.style.setProperty("margin","0"),i.style.setProperty("color","inherit"),i.style.setProperty("text-decoration","none"),i.style.setProperty("outline","none"),i.style.setProperty("cursor",n.disabled?"not-allowed":"pointer"),i.style.setProperty("transform-origin",a==="horizontal"?"center bottom":"center center"),i.style.setProperty("touch-action","manipulation"),i.hasAttribute("tabindex")||(i.tabIndex=-1);const r=i.getAttribute("aria-label"),d=this._itemNames.get(i),u=d&&d.composed===r?d.base:r||o?.textContent?.trim()||i.getAttribute("data-label")||i.getAttribute("title")||"",m=l?.textContent?.trim()??"",f=u&&m&&!u.includes(m)?`${u}, ${m}`:u;f&&(f!==r&&i.setAttribute("aria-label",f),this._itemNames.set(i,{base:u,composed:f})),h?i.setAttribute("data-dock-current","true"):i.removeAttribute("data-dock-current"),c&&(c.style.setProperty("display","inline-flex"),c.style.setProperty("align-items","center"),c.style.setProperty("justify-content","center"),c.style.setProperty("inline-size","100%"),c.style.setProperty("block-size","100%"),c.style.setProperty("border-radius","var(--ui-dock-item-radius)"),c.style.setProperty("background","var(--ui-dock-item-bg)"),c.style.setProperty("border","1px solid var(--ui-dock-item-border)"),c.style.setProperty("box-shadow","var(--ui-dock-item-shadow)"),c.style.setProperty("backdrop-filter","var(--ui-dock-item-backdrop)"),c.style.setProperty("font-size","var(--ui-dock-icon-size)"),c.style.setProperty("color","inherit"),c.style.setProperty("overflow","hidden"),c.style.setProperty("box-sizing","border-box")),o&&(o.setAttribute("aria-hidden","true"),o.style.setProperty("position","absolute"),o.style.setProperty("pointer-events","none"),o.style.setProperty("white-space","nowrap"),o.style.setProperty("padding","var(--ui-dock-label-padding)"),o.style.setProperty("border-radius","var(--ui-dock-label-radius)"),o.style.setProperty("background","var(--ui-dock-label-bg)"),o.style.setProperty("color","var(--ui-dock-label-color)"),o.style.setProperty("border","1px solid var(--ui-dock-label-border)"),o.style.setProperty("box-shadow","var(--ui-dock-label-shadow)"),o.style.setProperty("backdrop-filter","var(--ui-dock-label-backdrop)"),o.style.setProperty("font-size","var(--ui-dock-label-font-size)"),o.style.setProperty("font-weight","var(--ui-dock-label-font-weight)"),o.style.setProperty("line-height","1.2"),o.style.setProperty("letter-spacing","0.01em"),o.style.setProperty("min-inline-size","max-content"),o.style.setProperty("z-index","3"),o.style.setProperty("display",t==="none"?"none":"inline-flex"),o.style.removeProperty("top"),o.style.removeProperty("bottom"),o.style.removeProperty("left"),o.style.removeProperty("right"),e==="top"?(o.style.setProperty("left","50%"),o.style.setProperty("bottom","calc(100% + var(--ui-dock-label-offset))")):e==="bottom"?(o.style.setProperty("left","50%"),o.style.setProperty("top","calc(100% + var(--ui-dock-label-offset))")):e==="start"?(o.style.setProperty("right","calc(100% + var(--ui-dock-label-offset))"),o.style.setProperty("top","50%")):(o.style.setProperty("left","calc(100% + var(--ui-dock-label-offset))"),o.style.setProperty("top","50%"))),l&&(l.setAttribute("aria-hidden","true"),l.style.setProperty("position","absolute"),l.style.setProperty("inset-inline-end","-2px"),l.style.setProperty("inset-block-start","-2px"),l.style.setProperty("display","inline-flex"),l.style.setProperty("align-items","center"),l.style.setProperty("justify-content","center"),l.style.setProperty("min-inline-size","18px"),l.style.setProperty("min-block-size","18px"),l.style.setProperty("padding","0 6px"),l.style.setProperty("border-radius","999px"),l.style.setProperty("background","var(--ui-dock-accent)"),l.style.setProperty("color","#ffffff"),l.style.setProperty("font-size","11px"),l.style.setProperty("font-weight","700"),l.style.setProperty("box-shadow","none"),l.style.setProperty("z-index","4"))})}_syncTabIndices(){const e=this._items.findIndex(t=>!t.disabled);e>=0&&(this._rovingIndex<0||this._items[this._rovingIndex]?.disabled)&&(this._rovingIndex=e),this._items.forEach((t,a)=>{if(t.disabled){t.el.tabIndex=-1;return}t.el.tabIndex=a===this._rovingIndex?0:-1})}_measureItems(){if(!this._frameEl)return;const e=this._frameEl.getBoundingClientRect(),t=this._orientation(),a=t==="horizontal"?e.left:e.top;this._items.forEach(n=>{const i=n.el.getBoundingClientRect();n.center=(t==="horizontal"?i.left+i.width/2:i.top+i.height/2)-a})}_updateTargets(){const e=this._idleScale(),t=Math.max(e,this._magnification()),a=Math.max(1,this._distance()),n=this._lift()*this._motion().lift,i=this._labelMode();this._items.forEach((c,o)=>{let l=e;if(c.sticky&&(l=Math.max(l,e+(t-e)*.08)),this._pointerActive&&Number.isFinite(this._pointerCoord)){const r=Math.abs(this._pointerCoord-c.center),d=g(1-r/a,0,1);l=Math.max(l,e+(t-e)*d*d)}o===this._focusedIndex&&(l=Math.max(l,t)),c.disabled&&(l=e);const h=t===e?0:(l-e)/(t-e);c.targetScale=g(l,e,t),c.targetLift=h*n,c.labelVisible=i==="always"||i!=="none"&&(o===this._focusedIndex||h>.18)}),this._updateRuntimeState()}_applyFrame(e=!1){const t=this._smoothing(),a=this._motion(),n=g(a.response+t*.12,.05,.42),i=g(a.damping+(t-x)*.14,.52,.9),c=this._orientation(),o=S(this.getAttribute("label-placement"),c),l=this._mainAxisOffsets(a.spread);let h=!1;this._items.forEach((r,d)=>{e?(r.currentScale=r.targetScale,r.currentLift=r.targetLift,r.scaleVelocity=0,r.liftVelocity=0):(r.scaleVelocity=r.scaleVelocity*i+(r.targetScale-r.currentScale)*n,r.liftVelocity=r.liftVelocity*i+(r.targetLift-r.currentLift)*n,r.currentScale+=r.scaleVelocity,r.currentLift+=r.liftVelocity,Math.abs(r.targetScale-r.currentScale)<.002&&Math.abs(r.scaleVelocity)<.002&&(r.currentScale=r.targetScale,r.scaleVelocity=0),Math.abs(r.targetLift-r.currentLift)<.002&&Math.abs(r.liftVelocity)<.002&&(r.currentLift=r.targetLift,r.liftVelocity=0)),(Math.abs(r.targetScale-r.currentScale)>=.002||Math.abs(r.targetLift-r.currentLift)>=.002||Math.abs(r.scaleVelocity)>=.002||Math.abs(r.liftVelocity)>=.002)&&(h=!0);const u=l[d]??0,m=c==="horizontal"?u:o==="start"?-r.currentLift*.28:r.currentLift*.28,f=c==="horizontal"?-r.currentLift:u;if(r.el.style.setProperty("transform",`translate3d(${m}px, ${f}px, 0) scale(${r.currentScale})`),r.el.style.setProperty("z-index",String(100+Math.round(r.currentScale*100)+d)),r.iconEl){const p=d===this._focusedIndex?"0 0 0 2px var(--ui-ring-color, var(--ui-dock-focus-ring)), ":r.sticky?"0 0 0 2px color-mix(in srgb, var(--ui-dock-accent) 22%, transparent), ":"";r.iconEl.style.setProperty("box-shadow",`${p}var(--ui-dock-item-shadow)`),r.iconEl.style.setProperty("border-color",r.sticky||d===this._focusedIndex?"color-mix(in srgb, var(--ui-dock-accent) 55%, transparent)":"var(--ui-dock-item-border)")}if(r.labelEl){const p=r.labelVisible;r.labelEl.style.setProperty("opacity",p?"1":"0"),r.labelEl.style.setProperty("visibility",p?"visible":"hidden"),r.labelEl.style.setProperty("transform",this._labelTransform(o,p)),r.labelEl.style.setProperty("filter",p?"blur(0px)":"blur(6px)")}}),h&&this._queueAnimation()}_queueAnimation(){if(this._reducedMotion){A(this._raf),this._raf=null,this._applyFrame(!0);return}this._raf==null&&(this._raf=$(()=>{this._raf=null,this._applyFrame(!1)}))}_mainAxisOffsets(e){if(this._items.length<2)return this._items.map(()=>0);const t=this._resolvedItemSizePx(),a=this._resolvedGapPx(),n=t+a,i=[0];for(let o=1;o<this._items.length;o+=1){const l=this._items[o-1],h=this._items[o],r=t*l.currentScale/2,d=t*h.currentScale/2,u=Math.max(0,r+d-n);i[o]=i[o-1]+u*e}const c=i[i.length-1]/2;return i.map(o=>o-c)}_labelTransform(e,t){return e==="top"?t?"translate3d(-50%, 0, 0)":"translate3d(-50%, 6px, 0)":e==="bottom"?t?"translate3d(-50%, 0, 0)":"translate3d(-50%, -6px, 0)":e==="start"?t?"translate3d(0, -50%, 0)":"translate3d(6px, -50%, 0)":t?"translate3d(0, -50%, 0)":"translate3d(-6px, -50%, 0)"}_syncHostStyles(){const e=b(this.getAttribute("gap"));e?this.style.setProperty("--ui-dock-gap",e):this.style.removeProperty("--ui-dock-gap");const t=b(this.getAttribute("padding"));t?this.style.setProperty("--ui-dock-padding",t):this.style.removeProperty("--ui-dock-padding");const a=b(this.getAttribute("item-size"));a?(this.style.setProperty("--ui-dock-item-size",a),this.style.setProperty("--ui-dock-icon-size",`calc(${a} * 0.44)`)):(this.style.removeProperty("--ui-dock-item-size"),this.style.removeProperty("--ui-dock-icon-size"));const n=this.getAttribute("radius");if(n&&!V.has(n)){const i=b(n)||n;this.style.setProperty("--ui-dock-radius",i),this.style.setProperty("--ui-dock-item-radius",`calc(${i} * 0.82)`)}else this.style.removeProperty("--ui-dock-radius"),this.style.removeProperty("--ui-dock-item-radius")}_orientation(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}_motion(){const e=this.getAttribute("animation");return e==="calm"||e==="snappy"||e==="bouncy"?P[e]:P.smooth}_labelMode(){const e=this.getAttribute("label-mode");return e==="always"||e==="none"?e:"hover"}_magnification(){return Math.max(this._idleScale(),y(this.getAttribute("magnification"),F))}_distance(){return y(this.getAttribute("distance"),C)}_idleScale(){return Math.max(.5,y(this.getAttribute("idle-scale"),R))}_lift(){return y(this.getAttribute("lift"),D)}_smoothing(){return U(this.getAttribute("smoothing"),x)}_sizeToken(){const e=this.getAttribute("size");return e==="xs"||e==="0"?"xs":e==="sm"||e==="1"?"sm":e==="lg"||e==="3"?"lg":e==="xl"||e==="4"?"xl":"md"}_resolvedItemSizePx(){const e=b(this.getAttribute("item-size"));if(e){const t=Number.parseFloat(e);if(Number.isFinite(t))return t}return z[this._sizeToken()]?.itemSize??O}_resolvedGapPx(){const e=b(this.getAttribute("gap"));if(e){const a=Number.parseFloat(e);if(Number.isFinite(a))return a}const t=z[this._sizeToken()];return t?Number.parseFloat(t.gap):Number.parseFloat(_)}_updateRuntimeState(){const e=this._focusedIndex>=0?"keyboard":this._pointerActive?"pointer":"idle";this.setAttribute("data-state",e)}}typeof customElements<"u"&&!customElements.get("ui-dock")&&customElements.define("ui-dock",M);exports.UIDock=M;