@nmorph/nmorph-ui-kit 2.2.49 → 2.2.51

package/dist/components/data/nmorph-file-card/NmorphFileCard.vue.js

@@ -1,34 +1,36 @@
 import './NmorphFileCard.css';
-import { defineComponent as z, useSlots as F, computed as a, openBlock as r, createElementBlock as t, normalizeClass as P, createElementVNode as g, createBlock as f, unref as n, withCtx as m, createVNode as i, resolveDynamicComponent as R, createCommentVNode as l, toDisplayString as h, renderSlot as V } from "vue";
-import { useModifiers as O } from "../../../utils/create-modifiers.js";
-import { getFileExtension as W, getPlainFileType as K, getTypeCandidates as j, isKnownFileType as d } from "../../../utils/file-types.js";
-import { NmorphImageResolution as G, NmorphAudioResolution as q, NmorphVideoResolution as J, NmorphArchiveResolution as Q, NmorphDocResolution as U } from "../../form/nmorph-file-upload/types.js";
-import X from "../nmorph-audio-preview/NmorphAudioPreview.vue.js";
+import { defineComponent as V, useSlots as W, computed as a, openBlock as r, createElementBlock as n, normalizeClass as K, createElementVNode as f, createVNode as t, unref as i, withCtx as c, createBlock as b, resolveDynamicComponent as j, createCommentVNode as l, toDisplayString as h, renderSlot as G } from "vue";
+import { useModifiers as U } from "../../../utils/create-modifiers.js";
+import { getFileExtension as q, getPlainFileType as J, getTypeCandidates as Q, isKnownFileType as m } from "../../../utils/file-types.js";
+import { NmorphImageResolution as X, NmorphAudioResolution as Y, NmorphVideoResolution as Z, NmorphArchiveResolution as ee, NmorphDocResolution as oe } from "../../form/nmorph-file-upload/types.js";
+import ae from "../nmorph-audio-preview/NmorphAudioPreview.vue.js";
 /* empty css                                              */
-import Y from "../../../assets/icons/image.svg.js";
-import Z from "../../../assets/icons/video.svg.js";
-import ee from "../../../assets/icons/archive.svg.js";
-import C from "../../../assets/icons/doc.svg.js";
-import p from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import re from "../nmorph-video-preview/NmorphVideoPreview.vue.js";
+/* empty css                                              */
+import ne from "../../../assets/icons/image.svg.js";
+import te from "../../../assets/icons/archive.svg.js";
+import A from "../../../assets/icons/doc.svg.js";
+import d from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import oe from "../../../assets/icons/eye.svg.js";
-import re from "../../../assets/icons/audio.svg.js";
-import ae from "../../../assets/icons/loading.svg.js";
-import ne from "../../../assets/icons/open.svg.js";
-import te from "../../../assets/icons/download.svg.js";
-const ie = { class: "nmorph-file-card__icon" }, le = ["href", "aria-label"], se = { class: "nmorph-file-card__body" }, ce = { class: "nmorph-file-card__name" }, me = {
+import ie from "../../../assets/icons/audio.svg.js";
+import le from "../../../assets/icons/video.svg.js";
+import se from "../../../assets/icons/eye.svg.js";
+import ce from "../../../assets/icons/loading.svg.js";
+import me from "../../../assets/icons/open.svg.js";
+import de from "../../../assets/icons/download.svg.js";
+const pe = { class: "nmorph-file-card__icon" }, ue = ["href", "aria-label"], fe = { class: "nmorph-file-card__body" }, he = { class: "nmorph-file-card__info" }, ve = { class: "nmorph-file-card__name" }, _e = {
   key: 0,
   class: "nmorph-file-card__error"
-}, de = {
+}, we = {
   key: 1,
   class: "nmorph-file-card__meta"
-}, pe = {
+}, ye = {
   key: 0,
   class: "nmorph-file-card__badge"
-}, ue = {
+}, ge = {
   key: 1,
   class: "nmorph-file-card__actions"
-}, fe = ["href", "aria-label"], he = ["href", "download", "aria-label"], Ee = /* @__PURE__ */ z({
+}, Ne = ["aria-label"], Be = ["href", "aria-label"], be = ["href", "download", "aria-label"], ke = "var(--nmorph-contrast-text-color)", Ke = /* @__PURE__ */ V({
   __name: "NmorphFileCard",
   props: {
     name: {},
@@ -48,69 +50,68 @@ const ie = { class: "nmorph-file-card__icon" }, le = ["href", "aria-label"], se
     showDefaultActions: { type: Boolean, default: !0 }
   },
   emits: ["open", "download", "error"],
-  setup(S, { emit: T }) {
-    const e = S, _ = T, b = F(), u = a(() => (e.extension || W(e.name) || K(e.mimeType)).toLowerCase()), s = a(() => j(e.mimeType, e.name)), x = a(() => e.mimeType.toLowerCase().startsWith("image/") || s.value.some((o) => d(o, G)) ? Y : e.mimeType.toLowerCase().startsWith("audio/") || s.value.some((o) => d(o, q)) ? re : e.mimeType.toLowerCase().startsWith("video/") || s.value.some((o) => d(o, J)) ? Z : s.value.some((o) => d(o, Q)) ? ee : s.value.some((o) => d(o, U)) ? C : C), I = (o) => {
+  setup(P, { emit: H }) {
+    const e = P, v = H, $ = W(), p = a(() => (e.extension || q(e.name) || J(e.mimeType)).toLowerCase()), s = a(() => Q(e.mimeType, e.name)), D = a(() => e.mimeType.toLowerCase().startsWith("image/") || s.value.some((o) => m(o, X)) ? ne : e.mimeType.toLowerCase().startsWith("audio/") || s.value.some((o) => m(o, Y)) ? ie : e.mimeType.toLowerCase().startsWith("video/") || s.value.some((o) => m(o, Z)) ? le : s.value.some((o) => m(o, ee)) ? te : s.value.some((o) => m(o, oe)) ? A : A), E = (o) => {
       if (o === void 0 || Number.isNaN(o) || o < 0) return "";
       if (o === 0) return "0 B";
-      const w = ["B", "KB", "MB", "GB", "TB"], y = Math.min(Math.floor(Math.log(o) / Math.log(1024)), w.length - 1), k = o / 1024 ** y, M = k >= 10 || y === 0 ? 0 : 1;
-      return `${k.toFixed(M)} ${w[y]}`;
-    }, A = a(() => I(e.size)), D = a(() => u.value || e.mimeType), B = a(() => [D.value, A.value].filter(Boolean).join(" · ")), c = a(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error), v = a(() => e.showDefaultActions && !!e.previewSrc && !c.value && (e.mimeType.toLowerCase() === "application/pdf" || u.value === "pdf")), $ = a(
-      () => !!b.actions || e.showDefaultActions && (e.previewSrc && !c.value && !v.value || e.downloadHref)
-    ), E = a(
-      () => O({
+      const g = ["B", "KB", "MB", "GB", "TB"], N = Math.min(Math.floor(Math.log(o) / Math.log(1024)), g.length - 1), B = o / 1024 ** N, F = B >= 10 || N === 0 || Number.isInteger(B) ? 0 : 1;
+      return `${B.toFixed(F)} ${g[N]}`;
+    }, L = a(() => E(e.size)), O = a(() => p.value || e.mimeType), k = a(() => [O.value, L.value].filter(Boolean).join(" · ")), _ = a(() => e.mediaPreview === "audio" && !!e.previewSrc && !e.loading && !e.error), w = a(() => e.mediaPreview === "video" && !!e.previewSrc && !e.loading && !e.error), u = a(() => _.value || w.value), R = a(() => e.compact ? "96px" : "120px"), C = a(() => e.mimeType.toLowerCase() === "application/pdf" || p.value === "pdf"), S = a(() => C.value ? e.previewSrc || e.downloadHref : ""), y = a(
+      () => e.showDefaultActions && !!S.value && !u.value && C.value
+    ), T = a(
+      () => !!$.actions || e.showDefaultActions && (e.loading || e.previewSrc && !u.value && !y.value || e.downloadHref)
+    ), M = a(
+      () => U({
         "nmorph-file-card": [
           e.surface,
           e.compact && "compact",
           e.loading && "loading",
           e.error && "error",
-          c.value && "media-audio",
-          !e.iconSurface && "icon-plain"
+          u.value && "media",
+          _.value && "media-audio",
+          w.value && "media-video",
+          !e.iconSurface && "icon-plain",
+          !T.value && "no-actions"
         ]
       })
-    ), N = () => _("open"), H = () => _("download"), L = () => _("error");
-    return (o, w) => (r(), t("div", {
-      class: P(E.value)
+    ), x = () => v("open"), z = () => v("download"), I = () => v("error");
+    return (o, g) => (r(), n("div", {
+      class: K(M.value)
     }, [
-      g("div", ie, [
-        e.loading ? (r(), f(n(p), {
-          key: 0,
-          size: "medium"
-        }, {
-          default: m(() => [
-            i(n(ae))
-          ]),
-          _: 1
-        })) : (r(), f(n(p), {
-          key: 1,
-          size: "medium"
-        }, {
-          default: m(() => [
-            (r(), f(R(x.value)))
+      f("div", pe, [
+        t(i(d), { size: "medium" }, {
+          default: c(() => [
+            (r(), b(j(D.value)))
           ]),
           _: 1
-        })),
-        v.value && !e.loading && !e.error ? (r(), t("a", {
-          key: 2,
-          href: e.previewSrc,
+        }),
+        y.value && !e.loading && !e.error ? (r(), n("a", {
+          key: 0,
+          href: S.value,
           target: "_blank",
           rel: "noopener noreferrer",
           class: "nmorph-file-card__icon-action",
           "aria-label": `Preview ${e.name}`,
-          onClick: N
+          onClick: x
         }, [
-          i(n(p), { size: "small" }, {
-            default: m(() => [
-              i(n(oe))
+          t(i(d), {
+            size: "small",
+            color: ke
+          }, {
+            default: c(() => [
+              t(i(se))
             ]),
             _: 1
           })
-        ], 8, le)) : l("", !0)
+        ], 8, ue)) : l("", !0)
       ]),
-      g("div", se, [
-        g("span", ce, h(e.name), 1),
-        e.error && e.errorText ? (r(), t("span", me, h(e.errorText), 1)) : B.value ? (r(), t("span", de, h(B.value), 1)) : l("", !0),
-        c.value ? (r(), f(X, {
-          key: 2,
+      f("div", fe, [
+        f("div", he, [
+          f("span", ve, h(e.name), 1),
+          e.error && e.errorText ? (r(), n("span", _e, h(e.errorText), 1)) : k.value ? (r(), n("span", we, h(k.value), 1)) : l("", !0)
+        ]),
+        _.value ? (r(), b(ae, {
+          key: 0,
           class: "nmorph-file-card__audio-preview",
           src: e.previewSrc,
           name: e.name,
@@ -120,48 +121,74 @@ const ie = { class: "nmorph-file-card__icon" }, le = ["href", "aria-label"], se
           "show-icon": !1,
           "show-header": !1,
           "show-default-actions": !1,
-          onError: L
-        }, null, 8, ["src", "name"])) : l("", !0)
+          onError: I
+        }, null, 8, ["src", "name"])) : l("", !0),
+        w.value ? (r(), b(re, {
+          key: 1,
+          class: "nmorph-file-card__video-preview",
+          src: e.previewSrc,
+          name: e.name,
+          height: R.value,
+          surface: "plain",
+          embedded: "",
+          compact: "",
+          controls: !1,
+          "show-meta": !1,
+          "show-default-actions": !1,
+          onError: I
+        }, null, 8, ["src", "name", "height"])) : l("", !0)
       ]),
-      e.showExtensionBadge && u.value ? (r(), t("span", pe, h(u.value), 1)) : l("", !0),
-      $.value ? (r(), t("div", ue, [
-        V(o.$slots, "actions", {}, () => [
-          e.previewSrc && !c.value && !v.value ? (r(), t("a", {
+      e.showExtensionBadge && p.value ? (r(), n("span", ye, h(p.value), 1)) : l("", !0),
+      T.value ? (r(), n("div", ge, [
+        G(o.$slots, "actions", {}, () => [
+          e.loading ? (r(), n("span", {
             key: 0,
+            class: "nmorph-file-card__action-loader",
+            role: "status",
+            "aria-label": `Uploading ${e.name}`
+          }, [
+            t(i(d), { size: "small" }, {
+              default: c(() => [
+                t(i(ce))
+              ]),
+              _: 1
+            })
+          ], 8, Ne)) : e.previewSrc && !u.value && !y.value ? (r(), n("a", {
+            key: 1,
             href: e.previewSrc,
             target: "_blank",
             rel: "noopener noreferrer",
             class: "nmorph-file-card__action-link",
             "aria-label": `Open ${e.name}`,
-            onClick: N
+            onClick: x
           }, [
-            i(n(p), { size: "small" }, {
-              default: m(() => [
-                i(n(ne))
+            t(i(d), { size: "small" }, {
+              default: c(() => [
+                t(i(me))
               ]),
               _: 1
             })
-          ], 8, fe)) : l("", !0),
-          e.downloadHref ? (r(), t("a", {
-            key: 1,
+          ], 8, Be)) : l("", !0),
+          !e.loading && e.downloadHref ? (r(), n("a", {
+            key: 2,
             href: e.downloadHref,
             download: e.name,
             class: "nmorph-file-card__action-link",
             "aria-label": `Download ${e.name}`,
-            onClick: H
+            onClick: z
           }, [
-            i(n(p), { size: "small" }, {
-              default: m(() => [
-                i(n(te))
+            t(i(d), { size: "small" }, {
+              default: c(() => [
+                t(i(de))
               ]),
               _: 1
             })
-          ], 8, he)) : l("", !0)
+          ], 8, be)) : l("", !0)
         ])
       ])) : l("", !0)
     ], 2));
   }
 });
 export {
-  Ee as default
+  Ke as default
 };

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js

@@ -1,12 +1,12 @@
 import './NmorphTagItem.css';
-import { defineComponent as S, ref as v, computed as p, onMounted as $, onBeforeUnmount as x, watch as I, openBlock as d, createElementBlock as _, normalizeStyle as z, normalizeClass as H, createElementVNode as F, renderSlot as U, toDisplayString as G, createBlock as P, unref as k, withModifiers as K, withCtx as j, createVNode as Z, createCommentVNode as q, nextTick as J } from "vue";
-import { useModifiers as Q } from "../../../../../utils/create-modifiers.js";
-import { createCssVariables as W } from "../../../../../utils/common.js";
-import { NmorphComponentHeight as X } from "../../../../../types/common.types.js";
-import Y from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as I, ref as b, computed as m, onMounted as S, onBeforeUnmount as $, watch as z, openBlock as h, createElementBlock as _, normalizeStyle as H, normalizeClass as F, createElementVNode as U, renderSlot as G, toDisplayString as P, createBlock as K, unref as k, withModifiers as j, withCtx as Z, createVNode as q, createCommentVNode as J, nextTick as Q } from "vue";
+import { useModifiers as W } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as X } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as Y } from "../../../../../types/common.types.js";
+import ee from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                            */
-import ee from "../../../../../assets/icons/error.svg.js";
-const te = { class: "nmorph-tag-item__content" }, oe = { key: 1 }, re = "var(--nmorph-gray-color)", y = "var(--nmorph-black-color)", ne = "var(--nmorph-white-color)", pe = /* @__PURE__ */ S({
+import te from "../../../../../assets/icons/error.svg.js";
+const oe = { class: "nmorph-tag-item__content" }, re = { key: 1 }, ne = "var(--nmorph-gray-color)", y = "var(--nmorph-black-color)", le = "var(--nmorph-white-color)", de = /* @__PURE__ */ I({
   __name: "NmorphTagItem",
   props: {
     value: {},
@@ -14,25 +14,27 @@ const te = { class: "nmorph-tag-item__content" }, oe = { key: 1 }, re = "var(--n
     removable: { type: Boolean, default: !0 },
     height: { default: "basic" },
     design: { default: "nmorph" },
-    color: { default: re }
+    color: { default: ne }
   },
   emits: ["click", "close"],
-  setup(f, { emit: O }) {
-    const N = { r: 201, g: 210, b: 222 }, s = f, i = v(null), h = v(y);
-    let m = null;
-    const R = p(
-      () => Q({
-        nmorph: [X[s.height]],
-        "nmorph-tag-item": [s.design]
+  setup(g, { emit: O }) {
+    const N = { r: 201, g: 210, b: 222 }, l = g, i = b(null), u = b(y);
+    let p = null;
+    const R = m(
+      () => W({
+        nmorph: [Y[l.height]],
+        "nmorph-tag-item": [l.design]
       })
-    ), g = p(() => s.design === "common"), w = p(() => g.value ? W({
-      "--tag-item-background-color": s.color,
-      "--tag-item-content-color": h.value
-    }) : {}), C = O, V = () => {
-      C("close", s.value);
-    }, D = () => {
-      C("click", s.value);
-    }, L = (o) => {
+    ), d = m(() => l.design === "common"), w = m(
+      () => d.value ? u.value : "var(--nmorph-contrast-text-color)"
+    ), V = m(() => d.value ? X({
+      "--tag-item-background-color": l.color,
+      "--tag-item-content-color": u.value
+    }) : {}), C = O, D = () => {
+      C("close", l.value);
+    }, L = () => {
+      C("click", l.value);
+    }, T = (o) => {
       const t = o.trim().replace("#", "");
       if (![3, 4, 6, 8].includes(t.length)) return null;
       const e = t.length <= 4 ? t.split("").map((r) => `${r}${r}`).join("") : t;
@@ -41,69 +43,70 @@ const te = { class: "nmorph-tag-item__content" }, oe = { key: 1 }, re = "var(--n
         g: parseInt(e.slice(2, 4), 16),
         b: parseInt(e.slice(4, 6), 16)
       };
-    }, T = (o) => {
+    }, M = (o) => {
       const t = o.match(/^rgba?\((.+)\)$/);
       if (!t) return null;
-      const e = t[1].split("/")[0], r = e.includes(",") ? e.split(",") : e.trim().split(/\s+/), [n, a, c] = r.map((l) => Number.parseFloat(l));
-      return [n, a, c].some((l) => Number.isNaN(l)) ? null : { r: n, g: a, b: c };
-    }, M = (o, t) => {
+      const e = t[1].split("/")[0], r = e.includes(",") ? e.split(",") : e.trim().split(/\s+/), [n, a, c] = r.map((s) => Number.parseFloat(s));
+      return [n, a, c].some((s) => Number.isNaN(s)) ? null : { r: n, g: a, b: c };
+    }, x = (o, t) => {
       const e = o.trim().match(/^var\(\s*(--[A-Za-z0-9-_]+)(?:\s*,\s*(.+))?\)$/);
       if (!e) return o;
-      const [, r, n] = e, a = t.ownerDocument, c = getComputedStyle(t).getPropertyValue(r).trim(), l = getComputedStyle(a.documentElement).getPropertyValue(r).trim();
-      return c || l || n || o;
+      const [, r, n] = e, a = t.ownerDocument, c = getComputedStyle(t).getPropertyValue(r).trim(), s = getComputedStyle(a.documentElement).getPropertyValue(r).trim();
+      return c || s || n || o;
     }, A = (o, t) => {
       let e = o;
       for (let r = 0; r < 4; r += 1) {
-        const n = M(e, t);
+        const n = x(e, t);
         if (n === e) break;
         e = n;
       }
-      return L(e) || T(e) || N;
+      return T(e) || M(e) || N;
     }, B = ({ r: o, g: t, b: e }) => {
       const [r, n, a] = [o, t, e].map((c) => {
-        const l = c / 255;
-        return l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4;
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
       });
       return 0.2126 * r + 0.7152 * n + 0.0722 * a;
-    }, b = (o, t) => {
+    }, v = (o, t) => {
       const [e, r] = [o, t].sort((n, a) => a - n);
       return (e + 0.05) / (r + 0.05);
     }, E = (o) => {
-      const t = B(o), e = b(t, 1), r = b(t, 0);
-      return e > r ? ne : y;
-    }, u = async () => {
-      await J(), !(!g.value || !i.value) && (h.value = E(A(s.color, i.value)));
+      const t = B(o), e = v(t, 1), r = v(t, 0);
+      return e > r ? le : y;
+    }, f = async () => {
+      await Q(), !(!d.value || !i.value) && (u.value = E(A(l.color, i.value)));
     };
-    return $(() => {
-      u(), !(typeof MutationObserver > "u" || !i.value) && (m = new MutationObserver(() => u()), m.observe(i.value.ownerDocument.documentElement, {
+    return S(() => {
+      f(), !(typeof MutationObserver > "u" || !i.value) && (p = new MutationObserver(() => f()), p.observe(i.value.ownerDocument.documentElement, {
         attributes: !0,
         attributeFilter: ["nmorph-data-theme", "class", "style"]
       }));
-    }), x(() => {
-      m?.disconnect();
-    }), I(() => [s.color, s.design], u, { flush: "post" }), (o, t) => (d(), _("div", {
+    }), $(() => {
+      p?.disconnect();
+    }), z(() => [l.color, l.design], f, { flush: "post" }), (o, t) => (h(), _("div", {
       ref_key: "tagRef",
       ref: i,
-      class: H(R.value),
-      style: z(w.value),
-      onClick: D
+      class: F(R.value),
+      style: H(V.value),
+      onClick: L
     }, [
-      F("div", te, [
-        o.$slots.default ? U(o.$slots, "default", { key: 0 }) : (d(), _("span", oe, G(f.text), 1)),
-        s.removable ? (d(), P(k(Y), {
+      U("div", oe, [
+        o.$slots.default ? G(o.$slots, "default", { key: 0 }) : (h(), _("span", re, P(g.text), 1)),
+        l.removable ? (h(), K(k(ee), {
           key: 2,
           class: "nmorph-tag-item__close-icon",
-          onClick: K(V, ["stop"])
+          color: w.value,
+          onClick: j(D, ["stop"])
         }, {
-          default: j(() => [
-            Z(k(ee))
+          default: Z(() => [
+            q(k(te))
           ]),
           _: 1
-        })) : q("", !0)
+        }, 8, ["color"])) : J("", !0)
       ])
     ], 6));
   }
 });
 export {
-  pe as default
+  de as default
 };

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css

@@ -1 +1 @@
-.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border:0;border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--color: currentColor}.nmorph-video-preview .nmorph-video-preview__play:hover{color:var(--nmorph-accent-color)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{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-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:2px;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:var(--nmorph-text-color);text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-video-preview-width, 180px);height:var(--nmorph-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}
+.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-video-preview .nmorph-video-preview__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-video-preview-width, 100%);height:var(--nmorph-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--embedded .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__play{box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{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-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:0;background:transparent}.nmorph-video-preview .nmorph-video-preview__action-button,.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__action-button:hover,.nmorph-video-preview .nmorph-video-preview__action-link:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-button .nmorph-icon,.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-video-preview-width, 180px);height:var(--nmorph-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}.nmorph-video-preview__portal{display:contents}.nmorph-video-preview__portal .nmorph-video-preview__portal-content{--nmorph-video-preview-portal-width: min( calc(100vw - 96px) , 1080px);--nmorph-video-preview-portal-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-video-preview-portal-width);height:var(--nmorph-video-preview-portal-height);transform:translate(-50%,-50%)}.nmorph-video-preview__portal .nmorph-video-preview__portal-media{display:block;width:100%;max-width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--nmorph-black-color);border-radius:var(--default-border-radius)}