@editora/ui-core 0.1.24 → 0.2.0

package/dist/orbiter.esm.js

@@ -66,40 +66,23 @@ const O = "18s", V = "0s", A = "88px", P = "44px", w = "128px", E = "28px", $ =
     --ui-orbiter-center-size: ${w};
     --ui-orbiter-ring-gap: ${E};
     --ui-orbiter-padding: ${$};
-    --ui-orbiter-radius: 28px;
+    --ui-orbiter-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-orbiter-stage-size:
       calc((2 * var(--ui-orbiter-farthest-radius, ${A})) + var(--ui-orbiter-item-size));
     --ui-orbiter-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
-    --ui-orbiter-bg:
-      radial-gradient(
-        circle at 50% 50%,
-        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 92%, transparent) 0%,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 64%,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 84%, transparent) 100%
-      );
+    --ui-orbiter-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-orbiter-color: var(--ui-color-text, #0f172a);
-    --ui-orbiter-border-color:
-      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 86%, transparent);
+    --ui-orbiter-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-orbiter-border: 1px solid var(--ui-orbiter-border-color);
-    --ui-orbiter-shadow:
-      0 1px 3px rgba(15, 23, 42, 0.06),
-      0 24px 44px rgba(15, 23, 42, 0.12);
+    --ui-orbiter-shadow: none;
     --ui-orbiter-backdrop: none;
     --ui-orbiter-path-color:
       color-mix(in srgb, var(--ui-orbiter-accent) 16%, var(--ui-orbiter-border-color));
     --ui-orbiter-path-opacity: 0.95;
-    --ui-orbiter-item-bg:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, #ffffff 96%, transparent),
-        color-mix(in srgb, var(--ui-orbiter-accent) 8%, rgba(255, 255, 255, 0.9))
-      );
+    --ui-orbiter-item-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-orbiter-item-color: var(--ui-orbiter-color);
-    --ui-orbiter-item-border:
-      1px solid color-mix(in srgb, var(--ui-orbiter-accent) 12%, rgba(255, 255, 255, 0.82));
-    --ui-orbiter-item-shadow:
-      0 8px 14px rgba(15, 23, 42, 0.08),
-      0 1px 2px rgba(15, 23, 42, 0.05);
+    --ui-orbiter-item-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
+    --ui-orbiter-item-shadow: none;
     --ui-orbiter-item-backdrop: none;
     --ui-orbiter-center-bg:
       radial-gradient(
@@ -425,7 +408,7 @@ const O = "18s", V = "0s", A = "88px", P = "44px", w = "128px", E = "28px", $ =
     outline: none;
     border-color: color-mix(in srgb, var(--ui-orbiter-focus-ring) 30%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-orbiter-focus-ring) 20%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-orbiter-focus-ring)),
       var(--ui-orbiter-item-shadow);
   }
 
@@ -493,7 +476,7 @@ const O = "18s", V = "0s", A = "88px", P = "44px", w = "128px", E = "28px", $ =
     outline: none;
     border-color: color-mix(in srgb, var(--ui-orbiter-focus-ring) 24%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-orbiter-focus-ring) 18%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-orbiter-focus-ring)),
       var(--ui-orbiter-shadow);
   }
 
@@ -545,8 +528,8 @@ function h(i, t) {
   if (!e) return t;
   const s = e.split(/\s+/).filter(Boolean);
   if (!s.length) return t;
-  const b = s.map((a) => /^-?\d+(\.\d+)?$/.test(a) ? `${a}px` : /^-?\d*\.?\d+(px|rem|em|%|vh|vw|ch|ex|vmin|vmax)$/.test(a) ? a : null);
-  return b.some((a) => a === null) ? t : b.join(" ");
+  const c = s.map((a) => /^-?\d+(\.\d+)?$/.test(a) ? `${a}px` : /^-?\d*\.?\d+(px|rem|em|%|vh|vw|ch|ex|vmin|vmax)$/.test(a) ? a : null);
+  return c.some((a) => a === null) ? t : c.join(" ");
 }
 function F(i, t) {
   if (i == null || i === "") return t;
@@ -671,39 +654,39 @@ class Q extends U {
     return this._centerSlot ? this._centerSlot.assignedElements({ flatten: !0 }).filter((t) => t instanceof HTMLElement) : [];
   }
   _syncItems() {
-    const t = this._itemsFromSlot(), e = this._centerFromSlot(), s = new Set(t), b = new Set(e);
+    const t = this._itemsFromSlot(), e = this._centerFromSlot(), s = new Set(t), c = new Set(e);
     for (const r of this._items)
       s.has(r) || (this._unbindItemHover(r), this._cancelAnimation(r), r.removeAttribute("data-ui-orbiter-managed"), r.removeAttribute("data-ui-orbit-runtime"), r.style.removeProperty("--ui-orbit-index"), r.style.removeProperty("--ui-orbit-ring"), r.style.removeProperty("--ui-orbit-radius"), r.style.removeProperty("--ui-orbit-start-angle"), r.style.removeProperty("--ui-orbit-quarter-angle"), r.style.removeProperty("--ui-orbit-half-angle"), r.style.removeProperty("--ui-orbit-three-quarter-angle"), r.style.removeProperty("--ui-orbit-end-angle"), r.style.removeProperty("--ui-orbit-start-angle-inverse"), r.style.removeProperty("--ui-orbit-quarter-angle-inverse"), r.style.removeProperty("--ui-orbit-half-angle-inverse"), r.style.removeProperty("--ui-orbit-three-quarter-angle-inverse"), r.style.removeProperty("--ui-orbit-end-angle-inverse"), r.style.removeProperty("--ui-orbit-duration"), r.style.removeProperty("--ui-orbit-duration-scale"), r.style.removeProperty("animation"), r.style.removeProperty("transform"), r.hasAttribute("data-ui-orbiter-owned") && (r.removeAttribute("data-ui-orbiter-item"), r.removeAttribute("data-ui-orbiter-owned")));
     for (const r of this._centerNodes)
-      b.has(r) || (r.removeAttribute("data-ui-orbiter-managed"), r.hasAttribute("data-ui-orbiter-owned") && (r.removeAttribute("data-ui-orbiter-center"), r.removeAttribute("data-ui-orbiter-owned")));
+      c.has(r) || (r.removeAttribute("data-ui-orbiter-managed"), r.hasAttribute("data-ui-orbiter-owned") && (r.removeAttribute("data-ui-orbiter-center"), r.removeAttribute("data-ui-orbiter-owned")));
     e.forEach((r) => {
       r.setAttribute("data-ui-orbiter-managed", ""), r.hasAttribute("data-ui-orbiter-center") || (r.setAttribute("data-ui-orbiter-center", ""), r.setAttribute("data-ui-orbiter-owned", "")), r.setAttribute("slot", "center");
     });
     const a = z(this.getAttribute("rings")), u = h(this._orbitRadiusValue(), this._sizePreset().orbitRadius), o = h(this.getAttribute("ring-gap"), this._sizePreset().ringGap), l = g(this.getAttribute("start-angle"), C), d = Array.from({ length: a }, () => []);
-    t.forEach((r, c) => {
-      r.setAttribute("data-ui-orbiter-managed", ""), r.hasAttribute("data-ui-orbiter-item") || (r.setAttribute("data-ui-orbiter-item", ""), r.setAttribute("data-ui-orbiter-owned", "")), this._bindItemHover(r), d[c % a].push({ item: r, index: c });
-    }), d.forEach((r, c) => {
-      const f = r.length ? 360 / r.length : 360, y = r.length > 1 && c % 2 === 1 ? f / 2 : 0, p = c === 0 ? u : `calc(${u} + ${c} * ${o})`, x = 360 * this._directionSign(c);
+    t.forEach((r, b) => {
+      r.setAttribute("data-ui-orbiter-managed", ""), r.hasAttribute("data-ui-orbiter-item") || (r.setAttribute("data-ui-orbiter-item", ""), r.setAttribute("data-ui-orbiter-owned", "")), this._bindItemHover(r), d[b % a].push({ item: r, index: b });
+    }), d.forEach((r, b) => {
+      const f = r.length ? 360 / r.length : 360, y = r.length > 1 && b % 2 === 1 ? f / 2 : 0, p = b === 0 ? u : `calc(${u} + ${b} * ${o})`, x = 360 * this._directionSign(b);
       r.forEach(({ item: n, index: D }, G) => {
-        const m = l + y + G * f, R = m + x, k = m + x * 0.25, I = m + x * 0.5, L = m + x * 0.75, H = 1 + c * 0.14;
-        n.style.setProperty("--ui-orbit-index", String(D)), n.style.setProperty("--ui-orbit-ring", String(c)), n.style.setProperty("--ui-orbit-radius", p), n.style.setProperty("--ui-orbit-duration", `calc(var(--ui-orbiter-duration) * ${H})`), n.style.setProperty("--ui-orbit-duration-scale", String(H)), n.style.setProperty("--ui-orbit-start-angle", `${m}deg`), n.style.setProperty("--ui-orbit-quarter-angle", `${k}deg`), n.style.setProperty("--ui-orbit-half-angle", `${I}deg`), n.style.setProperty("--ui-orbit-three-quarter-angle", `${L}deg`), n.style.setProperty("--ui-orbit-end-angle", `${R}deg`), n.style.setProperty("--ui-orbit-start-angle-inverse", `${-m}deg`), n.style.setProperty("--ui-orbit-quarter-angle-inverse", `${-k}deg`), n.style.setProperty("--ui-orbit-half-angle-inverse", `${-I}deg`), n.style.setProperty("--ui-orbit-three-quarter-angle-inverse", `${-L}deg`), n.style.setProperty("--ui-orbit-end-angle-inverse", `${-R}deg`), n.style.setProperty("transform", v(m, p));
+        const m = l + y + G * f, R = m + x, k = m + x * 0.25, I = m + x * 0.5, L = m + x * 0.75, H = 1 + b * 0.14;
+        n.style.setProperty("--ui-orbit-index", String(D)), n.style.setProperty("--ui-orbit-ring", String(b)), n.style.setProperty("--ui-orbit-radius", p), n.style.setProperty("--ui-orbit-duration", `calc(var(--ui-orbiter-duration) * ${H})`), n.style.setProperty("--ui-orbit-duration-scale", String(H)), n.style.setProperty("--ui-orbit-start-angle", `${m}deg`), n.style.setProperty("--ui-orbit-quarter-angle", `${k}deg`), n.style.setProperty("--ui-orbit-half-angle", `${I}deg`), n.style.setProperty("--ui-orbit-three-quarter-angle", `${L}deg`), n.style.setProperty("--ui-orbit-end-angle", `${R}deg`), n.style.setProperty("--ui-orbit-start-angle-inverse", `${-m}deg`), n.style.setProperty("--ui-orbit-quarter-angle-inverse", `${-k}deg`), n.style.setProperty("--ui-orbit-half-angle-inverse", `${-I}deg`), n.style.setProperty("--ui-orbit-three-quarter-angle-inverse", `${-L}deg`), n.style.setProperty("--ui-orbit-end-angle-inverse", `${-R}deg`), n.style.setProperty("transform", v(m, p));
       });
     }), this._items = t, this._centerNodes = e, this._itemHovering = this._items.some((r) => r.matches(":hover")), this.setAttribute("data-item-count", String(this._items.length)), this.setAttribute("data-center-count", String(this._centerNodes.length)), this.setAttribute("data-ring-count", String(a));
   }
   _renderPaths() {
     if (!this._pathsEl) return;
-    const t = z(this.getAttribute("rings")), e = h(this._orbitRadiusValue(), this._sizePreset().orbitRadius), s = h(this.getAttribute("ring-gap"), this._sizePreset().ringGap), b = Array.from({ length: t }, (a, u) => {
+    const t = z(this.getAttribute("rings")), e = h(this._orbitRadiusValue(), this._sizePreset().orbitRadius), s = h(this.getAttribute("ring-gap"), this._sizePreset().ringGap), c = Array.from({ length: t }, (a, u) => {
       const o = u === 0 ? e : `calc(${e} + ${u} * ${s})`;
       return `<div class="path" part="path path-${u + 1}" style="inline-size:calc(2 * (${o}));block-size:calc(2 * (${o}));"></div>`;
     }).join("");
-    this._pathsEl.innerHTML = b, this._pathsEl.toggleAttribute("hidden", !this._pathVisible());
+    this._pathsEl.innerHTML = c, this._pathsEl.toggleAttribute("hidden", !this._pathVisible());
   }
   _bindItemHover(t) {
     if (this._itemHoverHandlers.has(t)) return;
     const e = () => {
       this._itemHovering = !0, this._syncState();
-    }, s = (b) => {
-      const u = (b.relatedTarget instanceof HTMLElement ? b.relatedTarget : null)?.closest("[data-ui-orbiter-item]");
+    }, s = (c) => {
+      const u = (c.relatedTarget instanceof HTMLElement ? c.relatedTarget : null)?.closest("[data-ui-orbiter-item]");
       this._itemHovering = u instanceof HTMLElement ? this._items.includes(u) : !1, this._syncState();
     };
     t.addEventListener("pointerenter", e), t.addEventListener("pointerleave", s), this._itemHoverHandlers.set(t, { enter: e, leave: s });
@@ -754,8 +737,8 @@ class Q extends U {
     return this.getAttribute("icon-size") ?? this.getAttribute("item-size");
   }
   _syncRuntimeStyles() {
-    const t = this._sizePreset(), e = this._motionPreset(), s = F(this.getAttribute("duration"), O), b = F(this.getAttribute("delay"), V), a = h(this._orbitRadiusValue(), t.orbitRadius), u = h(this._iconSizeValue(), t.itemSize), o = h(this.getAttribute("center-size"), t.centerSize), l = h(this.getAttribute("ring-gap"), t.ringGap), d = h(this.getAttribute("padding"), t.padding), r = z(this.getAttribute("rings")), c = S(this.getAttribute("speed"), 1), f = r <= 1 ? a : `calc(${a} + ${r - 1} * ${l})`, y = `calc((2 * (${f})) + ${u})`;
-    this.style.setProperty("--ui-orbiter-duration", `calc((${s}) * ${e.durationScale} / ${c})`), this.style.setProperty("--ui-orbiter-delay", b), this.style.setProperty("--ui-orbiter-orbit-radius", a), this.style.setProperty("--ui-orbiter-item-size", u), this.style.setProperty("--ui-orbiter-center-size", o), this.style.setProperty("--ui-orbiter-ring-gap", l), this.style.setProperty("--ui-orbiter-padding", d), this.style.setProperty("--ui-orbiter-farthest-radius", f), this.style.setProperty("--ui-orbiter-stage-size", y), this.style.setProperty("--ui-orbiter-path-opacity", String(e.accentOpacity > 0.18 ? 1 : 0.95));
+    const t = this._sizePreset(), e = this._motionPreset(), s = F(this.getAttribute("duration"), O), c = F(this.getAttribute("delay"), V), a = h(this._orbitRadiusValue(), t.orbitRadius), u = h(this._iconSizeValue(), t.itemSize), o = h(this.getAttribute("center-size"), t.centerSize), l = h(this.getAttribute("ring-gap"), t.ringGap), d = h(this.getAttribute("padding"), t.padding), r = z(this.getAttribute("rings")), b = S(this.getAttribute("speed"), 1), f = r <= 1 ? a : `calc(${a} + ${r - 1} * ${l})`, y = `calc((2 * (${f})) + ${u})`;
+    this.style.setProperty("--ui-orbiter-duration", `calc((${s}) * ${e.durationScale} / ${b})`), this.style.setProperty("--ui-orbiter-delay", c), this.style.setProperty("--ui-orbiter-orbit-radius", a), this.style.setProperty("--ui-orbiter-item-size", u), this.style.setProperty("--ui-orbiter-center-size", o), this.style.setProperty("--ui-orbiter-ring-gap", l), this.style.setProperty("--ui-orbiter-padding", d), this.style.setProperty("--ui-orbiter-farthest-radius", f), this.style.setProperty("--ui-orbiter-stage-size", y), this.style.setProperty("--ui-orbiter-path-opacity", String(e.accentOpacity > 0.18 ? 1 : 0.95));
     const p = this.getAttribute("surface-radius");
     !p || B.has(p.trim()) ? this.style.removeProperty("--ui-orbiter-radius") : this.style.setProperty("--ui-orbiter-radius", h(p, t.panelRadius));
   }
@@ -771,15 +754,15 @@ class Q extends U {
       t.forEach((o) => o.removeAttribute("data-ui-orbit-runtime"));
       return;
     }
-    const s = this._motionPreset(), b = M(this.getAttribute("duration"), 18e3), a = M(this.getAttribute("delay"), 0), u = S(this.getAttribute("speed"), 1);
+    const s = this._motionPreset(), c = M(this.getAttribute("duration"), 18e3), a = M(this.getAttribute("delay"), 0), u = S(this.getAttribute("speed"), 1);
     for (const o of t) {
-      const l = o.style.getPropertyValue("--ui-orbit-radius") || "var(--ui-orbiter-orbit-radius)", d = g(o.style.getPropertyValue("--ui-orbit-start-angle"), C), r = g(o.style.getPropertyValue("--ui-orbit-quarter-angle"), d + 90), c = g(o.style.getPropertyValue("--ui-orbit-half-angle"), d + 180), f = g(o.style.getPropertyValue("--ui-orbit-three-quarter-angle"), d + 270), y = g(o.style.getPropertyValue("--ui-orbit-end-angle"), d + 360), p = S(o.style.getPropertyValue("--ui-orbit-duration-scale"), 1), T = b * s.durationScale * p / u;
+      const l = o.style.getPropertyValue("--ui-orbit-radius") || "var(--ui-orbiter-orbit-radius)", d = g(o.style.getPropertyValue("--ui-orbit-start-angle"), C), r = g(o.style.getPropertyValue("--ui-orbit-quarter-angle"), d + 90), b = g(o.style.getPropertyValue("--ui-orbit-half-angle"), d + 180), f = g(o.style.getPropertyValue("--ui-orbit-three-quarter-angle"), d + 270), y = g(o.style.getPropertyValue("--ui-orbit-end-angle"), d + 360), p = S(o.style.getPropertyValue("--ui-orbit-duration-scale"), 1), T = c * s.durationScale * p / u;
       this._animations.get(o)?.cancel(), o.setAttribute("data-ui-orbit-runtime", "");
       const n = o.animate(
         [
           { transform: v(d, l), offset: 0 },
           { transform: v(r, l), offset: 0.25 },
-          { transform: v(c, l), offset: 0.5 },
+          { transform: v(b, l), offset: 0.5 },
           { transform: v(f, l), offset: 0.75 },
           { transform: v(y, l), offset: 1 }
         ],

package/dist/overlay-motion-B56x1GoY.js

@@ -0,0 +1,49 @@
+"use strict";const v=`
+  [data-ui-overlay] {
+    --ui-overlay-shift: 4px;
+    --ui-overlay-from: translate3d(0, 0, 0);
+    --ui-overlay-ox: center;
+    --ui-overlay-oy: center;
+    transform-origin: var(--ui-overlay-ox) var(--ui-overlay-oy);
+  }
+
+  [data-ui-overlay][data-side="top"] { --ui-overlay-from: translate3d(0, var(--ui-overlay-shift), 0); --ui-overlay-oy: bottom; }
+  [data-ui-overlay][data-side="bottom"] { --ui-overlay-from: translate3d(0, calc(var(--ui-overlay-shift) * -1), 0); --ui-overlay-oy: top; }
+  [data-ui-overlay][data-side="left"] { --ui-overlay-from: translate3d(var(--ui-overlay-shift), 0, 0); --ui-overlay-ox: right; }
+  [data-ui-overlay][data-side="right"] { --ui-overlay-from: translate3d(calc(var(--ui-overlay-shift) * -1), 0, 0); --ui-overlay-ox: left; }
+  [data-ui-overlay][data-align="start"][data-side="top"],
+  [data-ui-overlay][data-align="start"][data-side="bottom"] { --ui-overlay-ox: left; }
+  [data-ui-overlay][data-align="end"][data-side="top"],
+  [data-ui-overlay][data-align="end"][data-side="bottom"] { --ui-overlay-ox: right; }
+  [data-ui-overlay][data-align="start"][data-side="left"],
+  [data-ui-overlay][data-align="start"][data-side="right"] { --ui-overlay-oy: top; }
+  [data-ui-overlay][data-align="end"][data-side="left"],
+  [data-ui-overlay][data-align="end"][data-side="right"] { --ui-overlay-oy: bottom; }
+
+  [data-ui-overlay][data-state="open"] {
+    animation: ui-overlay-in var(--ui-overlay-in-duration, 150ms) var(--ui-motion-enter-easing, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
+  }
+
+  [data-ui-overlay][data-instant][data-state="open"] {
+    animation: none;
+  }
+
+  [data-ui-overlay][data-state="closed"] {
+    animation: ui-overlay-out var(--ui-overlay-out-duration, 100ms) var(--ui-motion-exit-easing, cubic-bezier(0.4, 0, 1, 1)) both;
+    pointer-events: none;
+  }
+
+  @keyframes ui-overlay-in {
+    from { opacity: 0; transform: var(--ui-overlay-from) scale(0.96); }
+    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+  }
+
+  @keyframes ui-overlay-out {
+    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+    to { opacity: 0; transform: var(--ui-overlay-from) scale(0.96); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui-overlay][data-state] { animation: none !important; }
+  }
+`,m=()=>typeof HTMLElement<"u"&&typeof HTMLElement.prototype.showPopover=="function";function l(t,e={}){if(!(!m()||!t.isConnected))try{t.hasAttribute("popover")||t.setAttribute("popover","manual"),e.resetBox!==!1&&(t.style.setProperty("right","auto"),t.style.setProperty("bottom","auto"),t.style.setProperty("margin","0"),t.style.setProperty("border","0"),t.style.setProperty("padding","0"),t.style.setProperty("overflow","visible"),t.style.setProperty("background","transparent"),t.style.setProperty("color","inherit")),t.matches(":popover-open")||t.showPopover()}catch{}}function f(t,e={}){t.setAttribute("data-ui-overlay",""),e.animate===!1&&t.setAttribute("data-instant",""),t.setAttribute("data-state","open"),e.topLayer!==!1&&l(t)}function c(t){if(typeof getComputedStyle!="function")return null;const e=getComputedStyle(t),r=(e.animationName||"").split(",").map(a=>a.trim());if(!r.length||r.every(a=>!a||a==="none"))return null;const o=a=>{const i=parseFloat(a);return Number.isFinite(i)?/ms\s*$/.test(a)?i:i*1e3:0},s=(e.animationDuration||"0s").split(",").map(o),n=(e.animationDelay||"0s").split(",").map(o);return Math.max(0,...s.map((a,i)=>a+(n[i]??n[0]??0)))}function u(t,e){t.setAttribute("data-ui-overlay",""),t.setAttribute("data-state","closed");const r=c(t);if(r===null||r<=0)return e(),()=>{};let o=!1,s=null;const n=()=>{o||(o=!0,s&&clearTimeout(s),t.removeEventListener("animationend",a),t.removeEventListener("animationcancel",a),e())},a=i=>{i.target===t&&n()};return t.addEventListener("animationend",a),t.addEventListener("animationcancel",a),s=setTimeout(n,r+60),n}function y(t){if(t)try{t.parentElement&&t.parentElement.removeChild(t)}catch{}}function p(t){t&&u(t,()=>y(t))}const d=new WeakMap;function b(t,e,r){if(r&&t.setAttribute("data-side",r),d.get(t)?.(),d.delete(t),t.setAttribute("data-ui-overlay",""),e){const o=t.hidden;t.hidden=!1,(o||t.getAttribute("data-state")!=="open")&&t.setAttribute("data-state","open");return}if(t.hidden){t.setAttribute("data-state","closed");return}d.set(t,u(t,()=>{d.delete(t),t.hidden=!0}))}exports.OVERLAY_MOTION_CSS=v;exports.closeOverlay=u;exports.liftToTopLayer=l;exports.openOverlay=f;exports.removeOverlay=y;exports.retireOverlay=p;exports.setPanelOpen=b;

package/dist/overlay-motion-BX3dPLay.mjs

@@ -0,0 +1,120 @@
+const f = `
+  [data-ui-overlay] {
+    --ui-overlay-shift: 4px;
+    --ui-overlay-from: translate3d(0, 0, 0);
+    --ui-overlay-ox: center;
+    --ui-overlay-oy: center;
+    transform-origin: var(--ui-overlay-ox) var(--ui-overlay-oy);
+  }
+
+  [data-ui-overlay][data-side="top"] { --ui-overlay-from: translate3d(0, var(--ui-overlay-shift), 0); --ui-overlay-oy: bottom; }
+  [data-ui-overlay][data-side="bottom"] { --ui-overlay-from: translate3d(0, calc(var(--ui-overlay-shift) * -1), 0); --ui-overlay-oy: top; }
+  [data-ui-overlay][data-side="left"] { --ui-overlay-from: translate3d(var(--ui-overlay-shift), 0, 0); --ui-overlay-ox: right; }
+  [data-ui-overlay][data-side="right"] { --ui-overlay-from: translate3d(calc(var(--ui-overlay-shift) * -1), 0, 0); --ui-overlay-ox: left; }
+  [data-ui-overlay][data-align="start"][data-side="top"],
+  [data-ui-overlay][data-align="start"][data-side="bottom"] { --ui-overlay-ox: left; }
+  [data-ui-overlay][data-align="end"][data-side="top"],
+  [data-ui-overlay][data-align="end"][data-side="bottom"] { --ui-overlay-ox: right; }
+  [data-ui-overlay][data-align="start"][data-side="left"],
+  [data-ui-overlay][data-align="start"][data-side="right"] { --ui-overlay-oy: top; }
+  [data-ui-overlay][data-align="end"][data-side="left"],
+  [data-ui-overlay][data-align="end"][data-side="right"] { --ui-overlay-oy: bottom; }
+
+  [data-ui-overlay][data-state="open"] {
+    animation: ui-overlay-in var(--ui-overlay-in-duration, 150ms) var(--ui-motion-enter-easing, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
+  }
+
+  [data-ui-overlay][data-instant][data-state="open"] {
+    animation: none;
+  }
+
+  [data-ui-overlay][data-state="closed"] {
+    animation: ui-overlay-out var(--ui-overlay-out-duration, 100ms) var(--ui-motion-exit-easing, cubic-bezier(0.4, 0, 1, 1)) both;
+    pointer-events: none;
+  }
+
+  @keyframes ui-overlay-in {
+    from { opacity: 0; transform: var(--ui-overlay-from) scale(0.96); }
+    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+  }
+
+  @keyframes ui-overlay-out {
+    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
+    to { opacity: 0; transform: var(--ui-overlay-from) scale(0.96); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui-overlay][data-state] { animation: none !important; }
+  }
+`, l = () => typeof HTMLElement < "u" && typeof HTMLElement.prototype.showPopover == "function";
+function y(t, e = {}) {
+  if (!(!l() || !t.isConnected))
+    try {
+      t.hasAttribute("popover") || t.setAttribute("popover", "manual"), e.resetBox !== !1 && (t.style.setProperty("right", "auto"), t.style.setProperty("bottom", "auto"), t.style.setProperty("margin", "0"), t.style.setProperty("border", "0"), t.style.setProperty("padding", "0"), t.style.setProperty("overflow", "visible"), t.style.setProperty("background", "transparent"), t.style.setProperty("color", "inherit")), t.matches(":popover-open") || t.showPopover();
+    } catch {
+    }
+}
+function c(t, e = {}) {
+  t.setAttribute("data-ui-overlay", ""), e.animate === !1 && t.setAttribute("data-instant", ""), t.setAttribute("data-state", "open"), e.topLayer !== !1 && y(t);
+}
+function v(t) {
+  if (typeof getComputedStyle != "function") return null;
+  const e = getComputedStyle(t), r = (e.animationName || "").split(",").map((a) => a.trim());
+  if (!r.length || r.every((a) => !a || a === "none")) return null;
+  const o = (a) => {
+    const i = parseFloat(a);
+    return Number.isFinite(i) ? /ms\s*$/.test(a) ? i : i * 1e3 : 0;
+  }, s = (e.animationDuration || "0s").split(",").map(o), n = (e.animationDelay || "0s").split(",").map(o);
+  return Math.max(0, ...s.map((a, i) => a + (n[i] ?? n[0] ?? 0)));
+}
+function u(t, e) {
+  t.setAttribute("data-ui-overlay", ""), t.setAttribute("data-state", "closed");
+  const r = v(t);
+  if (r === null || r <= 0)
+    return e(), () => {
+    };
+  let o = !1, s = null;
+  const n = () => {
+    o || (o = !0, s && clearTimeout(s), t.removeEventListener("animationend", a), t.removeEventListener("animationcancel", a), e());
+  }, a = (i) => {
+    i.target === t && n();
+  };
+  return t.addEventListener("animationend", a), t.addEventListener("animationcancel", a), s = setTimeout(n, r + 60), n;
+}
+function m(t) {
+  if (t)
+    try {
+      t.parentElement && t.parentElement.removeChild(t);
+    } catch {
+    }
+}
+function p(t) {
+  t && u(t, () => m(t));
+}
+const d = /* @__PURE__ */ new WeakMap();
+function b(t, e, r) {
+  if (r && t.setAttribute("data-side", r), d.get(t)?.(), d.delete(t), t.setAttribute("data-ui-overlay", ""), e) {
+    const o = t.hidden;
+    t.hidden = !1, (o || t.getAttribute("data-state") !== "open") && t.setAttribute("data-state", "open");
+    return;
+  }
+  if (t.hidden) {
+    t.setAttribute("data-state", "closed");
+    return;
+  }
+  d.set(
+    t,
+    u(t, () => {
+      d.delete(t), t.hidden = !0;
+    })
+  );
+}
+export {
+  f as O,
+  m as a,
+  u as c,
+  y as l,
+  c as o,
+  p as r,
+  b as s
+};

package/dist/pagination.cjs.js

@@ -2,18 +2,19 @@
   :host {
     display: inline-flex;
     max-width: 100%;
-    --ui-pagination-gap: 6px;
-    --ui-pagination-radius: 10px;
-    --ui-pagination-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-pagination-item-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
-    --ui-pagination-item-bg-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent);
+    --ui-pagination-gap: 2px;
+    --ui-pagination-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-pagination-bg: transparent;
+    --ui-pagination-item-bg: transparent;
+    --ui-pagination-item-bg-hover: var(--ui-color-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent));
     --ui-pagination-active-bg: var(--ui-color-primary, #2563eb);
-    --ui-pagination-active-color: #ffffff;
-    --ui-pagination-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
-    --ui-pagination-color: var(--ui-color-text, #0f172a);
-    --ui-pagination-muted: var(--ui-color-muted, #526175);
-    --ui-pagination-padding: 6px 11px;
-    --ui-pagination-font-size: 13px;
+    --ui-pagination-active-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-pagination-border: transparent;
+    --ui-pagination-color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    --ui-pagination-muted: var(--ui-color-text-secondary, var(--ui-color-muted, #526175));
+    --ui-pagination-h: var(--ui-control-height-2, 32px);
+    --ui-pagination-padding: 0 8px;
+    --ui-pagination-font-size: var(--ui-control-font-size-2, 14px);
     --ui-pagination-shadow: none;
     color-scheme: light dark;
   }
@@ -24,9 +25,9 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--ui-pagination-gap);
-    padding: 6px;
-    border: 1px solid var(--ui-pagination-border);
-    border-radius: calc(var(--ui-pagination-radius) + 2px);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-pagination-radius);
     background: var(--ui-pagination-bg);
     box-shadow: var(--ui-pagination-shadow);
   }
@@ -45,22 +46,22 @@
     background: var(--ui-pagination-item-bg);
     color: var(--ui-pagination-color);
     font-size: var(--ui-pagination-font-size);
-    font-weight: 600;
+    font-weight: 500;
     line-height: 1.2;
     box-sizing: border-box;
-    min-width: 34px;
+    min-width: var(--ui-pagination-h);
+    min-height: var(--ui-pagination-h);
     cursor: pointer;
     transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease, transform 130ms ease;
   }
 
   button:hover:not(:disabled) {
     background: var(--ui-pagination-item-bg-hover);
-    border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 34%, var(--ui-pagination-border));
   }
 
   button:focus-visible {
-    outline: 2px solid var(--ui-color-focus-ring, #2563eb);
-    outline-offset: 1px;
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   button[aria-current="page"] {
@@ -77,15 +78,17 @@
   :host([size="sm"]) {
     --ui-pagination-gap: 4px;
     --ui-pagination-radius: 8px;
-    --ui-pagination-padding: 4px 8px;
-    --ui-pagination-font-size: 12px;
+    --ui-pagination-h: var(--ui-control-height-1, 24px);
+    --ui-pagination-padding: 0 6px;
+    --ui-pagination-font-size: var(--ui-control-font-size-1, 12px);
   }
 
   :host([size="lg"]) {
     --ui-pagination-gap: 8px;
     --ui-pagination-radius: 12px;
-    --ui-pagination-padding: 7px 13px;
-    --ui-pagination-font-size: 14px;
+    --ui-pagination-h: var(--ui-control-height-3, 40px);
+    --ui-pagination-padding: 0 12px;
+    --ui-pagination-font-size: var(--ui-control-font-size-3, 16px);
   }
 
   :host([variant="classic"]) .pagination {
@@ -193,9 +196,9 @@
       --ui-pagination-shadow: none;
     }
   }
-`;class e extends r.ElementBase{constructor(){super(),this._page=1,this._count=1,this._headless=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["page","count","headless","variant","size","aria-label"]}get page(){return this._page}set page(t){this.goToPage(t)}get count(){return this._count}set count(t){const a=Math.max(1,Number(t)||1);this.setAttribute("count",String(a)),this._page>a&&this.setAttribute("page",String(a))}attributeChangedCallback(t,a,i){(t==="page"||t==="count"||t==="headless")&&(this._page=Math.max(1,Number(this.getAttribute("page"))||1),this._count=Math.max(1,Number(this.getAttribute("count"))||1),this._headless=this.hasAttribute("headless"),this._page>this._count&&(this._page=this._count)),this.requestRender()}render(){if(this._headless){this.setContent("");return}let t="";t+=`<button type="button" data-page="1" aria-label="First" ${this._page===1?"disabled":""}>&laquo;</button>`,t+=`<button type="button" data-page="${this._page-1}" aria-label="Previous" ${this._page===1?"disabled":""}>&lsaquo;</button>`;const a=this._getPageRange(this._page,this._count);a[0]>1&&(t+='<button type="button" data-page="1">1</button>',a[0]>2&&(t+='<span class="ellipsis" aria-hidden="true">…</span>'));for(let n=a[0];n<=a[1];n++)t+=`<button type="button" data-page="${n}" ${n===this._page?'aria-current="page"':""}>${n}</button>`;a[1]<this._count&&(a[1]<this._count-1&&(t+='<span class="ellipsis" aria-hidden="true">…</span>'),t+=`<button type="button" data-page="${this._count}">${this._count}</button>`),t+=`<button type="button" data-page="${this._page+1}" aria-label="Next" ${this._page===this._count?"disabled":""}>&rsaquo;</button>`,t+=`<button type="button" data-page="${this._count}" aria-label="Last" ${this._page===this._count?"disabled":""}>&raquo;</button>`,this.setContent(`
+`;class e extends r.ElementBase{constructor(){super(),this._page=1,this._count=1,this._headless=!1,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["page","count","headless","variant","size","aria-label"]}get page(){return this._page}set page(t){this.goToPage(t)}get count(){return this._count}set count(t){const i=Math.max(1,Number(t)||1);this.setAttribute("count",String(i)),this._page>i&&this.setAttribute("page",String(i))}attributeChangedCallback(t,i,a){(t==="page"||t==="count"||t==="headless")&&(this._page=Math.max(1,Number(this.getAttribute("page"))||1),this._count=Math.max(1,Number(this.getAttribute("count"))||1),this._headless=this.hasAttribute("headless"),this._page>this._count&&(this._page=this._count)),this.requestRender()}render(){if(this._headless){this.setContent("");return}let t="";t+=`<button type="button" data-page="1" aria-label="First" ${this._page===1?"disabled":""}>&laquo;</button>`,t+=`<button type="button" data-page="${this._page-1}" aria-label="Previous" ${this._page===1?"disabled":""}>&lsaquo;</button>`;const i=this._getPageRange(this._page,this._count);i[0]>1&&(t+='<button type="button" data-page="1">1</button>',i[0]>2&&(t+='<span class="ellipsis" aria-hidden="true">…</span>'));for(let n=i[0];n<=i[1];n++)t+=`<button type="button" data-page="${n}" ${n===this._page?'aria-current="page"':""}>${n}</button>`;i[1]<this._count&&(i[1]<this._count-1&&(t+='<span class="ellipsis" aria-hidden="true">…</span>'),t+=`<button type="button" data-page="${this._count}">${this._count}</button>`),t+=`<button type="button" data-page="${this._page+1}" aria-label="Next" ${this._page===this._count?"disabled":""}>&rsaquo;</button>`,t+=`<button type="button" data-page="${this._count}" aria-label="Last" ${this._page===this._count?"disabled":""}>&raquo;</button>`,this.setContent(`
       <style>${s}</style>
       <nav class="pagination" role="navigation" aria-label="${this.getAttribute("aria-label")||"Pagination"}" tabindex="0">
         ${t}
       </nav>
-    `);const i=this.root.querySelector(".pagination");i&&(i.removeEventListener("click",this._onClick),i.addEventListener("click",this._onClick),i.removeEventListener("keydown",this._onKeyDown),i.addEventListener("keydown",this._onKeyDown))}goToPage(t){const a=Math.max(1,Math.min(this._count,Number(t)||1));a!==this._page&&this._applyPageChange(a)}nextPage(){this.goToPage(this._page+1)}prevPage(){this.goToPage(this._page-1)}firstPage(){this.goToPage(1)}lastPage(){this.goToPage(this._count)}focusCurrent(){this.root.querySelector('button[aria-current="page"]')?.focus()}_getPageRange(t,a){return a<=5?[1,a]:t<=3?[1,5]:t>=a-2?[a-4,a]:[t-2,t+2]}_onClick(t){const a=t.target.closest("button[data-page]");if(!a||a.hasAttribute("disabled"))return;const i=Number(a.getAttribute("data-page"));isNaN(i)||i<1||i>this._count||i===this._page||this._applyPageChange(i)}_onKeyDown(t){const a=this.root.querySelector(".pagination");if(!a)return;const i=Array.from(a.querySelectorAll("button:not(:disabled)")),n=this.root.activeElement;let o=i.indexOf(n);t.key==="ArrowRight"||t.key==="ArrowDown"?(o=(o+1)%i.length,i[o].focus(),t.preventDefault()):t.key==="ArrowLeft"||t.key==="ArrowUp"?(o=(o-1+i.length)%i.length,i[o].focus(),t.preventDefault()):t.key==="Home"?(i[0].focus(),t.preventDefault()):t.key==="End"&&(i[i.length-1].focus(),t.preventDefault())}_applyPageChange(t){const a=this._page,i=Math.max(1,Math.min(this._count,Number(t)||1));if(i===a)return;const n=i===1&&a!==1?"first":i===this._count&&a!==this._count?"last":i===a-1?"prev":i===a+1?"next":"change";this.setAttribute("page",String(i));const o={page:i,previousPage:a,count:this._count,reason:n};this.dispatchEvent(new CustomEvent(n,{detail:o,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:o,bubbles:!0,composed:!0}))}}typeof customElements<"u"&&!customElements.get("ui-pagination")&&customElements.define("ui-pagination",e);exports.UIPagination=e;
+    `);const a=this.root.querySelector(".pagination");a&&(a.removeEventListener("click",this._onClick),a.addEventListener("click",this._onClick),a.removeEventListener("keydown",this._onKeyDown),a.addEventListener("keydown",this._onKeyDown))}goToPage(t){const i=Math.max(1,Math.min(this._count,Number(t)||1));i!==this._page&&this._applyPageChange(i)}nextPage(){this.goToPage(this._page+1)}prevPage(){this.goToPage(this._page-1)}firstPage(){this.goToPage(1)}lastPage(){this.goToPage(this._count)}focusCurrent(){this.root.querySelector('button[aria-current="page"]')?.focus()}_getPageRange(t,i){return i<=5?[1,i]:t<=3?[1,5]:t>=i-2?[i-4,i]:[t-2,t+2]}_onClick(t){const i=t.target.closest("button[data-page]");if(!i||i.hasAttribute("disabled"))return;const a=Number(i.getAttribute("data-page"));isNaN(a)||a<1||a>this._count||a===this._page||this._applyPageChange(a)}_onKeyDown(t){const i=this.root.querySelector(".pagination");if(!i)return;const a=Array.from(i.querySelectorAll("button:not(:disabled)")),n=this.root.activeElement;let o=a.indexOf(n);t.key==="ArrowRight"||t.key==="ArrowDown"?(o=(o+1)%a.length,a[o].focus(),t.preventDefault()):t.key==="ArrowLeft"||t.key==="ArrowUp"?(o=(o-1+a.length)%a.length,a[o].focus(),t.preventDefault()):t.key==="Home"?(a[0].focus(),t.preventDefault()):t.key==="End"&&(a[a.length-1].focus(),t.preventDefault())}_applyPageChange(t){const i=this._page,a=Math.max(1,Math.min(this._count,Number(t)||1));if(a===i)return;const n=a===1&&i!==1?"first":a===this._count&&i!==this._count?"last":a===i-1?"prev":a===i+1?"next":"change";this.setAttribute("page",String(a));const o={page:a,previousPage:i,count:this._count,reason:n};this.dispatchEvent(new CustomEvent(n,{detail:o,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:o,bubbles:!0,composed:!0}))}}typeof customElements<"u"&&!customElements.get("ui-pagination")&&customElements.define("ui-pagination",e);exports.UIPagination=e;