@rettangoli/ui 1.0.11 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "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/components/sidebar/sidebar.store.js

@@ -141,6 +141,7 @@ export const selectViewData = ({ props }) => {
   const headerWidth = itemWidth;
 
   const ah = mode === 'shrunk-lg' || mode === 'shrunk-md' ? 'c' : '';
+  const listAttrString = mode === 'full' ? 'sv' : 'sv hsb';
 
   return {
     containerAttrString,
@@ -163,6 +164,7 @@ export const selectViewData = ({ props }) => {
     headerWidth,
     selectedItemId,
     ah,
+    listAttrString,
     showHeader,
     rightBorderWidth,
   };

package/src/components/sidebar/sidebar.view.yaml

@@ -75,7 +75,7 @@ template:
                                     - rtgl-text s=lg: ${header.label}
                               $else:
                                 - rtgl-text s=lg: ${header.label}
-      - rtgl-view w=f h=1fg sv ph=${headerPadding} pb=lg g=xs ah=${ah}:
+      - rtgl-view w=f h=1fg ph=${headerPadding} pb=lg g=xs ah=${ah} ${listAttrString}:
           - $for item, i in items:
               - $if item.type == "groupLabel":
                   - $if showGroupLabels:

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,15 +28,6 @@ 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;
@@ -102,12 +93,7 @@ class RettangoliViewElement extends HTMLElement {
         "bgs",
         "bgp",
         "bgr",
-        "sst",
-        "sna",
-        "sns",
-        "sbh",
-        "spi",
-        "stg",
+        "hsb",
         "hide",
         "show",
         "sh",
@@ -181,24 +167,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")),
-      );
-      const scrollPaddingInline = normalizeDimensionOrRawCssValue(
-        this.getAttribute(addSizePrefix("spi")),
-      );
-      const scrollTargetGroup = normalizeRawCssValue(
-        this.getAttribute(addSizePrefix("stg")),
-      );
 
       if (zIndex !== null) {
         this._styles[size]["z-index"] = zIndex;
@@ -228,30 +196,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;
-      }
-
-      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",
@@ -359,16 +303,20 @@ class RettangoliViewElement extends HTMLElement {
       // Handle scroll properties
       const scrollHorizontal = this.hasAttribute(addSizePrefix("sh"));
       const scrollVertical = this.hasAttribute(addSizePrefix("sv"));
+      const hideScrollbar = this.hasAttribute(addSizePrefix("hsb"));
       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";
       }
 
@@ -376,6 +324,12 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["overflow"] = "hidden";
         this._styles[size]["flex-wrap"] = "nowrap";
       }
+
+      if (hideScrollbar) {
+        this._styles[size]["-ms-overflow-style"] = "none";
+        this._styles[size]["scrollbar-gutter"] = "auto";
+        this._styles[size]["scrollbar-width"] = "none";
+      }
     });
 
     // Update styles only if changed

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);
 }
@@ -47,5 +48,37 @@ export default css`
     overflow: hidden;
     flex-wrap: nowrap;
 }
+:host([hsb])::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+@media only screen and (max-width: 1280px) {
+    :host([xl-hsb])::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    :host([lg-hsb])::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    :host([md-hsb])::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
+
+@media only screen and (max-width: 640px) {
+    :host([sm-hsb])::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
 
 `