@nmorph/nmorph-ui-kit 2.2.58 → 3.0.0

package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.vue2.js

@@ -1,7 +1,8 @@
 import './NmorphAudioMeter.css';
-import { defineComponent as p, computed as t } from "vue";
+import { defineComponent as f, computed as t } from "vue";
 import { useModifiers as v } from "../../../utils/create-modifiers.js";
-const y = /* @__PURE__ */ p({
+import { createCssVariables as c } from "../../../utils/common.js";
+const _ = /* @__PURE__ */ f({
   __name: "NmorphAudioMeter",
   props: {
     value: { type: Number, required: !1, default: void 0 },
@@ -10,21 +11,30 @@ const y = /* @__PURE__ */ p({
     bars: { type: Number, required: !1, default: 12 },
     warnThreshold: { type: Number, required: !1, default: 0.7 },
     errorThreshold: { type: Number, required: !1, default: 0.9 },
+    color: { type: String, required: !1, default: void 0 },
+    warnColor: { type: String, required: !1, default: void 0 },
+    errorColor: { type: String, required: !1, default: void 0 },
+    trackColor: { type: String, required: !1, default: void 0 },
     label: { type: String, required: !1, default: "Audio level" }
   },
-  setup(s, { expose: i }) {
-    i();
-    const e = s, u = (a) => Math.min(Math.max(a, 0), 1), r = t(() => typeof e.value == "number" ? u(e.value) : typeof e.volumeDb == "number" ? u((e.volumeDb + 60) / 60) : 0), o = t(() => Array.from({ length: Math.max(e.bars, 1) }, (a, f) => f)), l = t(() => r.value >= e.errorThreshold ? "error" : r.value >= e.warnThreshold ? "warn" : "normal"), d = t(
+  setup(n, { expose: d }) {
+    d();
+    const e = n, a = (o) => Math.min(Math.max(o, 0), 1), r = t(() => typeof e.value == "number" ? a(e.value) : typeof e.volumeDb == "number" ? a((e.volumeDb + 60) / 60) : 0), l = t(() => Array.from({ length: Math.max(e.bars, 1) }, (o, m) => m)), u = t(() => r.value >= e.errorThreshold ? "error" : r.value >= e.warnThreshold ? "warn" : "normal"), s = t(
       () => v({
-        "nmorph-audio-meter": [e.variant, l.value]
+        "nmorph-audio-meter": [e.variant, u.value]
       })
-    ), m = t(() => ({
-      "--nmorph-audio-meter-level": r.value,
-      "--nmorph-audio-meter-percent": `${Math.round(r.value * 100)}%`
-    })), n = { props: e, clamp: u, level: r, barIndexes: o, state: l, modifiers: d, styles: m, isBarActive: (a) => (a + 1) / o.value.length <= r.value };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    ), p = t(() => ({
+      "--nmorph-private-audio-meter-percent": `${Math.round(r.value * 100)}%`,
+      ...c({
+        "--nmorph-private-audio-meter-color": e.color,
+        "--nmorph-private-audio-meter-warn-color": e.warnColor,
+        "--nmorph-private-audio-meter-error-color": e.errorColor,
+        "--nmorph-private-audio-meter-track-color": e.trackColor
+      })
+    })), i = { props: e, clamp: a, level: r, barIndexes: l, state: u, modifiers: s, styles: p, isBarActive: (o) => (o + 1) / l.value.length <= r.value };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  y as default
+  _ as default
 };

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css

@@ -1 +1 @@
-.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-audio-preview-width, 360px);min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border:0;border-radius:var(--default-border-radius);cursor:default;--color: currentColor}.nmorph-audio-preview button.nmorph-audio-preview__icon{cursor:pointer}.nmorph-audio-preview button.nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);box-sizing:border-box;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__control{display:flex;gap:var(--indentation-02);align-items:center;width:100%;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:600}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{flex:1 1 0;width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--no-actions .nmorph-audio-preview__body{padding-inline-end:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--embedded{width:var(--nmorph-audio-preview-width, 100%);min-height:auto;padding:0;background:transparent;border-radius:0;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__body{gap:0;padding-inline-end:0}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range{height:5px}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-webkit-slider-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-moz-range-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--no-header .nmorph-audio-preview__time{flex:0 0 auto}.nmorph-audio-preview.nmorph-audio-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--soft .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain{background:transparent;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}
+.nmorph-audio-preview{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:var(--nmorph-private-audio-preview-width, 360px);min-width:0;max-width:100%;min-height:64px;padding:var(--indentation-03);color:var(--nmorph-text-color);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-audio-preview audio{display:none}.nmorph-audio-preview .nmorph-audio-preview__icon{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:36px;height:36px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-text-color) 10%,transparent);border:0;border-radius:var(--default-border-radius);cursor:default;--nmorph-private-icon-color: currentColor}.nmorph-audio-preview button.nmorph-audio-preview__icon{cursor:pointer}.nmorph-audio-preview button.nmorph-audio-preview__icon:disabled{cursor:default}.nmorph-audio-preview .nmorph-audio-preview__play-button{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:20px;height:20px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border:0;border-radius:var(--border-radius-circular);cursor:pointer}.nmorph-audio-preview .nmorph-audio-preview__play-button:hover{background:color-mix(in srgb,var(--nmorph-black-color) 48%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__play-button .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator{position:absolute;right:-4px;bottom:-4px;display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 36%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__play-indicator .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-audio-preview .nmorph-audio-preview__body{display:flex;flex:1 1 0;flex-direction:column;gap:var(--indentation-02);box-sizing:border-box;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__header{display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__control{display:flex;gap:var(--indentation-02);align-items:center;width:100%;min-width:0}.nmorph-audio-preview .nmorph-audio-preview__name,.nmorph-audio-preview .nmorph-audio-preview__time,.nmorph-audio-preview .nmorph-audio-preview__error{min-width:0;overflow:hidden;font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-audio-preview .nmorph-audio-preview__name{flex:1 1 auto;font-weight:var(--font-weight-semibold)}.nmorph-audio-preview .nmorph-audio-preview__time{flex:0 0 auto;color:var(--nmorph-semi-contrast-text-color);font-variant-numeric:tabular-nums}.nmorph-audio-preview .nmorph-audio-preview__error{flex:0 1 auto;color:var(--nmorph-error-text-color)}.nmorph-audio-preview .nmorph-audio-preview__range{flex:1 1 0;width:100%;min-width:0;height:6px;padding:0;background:linear-gradient(to right,var(--nmorph-accent-color) var(--nmorph-private-audio-preview-progress, 0%),color-mix(in srgb,var(--nmorph-text-color) 16%,transparent) 0);border-radius:var(--border-radius-100);outline:0;cursor:pointer;appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range:disabled{cursor:default;opacity:.6}.nmorph-audio-preview .nmorph-audio-preview__range::-webkit-slider-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);appearance:none}.nmorph-audio-preview .nmorph-audio-preview__range::-moz-range-thumb{width:14px;height:14px;background:var(--nmorph-accent-color);border:2px solid var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset)}.nmorph-audio-preview .nmorph-audio-preview__actions{display:flex;flex:0 0 auto;gap:var(--indentation-01);align-items:center}.nmorph-audio-preview .nmorph-audio-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:inherit;text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-audio-preview .nmorph-audio-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-audio-preview .nmorph-audio-preview__action-link .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-audio-preview.nmorph-audio-preview--compact{min-height:52px;padding:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--compact .nmorph-audio-preview__icon{width:30px;height:30px}.nmorph-audio-preview.nmorph-audio-preview--no-actions .nmorph-audio-preview__body{padding-inline-end:var(--indentation-02)}.nmorph-audio-preview.nmorph-audio-preview--embedded{width:var(--nmorph-private-audio-preview-width, 100%);min-height:auto;padding:0;background:transparent;border-radius:0;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__body{gap:0;padding-inline-end:0}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range{height:5px}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-webkit-slider-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__range::-moz-range-thumb{width:11px;height:11px;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--embedded .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--no-header .nmorph-audio-preview__time{flex:0 0 auto}.nmorph-audio-preview.nmorph-audio-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--soft .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain{background:transparent;box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--plain .nmorph-audio-preview__play-indicator{box-shadow:none}.nmorph-audio-preview.nmorph-audio-preview--error{outline:1px solid var(--nmorph-error-color)}

package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue2.js

@@ -31,20 +31,22 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ L({
   },
   emits: ["play", "pause", "open", "download", "error"],
   setup(h, { expose: y, emit: g }) {
-    const e = h, n = g, c = x(), o = d(null), a = d(!1), u = d(0), s = d(e.durationMs ? e.durationMs / 1e3 : 0);
+    const e = h, n = g, p = x(), o = d(null), a = d(!1), u = d(0), s = d(e.durationMs ? e.durationMs / 1e3 : 0);
     k(
       () => e.durationMs,
       (r) => {
         s.value = r ? r / 1e3 : s.value;
       }
     );
-    const l = t(() => s.value || 0), p = t({
+    const l = t(() => s.value || 0), c = t({
       get: () => l.value > 0 ? u.value / l.value * 100 : 0,
       set: (r) => {
         !o.value || l.value <= 0 || (o.value.currentTime = r / 100 * l.value, u.value = o.value.currentTime);
       }
-    }), w = t(() => ({ "--nmorph-audio-preview-progress": `${p.value}%` })), f = t(
-      () => !!c.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    }), w = t(() => ({
+      "--nmorph-private-audio-preview-progress": `${c.value}%`
+    })), f = t(
+      () => !!p.actions || e.showDefaultActions && (e.src || e.downloadHref)
     ), N = t(
       () => R({
         "nmorph-audio-preview": [
@@ -61,7 +63,7 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ L({
       })
     ), S = t(
       () => $({
-        "--nmorph-audio-preview-width": e.width
+        "--nmorph-private-audio-preview-width": e.width
       })
     ), i = (r) => {
       if (!Number.isFinite(r) || r < 0) return "0:00";
@@ -93,7 +95,7 @@ const J = "var(--nmorph-contrast-text-color)", te = /* @__PURE__ */ L({
       a.value = !1, n("error", r);
     }, M = () => n("open"), O = () => n("download");
     y({ audioRef: o });
-    const m = { CONTRAST_ICON_COLOR: J, props: e, emit: n, slots: c, audioRef: o, playing: a, currentTime: u, durationSeconds: s, resolvedDuration: l, progress: p, progressStyle: w, hasActions: f, modifiers: N, styles: S, formatTime: i, currentTimeLabel: I, durationLabel: q, togglePlayback: b, loadedMetadataHandler: H, timeUpdateHandler: _, playHandler: B, pauseHandler: P, endedHandler: T, errorHandler: A, openHandler: M, downloadHandler: O, get NmorphIcon() {
+    const m = { CONTRAST_ICON_COLOR: J, props: e, emit: n, slots: p, audioRef: o, playing: a, currentTime: u, durationSeconds: s, resolvedDuration: l, progress: c, progressStyle: w, hasActions: f, modifiers: N, styles: S, formatTime: i, currentTimeLabel: I, durationLabel: q, togglePlayback: b, loadedMetadataHandler: H, timeUpdateHandler: _, playHandler: B, pauseHandler: P, endedHandler: T, errorHandler: A, openHandler: M, downloadHandler: O, get NmorphIcon() {
       return E;
     }, get NmorphIconAudio() {
       return V;

package/dist/components/data/nmorph-avatar/NmorphAvatar.css

@@ -1 +1 @@
-.nmorph-avatar{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.nmorph-avatar--circle{border-radius:var(--border-radius-circular)}.nmorph-avatar--square{border-radius:var(--default-border-radius)}.nmorph-avatar>.nmorph-image{--width: var(--nmorph-avatar-size);--height: var(--nmorph-avatar-size);position:absolute;padding:var(--nmorph-avatar-image-padding);border-radius:var(--nmorph-avatar-radius)}.nmorph-avatar.nmorph--shadow-combined{background:var(--nmorph-main-color);border:var(--nmorph-avatar-frame-border) solid var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-combined-dark)}.nmorph-avatar>.nmorph-image>img{border-radius:var(--nmorph-avatar-image-radius)}.nmorph-avatar__initials{color:var(--nmorph-text-color);font-weight:600;line-height:1}.nmorph-avatar--preview{cursor:pointer}.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}
+.nmorph-avatar{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;font-weight:var(--font-weight-semibold);background:var(--nmorph-main-color)}.nmorph-avatar--circle{border-radius:var(--border-radius-circular)}.nmorph-avatar--square{border-radius:var(--default-border-radius)}.nmorph-avatar>.nmorph-image{position:absolute;padding:var(--nmorph-private-avatar-image-padding);border-radius:var(--nmorph-private-avatar-radius)}.nmorph-avatar:not(.nmorph-avatar--plain){background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-combined-dark)}.nmorph-avatar:not(.nmorph-avatar--plain).nmorph-avatar--framed{border:var(--nmorph-private-avatar-frame-border) solid var(--nmorph-main-color)}.nmorph-avatar--plain{background:var(--nmorph-main-color);box-shadow:none}.nmorph-avatar--plain.nmorph-avatar--framed{border:var(--nmorph-plain-border)}.nmorph-avatar>.nmorph-image>img{border-radius:var(--nmorph-private-avatar-image-radius)}.nmorph-avatar__initials{color:var(--nmorph-text-color);font-weight:var(--font-weight-semibold);line-height:1}.nmorph-avatar--preview{cursor:pointer}.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}

package/dist/components/data/nmorph-avatar/NmorphAvatar.vue.js

@@ -1,53 +1,56 @@
 import './NmorphAvatar.css';
-import p from "./NmorphAvatar.vue2.js";
-import { openBlock as e, createElementBlock as l, normalizeStyle as n, normalizeClass as h, createVNode as o, withCtx as a, renderSlot as c, toDisplayString as s, createBlock as i, resolveDynamicComponent as d, createCommentVNode as v } from "vue";
+import h from "./NmorphAvatar.vue2.js";
+import { openBlock as r, createElementBlock as l, normalizeStyle as n, normalizeClass as p, createVNode as a, withCtx as i, renderSlot as c, toDisplayString as s, createBlock as o, resolveDynamicComponent as d, createCommentVNode as v } from "vue";
 /* empty css                  */
-import S from "../../../_virtual/_plugin-vue_export-helper.js";
-function w(m, t, _, r, y, I) {
-  return e(), l(
+import w from "../../../_virtual/_plugin-vue_export-helper.js";
+function S(t, m, _, e, g, y) {
+  return r(), l(
     "div",
     {
-      class: h(r.modifiers),
-      style: n(r.styles),
-      onClick: r.openPreview
+      class: p(e.modifiers),
+      style: n(e.styles),
+      onClick: e.openPreview
     },
     [
-      o(r.NmorphImage, {
-        fit: r.props.fit,
-        src: r.imageSrc,
-        "src-set": r.props.srcSet,
-        alt: r.props.alt,
+      a(e.NmorphImage, {
+        design: "plain",
+        fit: e.props.fit,
+        src: e.imageSrc,
+        "src-set": e.props.srcSet,
+        alt: e.props.alt,
+        width: e.size,
+        height: e.size,
         "frame-border": 0,
-        onLoad: r.onImageLoad,
-        onError: r.onImageError
+        onLoad: e.onImageLoad,
+        onError: e.onImageError
       }, {
-        loading: a(() => [
-          o(r.NmorphIcon, { size: "small" }, {
-            default: a(() => [
-              o(r.NmorphIconLoaderDots)
+        loading: i(() => [
+          a(e.NmorphIcon, { size: "small" }, {
+            default: i(() => [
+              a(e.NmorphIconLoaderDots)
             ]),
             _: 1
             /* STABLE */
           })
         ]),
-        error: a(() => [
-          c(m.$slots, "error", {}, () => [
-            r.initials ? (e(), l(
+        error: i(() => [
+          c(t.$slots, "error", {}, () => [
+            e.initials ? (r(), l(
               "span",
               {
                 key: 0,
                 class: "nmorph-avatar__initials",
-                style: n({ fontSize: r.initialsFontSize })
+                style: n({ fontSize: e.initialsFontSize })
               },
-              s(r.initials),
+              s(e.initials),
               5
               /* TEXT, STYLE */
-            )) : (e(), i(r.NmorphIcon, {
+            )) : (r(), o(e.NmorphIcon, {
               key: 1,
-              width: r.stubIconSize
+              width: e.stubIconSize
             }, {
-              default: a(() => [
-                (e(), i(d(r.fallback)))
+              default: i(() => [
+                (r(), o(d(e.fallback)))
               ]),
               _: 1
               /* STABLE */
@@ -56,45 +59,45 @@ function w(m, t, _, r, y, I) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["fit", "src", "src-set", "alt"]),
-      r.imageSrc ? v("v-if", !0) : c(m.$slots, "error", { key: 0 }, () => [
-        r.initials ? (e(), l(
+      }, 8, ["fit", "src", "src-set", "alt", "width", "height"]),
+      e.imageSrc ? v("v-if", !0) : c(t.$slots, "error", { key: 0 }, () => [
+        e.initials ? (r(), l(
           "span",
           {
             key: 0,
             class: "nmorph-avatar__initials",
-            style: n({ fontSize: r.initialsFontSize })
+            style: n({ fontSize: e.initialsFontSize })
           },
-          s(r.initials),
+          s(e.initials),
           5
           /* TEXT, STYLE */
-        )) : (e(), i(r.NmorphIcon, {
+        )) : (r(), o(e.NmorphIcon, {
           key: 1,
-          width: r.stubIconSize
+          width: e.stubIconSize
         }, {
-          default: a(() => [
-            (e(), i(d(r.fallback)))
+          default: i(() => [
+            (r(), o(d(e.fallback)))
           ]),
           _: 1
           /* STABLE */
         }, 8, ["width"]))
       ]),
-      r.previewAvailable ? (e(), i(r.NmorphImagePreview, {
+      e.previewAvailable ? (r(), o(e.NmorphImagePreview, {
         key: 1,
-        modelValue: r.previewOpen,
-        "onUpdate:modelValue": t[0] || (t[0] = (f) => r.previewOpen = f),
+        modelValue: e.previewOpen,
+        "onUpdate:modelValue": m[0] || (m[0] = (f) => e.previewOpen = f),
         "show-trigger": !1,
-        src: r.imagePreviewSrc,
-        alt: r.props.alt,
-        "initial-index": r.props.previewInitialIndex,
-        "scale-step": r.props.previewScaleStep,
-        "min-scale-level": r.props.previewMinScaleLevel,
-        "max-scale-level": r.props.previewMaxScaleLevel
+        src: e.imagePreviewSrc,
+        alt: e.props.alt,
+        "initial-index": e.props.previewInitialIndex,
+        "scale-step": e.props.previewScaleStep,
+        "min-scale-level": e.props.previewMinScaleLevel,
+        "max-scale-level": e.props.previewMaxScaleLevel
       }, {
-        loading: a(() => [
-          o(r.NmorphIcon, { size: "small" }, {
-            default: a(() => [
-              o(r.NmorphIconLoaderDots)
+        loading: i(() => [
+          a(e.NmorphIcon, { size: "small" }, {
+            default: i(() => [
+              a(e.NmorphIconLoaderDots)
             ]),
             _: 1
             /* STABLE */
@@ -108,7 +111,7 @@ function w(m, t, _, r, y, I) {
     /* CLASS, STYLE */
   );
 }
-const b = /* @__PURE__ */ S(p, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-avatar/NmorphAvatar.vue"]]);
+const b = /* @__PURE__ */ w(h, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-avatar/NmorphAvatar.vue"]]);
 export {
   b as default
 };

package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js

@@ -1,21 +1,22 @@
 import './NmorphAvatar.css';
-import { defineComponent as z, ref as $, computed as a } from "vue";
-import { useModifiers as B } from "../../../utils/create-modifiers.js";
-import L from "../nmorph-image-preview/NmorphImagePreview.vue.js";
-import v from "../../../assets/icons/avatar.svg.js";
-import M from "../../../assets/icons/loader.svg.js";
-import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as $, ref as B, computed as a } from "vue";
+import { useModifiers as L } from "../../../utils/create-modifiers.js";
+import M from "../nmorph-image-preview/NmorphImagePreview.vue.js";
+import g from "../../../assets/icons/avatar.svg.js";
+import k from "../../../assets/icons/loader.svg.js";
+import D from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import C from "../nmorph-image/NmorphImage.vue.js";
-const J = /* @__PURE__ */ z({
+const K = /* @__PURE__ */ $({
   __name: "NmorphAvatar",
   props: {
+    design: { type: null, required: !1, default: "nmorph" },
     src: { type: [String, Array], required: !1, default: void 0 },
     size: { type: Number, required: !1, default: 48 },
     shape: { type: null, required: !1, default: "circle" },
     frameBorder: { type: Number, required: !1, default: 2 },
     imagePadding: { type: Number, required: !1, default: 4 },
     name: { type: String, required: !1, default: "" },
-    fallback: { type: null, required: !1, default: () => v },
+    fallback: { type: null, required: !1, default: () => g },
     preview: { type: Boolean, required: !1, default: !1 },
     previewSrc: { type: [String, Array], required: !1, default: void 0 },
     previewInitialIndex: { type: Number, required: !1, default: 0 },
@@ -27,48 +28,52 @@ const J = /* @__PURE__ */ z({
     alt: { type: String, required: !1 }
   },
   emits: ["error", "load"],
-  setup(g, { expose: h, emit: y }) {
-    h();
-    const r = g, o = y, S = (e) => {
-      o("error", e);
-    }, w = (e) => {
-      o("load", e);
-    }, l = $(!1), p = (e, t = 0) => Array.isArray(e) ? e[t] : e, u = a(() => `${r.imagePadding}px`), i = a(() => `${r.size}px`), b = a(() => p(r.src)), n = a(() => r.previewSrc || r.src), m = a(() => {
+  setup(h, { expose: y, emit: S }) {
+    y();
+    const r = h, i = S, w = (e) => {
+      i("error", e);
+    }, q = (e) => {
+      i("load", e);
+    }, p = B(!1), u = (e, t = 0) => Array.isArray(e) ? e[t] : e, m = a(() => `${r.imagePadding}px`), o = a(() => `${r.size}px`), b = a(() => u(r.src)), n = a(() => r.previewSrc || r.src), d = a(() => {
       const e = n.value;
       return Array.isArray(e) ? e.length > 0 : !!e;
-    }), q = a(() => {
+    }), N = a(() => {
       const e = n.value;
       return Array.isArray(e) ? e : e || "";
-    }), s = a(() => r.preview && m.value), N = a(
-      () => B({
-        nmorph: [r.frameBorder > 0 && "shadow-combined"],
-        "nmorph-avatar": [r.shape, s.value && "preview"]
+    }), s = a(() => r.preview && d.value), l = a(() => r.design || "nmorph"), I = a(
+      () => L({
+        nmorph: [l.value === "nmorph" ? "shadow-combined" : ""],
+        "nmorph-avatar": [
+          l.value,
+          r.shape,
+          r.frameBorder > 0 && "framed",
+          s.value && "preview"
+        ]
       })
-    ), I = a(() => `${r.size / 100 * 60}px`), x = a(() => `${Math.max(12, r.size * 0.38)}px`), c = a(() => r.shape === "circle" ? "50%" : "4px"), d = a(() => r.shape === "circle" ? "50%" : "2px"), A = a(() => ({
-      width: i.value,
-      height: i.value,
-      "--nmorph-avatar-size": i.value,
-      "--nmorph-avatar-image-padding": u.value,
-      "--nmorph-avatar-radius": c.value,
-      "--nmorph-avatar-image-radius": d.value,
-      "--nmorph-avatar-frame-border": `${r.frameBorder}px`
-    })), _ = a(() => r.fallback || v), P = a(() => {
+    ), x = a(() => `${r.size / 100 * 60}px`), A = a(() => `${Math.max(12, r.size * 0.38)}px`), c = a(() => r.shape === "circle" ? "50%" : "4px"), f = a(() => r.shape === "circle" ? "50%" : "2px"), _ = a(() => ({
+      width: o.value,
+      height: o.value,
+      "--nmorph-private-avatar-image-padding": m.value,
+      "--nmorph-private-avatar-radius": c.value,
+      "--nmorph-private-avatar-image-radius": f.value,
+      "--nmorph-private-avatar-frame-border": `${r.frameBorder}px`
+    })), P = a(() => r.fallback || g), z = a(() => {
       const e = r.name.trim();
       if (!e) return "";
       const t = e.split(/\s+/);
       return (t.length > 1 ? `${t[0][0]}${t[t.length - 1][0]}` : t[0].slice(0, 2)).toUpperCase();
-    }), f = { props: r, emit: o, onImageError: S, onImageLoad: w, previewOpen: l, getSourceByIndex: p, imagePadding: u, size: i, imageSrc: b, previewSource: n, hasPreviewSource: m, imagePreviewSrc: q, previewAvailable: s, modifiers: N, stubIconSize: I, initialsFontSize: x, radius: c, imageRadius: d, styles: A, fallback: _, initials: P, openPreview: () => {
-      s.value && (l.value = !0);
+    }), v = { props: r, emit: i, onImageError: w, onImageLoad: q, previewOpen: p, getSourceByIndex: u, imagePadding: m, size: o, imageSrc: b, previewSource: n, hasPreviewSource: d, imagePreviewSrc: N, previewAvailable: s, resolvedDesign: l, modifiers: I, stubIconSize: x, initialsFontSize: A, radius: c, imageRadius: f, styles: _, fallback: P, initials: z, openPreview: () => {
+      s.value && (p.value = !0);
     }, get NmorphImage() {
       return C;
     }, get NmorphIcon() {
-      return k;
+      return D;
     }, get NmorphIconLoaderDots() {
-      return M;
-    }, NmorphImagePreview: L };
-    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
+      return k;
+    }, NmorphImagePreview: M };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  J as default
+  K as default
 };

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

@@ -1 +1 @@
-.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-radius: var(--border-radius-40);--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.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--medium .nmorph-badge__content{font-size:var(--font-size-medium)}.nmorph-badge.nmorph-badge--large .nmorph-badge__content{font-size:var(--font-size-large)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__content{font-size:var(--font-size-extra-large)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;height:100%;padding:0 var(--indentation-03);overflow:hidden;font-weight:600;font-size:var(--font-size-extra-small);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-badge-ribbon-offset-y);right:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-badge-ribbon-radius);border-top-right-radius:var(--nmorph-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-badge-ribbon-offset-x);bottom:var(--nmorph-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-badge-ribbon-radius);border-top-right-radius:var(--nmorph-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--flat{width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height)}.nmorph-badge .nmorph-badge__ribbon-corner--flat .nmorph-badge__container--ribbon{position:relative;top:auto;left:auto;border-radius:0;transform:none}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__container--ribbon .nmorph-badge__content{font-weight:400;font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--font-size-medium)}.nmorph-badge.nmorph-badge--large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--font-size-large)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--font-size-extra-large)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-badge-dot-size);height:var(--nmorph-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-badge-dot-size: 3px;--nmorph-badge-ribbon-height: 18px;--nmorph-badge-ribbon-corner-size: 50px;--nmorph-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 20px;--nmorph-badge-ribbon-corner-size: 56px;--nmorph-badge-ribbon-width: 104px}.nmorph-badge.nmorph-badge--medium{--nmorph-badge-dot-size: 5px;--nmorph-badge-ribbon-height: 28px;--nmorph-badge-ribbon-corner-size: 68px;--nmorph-badge-ribbon-width: 128px}.nmorph-badge.nmorph-badge--large{--nmorph-badge-dot-size: 6px;--nmorph-badge-ribbon-height: 32px;--nmorph-badge-ribbon-corner-size: 76px;--nmorph-badge-ribbon-width: 144px}.nmorph-badge.nmorph-badge--extra-large{--nmorph-badge-dot-size: 8px;--nmorph-badge-ribbon-height: 36px;--nmorph-badge-ribbon-corner-size: 84px;--nmorph-badge-ribbon-width: 160px}
+.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 24px;--nmorph-private-badge-ribbon-corner-size: 62px;--nmorph-private-badge-ribbon-width: 116px;--nmorph-private-badge-ribbon-radius: var(--border-radius-40);--nmorph-private-badge-ribbon-offset-x: 0px;--nmorph-private-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-private-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(--nmorph-typography-body-large-font-size);line-height:var(--nmorph-typography-body-large-line-height);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--nmorph-typography-body-small-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-private-badge-ribbon-corner-size);height:var(--nmorph-private-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;height:100%;padding:0 var(--indentation-03);overflow:hidden;font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-private-badge-ribbon-offset-y);right:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-private-badge-ribbon-offset-x);bottom:var(--nmorph-private-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--flat{width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height)}.nmorph-badge .nmorph-badge__ribbon-corner--flat .nmorph-badge__container--ribbon{position:relative;top:auto;left:auto;border-radius:0;transform:none}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__container--ribbon .nmorph-badge__content{font-weight:var(--font-weight-regular);font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-private-badge-dot-size);height:var(--nmorph-private-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-private-badge-dot-size: 3px;--nmorph-private-badge-ribbon-height: 18px;--nmorph-private-badge-ribbon-corner-size: 50px;--nmorph-private-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 20px;--nmorph-private-badge-ribbon-corner-size: 56px;--nmorph-private-badge-ribbon-width: 104px}.nmorph-badge.nmorph-badge--medium{--nmorph-private-badge-dot-size: 5px;--nmorph-private-badge-ribbon-height: 28px;--nmorph-private-badge-ribbon-corner-size: 68px;--nmorph-private-badge-ribbon-width: 128px}.nmorph-badge.nmorph-badge--large{--nmorph-private-badge-dot-size: 6px;--nmorph-private-badge-ribbon-height: 32px;--nmorph-private-badge-ribbon-corner-size: 76px;--nmorph-private-badge-ribbon-width: 144px}.nmorph-badge.nmorph-badge--extra-large{--nmorph-private-badge-dot-size: 8px;--nmorph-private-badge-ribbon-height: 36px;--nmorph-private-badge-ribbon-corner-size: 84px;--nmorph-private-badge-ribbon-width: 160px}

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

@@ -1,8 +1,8 @@
 import './NmorphBadge.css';
-import { defineComponent as B, computed as r, ref as d, onMounted as C, watch as V, nextTick as I } from "vue";
-import { useModifiers as f } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as M, createCssVariables as O } from "../../../utils/common.js";
-const X = /* @__PURE__ */ B({
+import { defineComponent as C, computed as r, ref as u, onMounted as V, watch as B, nextTick as I } from "vue";
+import { useModifiers as s } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as T, createCssVariables as M } from "../../../utils/common.js";
+const $ = /* @__PURE__ */ C({
   __name: "NmorphBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 },
@@ -10,87 +10,83 @@ const X = /* @__PURE__ */ B({
     type: { type: String, required: !1, default: "default" },
     ribbonCorner: { type: String, required: !1, default: "top-right" },
     ribbonTilt: { type: Boolean, required: !1, default: !0 },
-    isDot: { type: Boolean, required: !1, default: !1 },
-    isTag: { type: Boolean, required: !1, default: !1 },
     hidden: { type: Boolean, required: !1, default: !1 },
     hideOnFalsyValue: { type: Boolean, required: !1, default: !1 },
     color: { type: String, required: !1, default: "var(--nmorph-accent-color)" },
     size: { type: String, required: !1, default: "base" },
+    dotSize: { type: [Number, String], required: !1, default: void 0 },
     ribbonSize: { type: [Number, String], required: !1, default: void 0 },
+    ribbonWidth: { type: [Number, String], required: !1, default: void 0 },
+    ribbonCornerSize: { type: [Number, String], required: !1, default: void 0 },
     ribbonRadius: { type: [Number, String], required: !1, default: void 0 },
     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 }
   },
-  setup(m, { expose: y }) {
-    y();
-    const e = m, t = r(() => e.type !== "default" ? e.type : e.isDot ? "dot" : e.isTag ? "tag" : "default"), b = r(() => t.value === "dot"), o = r(() => t.value === "tag"), a = r(() => t.value === "ribbon"), g = r(
-      () => f({
+  setup(c, { expose: m }) {
+    m();
+    const e = c, b = r(() => e.type === "dot"), a = r(() => e.type === "tag"), t = r(() => e.type === "ribbon"), y = r(
+      () => s({
         "nmorph-badge": [
           e.hidden && "hidden",
-          o.value && "tag",
-          a.value && "ribbon",
-          a.value && `ribbon-${e.ribbonCorner}`,
+          a.value && "tag",
+          t.value && "ribbon",
+          t.value && `ribbon-${e.ribbonCorner}`,
           e.size
         ]
       })
-    ), h = r(
-      () => f({
+    ), g = r(
+      () => s({
         "nmorph-badge__container": [
           e.hidden && "hidden",
-          o.value && "tag",
-          a.value && "ribbon",
-          a.value && `ribbon-${e.ribbonCorner}`
+          a.value && "tag",
+          t.value && "ribbon",
+          t.value && `ribbon-${e.ribbonCorner}`
         ]
       })
-    ), x = r(
-      () => f({
+    ), h = r(
+      () => s({
         "nmorph-badge__ribbon-corner": [e.ribbonCorner, !e.ribbonTilt && "flat"]
       })
-    ), q = r(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), p = r(() => e.hideOnFalsyValue && !e.value), S = r(() => (b.value || e.value !== void 0) && !p.value), i = r(() => {
-      const v = `${(l?.value / 2 + e.offsetX) * -1}px`, T = `${(u?.value / 2 + e.offsetY) * -1}px`;
+    ), S = r(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), f = r(() => e.hideOnFalsyValue && !e.value), x = r(() => (b.value || e.value !== void 0) && !f.value), o = r(() => {
+      const v = `${(n?.value / 2 + e.offsetX) * -1}px`, N = `${(d?.value / 2 + e.offsetY) * -1}px`;
       return {
         x: v,
-        y: T
+        y: N
       };
-    }), z = r(() => o.value || a.value ? {
+    }), z = r(() => a.value || t.value ? {
       zIndex: e.zIndex
     } : {
-      right: i.value.x,
-      top: i.value.y,
+      right: o.value.x,
+      top: o.value.y,
       zIndex: e.zIndex
-    }), n = d(null), l = d(0), u = d(0), _ = r(() => ({
-      ...O({
-        "--nmorph-badge-color": e.color
-      }),
+    }), i = u(null), n = u(0), d = u(0), q = r(() => ({
       ...M({
-        "--nmorph-badge-ribbon-offset-x": e.offsetX !== 0 && e.offsetX,
-        "--nmorph-badge-ribbon-offset-y": e.offsetY !== 0 && e.offsetY,
-        "--nmorph-badge-ribbon-height": e.ribbonSize,
-        "--nmorph-badge-ribbon-radius": e.ribbonRadius
+        "--nmorph-private-badge-color": e.color
+      }),
+      ...T({
+        "--nmorph-private-badge-dot-size": e.dotSize,
+        "--nmorph-private-badge-ribbon-offset-x": e.offsetX !== 0 && e.offsetX,
+        "--nmorph-private-badge-ribbon-offset-y": e.offsetY !== 0 && e.offsetY,
+        "--nmorph-private-badge-ribbon-height": e.ribbonSize,
+        "--nmorph-private-badge-ribbon-width": e.ribbonWidth,
+        "--nmorph-private-badge-ribbon-corner-size": e.ribbonCornerSize,
+        "--nmorph-private-badge-ribbon-radius": e.ribbonRadius
       })
-    })), s = async () => {
-      await I(), !(!n.value || o.value || a.value) && (l.value = n.value.clientWidth, u.value = n.value.clientHeight);
-    }, N = r(() => ({
+    })), l = async () => {
+      await I(), !(!i.value || a.value || t.value) && (n.value = i.value.clientWidth, d.value = i.value.clientHeight);
+    }, _ = r(() => ({
       zIndex: e.zIndex
     }));
-    C(s), V(
-      () => [
-        e.value,
-        e.max,
-        t.value,
-        e.ribbonCorner,
-        e.ribbonTilt,
-        e.size,
-        e.hideOnFalsyValue
-      ],
-      s
+    V(l), B(
+      () => [e.value, e.max, e.type, e.ribbonCorner, e.ribbonTilt, e.size, e.hideOnFalsyValue],
+      l
     );
-    const c = { props: e, resolvedType: t, isDotType: b, isTagType: o, isRibbon: a, modifiers: g, containerModifiers: h, ribbonCornerModifiers: x, displayValue: q, shouldHideOnFalsyValue: p, shouldShowBadge: S, appliedOffset: i, containerStyle: z, badge: n, badgeWidth: l, badgeHeight: u, styles: _, updateBadgeSize: s, ribbonFrameStyle: N };
-    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
+    const p = { props: e, isDotType: b, isTagType: a, isRibbon: t, modifiers: y, containerModifiers: g, ribbonCornerModifiers: h, displayValue: S, shouldHideOnFalsyValue: f, shouldShowBadge: x, appliedOffset: o, containerStyle: z, badge: i, badgeWidth: n, badgeHeight: d, styles: q, updateBadgeSize: l, ribbonFrameStyle: _ };
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {
-  X as default
+  $ as default
 };

package/dist/components/data/nmorph-calendar/NmorphCalendar.css

@@ -1 +1 @@
-.nmorph-calendar{--table-data-cell-height: 50px;background:var(--nmorph-main-color)}.nmorph-calendar .nmorph-table__table-data-row{height:var(--table-data-cell-height)}.nmorph-calendar .nmorph-table__cell{--table-cell-height: var(--table-data-cell-height);font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-calendar .nmorph-calendar-date{display:flex;justify-content:center;align-items:center;height:100%}.nmorph-calendar .nmorph-calendar-date--today{color:var(--nmorph-text-color);font-weight:700;font-size:var(--font-size-medium);line-height:var(--line-height-loose)}.nmorph-calendar .nmorph-table .nmorph-table__cell{padding:0 var(--indentation-01)}.nmorph-calendar .nmorph-calendar-date--hidden{cursor:none}.nmorph-calendar .nmorph-calendar-date:not(.nmorph-calendar-date--hidden){cursor:pointer}.nmorph-calendar .nmorph-calendar-date:not(.nmorph-calendar-date--hidden,.nmorph-calendar-date--selected).nmorph-calendar-date--previous,.nmorph-calendar .nmorph-calendar-date:not(.nmorph-calendar-date--hidden,.nmorph-calendar-date--selected).nmorph-calendar-date--next{color:var(--nmorph-accent-color);background:var(--nmorph-main-color);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-calendar .nmorph-calendar-date--selected{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}
+.nmorph-calendar{--nmorph-private-calendar-cell-height: 50px;background:var(--nmorph-main-color)}.nmorph-calendar .nmorph-table__table-data-row{height:var(--nmorph-private-calendar-cell-height)}.nmorph-calendar .nmorph-table__cell{--nmorph-private-table-cell-height: var(--nmorph-private-calendar-cell-height);font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-calendar .nmorph-calendar-date{display:flex;justify-content:center;align-items:center;height:100%}.nmorph-calendar .nmorph-calendar-date--today{color:var(--nmorph-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-small-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-calendar .nmorph-table .nmorph-table__cell{padding:0 var(--indentation-01)}.nmorph-calendar .nmorph-calendar-date--hidden{cursor:none}.nmorph-calendar .nmorph-calendar-date:not(.nmorph-calendar-date--hidden){cursor:pointer}.nmorph-calendar .nmorph-calendar-date:not(.nmorph-calendar-date--hidden,.nmorph-calendar-date--selected).nmorph-calendar-date--previous,.nmorph-calendar .nmorph-calendar-date:not(.nmorph-calendar-date--hidden,.nmorph-calendar-date--selected).nmorph-calendar-date--next{color:var(--nmorph-accent-color);background:var(--nmorph-main-color);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-calendar .nmorph-calendar-date--selected{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}