@nmorph/nmorph-ui-kit 2.2.55 → 2.2.56

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

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

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

@@ -1 +1 @@
-.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}
+.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__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}