@nmorph/nmorph-ui-kit 2.2.19 → 2.2.20

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

@@ -1,9 +1,9 @@
 import './NmorphTable.css';
 import p from "./NmorphTable.vue2.js";
-import { openBlock as r, createElementBlock as t, normalizeClass as _, createElementVNode as o, Fragment as a, renderList as i, normalizeStyle as d, toDisplayString as s, createBlock as m, createCommentVNode as y, renderSlot as h } from "vue";
+import { openBlock as r, createElementBlock as t, normalizeStyle as a, normalizeClass as _, createElementVNode as o, Fragment as d, renderList as i, toDisplayString as s, createBlock as m, createCommentVNode as y, renderSlot as h } from "vue";
 /* empty css                 */
-import u from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = { class: "nmorph-table__wrapper" }, w = { class: "nmorph-table__header" }, f = ["data-src"], g = { class: "nmorph-table__table-row" }, k = { class: "nmorph-table__cell" }, x = ["tabindex"], S = ["id"], R = { class: "nmorph-table__slot-columns" }, W = ["id"], B = { class: "nmorph-table__slot-columns" };
+import v from "../../../_virtual/_plugin-vue_export-helper.js";
+const u = { class: "nmorph-table__wrapper" }, w = { class: "nmorph-table__header" }, f = ["data-src"], g = { class: "nmorph-table__table-row" }, k = { class: "nmorph-table__cell" }, x = ["tabindex"], S = ["id"], R = { class: "nmorph-table__slot-columns" }, W = ["id"], B = { class: "nmorph-table__slot-columns" };
 function E(c, H, N, l, C, I) {
   return r(), t("div", null, [
     (r(), t(
@@ -11,18 +11,19 @@ function E(c, H, N, l, C, I) {
       {
         ref: "nmorphDOMTable",
         key: l.key,
-        class: _(l.modifiers)
+        class: _(l.modifiers),
+        style: a(l.tableStyle)
       },
       [
-        o("div", v, [
+        o("div", u, [
           o("table", w, [
             o("colgroup", null, [
               (r(!0), t(
-                a,
+                d,
                 null,
                 i(l.columns, (e) => (r(), t("col", {
                   key: e.prop,
-                  style: d({ width: `${l.getWidth(e.width)}px` }),
+                  style: a({ width: `${l.getWidth(e.width)}px` }),
                   "data-src": `${l.getWidth(e.width)}px`
                 }, null, 12, f))),
                 128
@@ -32,7 +33,7 @@ function E(c, H, N, l, C, I) {
             o("thead", null, [
               o("tr", g, [
                 (r(!0), t(
-                  a,
+                  d,
                   null,
                   i(l.columns, (e, b) => (r(), t(
                     "th",
@@ -45,7 +46,7 @@ function E(c, H, N, l, C, I) {
                         o(
                           "div",
                           {
-                            style: d({ "justify-content": e.alignment }),
+                            style: a({ "justify-content": e.alignment }),
                             class: "nmorph-table__cell-content"
                           },
                           [
@@ -79,8 +80,11 @@ function E(c, H, N, l, C, I) {
           ]),
           o("div", {
             ref: l.virtualList.containerRef,
-            class: _(["nmorph-table__body", { "nmorph-table__body--virtual": l.virtualEnabled, "nmorph-table__body--dynamic": l.props.virtualDynamicHeight }]),
-            style: d(l.tableBodyStyle),
+            class: _(["nmorph-table__body", {
+              "nmorph-table__body--virtual": l.virtualEnabled,
+              "nmorph-table__body--dynamic": l.props.virtualDynamicHeight
+            }]),
+            style: a(l.tableBodyStyle),
             tabindex: l.virtualEnabled ? 0 : void 0,
             role: "grid",
             onKeydown: l.tableKeydownHandler,
@@ -91,26 +95,26 @@ function E(c, H, N, l, C, I) {
               {
                 key: 0,
                 class: "nmorph-table__virtual-spacer",
-                style: d(l.virtualSpacerStyle)
+                style: a(l.virtualSpacerStyle)
               },
               [
                 o(
                   "div",
                   {
                     class: "nmorph-table__virtual-content",
-                    style: d(l.virtualContentStyle)
+                    style: a(l.virtualContentStyle)
                   },
                   [
                     o("table", null, [
                       o("colgroup", null, [
                         (r(!0), t(
-                          a,
+                          d,
                           null,
                           i(l.columns, (e) => (r(), t(
                             "col",
                             {
                               key: e.prop,
-                              style: d({ width: `${l.getWidth(e.width)}px` })
+                              style: a({ width: `${l.getWidth(e.width)}px` })
                             },
                             null,
                             4
@@ -122,7 +126,7 @@ function E(c, H, N, l, C, I) {
                       ]),
                       o("tbody", null, [
                         (r(!0), t(
-                          a,
+                          d,
                           null,
                           i(l.renderedRows, (e, b) => (r(), t(
                             "tr",
@@ -138,7 +142,7 @@ function E(c, H, N, l, C, I) {
                             },
                             [
                               (r(!0), t(
-                                a,
+                                d,
                                 null,
                                 i(l.columns, (n) => (r(), t(
                                   "td",
@@ -149,7 +153,7 @@ function E(c, H, N, l, C, I) {
                                   [
                                     o("div", {
                                       id: `table-cell-${l.tableIdentifier}-${b}-${n.prop}`,
-                                      style: d({ "text-align": n.alignment }),
+                                      style: a({ "text-align": n.alignment }),
                                       class: "nmorph-table__cell nmorph-table__cell--data"
                                     }, s(l.tableData(e.item[n.prop])), 13, S)
                                   ],
@@ -171,13 +175,13 @@ function E(c, H, N, l, C, I) {
                     o("table", null, [
                       o("colgroup", null, [
                         (r(!0), t(
-                          a,
+                          d,
                           null,
                           i(l.columns, (e) => (r(), t(
                             "col",
                             {
                               key: e.prop,
-                              style: d({ width: `${l.getWidth(e.width)}px` })
+                              style: a({ width: `${l.getWidth(e.width)}px` })
                             },
                             null,
                             4
@@ -199,19 +203,19 @@ function E(c, H, N, l, C, I) {
               4
               /* STYLE */
             )) : (r(), t(
-              a,
+              d,
               { key: 1 },
               [
                 o("table", null, [
                   o("colgroup", null, [
                     (r(!0), t(
-                      a,
+                      d,
                       null,
                       i(l.columns, (e) => (r(), t(
                         "col",
                         {
                           key: e.prop,
-                          style: d({ width: `${l.getWidth(e.width)}px` })
+                          style: a({ width: `${l.getWidth(e.width)}px` })
                         },
                         null,
                         4
@@ -223,7 +227,7 @@ function E(c, H, N, l, C, I) {
                   ]),
                   o("tbody", null, [
                     (r(!0), t(
-                      a,
+                      d,
                       null,
                       i(l.renderedRows, (e, b) => (r(), t(
                         "tr",
@@ -233,7 +237,7 @@ function E(c, H, N, l, C, I) {
                         },
                         [
                           (r(!0), t(
-                            a,
+                            d,
                             null,
                             i(l.columns, (n) => (r(), t(
                               "td",
@@ -244,7 +248,7 @@ function E(c, H, N, l, C, I) {
                               [
                                 o("div", {
                                   id: `table-cell-${l.tableIdentifier}-${b}-${n.prop}`,
-                                  style: d({ "text-align": n.alignment }),
+                                  style: a({ "text-align": n.alignment }),
                                   class: "nmorph-table__cell nmorph-table__cell--data"
                                 }, s(l.tableData(e.item[n.prop])), 13, W)
                               ],
@@ -266,13 +270,13 @@ function E(c, H, N, l, C, I) {
                 o("table", null, [
                   o("colgroup", null, [
                     (r(!0), t(
-                      a,
+                      d,
                       null,
                       i(l.columns, (e) => (r(), t(
                         "col",
                         {
                           key: e.prop,
-                          style: d({ width: `${l.getWidth(e.width)}px` })
+                          style: a({ width: `${l.getWidth(e.width)}px` })
                         },
                         null,
                         4
@@ -293,12 +297,12 @@ function E(c, H, N, l, C, I) {
           ], 46, x)
         ])
       ],
-      2
-      /* CLASS */
+      6
+      /* CLASS, STYLE */
     ))
   ]);
 }
-const K = /* @__PURE__ */ u(p, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
+const K = /* @__PURE__ */ v(p, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
 export {
   K as default
 };

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

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

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

@@ -3,27 +3,27 @@ import m from "./NmorphAlert.vue2.js";
 import { openBlock as e, createElementBlock as r, normalizeStyle as _, normalizeClass as d, createElementVNode as t, renderSlot as s, createVNode as i, withCtx as c, createBlock as h, resolveDynamicComponent as f, createCommentVNode as l, createTextVNode as a, toDisplayString as p } from "vue";
 /* empty css                 */
 import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const k = ["innerHTML"], y = {
+const y = ["innerHTML"], k = {
   key: 1,
   class: "nmorph-alert__wrapper"
 }, N = { class: "nmorph-alert__left-side" }, w = {
   key: 0,
   class: "nmorph-alert__icon"
-}, C = { class: "nmorph-alert__content-wrapper" }, I = { class: "nmorph-alert__content-title" }, b = { class: "nmorph-alert__content" };
-function x(n, V, g, o, z, B) {
+}, C = { class: "nmorph-alert__content-wrapper" }, b = { class: "nmorph-alert__content-title" }, x = { class: "nmorph-alert__content" };
+function I(n, V, z, o, B, H) {
   return o.slots.default || o.props.title || o.props.content || o.props.html ? (e(), r(
     "div",
     {
       key: 0,
       class: d(o.modifiers),
-      style: _({ "--nmorph-alert-close-align": o.props.closeIconPosition })
+      style: _(o.styles)
     },
     [
       o.props.html ? (e(), r("div", {
         key: 0,
         class: "nmorph-alert__html-wrapper",
         innerHTML: o.props.html
-      }, null, 8, k)) : (e(), r("div", y, [
+      }, null, 8, y)) : (e(), r("div", k, [
         t("div", N, [
           o.props.showIcon ? (e(), r("div", w, [
             s(n.$slots, "icon", {}, () => [
@@ -37,7 +37,7 @@ function x(n, V, g, o, z, B) {
             ])
           ])) : l("v-if", !0),
           t("div", C, [
-            t("div", I, [
+            t("div", b, [
               o.props.title || o.slots.title ? s(n.$slots, "title", { key: 0 }, () => [
                 a(
                   p(o.props.title),
@@ -46,7 +46,7 @@ function x(n, V, g, o, z, B) {
                 )
               ]) : l("v-if", !0)
             ]),
-            t("div", b, [
+            t("div", x, [
               s(n.$slots, "default", {}, () => [
                 a(
                   p(o.props.content),
@@ -79,7 +79,7 @@ function x(n, V, g, o, z, B) {
     /* CLASS, STYLE */
   )) : l("v-if", !0);
 }
-const A = /* @__PURE__ */ v(m, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-alert/NmorphAlert.vue"]]);
+const A = /* @__PURE__ */ v(m, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-alert/NmorphAlert.vue"]]);
 export {
   A as default
 };

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

@@ -1,14 +1,14 @@
 import './NmorphAlert.css';
-import { defineComponent as d, computed as m, useSlots as u } from "vue";
-import { useModifiers as c } from "../../../utils/create-modifiers.js";
-import { NmorphAlertType as r } from "./types.js";
-import y from "../../../assets/icons/circle-close-filled.svg.js";
+import { defineComponent as u, computed as l, useSlots as m } 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 N from "../../../assets/icons/success-filled.svg.js";
-import q from "../../../assets/icons/cross.svg.js";
-import _ from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-const A = /* @__PURE__ */ d({
+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({
   __name: "NmorphAlert",
   props: {
     id: { type: String, required: !1, default: void 0 },
@@ -20,30 +20,34 @@ const A = /* @__PURE__ */ d({
     showIcon: { type: Boolean, required: !1, default: !0 },
     bordered: { type: Boolean, required: !1, default: !0 },
     html: { type: String, required: !1, default: "" },
-    closeIconPosition: { type: String, required: !1, default: "center" }
+    closeIconPosition: { type: String, required: !1, default: "center" },
+    backgroundColor: { type: String, required: !1, default: void 0 }
   },
   emits: ["close"],
-  setup(l, { expose: i, emit: n }) {
+  setup(n, { expose: i, emit: s }) {
     i();
-    const e = l, o = n, s = m(
-      () => c({
+    const e = n, r = s, a = l(
+      () => y({
         "nmorph-alert": [e.type, `${e.bordered && "bordered"}`, `${e.fill && "fill"}`]
       })
-    ), p = () => {
-      o("close");
+    ), d = l(() => ({
+      "--nmorph-alert-close-align": e.closeIconPosition,
+      ...e.backgroundColor !== void 0 && { "--background-color": e.backgroundColor }
+    })), p = () => {
+      r("close");
     }, f = {
-      [r.success]: N,
-      [r.warning]: I,
-      [r.info]: h,
-      [r.error]: y
-    }, a = u(), t = { props: e, emit: o, modifiers: s, closeHandler: p, iconNameMap: f, slots: a, get NmorphIcon() {
-      return _;
+      [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;
     }, get NmorphIconCross() {
-      return q;
+      return N;
     } };
     return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  A as default
+  x as default
 };

package/dist/components/feedback/nmorph-callout/NmorphCallout.css

@@ -1 +1 @@
-.nmorph-callout{--callout-color: var(--nmorph-accent-color);position:relative;margin-bottom:12px;padding:8px 12px;overflow:hidden;border-radius:4px}.nmorph-callout:before{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:8px;font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:pre-wrap}
+.nmorph-callout{--callout-color: var(--nmorph-accent-color);position:relative;padding:8px 12px;overflow:hidden;border-radius:4px}.nmorph-callout:before{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--callout-color);content:""}.nmorph-callout:after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--callout-color);opacity:.2;content:""}.nmorph-callout.nmorph-callout--warning{--callout-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--callout-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--callout-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:8px;font-weight:600;font-size:var(--font-size-medium);line-height:var(--line-height-loose)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:pre-wrap}

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

@@ -1,36 +1,37 @@
 import './NmorphCallout.css';
 import r from "./NmorphCallout.vue2.js";
-import { openBlock as t, createElementBlock as e, normalizeClass as l, toDisplayString as n, createCommentVNode as c, createElementVNode as p } from "vue";
+import { openBlock as t, createElementBlock as e, normalizeStyle as l, normalizeClass as n, toDisplayString as c, createCommentVNode as s, createElementVNode as a } from "vue";
 /* empty css                   */
-import a from "../../../_virtual/_plugin-vue_export-helper.js";
-const i = {
+import i from "../../../_virtual/_plugin-vue_export-helper.js";
+const p = {
   key: 0,
   class: "nmorph-callout__title"
-}, s = ["innerHTML"];
-function m(_, d, f, o, h, u) {
+}, m = ["innerHTML"];
+function _(d, f, h, o, u, y) {
   return t(), e(
     "div",
     {
-      class: l(["nmorph-callout", `nmorph-callout--${o.props.type}`])
+      class: n(["nmorph-callout", `nmorph-callout--${o.props.type}`]),
+      style: l(o.styles)
     },
     [
       o.props.title ? (t(), e(
         "div",
-        i,
-        n(o.props.title),
+        p,
+        c(o.props.title),
         1
         /* TEXT */
-      )) : c("v-if", !0),
-      p("div", {
+      )) : s("v-if", !0),
+      a("div", {
         class: "nmorph-callout__content",
         innerHTML: o.props.content
-      }, null, 8, s)
+      }, null, 8, m)
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const N = /* @__PURE__ */ a(r, [["render", m], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
+const b = /* @__PURE__ */ i(r, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-callout/NmorphCallout.vue"]]);
 export {
-  N as default
+  b as default
 };

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

@@ -1,18 +1,21 @@
 import './NmorphCallout.css';
-import { defineComponent as p } from "vue";
-const u = /* @__PURE__ */ p({
+import { defineComponent as n, computed as p } from "vue";
+const i = /* @__PURE__ */ n({
   __name: "NmorphCallout",
   props: {
     type: { type: String, required: !1, default: "info" },
     title: { type: String, required: !1, default: "" },
-    content: { type: String, required: !0 }
+    content: { type: String, required: !0 },
+    color: { type: String, required: !1, default: void 0 }
   },
-  setup(t, { expose: r }) {
-    r();
-    const e = { props: t };
-    return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
+  setup(r, { expose: o }) {
+    o();
+    const e = r, l = p(() => ({
+      ...e.color !== void 0 && { "--callout-color": e.color }
+    })), t = { props: e, styles: l };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  u as default
+  i as default
 };

package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.css

@@ -1 +1 @@
-.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;width:var(--width);max-width:var(--max-width);height:var(--height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-tooltip-width)}
+.nmorph-tooltip{--max-width: 120px;--width: fit-content;--height: fit-content;display:inline-block}.nmorph-tooltip .nmorph-tooltip__content{position:relative}.nmorph-tooltip .nmorph-tooltip__info-content{position:absolute;z-index:var(--nmorph-tooltip-z-index);width:var(--width);max-width:var(--max-width);height:var(--height);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:0 0 20px var(--nmorph-dark-shade-color)}.nmorph-tooltip span{white-space:nowrap}.nmorph-tooltip .nmorph-tooltip__triangle{position:absolute;width:0;height:0;border-style:solid;content:""}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__info-content{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--top .nmorph-tooltip__triangle{top:100%;left:50%;border-width:8px 8px 0;border-color:var(--nmorph-main-color) transparent transparent transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__info-content{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--right .nmorph-tooltip__triangle{top:50%;right:100%;border-width:8px 8px 8px 0;border-color:transparent var(--nmorph-main-color) transparent transparent;transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__info-content{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--bottom .nmorph-tooltip__triangle{bottom:100%;left:50%;border-width:0 8px 8px;border-color:transparent transparent var(--nmorph-main-color) transparent;transform:translate(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__info-content{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--left .nmorph-tooltip__triangle{top:50%;left:100%;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--nmorph-main-color);transform:translateY(-50%)}.nmorph-tooltip.nmorph-tooltip--force-coords .nmorph-tooltip__info-content{transform:none}.nmorph-tooltip{width:var(--nmorph-tooltip-width)}