@nmorph/nmorph-ui-kit 2.2.19 → 2.2.20

package/dist/hooks/use-common-styles.js

@@ -1,14 +1,14 @@
-import { nmorphCombined as p, nmorphInset as r, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, body2 as c, body3 as a, body4 as b } from "../utils/theme-style.js";
+import { nmorphCombined as p, nmorphInset as r, nmorphOutset as n, title1 as s, title2 as l, title3 as d, title4 as m, body1 as e, body2 as c, body3 as a, body4 as b } from "../utils/theme-style.js";
 const u = {
   "nmorph-body-4": b,
   "nmorph-body-3": a,
   "nmorph-body-2": c,
-  "nmorph-body-1": n,
+  "nmorph-body-1": e,
   "nmorph-title-4": m,
-  "nmorph-title-3": l,
-  "nmorph-title-2": d,
+  "nmorph-title-3": d,
+  "nmorph-title-2": l,
   "nmorph-title-1": s,
-  "nmorph--shadow-outset": e,
+  "nmorph--shadow-outset": n,
   "nmorph--shadow-inset": r,
   "nmorph--shadow-combined": p
 }, v = () => {
@@ -111,7 +111,7 @@ const u = {
       width: auto;
       font-family: Helvetica, Roboto, Arial, sans-serif;
 
-      ${n()}
+      ${e()}
     }
 
     h1 {
@@ -206,6 +206,46 @@ const u = {
       display: none;
     }
 
+    *::-webkit-scrollbar {
+      width: var(--nmorph-native-scrollbar-size, 8px);
+      height: var(--nmorph-native-scrollbar-size, 8px);
+      background: transparent;
+    }
+
+    *::-webkit-scrollbar-button,
+    *::-webkit-scrollbar-button:single-button,
+    *::-webkit-scrollbar-button:double-button,
+    *::-webkit-scrollbar-button:vertical:start:decrement,
+    *::-webkit-scrollbar-button:vertical:end:increment,
+    *::-webkit-scrollbar-button:horizontal:start:decrement,
+    *::-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;
+      border: 0 !important;
+      background: transparent !important;
+      background-image: none !important;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    *::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    *::-webkit-scrollbar-thumb {
+      border-radius: var(--border-radius-999);
+      background: color-mix(in srgb, var(--nmorph-scroll-thumb-color, var(--nmorph-text-color)) 42%, transparent);
+    }
+
+    *::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
     html {
       background: var(--nmorph-main-color);
     }
@@ -419,7 +459,7 @@ const u = {
     }
 
     .nmorph-text-input input:focus {
-      ${e()}
+      ${n()}
       background: var(--nmorph-accent-color);
       outline: none;
     }
@@ -525,8 +565,13 @@ const u = {
     .nmorph-scroll {
       --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
       color-scheme: var(--nmorph-scroll-color-scheme, light);
-      scrollbar-color: var(--thumb-color) transparent;
-      scrollbar-width: thin;
+    }
+
+    @-moz-document url-prefix() {
+      .nmorph-scroll {
+        scrollbar-color: var(--thumb-color) transparent;
+        scrollbar-width: thin;
+      }
     }
 
     .nmorph-scroll::-webkit-scrollbar {
@@ -537,6 +582,27 @@ const u = {
       transition: width ease-in-out 0.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;
+      border: 0 !important;
+      background: transparent !important;
+      background-image: none !important;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
       ${r()}

package/dist/hooks/use-virtual-list.js

@@ -31,7 +31,9 @@ const C = (a, h) => {
     }
     const e = Math.ceil((c.value + d.value) / o.value) + i.value;
     return Math.min(Math.max(e, v.value + i.value), a.value.length);
-  }), y = n(() => u.value ? f.value.offsets[v.value] || 0 : v.value * o.value), z = n(() => s.value ? a.value.slice(v.value, H.value).map((e, t) => ({
+  }), y = n(
+    () => u.value ? f.value.offsets[v.value] || 0 : v.value * o.value
+  ), z = n(() => s.value ? a.value.slice(v.value, H.value).map((e, t) => ({
     item: e,
     index: v.value + t
   })) : a.value.map((e, t) => ({ item: e, index: t }))), E = (e) => {