@rettangoli/ui 1.0.10 → 1.0.13

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

@@ -28,6 +28,15 @@ const normalizeRawCssValue = (value) => {
   return normalizedValue.length > 0 ? normalizedValue : null;
 };
 
+const normalizeDimensionOrRawCssValue = (value) => {
+  const normalizedValue = normalizeRawCssValue(value);
+  if (normalizedValue === null) {
+    return null;
+  }
+
+  return dimensionWithUnit(normalizedValue);
+};
+
 // Internal implementation without uhtml
 class RettangoliViewElement extends HTMLElement {
   static styleSheet = null;
@@ -93,6 +102,9 @@ class RettangoliViewElement extends HTMLElement {
         "bgs",
         "bgp",
         "bgr",
+        "sbh",
+        "spi",
+        "stg",
         "hide",
         "show",
         "sh",
@@ -166,6 +178,15 @@ class RettangoliViewElement extends HTMLElement {
       const backgroundRepeat = normalizeRawCssValue(
         this.getAttribute(addSizePrefix("bgr")),
       );
+      const scrollBehavior = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("sbh")),
+      );
+      const scrollPaddingInline = normalizeDimensionOrRawCssValue(
+        this.getAttribute(addSizePrefix("spi")),
+      );
+      const scrollTargetGroup = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("stg")),
+      );
 
       if (zIndex !== null) {
         this._styles[size]["z-index"] = zIndex;
@@ -195,6 +216,18 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["background-repeat"] = backgroundRepeat;
       }
 
+      if (scrollBehavior !== null) {
+        this._styles[size]["scroll-behavior"] = scrollBehavior;
+      }
+
+      if (scrollPaddingInline !== null) {
+        this._styles[size]["scroll-padding-inline"] = scrollPaddingInline;
+      }
+
+      if (scrollTargetGroup !== null) {
+        this._styles[size]["scroll-target-group"] = scrollTargetGroup;
+      }
+
       applyDimensionToStyleBucket({
         styleBucket: this._styles[size],
         axis: "width",
@@ -305,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);
 }