@nmorph/nmorph-ui-kit 2.2.48 → 2.2.50

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{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)}
+.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-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,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-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--color: currentColor}.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-accent-color);background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--color: currentColor}.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)}

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue.js

@@ -1,33 +1,44 @@
 import './NmorphAudioPreview.css';
-import { defineComponent as q, useSlots as G, ref as _, watch as J, computed as l, openBlock as t, createElementBlock as p, normalizeStyle as N, normalizeClass as K, createElementVNode as i, createBlock as h, unref as r, withCtx as m, createVNode as s, toDisplayString as y, withDirectives as Q, vModelText as W, renderSlot as X, createCommentVNode as H } from "vue";
-import { useModifiers as Y } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Z } from "../../../utils/common.js";
-import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as J, useSlots as K, ref as b, watch as Q, computed as s, openBlock as a, createElementBlock as n, normalizeStyle as T, normalizeClass as W, createElementVNode as u, createBlock as c, unref as r, withCtx as p, createVNode as i, createCommentVNode as m, toDisplayString as v, withDirectives as X, vModelText as Y, renderSlot as Z } from "vue";
+import { useModifiers as ee } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as oe } from "../../../utils/common.js";
+import f from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import ee from "../../../assets/icons/audio.svg.js";
-import oe from "../../basic/nmorph-button/NmorphButton.vue.js";
-/* empty css                                          */
-import ae from "../../../assets/icons/pause.svg.js";
-import re from "../../../assets/icons/play.svg.js";
-import te from "../../../assets/icons/open.svg.js";
-import ne from "../../../assets/icons/download.svg.js";
+import ae from "../../../assets/icons/audio.svg.js";
+import P from "../../../assets/icons/pause.svg.js";
+import z from "../../../assets/icons/play.svg.js";
+import re from "../../../assets/icons/open.svg.js";
+import te from "../../../assets/icons/download.svg.js";
 import le from "../../../assets/icons/loading.svg.js";
-const ie = ["src", "preload"], se = { class: "nmorph-audio-preview__icon" }, de = { class: "nmorph-audio-preview__body" }, ue = { class: "nmorph-audio-preview__header" }, ce = { class: "nmorph-audio-preview__name" }, pe = {
+const ne = ["src", "preload"], se = ["disabled", "aria-label"], ie = {
+  key: 2,
+  class: "nmorph-audio-preview__play-indicator"
+}, de = ["aria-label"], ue = { class: "nmorph-audio-preview__body" }, ce = {
+  key: 0,
+  class: "nmorph-audio-preview__header"
+}, pe = { class: "nmorph-audio-preview__name" }, me = {
   key: 0,
   class: "nmorph-audio-preview__error"
-}, me = {
+}, ve = {
   key: 1,
   class: "nmorph-audio-preview__time"
-}, ve = ["disabled", "aria-label"], fe = {
+}, fe = { class: "nmorph-audio-preview__control" }, _e = ["disabled", "aria-label"], he = {
   key: 0,
+  class: "nmorph-audio-preview__time"
+}, ye = {
+  key: 2,
   class: "nmorph-audio-preview__actions"
-}, _e = ["href", "aria-label"], he = ["href", "download", "aria-label"], Me = /* @__PURE__ */ q({
+}, we = ["href", "aria-label"], be = ["href", "download", "aria-label"], Ie = /* @__PURE__ */ J({
   __name: "NmorphAudioPreview",
   props: {
     src: {},
     name: { default: "" },
     durationMs: { default: void 0 },
     width: { default: void 0 },
+    surface: { default: "card" },
+    embedded: { type: Boolean, default: !1 },
+    showIcon: { type: Boolean, default: !0 },
+    showHeader: { type: Boolean, default: !0 },
     compact: { type: Boolean, default: !1 },
     preload: { default: "metadata" },
     downloadHref: { default: "" },
@@ -37,171 +48,195 @@ const ie = ["src", "preload"], se = { class: "nmorph-audio-preview__icon" }, de
     showDefaultActions: { type: Boolean, default: !0 }
   },
   emits: ["play", "pause", "open", "download", "error"],
-  setup(S, { expose: T, emit: $ }) {
-    const e = S, u = $, x = G(), a = _(null), n = _(!1), v = _(0), f = _(e.durationMs ? e.durationMs / 1e3 : 0);
-    J(
+  setup(C, { expose: I, emit: x }) {
+    const e = C, _ = x, M = K(), t = b(null), l = b(!1), y = b(0), w = b(e.durationMs ? e.durationMs / 1e3 : 0);
+    Q(
       () => e.durationMs,
       (o) => {
-        f.value = o ? o / 1e3 : f.value;
+        w.value = o ? o / 1e3 : w.value;
       }
     );
-    const d = l(() => f.value || 0), g = l({
-      get: () => d.value > 0 ? v.value / d.value * 100 : 0,
+    const d = s(() => w.value || 0), k = s({
+      get: () => d.value > 0 ? y.value / d.value * 100 : 0,
       set: (o) => {
-        !a.value || d.value <= 0 || (a.value.currentTime = o / 100 * d.value, v.value = a.value.currentTime);
+        !t.value || d.value <= 0 || (t.value.currentTime = o / 100 * d.value, y.value = t.value.currentTime);
       }
-    }), B = l(() => ({ "--nmorph-audio-preview-progress": `${g.value}%` })), C = l(
-      () => !!x.actions || e.showDefaultActions && (e.src || e.downloadHref)
-    ), M = l(
-      () => Y({
+    }), A = s(() => ({ "--nmorph-audio-preview-progress": `${k.value}%` })), H = s(
+      () => !!M.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), D = s(
+      () => ee({
         "nmorph-audio-preview": [
+          e.surface,
+          e.embedded && "embedded",
+          !e.showIcon && "no-icon",
+          !e.showHeader && "no-header",
           e.compact && "compact",
           e.loading && "loading",
           e.error && "error",
-          n.value && "playing"
+          l.value && "playing",
+          !H.value && "no-actions"
         ]
       })
-    ), z = l(
-      () => Z({
+    ), V = s(
+      () => oe({
         "--nmorph-audio-preview-width": e.width
       })
-    ), k = (o) => {
+    ), N = (o) => {
       if (!Number.isFinite(o) || o < 0) return "0:00";
-      const c = Math.floor(o), b = Math.floor(c / 60), j = c % 60;
-      return `${b}:${j.toString().padStart(2, "0")}`;
-    }, A = l(() => k(v.value)), D = l(() => k(d.value)), I = async () => {
-      if (!(!a.value || e.loading || e.error)) {
-        if (n.value) {
-          a.value.pause();
+      const h = Math.floor(o), g = Math.floor(h / 60), G = h % 60;
+      return `${g}:${G.toString().padStart(2, "0")}`;
+    }, $ = s(() => N(y.value)), B = s(() => N(d.value)), S = async () => {
+      if (!(!t.value || e.loading || e.error)) {
+        if (l.value) {
+          t.value.pause();
           return;
         }
         try {
-          await a.value.play();
+          await t.value.play();
         } catch {
-          n.value = !1;
+          l.value = !1;
         }
       }
-    }, P = () => {
-      !a.value || Number.isNaN(a.value.duration) || (f.value = a.value.duration);
-    }, V = () => {
-      v.value = a.value?.currentTime || 0;
-    }, E = (o) => {
-      n.value = !0, u("play", o);
-    }, L = (o) => {
-      n.value = !1, u("pause", o);
-    }, O = () => {
-      n.value = !1;
+    }, E = () => {
+      !t.value || Number.isNaN(t.value.duration) || (w.value = t.value.duration);
+    }, L = () => {
+      y.value = t.value?.currentTime || 0;
+    }, O = (o) => {
+      l.value = !0, _("play", o);
     }, R = (o) => {
-      n.value = !1, u("error", o);
-    }, U = () => u("open"), F = () => u("download");
-    return T({ audioRef: a }), (o, c) => (t(), p("div", {
-      class: K(M.value),
-      style: N(z.value)
+      l.value = !1, _("pause", o);
+    }, U = () => {
+      l.value = !1;
+    }, F = (o) => {
+      l.value = !1, _("error", o);
+    }, j = () => _("open"), q = () => _("download");
+    return I({ audioRef: t }), (o, h) => (a(), n("div", {
+      class: W(D.value),
+      style: T(V.value)
     }, [
-      i("audio", {
+      u("audio", {
         ref_key: "audioRef",
-        ref: a,
+        ref: t,
         src: e.src,
         preload: e.preload,
-        onLoadedmetadata: P,
-        onTimeupdate: V,
-        onPlay: E,
-        onPause: L,
-        onEnded: O,
-        onError: R
-      }, null, 40, ie),
-      i("div", se, [
-        e.loading ? (t(), h(r(w), {
+        onLoadedmetadata: E,
+        onTimeupdate: L,
+        onPlay: O,
+        onPause: R,
+        onEnded: U,
+        onError: F
+      }, null, 40, ne),
+      e.showIcon ? (a(), n("button", {
+        key: 0,
+        class: "nmorph-audio-preview__icon",
+        type: "button",
+        disabled: e.loading || e.error,
+        "aria-label": l.value ? `Pause ${e.name || "audio"}` : `Play ${e.name || "audio"}`,
+        onClick: S
+      }, [
+        e.loading ? (a(), c(r(f), {
           key: 0,
           size: "medium"
         }, {
-          default: m(() => [
-            s(r(le))
+          default: p(() => [
+            i(r(le))
           ]),
           _: 1
-        })) : (t(), h(r(w), {
+        })) : (a(), c(r(f), {
           key: 1,
           size: "medium"
         }, {
-          default: m(() => [
-            s(r(ee))
+          default: p(() => [
+            i(r(ae))
           ]),
           _: 1
-        }))
-      ]),
-      s(r(oe), {
-        class: "nmorph-audio-preview__play",
-        height: "thin",
-        "style-type": "transparent",
-        disabled: e.loading || e.error,
-        onClick: I
-      }, {
-        "icon-only": m(() => [
-          n.value ? (t(), h(r(ae), { key: 0 })) : (t(), h(r(re), { key: 1 }))
-        ]),
-        _: 1
-      }, 8, ["disabled"]),
-      i("div", de, [
-        i("div", ue, [
-          i("span", ce, y(e.name || "Audio"), 1),
-          e.error && e.errorText ? (t(), p("span", pe, y(e.errorText), 1)) : (t(), p("span", me, y(A.value) + " / " + y(D.value), 1))
-        ]),
-        Q(i("input", {
-          "onUpdate:modelValue": c[0] || (c[0] = (b) => g.value = b),
-          class: "nmorph-audio-preview__range",
-          type: "range",
-          min: "0",
-          max: "100",
-          step: "0.1",
-          style: N(B.value),
-          disabled: e.loading || e.error || d.value <= 0,
-          "aria-label": `Audio progress ${e.name || ""}`
-        }, null, 12, ve), [
-          [
-            W,
-            g.value,
-            void 0,
-            { number: !0 }
-          ]
+        })),
+        !e.loading && !e.error ? (a(), n("span", ie, [
+          i(r(f), { size: "small" }, {
+            default: p(() => [
+              l.value ? (a(), c(r(P), { key: 0 })) : (a(), c(r(z), { key: 1 }))
+            ]),
+            _: 1
+          })
+        ])) : m("", !0)
+      ], 8, se)) : !e.loading && !e.error ? (a(), n("button", {
+        key: 1,
+        class: "nmorph-audio-preview__play-button",
+        type: "button",
+        "aria-label": l.value ? `Pause ${e.name || "audio"}` : `Play ${e.name || "audio"}`,
+        onClick: S
+      }, [
+        i(r(f), { size: "small" }, {
+          default: p(() => [
+            l.value ? (a(), c(r(P), { key: 0 })) : (a(), c(r(z), { key: 1 }))
+          ]),
+          _: 1
+        })
+      ], 8, de)) : m("", !0),
+      u("div", ue, [
+        e.showHeader ? (a(), n("div", ce, [
+          u("span", pe, v(e.name || "Audio"), 1),
+          e.error && e.errorText ? (a(), n("span", me, v(e.errorText), 1)) : (a(), n("span", ve, v($.value) + " / " + v(B.value), 1))
+        ])) : m("", !0),
+        u("div", fe, [
+          X(u("input", {
+            "onUpdate:modelValue": h[0] || (h[0] = (g) => k.value = g),
+            class: "nmorph-audio-preview__range",
+            type: "range",
+            min: "0",
+            max: "100",
+            step: "0.1",
+            style: T(A.value),
+            disabled: e.loading || e.error || d.value <= 0,
+            "aria-label": `Audio progress ${e.name || ""}`
+          }, null, 12, _e), [
+            [
+              Y,
+              k.value,
+              void 0,
+              { number: !0 }
+            ]
+          ]),
+          e.showHeader ? m("", !0) : (a(), n("span", he, v($.value) + " / " + v(B.value), 1))
         ])
       ]),
-      C.value ? (t(), p("div", fe, [
-        X(o.$slots, "actions", {}, () => [
-          i("a", {
+      H.value ? (a(), n("div", ye, [
+        Z(o.$slots, "actions", {}, () => [
+          u("a", {
             href: e.src,
             target: "_blank",
             rel: "noopener noreferrer",
             class: "nmorph-audio-preview__action-link",
             "aria-label": `Open ${e.name || "audio"}`,
-            onClick: U
+            onClick: j
           }, [
-            s(r(w), { size: "small" }, {
-              default: m(() => [
-                s(r(te))
+            i(r(f), { size: "small" }, {
+              default: p(() => [
+                i(r(re))
               ]),
               _: 1
             })
-          ], 8, _e),
-          e.downloadHref ? (t(), p("a", {
+          ], 8, we),
+          e.downloadHref ? (a(), n("a", {
             key: 0,
             href: e.downloadHref,
             download: e.name,
             class: "nmorph-audio-preview__action-link",
             "aria-label": `Download ${e.name || "audio"}`,
-            onClick: F
+            onClick: q
           }, [
-            s(r(w), { size: "small" }, {
-              default: m(() => [
-                s(r(ne))
+            i(r(f), { size: "small" }, {
+              default: p(() => [
+                i(r(te))
               ]),
               _: 1
             })
-          ], 8, he)) : H("", !0)
+          ], 8, be)) : m("", !0)
         ])
-      ])) : H("", !0)
+      ])) : m("", !0)
     ], 6));
   }
 });
 export {
-  Me as default
+  Ie as default
 };

package/dist/components/data/nmorph-file-card/NmorphFileCard.css

@@ -1 +1 @@
-.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;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-file-card .nmorph-file-card__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-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__badge{flex:0 0 auto;max-width:72px;padding:2px 6px;overflow:hidden;color:var(--nmorph-accent-color);font-weight:700;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-transform:uppercase;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-file-card .nmorph-file-card__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-file-card .nmorph-file-card__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-file-card .nmorph-file-card__action-link .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}
+.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;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-file-card .nmorph-file-card__icon{position:relative;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-file-card .nmorph-file-card__icon-action{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-accent-color);text-decoration:none;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--color: currentColor}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__audio-preview,.nmorph-file-card .nmorph-file-card__video-preview{width:100%;min-width:0}.nmorph-file-card .nmorph-file-card__badge{flex:0 0 auto;max-width:72px;padding:2px 6px;overflow:hidden;color:var(--nmorph-accent-color);font-weight:700;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-transform:uppercase;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent);border-radius:var(--default-border-radius)}.nmorph-file-card .nmorph-file-card__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-file-card .nmorph-file-card__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-file-card .nmorph-file-card__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-file-card .nmorph-file-card__action-link .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__audio-preview,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}