@nmorph/nmorph-ui-kit 2.2.43 → 2.2.45

package/dist/assets/icons/burger.svg.js

@@ -1,15 +1,15 @@
-import { openBlock as t, createElementBlock as r, createElementVNode as o } from "vue";
+import { openBlock as t, createElementBlock as o, createElementVNode as r } from "vue";
 const n = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
 function l(m, e) {
-  return t(), r("svg", n, [...e[0] || (e[0] = [
-    o("path", { d: "M2 6h28v6H2zm0 8h28v6H2zm0 8h28v6H2z" }, null, -1)
+  return t(), o("svg", n, [...e[0] || (e[0] = [
+    r("path", { d: "M2 6h28v6H2zm0 8h28v6H2zm0 8h28v6H2z" }, null, -1)
   ])]);
 }
-const c = { render: l };
+const s = { render: l };
 export {
-  c as default,
+  s as default,
   l as render
 };

package/dist/assets/icons/download.svg.js

@@ -1,15 +1,15 @@
-import { openBlock as t, createElementBlock as o, createElementVNode as n } from "vue";
+import { openBlock as o, createElementBlock as t, createElementVNode as n } from "vue";
 const r = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
-function l(d, e) {
-  return t(), o("svg", r, [...e[0] || (e[0] = [
+function l(a, e) {
+  return o(), t("svg", r, [...e[0] || (e[0] = [
     n("path", { d: "M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z" }, null, -1)
   ])]);
 }
-const s = { render: l };
+const d = { render: l };
 export {
-  s as default,
+  d as default,
   l as render
 };

package/dist/assets/icons/open.svg.js

@@ -9,8 +9,8 @@ function a(l, e) {
     t("path", { d: "M694.044 621.227a109.227 109.227 0 1 0 0-218.454 109.227 109.227 0 0 0 0 218.454m0 72.817a182.044 182.044 0 1 1 0-364.088 182.044 182.044 0 0 1 0 364.088" }, null, -1)
   ])]);
 }
-const m = { render: a };
+const p = { render: a };
 export {
-  m as default,
+  p as default,
   a as render
 };

package/dist/assets/icons/search.svg.js

@@ -3,7 +3,7 @@ const n = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
-function c(s, e) {
+function c(l, e) {
   return t(), o("svg", n, [...e[0] || (e[0] = [
     r("path", { d: "m31.008 27.231-7.58-6.447c-.784-.705-1.622-1.029-2.299-.998a11.95 11.95 0 0 0 2.87-7.787c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-.031.677.293 1.515.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007.23s.997-2.903-.23-4.007M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16" }, null, -1)
   ])]);

package/dist/assets/icons/smile.svg.js

@@ -1,16 +1,16 @@
-import { openBlock as n, createElementBlock as o, createElementVNode as t } from "vue";
+import { openBlock as o, createElementBlock as n, createElementVNode as t } from "vue";
 const r = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
 function a(l, e) {
-  return n(), o("svg", r, [...e[0] || (e[0] = [
+  return o(), n("svg", r, [...e[0] || (e[0] = [
     t("path", { d: "M512 64a448 448 0 1 0 0 896 448 448 0 0 0 0-896m0 64a384 384 0 1 1 0 768 384 384 0 0 1 0-768" }, null, -1),
     t("path", { d: "M352 384a48 48 0 1 1 0 96 48 48 0 0 1 0-96m320 0a48 48 0 1 1 0 96 48 48 0 0 1 0-96M352.64 585.6a32 32 0 0 1 43.648 11.712C419.84 638.08 462.976 672 512 672s92.16-33.92 115.712-74.688a32 32 0 0 1 55.36 32C649.6 687.296 586.752 736 512 736s-137.6-48.704-171.072-106.688A32 32 0 0 1 352.64 585.6" }, null, -1)
   ])]);
 }
-const m = { render: a };
+const s = { render: a };
 export {
-  m as default,
+  s as default,
   a as render
 };

package/dist/components/basic/nmorph-button/NmorphButton.vue.js

@@ -1,10 +1,10 @@
 import './NmorphButton.css';
-import { defineComponent as C, useSlots as z, computed as o, ref as V, openBlock as t, createElementBlock as i, normalizeStyle as $, normalizeClass as N, createElementVNode as O, createBlock as r, unref as a, withCtx as s, createVNode as E, renderSlot as n, Fragment as H, createCommentVNode as f, toDisplayString as M } from "vue";
+import { defineComponent as C, useSlots as z, computed as o, ref as N, openBlock as t, createElementBlock as r, normalizeStyle as V, normalizeClass as $, createElementVNode as O, createBlock as i, unref as a, withCtx as s, createVNode as E, renderSlot as n, Fragment as H, createCommentVNode as f, toDisplayString as M } from "vue";
 import { useModifiers as D } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as w } from "../../../types/common.types.js";
+import { NmorphComponentHeight as I } from "../../../types/common.types.js";
 import d from "../nmorph-icon/NmorphIcon.vue.js";
 /* empty css                             */
-import I from "../../../assets/icons/loading.svg.js";
+import w from "../../../assets/icons/loading.svg.js";
 const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
   key: 1,
   class: "nmorph-button__label"
@@ -32,10 +32,10 @@ const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:model-value"],
-  setup(y, { expose: g, emit: h }) {
-    const e = y, b = h, u = z(), v = o(() => !!u.icon), c = o(() => !!u["icon-only"]), p = o(() => e.active || !!e.modelValue), B = o(
+  setup(y, { expose: h, emit: g }) {
+    const e = y, b = g, u = z(), v = o(() => !!u.icon), c = o(() => !!u["icon-only"]), p = o(() => e.active || !!e.modelValue), B = o(
       () => D({
-        nmorph: [w[e.height], e.fill && "fill"],
+        nmorph: [I[e.height], e.fill && "fill"],
         "nmorph-button": [
           e.styleType,
           e.shape,
@@ -48,7 +48,7 @@ const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
           e.danger && "danger"
         ]
       })
-    ), m = V(null), _ = {
+    ), m = N(null), _ = {
       thin: "small",
       basic: "medium",
       thick: "large"
@@ -59,9 +59,9 @@ const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
     } : {}), x = () => {
       !e.toggle || e.disabled || e.loading || b("update:model-value", !e.modelValue);
     };
-    return g({ buttonDOMElement: m }), (l, j) => (t(), i("div", {
-      class: N(B.value),
-      style: $(S.value)
+    return h({ buttonDOMElement: m }), (l, L) => (t(), r("div", {
+      class: $(B.value),
+      style: V(S.value)
     }, [
       O("button", {
         ref_key: "buttonDOMElement",
@@ -74,28 +74,28 @@ const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
         "aria-pressed": e.toggle ? p.value : void 0,
         onClick: x
       }, [
-        e.loading ? (t(), r(a(d), {
+        e.loading ? (t(), i(a(d), {
           key: 0,
           size: k.value
         }, {
           default: s(() => [
-            E(a(I))
+            E(a(w))
           ]),
           _: 1
-        }, 8, ["size"])) : c.value ? (t(), r(a(d), { key: 1 }, {
+        }, 8, ["size"])) : c.value ? (t(), i(a(d), { key: 1 }, {
           default: s(() => [
             n(l.$slots, "icon-only")
           ]),
           _: 3
-        })) : (t(), i(H, { key: 2 }, [
-          v.value ? (t(), r(a(d), { key: 0 }, {
+        })) : (t(), r(H, { key: 2 }, [
+          v.value ? (t(), i(a(d), { key: 0 }, {
             default: s(() => [
               n(l.$slots, "icon")
             ]),
             _: 3
           })) : f("", !0),
           n(l.$slots, "default"),
-          e.text !== void 0 ? (t(), i("span", F, M(e.text), 1)) : f("", !0),
+          e.text !== void 0 ? (t(), r("span", F, M(e.text), 1)) : f("", !0),
           n(l.$slots, "append")
         ], 64))
       ], 8, T)

package/dist/components/basic/nmorph-scroll/NmorphScroll.css

@@ -1 +1 @@
-.nmorph-scroll{--thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));color-scheme:var(--nmorph-scroll-color-scheme, light);scrollbar-color:var(--thumb-color) transparent;scrollbar-width:thin}.nmorph-scroll::-webkit-scrollbar{width:var(--bar-width);height:var(--bar-height);background-color:transparent;cursor:pointer;transition:width ease-in-out .2s}.nmorph-scroll::-webkit-scrollbar-button,.nmorph-scroll::-webkit-scrollbar-button:single-button,.nmorph-scroll::-webkit-scrollbar-button:double-button,.nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,.nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;min-width:0!important;max-width:0!important;height:0!important;min-height:0!important;max-height:0!important;background:transparent!important;background-image:none!important;border:0!important;appearance:none}.nmorph-scroll::-webkit-scrollbar-track{background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset)}.nmorph-scroll::-webkit-scrollbar-thumb{background-color:var(--thumb-color);border-radius:var(--border-radius-40)}.nmorph-scroll::-webkit-scrollbar-corner{background-color:transparent}
+.nmorph-scroll{--thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));position:relative;overflow:hidden;color-scheme:var(--nmorph-scroll-color-scheme, light)}.nmorph-scroll__viewport{display:inherit;flex-direction:inherit;flex-wrap:inherit;grid-auto-flow:inherit;grid-template-columns:inherit;grid-template-rows:inherit;gap:inherit;justify-content:inherit;align-content:inherit;align-items:inherit;box-sizing:border-box;width:100%;height:100%;color-scheme:inherit;scrollbar-width:none;-ms-overflow-style:none}.nmorph-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.nmorph-scroll__bar{position:absolute;z-index:1;background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset);opacity:.78;transition:opacity ease-in-out .16s,background-color ease-in-out .16s;touch-action:none}.nmorph-scroll__bar--vertical{top:0;right:0;width:var(--bar-width)}.nmorph-scroll__bar--horizontal{right:0;bottom:0;left:0;height:var(--bar-height)}.nmorph-scroll__thumb{position:absolute;top:0;left:0;background-color:var(--thumb-color);border-radius:var(--border-radius-40);cursor:pointer;transition:background-color ease-in-out .16s;touch-action:none}.nmorph-scroll__thumb--vertical{width:100%}.nmorph-scroll__thumb--horizontal{height:100%}.nmorph-scroll--show-bars .nmorph-scroll__bar,.nmorph-scroll__bar:hover{opacity:1}.nmorph-scroll--dragging .nmorph-scroll__thumb{cursor:grabbing}.nmorph-scroll::-webkit-scrollbar{width:var(--bar-width);height:var(--bar-height);background-color:transparent;cursor:pointer;transition:width ease-in-out .2s}.nmorph-scroll::-webkit-scrollbar-button,.nmorph-scroll::-webkit-scrollbar-button:single-button,.nmorph-scroll::-webkit-scrollbar-button:double-button,.nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,.nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;min-width:0!important;max-width:0!important;height:0!important;min-height:0!important;max-height:0!important;background:transparent!important;background-image:none!important;border:0!important;appearance:none}.nmorph-scroll::-webkit-scrollbar-track{background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset)}.nmorph-scroll::-webkit-scrollbar-thumb{background-color:var(--thumb-color);border-radius:var(--border-radius-40)}.nmorph-scroll::-webkit-scrollbar-corner{background-color:transparent}

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js

@@ -1,7 +1,7 @@
 import './NmorphScroll.css';
-import { defineComponent as $, ref as r, computed as o, inject as k, onUnmounted as z, onMounted as D, nextTick as f, watch as v, openBlock as G, createElementBlock as R, normalizeStyle as L, normalizeClass as j, renderSlot as N } from "vue";
-import { useModifiers as U } from "../../../utils/create-modifiers.js";
-const F = /* @__PURE__ */ $({
+import { defineComponent as Pe, ref as c, computed as n, inject as we, onUnmounted as He, onMounted as ze, nextTick as G, watch as N, openBlock as T, createElementBlock as W, normalizeStyle as h, normalizeClass as Be, createElementVNode as M, renderSlot as Te, createCommentVNode as U } from "vue";
+import { useModifiers as We } from "../../../utils/create-modifiers.js";
+const ke = /* @__PURE__ */ Pe({
   __name: "NmorphScroll",
   props: {
     height: { default: "100%" },
@@ -21,95 +21,200 @@ const F = /* @__PURE__ */ $({
     yGapInPx: { default: 0 }
   },
   emits: ["on-scroll", "update:model-value", "on-scroll-end"],
-  setup(x, { expose: g, emit: y }) {
-    const e = x, t = r(null), B = o(() => e.scrollYProp), P = o(() => e.scrollXProp), s = r(!1), c = r(!1), h = () => {
-      const l = t.value;
-      if (!l) {
-        s.value = !1, c.value = !1;
+  setup(j, { expose: q, emit: A }) {
+    const l = j, F = c(null), s = c(null), J = n(() => l.scrollYProp), K = n(() => l.scrollXProp), f = c(!1), g = c(!1), i = c({
+      clientWidth: 0,
+      clientHeight: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
+      scrollLeft: 0,
+      scrollTop: 0
+    }), y = c(!1);
+    let b, a, _ = "";
+    const m = () => {
+      const e = s.value;
+      if (!e) {
+        f.value = !1, g.value = !1, i.value = {
+          clientWidth: 0,
+          clientHeight: 0,
+          scrollWidth: 0,
+          scrollHeight: 0,
+          scrollLeft: 0,
+          scrollTop: 0
+        };
         return;
       }
-      s.value = l.scrollHeight > l.clientHeight, c.value = l.scrollWidth > l.clientWidth;
-    }, S = o(() => e.yBarWidthInPx + e.yGapInPx), H = o(() => e.xBarWidthInPx + e.xGapInPx), b = o(
-      () => e.scrollYProp === "hidden" || !s.value ? "0" : `${S.value}px`
-    ), I = o(
-      () => e.scrollXProp === "hidden" || !c.value ? "0" : `${H.value}px`
-    ), W = o(() => `${e.yBarWidthInPx}px`), E = o(() => `${e.xBarWidthInPx}px`), w = k("nmorph");
-    let a;
-    const i = y, m = () => {
-      const l = t.value;
-      if (!l) return;
-      const n = Math.trunc(l.scrollLeft), u = Math.trunc(l.scrollTop);
-      i("update:model-value", { x: n, y: u });
-    }, M = () => {
-      i("on-scroll-end");
-    }, O = (l) => {
-      i("on-scroll", l), t.value && (e.updateOnlyOnScrollEnd || m(), a !== void 0 && clearTimeout(a), a = setTimeout(() => {
-        e.updateOnlyOnScrollEnd && m(), M();
-      }, e.scrollEndDelay));
+      const t = {
+        clientWidth: e.clientWidth,
+        clientHeight: e.clientHeight,
+        scrollWidth: e.scrollWidth,
+        scrollHeight: e.scrollHeight,
+        scrollLeft: e.scrollLeft,
+        scrollTop: e.scrollTop
+      };
+      i.value = t, f.value = t.scrollHeight > t.clientHeight, g.value = t.scrollWidth > t.clientWidth;
+    }, Q = n(() => l.yBarWidthInPx + l.yGapInPx), Z = n(() => l.xBarWidthInPx + l.xGapInPx), ee = n(
+      () => l.scrollYProp === "hidden" || !f.value ? "0" : `${Q.value}px`
+    ), te = n(
+      () => l.scrollXProp === "hidden" || !g.value ? "0" : `${Z.value}px`
+    ), k = n(() => `${l.yBarWidthInPx}px`), E = n(() => `${l.xBarWidthInPx}px`), oe = n(() => B.value ? E.value : "0px"), le = n(() => z.value ? k.value : "0px"), ne = we("nmorph");
+    let v;
+    const P = A, I = () => {
+      const e = s.value;
+      if (!e) return;
+      const t = Math.trunc(e.scrollLeft), o = Math.trunc(e.scrollTop);
+      P("update:model-value", { x: t, y: o });
+    }, re = () => {
+      P("on-scroll-end");
+    }, ae = (e) => {
+      m(), P("on-scroll", e), s.value && (l.updateOnlyOnScrollEnd || I(), v !== void 0 && clearTimeout(v), v = setTimeout(() => {
+        l.updateOnlyOnScrollEnd && I(), re();
+      }, l.scrollEndDelay));
     };
-    z(() => {
-      a !== void 0 && clearTimeout(a);
+    He(() => {
+      v !== void 0 && clearTimeout(v), b?.disconnect(), V();
     });
-    const p = r(!1), T = o(
-      () => U({
-        "nmorph-scroll": []
+    const w = c(!1), ie = n(
+      () => We({
+        "nmorph-scroll": {
+          "show-bars": w.value || y.value,
+          dragging: y.value
+        }
       })
-    ), d = (l) => {
-      const { x: n, y: u } = l;
-      t.value?.scrollTo({
-        left: n,
-        top: u,
+    ), H = (e) => {
+      const { x: t, y: o } = e;
+      s.value?.scrollTo({
+        left: t,
+        top: o,
         behavior: "smooth"
       });
     };
-    D(() => {
-      d(e.modelValue), f(h);
-    }), v(
-      () => e.modelValue,
-      (l) => {
-        d(l);
+    ze(() => {
+      H(l.modelValue), G(m), typeof ResizeObserver < "u" && s.value && (b = new ResizeObserver(() => {
+        m();
+      }), b.observe(s.value));
+    }), N(
+      () => l.modelValue,
+      (e) => {
+        H(e);
       },
       { deep: !0, immediate: !0 }
-    ), v(
-      () => w?.browser.dimensions,
+    ), N(
+      () => ne?.browser.dimensions,
       () => {
-        f(h);
+        G(m);
       },
       { deep: !0, immediate: !0 }
     );
-    const C = o(() => e.cssScrollBehavior), _ = o(() => e.height), V = o(() => e.maxHeight);
-    g({ scrollDOMContainer: t, moveTo: d });
-    const X = () => {
-      p.value = !0;
-    }, Y = () => {
-      p.value = !1;
+    const se = n(() => l.cssScrollBehavior), ce = n(() => l.height), ue = n(() => l.maxHeight), de = n(() => ({
+      "--bar-width": k.value,
+      "--bar-height": E.value,
+      boxSizing: "border-box",
+      minWidth: "0",
+      minHeight: "0",
+      height: ce.value,
+      maxHeight: ue.value
+    })), he = n(() => ({
+      paddingRight: ee.value,
+      paddingBottom: te.value,
+      overflowX: K.value,
+      overflowY: J.value,
+      scrollBehavior: se.value
+    })), z = n(() => l.scrollYProp !== "hidden" && f.value), B = n(() => l.scrollXProp !== "hidden" && g.value), me = n(
+      () => Math.max(0, i.value.clientHeight - (B.value ? l.xBarWidthInPx : 0))
+    ), ve = n(
+      () => Math.max(0, i.value.clientWidth - (z.value ? l.yBarWidthInPx : 0))
+    ), p = (e) => e === "y" ? me.value : ve.value, L = (e) => e === "y" ? i.value.clientHeight : i.value.clientWidth, O = (e) => e === "y" ? i.value.scrollHeight : i.value.scrollWidth, D = (e) => e === "y" ? i.value.scrollTop : i.value.scrollLeft, pe = (e) => Math.min(p(e), Math.max(18, e === "y" ? l.yBarWidthInPx * 3 : l.xBarWidthInPx * 3)), S = (e) => Math.max(0, O(e) - L(e)), u = (e) => {
+      const t = p(e), o = O(e), r = L(e);
+      return t <= 0 || o <= r ? 0 : Math.min(t, Math.max(pe(e), r / o * t));
+    }, C = (e) => {
+      const t = S(e), o = Math.max(0, p(e) - u(e));
+      return !t || !o ? 0 : D(e) / t * o;
+    }, fe = n(() => ({
+      height: `${u("y")}px`,
+      transform: `translate3d(0, ${C("y")}px, 0)`
+    })), ge = n(() => ({
+      width: `${u("x")}px`,
+      transform: `translate3d(${C("x")}px, 0, 0)`
+    })), R = (e, t) => {
+      const o = s.value;
+      if (!o) return;
+      const r = Math.max(0, Math.min(S(e), t));
+      e === "y" ? o.scrollTop = r : o.scrollLeft = r, m();
+    }, V = () => {
+      a && (window.removeEventListener("pointermove", X), window.removeEventListener("pointerup", x), window.removeEventListener("pointercancel", x), a = void 0, y.value = !1, document.body && (document.body.style.userSelect = _));
+    }, X = (e) => {
+      if (!a) return;
+      const o = (a.axis === "y" ? e.clientY : e.clientX) - a.pointerStart, r = Math.max(1, a.trackSize - a.thumbSize), d = o / r * a.maxScroll;
+      R(a.axis, a.scrollStart + d);
+    }, x = () => {
+      V();
+    }, Y = (e, t) => {
+      t.preventDefault(), t.stopPropagation();
+      const o = p(e), r = u(e), d = S(e);
+      !o || !r || !d || (a = {
+        axis: e,
+        pointerStart: e === "y" ? t.clientY : t.clientX,
+        scrollStart: D(e),
+        trackSize: o,
+        thumbSize: r,
+        maxScroll: d
+      }, y.value = !0, _ = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", X), window.addEventListener("pointerup", x), window.addEventListener("pointercancel", x));
+    }, $ = (e, t) => {
+      if (t.target.closest(".nmorph-scroll__thumb")) return;
+      const r = t.currentTarget.getBoundingClientRect(), d = e === "y" ? t.clientY - r.top : t.clientX - r.left, xe = Math.max(1, p(e) - u(e)), be = (d - u(e) / 2) / xe * S(e);
+      R(e, be);
     };
-    return (l, n) => (G(), R("div", {
-      ref_key: "scrollDOMContainer",
-      ref: t,
-      class: j(T.value),
-      style: L({
-        "--bar-width": W.value,
-        "--bar-height": E.value,
-        boxSizing: "border-box",
-        minWidth: "0",
-        minHeight: "0",
-        height: _.value,
-        maxHeight: V.value,
-        paddingRight: b.value,
-        paddingBottom: I.value,
-        overflowX: P.value,
-        overflowY: B.value,
-        scrollBehavior: C.value
-      }),
-      onScroll: O,
-      onMouseenter: X,
-      onMouseleave: Y
+    q({ scrollDOMContainer: s, moveTo: H });
+    const ye = () => {
+      w.value = !0;
+    }, Se = () => {
+      w.value = !1;
+    };
+    return (e, t) => (T(), W("div", {
+      ref_key: "scrollRoot",
+      ref: F,
+      class: Be(ie.value),
+      style: h(de.value),
+      onMouseenter: ye,
+      onMouseleave: Se
     }, [
-      N(l.$slots, "default")
+      M("div", {
+        ref_key: "scrollDOMContainer",
+        ref: s,
+        class: "nmorph-scroll__viewport",
+        style: h(he.value),
+        onScroll: ae
+      }, [
+        Te(e.$slots, "default")
+      ], 36),
+      z.value ? (T(), W("div", {
+        key: 0,
+        class: "nmorph-scroll__bar nmorph-scroll__bar--vertical",
+        style: h({ bottom: oe.value }),
+        onPointerdown: t[1] || (t[1] = (o) => $("y", o))
+      }, [
+        M("div", {
+          class: "nmorph-scroll__thumb nmorph-scroll__thumb--vertical",
+          style: h(fe.value),
+          onPointerdown: t[0] || (t[0] = (o) => Y("y", o))
+        }, null, 36)
+      ], 36)) : U("", !0),
+      B.value ? (T(), W("div", {
+        key: 1,
+        class: "nmorph-scroll__bar nmorph-scroll__bar--horizontal",
+        style: h({ right: le.value }),
+        onPointerdown: t[3] || (t[3] = (o) => $("x", o))
+      }, [
+        M("div", {
+          class: "nmorph-scroll__thumb nmorph-scroll__thumb--horizontal",
+          style: h(ge.value),
+          onPointerdown: t[2] || (t[2] = (o) => Y("x", o))
+        }, null, 36)
+      ], 36)) : U("", !0)
     ], 38));
   }
 });
 export {
-  F as default
+  ke as default
 };

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css

@@ -0,0 +1 @@
+.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-audio-preview-width, 360px);min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-audio-preview .nmorph-audio-preview__play{flex:0 0 auto}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:600}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}