@nmorph/nmorph-ui-kit 2.2.38 → 2.2.40

package/dist/components/data/nmorph-progress/NmorphProgress.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphProgress.css';
 import { defineComponent as v, computed as r, ref as u, onMounted as y } from "vue";
 import { useModifiers as S } from "../../../utils/create-modifiers.js";
-import { toCssSize as q } from "../../../utils/common.js";
-const z = /* @__PURE__ */ v({
+import { createCssSizeVariables as q, createCssVariables as _ } from "../../../utils/common.js";
+const C = /* @__PURE__ */ v({
   __name: "NmorphProgress",
   props: {
     type: { type: String, required: !1, default: "linear" },
@@ -22,22 +22,26 @@ const z = /* @__PURE__ */ v({
       () => S({
         "nmorph-progress": []
       })
-    ), n = r(() => Array.isArray(e.color) ? e.color.find((h) => h.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), o = r(() => e.indeterminate ? "var(--animation)" : "none"), i = u(null), t = u(1), f = r(() => `${t.value} ${t.value}`), m = r(() => t.value - e.percentage / 100 * t.value);
+    ), n = r(() => Array.isArray(e.color) ? e.color.find((h) => h.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), o = r(() => e.indeterminate ? "var(--animation)" : "none"), a = u(null), t = u(1), f = r(() => `${t.value} ${t.value}`), m = r(() => t.value - e.percentage / 100 * t.value);
     y(() => {
-      i.value && (t.value = 2 * Math.PI * i.value.r.baseVal.value);
+      a.value && (t.value = 2 * Math.PI * a.value.r.baseVal.value);
     });
-    const a = r(() => `${e.circleSize}px`), s = r(() => `${e.percentage}%`), g = r(() => ({
-      "--nmorph-progress-percentage": s.value,
-      "--nmorph-progress-color": n.value,
-      "--nmorph-progress-animation": o.value,
-      "--nmorph-progress-circle-size": a.value,
-      ...e.height !== void 0 && { "--height": q(e.height) },
-      ...e.widthTransition !== void 0 && { "--width-transition": e.widthTransition },
-      ...e.indeterminateAnimation !== void 0 && { "--animation": e.indeterminateAnimation }
-    })), l = { props: e, modifiers: d, color: n, animation: o, circle: i, circumference: t, strokeDasharray: f, strokeDashoffset: m, circleContainerSize: a, displayPercentage: s, styles: g };
+    const i = r(() => `${e.circleSize}px`), s = r(() => `${e.percentage}%`), g = r(() => ({
+      ..._({
+        "--nmorph-progress-percentage": s.value,
+        "--nmorph-progress-color": n.value,
+        "--nmorph-progress-animation": o.value,
+        "--nmorph-progress-circle-size": i.value,
+        "--width-transition": e.widthTransition,
+        "--animation": e.indeterminateAnimation
+      }),
+      ...q({
+        "--height": e.height
+      })
+    })), l = { props: e, modifiers: d, color: n, animation: o, circle: a, circumference: t, strokeDasharray: f, strokeDashoffset: m, circleContainerSize: i, displayPercentage: s, styles: g };
     return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
 });
 export {
-  z as default
+  C as default
 };

package/dist/components/data/nmorph-qr-code/NmorphQRCode.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphQRCode.css';
 import { defineComponent as g, computed as r } from "vue";
 import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { toCssSize as h } from "../../../utils/common.js";
+import { createCssVariables as b, createCssSizeVariables as h } from "../../../utils/common.js";
 import { createNmorphQRCode as a } from "./qr-code.js";
-const _ = /* @__PURE__ */ g({
+const x = /* @__PURE__ */ g({
   __name: "NmorphQRCode",
   props: {
     value: { type: [String, Number], required: !1, default: "" },
@@ -16,9 +16,9 @@ const _ = /* @__PURE__ */ g({
     maxVersion: { type: Number, required: !1, default: 40 },
     title: { type: String, required: !1, default: "" }
   },
-  setup(u, { expose: l }) {
+  setup(s, { expose: l }) {
     l();
-    const e = u, n = r(() => {
+    const e = s, n = r(() => {
       try {
         return a(String(e.value), {
           errorCorrectionLevel: e.level,
@@ -32,20 +32,24 @@ const _ = /* @__PURE__ */ g({
       errorCorrectionLevel: e.level,
       minVersion: e.minVersion,
       maxVersion: e.maxVersion
-    })), s = r(() => o.value ? o.value.size + e.margin * 2 : 1), m = r(() => o.value ? o.value.modules.flatMap(
-      (t, f) => t.map((c, v) => c ? `M${v + e.margin} ${f + e.margin}h1v1h-1z` : "").filter(Boolean)
+    })), u = r(() => o.value ? o.value.size + e.margin * 2 : 1), m = r(() => o.value ? o.value.modules.flatMap(
+      (t, c) => t.map((f, v) => f ? `M${v + e.margin} ${c + e.margin}h1v1h-1z` : "").filter(Boolean)
     ).join("") : ""), d = r(() => ({
-      "--nmorph-qr-code-size": h(e.size),
-      "--nmorph-qr-code-color": e.color,
-      "--nmorph-qr-code-background": e.background
+      ...h({
+        "--nmorph-qr-code-size": e.size
+      }),
+      ...b({
+        "--nmorph-qr-code-color": e.color,
+        "--nmorph-qr-code-background": e.background
+      })
     })), p = r(
       () => q({
         "nmorph-qr-code": [n.value && "error"]
       })
-    ), i = { props: e, errorMessage: n, qrCode: o, viewBoxSize: s, path: m, styles: d, modifiers: p };
+    ), i = { props: e, errorMessage: n, qrCode: o, viewBoxSize: u, path: m, styles: d, modifiers: p };
     return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  _ as default
+  x as default
 };

package/dist/components/data/nmorph-skeleton/NmorphSkeleton.vue2.js

@@ -1,8 +1,9 @@
 import './NmorphSkeleton.css';
-import { defineComponent as d, computed as o } from "vue";
-import { useModifiers as l } from "../../../utils/create-modifiers.js";
-import s from "./components/NmorphSkeletonItem.vue.js";
-const f = /* @__PURE__ */ d({
+import { defineComponent as d, computed as r } from "vue";
+import { useModifiers as s } from "../../../utils/create-modifiers.js";
+import { createCssVariables as l } from "../../../utils/common.js";
+import p from "./components/NmorphSkeletonItem.vue.js";
+const _ = /* @__PURE__ */ d({
   __name: "NmorphSkeleton",
   props: {
     animated: { type: Boolean, required: !1, default: !0 },
@@ -10,20 +11,22 @@ const f = /* @__PURE__ */ d({
     rows: { type: Number, required: !1, default: 0 },
     loadingGradient: { type: String, required: !1, default: void 0 }
   },
-  setup(r, { expose: n }) {
+  setup(o, { expose: n }) {
     n();
-    const e = r, a = o(
-      () => l({
+    const e = o, a = r(
+      () => s({
         "nmorph-skeleton": [e.animated && e.loading && "loading"]
       })
-    ), i = o(() => ({
-      ...e.loadingGradient !== void 0 && { "--loading-gradient": e.loadingGradient }
-    })), t = { props: e, modifiers: a, styles: i, get NmorphSkeletonItem() {
-      return s;
+    ), i = r(
+      () => l({
+        "--loading-gradient": e.loadingGradient
+      })
+    ), t = { props: e, modifiers: a, styles: i, get NmorphSkeletonItem() {
+      return p;
     } };
     return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  f as default
+  _ as default
 };

package/dist/components/data/nmorph-table/NmorphTable.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphTable.css';
-import { defineComponent as K, computed as a, ref as n, provide as B, watch as Q, nextTick as V } from "vue";
-import { useModifiers as z } from "../../../utils/create-modifiers.js";
-import { generateUUID as Y, toCssSize as M, resolveDomElement as $ } from "../../../utils/common.js";
-import F from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
-import { useVirtualList as G } from "../../../hooks/use-virtual-list.js";
-const le = /* @__PURE__ */ K({
+import { defineComponent as j, computed as l, ref as n, provide as M, watch as P, nextTick as z } from "vue";
+import { useModifiers as K } from "../../../utils/create-modifiers.js";
+import { generateUUID as Q, toCssSize as Y, createCssSizeVariables as $, createCssVariables as F, resolveDomElement as G } from "../../../utils/common.js";
+import { useVirtualList as J } from "../../../hooks/use-virtual-list.js";
+import X from "./inner-components/nmorph-sort-button/NmorphSortButton.vue.js";
+const oe = /* @__PURE__ */ j({
   __name: "NmorphTable",
   props: {
     data: { type: Array, required: !1, default: () => [] },
@@ -21,37 +21,37 @@ const le = /* @__PURE__ */ K({
     cellHeight: { type: [Number, String], required: !1, default: void 0 },
     rowHoverBackground: { type: String, required: !1, default: void 0 }
   },
-  setup(_, { expose: T }) {
-    T();
-    const t = _, I = a(
-      () => z({
+  setup(_, { expose: B }) {
+    B();
+    const t = _, T = l(
+      () => K({
         "nmorph-table": [t.design]
       })
-    ), o = n([...t.data]), u = a(() => t.virtual), b = a(() => t.virtualRowHeight), H = a(() => t.virtualOverscan), S = a(() => t.virtualDynamicHeight), r = G(o, {
+    ), o = n([...t.data]), u = l(() => t.virtual), w = l(() => t.virtualRowHeight), H = l(() => t.virtualOverscan), S = l(() => t.virtualDynamicHeight), r = J(o, {
       enabled: u,
-      itemHeight: b,
+      itemHeight: w,
       overscan: H,
       dynamic: S
-    }), x = a(
-      () => u.value ? r.virtualItems.value : o.value.map((e, l) => ({ item: e, index: l }))
-    ), C = a(() => x.value.map((e) => e.item)), s = n(-1), h = n(0), d = n(t.sort), W = (e, l) => {
-      d.value && (d.value[l] = e, o.value.sort((g, y) => {
-        const w = String(g[l]).toLowerCase(), i = String(y[l]).toLowerCase();
+    }), C = l(
+      () => u.value ? r.virtualItems.value : o.value.map((e, a) => ({ item: e, index: a }))
+    ), x = l(() => C.value.map((e) => e.item)), s = n(-1), h = n(0), d = n(t.sort), I = (e, a) => {
+      d.value && (d.value[a] = e, o.value.sort((g, y) => {
+        const b = String(g[a]).toLowerCase(), i = String(y[a]).toLowerCase();
         if (!d.value)
           return 0;
-        const f = d.value[l];
-        return f === "ascending" ? w.localeCompare(i) : f === "descending" ? i.localeCompare(w) : 0;
+        const f = d.value[a];
+        return f === "ascending" ? b.localeCompare(i) : f === "descending" ? i.localeCompare(b) : 0;
       }));
     }, m = n(null), c = n([]);
-    B("table-data", { rows: C, columns: c });
-    const D = a(() => {
-      const e = c.value.map((i) => i.width).filter((i) => !!i), l = e.length, g = e.reduce((i, f) => (i += Number(f), i), 0), y = c.value.length - l;
+    M("table-data", { rows: x, columns: c });
+    const D = l(() => {
+      const e = c.value.map((i) => i.width).filter((i) => !!i), a = e.length, g = e.reduce((i, f) => (i += Number(f), i), 0), y = c.value.length - a;
       return m.value?.clientWidth ? (m.value?.clientWidth - g) / y : 0;
-    }), N = (e) => e !== "" ? e : D.value, p = n(0);
-    Q(
+    }), W = (e) => e !== "" ? e : D.value, p = n(0);
+    P(
       () => t.data,
       async () => {
-        p.value = p.value + 1, o.value = [...t.data], c.value = [], await V();
+        p.value = p.value + 1, o.value = [...t.data], c.value = [], await z();
         const e = r.containerRef.value;
         e && (e.scrollTop = Math.min(
           h.value,
@@ -62,34 +62,38 @@ const le = /* @__PURE__ */ K({
         immediate: !0
       }
     );
-    const O = (e) => typeof e == "object" ? "" : e, R = Y();
-    B("table-identifier", R);
-    const q = a(() => M(t.virtualHeight)), A = a(() => ({
-      ...t.borderColor !== void 0 && { "--border-color": t.borderColor },
-      ...t.cellHeight !== void 0 && { "--table-cell-height": M(t.cellHeight) },
-      ...t.rowHoverBackground !== void 0 && { "--table-background-row-hover": t.rowHoverBackground }
-    })), E = a(() => ({
+    const N = (e) => typeof e == "object" ? "" : e, R = Q();
+    M("table-identifier", R);
+    const q = l(() => Y(t.virtualHeight)), O = l(() => ({
+      ...F({
+        "--border-color": t.borderColor,
+        "--table-background-row-hover": t.rowHoverBackground
+      }),
+      ...$({
+        "--table-cell-height": t.cellHeight
+      })
+    })), A = l(() => ({
       "--table-virtual-row-height": `${t.virtualRowHeight}px`,
       height: u.value ? q.value : void 0,
       overflowY: u.value ? "auto" : void 0
-    })), L = r.spacerStyle, U = r.contentStyle, j = (e, l) => {
-      r.measureElement(l, $(e));
-    }, P = () => {
+    })), E = r.spacerStyle, L = r.contentStyle, U = (e, a) => {
+      r.measureElement(a, G(e));
+    }, V = () => {
       r.scrollHandler(), h.value = r.containerRef.value?.scrollTop || 0;
     }, v = (e) => {
       if (!o.value.length) return;
-      const l = s.value < 0 ? 0 : Math.min(Math.max(s.value + e, 0), o.value.length - 1);
-      s.value = l, r.scrollToIndex(l);
-    }, k = { props: t, modifiers: I, rows: o, virtualEnabled: u, virtualRowHeight: b, virtualOverscan: H, virtualDynamicHeight: S, virtualList: r, renderedRows: x, tableRows: C, activeRowIndex: s, lastScrollTop: h, sortData: d, onSort: W, nmorphDOMTable: m, columns: c, defaultColWidth: D, getWidth: N, key: p, tableData: O, tableIdentifier: R, virtualHeight: q, tableStyle: A, tableBodyStyle: E, virtualSpacerStyle: L, virtualContentStyle: U, setVirtualRowRef: j, scrollHandler: P, moveActiveRow: v, tableKeydownHandler: (e) => {
+      const a = s.value < 0 ? 0 : Math.min(Math.max(s.value + e, 0), o.value.length - 1);
+      s.value = a, r.scrollToIndex(a);
+    }, k = { props: t, modifiers: T, rows: o, virtualEnabled: u, virtualRowHeight: w, virtualOverscan: H, virtualDynamicHeight: S, virtualList: r, renderedRows: C, tableRows: x, activeRowIndex: s, lastScrollTop: h, sortData: d, onSort: I, nmorphDOMTable: m, columns: c, defaultColWidth: D, getWidth: W, key: p, tableData: N, tableIdentifier: R, virtualHeight: q, tableStyle: O, tableBodyStyle: A, virtualSpacerStyle: E, virtualContentStyle: L, setVirtualRowRef: U, scrollHandler: V, moveActiveRow: v, tableKeydownHandler: (e) => {
       u.value && (e.key === "ArrowDown" ? (e.preventDefault(), v(1)) : e.key === "ArrowUp" ? (e.preventDefault(), v(-1)) : e.key === "Home" ? (e.preventDefault(), s.value = 0, r.scrollToIndex(0)) : e.key === "End" ? (e.preventDefault(), s.value = o.value.length - 1, r.scrollToIndex(o.value.length - 1)) : e.key === "PageDown" ? (e.preventDefault(), v(
         Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )) : e.key === "PageUp" && (e.preventDefault(), v(
         -Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )));
-    }, NmorphSortButton: F };
+    }, NmorphSortButton: X };
     return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
   }
 });
 export {
-  le as default
+  oe as default
 };

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

@@ -1,17 +1,17 @@
 import n from "./NmorphTagList.vue2.js";
-import { openBlock as e, createElementBlock as t, normalizeClass as a, Fragment as l, renderList as s, createBlock as m, mergeProps as i } from "vue";
+import { openBlock as e, createElementBlock as t, normalizeClass as l, Fragment as s, renderList as a, createBlock as m, mergeProps as i } from "vue";
 import c from "../../../_virtual/_plugin-vue_export-helper.js";
-function p(f, _, d, r, u, g) {
+function p(f, d, _, r, u, g) {
   return e(), t(
     "div",
     {
-      class: a(r.modifiers)
+      class: l(r.modifiers)
     },
     [
       (e(!0), t(
-        l,
+        s,
         null,
-        s(r.tagList, (o) => (e(), m(
+        a(r.resolvedTagList, (o) => (e(), m(
           r.NmorphTagItem,
           i({
             key: o.value
@@ -28,7 +28,7 @@ function p(f, _, d, r, u, g) {
     /* CLASS */
   );
 }
-const T = /* @__PURE__ */ c(n, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
+const v = /* @__PURE__ */ c(n, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
 export {
-  T as default
+  v as default
 };

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue2.js

@@ -1,26 +1,32 @@
-import { defineComponent as p, computed as n, ref as d } from "vue";
-import { useModifiers as c } from "../../../utils/create-modifiers.js";
+import { defineComponent as d, computed as a, ref as c } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
 import f from "./components/nmorph-tag-item/NmorphTagItem.vue.js";
-const h = /* @__PURE__ */ p({
+const L = /* @__PURE__ */ d({
   __name: "NmorphTagList",
   props: {
-    modelValue: { type: Array, required: !0 }
+    modelValue: { type: Array, required: !0 },
+    design: { type: String, required: !1, default: "nmorph" }
   },
   emits: ["close", "update:model-value"],
-  setup(a, { expose: m, emit: l }) {
-    m();
-    const o = a, r = l, u = n(
-      () => c({
+  setup(i, { expose: l, emit: m }) {
+    l();
+    const r = i, o = m, n = a(
+      () => g({
         "nmorph-list": []
       })
     );
-    let e = d(o.modelValue);
-    const s = { props: o, emit: r, modifiers: u, get tagList() {
-      return e;
-    }, set tagList(t) {
-      e = t;
-    }, closeTagHandler: (t) => {
-      e.value = e.value.filter((i) => i.value !== t), r("close", t), r("update:model-value", e.value);
+    let t = c(r.modelValue);
+    const u = a(
+      () => t.value.map((e) => ({
+        ...e,
+        design: e.design ?? r.design
+      }))
+    ), s = { props: r, emit: o, modifiers: n, get tagList() {
+      return t;
+    }, set tagList(e) {
+      t = e;
+    }, resolvedTagList: u, closeTagHandler: (e) => {
+      t.value = t.value.filter((p) => p.value !== e), o("close", e), o("update:model-value", t.value);
     }, get NmorphTagItem() {
       return f;
     } };
@@ -28,5 +34,5 @@ const h = /* @__PURE__ */ p({
   }
 });
 export {
-  h as default
+  L as default
 };

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

@@ -1 +1 @@
-.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);border:solid 2px var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px;cursor:pointer}.nmorph-tag-item.nmorph-tag-item--nmorph-design{background:var(--nmorph-main-color);border:none;box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}
+.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);color:var(--nmorph-tag-item-content-color, var(--nmorph-tag-item-color, var(--nmorph-text-color)));border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item span{color:inherit}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px;cursor:pointer;--color: var(--nmorph-tag-item-content-color, var(--nmorph-tag-item-color, var(--nmorph-text-color)))}.nmorph-tag-item.nmorph-tag-item--nmorph{background:var(--nmorph-main-color);border:none;box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--common{--nmorph-tag-item-content-color: var(--nmorph-tag-item-color, var(--nmorph-contrast-text-color));background:var(--nmorph-tag-item-background, var(--nmorph-gray-color));border:none;box-shadow:none}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}

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

@@ -1,10 +1,10 @@
 import './NmorphTagItem.css';
-import { defineComponent as i, computed as s } from "vue";
+import { defineComponent as p, computed as s } from "vue";
 import { useModifiers as u } from "../../../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as a } from "../../../../../types/index.js";
+import { NmorphComponentHeight as a } from "../../../../../types/common.types.js";
 import l from "../../../../../assets/icons/error.svg.js";
-import d from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
-const N = /* @__PURE__ */ i({
+import c from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+const N = /* @__PURE__ */ p({
   __name: "NmorphTagItem",
   props: {
     value: { type: String, required: !0 },
@@ -14,17 +14,17 @@ const N = /* @__PURE__ */ i({
     design: { type: String, required: !1, default: "nmorph" }
   },
   emits: ["close"],
-  setup(o, { expose: n, emit: m }) {
+  setup(o, { expose: n, emit: i }) {
     n();
-    const e = o, p = s(
+    const e = o, m = s(
       () => u({
         nmorph: [a[e.height]],
-        "nmorph-tag-item": [`${e.design === "nmorph" ? "nmorph-design" : ""}`]
+        "nmorph-tag-item": [e.design]
       })
-    ), r = m, t = { props: e, modifiers: p, emit: r, closeHandler: () => {
+    ), r = i, t = { props: e, modifiers: m, emit: r, closeHandler: () => {
       r("close", e.value);
     }, get NmorphIcon() {
-      return d;
+      return c;
     }, get NmorphIconError() {
       return l;
     } };

package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphVirtualList.css';
-import { defineComponent as K, computed as t } from "vue";
+import { defineComponent as I, computed as t } from "vue";
+import { useVirtualList as K } from "../../../hooks/use-virtual-list.js";
 import { useModifiers as N } from "../../../utils/create-modifiers.js";
-import { toCssSize as p } from "../../../utils/common.js";
-import { useVirtualList as T } from "../../../hooks/use-virtual-list.js";
-const B = /* @__PURE__ */ K({
+import { createCssSizeVariables as T } from "../../../utils/common.js";
+const j = /* @__PURE__ */ I({
   __name: "NmorphVirtualList",
   props: {
     items: { type: Array, required: !1, default: () => [] },
@@ -17,45 +17,47 @@ const B = /* @__PURE__ */ K({
     itemTag: { type: String, required: !1, default: "div" }
   },
   emits: ["on-scroll"],
-  setup(y, { expose: h, emit: g }) {
-    const e = y, n = g, a = t(() => e.items), o = t(() => !e.disabled), l = t(() => e.itemHeight), u = t(() => e.overscan), m = t(() => e.dynamic), r = T(a, {
+  setup(p, { expose: y, emit: h }) {
+    const e = p, a = h, n = t(() => e.items), o = t(() => !e.disabled), l = t(() => e.itemHeight), u = t(() => e.overscan), m = t(() => e.dynamic), r = K(n, {
       enabled: o,
       itemHeight: l,
       overscan: u,
       dynamic: m
-    }), d = r.containerRef, v = t(
+    }), d = r.containerRef, g = t(
       () => N({
         "nmorph-virtual-list": [e.disabled && "disabled", e.dynamic && "dynamic"]
       })
-    ), b = t(() => ({
-      "--nmorph-virtual-list-height": p(e.height),
-      "--nmorph-virtual-list-max-height": p(e.maxHeight),
+    ), v = t(() => ({
+      ...T({
+        "--nmorph-virtual-list-height": e.height,
+        "--nmorph-virtual-list-max-height": e.maxHeight
+      }),
       "--nmorph-virtual-list-item-height": `${e.itemHeight}px`
-    })), S = t(() => ({
+    })), b = t(() => ({
       transform: o.value ? `translateY(${r.offsetTop.value}px)` : void 0
-    })), _ = t(() => ({
+    })), S = t(() => ({
       height: o.value ? `${r.totalHeight.value}px` : void 0
-    })), q = t(() => r.virtualItems.value), x = (i, s) => {
+    })), _ = t(() => r.virtualItems.value), q = (i, s) => {
       if (typeof e.itemKey == "function") return e.itemKey(i, s);
       if (typeof e.itemKey == "string" && i && typeof i == "object") {
         const f = i[e.itemKey];
         return f === void 0 ? s : String(f);
       }
       return s;
-    }, H = (i) => {
-      r.scrollHandler(), n("on-scroll", i);
-    }, I = (i, s) => {
+    }, x = (i) => {
+      r.scrollHandler(), a("on-scroll", i);
+    }, H = (i, s) => {
       r.measureElement(s, i);
     };
-    h({
+    y({
       containerRef: d,
       refresh: r.refresh,
       scrollToIndex: r.scrollToIndex
     });
-    const c = { props: e, emit: n, items: a, enabled: o, itemHeight: l, overscan: u, dynamic: m, virtualList: r, containerRef: d, modifiers: v, styles: b, contentStyle: S, spacerStyle: _, renderedItems: q, getItemKey: x, scrollHandler: H, setItemRef: I };
+    const c = { props: e, emit: a, items: n, enabled: o, itemHeight: l, overscan: u, dynamic: m, virtualList: r, containerRef: d, modifiers: g, styles: v, contentStyle: b, spacerStyle: S, renderedItems: _, getItemKey: q, scrollHandler: x, setItemRef: H };
     return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  B as default
+  j as default
 };

package/dist/components/feedback/nmorph-alert/NmorphAlert.vue2.js

@@ -1,14 +1,15 @@
 import './NmorphAlert.css';
-import { defineComponent as u, computed as l, useSlots as m } from "vue";
+import { defineComponent as m, computed as l, useSlots as u } from "vue";
 import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { NmorphAlertType as o } from "./types.js";
-import g from "../../../assets/icons/circle-close-filled.svg.js";
-import h from "../../../assets/icons/info-filled.svg.js";
-import I from "../../../assets/icons/warn-triangle-filled.svg.js";
-import q from "../../../assets/icons/success-filled.svg.js";
-import N from "../../../assets/icons/cross.svg.js";
-import b from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const x = /* @__PURE__ */ u({
+import { createCssVariables as g } from "../../../utils/common.js";
+import { NmorphAlertType as r } from "./types.js";
+import h from "../../../assets/icons/circle-close-filled.svg.js";
+import I from "../../../assets/icons/info-filled.svg.js";
+import q from "../../../assets/icons/warn-triangle-filled.svg.js";
+import N from "../../../assets/icons/success-filled.svg.js";
+import b from "../../../assets/icons/cross.svg.js";
+import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const M = /* @__PURE__ */ m({
   __name: "NmorphAlert",
   props: {
     id: { type: String, required: !1, default: void 0 },
@@ -24,30 +25,32 @@ const x = /* @__PURE__ */ u({
     backgroundColor: { type: String, required: !1, default: void 0 }
   },
   emits: ["close"],
-  setup(n, { expose: i, emit: s }) {
+  setup(s, { expose: i, emit: n }) {
     i();
-    const e = n, r = s, a = l(
+    const e = s, o = n, a = l(
       () => y({
         "nmorph-alert": [e.type, e.bordered && "bordered", e.fill && "fill"]
       })
-    ), d = l(() => ({
+    ), p = l(() => ({
       "--nmorph-alert-close-align": e.closeIconPosition,
-      ...e.backgroundColor !== void 0 && { "--background-color": e.backgroundColor }
-    })), p = () => {
-      r("close");
-    }, f = {
-      [o.success]: q,
-      [o.warning]: I,
-      [o.info]: h,
-      [o.error]: g
-    }, c = m(), t = { props: e, emit: r, modifiers: a, styles: d, closeHandler: p, iconNameMap: f, slots: c, get NmorphIcon() {
-      return b;
+      ...g({
+        "--background-color": e.backgroundColor
+      })
+    })), f = () => {
+      o("close");
+    }, d = {
+      [r.success]: N,
+      [r.warning]: q,
+      [r.info]: I,
+      [r.error]: h
+    }, c = u(), t = { props: e, emit: o, modifiers: a, styles: p, closeHandler: f, iconNameMap: d, slots: c, get NmorphIcon() {
+      return S;
     }, get NmorphIconCross() {
-      return N;
+      return b;
     } };
     return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  x as default
+  M as default
 };

package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphCallout.css';
-import { defineComponent as o, computed as l } from "vue";
-import { toCssSize as t } from "../../../utils/common.js";
-const s = /* @__PURE__ */ o({
+import { defineComponent as n, computed as l } from "vue";
+import { createCssVariables as o, createCssSizeVariables as u } from "../../../utils/common.js";
+const p = /* @__PURE__ */ n({
   __name: "NmorphCallout",
   props: {
     type: { type: String, required: !1, default: "info" },
@@ -15,20 +15,24 @@ const s = /* @__PURE__ */ o({
     titleFontSize: { type: [Number, String], required: !1, default: "var(--font-size-medium)" },
     contentFontSize: { type: [Number, String], required: !1, default: "var(--font-size-extra-small)" }
   },
-  setup(i, { expose: a }) {
+  setup(r, { expose: a }) {
     a();
-    const e = i, n = l(() => ({
-      "--callout-padding": t(e.padding),
-      "--callout-border-radius": t(e.borderRadius),
-      "--callout-accent-width": t(e.accentWidth),
-      "--callout-title-gap": t(e.titleGap),
-      "--callout-title-font-size": t(e.titleFontSize),
-      "--callout-content-font-size": t(e.contentFontSize),
-      ...e.color !== void 0 && { "--callout-color": e.color }
-    })), r = { props: e, styles: n };
-    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
+    const e = r, i = l(() => ({
+      ...u({
+        "--callout-padding": e.padding,
+        "--callout-border-radius": e.borderRadius,
+        "--callout-accent-width": e.accentWidth,
+        "--callout-title-gap": e.titleGap,
+        "--callout-title-font-size": e.titleFontSize,
+        "--callout-content-font-size": e.contentFontSize
+      }),
+      ...o({
+        "--callout-color": e.color
+      })
+    })), t = { props: e, styles: i };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  s as default
+  p as default
 };