@nmorph/nmorph-ui-kit 2.2.43 → 2.2.44

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue.js

@@ -0,0 +1,371 @@
+import './NmorphEmojiPicker.css';
+import { defineComponent as Le, ref as C, computed as i, watch as Q, openBlock as c, createElementBlock as u, normalizeStyle as xe, normalizeClass as ae, createElementVNode as y, Fragment as z, renderList as B, toDisplayString as E, createVNode as _, unref as k, withCtx as q, withDirectives as Ce, vModelText as Ee, createCommentVNode as J, nextTick as we } from "vue";
+import { useModifiers as Se } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Ae } from "../../../utils/common.js";
+import D from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import Ke from "../../../assets/icons/search.svg.js";
+import Ne from "../../../assets/icons/chevron-up.svg.js";
+import Me from "../../../assets/icons/smile.svg.js";
+import Ie from "../../../assets/icons/chevron-down.svg.js";
+const Oe = ["lang"], ze = ["aria-label"], Be = { class: "nmorph-emoji-picker__quick-list" }, qe = ["aria-label", "title", "disabled", "onClick"], De = ["aria-label", "title", "disabled"], Ve = {
+  key: 1,
+  class: "nmorph-emoji-picker__panel"
+}, Te = { class: "nmorph-emoji-picker__toolbar" }, $e = ["aria-label"], Fe = ["placeholder", "aria-label", "disabled"], Re = ["aria-label", "title", "disabled"], He = ["aria-label"], Pe = ["aria-selected", "disabled", "onClick"], Ue = ["aria-label"], Qe = {
+  key: 0,
+  class: "nmorph-emoji-picker__section-title"
+}, Je = { class: "nmorph-emoji-picker__grid" }, We = ["aria-label", "title", "disabled", "onFocus", "onClick"], Xe = { class: "nmorph-emoji-picker__emoji-symbol" }, Ye = {
+  key: 1,
+  class: "nmorph-emoji-picker__empty"
+}, st = /* @__PURE__ */ Le({
+  __name: "NmorphEmojiPicker",
+  props: {
+    language: { default: "en" },
+    dataSource: { default: () => [] },
+    i18n: { default: () => ({}) },
+    quickList: { default: () => [] },
+    initialExpanded: { type: Boolean, default: !0 },
+    width: { default: "300px" },
+    height: { default: "260px" },
+    columns: { default: 8 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "expand", "collapse"],
+  setup(ne, { emit: le }) {
+    const l = ne, V = le, T = C(""), L = C(l.initialExpanded), h = C(""), w = C(0), W = C(null), se = {
+      searchPlaceholder: "Search emoji",
+      searchLabel: "Search emoji",
+      quickLabel: "Frequent emoji",
+      expandLabel: "Open emoji picker",
+      collapseLabel: "Close emoji picker",
+      noResults: "No emoji found",
+      categoryLabel: "Emoji categories",
+      resultsLabel: "Emoji results"
+    }, g = (e) => !!e && typeof e == "object" && !Array.isArray(e), X = (e) => e.trim().toLocaleLowerCase(l.language || void 0), f = (e, t) => {
+      for (const o of t) {
+        const r = e[o];
+        if (typeof r == "string" && r.trim()) return r.trim();
+        if (typeof r == "number") return String(r);
+      }
+      return "";
+    }, S = (e) => Array.isArray(e) ? e.flatMap(S) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : g(e) ? Object.values(e).flatMap(S) : [], A = (e, t, o) => {
+      for (const r of t) {
+        const n = e[r], a = typeof n == "number" ? n : Number(n);
+        if (Number.isFinite(a)) return a;
+      }
+      return o;
+    }, Y = (e, t) => {
+      for (const o of t) {
+        const r = e[o];
+        if (Array.isArray(r)) return r;
+      }
+    }, K = (e) => {
+      if (typeof e == "string") return e.trim();
+      if (!g(e)) return "";
+      const t = f(e, ["emoji", "native", "char", "unicode", "value"]);
+      if (t) return t;
+      const o = Y(e, ["skinToneVariants", "skins", "variants"])?.[0];
+      return K(o);
+    }, ie = (e) => !!K(e), ce = (e) => Array.isArray(e) ? e.map((t) => {
+      const o = K(t);
+      if (!o) return null;
+      if (typeof t == "string") return { emoji: o };
+      const r = g(t) ? t : {};
+      return {
+        emoji: o,
+        annotation: f(r, ["annotation", "label", "name", "description"]),
+        tags: S(r.tags || r.keywords || r.aliases || r.shortcodes),
+        tone: f(r, ["tone", "skinTone", "skin_tone"])
+      };
+    }).filter((t) => !!t) : [], ue = (e, t, o) => {
+      if (!g(e))
+        return {
+          key: t,
+          label: t,
+          sort: o
+        };
+      const r = f(e, ["group", "category", "groupName", "categoryName"]) || t, n = f(e, ["groupLabel", "categoryLabel"]) || r, a = A(e, ["groupOrder", "categoryOrder"], Number(r));
+      return {
+        key: r,
+        label: n,
+        sort: Number.isFinite(a) ? a : o
+      };
+    }, de = (e, t, o, r, n) => {
+      const a = K(e);
+      if (!a) return null;
+      const s = g(e) ? e : {}, d = ue(s, t, r), m = f(s, ["annotation", "label", "name", "description"]) || a, b = S(s.tags || s.keywords || s.aliases || s.shortcodes), M = A(s, ["order", "sortOrder", "sort_order", "index"], n), U = s.skinToneVariants || s.skins || s.variants, I = ce(U).filter((O) => O.emoji !== a), x = d.key || t, re = d.label || o || x, je = X(
+        [a, m, re, ...b, ...I.map((O) => O.annotation || O.emoji)].filter(Boolean).join(" ")
+      );
+      return {
+        key: `${x}-${M}-${a}`,
+        emoji: a,
+        annotation: m,
+        tags: b,
+        groupKey: x,
+        groupLabel: re,
+        groupSort: d.sort,
+        order: M,
+        skinToneVariants: I,
+        searchText: je
+      };
+    }, $ = (e) => {
+      if (!(!g(e) || ie(e)))
+        return Y(e, ["emojis", "items", "children", "data"]);
+    }, pe = (e) => {
+      const t = [], o = (n, a = "emoji", s = a, d = 0, m = t.length) => {
+        const b = de(
+          n,
+          a,
+          s,
+          d,
+          m
+        );
+        b && t.push(b);
+      }, r = (n, a, s) => {
+        const d = $(n);
+        if (!d) {
+          o(n, "emoji", "emoji", 0, s);
+          return;
+        }
+        const m = g(n) ? n : {}, b = f(m, ["group", "category", "name", "label"]) || a, M = f(m, ["label", "name", "title", "groupLabel", "categoryLabel"]) || b, U = A(m, ["order", "groupOrder", "categoryOrder"], s);
+        d.forEach((I, x) => o(I, b, M, U, x));
+      };
+      if (Array.isArray(e))
+        e.forEach((n, a) => {
+          $(n) ? r(n, `group-${a + 1}`, a) : o(n, "emoji", "emoji", 0, a);
+        });
+      else if (g(e)) {
+        const n = $(e);
+        if (n) {
+          const a = f(e, ["group", "category", "name", "label"]) || "emoji", s = f(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || a, d = A(e, ["order", "groupOrder", "categoryOrder"], 0);
+          n.forEach((m, b) => o(m, a, s, d, b));
+        } else
+          Object.entries(e).forEach(([a, s], d) => {
+            Array.isArray(s) ? s.forEach((m, b) => o(m, a, a, d, b)) : r(s, a, d);
+          });
+      }
+      return t.sort((n, a) => n.groupSort !== a.groupSort ? n.groupSort - a.groupSort : n.order - a.order);
+    }, p = i(() => ({
+      ...se,
+      ...l.i18n
+    })), Z = i(() => ({
+      ...l.i18n?.categories || {},
+      ...l.i18n?.categoryLabels || {}
+    })), v = i(() => pe(l.dataSource)), me = i(() => {
+      const e = /* @__PURE__ */ new Map();
+      return v.value.forEach((t) => e.set(t.emoji, t.annotation || t.emoji)), e;
+    }), F = i(() => Array.from(new Set(l.quickList.map((e) => e.trim()).filter(Boolean)))), G = i(() => !L.value && F.value.length > 0), j = i(() => X(T.value)), N = i(() => {
+      const e = /* @__PURE__ */ new Map();
+      return v.value.forEach((t) => {
+        e.has(t.groupKey) || e.set(t.groupKey, {
+          key: t.groupKey,
+          label: Z.value[t.groupKey] || t.groupLabel,
+          sort: t.groupSort
+        });
+      }), Array.from(e.values()).sort((t, o) => t.sort - o.sort);
+    });
+    Q(
+      N,
+      (e) => {
+        if (!e.length) {
+          h.value = "";
+          return;
+        }
+        e.some((t) => t.key === h.value) || (h.value = e[0].key);
+      },
+      { immediate: !0 }
+    ), Q(
+      () => l.initialExpanded,
+      (e) => {
+        L.value = e;
+      }
+    ), Q([j, h], () => {
+      w.value = 0;
+    });
+    const be = i(() => j.value ? v.value.filter((e) => e.searchText.includes(j.value)) : h.value ? v.value.filter((e) => e.groupKey === h.value) : v.value), R = i(() => {
+      const e = /* @__PURE__ */ new Map();
+      return be.value.forEach((t) => {
+        const o = Z.value[t.groupKey] || t.groupLabel, r = e.get(t.groupKey) || {
+          key: t.groupKey,
+          label: o,
+          items: []
+        };
+        r.items.push(t), e.set(t.groupKey, r);
+      }), Array.from(e.values());
+    }), H = i(() => R.value.flatMap((e) => e.items)), he = i(
+      () => N.value.find((e) => e.key === h.value)?.label || p.value.resultsLabel
+    ), fe = i(() => j.value ? p.value.resultsLabel : he.value), ee = i(() => !l.initialExpanded && F.value.length > 0), ye = i(
+      () => Se({
+        "nmorph-emoji-picker": [
+          G.value && "compact",
+          L.value && "expanded",
+          l.disabled && "disabled",
+          !v.value.length && "empty"
+        ]
+      })
+    ), ge = i(() => ({
+      ...Ae({
+        "--nmorph-emoji-picker-width": l.width,
+        "--nmorph-emoji-picker-height": l.height
+      }),
+      "--nmorph-emoji-picker-columns": Math.max(1, Math.floor(l.columns))
+    })), te = (e) => me.value.get(e) || e, oe = (e) => {
+      l.disabled || V("select", e);
+    }, _e = () => {
+      l.disabled || (L.value = !0, V("expand"));
+    }, ke = () => {
+      l.disabled || !ee.value || (L.value = !1, V("collapse"));
+    }, P = async (e) => {
+      const t = W.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
+      if (!t?.length) return;
+      const o = Math.min(Math.max(e, 0), t.length - 1);
+      w.value = o, await we(), t[o]?.focus();
+    }, ve = (e) => {
+      if (l.disabled || !H.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+      const t = Math.max(1, Math.floor(l.columns)), o = H.value.length - 1, r = {
+        ArrowRight: 1,
+        ArrowLeft: -1,
+        ArrowDown: t,
+        ArrowUp: -t
+      };
+      e.key in r && (e.preventDefault(), P(w.value + r[e.key])), e.key === "Home" && (e.preventDefault(), P(0)), e.key === "End" && (e.preventDefault(), P(o));
+    };
+    return (e, t) => (c(), u("div", {
+      class: ae(ye.value),
+      style: xe(ge.value),
+      lang: l.language
+    }, [
+      G.value ? (c(), u("div", {
+        key: 0,
+        class: "nmorph-emoji-picker__compact",
+        role: "group",
+        "aria-label": p.value.quickLabel
+      }, [
+        y("div", Be, [
+          (c(!0), u(z, null, B(F.value, (o) => (c(), u("button", {
+            key: o,
+            type: "button",
+            class: "nmorph-emoji-picker__quick-button",
+            "aria-label": te(o),
+            title: te(o),
+            disabled: l.disabled,
+            onClick: (r) => oe(o)
+          }, E(o), 9, qe))), 128))
+        ]),
+        y("button", {
+          type: "button",
+          class: "nmorph-emoji-picker__expand-button",
+          "aria-label": p.value.expandLabel,
+          title: p.value.expandLabel,
+          disabled: l.disabled,
+          onClick: _e
+        }, [
+          _(k(D), { size: "small" }, {
+            default: q(() => [
+              _(k(Ie))
+            ]),
+            _: 1
+          })
+        ], 8, De)
+      ], 8, ze)) : (c(), u("div", Ve, [
+        y("div", Te, [
+          y("label", {
+            class: "nmorph-emoji-picker__search",
+            "aria-label": p.value.searchLabel
+          }, [
+            _(k(D), {
+              size: "small",
+              class: "nmorph-emoji-picker__search-icon"
+            }, {
+              default: q(() => [
+                _(k(Ke))
+              ]),
+              _: 1
+            }),
+            Ce(y("input", {
+              "onUpdate:modelValue": t[0] || (t[0] = (o) => T.value = o),
+              class: "nmorph-emoji-picker__search-input",
+              type: "search",
+              placeholder: p.value.searchPlaceholder,
+              "aria-label": p.value.searchLabel,
+              disabled: l.disabled
+            }, null, 8, Fe), [
+              [Ee, T.value]
+            ])
+          ], 8, $e),
+          ee.value ? (c(), u("button", {
+            key: 0,
+            type: "button",
+            class: "nmorph-emoji-picker__collapse-button",
+            "aria-label": p.value.collapseLabel,
+            title: p.value.collapseLabel,
+            disabled: l.disabled,
+            onClick: ke
+          }, [
+            _(k(D), { size: "small" }, {
+              default: q(() => [
+                _(k(Ne))
+              ]),
+              _: 1
+            })
+          ], 8, Re)) : J("", !0)
+        ]),
+        N.value.length && !j.value ? (c(), u("div", {
+          key: 0,
+          class: "nmorph-emoji-picker__categories",
+          role: "tablist",
+          "aria-label": p.value.categoryLabel
+        }, [
+          (c(!0), u(z, null, B(N.value, (o) => (c(), u("button", {
+            key: o.key,
+            type: "button",
+            class: ae(["nmorph-emoji-picker__category", { "nmorph-emoji-picker__category--active": o.key === h.value }]),
+            role: "tab",
+            "aria-selected": o.key === h.value,
+            disabled: l.disabled,
+            onClick: (r) => h.value = o.key
+          }, E(o.label), 11, Pe))), 128))
+        ], 8, He)) : J("", !0),
+        y("div", {
+          ref_key: "gridRef",
+          ref: W,
+          class: "nmorph-emoji-picker__body",
+          "aria-label": fe.value,
+          onKeydown: ve
+        }, [
+          R.value.length ? (c(!0), u(z, { key: 0 }, B(R.value, (o) => (c(), u("section", {
+            key: o.key,
+            class: "nmorph-emoji-picker__section"
+          }, [
+            j.value ? (c(), u("div", Qe, E(o.label), 1)) : J("", !0),
+            y("div", Je, [
+              (c(!0), u(z, null, B(o.items, (r) => (c(), u("button", {
+                key: r.key,
+                type: "button",
+                class: "nmorph-emoji-picker__emoji",
+                "aria-label": r.annotation,
+                title: r.annotation,
+                disabled: l.disabled,
+                onFocus: (n) => w.value = H.value.findIndex((a) => a.key === r.key),
+                onClick: (n) => oe(r.emoji)
+              }, [
+                y("span", Xe, E(r.emoji), 1)
+              ], 40, We))), 128))
+            ])
+          ]))), 128)) : (c(), u("div", Ye, [
+            _(k(D), null, {
+              default: q(() => [
+                _(k(Me))
+              ]),
+              _: 1
+            }),
+            y("span", null, E(p.value.noResults), 1)
+          ]))
+        ], 40, Ue)
+      ]))
+    ], 14, Oe));
+  }
+});
+export {
+  st as default
+};

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue3.js

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

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

@@ -0,0 +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)}

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

@@ -0,0 +1,124 @@
+import './NmorphFileCard.css';
+import { defineComponent as M, useSlots as $, computed as t, openBlock as r, createElementBlock as a, normalizeClass as F, createElementVNode as _, createBlock as v, unref as n, withCtx as c, createVNode as l, resolveDynamicComponent as R, toDisplayString as d, createCommentVNode as s, renderSlot as V } from "vue";
+import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { getFileExtension as E, getPlainFileType as W, getTypeCandidates as K, isKnownFileType as m } from "../../../utils/file-types.js";
+import { NmorphImageResolution as O, NmorphAudioResolution as j, NmorphVideoResolution as G, NmorphArchiveResolution as P, NmorphDocResolution as q } from "../../form/nmorph-file-upload/types.js";
+import J from "../../../assets/icons/image.svg.js";
+import Q from "../../../assets/icons/video.svg.js";
+import U from "../../../assets/icons/archive.svg.js";
+import g from "../../../assets/icons/doc.svg.js";
+import p from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import X from "../../../assets/icons/audio.svg.js";
+import Y from "../../../assets/icons/loading.svg.js";
+import Z from "../../../assets/icons/open.svg.js";
+import ee from "../../../assets/icons/download.svg.js";
+const oe = { class: "nmorph-file-card__icon" }, re = { class: "nmorph-file-card__body" }, te = { class: "nmorph-file-card__name" }, ae = {
+  key: 0,
+  class: "nmorph-file-card__error"
+}, ne = {
+  key: 1,
+  class: "nmorph-file-card__meta"
+}, ie = {
+  key: 0,
+  class: "nmorph-file-card__badge"
+}, le = {
+  key: 1,
+  class: "nmorph-file-card__actions"
+}, se = ["href", "aria-label"], me = ["href", "download", "aria-label"], Te = /* @__PURE__ */ M({
+  __name: "NmorphFileCard",
+  props: {
+    name: {},
+    extension: { default: "" },
+    mimeType: { default: "" },
+    size: { default: void 0 },
+    previewSrc: { default: "" },
+    downloadHref: { default: "" },
+    compact: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorText: { default: "" },
+    showDefaultActions: { type: Boolean, default: !0 }
+  },
+  emits: ["open", "download", "error"],
+  setup(k, { emit: B }) {
+    const e = k, y = B, T = $(), f = t(() => (e.extension || E(e.name) || W(e.mimeType)).toLowerCase()), i = t(() => K(e.mimeType, e.name)), C = t(() => e.mimeType.toLowerCase().startsWith("image/") || i.value.some((o) => m(o, O)) ? J : e.mimeType.toLowerCase().startsWith("audio/") || i.value.some((o) => m(o, j)) ? X : e.mimeType.toLowerCase().startsWith("video/") || i.value.some((o) => m(o, G)) ? Q : i.value.some((o) => m(o, P)) ? U : i.value.some((o) => m(o, q)) ? g : g), x = (o) => {
+      if (o === void 0 || Number.isNaN(o) || o < 0) return "";
+      if (o === 0) return "0 B";
+      const u = ["B", "KB", "MB", "GB", "TB"], h = Math.min(Math.floor(Math.log(o) / Math.log(1024)), u.length - 1), N = o / 1024 ** h, L = N >= 10 || h === 0 ? 0 : 1;
+      return `${N.toFixed(L)} ${u[h]}`;
+    }, I = t(() => x(e.size)), b = t(() => f.value || e.mimeType), w = t(() => [b.value, I.value].filter(Boolean).join(" · ")), S = t(
+      () => !!T.actions || e.showDefaultActions && (e.previewSrc || e.downloadHref)
+    ), D = t(
+      () => z({
+        "nmorph-file-card": [e.compact && "compact", e.loading && "loading", e.error && "error"]
+      })
+    ), A = () => y("open"), H = () => y("download");
+    return (o, u) => (r(), a("div", {
+      class: F(D.value)
+    }, [
+      _("div", oe, [
+        e.loading ? (r(), v(n(p), {
+          key: 0,
+          size: "medium"
+        }, {
+          default: c(() => [
+            l(n(Y))
+          ]),
+          _: 1
+        })) : (r(), v(n(p), {
+          key: 1,
+          size: "medium"
+        }, {
+          default: c(() => [
+            (r(), v(R(C.value)))
+          ]),
+          _: 1
+        }))
+      ]),
+      _("div", re, [
+        _("span", te, d(e.name), 1),
+        e.error && e.errorText ? (r(), a("span", ae, d(e.errorText), 1)) : w.value ? (r(), a("span", ne, d(w.value), 1)) : s("", !0)
+      ]),
+      f.value ? (r(), a("span", ie, d(f.value), 1)) : s("", !0),
+      S.value ? (r(), a("div", le, [
+        V(o.$slots, "actions", {}, () => [
+          e.previewSrc ? (r(), a("a", {
+            key: 0,
+            href: e.previewSrc,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "nmorph-file-card__action-link",
+            "aria-label": `Open ${e.name}`,
+            onClick: A
+          }, [
+            l(n(p), { size: "small" }, {
+              default: c(() => [
+                l(n(Z))
+              ]),
+              _: 1
+            })
+          ], 8, se)) : s("", !0),
+          e.downloadHref ? (r(), a("a", {
+            key: 1,
+            href: e.downloadHref,
+            download: e.name,
+            class: "nmorph-file-card__action-link",
+            "aria-label": `Download ${e.name}`,
+            onClick: H
+          }, [
+            l(n(p), { size: "small" }, {
+              default: c(() => [
+                l(n(ee))
+              ]),
+              _: 1
+            })
+          ], 8, me)) : s("", !0)
+        ])
+      ])) : s("", !0)
+    ], 2));
+  }
+});
+export {
+  Te as default
+};

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

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

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js

@@ -6,10 +6,10 @@ import n from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import z from "../nmorph-avatar/NmorphAvatar.vue.js";
 /* empty css                                 */
 import M from "../../../assets/icons/mic.svg.js";
-import V from "../../../assets/icons/video.svg.js";
-import C from "../../../assets/icons/share.svg.js";
-import I from "../../../assets/icons/pin.svg.js";
-import w from "../../../assets/icons/loader.svg.js";
+import V from "../../../assets/icons/share.svg.js";
+import C from "../../../assets/icons/pin.svg.js";
+import I from "../../../assets/icons/loader.svg.js";
+import w from "../../../assets/icons/video.svg.js";
 const T = ["src", "muted", "autoplay", "playsinline"], D = {
   key: 0,
   class: "nmorph-media-tile__fallback"
@@ -105,7 +105,7 @@ const T = ["src", "muted", "autoplay", "playsinline"], D = {
           size: "large"
         }, {
           default: s(() => [
-            r(t(w))
+            r(t(I))
           ]),
           _: 1
         })) : e.avatarSrc ? (a(), u(t(z), {
@@ -129,7 +129,7 @@ const T = ["src", "muted", "autoplay", "playsinline"], D = {
         e.videoOff ? (a(), o("span", U, [
           r(t(n), { size: "small" }, {
             default: s(() => [
-              r(t(V))
+              r(t(w))
             ]),
             _: 1
           })
@@ -137,7 +137,7 @@ const T = ["src", "muted", "autoplay", "playsinline"], D = {
         e.screenSharing ? (a(), o("span", q, [
           r(t(n), { size: "small" }, {
             default: s(() => [
-              r(t(C))
+              r(t(V))
             ]),
             _: 1
           })
@@ -145,7 +145,7 @@ const T = ["src", "muted", "autoplay", "playsinline"], D = {
         e.pinned ? (a(), o("span", A, [
           r(t(n), { size: "small" }, {
             default: s(() => [
-              r(t(I))
+              r(t(C))
             ]),
             _: 1
           })

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

@@ -0,0 +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__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__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--error{outline:1px solid var(--nmorph-error-color)}