@nmorph/nmorph-ui-kit 2.2.59 → 3.0.1

package/dist/components/data/nmorph-pagination/NmorphPagination.vue2.js

@@ -1,6 +1,6 @@
 import './NmorphPagination.css';
-import { defineComponent as _, computed as o, ref as q, watch as x } from "vue";
-import { useModifiers as k } from "../../../utils/create-modifiers.js";
+import { defineComponent as _, computed as l, ref as k, watch as q } from "vue";
+import { useModifiers as x } from "../../../utils/create-modifiers.js";
 import w from "../../form/nmorph-radio/NmorphRadio.vue.js";
 import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 import O from "../../basic/nmorph-button/NmorphButton.vue.js";
@@ -16,48 +16,48 @@ const U = /* @__PURE__ */ _({
     hideOnSinglePage: { type: Boolean, required: !1, default: !0 },
     maxVisiblePages: { type: Number, required: !1, default: 9 },
     fastForwardStep: { type: Number, required: !1, default: 5 },
-    height: { type: null, required: !1, default: "basic" }
+    thickness: { type: null, required: !1, default: "basic" }
   },
   emits: ["update:model-value"],
   setup(c, { expose: d, emit: f }) {
     d();
-    const t = c, i = f, g = o(
-      () => k({
+    const t = c, i = f, v = l(
+      () => x({
         "nmorph-pagination": [t.disabled && "disabled"]
       })
     ), s = {
       thick: "var(--thick-component)",
-      basic: "var(--default-thickness-component)",
+      basic: "var(--basic-component)",
       thin: "var(--thin-component)"
-    }, v = o(() => ({
-      "--nmorph-pagination-height": s[t.height]
+    }, g = l(() => ({
+      "--nmorph-private-pagination-height": s[t.thickness]
     })), h = () => {
       a.value = String(Number(a.value) - 1);
     }, b = () => {
       a.value = String(Number(a.value) + 1);
-    }, a = q(String(t.modelValue)), e = o(() => {
-      const r = t.totalElementsQuantity / t.elementsQuantityOnPage + 1, n = r % 1 === 0 ? -1 : 0;
-      return Array.from({ length: r + n }, (u, p) => ({ value: String(p + 1), label: String(p + 1) }));
-    }), N = o(() => t.hideOnSinglePage || t.totalElementsQuantity / t.elementsQuantityOnPage > 1);
-    x(a, (r) => {
+    }, a = k(String(t.modelValue)), e = l(() => {
+      const r = t.totalElementsQuantity / t.elementsQuantityOnPage + 1, o = r % 1 === 0 ? -1 : 0;
+      return Array.from({ length: r + o }, (u, p) => ({ value: String(p + 1), label: String(p + 1) }));
+    }), N = l(() => t.hideOnSinglePage || t.totalElementsQuantity / t.elementsQuantityOnPage > 1);
+    q(a, (r) => {
       i("update:model-value", Number(r));
     });
-    const y = o(() => Number(a.value) === 1), S = o(() => e.value.length === Number(a.value)), P = o(() => {
-      const r = e.value.length, n = Number(a.value), l = t.maxVisiblePages;
-      if (r <= l)
+    const y = l(() => Number(a.value) === 1), S = l(() => e.value.length === Number(a.value)), P = l(() => {
+      const r = e.value.length, o = Number(a.value), n = t.maxVisiblePages;
+      if (r <= n)
         return e.value;
-      const u = Math.floor(l / 2);
-      return n <= u ? [...e.value.slice(0, l - 2), { value: "next", label: "..." }, e.value[r - 1]] : n >= r - u ? [e.value[0], { value: "prev", label: "..." }, ...e.value.slice(r - (l - 2))] : [
+      const u = Math.floor(n / 2);
+      return o <= u ? [...e.value.slice(0, n - 2), { value: "next", label: "..." }, e.value[r - 1]] : o >= r - u ? [e.value[0], { value: "prev", label: "..." }, ...e.value.slice(r - (n - 2))] : [
         e.value[0],
         { value: "prev", label: "..." },
-        ...e.value.slice(n - u, n + u - 1),
+        ...e.value.slice(o - u, o + u - 1),
         { value: "next", label: "..." },
         e.value[r - 1]
       ];
-    }), m = { props: t, emit: i, modifiers: g, heightMap: s, paginationStyle: v, prevClick: h, nextClick: b, selectedPage: a, pages: e, show: N, blockPrevButton: y, blockNextButton: S, visiblePages: P, bigStepUpdate: (r) => {
-      const n = Number(a.value);
-      let l = r === "prev" ? n - t.fastForwardStep : n + t.fastForwardStep;
-      l <= 0 && (l = 1), l >= e.value.length && (l = e.value.length), a.value = String(l);
+    }), m = { props: t, emit: i, modifiers: v, thicknessHeightMap: s, paginationStyle: g, prevClick: h, nextClick: b, selectedPage: a, pages: e, show: N, blockPrevButton: y, blockNextButton: S, visiblePages: P, bigStepUpdate: (r) => {
+      const o = Number(a.value);
+      let n = r === "prev" ? o - t.fastForwardStep : o + t.fastForwardStep;
+      n <= 0 && (n = 1), n >= e.value.length && (n = e.value.length), a.value = String(n);
     }, get NmorphRadioGroup() {
       return Q;
     }, get NmorphButton() {

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.css

@@ -1 +1 @@
-.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-preview-portal-content-width);height:var(--nmorph-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__left,.nmorph-preview-portal .nmorph-preview-portal__right{z-index:2}.nmorph-preview-portal .nmorph-preview-portal__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-preview-portal .nmorph-preview-portal__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__actions{bottom:50px}.nmorph-preview-portal.nmorph-preview-portal--opened{--nmorph-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-preview-portal-btn-margin)}
+.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-preview-portal-content-width);height:var(--nmorph-private-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__left,.nmorph-preview-portal .nmorph-preview-portal__right{z-index:2}.nmorph-preview-portal .nmorph-preview-portal__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-preview-portal .nmorph-preview-portal__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__actions{bottom:50px}.nmorph-preview-portal.nmorph-preview-portal--opened{--nmorph-private-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-private-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-private-preview-portal-btn-margin)}

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue.js

@@ -1,10 +1,10 @@
 import './NmorphPreviewPortal.css';
 import v from "./NmorphPreviewPortal.vue2.js";
-import { openBlock as l, createBlock as c, Teleport as f, createElementVNode as m, normalizeStyle as h, normalizeClass as n, createVNode as e, withCtx as t, renderSlot as d, createElementBlock as s, createCommentVNode as i } from "vue";
+import { openBlock as t, createBlock as c, Teleport as f, createElementVNode as m, normalizeStyle as h, normalizeClass as n, createVNode as e, withCtx as l, renderSlot as d, createElementBlock as s, createCommentVNode as i } from "vue";
 /* empty css                         */
 import w from "../../../_virtual/_plugin-vue_export-helper.js";
 function N(p, r, C, o, _, k) {
-  return o.props.show ? (l(), c(f, {
+  return o.props.show ? (t(), c(f, {
     key: 0,
     to: "body"
   }, [
@@ -22,7 +22,7 @@ function N(p, r, C, o, _, k) {
           onOnOutsideClick: r[2] || (r[2] = (a) => o.emit("close")),
           onOnEscapeKeydown: r[3] || (r[3] = (a) => o.emit("close"))
         }, {
-          default: t(() => [
+          default: l(() => [
             m(
               "div",
               {
@@ -34,7 +34,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             ),
-            o.props.showNavigation ? (l(), s(
+            o.props.showNavigation ? (t(), s(
               "div",
               {
                 key: 0,
@@ -42,11 +42,12 @@ function N(p, r, C, o, _, k) {
               },
               [
                 e(o.NmorphButton, {
+                  design: "plain",
                   onClick: r[0] || (r[0] = (a) => o.emit("previous"))
                 }, {
-                  default: t(() => [
+                  default: l(() => [
                     e(o.NmorphIcon, null, {
-                      default: t(() => [
+                      default: l(() => [
                         e(o.NmorphIconChevronDown)
                       ]),
                       _: 1
@@ -60,7 +61,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             )) : i("v-if", !0),
-            o.props.showNavigation ? (l(), s(
+            o.props.showNavigation ? (t(), s(
               "div",
               {
                 key: 1,
@@ -68,11 +69,12 @@ function N(p, r, C, o, _, k) {
               },
               [
                 e(o.NmorphButton, {
+                  design: "plain",
                   onClick: r[1] || (r[1] = (a) => o.emit("next"))
                 }, {
-                  default: t(() => [
+                  default: l(() => [
                     e(o.NmorphIcon, null, {
-                      default: t(() => [
+                      default: l(() => [
                         e(o.NmorphIconChevronDown)
                       ]),
                       _: 1
@@ -86,7 +88,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             )) : i("v-if", !0),
-            o.props.showActionBar ? (l(), s(
+            o.props.showActionBar ? (t(), s(
               "div",
               {
                 key: 2,
@@ -108,7 +110,7 @@ function N(p, r, C, o, _, k) {
     )
   ])) : i("v-if", !0);
 }
-const I = /* @__PURE__ */ w(v, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue"]]);
+const z = /* @__PURE__ */ w(v, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue"]]);
 export {
-  I as default
+  z as default
 };

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue2.js

@@ -1,11 +1,11 @@
 import './NmorphPreviewPortal.css';
-import { defineComponent as l, computed as t } from "vue";
+import { defineComponent as l, computed as r } from "vue";
 import { createCssSizeVariables as u } from "../../../utils/common.js";
-import m from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import f from "../../../assets/icons/chevron-down.svg.js";
-import d from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import c from "../../basic/nmorph-button/NmorphButton.vue.js";
-const q = /* @__PURE__ */ l({
+import d from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import m from "../../../assets/icons/chevron-down.svg.js";
+import f from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import h from "../../basic/nmorph-button/NmorphButton.vue.js";
+const w = /* @__PURE__ */ l({
   __name: "NmorphPreviewPortal",
   props: {
     show: { type: Boolean, required: !0 },
@@ -17,33 +17,37 @@ const q = /* @__PURE__ */ l({
     rightClass: { type: String, required: !1, default: "" },
     actionsClass: { type: String, required: !1, default: "" },
     navigationButtonMargin: { type: [Number, String], required: !1, default: void 0 },
+    contentWidth: { type: [Number, String], required: !1, default: void 0 },
+    contentHeight: { type: [Number, String], required: !1, default: void 0 },
     showNavigation: { type: Boolean, required: !1, default: !1 },
     showActionBar: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["close", "previous", "next"],
-  setup(o, { expose: a, emit: n }) {
-    a();
-    const e = o, s = n, i = t(() => [
+  setup(o, { expose: n, emit: a }) {
+    n();
+    const e = o, i = a, p = r(() => [
       "nmorph-preview-portal",
       e.rootClass,
       e.stateClass,
       e.show && "nmorph-preview-portal--opened"
-    ]), p = t(
+    ]), s = r(
       () => u({
-        "--nmorph-preview-portal-btn-margin": e.navigationButtonMargin
+        "--nmorph-private-preview-portal-btn-margin": e.navigationButtonMargin,
+        "--nmorph-private-preview-portal-content-width": e.contentWidth,
+        "--nmorph-private-preview-portal-content-height": e.contentHeight
       })
-    ), r = { props: e, emit: s, rootClasses: i, portalStyle: p, get NmorphButton() {
-      return c;
+    ), t = { props: e, emit: i, rootClasses: p, portalStyle: s, get NmorphButton() {
+      return h;
     }, get NmorphIcon() {
-      return d;
-    }, get NmorphIconChevronDown() {
       return f;
-    }, get NmorphOverlay() {
+    }, get NmorphIconChevronDown() {
       return m;
+    }, get NmorphOverlay() {
+      return d;
     } };
-    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  q as default
+  w as default
 };

package/dist/components/data/nmorph-progress/NmorphProgress.css

@@ -1 +1 @@
-.nmorph-progress{--height: 8px;--width-transition: .4s ease-in-out width;--animation: slide 2s linear infinite;display:inline}.nmorph-progress .nmorph-progress__linear{display:flex;align-items:center;height:100%;height:var(--height)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__outer{width:100%;height:100%;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--border-radius-40);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner{position:relative;height:100%;border-radius:var(--border-radius-40);transition:var(--width-transition)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__percentage,.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{margin-left:var(--indentation-03);font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{position:absolute;top:50%;right:var(--indentation-02);color:var(--nmorph-light-shade-color);transform:translateY(-50%)}.nmorph-progress .nmorph-progress__circle{position:relative;width:var(--nmorph-progress-circle-size);height:var(--nmorph-progress-circle-size);background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__circle:after{position:absolute;top:50%;left:50%;width:92%;height:92%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:0 0 var(--base-shadow-blur) var(--nmorph-dark-shade-color);transform:translate(-50%,-50%);content:""}.nmorph-progress .nmorph-progress__circle-inner-part{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.nmorph-progress .nmorph-progress__circle-ring{transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .5s;fill:none;stroke:var(--nmorph-progress-color);stroke-width:4px}.nmorph-progress .nmorph-progress__inner{width:var(--nmorph-progress-percentage);background:var(--nmorph-progress-color);animation:var(--nmorph-progress-animation)}
+.nmorph-progress{--nmorph-private-progress-height: 8px;--nmorph-private-progress-width-transition: .4s ease-in-out width;--nmorph-private-progress-indeterminate-animation: slide 2s linear infinite;display:inline}.nmorph-progress .nmorph-progress__linear{display:flex;align-items:center;height:100%;height:var(--nmorph-private-progress-height)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__outer{width:100%;height:100%;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--border-radius-40);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner{position:relative;height:100%;border-radius:var(--border-radius-40);transition:var(--nmorph-private-progress-width-transition)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__percentage,.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{margin-left:var(--indentation-03);font-weight:var(--nmorph-typography-caption-font-weight);font-size:var(--nmorph-typography-caption-font-size);line-height:var(--nmorph-typography-caption-line-height)}.nmorph-progress .nmorph-progress__linear .nmorph-progress__inner-text{position:absolute;top:50%;right:var(--indentation-02);color:var(--nmorph-light-shade-color);transform:translateY(-50%)}.nmorph-progress .nmorph-progress__circle{position:relative;width:var(--nmorph-private-progress-circle-size);height:var(--nmorph-private-progress-circle-size);background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-progress .nmorph-progress__circle:after{position:absolute;top:50%;left:50%;width:92%;height:92%;background:var(--nmorph-main-color);border-radius:var(--border-radius-circular);box-shadow:0 0 var(--base-shadow-blur) var(--nmorph-dark-shade-color);transform:translate(-50%,-50%);content:""}.nmorph-progress .nmorph-progress__circle-inner-part{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.nmorph-progress .nmorph-progress__circle-ring{transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .5s;fill:none;stroke:var(--nmorph-private-progress-color);stroke-width:4px}.nmorph-progress .nmorph-progress__inner{width:var(--nmorph-private-progress-percentage);background:var(--nmorph-private-progress-color);animation:var(--nmorph-private-progress-animation)}

package/dist/components/data/nmorph-progress/NmorphProgress.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphProgress.css';
-import { defineComponent as v, computed as r, ref as u, onMounted as y } from "vue";
-import { useModifiers as S } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as q, createCssVariables as _ } from "../../../utils/common.js";
-const C = /* @__PURE__ */ v({
+import { defineComponent as y, computed as r, ref as u, onMounted as S } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as _, createCssVariables as b } from "../../../utils/common.js";
+const C = /* @__PURE__ */ y({
   __name: "NmorphProgress",
   props: {
     type: { type: String, required: !1, default: "linear" },
@@ -16,30 +16,30 @@ const C = /* @__PURE__ */ v({
     widthTransition: { type: String, required: !1, default: void 0 },
     indeterminateAnimation: { type: String, required: !1, default: void 0 }
   },
-  setup(c, { expose: p }) {
-    p();
-    const e = c, d = r(
-      () => S({
+  setup(c, { expose: d }) {
+    d();
+    const e = c, f = r(
+      () => q({
         "nmorph-progress": []
       })
-    ), n = r(() => Array.isArray(e.color) ? e.color.find((h) => h.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), o = r(() => e.indeterminate ? "var(--animation)" : "none"), a = u(null), t = u(1), f = r(() => `${t.value} ${t.value}`), m = r(() => t.value - e.percentage / 100 * t.value);
-    y(() => {
+    ), i = r(() => Array.isArray(e.color) ? e.color.find((h) => h.percentage <= e.percentage)?.color : typeof e.color == "function" ? e.color(e.percentage) : e.color), n = r(() => e.indeterminate ? "var(--nmorph-private-progress-indeterminate-animation)" : "none"), a = u(null), t = u(1), m = r(() => `${t.value} ${t.value}`), v = r(() => t.value - e.percentage / 100 * t.value);
+    S(() => {
       a.value && (t.value = 2 * Math.PI * a.value.r.baseVal.value);
     });
-    const i = r(() => `${e.circleSize}px`), s = r(() => `${e.percentage}%`), g = r(() => ({
-      ..._({
-        "--nmorph-progress-percentage": s.value,
-        "--nmorph-progress-color": n.value,
-        "--nmorph-progress-animation": o.value,
-        "--nmorph-progress-circle-size": i.value,
-        "--width-transition": e.widthTransition,
-        "--animation": e.indeterminateAnimation
+    const o = r(() => `${e.circleSize}px`), s = r(() => `${e.percentage}%`), l = r(() => e.height ?? (e.valueInside ? "18px" : void 0)), g = r(() => ({
+      ...b({
+        "--nmorph-private-progress-percentage": s.value,
+        "--nmorph-private-progress-color": i.value,
+        "--nmorph-private-progress-animation": n.value,
+        "--nmorph-private-progress-circle-size": o.value,
+        "--nmorph-private-progress-width-transition": e.widthTransition,
+        "--nmorph-private-progress-indeterminate-animation": e.indeterminateAnimation
       }),
-      ...q({
-        "--height": e.height
+      ..._({
+        "--nmorph-private-progress-height": l.value
       })
-    })), l = { props: e, modifiers: d, color: n, animation: o, circle: a, circumference: t, strokeDasharray: f, strokeDashoffset: m, circleContainerSize: i, displayPercentage: s, styles: g };
-    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+    })), p = { props: e, modifiers: f, color: i, animation: n, circle: a, circumference: t, strokeDasharray: m, strokeDashoffset: v, circleContainerSize: o, displayPercentage: s, linearHeight: l, styles: g };
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
   }
 });
 export {

package/dist/components/data/nmorph-qr-code/NmorphQRCode.css

@@ -1 +1 @@
-.nmorph-qr-code{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--nmorph-qr-code-size);height:var(--nmorph-qr-code-size);padding:var(--indentation-02);color:var(--nmorph-text-color);background:var(--nmorph-qr-code-background);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset)}.nmorph-qr-code .nmorph-qr-code__svg{display:block;width:100%;height:100%}.nmorph-qr-code .nmorph-qr-code__error{box-sizing:border-box;max-width:100%;padding:var(--indentation-02);overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);text-align:center;text-overflow:ellipsis}
+.nmorph-qr-code{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--nmorph-private-qr-code-size);height:var(--nmorph-private-qr-code-size);padding:var(--indentation-02);color:var(--nmorph-text-color);background:var(--nmorph-private-qr-code-background);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset)}.nmorph-qr-code .nmorph-qr-code__svg{display:block;width:100%;height:100%}.nmorph-qr-code .nmorph-qr-code__error{box-sizing:border-box;max-width:100%;padding:var(--indentation-02);overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);text-align:center;text-overflow:ellipsis}

package/dist/components/data/nmorph-qr-code/NmorphQRCode.vue2.js

@@ -1,8 +1,8 @@
 import './NmorphQRCode.css';
 import { defineComponent as g, computed as r } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
-import { createCssVariables as b, createCssSizeVariables as h } from "../../../utils/common.js";
-import { createNmorphQRCode as a } from "./qr-code.js";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import { createCssVariables as q, createCssSizeVariables as y } from "../../../utils/common.js";
+import { createNmorphQRCode as n } from "./qr-code.js";
 const x = /* @__PURE__ */ g({
   __name: "NmorphQRCode",
   props: {
@@ -16,11 +16,11 @@ const x = /* @__PURE__ */ g({
     maxVersion: { type: Number, required: !1, default: 40 },
     title: { type: String, required: !1, default: "" }
   },
-  setup(s, { expose: l }) {
-    l();
-    const e = s, n = r(() => {
+  setup(s, { expose: u }) {
+    u();
+    const e = s, i = r(() => {
       try {
-        return a(String(e.value), {
+        return n(String(e.value), {
           errorCorrectionLevel: e.level,
           minVersion: e.minVersion,
           maxVersion: e.maxVersion
@@ -28,26 +28,25 @@ const x = /* @__PURE__ */ g({
       } catch (t) {
         return t instanceof Error ? t.message : "Unable to create QR code.";
       }
-    }), o = r(() => n.value ? null : a(String(e.value), {
+    }), o = r(() => i.value ? null : n(String(e.value), {
       errorCorrectionLevel: e.level,
       minVersion: e.minVersion,
       maxVersion: e.maxVersion
-    })), u = r(() => o.value ? o.value.size + e.margin * 2 : 1), m = r(() => o.value ? o.value.modules.flatMap(
-      (t, c) => t.map((f, v) => f ? `M${v + e.margin} ${c + e.margin}h1v1h-1z` : "").filter(Boolean)
+    })), l = r(() => o.value ? o.value.size + e.margin * 2 : 1), m = r(() => o.value ? o.value.modules.flatMap(
+      (t, f) => t.map((c, v) => c ? `M${v + e.margin} ${f + e.margin}h1v1h-1z` : "").filter(Boolean)
     ).join("") : ""), d = r(() => ({
-      ...h({
-        "--nmorph-qr-code-size": e.size
+      ...y({
+        "--nmorph-private-qr-code-size": e.size
       }),
-      ...b({
-        "--nmorph-qr-code-color": e.color,
-        "--nmorph-qr-code-background": e.background
+      ...q({
+        "--nmorph-private-qr-code-background": e.background
       })
     })), p = r(
-      () => q({
-        "nmorph-qr-code": [n.value && "error"]
+      () => b({
+        "nmorph-qr-code": [i.value && "error"]
       })
-    ), i = { props: e, errorMessage: n, qrCode: o, viewBoxSize: u, path: m, styles: d, modifiers: p };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+    ), a = { props: e, errorMessage: i, qrCode: o, viewBoxSize: l, path: m, styles: d, modifiers: p };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {

package/dist/components/data/nmorph-skeleton/NmorphSkeleton.css

@@ -1 +1 @@
-.nmorph-skeleton.nmorph-skeleton--loading{--loading-gradient: linear-gradient( 90deg, var(--nmorph-text-color) 25%, var(--nmorph-white-color) 37%, var(--nmorph-text-color) 63% )}.nmorph-skeleton.nmorph-skeleton--loading .nmorph-skeleton-item:before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--loading-gradient);background-size:400% 100%;opacity:.3;animation:nmorph-skeleton-loading-animation 2.4s ease infinite;content:"";pointer-events:none}
+.nmorph-skeleton.nmorph-skeleton--loading{--nmorph-private-skeleton-loading-gradient: linear-gradient( 90deg, var(--nmorph-text-color) 25%, var(--nmorph-white-color) 37%, var(--nmorph-text-color) 63% )}.nmorph-skeleton.nmorph-skeleton--loading .nmorph-skeleton-item:before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--nmorph-private-skeleton-loading-gradient);background-size:400% 100%;opacity:.3;animation:nmorph-skeleton-loading-animation 2.4s ease infinite;content:"";pointer-events:none}

package/dist/components/data/nmorph-skeleton/NmorphSkeleton.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphSkeleton.css';
-import { defineComponent as d, computed as r } from "vue";
-import { useModifiers as s } from "../../../utils/create-modifiers.js";
+import { defineComponent as s, computed as r } from "vue";
+import { useModifiers as d } from "../../../utils/create-modifiers.js";
 import { createCssVariables as l } from "../../../utils/common.js";
 import p from "./components/NmorphSkeletonItem.vue.js";
-const _ = /* @__PURE__ */ d({
+const _ = /* @__PURE__ */ s({
   __name: "NmorphSkeleton",
   props: {
     animated: { type: Boolean, required: !1, default: !0 },
@@ -14,12 +14,12 @@ const _ = /* @__PURE__ */ d({
   setup(o, { expose: n }) {
     n();
     const e = o, a = r(
-      () => s({
+      () => d({
         "nmorph-skeleton": [e.animated && e.loading && "loading"]
       })
     ), i = r(
       () => l({
-        "--loading-gradient": e.loadingGradient
+        "--nmorph-private-skeleton-loading-gradient": e.loadingGradient
       })
     ), t = { props: e, modifiers: a, styles: i, get NmorphSkeletonItem() {
       return p;

package/dist/components/data/nmorph-skeleton/components/NmorphSkeletonItem.css

@@ -1 +1 @@
-.nmorph-skeleton-item{position:relative;width:var(--nmorph-skeleton-item-width);height:var(--nmorph-skeleton-item-height);margin-bottom:var(--indentation-02);overflow:hidden;background:var(--nmorph-text-color)}.nmorph-skeleton-item.nmorph-skeleton-item--image{background:none}.nmorph-skeleton-item.nmorph-skeleton-item--image .nmorph-skeleton-item__element .nmorph-icon{--color: var(--nmorph-text-color)}.nmorph-skeleton-item.nmorph-skeleton-item--circle{border-radius:var(--border-radius-circular)}.nmorph-skeleton-item.nmorph-skeleton-item--nmorph-design{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}
+.nmorph-skeleton-item{position:relative;width:var(--nmorph-private-skeleton-item-width);height:var(--nmorph-private-skeleton-item-height);margin-bottom:var(--indentation-02);overflow:hidden;background:var(--nmorph-text-color)}.nmorph-skeleton-item.nmorph-skeleton-item--image{background:none}.nmorph-skeleton-item.nmorph-skeleton-item--image .nmorph-skeleton-item__element .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color)}.nmorph-skeleton-item.nmorph-skeleton-item--circle{border-radius:var(--border-radius-circular)}.nmorph-skeleton-item.nmorph-skeleton-item--nmorph-design{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-skeleton-item.nmorph-skeleton-item--plain-design{border:var(--nmorph-plain-border)}

package/dist/components/data/nmorph-skeleton/components/NmorphSkeletonItem.vue.js

@@ -1,29 +1,29 @@
 import './NmorphSkeletonItem.css';
 import t from "./NmorphSkeletonItem.vue2.js";
-import { openBlock as o, createElementBlock as r, normalizeStyle as i, normalizeClass as m, createElementVNode as n, createBlock as c, withCtx as h, createVNode as s, createCommentVNode as a } from "vue";
+import { openBlock as o, createElementBlock as r, normalizeStyle as i, normalizeClass as m, createElementVNode as n, createBlock as a, withCtx as c, createVNode as h, createCommentVNode as s } from "vue";
 /* empty css                        */
 import l from "../../../../_virtual/_plugin-vue_export-helper.js";
 const p = { class: "nmorph-skeleton-item__element" };
-function d(_, f, k, e, g, N) {
+function d(_, f, k, e, g, v) {
   return o(), r(
     "div",
     {
       class: m(e.modifiers),
-      style: i({ "--nmorph-skeleton-item-width": e.cssWidth, "--nmorph-skeleton-item-height": e.cssHeight })
+      style: i({ "--nmorph-private-skeleton-item-width": e.cssWidth, "--nmorph-private-skeleton-item-height": e.cssHeight })
     },
     [
       n("div", p, [
-        e.props.variant === "image" ? (o(), c(e.NmorphIcon, {
+        e.props.variant === "image" ? (o(), a(e.NmorphIcon, {
           key: 0,
           width: e.props.width,
           height: e.props.height
         }, {
-          default: h(() => [
-            s(e.NmorphIconImage)
+          default: c(() => [
+            h(e.NmorphIconImage)
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["width", "height"])) : a("v-if", !0)
+        }, 8, ["width", "height"])) : s("v-if", !0)
       ])
     ],
     6

package/dist/components/data/nmorph-skeleton/components/NmorphSkeletonItem.vue2.js

@@ -3,19 +3,19 @@ import { defineComponent as s, computed as t } from "vue";
 import { useModifiers as u } from "../../../../utils/create-modifiers.js";
 import d from "../../../basic/nmorph-icon/NmorphIcon.vue.js";
 import a from "../../../../assets/icons/image.svg.js";
-const l = /* @__PURE__ */ s({
+const g = /* @__PURE__ */ s({
   __name: "NmorphSkeletonItem",
   props: {
     variant: { type: null, required: !0, default: "rect" },
     width: { type: String, required: !0, default: "auto" },
     height: { type: String, required: !0, default: "auto" },
-    design: { type: String, required: !1, default: "nmorph" }
+    design: { type: null, required: !1, default: "nmorph" }
   },
   setup(o, { expose: n }) {
     n();
     const e = o, i = t(
       () => u({
-        "nmorph-skeleton-item": [e.variant, `${e.design === "nmorph" ? "nmorph-design" : ""}`]
+        "nmorph-skeleton-item": [e.variant, e.design === "nmorph" ? "nmorph-design" : "plain-design"]
       })
     ), p = t(() => e.width), m = t(() => e.height), r = { props: e, modifiers: i, cssWidth: p, cssHeight: m, get NmorphIcon() {
       return d;
@@ -26,5 +26,5 @@ const l = /* @__PURE__ */ s({
   }
 });
 export {
-  l as default
+  g as default
 };

package/dist/components/data/nmorph-skeleton/types.js

@@ -1,4 +1,8 @@
-var i = /* @__PURE__ */ ((c) => (c.image = "image", c.circle = "circle", c.rect = "rect", c))(i || {});
+const e = {
+  image: "image",
+  circle: "circle",
+  rect: "rect"
+};
 export {
-  i as NmorphSkeletonItemPropsType
+  e as NmorphSkeletonItemPropsType
 };

package/dist/components/data/nmorph-table/NmorphTable.css

@@ -1 +1 @@
-.nmorph-table{--border-color: var(--nmorph-info-text-color);--table-cell-height: auto;--table-background-row-hover: var(--nmorph-info-color)}.nmorph-table .nmorph-table__header th{border-bottom:0}.nmorph-table .nmorph-table__button-wrapper{display:flex;align-items:center;margin-left:var(--indentation-03)}.nmorph-table table{width:calc(100% - 2px);margin-left:1px;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--border-color)}.nmorph-table .nmorph-table__cell{padding:0 var(--indentation-03)}.nmorph-table .nmorph-table__cell-content{display:flex;align-items:center}.nmorph-table .nmorph-table__cell--data{height:var(--table-cell-height)}.nmorph-table .nmorph-table__body{position:relative}.nmorph-table .nmorph-table__body--virtual{overflow-x:hidden}.nmorph-table .nmorph-table__body--virtual .nmorph-table__table-data{height:var(--table-virtual-row-height);padding-top:0;padding-bottom:0}.nmorph-table .nmorph-table__body--virtual.nmorph-table__body--dynamic .nmorph-table__table-data{height:auto}.nmorph-table .nmorph-table__virtual-spacer{position:relative;min-width:100%}.nmorph-table .nmorph-table__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-table .nmorph-table__table-data-row--row-hover:hover,.nmorph-table .nmorph-table__table-data-row--active{background:var(--table-background-row-hover)}.nmorph-table--nmorph{overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);--border-color: transparent}.nmorph-table--nmorph .nmorph-table__button-wrapper{padding:var(--indentation-02)}.nmorph-table--nmorph .nmorph-table__table-row{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}
+.nmorph-table{--nmorph-private-table-border-color: var(--nmorph-info-text-color);--nmorph-private-table-cell-height: auto;--nmorph-private-table-row-hover-background: var(--nmorph-info-color)}.nmorph-table .nmorph-table__header th{border-bottom:0}.nmorph-table .nmorph-table__button-wrapper{display:flex;align-items:center;margin-left:var(--indentation-03)}.nmorph-table table{width:calc(100% - 2px);margin-left:1px;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--nmorph-private-table-border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--nmorph-private-table-border-color)}.nmorph-table .nmorph-table__cell{padding:0 var(--indentation-03)}.nmorph-table .nmorph-table__cell-content{display:flex;align-items:center}.nmorph-table .nmorph-table__cell--data{height:var(--nmorph-private-table-cell-height)}.nmorph-table .nmorph-table__body{position:relative}.nmorph-table .nmorph-table__body--virtual{overflow-x:hidden}.nmorph-table .nmorph-table__body--virtual .nmorph-table__table-data{height:var(--nmorph-private-table-virtual-row-height);padding-top:0;padding-bottom:0}.nmorph-table .nmorph-table__body--virtual.nmorph-table__body--dynamic .nmorph-table__table-data{height:auto}.nmorph-table .nmorph-table__virtual-spacer{position:relative;min-width:100%}.nmorph-table .nmorph-table__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-table .nmorph-table__table-data-row--row-hover:hover,.nmorph-table .nmorph-table__table-data-row--active{background:var(--nmorph-private-table-row-hover-background)}.nmorph-table--nmorph{overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);--nmorph-private-table-border-color: transparent}.nmorph-table--nmorph .nmorph-table__button-wrapper{padding:var(--indentation-02)}.nmorph-table--nmorph .nmorph-table__table-row{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-table--plain{overflow:hidden;background:var(--nmorph-main-color);border:var(--nmorph-plain-border);border-radius:var(--default-border-radius)}

package/dist/components/data/nmorph-table/NmorphTable.vue2.js

@@ -11,7 +11,7 @@ const oe = /* @__PURE__ */ j({
     rowHover: { type: Boolean, required: !1, default: !0 },
     bordered: { type: Boolean, required: !1, default: !1 },
     sort: { type: Object, required: !1, default: void 0 },
-    design: { type: String, required: !1, default: "nmorph" },
+    design: { type: null, required: !1, default: "nmorph" },
     virtual: { type: Boolean, required: !1, default: !1 },
     virtualHeight: { type: [Number, String], required: !1, default: "320px" },
     virtualOverscan: { type: Number, required: !1, default: 5 },
@@ -34,7 +34,7 @@ const oe = /* @__PURE__ */ j({
       dynamic: S
     }), C = l(
       () => u.value ? r.virtualItems.value : o.value.map((e, a) => ({ item: e, index: a }))
-    ), x = l(() => C.value.map((e) => e.item)), s = n(-1), h = n(0), d = n(t.sort), I = (e, a) => {
+    ), x = l(() => C.value.map((e) => e.item)), s = n(-1), p = n(0), d = n(t.sort), I = (e, a) => {
       d.value && (d.value[a] = e, o.value.sort((g, y) => {
         const b = String(g[a]).toLowerCase(), i = String(y[a]).toLowerCase();
         if (!d.value)
@@ -42,19 +42,19 @@ const oe = /* @__PURE__ */ j({
         const f = d.value[a];
         return f === "ascending" ? b.localeCompare(i) : f === "descending" ? i.localeCompare(b) : 0;
       }));
-    }, m = n(null), c = n([]);
+    }, h = n(null), c = n([]);
     M("table-data", { rows: x, columns: c });
     const D = l(() => {
       const e = c.value.map((i) => i.width).filter((i) => !!i), a = e.length, g = e.reduce((i, f) => (i += Number(f), i), 0), y = c.value.length - a;
-      return m.value?.clientWidth ? (m.value?.clientWidth - g) / y : 0;
-    }), W = (e) => e !== "" ? e : D.value, p = n(0);
+      return h.value?.clientWidth ? (h.value?.clientWidth - g) / y : 0;
+    }), W = (e) => e !== "" ? e : D.value, m = n(0);
     P(
       () => t.data,
       async () => {
-        p.value = p.value + 1, o.value = [...t.data], c.value = [], await z();
+        m.value = m.value + 1, o.value = [...t.data], c.value = [], await z();
         const e = r.containerRef.value;
         e && (e.scrollTop = Math.min(
-          h.value,
+          p.value,
           Math.max(r.totalHeight.value - e.clientHeight, 0)
         ), r.refresh());
       },
@@ -66,25 +66,25 @@ const oe = /* @__PURE__ */ j({
     M("table-identifier", R);
     const q = l(() => Y(t.virtualHeight)), O = l(() => ({
       ...F({
-        "--border-color": t.borderColor,
-        "--table-background-row-hover": t.rowHoverBackground
+        "--nmorph-private-table-border-color": t.borderColor,
+        "--nmorph-private-table-row-hover-background": t.rowHoverBackground
       }),
       ...$({
-        "--table-cell-height": t.cellHeight
+        "--nmorph-private-table-cell-height": t.cellHeight
       })
     })), A = l(() => ({
-      "--table-virtual-row-height": `${t.virtualRowHeight}px`,
+      "--nmorph-private-table-virtual-row-height": `${t.virtualRowHeight}px`,
       height: u.value ? q.value : void 0,
       overflowY: u.value ? "auto" : void 0
     })), E = r.spacerStyle, L = r.contentStyle, U = (e, a) => {
       r.measureElement(a, G(e));
     }, V = () => {
-      r.scrollHandler(), h.value = r.containerRef.value?.scrollTop || 0;
+      r.scrollHandler(), p.value = r.containerRef.value?.scrollTop || 0;
     }, v = (e) => {
       if (!o.value.length) return;
       const a = s.value < 0 ? 0 : Math.min(Math.max(s.value + e, 0), o.value.length - 1);
       s.value = a, r.scrollToIndex(a);
-    }, k = { props: t, modifiers: T, rows: o, virtualEnabled: u, virtualRowHeight: w, virtualOverscan: H, virtualDynamicHeight: S, virtualList: r, renderedRows: C, tableRows: x, activeRowIndex: s, lastScrollTop: h, sortData: d, onSort: I, nmorphDOMTable: m, columns: c, defaultColWidth: D, getWidth: W, key: p, tableData: N, tableIdentifier: R, virtualHeight: q, tableStyle: O, tableBodyStyle: A, virtualSpacerStyle: E, virtualContentStyle: L, setVirtualRowRef: U, scrollHandler: V, moveActiveRow: v, tableKeydownHandler: (e) => {
+    }, k = { props: t, modifiers: T, rows: o, virtualEnabled: u, virtualRowHeight: w, virtualOverscan: H, virtualDynamicHeight: S, virtualList: r, renderedRows: C, tableRows: x, activeRowIndex: s, lastScrollTop: p, sortData: d, onSort: I, nmorphDOMTable: h, columns: c, defaultColWidth: D, getWidth: W, key: m, tableData: N, tableIdentifier: R, virtualHeight: q, tableStyle: O, tableBodyStyle: A, virtualSpacerStyle: E, virtualContentStyle: L, setVirtualRowRef: U, scrollHandler: V, moveActiveRow: v, tableKeydownHandler: (e) => {
       u.value && (e.key === "ArrowDown" ? (e.preventDefault(), v(1)) : e.key === "ArrowUp" ? (e.preventDefault(), v(-1)) : e.key === "Home" ? (e.preventDefault(), s.value = 0, r.scrollToIndex(0)) : e.key === "End" ? (e.preventDefault(), s.value = o.value.length - 1, r.scrollToIndex(o.value.length - 1)) : e.key === "PageDown" ? (e.preventDefault(), v(
         Math.max(Math.floor((r.viewportHeight.value || t.virtualRowHeight) / t.virtualRowHeight), 1)
       )) : e.key === "PageUp" && (e.preventDefault(), v(

package/dist/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.css

@@ -1 +1 @@
-.nmorph-sort-button{display:flex;align-items:center}.nmorph-sort-button .nmorph-button__content{display:flex;flex-direction:column;justify-content:center;align-items:center}.nmorph-sort-button .nmorph-sort-button__icon-up{margin-bottom:-1px;transform:rotate(180deg)}.nmorph-sort-button .nmorph-sort-button__icon-down{margin-top:-1px}.nmorph-sort-button.nmorph-sort-button--ascending .nmorph-sort-button__icon-up,.nmorph-sort-button.nmorph-sort-button--descending .nmorph-sort-button__icon-down{--color: var(--nmorph-accent-color)}
+.nmorph-sort-button{display:flex;align-items:center}.nmorph-sort-button .nmorph-sort-button__control{display:inline-flex;justify-content:center;align-items:center;width:28px;height:var(--thin-component);min-height:var(--thin-component);padding:0;color:var(--nmorph-semi-contrast-text-color);background:transparent;border:none;border-radius:var(--default-border-radius);cursor:pointer;transition:color ease-in-out var(--transition-02),background-color ease-in-out var(--transition-02)}.nmorph-sort-button .nmorph-sort-button__control:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 12%,transparent)}.nmorph-sort-button .nmorph-sort-button__control:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-sort-button .nmorph-sort-button__icon{display:block;width:16px;height:16px;overflow:visible;fill:currentColor}.nmorph-sort-button .nmorph-sort-button__icon-up,.nmorph-sort-button .nmorph-sort-button__icon-down{transition:fill ease-in-out var(--transition-02),opacity ease-in-out var(--transition-02);fill:var(--nmorph-semi-contrast-text-color)}.nmorph-sort-button .nmorph-sort-button__control:hover .nmorph-sort-button__icon-up,.nmorph-sort-button .nmorph-sort-button__control:hover .nmorph-sort-button__icon-down,.nmorph-sort-button.nmorph-sort-button--ascending .nmorph-sort-button__icon-up,.nmorph-sort-button.nmorph-sort-button--descending .nmorph-sort-button__icon-down{fill:var(--nmorph-accent-color)}