@nmorph/nmorph-ui-kit 2.2.9 → 2.2.10

package/dist/assets/icons/warn-triangle-filled.svg.js

@@ -0,0 +1,22 @@
+import { openBlock as r, createElementBlock as t, createElementVNode as n } from "vue";
+const o = {
+  xmlns: "http://www.w3.org/2000/svg",
+  "xml:space": "preserve",
+  viewBox: "0 0 1024 1024"
+};
+function l(c, e) {
+  return r(), t("svg", o, e[0] || (e[0] = [
+    n(
+      "path",
+      { d: "M928.99 755.83 574.6 203.25c-12.89-20.16-36.76-32.58-62.6-32.58s-49.71 12.43-62.6 32.58L95.01 755.83c-12.91 20.12-12.9 44.91.01 65.03 12.92 20.12 36.78 32.51 62.59 32.49h708.78c25.82.01 49.68-12.37 62.59-32.49s12.92-44.91.01-65.03M554.67 768h-85.33v-85.33h85.33zm0-426.67v298.66h-85.33V341.32z" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const m = { render: l };
+export {
+  m as default,
+  l as render
+};

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

@@ -0,0 +1,28 @@
+import { openBlock as n, createElementBlock as o, createElementVNode as t } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+function a(l, e) {
+  return n(), o("svg", r, e[0] || (e[0] = [
+    t(
+      "path",
+      { d: "m16 2.899 13.409 26.726H2.59zM16 0c-.69 0-1.379.465-1.903 1.395L.438 28.617C-.608 30.477.282 32 2.416 32h27.166c2.134 0 3.025-1.522 1.978-3.383L17.901 1.395C17.378.465 16.688 0 15.998 0z" },
+      null,
+      -1
+      /* HOISTED */
+    ),
+    t(
+      "path",
+      { d: "M18 26a2 2 0 1 1-3.999.001A2 2 0 0 1 18 26M16 22a2 2 0 0 1-2-2v-6a2 2 0 1 1 4 0v6a2 2 0 0 1-2 2" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const d = { render: a };
+export {
+  d as default,
+  a as render
+};

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

@@ -0,0 +1,35 @@
+import { openBlock as n, createElementBlock as o, createElementVNode as t } from "vue";
+const a = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function l(r, e) {
+  return n(), o("svg", a, e[0] || (e[0] = [
+    t(
+      "path",
+      { d: "M512 768a256 256 0 1 0 0-512 256 256 0 0 0 0 512m0 64a320 320 0 1 1 0-640 320 320 0 0 1 0 640" },
+      null,
+      -1
+      /* HOISTED */
+    ),
+    t(
+      "path",
+      { d: "M480 352a32 32 0 0 1 32 32v160a32 32 0 0 1-64 0V384a32 32 0 0 1 32-32" },
+      null,
+      -1
+      /* HOISTED */
+    ),
+    t(
+      "path",
+      { d: "M480 512h128q32 0 32 32t-32 32H480q-32 0-32-32t32-32m128-256V128H416v128h-64V64h320v192zM416 768v128h192V768h64v192H352V768z" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const d = { render: l };
+export {
+  d as default,
+  l as render
+};

package/dist/assets/icons/wind-power.svg.js

@@ -0,0 +1,21 @@
+import { openBlock as t, createElementBlock as o, createElementVNode as n } from "vue";
+const r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function l(m, e) {
+  return t(), o("svg", r, e[0] || (e[0] = [
+    n(
+      "path",
+      { d: "M160 64q32 0 32 32v832q0 32-32 32t-32-32V96q0-32 32-32m416 354.624 128-11.584V168.96l-128-11.52v261.12zm-64 5.824V151.552L320 134.08V160h-64V64l616.704 56.064A96 96 0 0 1 960 215.68v144.64a96 96 0 0 1-87.296 95.616L256 512V224h64v217.92zm256-23.232 98.88-8.96A32 32 0 0 0 896 360.32V215.68a32 32 0 0 0-29.12-31.872l-98.88-8.96z" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const d = { render: l };
+export {
+  d as default,
+  l as render
+};

package/dist/assets/icons/zoom-in.svg.js

@@ -0,0 +1,18 @@
+import { openBlock as o, createElementBlock as t, createElementVNode as n } from "vue";
+const r = { viewBox: "0 0 32 32" };
+function c(l, e) {
+  return o(), t("svg", r, e[0] || (e[0] = [
+    n(
+      "path",
+      { d: "m31.008 27.231-7.58-6.447c-.784-.705-1.622-1.029-2.299-.998a11.95 11.95 0 0 0 2.87-7.787c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-.031.677.293 1.515.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007.23s.997-2.903-.23-4.007M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16m2-14h-4v4H6v4h4v4h4v-4h4v-4h-4z" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const h = { render: c };
+export {
+  h as default,
+  c as render
+};

package/dist/assets/icons/zoom-out.svg.js

@@ -0,0 +1,18 @@
+import { openBlock as o, createElementBlock as t, createElementVNode as n } from "vue";
+const r = { viewBox: "0 0 32 32" };
+function c(l, e) {
+  return o(), t("svg", r, e[0] || (e[0] = [
+    n(
+      "path",
+      { d: "m31.008 27.231-7.58-6.447c-.784-.705-1.622-1.029-2.299-.998a11.95 11.95 0 0 0 2.87-7.787c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-.031.677.293 1.515.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007.23s.997-2.903-.23-4.007M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16M6 10h12v4H6z" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const s = { render: c };
+export {
+  s as default,
+  c as render
+};

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

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

package/dist/components/basic/nmorph-button/NmorphButton.vue.js

@@ -0,0 +1,71 @@
+import './NmorphButton.css';
+import d from "./NmorphButton.vue2.js";
+import { openBlock as e, createElementBlock as r, normalizeStyle as s, normalizeClass as c, createElementVNode as m, createBlock as a, withCtx as i, createVNode as p, renderSlot as n, Fragment as f, createCommentVNode as l, toDisplayString as h } from "vue";
+/* empty css                  */
+import y from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = ["disabled", "loading", "type", "tabindex"], b = { key: 1 };
+function k(t, N, g, o, S, B) {
+  return e(), r(
+    "div",
+    {
+      class: c(o.modifiers),
+      style: s(o.transparentColorStyles)
+    },
+    [
+      m("button", {
+        ref: "buttonDOMElement",
+        class: "nmorph-button__content",
+        disabled: o.props.disabled,
+        loading: o.props.loading,
+        type: o.props.type,
+        tabindex: o.props.tabindex
+      }, [
+        o.props.loading ? (e(), a(o.NmorphIcon, {
+          key: 0,
+          size: o.loadingButtonSize
+        }, {
+          default: i(() => [
+            p(o.NmorphIconLoading)
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["size"])) : o.hasIconOnlySlot ? (e(), a(o.NmorphIcon, { key: 1 }, {
+          default: i(() => [
+            n(t.$slots, "icon-only")
+          ]),
+          _: 3
+          /* FORWARDED */
+        })) : (e(), r(
+          f,
+          { key: 2 },
+          [
+            o.hasIconSlot ? (e(), a(o.NmorphIcon, { key: 0 }, {
+              default: i(() => [
+                n(t.$slots, "icon")
+              ]),
+              _: 3
+              /* FORWARDED */
+            })) : l("v-if", !0),
+            n(t.$slots, "default"),
+            o.props.text !== void 0 ? (e(), r(
+              "span",
+              b,
+              h(o.props.text),
+              1
+              /* TEXT */
+            )) : l("v-if", !0),
+            n(t.$slots, "append")
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        ))
+      ], 8, _)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const C = /* @__PURE__ */ y(d, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-button/NmorphButton.vue"]]);
+export {
+  C as default
+};

package/dist/components/basic/nmorph-button/NmorphButton.vue2.js

@@ -0,0 +1,57 @@
+import './NmorphButton.css';
+import { defineComponent as c, useSlots as m, computed as t, ref as y } from "vue";
+import { NmorphComponentHeight as h } from "../../../types/index.js";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
+import b from "../../../assets/icons/loading.svg.js";
+import q from "../nmorph-icon/NmorphIcon.vue.js";
+const I = /* @__PURE__ */ c({
+  __name: "NmorphButton",
+  props: {
+    styleType: { type: null, required: !1, default: "default" },
+    color: { type: String, required: !1, default: void 0 },
+    loading: { type: Boolean, required: !1, default: !1 },
+    ripple: { type: Boolean, required: !1, default: !0 },
+    type: { type: null, required: !1, default: "button" },
+    text: { type: [String, Number], required: !1, default: void 0 },
+    accentBgOnHover: { type: Boolean, required: !1, default: !1 },
+    shape: { type: null, required: !1, default: "default" },
+    fill: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1, default: 0 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(i, { expose: s }) {
+    const e = i, o = m(), u = t(() => !!o.icon), r = t(() => !!o["icon-only"]), p = t(
+      () => g({
+        nmorph: [h[e.height], `${e.fill && "fill"}`],
+        "nmorph-button": [
+          e.styleType,
+          e.shape,
+          `${e.disabled && "disabled"}`,
+          `${e.accentBgOnHover && "accent-bg-on-hover"}`,
+          `${e.ripple && "ripple"}`,
+          `${r.value && "icon-only"}`
+        ]
+      })
+    ), l = y(null), n = {
+      thin: "small",
+      basic: "medium",
+      thick: "large"
+    }, d = t(() => n[e.height]), f = t(
+      () => e.styleType === "transparent" && e.color ? { "--transparent-button-color": e.color } : {}
+    );
+    s({ buttonDOMElement: l });
+    const a = { props: e, slots: o, hasIconSlot: u, hasIconOnlySlot: r, modifiers: p, buttonDOMElement: l, iconSizeMap: n, loadingButtonSize: d, transparentColorStyles: f, get NmorphIcon() {
+      return q;
+    }, get NmorphIconLoading() {
+      return b;
+    } };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+  }
+});
+export {
+  I as default
+};

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

@@ -0,0 +1,6 @@
+var e = /* @__PURE__ */ ((r) => (r.default = "default", r.transparent = "transparent", r))(e || {}), a = /* @__PURE__ */ ((r) => (r.submit = "submit", r.reset = "reset", r.button = "button", r))(a || {}), u = /* @__PURE__ */ ((r) => (r.default = "default", r.square = "square", r.round = "round", r.circle = "circle", r))(u || {});
+export {
+  u as NmorphButtonShape,
+  e as NmorphButtonStyle,
+  a as NmorphButtonType
+};

package/dist/components/basic/nmorph-icon/NmorphIcon.css

@@ -0,0 +1 @@
+.nmorph-icon{width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);display:flex;align-items:center;--color: var(--nmorph-icon-color)}.nmorph-icon .nmorph-icon__content{display:flex;align-items:center;justify-content:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}

package/dist/components/basic/nmorph-icon/NmorphIcon.vue.js

@@ -0,0 +1,26 @@
+import './NmorphIcon.css';
+import r from "./NmorphIcon.vue2.js";
+import { openBlock as t, createElementBlock as n, normalizeStyle as s, normalizeClass as c, createElementVNode as i, renderSlot as m } from "vue";
+/* empty css                */
+import l from "../../../_virtual/_plugin-vue_export-helper.js";
+const a = { class: "nmorph-icon__content" };
+function p(e, _, d, o, f, h) {
+  return t(), n(
+    "div",
+    {
+      class: c(o.modifiers),
+      style: s(o.customStyles)
+    },
+    [
+      i("div", a, [
+        m(e.$slots, "default")
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const v = /* @__PURE__ */ l(r, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-icon/NmorphIcon.vue"]]);
+export {
+  v as default
+};

package/dist/components/basic/nmorph-icon/NmorphIcon.vue2.js

@@ -0,0 +1,31 @@
+import './NmorphIcon.css';
+import { defineComponent as d, computed as o } from "vue";
+import { useModifiers as u } from "../../../utils/create-modifiers.js";
+const c = /* @__PURE__ */ d({
+  __name: "NmorphIcon",
+  props: {
+    size: { type: null, required: !1, default: "small" },
+    width: { type: String, required: !1, default: void 0 },
+    height: { type: String, required: !1, default: void 0 },
+    color: { type: String, required: !1, default: "var(--nmorph-text-color)" }
+  },
+  setup(r, { expose: s }) {
+    s();
+    const e = r, n = o(
+      () => u({
+        "nmorph-icon": [
+          `${!e.width && !e.height && e.size}`,
+          `${e.width && "custom-width"}`,
+          `${e.height && "custom-height"}`
+        ]
+      })
+    ), h = o(() => {
+      const t = {};
+      return e.width && (t["--width"] = e.width), e.height && (t["--height"] = e.height), t["--nmorph-icon-color"] = e.color, t;
+    }), i = { props: e, modifiers: n, customStyles: h };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+  }
+});
+export {
+  c as default
+};

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

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

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

@@ -0,0 +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 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-link--disabled{cursor:not-allowed;opacity:.6}

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import e from "./NmorphScroll.vue2.js";
+import { openBlock as l, createElementBlock as i, normalizeStyle as n, normalizeClass as a, renderSlot as t } from "vue";
+import d from "../../../_virtual/_plugin-vue_export-helper.js";
+function m(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,
+        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
+      }),
+      onScroll: o.scrollHandler,
+      onMouseenter: o.mouseEnterHandler,
+      onMouseleave: o.mouseLeaveHandler
+    },
+    [
+      t(r.$slots, "default")
+    ],
+    38
+    /* CLASS, STYLE, NEED_HYDRATION */
+  );
+}
+const _ = /* @__PURE__ */ d(e, [["render", m], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-scroll/NmorphScroll.vue"]]);
+export {
+  _ as default
+};

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

@@ -0,0 +1,95 @@
+import { defineComponent as C, ref as d, computed as t, inject as G, onUnmounted as X, onMounted as Y, nextTick as P, watch as S } from "vue";
+import { useModifiers as $ } from "../../../utils/create-modifiers.js";
+const k = /* @__PURE__ */ C({
+  __name: "NmorphScroll",
+  props: {
+    height: { type: String, required: !1, default: "100%" },
+    maxHeight: { type: String, required: !1, default: "none" },
+    modelValue: { type: Object, required: !1, default: () => ({
+      x: 0,
+      y: 0
+    }) },
+    scrollYProp: { type: null, required: !1, default: "auto" },
+    scrollXProp: { type: null, required: !1, default: "auto" },
+    cssScrollBehavior: { type: null, required: !1, default: "smooth" },
+    scrollEndDelay: { type: Number, required: !1, default: 50 },
+    updateOnlyOnScrollEnd: { type: Boolean, required: !1, default: !1 },
+    yBarWidthInPx: { type: Number, required: !1, default: 6 },
+    xBarWidthInPx: { type: Number, required: !1, default: 6 },
+    xGapInPx: { type: Number, required: !1, default: 4 },
+    yGapInPx: { type: Number, required: !1, default: 4 }
+  },
+  emits: ["on-scroll", "update:model-value", "on-scroll-end"],
+  setup(b, { expose: H, emit: q }) {
+    const e = b, r = d(null), B = t(() => e.scrollYProp), E = t(() => e.scrollXProp), n = d(!1), a = d(!1), i = () => {
+      const l = r.value;
+      if (!l) {
+        n.value = !1, a.value = !1;
+        return;
+      }
+      n.value = l.scrollHeight > l.clientHeight, a.value = l.scrollWidth > l.clientWidth;
+    }, h = t(() => e.yBarWidthInPx + e.yGapInPx), v = t(() => e.xBarWidthInPx + e.xGapInPx), I = t(
+      () => e.scrollYProp === "hidden" || !n.value ? "0" : `${h.value}px`
+    ), T = t(
+      () => e.scrollXProp === "hidden" || !a.value ? "0" : `${v.value}px`
+    ), _ = t(() => `${e.yBarWidthInPx}px`), O = t(() => `${e.xBarWidthInPx}px`), x = G("nmorph");
+    let o;
+    const s = q, c = () => {
+      const l = r.value;
+      if (!l) return;
+      const m = Math.trunc(l.scrollLeft), f = Math.trunc(l.scrollTop);
+      s("update:model-value", { x: m, y: f });
+    }, y = () => {
+      s("on-scroll-end");
+    }, W = (l) => {
+      s("on-scroll", l), r.value && (e.updateOnlyOnScrollEnd || c(), o !== void 0 && clearTimeout(o), o = setTimeout(() => {
+        e.updateOnlyOnScrollEnd && c(), y();
+      }, e.scrollEndDelay));
+    };
+    X(() => {
+      o !== void 0 && clearTimeout(o);
+    });
+    const p = d(!1), N = t(
+      () => $({
+        "nmorph-scroll": []
+      })
+    ), u = (l) => {
+      const { x: m, y: f } = l;
+      r.value?.scrollTo({
+        left: m,
+        top: f,
+        behavior: "smooth"
+      });
+    };
+    Y(() => {
+      u(e.modelValue), P(i);
+    }), S(
+      () => e.modelValue,
+      (l) => {
+        u(l);
+      },
+      { deep: !0, immediate: !0 }
+    ), S(
+      () => x?.browser.dimensions,
+      () => {
+        P(i);
+      },
+      { deep: !0, immediate: !0 }
+    );
+    const w = t(() => e.cssScrollBehavior), M = t(() => e.height), V = t(() => e.maxHeight);
+    H({ scrollDOMContainer: r, moveTo: u });
+    const g = { props: e, scrollDOMContainer: r, overflowY: B, overflowX: E, hasVerticalScroll: n, hasHorizontalScroll: a, updateScrollableState: i, paddingRightCandidate: h, paddingBottomCandidate: v, paddingRight: I, paddingBottom: T, barWidth: _, barHeight: O, nmorph: x, get scrollEndTimeout() {
+      return o;
+    }, set scrollEndTimeout(l) {
+      o = l;
+    }, emit: s, updateValue: c, handleScrollEnd: y, scrollHandler: W, show: p, modifiers: N, moveTo: u, scrollBehavior: w, scrollHeight: M, maxHeight: V, mouseEnterHandler: () => {
+      p.value = !0;
+    }, mouseLeaveHandler: () => {
+      p.value = !1;
+    } };
+    return Object.defineProperty(g, "__isScriptSetup", { enumerable: !1, value: !0 }), g;
+  }
+});
+export {
+  k as default
+};

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

@@ -0,0 +1,5 @@
+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 || {});
+export {
+  n as NmorphOverflowProp,
+  i as NmorphScrollBehavior
+};