rettangoli-ui 0.0.7-rc2 → 0.0.8-rc1

package/dist/rettangoli-ui.min.js

@@ -1,120 +1,24 @@
-var rettangoliUi=(()=>{var{isArray:at}=Array,{getPrototypeOf:Ot,getOwnPropertyDescriptor:Vt}=Object,w=[],nt=()=>document.createRange(),M=(o,t,r)=>(o.set(t,r),r),Dt=(o,t)=>t.reduceRight(Ht,o),Ht=(o,t)=>o.childNodes[t],{setPrototypeOf:Rt}=Object,C,it=(o,t,r)=>(C||(C=nt()),r?C.setStartAfter(o):C.setStartBefore(o),C.setEndAfter(t),C.deleteContents(),o),G=({firstChild:o,lastChild:t},r)=>it(o,t,r),lt=!1,_=(o,t)=>lt&&o.nodeType===11?1/t<0?t?G(o,!0):o.lastChild:t?o.valueOf():o.firstChild:o,ot=o=>document.createComment(o),I=class extends(t=>{function r(s){return Rt(s,new.target.prototype)}return r.prototype=t.prototype,r})(DocumentFragment){#o=ot("<>");#r=ot("</>");#t=w;constructor(t){super(t),this.replaceChildren(this.#o,...t.childNodes,this.#r),lt=!0}get firstChild(){return this.#o}get lastChild(){return this.#r}get parentNode(){return this.#o.parentNode}remove(){G(this,!1)}replaceWith(t){G(this,!0).replaceWith(t)}valueOf(){let{parentNode:t}=this;if(t===this)this.#t===w&&(this.#t=[...this.childNodes]);else{if(t){let{firstChild:r,lastChild:s}=this;for(this.#t=[r];r!==s;)this.#t.push(r=r.nextSibling)}this.replaceChildren(...this.#t)}return this}},ht=(o,t,r)=>o.setAttribute(t,r),O=(o,t)=>o.removeAttribute(t),W,_t=(o,t,r)=>{r=r.slice(1),W||(W=new WeakMap);let s=W.get(o)||M(W,o,{}),e=s[r];return e&&e[0]&&o.removeEventListener(r,...e),e=at(t)?t:[t,!1],s[r]=e,e[0]&&o.addEventListener(r,...e),t},T=(o,t)=>{let{t:r,n:s}=o,e=!1;switch(typeof t){case"object":if(t!==null){(s||r).replaceWith(o.n=t.valueOf());break}case"undefined":e=!0;default:r.data=e?"":t,s&&(o.n=null,s.replaceWith(r))}return t},V=(o,t,r)=>o[r]=t,Ft=(o,t,r)=>V(o,t,r.slice(1)),Z=(o,t,r)=>t==null?(O(o,r),t):V(o,t,r),ct=(o,t)=>(typeof t=="function"?t(o):t.current=o,t),F=(o,t,r)=>(t==null?O(o,r):ht(o,r,t),t),Bt=(o,t,r)=>(o.toggleAttribute(r.slice(1),t),t),L=(o,t,r)=>{let{length:s}=t;if(o.data=`[${s}]`,s)return((e,a,i,n,d)=>{let f=i.length,c=a.length,g=f,l=0,h=0,v=null;for(;l<c||h<g;)if(c===l){let m=g<f?h?n(i[h-1],-0).nextSibling:n(i[g-h],0):d;for(;h<g;)e.insertBefore(n(i[h++],1),m)}else if(g===h)for(;l<c;)v&&v.has(a[l])||e.removeChild(n(a[l],-1)),l++;else if(a[l]===i[h])l++,h++;else if(a[c-1]===i[g-1])c--,g--;else if(a[l]===i[g-1]&&i[h]===a[c-1]){let m=n(a[--c],-1).nextSibling;e.insertBefore(n(i[h++],1),n(a[l++],-1).nextSibling),e.insertBefore(n(i[--g],1),m),a[c]=i[g]}else{if(!v){v=new Map;let m=h;for(;m<g;)v.set(i[m],m++)}if(v.has(a[l])){let m=v.get(a[l]);if(h<m&&m<g){let $=l,z=1;for(;++$<c&&$<g&&v.get(a[$])===m+z;)z++;if(z>m-h){let R=n(a[l],0);for(;h<m;)e.insertBefore(n(i[h++],1),R)}else e.replaceChild(n(i[h++],1),n(a[l++],-1))}else l++}else e.removeChild(n(a[l++],-1))}return i})(o.parentNode,r,t,_,o);switch(r.length){case 1:r[0].remove();case 0:break;default:it(_(r[0],0),_(r.at(-1),-0),!1)}return w},Pt=new Map([["aria",(o,t)=>{for(let r in t){let s=t[r],e=r==="role"?r:`aria-${r}`;s==null?O(o,e):ht(o,e,s)}return t}],["class",(o,t)=>Z(o,t,t==null?"class":"className")],["data",(o,t)=>{let{dataset:r}=o;for(let s in t)t[s]==null?delete r[s]:r[s]=t[s];return t}],["ref",ct],["style",(o,t)=>t==null?Z(o,t,"style"):V(o.style,t,"cssText")]]),Ut=(o,t,r)=>{switch(t[0]){case".":return Ft;case"?":return Bt;case"@":return _t;default:return r||"ownerSVGElement"in o?t==="ref"?ct:F:Pt.get(t)||(t in o?t.startsWith("on")?V:((s,e)=>{let a;do a=Vt(s,e);while(!a&&(s=Ot(s)));return a})(o,t)?.set?Z:F:F)}},Gt=(o,t)=>(o.textContent=t??"",t),E=(o,t,r)=>({a:o,b:t,c:r}),A=()=>E(null,null,w),pt=o=>(t,r)=>{let{a:s,b:e,c:a}=o(t,r),i=document.importNode(s,!0),n=w;if(e!==w){n=[];for(let l,h,v=0;v<e.length;v++){let{a:m,b:$,c:z}=e[v],R=m===h?l:l=Dt(i,h=m);n[v]=(d=$,f=R,c=z,g=$===L?[]:$===T?A():null,{v:w,u:d,t:f,n:c,c:g})}}var d,f,c,g;return((l,h)=>({b:l,c:h}))(a?i.firstChild:new I(i),n)},It=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Zt=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,qt=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,Jt=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,Kt=/[\x01\x02]/g,B,P,j=document.createElement("template"),Qt=(o,t)=>{if(t)return B||(B=document.createElementNS("http://www.w3.org/2000/svg","svg"),P=nt(),P.selectNodeContents(B)),P.createContextualFragment(o);j.innerHTML=o;let{content:r}=j;return j=j.cloneNode(!1),r},U=o=>{let t=[],r;for(;r=o.parentNode;)t.push(t.indexOf.call(r.childNodes,o)),o=r;return t},rt=()=>document.createTextNode(""),Xt=(o,t,r)=>{let s=Qt(((d,f,c)=>{let g=0;return d.join("
").trim().replace(qt,(l,h,v,m)=>`<${h}${v.replace(Jt,"=$2$1").trimEnd()}${m?c||Zt.test(h)?" /":`></${h}`:""}>`).replace(Kt,l=>l==="
"?`<!--${f+g++}-->`:f+g++)})(o,N,r),r),{length:e}=o,a=w;if(e>1){let d=[],f=document.createTreeWalker(s,129),c=0,g=`${N}${c++}`;for(a=[];c<e;){let l=f.nextNode();if(l.nodeType===8){if(l.data===g){let h=at(t[c-1])?L:T;h===T&&d.push(l),a.push(E(U(l),h,null)),g=`${N}${c++}`}}else{let h;for(;l.hasAttribute(g);){h||(h=U(l));let v=l.getAttribute(g);a.push(E(h,Ut(l,v,r),v)),O(l,g),g=`${N}${c++}`}!r&&It.test(l.localName)&&l.textContent.trim()===`<!--${g}-->`&&(a.push(E(h||U(l),Gt,null)),g=`${N}${c++}`)}}for(c=0;c<d.length;c++)d[c].replaceWith(rt())}let{childNodes:i}=s,{length:n}=i;return n<1?(n=1,s.appendChild(rt())):n===1&&e!==1&&i[0].nodeType!==1&&(n=0),M(gt,o,E(s,a,n===1))},gt=new WeakMap,N="is\xB5",dt=o=>(t,r)=>gt.get(t)||Xt(t,r,o),Yt=pt(dt(!1)),to=pt(dt(!0)),q=(o,{s:t,t:r,v:s})=>{if(o.a!==r){let{b:e,c:a}=(t?to:Yt)(r,s);o.a=r,o.b=e,o.c=a}for(let{c:e}=o,a=0;a<e.length;a++){let i=s[a],n=e[a];switch(n.u){case L:n.v=L(n.t,oo(n.c,i),n.v);break;case T:let d=i instanceof k?q(n.c||(n.c=A()),i):(n.c=null,i);d!==n.v&&(n.v=T(n,d));break;default:i!==n.v&&(n.v=n.u(n.t,i,n.n,n.v))}}return o.b},oo=(o,t)=>{let r=0,{length:s}=t;for(s<o.length&&o.splice(s);r<s;r++){let e=t[r];e instanceof k?t[r]=q(o[r]||(o[r]=A()),e):o[r]=null}return t},k=class{constructor(t,r,s){this.s=t,this.t=r,this.v=s}toDOM(t=A()){return q(t,this)}};var vt=o=>(t,...r)=>new k(o,t,r),u=vt(!1),ao=vt(!0),st=new WeakMap,b=(o,t)=>((r,s,e)=>{let a=st.get(r)||M(st,r,A()),{b:i}=a,n=typeof s=="function"?s():s,d=n instanceof k?n.toDOM(a):n;return i!==d&&r.replaceChildren((a.b=d).valueOf()),r})(o,t),et=new WeakMap,mt=o=>(t,r)=>{let s=et.get(t)||M(et,t,new Map);return s.get(r)||M(s,r,function(e,...a){return new k(o,e,a).toDOM(this)}.bind(A()))},no=mt(!1),io=mt(!0);function p(o,...t){let r="";return o.forEach((s,e)=>{r+=s+(t[e]||"")}),r}var x=p`
-:host([mt="xs"]) {
-  margin-top: var(--spacing-xs);
-}
-:host([mt="s"]) {
-  margin-top: var(--spacing-s);
-}
-:host([mt="m"]) {
-  margin-top: var(--spacing-m);
-}
-:host([mt="l"]) {
-  margin-top: var(--spacing-l);
-}
-:host([mt="xl"]) {
-  margin-top: var(--spacing-xl);
-}
-:host([mr="xs"]) {
-  margin-right: var(--spacing-xs);
-}
-:host([mr="s"]) {
-  margin-right: var(--spacing-s);
-}
-:host([mr="m"]) {
-  margin-right: var(--spacing-m);
-}
-:host([mr="l"]) {
-  margin-right: var(--spacing-l);
-}
-:host([mr="xl"]) {
-  margin-right: var(--spacing-xl);
-}
-:host([mb="xs"]) {
-  margin-bottom: var(--spacing-xs);
-}
-:host([mb="s"]) {
-  margin-bottom: var(--spacing-s);
-}
-:host([mb="m"]) {
-  margin-bottom: var(--spacing-m);
-}
-:host([mb="l"]) {
-  margin-bottom: var(--spacing-l);
-}
-:host([mb="xl"]) {
-  margin-bottom: var(--spacing-xl);
-}
-:host([ml="xs"]) {
-  margin-left: var(--spacing-xs);
-}
-:host([ml="s"]) {
-  margin-left: var(--spacing-s);
-}
-:host([ml="m"]) {
-  margin-left: var(--spacing-m);
-}
-:host([ml="l"]) {
-  margin-left: var(--spacing-l);
-}
-:host([ml="xl"]) {
-  margin-left: var(--spacing-xl);
-}
-:host([m="xs"]) {
-  margin: var(--spacing-xs);
-}
-:host([m="s"]) {
-  margin: var(--spacing-s);
-}
-:host([m="m"]) {
-  margin: var(--spacing-m);
-}
-:host([m="l"]) {
-  margin: var(--spacing-l);
-}
-:host([m="xl"]) {
-  margin: var(--spacing-xl);
-}
-:host([mh="xs"]) {
-  margin-left: var(--spacing-xs);
-  margin-right: var(--spacing-xs);
-}
-:host([mh="s"]) {
-  margin-left: var(--spacing-s);
-  margin-right: var(--spacing-s);
-}
-:host([mh="m"]) {
-  margin-left: var(--spacing-m);
-  margin-right: var(--spacing-m);
-}
-:host([mh="l"]) {
-  margin-left: var(--spacing-l);
-  margin-right: var(--spacing-l);
-}
-:host([mh="xl"]) {
-  margin-left: var(--spacing-xl);
-  margin-right: var(--spacing-xl);
-}
-:host([mv="xs"]) {
-  margin-top: var(--spacing-xs);
-  margin-bottom: var(--spacing-xs);
-}
-:host([mv="s"]) {
-  margin-top: var(--spacing-s);
-  margin-bottom: var(--spacing-s);
-}
-:host([mv="m"]) {
-  margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-m);
-}
-:host([mv="l"]) {
-  margin-top: var(--spacing-l);
-  margin-bottom: var(--spacing-l);
-}
-:host([mv="xl"]) {
-  margin-top: var(--spacing-xl);
-  margin-bottom: var(--spacing-xl);
-}
-`;var y=p`
+var rettangoliUi=(()=>{var{isArray:ht}=Array,{getPrototypeOf:Rt,getOwnPropertyDescriptor:Ht}=Object,$=[],ct=()=>document.createRange(),E=(e,t,o)=>(e.set(t,o),o),Lt=(e,t)=>t.reduceRight(Vt,e),Vt=(e,t)=>e.childNodes[t],{setPrototypeOf:Bt}=Object,_,dt=(e,t,o)=>(_||(_=ct()),o?_.setStartAfter(e):_.setStartBefore(e),_.setEndAfter(t),_.deleteContents(),e),J=({firstChild:e,lastChild:t},o)=>dt(e,t,o),pt=!1,F=(e,t)=>pt&&e.nodeType===11?1/t<0?t?J(e,!0):e.lastChild:t?e.valueOf():e.firstChild:e,nt=e=>document.createComment(e),K=class extends(t=>{function o(s){return Bt(s,new.target.prototype)}return o.prototype=t.prototype,o})(DocumentFragment){#e=nt("<>");#o=nt("</>");#t=$;constructor(t){super(t),this.replaceChildren(this.#e,...t.childNodes,this.#o),pt=!0}get firstChild(){return this.#e}get lastChild(){return this.#o}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===$&&(this.#t=[...this.childNodes]);else{if(t){let{firstChild:o,lastChild:s}=this;for(this.#t=[o];o!==s;)this.#t.push(o=o.nextSibling)}this.replaceChildren(...this.#t)}return this}},gt=(e,t,o)=>e.setAttribute(t,o),V=(e,t)=>e.removeAttribute(t),R,Dt=(e,t,o)=>{o=o.slice(1),R||(R=new WeakMap);let s=R.get(e)||E(R,e,{}),r=s[o];return r&&r[0]&&e.removeEventListener(o,...r),r=ht(t)?t:[t,!1],s[o]=r,r[0]&&e.addEventListener(o,...r),t},N=(e,t)=>{let{t:o,n:s}=e,r=!1;switch(typeof t){case"object":if(t!==null){(s||o).replaceWith(e.n=t.valueOf());break}case"undefined":r=!0;default:o.data=r?"":t,s&&(e.n=null,s.replaceWith(o))}return t},B=(e,t,o)=>e[o]=t,Pt=(e,t,o)=>B(e,t,o.slice(1)),X=(e,t,o)=>t==null?(V(e,o),t):B(e,t,o),ut=(e,t)=>(typeof t=="function"?t(e):t.current=e,t),Q=(e,t,o)=>(t==null?V(e,o):gt(e,o,t),t),Ut=(e,t,o)=>(e.toggleAttribute(o.slice(1),t),t),L=(e,t,o)=>{let{length:s}=t;if(e.data=`[${s}]`,s)return((r,n,a,i,p)=>{let u=a.length,h=n.length,d=u,l=0,c=0,f=null;for(;l<h||c<d;)if(h===l){let v=d<u?c?i(a[c-1],-0).nextSibling:i(a[d-c],0):p;for(;c<d;)r.insertBefore(i(a[c++],1),v)}else if(d===c)for(;l<h;)f&&f.has(n[l])||r.removeChild(i(n[l],-1)),l++;else if(n[l]===a[c])l++,c++;else if(n[h-1]===a[d-1])h--,d--;else if(n[l]===a[d-1]&&a[c]===n[h-1]){let v=i(n[--h],-1).nextSibling;r.insertBefore(i(a[c++],1),i(n[l++],-1).nextSibling),r.insertBefore(i(a[--d],1),v),n[h]=a[d]}else{if(!f){f=new Map;let v=c;for(;v<d;)f.set(a[v],v++)}if(f.has(n[l])){let v=f.get(n[l]);if(c<v&&v<d){let x=l,k=1;for(;++x<h&&x<d&&f.get(n[x])===v+k;)k++;if(k>v-c){let I=i(n[l],0);for(;c<v;)r.insertBefore(i(a[c++],1),I)}else r.replaceChild(i(a[c++],1),i(n[l++],-1))}else l++}else r.removeChild(i(n[l++],-1))}return a})(e.parentNode,o,t,F,e);switch(o.length){case 1:o[0].remove();case 0:break;default:dt(F(o[0],0),F(o.at(-1),-0),!1)}return $},It=new Map([["aria",(e,t)=>{for(let o in t){let s=t[o],r=o==="role"?o:`aria-${o}`;s==null?V(e,r):gt(e,r,s)}return t}],["class",(e,t)=>X(e,t,t==null?"class":"className")],["data",(e,t)=>{let{dataset:o}=e;for(let s in t)t[s]==null?delete o[s]:o[s]=t[s];return t}],["ref",ut],["style",(e,t)=>t==null?X(e,t,"style"):B(e.style,t,"cssText")]]),Ft=(e,t,o)=>{switch(t[0]){case".":return Pt;case"?":return Ut;case"@":return Dt;default:return o||"ownerSVGElement"in e?t==="ref"?ut:Q:It.get(t)||(t in e?t.startsWith("on")?B:((s,r)=>{let n;do n=Ht(s,r);while(!n&&(s=Rt(s)));return n})(e,t)?.set?X:Q:Q)}},Qt=(e,t)=>(e.textContent=t??"",t),z=(e,t,o)=>({a:e,b:t,c:o}),W=()=>z(null,null,$),ft=e=>(t,o)=>{let{a:s,b:r,c:n}=e(t,o),a=document.importNode(s,!0),i=$;if(r!==$){i=[];for(let l,c,f=0;f<r.length;f++){let{a:v,b:x,c:k}=r[f],I=v===c?l:l=Lt(a,c=v);i[f]=(p=x,u=I,h=k,d=x===L?[]:x===N?W():null,{v:$,u:p,t:u,n:h,c:d})}}var p,u,h,d;return((l,c)=>({b:l,c}))(n?a.firstChild:new K(a),i)},Gt=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Zt=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,qt=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,Jt=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,Kt=/[\x01\x02]/g,G,Z,H=document.createElement("template"),Xt=(e,t)=>{if(t)return G||(G=document.createElementNS("http://www.w3.org/2000/svg","svg"),Z=ct(),Z.selectNodeContents(G)),Z.createContextualFragment(e);H.innerHTML=e;let{content:o}=H;return H=H.cloneNode(!1),o},q=e=>{let t=[],o;for(;o=e.parentNode;)t.push(t.indexOf.call(o.childNodes,e)),e=o;return t},it=()=>document.createTextNode(""),Yt=(e,t,o)=>{let s=Xt(((p,u,h)=>{let d=0;return p.join("
").trim().replace(qt,(l,c,f,v)=>`<${c}${f.replace(Jt,"=$2$1").trimEnd()}${v?h||Zt.test(c)?" /":`></${c}`:""}>`).replace(Kt,l=>l==="
"?`<!--${u+d++}-->`:u+d++)})(e,O,o),o),{length:r}=e,n=$;if(r>1){let p=[],u=document.createTreeWalker(s,129),h=0,d=`${O}${h++}`;for(n=[];h<r;){let l=u.nextNode();if(l.nodeType===8){if(l.data===d){let c=ht(t[h-1])?L:N;c===N&&p.push(l),n.push(z(q(l),c,null)),d=`${O}${h++}`}}else{let c;for(;l.hasAttribute(d);){c||(c=q(l));let f=l.getAttribute(d);n.push(z(c,Ft(l,f,o),f)),V(l,d),d=`${O}${h++}`}!o&&Gt.test(l.localName)&&l.textContent.trim()===`<!--${d}-->`&&(n.push(z(c||q(l),Qt,null)),d=`${O}${h++}`)}}for(h=0;h<p.length;h++)p[h].replaceWith(it())}let{childNodes:a}=s,{length:i}=a;return i<1?(i=1,s.appendChild(it())):i===1&&r!==1&&a[0].nodeType!==1&&(i=0),E(vt,e,z(s,n,i===1))},vt=new WeakMap,O="is\xB5",bt=e=>(t,o)=>vt.get(t)||Yt(t,o,e),te=ft(bt(!1)),ee=ft(bt(!0)),Y=(e,{s:t,t:o,v:s})=>{if(e.a!==o){let{b:r,c:n}=(t?ee:te)(o,s);e.a=o,e.b=r,e.c=n}for(let{c:r}=e,n=0;n<r.length;n++){let a=s[n],i=r[n];switch(i.u){case L:i.v=L(i.t,oe(i.c,a),i.v);break;case N:let p=a instanceof A?Y(i.c||(i.c=W()),a):(i.c=null,a);p!==i.v&&(i.v=N(i,p));break;default:a!==i.v&&(i.v=i.u(i.t,a,i.n,i.v))}}return e.b},oe=(e,t)=>{let o=0,{length:s}=t;for(s<e.length&&e.splice(s);o<s;o++){let r=t[o];r instanceof A?t[o]=Y(e[o]||(e[o]=W()),r):e[o]=null}return t},A=class{constructor(t,o,s){this.s=t,this.t=o,this.v=s}toDOM(t=W()){return Y(t,this)}};var mt=e=>(t,...o)=>new A(e,t,o),S=mt(!1),me=mt(!0),at=new WeakMap,y=(e,t)=>((o,s,r)=>{let n=at.get(o)||E(at,o,W()),{b:a}=n,i=typeof s=="function"?s():s,p=i instanceof A?i.toDOM(n):i;return a!==p&&o.replaceChildren((n.b=p).valueOf()),o})(e,t),lt=new WeakMap,yt=e=>(t,o)=>{let s=lt.get(t)||E(lt,t,new Map);return s.get(o)||E(s,o,function(r,...n){return new A(e,r,n).toDOM(this)}.bind(W()))},ye=yt(!1),we=yt(!0);function b(e,...t){let o="";return e.forEach((s,r)=>{o+=s+(t[r]||"")}),o}var wt={default:void 0,s:"@media only screen and (max-width: 640px)"},w=(e,t,o={})=>{let s="";for(let[r,n]of Object.entries(wt)){r!=="default"&&(s+=`${n} {`);for(let[a,i]of Object.entries(t)){let p=o[a]?` ${o[a]} `:" ";for(let[u,h]of Object.entries(i)){let d=e[a],l=h.startsWith("--")?`var(${h})`:h,c=r==="default"?a:`${r}-${a}`,f=r==="default"?`h-${a}`:`${r}-h-${a}`;if(d){let x=d.split(" ").map(k=>`${k}: ${l};`).join(" ");s+=`
+            :host([${c}="${u}"])${p}{
+              ${x}
+            }
+            :host([${f}="${u}"]:hover)${p}{
+              ${x}
+            }
+          `}else s+=`
+            :host([${c}="${u}"])${p}{
+              ${h}
+            }
+            :host([${f}="${u}"]:hover)${p}{
+              ${h}
+            }
+          `}}r!=="default"&&(s+="}")}return s};function re(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var se=e=>/%$/.test(e),m=e=>{if(e!==void 0)return se(e)?e:re(e)?`${e}px`:e},g={xs:"--spacing-xs",s:"--spacing-s",m:"--spacing-m",l:"--spacing-l",xl:"--spacing-xl"};function D(e){let t="";for(let[o,s]of Object.entries(wt)){o!=="default"&&(t+=`${s} {
+`);let r="";for(let[n,a]of Object.entries(e[o]))a!=null&&(r+=`${n}: ${a};
+`);t+=`:host {
+    ${r.trim()}
+    }
+`,o!=="default"&&(t+=`}
+`)}return t}var j=b`
 :host([flex="0"]) {
   flex: 0;
 }
@@ -154,88 +58,21 @@ var rettangoliUi=(()=>{var{isArray:at}=Array,{getPrototypeOf:Ot,getOwnPropertyDe
 :host([flex="12"]) {
   flex: 12;
 }
-:host([as="sch"]) {
-    align-self: stretch;
-}
-:host([as="s"]) {
-    align-self: start;
-}
-:host([as="c"]) {
-    align-self: center;
-}
-:host([as="e"]) {
-    align-self: end;
-}
-
-
-/* 
-:host([sha="s"]) {
-    margin-right: auto;
-}
-:host([sha="c"]) {
-    margin-left: auto;
-    margin-right: auto;
-}
-:host([sha="e"]) {
-    margin-left: auto;
-}
-
-:host([sva="s"]) {
-    margin-bottom: auto;
-}
-:host([sva="c"]) {
-    margin-top: auto;
-    margin-bottom: auto;
-}
-:host([sva="e"]) {
-    margin-top: auto;
-} */
-
-
-/* 
-:host([d="h"][sha="s"]) {
-    align-self: start;
-}
-:host([d="h"][sha="c"]) {
-    align-self: center;
-}
-:host([d="h"][sha="e"]) {
-    align-self: flex-end;
-}
-:host([d="v"][sha="s"]) {
-}
-:host([d="v"][sha="c"]) {
-}
-:host([d="v"][sha="e"]) {
-}
-
-:host([d="h"][sva="s"]) {
-}
-:host([d="h"][sva="c"]) {
-}
-:host([d="h"][sva="e"]) {
-}
-:host([d="v"][sva="s"]) {
-}
-:host([d="v"][sva="c"]) {
-}
-:host([d="v"][sva="e"]) {
-}
-*/
-`;var ut=new CSSStyleSheet;ut.replaceSync(p`
+`;var ne={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom"},ie={mt:g,mr:g,mb:g,ml:g,m:g,mh:g,mv:g},ae={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button"},xt=w(ne,ie,ae);var St=new CSSStyleSheet;St.replaceSync(b`
   :host {
-    display: flex;
+    display: contents;
   }
-
   slot {
-    display: flex;
-    flex: 1;
-    justify-content: center;
+    display: contents;
   }
 
   button {
-    flex: 1;
     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 {
@@ -334,42 +171,38 @@ var rettangoliUi=(()=>{var{isArray:at}=Array,{getPrototypeOf:Ot,getOwnPropertyDe
   :host([t="ss"]) button,
   :host([t="es"]) button,
   :host([t="ns"]) button {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 6px;
-    padding-right: 6px;
-    border-width: 2px;
-    border-radius: 1px;
+    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 {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 12px;
-    padding-right: 12px;
-    border-width: 4px;
-    border-radius: 2px;
+    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 {
-    padding-top: 5px;
-    padding-bottom: 5px;
-    padding-left: 16px;
-    padding-right: 16px;
-    border-width: 6px;
-    border-radius: 3px;
-    font-size: 16px;
-  }
-
-  ${x}
-  ${y}
-`);var J=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[ut],b(this.shadow,this.render)}static get observedAttributes(){return["key","href","target"]}connectedCallback(){this.hasAttribute("as")||this.setAttribute("as","s"),b(this.shadow,this.render)}attributeChangedCallback(t,r,s){b(this.shadow,this.render)}render=()=>this.getAttribute("href")?u`
+    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);
+  }
+  ${xt}
+  ${j}
+`);var tt=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[St],y(this.shadow,this.render)}static get observedAttributes(){return["key","href","target","w","t"]}_buttonRef={};_assingRef=t=>{this._buttonRef.current=t;let o=m(this.getAttribute("w"));o==="f"?this._buttonRef.current.style.width="100%":o!=null&&(this._buttonRef.current.style.width=o)};attributeChangedCallback(t,o,s){if(!this._buttonRef.current)return;let r=m(this.getAttribute("w"));r==="f"?this._buttonRef.current.style.width="100%":r!=null&&(this._buttonRef.current.style.width=r,this._buttonRef.current.style.minWidth=r,this._buttonRef.current.style.maxWidth=r),y(this.shadow,this.render)}render=()=>this.getAttribute("href")?S`
         <a
           href=${this.getAttribute("href")}
           target=${this.getAttribute("target")}
@@ -378,585 +211,285 @@ var rettangoliUi=(()=>{var{isArray:at}=Array,{getPrototypeOf:Ot,getOwnPropertyDe
             <slot></slot>
           </button>
         </a>
-      `:u`
-      <button>
+      `:S`
+      <button ref=${this._assingRef}>
         <slot></slot>
       </button>
-    `},ft=J;var bt=p`
-:host([g="xs"]) slot {
-  gap: var(--spacing-xs);
-}
-:host([g="s"]) slot {
-  gap: var(--spacing-s);
-}
-:host([g="m"]) slot {
-  gap: var(--spacing-m);
-}
-:host([g="l"]) slot {
-  gap: var(--spacing-l);
-}
-:host([g="xl"]) slot {
-  gap: var(--spacing-xl);
-}
-:host([gv="xs"]) slot {
-  row-gap: var(--spacing-xs);
-}
-:host([gv="s"]) slot {
-  row-gap: var(--spacing-s);
-}
-:host([gv="m"]) slot {
-  row-gap: var(--spacing-m);
-}
-:host([gv="l"]) slot {
-  row-gap: var(--spacing-l);
-}
-:host([gv="xl"]) slot {
-  row-gap: var(--spacing-xl);
-}
-:host([gh="xs"]) slot {
-  column-gap: var(--spacing-xs);
-}
-:host([gh="s"]) slot {
-  column-gap: var(--spacing-s);
-}
-:host([gh="m"]) slot {
-  column-gap: var(--spacing-m);
-}
-:host([gh="l"]) slot {
-  column-gap: var(--spacing-l);
-}
-:host([gh="xl"]) slot {
-  column-gap: var(--spacing-xl);
-}
-`;var xt=p`
-:host([pt="xs"]) slot {
-  padding-top: var(--spacing-xs);
-}
-:host([pt="s"]) slot {
-  padding-top: var(--spacing-s);
-}
-:host([pt="m"]) slot {
-  padding-top: var(--spacing-m);
-}
-:host([pt="l"]) slot {
-  padding-top: var(--spacing-l);
-}
-:host([pt="xl"]) slot {
-  padding-top: var(--spacing-xl);
-}
-:host([pr="xs"]) slot {
-  padding-right: var(--spacing-xs);
-}
-:host([pr="s"]) slot {
-  padding-right: var(--spacing-s);
-}
-:host([pr="m"]) slot {
-  padding-right: var(--spacing-m);
-}
-:host([pr="l"]) slot {
-  padding-right: var(--spacing-l);
-}
-:host([pr="xl"]) slot {
-  padding-right: var(--spacing-xl);
-}
-:host([pb="xs"]) slot {
-  padding-bottom: var(--spacing-xs);
-}
-:host([pb="s"]) slot {
-  padding-bottom: var(--spacing-s);
-}
-:host([pb="m"]) slot {
-  padding-bottom: var(--spacing-m);
-}
-:host([pb="l"]) slot {
-  padding-bottom: var(--spacing-l);
-}
-:host([pb="xl"]) slot {
-  padding-bottom: var(--spacing-xl);
-}
-:host([pl="xs"]) slot {
-  padding-left: var(--spacing-xs);
-}
-:host([pl="s"]) slot {
-  padding-left: var(--spacing-s);
-}
-:host([pl="m"]) slot {
-  padding-left: var(--spacing-m);
-}
-:host([pl="l"]) slot {
-  padding-left: var(--spacing-l);
-}
-:host([pl="xl"]) slot {
-  padding-left: var(--spacing-xl);
-}
-:host([p="xs"]) slot {
-  padding: var(--spacing-xs);
-}
-:host([p="s"]) slot {
-  padding: var(--spacing-s);
-}
-:host([p="m"]) slot {
-  padding: var(--spacing-m);
-}
-:host([p="l"]) slot {
-  padding: var(--spacing-l);
-}
-:host([p="xl"]) slot {
-  padding: var(--spacing-xl);
-}
-:host([ph="xs"]) slot {
-  padding-left: var(--spacing-xs);
-  padding-right: var(--spacing-xs);
-}
-:host([ph="s"]) slot {
-  padding-left: var(--spacing-s);
-  padding-right: var(--spacing-s);
-}
-:host([ph="m"]) slot {
-  padding-left: var(--spacing-m);
-  padding-right: var(--spacing-m);
-}
-:host([ph="l"]) slot {
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing-l);
-}
-:host([ph="xl"]) slot {
-  padding-left: var(--spacing-xl);
-  padding-right: var(--spacing-xl);
-}
-:host([pv="xs"]) slot {
-  padding-top: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
-}
-:host([pv="s"]) slot {
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
-}
-:host([pv="m"]) slot {
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
-}
-:host([pv="l"]) slot {
-  padding-top: var(--spacing-l);
-  padding-bottom: var(--spacing-l);
-}
-:host([pv="xl"]) slot {
-  padding-top: var(--spacing-xl);
-  padding-bottom: var(--spacing-xl);
-}
-`;var yt=p`
-  :host([d="h"]) slot {
+    `},$t=tt;var Ct=b`
+
+  :host([d="h"]) {
     flex-direction: row;
   }
-  :host([d="v"]) slot {
+  :host(:not([d])) {
     flex-direction: column;
   }
-  :host([d="h"][ah="s"]) slot {
+  :host([d="h"]:not([ah])) {
     justify-content: flex-start;
   }
-  :host([d="h"][ah="c"]) slot {
+  :host([d="h"][ah="c"]) {
     justify-content: center;
+    /* align-content: center; */
   }
-  :host([d="h"][ah="e"]) slot {
+  :host([d="h"][ah="e"]) {
     justify-content: flex-end;
   }
-  :host([d="h"][av="s"]) slot {
+  :host([d="h"]:not([av])) {
     align-items: flex-start;
   }
-  :host([d="h"][av="c"]) slot {
+  :host([d="h"][av="c"]) {
     align-items: center;
+    align-content: center;
   }
-  :host([d="h"][av="e"]) slot {
+  :host([d="h"][av="e"]) {
     align-items: flex-end;
+    align-content: flex-end;
   }
-  :host([d="v"][ah="s"]) slot {
+  :host(:not([d]):not([ah])) {
     align-items: flex-start;
   }
-  :host([d="v"][ah="c"]) slot {
+  :host(:not([d])[ah="c"]) {
     align-items: center;
+    align-content: center;
   }
-  :host([d="v"][ah="e"]) slot {
+  :host(:not([d])[ah="e"]) {
     align-items: flex-end;
   }
-  :host([d="v"][av="s"]) slot {
+  :host(:not([d]):not([av])) {
     justify-content: flex-start;
   }
-  :host([d="v"][av="c"]) slot {
+  :host(:not([d])[av="c"]) {
     justify-content: center;
   }
-  :host([d="v"][av="e"]) slot {
+  :host(:not([d])[av="e"]) {
     justify-content: flex-end;
   }
-`;var D=p`
-:host([bgc="p"]) {
+  @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 le={cur:"cursor"},he={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},C=w(le,he);var kt=b`
+: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 T={xs:"--border-width-xs",s:"--border-width-s",m:"--border-width-m",l:"--border-width-l",xl:"--border-width-xl"},ce={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"},de={bgc:{p:`
     background-color: var(--color-primary);
-  }
-  :host([bgc="pc"]) {
+    color: var(--color-on-primary);
+    `,pc:`
     background-color: var(--color-primary-container);
-  }
-  :host([bgc="s"]) {
+    color: var(--color-on-primary-container);
+    `,s:`
     background-color: var(--color-secondary);
-  }
-  :host([bgc="sc"]) {
+    color: var(--color-on-secondary);
+    `,sc:`
     background-color: var(--color-secondary-container);
-  }
-  :host([bgc="e"]) {
+    color: var(--color-on-secondary-container);
+    `,e:`
     background-color: var(--color-error);
-  }
-  :host([bgc="ec"]) {
+    color: var(--color-on-error);
+    `,ec:`
     background-color: var(--color-error-container);
-  }
-  :host([bgc="su"]) {
+    color: var(--color-on-error-container);
+    `,su:`
     background-color: var(--color-surface);
-  }
-  :host([bgc="sucl"]) {
+    color: var(--color-on-surface);
+    `,sucl:`
     background-color: var(--color-surface-container-low);
-  }
-  :host([bgc="suc"]) {
+    color: var(--color-on-surface);
+    `,suc:`
     background-color: var(--color-surface-container);
-  }
-  :host([bgc="such"]) {
+    color: var(--color-on-surface);
+    `,such:`
     background-color: var(--color-surface-container-high);
-  }
-  :host([bgc="isu"]) {
+    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:g,pr:g,pb:g,pl:g,p:g,ph:g,pv:g,g,gv:g,gh:g,bw:T,bwt:T,bwr:T,bwb:T,bwl:T,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%"}},P=w(ce,de);var pe={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom"},ge={mt:g,mr:g,mb:g,ml:g,m:g,mh:g,mv:g},M=w(pe,ge);var At=new CSSStyleSheet;At.replaceSync(b`
+  slot {
+    display: contents;
   }
-  :host([h-bgc="p"]:hover) {
-    background-color: var(--color-primary);
-  }
-  :host([h-bgc="pc"]:hover) {
-    background-color: var(--color-primary-container);
-  }
-  :host([h-bgc="s"]:hover) {
-    background-color: var(--color-secondary);
-  }
-  :host([h-bgc="sc"]:hover) {
-    background-color: var(--color-secondary-container);
-  }
-  :host([h-bgc="e"]:hover) {
-    background-color: var(--color-error);
-  }
-  :host([h-bgc="ec"]:hover) {
-    background-color: var(--color-error-container);
-  }
-  :host([h-bgc="su"]:hover) {
-    background-color: var(--color-surface);
-  }
-  :host([h-bgc="sucl"]:hover) {
-    background-color: var(--color-surface-container-low);
-  }
-  :host([h-bgc="suc"]:hover) {
-    background-color: var(--color-surface-container);
-  }
-  :host([h-bgc="such"]:hover) {
-    background-color: var(--color-surface-container-high);
+  :host {
+    display: flex;
+    align-self: auto;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    border-style: solid;
+    border-width: 0;
+    box-sizing: border-box;
   }
-  :host([h-bgc="isu"]:hover) {
-    background-color: var(--color-inverse-surface);
+  :host([stretch]) {
+    align-self: stretch;
   }
-`;var S=p`
-:host([h-cur="p"]:hover){
-    cursor: pointer;
-}
-`;var H=p`
-:host([br="xs"]) {
-    border-radius: 1%;
-    overflow: hidden;
-}
-:host([br="s"]) {
-    border-radius: 2%;
-    overflow: hidden;
-}
-:host([br="m"]) {
-  border-radius: 5%;
-  overflow: hidden;
-}
-:host([br="l"]) {
-  border-radius: 10%;
-  overflow: hidden;
-}
-:host([br="xl"]) {
-  border-radius: 20%;
-  overflow: hidden;
-}
-:host([br="f"]) {
-  border-radius: 50%;
-  overflow: hidden;
-}
-`;var St=new CSSStyleSheet;St.replaceSync(p`
+  ${j}
+  ${kt}
+  ${Ct}
+  ${M}
+  ${C}
+  ${P}
+`);var et=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[At],y(this.shadow,this.render)}static get observedAttributes(){return["key","wh","w","h","hidden","s-w","s-h","s-d"]}_styles={default:{},s:{}};attributeChangedCallback(t,o,s){["default","s"].forEach(r=>{let n=d=>`${r==="default"?"":`${r}-`}${d}`,a=this.getAttribute(n("wh")),i=m(a===null?this.getAttribute(n("w")):a),p=m(a===null?this.getAttribute(n("h")):a),u=this.getAttribute(n("o")),h=this.getAttribute(n("z"));h!==null&&(this._styles[r]["z-index"]=h),u!==null&&(this._styles[r].opacity=u),i==="f"?this._styles[r].width="100%":i!==void 0&&(this._styles[r].width=i,this._styles[r]["min-width"]=i,this._styles[r]["max-width"]=i),p==="f"?this._styles[r].height="100%":p!==void 0&&(this._styles[r].height=p,this._styles[r]["min-height"]=p,this._styles[r]["max-height"]=p),this.hasAttribute("hidden")&&(this._styles[r].display="none")}),y(this.shadow,this.render)}render=()=>S`
+      <style>
+      ${D(this._styles)}
+      </style>
+      <slot></slot> `},_t=et;var ue={at:"text-align"},fe={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);
+      `}},Wt=w(ue,fe);var ve={c:"color"},be={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"}},U=w(ve,be);var jt=new CSSStyleSheet;jt.replaceSync(b`
 :host {
-  display: flex;
+  display: block;
 }
 slot {
-  display: flex;
-  flex: 1;
+  display: contents;
 }
-:host([fw="w"]) slot {
-  flex-wrap: wrap;
+:host ::slotted(a) {
+  text-decoration: var(--anchor-text-decoration);
+  color: var(--anchor-color);
 }
-${y}
-${yt}
-${bt}
-${D}
-${xt}
-${x}
-${S}
-${H}
-`);function ro(o){let t=String(o);return/[0-9]$/.test(t)}var wt=o=>{if(o!==void 0)return ro(o)?`${o}px`:o},K=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[St],b(this.shadow,this.render)}static get observedAttributes(){return["key","wh","w","h","hidden"]}connectedCallback(){this.hasAttribute("d")||this.setAttribute("d","h")}attributeChangedCallback(t,r,s){let e=this.getAttribute("wh"),a=wt(e===null?this.getAttribute("w"):e),i=wt(e===null?this.getAttribute("h"):e),n=a?`width: ${a}; min-width: ${a}; max-width: ${a};`:"",d=i?`height: ${i}; min-height: ${i}; max-height: ${i};`:"",f=this.hasAttribute("hidden")?"display: none;":"",c=`${n} ${d} ${f}`;this.style=c,this.hasAttribute("d")||this.setAttribute("d","h"),b(this.shadow,this.render)}render=()=>u`
-      <slot></slot>
-    `},$t=K;var kt=new CSSStyleSheet;kt.replaceSync(p`
-
-:host([c="on-p"]) slot {
-  color: var(--color-on-primary);
+:host ::slotted(a:hover) {
+  text-decoration: var(--anchor-text-decoration-hover);
+  color: var(--anchor-color-hover);
 }
-:host([c="on-p"]) ::slotted(a) {
-  color: var(--color-on-primary);
-  text-decoration: underline;
-  text-decoration-color: var(--color-on-primary);
-}
-
-:host([c="on-pc"]) slot {
-  color: var(--color-on-primary-container);
-}
-:host([c="on-pc"]) ::slotted(a) {
-  color: var(--color-on-primary-container);
-  text-decoration: underline;
-  text-decoration-color: var(--color-on-primary-container);
-}
-
-:host([c="on-s"]) slot {
-  color: var(--color-on-secondary);
-}
-:host([c="on-s"]) ::slotted(a) {
-  color: var(--color-on-secondary);
-  text-decoration: underline;
-  text-decoration-color: var(--color-on-secondary);
-}
-
-:host([c="on-sc"]) slot {
-  color: var(--color-on-secondary-container);
-}
-:host([c="on-sc"]) ::slotted(a) {
-  color: var(--color-on-secondary-container);
-  text-decoration: underline;
-  text-decoration-color: var(--color-on-secondary-container);
-}
-
-:host([c="on-su"]) slot {
-  color: var(--color-on-surface);
-}
-:host([c="on-su"]) ::slotted(a) {
-  color: var(--color-on-surface);
-  text-decoration: underline;
-  text-decoration-color: var(--color-on-surface);
-}
-
-:host([c="on-suv"]) slot {
-  color: var(--color-on-surface-variant);
-}
-:host([c="on-suv"]) ::slotted(a) {
-  color: var(--color-on-surface-variant);
-  text-decoration: underline;
-  text-decoration-color: var(--color-on-surface-variant);
-}
-
-:host([c="i-on-su"]) slot {
-  color: var(--color-inverse-on-surface);
-}
-:host([c="i-on-su"]) ::slotted(a) {
-  color: var(--color-inverse-on-surface);
-  text-decoration: underline;
-  text-decoration-color: var(--color-inverse-on-surface);
-}
-
-:host([c="on-e"]) slot {
-  color: var(--color-on-error);
-}
-:host([c="on-e"]) ::slotted(a) {
-  color: var(--color-on-error);
-  text-decoration: underline;
-  text-decoration-color: var(--color-on-error);
-}
-
-:host([c="on-ec"]) slot {
-  color: var(--color-on-error-container);
-}
-:host([c="on-ec"]) ::slotted(a) {
-  color: var(--color-on-error-container);
-  text-decoration: underline;
-  text-decoration-color: var(--color-on-error-container);
-}
-
-:host([s="dm"]) slot {
-  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);
-}
-
-:host([s="hm"]) slot {
-  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);
-}
-
-:host([s="tl"]) slot {
-  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);
-}
-
-:host([s="tm"]) slot {
-  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);
-}
-
-:host([s="ts"]) slot {
-  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);
-}
-
-:host([s="bl"]) slot {
-  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);
-}
-
-:host([s="bm"]) slot {
-  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);
-}
-
-:host([s="bs"]) slot {
-  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);
-}
-
-:host([s="ll"]) slot {
-  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);
-}
-
-:host([s="lm"]) slot {
-  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);
-}
-${x}
-${y}
-${S}
-`);var Q=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[kt]}static get observedAttributes(){return["key"]}connectedCallback(){b(this.shadow,this.render)}attributeChangedCallback(t,r,s){b(this.shadow,this.render)}render=()=>u`
+${Wt}
+${U}
+${M}
+${C}
+`);var ot=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[jt]}static get observedAttributes(){return["key","w","ellipsis"]}connectedCallback(){y(this.shadow,this.render)}attributeChangedCallback(t,o,s){let r=m(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),y(this.shadow,this.render)}render=()=>S`
       <slot></slot>
-    `},Ct=Q;var zt=new CSSStyleSheet;zt.replaceSync(p`
+    `},Mt=ot;var Ot=new CSSStyleSheet;Ot.replaceSync(b`
 :host {
-  display: flex;
+  border-style: solid;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-width: 0;
+}
+slot {
+  display: contents;
 }
-:host([of="contain"]) img {
+:host([of="con"]) img {
   object-fit: contain;
 }
-:host([of="cover"]) img {
+:host([of="cov"]) img {
   object-fit: cover;
 }
-img {
-  flex: 1;
+:host([of="none"]) img {
+  object-fit: none;
 }
-${x}
-${y}
-${S}
-${H}
-`);function so(o){let t=String(o);return/[0-9]$/.test(t)}var At=o=>{if(o!==void 0)return so(o)?`${o}px`:o},X=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[zt]}static get observedAttributes(){return["key","src","wh","w","h","of"]}connectedCallback(){b(this.shadow,this.render)}attributeChangedCallback(t,r,s){let e=this.getAttribute("wh"),a=At(e===null?this.getAttribute("w"):e),i=At(e===null?this.getAttribute("h"):e),n=a?`width: ${a}; min-width: ${a}; max-width: ${a};`:"",d=i?`height: ${i}; min-height: ${i}; max-height: ${i};`:"",f=this.hasAttribute("hidden")?"display: none;":"",c=`${n} ${d} ${f}`;this.style=c,b(this.shadow,this.render)}render=()=>u`
+img {
+  height: 100%;
+  width: 100%;
+}
+${P}
+${M}
+${C}
+`);var rt=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[Ot]}_styles={default:{},s:{}};static get observedAttributes(){return["key","src","wh","w","h","hidden","height","width","s-wh","s-w","s-h"]}connectedCallback(){y(this.shadow,this.render)}attributeChangedCallback(t,o,s){["default","s"].forEach(r=>{let n=d=>`${r==="default"?"":`${r}-`}${d}`,a=this.getAttribute(n("wh")),i=m(a===null?this.getAttribute(n("w")):a),p=m(a===null?this.getAttribute(n("h")):a),u=this.getAttribute(n("o")),h=this.getAttribute(n("z"));h!==null&&(this._styles[r].zIndex=h),u!==null&&(this._styles[r].opacity=u),i==="f"?this._styles[r].width="100%":i!==void 0&&(this._styles[r].width=i,this._styles[r].minWidth=i,this._styles[r].maxWidth=i),p==="f"?this._styles[r].height="100%":p!==void 0&&(this._styles[r].height=p,this._styles[r].minHeight=p,this._styles[r].maxHeight=p)}),y(this.shadow,this.render)}render=()=>S`
+      <style>
+      ${D(this._styles)}
+      </style>
       <img
         src="${this.getAttribute("src")}"
-        width="${this.getAttribute("w")}"
-        height="${this.getAttribute("h")}"
+        width="${this.getAttribute("width")}"
+        height="${this.getAttribute("height")}"
       >
-    `},Nt=X;var Et=new CSSStyleSheet;Et.replaceSync(p`
-  input[type="text"] {
-    height: 32px;
-  }
-
-  input[type="text"],
-  textarea {
-    padding: 8px 8px;
-    box-sizing: border-box;
-    border: 1px solid var(--color-outline-variant);
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-    outline: none;
-
-    font-family: Roboto, -apple-system, "Helvetica Neue", sans-serif;
-    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);
-  }
-
-  input[type="text"]:focus,
-  textarea:focus {
-    border: 1px solid var(--color-primary);
-  }
-  textarea {
-    resize: none;
-  }
-  ${y}
-  ${D}
-${x}
-`);var Y=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[Et],this._formRef={},setTimeout(()=>{b(this.shadow,this.render)})}static get observedAttributes(){return["key"]}attributeChangedCallback(t,r,s){b(this.shadow,this.render)}_handleRawSubmit=()=>{let t=new FormData(this._formRef.current),r={};for(let[s,e]of t.entries())r[s]=e;this.onClickSubmit&&this.onClickSubmit(r)};_renderTitles=()=>u`
-      ${this.formSchema.title?u`<rtgl-text s="tl" c="on-su">${this.formSchema.title}</rtgl-text>`:null}
-      ${this.formSchema.subtitle?u`<rtgl-text s="bm" c="on-su"
-            >${this.formSchema.subtitle}</rtgl-text
-          >`:null}
-    `;_renderFields=()=>this.formSchema.fields.map(t=>{let r=null,s=`width: ${this.getAttribute("width")}px;`;return t.type==="text"?r=u`<input
-          type="${t.type}"
-          name="${t.name}"
-          value="${t.value}"
-          placeholder="${t.options?.placeholder}"
-          style=${s}
-        />`:t.type==="textarea"&&(r=u`<textarea
-          name="${t.name}"
-          value="${t.value}"
-          rows="${t.options?.rows}"
-          placeholder="${t.options?.placeholder}"
-          style=${s}
-
-        ></textarea>`),u`
-        <rtgl-view d="v" g="s">
-          <rtgl-view d="v">
-            <rtgl-text s="ll" c="on-su">${t.label}</rtgl-text>
-            ${t.subLabel?u`<rtgl-text s="lm" c="on-su">${t.subLabel}</rtgl-text>`:null}
-          </rtgl-view>
-          ${r}
-        </rtgl-view>
-      `});render=()=>{let t={};return u`
-      <rtgl-view d="v" g="m" w="${this.getAttribute("width")}">
-        <rtgl-view d="v"> ${this._renderTitles()} </rtgl-view>
-        <form
-          ref=${this._formRef}
-          style="display: flex; flex-direction: column;"
-        >
-          <rtgl-view d="v" g="m">
-            ${this._renderFields()}
-            <rtgl-button as="e" t="p" onclick=${this._handleRawSubmit}>
-              ${this.formSchema.submit.label}
-            </rtgl-button>
-          </rtgl-view>
-        </form>
-      </rtgl-view>
-    `}},Mt=Y;var Tt=p`
+    `},zt=rt;var Et=b`
 :host([pt="xs"]) svg {
   padding-top: var(--spacing-xs);
 }
@@ -1072,49 +605,11 @@ ${x}
   padding-top: var(--spacing-xl);
   padding-bottom: var(--spacing-xl);
 }
-`;var jt=new CSSStyleSheet;jt.replaceSync(p`
-
-:host([f="p"]) path {
-  fill: var(--color-primary);
-}
-:host([f="s"]) path {
-  fill: var(--color-secondary);
-}
-:host([f="e"]) path {
-  fill: var(--color-error);
-}
-:host([f="on-p"]) path {
-  fill: var(--color-on-primary);
-}
-:host([f="on-pc"]) path {
-  fill: var(--color-on-primary-container);
-}
-:host([f="on-s"]) path {
-  fill: var(--color-on-secondary);
-}
-:host([f="on-sc"]) path {
-  fill: var(--color-on-secondary-container);
-}
-:host([f="on-su"]) path {
-  fill: var(--color-on-surface);
-}
-:host([f="on-suv"]) path {
-  fill: var(--color-on-surface-variant);
-}
-:host([f="i-on-su"]) path {
-  fill: var(--color-inverse-on-surface);
-}
-:host([f="on-e"]) path {
-  fill: var(--color-on-error);
-}
-:host([f="on-ec"]) path {
-  fill: var(--color-on-error-container);
-}
-
-${Tt}
-${x}
-${y}
-${S}
-`);function eo(o){let t=String(o);return/[0-9]$/.test(t)}var Wt=o=>{if(o!==void 0)return eo(o)?`${o}px`:o},tt=class o extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[jt]}static _icons={};static get observedAttributes(){return["key","svg","w","h","of","wh"]}static get icons(){return o._icons}static addIcon(t,r){o._icons[t]=r}connectedCallback(){this.render()}attributeChangedCallback(t,r,s){let e=this.getAttribute("wh"),a=Wt(e===null?this.getAttribute("w"):e),i=Wt(e===null?this.getAttribute("h"):e),n=a?`width: ${a}; min-width: ${a}; max-width: ${a};`:"",d=i?`height: ${i}; min-height: ${i}; max-height: ${i};`:"",f=this.hasAttribute("hidden")?"display: none;":"",c=`${n} ${d} ${f}`;this.style=c,this.render()}render=()=>{try{let t=this.getAttribute("svg"),r=o._icons[t]||(window.rtglIcons||{})[t];if(r){this.shadow.innerHTML=r;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},Lt=tt;customElements.define("rtgl-button",ft);customElements.define("rtgl-view",$t);customElements.define("rtgl-text",Ct);customElements.define("rtgl-image",Nt);customElements.define("rtgl-form",Mt);customElements.define("rtgl-svg",Lt);})();
+`;var Nt=new CSSStyleSheet;Nt.replaceSync(b`
+${U}
+${Et}
+${j}
+${C}
+`);var st=class e extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[Nt]}static _icons={};static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return e._icons}static addIcon(t,o){e._icons[t]=o}connectedCallback(){this.render()}attributeChangedCallback(t,o,s){let r=this.getAttribute("wh"),n=m(r===null?this.getAttribute("w"):r),a=m(r===null?this.getAttribute("h"):r);n&&(this.style.width=n),a&&(this.style.height=a),this.render()}render=()=>{try{let t=this.getAttribute("svg"),o=e._icons[t]||(window.rtglIcons||{})[t];if(o){this.shadow.innerHTML=o;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},Tt=st;customElements.define("rtgl-button",$t);customElements.define("rtgl-view",_t);customElements.define("rtgl-text",Mt);customElements.define("rtgl-image",zt);customElements.define("rtgl-svg",Tt);})();
 /*! (c) Andrea Giammarchi - MIT */
 //# sourceMappingURL=rettangoli-ui.min.js.map