@editora/ui-core 0.1.8 → 0.1.10

package/dist/dock.esm.js

@@ -0,0 +1,826 @@
+import { E as M } from "./ElementBase-909688f3.mjs";
+const T = 1.92, F = 148, C = 1, R = 20, _ = 0.18, g = "12px", y = "12px 14px", x = "56px", D = 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: g,
+    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: 0.11,
+    damping: 0.82,
+    spread: 0.62,
+    lift: 0.82
+  },
+  smooth: {
+    response: 0.16,
+    damping: 0.78,
+    spread: 0.82,
+    lift: 1
+  },
+  snappy: {
+    response: 0.22,
+    damping: 0.74,
+    spread: 0.92,
+    lift: 1.06
+  },
+  bouncy: {
+    response: 0.24,
+    damping: 0.66,
+    spread: 1,
+    lift: 1.12
+  }
+}, z = /* @__PURE__ */ new Set([
+  "gap",
+  "padding",
+  "radius",
+  "item-size",
+  "variant",
+  "tone",
+  "size",
+  "elevation"
+]), O = /* @__PURE__ */ new Set([
+  "orientation",
+  "magnification",
+  "distance",
+  "idle-scale",
+  "lift",
+  "smoothing",
+  "animation",
+  "gap",
+  "padding",
+  "item-size"
+]), P = /* @__PURE__ */ new Set(["label-mode", "label-placement"]), N = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), V = `
+  :host {
+    --ui-dock-gap: ${g};
+    --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: ${g};
+    --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 m(a, e) {
+  return Math.max(0, I(a, e));
+}
+function q(a, e) {
+  return p(I(a, e), 0.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 U(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 $(a) {
+  return a instanceof HTMLElement;
+}
+function B(a) {
+  return a.hasAttribute("disabled") || a.getAttribute("aria-disabled") === "true";
+}
+function H(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 G extends M {
+  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(), (O.has(e) || P.has(e) || z.has(e)) && this.refresh());
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  render() {
+    this.setContent(`
+      <style>${V}</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($).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: B(s),
+        sticky: H(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) * 0.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 > 0.18);
+    }), this._updateRuntimeState();
+  }
+  _applyFrame(e = !1) {
+    const t = this._smoothing(), n = this._motion(), l = p(n.response + t * 0.12, 0.05, 0.42), r = p(n.damping + (t - _) * 0.14, 0.52, 0.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) < 2e-3 && Math.abs(o.scaleVelocity) < 2e-3 && (o.currentScale = o.targetScale, o.scaleVelocity = 0), Math.abs(o.targetLift - o.currentLift) < 2e-3 && Math.abs(o.liftVelocity) < 2e-3 && (o.currentLift = o.targetLift, o.liftVelocity = 0)), (Math.abs(o.targetScale - o.currentScale) >= 2e-3 || Math.abs(o.targetLift - o.currentLift) >= 2e-3 || Math.abs(o.scaleVelocity) >= 2e-3 || Math.abs(o.liftVelocity) >= 2e-3) && (u = !0);
+      const b = c[d] ?? 0, L = s === "horizontal" ? b : i === "start" ? -o.currentLift * 0.28 : o.currentLift * 0.28, w = s === "horizontal" ? -o.currentLift : b;
+      if (o.el.style.setProperty("transform", `translate3d(${L}px, ${w}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 = U(() => {
+      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 && !N.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(), m(this.getAttribute("magnification"), T));
+  }
+  _distance() {
+    return m(this.getAttribute("distance"), F);
+  }
+  _idleScale() {
+    return Math.max(0.5, m(this.getAttribute("idle-scale"), C));
+  }
+  _lift() {
+    return m(this.getAttribute("lift"), R);
+  }
+  _smoothing() {
+    return q(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) ?? D;
+  }
+  _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(g);
+  }
+  _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", G);
+export {
+  G as UIDock
+};