@nmorph/nmorph-ui-kit 2.2.44 → 2.2.45

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

@@ -1,18 +1,18 @@
-import { nmorphCombined as s, nmorphInset as t, nmorphOutset as h, title1 as l, title2 as d, title3 as c, title4 as b, body1 as a, body2 as p, body3 as e, body4 as m } from "../utils/theme-style.js";
+import { nmorphCombined as s, nmorphInset as r, nmorphOutset as h, title1 as l, title2 as d, title3 as c, title4 as b, body1 as e, body2 as p, body3 as a, body4 as m } from "../utils/theme-style.js";
 const u = {
   "nmorph-body-4": m,
-  "nmorph-body-3": e,
+  "nmorph-body-3": a,
   "nmorph-body-2": p,
-  "nmorph-body-1": a,
+  "nmorph-body-1": e,
   "nmorph-title-4": b,
   "nmorph-title-3": c,
   "nmorph-title-2": d,
   "nmorph-title-1": l,
   "nmorph--shadow-outset": h,
-  "nmorph--shadow-inset": t,
+  "nmorph--shadow-inset": r,
   "nmorph--shadow-combined": s
 }, w = () => {
-  let r = `
+  let t = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -112,7 +112,7 @@ const u = {
       width: auto;
       font-family: Helvetica, Roboto, Arial, sans-serif;
 
-      ${a()}
+      ${e()}
     }
 
     h1 {
@@ -262,9 +262,89 @@ const u = {
     .nmorph-scroll {
       --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
 
+      position: relative;
+      overflow: hidden;
       color-scheme: var(--nmorph-scroll-color-scheme, light);
-      scrollbar-color: var(--thumb-color) transparent;
-      scrollbar-width: thin;
+    }
+
+    .nmorph-scroll__viewport {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      display: inherit;
+      flex-direction: inherit;
+      flex-wrap: inherit;
+      align-content: inherit;
+      align-items: inherit;
+      justify-content: inherit;
+      gap: inherit;
+      grid-auto-flow: inherit;
+      grid-template-columns: inherit;
+      grid-template-rows: inherit;
+      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;
+      border-radius: var(--border-radius-40);
+      background: transparent;
+      ${r()}
+      opacity: 0.78;
+      transition:
+        opacity ease-in-out 0.16s,
+        background-color ease-in-out 0.16s;
+      touch-action: none;
+    }
+
+    .nmorph-scroll__bar--vertical {
+      top: 0;
+      right: 0;
+      width: var(--bar-width);
+    }
+
+    .nmorph-scroll__bar--horizontal {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: var(--bar-height);
+    }
+
+    .nmorph-scroll__thumb {
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: var(--border-radius-40);
+      background-color: var(--thumb-color);
+      cursor: pointer;
+      transition: background-color ease-in-out 0.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 {
@@ -298,7 +378,7 @@ const u = {
 
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
-      ${t()}
+      ${r()}
     }
 
     .nmorph-scroll::-webkit-scrollbar-thumb {
@@ -335,7 +415,7 @@ const u = {
     }
 
     .nmorph--thin-component.nmorph-native-input {
-      ${e()}
+      ${a()}
     }
 
     .nmorph-native-input:focus {
@@ -410,12 +490,12 @@ const u = {
 
   `;
   for (const [n, i] of Object.entries(u))
-    r += `
+    t += `
 .${n} {
   ${i()}
 }
 `;
-  return r;
+  return t;
 }, g = () => {
   if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
   const o = document.createElement("style");