@rettangoli/ui 1.8.1 → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/rettangoli-iife-layout.min.js +5 -5
  2. package/dist/rettangoli-iife-ui.min.js +5 -5
  3. package/dist/themes/base.css +2 -3
  4. package/package.json +1 -1
  5. package/src/primitives/grid.js +3 -3
  6. package/src/primitives/view.js +3 -3
  7. package/src/styles/scrollStyles.js +3 -3
  8. package/src/themes/base.css +2 -3
package/dist/rettangoli-iife-layout.min.js CHANGED
@@ -468,14 +468,14 @@ var rettangoli=(()=>{var $=`
468
468
  :host([sh]),
469
469
  :host([sv]) {
470
470
  -ms-overflow-style: auto;
471
- scrollbar-gutter: stable both-edges;
471
+ scrollbar-gutter: stable;
472
472
  scrollbar-width: thin;
473
473
  scrollbar-color: var(--scrollbar-thumb, var(--muted-foreground)) var(--scrollbar-track, transparent);
474
474
  }
475
475
  :host([sh])::-webkit-scrollbar,
476
476
  :host([sv])::-webkit-scrollbar {
477
- width: var(--scrollbar-size, 6px);
478
- height: var(--scrollbar-size, 6px);
477
+ width: var(--scrollbar-size, var(--spacing-sm));
478
+ height: var(--scrollbar-size, var(--spacing-sm));
479
479
  background: var(--scrollbar-track, transparent);
480
480
  }
481
481
  :host([sh])::-webkit-scrollbar-track,
@@ -600,7 +600,7 @@ var rettangoli=(()=>{var $=`
600
600
  ${K}
601
601
  ${W}
602
602
  ${$}
603
- `))}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`
603
+ `))}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`
604
604
 
605
605
  :host([d="h"]) {
606
606
  flex-direction: row;
@@ -694,7 +694,7 @@ var rettangoli=(()=>{var $=`
694
694
  ${K}
695
695
  ${W}
696
696
  ${$}
697
- `))}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:`
697
+ `))}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:`
698
698
  font-size: var(--h1-font-size);
699
699
  font-weight: var(--h1-font-weight);
700
700
  line-height: var(--h1-line-height);
package/dist/rettangoli-iife-ui.min.js CHANGED
@@ -468,14 +468,14 @@ var rettangoli=(()=>{var _e=`
468
468
  :host([sh]),
469
469
  :host([sv]) {
470
470
  -ms-overflow-style: auto;
471
- scrollbar-gutter: stable both-edges;
471
+ scrollbar-gutter: stable;
472
472
  scrollbar-width: thin;
473
473
  scrollbar-color: var(--scrollbar-thumb, var(--muted-foreground)) var(--scrollbar-track, transparent);
474
474
  }
475
475
  :host([sh])::-webkit-scrollbar,
476
476
  :host([sv])::-webkit-scrollbar {
477
- width: var(--scrollbar-size, 6px);
478
- height: var(--scrollbar-size, 6px);
477
+ width: var(--scrollbar-size, var(--spacing-sm));
478
+ height: var(--scrollbar-size, var(--spacing-sm));
479
479
  background: var(--scrollbar-track, transparent);
480
480
  }
481
481
  :host([sh])::-webkit-scrollbar-track,
@@ -600,7 +600,7 @@ var rettangoli=(()=>{var _e=`
600
600
  ${ft}
601
601
  ${Ve}
602
602
  ${_e}
603
- `))}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`
603
+ `))}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`
604
604
 
605
605
  :host([d="h"]) {
606
606
  flex-direction: row;
@@ -694,7 +694,7 @@ var rettangoli=(()=>{var _e=`
694
694
  ${ft}
695
695
  ${Ve}
696
696
  ${_e}
697
- `))}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:`
697
+ `))}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:`
698
698
  font-size: var(--h1-font-size);
699
699
  font-weight: var(--h1-font-weight);
700
700
  line-height: var(--h1-line-height);
package/dist/themes/base.css CHANGED
@@ -55,7 +55,7 @@ table {
55
55
 
56
56
  :root {
57
57
  --width-stretch: 100%;
58
- --scrollbar-size: 6px;
58
+ --scrollbar-size: var(--spacing-sm);
59
59
  --scrollbar-track: transparent;
60
60
  --scrollbar-thumb: var(--muted-foreground);
61
61
  --scrollbar-thumb-hover: var(--ring);
@@ -93,7 +93,6 @@ html {
93
93
  height: auto;
94
94
  -ms-overflow-style: none;
95
95
  scrollbar-width: none;
96
- scrollbar-gutter: stable both-edges;
97
96
  overflow-y: auto;
98
97
  }
99
98
 
@@ -114,7 +113,7 @@ body {
114
113
  html::-webkit-scrollbar,
115
114
  body::-webkit-scrollbar,
116
115
  ::-webkit-scrollbar {
117
- width: 4px !important;
116
+ width: var(--scrollbar-size, var(--spacing-sm)) !important;
118
117
  background: transparent !important;
119
118
  }
120
119
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rettangoli/ui",
3
- "version": "1.8.1",
3
+ "version": "1.8.2",
4
4
  "description": "A UI component library for building web interfaces.",
5
5
  "main": "dist/rettangoli-esm.min.js",
6
6
  "type": "module",
package/src/primitives/grid.js CHANGED
@@ -185,13 +185,13 @@ class RettangoliGridElement extends HTMLElement {
185
185
 
186
186
  if (scrollHorizontal && scrollVertical) {
187
187
  this._styles[size].overflow = "auto";
188
- this._styles[size]["scrollbar-gutter"] = "stable both-edges";
188
+ this._styles[size]["scrollbar-gutter"] = "stable";
189
189
  } else if (scrollHorizontal) {
190
190
  this._styles[size]["overflow-x"] = "auto";
191
- this._styles[size]["scrollbar-gutter"] = "stable both-edges";
191
+ this._styles[size]["scrollbar-gutter"] = "stable";
192
192
  } else if (scrollVertical) {
193
193
  this._styles[size]["overflow-y"] = "auto";
194
- this._styles[size]["scrollbar-gutter"] = "stable both-edges";
194
+ this._styles[size]["scrollbar-gutter"] = "stable";
195
195
  }
196
196
 
197
197
  if (overflow === "hidden") {
package/src/primitives/view.js CHANGED
@@ -314,15 +314,15 @@ class RettangoliViewElement extends HTMLElement {
314
314
 
315
315
  if (scrollHorizontal && scrollVertical) {
316
316
  this._styles[size]["overflow"] = "auto";
317
- this._styles[size]["scrollbar-gutter"] = "stable both-edges";
317
+ this._styles[size]["scrollbar-gutter"] = "stable";
318
318
  this._styles[size]["flex-wrap"] = "nowrap";
319
319
  } else if (scrollHorizontal) {
320
320
  this._styles[size]["overflow-x"] = "auto";
321
- this._styles[size]["scrollbar-gutter"] = "stable both-edges";
321
+ this._styles[size]["scrollbar-gutter"] = "stable";
322
322
  this._styles[size]["flex-wrap"] = "nowrap";
323
323
  } else if (scrollVertical) {
324
324
  this._styles[size]["overflow-y"] = "auto";
325
- this._styles[size]["scrollbar-gutter"] = "stable both-edges";
325
+ this._styles[size]["scrollbar-gutter"] = "stable";
326
326
  this._styles[size]["flex-wrap"] = "nowrap";
327
327
  }
328
328
 
package/src/styles/scrollStyles.js CHANGED
@@ -21,14 +21,14 @@ export default css`
21
21
  :host([sh]),
22
22
  :host([sv]) {
23
23
  -ms-overflow-style: auto;
24
- scrollbar-gutter: stable both-edges;
24
+ scrollbar-gutter: stable;
25
25
  scrollbar-width: thin;
26
26
  scrollbar-color: var(--scrollbar-thumb, var(--muted-foreground)) var(--scrollbar-track, transparent);
27
27
  }
28
28
  :host([sh])::-webkit-scrollbar,
29
29
  :host([sv])::-webkit-scrollbar {
30
- width: var(--scrollbar-size, 6px);
31
- height: var(--scrollbar-size, 6px);
30
+ width: var(--scrollbar-size, var(--spacing-sm));
31
+ height: var(--scrollbar-size, var(--spacing-sm));
32
32
  background: var(--scrollbar-track, transparent);
33
33
  }
34
34
  :host([sh])::-webkit-scrollbar-track,
package/src/themes/base.css CHANGED
@@ -55,7 +55,7 @@ table {
55
55
 
56
56
  :root {
57
57
  --width-stretch: 100%;
58
- --scrollbar-size: 6px;
58
+ --scrollbar-size: var(--spacing-sm);
59
59
  --scrollbar-track: transparent;
60
60
  --scrollbar-thumb: var(--muted-foreground);
61
61
  --scrollbar-thumb-hover: var(--ring);
@@ -93,7 +93,6 @@ html {
93
93
  height: auto;
94
94
  -ms-overflow-style: none;
95
95
  scrollbar-width: none;
96
- scrollbar-gutter: stable both-edges;
97
96
  overflow-y: auto;
98
97
  }
99
98
 
@@ -114,7 +113,7 @@ body {
114
113
  html::-webkit-scrollbar,
115
114
  body::-webkit-scrollbar,
116
115
  ::-webkit-scrollbar {
117
- width: 4px !important;
116
+ width: var(--scrollbar-size, var(--spacing-sm)) !important;
118
117
  background: transparent !important;
119
118
  }
120
119