@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

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

@@ -1,87 +1,220 @@
 import './NmorphScroll.css';
-import s from "./NmorphScroll.vue2.js";
-import { openBlock as e, createElementBlock as t, normalizeStyle as n, normalizeClass as c, createElementVNode as i, renderSlot as d, createCommentVNode as a } from "vue";
-/* empty css                  */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-function v(m, r, _, o, b, y) {
-  return e(), t(
-    "div",
-    {
-      ref: "scrollRoot",
-      class: c(o.modifiers),
-      style: n(o.rootStyle),
-      onMouseenter: o.mouseEnterHandler,
-      onMouseleave: o.mouseLeaveHandler
-    },
-    [
-      i(
-        "div",
-        {
-          ref: "scrollDOMContainer",
-          class: "nmorph-scroll__viewport",
-          style: n(o.viewportStyle),
-          onScroll: o.scrollHandler
-        },
-        [
-          d(m.$slots, "default")
-        ],
-        36
-        /* STYLE, NEED_HYDRATION */
-      ),
-      o.visibleVerticalBar ? (e(), t(
-        "div",
-        {
-          key: 0,
-          class: "nmorph-scroll__bar nmorph-scroll__bar--vertical",
-          style: n({ bottom: o.verticalBarBottom }),
-          onPointerdown: r[1] || (r[1] = (l) => o.trackPointerDownHandler("y", l))
-        },
-        [
-          i(
-            "div",
-            {
-              class: "nmorph-scroll__thumb nmorph-scroll__thumb--vertical",
-              style: n(o.verticalThumbStyle),
-              onPointerdown: r[0] || (r[0] = (l) => o.thumbPointerDownHandler("y", l))
-            },
-            null,
-            36
-            /* STYLE, NEED_HYDRATION */
-          )
-        ],
-        36
-        /* STYLE, NEED_HYDRATION */
-      )) : a("v-if", !0),
-      o.visibleHorizontalBar ? (e(), t(
-        "div",
-        {
-          key: 1,
-          class: "nmorph-scroll__bar nmorph-scroll__bar--horizontal",
-          style: n({ right: o.horizontalBarRight }),
-          onPointerdown: r[3] || (r[3] = (l) => o.trackPointerDownHandler("x", l))
-        },
-        [
-          i(
-            "div",
-            {
-              class: "nmorph-scroll__thumb nmorph-scroll__thumb--horizontal",
-              style: n(o.horizontalThumbStyle),
-              onPointerdown: r[2] || (r[2] = (l) => o.thumbPointerDownHandler("x", l))
-            },
-            null,
-            36
-            /* STYLE, NEED_HYDRATION */
-          )
-        ],
-        36
-        /* STYLE, NEED_HYDRATION */
-      )) : a("v-if", !0)
-    ],
-    38
-    /* CLASS, STYLE, NEED_HYDRATION */
-  );
-}
-const H = /* @__PURE__ */ h(s, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-scroll/NmorphScroll.vue"]]);
+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%" },
+    maxHeight: { default: "none" },
+    modelValue: { default: () => ({
+      x: 0,
+      y: 0
+    }) },
+    scrollYProp: { default: "auto" },
+    scrollXProp: { default: "auto" },
+    cssScrollBehavior: { default: "smooth" },
+    scrollEndDelay: { default: 50 },
+    updateOnlyOnScrollEnd: { type: Boolean, default: !1 },
+    yBarWidthInPx: { default: 6 },
+    xBarWidthInPx: { default: 6 },
+    xGapInPx: { default: 0 },
+    yGapInPx: { default: 0 }
+  },
+  emits: ["on-scroll", "update:model-value", "on-scroll-end"],
+  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;
+      }
+      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));
+    };
+    He(() => {
+      v !== void 0 && clearTimeout(v), b?.disconnect(), V();
+    });
+    const w = c(!1), ie = n(
+      () => We({
+        "nmorph-scroll": {
+          "show-bars": w.value || y.value,
+          dragging: y.value
+        }
+      })
+    ), H = (e) => {
+      const { x: t, y: o } = e;
+      s.value?.scrollTo({
+        left: t,
+        top: o,
+        behavior: "smooth"
+      });
+    };
+    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 }
+    ), N(
+      () => ne?.browser.dimensions,
+      () => {
+        G(m);
+      },
+      { deep: !0, immediate: !0 }
+    );
+    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);
+    };
+    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
+    }, [
+      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 {
-  H as default
+  ke as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphScroll.css';
+import o from "./NmorphScroll.vue.js";
+/* empty css                  */
+export {
+  o as default
+};

package/dist/components/basic/nmorph-space/NmorphSpace.vue.js

@@ -1,21 +1,48 @@
 import './NmorphSpace.css';
-import r from "./NmorphSpace.vue2.js";
-import { openBlock as s, createBlock as t, resolveDynamicComponent as a, normalizeStyle as l, normalizeClass as c, withCtx as n, renderSlot as p } from "vue";
-/* empty css                 */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
-function i(e, f, _, o, d, h) {
-  return s(), t(a(o.props.tag), {
-    class: c(o.modifiers),
-    style: l(o.styles)
-  }, {
-    default: n(() => [
-      p(e.$slots, "default")
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 8, ["class", "style"]);
-}
-const k = /* @__PURE__ */ m(r, [["render", i], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-space/NmorphSpace.vue"]]);
+import { defineComponent as f, computed as a, openBlock as u, createBlock as c, resolveDynamicComponent as m, normalizeStyle as d, normalizeClass as y, withCtx as g, renderSlot as h } from "vue";
+import { useModifiers as j } from "../../../utils/create-modifiers.js";
+import { toCssSize as x } from "../../../utils/common.js";
+const _ = /* @__PURE__ */ f({
+  __name: "NmorphSpace",
+  props: {
+    tag: { default: "div" },
+    direction: { default: "row" },
+    size: { default: "medium" },
+    align: { default: "start" },
+    justify: { default: "start" },
+    wrap: { type: Boolean, default: !1 },
+    inline: { type: Boolean, default: !1 },
+    fill: { type: Boolean, default: !1 }
+  },
+  setup(l) {
+    const e = l, s = {
+      small: "4px",
+      medium: "8px",
+      large: "16px"
+    }, n = a(
+      () => j({
+        "nmorph-space": [e.direction, e.wrap && "wrap", e.inline && "inline", e.fill && "fill"]
+      })
+    ), o = (t) => x(s[t] || t), i = a(
+      () => e.align === "start" || e.align === "end" ? `flex-${e.align}` : e.align
+    ), r = a(
+      () => e.justify === "start" || e.justify === "end" ? `flex-${e.justify}` : e.justify
+    ), p = a(() => ({
+      "--nmorph-space-gap": o(e.size),
+      "--nmorph-space-align": i.value,
+      "--nmorph-space-justify": r.value
+    }));
+    return (t, z) => (u(), c(m(e.tag), {
+      class: y(n.value),
+      style: d(p.value)
+    }, {
+      default: g(() => [
+        h(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "style"]));
+  }
+});
 export {
-  k as default
+  _ as default
 };

package/dist/components/basic/nmorph-space/NmorphSpace.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphSpace.css';
+import o from "./NmorphSpace.vue.js";
+/* empty css                 */
+export {
+  o as default
+};

package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.vue.js

@@ -1,44 +1,48 @@
 import './NmorphAudioMeter.css';
-import n from "./NmorphAudioMeter.vue2.js";
-import { openBlock as e, createElementBlock as a, normalizeStyle as t, normalizeClass as i, Fragment as l, renderList as s } from "vue";
-/* empty css                      */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = ["aria-label", "aria-valuenow"], c = {
+import { defineComponent as f, computed as t, openBlock as o, createElementBlock as l, normalizeStyle as _, normalizeClass as m, Fragment as b, renderList as y } from "vue";
+import { useModifiers as M } from "../../../utils/create-modifiers.js";
+const k = ["aria-label", "aria-valuenow"], w = {
   key: 1,
   class: "nmorph-audio-meter__line"
-}, p = {
+}, x = {
   key: 2,
   class: "nmorph-audio-meter__ring"
-};
-function d(h, u, v, r, f, b) {
-  return e(), a("div", {
-    class: i(r.modifiers),
-    style: t(r.styles),
-    role: "meter",
-    "aria-label": r.props.label,
-    "aria-valuemin": "0",
-    "aria-valuemax": "100",
-    "aria-valuenow": Math.round(r.level * 100)
-  }, [
-    r.props.variant === "bars" ? (e(!0), a(
-      l,
-      { key: 0 },
-      s(r.barIndexes, (o) => (e(), a(
-        "span",
-        {
-          key: o,
-          class: i(["nmorph-audio-meter__bar", { "nmorph-audio-meter__bar--active": r.isBarActive(o) }])
-        },
-        null,
-        2
-        /* CLASS */
-      ))),
-      128
-      /* KEYED_FRAGMENT */
-    )) : r.props.variant === "line" ? (e(), a("span", c)) : (e(), a("span", p))
-  ], 14, _);
-}
-const B = /* @__PURE__ */ m(n, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-audio-meter/NmorphAudioMeter.vue"]]);
+}, T = /* @__PURE__ */ f({
+  __name: "NmorphAudioMeter",
+  props: {
+    value: { default: void 0 },
+    volumeDb: { default: void 0 },
+    variant: { default: "bars" },
+    bars: { default: 12 },
+    warnThreshold: { default: 0.7 },
+    errorThreshold: { default: 0.9 },
+    label: { default: "Audio level" }
+  },
+  setup(d) {
+    const e = d, n = (r) => Math.min(Math.max(r, 0), 1), a = t(() => typeof e.value == "number" ? n(e.value) : typeof e.volumeDb == "number" ? n((e.volumeDb + 60) / 60) : 0), u = t(() => Array.from({ length: Math.max(e.bars, 1) }, (r, s) => s)), v = t(() => a.value >= e.errorThreshold ? "error" : a.value >= e.warnThreshold ? "warn" : "normal"), c = t(
+      () => M({
+        "nmorph-audio-meter": [e.variant, v.value]
+      })
+    ), h = t(() => ({
+      "--nmorph-audio-meter-level": a.value,
+      "--nmorph-audio-meter-percent": `${Math.round(a.value * 100)}%`
+    })), p = (r) => (r + 1) / u.value.length <= a.value;
+    return (r, s) => (o(), l("div", {
+      class: m(c.value),
+      style: _(h.value),
+      role: "meter",
+      "aria-label": e.label,
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": Math.round(a.value * 100)
+    }, [
+      e.variant === "bars" ? (o(!0), l(b, { key: 0 }, y(u.value, (i) => (o(), l("span", {
+        key: i,
+        class: m(["nmorph-audio-meter__bar", { "nmorph-audio-meter__bar--active": p(i) }])
+      }, null, 2))), 128)) : e.variant === "line" ? (o(), l("span", w)) : (o(), l("span", x))
+    ], 14, k));
+  }
+});
 export {
-  B as default
+  T as default
 };

package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphAudioMeter.css';
+import o from "./NmorphAudioMeter.vue.js";
+/* empty css                      */
+export {
+  o as default
+};

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

@@ -1 +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{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer;--color: currentColor}.nmorph-audio-preview .nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);box-sizing:border-box;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__control{display:flex;gap:var(--indentation-02);align-items:center;width:100%;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{flex:1 1 0;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--no-actions .nmorph-audio-preview__body{padding-inline-end:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--embedded{width:var(--nmorph-audio-preview-width, 100%);min-height:auto;padding:0;background:transparent;border-radius:0;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__body{gap:0;padding-inline-end:0}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range{height:5px}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-webkit-slider-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-moz-range-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--no-header .nmorph-audio-preview__time{flex:0 0 auto}.nmorph-audio-preview.nmorph-audio-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--soft .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain{background:transparent;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}
+.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{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border:0;border-radius:var(--default-border-radius);cursor:default;--color: currentColor}.nmorph-audio-preview button.nmorph-audio-preview__icon{cursor:pointer}.nmorph-audio-preview button.nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);box-sizing:border-box;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__control{display:flex;gap:var(--indentation-02);align-items:center;width:100%;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{flex:1 1 0;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--no-actions .nmorph-audio-preview__body{padding-inline-end:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--embedded{width:var(--nmorph-audio-preview-width, 100%);min-height:auto;padding:0;background:transparent;border-radius:0;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__body{gap:0;padding-inline-end:0}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range{height:5px}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-webkit-slider-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-moz-range-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--no-header .nmorph-audio-preview__time{flex:0 0 auto}.nmorph-audio-preview.nmorph-audio-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--soft .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain{background:transparent;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}