@rettangoli/ui 1.8.0 → 1.8.1

package/dist/rettangoli-iife-layout.min.js

@@ -468,7 +468,7 @@ var rettangoli=(()=>{var $=`
 :host([sh]),
 :host([sv]) {
     -ms-overflow-style: auto;
-    scrollbar-gutter: stable;
+    scrollbar-gutter: stable both-edges;
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb, var(--muted-foreground)) var(--scrollbar-track, transparent);
 }
@@ -600,7 +600,7 @@ var rettangoli=(()=>{var $=`
         ${K}
         ${W}
         ${$}
-      `))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",...g([...C,"cols","op","wh","w","h","hide","show","sh","sv","z","overflow"])]}_styles=b();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=B({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=b(),S.forEach(e=>{let s=k=>`${e==="default"?"":`${e}-`}${k}`,r=this.getAttribute(s("wh")),n=u(r===null?this.getAttribute(s("w")):r),o=u(r===null?this.getAttribute(s("h")):r),l=Te(this.getAttribute(s("cols"))),h=this.getAttribute(s("op")),a=this.getAttribute(s("z"));l!==null&&(this._styles[e]["grid-template-columns"]=l),a!==null&&(this._styles[e]["z-index"]=a),h!==null&&(this._styles[e].opacity=h),v({styleBucket:this._styles[e],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),v({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="grid");let d=this.hasAttribute(s("sh")),y=this.hasAttribute(s("sv")),x=this.getAttribute(s("overflow"));d&&y?(this._styles[e].overflow="auto",this._styles[e]["scrollbar-gutter"]="stable"):d?(this._styles[e]["overflow-x"]="auto",this._styles[e]["scrollbar-gutter"]="stable"):y&&(this._styles[e]["overflow-y"]="auto",this._styles[e]["scrollbar-gutter"]="stable"),x==="hidden"&&(this._styles[e].overflow="hidden")});let t=w(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,e,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}e!==s&&this.updateStyles()}},Ft=({render:i,html:t})=>lt;var Dt=c`
+      `))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",...g([...C,"cols","op","wh","w","h","hide","show","sh","sv","z","overflow"])]}_styles=b();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=B({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=b(),S.forEach(e=>{let s=k=>`${e==="default"?"":`${e}-`}${k}`,r=this.getAttribute(s("wh")),n=u(r===null?this.getAttribute(s("w")):r),o=u(r===null?this.getAttribute(s("h")):r),l=Te(this.getAttribute(s("cols"))),h=this.getAttribute(s("op")),a=this.getAttribute(s("z"));l!==null&&(this._styles[e]["grid-template-columns"]=l),a!==null&&(this._styles[e]["z-index"]=a),h!==null&&(this._styles[e].opacity=h),v({styleBucket:this._styles[e],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),v({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="grid");let d=this.hasAttribute(s("sh")),y=this.hasAttribute(s("sv")),x=this.getAttribute(s("overflow"));d&&y?(this._styles[e].overflow="auto",this._styles[e]["scrollbar-gutter"]="stable both-edges"):d?(this._styles[e]["overflow-x"]="auto",this._styles[e]["scrollbar-gutter"]="stable both-edges"):y&&(this._styles[e]["overflow-y"]="auto",this._styles[e]["scrollbar-gutter"]="stable both-edges"),x==="hidden"&&(this._styles[e].overflow="hidden")});let t=w(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,e,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}e!==s&&this.updateStyles()}},Ft=({render:i,html:t})=>lt;var Dt=c`
 
   :host([d="h"]) {
     flex-direction: row;
@@ -694,7 +694,7 @@ var rettangoli=(()=>{var $=`
         ${K}
         ${W}
         ${$}
-      `))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",...g([...C,"op","wh","w","h","ar","bgi","bgs","bgp","bgr","hsb","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow","stretch"])]}_styles=b();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=B({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=b(),S.forEach(e=>{let s=zt=>`${e==="default"?"":`${e}-`}${zt}`,r=this.getAttribute(s("wh")),n=u(r===null?this.getAttribute(s("w")):r),o=u(r===null?this.getAttribute(s("h")):r),l=this.getAttribute(s("op")),h=this.getAttribute(s("z")),a=P(this.getAttribute(s("ar"))),d=Q(this.getAttribute(s("bgi"))),y=Q(this.getAttribute(s("bgs"))),x=Q(this.getAttribute(s("bgp"))),k=Q(this.getAttribute(s("bgr")));h!==null&&(this._styles[e]["z-index"]=h),l!==null&&(this._styles[e].opacity=l),a!==void 0&&(this._styles[e]["aspect-ratio"]=a),d!==null&&(this._styles[e]["background-image"]=d),y!==null&&(this._styles[e]["background-size"]=y),x!==null&&(this._styles[e]["background-position"]=x),k!==null&&(this._styles[e]["background-repeat"]=k),v({styleBucket:this._styles[e],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),v({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="flex");let z=this.getAttribute(s("d")),A=this.getAttribute(s("ah")),E=this.getAttribute(s("av")),I=T({element:this,size:e,attr:"d"});z==="h"?this._styles[e]["flex-direction"]="row":z==="v"?this._styles[e]["flex-direction"]="column":e==="default"&&!z&&["sm","md","lg","xl"].some(ge=>this.hasAttribute(`${ge}-d`))&&(this._styles[e]["flex-direction"]="column");let H=I==="h",J=I==="v"||!I;H&&(A==="c"?this._styles[e]["justify-content"]="center":A==="e"?this._styles[e]["justify-content"]="flex-end":A==="s"&&(this._styles[e]["justify-content"]="flex-start"),E==="c"?(this._styles[e]["align-items"]="center",this._styles[e]["align-content"]="center"):E==="e"?(this._styles[e]["align-items"]="flex-end",this._styles[e]["align-content"]="flex-end"):E==="s"&&(this._styles[e]["align-items"]="flex-start")),J&&(A!==null||E!==null)&&(A==="c"?this._styles[e]["align-items"]="center":A==="e"?this._styles[e]["align-items"]="flex-end":A==="s"&&(this._styles[e]["align-items"]="flex-start"),E==="c"?this._styles[e]["justify-content"]="center":E==="e"?this._styles[e]["justify-content"]="flex-end":E==="s"&&(this._styles[e]["justify-content"]="flex-start"));let ce=this.hasAttribute(s("wrap")),ue=this.hasAttribute(s("no-wrap"));ce&&(this._styles[e]["flex-wrap"]="wrap"),ue&&(this._styles[e]["flex-wrap"]="nowrap"),this.hasAttribute(s("stretch"))&&(this._styles[e]["align-self"]="stretch");let kt=this.hasAttribute(s("sh")),It=this.hasAttribute(s("sv")),pe=this.hasAttribute(s("hsb")),me=this.getAttribute(s("overflow"));kt&&It?(this._styles[e].overflow="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"):kt?(this._styles[e]["overflow-x"]="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"):It&&(this._styles[e]["overflow-y"]="auto",this._styles[e]["scrollbar-gutter"]="stable",this._styles[e]["flex-wrap"]="nowrap"),me==="hidden"&&(this._styles[e].overflow="hidden",this._styles[e]["flex-wrap"]="nowrap"),pe&&(this._styles[e]["-ms-overflow-style"]="none",this._styles[e]["scrollbar-gutter"]="auto",this._styles[e]["scrollbar-width"]="none")});let t=w(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,e,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}e!==s&&this.updateStyles()}},Vt=({render:i,html:t})=>at;var Oe={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
+      `))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",...g([...C,"op","wh","w","h","ar","bgi","bgs","bgp","bgr","hsb","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow","stretch"])]}_styles=b();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=B({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=b(),S.forEach(e=>{let s=zt=>`${e==="default"?"":`${e}-`}${zt}`,r=this.getAttribute(s("wh")),n=u(r===null?this.getAttribute(s("w")):r),o=u(r===null?this.getAttribute(s("h")):r),l=this.getAttribute(s("op")),h=this.getAttribute(s("z")),a=P(this.getAttribute(s("ar"))),d=Q(this.getAttribute(s("bgi"))),y=Q(this.getAttribute(s("bgs"))),x=Q(this.getAttribute(s("bgp"))),k=Q(this.getAttribute(s("bgr")));h!==null&&(this._styles[e]["z-index"]=h),l!==null&&(this._styles[e].opacity=l),a!==void 0&&(this._styles[e]["aspect-ratio"]=a),d!==null&&(this._styles[e]["background-image"]=d),y!==null&&(this._styles[e]["background-size"]=y),x!==null&&(this._styles[e]["background-position"]=x),k!==null&&(this._styles[e]["background-repeat"]=k),v({styleBucket:this._styles[e],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),v({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="flex");let z=this.getAttribute(s("d")),A=this.getAttribute(s("ah")),E=this.getAttribute(s("av")),I=T({element:this,size:e,attr:"d"});z==="h"?this._styles[e]["flex-direction"]="row":z==="v"?this._styles[e]["flex-direction"]="column":e==="default"&&!z&&["sm","md","lg","xl"].some(ge=>this.hasAttribute(`${ge}-d`))&&(this._styles[e]["flex-direction"]="column");let H=I==="h",J=I==="v"||!I;H&&(A==="c"?this._styles[e]["justify-content"]="center":A==="e"?this._styles[e]["justify-content"]="flex-end":A==="s"&&(this._styles[e]["justify-content"]="flex-start"),E==="c"?(this._styles[e]["align-items"]="center",this._styles[e]["align-content"]="center"):E==="e"?(this._styles[e]["align-items"]="flex-end",this._styles[e]["align-content"]="flex-end"):E==="s"&&(this._styles[e]["align-items"]="flex-start")),J&&(A!==null||E!==null)&&(A==="c"?this._styles[e]["align-items"]="center":A==="e"?this._styles[e]["align-items"]="flex-end":A==="s"&&(this._styles[e]["align-items"]="flex-start"),E==="c"?this._styles[e]["justify-content"]="center":E==="e"?this._styles[e]["justify-content"]="flex-end":E==="s"&&(this._styles[e]["justify-content"]="flex-start"));let ce=this.hasAttribute(s("wrap")),ue=this.hasAttribute(s("no-wrap"));ce&&(this._styles[e]["flex-wrap"]="wrap"),ue&&(this._styles[e]["flex-wrap"]="nowrap"),this.hasAttribute(s("stretch"))&&(this._styles[e]["align-self"]="stretch");let kt=this.hasAttribute(s("sh")),It=this.hasAttribute(s("sv")),pe=this.hasAttribute(s("hsb")),me=this.getAttribute(s("overflow"));kt&&It?(this._styles[e].overflow="auto",this._styles[e]["scrollbar-gutter"]="stable both-edges",this._styles[e]["flex-wrap"]="nowrap"):kt?(this._styles[e]["overflow-x"]="auto",this._styles[e]["scrollbar-gutter"]="stable both-edges",this._styles[e]["flex-wrap"]="nowrap"):It&&(this._styles[e]["overflow-y"]="auto",this._styles[e]["scrollbar-gutter"]="stable both-edges",this._styles[e]["flex-wrap"]="nowrap"),me==="hidden"&&(this._styles[e].overflow="hidden",this._styles[e]["flex-wrap"]="nowrap"),pe&&(this._styles[e]["-ms-overflow-style"]="none",this._styles[e]["scrollbar-gutter"]="auto",this._styles[e]["scrollbar-width"]="none")});let t=w(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,e,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}e!==s&&this.updateStyles()}},Vt=({render:i,html:t})=>at;var Oe={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
       font-size: var(--h1-font-size);
       font-weight: var(--h1-font-weight);
       line-height: var(--h1-line-height);

package/dist/rettangoli-iife-ui.min.js

@@ -468,7 +468,7 @@ var rettangoli=(()=>{var _e=`
 :host([sh]),
 :host([sv]) {
     -ms-overflow-style: auto;
-    scrollbar-gutter: stable;
+    scrollbar-gutter: stable both-edges;
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb, var(--muted-foreground)) var(--scrollbar-track, transparent);
 }
@@ -600,7 +600,7 @@ var rettangoli=(()=>{var _e=`
         ${ft}
         ${Ve}
         ${_e}
-      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",...W([...pe,"cols","op","wh","w","h","hide","show","sh","sv","z","overflow"])]}_styles=F();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),i=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=xe({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:i,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=F(),te.forEach(i=>{let s=f=>`${i==="default"?"":`${i}-`}${f}`,r=this.getAttribute(s("wh")),n=T(r===null?this.getAttribute(s("w")):r),o=T(r===null?this.getAttribute(s("h")):r),l=po(this.getAttribute(s("cols"))),p=this.getAttribute(s("op")),a=this.getAttribute(s("z"));l!==null&&(this._styles[i]["grid-template-columns"]=l),a!==null&&(this._styles[i]["z-index"]=a),p!==null&&(this._styles[i].opacity=p),K({styleBucket:this._styles[i],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),K({styleBucket:this._styles[i],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[i].display="none"),this.hasAttribute(s("show"))&&(this._styles[i].display="grid");let c=this.hasAttribute(s("sh")),d=this.hasAttribute(s("sv")),u=this.getAttribute(s("overflow"));c&&d?(this._styles[i].overflow="auto",this._styles[i]["scrollbar-gutter"]="stable"):c?(this._styles[i]["overflow-x"]="auto",this._styles[i]["scrollbar-gutter"]="stable"):d&&(this._styles[i]["overflow-y"]="auto",this._styles[i]["scrollbar-gutter"]="stable"),u==="hidden"&&(this._styles[i].overflow="hidden")});let t=G(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,i,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}i!==s&&this.updateStyles()}},us=({render:e,html:t})=>Ut;var hs=I`
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",...W([...pe,"cols","op","wh","w","h","hide","show","sh","sv","z","overflow"])]}_styles=F();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),i=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=xe({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:i,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=F(),te.forEach(i=>{let s=f=>`${i==="default"?"":`${i}-`}${f}`,r=this.getAttribute(s("wh")),n=T(r===null?this.getAttribute(s("w")):r),o=T(r===null?this.getAttribute(s("h")):r),l=po(this.getAttribute(s("cols"))),p=this.getAttribute(s("op")),a=this.getAttribute(s("z"));l!==null&&(this._styles[i]["grid-template-columns"]=l),a!==null&&(this._styles[i]["z-index"]=a),p!==null&&(this._styles[i].opacity=p),K({styleBucket:this._styles[i],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),K({styleBucket:this._styles[i],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[i].display="none"),this.hasAttribute(s("show"))&&(this._styles[i].display="grid");let c=this.hasAttribute(s("sh")),d=this.hasAttribute(s("sv")),u=this.getAttribute(s("overflow"));c&&d?(this._styles[i].overflow="auto",this._styles[i]["scrollbar-gutter"]="stable both-edges"):c?(this._styles[i]["overflow-x"]="auto",this._styles[i]["scrollbar-gutter"]="stable both-edges"):d&&(this._styles[i]["overflow-y"]="auto",this._styles[i]["scrollbar-gutter"]="stable both-edges"),u==="hidden"&&(this._styles[i].overflow="hidden")});let t=G(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,i,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}i!==s&&this.updateStyles()}},us=({render:e,html:t})=>Ut;var hs=I`
 
   :host([d="h"]) {
     flex-direction: row;
@@ -694,7 +694,7 @@ var rettangoli=(()=>{var _e=`
         ${ft}
         ${Ve}
         ${_e}
-      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",...W([...pe,"op","wh","w","h","ar","bgi","bgs","bgp","bgr","hsb","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow","stretch"])]}_styles=F();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),i=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=xe({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:i,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=F(),te.forEach(i=>{let s=z=>`${i==="default"?"":`${i}-`}${z}`,r=this.getAttribute(s("wh")),n=T(r===null?this.getAttribute(s("w")):r),o=T(r===null?this.getAttribute(s("h")):r),l=this.getAttribute(s("op")),p=this.getAttribute(s("z")),a=He(this.getAttribute(s("ar"))),c=yt(this.getAttribute(s("bgi"))),d=yt(this.getAttribute(s("bgs"))),u=yt(this.getAttribute(s("bgp"))),f=yt(this.getAttribute(s("bgr")));p!==null&&(this._styles[i]["z-index"]=p),l!==null&&(this._styles[i].opacity=l),a!==void 0&&(this._styles[i]["aspect-ratio"]=a),c!==null&&(this._styles[i]["background-image"]=c),d!==null&&(this._styles[i]["background-size"]=d),u!==null&&(this._styles[i]["background-position"]=u),f!==null&&(this._styles[i]["background-repeat"]=f),K({styleBucket:this._styles[i],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),K({styleBucket:this._styles[i],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[i].display="none"),this.hasAttribute(s("show"))&&(this._styles[i].display="flex");let h=this.getAttribute(s("d")),y=this.getAttribute(s("ah")),m=this.getAttribute(s("av")),b=Se({element:this,size:i,attr:"d"});h==="h"?this._styles[i]["flex-direction"]="row":h==="v"?this._styles[i]["flex-direction"]="column":i==="default"&&!h&&["sm","md","lg","xl"].some(B=>this.hasAttribute(`${B}-d`))&&(this._styles[i]["flex-direction"]="column");let g=b==="h",_=b==="v"||!b;g&&(y==="c"?this._styles[i]["justify-content"]="center":y==="e"?this._styles[i]["justify-content"]="flex-end":y==="s"&&(this._styles[i]["justify-content"]="flex-start"),m==="c"?(this._styles[i]["align-items"]="center",this._styles[i]["align-content"]="center"):m==="e"?(this._styles[i]["align-items"]="flex-end",this._styles[i]["align-content"]="flex-end"):m==="s"&&(this._styles[i]["align-items"]="flex-start")),_&&(y!==null||m!==null)&&(y==="c"?this._styles[i]["align-items"]="center":y==="e"?this._styles[i]["align-items"]="flex-end":y==="s"&&(this._styles[i]["align-items"]="flex-start"),m==="c"?this._styles[i]["justify-content"]="center":m==="e"?this._styles[i]["justify-content"]="flex-end":m==="s"&&(this._styles[i]["justify-content"]="flex-start"));let S=this.hasAttribute(s("wrap")),A=this.hasAttribute(s("no-wrap"));S&&(this._styles[i]["flex-wrap"]="wrap"),A&&(this._styles[i]["flex-wrap"]="nowrap"),this.hasAttribute(s("stretch"))&&(this._styles[i]["align-self"]="stretch");let k=this.hasAttribute(s("sh")),C=this.hasAttribute(s("sv")),O=this.hasAttribute(s("hsb")),V=this.getAttribute(s("overflow"));k&&C?(this._styles[i].overflow="auto",this._styles[i]["scrollbar-gutter"]="stable",this._styles[i]["flex-wrap"]="nowrap"):k?(this._styles[i]["overflow-x"]="auto",this._styles[i]["scrollbar-gutter"]="stable",this._styles[i]["flex-wrap"]="nowrap"):C&&(this._styles[i]["overflow-y"]="auto",this._styles[i]["scrollbar-gutter"]="stable",this._styles[i]["flex-wrap"]="nowrap"),V==="hidden"&&(this._styles[i].overflow="hidden",this._styles[i]["flex-wrap"]="nowrap"),O&&(this._styles[i]["-ms-overflow-style"]="none",this._styles[i]["scrollbar-gutter"]="auto",this._styles[i]["scrollbar-width"]="none")});let t=G(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,i,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}i!==s&&this.updateStyles()}},fs=({render:e,html:t})=>Ht;var co={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",...W([...pe,"op","wh","w","h","ar","bgi","bgs","bgp","bgr","hsb","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow","stretch"])]}_styles=F();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),i=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=xe({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:i,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=F(),te.forEach(i=>{let s=z=>`${i==="default"?"":`${i}-`}${z}`,r=this.getAttribute(s("wh")),n=T(r===null?this.getAttribute(s("w")):r),o=T(r===null?this.getAttribute(s("h")):r),l=this.getAttribute(s("op")),p=this.getAttribute(s("z")),a=He(this.getAttribute(s("ar"))),c=yt(this.getAttribute(s("bgi"))),d=yt(this.getAttribute(s("bgs"))),u=yt(this.getAttribute(s("bgp"))),f=yt(this.getAttribute(s("bgr")));p!==null&&(this._styles[i]["z-index"]=p),l!==null&&(this._styles[i].opacity=l),a!==void 0&&(this._styles[i]["aspect-ratio"]=a),c!==null&&(this._styles[i]["background-image"]=c),d!==null&&(this._styles[i]["background-size"]=d),u!==null&&(this._styles[i]["background-position"]=u),f!==null&&(this._styles[i]["background-repeat"]=f),K({styleBucket:this._styles[i],axis:"width",dimension:n,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),K({styleBucket:this._styles[i],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[i].display="none"),this.hasAttribute(s("show"))&&(this._styles[i].display="flex");let h=this.getAttribute(s("d")),y=this.getAttribute(s("ah")),m=this.getAttribute(s("av")),b=Se({element:this,size:i,attr:"d"});h==="h"?this._styles[i]["flex-direction"]="row":h==="v"?this._styles[i]["flex-direction"]="column":i==="default"&&!h&&["sm","md","lg","xl"].some(B=>this.hasAttribute(`${B}-d`))&&(this._styles[i]["flex-direction"]="column");let g=b==="h",_=b==="v"||!b;g&&(y==="c"?this._styles[i]["justify-content"]="center":y==="e"?this._styles[i]["justify-content"]="flex-end":y==="s"&&(this._styles[i]["justify-content"]="flex-start"),m==="c"?(this._styles[i]["align-items"]="center",this._styles[i]["align-content"]="center"):m==="e"?(this._styles[i]["align-items"]="flex-end",this._styles[i]["align-content"]="flex-end"):m==="s"&&(this._styles[i]["align-items"]="flex-start")),_&&(y!==null||m!==null)&&(y==="c"?this._styles[i]["align-items"]="center":y==="e"?this._styles[i]["align-items"]="flex-end":y==="s"&&(this._styles[i]["align-items"]="flex-start"),m==="c"?this._styles[i]["justify-content"]="center":m==="e"?this._styles[i]["justify-content"]="flex-end":m==="s"&&(this._styles[i]["justify-content"]="flex-start"));let S=this.hasAttribute(s("wrap")),A=this.hasAttribute(s("no-wrap"));S&&(this._styles[i]["flex-wrap"]="wrap"),A&&(this._styles[i]["flex-wrap"]="nowrap"),this.hasAttribute(s("stretch"))&&(this._styles[i]["align-self"]="stretch");let k=this.hasAttribute(s("sh")),C=this.hasAttribute(s("sv")),O=this.hasAttribute(s("hsb")),V=this.getAttribute(s("overflow"));k&&C?(this._styles[i].overflow="auto",this._styles[i]["scrollbar-gutter"]="stable both-edges",this._styles[i]["flex-wrap"]="nowrap"):k?(this._styles[i]["overflow-x"]="auto",this._styles[i]["scrollbar-gutter"]="stable both-edges",this._styles[i]["flex-wrap"]="nowrap"):C&&(this._styles[i]["overflow-y"]="auto",this._styles[i]["scrollbar-gutter"]="stable both-edges",this._styles[i]["flex-wrap"]="nowrap"),V==="hidden"&&(this._styles[i].overflow="hidden",this._styles[i]["flex-wrap"]="nowrap"),O&&(this._styles[i]["-ms-overflow-style"]="none",this._styles[i]["scrollbar-gutter"]="auto",this._styles[i]["scrollbar-width"]="none")});let t=G(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,i,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}i!==s&&this.updateStyles()}},fs=({render:e,html:t})=>Ht;var co={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
       font-size: var(--h1-font-size);
       font-weight: var(--h1-font-weight);
       line-height: var(--h1-line-height);

package/dist/themes/base.css

@@ -93,6 +93,7 @@ html {
   height: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
+  scrollbar-gutter: stable both-edges;
   overflow-y: auto;
 }
 

package/package.json

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

package/src/primitives/grid.js

@@ -185,13 +185,13 @@ class RettangoliGridElement extends HTMLElement {
 
       if (scrollHorizontal && scrollVertical) {
         this._styles[size].overflow = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable";
+        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
       } else if (scrollHorizontal) {
         this._styles[size]["overflow-x"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable";
+        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
       } else if (scrollVertical) {
         this._styles[size]["overflow-y"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable";
+        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
       }
 
       if (overflow === "hidden") {

package/src/primitives/view.js

@@ -314,15 +314,15 @@ class RettangoliViewElement extends HTMLElement {
 
       if (scrollHorizontal && scrollVertical) {
         this._styles[size]["overflow"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable";
+        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
         this._styles[size]["flex-wrap"] = "nowrap";
       } else if (scrollHorizontal) {
         this._styles[size]["overflow-x"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable";
+        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
         this._styles[size]["flex-wrap"] = "nowrap";
       } else if (scrollVertical) {
         this._styles[size]["overflow-y"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable";
+        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
         this._styles[size]["flex-wrap"] = "nowrap";
       }
 

package/src/styles/scrollStyles.js

@@ -21,7 +21,7 @@ export default css`
 :host([sh]),
 :host([sv]) {
     -ms-overflow-style: auto;
-    scrollbar-gutter: stable;
+    scrollbar-gutter: stable both-edges;
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb, var(--muted-foreground)) var(--scrollbar-track, transparent);
 }

package/src/themes/base.css

@@ -93,6 +93,7 @@ html {
   height: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
+  scrollbar-gutter: stable both-edges;
   overflow-y: auto;
 }