rettangoli-ui 0.0.10-rc4 → 0.1.0-rc1

package/dist/rettangoli-esm.min.js

@@ -1,645 +0,0 @@
-function d(o,...l){let s="";return o.forEach((u,r)=>{s+=u+(l[r]||"")}),s}var M={default:void 0,xl:"@media only screen and (max-width: 1280px)",lg:"@media only screen and (max-width: 1024px)",md:"@media only screen and (max-width: 768px)",sm:"@media only screen and (max-width: 640px)"},f=(o,l,s={})=>{let u="";for(let[r,h]of Object.entries(M)){r!=="default"&&(u+=`${h} {`);for(let[g,t]of Object.entries(l)){let e=s[g]?` ${s[g]} `:" ";for(let[n,a]of Object.entries(t)){let c=o[g],b=a.startsWith("--")?`var(${a})`:a,m=r==="default"?g:`${r}-${g}`,v=r==="default"?`h-${g}`:`${r}-h-${g}`;if(c){let j=c.split(" ").map(z=>`${z}: ${b};`).join(" ");u+=`
-            :host([${m}="${n}"])${e}{
-              ${j}
-            }
-            :host([${v}="${n}"]:hover)${e}{
-              ${j}
-            }
-          `}else u+=`
-            :host([${m}="${n}"])${e}{
-              ${a}
-            }
-            :host([${v}="${n}"]:hover)${e}{
-              ${a}
-            }
-          `}}r!=="default"&&(u+="}")}return u};function E(o){if(o===null||o.includes("/"))return!1;let l=String(o);return/[0-9]$/.test(l)}var L=o=>/%$/.test(o),p=o=>{if(o!==void 0)return L(o)?o:E(o)?`${o}px`:o},i={xs:"--spacing-xs",s:"--spacing-s",m:"--spacing-m",l:"--spacing-l",xl:"--spacing-xl"};function S(o){let l="";for(let[s,u]of Object.entries(M)){s!=="default"&&(l+=`${u} {
-`);let r="";for(let[h,g]of Object.entries(o[s]))g!=null&&(r+=`${h}: ${g};
-`);l+=`:host {
-    ${r.trim()}
-    }
-`,s!=="default"&&(l+=`}
-`)}return l}var w=d`
-:host([flex="0"]) {
-  flex: 0;
-}
-:host([flex="1"]) {
-  flex: 1;
-}
-:host([flex="2"]) {
-  flex: 2;
-}
-:host([flex="3"]) {
-  flex: 3;
-}
-:host([flex="4"]) {
-  flex: 4;
-}
-:host([flex="5"]) {
-  flex: 5;
-}
-:host([flex="6"]) {
-  flex: 6;
-}
-:host([flex="7"]) {
-  flex: 7;
-}
-:host([flex="8"]) {
-  flex: 8;
-}
-:host([flex="9"]) {
-  flex: 9;
-}
-:host([flex="10"]) {
-  flex: 10;
-}
-:host([flex="11"]) {
-  flex: 11;
-}
-:host([flex="12"]) {
-  flex: 12;
-}
-`;var O={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom"},H={mt:i,mr:i,mb:i,ml:i,m:i,mh:i,mv:i},I={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button"},T=f(O,H,I);var U=({render:o,html:l})=>{let s=new CSSStyleSheet;return s.replaceSync(d`
-    :host {
-      display: contents;
-    }
-    slot {
-      display: contents;
-    }
-
-    button {
-      border-style: solid;
-      padding: 0px;
-      font-size: var(--typography-body-s-font-size);
-      font-weight: var(--typography-body-s-font-weight);
-      line-height: var(--typography-body-s-line-height);
-      letter-spacing: var(--typography-body-s-letter-spacing);
-    }
-
-    button:hover {
-      cursor: pointer;
-    }
-
-    :host([t="ps"]) button,
-    :host([t="p"]) button,
-    :host([t="pl"]) button {
-      color: var(--color-on-primary);
-      border-color: var(--color-primary);
-      background-color: var(--color-primary);
-    }
-
-    :host([t="ps"]) button:hover,
-    :host([t="p"]) button:hover,
-    :host([t="pl"]) button:hover {
-      border-color: var(--color-primary-hover);
-      background-color: var(--color-primary-hover);
-    }
-
-    :host([t="ps"]) button:active,
-    :host([t="p"]) button:active,
-    :host([t="pl"]) button:active {
-      border-color: var(--color-primary-active);
-      background-color: var(--color-primary-active);
-    }
-
-    :host([t="ss"]) button,
-    :host([t="s"]) button,
-    :host([t="sl"]) button {
-      color: var(--color-on-secondary);
-      border-color: var(--color-secondary);
-      background-color: var(--color-secondary);
-    }
-
-    :host([t="ss"]) button:hover,
-    :host([t="s"]) button:hover,
-    :host([t="sl"]) button:hover {
-      background-color: var(--color-secondary-hover);
-      border-color: var(--color-secondary-hover);
-    }
-
-    :host([t="ss"]) button:active,
-    :host([t="s"]) button:active,
-    :host([t="sl"]) button:active {
-      background-color: var(--color-secondary-active);
-      border-color: var(--color-secondary-active);
-    }
-
-    :host([t="es"]) button,
-    :host([t="e"]) button,
-    :host([t="el"]) button {
-      color: var(--color-on-error);
-      border-color: var(--color-error);
-      background-color: var(--color-error);
-    }
-
-    :host([t="es"]) button:hover,
-    :host([t="e"]) button:hover,
-    :host([t="el"]) button:hover {
-      background-color: var(--color-error-hover);
-      border-color: var(--color-error-hover);
-    }
-
-    :host([t="es"]) button:active,
-    :host([t="e"]) button:active,
-    :host([t="el"]) button:active {
-      background-color: var(--color-error-active);
-      border-color: var(--color-error-active);
-    }
-
-    :host([t="ns"]) button,
-    :host([t="n"]) button,
-    :host([t="nl"]) button {
-      color: var(--color-on-surface);
-      border-color: var(--color-surface-container);
-      background-color: var(--color-surface-container);
-    }
-
-    :host([t="ns"]) button:hover,
-    :host([t="n"]) button:hover,
-    :host([t="nl"]) button:hover {
-      background-color: var(--color-surface-container-high);
-      border-color: var(--color-surface-container-high);
-    }
-
-    :host([t="ns"]) button:active,
-    :host([t="n"]) button:active,
-    :host([t="nl"]) button:active {
-      background-color: var(--color-surface-container-high);
-      border-color: var(--color-surface-container-high);
-    }
-
-    :host([t="ps"]) button,
-    :host([t="ss"]) button,
-    :host([t="es"]) button,
-    :host([t="ns"]) button {
-      height: var(--button-height-s);
-      padding-left: var(--button-padding-horizontal-s);
-      padding-right: var(--button-padding-horizontal-s);
-      border-radius: var(--button-border-radius-s);
-    }
-
-    :host([t="p"]) button,
-    :host([t="s"]) button,
-    :host([t="e"]) button,
-    :host([t="n"]) button {
-      height: var(--button-height-m);
-      padding-left: var(--button-padding-horizontal-m);
-      padding-right: var(--button-padding-horizontal-m);
-      border-radius: var(--button-border-radius-m);
-    }
-
-    :host([t="pl"]) button,
-    :host([t="sl"]) button,
-    :host([t="el"]) button,
-    :host([t="nl"]) button {
-      height: var(--button-height-l);
-      padding-left: var(--button-padding-horizontal-l);
-      padding-right: var(--button-padding-horizontal-l);
-      border-radius: var(--button-border-radius-l);
-      font-size: var(--typography-label-l-font-size);
-      font-weight: var(--typography-label-l-font-weight);
-      line-height: var(--typography-label-l-line-height);
-      letter-spacing: var(--typography-label-l-letter-spacing);
-    }
-    ${T}
-    ${w}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s],o(this.shadow,this.render)}static get observedAttributes(){return["key","href","target","w","t"]}_buttonRef={};_assingRef=r=>{this._buttonRef.current=r;let h=p(this.getAttribute("w"));h==="f"?this._buttonRef.current.style.width="100%":h!=null&&(this._buttonRef.current.style.width=h)};attributeChangedCallback(r,h,g){if(!this._buttonRef.current)return;let t=p(this.getAttribute("w"));t==="f"?this._buttonRef.current.style.width="100%":t!=null&&(this._buttonRef.current.style.width=t,this._buttonRef.current.style.minWidth=t,this._buttonRef.current.style.maxWidth=t),o(this.shadow,this.render)}render=()=>this.getAttribute("href")?l`
-          <a
-            href=${this.getAttribute("href")}
-            target=${this.getAttribute("target")}
-          >
-            <button>
-              <slot></slot>
-            </button>
-          </a>
-        `:l`
-        <button ref=${this._assingRef}>
-          <slot></slot>
-        </button>
-      `}};var k=d`
-
-  :host([d="h"]) {
-    flex-direction: row;
-  }
-  :host(:not([d])) {
-    flex-direction: column;
-  }
-  :host([d="h"]:not([ah])) {
-    justify-content: flex-start;
-  }
-  :host([d="h"][ah="c"]) {
-    justify-content: center;
-    /* align-content: center; */
-  }
-  :host([d="h"][ah="e"]) {
-    justify-content: flex-end;
-  }
-  :host([d="h"]:not([av])) {
-    align-items: flex-start;
-  }
-  :host([d="h"][av="c"]) {
-    align-items: center;
-    align-content: center;
-  }
-  :host([d="h"][av="e"]) {
-    align-items: flex-end;
-    align-content: flex-end;
-  }
-  :host(:not([d]):not([ah])) {
-    align-items: flex-start;
-  }
-  :host(:not([d])[ah="c"]) {
-    align-items: center;
-    align-content: center;
-  }
-  :host(:not([d])[ah="e"]) {
-    align-items: flex-end;
-    align-content: flex-end;
-  }
-  :host(:not([d]):not([av])) {
-    justify-content: flex-start;
-  }
-  :host(:not([d])[av="c"]) {
-    justify-content: center;
-  }
-  :host(:not([d])[av="e"]) {
-    justify-content: flex-end;
-  }
-  @media screen and (max-width: 640px) {
-    :host([s-d="v"]) {
-      flex-direction: column;
-    }
-    :host([s-d="h"]) {
-      flex-direction: row;
-    }
-    :host([s-d="h"][s-av="c"]) {
-      align-items: center;
-      align-content: center;
-    }
-    :host([s-d="v"][s-av="c"]) {
-      justify-content: center;
-    }
-  }
-`;var P={cur:"cursor"},B={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},y=f(P,B);var C=d`
-:host([sh]:not([sv])) {
-    overflow-x: scroll;
-    flex-wrap: nowrap;
-}
-:host([sv]:not([sh])) {
-    overflow-y: scroll;
-    flex-wrap: nowrap;
-}
-:host([sh][sv]) {
-    overflow: scroll;
-    flex-wrap: nowrap;
-}
-:host([overflow="hidden"]) {
-    overflow: hidden;
-    flex-wrap: nowrap;
-}
-
-`;var _={xs:"--border-width-xs",s:"--border-width-s",m:"--border-width-m",l:"--border-width-l",xl:"--border-width-xl"},D={pos:"position",shadow:"box-shadow",pt:"padding-top",pr:"padding-right",pb:"padding-bottom",pl:"padding-left",p:"padding",ph:"padding-left padding-right",pv:"padding-top padding-bottom",g:"gap",gv:"row-gap",gh:"column-gap",bw:"border-width",bwt:"border-top-width",bwr:"border-right-width",bwb:"border-bottom-width",bwl:"border-left-width",bc:"border-color",br:"border-radius"},Q={bgc:{p:`
-    background-color: var(--color-primary);
-    color: var(--color-on-primary);
-    `,pc:`
-    background-color: var(--color-primary-container);
-    color: var(--color-on-primary-container);
-    `,s:`
-    background-color: var(--color-secondary);
-    color: var(--color-on-secondary);
-    `,sc:`
-    background-color: var(--color-secondary-container);
-    color: var(--color-on-secondary-container);
-    `,e:`
-    background-color: var(--color-error);
-    color: var(--color-on-error);
-    `,ec:`
-    background-color: var(--color-error-container);
-    color: var(--color-on-error-container);
-    `,su:`
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
-    `,sucl:`
-    background-color: var(--color-surface-container-low);
-    color: var(--color-on-surface);
-    `,suc:`
-    background-color: var(--color-surface-container);
-    color: var(--color-on-surface);
-    `,such:`
-    background-color: var(--color-surface-container-high);
-    color: var(--color-on-surface);
-    `,isu:`
-    background-color: var(--color-inverse-surface);
-    color: var(--color-inverse-on-surface);
-    `,o:`
-    background-color: var(--color-outline);
-    `,ov:`
-    background-color: var(--color-outline-variant);
-    `},pos:{rel:"relative",abs:"absolute",fix:"fixed"},cor:{full:`
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: 100%;
-        `,top:`
-        top: 0;
-        right: 0;
-        left: 0;
-        `,right:`
-        top: 0;
-        right: 0;
-        bottom: 0;
-        height: 100%;
-        `,bottom:`
-        right: 0;
-        bottom: 0;
-        left: 0;
-        `,left:`
-        bottom: 0;
-        left: 0;
-        top: 0;
-        height: 100%;
-        `},shadow:{s:"--shadow-s",m:"--shadow-m",l:"--shadow-l"},pt:i,pr:i,pb:i,pl:i,p:i,ph:i,pv:i,g:i,gv:i,gh:i,bw:_,bwt:_,bwr:_,bwb:_,bwl:_,bc:{p:"--color-primary",pc:"--color-primary-container",s:"--color-secondary",sc:"--color-secondary-container",e:"--color-error",ec:"--color-error-container",su:"--color-surface",sucl:"--color-surface-container-low",suc:"--color-surface-container",such:"--color-surface-container-high",isu:"--color-inverse-surface",o:"--color-outline",ov:"--color-outline-variant"},br:{xs:"--border-radius-xs",s:"--border-radius-s",m:"--border-radius-m",l:"--border-radius-l",xl:"--border-radius-xl",f:"50%"}},$=f(D,Q);var F={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom"},G={mt:i,mr:i,mb:i,ml:i,m:i,mh:i,mv:i},x=f(F,G);var N=({render:o,html:l})=>{let s=new CSSStyleSheet;return s.replaceSync(d`
-    slot {
-      display: contents;
-    }
-    :host {
-      display: flex;
-      align-self: auto;
-      align-content: flex-start;
-      flex-wrap: wrap;
-      border-style: solid;
-      border-width: 0;
-      box-sizing: border-box;
-    }
-    :host([stretch]) {
-      align-self: stretch;
-    }
-    ${w}
-    ${C}
-  ${k}
-  ${x}
-  ${y}
-  ${$}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s],o(this.shadow,this.render)}static get observedAttributes(){return["key","wh","w","h","hidden","s-w","s-h","s-d"]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};attributeChangedCallback(r,h,g){["default","sm","md","lg","xl"].forEach(t=>{let e=v=>`${t==="default"?"":`${t}-`}${v}`,n=this.getAttribute(e("wh")),a=p(n===null?this.getAttribute(e("w")):n),c=p(n===null?this.getAttribute(e("h")):n),b=this.getAttribute(e("o")),m=this.getAttribute(e("z"));m!==null&&(this._styles[t]["z-index"]=m),b!==null&&(this._styles[t].opacity=b),a==="f"?this._styles[t].width="100%":a!==void 0&&(this._styles[t].width=a,this._styles[t]["min-width"]=a,this._styles[t]["max-width"]=a),c==="f"?this._styles[t].height="100%":c!==void 0&&(this._styles[t].height=c,this._styles[t]["min-height"]=c,this._styles[t]["max-height"]=c),this.hasAttribute(e("hidden"))&&(this._styles[t].display="none !important"),this.hasAttribute(e("visible"))&&(this._styles[t].display="flex !important")}),o(this.shadow,this.render)}render=()=>l`
-        <style>
-          ${S(this._styles)}
-        </style>
-        <slot></slot>
-      `}};var q={at:"text-align"},J={at:{c:"center",e:"right",j:"justify"},s:{dm:`
-        font-size: var(--typography-display-m-font-size);
-        font-weight: var(--typography-display-m-font-weight);
-        line-height: var(--typography-display-m-line-height);
-        letter-spacing: var(--typography-display-m-letter-spacing);
-      `,hm:`
-        font-size: var(--typography-headline-m-font-size);
-        font-weight: var(--typography-headline-m-font-weight);
-        line-height: var(--typography-headline-m-line-height);
-        letter-spacing: var(--typography-headline-m-letter-spacing);
-      `,tl:`
-        font-size: var(--typography-title-l-font-size);
-        font-weight: var(--typography-title-l-font-weight);
-        line-height: var(--typography-title-l-line-height);
-        letter-spacing: var(--typography-title-l-letter-spacing);
-      `,tm:`
-        font-size: var(--typography-title-m-font-size);
-        font-weight: var(--typography-title-m-font-weight);
-        line-height: var(--typography-title-m-line-height);
-        letter-spacing: var(--typography-title-m-letter-spacing);
-      `,ts:`
-        font-size: var(--typography-title-s-font-size);
-        font-weight: var(--typography-title-s-font-weight);
-        line-height: var(--typography-title-s-line-height);
-        letter-spacing: var(--typography-title-s-letter-spacing);
-      `,bl:`
-        font-size: var(--typography-body-l-font-size);
-        font-weight: var(--typography-body-l-font-weight);
-        line-height: var(--typography-body-l-line-height);
-        letter-spacing: var(--typography-body-l-letter-spacing);
-      `,bm:`
-        font-size: var(--typography-body-m-font-size);
-        font-weight: var(--typography-body-m-font-weight);
-        line-height: var(--typography-body-m-line-height);
-        letter-spacing: var(--typography-body-m-letter-spacing);
-      `,bs:`
-        font-size: var(--typography-body-s-font-size);
-        font-weight: var(--typography-body-s-font-weight);
-        line-height: var(--typography-body-s-line-height);
-        letter-spacing: var(--typography-body-s-letter-spacing);
-      `,ll:`
-        font-size: var(--typography-label-l-font-size);
-        font-weight: var(--typography-label-l-font-weight);
-        line-height: var(--typography-label-l-line-height);
-        letter-spacing: var(--typography-label-l-letter-spacing);
-      `,lm:`
-        font-size: var(--typography-label-m-font-size);
-        font-weight: var(--typography-label-m-font-weight);
-        line-height: var(--typography-label-m-line-height);
-        letter-spacing: var(--typography-label-m-letter-spacing);
-      `}},W=f(q,J);var K={c:"color"},X={c:{"on-p":"--color-on-primary","on-pc":"--color-on-primary-container","on-s":"--color-on-secondary","on-sc":"--color-on-secondary-container","on-su":"--color-on-surface","on-su-v":"--color-on-surface-variant","i-on-su":"--color-inverse-on-surface","on-e":"--color-on-error","on-ec":"--color-on-error-container"}},A=f(K,X);var Y=({render:o,html:l})=>{let s=new CSSStyleSheet;s.replaceSync(d`
-    :host {
-      display: block;
-    }
-    slot {
-      display: contents;
-    }
-    :host ::slotted(a) {
-      text-decoration: var(--anchor-text-decoration);
-      color: var(--anchor-color);
-    }
-    :host ::slotted(a:hover) {
-      text-decoration: var(--anchor-text-decoration-hover);
-      color: var(--anchor-color-hover);
-    }
-    ${W}
-    ${A}
-${x}
-${y}
-  `);class u extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s]}static get observedAttributes(){return["key","w","ellipsis"]}connectedCallback(){o(this.shadow,this.render)}attributeChangedCallback(h,g,t){let e=p(this.getAttribute("w"));this.hasAttribute("ellipsis")&&(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"),e==="f"?this.style.width="100%":e!==void 0&&(this.style.width=e),o(this.shadow,this.render)}render=()=>l` <slot></slot> `}return u};var Z=({render:o,html:l})=>{let s=new CSSStyleSheet;return s.replaceSync(d`
-    :host {
-      border-style: solid;
-      box-sizing: border-box;
-      overflow: hidden;
-      border-width: 0;
-    }
-    slot {
-      display: contents;
-    }
-    :host([of="con"]) img {
-      object-fit: contain;
-    }
-    :host([of="cov"]) img {
-      object-fit: cover;
-    }
-    :host([of="none"]) img {
-      object-fit: none;
-    }
-    img {
-      height: 100%;
-      width: 100%;
-    }
-    ${$}
-    ${x}
-${y}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};static get observedAttributes(){return["key","src","wh","w","h","hidden","height","width","s-wh","s-w","s-h"]}connectedCallback(){o(this.shadow,this.render)}attributeChangedCallback(r,h,g){["default","sm","md","lg","xl"].forEach(t=>{let e=v=>`${t==="default"?"":`${t}-`}${v}`,n=this.getAttribute(e("wh")),a=p(n===null?this.getAttribute(e("w")):n),c=p(n===null?this.getAttribute(e("h")):n),b=this.getAttribute(e("o")),m=this.getAttribute(e("z"));m!==null&&(this._styles[t].zIndex=m),b!==null&&(this._styles[t].opacity=b),a==="f"?this._styles[t].width="100%":a!==void 0&&(this._styles[t].width=a,this._styles[t]["min-width"]=a,this._styles[t]["max-width"]=a),c==="f"?this._styles[t].height="100%":c!==void 0&&(this._styles[t].height=c,this._styles[t]["min-height"]=c,this._styles[t]["max-height"]=c)}),o(this.shadow,this.render)}render=()=>l`
-        <style>
-          ${S(this._styles)}
-        </style>
-        <img
-          src="${this.getAttribute("src")}"
-          width="${this.getAttribute("width")}"
-          height="${this.getAttribute("height")}"
-        />
-      `}};var V=d`
-:host([pt="xs"]) svg {
-  padding-top: var(--spacing-xs);
-}
-:host([pt="s"]) svg {
-  padding-top: var(--spacing-s);
-}
-:host([pt="m"]) svg {
-  padding-top: var(--spacing-m);
-}
-:host([pt="l"]) svg {
-  padding-top: var(--spacing-l);
-}
-:host([pt="xl"]) svg {
-  padding-top: var(--spacing-xl);
-}
-:host([pr="xs"]) svg {
-  padding-right: var(--spacing-xs);
-}
-:host([pr="s"]) svg {
-  padding-right: var(--spacing-s);
-}
-:host([pr="m"]) svg {
-  padding-right: var(--spacing-m);
-}
-:host([pr="l"]) svg {
-  padding-right: var(--spacing-l);
-}
-:host([pr="xl"]) svg {
-  padding-right: var(--spacing-xl);
-}
-:host([pb="xs"]) svg {
-  padding-bottom: var(--spacing-xs);
-}
-:host([pb="s"]) svg {
-  padding-bottom: var(--spacing-s);
-}
-:host([pb="m"]) svg {
-  padding-bottom: var(--spacing-m);
-}
-:host([pb="l"]) svg {
-  padding-bottom: var(--spacing-l);
-}
-:host([pb="xl"]) svg {
-  padding-bottom: var(--spacing-xl);
-}
-:host([pl="xs"]) svg {
-  padding-left: var(--spacing-xs);
-}
-:host([pl="s"]) svg {
-  padding-left: var(--spacing-s);
-}
-:host([pl="m"]) svg {
-  padding-left: var(--spacing-m);
-}
-:host([pl="l"]) svg {
-  padding-left: var(--spacing-l);
-}
-:host([pl="xl"]) svg {
-  padding-left: var(--spacing-xl);
-}
-:host([p="xs"]) svg {
-  padding: var(--spacing-xs);
-}
-:host([p="s"]) svg {
-  padding: var(--spacing-s);
-}
-:host([p="m"]) svg {
-  padding: var(--spacing-m);
-}
-:host([p="l"]) svg {
-  padding: var(--spacing-l);
-}
-:host([p="xl"]) svg {
-  padding: var(--spacing-xl);
-}
-:host([ph="xs"]) svg {
-  padding-left: var(--spacing-xs);
-  padding-right: var(--spacing-xs);
-}
-:host([ph="s"]) svg {
-  padding-left: var(--spacing-s);
-  padding-right: var(--spacing-s);
-}
-:host([ph="m"]) svg {
-  padding-left: var(--spacing-m);
-  padding-right: var(--spacing-m);
-}
-:host([ph="l"]) svg {
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing-l);
-}
-:host([ph="xl"]) svg {
-  padding-left: var(--spacing-xl);
-  padding-right: var(--spacing-xl);
-}
-:host([pv="xs"]) svg {
-  padding-top: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
-}
-:host([pv="s"]) svg {
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
-}
-:host([pv="m"]) svg {
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
-}
-:host([pv="l"]) svg {
-  padding-top: var(--spacing-l);
-  padding-bottom: var(--spacing-l);
-}
-:host([pv="xl"]) svg {
-  padding-top: var(--spacing-xl);
-  padding-bottom: var(--spacing-xl);
-}
-`;var tt=({render:o,html:l})=>{let s=new CSSStyleSheet;return s.replaceSync(d`
-    ${A}
-    ${V}
-${w}
-${y}
-  `),class R extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s]}static _icons={};static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return R._icons}static addIcon(r,h){R._icons[r]=h}connectedCallback(){this.render()}attributeChangedCallback(r,h,g){let t=this.getAttribute("wh"),e=p(t===null?this.getAttribute("w"):t),n=p(t===null?this.getAttribute("h"):t);e&&(this.style.width=e),n&&(this.style.height=n),this.render()}render=()=>{try{let r=this.getAttribute("svg"),h=R._icons[r]||(window.rtglIcons||{})[r];if(h){this.shadow.innerHTML=h;return}}catch(r){console.log("error in rtgl-svg render",r)}this.shadow.innerHTML=""}}};var ot=({render:o,html:l})=>{let s=new CSSStyleSheet;return s.replaceSync(d`
-    slot {
-      display: contents;
-    }
-    :host([hidden]) {
-      display: none;
-    }
-    :host {
-      display: flex;
-      align-self: auto;
-      align-content: flex-start;
-      flex-wrap: wrap;
-      border-style: solid;
-      border-width: 0;
-      box-sizing: border-box;
-    }
-    :host([stretch]) {
-      align-self: stretch;
-    }
-    ${w}
-    ${C}
-  ${k}
-  ${x}
-  ${y}
-  ${$}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s]}connectedCallback(){o(this.shadow,this.render)}static get observedAttributes(){return["key","wh","w","h","hidden","s-w","s-h","s-d"]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};attributeChangedCallback(r,h,g){["default","sm","md","lg","xl"].forEach(t=>{let e=v=>`${t==="default"?"":`${t}-`}${v}`,n=this.getAttribute(e("wh")),a=p(n===null?this.getAttribute(e("w")):n),c=p(n===null?this.getAttribute(e("h")):n),b=this.getAttribute(e("o")),m=this.getAttribute(e("z"));m!==null&&(this._styles[t]["z-index"]=m),b!==null&&(this._styles[t].opacity=b),a==="f"?this._styles[t].width="100%":a!==void 0&&(this._styles[t].width=a,this._styles[t]["min-width"]=a,this._styles[t]["max-width"]=a),c==="f"?this._styles[t].height="100%":c!==void 0&&(this._styles[t].height=c,this._styles[t]["min-height"]=c,this._styles[t]["max-height"]=c),this.hasAttribute("hidden")&&(this._styles[t].display="none")}),setTimeout(()=>{o(this.shadow,this.render)},0)}render=()=>l`
-        <style>
-          ${S(this._styles)}
-        </style>
-        <slot name="top"></slot>
-        ${this.items?.map((r,h)=>(typeof this.itemsRenderer=="function"?this.itemsRenderer:this.itemsRenderer.maps[r[this.itemsRenderer.key]])(r,h))}
-        <slot name="bottom"></slot>
-      `}};export{U as RettangoliButton,Z as RettangoliImage,ot as RettangoliListView,tt as RettangoliSvg,Y as RettangoliText,N as RettangoliView};