@nmorph/nmorph-ui-kit 3.0.4 → 3.0.5

package/dist/assets/icons/chevron-right.svg.js

@@ -14,8 +14,8 @@ function l(c, e) {
     )
   ])]);
 }
-const d = { render: l };
+const s = { render: l };
 export {
-  d as default,
+  s as default,
   l as render
 };

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

@@ -1,33 +1,15 @@
-import { openBlock as n, createElementBlock as r, createElementVNode as o } from "vue";
-const t = {
+import { openBlock as t, createElementBlock as o, createElementVNode as r } from "vue";
+const n = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
-function l(s, e) {
-  return n(), r("svg", t, [...e[0] || (e[0] = [
-    o(
+function c(l, e) {
+  return t(), o("svg", n, [...e[0] || (e[0] = [
+    r(
       "path",
       {
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "stroke-width": "56",
-        d: "M320 704V320a64 64 0 0 1 128 0v200M448 520V192a64 64 0 0 1 128 0v288M576 480V288a64 64 0 0 1 128 0v224"
-      },
-      null,
-      -1
-      /* CACHED */
-    ),
-    o(
-      "path",
-      {
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "stroke-width": "56",
-        d: "M704 512V384a64 64 0 0 1 128 0v280c0 159.04-128.96 288-288 288h-88c-84.544 0-164.8-37.12-219.52-101.504L106.24 697.344a64 64 0 0 1 97.52-82.88L320 751.104M448 520v88M576 480v128M704 512v112"
+        fill: "currentColor",
+        d: "M360 140c0-36.45 29.55-66 66-66s66 29.55 66 66v420h32V86c0-36.45 29.55-66 66-66s66 29.55 66 66v474h32V160c0-36.45 29.55-66 66-66s66 29.55 66 66v424h30V256c0-36.45 29.55-66 66-66s66 29.55 66 66v444c0 167.9-136.1 304-304 304h-82c-98.69 0-190.2-51.5-241.34-135.92l-244.93-233.2a70 70 0 0 1 120.06-71.76L360 780z"
       },
       null,
       -1
@@ -35,8 +17,8 @@ function l(s, e) {
     )
   ])]);
 }
-const i = { render: l };
+const d = { render: c };
 export {
-  i as default,
-  l as render
+  d as default,
+  c as render
 };

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

@@ -1,10 +1,10 @@
-import { openBlock as a, createElementBlock as e, createElementVNode as t } from "vue";
+import { openBlock as h, createElementBlock as e, createElementVNode as t } from "vue";
 const o = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
-function n(r, h) {
-  return a(), e("svg", o, [...h[0] || (h[0] = [
+function v(n, a) {
+  return h(), e("svg", o, [...a[0] || (a[0] = [
     t(
       "path",
       { d: "M480 704h160a64 64 0 0 0 64-64v-32h-96a32 32 0 0 1 0-64h96v-96h-96a32 32 0 0 1 0-64h96v-96h-96a32 32 0 0 1 0-64h96v-32a64 64 0 0 0-64-64H384a64 64 0 0 0-64 64v32h96a32 32 0 0 1 0 64h-96v96h96a32 32 0 0 1 0 64h-96v96h96a32 32 0 0 1 0 64h-96v32a64 64 0 0 0 64 64zm64 64v128h192a32 32 0 1 1 0 64H288a32 32 0 1 1 0-64h192V768h-96a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64h256a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128z" },
@@ -14,8 +14,8 @@ function n(r, h) {
     )
   ])]);
 }
-const c = { render: n };
+const l = { render: v };
 export {
-  c as default,
-  n as render
+  l as default,
+  v as render
 };

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

@@ -1,10 +1,10 @@
-import { openBlock as a, createElementBlock as l, createElementVNode as t } from "vue";
-const n = {
+import { openBlock as a, createElementBlock as o, createElementVNode as t } from "vue";
+const l = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
-function o(r, e) {
-  return a(), l("svg", n, [...e[0] || (e[0] = [
+function n(r, e) {
+  return a(), o("svg", l, [...e[0] || (e[0] = [
     t(
       "path",
       { d: "m412.16 592.128-45.44 45.44A191.23 191.23 0 0 1 320 512V256a192 192 0 1 1 384 0v44.352l-64 64V256a128 128 0 1 0-256 0v256c0 30.336 10.56 58.24 28.16 80.128m51.968 38.592A128 128 0 0 0 640 512v-57.152l64-64V512a192 192 0 0 1-287.68 166.528zM314.88 779.968l46.144-46.08A223 223 0 0 0 480 768h64a224 224 0 0 0 224-224v-32a32 32 0 1 1 64 0v32a288 288 0 0 1-288 288v64h64a32 32 0 1 1 0 64H416a32 32 0 1 1 0-64h64v-64c-61.44 0-118.4-19.2-165.12-52.032M266.752 737.6A286.98 286.98 0 0 1 192 544v-32a32 32 0 0 1 64 0v32c0 56.832 21.184 108.8 56.064 148.288z" },
@@ -21,8 +21,8 @@ function o(r, e) {
     )
   ])]);
 }
-const c = { render: o };
+const c = { render: n };
 export {
   c as default,
-  o as render
+  n as render
 };

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

@@ -1,11 +1,11 @@
-import { openBlock as t, createElementBlock as o, createElementVNode as n } from "vue";
+import { openBlock as t, createElementBlock as n, createElementVNode as o } from "vue";
 const r = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function l(a, e) {
-  return t(), o("svg", r, [...e[0] || (e[0] = [
-    n(
+  return t(), n("svg", r, [...e[0] || (e[0] = [
+    o(
       "path",
       { d: "M16 2H8a1 1 0 0 0 0 2h1v5.59l-2.71 2.7A1 1 0 0 0 7 14h4v7a1 1 0 1 0 2 0v-7h4a1 1 0 0 0 .71-1.71L15 9.59V4h1a1 1 0 1 0 0-2m-2.71 8.71 1.3 1.29H9.41l1.3-1.29A1 1 0 0 0 11 10V4h2v6a1 1 0 0 0 .29.71" },
       null,
@@ -14,8 +14,8 @@ function l(a, e) {
     )
   ])]);
 }
-const c = { render: l };
+const s = { render: l };
 export {
-  c as default,
+  s as default,
   l as render
 };

package/dist/assets/icons/video-camera-off.svg.js

@@ -1,10 +1,10 @@
-import { openBlock as o, createElementBlock as a, createElementVNode as t } from "vue";
-const l = {
+import { openBlock as o, createElementBlock as n, createElementVNode as t } from "vue";
+const r = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1024 1024"
 };
-function n(r, e) {
-  return o(), a("svg", l, [...e[0] || (e[0] = [
+function a(l, e) {
+  return o(), n("svg", r, [...e[0] || (e[0] = [
     t(
       "path",
       { d: "M704 768V256H128v512zm64-416 192-96v512l-192-96v128a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V224a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32zm0 71.552v176.896l128 64V359.552zM192 320h192v64H192z" },
@@ -21,8 +21,8 @@ function n(r, e) {
     )
   ])]);
 }
-const d = { render: n };
+const d = { render: a };
 export {
   d as default,
-  n as render
+  a as render
 };

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

@@ -1 +1 @@
-.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}
+.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:var(--nmorph-private-scroll-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.vue2.js

@@ -1,11 +1,13 @@
 import './NmorphScroll.css';
 import { defineComponent as Te, ref as p, computed as n, inject as Me, onUnmounted as We, onMounted as Ee, watch as de, nextTick as Oe } from "vue";
 import { useModifiers as Le } from "../../../utils/create-modifiers.js";
-const qe = /* @__PURE__ */ Te({
+import { createCssSizeVariables as Re } from "../../../utils/common.js";
+const Ce = /* @__PURE__ */ Te({
   __name: "NmorphScroll",
   props: {
     height: { type: String, required: !1, default: "100%" },
     maxHeight: { type: String, required: !1, default: "none" },
+    gap: { type: [Number, String], required: !1, default: void 0 },
     modelValue: { type: Object, required: !1, default: () => ({
       x: 0,
       y: 0
@@ -22,7 +24,7 @@ const qe = /* @__PURE__ */ Te({
   },
   emits: ["on-scroll", "update:model-value", "on-scroll-end"],
   setup(he, { expose: pe, emit: fe }) {
-    const o = he, O = p(null), a = p(null), N = n(() => o.scrollYProp), U = n(() => o.scrollXProp), f = p(!1), m = p(!1), s = p({
+    const o = he, O = p(null), a = p(null), $ = n(() => o.scrollYProp), U = n(() => o.scrollXProp), f = p(!1), m = p(!1), s = p({
       clientWidth: 0,
       clientHeight: 0,
       scrollWidth: 0,
@@ -79,9 +81,9 @@ const qe = /* @__PURE__ */ Te({
       () => o.scrollYProp === "hidden" || !f.value ? "0" : `${j.value}px`
     ), J = n(
       () => o.scrollXProp === "hidden" || !m.value ? "0" : `${A.value}px`
-    ), R = n(() => `${o.yBarWidthInPx}px`), D = n(() => `${o.xBarWidthInPx}px`), me = n(() => q.value ? D.value : "0px"), ve = n(() => _.value ? R.value : "0px"), K = Me("nmorph");
+    ), R = n(() => `${o.yBarWidthInPx}px`), D = n(() => `${o.xBarWidthInPx}px`), me = n(() => _.value ? D.value : "0px"), ve = n(() => I.value ? R.value : "0px"), K = Me("nmorph");
     let d;
-    const H = fe, I = () => {
+    const H = fe, q = () => {
       const e = a.value;
       if (!e) return;
       const t = Math.trunc(e.scrollLeft), r = Math.trunc(e.scrollTop);
@@ -89,8 +91,8 @@ const qe = /* @__PURE__ */ Te({
     }, Q = () => {
       H("on-scroll-end");
     }, ge = (e) => {
-      w(), H("on-scroll", e), a.value && (o.updateOnlyOnScrollEnd || I(), d !== void 0 && clearTimeout(d), d = setTimeout(() => {
-        o.updateOnlyOnScrollEnd && I(), Q();
+      w(), H("on-scroll", e), a.value && (o.updateOnlyOnScrollEnd || q(), d !== void 0 && clearTimeout(d), d = setTimeout(() => {
+        o.updateOnlyOnScrollEnd && q(), Q();
       }, o.scrollEndDelay));
     }, Z = (e) => e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? Math.max(s.value.clientWidth, 1) : 1, ee = (e) => {
       if (o.scrollYProp === "hidden" || !f.value || !e) return !1;
@@ -161,6 +163,9 @@ const qe = /* @__PURE__ */ Te({
     const le = n(() => o.cssScrollBehavior), ne = n(() => o.height), ae = n(() => o.maxHeight), ye = n(() => ({
       "--nmorph-private-scroll-bar-width": R.value,
       "--nmorph-private-scroll-bar-height": D.value,
+      ...Re({
+        "--nmorph-private-scroll-gap": o.gap
+      }),
       boxSizing: "border-box",
       minWidth: "0",
       minHeight: "0",
@@ -170,18 +175,18 @@ const qe = /* @__PURE__ */ Te({
       paddingRight: F.value,
       paddingBottom: J.value,
       overflowX: U.value,
-      overflowY: N.value,
+      overflowY: $.value,
       scrollBehavior: le.value
-    })), _ = n(() => o.scrollYProp !== "hidden" && f.value), q = n(() => o.scrollXProp !== "hidden" && m.value), se = n(
-      () => Math.max(0, s.value.clientHeight - (q.value ? o.xBarWidthInPx : 0))
+    })), I = n(() => o.scrollYProp !== "hidden" && f.value), _ = n(() => o.scrollXProp !== "hidden" && m.value), se = n(
+      () => Math.max(0, s.value.clientHeight - (_.value ? o.xBarWidthInPx : 0))
     ), ie = n(
-      () => Math.max(0, s.value.clientWidth - (_.value ? o.yBarWidthInPx : 0))
-    ), b = (e) => e === "y" ? se.value : ie.value, X = (e) => e === "y" ? s.value.clientHeight : s.value.clientWidth, k = (e) => e === "y" ? s.value.scrollHeight : s.value.scrollWidth, C = (e) => e === "y" ? s.value.scrollTop : s.value.scrollLeft, ce = (e) => Math.min(b(e), Math.max(18, e === "y" ? o.yBarWidthInPx * 3 : o.xBarWidthInPx * 3)), S = (e) => Math.max(0, k(e) - X(e)), h = (e) => {
-      const t = b(e), r = k(e), l = X(e);
+      () => Math.max(0, s.value.clientWidth - (I.value ? o.yBarWidthInPx : 0))
+    ), b = (e) => e === "y" ? se.value : ie.value, X = (e) => e === "y" ? s.value.clientHeight : s.value.clientWidth, C = (e) => e === "y" ? s.value.scrollHeight : s.value.scrollWidth, k = (e) => e === "y" ? s.value.scrollTop : s.value.scrollLeft, ce = (e) => Math.min(b(e), Math.max(18, e === "y" ? o.yBarWidthInPx * 3 : o.xBarWidthInPx * 3)), S = (e) => Math.max(0, C(e) - X(e)), h = (e) => {
+      const t = b(e), r = C(e), l = X(e);
       return t <= 0 || r <= l ? 0 : Math.min(t, Math.max(ce(e), l / r * t));
     }, Y = (e) => {
       const t = S(e), r = Math.max(0, b(e) - h(e));
-      return !t || !r ? 0 : C(e) / t * r;
+      return !t || !r ? 0 : k(e) / t * r;
     }, Pe = n(() => ({
       height: `${h("y")}px`,
       transform: `translate3d(0, ${Y("y")}px, 0)`
@@ -194,8 +199,8 @@ const qe = /* @__PURE__ */ Te({
       const l = Math.max(0, Math.min(S(e), t));
       e === "y" ? r.scrollTop = l : r.scrollLeft = l, w();
     }, V = () => {
-      i && (window.removeEventListener("pointermove", $), window.removeEventListener("pointerup", z), window.removeEventListener("pointercancel", z), i = void 0, y.value = !1, document.body && (document.body.style.userSelect = B));
-    }, $ = (e) => {
+      i && (window.removeEventListener("pointermove", N), window.removeEventListener("pointerup", z), window.removeEventListener("pointercancel", z), i = void 0, y.value = !1, document.body && (document.body.style.userSelect = B));
+    }, N = (e) => {
       if (!i) return;
       const r = (i.axis === "y" ? e.clientY : e.clientX) - i.pointerStart, l = Math.max(1, i.trackSize - i.thumbSize), c = r / l * i.maxScroll;
       W(i.axis, i.scrollStart + c);
@@ -207,18 +212,18 @@ const qe = /* @__PURE__ */ Te({
       !r || !l || !c || (i = {
         axis: e,
         pointerStart: e === "y" ? t.clientY : t.clientX,
-        scrollStart: C(e),
+        scrollStart: k(e),
         trackSize: r,
         thumbSize: l,
         maxScroll: c
-      }, y.value = !0, B = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", $), window.addEventListener("pointerup", z), window.addEventListener("pointercancel", z));
+      }, y.value = !0, B = document.body?.style.userSelect ?? "", document.body && (document.body.style.userSelect = "none"), window.addEventListener("pointermove", N), window.addEventListener("pointerup", z), window.addEventListener("pointercancel", z));
     }, Be = (e, t) => {
       if (t.target.closest(".nmorph-scroll__thumb")) return;
       const l = t.currentTarget.getBoundingClientRect(), c = e === "y" ? t.clientY - l.top : t.clientX - l.left, E = Math.max(1, b(e) - h(e)), He = (c - h(e) / 2) / E * S(e);
       W(e, He);
     };
     pe({ scrollDOMContainer: a, moveTo: M });
-    const ue = { props: o, scrollRoot: O, scrollDOMContainer: a, overflowY: N, overflowX: U, hasVerticalScroll: f, hasHorizontalScroll: m, metrics: s, isDragging: y, get viewportResizeObserver() {
+    const ue = { props: o, scrollRoot: O, scrollDOMContainer: a, overflowY: $, overflowX: U, hasVerticalScroll: f, hasHorizontalScroll: m, metrics: s, isDragging: y, get viewportResizeObserver() {
       return x;
     }, set viewportResizeObserver(e) {
       x = e;
@@ -242,7 +247,7 @@ const qe = /* @__PURE__ */ Te({
       return d;
     }, set scrollEndTimeout(e) {
       d = e;
-    }, emit: H, updateValue: I, handleScrollEnd: Q, scrollHandler: ge, getWheelDeltaMultiplier: Z, canConsumeVerticalWheel: ee, isNestedScrollEvent: te, isCurrentHorizontalBarEvent: re, wheelHandler: be, show: T, modifiers: Se, getProgrammaticScrollBehavior: oe, moveTo: M, scrollBehavior: le, scrollHeight: ne, maxHeight: ae, rootStyle: ye, viewportStyle: xe, visibleVerticalBar: _, visibleHorizontalBar: q, verticalTrackSize: se, horizontalTrackSize: ie, getTrackSize: b, getClientSize: X, getScrollSize: k, getScrollPosition: C, getMinThumbSize: ce, getMaxScroll: S, getThumbSize: h, getThumbOffset: Y, verticalThumbStyle: Pe, horizontalThumbStyle: we, setScrollPosition: W, stopThumbDrag: V, thumbPointerMoveHandler: $, thumbPointerUpHandler: z, thumbPointerDownHandler: ze, trackPointerDownHandler: Be, mouseEnterHandler: () => {
+    }, emit: H, updateValue: q, handleScrollEnd: Q, scrollHandler: ge, getWheelDeltaMultiplier: Z, canConsumeVerticalWheel: ee, isNestedScrollEvent: te, isCurrentHorizontalBarEvent: re, wheelHandler: be, show: T, modifiers: Se, getProgrammaticScrollBehavior: oe, moveTo: M, scrollBehavior: le, scrollHeight: ne, maxHeight: ae, rootStyle: ye, viewportStyle: xe, visibleVerticalBar: I, visibleHorizontalBar: _, verticalTrackSize: se, horizontalTrackSize: ie, getTrackSize: b, getClientSize: X, getScrollSize: C, getScrollPosition: k, getMinThumbSize: ce, getMaxScroll: S, getThumbSize: h, getThumbOffset: Y, verticalThumbStyle: Pe, horizontalThumbStyle: we, setScrollPosition: W, stopThumbDrag: V, thumbPointerMoveHandler: N, thumbPointerUpHandler: z, thumbPointerDownHandler: ze, trackPointerDownHandler: Be, mouseEnterHandler: () => {
       T.value = !0;
     }, mouseLeaveHandler: () => {
       T.value = !1;
@@ -251,5 +256,5 @@ const qe = /* @__PURE__ */ Te({
   }
 });
 export {
-  qe as default
+  Ce as default
 };

package/dist/components/data/nmorph-card/NmorphCard.css

@@ -1 +1 @@
-.nmorph-card{--nmorph-private-card-padding: var(--indentation-04);--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: none;--nmorph-private-card-shadow: none;position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--nmorph-private-card-padding);background:var(--nmorph-private-card-background);border:var(--nmorph-private-card-border);border-radius:var(--nmorph-private-card-radius, var(--default-border-radius));box-shadow:var(--nmorph-private-card-shadow)}.nmorph-card.nmorph-card--fill{width:100%}.nmorph-card .nmorph-card__content{height:100%;padding:var(--nmorph-private-card-content-padding, 0)}.nmorph-card .nmorph-card__header{font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height)}.nmorph-card .nmorph-card__footer{height:fit-content;margin-top:4px;font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-card.nmorph-card--nmorph{--nmorph-private-card-background: var(--nmorph-main-color)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--outset{--nmorph-private-card-shadow: var(--nmorph-shadow-outset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--inset{--nmorph-private-card-shadow: var(--nmorph-shadow-inset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--combined{--nmorph-private-card-border: var(--nmorph-private-card-combined-border-width) solid var(--nmorph-main-color);--nmorph-private-card-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), 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(-.5 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-card.nmorph-card--plain{--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: var(--nmorph-plain-border);--nmorph-private-card-shadow: none}
+.nmorph-card{--nmorph-private-card-padding: var(--indentation-04);--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: none;--nmorph-private-card-shadow: none;--nmorph-private-card-paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.72' filter='url(%23n)'/%3E%3C/svg%3E");--nmorph-private-card-paper-opacity: 0;--nmorph-private-card-paper-shadow-color: color-mix(in srgb, var(--nmorph-dark-shade-color) 82%, transparent);--nmorph-private-card-paper-light-color: color-mix(in srgb, var(--nmorph-light-shade-color) 76%, transparent);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--nmorph-private-card-padding);background:var(--nmorph-private-card-background);border:var(--nmorph-private-card-border);border-radius:var(--nmorph-private-card-radius, var(--default-border-radius));box-shadow:var(--nmorph-private-card-shadow)}.nmorph-card:before{position:absolute;z-index:0;background-image:var(--nmorph-private-card-paper-noise),radial-gradient(circle at 1px 1px,var(--nmorph-private-card-paper-shadow-color) 0 1px,transparent 1.7px),radial-gradient(circle at 6px 4px,var(--nmorph-private-card-paper-light-color) 0 1px,transparent 1.8px);background-size:72px 72px,11px 11px,16px 16px;border-radius:inherit;opacity:var(--nmorph-private-card-paper-opacity);pointer-events:none;content:"";inset:0}.nmorph-card.nmorph-card--fill{width:100%}.nmorph-card .nmorph-card__header,.nmorph-card .nmorph-card__content{position:relative;z-index:1}.nmorph-card .nmorph-card__content{height:100%;padding:var(--nmorph-private-card-content-padding, 0)}.nmorph-card .nmorph-card__header{font-weight:var(--nmorph-typography-title-font-weight);font-size:var(--nmorph-typography-title-font-size);line-height:var(--nmorph-typography-title-line-height)}.nmorph-card .nmorph-card__footer{position:relative;z-index:1;height:fit-content;margin-top:4px;font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-card.nmorph-card--nmorph{--nmorph-private-card-background: var(--nmorph-main-color)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--outset{--nmorph-private-card-shadow: var(--nmorph-shadow-outset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--inset{--nmorph-private-card-shadow: var(--nmorph-shadow-inset)}.nmorph-card:not(.nmorph-card--plain).nmorph-card--combined{--nmorph-private-card-border: var(--nmorph-private-card-combined-border-width) solid var(--nmorph-main-color);--nmorph-private-card-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), 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(-.5 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-card.nmorph-card--plain{--nmorph-private-card-background: var(--nmorph-main-color);--nmorph-private-card-border: var(--nmorph-plain-border);--nmorph-private-card-shadow: none}

package/dist/components/data/nmorph-card/NmorphCard.vue2.js

@@ -1,9 +1,9 @@
 import './NmorphCard.css';
-import { defineComponent as m, useSlots as c, computed as o } from "vue";
-import { useModifiers as g } from "../../../utils/create-modifiers.js";
-import { toCssSize as d } from "../../../utils/common.js";
-import { NmorphShadowType as h } from "../../../types/common.types.js";
-const q = /* @__PURE__ */ m({
+import { defineComponent as h, useSlots as g, computed as a } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import { toCssSize as r } from "../../../utils/common.js";
+import { NmorphShadowType as v } from "../../../types/common.types.js";
+const N = /* @__PURE__ */ h({
   __name: "NmorphCard",
   props: {
     design: { type: null, required: !1, default: "nmorph" },
@@ -14,30 +14,32 @@ const q = /* @__PURE__ */ m({
     radius: { type: [Number, String], required: !1, default: void 0 },
     contentPadding: { type: [Number, String], required: !1, default: void 0 },
     contentClass: { type: String, required: !1, default: "" },
+    paper: { type: Number, required: !1, default: 0 },
     fill: { type: Boolean, required: !1, default: !0 },
     tag: { type: String, required: !1, default: "div" }
   },
-  setup(s, { expose: p }) {
-    p();
-    const e = s, u = c(), r = o(() => e.design || "nmorph"), l = o(
-      () => g({
-        nmorph: [r.value === "nmorph" ? h[e.shadowType] : ""],
-        "nmorph-card": [r.value, e.shadowType, e.fill ? "fill" : "fit-content"]
+  setup(s, { expose: u }) {
+    u();
+    const e = s, l = g(), d = a(() => e.design || "nmorph"), m = a(
+      () => y({
+        nmorph: [d.value === "nmorph" ? v[e.shadowType] : ""],
+        "nmorph-card": [d.value, e.shadowType, e.fill ? "fill" : "fit-content"]
       })
-    ), f = o(() => {
-      const t = e.padding !== void 0 ? d(e.padding) : d(e.cardPadding), a = d(e.radius), n = d(e.contentPadding);
+    ), c = a(() => {
+      const t = e.padding !== void 0 ? r(e.padding) : r(e.cardPadding), o = r(e.radius), n = r(e.contentPadding), f = Math.max(0, Number(e.paper) || 0), p = Math.min(f * 0.08, 0.48);
       return {
         ...e.shadowType === "combined" && {
           "--nmorph-private-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
         },
         ...t !== void 0 && { "--nmorph-private-card-padding": t, padding: t },
-        ...a !== void 0 && { "--nmorph-private-card-radius": a },
-        ...n !== void 0 && { "--nmorph-private-card-content-padding": n }
+        ...o !== void 0 && { "--nmorph-private-card-radius": o },
+        ...n !== void 0 && { "--nmorph-private-card-content-padding": n },
+        ...p > 0 && { "--nmorph-private-card-paper-opacity": String(p) }
       };
-    }), i = { props: e, slots: u, resolvedDesign: r, modifiers: l, styles: f };
+    }), i = { props: e, slots: l, resolvedDesign: d, modifiers: m, styles: c };
     return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
   }
 });
 export {
-  q as default
+  N as default
 };

package/dist/components/data/nmorph-carousel/NmorphCarousel.css

@@ -1 +1 @@
-.nmorph-carousel{--nmorph-private-carousel-height: 500px;--nmorph-private-carousel-frame-border: 10px;position:relative;box-sizing:border-box;height:var(--nmorph-private-carousel-height);overflow:hidden;border-radius:var(--default-border-radius)}.nmorph-carousel .nmorph-carousel__wrapper{display:flex;height:100%}.nmorph-carousel .transition-enabled{transition:transform .4s ease}.nmorph-carousel .nmorph-carousel__element-indicator-wrapper{padding:4px;cursor:pointer}.nmorph-carousel .nmorph-carousel__elements-indicator{position:absolute;bottom:16px;display:flex;justify-content:center;width:100%}.nmorph-carousel .nmorph-carousel__element-indicator{width:30px;height:2px;margin-right:var(--indentation-02);background:var(--nmorph-gray-color)}.nmorph-carousel .nmorph-carousel__element-indicator--active{background:var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__action-btn{position:absolute;top:50%;padding:var(--indentation-03);background:var(--nmorph-info-color);border-radius:var(--default-border-radius);transform:translateY(-50%);cursor:pointer}.nmorph-carousel .nmorph-carousel__action-btn:hover{background:var(--nmorph-info-color)}.nmorph-carousel .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__prev{right:var(--indentation-02);rotate:-90deg}.nmorph-carousel .nmorph-carousel__next{left:var(--indentation-02);rotate:90deg}.nmorph-carousel .nmorph-carousel__item{flex-shrink:0;width:100%;height:100%}.nmorph-carousel--nmorph{background:var(--nmorph-main-color);border:var(--nmorph-private-carousel-frame-border) solid var(--nmorph-main-color)}.nmorph-carousel--plain{background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn{color:var(--nmorph-text-color);background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-carousel--plain .nmorph-carousel__action-btn:hover{color:var(--nmorph-accent-color);background:var(--nmorph-main-color);border-color:var(--nmorph-accent-color)}
+.nmorph-carousel{--nmorph-private-carousel-height: 500px;--nmorph-private-carousel-frame-border: 10px;--nmorph-private-carousel-action-size: 36px;--nmorph-private-carousel-action-offset: var(--indentation-02);position:relative;box-sizing:border-box;height:var(--nmorph-private-carousel-height);overflow:hidden;border-radius:var(--default-border-radius)}.nmorph-carousel .nmorph-carousel__wrapper{display:flex;height:100%}.nmorph-carousel .transition-enabled{transition:transform .4s ease}.nmorph-carousel .nmorph-carousel__element-indicator-wrapper{padding:4px;cursor:pointer}.nmorph-carousel .nmorph-carousel__elements-indicator{position:absolute;bottom:16px;display:flex;justify-content:center;width:100%}.nmorph-carousel .nmorph-carousel__element-indicator{width:30px;height:2px;margin-right:var(--indentation-02);background:var(--nmorph-gray-color)}.nmorph-carousel .nmorph-carousel__element-indicator--active{background:var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__action-btn{position:absolute;top:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--nmorph-private-carousel-action-size);height:var(--nmorph-private-carousel-action-size);padding:0;background:var(--nmorph-info-color);border-radius:var(--default-border-radius);transform:translateY(-50%);cursor:pointer}.nmorph-carousel .nmorph-carousel__action-btn:hover{background:var(--nmorph-info-color)}.nmorph-carousel .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-carousel .nmorph-carousel__prev{right:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__next{left:var(--nmorph-private-carousel-action-offset)}.nmorph-carousel .nmorph-carousel__item{flex-shrink:0;width:100%;height:100%}.nmorph-carousel--nmorph{background:var(--nmorph-main-color);border:var(--nmorph-private-carousel-frame-border) solid var(--nmorph-main-color)}.nmorph-carousel--plain{background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn{color:var(--nmorph-text-color);background:var(--nmorph-main-color);border:var(--nmorph-plain-border);box-shadow:none}.nmorph-carousel--plain .nmorph-carousel__action-btn .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-carousel--plain .nmorph-carousel__action-btn:hover{color:var(--nmorph-accent-color);background:var(--nmorph-main-color);border-color:var(--nmorph-accent-color)}

package/dist/components/data/nmorph-carousel/NmorphCarousel.vue.js

@@ -1,11 +1,11 @@
 import './NmorphCarousel.css';
 import d from "./NmorphCarousel.vue2.js";
-import { openBlock as o, createElementBlock as e, normalizeClass as c, createElementVNode as n, normalizeStyle as h, Fragment as i, renderList as s, createVNode as l, withCtx as m, renderSlot as p } from "vue";
+import { openBlock as e, createElementBlock as o, normalizeClass as c, createElementVNode as n, normalizeStyle as h, Fragment as i, renderList as s, createVNode as l, withCtx as m, renderSlot as p } from "vue";
 /* empty css                    */
 import u from "../../../_virtual/_plugin-vue_export-helper.js";
 const v = ["id"], f = { class: "nmorph-carousel__elements-indicator" }, C = ["onClick"];
-function k(_, N, I, r, b, w) {
-  return o(), e(
+function k(_, N, I, r, b, y) {
+  return e(), o(
     "div",
     {
       class: c(r.modifiers)
@@ -18,10 +18,10 @@ function k(_, N, I, r, b, w) {
           style: h({ transform: r.translateX })
         },
         [
-          (o(!0), e(
+          (e(!0), o(
             i,
             null,
-            s(r.carouselData, (a) => (o(), e("div", {
+            s(r.carouselData, (a) => (e(), o("div", {
               id: `nmorph-carousel-item-${r.carouselId}-${a}`,
               key: a,
               class: "nmorph-carousel__item"
@@ -34,13 +34,13 @@ function k(_, N, I, r, b, w) {
         /* STYLE */
       ),
       n("div", f, [
-        (o(!0), e(
+        (e(!0), o(
           i,
           null,
-          s(r.carouselData, (a, t) => (o(), e("div", {
+          s(r.carouselData, (a, t) => (e(), o("div", {
             key: t,
             class: "nmorph-carousel__element-indicator-wrapper",
-            onClick: (y) => r.elementIndicator(t)
+            onClick: (S) => r.elementIndicator(t)
           }, [
             n(
               "div",
@@ -62,7 +62,7 @@ function k(_, N, I, r, b, w) {
       }, [
         l(r.NmorphIcon, null, {
           default: m(() => [
-            l(r.NmorphIconChevronDown)
+            l(r.NmorphIconChevronRight)
           ]),
           _: 1
           /* STABLE */
@@ -74,7 +74,7 @@ function k(_, N, I, r, b, w) {
       }, [
         l(r.NmorphIcon, null, {
           default: m(() => [
-            l(r.NmorphIconChevronDown)
+            l(r.NmorphIconChevronLeft)
           ]),
           _: 1
           /* STABLE */

package/dist/components/data/nmorph-carousel/NmorphCarousel.vue2.js

@@ -1,29 +1,30 @@
 import './NmorphCarousel.css';
-import { defineComponent as N, ref as p, computed as u, provide as w, watch as d } from "vue";
-import { useModifiers as D } from "../../../utils/create-modifiers.js";
-import { generateUUID as M } from "../../../utils/common.js";
-import y from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import b from "../../../assets/icons/chevron-down.svg.js";
-const A = /* @__PURE__ */ N({
+import { defineComponent as x, ref as p, computed as u, provide as M, watch as d } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import { generateUUID as b } from "../../../utils/common.js";
+import q from "../../../assets/icons/chevron-right.svg.js";
+import w from "../../../assets/icons/chevron-left.svg.js";
+import D from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const A = /* @__PURE__ */ x({
   __name: "NmorphCarousel",
   props: {
     design: { type: null, required: !1, default: "nmorph" },
     loop: { type: Boolean, required: !1, default: !0 }
   },
   emits: ["change"],
-  setup(f, { expose: v, emit: h }) {
-    v();
-    const e = p(0), o = f, l = h, g = u(
-      () => D({
+  setup(h, { expose: f, emit: v }) {
+    f();
+    const e = p(0), o = h, l = v, g = u(
+      () => y({
         nmorph: [o.design === "nmorph" ? "shadow-outset" : ""],
         "nmorph-carousel": [o.design]
       })
-    ), a = p([]), s = M();
-    w("carousel-data", { data: a, carouselId: s });
+    ), a = p([]), s = b();
+    M("carousel-data", { data: a, carouselId: s });
     const r = u(() => a.value.length), i = (t) => r.value ? o.loop ? (t + r.value) % r.value : Math.min(Math.max(t, 0), r.value - 1) : 0, n = (t) => {
-      const m = i(t);
-      m !== e.value && (e.value = m);
-    }, _ = () => n(e.value - 1), I = () => n(e.value + 1), S = u(() => `translateX(-${e.value * 100}%)`), x = (t) => t === e.value, C = (t) => {
+      const c = i(t);
+      c !== e.value && (e.value = c);
+    }, I = () => n(e.value - 1), _ = () => n(e.value + 1), C = u(() => `translateX(-${e.value * 100}%)`), S = (t) => t === e.value, N = (t) => {
       n(t);
     };
     d(r, (t) => {
@@ -31,12 +32,14 @@ const A = /* @__PURE__ */ N({
     }), d(e, () => {
       l("change", e.value);
     });
-    const c = { currentSlide: e, props: o, emit: l, modifiers: g, carouselData: a, carouselId: s, slideCount: r, normalizeSlideIndex: i, goToSlide: n, prevSlide: _, nextSlide: I, translateX: S, isCurrentElementActive: x, elementIndicator: C, get NmorphIcon() {
-      return y;
-    }, get NmorphIconChevronDown() {
-      return b;
+    const m = { currentSlide: e, props: o, emit: l, modifiers: g, carouselData: a, carouselId: s, slideCount: r, normalizeSlideIndex: i, goToSlide: n, prevSlide: I, nextSlide: _, translateX: C, isCurrentElementActive: S, elementIndicator: N, get NmorphIcon() {
+      return D;
+    }, get NmorphIconChevronLeft() {
+      return w;
+    }, get NmorphIconChevronRight() {
+      return q;
     } };
-    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {

package/dist/components/data/nmorph-file-card/NmorphFileCard.vue2.js

@@ -10,10 +10,10 @@ import ee from "../nmorph-video-preview/NmorphVideoPreview.vue.js";
 import re from "../../../assets/icons/image.svg.js";
 import oe from "../../../assets/icons/archive.svg.js";
 import x from "../../../assets/icons/doc.svg.js";
-import te from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ae from "../../../assets/icons/audio.svg.js";
-import ie from "../../../assets/icons/video.svg.js";
-import ne from "../../../assets/icons/open.svg.js";
+import te from "../../../assets/icons/open.svg.js";
+import ae from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ie from "../../../assets/icons/audio.svg.js";
+import ne from "../../../assets/icons/video.svg.js";
 import le from "../../../assets/icons/loading.svg.js";
 import ue from "../../../assets/icons/eye.svg.js";
 import se from "../../../assets/icons/download.svg.js";
@@ -45,7 +45,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
   emits: ["open", "download", "error"],
   setup(C, { expose: M, emit: _ }) {
     M();
-    const e = C, l = _, h = E(), w = V(!1), s = r(() => (e.extension || Q(e.name) || U(e.mimeType)).toLowerCase()), t = r(() => X(e.mimeType, e.name)), O = r(() => e.mimeType.toLowerCase().startsWith("image/") || t.value.some((o) => n(o, k)) ? re : e.mimeType.toLowerCase().startsWith("audio/") || t.value.some((o) => n(o, G)) ? ae : e.mimeType.toLowerCase().startsWith("video/") || t.value.some((o) => n(o, W)) ? ie : t.value.some((o) => n(o, j)) ? oe : t.value.some((o) => n(o, K)) ? x : x), g = (o) => {
+    const e = C, l = _, h = E(), w = V(!1), s = r(() => (e.extension || Q(e.name) || U(e.mimeType)).toLowerCase()), t = r(() => X(e.mimeType, e.name)), O = r(() => e.mimeType.toLowerCase().startsWith("image/") || t.value.some((o) => n(o, k)) ? re : e.mimeType.toLowerCase().startsWith("audio/") || t.value.some((o) => n(o, G)) ? ie : e.mimeType.toLowerCase().startsWith("video/") || t.value.some((o) => n(o, W)) ? ne : t.value.some((o) => n(o, j)) ? oe : t.value.some((o) => n(o, K)) ? x : x), g = (o) => {
       if (o === void 0 || Number.isNaN(o) || o < 0) return "";
       if (o === 0) return "0 B";
       const b = ["B", "KB", "MB", "GB", "TB"], c = Math.min(Math.floor(Math.log(o) / Math.log(1024)), b.length - 1), v = o / 1024 ** c, z = v >= 10 || c === 0 || Number.isInteger(v) ? 0 : 1;
@@ -103,7 +103,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
     ), H = { CONTRAST_ICON_COLOR: de, props: e, emit: l, slots: h, previewOpen: w, extension: s, candidates: t, icon: O, formatSize: g, fileSize: y, typeLabel: N, meta: S, audioPreviewAvailable: d, videoPreviewAvailable: a, imagePreviewAvailable: i, mediaPreviewAvailable: u, visualMediaPreviewAvailable: m, mediaPreviewHeight: B, styles: L, showInfo: D, mediaGalleryItems: I, shouldOpenInternalPreview: q, isPdf: p, pdfPreviewHref: P, previewOnIcon: A, hasCustomActions: f, hasActions: T, modifiers: R, openHandler: () => {
       q.value && (w.value = !0), e.previewMode !== "none" && l("open");
     }, downloadHandler: () => l("download"), errorHandler: () => l("error"), get NmorphIcon() {
-      return te;
+      return ae;
     }, get NmorphIconDownload() {
       return se;
     }, get NmorphIconEye() {
@@ -111,7 +111,7 @@ const de = "var(--nmorph-contrast-text-color)", Me = /* @__PURE__ */ F({
     }, get NmorphIconLoader() {
       return le;
     }, get NmorphIconOpen() {
-      return ne;
+      return te;
     }, NmorphAudioPreview: Y, NmorphMediaGallery: Z, NmorphVideoPreview: ee };
     return Object.defineProperty(H, "__isScriptSetup", { enumerable: !1, value: !0 }), H;
   }

package/dist/components/data/nmorph-image/NmorphImage.vue2.js

@@ -11,7 +11,7 @@ const C = /* @__PURE__ */ S({
     design: { type: null, required: !1, default: "nmorph" },
     loadingText: { type: String, required: !1, default: "" },
     loadFailedText: { type: String, required: !1, default: "" },
-    frameBorder: { type: Number, required: !1, default: 4 },
+    frameBorder: { type: Number, required: !1, default: 2.67 },
     src: { type: String, required: !1 },
     srcSet: { type: String, required: !1, default: "" },
     width: { type: [Number, String], required: !1, default: void 0 },

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.css

@@ -1 +1 @@
-.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-large-font-size);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);--nmorph-private-icon-color: currentColor}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-color)}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-color)}
+.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-large-font-size);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{color:var(--nmorph-text-color)}.nmorph-media-tile .nmorph-media-tile__status-item .nmorph-button__content{width:28px;min-width:28px;height:24px;min-height:24px;padding:0;color:currentColor;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-color:color-mix(in srgb,currentColor 35%,transparent);border-radius:var(--default-border-radius)}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-color)}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-color)}