@nmorph/nmorph-ui-kit 2.2.19 → 2.2.21

package/dist/assets/icons/circle-close.svg.js

@@ -1,10 +1,10 @@
-import { openBlock as l, createElementBlock as o, createElementVNode as t } from "vue";
+import { openBlock as o, createElementBlock as l, createElementVNode as t } from "vue";
 const n = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
 function r(a, e) {
-  return l(), o("svg", n, [...e[0] || (e[0] = [
+  return o(), l("svg", n, [...e[0] || (e[0] = [
     t(
       "path",
       { d: "m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z" },
@@ -21,8 +21,8 @@ function r(a, e) {
     )
   ])]);
 }
-const s = { render: r };
+const m = { render: r };
 export {
-  s as default,
+  m as default,
   r as render
 };

package/dist/assets/icons/clock.svg.js

@@ -1,10 +1,10 @@
-import { openBlock as n, createElementBlock as o, createElementVNode as t } from "vue";
+import { openBlock as o, createElementBlock as n, createElementVNode as t } from "vue";
 const l = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
 function r(a, e) {
-  return n(), o("svg", l, [...e[0] || (e[0] = [
+  return o(), n("svg", l, [...e[0] || (e[0] = [
     t(
       "path",
       { d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896" },

package/dist/assets/icons/folder-opened.svg.js

@@ -1,11 +1,11 @@
-import { openBlock as t, createElementBlock as o, createElementVNode as l } from "vue";
-const n = {
+import { openBlock as o, createElementBlock as t, createElementVNode as n } from "vue";
+const r = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
-function r(a, e) {
-  return t(), o("svg", n, [...e[0] || (e[0] = [
-    l(
+function l(a, e) {
+  return o(), t("svg", r, [...e[0] || (e[0] = [
+    n(
       "path",
       { d: "M878.08 448H241.92l-96 384h636.16zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 0 1 216.96 384zm-24.96 512H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h287.872l128.384 128H864a32 32 0 0 1 32 32v96h23.04a32 32 0 0 1 31.04 39.744l-112 448A32 32 0 0 1 807.04 896" },
       null,
@@ -14,8 +14,8 @@ function r(a, e) {
     )
   ])]);
 }
-const s = { render: r };
+const c = { render: l };
 export {
-  s as default,
-  r as render
+  c as default,
+  l as render
 };

package/dist/assets/icons/forward-filled.svg.js

@@ -0,0 +1,21 @@
+import { openBlock as t, createElementBlock as o, createElementVNode as r } from "vue";
+const n = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function l(a, e) {
+  return t(), o("svg", n, [...e[0] || (e[0] = [
+    r(
+      "path",
+      { d: "M582.4 265.6A32 32 0 0 0 528 288v96h-96c-199.424 0-329.792 133.952-375.168 376.896a32 32 0 0 0 59.968 20.928C193.536 652.8 294.08 608 432 608h96v128a32 32 0 0 0 54.4 22.4l256-224a32 32 0 0 0 0-48z" },
+      null,
+      -1
+      /* CACHED */
+    )
+  ])]);
+}
+const c = { render: l };
+export {
+  c as default,
+  l as render
+};

package/dist/assets/icons/forward.svg.js

@@ -0,0 +1,24 @@
+import { openBlock as t, createElementBlock as o, createElementVNode as n } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function l(c, e) {
+  return t(), o("svg", r, [...e[0] || (e[0] = [
+    n(
+      "path",
+      {
+        fill: "none",
+        d: "m576 288 224 224-224 224m192-224H480c-154.667 0-256 101.333-256 256"
+      },
+      null,
+      -1
+      /* CACHED */
+    )
+  ])]);
+}
+const m = { render: l };
+export {
+  m as default,
+  l as render
+};

package/dist/assets/icons/reply-filled.svg.js

@@ -0,0 +1,21 @@
+import { openBlock as t, createElementBlock as o, createElementVNode as r } from "vue";
+const l = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function n(a, e) {
+  return t(), o("svg", l, [...e[0] || (e[0] = [
+    r(
+      "path",
+      { d: "M441.6 265.6A32 32 0 0 1 496 288v96h96c199.424 0 329.792 133.952 375.168 376.896a32 32 0 0 1-59.968 20.928C830.464 652.8 729.92 608 592 608h-96v128a32 32 0 0 1-54.4 22.4l-256-224a32 32 0 0 1 0-48z" },
+      null,
+      -1
+      /* CACHED */
+    )
+  ])]);
+}
+const d = { render: n };
+export {
+  d as default,
+  n as render
+};

package/dist/assets/icons/reply.svg.js

@@ -0,0 +1,24 @@
+import { openBlock as t, createElementBlock as n, createElementVNode as o } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function l(c, e) {
+  return t(), n("svg", r, [...e[0] || (e[0] = [
+    o(
+      "path",
+      {
+        fill: "none",
+        d: "M448 288 224 512l224 224M256 512h288c154.667 0 256 101.333 256 256"
+      },
+      null,
+      -1
+      /* CACHED */
+    )
+  ])]);
+}
+const d = { render: l };
+export {
+  d as default,
+  l as render
+};

package/dist/assets/icons/send-filled.svg.js

@@ -0,0 +1,21 @@
+import { openBlock as t, createElementBlock as n, createElementVNode as o } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function l(d, e) {
+  return t(), n("svg", r, [...e[0] || (e[0] = [
+    o(
+      "path",
+      { d: "m64 448 832-320-128 704-446.08-243.328L832 192 242.816 545.472zm256 512V657.024L512 768z" },
+      null,
+      -1
+      /* CACHED */
+    )
+  ])]);
+}
+const m = { render: l };
+export {
+  m as default,
+  l as render
+};

package/dist/assets/icons/send.svg.js

@@ -0,0 +1,21 @@
+import { openBlock as t, createElementBlock as n, createElementVNode as o } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function l(s, e) {
+  return t(), n("svg", r, [...e[0] || (e[0] = [
+    o(
+      "path",
+      { d: "m249.6 417.088 319.744 43.072 39.168 310.272L845.12 178.88zm-129.024 47.168a32 32 0 0 1-7.68-61.44l777.792-311.04a32 32 0 0 1 41.6 41.6l-310.336 775.68a32 32 0 0 1-61.44-7.808L512 516.992z" },
+      null,
+      -1
+      /* CACHED */
+    )
+  ])]);
+}
+const d = { render: l };
+export {
+  d as default,
+  l as render
+};

package/dist/components/basic/nmorph-button/NmorphButton.css

@@ -1 +1 @@
-.nmorph-button{display:inline-block;width:auto}.nmorph-button.nmorph--fill{width:100%}.nmorph-button .nmorph-button__content{display:flex;gap:var(--indentation-02);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--height);padding:var(--indentation-00) var(--indentation-04);line-height:0;background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);color:var(--nmorph-button-color, var(--nmorph-text-color));cursor:pointer}.nmorph-button .nmorph-button__content span{color:var(--nmorph-button-color, var(--nmorph-text-color));--color: var(--nmorph-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content>.nmorph-icon{flex-shrink:0;--color: var(--nmorph-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content:disabled{pointer-events:none}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button.nmorph-button--ripple .nmorph-button__content:after{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,var(--nmorph-main-color) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s;content:""}.nmorph-button.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover{background:var(--nmorph-accent-color);color:var(--nmorph-white-color);box-shadow:none}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-white-color)}.nmorph-button.nmorph-button--round .nmorph-button__content{border-radius:var(--border-radius-200)}.nmorph-button.nmorph-button--circle{width:var(--height)}.nmorph-button.nmorph-button--circle .nmorph-button__content{border-radius:var(--border-radius-circular)}.nmorph-button.nmorph-button--transparent{padding:var(--indentation-00)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-accent-color);background:transparent;box-shadow:none}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-accent-color)}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-button-hover-color);--color: var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-accent-color)}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content{color:var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)));background:transparent;box-shadow:none}.nmorph-button.nmorph-button--transparent .nmorph-button__content span{color:var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)));--color: var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))}.nmorph-button.nmorph-button--transparent .nmorph-button__content .nmorph-icon{--color: var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))}.nmorph-button.nmorph-button--square,.nmorph-button.nmorph-button--icon-only{width:var(--height);height:var(--height)}.nmorph-button.nmorph-button--icon-only .nmorph-button__content{padding:0}.nmorph-button.nmorph-button.nmorph--thin-component{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-button.nmorph-button--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-button{display:inline-block;width:auto}.nmorph-button.nmorph--fill{width:100%}.nmorph-button .nmorph-button__content{display:flex;gap:var(--indentation-02);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--height);padding:var(--indentation-00) var(--indentation-04);color:var(--nmorph-button-color, var(--nmorph-text-color));line-height:0;background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);cursor:pointer}.nmorph-button .nmorph-button__content span{color:var(--nmorph-button-color, var(--nmorph-text-color));--color: var(--nmorph-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content>.nmorph-icon{flex-shrink:0;--color: var(--nmorph-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content:disabled{pointer-events:none}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button.nmorph-button--ripple .nmorph-button__content:after{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,var(--nmorph-main-color) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s;content:""}.nmorph-button.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-white-color)}.nmorph-button.nmorph-button--round .nmorph-button__content{border-radius:var(--border-radius-200)}.nmorph-button.nmorph-button--circle{width:var(--height)}.nmorph-button.nmorph-button--circle .nmorph-button__content{border-radius:var(--border-radius-circular)}.nmorph-button.nmorph-button--transparent{padding:var(--indentation-00)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-accent-color);background:transparent;box-shadow:none}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-accent-color)}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-button-hover-color);--color: var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-accent-color)}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content{color:var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)));background:transparent;box-shadow:none}.nmorph-button.nmorph-button--transparent .nmorph-button__content span{color:var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)));--color: var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))}.nmorph-button.nmorph-button--transparent .nmorph-button__content .nmorph-icon{--color: var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))}.nmorph-button.nmorph-button--square,.nmorph-button.nmorph-button--icon-only{width:var(--height);height:var(--height)}.nmorph-button.nmorph-button--icon-only .nmorph-button__content{padding:0}.nmorph-button.nmorph-button.nmorph--thin-component{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-button.nmorph-button--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/basic/nmorph-link/NmorphLink.vue.js

@@ -1,14 +1,15 @@
 import './NmorphLink.css';
 import i from "./NmorphLink.vue2.js";
-import { openBlock as t, createElementBlock as s, normalizeClass as a, createElementVNode as c, renderSlot as r, createTextVNode as l, toDisplayString as m, createBlock as p, withCtx as d, createCommentVNode as f } from "vue";
+import { openBlock as t, createElementBlock as s, normalizeStyle as l, normalizeClass as a, createElementVNode as c, renderSlot as r, createTextVNode as m, toDisplayString as p, createBlock as d, withCtx as f, createCommentVNode as h } from "vue";
 /* empty css                */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const _ = ["href", "target"];
-function k(o, N, n, e, g, x) {
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+const k = ["href", "target"];
+function y(o, N, n, e, g, x) {
   return t(), s(
     "div",
     {
-      class: a(e.modifiers)
+      class: a(e.modifiers),
+      style: l(e.styles)
     },
     [
       c("a", {
@@ -16,31 +17,31 @@ function k(o, N, n, e, g, x) {
         target: e.props.target
       }, [
         r(o.$slots, "prepend"),
-        l(
-          " " + m(n.text) + " ",
+        m(
+          " " + p(n.text) + " ",
           1
           /* TEXT */
         ),
-        e.slots.icon ? (t(), p(e.NmorphIcon, {
+        e.slots.icon ? (t(), d(e.NmorphIcon, {
           key: 0,
           class: "nmorph-link__icon",
           width: "10px",
           height: "10px"
         }, {
-          default: d(() => [
+          default: f(() => [
             r(o.$slots, "icon")
           ]),
           _: 3
           /* FORWARDED */
-        })) : f("v-if", !0),
+        })) : h("v-if", !0),
         r(o.$slots, "default")
-      ], 8, _)
+      ], 8, k)
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const B = /* @__PURE__ */ h(i, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-link/NmorphLink.vue"]]);
+const C = /* @__PURE__ */ _(i, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-link/NmorphLink.vue"]]);
 export {
-  B as default
+  C as default
 };

package/dist/components/basic/nmorph-link/NmorphLink.vue2.js

@@ -1,30 +1,33 @@
 import './NmorphLink.css';
-import { defineComponent as s, useSlots as i, computed as p } from "vue";
-import { useModifiers as u } from "../../../utils/create-modifiers.js";
-import { NmorphColor as a } from "../../../types/index.js";
-import d from "../nmorph-icon/NmorphIcon.vue.js";
-const y = /* @__PURE__ */ s({
+import { defineComponent as d, useSlots as u, computed as t } from "vue";
+import { useModifiers as a } from "../../../utils/create-modifiers.js";
+import { NmorphColor as p } from "../../../types/index.js";
+import f from "../nmorph-icon/NmorphIcon.vue.js";
+const q = /* @__PURE__ */ d({
   __name: "NmorphLink",
   props: {
-    type: { type: null, required: !1, default: a.accent },
+    type: { type: null, required: !1, default: p.accent },
     underline: { type: Boolean, required: !1, default: !1 },
     href: { type: String, required: !1, default: "" },
     text: { type: String, required: !1, default: "" },
     target: { type: null, required: !1, default: "self" },
-    disabled: { type: Boolean, required: !1, default: !1 }
+    disabled: { type: Boolean, required: !1, default: !1 },
+    color: { type: String, required: !1, default: void 0 }
   },
-  setup(t, { expose: o }) {
-    o();
-    const e = t, l = i(), n = p(
-      () => u({
+  setup(o, { expose: l }) {
+    l();
+    const e = o, n = u(), s = t(
+      () => a({
         "nmorph-link": [e.type, `${e.underline && "underline"}`, `${e.disabled && "disabled"}`]
       })
-    ), r = { props: e, slots: l, modifiers: n, get NmorphIcon() {
-      return d;
+    ), i = t(() => ({
+      ...e.color !== void 0 && { "--link-color": e.color }
+    })), r = { props: e, slots: n, modifiers: s, styles: i, get NmorphIcon() {
+      return f;
     } };
     return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
 });
 export {
-  y as default
+  q as default
 };

package/dist/components/data/nmorph-badge/NmorphBadge.css

@@ -1 +1 @@
-.nmorph-badge{position:relative;display:inline-block;height:fit-content;--dot-size: 4px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--border-radius-circular)}
+.nmorph-badge{position:relative;display:inline-block;height:fit-content;--dot-size: 4px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--border-radius-circular)}

package/dist/components/data/nmorph-badge/NmorphBadge.vue.js

@@ -1,8 +1,8 @@
 import './NmorphBadge.css';
-import p from "./NmorphBadge.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeStyle as i, normalizeClass as d, renderSlot as l, createCommentVNode as s, Fragment as c, createTextVNode as n, toDisplayString as t } from "vue";
+import m from "./NmorphBadge.vue2.js";
+import { openBlock as o, createElementBlock as a, normalizeStyle as i, normalizeClass as d, renderSlot as s, createCommentVNode as l, Fragment as c, createTextVNode as t, toDisplayString as n } from "vue";
 /* empty css                 */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
+import p from "../../../_virtual/_plugin-vue_export-helper.js";
 const y = {
   key: 0,
   class: "nmorph-badge__dot"
@@ -10,45 +10,45 @@ const y = {
   key: 1,
   class: "nmorph-badge__content"
 };
-function g(a, _, h, o, k, v) {
-  return !o.props.disabled && (!o.props.isTag || o.shouldShowBadge) ? (e(), r(
+function _(r, g, h, e, k, v) {
+  return !e.props.disabled && (!e.props.isTag || e.shouldShowBadge) ? (o(), a(
     "div",
     {
       key: 0,
-      class: d(o.modifiers),
-      style: i({ "--nmorph-badge-color": o.props.color })
+      class: d(e.modifiers),
+      style: i(e.styles)
     },
     [
-      o.props.isTag ? s("v-if", !0) : l(a.$slots, "default", { key: 0 }),
-      o.shouldShowBadge ? (e(), r(
+      e.props.isTag ? l("v-if", !0) : s(r.$slots, "default", { key: 0 }),
+      e.shouldShowBadge ? (o(), a(
         "div",
         {
           key: 1,
           ref: "badge",
-          class: d(o.containerModifiers),
-          style: i(o.containerStyle)
+          class: d(e.containerModifiers),
+          style: i(e.containerStyle)
         },
         [
-          o.props.isDot ? (e(), r("div", y)) : (e(), r("div", f, [
-            o.props.isTag ? (e(), r(
+          e.props.isDot ? (o(), a("div", y)) : (o(), a("div", f, [
+            e.props.isTag ? (o(), a(
               c,
               { key: 0 },
               [
-                n(
-                  t(o.displayValue),
+                t(
+                  n(e.displayValue),
                   1
                   /* TEXT */
                 )
               ],
               64
               /* STABLE_FRAGMENT */
-            )) : l(a.$slots, "value", {
+            )) : s(r.$slots, "value", {
               key: 1,
-              value: o.props.value,
-              displayValue: o.displayValue
+              value: e.props.value,
+              displayValue: e.displayValue
             }, () => [
-              n(
-                t(o.displayValue),
+              t(
+                n(e.displayValue),
                 1
                 /* TEXT */
               )
@@ -57,13 +57,13 @@ function g(a, _, h, o, k, v) {
         ],
         6
         /* CLASS, STYLE */
-      )) : s("v-if", !0)
+      )) : l("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
-  )) : o.props.isTag ? s("v-if", !0) : l(a.$slots, "default", { key: 1 });
+  )) : e.props.isTag ? l("v-if", !0) : s(r.$slots, "default", { key: 1 });
 }
-const T = /* @__PURE__ */ m(p, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
+const T = /* @__PURE__ */ p(m, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
 export {
   T as default
 };

package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphBadge.css';
-import { defineComponent as b, computed as a, ref as n, onMounted as h, watch as _, nextTick as q } from "vue";
-import { useModifiers as l } from "../../../utils/create-modifiers.js";
-const S = /* @__PURE__ */ b({
+import { defineComponent as z, computed as t, ref as n, onMounted as S, watch as q, nextTick as _ } from "vue";
+import { useModifiers as f } from "../../../utils/create-modifiers.js";
+const B = /* @__PURE__ */ z({
   __name: "NmorphBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 },
@@ -14,38 +14,42 @@ const S = /* @__PURE__ */ b({
     offsetY: { type: Number, required: !1, default: 0 },
     offsetX: { type: Number, required: !1, default: 0 },
     zIndex: { type: Number, required: !1, default: 1 },
-    disabled: { type: Boolean, required: !1, default: !1 }
+    disabled: { type: Boolean, required: !1, default: !1 },
+    dotSize: { type: [Number, String], required: !1, default: void 0 }
   },
-  setup(f, { expose: p }) {
-    p();
-    const e = f, c = a(
-      () => l({
+  setup(p, { expose: c }) {
+    c();
+    const e = p, m = t(
+      () => f({
         "nmorph-badge": [`${e.hidden && "hidden"}`, `${e.isTag && "tag"}`, e.size]
       })
-    ), m = a(
-      () => l({
+    ), g = t(
+      () => f({
         "nmorph-badge__container": [`${e.hidden && "hidden"}`, `${e.isTag && "tag"}`]
       })
-    ), g = a(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), v = a(() => e.isDot || e.value !== void 0), r = a(() => {
-      const d = `${(s?.value / 2 + e.offsetX) * -1}px`, y = `${(u?.value / 2 + e.offsetY) * -1}px`;
+    ), v = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), y = t(() => e.isDot || e.value !== void 0), o = t(() => {
+      const a = `${(i?.value / 2 + e.offsetX) * -1}px`, h = `${(s?.value / 2 + e.offsetY) * -1}px`;
       return {
-        x: d,
-        y
+        x: a,
+        y: h
       };
-    }), x = a(() => e.isTag ? {
+    }), b = t(() => e.isTag ? {
       zIndex: e.zIndex
     } : {
-      right: r.value.x,
-      top: r.value.y,
+      right: o.value.x,
+      top: o.value.y,
       zIndex: e.zIndex
-    }), t = n(null), s = n(0), u = n(0), i = async () => {
-      await q(), !(!t.value || e.isTag) && (s.value = t.value.clientWidth, u.value = t.value.clientHeight);
+    }), u = (a) => typeof a == "number" ? `${a}px` : a, x = t(() => ({
+      "--nmorph-badge-color": e.color,
+      ...e.dotSize !== void 0 && { "--dot-size": u(e.dotSize) }
+    })), r = n(null), i = n(0), s = n(0), d = async () => {
+      await _(), !(!r.value || e.isTag) && (i.value = r.value.clientWidth, s.value = r.value.clientHeight);
     };
-    h(i), _(() => [e.value, e.max, e.isDot, e.isTag, e.size], i);
-    const o = { props: e, modifiers: c, containerModifiers: m, displayValue: g, shouldShowBadge: v, appliedOffset: r, containerStyle: x, badge: t, badgeWidth: s, badgeHeight: u, updateBadgeSize: i };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    S(d), q(() => [e.value, e.max, e.isDot, e.isTag, e.size], d);
+    const l = { props: e, modifiers: m, containerModifiers: g, displayValue: v, shouldShowBadge: y, appliedOffset: o, containerStyle: b, getCssSize: u, styles: x, badge: r, badgeWidth: i, badgeHeight: s, updateBadgeSize: d };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
 });
 export {
-  S as default
+  B as default
 };

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue.js

@@ -1,14 +1,15 @@
 import './NmorphCalendar.css';
 import f from "./NmorphCalendar.vue2.js";
-import { openBlock as o, createElementBlock as r, normalizeClass as i, renderSlot as n, createVNode as s, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as k, createTextVNode as C, toDisplayString as _ } from "vue";
+import { openBlock as o, createElementBlock as r, normalizeStyle as k, normalizeClass as i, renderSlot as n, createVNode as s, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as C, createTextVNode as _, toDisplayString as m } from "vue";
 /* empty css                    */
 import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = ["data-date", "onClick"];
-function T(d, B, p, a, M, w) {
+const T = ["data-date", "onClick"];
+function B(d, M, p, a, w, x) {
   return o(), r(
     "div",
     {
-      class: i(a.modifiers)
+      class: i(a.modifiers),
+      style: k(a.styles)
     },
     [
       n(d.$slots, "header", {}, () => [
@@ -47,7 +48,7 @@ function T(d, B, p, a, M, w) {
                       row: h
                     }, {
                       default: l(() => [
-                        k("div", {
+                        C("div", {
                           "data-date": `${a.dateData(e[t]).date}`,
                           class: i([
                             "nmorph-calendar-date",
@@ -60,7 +61,7 @@ function T(d, B, p, a, M, w) {
                               "nmorph-calendar-date--selected": a.isValueSelected(a.dateData(e[t]).date)
                             }
                           ]),
-                          onClick: (x) => a.clickDate(a.dateData(e[t]))
+                          onClick: (S) => a.clickDate(a.dateData(e[t]))
                         }, [
                           n(d.$slots, "date-cell", {
                             scope: {
@@ -68,13 +69,13 @@ function T(d, B, p, a, M, w) {
                               selected: a.isValueSelected(a.dateData(e[t]).date)
                             }
                           }, () => [
-                            C(
-                              _(a.dateData(e[t]).hidden ? "-" : a.dateData(e[t]).value),
+                            _(
+                              m(a.dateData(e[t]).hidden ? "-" : a.dateData(e[t]).value),
                               1
                               /* TEXT */
                             )
                           ])
-                        ], 10, m)
+                        ], 10, T)
                       ]),
                       _: 2
                       /* DYNAMIC */
@@ -95,11 +96,11 @@ function T(d, B, p, a, M, w) {
         }, 8, ["data"])
       ])
     ],
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
-const P = /* @__PURE__ */ v(f, [["render", T], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
+const z = /* @__PURE__ */ v(f, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
 export {
-  P as default
+  z as default
 };