rettangoli-ui 0.1.0-rc1 → 0.1.0-rc3

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

@@ -1,24 +1,24 @@
-var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDescriptor:Wt}=Object,y=[],nt=()=>document.createRange(),E=(e,t,r)=>(e.set(t,r),r),Ot=(e,t)=>t.reduceRight(Et,e),Et=(e,t)=>e.childNodes[t],{setPrototypeOf:zt}=Object,k,at=(e,t,r)=>(k||(k=nt()),r?k.setStartAfter(e):k.setStartBefore(e),k.setEndAfter(t),k.deleteContents(),e),J=({firstChild:e,lastChild:t},r)=>at(e,t,r),lt=!1,Q=(e,t)=>lt&&e.nodeType===11?1/t<0?t?J(e,!0):e.lastChild:t?e.valueOf():e.firstChild:e,et=e=>document.createComment(e),X=class extends(t=>{function r(n){return zt(n,new.target.prototype)}return r.prototype=t.prototype,r})(DocumentFragment){#e=et("<>");#r=et("</>");#t=y;constructor(t){super(t),this.replaceChildren(this.#e,...t.childNodes,this.#r),lt=!0}get firstChild(){return this.#e}get lastChild(){return this.#r}get parentNode(){return this.#e.parentNode}remove(){J(this,!1)}replaceWith(t){J(this,!0).replaceWith(t)}valueOf(){let{parentNode:t}=this;if(t===this)this.#t===y&&(this.#t=[...this.childNodes]);else{if(t){let{firstChild:r,lastChild:n}=this;for(this.#t=[r];r!==n;)this.#t.push(r=r.nextSibling)}this.replaceChildren(...this.#t)}return this}},ht=(e,t,r)=>e.setAttribute(t,r),I=(e,t)=>e.removeAttribute(t),T,Nt=(e,t,r)=>{r=r.slice(1),T||(T=new WeakMap);let n=T.get(e)||E(T,e,{}),o=n[r];return o&&o[0]&&e.removeEventListener(r,...o),o=it(t)?t:[t,!1],n[r]=o,o[0]&&e.addEventListener(r,...o),t},z=(e,t)=>{let{t:r,n}=e,o=!1;switch(typeof t){case"object":if(t!==null){(n||r).replaceWith(e.n=t.valueOf());break}case"undefined":o=!0;default:r.data=o?"":t,n&&(e.n=null,n.replaceWith(r))}return t},L=(e,t,r)=>e[r]=t,Tt=(e,t,r)=>L(e,t,r.slice(1)),Y=(e,t,r)=>t==null?(I(e,r),t):L(e,t,r),ct=(e,t)=>(typeof t=="function"?t(e):t.current=e,t),G=(e,t,r)=>(t==null?I(e,r):ht(e,r,t),t),Bt=(e,t,r)=>(e.toggleAttribute(r.slice(1),t),t),V=(e,t,r)=>{let{length:n}=t;if(e.data=`[${n}]`,n)return((o,i,l,s,d)=>{let p=l.length,g=i.length,h=p,a=0,c=0,u=null;for(;a<g||c<h;)if(g===a){let m=h<p?c?s(l[c-1],-0).nextSibling:s(l[h],0):d;for(;c<h;)o.insertBefore(s(l[c++],1),m)}else if(h===c)for(;a<g;)u&&u.has(i[a])||o.removeChild(s(i[a],-1)),a++;else if(i[a]===l[c])a++,c++;else if(i[g-1]===l[h-1])g--,h--;else if(i[a]===l[h-1]&&l[c]===i[g-1]){let m=s(i[--g],-0).nextSibling;o.insertBefore(s(l[c++],1),s(i[a++],-0).nextSibling),o.insertBefore(s(l[--h],1),m),i[g]=l[h]}else{if(!u){u=new Map;let m=c;for(;m<h;)u.set(l[m],m++)}if(u.has(i[a])){let m=u.get(i[a]);if(c<m&&m<h){let w=a,R=1;for(;++w<g&&w<h&&u.get(i[w])===m+R;)R++;if(R>m-c){let F=s(i[a],0);for(;c<m;)o.insertBefore(s(l[c++],1),F)}else o.replaceChild(s(l[c++],1),s(i[a++],-1))}else a++}else o.removeChild(s(i[a++],-1))}return l})(e.parentNode,r,t,Q,e);switch(r.length){case 1:r[0].remove();case 0:break;default:at(Q(r[0],0),Q(r.at(-1),-0),!1)}return y},Vt=new Map([["aria",(e,t)=>{for(let r in t){let n=t[r],o=r==="role"?r:`aria-${r}`;n==null?I(e,o):ht(e,o,n)}return t}],["class",(e,t)=>Y(e,t,t==null?"class":"className")],["data",(e,t)=>{let{dataset:r}=e;for(let n in t)t[n]==null?delete r[n]:r[n]=t[n];return t}],["ref",ct],["style",(e,t)=>t==null?Y(e,t,"style"):L(e.style,t,"cssText")]]),It=(e,t,r)=>{switch(t[0]){case".":return Tt;case"?":return Bt;case"@":return Nt;default:return r||"ownerSVGElement"in e?t==="ref"?ct:G:Vt.get(t)||(t in e?t.startsWith("on")?L:((n,o)=>{let i;do i=Wt(n,o);while(!i&&(n=Rt(n)));return i})(e,t)?.set?Y:G:G)}},Lt=(e,t)=>(e.textContent=t??"",t),O=(e,t,r)=>({a:e,b:t,c:r}),C=()=>O(null,null,y),dt=e=>(t,r)=>{let{a:n,b:o,c:i}=e(t,r),l=document.importNode(n,!0),s=y;if(o!==y){s=[];for(let a,c,u=0;u<o.length;u++){let{a:m,b:w,c:R}=o[u],F=m===c?a:a=Ot(l,c=m);s[u]=(d=w,p=F,g=R,h=w===V?[]:w===z?C():null,{v:y,u:d,t:p,n:g,c:h})}}var d,p,g,h;return((a,c)=>({b:a,c}))(i?l.firstChild:new X(l),s)},Dt=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Ht=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,Pt=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,Ut=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,Ft=/[\x01\x02]/g,K,Z,B=document.createElement("template"),Qt=(e,t)=>{if(t)return K||(K=document.createElementNS("http://www.w3.org/2000/svg","svg"),Z=nt(),Z.selectNodeContents(K)),Z.createContextualFragment(e);B.innerHTML=e;let{content:r}=B;return B=B.cloneNode(!1),r},q=e=>{let t=[],r;for(;r=e.parentNode;)t.push(t.indexOf.call(r.childNodes,e)),e=r;return t},rt=()=>document.createTextNode(""),Gt=(e,t,r)=>{let n=Qt(((d,p,g)=>{let h=0;return d.join("
").trim().replace(Pt,(a,c,u,m)=>`<${c}${u.replace(Ut,"=$2$1").trimEnd()}${m?g||Ht.test(c)?" /":`></${c}`:""}>`).replace(Ft,a=>a==="
"?`<!--${p+h++}-->`:p+h++)})(e,W,r),r),{length:o}=e,i=y;if(o>1){let d=[],p=document.createTreeWalker(n,129),g=0,h=`${W}${g++}`;for(i=[];g<o;){let a=p.nextNode();if(a.nodeType===8){if(a.data===h){let c=it(t[g-1])?V:z;c===z&&d.push(a),i.push(O(q(a),c,null)),h=`${W}${g++}`}}else{let c;for(;a.hasAttribute(h);){c||(c=q(a));let u=a.getAttribute(h);i.push(O(c,It(a,u,r),u)),I(a,h),h=`${W}${g++}`}!r&&Dt.test(a.localName)&&a.textContent.trim()===`<!--${h}-->`&&(i.push(O(c||q(a),Lt,null)),h=`${W}${g++}`)}}for(g=0;g<d.length;g++)d[g].replaceWith(rt())}let{childNodes:l}=n,{length:s}=l;return s<1?(s=1,n.appendChild(rt())):s===1&&o!==1&&l[0].nodeType!==1&&(s=0),E(gt,e,O(n,i,s===1))},gt=new WeakMap,W="is\xB5",pt=e=>(t,r)=>gt.get(t)||Gt(t,r,e),Kt=dt(pt(!1)),Zt=dt(pt(!0)),tt=(e,{s:t,t:r,v:n})=>{if(e.a!==r){let{b:o,c:i}=(t?Zt:Kt)(r,n);e.a=r,e.b=o,e.c=i}for(let{c:o}=e,i=0;i<o.length;i++){let l=n[i],s=o[i];switch(s.u){case V:s.v=V(s.t,qt(s.c,l),s.v);break;case z:let d=l instanceof $?tt(s.c||(s.c=C()),l):(s.c=null,l);d!==s.v&&(s.v=z(s,d));break;default:l!==s.v&&(s.v=s.u(s.t,l,s.n,s.v))}}return e.b},qt=(e,t)=>{let r=0,{length:n}=t;for(n<e.length&&e.splice(n);r<n;r++){let o=t[r];o instanceof $?t[r]=tt(e[r]||(e[r]=C()),o):e[r]=null}return t},$=class{constructor(t,r,n){this.s=t,this.t=r,this.v=n}toDOM(t=C()){return tt(t,this)}};var ft=e=>(t,...r)=>new $(e,t,r),A=ft(!1),ae=ft(!0),st=new WeakMap,_=(e,t)=>((r,n)=>{let o=st.get(r)||E(st,r,C()),{b:i}=o,l=typeof n=="function"?n():n,s=l instanceof $?l.toDOM(o):l;return i!==s&&r.replaceChildren((o.b=s).valueOf()),r})(e,t),ot=new WeakMap,ut=e=>(t,r)=>{let n=ot.get(t)||E(ot,t,new Map);return n.get(r)||E(n,r,function(o,...i){return new $(e,o,i).toDOM(this)}.bind(C()))},le=ut(!1),he=ut(!0);function v(e,...t){let r="";return e.forEach((n,o)=>{r+=n+(t[o]||"")}),r}var Jt=["xs","sm","md","lg","xl"],mt={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom",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",pos:"position",shadow:"box-shadow",ta:"text-align",c:"color",cur:"cursor"},vt=Object.keys(mt),bt=e=>e.concat(Jt.flatMap(t=>e.map(r=>`${t}-${r}`))),xt={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)"},x=(e,t={})=>{let r="";for(let[n,o]of Object.entries(xt)){n!=="default"&&(r+=`${o} {`);for(let[i,l]of Object.entries(e)){let s=t[i]?` ${t[i]} `:" ";for(let[d,p]of Object.entries(l)){let g=mt[i],h=p.startsWith("--")?`var(${p})`:p,a=n==="default"?i:`${n}-${i}`,c=n==="default"?`h-${i}`:`${n}-h-${i}`;if(g){let m=g.split(" ").map(w=>`${w}: ${h};`).join(" ");r+=`
-            :host([${a}="${d}"])${s}{
-              ${m}
+var rettangoli=(()=>{function l(e,...t){let s="";return e.forEach((r,d)=>{s+=r+(t[d]||"")}),s}var X=["xs","sm","md","lg","xl"],I={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom",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",pos:"position",shadow:"box-shadow",ta:"text-align",c:"color",cur:"cursor"},y=Object.keys(I),x=e=>e.concat(X.flatMap(t=>e.map(s=>`${t}-${s}`))),V={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)"},p=(e,t={})=>{let s="";for(let[r,d]of Object.entries(V)){r!=="default"&&(s+=`${d} {`);for(let[i,n]of Object.entries(e)){let a=t[i]?` ${t[i]} `:" ";for(let[c,h]of Object.entries(n)){let u=I[i],f=h.startsWith("--")?`var(${h})`:h,v=r==="default"?i:`${r}-${i}`,T=r==="default"?`h-${i}`:`${r}-h-${i}`;if(u){let D=u.split(" ").map(J=>`${J}: ${f};`).join(" ");s+=`
+            :host([${v}="${c}"])${a}{
+              ${D}
             }
-            :host([${c}="${d}"]:hover)${s}{
-              ${m}
+            :host([${T}="${c}"]:hover)${a}{
+              ${D}
             }
-          `}else r+=`
-            :host([${a}="${d}"])${s}{
-              ${p}
+          `}else s+=`
+            :host([${v}="${c}"])${a}{
+              ${h}
             }
-            :host([${c}="${d}"]:hover)${s}{
-              ${p}
+            :host([${T}="${c}"]:hover)${a}{
+              ${h}
             }
-          `}}n!=="default"&&(r+="}")}return r};function Xt(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var Yt=e=>/%$/.test(e),b=e=>{if(e!==void 0)return Yt(e)?e:Xt(e)?`${e}px`:Object.keys(f).includes(e)?`var(${f[e]})`:e},f={xs:"--spacing-xs",s:"--spacing-s",m:"--spacing-m",l:"--spacing-l",xl:"--spacing-xl"};function D(e){let t="";for(let[r,n]of Object.entries(xt)){r!=="default"&&(t+=`${n} {
-`);let o="";for(let[i,l]of Object.entries(e[r]))l!=null&&(o+=`${i}: ${l};
-`);t+=`:host {
-    ${o.trim()}
+          `}}r!=="default"&&(s+="}")}return s};function Y(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var Z=e=>/%$/.test(e),g=e=>{if(e!==void 0)return Z(e)?e:Y(e)?`${e}px`:Object.keys(o).includes(e)?`var(${o[e]})`:e},o={xs:"--spacing-xs",sm:"--spacing-sm",md:"--spacing-md",lg:"--spacing-lg",xl:"--spacing-xl"};function w(e,t=":host"){let s="";for(let[r,d]of Object.entries(V)){r!=="default"&&(s+=`${d} {
+`);let i="";for(let[n,a]of Object.entries(e[r]))a!=null&&(i+=`${n}: ${a};
+`);s+=`${t} {
+    ${i.trim()}
     }
-`,r!=="default"&&(t+=`}
-`)}return t}var j=v`
+`,r!=="default"&&(s+=`}
+`)}return s}var S=l`
 :host([flex="0"]) {
   flex: 0;
 }
@@ -58,7 +58,7 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
 :host([flex="12"]) {
   flex: 12;
 }
-`;var te={mt:f,mr:f,mb:f,ml:f,m:f,mh:f,mv:f,s:{sm:`
+`;var tt={mt:o,mr:o,mb:o,ml:o,m:o,mh:o,mv:o,s:{sm:`
     height: 28px;
     padding-left: 12px;
     padding-right: 12px;
@@ -104,141 +104,139 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
     `,lk:`
       background-color: transparent;
       color: var(--foreground);
-    `}},ee={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button",s:"button",v:"button"},wt=x(te,ee);var yt=({render:e,html:t})=>{let r=new CSSStyleSheet;return r.replaceSync(v`
-    :host {
-      display: contents;
-    }
-    slot {
-      display: contents;
-    }
+    `}},et={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button",s:"button",v:"button"},L=p(tt,et);var _=l`
+  a, a:link, a:visited, a:hover, a:active {
+    color: inherit;
+    text-decoration: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+  }
+`;var $=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(l`
+        :host {
+          display: contents;
+        }
+        slot {
+          display: contents;
+        }
 
-    button {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      gap: var(--spacing-s);
-      border-width: 0px;
-      border-style: solid;
-      border-color: var(--border);
-      padding: 0px;
-      height: 32px;
-      padding-left: 16px;
-      padding-right: 16px;
-      border-radius: 4px;
+        button {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: var(--spacing-sm);
+          border-width: 0px;
+          border-style: solid;
+          border-color: var(--border);
+          padding: 0px;
+          height: 32px;
+          padding-left: 16px;
+          padding-right: 16px;
+          border-radius: 4px;
 
-      font-size: var(--sm-font-size);
-      font-weight: var(--sm-font-weight);
-      line-height: var(--sm-line-height);
-      letter-spacing: var(--sm-letter-spacing);
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
 
-      background-color: var(--primary);
-      color: var(--primary-foreground);
-    }
+          background-color: var(--primary);
+          color: var(--primary-foreground);
+        }
 
-    button:hover {
-      cursor: pointer;
-      background-color: color-mix(
-        in srgb,
-        var(--primary) 85%,
-        white 15%
-      );
-    }
+        button:hover {
+          cursor: pointer;
+          background-color: color-mix(
+            in srgb,
+            var(--primary) 85%,
+            white 15%
+          );
+        }
 
-    button:disabled {
-      cursor: not-allowed;
-    }
+        button:disabled {
+          cursor: not-allowed;
+        }
 
-    button:active {
-      cursor: pointer;
-      background-color: color-mix(
-        in srgb,
-        var(--primary) 80%,
-        white 20%
-      );
-    }
+        button:active {
+          cursor: pointer;
+          background-color: color-mix(
+            in srgb,
+            var(--primary) 80%,
+            white 20%
+          );
+        }
 
-    :host([v="pr"]) button:hover {
-      background-color: color-mix(
-          in srgb,
-          var(--primary) 85%,
-          white 15%
-        );
-    }
+        :host([v="pr"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--primary) 85%,
+              white 15%
+            );
+        }
 
-    :host([v="pr"]) button:active {
-      background-color: color-mix(
-          in srgb,
-          var(--primary) 80%,
-          white 20%
-        );
-    }
+        :host([v="pr"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--primary) 80%,
+              white 20%
+            );
+        }
 
-    :host([v="se"]) button:hover {
-      background-color: color-mix(
-          in srgb,
-          var(--secondary) 85%,
-          white 15%
-        );
-    }
+        :host([v="se"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--secondary) 85%,
+              white 15%
+            );
+        }
 
-    :host([v="se"]) button:active {
-      background-color: color-mix(
-          in srgb,
-          var(--secondary) 80%,
-          white 20%
-        );
-    }
+        :host([v="se"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--secondary) 80%,
+              white 20%
+            );
+        }
 
-    :host([v="de"]) button:hover {
-      background-color: color-mix(
-          in srgb,
-          var(--destructive) 85%,
-          white 15%
-        );
-    }
+        :host([v="de"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--destructive) 85%,
+              white 15%
+            );
+        }
 
-    :host([v="de"]) button:active {
-      background-color: color-mix(
-          in srgb,
-          var(--destructive) 80%,
-          white 20%
-        );
-    }
+        :host([v="de"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--destructive) 80%,
+              white 20%
+            );
+        }
 
-    :host([v="ol"]) button:hover {
-      background-color: var(--accent);
-    }
+        :host([v="ol"]) button:hover {
+          background-color: var(--accent);
+        }
 
-    :host([v="gh"]) button:hover {
-      background-color: var(--accent);
-    }
+        :host([v="gh"]) button:hover {
+          background-color: var(--accent);
+        }
 
-    :host([v="lk"]) button:hover {
-      text-decoration: underline;
-    }
+        :host([v="lk"]) button:hover {
+          text-decoration: underline;
+        }
+
+        ${_}
+        
+        a {
+          display: contents;
+        }
 
-    ${wt}
-    ${j}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[r],e(this.shadow,this.render)}static get observedAttributes(){return["key","href","target","w","t","icon","disabled"]}_buttonRef={};_assingRef=o=>{this._buttonRef.current=o;let i=b(this.getAttribute("w"));i==="f"?this._buttonRef.current.style.width="100%":i!=null&&(this._buttonRef.current.style.width=i)};attributeChangedCallback(o,i,l){if(!this._buttonRef.current)return;let s=b(this.getAttribute("w"));s==="f"?this._buttonRef.current.style.width="var(--width-stretch)":s!=null&&(this._buttonRef.current.style.width=s,this._buttonRef.current.style.minWidth=s,this._buttonRef.current.style.maxWidth=s),e(this.shadow,this.render)}renderIcon=()=>{let o=this.getAttribute("icon"),i={pr:"pr-fg",se:"ac-fg",de:"pr-fg",ol:"ac-fg",gh:"ac-fg",lk:"ac-fg"},l={sm:14,md:18,lg:22},s=i[this.getAttribute("v")]||"pr-fg",d=l[this.getAttribute("t")]||18;return o?t`
-        <rtgl-svg svg="${o}" c="${s}" wh="${d}"></rtgl-svg>
-      `:t``};render=()=>{let o=this.hasAttribute("disabled");return this.getAttribute("href")?t`
-          <a
-            href=${this.getAttribute("href")}
-            target=${this.getAttribute("target")}
-            style="text-decoration: none; display: contents; color: inherit;"
-          >
-            <button disabled="${o}">
-              ${this.renderIcon()}
-              <slot></slot>
-            </button>
-          </a>
-        `:t`
-        <button ref=${this._assingRef} disabled="${o}">
-          ${this.renderIcon()}
-          <slot></slot>
-        </button>
-      `}}};var St=v`
+        ${L}
+        ${S}
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._containerElement=null,this._buttonElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._iconElement=null,this._buttonElement.appendChild(this._slotElement)}static get observedAttributes(){return["key","href","target","w","t","icon","disabled","v","s"]}connectedCallback(){this._updateButton()}attributeChangedCallback(t,s,r){this._updateButton()}_updateButton(){this.shadow.innerHTML="",this._updateIcon(),this._updateWidth(),this.hasAttribute("disabled")?this._buttonElement.setAttribute("disabled",""):this._buttonElement.removeAttribute("disabled");let s=this.getAttribute("href");if(s){let r=document.createElement("a");r.setAttribute("href",s);let d=this.getAttribute("target");d&&r.setAttribute("target",d),r.appendChild(this._buttonElement),this.shadow.appendChild(r),this._containerElement=r}else this.shadow.appendChild(this._buttonElement),this._containerElement=this._buttonElement}_updateIcon(){this._iconElement&&(this._iconElement.remove(),this._iconElement=null);let t=this.getAttribute("icon");if(t){let s={pr:"pr-fg",se:"ac-fg",de:"pr-fg",ol:"ac-fg",gh:"ac-fg",lk:"ac-fg"},r={sm:14,md:18,lg:22},d=s[this.getAttribute("v")]||"pr-fg",i=r[this.getAttribute("t")]||18;this._iconElement=document.createElement("rtgl-svg"),this._iconElement.setAttribute("svg",t),this._iconElement.setAttribute("c",d),this._iconElement.setAttribute("wh",i.toString()),this._buttonElement.insertBefore(this._iconElement,this._slotElement)}}_updateWidth(){let t=g(this.getAttribute("w"));t==="f"?this._buttonElement.style.width="var(--width-stretch)":t!=null?(this._buttonElement.style.width=t,this._buttonElement.style.minWidth=t,this._buttonElement.style.maxWidth=t):(this._buttonElement.style.width="",this._buttonElement.style.minWidth="",this._buttonElement.style.maxWidth="")}},B=({render:e,html:t})=>$;var H=l`
 
   :host([d="h"]) {
     flex-direction: row;
@@ -309,7 +307,7 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
       justify-content: center;
     }
   }
-`;var re={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},S=x(re);var $t=v`
+`;var it={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},m=p(it);var U=l`
 :host([sh]:not([sv])) {
     overflow-x: scroll;
     flex-wrap: nowrap;
@@ -327,12 +325,14 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
     flex-wrap: nowrap;
 }
 
-`;var N={xs:"--border-width-xs",s:"--border-width-s",m:"--border-width-m",l:"--border-width-l",xl:"--border-width-xl"},se={bgc:{pr:`
+`;var E={xs:"--border-width-xs",sm:"--border-width-sm",md:"--border-width-md",lg:"--border-width-lg",xl:"--border-width-xl"},st={bgc:{pr:`
     background-color: var(--primary);
     `,se:`
     background-color: var(--secondary);
     `,de:`
     background-color: var(--destructive);
+    `,fg:`
+    background-color: var(--foreground);
     `,bg:`
     background-color: var(--background);
     `,mu:`
@@ -365,37 +365,47 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
         left: 0;
         top: 0;
         height: 100%;
-        `},shadow:{s:"--shadow-s",m:"--shadow-m",l:"--shadow-l"},pt:f,pr:f,pb:f,pl:f,p:f,ph:f,pv:f,g:f,gv:f,gh:f,bw:N,bwt:N,bwr:N,bwb:N,bwl:N,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:"--border-radius-f"}},H=x(se);var oe={mt:f,mr:f,mb:f,ml:f,m:f,mh:f,mv:f},M=x(oe);var kt=({render:e,html:t})=>{let r=new CSSStyleSheet;return r.replaceSync(v`
-    slot {
-      display: contents;
-    }
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-self: auto;
-      align-content: flex-start;
-      border-style: solid;
-      border-width: 0;
-      box-sizing: border-box;
-      border-color: var(--border);
-    }
+        `},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:o,pr:o,pb:o,pl:o,p:o,ph:o,pv:o,g:o,gv:o,gh:o,bw:E,bwt:E,bwr:E,bwb:E,bwl:E,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",sm:"--border-radius-sm",md:"--border-radius-md",lg:"--border-radius-lg",xl:"--border-radius-xl",f:"--border-radius-f"}},k=p(st);var rt={mt:o,mr:o,mb:o,ml:o,m:o,mh:o,mv:o},b=p(rt);var C=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(l`
+        slot {
+          display: contents;
+        }
+        :host {
+          display: flex;
+          flex-direction: column;
+          align-self: auto;
+          align-content: flex-start;
+          border-style: solid;
+          border-width: 0;
+          box-sizing: border-box;
+          border-color: var(--border);
+        }
 
-    :host([fw="w"]) {
-      flex-wrap: wrap;
-    }
+        :host([fw="w"]) {
+          flex-wrap: wrap;
+        }
 
-    ${j}
-    ${$t}
-  ${St}
-  ${M}
-  ${S}
-  ${H}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[r],e(this.shadow,this.render)}static get observedAttributes(){return bt([...vt,"wh","w","h","hidden","sh","sv"])}_styles={default:{},sm:{},md:{},lg:{},xl:{}};attributeChangedCallback(o,i,l){["default","sm","md","lg","xl"].forEach(s=>{let d=u=>`${s==="default"?"":`${s}-`}${u}`,p=this.getAttribute(d("wh")),g=b(p===null?this.getAttribute(d("w")):p),h=b(p===null?this.getAttribute(d("h")):p),a=this.getAttribute(d("o")),c=this.getAttribute(d("z"));c!==null&&(this._styles[s]["z-index"]=c),a!==null&&(this._styles[s].opacity=a),g==="f"?this._styles[s].width="var(--width-stretch)":g!==void 0&&(this._styles[s].width=g,this._styles[s]["min-width"]=g,this._styles[s]["max-width"]=g),h==="f"?this._styles[s].height="100%":h!==void 0&&(this._styles[s].height=h,this._styles[s]["min-height"]=h,this._styles[s]["max-height"]=h),this.hasAttribute(d("hidden"))&&(this._styles[s].display="none !important"),this.hasAttribute(d("visible"))&&(this._styles[s].display="flex !important")}),e(this.shadow,this.render)}render=()=>t`
-        <style>
-          ${D(this._styles)}
-        </style>
-        <slot></slot>
-      `}};var ie={ta:{s:"start",c:"center",e:"end",j:"justify"},s:{h1:`
+        ${S}
+        ${U}
+        ${H}
+        ${b}
+        ${m}
+        ${k}
+        ${_}
+
+        :host([href]) {
+          cursor: pointer;
+          position: relative;
+        }
+
+        :host([href]) a {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 1;
+        }
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),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","target",...x([...y,"wh","w","h","hidden","sh","sv"])]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),s=this.getAttribute("target");this._slotElement.parentNode!==this.shadow&&this.shadow.appendChild(this._slotElement),t?(this._linkElement||(this._linkElement=document.createElement("a"),this.shadow.appendChild(this._linkElement)),this._linkElement.href=t,s?this._linkElement.target=s:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}attributeChangedCallback(t,s,r){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,a=this.getAttribute(n("wh")),c=g(a===null?this.getAttribute(n("w")):a),h=g(a===null?this.getAttribute(n("h")):a),u=this.getAttribute(n("op")),f=this.getAttribute(n("z"));f!==null&&(this._styles[i]["z-index"]=f),u!==null&&(this._styles[i].opacity=u),c==="f"?this._styles[i].width="var(--width-stretch)":c!==void 0&&(this._styles[i].width=c,this._styles[i]["min-width"]=c,this._styles[i]["max-width"]=c),h==="f"?this._styles[i].height="100%":h!==void 0&&(this._styles[i].height=h,this._styles[i]["min-height"]=h,this._styles[i]["max-height"]=h),this.hasAttribute(n("hidden"))&&(this._styles[i].display="none !important"),this.hasAttribute(n("visible"))&&(this._styles[i].display="flex !important")});let d=w(this._styles);d!==this._lastStyleString&&(this._styleElement.textContent=d,this._lastStyleString=d)}},N=({render:e,html:t})=>C;var ot={ta:{s:"start",c:"center",e:"end",j:"justify"},s:{h1:`
       font-size: var(--h1-font-size);
       font-weight: var(--h1-font-weight);
       line-height: var(--h1-line-height);
@@ -435,76 +445,92 @@ var rettangoli=(()=>{var{isArray:it}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
       font-weight: var(--xs-font-weight);
       line-height: var(--xs-line-height);
       letter-spacing: var(--xs-letter-spacing);
-    `}},Ct=x(ie);var ne={c:{fg:"--foreground",de:"--destructive","pr-fg":"--primary-foreground","se-fg":"--secondary-foreground","mu-fg":"--muted-foreground","ac-fg":"--accent-foreground"}},P=x(ne);var At=({render:e,html:t})=>{let r=new CSSStyleSheet;r.replaceSync(v`
-    :host {
-      display: block;
-      font-size: var(--md-font-size);
-      font-weight: var(--md-font-weight);
-      line-height: var(--md-line-height);
-      letter-spacing: var(--md-letter-spacing);
-    }
-    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);
-    }
-    ${Ct}
-    ${P}
-${M}
-${S}
-  `);class n extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[r]}static get observedAttributes(){return["key","w","ellipsis"]}connectedCallback(){e(this.shadow,this.render)}attributeChangedCallback(i,l,s){let d=b(this.getAttribute("w"));this.hasAttribute("ellipsis")&&(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"),d==="f"?this.style.width="var(--width-stretch)":d!==void 0&&(this.style.width=d),e(this.shadow,this.render)}render=()=>t` <slot></slot> `}return n};var _t=({render:e,html:t})=>{let r=new CSSStyleSheet;return r.replaceSync(v`
-    :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%;
-    }
-    ${H}
-    ${M}
-${S}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[r]}_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(){e(this.shadow,this.render)}attributeChangedCallback(o,i,l){["default","sm","md","lg","xl"].forEach(s=>{let d=u=>`${s==="default"?"":`${s}-`}${u}`,p=this.getAttribute(d("wh")),g=b(p===null?this.getAttribute(d("w")):p),h=b(p===null?this.getAttribute(d("h")):p),a=this.getAttribute(d("o")),c=this.getAttribute(d("z"));c!==null&&(this._styles[s].zIndex=c),a!==null&&(this._styles[s].opacity=a),g==="f"?this._styles[s].width="var(--width-stretch)":g!==void 0&&(this._styles[s].width=g,this._styles[s]["min-width"]=g,this._styles[s]["max-width"]=g),h==="f"?this._styles[s].height="100%":h!==void 0&&(this._styles[s].height=h,this._styles[s]["min-height"]=h,this._styles[s]["max-height"]=h)}),e(this.shadow,this.render)}render=()=>t`
-        <style>
-          ${D(this._styles)}
-        </style>
-        <img
-          src="${this.getAttribute("src")}"
-          width="${this.getAttribute("width")}"
-          height="${this.getAttribute("height")}"
-        />
-      `}};var jt=v`
+    `}},P=p(ot);var nt={c:{fg:"--foreground",de:"--destructive","pr-fg":"--primary-foreground","se-fg":"--secondary-foreground","mu-fg":"--muted-foreground","ac-fg":"--accent-foreground"}},A=p(nt);var z=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(l`
+        :host {
+          display: block;
+          font-size: var(--md-font-size);
+          font-weight: var(--md-font-weight);
+          line-height: var(--md-line-height);
+          letter-spacing: var(--md-letter-spacing);
+        }
+        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);
+        }
+        :host([href]) {
+          cursor: pointer;
+          position: relative;
+        }
+        :host([href]) a {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 1;
+        }
+        ${P}
+        ${A}
+        ${b}
+        ${m}
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._slotElement=document.createElement("slot"),this._linkElement=null,this._updateDOM()}static get observedAttributes(){return["key","w","ellipsis","href","target"]}connectedCallback(){this._updateStyling(),this._updateDOM()}attributeChangedCallback(t,s,r){t==="href"||t==="target"?this._updateDOM():this._updateStyling()}_updateStyling(){let t=g(this.getAttribute("w"));this.hasAttribute("ellipsis")?(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"):(this.style.overflow="",this.style.textOverflow="",this.style.whiteSpace=""),t==="f"?this.style.width="var(--width-stretch)":t!==void 0?this.style.width=t:this.style.width=""}_updateDOM(){let t=this.getAttribute("href"),s=this.getAttribute("target");this._slotElement.parentNode!==this.shadow&&this.shadow.appendChild(this._slotElement),t?(this._linkElement||(this._linkElement=document.createElement("a"),this.shadow.appendChild(this._linkElement)),this._linkElement.href=t,s?this._linkElement.target=s:this._linkElement.removeAttribute("target")):this._linkElement&&(this.shadow.removeChild(this._linkElement),this._linkElement=null)}},K=({render:e,html:t})=>z;var M=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(l`
+        :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%;
+        }
+        
+        ${_}
+        
+        a {
+          display: block;
+          height: 100%;
+          width: 100%;
+        }
+        
+        :host([href]) {
+          cursor: pointer;
+        }
+        
+        ${k}
+        ${b}
+        ${m}
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styleElement=document.createElement("style"),this._imgElement=document.createElement("img"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return x([...y,"key","src","href","target","wh","w","h","hidden","height","width"])}_styles={default:{},sm:{},md:{},lg:{},xl:{}};_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),s=this.getAttribute("target");t?(this._linkElement||(this._linkElement=document.createElement("a")),this._linkElement.href=t,s?this._linkElement.target=s:this._linkElement.removeAttribute("target"),this._linkElement.appendChild(this._imgElement),this._linkElement.parentNode!==this.shadow&&this.shadow.appendChild(this._linkElement)):this._linkElement?(this._imgElement.parentNode===this._linkElement&&this.shadow.appendChild(this._imgElement),this._linkElement.parentNode===this.shadow&&this.shadow.removeChild(this._linkElement),this._linkElement=null):this._imgElement.parentNode!==this.shadow&&this.shadow.appendChild(this._imgElement)}attributeChangedCallback(t,s,r){if(t==="href"||t==="target"){this._updateDOM();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,a=this.getAttribute(n("wh")),c=g(a===null?this.getAttribute(n("w")):a),h=g(a===null?this.getAttribute(n("h")):a),u=this.getAttribute(n("o")),f=this.getAttribute(n("z"));f!==null&&(this._styles[i]["z-index"]=f),u!==null&&(this._styles[i].opacity=u),c==="f"?this._styles[i].width="var(--width-stretch)":c!==void 0&&(this._styles[i].width=c,this._styles[i]["min-width"]=c,this._styles[i]["max-width"]=c),h==="f"?this._styles[i].height="100%":h!==void 0&&(this._styles[i].height=h,this._styles[i]["min-height"]=h,this._styles[i]["max-height"]=h),this.hasAttribute(n("hidden"))&&(this._styles[i].display="none !important"),this.hasAttribute(n("visible"))&&(this._styles[i].display="block !important")});let d=w(this._styles);d!==this._lastStyleString&&(this._styleElement.textContent=d,this._lastStyleString=d),this._updateImageAttributes()}_updateImageAttributes(){let t=this.getAttribute("src"),s=this.getAttribute("width"),r=this.getAttribute("height");t!==null&&this._imgElement.setAttribute("src",t),s!==null&&this._imgElement.setAttribute("width",s),r!==null&&this._imgElement.setAttribute("height",r)}connectedCallback(){this._updateImageAttributes()}},Q=({render:e,html:t})=>M;var R=l`
 :host([pt="xs"]) svg {
   padding-top: var(--spacing-xs);
 }
-:host([pt="s"]) svg {
-  padding-top: var(--spacing-s);
+:host([pt="sm"]) svg {
+  padding-top: var(--spacing-sm);
 }
-:host([pt="m"]) svg {
-  padding-top: var(--spacing-m);
+:host([pt="md"]) svg {
+  padding-top: var(--spacing-md);
 }
-:host([pt="l"]) svg {
-  padding-top: var(--spacing-l);
+:host([pt="lg"]) svg {
+  padding-top: var(--spacing-lg);
 }
 :host([pt="xl"]) svg {
   padding-top: var(--spacing-xl);
@@ -512,14 +538,14 @@ ${S}
 :host([pr="xs"]) svg {
   padding-right: var(--spacing-xs);
 }
-:host([pr="s"]) svg {
-  padding-right: var(--spacing-s);
+:host([pr="sm"]) svg {
+  padding-right: var(--spacing-sm);
 }
-:host([pr="m"]) svg {
-  padding-right: var(--spacing-m);
+:host([pr="md"]) svg {
+  padding-right: var(--spacing-md);
 }
-:host([pr="l"]) svg {
-  padding-right: var(--spacing-l);
+:host([pr="lg"]) svg {
+  padding-right: var(--spacing-lg);
 }
 :host([pr="xl"]) svg {
   padding-right: var(--spacing-xl);
@@ -527,14 +553,14 @@ ${S}
 :host([pb="xs"]) svg {
   padding-bottom: var(--spacing-xs);
 }
-:host([pb="s"]) svg {
-  padding-bottom: var(--spacing-s);
+:host([pb="sm"]) svg {
+  padding-bottom: var(--spacing-sm);
 }
-:host([pb="m"]) svg {
-  padding-bottom: var(--spacing-m);
+:host([pb="md"]) svg {
+  padding-bottom: var(--spacing-md);
 }
-:host([pb="l"]) svg {
-  padding-bottom: var(--spacing-l);
+:host([pb="lg"]) svg {
+  padding-bottom: var(--spacing-lg);
 }
 :host([pb="xl"]) svg {
   padding-bottom: var(--spacing-xl);
@@ -542,14 +568,14 @@ ${S}
 :host([pl="xs"]) svg {
   padding-left: var(--spacing-xs);
 }
-:host([pl="s"]) svg {
-  padding-left: var(--spacing-s);
+:host([pl="sm"]) svg {
+  padding-left: var(--spacing-sm);
 }
-:host([pl="m"]) svg {
-  padding-left: var(--spacing-m);
+:host([pl="md"]) svg {
+  padding-left: var(--spacing-md);
 }
-:host([pl="l"]) svg {
-  padding-left: var(--spacing-l);
+:host([pl="lg"]) svg {
+  padding-left: var(--spacing-lg);
 }
 :host([pl="xl"]) svg {
   padding-left: var(--spacing-xl);
@@ -557,14 +583,14 @@ ${S}
 :host([p="xs"]) svg {
   padding: var(--spacing-xs);
 }
-:host([p="s"]) svg {
-  padding: var(--spacing-s);
+:host([p="sm"]) svg {
+  padding: var(--spacing-sm);
 }
-:host([p="m"]) svg {
-  padding: var(--spacing-m);
+:host([p="md"]) svg {
+  padding: var(--spacing-md);
 }
-:host([p="l"]) svg {
-  padding: var(--spacing-l);
+:host([p="lg"]) svg {
+  padding: var(--spacing-lg);
 }
 :host([p="xl"]) svg {
   padding: var(--spacing-xl);
@@ -573,17 +599,17 @@ ${S}
   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="sm"]) svg {
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
 }
-:host([ph="m"]) svg {
-  padding-left: var(--spacing-m);
-  padding-right: var(--spacing-m);
+:host([ph="md"]) svg {
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
 }
-:host([ph="l"]) svg {
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing-l);
+:host([ph="lg"]) svg {
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
 }
 :host([ph="xl"]) svg {
   padding-left: var(--spacing-xl);
@@ -593,29 +619,79 @@ ${S}
   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="sm"]) svg {
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
 }
-:host([pv="m"]) svg {
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
+:host([pv="md"]) svg {
+  padding-top: var(--spacing-md);
+  padding-bottom: var(--spacing-md);
 }
-:host([pv="l"]) svg {
-  padding-top: var(--spacing-l);
-  padding-bottom: var(--spacing-l);
+:host([pv="lg"]) svg {
+  padding-top: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
 }
 :host([pv="xl"]) svg {
   padding-top: var(--spacing-xl);
   padding-bottom: var(--spacing-xl);
 }
-`;var Mt=({render:e,html:t})=>{let r=new CSSStyleSheet;return r.replaceSync(v`
-    :host {
-      color: var(--foreground);
-    }
-    ${P}
-    ${jt}
-${j}
-${S}
-  `),class U extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[r]}static _icons={};static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return U._icons}static addIcon(o,i){U._icons[o]=i}connectedCallback(){this.render()}attributeChangedCallback(o,i,l){let s=this.getAttribute("wh"),d=b(s===null?this.getAttribute("w"):s),p=b(s===null?this.getAttribute("h"):s);d&&(this.style.width=d),p&&(this.style.height=p),this.render()}render=()=>{try{let o=this.getAttribute("svg"),i=U._icons[o]||(window.rtglIcons||{})[o];if(i){this.shadow.innerHTML=i;return}}catch(o){console.log("error in rtgl-svg render",o)}this.shadow.innerHTML=""}}};customElements.define("rtgl-button",yt({render:_,html:A}));customElements.define("rtgl-view",kt({render:_,html:A}));customElements.define("rtgl-text",At({render:_,html:A}));customElements.define("rtgl-image",_t({render:_,html:A}));customElements.define("rtgl-svg",Mt({render:_,html:A}));})();
-/*! (c) Andrea Giammarchi - MIT */
+`;var j=class e extends HTMLElement{static styleSheet=null;static _icons={};static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(l`
+        :host {
+          color: var(--foreground);
+        }
+        ${A}
+        ${R}
+        ${S}
+        ${m}
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet]}static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return e._icons}static addIcon(t,s){e._icons[t]=s}connectedCallback(){this._updateSizing(),this._render()}attributeChangedCallback(t,s,r){this._updateSizing(),this._render()}_updateSizing(){let t=this.getAttribute("wh"),s=g(t===null?this.getAttribute("w"):t),r=g(t===null?this.getAttribute("h"):t);s&&(this.style.width=s),r&&(this.style.height=r)}_render(){try{let t=this.getAttribute("svg"),s=e._icons[t]||(window.rtglIcons||{})[t];if(s){this.shadow.innerHTML=s;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},G=({render:e,html:t})=>j;var O=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(l`
+        :host {
+          display: contents;
+        }
+        input {
+          background-color: var(--background);
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
+          border: 1px solid var(--ring);
+          border-radius: var(--border-radius-lg);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
+          height: 32px;
+          color: var(--foreground);
+          outline: none;
+        }
+        input:focus {
+          border-color: var(--foreground);
+        }
+        input:disabled {
+          cursor: not-allowed;
+        }
+        ${b}
+        ${m}
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("keydown",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled",...x([...y,"wh","w","h","hidden","visible","op","z"])]}get value(){return this._inputElement.value}_onChange=t=>{this.dispatchEvent(new CustomEvent("input-keydown",{detail:{value:this._inputElement.value}}))};attributeChangedCallback(t,s,r){if(["type","placeholder","disabled"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(i=>{let n=v=>`${i==="default"?"":`${i}-`}${v}`,a=this.getAttribute(n("wh")),c=g(a===null?this.getAttribute(n("w")):a),h=g(a===null?this.getAttribute(n("h")):a),u=this.getAttribute(n("op")),f=this.getAttribute(n("z"));f!==null&&(this._styles[i]["z-index"]=f),u!==null&&(this._styles[i].opacity=u),c==="f"?this._styles[i].width="var(--width-stretch)":c!==void 0&&(this._styles[i].width=c,this._styles[i]["min-width"]=c,this._styles[i]["max-width"]=c),h==="f"?this._styles[i].height="100%":h!==void 0&&(this._styles[i].height=h,this._styles[i]["min-height"]=h,this._styles[i]["max-height"]=h),this.hasAttribute(n("hidden"))&&(this._styles[i].display="none !important"),this.hasAttribute(n("visible"))&&(this._styles[i].display="block !important")});let d=w(this._styles,"input");d!==this._lastStyleString&&(this._styleElement.textContent=d,this._lastStyleString=d)}_updateInputAttributes(){let t=this.getAttribute("type")||"text",s=this.getAttribute("placeholder"),r=this.hasAttribute("disabled");this._inputElement.setAttribute("type",t),s!==null?this._inputElement.setAttribute("placeholder",s):this._inputElement.removeAttribute("placeholder"),r?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},q=({render:e,html:t})=>O;var W=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(l`
+        :host {
+          display: contents;
+        }
+        textarea {
+          font-family: inherit;
+          background-color: var(--background);
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
+          border: 1px solid var(--ring);
+          border-radius: var(--border-radius-lg);
+          padding-top: var(--spacing-md);
+          padding-bottom: var(--spacing-md);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
+          color: var(--foreground);
+          outline: none;
+        }
+        textarea:focus {
+          border-color: var(--foreground);
+        }
+        ${b}
+        ${m}
+      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._textareaElement=document.createElement("textarea"),this._textareaElement.setAttribute("type","text"),this.shadow.appendChild(this._textareaElement)}static get observedAttributes(){return["key","w","ellipsis","cols","rows","placeholder"]}get value(){return this._textareaElement.value}set value(t){this._textareaElement.value=t}connectedCallback(){this._updateTextareaAttributes()}attributeChangedCallback(t,s,r){this._updateTextareaAttributes()}_updateTextareaAttributes(){let t=this.getAttribute("cols"),s=this.getAttribute("rows"),r=this.getAttribute("placeholder");t!==null?this._textareaElement.setAttribute("cols",t):this._textareaElement.removeAttribute("cols"),s!==null?this._textareaElement.setAttribute("rows",s):this._textareaElement.removeAttribute("rows"),r!==null?this._textareaElement.setAttribute("placeholder",r):this._textareaElement.removeAttribute("placeholder")}},F=({render:e,html:t})=>W;customElements.define("rtgl-button",B({}));customElements.define("rtgl-view",N({}));customElements.define("rtgl-text",K({}));customElements.define("rtgl-image",Q({}));customElements.define("rtgl-svg",G({}));customElements.define("rtgl-input",q({}));customElements.define("rtgl-textarea",F({}));})();