@nmorph/nmorph-ui-kit 2.2.52 → 2.2.54

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

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

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css

@@ -1 +1 @@
-.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;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);transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery.nmorph-media-gallery--video-playing .nmorph-media-gallery__play{opacity:.72}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}
+.nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-media-gallery-trigger-height)}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);aspect-ratio:16/9}.nmorph-media-gallery__trigger--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open .nmorph-image,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;transition:filter var(--transition-03) ease-in-out}.nmorph-media-gallery__trigger-open .nmorph-image img,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;object-fit:cover}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{filter:brightness(.86)}.nmorph-media-gallery__trigger-name,.nmorph-media-gallery__trigger-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery__trigger-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery__trigger-item--video .nmorph-media-gallery__trigger-name{max-width:calc(100% - 118px)}.nmorph-media-gallery__trigger-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery__trigger-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01)}.nmorph-media-gallery__trigger-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;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-media-gallery__trigger-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery__trigger-play{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);pointer-events:none}.nmorph-media-gallery__trigger-play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;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);transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery.nmorph-media-gallery--video-playing .nmorph-media-gallery__play{opacity:.72}.nmorph-media-gallery .nmorph-media-gallery__file-name,.nmorph-media-gallery .nmorph-media-gallery__file-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery .nmorph-media-gallery__file-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery.nmorph-media-gallery--video .nmorph-media-gallery__file-name{max-width:calc(100% - 92px)}.nmorph-media-gallery .nmorph-media-gallery__file-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery .nmorph-media-gallery__file-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01);pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;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-media-gallery .nmorph-media-gallery__file-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}