@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

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

@@ -1,15 +1,15 @@
 import './NmorphEmojiPicker.css';
-import { defineComponent as de, ref as L, computed as l, watch as z, nextTick as fe } from "vue";
+import { defineComponent as me, ref as v, computed as l, watch as D, nextTick as fe } from "vue";
 import { useModifiers as ge } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as ye } from "../../../utils/common.js";
-import he from "../../form/nmorph-text-input/NmorphTextInput.vue.js";
-import be from "../../basic/nmorph-scroll/NmorphScroll.vue.js";
-import je from "../../../assets/icons/smile.svg.js";
-import ke from "../../../assets/icons/search.svg.js";
-import Se from "../../../assets/icons/burger.svg.js";
+import { createCssVariables as ye, createCssSizeVariables as he } from "../../../utils/common.js";
+import be from "../../form/nmorph-text-input/NmorphTextInput.vue.js";
+import je from "../../basic/nmorph-scroll/NmorphScroll.vue.js";
+import ke from "../../../assets/icons/smile.svg.js";
+import Se from "../../../assets/icons/search.svg.js";
+import ve from "../../../assets/icons/burger.svg.js";
 import Le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import xe from "../../form/nmorph-checkbox/NmorphCheckbox.vue.js";
-const _e = /* @__PURE__ */ de({
+const Me = /* @__PURE__ */ me({
   __name: "NmorphEmojiPicker",
   props: {
     language: { type: String, required: !1, default: "en" },
@@ -20,13 +20,19 @@ const _e = /* @__PURE__ */ de({
     width: { type: [Number, String], required: !1, default: "300px" },
     height: { type: [Number, String], required: !1, default: "260px" },
     columns: { type: Number, required: !1, default: 8 },
+    cellSize: { type: [Number, String], required: !1, default: void 0 },
+    toggleSize: { type: [Number, String], required: !1, default: void 0 },
+    scrollbarSize: { type: [Number, String], required: !1, default: void 0 },
+    hoverBackground: { type: String, required: !1, default: void 0 },
+    activeBackground: { type: String, required: !1, default: void 0 },
+    focusRing: { type: String, required: !1, default: void 0 },
     disabled: { type: Boolean, required: !1, default: !1 },
     hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["select", "expand", "collapse"],
   setup(oe, { expose: ne, emit: ae }) {
     ne();
-    const i = oe, x = ae, H = L(""), y = L(i.initialExpanded), f = L(""), N = L(0), V = L(null), F = {
+    const a = oe, L = ae, V = v(""), y = v(a.initialExpanded), f = v(""), x = v(0), H = v(null), R = {
       searchPlaceholder: "Search emoji",
       searchLabel: "Search emoji",
       quickLabel: "Frequent emoji",
@@ -35,131 +41,131 @@ const _e = /* @__PURE__ */ de({
       noResults: "No emoji found",
       categoryLabel: "Emoji categories",
       resultsLabel: "Emoji results"
-    }, d = (e) => !!e && typeof e == "object" && !Array.isArray(e), q = (e) => e.trim().toLocaleLowerCase(i.language || void 0), m = (e, r) => {
+    }, m = (e) => !!e && typeof e == "object" && !Array.isArray(e), I = (e) => e.trim().toLocaleLowerCase(a.language || void 0), d = (e, r) => {
       for (const n of r) {
         const t = e[n];
         if (typeof t == "string" && t.trim()) return t.trim();
         if (typeof t == "number") return String(t);
       }
       return "";
-    }, h = (e) => Array.isArray(e) ? e.flatMap(h) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : d(e) ? Object.values(e).flatMap(h) : [], b = (e, r, n) => {
+    }, h = (e) => Array.isArray(e) ? e.flatMap(h) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : m(e) ? Object.values(e).flatMap(h) : [], b = (e, r, n) => {
       for (const t of r) {
-        const a = e[t], o = typeof a == "number" ? a : Number(a);
+        const i = e[t], o = typeof i == "number" ? i : Number(i);
         if (Number.isFinite(o)) return o;
       }
       return n;
-    }, K = (e, r) => {
+    }, B = (e, r) => {
       for (const n of r) {
         const t = e[n];
         if (Array.isArray(t)) return t;
       }
     }, j = (e) => {
       if (typeof e == "string") return e.trim();
-      if (!d(e)) return "";
-      const r = m(e, ["emoji", "native", "char", "unicode", "value"]);
+      if (!m(e)) return "";
+      const r = d(e, ["emoji", "native", "char", "unicode", "value"]);
       if (r) return r;
-      const n = K(e, ["skinToneVariants", "skins", "variants"])?.[0];
+      const n = B(e, ["skinToneVariants", "skins", "variants"])?.[0];
       return j(n);
-    }, R = (e) => !!j(e), $ = (e) => Array.isArray(e) ? e.map((r) => {
+    }, F = (e) => !!j(e), $ = (e) => Array.isArray(e) ? e.map((r) => {
       const n = j(r);
       if (!n) return null;
       if (typeof r == "string") return { emoji: n };
-      const t = d(r) ? r : {};
+      const t = m(r) ? r : {};
       return {
         emoji: n,
-        annotation: m(t, ["annotation", "label", "name", "description"]),
+        annotation: d(t, ["annotation", "label", "name", "description"]),
         tags: h(t.tags || t.keywords || t.aliases || t.shortcodes),
-        tone: m(t, ["tone", "skinTone", "skin_tone"])
+        tone: d(t, ["tone", "skinTone", "skin_tone"])
       };
     }).filter((r) => !!r) : [], P = (e, r, n) => {
-      if (!d(e))
+      if (!m(e))
         return {
           key: r,
           label: r,
           sort: n
         };
-      const t = m(e, ["group", "category", "groupName", "categoryName"]) || r, a = m(e, ["groupLabel", "categoryLabel"]) || t, o = b(e, ["groupOrder", "categoryOrder"], Number(t));
+      const t = d(e, ["group", "category", "groupName", "categoryName"]) || r, i = d(e, ["groupLabel", "categoryLabel"]) || t, o = b(e, ["groupOrder", "categoryOrder"], Number(t));
       return {
         key: t,
-        label: a,
+        label: i,
         sort: Number.isFinite(o) ? o : n
       };
-    }, Q = (e, r, n, t, a) => {
+    }, Q = (e, r, n, t, i) => {
       const o = j(e);
       if (!o) return null;
-      const s = d(e) ? e : {}, c = P(s, r, t), u = m(s, ["annotation", "label", "name", "description"]) || o, p = h(s.tags || s.keywords || s.aliases || s.shortcodes), A = b(s, ["order", "sortOrder", "sort_order", "index"], a), D = s.skinToneVariants || s.skins || s.variants, v = $(D).filter((I) => I.emoji !== o), S = c.key || r, te = c.label || n || S, me = q(
-        [o, u, te, ...p, ...v.map((I) => I.annotation || I.emoji)].filter(Boolean).join(" ")
+      const s = m(e) ? e : {}, c = P(s, r, t), u = d(s, ["annotation", "label", "name", "description"]) || o, p = h(s.tags || s.keywords || s.aliases || s.shortcodes), w = b(s, ["order", "sortOrder", "sort_order", "index"], i), T = s.skinToneVariants || s.skins || s.variants, q = $(T).filter((A) => A.emoji !== o), S = c.key || r, te = c.label || n || S, de = I(
+        [o, u, te, ...p, ...q.map((A) => A.annotation || A.emoji)].filter(Boolean).join(" ")
       );
       return {
-        key: `${S}-${A}-${o}`,
+        key: `${S}-${w}-${o}`,
         emoji: o,
         annotation: u,
         tags: p,
         groupKey: S,
         groupLabel: te,
         groupSort: c.sort,
-        order: A,
-        skinToneVariants: v,
-        searchText: me
+        order: w,
+        skinToneVariants: q,
+        searchText: de
       };
-    }, E = (e) => {
-      if (!(!d(e) || R(e)))
-        return K(e, ["emojis", "items", "children", "data"]);
+    }, N = (e) => {
+      if (!(!m(e) || F(e)))
+        return B(e, ["emojis", "items", "children", "data"]);
     }, U = (e) => {
-      const r = [], n = (a, o = "emoji", s = o, c = 0, u = r.length) => {
+      const r = [], n = (i, o = "emoji", s = o, c = 0, u = r.length) => {
         const p = Q(
-          a,
+          i,
           o,
           s,
           c,
           u
         );
         p && r.push(p);
-      }, t = (a, o, s) => {
-        const c = E(a);
+      }, t = (i, o, s) => {
+        const c = N(i);
         if (!c) {
-          n(a, "emoji", "emoji", 0, s);
+          n(i, "emoji", "emoji", 0, s);
           return;
         }
-        const u = d(a) ? a : {}, p = m(u, ["group", "category", "name", "label"]) || o, A = m(u, ["label", "name", "title", "groupLabel", "categoryLabel"]) || p, D = b(u, ["order", "groupOrder", "categoryOrder"], s);
-        c.forEach((v, S) => n(v, p, A, D, S));
+        const u = m(i) ? i : {}, p = d(u, ["group", "category", "name", "label"]) || o, w = d(u, ["label", "name", "title", "groupLabel", "categoryLabel"]) || p, T = b(u, ["order", "groupOrder", "categoryOrder"], s);
+        c.forEach((q, S) => n(q, p, w, T, S));
       };
       if (Array.isArray(e))
-        e.forEach((a, o) => {
-          E(a) ? t(a, `group-${o + 1}`, o) : n(a, "emoji", "emoji", 0, o);
+        e.forEach((i, o) => {
+          N(i) ? t(i, `group-${o + 1}`, o) : n(i, "emoji", "emoji", 0, o);
         });
-      else if (d(e)) {
-        const a = E(e);
-        if (a) {
-          const o = m(e, ["group", "category", "name", "label"]) || "emoji", s = m(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || o, c = b(e, ["order", "groupOrder", "categoryOrder"], 0);
-          a.forEach((u, p) => n(u, o, s, c, p));
+      else if (m(e)) {
+        const i = N(e);
+        if (i) {
+          const o = d(e, ["group", "category", "name", "label"]) || "emoji", s = d(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || o, c = b(e, ["order", "groupOrder", "categoryOrder"], 0);
+          i.forEach((u, p) => n(u, o, s, c, p));
         } else
           Object.entries(e).forEach(([o, s], c) => {
             Array.isArray(s) ? s.forEach((u, p) => n(u, o, o, c, p)) : t(s, o, c);
           });
       }
-      return r.sort((a, o) => a.groupSort !== o.groupSort ? a.groupSort - o.groupSort : a.order - o.order);
-    }, O = l(() => ({
-      ...F,
-      ...i.i18n
-    })), C = l(() => ({
-      ...i.i18n?.categories || {},
-      ...i.i18n?.categoryLabels || {}
-    })), g = l(() => U(i.dataSource)), J = l(() => {
+      return r.sort((i, o) => i.groupSort !== o.groupSort ? i.groupSort - o.groupSort : i.order - o.order);
+    }, C = l(() => ({
+      ...R,
+      ...a.i18n
+    })), K = l(() => ({
+      ...a.i18n?.categories || {},
+      ...a.i18n?.categoryLabels || {}
+    })), g = l(() => U(a.dataSource)), J = l(() => {
       const e = /* @__PURE__ */ new Map();
       return g.value.forEach((r) => e.set(r.emoji, r.annotation || r.emoji)), e;
-    }), M = l(() => Array.from(new Set(i.quickList.map((e) => e.trim()).filter(Boolean)))), W = l(() => !y.value && M.value.length > 0), k = l(() => q(H.value)), _ = l(() => {
+    }), O = l(() => Array.from(new Set(a.quickList.map((e) => e.trim()).filter(Boolean)))), W = l(() => !y.value && O.value.length > 0), k = l(() => I(V.value)), z = l(() => {
       const e = /* @__PURE__ */ new Map();
       return g.value.forEach((r) => {
         e.has(r.groupKey) || e.set(r.groupKey, {
           key: r.groupKey,
-          label: C.value[r.groupKey] || r.groupLabel,
+          label: K.value[r.groupKey] || r.groupLabel,
           sort: r.groupSort
         });
       }), Array.from(e.values()).sort((r, n) => r.sort - n.sort);
     });
-    z(
-      _,
+    D(
+      z,
       (e) => {
         if (!e.length) {
           f.value = "";
@@ -168,87 +174,95 @@ const _e = /* @__PURE__ */ de({
         e.some((r) => r.key === f.value) || (f.value = e[0].key);
       },
       { immediate: !0 }
-    ), z(
-      () => i.initialExpanded,
+    ), D(
+      () => a.initialExpanded,
       (e) => {
         y.value = e;
       }
-    ), z([k, f], () => {
-      N.value = 0;
+    ), D([k, f], () => {
+      x.value = 0;
     });
     const X = l(() => k.value ? g.value.filter((e) => e.searchText.includes(k.value)) : f.value ? g.value.filter((e) => e.groupKey === f.value) : g.value), Y = l(() => {
       const e = /* @__PURE__ */ new Map();
       return X.value.forEach((r) => {
-        const n = C.value[r.groupKey] || r.groupLabel, t = e.get(r.groupKey) || {
+        const n = K.value[r.groupKey] || r.groupLabel, t = e.get(r.groupKey) || {
           key: r.groupKey,
           label: n,
           items: []
         };
         t.items.push(r), e.set(r.groupKey, t);
       }), Array.from(e.values());
-    }), B = l(() => Y.value.flatMap((e) => e.items)), Z = l(
-      () => _.value.find((e) => e.key === f.value)?.label || O.value.resultsLabel
-    ), se = l(() => k.value ? O.value.resultsLabel : Z.value), T = l(() => !i.initialExpanded && M.value.length > 0), ie = l(
+    }), M = l(() => Y.value.flatMap((e) => e.items)), Z = l(
+      () => z.value.find((e) => e.key === f.value)?.label || C.value.resultsLabel
+    ), ie = l(() => k.value ? C.value.resultsLabel : Z.value), _ = l(() => !a.initialExpanded && O.value.length > 0), se = l(
       () => ge({
         "nmorph-emoji-picker": [
           W.value && "compact",
           y.value && "expanded",
-          T.value && "collapsible",
-          i.disabled && "disabled",
-          i.hideShadow && "hide-shadow",
+          _.value && "collapsible",
+          a.disabled && "disabled",
+          a.hideShadow && "hide-shadow",
           !g.value.length && "empty"
         ]
       })
     ), le = l(() => ({
+      ...he({
+        "--nmorph-private-emoji-picker-width": a.width,
+        "--nmorph-private-emoji-picker-height": a.height,
+        "--nmorph-private-emoji-picker-cell-size": a.cellSize,
+        "--nmorph-private-emoji-picker-toggle-size": a.toggleSize,
+        "--nmorph-private-emoji-picker-scrollbar-size": a.scrollbarSize
+      }),
       ...ye({
-        "--nmorph-emoji-picker-width": i.width,
-        "--nmorph-emoji-picker-height": i.height
+        "--nmorph-private-emoji-picker-hover-background": a.hoverBackground,
+        "--nmorph-private-emoji-picker-active-background": a.activeBackground,
+        "--nmorph-private-emoji-picker-focus-ring": a.focusRing
       }),
-      "--nmorph-emoji-picker-columns": Math.max(1, Math.floor(i.columns))
+      "--nmorph-private-emoji-picker-columns": Math.max(1, Math.floor(a.columns))
     })), ce = (e) => J.value.get(e) || e, ue = (e) => {
-      i.disabled || x("select", e);
+      a.disabled || L("select", e);
     }, G = () => {
-      i.disabled || (y.value = !0, x("expand"));
+      a.disabled || (y.value = !0, L("expand"));
     }, ee = () => {
-      i.disabled || !T.value || (y.value = !1, x("collapse"));
+      a.disabled || !_.value || (y.value = !1, L("collapse"));
     }, pe = (e) => {
       if (e) {
         G();
         return;
       }
       ee();
-    }, w = async (e) => {
-      const r = V.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
+    }, E = async (e) => {
+      const r = H.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
       if (!r?.length) return;
       const n = Math.min(Math.max(e, 0), r.length - 1);
-      N.value = n, await fe(), r[n]?.focus();
-    }, re = { props: i, emit: x, searchQuery: H, expanded: y, selectedGroup: f, activeIndex: N, gridRef: V, fallbackTexts: F, isRecord: d, normalizeSearchValue: q, getStringCandidate: m, toStringList: h, getNumberCandidate: b, getArrayCandidate: K, getEmojiValue: j, hasEmojiValue: R, normalizeVariants: $, getGroupData: P, normalizeEmojiItem: Q, getGroupedChildren: E, normalizeDataSource: U, texts: O, categoryLabels: C, allEmoji: g, labelByEmoji: J, quickItems: M, showCompact: W, query: k, categoryOptions: _, visibleItems: X, visibleSections: Y, visibleFlatItems: B, activeCategoryLabel: Z, bodyLabel: se, canCollapse: T, modifiers: ie, styles: le, getEmojiLabel: ce, selectEmoji: ue, expandHandler: G, collapseHandler: ee, toggleExpandedHandler: pe, focusEmojiButton: w, gridKeydownHandler: (e) => {
-      if (i.disabled || !B.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-      const r = Math.max(1, Math.floor(i.columns)), n = B.value.length - 1, t = {
+      x.value = n, await fe(), r[n]?.focus();
+    }, re = { props: a, emit: L, searchQuery: V, expanded: y, selectedGroup: f, activeIndex: x, gridRef: H, fallbackTexts: R, isRecord: m, normalizeSearchValue: I, getStringCandidate: d, toStringList: h, getNumberCandidate: b, getArrayCandidate: B, getEmojiValue: j, hasEmojiValue: F, normalizeVariants: $, getGroupData: P, normalizeEmojiItem: Q, getGroupedChildren: N, normalizeDataSource: U, texts: C, categoryLabels: K, allEmoji: g, labelByEmoji: J, quickItems: O, showCompact: W, query: k, categoryOptions: z, visibleItems: X, visibleSections: Y, visibleFlatItems: M, activeCategoryLabel: Z, bodyLabel: ie, canCollapse: _, modifiers: se, styles: le, getEmojiLabel: ce, selectEmoji: ue, expandHandler: G, collapseHandler: ee, toggleExpandedHandler: pe, focusEmojiButton: E, gridKeydownHandler: (e) => {
+      if (a.disabled || !M.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+      const r = Math.max(1, Math.floor(a.columns)), n = M.value.length - 1, t = {
         ArrowRight: 1,
         ArrowLeft: -1,
         ArrowDown: r,
         ArrowUp: -r
       };
-      e.key in t && (e.preventDefault(), w(N.value + t[e.key])), e.key === "Home" && (e.preventDefault(), w(0)), e.key === "End" && (e.preventDefault(), w(n));
+      e.key in t && (e.preventDefault(), E(x.value + t[e.key])), e.key === "Home" && (e.preventDefault(), E(0)), e.key === "End" && (e.preventDefault(), E(n));
     }, get NmorphCheckbox() {
       return xe;
     }, get NmorphIcon() {
       return Le;
     }, get NmorphIconBurger() {
-      return Se;
+      return ve;
     }, get NmorphIconSearch() {
-      return ke;
+      return Se;
     }, get NmorphIconSmile() {
-      return je;
+      return ke;
     }, get NmorphScroll() {
-      return be;
+      return je;
     }, get NmorphTextInput() {
-      return he;
+      return be;
     } };
     return Object.defineProperty(re, "__isScriptSetup", { enumerable: !1, value: !0 }), re;
   }
 });
 export {
-  _e as default
+  Me as default
 };

package/dist/components/data/nmorph-empty/NmorphEmpty.css

@@ -1 +1 @@
-.nmorph-empty{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-height:var(--nmorph-empty-min-height);padding:var(--nmorph-empty-padding);color:var(--nmorph-text-color);text-align:center;border-radius:var(--default-border-radius)}.nmorph-empty .nmorph-empty__icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-empty-icon-size);height:var(--nmorph-empty-icon-size);color:var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__icon .nmorph-icon{--color: var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__title{max-width:100%;font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-regular);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__description{max-width:min(420px,100%);color:var(--nmorph-semi-contrast-text-color);font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-loose);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__action{display:flex;justify-content:center;max-width:100%;margin-top:4px}.nmorph-empty.nmorph-empty--nmorph{background:var(--nmorph-main-color)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-inset{box-shadow:var(--nmorph-shadow-inset)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-outset{box-shadow:var(--nmorph-shadow-outset)}.nmorph-empty.nmorph-empty--common{border:1px solid var(--nmorph-gray-color)}
+.nmorph-empty{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center;box-sizing:border-box;width:100%;min-height:var(--nmorph-private-empty-min-height);padding:var(--nmorph-private-empty-padding);color:var(--nmorph-text-color);text-align:center;border-radius:var(--default-border-radius)}.nmorph-empty .nmorph-empty__icon{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-empty-icon-size);height:var(--nmorph-private-empty-icon-size);color:var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-semi-contrast-text-color)}.nmorph-empty .nmorph-empty__title{max-width:100%;font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__description{max-width:min(420px,100%);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--nmorph-typography-body-font-weight);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height);overflow-wrap:anywhere}.nmorph-empty .nmorph-empty__action{display:flex;justify-content:center;max-width:100%;margin-top:4px}.nmorph-empty.nmorph-empty--nmorph{background:var(--nmorph-main-color)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-inset{box-shadow:var(--nmorph-shadow-inset)}.nmorph-empty.nmorph-empty--nmorph.nmorph--shadow-outset{box-shadow:var(--nmorph-shadow-outset)}.nmorph-empty.nmorph-empty--plain{border:var(--nmorph-plain-border)}

package/dist/components/data/nmorph-empty/NmorphEmpty.vue2.js

@@ -2,10 +2,10 @@ import './NmorphEmpty.css';
 import { defineComponent as m, useSlots as u, computed as t } from "vue";
 import { useModifiers as f } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as c, toCssSize as h } from "../../../utils/common.js";
-import { NmorphShadowType as g } from "../../../types/common.types.js";
-import y from "../../../assets/icons/folder-opened.svg.js";
+import { NmorphShadowType as y } from "../../../types/common.types.js";
+import g from "../../../assets/icons/folder-opened.svg.js";
 import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const v = /* @__PURE__ */ m({
+const z = /* @__PURE__ */ m({
   __name: "NmorphEmpty",
   props: {
     title: { type: String, required: !1, default: "No data" },
@@ -13,7 +13,7 @@ const v = /* @__PURE__ */ m({
     iconSize: { type: [Number, String], required: !1, default: 56 },
     minHeight: { type: [Number, String], required: !1, default: 160 },
     padding: { type: [Number, String], required: !1, default: "var(--indentation-05)" },
-    design: { type: String, required: !1, default: "nmorph" },
+    design: { type: null, required: !1, default: "nmorph" },
     shadowType: { type: null, required: !1, default: "inset" },
     hideIcon: { type: Boolean, required: !1, default: !1 },
     role: { type: String, required: !1, default: "status" },
@@ -22,21 +22,21 @@ const v = /* @__PURE__ */ m({
   },
   setup(o, { expose: n }) {
     n();
-    const e = o, r = u(), s = t(() => !e.hideIcon || !!r.icon), a = t(() => !!(e.description || r.description)), p = t(() => e.ariaLabel || e.title), d = t(
+    const e = o, r = u(), a = t(() => !e.hideIcon || !!r.icon), p = t(() => !!(e.description || r.description)), s = t(() => e.ariaLabel || e.title), d = t(
       () => f({
-        nmorph: [e.design === "nmorph" ? g[e.shadowType] : ""],
+        nmorph: [e.design === "nmorph" ? y[e.shadowType] : ""],
         "nmorph-empty": [e.design]
       })
     ), l = t(
       () => c({
-        "--nmorph-empty-icon-size": e.iconSize,
-        "--nmorph-empty-min-height": e.minHeight,
-        "--nmorph-empty-padding": e.padding
+        "--nmorph-private-empty-icon-size": e.iconSize,
+        "--nmorph-private-empty-min-height": e.minHeight,
+        "--nmorph-private-empty-padding": e.padding
       })
-    ), i = { props: e, slots: r, hasIcon: s, hasDescription: a, label: p, modifiers: d, styles: l, get NmorphIcon() {
+    ), i = { props: e, slots: r, hasIcon: a, hasDescription: p, label: s, modifiers: d, styles: l, get NmorphIcon() {
       return S;
     }, get NmorphIconFolderOpened() {
-      return y;
+      return g;
     }, get toCssSize() {
       return h;
     } };
@@ -44,5 +44,5 @@ const v = /* @__PURE__ */ m({
   }
 });
 export {
-  v as default
+  z as default
 };

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

@@ -1 +1 @@
-.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:var(--nmorph-file-card-height, auto);min-height:var(--nmorph-file-card-height, 64px);padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-file-card .nmorph-file-card__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border-radius:var(--default-border-radius);--color: currentColor}.nmorph-file-card .nmorph-file-card__icon-action{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:600;font-size:var(--font-size-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__audio-preview,.nmorph-file-card .nmorph-file-card__video-preview,.nmorph-file-card .nmorph-file-card__image-preview{width:100%;min-width:0}.nmorph-file-card .nmorph-file-card__image-preview{display:block;height:var(--nmorph-file-card-media-height, 120px);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-file-card .nmorph-file-card__image-preview .nmorph-file-card__image{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}.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__visual-size{position:absolute;right:var(--indentation-02);bottom:var(--indentation-02);z-index:2;display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - var(--indentation-04));min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);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-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,.nmorph-file-card .nmorph-file-card__action-loader{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:inherit;line-height:1;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__action-loader{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__action-loader .nmorph-icon{--color: currentColor}.nmorph-file-card.nmorph-file-card--custom-actions,.nmorph-file-card.nmorph-file-card--compact{position:relative;padding-inline-end:calc(var(--indentation-03) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--custom-actions .nmorph-file-card__actions,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{position:absolute;top:var(--indentation-03);right:var(--indentation-03);z-index:3}.nmorph-file-card.nmorph-file-card--compact{min-height:var(--nmorph-file-card-height, 52px);padding:var(--indentation-02);padding-inline-end:calc(var(--indentation-02) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__audio-preview,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__image-preview{height:var(--nmorph-file-card-media-height, 96px);margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{top:var(--indentation-02);right:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-visual{position:relative;display:block;gap:0;min-height:0;padding:0;padding-inline-end:0;overflow:hidden}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__body{position:relative;display:block;width:100%;min-width:0;height:100%}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__info{position:absolute;top:var(--indentation-02);left:var(--indentation-02);z-index:2;max-width:calc(100% - 48px);pointer-events:none}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__name{display:block;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)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:var(--nmorph-file-card-media-height, 100%);border-radius:inherit;object-fit:cover}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}
+.nmorph-file-card{display:flex;gap:var(--indentation-03);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:var(--nmorph-private-file-card-height, auto);min-height:var(--nmorph-private-file-card-height, 64px);padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-file-card .nmorph-file-card__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border-radius:var(--default-border-radius);--nmorph-private-icon-color: currentColor}.nmorph-file-card .nmorph-file-card__icon-action{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-file-card .nmorph-file-card__icon-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-file-card .nmorph-file-card__icon-action .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card .nmorph-file-card__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-01);min-width:0}.nmorph-file-card .nmorph-file-card__info{display:flex;flex-direction:column;gap:2px;min-width:0}.nmorph-file-card .nmorph-file-card__name,.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-card .nmorph-file-card__name{font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-file-card .nmorph-file-card__meta,.nmorph-file-card .nmorph-file-card__error{font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-file-card .nmorph-file-card__meta{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__error{color:var(--nmorph-error-text-color)}.nmorph-file-card .nmorph-file-card__audio-preview,.nmorph-file-card .nmorph-file-card__video-preview,.nmorph-file-card .nmorph-file-card__image-preview{width:100%;min-width:0}.nmorph-file-card .nmorph-file-card__image-preview{display:block;height:var(--nmorph-private-file-card-media-height, 120px);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-file-card .nmorph-file-card__image-preview .nmorph-file-card__image{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}.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:var(--font-weight-bold);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);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__visual-size{position:absolute;right:var(--indentation-02);bottom:var(--indentation-02);z-index:2;display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - var(--indentation-04));min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);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-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,.nmorph-file-card .nmorph-file-card__action-loader{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:inherit;line-height:1;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{--nmorph-private-icon-color: currentColor}.nmorph-file-card .nmorph-file-card__action-loader{color:var(--nmorph-semi-contrast-text-color)}.nmorph-file-card .nmorph-file-card__action-loader .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-file-card.nmorph-file-card--custom-actions,.nmorph-file-card.nmorph-file-card--compact{position:relative;padding-inline-end:calc(var(--indentation-03) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--custom-actions .nmorph-file-card__actions,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{position:absolute;top:var(--indentation-03);right:var(--indentation-03);z-index:3}.nmorph-file-card.nmorph-file-card--compact{min-height:var(--nmorph-private-file-card-height, 52px);padding:var(--indentation-02);padding-inline-end:calc(var(--indentation-02) + 44px + var(--indentation-01))}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__icon{width:30px;height:30px}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__audio-preview,.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__video-preview{margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__image-preview{height:var(--nmorph-private-file-card-media-height, 96px);margin-top:0}.nmorph-file-card.nmorph-file-card--compact .nmorph-file-card__actions{top:var(--indentation-02);right:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-audio.nmorph-file-card--no-actions .nmorph-file-card__body{padding-inline-end:var(--indentation-02)}.nmorph-file-card.nmorph-file-card--media-visual{position:relative;display:block;gap:0;min-height:0;padding:0;padding-inline-end:0;overflow:hidden}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__body{position:relative;display:block;width:100%;min-width:0;height:100%}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__info{position:absolute;top:var(--indentation-02);left:var(--indentation-02);z-index:2;max-width:calc(100% - 48px);pointer-events:none}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__name{display:block;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)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-video-preview__media,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__image{display:block;width:100%;max-width:none;height:var(--nmorph-private-file-card-media-height, 100%);border-radius:inherit;object-fit:cover}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link .nmorph-icon,.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-loader .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-file-card.nmorph-file-card--media-visual .nmorph-file-card__action-link:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-file-card__info{max-width:calc(100% - 112px)}.nmorph-file-card.nmorph-file-card--media-video .nmorph-video-preview__actions{right:calc(var(--indentation-02) + 26px)}.nmorph-file-card.nmorph-file-card--media-image .nmorph-file-card__image-preview{border-radius:inherit}.nmorph-file-card.nmorph-file-card--error{outline:1px solid var(--nmorph-error-color)}.nmorph-file-card.nmorph-file-card--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-file-card.nmorph-file-card--soft .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--plain{background:transparent;box-shadow:none}.nmorph-file-card.nmorph-file-card--plain .nmorph-file-card__icon-action{box-shadow:none}.nmorph-file-card.nmorph-file-card--icon-plain .nmorph-file-card__icon{background:transparent}

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

@@ -54,8 +54,8 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
       () => d.value || a.value || i.value
     ), m = r(() => a.value || i.value), B = r(() => e.height ?? (e.compact ? "96px" : "120px")), L = r(
       () => J({
-        "--nmorph-file-card-height": e.height,
-        "--nmorph-file-card-media-height": B.value
+        "--nmorph-private-file-card-height": e.height,
+        "--nmorph-private-file-card-media-height": B.value
       })
     ), D = r(() => m.value ? e.showName : e.showName || e.showMeta && !!(e.error && e.errorText || S.value)), I = r(() => !e.previewSrc || e.loading || e.error ? [] : i.value ? [
       {

package/dist/components/data/nmorph-image/NmorphImage.css

@@ -1 +1 @@
-.nmorph-image{--width: auto;--height: 100%;display:flex;justify-content:center;align-items:center;width:var(--width);height:var(--height)}.nmorph-image.nmorph--shadow-combined{border:var(--nmorph-image-frame-border) solid var(--nmorph-main-color)}.nmorph-image img{width:100%;height:100%;object-fit:var(--nmorph-image-fit)}.nmorph-image__loading,.nmorph-image__load-failed{padding:1rem}.nmorph-image--hide img{width:0;height:0;opacity:0}
+.nmorph-image{--nmorph-private-image-width: auto;--nmorph-private-image-height: 100%;--nmorph-private-image-radius: var(--default-border-radius);--nmorph-private-image-background: transparent;--nmorph-private-image-border: none;--nmorph-private-image-shadow: none;position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--nmorph-private-image-width);height:var(--nmorph-private-image-height);overflow:hidden;background:var(--nmorph-private-image-background);border:var(--nmorph-private-image-border);border-radius:var(--nmorph-private-image-radius);box-shadow:var(--nmorph-private-image-shadow)}.nmorph-image:not(.nmorph-image--plain){--nmorph-private-image-background: var(--nmorph-main-color);--nmorph-private-image-shadow: var(--nmorph-shadow-combined)}.nmorph-image:not(.nmorph-image--plain).nmorph-image--framed{--nmorph-private-image-border: var(--nmorph-private-image-frame-border) solid var(--nmorph-main-color)}.nmorph-image--plain.nmorph-image--framed{--nmorph-private-image-background: var(--nmorph-main-color);--nmorph-private-image-border: var(--nmorph-plain-border);--nmorph-private-image-shadow: none}.nmorph-image img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:var(--nmorph-private-image-fit)}.nmorph-image__loading,.nmorph-image__load-failed{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:100%;padding:1rem;text-align:center}.nmorph-image--hide img{width:0;height:0;opacity:0}

package/dist/components/data/nmorph-image/NmorphImage.vue2.js

@@ -1,37 +1,49 @@
 import './NmorphImage.css';
-import { defineComponent as _, computed as t, ref as s } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { useI18n as h } from "vue-i18n";
-const b = /* @__PURE__ */ _({
+import { defineComponent as S, computed as r, ref as u } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as T } from "../../../utils/common.js";
+import { useI18n as _ } from "vue-i18n";
+const I = /* @__PURE__ */ S({
   __name: "NmorphImage",
   props: {
+    design: { type: null, required: !1, default: "nmorph" },
     loadingText: { type: String, required: !1, default: "" },
     loadFailedText: { type: String, required: !1, default: "" },
     frameBorder: { type: Number, required: !1, default: 4 },
     src: { type: String, required: !1 },
     srcSet: { type: String, required: !1, default: "" },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 },
     fit: { type: null, required: !1, default: "cover" },
     alt: { type: String, required: !1, default: "" }
   },
   emits: ["error", "load"],
-  setup(u, { expose: m, emit: f }) {
-    m();
-    const { t: o } = h(), e = u, p = t(() => e.loadingText ? e.loadingText : o("loadingText")), c = t(() => e.loadFailedText ? e.loadFailedText : o("loadFailedText")), r = s(!1), a = s(!1), d = f, g = (i) => {
-      r.value = !0, a.value = !1, d("load", i);
-    }, x = (i) => {
-      r.value = !0, a.value = !0, d("error", i);
-    }, l = t(() => r.value && a.value), v = t(
-      () => y({
-        nmorph: [e.frameBorder > 0 && "shadow-combined"],
-        "nmorph-image": [(l.value || !r.value) && "hide"]
+  setup(m, { expose: p, emit: f }) {
+    p();
+    const { t: o } = _(), e = m, g = r(() => e.loadingText ? e.loadingText : o("loadingText")), c = r(() => e.loadFailedText ? e.loadFailedText : o("loadFailedText")), t = u(!1), a = u(!1), i = f, h = (l) => {
+      t.value = !0, a.value = !1, i("load", l);
+    }, v = (l) => {
+      t.value = !0, a.value = !0, i("error", l);
+    }, n = r(() => t.value && a.value), d = r(() => e.design || "nmorph"), x = r(
+      () => q({
+        nmorph: [d.value === "nmorph" ? "shadow-combined" : ""],
+        "nmorph-image": [
+          d.value,
+          e.frameBorder > 0 && "framed",
+          (n.value || !t.value) && "hide"
+        ]
       })
-    ), T = t(() => ({
-      "--nmorph-image-fit": e.fit || "cover",
-      "--nmorph-image-frame-border": `${e.frameBorder}px`
-    })), n = { t: o, props: e, computedLoadingText: p, computedLoadFailedText: c, imageLoadFinished: r, imageLoadError: a, emit: d, onImageLoad: g, onImageError: x, loadingFailed: l, modifiers: v, styles: T };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    ), y = r(() => ({
+      ...T({
+        "--nmorph-private-image-width": e.width,
+        "--nmorph-private-image-height": e.height
+      }),
+      "--nmorph-private-image-fit": e.fit || "cover",
+      "--nmorph-private-image-frame-border": `${e.frameBorder}px`
+    })), s = { t: o, props: e, computedLoadingText: g, computedLoadFailedText: c, imageLoadFinished: t, imageLoadError: a, emit: i, onImageLoad: h, onImageError: v, loadingFailed: n, resolvedDesign: d, modifiers: x, styles: y };
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {
-  b as default
+  I as default
 };

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.css

@@ -1 +1 @@
-.nmorph-image-preview{--width: 50px;--height: 50px;--nmorph-image-preview-radius: var(--default-border-radius);width:var(--width);height:var(--height);overflow:hidden;border-radius:var(--nmorph-image-preview-radius)}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--width);height:var(--height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--nmorph-image-preview-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:600;line-height:var(--line-height-regular);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}
+.nmorph-image-preview{--nmorph-private-image-preview-trigger-width: 50px;--nmorph-private-image-preview-trigger-height: 50px;--nmorph-private-image-preview-radius: var(--default-border-radius);width:var(--nmorph-private-image-preview-trigger-width);height:var(--nmorph-private-image-preview-trigger-height);overflow:hidden;border-radius:var(--nmorph-private-image-preview-radius)}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image__loading,.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image__load-failed{min-width:0;padding:var(--indentation-01);overflow:hidden;font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height);overflow-wrap:anywhere}.nmorph-image-preview.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-private-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--nmorph-private-image-preview-trigger-width);height:var(--nmorph-private-image-preview-trigger-height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--nmorph-private-image-preview-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:var(--font-weight-semibold);line-height:var(--nmorph-typography-body-line-height);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}