@rettangoli/ui 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -37,7 +37,7 @@
     "build": "rtgl fe build -o ./.generated/fe-entry.js && bun run esbuild.js && bun run esbuild-dev.js && npm run copy:css",
     "prepack": "npm run build",
     "vt:generate": "bun run build:dev && rtgl vt generate",
-    "vt:docker": "bun run build:dev && bash -lc 'IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.11\"; docker pull \"$IMAGE\" >/dev/null 2>&1 || IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27\"; docker run --rm --user $(id -u):$(id -g) -v \"$PWD:/app\" -w /app \"$IMAGE\" rtgl vt screenshot'",
+    "vt:docker": "bun run build:dev && bash -lc 'IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.10\"; docker pull \"$IMAGE\" >/dev/null 2>&1; docker run --rm --user $(id -u):$(id -g) -v \"$PWD:/app\" -w /app \"$IMAGE\" rtgl vt screenshot'",
     "vt:report": "bun run vt:docker && rtgl vt report",
     "vt:accept": "rtgl vt accept",
     "serve": "bunx serve .rettangoli/vt/_site"

package/src/primitives/grid.js

@@ -184,11 +184,14 @@ class RettangoliGridElement extends HTMLElement {
       const overflow = this.getAttribute(addSizePrefix("overflow"));
 
       if (scrollHorizontal && scrollVertical) {
-        this._styles[size].overflow = "scroll";
+        this._styles[size].overflow = "auto";
+        this._styles[size]["scrollbar-gutter"] = "stable";
       } else if (scrollHorizontal) {
-        this._styles[size]["overflow-x"] = "scroll";
+        this._styles[size]["overflow-x"] = "auto";
+        this._styles[size]["scrollbar-gutter"] = "stable";
       } else if (scrollVertical) {
-        this._styles[size]["overflow-y"] = "scroll";
+        this._styles[size]["overflow-y"] = "auto";
+        this._styles[size]["scrollbar-gutter"] = "stable";
       }
 
       if (overflow === "hidden") {

package/src/primitives/view.js

@@ -102,9 +102,6 @@ class RettangoliViewElement extends HTMLElement {
         "bgs",
         "bgp",
         "bgr",
-        "sst",
-        "sna",
-        "sns",
         "sbh",
         "spi",
         "stg",
@@ -181,15 +178,6 @@ class RettangoliViewElement extends HTMLElement {
       const backgroundRepeat = normalizeRawCssValue(
         this.getAttribute(addSizePrefix("bgr")),
       );
-      const scrollSnapType = normalizeRawCssValue(
-        this.getAttribute(addSizePrefix("sst")),
-      );
-      const scrollSnapAlign = normalizeRawCssValue(
-        this.getAttribute(addSizePrefix("sna")),
-      );
-      const scrollSnapStop = normalizeRawCssValue(
-        this.getAttribute(addSizePrefix("sns")),
-      );
       const scrollBehavior = normalizeRawCssValue(
         this.getAttribute(addSizePrefix("sbh")),
       );
@@ -228,18 +216,6 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["background-repeat"] = backgroundRepeat;
       }
 
-      if (scrollSnapType !== null) {
-        this._styles[size]["scroll-snap-type"] = scrollSnapType;
-      }
-
-      if (scrollSnapAlign !== null) {
-        this._styles[size]["scroll-snap-align"] = scrollSnapAlign;
-      }
-
-      if (scrollSnapStop !== null) {
-        this._styles[size]["scroll-snap-stop"] = scrollSnapStop;
-      }
-
       if (scrollBehavior !== null) {
         this._styles[size]["scroll-behavior"] = scrollBehavior;
       }
@@ -362,13 +338,16 @@ class RettangoliViewElement extends HTMLElement {
       const overflow = this.getAttribute(addSizePrefix("overflow"));
 
       if (scrollHorizontal && scrollVertical) {
-        this._styles[size]["overflow"] = "scroll";
+        this._styles[size]["overflow"] = "auto";
+        this._styles[size]["scrollbar-gutter"] = "stable";
         this._styles[size]["flex-wrap"] = "nowrap";
       } else if (scrollHorizontal) {
-        this._styles[size]["overflow-x"] = "scroll";
+        this._styles[size]["overflow-x"] = "auto";
+        this._styles[size]["scrollbar-gutter"] = "stable";
         this._styles[size]["flex-wrap"] = "nowrap";
       } else if (scrollVertical) {
-        this._styles[size]["overflow-y"] = "scroll";
+        this._styles[size]["overflow-y"] = "auto";
+        this._styles[size]["scrollbar-gutter"] = "stable";
         this._styles[size]["flex-wrap"] = "nowrap";
       }
 

package/src/styles/scrollStyles.js

@@ -3,17 +3,17 @@ import { css } from '../common.js'
 
 export default css`
 :host([sh]:not([sv])) {
-    overflow-x: scroll;
+    overflow-x: auto;
     flex-wrap: nowrap;
     min-width: 0;
 }
 :host([sv]:not([sh])) {
-    overflow-y: scroll;
+    overflow-y: auto;
     flex-wrap: nowrap;
     min-height: 0;
 }
 :host([sh][sv]) {
-    overflow: scroll;
+    overflow: auto;
     flex-wrap: nowrap;
     min-height: 0;
     min-width: 0;
@@ -21,6 +21,7 @@ export default css`
 :host([sh]),
 :host([sv]) {
     -ms-overflow-style: auto;
+    scrollbar-gutter: stable;
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb, var(--muted-foreground)) var(--scrollbar-track, transparent);
 }