@rettangoli/ui 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

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/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,9 +93,7 @@ class RettangoliViewElement extends HTMLElement {
         "bgs",
         "bgp",
         "bgr",
-        "sbh",
-        "spi",
-        "stg",
+        "hsb",
         "hide",
         "show",
         "sh",
@@ -178,15 +167,6 @@ 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;
@@ -216,18 +196,6 @@ 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",
@@ -335,6 +303,7 @@ 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) {
@@ -355,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

@@ -48,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;
+    }
+}
 
 `