rettangoli-ui 0.0.8-rc2 → 0.0.9-rc2

package/dist/rettangoli-esm.min.js

@@ -0,0 +1,648 @@
+function d(o,...l){let s="";return o.forEach((u,e)=>{s+=u+(l[e]||"")}),s}var M={default:void 0,s:"@media only screen and (max-width: 640px)"},f=(o,l,s={})=>{let u="";for(let[e,h]of Object.entries(M)){e!=="default"&&(u+=`${h} {`);for(let[g,t]of Object.entries(l)){let r=s[g]?` ${s[g]} `:" ";for(let[n,a]of Object.entries(t)){let c=o[g],m=a.startsWith("--")?`var(${a})`:a,b=e==="default"?g:`${e}-${g}`,y=e==="default"?`h-${g}`:`${e}-h-${g}`;if(c){let j=c.split(" ").map(z=>`${z}: ${m};`).join(" ");u+=`
+            :host([${b}="${n}"])${r}{
+              ${j}
+            }
+            :host([${y}="${n}"]:hover)${r}{
+              ${j}
+            }
+          `}else u+=`
+            :host([${b}="${n}"])${r}{
+              ${a}
+            }
+            :host([${y}="${n}"]:hover)${r}{
+              ${a}
+            }
+          `}}e!=="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 e="";for(let[h,g]of Object.entries(o[s]))g!=null&&(e+=`${h}: ${g};
+`);l+=`:host {
+    ${e.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=e=>{this._buttonRef.current=e;let h=p(this.getAttribute("w"));h==="f"?this._buttonRef.current.style.width="100%":h!=null&&(this._buttonRef.current.style.width=h)};attributeChangedCallback(e,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"}},v=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([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}
+  ${v}
+  ${$}
+  `),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:{},s:{}};attributeChangedCallback(e,h,g){["default","s"].forEach(t=>{let r=y=>`${t==="default"?"":`${t}-`}${y}`,n=this.getAttribute(r("wh")),a=p(n===null?this.getAttribute(r("w")):n),c=p(n===null?this.getAttribute(r("h")):n),m=this.getAttribute(r("o")),b=this.getAttribute(r("z"));b!==null&&(this._styles[t]["z-index"]=b),m!==null&&(this._styles[t].opacity=m),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")}),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}
+${v}
+  `);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 r=p(this.getAttribute("w"));this.hasAttribute("ellipsis")&&(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"),r==="f"?this.style.width="100%":r!==void 0&&(this.style.width=r),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}
+${v}
+  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[s]}_styles={default:{},s:{}};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(e,h,g){["default","s"].forEach(t=>{let r=y=>`${t==="default"?"":`${t}-`}${y}`,n=this.getAttribute(r("wh")),a=p(n===null?this.getAttribute(r("w")):n),c=p(n===null?this.getAttribute(r("h")):n),m=this.getAttribute(r("o")),b=this.getAttribute(r("z"));b!==null&&(this._styles[t].zIndex=b),m!==null&&(this._styles[t].opacity=m),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}
+${v}
+  `),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(e,h){R._icons[e]=h}connectedCallback(){this.render()}attributeChangedCallback(e,h,g){let t=this.getAttribute("wh"),r=p(t===null?this.getAttribute("w"):t),n=p(t===null?this.getAttribute("h"):t);r&&(this.style.width=r),n&&(this.style.height=n),this.render()}render=()=>{try{let e=this.getAttribute("svg"),h=R._icons[e]||(window.rtglIcons||{})[e];if(h){this.shadow.innerHTML=h;return}}catch(e){console.log("error in rtgl-svg render",e)}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}
+  ${v}
+  ${$}
+  `),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:{},s:{}};attributeChangedCallback(e,h,g){["default","s"].forEach(t=>{let r=y=>`${t==="default"?"":`${t}-`}${y}`,n=this.getAttribute(r("wh")),a=p(n===null?this.getAttribute(r("w")):n),c=p(n===null?this.getAttribute(r("h")):n),m=this.getAttribute(r("o")),b=this.getAttribute(r("z"));b!==null&&(this._styles[t]["z-index"]=b),m!==null&&(this._styles[t].opacity=m),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((e,h)=>(typeof this.itemsRenderer=="function"?this.itemsRenderer:this.itemsRenderer.maps[e[this.itemsRenderer.key]])(e,h))}
+        <slot name="bottom"></slot>
+      `}};export{U as RettangoliButton,Z as RettangoliImage,ot as RettangoliListView,tt as RettangoliSvg,Y as RettangoliText,N as RettangoliView};