@nmorph/nmorph-ui-kit 2.2.41 → 2.2.42

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js

@@ -1,40 +1,115 @@
 import './NmorphScroll.css';
-import e from "./NmorphScroll.vue2.js";
-import { openBlock as l, createElementBlock as i, normalizeStyle as n, normalizeClass as a, renderSlot as t } from "vue";
-/* empty css                  */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
-function d(r, c, h, o, s, f) {
-  return l(), i(
-    "div",
-    {
-      ref: "scrollDOMContainer",
-      class: a(o.modifiers),
-      style: n({
-        "--bar-width": o.barWidth,
-        "--bar-height": o.barHeight,
+import { defineComponent as $, ref as r, computed as o, inject as k, onUnmounted as z, onMounted as D, nextTick as f, watch as v, openBlock as G, createElementBlock as R, normalizeStyle as L, normalizeClass as j, renderSlot as N } from "vue";
+import { useModifiers as U } from "../../../utils/create-modifiers.js";
+const F = /* @__PURE__ */ $({
+  __name: "NmorphScroll",
+  props: {
+    height: { default: "100%" },
+    maxHeight: { default: "none" },
+    modelValue: { default: () => ({
+      x: 0,
+      y: 0
+    }) },
+    scrollYProp: { default: "auto" },
+    scrollXProp: { default: "auto" },
+    cssScrollBehavior: { default: "smooth" },
+    scrollEndDelay: { default: 50 },
+    updateOnlyOnScrollEnd: { type: Boolean, default: !1 },
+    yBarWidthInPx: { default: 6 },
+    xBarWidthInPx: { default: 6 },
+    xGapInPx: { default: 0 },
+    yGapInPx: { default: 0 }
+  },
+  emits: ["on-scroll", "update:model-value", "on-scroll-end"],
+  setup(x, { expose: g, emit: y }) {
+    const e = x, t = r(null), B = o(() => e.scrollYProp), P = o(() => e.scrollXProp), s = r(!1), c = r(!1), h = () => {
+      const l = t.value;
+      if (!l) {
+        s.value = !1, c.value = !1;
+        return;
+      }
+      s.value = l.scrollHeight > l.clientHeight, c.value = l.scrollWidth > l.clientWidth;
+    }, S = o(() => e.yBarWidthInPx + e.yGapInPx), H = o(() => e.xBarWidthInPx + e.xGapInPx), b = o(
+      () => e.scrollYProp === "hidden" || !s.value ? "0" : `${S.value}px`
+    ), I = o(
+      () => e.scrollXProp === "hidden" || !c.value ? "0" : `${H.value}px`
+    ), W = o(() => `${e.yBarWidthInPx}px`), E = o(() => `${e.xBarWidthInPx}px`), w = k("nmorph");
+    let a;
+    const i = y, m = () => {
+      const l = t.value;
+      if (!l) return;
+      const n = Math.trunc(l.scrollLeft), u = Math.trunc(l.scrollTop);
+      i("update:model-value", { x: n, y: u });
+    }, M = () => {
+      i("on-scroll-end");
+    }, O = (l) => {
+      i("on-scroll", l), t.value && (e.updateOnlyOnScrollEnd || m(), a !== void 0 && clearTimeout(a), a = setTimeout(() => {
+        e.updateOnlyOnScrollEnd && m(), M();
+      }, e.scrollEndDelay));
+    };
+    z(() => {
+      a !== void 0 && clearTimeout(a);
+    });
+    const p = r(!1), T = o(
+      () => U({
+        "nmorph-scroll": []
+      })
+    ), d = (l) => {
+      const { x: n, y: u } = l;
+      t.value?.scrollTo({
+        left: n,
+        top: u,
+        behavior: "smooth"
+      });
+    };
+    D(() => {
+      d(e.modelValue), f(h);
+    }), v(
+      () => e.modelValue,
+      (l) => {
+        d(l);
+      },
+      { deep: !0, immediate: !0 }
+    ), v(
+      () => w?.browser.dimensions,
+      () => {
+        f(h);
+      },
+      { deep: !0, immediate: !0 }
+    );
+    const C = o(() => e.cssScrollBehavior), _ = o(() => e.height), V = o(() => e.maxHeight);
+    g({ scrollDOMContainer: t, moveTo: d });
+    const X = () => {
+      p.value = !0;
+    }, Y = () => {
+      p.value = !1;
+    };
+    return (l, n) => (G(), R("div", {
+      ref_key: "scrollDOMContainer",
+      ref: t,
+      class: j(T.value),
+      style: L({
+        "--bar-width": W.value,
+        "--bar-height": E.value,
         boxSizing: "border-box",
         minWidth: "0",
         minHeight: "0",
-        height: o.scrollHeight,
-        maxHeight: o.maxHeight,
-        paddingRight: o.paddingRight,
-        paddingBottom: o.paddingBottom,
-        overflowX: o.overflowX,
-        overflowY: o.overflowY,
-        scrollBehavior: o.scrollBehavior
+        height: _.value,
+        maxHeight: V.value,
+        paddingRight: b.value,
+        paddingBottom: I.value,
+        overflowX: P.value,
+        overflowY: B.value,
+        scrollBehavior: C.value
       }),
-      onScroll: o.scrollHandler,
-      onMouseenter: o.mouseEnterHandler,
-      onMouseleave: o.mouseLeaveHandler
-    },
-    [
-      t(r.$slots, "default")
-    ],
-    38
-    /* CLASS, STYLE, NEED_HYDRATION */
-  );
-}
-const H = /* @__PURE__ */ m(e, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-scroll/NmorphScroll.vue"]]);
+      onScroll: O,
+      onMouseenter: X,
+      onMouseleave: Y
+    }, [
+      N(l.$slots, "default")
+    ], 38));
+  }
+});
 export {
-  H as default
+  F as default
 };

package/dist/components/basic/nmorph-scroll/NmorphScroll.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphScroll.css';
+import o from "./NmorphScroll.vue.js";
+/* empty css                  */
+export {
+  o as default
+};

package/dist/components/basic/nmorph-space/NmorphSpace.vue.js

@@ -1,21 +1,48 @@
 import './NmorphSpace.css';
-import r from "./NmorphSpace.vue2.js";
-import { openBlock as s, createBlock as t, resolveDynamicComponent as a, normalizeStyle as l, normalizeClass as c, withCtx as n, renderSlot as p } from "vue";
-/* empty css                 */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
-function i(e, f, _, o, d, h) {
-  return s(), t(a(o.props.tag), {
-    class: c(o.modifiers),
-    style: l(o.styles)
-  }, {
-    default: n(() => [
-      p(e.$slots, "default")
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 8, ["class", "style"]);
-}
-const k = /* @__PURE__ */ m(r, [["render", i], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-space/NmorphSpace.vue"]]);
+import { defineComponent as f, computed as a, openBlock as u, createBlock as c, resolveDynamicComponent as m, normalizeStyle as d, normalizeClass as y, withCtx as g, renderSlot as h } from "vue";
+import { useModifiers as j } from "../../../utils/create-modifiers.js";
+import { toCssSize as x } from "../../../utils/common.js";
+const _ = /* @__PURE__ */ f({
+  __name: "NmorphSpace",
+  props: {
+    tag: { default: "div" },
+    direction: { default: "row" },
+    size: { default: "medium" },
+    align: { default: "start" },
+    justify: { default: "start" },
+    wrap: { type: Boolean, default: !1 },
+    inline: { type: Boolean, default: !1 },
+    fill: { type: Boolean, default: !1 }
+  },
+  setup(l) {
+    const e = l, s = {
+      small: "4px",
+      medium: "8px",
+      large: "16px"
+    }, n = a(
+      () => j({
+        "nmorph-space": [e.direction, e.wrap && "wrap", e.inline && "inline", e.fill && "fill"]
+      })
+    ), o = (t) => x(s[t] || t), i = a(
+      () => e.align === "start" || e.align === "end" ? `flex-${e.align}` : e.align
+    ), r = a(
+      () => e.justify === "start" || e.justify === "end" ? `flex-${e.justify}` : e.justify
+    ), p = a(() => ({
+      "--nmorph-space-gap": o(e.size),
+      "--nmorph-space-align": i.value,
+      "--nmorph-space-justify": r.value
+    }));
+    return (t, z) => (u(), c(m(e.tag), {
+      class: y(n.value),
+      style: d(p.value)
+    }, {
+      default: g(() => [
+        h(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "style"]));
+  }
+});
 export {
-  k as default
+  _ as default
 };

package/dist/components/basic/nmorph-space/NmorphSpace.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphSpace.css';
+import o from "./NmorphSpace.vue.js";
+/* empty css                 */
+export {
+  o as default
+};

package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.css

@@ -0,0 +1 @@
+.nmorph-audio-meter{--nmorph-audio-meter-color: var(--nmorph-success-color);--nmorph-audio-meter-track-color: color-mix(in srgb, var(--nmorph-text-color) 16%, transparent);--nmorph-audio-meter-level: 0;--nmorph-audio-meter-percent: 0%;display:inline-flex;align-items:end}.nmorph-audio-meter.nmorph-audio-meter--warn{--nmorph-audio-meter-color: var(--nmorph-warn-color)}.nmorph-audio-meter.nmorph-audio-meter--error{--nmorph-audio-meter-color: var(--nmorph-error-color)}.nmorph-audio-meter.nmorph-audio-meter--bars{gap:2px;width:max-content;height:20px}.nmorph-audio-meter .nmorph-audio-meter__bar{width:4px;height:100%;background:var(--nmorph-audio-meter-track-color);border-radius:var(--border-radius-40);transform:scaleY(.3);transform-origin:bottom;opacity:.7}.nmorph-audio-meter .nmorph-audio-meter__bar--active{background:var(--nmorph-audio-meter-color);transform:scaleY(max(.35,var(--nmorph-audio-meter-level)));opacity:1}.nmorph-audio-meter.nmorph-audio-meter--line{width:72px;height:6px;overflow:hidden;background:var(--nmorph-audio-meter-track-color);border-radius:var(--border-radius-40)}.nmorph-audio-meter .nmorph-audio-meter__line{display:block;width:var(--nmorph-audio-meter-percent);height:100%;background:var(--nmorph-audio-meter-color)}.nmorph-audio-meter.nmorph-audio-meter--ring{width:28px;height:28px}.nmorph-audio-meter .nmorph-audio-meter__ring{display:block;width:100%;height:100%;background:radial-gradient(circle at center,var(--nmorph-main-color) 56%,transparent 58%),conic-gradient(var(--nmorph-audio-meter-color) var(--nmorph-audio-meter-percent),var(--nmorph-audio-meter-track-color) 0);border-radius:var(--border-radius-circular)}

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

@@ -0,0 +1,48 @@
+import './NmorphAudioMeter.css';
+import { defineComponent as f, computed as t, openBlock as o, createElementBlock as l, normalizeStyle as _, normalizeClass as m, Fragment as b, renderList as y } from "vue";
+import { useModifiers as M } from "../../../utils/create-modifiers.js";
+const k = ["aria-label", "aria-valuenow"], w = {
+  key: 1,
+  class: "nmorph-audio-meter__line"
+}, x = {
+  key: 2,
+  class: "nmorph-audio-meter__ring"
+}, T = /* @__PURE__ */ f({
+  __name: "NmorphAudioMeter",
+  props: {
+    value: { default: void 0 },
+    volumeDb: { default: void 0 },
+    variant: { default: "bars" },
+    bars: { default: 12 },
+    warnThreshold: { default: 0.7 },
+    errorThreshold: { default: 0.9 },
+    label: { default: "Audio level" }
+  },
+  setup(d) {
+    const e = d, n = (r) => Math.min(Math.max(r, 0), 1), a = t(() => typeof e.value == "number" ? n(e.value) : typeof e.volumeDb == "number" ? n((e.volumeDb + 60) / 60) : 0), u = t(() => Array.from({ length: Math.max(e.bars, 1) }, (r, s) => s)), v = t(() => a.value >= e.errorThreshold ? "error" : a.value >= e.warnThreshold ? "warn" : "normal"), c = t(
+      () => M({
+        "nmorph-audio-meter": [e.variant, v.value]
+      })
+    ), h = t(() => ({
+      "--nmorph-audio-meter-level": a.value,
+      "--nmorph-audio-meter-percent": `${Math.round(a.value * 100)}%`
+    })), p = (r) => (r + 1) / u.value.length <= a.value;
+    return (r, s) => (o(), l("div", {
+      class: m(c.value),
+      style: _(h.value),
+      role: "meter",
+      "aria-label": e.label,
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": Math.round(a.value * 100)
+    }, [
+      e.variant === "bars" ? (o(!0), l(b, { key: 0 }, y(u.value, (i) => (o(), l("span", {
+        key: i,
+        class: m(["nmorph-audio-meter__bar", { "nmorph-audio-meter__bar--active": p(i) }])
+      }, null, 2))), 128)) : e.variant === "line" ? (o(), l("span", w)) : (o(), l("span", x))
+    ], 14, k));
+  }
+});
+export {
+  T as default
+};

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

@@ -0,0 +1,6 @@
+import './NmorphAudioMeter.css';
+import o from "./NmorphAudioMeter.vue.js";
+/* empty css                      */
+export {
+  o as default
+};

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

@@ -1,114 +1,148 @@
 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";
-/* empty css                  */
-import S from "../../../_virtual/_plugin-vue_export-helper.js";
-function w(m, t, _, r, y, I) {
-  return e(), l(
-    "div",
-    {
-      class: h(r.modifiers),
-      style: n(r.styles),
-      onClick: r.openPreview
-    },
-    [
-      o(r.NmorphImage, {
-        fit: r.props.fit,
-        src: r.imageSrc,
-        "src-set": r.props.srcSet,
-        alt: r.props.alt,
+import { defineComponent as j, ref as q, computed as r, openBlock as l, createElementBlock as d, normalizeStyle as f, normalizeClass as G, createVNode as s, unref as i, withCtx as o, renderSlot as z, toDisplayString as k, createBlock as n, resolveDynamicComponent as $, createCommentVNode as I } from "vue";
+import { useModifiers as H } from "../../../utils/create-modifiers.js";
+import J from "../nmorph-image-preview/NmorphImagePreview.vue.js";
+/* empty css                                              */
+import A from "../../../assets/icons/avatar.svg.js";
+import K from "../nmorph-image/NmorphImage.vue.js";
+/* empty css                               */
+import u from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import b from "../../../assets/icons/loader.svg.js";
+const le = /* @__PURE__ */ j({
+  __name: "NmorphAvatar",
+  props: {
+    src: { default: void 0 },
+    size: { default: 48 },
+    shape: { default: "circle" },
+    frameBorder: { default: 2 },
+    imagePadding: { default: 4 },
+    name: { default: "" },
+    fallback: { default: () => A },
+    preview: { type: Boolean, default: !1 },
+    previewSrc: { default: void 0 },
+    previewInitialIndex: { default: 0 },
+    previewScaleStep: { default: 0.2 },
+    previewMinScaleLevel: { default: 0.2 },
+    previewMaxScaleLevel: { default: 4 },
+    srcSet: {},
+    fit: {},
+    alt: {}
+  },
+  emits: ["error", "load"],
+  setup(B, { emit: C }) {
+    const e = B, h = C, L = (a) => {
+      h("error", a);
+    }, M = (a) => {
+      h("load", a);
+    }, m = q(!1), P = (a, t = 0) => Array.isArray(a) ? a[t] : a, N = r(() => `${e.imagePadding}px`), p = r(() => `${e.size}px`), w = r(() => P(e.src)), g = r(() => e.previewSrc || e.src), V = r(() => {
+      const a = g.value;
+      return Array.isArray(a) ? a.length > 0 : !!a;
+    }), D = r(() => {
+      const a = g.value;
+      return Array.isArray(a) ? a : a || "";
+    }), v = r(() => e.preview && V.value), E = r(
+      () => H({
+        nmorph: [e.frameBorder > 0 && "shadow-combined"],
+        "nmorph-avatar": [e.shape, v.value && "preview"]
+      })
+    ), S = r(() => `${e.size / 100 * 60}px`), y = r(() => `${Math.max(12, e.size * 0.38)}px`), U = r(() => e.shape === "circle" ? "50%" : "4px"), F = r(() => e.shape === "circle" ? "50%" : "2px"), O = r(() => ({
+      width: p.value,
+      height: p.value,
+      "--nmorph-avatar-size": p.value,
+      "--nmorph-avatar-image-padding": N.value,
+      "--nmorph-avatar-radius": U.value,
+      "--nmorph-avatar-image-radius": F.value,
+      "--nmorph-avatar-frame-border": `${e.frameBorder}px`
+    })), x = r(() => e.fallback || A), c = r(() => {
+      const a = e.name.trim();
+      if (!a) return "";
+      const t = a.split(/\s+/);
+      return (t.length > 1 ? `${t[0][0]}${t[t.length - 1][0]}` : t[0].slice(0, 2)).toUpperCase();
+    }), R = () => {
+      v.value && (m.value = !0);
+    };
+    return (a, t) => (l(), d("div", {
+      class: G(E.value),
+      style: f(O.value),
+      onClick: R
+    }, [
+      s(i(K), {
+        fit: e.fit,
+        src: w.value,
+        "src-set": e.srcSet,
+        alt: e.alt,
         "frame-border": 0,
-        onLoad: r.onImageLoad,
-        onError: r.onImageError
+        onLoad: M,
+        onError: L
       }, {
-        loading: a(() => [
-          o(r.NmorphIcon, { size: "small" }, {
-            default: a(() => [
-              o(r.NmorphIconLoaderDots)
+        loading: o(() => [
+          s(i(u), { size: "small" }, {
+            default: o(() => [
+              s(i(b))
             ]),
             _: 1
-            /* STABLE */
           })
         ]),
-        error: a(() => [
-          c(m.$slots, "error", {}, () => [
-            r.initials ? (e(), l(
-              "span",
-              {
-                key: 0,
-                class: "nmorph-avatar__initials",
-                style: n({ fontSize: r.initialsFontSize })
-              },
-              s(r.initials),
-              5
-              /* TEXT, STYLE */
-            )) : (e(), i(r.NmorphIcon, {
+        error: o(() => [
+          z(a.$slots, "error", {}, () => [
+            c.value ? (l(), d("span", {
+              key: 0,
+              class: "nmorph-avatar__initials",
+              style: f({ fontSize: y.value })
+            }, k(c.value), 5)) : (l(), n(i(u), {
               key: 1,
-              width: r.stubIconSize
+              width: S.value
             }, {
-              default: a(() => [
-                (e(), i(d(r.fallback)))
+              default: o(() => [
+                (l(), n($(x.value)))
               ]),
               _: 1
-              /* STABLE */
             }, 8, ["width"]))
           ])
         ]),
         _: 3
-        /* FORWARDED */
       }, 8, ["fit", "src", "src-set", "alt"]),
-      r.imageSrc ? v("v-if", !0) : c(m.$slots, "error", { key: 0 }, () => [
-        r.initials ? (e(), l(
-          "span",
-          {
-            key: 0,
-            class: "nmorph-avatar__initials",
-            style: n({ fontSize: r.initialsFontSize })
-          },
-          s(r.initials),
-          5
-          /* TEXT, STYLE */
-        )) : (e(), i(r.NmorphIcon, {
+      w.value ? I("", !0) : z(a.$slots, "error", { key: 0 }, () => [
+        c.value ? (l(), d("span", {
+          key: 0,
+          class: "nmorph-avatar__initials",
+          style: f({ fontSize: y.value })
+        }, k(c.value), 5)) : (l(), n(i(u), {
           key: 1,
-          width: r.stubIconSize
+          width: S.value
         }, {
-          default: a(() => [
-            (e(), i(d(r.fallback)))
+          default: o(() => [
+            (l(), n($(x.value)))
           ]),
           _: 1
-          /* STABLE */
         }, 8, ["width"]))
       ]),
-      r.previewAvailable ? (e(), i(r.NmorphImagePreview, {
+      v.value ? (l(), n(J, {
         key: 1,
-        modelValue: r.previewOpen,
-        "onUpdate:modelValue": t[0] || (t[0] = (f) => r.previewOpen = f),
+        modelValue: m.value,
+        "onUpdate:modelValue": t[0] || (t[0] = (_) => m.value = _),
         "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: D.value,
+        alt: e.alt,
+        "initial-index": e.previewInitialIndex,
+        "scale-step": e.previewScaleStep,
+        "min-scale-level": e.previewMinScaleLevel,
+        "max-scale-level": e.previewMaxScaleLevel
       }, {
-        loading: a(() => [
-          o(r.NmorphIcon, { size: "small" }, {
-            default: a(() => [
-              o(r.NmorphIconLoaderDots)
+        loading: o(() => [
+          s(i(u), { size: "small" }, {
+            default: o(() => [
+              s(i(b))
             ]),
             _: 1
-            /* STABLE */
           })
         ]),
         _: 1
-        /* STABLE */
-      }, 8, ["modelValue", "src", "alt", "initial-index", "scale-step", "min-scale-level", "max-scale-level"])) : v("v-if", !0)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const b = /* @__PURE__ */ S(p, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-avatar/NmorphAvatar.vue"]]);
+      }, 8, ["modelValue", "src", "alt", "initial-index", "scale-step", "min-scale-level", "max-scale-level"])) : I("", !0)
+    ], 6));
+  }
+});
 export {
-  b as default
+  le as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphAvatar.css';
+import o from "./NmorphAvatar.vue.js";
+/* empty css                  */
+export {
+  o 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-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(--border-radius-40);border-bottom-left-radius:var(--border-radius-40);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(--border-radius-40);border-bottom-left-radius:var(--border-radius-40);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(--border-radius-40);border-top-right-radius:var(--border-radius-40);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(--border-radius-40);border-top-right-radius:var(--border-radius-40);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-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}