@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

package/dist/components/basic/nmorph-icon/types.js

@@ -1,4 +1,8 @@
-var a = /* @__PURE__ */ ((l) => (l.small = "small", l.medium = "medium", l.large = "large", l))(a || {});
+const m = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
 export {
-  a as NmorphIconSize
+  m as NmorphIconSize
 };

package/dist/components/basic/nmorph-layout/NmorphLayout.css

@@ -1 +1 @@
-.nmorph-layout{display:flex;flex-direction:column;gap:var(--nmorph-layout-gap);box-sizing:border-box;width:100%;min-width:0}.nmorph-layout--full-height{min-height:100%}.nmorph-layout .nmorph-layout__header,.nmorph-layout .nmorph-layout__footer{flex:0 0 auto;min-width:0}.nmorph-layout .nmorph-layout__body{display:flex;flex:1 1 auto;gap:var(--nmorph-layout-gap);min-width:0;min-height:0}.nmorph-layout .nmorph-layout__aside{flex:0 0 var(--nmorph-layout-aside-width);width:var(--nmorph-layout-aside-width);min-width:0}.nmorph-layout .nmorph-layout__main{flex:1 1 auto;min-width:0;min-height:0}
+.nmorph-layout{display:flex;flex-direction:column;gap:var(--nmorph-private-layout-gap);box-sizing:border-box;width:100%;min-width:0}.nmorph-layout--full-height{min-height:100%}.nmorph-layout .nmorph-layout__header,.nmorph-layout .nmorph-layout__footer{flex:0 0 auto;min-width:0}.nmorph-layout .nmorph-layout__body{display:flex;flex:1 1 auto;gap:var(--nmorph-private-layout-gap);min-width:0;min-height:0}.nmorph-layout .nmorph-layout__aside{flex:0 0 var(--nmorph-private-layout-aside-width);width:var(--nmorph-private-layout-aside-width);min-width:0}.nmorph-layout .nmorph-layout__main{flex:1 1 auto;min-width:0;min-height:0}

package/dist/components/basic/nmorph-layout/NmorphLayout.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphLayout.css';
-import { defineComponent as u, useSlots as p, computed as r } from "vue";
+import { defineComponent as p, useSlots as u, computed as r } from "vue";
 import { useModifiers as d } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as n } from "../../../utils/common.js";
-const g = /* @__PURE__ */ u({
+const g = /* @__PURE__ */ p({
   __name: "NmorphLayout",
   props: {
     tag: { type: String, required: !1, default: "section" },
@@ -11,16 +11,16 @@ const g = /* @__PURE__ */ u({
     asidePosition: { type: String, required: !1, default: "left" },
     fullHeight: { type: Boolean, required: !1, default: !1 }
   },
-  setup(s, { expose: i }) {
-    i();
-    const e = s, o = p(), a = r(
+  setup(i, { expose: s }) {
+    s();
+    const e = i, o = u(), a = r(
       () => d({
         "nmorph-layout": [`aside-${e.asidePosition}`, e.fullHeight && "full-height"]
       })
     ), l = r(
       () => n({
-        "--nmorph-layout-gap": e.gap,
-        "--nmorph-layout-aside-width": e.asideWidth
+        "--nmorph-private-layout-gap": e.gap,
+        "--nmorph-private-layout-aside-width": e.asideWidth
       })
     ), t = { props: e, slots: o, modifiers: a, styles: l };
     return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;

package/dist/components/basic/nmorph-link/NmorphLink.css

@@ -1 +1 @@
-.nmorph-link{--link-color: var(--nmorph-accent-color);display:inline-block}.nmorph-link a{display:flex;align-items:center;color:var(--link-color);text-decoration:none}.nmorph-link .nmorph-link__icon{margin:0 var(--indentation-02);--color: var(--link-color)}.nmorph-link:hover{filter:brightness(85%)}.nmorph-link.nmorph-link--underline{position:relative}.nmorph-link.nmorph-link--underline:not(.nmorph-link--disabled):hover:before{position:absolute;right:0;bottom:0;left:0;height:0;border-bottom:1px solid var(--link-color);content:""}.nmorph-link.nmorph-link--disabled{cursor:not-allowed;opacity:.6}.nmorph-link.nmorph-link--disabled a{pointer-events:none}.nmorph-link.nmorph-link--success{--link-color: var(--nmorph-success-color)}.nmorph-link.nmorph-link--warning{--link-color: var(--nmorph-warn-color)}.nmorph-link.nmorph-link--error{--link-color: var(--nmorph-error-color)}
+.nmorph-link{--nmorph-private-link-color: var(--nmorph-accent-color);display:inline-block}.nmorph-link a{display:flex;align-items:center;color:var(--nmorph-private-link-color);text-decoration:none}.nmorph-link .nmorph-link__icon{margin:0 var(--indentation-02);--nmorph-private-icon-color: var(--nmorph-private-link-color)}.nmorph-link:hover{filter:brightness(85%)}.nmorph-link.nmorph-link--underline{position:relative}.nmorph-link.nmorph-link--underline:not(.nmorph-link--disabled):hover:before{position:absolute;right:0;bottom:0;left:0;height:0;border-bottom:1px solid var(--nmorph-private-link-color);content:""}.nmorph-link.nmorph-link--disabled{cursor:not-allowed;opacity:.6}.nmorph-link.nmorph-link--disabled a{pointer-events:none}.nmorph-link.nmorph-link--success{--nmorph-private-link-color: var(--nmorph-success-color)}.nmorph-link.nmorph-link--warning{--nmorph-private-link-color: var(--nmorph-warn-color)}.nmorph-link.nmorph-link--error{--nmorph-private-link-color: var(--nmorph-error-color)}

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

@@ -1,8 +1,8 @@
 import './NmorphLink.css';
 import { defineComponent as y, useSlots as g, computed as r } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { createCssVariables as v } from "../../../utils/common.js";
-import * as h from "../nmorph-icon/NmorphIcons.js";
+import { useModifiers as v } from "../../../utils/create-modifiers.js";
+import { createCssVariables as h } from "../../../utils/common.js";
+import * as q from "../nmorph-icon/NmorphIcons.js";
 import { NmorphLinkTarget as S } from "./types.js";
 import { NmorphColor as N } from "../../../types/common.types.js";
 import _ from "../nmorph-icon/NmorphIcon.vue.js";
@@ -26,16 +26,16 @@ const L = /* @__PURE__ */ y({
   },
   setup(n, { expose: d }) {
     d();
-    const e = n, s = g(), t = h, o = (m) => m.split(/[-_\s]+/).filter(Boolean).map((a) => `${a.charAt(0).toUpperCase()}${a.slice(1)}`).join(""), f = r(() => {
+    const e = n, s = g(), t = q, o = (m) => m.split(/[-_\s]+/).filter(Boolean).map((a) => `${a.charAt(0).toUpperCase()}${a.slice(1)}`).join(""), f = r(() => {
       if (e.iconName)
         return e.iconName in t ? t[e.iconName] : t[`NmorphIcon${o(e.iconName)}`];
     }), p = r(
-      () => q({
+      () => v({
         "nmorph-link": [e.type, e.underline && "underline", e.disabled && "disabled"]
       })
     ), u = r(
-      () => v({
-        "--link-color": e.color
+      () => h({
+        "--nmorph-private-link-color": e.color
       })
     ), l = r(() => S[e.target] ?? e.target), c = r(() => ({
       href: e.href,

package/dist/components/basic/nmorph-link/types.js

@@ -1,4 +1,9 @@
-var _ = /* @__PURE__ */ ((l) => (l.self = "_self", l.blank = "_blank", l.parent = "_parent", l.top = "_top", l))(_ || {});
+const t = {
+  self: "_self",
+  blank: "_blank",
+  parent: "_parent",
+  top: "_top"
+};
 export {
-  _ as NmorphLinkTarget
+  t as NmorphLinkTarget
 };

package/dist/components/basic/nmorph-scroll/NmorphScroll.css

@@ -1 +1 @@
-.nmorph-scroll{--thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));position:relative;overflow:hidden;color-scheme:var(--nmorph-scroll-color-scheme, light)}.nmorph-scroll__viewport{display:inherit;flex-direction:inherit;flex-wrap:inherit;grid-auto-flow:inherit;grid-template-columns:inherit;grid-template-rows:inherit;gap:inherit;justify-content:inherit;align-content:inherit;align-items:inherit;box-sizing:border-box;width:100%;height:100%;color-scheme:inherit;scrollbar-width:none;-ms-overflow-style:none}.nmorph-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.nmorph-scroll__bar{position:absolute;z-index:1;background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset);opacity:.78;transition:opacity ease-in-out .16s,background-color ease-in-out .16s;touch-action:none}.nmorph-scroll__bar--vertical{top:0;right:0;width:var(--bar-width)}.nmorph-scroll__bar--horizontal{right:0;bottom:0;left:0;height:var(--bar-height)}.nmorph-scroll__thumb{position:absolute;top:0;left:0;background-color:var(--thumb-color);border-radius:var(--border-radius-40);cursor:pointer;transition:background-color ease-in-out .16s;touch-action:none}.nmorph-scroll__thumb--vertical{width:100%}.nmorph-scroll__thumb--horizontal{height:100%}.nmorph-scroll--show-bars .nmorph-scroll__bar,.nmorph-scroll__bar:hover{opacity:1}.nmorph-scroll--dragging .nmorph-scroll__thumb{cursor:grabbing}.nmorph-scroll::-webkit-scrollbar{width:var(--bar-width);height:var(--bar-height);background-color:transparent;cursor:pointer;transition:width ease-in-out .2s}.nmorph-scroll::-webkit-scrollbar-button,.nmorph-scroll::-webkit-scrollbar-button:single-button,.nmorph-scroll::-webkit-scrollbar-button:double-button,.nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,.nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;min-width:0!important;max-width:0!important;height:0!important;min-height:0!important;max-height:0!important;background:transparent!important;background-image:none!important;border:0!important;appearance:none}.nmorph-scroll::-webkit-scrollbar-track{background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset)}.nmorph-scroll::-webkit-scrollbar-thumb{background-color:var(--thumb-color);border-radius:var(--border-radius-40)}.nmorph-scroll::-webkit-scrollbar-corner{background-color:transparent}
+.nmorph-scroll{--nmorph-private-scroll-thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));position:relative;overflow:hidden;color-scheme:var(--nmorph-scroll-color-scheme, light)}.nmorph-scroll__viewport{display:inherit;flex-direction:inherit;flex-wrap:inherit;grid-auto-flow:inherit;grid-template-columns:inherit;grid-template-rows:inherit;gap:inherit;justify-content:inherit;align-content:inherit;align-items:inherit;box-sizing:border-box;width:100%;height:100%;color-scheme:inherit;scrollbar-width:none;-ms-overflow-style:none}.nmorph-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.nmorph-scroll__bar{position:absolute;z-index:1;background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset);opacity:.78;transition:opacity ease-in-out .16s,background-color ease-in-out .16s;touch-action:none}.nmorph-scroll__bar--vertical{top:0;right:0;width:var(--nmorph-private-scroll-bar-width)}.nmorph-scroll__bar--horizontal{right:0;bottom:0;left:0;height:var(--nmorph-private-scroll-bar-height)}.nmorph-scroll__thumb{position:absolute;top:0;left:0;background-color:var(--nmorph-private-scroll-thumb-color);border-radius:var(--border-radius-40);cursor:pointer;transition:background-color ease-in-out .16s;touch-action:none}.nmorph-scroll__thumb--vertical{width:100%}.nmorph-scroll__thumb--horizontal{height:100%}.nmorph-scroll--show-bars .nmorph-scroll__bar,.nmorph-scroll__bar:hover{opacity:1}.nmorph-scroll--dragging .nmorph-scroll__thumb{cursor:grabbing}.nmorph-scroll::-webkit-scrollbar{width:var(--nmorph-private-scroll-bar-width);height:var(--nmorph-private-scroll-bar-height);background-color:transparent;cursor:pointer;transition:width ease-in-out .2s}.nmorph-scroll::-webkit-scrollbar-button,.nmorph-scroll::-webkit-scrollbar-button:single-button,.nmorph-scroll::-webkit-scrollbar-button:double-button,.nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,.nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,.nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment{display:none!important;width:0!important;min-width:0!important;max-width:0!important;height:0!important;min-height:0!important;max-height:0!important;background:transparent!important;background-image:none!important;border:0!important;appearance:none}.nmorph-scroll::-webkit-scrollbar-track{background:transparent;border-radius:var(--border-radius-40);box-shadow:var(--nmorph-shadow-inset)}.nmorph-scroll::-webkit-scrollbar-thumb{background-color:var(--nmorph-private-scroll-thumb-color);border-radius:var(--border-radius-40)}.nmorph-scroll::-webkit-scrollbar-corner{background-color:transparent}

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

@@ -20,7 +20,8 @@ function v(m, r, _, o, b, y) {
           ref: "scrollDOMContainer",
           class: "nmorph-scroll__viewport",
           style: n(o.viewportStyle),
-          onScroll: o.scrollHandler
+          onScroll: o.scrollHandler,
+          onWheel: o.wheelHandler
         },
         [
           d(m.$slots, "default")
@@ -81,7 +82,7 @@ function v(m, r, _, o, b, y) {
     /* CLASS, STYLE, NEED_HYDRATION */
   );
 }
-const H = /* @__PURE__ */ h(s, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-scroll/NmorphScroll.vue"]]);
+const S = /* @__PURE__ */ h(s, [["render", v], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-scroll/NmorphScroll.vue"]]);
 export {
-  H as default
+  S as default
 };

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

@@ -1,7 +1,7 @@
 import './NmorphScroll.css';
-import { defineComponent as xe, ref as h, computed as o, inject as Pe, onUnmounted as we, onMounted as He, watch as le, nextTick as ze } from "vue";
-import { useModifiers as Te } from "../../../utils/create-modifiers.js";
-const Ee = /* @__PURE__ */ xe({
+import { defineComponent as Te, ref as h, computed as l, inject as ze, onUnmounted as Be, onMounted as Me, watch as se, nextTick as We } from "vue";
+import { useModifiers as Oe } from "../../../utils/create-modifiers.js";
+const qe = /* @__PURE__ */ Te({
   __name: "NmorphScroll",
   props: {
     height: { type: String, required: !1, default: "100%" },
@@ -21,20 +21,20 @@ const Ee = /* @__PURE__ */ xe({
     yGapInPx: { type: Number, required: !1, default: 0 }
   },
   emits: ["on-scroll", "update:model-value", "on-scroll-end"],
-  setup(ne, { expose: se, emit: ie }) {
-    const r = ne, ae = h(null), i = h(null), $ = o(() => r.scrollYProp), V = o(() => r.scrollXProp), g = h(!1), b = h(!1), a = h({
+  setup(ie, { expose: ce, emit: ue }) {
+    const r = ie, de = h(null), a = h(null), V = l(() => r.scrollYProp), $ = l(() => r.scrollXProp), v = h(!1), p = h(!1), s = h({
       clientWidth: 0,
       clientHeight: 0,
       scrollWidth: 0,
       scrollHeight: 0,
       scrollLeft: 0,
       scrollTop: 0
-    }), S = h(!1);
-    let y, c, x, n, H = "";
-    const v = /* @__PURE__ */ new Set(), z = () => {
-      const e = i.value;
+    }), y = h(!1);
+    let x, c, P, i, H = "";
+    const m = /* @__PURE__ */ new Set(), T = () => {
+      const e = a.value;
       if (!e) {
-        g.value = !1, b.value = !1, a.value = {
+        v.value = !1, p.value = !1, s.value = {
           clientWidth: 0,
           clientHeight: 0,
           scrollWidth: 0,
@@ -52,174 +52,185 @@ const Ee = /* @__PURE__ */ xe({
         scrollLeft: e.scrollLeft,
         scrollTop: e.scrollTop
       };
-      a.value = t, g.value = t.scrollHeight > t.clientHeight, b.value = t.scrollWidth > t.clientWidth;
-    }, p = () => {
-      ze(z);
-    }, W = () => {
-      if (!c || !i.value) return;
-      const e = new Set(Array.from(i.value.children));
-      v.forEach((t) => {
-        e.has(t) || (c?.unobserve(t), v.delete(t));
+      s.value = t, v.value = t.scrollHeight > t.clientHeight, p.value = t.scrollWidth > t.clientWidth;
+    }, f = () => {
+      We(T);
+    }, O = () => {
+      if (!c || !a.value) return;
+      const e = new Set(Array.from(a.value.children));
+      m.forEach((t) => {
+        e.has(t) || (c?.unobserve(t), m.delete(t));
       }), e.forEach((t) => {
-        v.has(t) || (c?.observe(t), v.add(t));
+        m.has(t) || (c?.observe(t), m.add(t));
       });
     }, N = () => {
-      const e = i.value;
+      const e = a.value;
       e && (typeof ResizeObserver < "u" && (c = new ResizeObserver(() => {
-        p();
-      }), W()), typeof MutationObserver < "u" && (x = new MutationObserver(() => {
-        W(), p();
-      }), x.observe(e, {
+        f();
+      }), O()), typeof MutationObserver < "u" && (P = new MutationObserver(() => {
+        O(), f();
+      }), P.observe(e, {
         attributes: !0,
         characterData: !0,
         childList: !0,
         subtree: !0
       })));
-    }, U = o(() => r.yBarWidthInPx + r.yGapInPx), G = o(() => r.xBarWidthInPx + r.xGapInPx), j = o(
-      () => r.scrollYProp === "hidden" || !g.value ? "0" : `${U.value}px`
-    ), A = o(
-      () => r.scrollXProp === "hidden" || !b.value ? "0" : `${G.value}px`
-    ), M = o(() => `${r.yBarWidthInPx}px`), E = o(() => `${r.xBarWidthInPx}px`), ce = o(() => I.value ? E.value : "0px"), ue = o(() => R.value ? M.value : "0px"), F = Pe("nmorph");
+    }, U = l(() => r.yBarWidthInPx + r.yGapInPx), G = l(() => r.xBarWidthInPx + r.xGapInPx), j = l(
+      () => r.scrollYProp === "hidden" || !v.value ? "0" : `${U.value}px`
+    ), A = l(
+      () => r.scrollXProp === "hidden" || !p.value ? "0" : `${G.value}px`
+    ), E = l(() => `${r.yBarWidthInPx}px`), L = l(() => `${r.xBarWidthInPx}px`), he = l(() => q.value ? L.value : "0px"), ve = l(() => I.value ? E.value : "0px"), F = ze("nmorph");
     let u;
-    const T = ie, L = () => {
-      const e = i.value;
+    const z = ue, R = () => {
+      const e = a.value;
       if (!e) return;
-      const t = Math.trunc(e.scrollLeft), l = Math.trunc(e.scrollTop);
-      T("update:model-value", { x: t, y: l });
+      const t = Math.trunc(e.scrollLeft), o = Math.trunc(e.scrollTop);
+      z("update:model-value", { x: t, y: o });
     }, J = () => {
-      T("on-scroll-end");
-    }, de = (e) => {
-      z(), T("on-scroll", e), i.value && (r.updateOnlyOnScrollEnd || L(), u !== void 0 && clearTimeout(u), u = setTimeout(() => {
-        r.updateOnlyOnScrollEnd && L(), J();
+      z("on-scroll-end");
+    }, pe = (e) => {
+      T(), z("on-scroll", e), a.value && (r.updateOnlyOnScrollEnd || R(), u !== void 0 && clearTimeout(u), u = setTimeout(() => {
+        r.updateOnlyOnScrollEnd && R(), J();
       }, r.scrollEndDelay));
+    }, K = (e) => e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? Math.max(s.value.clientWidth, 1) : 1, Q = (e) => {
+      if (r.scrollYProp === "hidden" || !v.value || !e) return !1;
+      const t = s.value.scrollTop, o = b("y");
+      return e < 0 ? t > 0 : e > 0 ? t < o : !1;
+    }, me = (e) => {
+      const t = a.value;
+      if (!t || r.scrollXProp === "hidden" || !p.value || !e.deltaY || Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+      const o = e.deltaY * K(e);
+      if (Q(o)) return;
+      const n = t.scrollLeft;
+      W("x", n + o), t.scrollLeft !== n && e.preventDefault();
     };
-    we(() => {
-      u !== void 0 && clearTimeout(u), y?.disconnect(), c?.disconnect(), x?.disconnect(), v.clear(), X();
+    Be(() => {
+      u !== void 0 && clearTimeout(u), x?.disconnect(), c?.disconnect(), P?.disconnect(), m.clear(), X();
     });
-    const B = h(!1), he = o(
-      () => Te({
+    const B = h(!1), fe = l(
+      () => Oe({
         "nmorph-scroll": {
-          "show-bars": B.value || S.value,
-          dragging: S.value
+          "show-bars": B.value || y.value,
+          dragging: y.value
         }
       })
-    ), O = (e) => {
-      const { x: t, y: l } = e;
-      i.value?.scrollTo({
+    ), Z = () => r.cssScrollBehavior === "smooth" ? "smooth" : "auto", M = (e) => {
+      const { x: t, y: o } = e;
+      a.value?.scrollTo({
         left: t,
-        top: l,
-        behavior: "smooth"
+        top: o,
+        behavior: Z()
       });
     };
-    He(() => {
-      O(r.modelValue), N(), p(), typeof ResizeObserver < "u" && i.value && (y = new ResizeObserver(() => {
-        p();
-      }), y.observe(i.value));
-    }), le(
+    Me(() => {
+      M(r.modelValue), N(), f(), typeof ResizeObserver < "u" && a.value && (x = new ResizeObserver(() => {
+        f();
+      }), x.observe(a.value));
+    }), se(
       () => r.modelValue,
       (e) => {
-        O(e);
+        M(e);
       },
       { deep: !0, immediate: !0 }
-    ), le(
+    ), se(
       () => F?.browser.dimensions,
       () => {
-        p();
+        f();
       },
       { deep: !0, immediate: !0 }
     );
-    const K = o(() => r.cssScrollBehavior), Q = o(() => r.height), Z = o(() => r.maxHeight), ve = o(() => ({
-      "--bar-width": M.value,
-      "--bar-height": E.value,
+    const ee = l(() => r.cssScrollBehavior), te = l(() => r.height), re = l(() => r.maxHeight), ge = l(() => ({
+      "--nmorph-private-scroll-bar-width": E.value,
+      "--nmorph-private-scroll-bar-height": L.value,
       boxSizing: "border-box",
       minWidth: "0",
       minHeight: "0",
-      height: Q.value,
-      maxHeight: Z.value
-    })), pe = o(() => ({
+      height: te.value,
+      maxHeight: re.value
+    })), be = l(() => ({
       paddingRight: j.value,
       paddingBottom: A.value,
-      overflowX: V.value,
-      overflowY: $.value,
-      scrollBehavior: K.value
-    })), R = o(() => r.scrollYProp !== "hidden" && g.value), I = o(() => r.scrollXProp !== "hidden" && b.value), ee = o(
-      () => Math.max(0, a.value.clientHeight - (I.value ? r.xBarWidthInPx : 0))
-    ), te = o(
-      () => Math.max(0, a.value.clientWidth - (R.value ? r.yBarWidthInPx : 0))
-    ), m = (e) => e === "y" ? ee.value : te.value, q = (e) => e === "y" ? a.value.clientHeight : a.value.clientWidth, _ = (e) => e === "y" ? a.value.scrollHeight : a.value.scrollWidth, k = (e) => e === "y" ? a.value.scrollTop : a.value.scrollLeft, re = (e) => Math.min(m(e), Math.max(18, e === "y" ? r.yBarWidthInPx * 3 : r.xBarWidthInPx * 3)), P = (e) => Math.max(0, _(e) - q(e)), d = (e) => {
-      const t = m(e), l = _(e), s = q(e);
-      return t <= 0 || l <= s ? 0 : Math.min(t, Math.max(re(e), s / l * t));
-    }, D = (e) => {
-      const t = P(e), l = Math.max(0, m(e) - d(e));
-      return !t || !l ? 0 : k(e) / t * l;
-    }, me = o(() => ({
+      overflowX: $.value,
+      overflowY: V.value,
+      scrollBehavior: ee.value
+    })), I = l(() => r.scrollYProp !== "hidden" && v.value), q = l(() => r.scrollXProp !== "hidden" && p.value), oe = l(
+      () => Math.max(0, s.value.clientHeight - (q.value ? r.xBarWidthInPx : 0))
+    ), le = l(
+      () => Math.max(0, s.value.clientWidth - (I.value ? r.yBarWidthInPx : 0))
+    ), g = (e) => e === "y" ? oe.value : le.value, D = (e) => e === "y" ? s.value.clientHeight : s.value.clientWidth, Y = (e) => e === "y" ? s.value.scrollHeight : s.value.scrollWidth, _ = (e) => e === "y" ? s.value.scrollTop : s.value.scrollLeft, ne = (e) => Math.min(g(e), Math.max(18, e === "y" ? r.yBarWidthInPx * 3 : r.xBarWidthInPx * 3)), b = (e) => Math.max(0, Y(e) - D(e)), d = (e) => {
+      const t = g(e), o = Y(e), n = D(e);
+      return t <= 0 || o <= n ? 0 : Math.min(t, Math.max(ne(e), n / o * t));
+    }, k = (e) => {
+      const t = b(e), o = Math.max(0, g(e) - d(e));
+      return !t || !o ? 0 : _(e) / t * o;
+    }, Se = l(() => ({
       height: `${d("y")}px`,
-      transform: `translate3d(0, ${D("y")}px, 0)`
-    })), fe = o(() => ({
+      transform: `translate3d(0, ${k("y")}px, 0)`
+    })), ye = l(() => ({
       width: `${d("x")}px`,
-      transform: `translate3d(${D("x")}px, 0, 0)`
-    })), C = (e, t) => {
-      const l = i.value;
-      if (!l) return;
-      const s = Math.max(0, Math.min(P(e), t));
-      e === "y" ? l.scrollTop = s : l.scrollLeft = s, z();
+      transform: `translate3d(${k("x")}px, 0, 0)`
+    })), W = (e, t) => {
+      const o = a.value;
+      if (!o) return;
+      const n = Math.max(0, Math.min(b(e), t));
+      e === "y" ? o.scrollTop = n : o.scrollLeft = n, T();
     }, X = () => {
-      n && (window.removeEventListener("pointermove", Y), window.removeEventListener("pointerup", w), window.removeEventListener("pointercancel", w), n = void 0, S.value = !1, document.body && (document.body.style.userSelect = H));
-    }, Y = (e) => {
-      if (!n) return;
-      const l = (n.axis === "y" ? e.clientY : e.clientX) - n.pointerStart, s = Math.max(1, n.trackSize - n.thumbSize), f = l / s * n.maxScroll;
-      C(n.axis, n.scrollStart + f);
+      i && (window.removeEventListener("pointermove", C), window.removeEventListener("pointerup", w), window.removeEventListener("pointercancel", w), i = void 0, y.value = !1, document.body && (document.body.style.userSelect = H));
+    }, C = (e) => {
+      if (!i) return;
+      const o = (i.axis === "y" ? e.clientY : e.clientX) - i.pointerStart, n = Math.max(1, i.trackSize - i.thumbSize), S = o / n * i.maxScroll;
+      W(i.axis, i.scrollStart + S);
     }, w = () => {
       X();
-    }, ge = (e, t) => {
+    }, xe = (e, t) => {
       t.preventDefault(), t.stopPropagation();
-      const l = m(e), s = d(e), f = P(e);
-      !l || !s || !f || (n = {
+      const o = g(e), n = d(e), S = b(e);
+      !o || !n || !S || (i = {
         axis: e,
         pointerStart: e === "y" ? t.clientY : t.clientX,
-        scrollStart: k(e),
-        trackSize: l,
-        thumbSize: s,
-        maxScroll: f
-      }, S.value = !0, H = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", Y), window.addEventListener("pointerup", w), window.addEventListener("pointercancel", w));
-    }, be = (e, t) => {
+        scrollStart: _(e),
+        trackSize: o,
+        thumbSize: n,
+        maxScroll: S
+      }, y.value = !0, H = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", C), window.addEventListener("pointerup", w), window.addEventListener("pointercancel", w));
+    }, Pe = (e, t) => {
       if (t.target.closest(".nmorph-scroll__thumb")) return;
-      const s = t.currentTarget.getBoundingClientRect(), f = e === "y" ? t.clientY - s.top : t.clientX - s.left, Se = Math.max(1, m(e) - d(e)), ye = (f - d(e) / 2) / Se * P(e);
-      C(e, ye);
+      const n = t.currentTarget.getBoundingClientRect(), S = e === "y" ? t.clientY - n.top : t.clientX - n.left, we = Math.max(1, g(e) - d(e)), He = (S - d(e) / 2) / we * b(e);
+      W(e, He);
     };
-    se({ scrollDOMContainer: i, moveTo: O });
-    const oe = { props: r, scrollRoot: ae, scrollDOMContainer: i, overflowY: $, overflowX: V, hasVerticalScroll: g, hasHorizontalScroll: b, metrics: a, isDragging: S, get viewportResizeObserver() {
-      return y;
+    ce({ scrollDOMContainer: a, moveTo: M });
+    const ae = { props: r, scrollRoot: de, scrollDOMContainer: a, overflowY: V, overflowX: $, hasVerticalScroll: v, hasHorizontalScroll: p, metrics: s, isDragging: y, get viewportResizeObserver() {
+      return x;
     }, set viewportResizeObserver(e) {
-      y = e;
+      x = e;
     }, get contentResizeObserver() {
       return c;
     }, set contentResizeObserver(e) {
       c = e;
     }, get mutationObserver() {
-      return x;
+      return P;
     }, set mutationObserver(e) {
-      x = e;
+      P = e;
     }, get dragState() {
-      return n;
+      return i;
     }, set dragState(e) {
-      n = e;
+      i = e;
     }, get previousBodyUserSelect() {
       return H;
     }, set previousBodyUserSelect(e) {
       H = e;
-    }, observedContentElements: v, updateScrollableState: z, queueScrollableStateUpdate: p, refreshObservedContentElements: W, observeScrollableContent: N, paddingRightCandidate: U, paddingBottomCandidate: G, paddingRight: j, paddingBottom: A, barWidth: M, barHeight: E, verticalBarBottom: ce, horizontalBarRight: ue, nmorph: F, get scrollEndTimeout() {
+    }, observedContentElements: m, updateScrollableState: T, queueScrollableStateUpdate: f, refreshObservedContentElements: O, observeScrollableContent: N, paddingRightCandidate: U, paddingBottomCandidate: G, paddingRight: j, paddingBottom: A, barWidth: E, barHeight: L, verticalBarBottom: he, horizontalBarRight: ve, nmorph: F, get scrollEndTimeout() {
       return u;
     }, set scrollEndTimeout(e) {
       u = e;
-    }, emit: T, updateValue: L, handleScrollEnd: J, scrollHandler: de, show: B, modifiers: he, moveTo: O, scrollBehavior: K, scrollHeight: Q, maxHeight: Z, rootStyle: ve, viewportStyle: pe, visibleVerticalBar: R, visibleHorizontalBar: I, verticalTrackSize: ee, horizontalTrackSize: te, getTrackSize: m, getClientSize: q, getScrollSize: _, getScrollPosition: k, getMinThumbSize: re, getMaxScroll: P, getThumbSize: d, getThumbOffset: D, verticalThumbStyle: me, horizontalThumbStyle: fe, setScrollPosition: C, stopThumbDrag: X, thumbPointerMoveHandler: Y, thumbPointerUpHandler: w, thumbPointerDownHandler: ge, trackPointerDownHandler: be, mouseEnterHandler: () => {
+    }, emit: z, updateValue: R, handleScrollEnd: J, scrollHandler: pe, getWheelDeltaMultiplier: K, canConsumeVerticalWheel: Q, wheelHandler: me, show: B, modifiers: fe, getProgrammaticScrollBehavior: Z, moveTo: M, scrollBehavior: ee, scrollHeight: te, maxHeight: re, rootStyle: ge, viewportStyle: be, visibleVerticalBar: I, visibleHorizontalBar: q, verticalTrackSize: oe, horizontalTrackSize: le, getTrackSize: g, getClientSize: D, getScrollSize: Y, getScrollPosition: _, getMinThumbSize: ne, getMaxScroll: b, getThumbSize: d, getThumbOffset: k, verticalThumbStyle: Se, horizontalThumbStyle: ye, setScrollPosition: W, stopThumbDrag: X, thumbPointerMoveHandler: C, thumbPointerUpHandler: w, thumbPointerDownHandler: xe, trackPointerDownHandler: Pe, mouseEnterHandler: () => {
       B.value = !0;
     }, mouseLeaveHandler: () => {
       B.value = !1;
     } };
-    return Object.defineProperty(oe, "__isScriptSetup", { enumerable: !1, value: !0 }), oe;
+    return Object.defineProperty(ae, "__isScriptSetup", { enumerable: !1, value: !0 }), ae;
   }
 });
 export {
-  Ee as default
+  qe as default
 };

package/dist/components/basic/nmorph-scroll/types.js

@@ -1,5 +1,15 @@
-var n = /* @__PURE__ */ ((t) => (t.auto = "auto", t.hidden = "hidden", t.scroll = "scroll", t))(n || {}), i = /* @__PURE__ */ ((t) => (t.auto = "auto", t.smooth = "smooth", t.inherit = "inherit", t.initial = "initial", t.unset = "unset", t))(i || {});
+const o = {
+  auto: "auto",
+  hidden: "hidden",
+  scroll: "scroll"
+}, t = {
+  auto: "auto",
+  smooth: "smooth",
+  inherit: "inherit",
+  initial: "initial",
+  unset: "unset"
+};
 export {
-  n as NmorphOverflowProp,
-  i as NmorphScrollBehavior
+  o as NmorphOverflowProp,
+  t as NmorphScrollBehavior
 };

package/dist/components/basic/nmorph-space/NmorphSpace.css

@@ -1 +1 @@
-.nmorph-space{display:flex;flex-direction:row;gap:var(--nmorph-space-gap);justify-content:var(--nmorph-space-justify);align-items:var(--nmorph-space-align);min-width:0}.nmorph-space--column{flex-direction:column}.nmorph-space--wrap{flex-wrap:wrap}.nmorph-space--inline{display:inline-flex}.nmorph-space--fill{width:100%}
+.nmorph-space{display:flex;flex-direction:row;gap:var(--nmorph-private-space-gap);justify-content:var(--nmorph-private-space-justify);align-items:var(--nmorph-private-space-align);min-width:0}.nmorph-space--column{flex-direction:column}.nmorph-space--wrap{flex-wrap:wrap}.nmorph-space--inline{display:inline-flex}.nmorph-space--fill{width:100%}

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

@@ -14,9 +14,9 @@ const _ = /* @__PURE__ */ d({
     inline: { type: Boolean, required: !1, default: !1 },
     fill: { type: Boolean, required: !1, default: !1 }
   },
-  setup(o, { expose: p }) {
-    p();
-    const e = o, r = {
+  setup(p, { expose: o }) {
+    o();
+    const e = p, r = {
       small: "4px",
       medium: "8px",
       large: "16px"
@@ -24,15 +24,15 @@ const _ = /* @__PURE__ */ d({
       () => m({
         "nmorph-space": [e.direction, e.wrap && "wrap", e.inline && "inline", e.fill && "fill"]
       })
-    ), i = (n) => c(r[n] || n), s = t(
+    ), i = (n) => c(r[n] || n), a = t(
       () => e.align === "start" || e.align === "end" ? `flex-${e.align}` : e.align
-    ), a = t(
+    ), s = t(
       () => e.justify === "start" || e.justify === "end" ? `flex-${e.justify}` : e.justify
     ), u = t(() => ({
-      "--nmorph-space-gap": i(e.size),
-      "--nmorph-space-align": s.value,
-      "--nmorph-space-justify": a.value
-    })), l = { props: e, sizeMap: r, modifiers: f, resolveSpaceSize: i, alignItems: s, justifyContent: a, styles: u };
+      "--nmorph-private-space-gap": i(e.size),
+      "--nmorph-private-space-align": a.value,
+      "--nmorph-private-space-justify": s.value
+    })), l = { props: e, sizeMap: r, modifiers: f, resolveSpaceSize: i, alignItems: a, justifyContent: s, styles: u };
     return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
   }
 });

package/dist/components/basic/nmorph-text/NmorphText.vue.js

@@ -0,0 +1,19 @@
+import r from "./NmorphText.vue2.js";
+import { openBlock as t, createBlock as s, resolveDynamicComponent as l, normalizeStyle as n, normalizeClass as a, withCtx as m, renderSlot as c } from "vue";
+import i from "../../../_virtual/_plugin-vue_export-helper.js";
+function p(e, f, _, o, d, h) {
+  return t(), s(l(o.props.as), {
+    class: a(o.modifiers),
+    style: n(o.styles)
+  }, {
+    default: m(() => [
+      c(e.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["class", "style"]);
+}
+const b = /* @__PURE__ */ i(r, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-text/NmorphText.vue"]]);
+export {
+  b as default
+};

package/dist/components/basic/nmorph-text/NmorphText.vue2.js

@@ -0,0 +1,50 @@
+import { defineComponent as i, computed as o } from "vue";
+import { useModifiers as s } from "../../../utils/create-modifiers.js";
+import { createCssVariables as c } from "../../../utils/common.js";
+const d = /* @__PURE__ */ i({
+  __name: "NmorphText",
+  props: {
+    as: { type: String, required: !1, default: "span" },
+    variant: { type: null, required: !1, default: "body" },
+    weight: { type: null, required: !1, default: void 0 },
+    color: { type: null, required: !1, default: "text" },
+    align: { type: null, required: !1, default: "inherit" },
+    truncate: { type: Boolean, required: !1, default: !1 },
+    nowrap: { type: Boolean, required: !1, default: !1 },
+    lineClamp: { type: Number, required: !1, default: void 0 }
+  },
+  setup(a, { expose: l }) {
+    l();
+    const e = a, r = {
+      text: "var(--nmorph-text-color)",
+      "semi-contrast": "var(--nmorph-semi-contrast-text-color)",
+      placeholder: "var(--nmorph-placeholder-text-color)",
+      focus: "var(--nmorph-focus-text-color)",
+      accent: "var(--nmorph-accent-color)",
+      success: "var(--nmorph-success-text-color)",
+      warning: "var(--nmorph-warning-text-color)",
+      error: "var(--nmorph-error-text-color)",
+      white: "var(--nmorph-white-color)"
+    }, n = o(
+      () => s({
+        "nmorph-typography": [
+          e.variant,
+          e.weight,
+          e.truncate && "truncate",
+          e.nowrap && "nowrap",
+          e.lineClamp && "line-clamp"
+        ]
+      })
+    ), p = o(
+      () => c({
+        "--nmorph-private-text-color": r[e.color] || e.color,
+        "--nmorph-private-text-align": e.align === "inherit" ? void 0 : e.align,
+        "--nmorph-private-text-line-clamp": e.lineClamp
+      })
+    ), t = { props: e, colorMap: r, modifiers: n, styles: p };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+  }
+});
+export {
+  d as default
+};

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

@@ -1 +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);opacity:.7}.nmorph-audio-meter .nmorph-audio-meter__bar--active{background:var(--nmorph-audio-meter-color);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)}
+.nmorph-audio-meter{--nmorph-private-audio-meter-color: var(--nmorph-success-color);--nmorph-private-audio-meter-warn-color: var(--nmorph-warn-color);--nmorph-private-audio-meter-error-color: var(--nmorph-error-color);--nmorph-private-audio-meter-track-color: color-mix(in srgb, var(--nmorph-text-color) 16%, transparent);--nmorph-private-audio-meter-percent: 0%;display:inline-flex;align-items:end}.nmorph-audio-meter.nmorph-audio-meter--warn{--nmorph-private-audio-meter-color: var(--nmorph-private-audio-meter-warn-color)}.nmorph-audio-meter.nmorph-audio-meter--error{--nmorph-private-audio-meter-color: var(--nmorph-private-audio-meter-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-private-audio-meter-track-color);border-radius:var(--border-radius-40);opacity:.7}.nmorph-audio-meter .nmorph-audio-meter__bar--active{background:var(--nmorph-private-audio-meter-color);opacity:1}.nmorph-audio-meter.nmorph-audio-meter--line{width:72px;height:6px;overflow:hidden;background:var(--nmorph-private-audio-meter-track-color);border-radius:var(--border-radius-40)}.nmorph-audio-meter .nmorph-audio-meter__line{display:block;width:var(--nmorph-private-audio-meter-percent);height:100%;background:var(--nmorph-private-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-private-audio-meter-color) var(--nmorph-private-audio-meter-percent),var(--nmorph-private-audio-meter-track-color) 0);border-radius:var(--border-radius-circular)}