@mkbabb/glass-ui 0.2.0 → 0.3.0

package/dist/glass-ui.js

@@ -661,26 +661,26 @@ function Br(e, t, n, o, a, s, l, i, u, c, f, d, m, h, _, k, b, v, C) {
     direction: E
   } = e, L = ["INPUT", "SELECT", "TEXTAREA"], F = {
     passive: !1
-  }, H = ct(), O = ct(), D = Ue(50, 225).constrain(h.measure(20)), x = {
+  }, N = ct(), O = ct(), D = Ue(50, 225).constrain(h.measure(20)), x = {
     mouse: 300,
     touch: 400
   }, T = {
     mouse: 500,
     touch: 600
   }, I = _ ? 43 : 25;
-  let j = !1, N = 0, U = 0, X = !1, ee = !1, q = !1, K = !1;
+  let j = !1, H = 0, U = 0, X = !1, ee = !1, q = !1, K = !1;
   function Q(W) {
     if (!C) return;
     function le(ve) {
       (Pt(C) || C(W, ve)) && Fe(ve);
     }
     const me = t;
-    H.add(me, "dragstart", (ve) => ve.preventDefault(), F).add(me, "touchmove", () => {
+    N.add(me, "dragstart", (ve) => ve.preventDefault(), F).add(me, "touchmove", () => {
     }, F).add(me, "touchend", () => {
     }).add(me, "touchstart", le).add(me, "mousedown", le).add(me, "touchcancel", ye).add(me, "contextmenu", ye).add(me, "click", Me, !0);
   }
   function Z() {
-    H.clear(), O.clear();
+    N.clear(), O.clear();
   }
   function fe() {
     const W = K ? n : t;
@@ -699,11 +699,11 @@ function Br(e, t, n, o, a, s, l, i, u, c, f, d, m, h, _, k, b, v, C) {
   }
   function Fe(W) {
     const le = Xt(W, o);
-    K = le, q = _ && le && !W.buttons && j, j = nt(a.get(), l.get()) >= 2, !(le && W.button !== 0) && ($e(W.target) || (X = !0, s.pointerDown(W), c.useFriction(0).useDuration(0), a.set(l), fe(), N = s.readPoint(W), U = s.readPoint(W, $), m.emit("pointerDown")));
+    K = le, q = _ && le && !W.buttons && j, j = nt(a.get(), l.get()) >= 2, !(le && W.button !== 0) && ($e(W.target) || (X = !0, s.pointerDown(W), c.useFriction(0).useDuration(0), a.set(l), fe(), H = s.readPoint(W), U = s.readPoint(W, $), m.emit("pointerDown")));
   }
   function he(W) {
     if (!Xt(W, o) && W.touches.length >= 2) return ye(W);
-    const me = s.readPoint(W), ve = s.readPoint(W, $), Ae = nt(me, N), Pe = nt(ve, U);
+    const me = s.readPoint(W), ve = s.readPoint(W, $), Ae = nt(me, H), Pe = nt(ve, U);
     if (!ee && !K && (!W.cancelable || (ee = Ae > Pe, !ee)))
       return ye(W);
     const je = s.pointerMove(W);
@@ -794,8 +794,8 @@ function Ar(e, t, n, o, a, s, l) {
     function v(C) {
       for (const $ of C) {
         if (d) return;
-        const E = $.target === e, L = o.indexOf($.target), F = E ? c : f[L], H = m(E ? e : o[L]);
-        if (de(H - F) >= 0.5) {
+        const E = $.target === e, L = o.indexOf($.target), F = E ? c : f[L], N = m(E ? e : o[L]);
+        if (de(N - F) >= 0.5) {
           b.reInit(), t.emit("resize");
           break;
         }
@@ -818,9 +818,9 @@ function Ar(e, t, n, o, a, s, l) {
 function Mr(e, t, n, o, a, s) {
   let l = 0, i = 0, u = a, c = s, f = e.get(), d = 0;
   function m() {
-    const F = o.get() - e.get(), H = !u;
+    const F = o.get() - e.get(), N = !u;
     let O = 0;
-    return H ? (l = 0, n.set(o), e.set(o), O = F) : (n.set(e), l += F / u, l *= c, f += l, e.add(l), O = f - d), i = nn(O), d = f, L;
+    return N ? (l = 0, n.set(o), e.set(o), O = F) : (n.set(e), l += F / u, l *= c, f += l, e.add(l), O = f - d), i = nn(O), d = f, L;
   }
   function h() {
     const F = o.get() - t.get();
@@ -1148,22 +1148,22 @@ function mo(e, t) {
 }
 function jr(e, t, n, o, a, s, l, i, u) {
   const f = lt(a), d = lt(a).reverse(), m = v().concat(C());
-  function h(H, O) {
-    return H.reduce((D, x) => D - a[x], O);
+  function h(N, O) {
+    return N.reduce((D, x) => D - a[x], O);
   }
-  function _(H, O) {
-    return H.reduce((D, x) => h(D, O) > 0 ? D.concat([x]) : D, []);
+  function _(N, O) {
+    return N.reduce((D, x) => h(D, O) > 0 ? D.concat([x]) : D, []);
   }
-  function k(H) {
+  function k(N) {
     return s.map((O, D) => ({
-      start: O - o[D] + 0.5 + H,
-      end: O + t - 0.5 + H
+      start: O - o[D] + 0.5 + N,
+      end: O + t - 0.5 + N
     }));
   }
-  function b(H, O, D) {
+  function b(N, O, D) {
     const x = k(O);
-    return H.map((T) => {
-      const I = D ? 0 : -n, j = D ? n : 0, N = D ? "end" : "start", U = x[T][N];
+    return N.map((T) => {
+      const I = D ? 0 : -n, j = D ? n : 0, H = D ? "end" : "start", U = x[T][H];
       return {
         index: T,
         loopPoint: U,
@@ -1174,33 +1174,33 @@ function jr(e, t, n, o, a, s, l, i, u) {
     });
   }
   function v() {
-    const H = l[0], O = _(d, H);
+    const N = l[0], O = _(d, N);
     return b(O, n, !1);
   }
   function C() {
-    const H = t - l[0] - 1, O = _(f, H);
+    const N = t - l[0] - 1, O = _(f, N);
     return b(O, -n, !0);
   }
   function $() {
     return m.every(({
-      index: H
+      index: N
     }) => {
-      const O = f.filter((D) => D !== H);
+      const O = f.filter((D) => D !== N);
       return h(O, t) <= 0.1;
     });
   }
   function E() {
-    m.forEach((H) => {
+    m.forEach((N) => {
       const {
         target: O,
         translate: D,
         slideLocation: x
-      } = H, T = O();
+      } = N, T = O();
       T !== x.get() && (D.to(T), x.set(T));
     });
   }
   function L() {
-    m.forEach((H) => H.translate.clear());
+    m.forEach((N) => N.translate.clear());
   }
   return {
     canLoop: $,
@@ -1311,8 +1311,8 @@ function Gr(e, t, n, o, a, s, l, i, u) {
   }
   function _(v) {
     return v.length ? lt(v).reduce((C, $, E) => {
-      const L = Te(C) || 0, F = L === 0, H = $ === pt(v), O = a[c] - s[L][c], D = a[c] - s[$][f], x = !o && F ? d(l) : 0, T = !o && H ? d(i) : 0, I = de(D - T - (O + x));
-      return E && I > t + u && C.push($), H && C.push(v.length), C;
+      const L = Te(C) || 0, F = L === 0, N = $ === pt(v), O = a[c] - s[L][c], D = a[c] - s[$][f], x = !o && F ? d(l) : 0, T = !o && N ? d(i) : 0, I = de(D - T - (O + x));
+      return E && I > t + u && C.push($), N && C.push(v.length), C;
     }, []).map((C, $, E) => {
       const L = Math.max(E[$ - 1] || 0);
       return v.slice(L, C);
@@ -1343,18 +1343,18 @@ function Ur(e, t, n, o, a, s, l) {
     watchSlides: E,
     watchDrag: L,
     watchFocus: F
-  } = s, H = 2, O = Tr(), D = O.measure(t), x = n.map(O.measure), T = Cr(u, c), I = T.measureSize(D), j = $r(I), N = wr(i, I), U = !d && !!C, X = d || !!C, {
+  } = s, N = 2, O = Tr(), D = O.measure(t), x = n.map(O.measure), T = Cr(u, c), I = T.measureSize(D), j = $r(I), H = wr(i, I), U = !d && !!C, X = d || !!C, {
     slideSizes: ee,
     slideSizesWithGaps: q,
     startGap: K,
     endGap: Q
-  } = qr(T, D, x, n, X, a), Z = Gr(T, I, b, d, D, x, K, Q, H), {
+  } = qr(T, D, x, n, X, a), Z = Gr(T, I, b, d, D, x, K, Q, N), {
     snaps: fe,
     snapsAligned: $e
-  } = Lr(T, N, D, x, Z), ce = -Te(fe) + Te(q), {
+  } = Lr(T, H, D, x, Z), ce = -Te(fe) + Te(q), {
     snapsContained: Ve,
     scrollContainLimit: Fe
-  } = Or(I, ce, $e, C, H), he = U ? Ve : $e, {
+  } = Or(I, ce, $e, C, N), he = U ? Ve : $e, {
     limit: ye
   } = Dr(ce, he, d), Me = po(pt(he), f, d), Ce = Me.clone(), ue = lt(n), W = ({
     dragHandler: Ke,
@@ -1521,7 +1521,7 @@ function Bt(e, t, n) {
     off: h,
     emit: _
   } = u, k = T;
-  let b = !1, v, C = c(Wr, Bt.globalOptions), $ = c(C), E = [], L, F, H;
+  let b = !1, v, C = c(Wr, Bt.globalOptions), $ = c(C), E = [], L, F, N;
   function O() {
     const {
       container: ue,
@@ -1529,10 +1529,10 @@ function Bt(e, t, n) {
     } = $;
     F = (Wt(ue) ? e.querySelector(ue) : ue) || e.children[0];
     const me = Wt(W) ? F.querySelectorAll(W) : W;
-    H = [].slice.call(me || F.children);
+    N = [].slice.call(me || F.children);
   }
   function D(ue) {
-    const W = Ur(e, F, H, o, a, ue, u);
+    const W = Ur(e, F, N, o, a, ue, u);
     if (ue.loop && !W.slideLooper.canLoop()) {
       const le = Object.assign({}, ue, {
         loop: !1
@@ -1544,7 +1544,7 @@ function Bt(e, t, n) {
   function x(ue, W) {
     b || (C = c(C, ue), $ = f(C), E = W || E, O(), v = D($), d([C, ...E.map(({
       options: le
-    }) => le)]).forEach((le) => i.add(le, "change", T)), $.active && (v.translate.to(v.location.get()), v.animation.init(), v.slidesInView.init(), v.slideFocus.init(Ce), v.eventHandler.init(Ce), v.resizeHandler.init(Ce), v.slidesHandler.init(Ce), v.options.loop && v.slideLooper.loop(), F.offsetParent && H.length && v.dragHandler.init(Ce), L = l.init(Ce, E)));
+    }) => le)]).forEach((le) => i.add(le, "change", T)), $.active && (v.translate.to(v.location.get()), v.animation.init(), v.slidesInView.init(), v.slideFocus.init(Ce), v.eventHandler.init(Ce), v.resizeHandler.init(Ce), v.slidesHandler.init(Ce), v.options.loop && v.slideLooper.loop(), F.offsetParent && N.length && v.dragHandler.init(Ce), L = l.init(Ce, E)));
   }
   function T(ue, W) {
     const le = Z();
@@ -1558,16 +1558,16 @@ function Bt(e, t, n) {
   function j() {
     b || (b = !0, i.clear(), I(), u.emit("destroy"), u.clear());
   }
-  function N(ue, W, le) {
+  function H(ue, W, le) {
     !$.active || b || (v.scrollBody.useBaseFriction().useDuration(W === !0 ? 0 : $.duration), v.scrollTo.index(ue, le || 0));
   }
   function U(ue) {
     const W = v.index.add(1).get();
-    N(W, ue, -1);
+    H(W, ue, -1);
   }
   function X(ue) {
     const W = v.index.add(-1).get();
-    N(W, ue, 1);
+    H(W, ue, 1);
   }
   function ee() {
     return v.index.add(1).get() !== Z();
@@ -1606,7 +1606,7 @@ function Bt(e, t, n) {
     return F;
   }
   function Me() {
-    return H;
+    return N;
   }
   const Ce = {
     canScrollNext: ee,
@@ -1625,7 +1625,7 @@ function Bt(e, t, n) {
     scrollPrev: X,
     scrollProgress: Q,
     scrollSnapList: K,
-    scrollTo: N,
+    scrollTo: H,
     selectedScrollSnap: Z,
     slideNodes: Me,
     slidesInView: $e,
@@ -5173,11 +5173,12 @@ const ad = /* @__PURE__ */ y({
         }, 8, ["class"]),
         (p(!0), M(se, null, pe(e.modelValue, (c, f) => (p(), S(r(ys), {
           key: f,
+          "aria-label": i.$attrs["aria-label"] ?? void 0,
           class: z(r(B)(
             "slider-thumb block transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
             l.value === "spectrum" ? "w-3 h-full rounded-full border-2 border-foreground/40 bg-transparent" : l.value === "timeline" ? "h-6 w-6 rounded-full bg-foreground/15 border-none shadow-none" : "h-3.5 w-3.5 rounded-full border-2 border-background bg-foreground shadow-sm"
           ))
-        }, null, 8, ["class"]))), 128))
+        }, null, 8, ["aria-label", "class"]))), 128))
       ]),
       _: 1
     }, 16, ["class"]));
@@ -6109,12 +6110,12 @@ function Bi(e) {
   function F() {
     s() || _ || (v(), i.value === "collapsed" && (i.value = "hover", b()));
   }
-  function H(N) {
+  function N(H) {
     if (!s() && i.value === "hover") {
       if (d > 0) return;
-      if (N) {
+      if (H) {
         const U = n.value;
-        if (U && N.relatedTarget instanceof Node && U.contains(N.relatedTarget) || jt(N.relatedTarget)) return;
+        if (U && H.relatedTarget instanceof Node && U.contains(H.relatedTarget) || jt(H.relatedTarget)) return;
       }
       C();
     }
@@ -6122,10 +6123,10 @@ function Bi(e) {
   function O() {
     s() || _ || (v(), i.value === "collapsed" && (i.value = "hover", b()));
   }
-  function D(N) {
+  function D(H) {
     if (s() || i.value !== "hover" || d > 0) return;
-    const U = N.currentTarget;
-    N.relatedTarget && U.contains(N.relatedTarget) || jt(N.relatedTarget) || C();
+    const U = H.currentTarget;
+    H.relatedTarget && U.contains(H.relatedTarget) || jt(H.relatedTarget) || C();
   }
   function x() {
     if (s()) {
@@ -6143,13 +6144,15 @@ function Bi(e) {
     }, Math.min(t, 800)));
   }
   vt("dockKeepOpen", T), vt("dockRelease", I), vt("dockExpanded", u);
-  function j(N) {
+  function j(H) {
     if (s()) return;
     const U = n.value;
-    !U || U.contains(N.target) || jt(N.target) || E();
+    if (!U || U.contains(H.target) || jt(H.target)) return;
+    const X = U.getBoundingClientRect();
+    H.clientX >= X.left && H.clientX <= X.right && H.clientY >= X.top && H.clientY <= X.bottom || E();
   }
-  return ne(u, (N) => {
-    N ? requestAnimationFrame(() => {
+  return ne(u, (H) => {
+    H ? requestAnimationFrame(() => {
       document.addEventListener(
         "pointerdown",
         j,
@@ -6162,8 +6165,8 @@ function Bi(e) {
         ), m = null;
       };
     }) : m?.();
-  }), typeof o != "boolean" ? ne(o, (N) => {
-    if (N) {
+  }), typeof o != "boolean" ? ne(o, (H) => {
+    if (H) {
       v(), i.value = "pinned", b();
       return;
     }
@@ -6175,7 +6178,7 @@ function Bi(e) {
     expanded: u,
     isPinned: c,
     onMouseEnter: F,
-    onMouseLeave: H,
+    onMouseLeave: N,
     onFocusIn: O,
     onFocusOut: D,
     onClickCollapsed: x,
@@ -6268,7 +6271,7 @@ const Ti = ["inert"], $i = ["inert"], Ai = /* @__PURE__ */ y({
     );
     return Se(() => {
       (n.alwaysExpanded || !n.startCollapsed) && _();
-    }), t({ expanded: s, isPinned: l, expand: _, collapse: k, keepOpen: m, release: h }), (F, H) => (p(), M("div", {
+    }), t({ expanded: s, isPinned: l, expand: _, collapse: k, keepOpen: m, release: h }), (F, N) => (p(), M("div", {
       ref_key: "dockEl",
       ref: o,
       class: z(["glass-dock", [
@@ -6276,14 +6279,14 @@ const Ti = ["inert"], $i = ["inert"], Ai = /* @__PURE__ */ y({
         e.position === "fixed" ? "fixed bottom-[var(--dock-pos)] left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
       ]]),
       style: De(L.value),
-      onMouseenter: H[1] || (H[1] = //@ts-ignore
+      onMouseenter: N[1] || (N[1] = //@ts-ignore
       (...O) => r(i) && r(i)(...O)),
-      onMouseleave: H[2] || (H[2] = (O) => r(u)(O)),
-      onFocusin: H[3] || (H[3] = //@ts-ignore
+      onMouseleave: N[2] || (N[2] = (O) => r(u)(O)),
+      onFocusin: N[3] || (N[3] = //@ts-ignore
       (...O) => r(c) && r(c)(...O)),
-      onFocusout: H[4] || (H[4] = //@ts-ignore
+      onFocusout: N[4] || (N[4] = //@ts-ignore
       (...O) => r(f) && r(f)(...O)),
-      onTransitionend: H[5] || (H[5] = //@ts-ignore
+      onTransitionend: N[5] || (N[5] = //@ts-ignore
       (...O) => r(E) && r(E)(...O))
     }, [
       V("div", {
@@ -6298,7 +6301,7 @@ const Ti = ["inert"], $i = ["inert"], Ai = /* @__PURE__ */ y({
         V("div", {
           class: z(["dock-layer dock-layer--summary", { "layer-active": !r(b) }]),
           inert: r(s) || void 0,
-          onClick: H[0] || (H[0] = //@ts-ignore
+          onClick: N[0] || (N[0] = //@ts-ignore
           (...O) => r(d) && r(d)(...O))
         }, [
           w(F.$slots, "collapsed", {}, void 0, !0)
@@ -6352,9 +6355,9 @@ const Ti = ["inert"], $i = ["inert"], Ai = /* @__PURE__ */ y({
     function E() {
       const D = C.value, x = $.value;
       if (!D || !x) return;
-      const T = D.getBoundingClientRect(), I = x.getBoundingClientRect(), j = window.innerWidth, N = window.innerHeight;
+      const T = D.getBoundingClientRect(), I = x.getBoundingClientRect(), j = window.innerWidth, H = window.innerHeight;
       let U = a.direction;
-      U === "up" && T.top - I.height - gt < Re ? U = "down" : U === "down" && T.bottom + I.height + gt > N - Re && (U = "up"), u.value = U;
+      U === "up" && T.top - I.height - gt < Re ? U = "down" : U === "down" && T.bottom + I.height + gt > H - Re && (U = "up"), u.value = U;
       const X = {
         position: "absolute",
         zIndex: 50 + l.value % 50
@@ -6375,14 +6378,14 @@ const Ti = ["inert"], $i = ["inert"], Ai = /* @__PURE__ */ y({
       i.value = X;
     }
     ne(s, async (D) => {
-      D ? (H(), await ge(), E()) : O();
+      D ? (N(), await ge(), E()) : O();
     });
     let L = null;
     function F(D) {
       const x = C.value;
       !x || x.contains(D.target) || (s.value = !1);
     }
-    function H() {
+    function N() {
       ge(() => {
         document.addEventListener("pointerdown", F, !0), L = () => {
           document.removeEventListener("pointerdown", F, !0), L = null;
@@ -6956,8 +6959,8 @@ function qi(e, t) {
       1,
       1
     ]), a.STATIC_DRAW);
-    const N = a.getAttribLocation(s, "a_position");
-    a.enableVertexAttribArray(N), a.vertexAttribPointer(N, 2, a.FLOAT, !1, 0, 0), c = a.getUniformLocation(s, "u_resolution"), f = a.getUniformLocation(s, "u_blobCount"), d = a.getUniformLocation(s, "u_positions"), m = a.getUniformLocation(s, "u_colors"), h = a.getUniformLocation(s, "u_threshold"), _ = a.getUniformLocation(s, "u_edgeSoftness"), k = a.getUniformLocation(s, "u_bgAlpha"), a.uniform1i(f, n.blobCount), a.uniform1f(h, n.threshold), a.uniform1f(_, n.edgeSoftness), a.uniform1f(k, n.bgAlpha);
+    const H = a.getAttribLocation(s, "a_position");
+    a.enableVertexAttribArray(H), a.vertexAttribPointer(H, 2, a.FLOAT, !1, 0, 0), c = a.getUniformLocation(s, "u_resolution"), f = a.getUniformLocation(s, "u_blobCount"), d = a.getUniformLocation(s, "u_positions"), m = a.getUniformLocation(s, "u_colors"), h = a.getUniformLocation(s, "u_threshold"), _ = a.getUniformLocation(s, "u_edgeSoftness"), k = a.getUniformLocation(s, "u_bgAlpha"), a.uniform1i(f, n.blobCount), a.uniform1f(h, n.threshold), a.uniform1f(_, n.edgeSoftness), a.uniform1f(k, n.bgAlpha);
     for (let U = 0; U < We; U++) {
       const [X, ee, q] = U < n.blobCount ? Sn(n.colors[U % n.colors.length]) : [0, 0, 0];
       v[U * 3] = X / 255, v[U * 3 + 1] = ee / 255, v[U * 3 + 2] = q / 255;
@@ -6973,9 +6976,9 @@ function qi(e, t) {
     const T = Math.min(window.devicePixelRatio || 1, 1.5), I = x.getBoundingClientRect();
     x.width = I.width * T, x.height = I.height * T, a.viewport(0, 0, x.width, x.height), c && a.uniform2f(c, x.width, x.height);
   }
-  const E = 1.618033988749, L = 1.4142135623731, F = 1.7320508075689, H = [];
+  const E = 1.618033988749, L = 1.4142135623731, F = 1.7320508075689, N = [];
   for (let x = 0; x < We; x++)
-    H.push([
+    N.push([
       (x + 1) * E % 1,
       // phase offset
       0.15 + x * 0.37 % 0.4,
@@ -6993,13 +6996,13 @@ function qi(e, t) {
     if (!a || !s) return;
     const T = (x - i) * 1e-3 * n.speed, I = n.orbitAmplitude;
     for (let j = 0; j < n.blobCount; j++) {
-      const N = H[j], U = N[0] * Math.PI * 2, X = 0.5 + Math.sin(T * N[1] + U) * I * 0.6 + Math.sin(T * N[3] * L + U * E) * I * 0.3 + Math.cos(T * N[5] * F + j) * I * 0.15, ee = 0.5 + Math.cos(T * N[2] + U * E) * I * 0.6 + Math.cos(T * N[4] * E + U * L) * I * 0.3 + Math.sin(T * N[5] * E + j * L) * I * 0.15, q = 0.6 + N[0] * 0.8, K = n.baseRadius * q + Math.sin(T * 0.4 + j * E) * n.baseRadius * 0.2;
+      const H = N[j], U = H[0] * Math.PI * 2, X = 0.5 + Math.sin(T * H[1] + U) * I * 0.6 + Math.sin(T * H[3] * L + U * E) * I * 0.3 + Math.cos(T * H[5] * F + j) * I * 0.15, ee = 0.5 + Math.cos(T * H[2] + U * E) * I * 0.6 + Math.cos(T * H[4] * E + U * L) * I * 0.3 + Math.sin(T * H[5] * E + j * L) * I * 0.15, q = 0.6 + H[0] * 0.8, K = n.baseRadius * q + Math.sin(T * 0.4 + j * E) * n.baseRadius * 0.2;
       b[j * 3] = X, b[j * 3 + 1] = ee, b[j * 3 + 2] = K;
     }
     a.uniform1i(f, n.blobCount), a.uniform1f(h, n.threshold), a.uniform1f(_, n.edgeSoftness), a.uniform1f(k, n.bgAlpha);
     for (let j = 0; j < We; j++) {
-      const [N, U, X] = j < n.blobCount ? Sn(n.colors[j % n.colors.length]) : [0, 0, 0];
-      v[j * 3] = N / 255, v[j * 3 + 1] = U / 255, v[j * 3 + 2] = X / 255;
+      const [H, U, X] = j < n.blobCount ? Sn(n.colors[j % n.colors.length]) : [0, 0, 0];
+      v[j * 3] = H / 255, v[j * 3 + 1] = U / 255, v[j * 3 + 2] = X / 255;
     }
     a.uniform3fv(m, v), a.uniform3fv(d, b), a.drawArrays(a.TRIANGLES, 0, 6), l = requestAnimationFrame(O);
   }
@@ -7621,8 +7624,8 @@ function Mp(e) {
     );
   }
   function m(O, D) {
-    const x = O.clientHeight, T = D.offsetTop + D.offsetHeight / 2, I = Math.max(0, O.scrollHeight - x), j = x * 0.18, N = O.scrollTop + x / 2;
-    return Math.abs(T - N) <= j ? O.scrollTop : Math.max(0, Math.min(I, T - x / 2));
+    const x = O.clientHeight, T = D.offsetTop + D.offsetHeight / 2, I = Math.max(0, O.scrollHeight - x), j = x * 0.18, H = O.scrollTop + x / 2;
+    return Math.abs(T - H) <= j ? O.scrollTop : Math.max(0, Math.min(I, T - x / 2));
   }
   function h(O) {
     u += 1;
@@ -7685,13 +7688,13 @@ function Mp(e) {
   function F(O) {
     s !== O && (s?.removeEventListener("wheel", v), s?.removeEventListener("scroll", L), s?.removeEventListener("touchstart", C), s?.removeEventListener("pointerdown", $), s?.removeEventListener("keydown", E), s = O, s?.addEventListener("wheel", v, { passive: !0 }), s?.addEventListener("scroll", L, { passive: !0 }), s?.addEventListener("touchstart", C, { passive: !0 }), s?.addEventListener("pointerdown", $, { passive: !0 }), s?.addEventListener("keydown", E));
   }
-  function H(O) {
+  function N(O) {
     a !== O && (a?.removeEventListener("scroll", b), a = O, a?.addEventListener("scroll", b, {
       passive: !0
     }));
   }
   return Se(() => {
-    H(e.scrollSource?.value ?? null), F(e.sidebarEl.value ?? null), ge(() => k(!0)), window.addEventListener("resize", b);
+    N(e.scrollSource?.value ?? null), F(e.sidebarEl.value ?? null), ge(() => k(!0)), window.addEventListener("resize", b);
   }), ne(
     [e.activeId, e.activeRootId ?? { value: null }],
     () => {
@@ -7707,7 +7710,7 @@ function Mp(e) {
   ), ne(
     () => e.scrollSource?.value ?? null,
     (O) => {
-      H(O);
+      N(O);
     },
     { immediate: !0 }
   ), we(() => {
@@ -7748,8 +7751,8 @@ function Pp(e, t, n) {
     function T(I) {
       for (const j of I) {
         x.push(j.id);
-        const N = o(j);
-        N && T(N);
+        const H = o(j);
+        H && T(H);
       }
     }
     return T(xe(e)), v = x, x;
@@ -7761,12 +7764,12 @@ function Pp(e, t, n) {
   function L() {
     f || E || (E = requestAnimationFrame(() => {
       E = 0;
-      const x = n?.scrollContainer?.value, T = parseFloat(a.split(" ")[0]) / 100, I = x ? x.clientHeight : window.innerHeight, j = Math.abs(T) * I, N = x ? x.getBoundingClientRect().top : 0, U = C();
+      const x = n?.scrollContainer?.value, T = parseFloat(a.split(" ")[0]) / 100, I = x ? x.clientHeight : window.innerHeight, j = Math.abs(T) * I, H = x ? x.getBoundingClientRect().top : 0, U = C();
       let X = null, ee = 1 / 0, q = null, K = 1 / 0;
       for (const Z of U) {
         const fe = document.getElementById(Z);
         if (!fe) continue;
-        const ce = fe.getBoundingClientRect().top - N - j;
+        const ce = fe.getBoundingClientRect().top - H - j;
         ce <= 0 && Math.abs(ce) < ee && (ee = Math.abs(ce), X = Z), ce > 0 && ce < K && (K = ce, q = Z);
       }
       const Q = X ?? q;
@@ -7783,7 +7786,7 @@ function Pp(e, t, n) {
       I && F(I);
     }
   }
-  function H() {
+  function N() {
     u?.disconnect(), c.clear(), i.clear(), $();
     const x = n?.scrollContainer?.value;
     u = new IntersectionObserver(
@@ -7807,23 +7810,23 @@ function Pp(e, t, n) {
   ne(
     () => xe(e),
     (x) => {
-      d && (l.value = x[0]?.id ?? null, H());
+      d && (l.value = x[0]?.id ?? null, N());
     }
   );
   let O = null;
   Se(() => {
-    d = !0, H(), O = n?.scrollContainer?.value ?? document, O.addEventListener("scroll", L, { passive: !0 });
+    d = !0, N(), O = n?.scrollContainer?.value ?? document, O.addEventListener("scroll", L, { passive: !0 });
   }), we(() => {
     d = !1, u?.disconnect(), E && cancelAnimationFrame(E), O?.removeEventListener("scroll", L);
   });
   function D() {
     i.clear(), E && cancelAnimationFrame(E), E = 0;
-    const x = n?.scrollContainer?.value, T = parseFloat(a.split(" ")[0]) / 100, I = x ? x.clientHeight : window.innerHeight, j = Math.abs(T) * I, N = x ? x.getBoundingClientRect().top : 0, U = C();
+    const x = n?.scrollContainer?.value, T = parseFloat(a.split(" ")[0]) / 100, I = x ? x.clientHeight : window.innerHeight, j = Math.abs(T) * I, H = x ? x.getBoundingClientRect().top : 0, U = C();
     let X = null, ee = 1 / 0, q = null, K = 1 / 0;
     for (const Z of U) {
       const fe = document.getElementById(Z);
       if (!fe) continue;
-      const ce = fe.getBoundingClientRect().top - N - j;
+      const ce = fe.getBoundingClientRect().top - H - j;
       ce <= 0 && Math.abs(ce) < ee && (ee = Math.abs(ce), X = Z), ce > 0 && ce < K && (K = ce, q = Z);
     }
     const Q = X ?? q;
@@ -8458,19 +8461,19 @@ function Yc(e) {
   async function m(x) {
     const T = c;
     let I = Nc();
-    const j = d(), N = s.value ? t.firstAnimationSpeedFactor : 1, U = s.value;
+    const j = d(), H = s.value ? t.firstAnimationSpeedFactor : 1, U = s.value;
     for (; o.value.length < T.length; ) {
       if (x.cancelled) return;
       const X = o.value.length, ee = T[X], q = X > 0 ? T[X - 1] : "";
       if (I.state !== "normal") {
         const Q = $n(I, ee, j, t.errorRate);
-        if (I = Q.ctx, !await h(Q.action, x, q, N)) return;
+        if (I = Q.ctx, !await h(Q.action, x, q, H)) return;
         continue;
       }
       if (!U && X > 3 && X < T.length - 3) {
         const Q = $n(I, ee, j, t.errorRate);
         if (I = Q.ctx, Q.action.type === "type_wrong") {
-          if (!await h(Q.action, x, q, N)) return;
+          if (!await h(Q.action, x, q, H)) return;
           continue;
         }
       }
@@ -8479,7 +8482,7 @@ function Yc(e) {
         if (x.cancelled) return;
         const Z = X + Q, fe = T[Z], $e = Z > 0 ? T[Z - 1] : "";
         if (o.value += fe, Q === K - 1) {
-          const ce = T[Z + 1] ?? "", Ve = ht($e, fe) * N, Fe = tt(Ve, t.variance);
+          const ce = T[Z + 1] ?? "", Ve = ht($e, fe) * H, Fe = tt(Ve, t.variance);
           let he = 0;
           if (s.value || (he = zc(fe, ce, Rc)), !await _e(Fe + he, x)) return;
         }
@@ -8491,19 +8494,19 @@ function Yc(e) {
       case "type_correct": {
         if (x.char === "") return !0;
         o.value += x.char;
-        const N = ht(I, x.char) * j;
-        return _e(tt(N, t.variance), T);
+        const H = ht(I, x.char) * j;
+        return _e(tt(H, t.variance), T);
       }
       case "type_wrong": {
         o.value += x.char;
-        const N = ht(I, x.char) * j;
-        return _e(tt(N, t.variance), T);
+        const H = ht(I, x.char) * j;
+        return _e(tt(H, t.variance), T);
       }
       case "type_past_correct": {
         o.value += x.char;
-        const N = ht(I, x.char) * j;
+        const H = ht(I, x.char) * j;
         return _e(
-          tt(N * t.correctionSpeedMultiplier, t.variance),
+          tt(H * t.correctionSpeedMultiplier, t.variance),
           T
         );
       }
@@ -8516,11 +8519,11 @@ function Yc(e) {
     }
   }
   async function _(x, T, I) {
-    const j = I ? t.correctionBaseDelay : t.backspaceBaseDelay, N = I ? t.backspaceAcceleration * 2 : t.backspaceAcceleration;
+    const j = I ? t.correctionBaseDelay : t.backspaceBaseDelay, H = I ? t.backspaceAcceleration * 2 : t.backspaceAcceleration;
     for (let U = 0; U < x; U++) {
       if (T.cancelled) return !1;
       o.value = o.value.slice(0, -1);
-      const X = Vc(j, t.variance * 0.5, U, N);
+      const X = Vc(j, t.variance * 0.5, U, H);
       if (!await _e(X, T)) return !1;
     }
     return !0;
@@ -8586,7 +8589,7 @@ function Yc(e) {
   function F() {
     C();
   }
-  function H() {
+  function N() {
     a.value || v();
   }
   function O(x) {
@@ -8615,7 +8618,7 @@ function Yc(e) {
     backspaceToPosition: L,
     // Word-rotation API
     pause: F,
-    resume: H,
+    resume: N,
     setCharPosition: O,
     forceWord: D
   };
@@ -8927,7 +8930,7 @@ const pu = {
   hueShiftSmall: 55
 }, Pn = 1.618033988749895, On = 1.4142135623730951;
 function Dn() {
-  return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return document.documentElement.classList.contains("dark");
 }
 function Ze(e, t, n, o) {
   return `rgba(${Ge(Math.round(e), 0, 255)},${Ge(Math.round(t), 0, 255)},${Ge(Math.round(n), 0, 255)},${o})`;
@@ -8936,10 +8939,10 @@ function mu(e, t, n) {
   const o = jn(t) ? t : rt({ ...pu, ...t });
   let a = [], s = 0, l = !1, i = 1, u = null, c = null;
   function f(b) {
-    const v = xe(n) ?? "#c084fc", [C, $, E] = qt(v), [L, F, H] = du(C, $, E), O = [];
+    const v = xe(n) ?? "#c084fc", [C, $, E] = qt(v), [L, F, N] = du(C, $, E), O = [];
     for (let D = 0; D < b; D++) {
-      const x = D >= Math.ceil(b / 2), T = x ? o.lShiftSmall : o.lShiftLarge, I = x ? o.hueShiftSmall : o.hueShiftLarge, j = D % 2 === 0 ? 1 : -1, N = T * (0.5 + D / b * 0.5) * j, U = I * ((D + 1) / b) * (D % 3 === 0 ? -1 : 1);
-      O.push(fu(Ge(L + N, 0, 1), F, (H + U + 360) % 360));
+      const x = D >= Math.ceil(b / 2), T = x ? o.lShiftSmall : o.lShiftLarge, I = x ? o.hueShiftSmall : o.hueShiftLarge, j = D % 2 === 0 ? 1 : -1, H = T * (0.5 + D / b * 0.5) * j, U = I * ((D + 1) / b) * (D % 3 === 0 ? -1 : 1);
+      O.push(fu(Ge(L + H, 0, 1), F, (N + U + 360) % 360));
     }
     return O;
   }
@@ -8954,10 +8957,10 @@ function mu(e, t, n) {
   function m() {
     const b = e.value;
     if (!b) return;
-    const v = b.width / i, C = b.height / i, $ = Math.sqrt(v * v + C * C), E = Math.max(document.documentElement.scrollHeight, C), L = Math.round(o.blobCount * o.viewportAnchorRatio), F = o.blobCount - L, H = Math.PI * (3 - Math.sqrt(5)), O = o.colorMode === "derived" ? f(o.blobCount) : o.colors.map((D) => qt(D));
+    const v = b.width / i, C = b.height / i, $ = Math.sqrt(v * v + C * C), E = Math.max(document.documentElement.scrollHeight, C), L = Math.round(o.blobCount * o.viewportAnchorRatio), F = o.blobCount - L, N = Math.PI * (3 - Math.sqrt(5)), O = o.colorMode === "derived" ? f(o.blobCount) : o.colors.map((D) => qt(D));
     a = [];
     for (let D = 0; D < L; D++) {
-      const x = D % O.length, T = o.baseRadius + (D / Math.max(L, 1) - 0.5) * o.radiusVariance * 2, I = D * H;
+      const x = D % O.length, T = o.baseRadius + (D / Math.max(L, 1) - 0.5) * o.radiusVariance * 2, I = D * N;
       a.push({
         anchorX: 0.5 + Math.cos(I) * 0.3,
         anchorY: 0.5 + Math.sin(I) * 0.35,
@@ -8971,7 +8974,7 @@ function mu(e, t, n) {
       });
     }
     for (let D = 0; D < F; D++) {
-      const x = (L + D) % O.length, T = o.baseRadius + (D / Math.max(F, 1) - 0.5) * o.radiusVariance * 2, I = (L + D) * H, j = (D + 0.5) / F * E;
+      const x = (L + D) % O.length, T = o.baseRadius + (D / Math.max(F, 1) - 0.5) * o.radiusVariance * 2, I = (L + D) * N, j = (D + 0.5) / F * E;
       a.push({
         anchorX: 0.5 + Math.cos(I) * 0.35,
         anchorY: j,
@@ -9005,11 +9008,11 @@ function mu(e, t, n) {
     C.save(), C.scale(i, i);
     const F = d();
     F.alpha > 0 ? (C.globalAlpha = F.alpha, C.globalCompositeOperation = "source-over", C.filter = "none", C.fillStyle = Ze(F.rgb[0], F.rgb[1], F.rgb[2], 1), C.fillRect(0, 0, $, E), C.globalAlpha = 1) : C.clearRect(0, 0, $, E), C.filter = `blur(${o.blur}px) saturate(140%)`, C.globalCompositeOperation = o.blendMode;
-    const H = l ? o.alphaDark : o.alphaLight, O = o.surfaceMode === "theme" ? l ? 0.6 : 2.2 : 1, x = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0.05 : o.speed;
+    const N = l ? o.alphaDark : o.alphaLight, O = o.surfaceMode === "theme" ? l ? 0.6 : 2.2 : 1, x = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0.05 : o.speed;
     for (const T of a) {
       let I, j;
       if (T.mode === "viewport" ? (I = T.anchorX * $, j = T.anchorY * E) : (I = T.anchorX * $, j = T.anchorY - L), I += Math.sin(b * T.freqX * x + T.phaseX) * $ * o.orbitAmplitude, j += Math.cos(b * T.freqY * x + T.phaseY) * E * o.orbitAmplitude, j + T.radius < -T.radius * 0.5 || j - T.radius > E + T.radius * 0.5) continue;
-      const [N, U, X] = T.color, ee = l ? 0.7 : 1, q = Math.round(N * ee + 128 * (1 - ee)), K = Math.round(U * ee + 128 * (1 - ee)), Q = Math.round(X * ee + 128 * (1 - ee)), Z = H * O, fe = C.createRadialGradient(I, j, 0, I, j, T.radius);
+      const [H, U, X] = T.color, ee = l ? 0.7 : 1, q = Math.round(H * ee + 128 * (1 - ee)), K = Math.round(U * ee + 128 * (1 - ee)), Q = Math.round(X * ee + 128 * (1 - ee)), Z = N * O, fe = C.createRadialGradient(I, j, 0, I, j, T.radius);
       fe.addColorStop(0, Ze(q, K, Q, Z)), fe.addColorStop(o.gradStop2, Ze(q, K, Q, Z * 0.6)), fe.addColorStop(o.gradStop3, Ze(q, K, Q, Z * 0.2)), fe.addColorStop(o.gradStop4, Ze(q, K, Q, 0)), C.fillStyle = fe, C.fillRect(I - T.radius, j - T.radius, T.radius * 2, T.radius * 2);
     }
     C.restore(), s = requestAnimationFrame(_);
@@ -9424,9 +9427,9 @@ function Wp(e, t = {}) {
     C = E;
     for (let L = 0; L < 8; L++) {
       const F = b[L];
-      let H = (E - F.startTime) / F.duration;
-      H >= 1 && (F.from = F.to, F.to = h + c() * (_ - h), F.duration = o * (0.5 + c() * 1.3), F.startTime = E, H = 0);
-      const O = 0.5 - 0.5 * Math.cos(Math.PI * H);
+      let N = (E - F.startTime) / F.duration;
+      N >= 1 && (F.from = F.to, F.to = h + c() * (_ - h), F.duration = o * (0.5 + c() * 1.3), F.startTime = E, N = 0);
+      const O = 0.5 - 0.5 * Math.cos(Math.PI * N);
       k[L] = F.from + O * (F.to - F.from);
     }
     l.value = Je(k), v = requestAnimationFrame($);
@@ -9625,7 +9628,7 @@ function Qp(e) {
   function F(q) {
     u.delete(q);
   }
-  function H(q, K) {
+  function N(q, K) {
     if (!K) {
       F(q);
       return;
@@ -9685,24 +9688,24 @@ function Qp(e) {
     (q) => j(q),
     { immediate: !0 }
   );
-  let N = null;
+  let H = null;
   e.contentEl && ne(
     e.contentEl,
     (q) => {
-      N?.disconnect(), N = null, q && typeof ResizeObserver < "u" && (N = new ResizeObserver(() => $()), N.observe(q));
+      H?.disconnect(), H = null, q && typeof ResizeObserver < "u" && (H = new ResizeObserver(() => $()), H.observe(q));
     },
     { immediate: !0 }
   ), Se(() => {
     $();
   }), we(() => {
-    c && cancelAnimationFrame(c), f && cancelAnimationFrame(f), d && window.clearTimeout(d), I && I.removeEventListener("scroll", T), m?.disconnect(), N?.disconnect(), u.clear();
+    c && cancelAnimationFrame(c), f && cancelAnimationFrame(f), d && window.clearTimeout(d), I && I.removeEventListener("scroll", T), m?.disconnect(), H?.disconnect(), u.clear();
   });
   const U = P(() => s.value.endIndex < s.value.startIndex ? [] : t.value.slice(s.value.startIndex, s.value.endIndex + 1)), X = P(() => l.value?.id ?? null), ee = P(() => l.value?.rootId ?? null);
   return {
     visibleItems: U,
     topSpacerPx: P(() => s.value.topSpacerPx),
     bottomSpacerPx: P(() => s.value.bottomSpacerPx),
-    measureSection: H,
+    measureSection: N,
     ensureTargetWindow: O,
     getOffsetFor: D,
     activeId: X,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "type": "module",

package/src/components/custom/aurora/composables/useAurora.ts

@@ -116,10 +116,7 @@ const PHI = 1.618033988749895;
 const SQRT2 = 1.4142135623730951;
 
 function isDarkMode(): boolean {
-    return (
-        document.documentElement.classList.contains("dark") ||
-        window.matchMedia("(prefers-color-scheme: dark)").matches
-    );
+    return document.documentElement.classList.contains("dark");
 }
 
 function rgba(r: number, g: number, b: number, a: number): string {

package/src/components/custom/dock/composables/useDockState.ts

@@ -231,6 +231,19 @@ export function useDockState(options: UseDockStateOptions) {
         if (!root || root.contains(e.target as Node)) return;
         if (isTeleportedTarget(e.target)) return;
 
+        // Bounds check: during transitions, pointer-events:none on dock-layers
+        // makes the event target the parent element. The click is still visually
+        // "inside" the dock, so don't treat it as an outside click.
+        const rect = root.getBoundingClientRect();
+        if (
+            e.clientX >= rect.left &&
+            e.clientX <= rect.right &&
+            e.clientY >= rect.top &&
+            e.clientY <= rect.bottom
+        ) {
+            return;
+        }
+
         // Click outside → always collapse, even if keepOpenCount > 0
         // (keepOpenCount prevents timer-based collapse, not explicit dismissal)
         collapse();

package/src/components/ui/slider/Slider.vue

@@ -53,6 +53,7 @@ const v = computed(() => props.variant ?? 'standard')
     <SliderThumb
       v-for="(_, key) in modelValue"
       :key="key"
+      :aria-label="$attrs['aria-label'] as string ?? undefined"
       :class="cn(
         'slider-thumb block transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
         v === 'spectrum'

package/src/styles/glass.css

@@ -73,6 +73,7 @@
         border: 1px solid var(--glass-border-default);
         border-radius: var(--radius-card);
         box-shadow: var(--glass-shadow-default);
+        contain: layout style;
     }
 
     .glass-pill {
@@ -83,6 +84,7 @@
         border: 1px solid var(--glass-border-default);
         border-radius: var(--radius-pill);
         box-shadow: var(--glass-shadow-subtle);
+        contain: layout style;
     }
 
     /* ── Glassmorphic circular icon button ── */
@@ -126,7 +128,8 @@
         pointer-events: none;
     }
 
-    .glass-btn.is-active {
+    .glass-btn.is-active,
+    .glass-btn[aria-pressed="true"] {
         background: color-mix(in srgb, var(--foreground) 10%, transparent);
         border-color: color-mix(in srgb, var(--foreground) 25%, transparent);
         color: var(--foreground);
@@ -157,6 +160,11 @@
         cursor: not-allowed;
     }
 
+    .btn-pill[aria-pressed="true"] {
+        background: color-mix(in srgb, var(--primary) 15%, transparent);
+        border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
+    }
+
     .btn-pill-accent {
         background: var(--th-accent-opaque, var(--primary));
         color: var(--foreground);

package/src/styles/utilities.css

@@ -197,12 +197,33 @@
         font-size: max(1rem, 1em);
     }
 
-    /* ── Scroll fade mask ── */
+    /* ── Scroll fade masks ── */
     .scroll-fade-mask {
         mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
         -webkit-mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
+    .scroll-fade-top {
+        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
+        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
+    }
+
+    .scroll-fade-bottom {
+        mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
+        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    .scroll-fade-y {
+        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    /* ── Icon sizing ── */
+    .icon-xs { @apply w-3 h-3 shrink-0; }
+    .icon-sm { @apply w-3.5 h-3.5 shrink-0; }
+    .icon-md { @apply w-4 h-4 shrink-0; }
+    .icon-lg { @apply w-5 h-5 shrink-0; }
+
     /* ── Shimmer text effects ── */
     .gold-shimmer {
         background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));