@editora/ui-core 0.1.8 → 0.1.10

package/dist/dock.cjs.js

@@ -0,0 +1,347 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-1b301e7f.js"),F=1.92,C=148,R=1,D=20,_=.18,m="12px",y="12px 14px",x="56px",O=56,k={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:m,padding:y,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}},v={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}},z=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"]),P=new Set(["label-mode","label-placement"]),V=new Set(["none","sm","md","lg","full"]),q=`
+  :host {
+    --ui-dock-gap: ${m};
+    --ui-dock-padding: ${y};
+    --ui-dock-radius: 24px;
+    --ui-dock-item-size: ${x};
+    --ui-dock-icon-size: 24px;
+    --ui-dock-item-radius: 18px;
+    --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-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: 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-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-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-padding: 6px 10px;
+    --ui-dock-label-font-size: 12px;
+    --ui-dock-label-font-weight: 600;
+    --ui-dock-label-radius: 999px;
+    --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));
+    display: inline-block;
+    min-inline-size: 0;
+    color: var(--ui-dock-color);
+    color-scheme: light dark;
+    font-family: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-sizing: border-box;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-dock-gap: 10px;
+    --ui-dock-padding: 10px 12px;
+    --ui-dock-item-size: 48px;
+    --ui-dock-icon-size: 20px;
+    --ui-dock-item-radius: 16px;
+    --ui-dock-label-padding: 5px 9px;
+    --ui-dock-label-font-size: 11px;
+    --ui-dock-label-offset: 10px;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-dock-gap: ${m};
+    --ui-dock-padding: ${y};
+    --ui-dock-item-size: ${x};
+    --ui-dock-icon-size: 24px;
+    --ui-dock-item-radius: 18px;
+    --ui-dock-label-padding: 6px 10px;
+    --ui-dock-label-font-size: 12px;
+    --ui-dock-label-offset: 12px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-dock-gap: 14px;
+    --ui-dock-padding: 14px 16px;
+    --ui-dock-item-size: 64px;
+    --ui-dock-icon-size: 28px;
+    --ui-dock-item-radius: 20px;
+    --ui-dock-label-padding: 7px 12px;
+    --ui-dock-label-font-size: 13px;
+    --ui-dock-label-offset: 14px;
+  }
+
+  :host([size="xs"]),
+  :host([size="0"]) {
+    --ui-dock-gap: 8px;
+    --ui-dock-padding: 8px 10px;
+    --ui-dock-item-size: 40px;
+    --ui-dock-icon-size: 18px;
+    --ui-dock-item-radius: 14px;
+    --ui-dock-label-padding: 4px 8px;
+    --ui-dock-label-font-size: 10px;
+    --ui-dock-label-offset: 8px;
+  }
+
+  :host([size="xl"]),
+  :host([size="4"]) {
+    --ui-dock-gap: 18px;
+    --ui-dock-padding: 16px 20px;
+    --ui-dock-item-size: 74px;
+    --ui-dock-icon-size: 32px;
+    --ui-dock-item-radius: 24px;
+    --ui-dock-label-padding: 8px 14px;
+    --ui-dock-label-font-size: 14px;
+    --ui-dock-label-font-weight: 650;
+    --ui-dock-label-offset: 16px;
+  }
+
+  :host([tone="brand"]) {
+    --ui-dock-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+  }
+
+  :host([tone="neutral"]) {
+    --ui-dock-accent: #64748b;
+  }
+
+  :host([tone="info"]) {
+    --ui-dock-accent: #0ea5e9;
+  }
+
+  :host([tone="success"]) {
+    --ui-dock-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-dock-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-dock-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="soft"]) {
+    --ui-dock-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-dock-accent) 8%, var(--color-panel-solid, var(--ui-color-surface, #ffffff))),
+        color-mix(in srgb, var(--ui-dock-accent) 4%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)))
+      );
+    --ui-dock-border-color:
+      color-mix(in srgb, var(--ui-dock-accent) 18%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-dock-shadow: none;
+    --ui-dock-label-bg:
+      color-mix(in srgb, var(--ui-dock-accent) 12%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-dock-label-color: var(--ui-dock-color);
+    --ui-dock-label-border:
+      color-mix(in srgb, var(--ui-dock-accent) 24%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+    --ui-dock-label-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+  }
+
+  :host([variant="solid"]) {
+    --ui-dock-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-dock-accent) 16%, var(--color-panel-solid, var(--ui-color-surface, #ffffff))),
+        color-mix(in srgb, var(--ui-dock-accent) 10%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)))
+      );
+    --ui-dock-border-color:
+      color-mix(in srgb, var(--ui-dock-accent) 24%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-dock-item-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #ffffff 84%, transparent),
+        color-mix(in srgb, var(--ui-dock-accent) 16%, rgba(255, 255, 255, 0.7))
+      );
+    --ui-dock-label-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-dock-accent) 24%, var(--color-panel-solid, var(--ui-color-surface, #ffffff))),
+        color-mix(in srgb, var(--ui-dock-accent) 16%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)))
+      );
+    --ui-dock-label-color: var(--ui-dock-color);
+    --ui-dock-label-border:
+      color-mix(in srgb, var(--ui-dock-accent) 32%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([variant="glass"]) {
+    --ui-dock-label-bg: rgba(255, 255, 255, 0.74);
+    --ui-dock-label-color: var(--ui-dock-color);
+    --ui-dock-label-border: color-mix(in srgb, #ffffff 52%, var(--ui-dock-accent) 18%);
+    --ui-dock-label-shadow:
+      0 16px 30px rgba(15, 23, 42, 0.12);
+    --ui-dock-label-backdrop: blur(14px) saturate(1.08);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-dock-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #04111f 88%, var(--ui-dock-accent) 12%),
+        color-mix(in srgb, #0b2342 82%, var(--ui-dock-accent) 18%)
+      );
+    --ui-dock-color: #f8fbff;
+    --ui-dock-border-color: color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-dock-shadow: 0 28px 56px rgba(2, 6, 23, 0.32);
+    --ui-dock-item-bg: color-mix(in srgb, #ffffff 10%, transparent);
+    --ui-dock-item-border: color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-dock-label-bg: rgba(2, 6, 23, 0.94);
+    --ui-dock-label-border: rgba(255, 255, 255, 0.16);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-dock-bg: transparent;
+    --ui-dock-border: none;
+    --ui-dock-shadow: none;
+    --ui-dock-backdrop: none;
+    --ui-dock-label-bg: color-mix(in srgb, var(--ui-dock-accent) 10%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-dock-label-color: var(--ui-dock-color);
+    --ui-dock-label-border:
+      color-mix(in srgb, var(--ui-dock-accent) 18%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+    --ui-dock-label-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
+  }
+
+  :host([radius="none"]) {
+    --ui-dock-radius: 0px;
+    --ui-dock-item-radius: 0px;
+  }
+
+  :host([radius="sm"]) {
+    --ui-dock-radius: 14px;
+    --ui-dock-item-radius: 14px;
+  }
+
+  :host([radius="md"]) {
+    --ui-dock-radius: 22px;
+    --ui-dock-item-radius: 18px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-dock-radius: 30px;
+    --ui-dock-item-radius: 22px;
+  }
+
+  :host([radius="full"]) {
+    --ui-dock-radius: 999px;
+    --ui-dock-item-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-dock-shadow: none;
+  }
+
+  :host([elevation="high"]) {
+    --ui-dock-shadow:
+      0 2px 10px rgba(15, 23, 42, 0.1),
+      0 30px 62px rgba(15, 23, 42, 0.2);
+  }
+
+  .root {
+    display: inline-block;
+    min-inline-size: 0;
+  }
+
+  .frame {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: var(--ui-dock-gap);
+    min-inline-size: 0;
+    padding: var(--ui-dock-padding);
+    border-radius: var(--ui-dock-radius);
+    border: var(--ui-dock-border);
+    background: var(--ui-dock-bg);
+    color: var(--ui-dock-color);
+    box-shadow: var(--ui-dock-shadow);
+    backdrop-filter: var(--ui-dock-backdrop);
+    box-sizing: border-box;
+    overflow: visible;
+    isolation: isolate;
+  }
+
+  :host([orientation="vertical"]) .frame {
+    align-items: center;
+  }
+
+  .items {
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: var(--ui-dock-gap);
+    min-inline-size: 0;
+    overflow: visible;
+  }
+
+  :host([orientation="vertical"]) .items {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  slot {
+    display: contents;
+  }
+
+  ::slotted([data-ui-dock-item]) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ui-dock-item-size);
+    block-size: var(--ui-dock-item-size);
+    min-inline-size: var(--ui-dock-item-size);
+    min-block-size: var(--ui-dock-item-size);
+    flex: 0 0 var(--ui-dock-item-size);
+    box-sizing: border-box;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    text-decoration: none;
+    transform-origin: center bottom;
+    will-change: transform;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([orientation="vertical"]) ::slotted([data-ui-dock-item]) {
+    transform-origin: center center;
+  }
+
+  ::slotted([data-ui-dock-item][disabled]),
+  ::slotted([data-ui-dock-item][aria-disabled="true"]) {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .frame {
+      scroll-behavior: auto;
+    }
+  }
+`;function p(a,e,t){return Math.min(t,Math.max(e,a))}function I(a,e){if(a==null||a.trim()==="")return e;const t=Number(a);return Number.isFinite(t)?t:e}function g(a,e){return Math.max(0,I(a,e))}function U(a,e){return p(I(a,e),.01,1)}function h(a){if(a==null||a.trim()==="")return null;const e=a.trim().split(/\s+/).filter(Boolean);return e.length?e.map(t=>/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:t).join(" "):null}function $(a){return typeof requestAnimationFrame=="function"?requestAnimationFrame(a):window.setTimeout(()=>a(Date.now()),16)}function E(a){if(a!=null){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(a);return}window.clearTimeout(a)}}function B(a){return a instanceof HTMLElement}function H(a){return a.hasAttribute("disabled")||a.getAttribute("aria-disabled")==="true"}function j(a){return a.hasAttribute("data-active")||a.getAttribute("aria-current")==="page"||a.getAttribute("aria-current")==="true"}function A(a,e){return a==="top"||a==="bottom"||a==="start"||a==="end"?a:e==="horizontal"?"top":"end"}function S(a,e,t){var l;if(!a.length)return-1;let n=e;for(let r=0;r<a.length;r+=1)if(n=(n+t+a.length)%a.length,!((l=a[n])!=null&&l.disabled))return n;return-1}class L extends T.ElementBase{constructor(){super(),this._frameEl=null,this._slotEl=null,this._items=[],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(){var e,t;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),(e=this._resizeObserver)==null||e.disconnect(),this._resizeObserver=null,(t=this._mutationObserver)==null||t.disconnect(),this._mutationObserver=null,this._mediaQuery){try{this._mediaQuery.removeEventListener("change",this._handleReducedMotionChange)}catch{this._mediaQuery.removeListener(this._handleReducedMotionChange)}this._mediaQuery=null}E(this._raf),this._raf=null,super.disconnectedCallback()}refresh(){this._collectItems(),this._syncHostStyles(),this._measureItems(),this._syncTabIndices(),this._updateTargets(),this._queueAnimation()}focusItem(e){var n,l;const t=typeof e=="number"?e:this._items.findIndex(r=>r.el.getAttribute("data-value")===String(e));t<0||t>=this._items.length||(n=this._items[t])!=null&&n.disabled||(this._focusedIndex=t,this._rovingIndex=t,this._syncTabIndices(),(l=this._items[t])==null||l.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,n){!e||t===n||!this.isConnected||(z.has(e)&&this._syncHostStyles(),P.has(e)&&this._syncItemChrome(),(N.has(e)||P.has(e)||z.has(e))&&this.refresh())}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+      <style>${q}</style>
+      <div class="root" part="root">
+        <div class="frame" part="frame">
+          <div class="items" part="items">
+            <slot></slot>
+          </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(),l=this._orientation()==="horizontal"?e.clientX-t.left:e.clientY-t.top;this._pointerActive=!0,this._pointerCoord=l,this._measureItems(),this._updateTargets(),this._queueAnimation()}_handlePointerLeave(){this._pointerActive=!1,this._pointerCoord=Number.NaN,this._updateTargets(),this._queueAnimation()}_handleFocusIn(e){var l,r;const t=(r=(l=e.target)==null?void 0:l.closest)==null?void 0:r.call(l,"[data-ui-dock-item]");if(!t)return;const n=this._items.findIndex(s=>s.el===t);n<0||(this._focusedIndex=n,this._rovingIndex=n,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){var r;if(e.defaultPrevented||!this._items.length)return;const t=this._orientation(),n=t==="horizontal"?["ArrowLeft"]:["ArrowUp"],l=t==="horizontal"?["ArrowRight"]:["ArrowDown"];if(n.includes(e.key)){e.preventDefault();const s=S(this._items,this._rovingIndex,-1);s>=0&&this.focusItem(s);return}if(l.includes(e.key)){e.preventDefault();const s=S(this._items,this._rovingIndex,1);s>=0&&this.focusItem(s);return}if(e.key==="Home"){e.preventDefault();const s=this._items.findIndex(i=>!i.disabled);s>=0&&this.focusItem(s);return}if(e.key==="End"){e.preventDefault();for(let s=this._items.length-1;s>=0;s-=1)if(!((r=this._items[s])!=null&&r.disabled)){this.focusItem(s);break}return}e.key==="Escape"&&this.clearActive()}_collectItems(){var l,r;const e=new Map(this._items.map(s=>[s.el,s])),t=Array.from(this.children).filter(B).map(s=>{const i=e.get(s),c=s.querySelector("[data-ui-dock-icon]"),u=s.querySelector("[data-ui-dock-label]"),o=s.querySelector("[data-ui-dock-badge]");return{el:s,iconEl:c,labelEl:u,badgeEl:o,center:(i==null?void 0:i.center)??0,currentScale:(i==null?void 0:i.currentScale)??this._idleScale(),targetScale:(i==null?void 0:i.targetScale)??this._idleScale(),currentLift:(i==null?void 0:i.currentLift)??0,targetLift:(i==null?void 0:i.targetLift)??0,labelVisible:(i==null?void 0:i.labelVisible)??!1,disabled:H(s),sticky:j(s),scaleVelocity:(i==null?void 0:i.scaleVelocity)??0,liftVelocity:(i==null?void 0:i.liftVelocity)??0}});this._items=t;const n=this._items.findIndex(s=>s.sticky&&!s.disabled);n>=0?this._rovingIndex=n:(!this._items[this._rovingIndex]||(l=this._items[this._rovingIndex])!=null&&l.disabled)&&(this._rovingIndex=this._items.findIndex(s=>!s.disabled)),this._rovingIndex<0&&(this._rovingIndex=0),(this._focusedIndex>=this._items.length||(r=this._items[this._focusedIndex])!=null&&r.disabled)&&(this._focusedIndex=-1),this._syncItemChrome()}_syncItemChrome(){const e=A(this.getAttribute("label-placement"),this._orientation()),t=this._labelMode(),n=this._orientation();this._items.forEach(l=>{var o;const{el:r,iconEl:s,labelEl:i,badgeEl:c,sticky:u}=l;if(r.setAttribute("data-ui-dock-item",""),r.style.setProperty("position","relative"),r.style.setProperty("display","inline-flex"),r.style.setProperty("align-items","center"),r.style.setProperty("justify-content","center"),r.style.setProperty("inline-size","var(--ui-dock-item-size)"),r.style.setProperty("block-size","var(--ui-dock-item-size)"),r.style.setProperty("min-inline-size","var(--ui-dock-item-size)"),r.style.setProperty("min-block-size","var(--ui-dock-item-size)"),r.style.setProperty("flex","0 0 var(--ui-dock-item-size)"),r.style.setProperty("box-sizing","border-box"),r.style.setProperty("background","transparent"),r.style.setProperty("border","none"),r.style.setProperty("padding","0"),r.style.setProperty("margin","0"),r.style.setProperty("color","inherit"),r.style.setProperty("text-decoration","none"),r.style.setProperty("outline","none"),r.style.setProperty("cursor",l.disabled?"not-allowed":"pointer"),r.style.setProperty("transform-origin",n==="horizontal"?"center bottom":"center center"),r.style.setProperty("touch-action","manipulation"),r.hasAttribute("tabindex")||(r.tabIndex=-1),!r.hasAttribute("aria-label")){const d=((o=i==null?void 0:i.textContent)==null?void 0:o.trim())||r.getAttribute("data-label")||r.getAttribute("title")||void 0;d&&r.setAttribute("aria-label",d)}u?r.setAttribute("data-dock-current","true"):r.removeAttribute("data-dock-current"),s&&(s.style.setProperty("display","inline-flex"),s.style.setProperty("align-items","center"),s.style.setProperty("justify-content","center"),s.style.setProperty("inline-size","100%"),s.style.setProperty("block-size","100%"),s.style.setProperty("border-radius","var(--ui-dock-item-radius)"),s.style.setProperty("background","var(--ui-dock-item-bg)"),s.style.setProperty("border","1px solid var(--ui-dock-item-border)"),s.style.setProperty("box-shadow","var(--ui-dock-item-shadow)"),s.style.setProperty("backdrop-filter","var(--ui-dock-item-backdrop)"),s.style.setProperty("font-size","var(--ui-dock-icon-size)"),s.style.setProperty("color","inherit"),s.style.setProperty("overflow","hidden"),s.style.setProperty("box-sizing","border-box")),i&&(i.setAttribute("aria-hidden","true"),i.style.setProperty("position","absolute"),i.style.setProperty("pointer-events","none"),i.style.setProperty("white-space","nowrap"),i.style.setProperty("padding","var(--ui-dock-label-padding)"),i.style.setProperty("border-radius","var(--ui-dock-label-radius)"),i.style.setProperty("background","var(--ui-dock-label-bg)"),i.style.setProperty("color","var(--ui-dock-label-color)"),i.style.setProperty("border","1px solid var(--ui-dock-label-border)"),i.style.setProperty("box-shadow","var(--ui-dock-label-shadow)"),i.style.setProperty("backdrop-filter","var(--ui-dock-label-backdrop)"),i.style.setProperty("font-size","var(--ui-dock-label-font-size)"),i.style.setProperty("font-weight","var(--ui-dock-label-font-weight)"),i.style.setProperty("line-height","1.2"),i.style.setProperty("letter-spacing","0.01em"),i.style.setProperty("min-inline-size","max-content"),i.style.setProperty("z-index","3"),i.style.setProperty("display",t==="none"?"none":"inline-flex"),i.style.removeProperty("top"),i.style.removeProperty("bottom"),i.style.removeProperty("left"),i.style.removeProperty("right"),e==="top"?(i.style.setProperty("left","50%"),i.style.setProperty("bottom","calc(100% + var(--ui-dock-label-offset))")):e==="bottom"?(i.style.setProperty("left","50%"),i.style.setProperty("top","calc(100% + var(--ui-dock-label-offset))")):e==="start"?(i.style.setProperty("right","calc(100% + var(--ui-dock-label-offset))"),i.style.setProperty("top","50%")):(i.style.setProperty("left","calc(100% + var(--ui-dock-label-offset))"),i.style.setProperty("top","50%"))),c&&(c.setAttribute("aria-hidden","true"),c.style.setProperty("position","absolute"),c.style.setProperty("inset-inline-end","-2px"),c.style.setProperty("inset-block-start","-2px"),c.style.setProperty("display","inline-flex"),c.style.setProperty("align-items","center"),c.style.setProperty("justify-content","center"),c.style.setProperty("min-inline-size","18px"),c.style.setProperty("min-block-size","18px"),c.style.setProperty("padding","0 6px"),c.style.setProperty("border-radius","999px"),c.style.setProperty("background","var(--ui-dock-accent)"),c.style.setProperty("color","#ffffff"),c.style.setProperty("font-size","11px"),c.style.setProperty("font-weight","700"),c.style.setProperty("box-shadow","0 8px 18px color-mix(in srgb, var(--ui-dock-accent) 32%, rgba(15, 23, 42, 0.18))"),c.style.setProperty("z-index","4"))})}_syncTabIndices(){var t;const e=this._items.findIndex(n=>!n.disabled);e>=0&&(this._rovingIndex<0||(t=this._items[this._rovingIndex])!=null&&t.disabled)&&(this._rovingIndex=e),this._items.forEach((n,l)=>{if(n.disabled){n.el.tabIndex=-1;return}n.el.tabIndex=l===this._rovingIndex?0:-1})}_measureItems(){if(!this._frameEl)return;const e=this._frameEl.getBoundingClientRect(),t=this._orientation(),n=t==="horizontal"?e.left:e.top;this._items.forEach(l=>{const r=l.el.getBoundingClientRect();l.center=(t==="horizontal"?r.left+r.width/2:r.top+r.height/2)-n})}_updateTargets(){const e=this._idleScale(),t=Math.max(e,this._magnification()),n=Math.max(1,this._distance()),l=this._lift()*this._motion().lift,r=this._labelMode();this._items.forEach((s,i)=>{let c=e;if(s.sticky&&(c=Math.max(c,e+(t-e)*.08)),this._pointerActive&&Number.isFinite(this._pointerCoord)){const o=Math.abs(this._pointerCoord-s.center),d=p(1-o/n,0,1);c=Math.max(c,e+(t-e)*d*d)}i===this._focusedIndex&&(c=Math.max(c,t)),s.disabled&&(c=e);const u=t===e?0:(c-e)/(t-e);s.targetScale=p(c,e,t),s.targetLift=u*l,s.labelVisible=r==="always"||r!=="none"&&(i===this._focusedIndex||u>.18)}),this._updateRuntimeState()}_applyFrame(e=!1){const t=this._smoothing(),n=this._motion(),l=p(n.response+t*.12,.05,.42),r=p(n.damping+(t-_)*.14,.52,.9),s=this._orientation(),i=A(this.getAttribute("label-placement"),s),c=this._mainAxisOffsets(n.spread);let u=!1;this._items.forEach((o,d)=>{e?(o.currentScale=o.targetScale,o.currentLift=o.targetLift,o.scaleVelocity=0,o.liftVelocity=0):(o.scaleVelocity=o.scaleVelocity*r+(o.targetScale-o.currentScale)*l,o.liftVelocity=o.liftVelocity*r+(o.targetLift-o.currentLift)*l,o.currentScale+=o.scaleVelocity,o.currentLift+=o.liftVelocity,Math.abs(o.targetScale-o.currentScale)<.002&&Math.abs(o.scaleVelocity)<.002&&(o.currentScale=o.targetScale,o.scaleVelocity=0),Math.abs(o.targetLift-o.currentLift)<.002&&Math.abs(o.liftVelocity)<.002&&(o.currentLift=o.targetLift,o.liftVelocity=0)),(Math.abs(o.targetScale-o.currentScale)>=.002||Math.abs(o.targetLift-o.currentLift)>=.002||Math.abs(o.scaleVelocity)>=.002||Math.abs(o.liftVelocity)>=.002)&&(u=!0);const b=c[d]??0,w=s==="horizontal"?b:i==="start"?-o.currentLift*.28:o.currentLift*.28,M=s==="horizontal"?-o.currentLift:b;if(o.el.style.setProperty("transform",`translate3d(${w}px, ${M}px, 0) scale(${o.currentScale})`),o.el.style.setProperty("z-index",String(100+Math.round(o.currentScale*100)+d)),o.iconEl){const f=d===this._focusedIndex?"0 0 0 3px color-mix(in srgb, var(--ui-dock-focus-ring) 26%, transparent), ":o.sticky?"0 0 0 2px color-mix(in srgb, var(--ui-dock-accent) 22%, transparent), ":"";o.iconEl.style.setProperty("box-shadow",`${f}var(--ui-dock-item-shadow)`),o.iconEl.style.setProperty("border-color",o.sticky||d===this._focusedIndex?"color-mix(in srgb, var(--ui-dock-accent) 30%, var(--ui-dock-item-border))":"var(--ui-dock-item-border)")}if(o.labelEl){const f=o.labelVisible;o.labelEl.style.setProperty("opacity",f?"1":"0"),o.labelEl.style.setProperty("transform",this._labelTransform(i,f)),o.labelEl.style.setProperty("filter",f?"blur(0px)":"blur(6px)")}}),u&&this._queueAnimation()}_queueAnimation(){if(this._reducedMotion){E(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(),n=this._resolvedGapPx(),l=t+n,r=[0];for(let i=1;i<this._items.length;i+=1){const c=this._items[i-1],u=this._items[i],o=t*c.currentScale/2,d=t*u.currentScale/2,b=Math.max(0,o+d-l);r[i]=r[i-1]+b*e}const s=r[r.length-1]/2;return r.map(i=>i-s)}_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=h(this.getAttribute("gap"));e?this.style.setProperty("--ui-dock-gap",e):this.style.removeProperty("--ui-dock-gap");const t=h(this.getAttribute("padding"));t?this.style.setProperty("--ui-dock-padding",t):this.style.removeProperty("--ui-dock-padding");const n=h(this.getAttribute("item-size"));n?(this.style.setProperty("--ui-dock-item-size",n),this.style.setProperty("--ui-dock-icon-size",`calc(${n} * 0.44)`)):(this.style.removeProperty("--ui-dock-item-size"),this.style.removeProperty("--ui-dock-icon-size"));const l=this.getAttribute("radius");if(l&&!V.has(l)){const r=h(l)||l;this.style.setProperty("--ui-dock-radius",r),this.style.setProperty("--ui-dock-item-radius",`calc(${r} * 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"?v[e]:v.smooth}_labelMode(){const e=this.getAttribute("label-mode");return e==="always"||e==="none"?e:"hover"}_magnification(){return Math.max(this._idleScale(),g(this.getAttribute("magnification"),F))}_distance(){return g(this.getAttribute("distance"),C)}_idleScale(){return Math.max(.5,g(this.getAttribute("idle-scale"),R))}_lift(){return g(this.getAttribute("lift"),D)}_smoothing(){return U(this.getAttribute("smoothing"),_)}_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(){var t;const e=h(this.getAttribute("item-size"));if(e){const n=Number.parseFloat(e);if(Number.isFinite(n))return n}return((t=k[this._sizeToken()])==null?void 0:t.itemSize)??O}_resolvedGapPx(){const e=h(this.getAttribute("gap"));if(e){const n=Number.parseFloat(e);if(Number.isFinite(n))return n}const t=k[this._sizeToken()];return t?Number.parseFloat(t.gap):Number.parseFloat(m)}_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",L);exports.UIDock=L;