rettangoli-ui 0.0.10 → 0.1.0-rc1

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

@@ -1,24 +1,24 @@
-var rettangoli=(()=>{var{isArray:at}=Array,{getPrototypeOf:Rt,getOwnPropertyDescriptor:jt}=Object,S=[],lt=()=>document.createRange(),N=(e,t,o)=>(e.set(t,o),o),Mt=(e,t)=>t.reduceRight(Wt,e),Wt=(e,t)=>e.childNodes[t],{setPrototypeOf:Et}=Object,j,ht=(e,t,o)=>(j||(j=lt()),o?j.setStartAfter(e):j.setStartBefore(e),j.setEndAfter(t),j.deleteContents(),e),Y=({firstChild:e,lastChild:t},o)=>ht(e,t,o),ct=!1,Z=(e,t)=>ct&&e.nodeType===11?1/t<0?t?Y(e,!0):e.lastChild:t?e.valueOf():e.firstChild:e,rt=e=>document.createComment(e),tt=class extends(t=>{function o(n){return Et(n,new.target.prototype)}return o.prototype=t.prototype,o})(DocumentFragment){#e=rt("<>");#o=rt("</>");#t=S;constructor(t){super(t),this.replaceChildren(this.#e,...t.childNodes,this.#o),ct=!0}get firstChild(){return this.#e}get lastChild(){return this.#o}get parentNode(){return this.#e.parentNode}remove(){Y(this,!1)}replaceWith(t){Y(this,!0).replaceWith(t)}valueOf(){let{parentNode:t}=this;if(t===this)this.#t===S&&(this.#t=[...this.childNodes]);else{if(t){let{firstChild:o,lastChild:n}=this;for(this.#t=[o];o!==n;)this.#t.push(o=o.nextSibling)}this.replaceChildren(...this.#t)}return this}},dt=(e,t,o)=>e.setAttribute(t,o),D=(e,t)=>e.removeAttribute(t),L,Ot=(e,t,o)=>{o=o.slice(1),L||(L=new WeakMap);let n=L.get(e)||N(L,e,{}),s=n[o];return s&&s[0]&&e.removeEventListener(o,...s),s=at(t)?t:[t,!1],n[o]=s,s[0]&&e.addEventListener(o,...s),t},V=(e,t)=>{let{t:o,n}=e,s=!1;switch(typeof t){case"object":if(t!==null){(n||o).replaceWith(e.n=t.valueOf());break}case"undefined":s=!0;default:o.data=s?"":t,n&&(e.n=null,n.replaceWith(o))}return t},I=(e,t,o)=>e[o]=t,Tt=(e,t,o)=>I(e,t,o.slice(1)),et=(e,t,o)=>t==null?(D(e,o),t):I(e,t,o),gt=(e,t)=>(typeof t=="function"?t(e):t.current=e,t),q=(e,t,o)=>(t==null?D(e,o):dt(e,o,t),t),Nt=(e,t,o)=>(e.toggleAttribute(o.slice(1),t),t),B=(e,t,o)=>{let{length:n}=t;if(e.data=`[${n}]`,n)return((s,i,a,r,d)=>{let p=a.length,l=i.length,h=p,c=0,g=0,u=null;for(;c<l||g<h;)if(l===c){let b=h<p?g?r(a[g-1],-0).nextSibling:r(a[h],0):d;for(;g<h;)s.insertBefore(r(a[g++],1),b)}else if(h===g)for(;c<l;)u&&u.has(i[c])||s.removeChild(r(i[c],-1)),c++;else if(i[c]===a[g])c++,g++;else if(i[l-1]===a[h-1])l--,h--;else if(i[c]===a[h-1]&&a[g]===i[l-1]){let b=r(i[--l],-0).nextSibling;s.insertBefore(r(a[g++],1),r(i[c++],-0).nextSibling),s.insertBefore(r(a[--h],1),b),i[l]=a[h]}else{if(!u){u=new Map;let b=g;for(;b<h;)u.set(a[b],b++)}if(u.has(i[c])){let b=u.get(i[c]);if(g<b&&b<h){let w=c,k=1;for(;++w<l&&w<h&&u.get(i[w])===b+k;)k++;if(k>b-g){let Q=r(i[c],0);for(;g<b;)s.insertBefore(r(a[g++],1),Q)}else s.replaceChild(r(a[g++],1),r(i[c++],-1))}else c++}else s.removeChild(r(i[c++],-1))}return a})(e.parentNode,o,t,Z,e);switch(o.length){case 1:o[0].remove();case 0:break;default:ht(Z(o[0],0),Z(o.at(-1),-0),!1)}return S},Vt=new Map([["aria",(e,t)=>{for(let o in t){let n=t[o],s=o==="role"?o:`aria-${o}`;n==null?D(e,s):dt(e,s,n)}return t}],["class",(e,t)=>et(e,t,t==null?"class":"className")],["data",(e,t)=>{let{dataset:o}=e;for(let n in t)t[n]==null?delete o[n]:o[n]=t[n];return t}],["ref",gt],["style",(e,t)=>t==null?et(e,t,"style"):I(e.style,t,"cssText")]]),zt=(e,t,o)=>{switch(t[0]){case".":return Tt;case"?":return Nt;case"@":return Ot;default:return o||"ownerSVGElement"in e?t==="ref"?gt:q:Vt.get(t)||(t in e?t.startsWith("on")?I:((n,s)=>{let i;do i=jt(n,s);while(!i&&(n=Rt(n)));return i})(e,t)?.set?et:q:q)}},Lt=(e,t)=>(e.textContent=t??"",t),T=(e,t,o)=>({a:e,b:t,c:o}),M=()=>T(null,null,S),pt=e=>(t,o)=>{let{a:n,b:s,c:i}=e(t,o),a=document.importNode(n,!0),r=S;if(s!==S){r=[];for(let c,g,u=0;u<s.length;u++){let{a:b,b:w,c:k}=s[u],Q=b===g?c:c=Mt(a,g=b);r[u]=(d=w,p=Q,l=k,h=w===B?[]:w===V?M():null,{v:S,u:d,t:p,n:l,c:h})}}var d,p,l,h;return((c,g)=>({b:c,c:g}))(i?a.firstChild:new tt(a),r)},Ht=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Bt=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,Dt=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,It=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,Pt=/[\x01\x02]/g,J,K,H=document.createElement("template"),Ut=(e,t)=>{if(t)return J||(J=document.createElementNS("http://www.w3.org/2000/svg","svg"),K=lt(),K.selectNodeContents(J)),K.createContextualFragment(e);H.innerHTML=e;let{content:o}=H;return H=H.cloneNode(!1),o},X=e=>{let t=[],o;for(;o=e.parentNode;)t.push(t.indexOf.call(o.childNodes,e)),e=o;return t},st=()=>document.createTextNode(""),Ft=(e,t,o)=>{let n=Ut(((d,p,l)=>{let h=0;return d.join("
").trim().replace(Dt,(c,g,u,b)=>`<${g}${u.replace(It,"=$2$1").trimEnd()}${b?l||Bt.test(g)?" /":`></${g}`:""}>`).replace(Pt,c=>c==="
"?`<!--${p+h++}-->`:p+h++)})(e,O,o),o),{length:s}=e,i=S;if(s>1){let d=[],p=document.createTreeWalker(n,129),l=0,h=`${O}${l++}`;for(i=[];l<s;){let c=p.nextNode();if(c.nodeType===8){if(c.data===h){let g=at(t[l-1])?B:V;g===V&&d.push(c),i.push(T(X(c),g,null)),h=`${O}${l++}`}}else{let g;for(;c.hasAttribute(h);){g||(g=X(c));let u=c.getAttribute(h);i.push(T(g,zt(c,u,o),u)),D(c,h),h=`${O}${l++}`}!o&&Ht.test(c.localName)&&c.textContent.trim()===`<!--${h}-->`&&(i.push(T(g||X(c),Lt,null)),h=`${O}${l++}`)}}for(l=0;l<d.length;l++)d[l].replaceWith(st())}let{childNodes:a}=n,{length:r}=a;return r<1?(r=1,n.appendChild(st())):r===1&&s!==1&&a[0].nodeType!==1&&(r=0),N(ut,e,T(n,i,r===1))},ut=new WeakMap,O="is\xB5",ft=e=>(t,o)=>ut.get(t)||Ft(t,o,e),Gt=pt(ft(!1)),Qt=pt(ft(!0)),ot=(e,{s:t,t:o,v:n})=>{if(e.a!==o){let{b:s,c:i}=(t?Qt:Gt)(o,n);e.a=o,e.b=s,e.c=i}for(let{c:s}=e,i=0;i<s.length;i++){let a=n[i],r=s[i];switch(r.u){case B:r.v=B(r.t,Zt(r.c,a),r.v);break;case V:let d=a instanceof _?ot(r.c||(r.c=M()),a):(r.c=null,a);d!==r.v&&(r.v=V(r,d));break;default:a!==r.v&&(r.v=r.u(r.t,a,r.n,r.v))}}return e.b},Zt=(e,t)=>{let o=0,{length:n}=t;for(n<e.length&&e.splice(n);o<n;o++){let s=t[o];s instanceof _?t[o]=ot(e[o]||(e[o]=M()),s):e[o]=null}return t},_=class{constructor(t,o,n){this.s=t,this.t=o,this.v=n}toDOM(t=M()){return ot(t,this)}};var mt=e=>(t,...o)=>new _(e,t,o),A=mt(!1),ce=mt(!0),nt=new WeakMap,R=(e,t)=>((o,n)=>{let s=nt.get(o)||N(nt,o,M()),{b:i}=s,a=typeof n=="function"?n():n,r=a instanceof _?a.toDOM(s):a;return i!==r&&o.replaceChildren((s.b=r).valueOf()),o})(e,t),it=new WeakMap,bt=e=>(t,o)=>{let n=it.get(t)||N(it,t,new Map);return n.get(o)||N(n,o,function(s,...i){return new _(e,s,i).toDOM(this)}.bind(M()))},de=bt(!1),ge=bt(!0);function m(e,...t){let o="";return e.forEach((n,s)=>{o+=n+(t[s]||"")}),o}var vt={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)"},y=(e,t,o={})=>{let n="";for(let[s,i]of Object.entries(vt)){s!=="default"&&(n+=`${i} {`);for(let[a,r]of Object.entries(t)){let d=o[a]?` ${o[a]} `:" ";for(let[p,l]of Object.entries(r)){let h=e[a],c=l.startsWith("--")?`var(${l})`:l,g=s==="default"?a:`${s}-${a}`,u=s==="default"?`h-${a}`:`${s}-h-${a}`;if(h){let w=h.split(" ").map(k=>`${k}: ${c};`).join(" ");n+=`
-            :host([${g}="${p}"])${d}{
-              ${w}
+var rettangoli=(()=>{var{isArray:Nt}=Array,{getPrototypeOf:He,getOwnPropertyDescriptor:ze}=Object,W=[],Ht=()=>document.createRange(),q=(t,e,n)=>(t.set(e,n),n),Fe=(t,e)=>e.reduceRight(je,t),je=(t,e)=>t.childNodes[e],{setPrototypeOf:Ie}=Object,F,zt=(t,e,n)=>(F||(F=Ht()),n?F.setStartAfter(t):F.setStartBefore(t),F.setEndAfter(e),F.deleteContents(),t),Rt=({firstChild:t,lastChild:e},n)=>zt(t,e,n),Ft=!1,yt=(t,e)=>Ft&&t.nodeType===11?1/e<0?e?Rt(t,!0):t.lastChild:e?t.valueOf():t.firstChild:t,Mt=t=>document.createComment(t),Ot=class extends(e=>{function n(o){return Ie(o,new.target.prototype)}return n.prototype=e.prototype,n})(DocumentFragment){#e=Mt("<>");#n=Mt("</>");#t=W;constructor(e){super(e),this.replaceChildren(this.#e,...e.childNodes,this.#n),Ft=!0}get firstChild(){return this.#e}get lastChild(){return this.#n}get parentNode(){return this.#e.parentNode}remove(){Rt(this,!1)}replaceWith(e){Rt(this,!0).replaceWith(e)}valueOf(){let{parentNode:e}=this;if(e===this)this.#t===W&&(this.#t=[...this.childNodes]);else{if(e){let{firstChild:n,lastChild:o}=this;for(this.#t=[n];n!==o;)this.#t.push(n=n.nextSibling)}this.replaceChildren(...this.#t)}return this}},jt=(t,e,n)=>t.setAttribute(e,n),st=(t,e)=>t.removeAttribute(e),ot,Ve=(t,e,n)=>{n=n.slice(1),ot||(ot=new WeakMap);let o=ot.get(t)||q(ot,t,{}),r=o[n];return r&&r[0]&&t.removeEventListener(n,...r),r=Nt(e)?e:[e,!1],o[n]=r,r[0]&&t.addEventListener(n,...r),e},X=(t,e)=>{let{t:n,n:o}=t,r=!1;switch(typeof e){case"object":if(e!==null){(o||n).replaceWith(t.n=e.valueOf());break}case"undefined":r=!0;default:n.data=r?"":e,o&&(t.n=null,o.replaceWith(n))}return e},lt=(t,e,n)=>t[n]=e,Ue=(t,e,n)=>lt(t,e,n.slice(1)),kt=(t,e,n)=>e==null?(st(t,n),e):lt(t,e,n),It=(t,e)=>(typeof e=="function"?e(t):e.current=t,e),St=(t,e,n)=>(e==null?st(t,n):jt(t,n,e),e),Ke=(t,e,n)=>(t.toggleAttribute(n.slice(1),e),e),it=(t,e,n)=>{let{length:o}=e;if(t.data=`[${o}]`,o)return((r,i,l,s,a)=>{let c=l.length,f=i.length,d=c,h=0,u=0,g=null;for(;h<f||u<d;)if(f===h){let p=d<c?u?s(l[u-1],-0).nextSibling:s(l[d],0):a;for(;u<d;)r.insertBefore(s(l[u++],1),p)}else if(d===u)for(;h<f;)g&&g.has(i[h])||r.removeChild(s(i[h],-1)),h++;else if(i[h]===l[u])h++,u++;else if(i[f-1]===l[d-1])f--,d--;else if(i[h]===l[d-1]&&l[u]===i[f-1]){let p=s(i[--f],-0).nextSibling;r.insertBefore(s(l[u++],1),s(i[h++],-0).nextSibling),r.insertBefore(s(l[--d],1),p),i[f]=l[d]}else{if(!g){g=new Map;let p=u;for(;p<d;)g.set(l[p],p++)}if(g.has(i[h])){let p=g.get(i[h]);if(u<p&&p<d){let w=h,T=1;for(;++w<f&&w<d&&g.get(i[w])===p+T;)T++;if(T>p-u){let P=s(i[h],0);for(;u<p;)r.insertBefore(s(l[u++],1),P)}else r.replaceChild(s(l[u++],1),s(i[h++],-1))}else h++}else r.removeChild(s(i[h++],-1))}return l})(t.parentNode,n,e,yt,t);switch(n.length){case 1:n[0].remove();case 0:break;default:zt(yt(n[0],0),yt(n.at(-1),-0),!1)}return W},Ye=new Map([["aria",(t,e)=>{for(let n in e){let o=e[n],r=n==="role"?n:`aria-${n}`;o==null?st(t,r):jt(t,r,o)}return e}],["class",(t,e)=>kt(t,e,e==null?"class":"className")],["data",(t,e)=>{let{dataset:n}=t;for(let o in e)e[o]==null?delete n[o]:n[o]=e[o];return e}],["ref",It],["style",(t,e)=>e==null?kt(t,e,"style"):lt(t.style,e,"cssText")]]),qe=(t,e,n)=>{switch(e[0]){case".":return Ue;case"?":return Ke;case"@":return Ve;default:return n||"ownerSVGElement"in t?e==="ref"?It:St:Ye.get(e)||(e in t?e.startsWith("on")?lt:((o,r)=>{let i;do i=ze(o,r);while(!i&&(o=He(o)));return i})(t,e)?.set?kt:St:St)}},Xe=(t,e)=>(t.textContent=e??"",e),Y=(t,e,n)=>({a:t,b:e,c:n}),j=()=>Y(null,null,W),Vt=t=>(e,n)=>{let{a:o,b:r,c:i}=t(e,n),l=document.importNode(o,!0),s=W;if(r!==W){s=[];for(let h,u,g=0;g<r.length;g++){let{a:p,b:w,c:T}=r[g],P=p===u?h:h=Fe(l,u=p);s[g]=(a=w,c=P,f=T,d=w===it?[]:w===X?j():null,{v:W,u:a,t:c,n:f,c:d})}}var a,c,f,d;return((h,u)=>({b:h,c:u}))(i?l.firstChild:new Ot(l),s)},Ge=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Je=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,Qe=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,Ze=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,tn=/[\x01\x02]/g,$t,At,rt=document.createElement("template"),en=(t,e)=>{if(e)return $t||($t=document.createElementNS("http://www.w3.org/2000/svg","svg"),At=Ht(),At.selectNodeContents($t)),At.createContextualFragment(t);rt.innerHTML=t;let{content:n}=rt;return rt=rt.cloneNode(!1),n},Ct=t=>{let e=[],n;for(;n=t.parentNode;)e.push(e.indexOf.call(n.childNodes,t)),t=n;return e},Wt=()=>document.createTextNode(""),nn=(t,e,n)=>{let o=en(((a,c,f)=>{let d=0;return a.join("
").trim().replace(Qe,(h,u,g,p)=>`<${u}${g.replace(Ze,"=$2$1").trimEnd()}${p?f||Je.test(u)?" /":`></${u}`:""}>`).replace(tn,h=>h==="
"?`<!--${c+d++}-->`:c+d++)})(t,K,n),n),{length:r}=t,i=W;if(r>1){let a=[],c=document.createTreeWalker(o,129),f=0,d=`${K}${f++}`;for(i=[];f<r;){let h=c.nextNode();if(h.nodeType===8){if(h.data===d){let u=Nt(e[f-1])?it:X;u===X&&a.push(h),i.push(Y(Ct(h),u,null)),d=`${K}${f++}`}}else{let u;for(;h.hasAttribute(d);){u||(u=Ct(h));let g=h.getAttribute(d);i.push(Y(u,qe(h,g,n),g)),st(h,d),d=`${K}${f++}`}!n&&Ge.test(h.localName)&&h.textContent.trim()===`<!--${d}-->`&&(i.push(Y(u||Ct(h),Xe,null)),d=`${K}${f++}`)}}for(f=0;f<a.length;f++)a[f].replaceWith(Wt())}let{childNodes:l}=o,{length:s}=l;return s<1?(s=1,o.appendChild(Wt())):s===1&&r!==1&&l[0].nodeType!==1&&(s=0),q(Ut,t,Y(o,i,s===1))},Ut=new WeakMap,K="is\xB5",Kt=t=>(e,n)=>Ut.get(e)||nn(e,n,t),on=Vt(Kt(!1)),rn=Vt(Kt(!0)),Et=(t,{s:e,t:n,v:o})=>{if(t.a!==n){let{b:r,c:i}=(e?rn:on)(n,o);t.a=n,t.b=r,t.c=i}for(let{c:r}=t,i=0;i<r.length;i++){let l=o[i],s=r[i];switch(s.u){case it:s.v=it(s.t,sn(s.c,l),s.v);break;case X:let a=l instanceof D?Et(s.c||(s.c=j()),l):(s.c=null,l);a!==s.v&&(s.v=X(s,a));break;default:l!==s.v&&(s.v=s.u(s.t,l,s.n,s.v))}}return t.b},sn=(t,e)=>{let n=0,{length:o}=e;for(o<t.length&&t.splice(o);n<o;n++){let r=e[n];r instanceof D?e[n]=Et(t[n]||(t[n]=j()),r):t[n]=null}return e},D=class{constructor(e,n,o){this.s=e,this.t=n,this.v=o}toDOM(e=j()){return Et(e,this)}};var Yt=t=>(e,...n)=>new D(t,e,n),y=Yt(!1),Mn=Yt(!0),Bt=new WeakMap,S=(t,e)=>((n,o)=>{let r=Bt.get(n)||q(Bt,n,j()),{b:i}=r,l=typeof o=="function"?o():o,s=l instanceof D?l.toDOM(r):l;return i!==s&&n.replaceChildren((r.b=s).valueOf()),n})(t,e),Dt=new WeakMap,qt=t=>(e,n)=>{let o=Dt.get(e)||q(Dt,e,new Map);return o.get(n)||q(o,n,function(r,...i){return new D(t,r,i).toDOM(this)}.bind(j()))},Wn=qt(!1),Bn=qt(!0);function m(t,...e){let n="";return t.forEach((o,r)=>{n+=o+(e[r]||"")}),n}var ln=["xs","sm","md","lg","xl"],Xt={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"},Gt=Object.keys(Xt),Jt=t=>t.concat(ln.flatMap(e=>t.map(n=>`${e}-${n}`))),Qt={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)"},C=(t,e={})=>{let n="";for(let[o,r]of Object.entries(Qt)){o!=="default"&&(n+=`${r} {`);for(let[i,l]of Object.entries(t)){let s=e[i]?` ${e[i]} `:" ";for(let[a,c]of Object.entries(l)){let f=Xt[i],d=c.startsWith("--")?`var(${c})`:c,h=o==="default"?i:`${o}-${i}`,u=o==="default"?`h-${i}`:`${o}-h-${i}`;if(f){let p=f.split(" ").map(w=>`${w}: ${d};`).join(" ");n+=`
+            :host([${h}="${a}"])${s}{
+              ${p}
             }
-            :host([${u}="${p}"]:hover)${d}{
-              ${w}
+            :host([${u}="${a}"]:hover)${s}{
+              ${p}
             }
           `}else n+=`
-            :host([${g}="${p}"])${d}{
-              ${l}
+            :host([${h}="${a}"])${s}{
+              ${c}
             }
-            :host([${u}="${p}"]:hover)${d}{
-              ${l}
+            :host([${u}="${a}"]:hover)${s}{
+              ${c}
             }
-          `}}s!=="default"&&(n+="}")}return n};function qt(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var Jt=e=>/%$/.test(e),v=e=>{if(e!==void 0)return Jt(e)?e:qt(e)?`${e}px`:e},f={xs:"--spacing-xs",s:"--spacing-s",m:"--spacing-m",l:"--spacing-l",xl:"--spacing-xl"};function W(e){let t="";for(let[o,n]of Object.entries(vt)){o!=="default"&&(t+=`${n} {
-`);let s="";for(let[i,a]of Object.entries(e[o]))a!=null&&(s+=`${i}: ${a};
-`);t+=`:host {
-    ${s.trim()}
+          `}}o!=="default"&&(n+="}")}return n};function an(t){if(t===null||t.includes("/"))return!1;let e=String(t);return/[0-9]$/.test(e)}var cn=t=>/%$/.test(t),$=t=>{if(t!==void 0)return cn(t)?t:an(t)?`${t}px`:Object.keys(v).includes(t)?`var(${v[t]})`:t},v={xs:"--spacing-xs",s:"--spacing-s",m:"--spacing-m",l:"--spacing-l",xl:"--spacing-xl"};function at(t){let e="";for(let[n,o]of Object.entries(Qt)){n!=="default"&&(e+=`${o} {
+`);let r="";for(let[i,l]of Object.entries(t[n]))l!=null&&(r+=`${i}: ${l};
+`);e+=`:host {
+    ${r.trim()}
     }
-`,o!=="default"&&(t+=`}
-`)}return t}var $=m`
+`,n!=="default"&&(e+=`}
+`)}return e}var I=m`
 :host([flex="0"]) {
   flex: 0;
 }
@@ -58,7 +58,53 @@ var rettangoli=(()=>{var{isArray:at}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
 :host([flex="12"]) {
   flex: 12;
 }
-`;var Kt={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom"},Xt={mt:f,mr:f,mb:f,ml:f,m:f,mh:f,mv:f},Yt={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button"},yt=y(Kt,Xt,Yt);var wt=({render:e,html:t})=>{let o=new CSSStyleSheet;return o.replaceSync(m`
+`;var dn={mt:v,mr:v,mb:v,ml:v,m:v,mh:v,mv:v,s:{sm:`
+    height: 28px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-radius: 4px;
+    font-size: var(--xs-font-size);
+    font-weight: var(--xs-font-weight);
+    line-height: var(--xs-line-height);
+    letter-spacing: var(--xs-letter-spacing);
+    `,md:`
+    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);
+    `,lg:`
+    height: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-radius: 4px;
+    font-size: var(--md-font-size);
+    font-weight: var(--md-font-weight);
+    line-height: var(--md-line-height);
+    letter-spacing: var(--md-letter-spacing);
+    `},v:{pr:`
+      background-color: var(--primary);
+      color: var(--primary-foreground);
+    `,se:`
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+    `,de:`
+      background-color: var(--destructive);
+      color: var(--primary-foreground);
+    `,ol:`
+      background-color: transparent;
+      color: var(--foreground);
+      border-width: 1px;
+    `,gh:`
+      background-color: transparent;
+      color: var(--foreground);
+    `,lk:`
+      background-color: transparent;
+      color: var(--foreground);
+    `}},fn={mt:"button",mr:"button",mb:"button",ml:"button",m:"button",mh:"button",mv:"button",s:"button",v:"button"},Zt=C(dn,fn);var te=({render:t,html:e})=>{let n=new CSSStyleSheet;return n.replaceSync(m`
     :host {
       display: contents;
     }
@@ -67,160 +113,137 @@ var rettangoli=(()=>{var{isArray:at}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
     }
 
     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;
-      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);
-    }
+      height: 32px;
+      padding-left: 16px;
+      padding-right: 16px;
+      border-radius: 4px;
 
-    button:hover {
-      cursor: pointer;
-    }
+      font-size: var(--sm-font-size);
+      font-weight: var(--sm-font-weight);
+      line-height: var(--sm-line-height);
+      letter-spacing: var(--sm-letter-spacing);
 
-    :host([t="ps"]) button,
-    :host([t="p"]) button,
-    :host([t="pl"]) button {
-      color: var(--color-on-primary);
-      border-color: var(--color-primary);
-      background-color: var(--color-primary);
+      background-color: var(--primary);
+      color: var(--primary-foreground);
     }
 
-    :host([t="ps"]) button:hover,
-    :host([t="p"]) button:hover,
-    :host([t="pl"]) button:hover {
-      border-color: var(--color-primary-hover);
-      background-color: var(--color-primary-hover);
-    }
-
-    :host([t="ps"]) button:active,
-    :host([t="p"]) button:active,
-    :host([t="pl"]) button:active {
-      border-color: var(--color-primary-active);
-      background-color: var(--color-primary-active);
+    button:hover {
+      cursor: pointer;
+      background-color: color-mix(
+        in srgb,
+        var(--primary) 85%,
+        white 15%
+      );
     }
 
-    :host([t="ss"]) button,
-    :host([t="s"]) button,
-    :host([t="sl"]) button {
-      color: var(--color-on-secondary);
-      border-color: var(--color-secondary);
-      background-color: var(--color-secondary);
+    button:disabled {
+      cursor: not-allowed;
     }
 
-    :host([t="ss"]) button:hover,
-    :host([t="s"]) button:hover,
-    :host([t="sl"]) button:hover {
-      background-color: var(--color-secondary-hover);
-      border-color: var(--color-secondary-hover);
+    button:active {
+      cursor: pointer;
+      background-color: color-mix(
+        in srgb,
+        var(--primary) 80%,
+        white 20%
+      );
     }
 
-    :host([t="ss"]) button:active,
-    :host([t="s"]) button:active,
-    :host([t="sl"]) button:active {
-      background-color: var(--color-secondary-active);
-      border-color: var(--color-secondary-active);
+    :host([v="pr"]) button:hover {
+      background-color: color-mix(
+          in srgb,
+          var(--primary) 85%,
+          white 15%
+        );
     }
 
-    :host([t="es"]) button,
-    :host([t="e"]) button,
-    :host([t="el"]) button {
-      color: var(--color-on-error);
-      border-color: var(--color-error);
-      background-color: var(--color-error);
+    :host([v="pr"]) button:active {
+      background-color: color-mix(
+          in srgb,
+          var(--primary) 80%,
+          white 20%
+        );
     }
 
-    :host([t="es"]) button:hover,
-    :host([t="e"]) button:hover,
-    :host([t="el"]) button:hover {
-      background-color: var(--color-error-hover);
-      border-color: var(--color-error-hover);
+    :host([v="se"]) button:hover {
+      background-color: color-mix(
+          in srgb,
+          var(--secondary) 85%,
+          white 15%
+        );
     }
 
-    :host([t="es"]) button:active,
-    :host([t="e"]) button:active,
-    :host([t="el"]) button:active {
-      background-color: var(--color-error-active);
-      border-color: var(--color-error-active);
+    :host([v="se"]) button:active {
+      background-color: color-mix(
+          in srgb,
+          var(--secondary) 80%,
+          white 20%
+        );
     }
 
-    :host([t="ns"]) button,
-    :host([t="n"]) button,
-    :host([t="nl"]) button {
-      color: var(--color-on-surface);
-      border-color: var(--color-surface-container);
-      background-color: var(--color-surface-container);
+    :host([v="de"]) button:hover {
+      background-color: color-mix(
+          in srgb,
+          var(--destructive) 85%,
+          white 15%
+        );
     }
 
-    :host([t="ns"]) button:hover,
-    :host([t="n"]) button:hover,
-    :host([t="nl"]) button:hover {
-      background-color: var(--color-surface-container-high);
-      border-color: var(--color-surface-container-high);
+    :host([v="de"]) button:active {
+      background-color: color-mix(
+          in srgb,
+          var(--destructive) 80%,
+          white 20%
+        );
     }
 
-    :host([t="ns"]) button:active,
-    :host([t="n"]) button:active,
-    :host([t="nl"]) button:active {
-      background-color: var(--color-surface-container-high);
-      border-color: var(--color-surface-container-high);
+    :host([v="ol"]) button:hover {
+      background-color: var(--accent);
     }
 
-    :host([t="ps"]) button,
-    :host([t="ss"]) button,
-    :host([t="es"]) button,
-    :host([t="ns"]) button {
-      height: var(--button-height-s);
-      padding-left: var(--button-padding-horizontal-s);
-      padding-right: var(--button-padding-horizontal-s);
-      border-radius: var(--button-border-radius-s);
+    :host([v="gh"]) button:hover {
+      background-color: var(--accent);
     }
 
-    :host([t="p"]) button,
-    :host([t="s"]) button,
-    :host([t="e"]) button,
-    :host([t="n"]) button {
-      height: var(--button-height-m);
-      padding-left: var(--button-padding-horizontal-m);
-      padding-right: var(--button-padding-horizontal-m);
-      border-radius: var(--button-border-radius-m);
+    :host([v="lk"]) button:hover {
+      text-decoration: underline;
     }
 
-    :host([t="pl"]) button,
-    :host([t="sl"]) button,
-    :host([t="el"]) button,
-    :host([t="nl"]) button {
-      height: var(--button-height-l);
-      padding-left: var(--button-padding-horizontal-l);
-      padding-right: var(--button-padding-horizontal-l);
-      border-radius: var(--button-border-radius-l);
-      font-size: var(--typography-label-l-font-size);
-      font-weight: var(--typography-label-l-font-weight);
-      line-height: var(--typography-label-l-line-height);
-      letter-spacing: var(--typography-label-l-letter-spacing);
-    }
-    ${yt}
-    ${$}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[o],e(this.shadow,this.render)}static get observedAttributes(){return["key","href","target","w","t"]}_buttonRef={};_assingRef=s=>{this._buttonRef.current=s;let i=v(this.getAttribute("w"));i==="f"?this._buttonRef.current.style.width="100%":i!=null&&(this._buttonRef.current.style.width=i)};attributeChangedCallback(s,i,a){if(!this._buttonRef.current)return;let r=v(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),e(this.shadow,this.render)}render=()=>this.getAttribute("href")?t`
+    ${Zt}
+    ${I}
+  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[n],t(this.shadow,this.render)}static get observedAttributes(){return["key","href","target","w","t","icon","disabled"]}_buttonRef={};_assingRef=r=>{this._buttonRef.current=r;let i=$(this.getAttribute("w"));i==="f"?this._buttonRef.current.style.width="100%":i!=null&&(this._buttonRef.current.style.width=i)};attributeChangedCallback(r,i,l){if(!this._buttonRef.current)return;let s=$(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),t(this.shadow,this.render)}renderIcon=()=>{let r=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",a=l[this.getAttribute("t")]||18;return r?e`
+        <rtgl-svg svg="${r}" c="${s}" wh="${a}"></rtgl-svg>
+      `:e``};render=()=>{let r=this.hasAttribute("disabled");return this.getAttribute("href")?e`
           <a
             href=${this.getAttribute("href")}
             target=${this.getAttribute("target")}
+            style="text-decoration: none; display: contents; color: inherit;"
           >
-            <button>
+            <button disabled="${r}">
+              ${this.renderIcon()}
               <slot></slot>
             </button>
           </a>
-        `:t`
-        <button ref=${this._assingRef}>
+        `:e`
+        <button ref=${this._assingRef} disabled="${r}">
+          ${this.renderIcon()}
           <slot></slot>
         </button>
-      `}};var P=m`
+      `}}};var ee=m`
 
   :host([d="h"]) {
     flex-direction: row;
   }
-  :host(:not([d])) {
+  :host([d="v"]) {
     flex-direction: column;
   }
   :host([d="h"]:not([ah])) {
@@ -228,7 +251,6 @@ var rettangoli=(()=>{var{isArray:at}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
   }
   :host([d="h"][ah="c"]) {
     justify-content: center;
-    /* align-content: center; */
   }
   :host([d="h"][ah="e"]) {
     justify-content: flex-end;
@@ -244,26 +266,34 @@ var rettangoli=(()=>{var{isArray:at}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
     align-items: flex-end;
     align-content: flex-end;
   }
-  :host(:not([d]):not([ah])) {
+  
+  /* Default/vertical direction - horizontal alignment */
+  :host(:not([d]):not([ah])),
+  :host([d="v"]:not([ah])) {
     align-items: flex-start;
   }
-  :host(:not([d])[ah="c"]) {
+  :host(:not([d])[ah="c"]),
+  :host([d="v"][ah="c"]) {
     align-items: center;
-    align-content: center;
   }
-  :host(:not([d])[ah="e"]) {
+  :host(:not([d])[ah="e"]),
+  :host([d="v"][ah="e"]) {
     align-items: flex-end;
-    align-content: flex-end;
   }
-  :host(:not([d]):not([av])) {
+  
+  :host(:not([d]):not([av])),
+  :host([d="v"]:not([av])) {
     justify-content: flex-start;
   }
-  :host(:not([d])[av="c"]) {
+  :host(:not([d])[av="c"]),
+  :host([d="v"][av="c"]) {
     justify-content: center;
   }
-  :host(:not([d])[av="e"]) {
+  :host(:not([d])[av="e"]),
+  :host([d="v"][av="e"]) {
     justify-content: flex-end;
   }
+  
   @media screen and (max-width: 640px) {
     :host([s-d="v"]) {
       flex-direction: column;
@@ -279,7 +309,7 @@ var rettangoli=(()=>{var{isArray:at}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
       justify-content: center;
     }
   }
-`;var te={cur:"cursor"},ee={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},x=y(te,ee);var U=m`
+`;var hn={cur:{p:"pointer",m:"move",grab:"grab",grabbing:"grabbing"}},b=C(hn);var ne=m`
 :host([sh]:not([sv])) {
     overflow-x: scroll;
     flex-wrap: nowrap;
@@ -297,43 +327,20 @@ var rettangoli=(()=>{var{isArray:at}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
     flex-wrap: nowrap;
 }
 
-`;var z={xs:"--border-width-xs",s:"--border-width-s",m:"--border-width-m",l:"--border-width-l",xl:"--border-width-xl"},oe={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"},re={bgc:{p:`
-    background-color: var(--color-primary);
-    color: var(--color-on-primary);
-    `,pc:`
-    background-color: var(--color-primary-container);
-    color: var(--color-on-primary-container);
-    `,s:`
-    background-color: var(--color-secondary);
-    color: var(--color-on-secondary);
-    `,sc:`
-    background-color: var(--color-secondary-container);
-    color: var(--color-on-secondary-container);
-    `,e:`
-    background-color: var(--color-error);
-    color: var(--color-on-error);
-    `,ec:`
-    background-color: var(--color-error-container);
-    color: var(--color-on-error-container);
-    `,su:`
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
-    `,sucl:`
-    background-color: var(--color-surface-container-low);
-    color: var(--color-on-surface);
-    `,suc:`
-    background-color: var(--color-surface-container);
-    color: var(--color-on-surface);
-    `,such:`
-    background-color: var(--color-surface-container-high);
-    color: var(--color-on-surface);
-    `,isu:`
-    background-color: var(--color-inverse-surface);
-    color: var(--color-inverse-on-surface);
-    `,o:`
-    background-color: var(--color-outline);
-    `,ov:`
-    background-color: var(--color-outline-variant);
+`;var G={xs:"--border-width-xs",s:"--border-width-s",m:"--border-width-m",l:"--border-width-l",xl:"--border-width-xl"},un={bgc:{pr:`
+    background-color: var(--primary);
+    `,se:`
+    background-color: var(--secondary);
+    `,de:`
+    background-color: var(--destructive);
+    `,bg:`
+    background-color: var(--background);
+    `,mu:`
+    background-color: var(--muted);
+    `,ac:`
+    background-color: var(--accent);
+    `,bo:`
+    background-color: var(--border);
     `},pos:{rel:"relative",abs:"absolute",fix:"fixed"},cor:{full:`
         top: 0;
         right: 0;
@@ -358,86 +365,83 @@ var rettangoli=(()=>{var{isArray:at}=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:z,bwt:z,bwr:z,bwb:z,bwl:z,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%"}},E=y(oe,re);var se={mt:"margin-top",mr:"margin-right",mb:"margin-bottom",ml:"margin-left",m:"margin",mh:"margin-left margin-right",mv:"margin-top margin-bottom"},ne={mt:f,mr:f,mb:f,ml:f,m:f,mh:f,mv:f},C=y(se,ne);var xt=({render:e,html:t})=>{let o=new CSSStyleSheet;return o.replaceSync(m`
+        `},shadow:{s:"--shadow-s",m:"--shadow-m",l:"--shadow-l"},pt:v,pr:v,pb:v,pl:v,p:v,ph:v,pv:v,g:v,gv:v,gh:v,bw:G,bwt:G,bwr:G,bwb:G,bwl:G,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"}},ct=C(un);var gn={mt:v,mr:v,mb:v,ml:v,m:v,mh:v,mv:v},x=C(gn);var oe=({render:t,html:e})=>{let n=new CSSStyleSheet;return n.replaceSync(m`
     slot {
       display: contents;
     }
     :host {
       display: flex;
+      flex-direction: column;
       align-self: auto;
       align-content: flex-start;
-      flex-wrap: wrap;
       border-style: solid;
       border-width: 0;
       box-sizing: border-box;
+      border-color: var(--border);
     }
-    :host([stretch]) {
-      align-self: stretch;
+
+    :host([fw="w"]) {
+      flex-wrap: wrap;
     }
-    ${$}
-    ${U}
-  ${P}
-  ${C}
+
+    ${I}
+    ${ne}
+  ${ee}
   ${x}
-  ${E}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[o],e(this.shadow,this.render)}static get observedAttributes(){return["key","wh","w","h","hidden","s-w","s-h","s-d"]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};attributeChangedCallback(s,i,a){["default","sm","md","lg","xl"].forEach(r=>{let d=u=>`${r==="default"?"":`${r}-`}${u}`,p=this.getAttribute(d("wh")),l=v(p===null?this.getAttribute(d("w")):p),h=v(p===null?this.getAttribute(d("h")):p),c=this.getAttribute(d("o")),g=this.getAttribute(d("z"));g!==null&&(this._styles[r]["z-index"]=g),c!==null&&(this._styles[r].opacity=c),l==="f"?this._styles[r].width="100%":l!==void 0&&(this._styles[r].width=l,this._styles[r]["min-width"]=l,this._styles[r]["max-width"]=l),h==="f"?this._styles[r].height="100%":h!==void 0&&(this._styles[r].height=h,this._styles[r]["min-height"]=h,this._styles[r]["max-height"]=h),this.hasAttribute(d("hidden"))&&(this._styles[r].display="none !important"),this.hasAttribute(d("visible"))&&(this._styles[r].display="flex !important")}),e(this.shadow,this.render)}render=()=>t`
+  ${b}
+  ${ct}
+  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[n],t(this.shadow,this.render)}static get observedAttributes(){return Jt([...Gt,"wh","w","h","hidden","sh","sv"])}_styles={default:{},sm:{},md:{},lg:{},xl:{}};attributeChangedCallback(r,i,l){["default","sm","md","lg","xl"].forEach(s=>{let a=g=>`${s==="default"?"":`${s}-`}${g}`,c=this.getAttribute(a("wh")),f=$(c===null?this.getAttribute(a("w")):c),d=$(c===null?this.getAttribute(a("h")):c),h=this.getAttribute(a("o")),u=this.getAttribute(a("z"));u!==null&&(this._styles[s]["z-index"]=u),h!==null&&(this._styles[s].opacity=h),f==="f"?this._styles[s].width="var(--width-stretch)":f!==void 0&&(this._styles[s].width=f,this._styles[s]["min-width"]=f,this._styles[s]["max-width"]=f),d==="f"?this._styles[s].height="100%":d!==void 0&&(this._styles[s].height=d,this._styles[s]["min-height"]=d,this._styles[s]["max-height"]=d),this.hasAttribute(a("hidden"))&&(this._styles[s].display="none !important"),this.hasAttribute(a("visible"))&&(this._styles[s].display="flex !important")}),t(this.shadow,this.render)}render=()=>e`
         <style>
-          ${W(this._styles)}
+          ${at(this._styles)}
         </style>
         <slot></slot>
-      `}};var ie={at:"text-align"},ae={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);
-      `}},St=y(ie,ae);var le={c:"color"},he={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"}},F=y(le,he);var $t=({render:e,html:t})=>{let o=new CSSStyleSheet;o.replaceSync(m`
+      `}};var pn={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);
+      letter-spacing: var(--h1-letter-spacing);
+    `,h2:`
+      font-size: var(--h2-font-size);
+      font-weight: var(--h2-font-weight);
+      line-height: var(--h2-line-height);
+      letter-spacing: var(--h2-letter-spacing);
+    `,h3:`
+      font-size: var(--h3-font-size);
+      font-weight: var(--h3-font-weight);
+      line-height: var(--h3-line-height);
+      letter-spacing: var(--h3-letter-spacing);
+    `,h4:`
+      font-size: var(--h4-font-size);
+      font-weight: var(--h4-font-weight);
+      line-height: var(--h4-line-height);
+      letter-spacing: var(--h4-letter-spacing);
+    `,lg:`
+      font-size: var(--lg-font-size);
+      font-weight: var(--lg-font-weight);
+      line-height: var(--lg-line-height);
+      letter-spacing: var(--lg-letter-spacing);
+    `,md:`
+      font-size: var(--md-font-size);
+      font-weight: var(--md-font-weight);
+      line-height: var(--md-line-height);
+      letter-spacing: var(--md-letter-spacing);
+    `,sm:`
+      font-size: var(--sm-font-size);
+      font-weight: var(--sm-font-weight);
+      line-height: var(--sm-line-height);
+      letter-spacing: var(--sm-letter-spacing);
+    `,xs:`
+      font-size: var(--xs-font-size);
+      font-weight: var(--xs-font-weight);
+      line-height: var(--xs-line-height);
+      letter-spacing: var(--xs-letter-spacing);
+    `}},re=C(pn);var mn={c:{fg:"--foreground",de:"--destructive","pr-fg":"--primary-foreground","se-fg":"--secondary-foreground","mu-fg":"--muted-foreground","ac-fg":"--accent-foreground"}},dt=C(mn);var ie=({render:t,html:e})=>{let n=new CSSStyleSheet;n.replaceSync(m`
     :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;
@@ -450,11 +454,11 @@ var rettangoli=(()=>{var{isArray:at}=Array,{getPrototypeOf:Rt,getOwnPropertyDesc
       text-decoration: var(--anchor-text-decoration-hover);
       color: var(--anchor-color-hover);
     }
-    ${St}
-    ${F}
-${C}
+    ${re}
+    ${dt}
 ${x}
-  `);class n extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[o]}static get observedAttributes(){return["key","w","ellipsis"]}connectedCallback(){e(this.shadow,this.render)}attributeChangedCallback(i,a,r){let d=v(this.getAttribute("w"));this.hasAttribute("ellipsis")&&(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"),d==="f"?this.style.width="100%":d!==void 0&&(this.style.width=d),e(this.shadow,this.render)}render=()=>t` <slot></slot> `}return n};var Ct=({render:e,html:t})=>{let o=new CSSStyleSheet;return o.replaceSync(m`
+${b}
+  `);class o extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[n]}static get observedAttributes(){return["key","w","ellipsis"]}connectedCallback(){t(this.shadow,this.render)}attributeChangedCallback(i,l,s){let a=$(this.getAttribute("w"));this.hasAttribute("ellipsis")&&(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"),a==="f"?this.style.width="var(--width-stretch)":a!==void 0&&(this.style.width=a),t(this.shadow,this.render)}render=()=>e` <slot></slot> `}return o};var se=({render:t,html:e})=>{let n=new CSSStyleSheet;return n.replaceSync(m`
     :host {
       border-style: solid;
       box-sizing: border-box;
@@ -477,19 +481,19 @@ ${x}
       height: 100%;
       width: 100%;
     }
-    ${E}
-    ${C}
-${x}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[o]}_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(s,i,a){["default","sm","md","lg","xl"].forEach(r=>{let d=u=>`${r==="default"?"":`${r}-`}${u}`,p=this.getAttribute(d("wh")),l=v(p===null?this.getAttribute(d("w")):p),h=v(p===null?this.getAttribute(d("h")):p),c=this.getAttribute(d("o")),g=this.getAttribute(d("z"));g!==null&&(this._styles[r].zIndex=g),c!==null&&(this._styles[r].opacity=c),l==="f"?this._styles[r].width="100%":l!==void 0&&(this._styles[r].width=l,this._styles[r]["min-width"]=l,this._styles[r]["max-width"]=l),h==="f"?this._styles[r].height="100%":h!==void 0&&(this._styles[r].height=h,this._styles[r]["min-height"]=h,this._styles[r]["max-height"]=h)}),e(this.shadow,this.render)}render=()=>t`
+    ${ct}
+    ${x}
+${b}
+  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[n]}_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(){t(this.shadow,this.render)}attributeChangedCallback(r,i,l){["default","sm","md","lg","xl"].forEach(s=>{let a=g=>`${s==="default"?"":`${s}-`}${g}`,c=this.getAttribute(a("wh")),f=$(c===null?this.getAttribute(a("w")):c),d=$(c===null?this.getAttribute(a("h")):c),h=this.getAttribute(a("o")),u=this.getAttribute(a("z"));u!==null&&(this._styles[s].zIndex=u),h!==null&&(this._styles[s].opacity=h),f==="f"?this._styles[s].width="var(--width-stretch)":f!==void 0&&(this._styles[s].width=f,this._styles[s]["min-width"]=f,this._styles[s]["max-width"]=f),d==="f"?this._styles[s].height="100%":d!==void 0&&(this._styles[s].height=d,this._styles[s]["min-height"]=d,this._styles[s]["max-height"]=d)}),t(this.shadow,this.render)}render=()=>e`
         <style>
-          ${W(this._styles)}
+          ${at(this._styles)}
         </style>
         <img
           src="${this.getAttribute("src")}"
           width="${this.getAttribute("width")}"
           height="${this.getAttribute("height")}"
         />
-      `}};var kt=m`
+      `}};var le=m`
 :host([pt="xs"]) svg {
   padding-top: var(--spacing-xs);
 }
@@ -605,42 +609,279 @@ ${x}
   padding-top: var(--spacing-xl);
   padding-bottom: var(--spacing-xl);
 }
-`;var _t=({render:e,html:t})=>{let o=new CSSStyleSheet;return o.replaceSync(m`
-    ${F}
-    ${kt}
-${$}
+`;var ae=({render:t,html:e})=>{let n=new CSSStyleSheet;return n.replaceSync(m`
+    :host {
+      color: var(--foreground);
+    }
+    ${dt}
+    ${le}
+${I}
+${b}
+  `),class ft extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[n]}static _icons={};static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return ft._icons}static addIcon(r,i){ft._icons[r]=i}connectedCallback(){this.render()}attributeChangedCallback(r,i,l){let s=this.getAttribute("wh"),a=$(s===null?this.getAttribute("w"):s),c=$(s===null?this.getAttribute("h"):s);a&&(this.style.width=a),c&&(this.style.height=c),this.render()}render=()=>{try{let r=this.getAttribute("svg"),i=ft._icons[r]||(window.rtglIcons||{})[r];if(i){this.shadow.innerHTML=i;return}}catch(r){console.log("error in rtgl-svg render",r)}this.shadow.innerHTML=""}}};var ce=({render:t,html:e})=>{let n=new CSSStyleSheet;n.replaceSync(m`
+    :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-l);
+      padding-left: var(--spacing-m);
+      padding-right: var(--spacing-m);
+      height: 32px;
+      color: var(--foreground);
+      outline: none;
+    }
+    input:focus {
+      border-color: var(--foreground);
+    }
+    input:disabled {
+      cursor: not-allowed;
+    }
+${x}
+${b}
+  `);class o extends HTMLElement{_inputRef={};constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[n]}static get observedAttributes(){return["key","w","ellipsis"]}connectedCallback(){t(this.shadow,this.render)}attributeChangedCallback(i,l,s){t(this.shadow,this.render)}get value(){return console.log("gettin gvalue",this._inputRef.current),this._inputRef.current.value}_onChange=i=>{this.onChange&&this.onChange(i.target.value)};render=()=>{let i=this.getAttribute("type")||"text",l=this.hasAttribute("disabled");return e`
+        <input ref=${this._inputRef} @keydown=${this._onChange} placeholder="${this.getAttribute("placeholder")}" type="${i}" disabled="${l}" />
+      `}}return o};var de=({render:t,html:e})=>{let n=new CSSStyleSheet;n.replaceSync(m`
+    :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-l);
+      padding-top: var(--spacing-m);
+      padding-bottom: var(--spacing-m);
+      padding-left: var(--spacing-m);
+      padding-right: var(--spacing-m);
+      color: var(--foreground);
+      outline: none;
+    }
+    textarea:focus {
+      border-color: var(--foreground);
+    }
 ${x}
-  `),class G extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[o]}static _icons={};static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return G._icons}static addIcon(s,i){G._icons[s]=i}connectedCallback(){this.render()}attributeChangedCallback(s,i,a){let r=this.getAttribute("wh"),d=v(r===null?this.getAttribute("w"):r),p=v(r===null?this.getAttribute("h"):r);d&&(this.style.width=d),p&&(this.style.height=p),this.render()}render=()=>{try{let s=this.getAttribute("svg"),i=G._icons[s]||(window.rtglIcons||{})[s];if(i){this.shadow.innerHTML=i;return}}catch(s){console.log("error in rtgl-svg render",s)}this.shadow.innerHTML=""}}};var At=({render:e,html:t})=>{let o=new CSSStyleSheet;return o.replaceSync(m`
+${b}
+  `);class o extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[n]}static get observedAttributes(){return["key","w","ellipsis"]}connectedCallback(){t(this.shadow,this.render)}attributeChangedCallback(i,l,s){t(this.shadow,this.render)}render=()=>e`
+        <textarea
+          cols=${this.getAttribute("cols")}
+          rows=${this.getAttribute("rows")}
+          placeholder=${this.getAttribute("placeholder")}
+          type="text">
+        </textarea>
+      `}return o};var _t=t=>{let e=t.map(n=>n.subscribe());return()=>{for(let n of e)n&&typeof n.unsubscribe=="function"&&n.unsubscribe()}};var R=({render:t,styleSheet:e})=>{let n;return e?n=e:(n=new CSSStyleSheet,n.replaceSync(":host { display: contents; }")),class extends vn({BaseElement:HTMLElement,render:t,skipOnMount:!1}){static get observedAttributes(){return["key"]}constructor(){super(),this.renderTarget=this.attachShadow({mode:"closed"})}connectedCallback(){this.renderTarget.adoptedStyleSheets=[n],this.baseOnMount()}disconnectedCallback(){this.baseOnUnmount()}attributeChangedCallback(){setTimeout(()=>{this.reRender()},0)}}},vn=({BaseElement:t,render:e,skipOnMount:n=!1})=>{class o extends t{_renderKey=0;_unmountCallback;disableFirstAutomatedRender=!1;get renderKey(){return String(this._renderKey)}baseOnMount=()=>{!n&&this.onMount&&(this._unmountCallback=this.onMount()),this.disableFirstAutomatedRender||this.reRender(),this.attachedObservables?Array.isArray(this.attachedObservables)?this.unsubscribe=_t(this.attachedObservables):this.unsubscribe=_t(this.attachedObservables()):this.subscriptions&&(this.unsubscribe=_t(this.subscriptions))};baseOnUnmount=()=>{this._unmountCallback&&this._unmountCallback(),this.onUnmount&&this.onUnmount(),this.unsubscribe&&this.unsubscribe()};triggerRender=()=>{this.reRender()};reRender=()=>{this._renderKey++,e(this.renderTarget,this.render())}}return o};var fe=({render:t,html:e})=>{let n=new CSSStyleSheet;n.replaceSync(m`
+    :host {
+      display: contents;
+    }
+
+    button {
+      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-l);
+      padding-left: var(--spacing-m);
+      padding-right: var(--spacing-m);
+      height: 32px;
+      color: var(--foreground);
+      outline: none;
+      cursor: pointer;
+    }
+    button:focus {
+      border-color: var(--foreground);
+    }
+
+    ${x}
+    ${b}
+  `);class o extends R({render:t,styleSheet:n}){_popoverRef={};_buttonRef={};options=[];close=()=>{this._popoverRef.current.close()};open=()=>{this._popoverRef.current.open(this._buttonRef.current)};select=i=>{this.onSelect&&this.onSelect(i),this.close()};render=()=>e`
+        <!-- TODO style this button and use proper selected value -->
+        <button ref=${this._buttonRef} onclick=${this.open}>Placeholder</button>
+
+        <rtgl-popover ref=${this._popoverRef} placement="bottom-start">
+          <rtgl-view wh="300" g="xs">
+            ${this.options.map(({value:i,label:l})=>e`
+                <rtgl-view
+                  w="f"
+                  h-bgc="mu"
+                  ph="l"
+                  pv="m"
+                  cur="p"
+                  br="m"
+                  onclick=${()=>this.select(i)}
+                >
+                  <rtgl-text>${l}</rtgl-text>
+                </rtgl-view>
+              `)}
+          </rtgl-view>
+        </rtgl-popover>
+      `}return o};var ht=Math.min,N=Math.max,J=Math.round;var E=t=>({x:t,y:t});function he(t,e){return typeof t=="function"?t(e):t}function ut(t){return t.split("-")[0]}function Tt(t){return t.split("-")[1]}function ue(t){return t==="x"?"y":"x"}function ge(t){return t==="y"?"height":"width"}function gt(t){return["top","bottom"].includes(ut(t))?"y":"x"}function pe(t){return ue(gt(t))}function Q(t){let{x:e,y:n,width:o,height:r}=t;return{width:o,height:r,top:n,left:e,right:e+o,bottom:n+r,x:e,y:n}}function me(t,e,n){let{reference:o,floating:r}=t,i=gt(e),l=pe(e),s=ge(l),a=ut(e),c=i==="y",f=o.x+o.width/2-r.width/2,d=o.y+o.height/2-r.height/2,h=o[s]/2-r[s]/2,u;switch(a){case"top":u={x:f,y:o.y-r.height};break;case"bottom":u={x:f,y:o.y+o.height};break;case"right":u={x:o.x+o.width,y:d};break;case"left":u={x:o.x-r.width,y:d};break;default:u={x:o.x,y:o.y}}switch(Tt(e)){case"start":u[l]-=h*(n&&c?-1:1);break;case"end":u[l]+=h*(n&&c?-1:1);break}return u}var ve=async(t,e,n)=>{let{placement:o="bottom",strategy:r="absolute",middleware:i=[],platform:l}=n,s=i.filter(Boolean),a=await(l.isRTL==null?void 0:l.isRTL(e)),c=await l.getElementRects({reference:t,floating:e,strategy:r}),{x:f,y:d}=me(c,o,a),h=o,u={},g=0;for(let p=0;p<s.length;p++){let{name:w,fn:T}=s[p],{x:P,y:nt,data:xt,reset:B}=await T({x:f,y:d,initialPlacement:o,placement:h,strategy:r,middlewareData:u,rects:c,platform:l,elements:{reference:t,floating:e}});f=P??f,d=nt??d,u={...u,[w]:{...u[w],...xt}},B&&g<=50&&(g++,typeof B=="object"&&(B.placement&&(h=B.placement),B.rects&&(c=B.rects===!0?await l.getElementRects({reference:t,floating:e,strategy:r}):B.rects),{x:f,y:d}=me(c,h,a)),p=-1)}return{x:f,y:d,placement:h,strategy:r,middlewareData:u}};async function bn(t,e){let{placement:n,platform:o,elements:r}=t,i=await(o.isRTL==null?void 0:o.isRTL(r.floating)),l=ut(n),s=Tt(n),a=gt(n)==="y",c=["left","top"].includes(l)?-1:1,f=i&&a?-1:1,d=he(e,t),{mainAxis:h,crossAxis:u,alignmentAxis:g}=typeof d=="number"?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:d.mainAxis||0,crossAxis:d.crossAxis||0,alignmentAxis:d.alignmentAxis};return s&&typeof g=="number"&&(u=s==="end"?g*-1:g),a?{x:u*f,y:h*c}:{x:h*c,y:u*f}}var be=function(t){return t===void 0&&(t=0),{name:"offset",options:t,async fn(e){var n,o;let{x:r,y:i,placement:l,middlewareData:s}=e,a=await bn(e,t);return l===((n=s.offset)==null?void 0:n.placement)&&(o=s.arrow)!=null&&o.alignmentOffset?{}:{x:r+a.x,y:i+a.y,data:{...a,placement:l}}}}};function mt(){return typeof window<"u"}function H(t){return xe(t)?(t.nodeName||"").toLowerCase():"#document"}function A(t){var e;return(t==null||(e=t.ownerDocument)==null?void 0:e.defaultView)||window}function L(t){var e;return(e=(xe(t)?t.ownerDocument:t.document)||window.document)==null?void 0:e.documentElement}function xe(t){return mt()?t instanceof Node||t instanceof A(t).Node:!1}function O(t){return mt()?t instanceof Element||t instanceof A(t).Element:!1}function _(t){return mt()?t instanceof HTMLElement||t instanceof A(t).HTMLElement:!1}function we(t){return!mt()||typeof ShadowRoot>"u"?!1:t instanceof ShadowRoot||t instanceof A(t).ShadowRoot}function V(t){let{overflow:e,overflowX:n,overflowY:o,display:r}=k(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(r)}function ye(t){return["table","td","th"].includes(H(t))}function Z(t){return[":popover-open",":modal"].some(e=>{try{return t.matches(e)}catch{return!1}})}function vt(t){let e=bt(),n=O(t)?k(t):t;return["transform","translate","scale","rotate","perspective"].some(o=>n[o]?n[o]!=="none":!1)||(n.containerType?n.containerType!=="normal":!1)||!e&&(n.backdropFilter?n.backdropFilter!=="none":!1)||!e&&(n.filter?n.filter!=="none":!1)||["transform","translate","scale","rotate","perspective","filter"].some(o=>(n.willChange||"").includes(o))||["paint","layout","strict","content"].some(o=>(n.contain||"").includes(o))}function Se(t){let e=M(t);for(;_(e)&&!z(e);){if(vt(e))return e;if(Z(e))return null;e=M(e)}return null}function bt(){return typeof CSS>"u"||!CSS.supports?!1:CSS.supports("-webkit-backdrop-filter","none")}function z(t){return["html","body","#document"].includes(H(t))}function k(t){return A(t).getComputedStyle(t)}function tt(t){return O(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function M(t){if(H(t)==="html")return t;let e=t.assignedSlot||t.parentNode||we(t)&&t.host||L(t);return we(e)?e.host:e}function $e(t){let e=M(t);return z(e)?t.ownerDocument?t.ownerDocument.body:t.body:_(e)&&V(e)?e:$e(e)}function pt(t,e,n){var o;e===void 0&&(e=[]),n===void 0&&(n=!0);let r=$e(t),i=r===((o=t.ownerDocument)==null?void 0:o.body),l=A(r);if(i){let s=wt(l);return e.concat(l,l.visualViewport||[],V(r)?r:[],s&&n?pt(s):[])}return e.concat(r,pt(r,[],n))}function wt(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function Re(t){let e=k(t),n=parseFloat(e.width)||0,o=parseFloat(e.height)||0,r=_(t),i=r?t.offsetWidth:n,l=r?t.offsetHeight:o,s=J(n)!==i||J(o)!==l;return s&&(n=i,o=l),{width:n,height:o,$:s}}function Oe(t){return O(t)?t:t.contextElement}function U(t){let e=Oe(t);if(!_(e))return E(1);let n=e.getBoundingClientRect(),{width:o,height:r,$:i}=Re(e),l=(i?J(n.width):n.width)/o,s=(i?J(n.height):n.height)/r;return(!l||!Number.isFinite(l))&&(l=1),(!s||!Number.isFinite(s))&&(s=1),{x:l,y:s}}var wn=E(0);function ke(t){let e=A(t);return!bt()||!e.visualViewport?wn:{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}}function xn(t,e,n){return e===void 0&&(e=!1),!n||e&&n!==A(t)?!1:e}function et(t,e,n,o){e===void 0&&(e=!1),n===void 0&&(n=!1);let r=t.getBoundingClientRect(),i=Oe(t),l=E(1);e&&(o?O(o)&&(l=U(o)):l=U(t));let s=xn(i,n,o)?ke(i):E(0),a=(r.left+s.x)/l.x,c=(r.top+s.y)/l.y,f=r.width/l.x,d=r.height/l.y;if(i){let h=A(i),u=o&&O(o)?A(o):o,g=h,p=wt(g);for(;p&&o&&u!==g;){let w=U(p),T=p.getBoundingClientRect(),P=k(p),nt=T.left+(p.clientLeft+parseFloat(P.paddingLeft))*w.x,xt=T.top+(p.clientTop+parseFloat(P.paddingTop))*w.y;a*=w.x,c*=w.y,f*=w.x,d*=w.y,a+=nt,c+=xt,g=A(p),p=wt(g)}}return Q({width:f,height:d,x:a,y:c})}function Pt(t,e){let n=tt(t).scrollLeft;return e?e.left+n:et(L(t)).left+n}function Ee(t,e,n){n===void 0&&(n=!1);let o=t.getBoundingClientRect(),r=o.left+e.scrollLeft-(n?0:Pt(t,o)),i=o.top+e.scrollTop;return{x:r,y:i}}function yn(t){let{elements:e,rect:n,offsetParent:o,strategy:r}=t,i=r==="fixed",l=L(o),s=e?Z(e.floating):!1;if(o===l||s&&i)return n;let a={scrollLeft:0,scrollTop:0},c=E(1),f=E(0),d=_(o);if((d||!d&&!i)&&((H(o)!=="body"||V(l))&&(a=tt(o)),_(o))){let u=et(o);c=U(o),f.x=u.x+o.clientLeft,f.y=u.y+o.clientTop}let h=l&&!d&&!i?Ee(l,a,!0):E(0);return{width:n.width*c.x,height:n.height*c.y,x:n.x*c.x-a.scrollLeft*c.x+f.x+h.x,y:n.y*c.y-a.scrollTop*c.y+f.y+h.y}}function Sn(t){return Array.from(t.getClientRects())}function $n(t){let e=L(t),n=tt(t),o=t.ownerDocument.body,r=N(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),i=N(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight),l=-n.scrollLeft+Pt(t),s=-n.scrollTop;return k(o).direction==="rtl"&&(l+=N(e.clientWidth,o.clientWidth)-r),{width:r,height:i,x:l,y:s}}function An(t,e){let n=A(t),o=L(t),r=n.visualViewport,i=o.clientWidth,l=o.clientHeight,s=0,a=0;if(r){i=r.width,l=r.height;let c=bt();(!c||c&&e==="fixed")&&(s=r.offsetLeft,a=r.offsetTop)}return{width:i,height:l,x:s,y:a}}function Cn(t,e){let n=et(t,!0,e==="fixed"),o=n.top+t.clientTop,r=n.left+t.clientLeft,i=_(t)?U(t):E(1),l=t.clientWidth*i.x,s=t.clientHeight*i.y,a=r*i.x,c=o*i.y;return{width:l,height:s,x:a,y:c}}function Ae(t,e,n){let o;if(e==="viewport")o=An(t,n);else if(e==="document")o=$n(L(t));else if(O(e))o=Cn(e,n);else{let r=ke(t);o={x:e.x-r.x,y:e.y-r.y,width:e.width,height:e.height}}return Q(o)}function _e(t,e){let n=M(t);return n===e||!O(n)||z(n)?!1:k(n).position==="fixed"||_e(n,e)}function Rn(t,e){let n=e.get(t);if(n)return n;let o=pt(t,[],!1).filter(s=>O(s)&&H(s)!=="body"),r=null,i=k(t).position==="fixed",l=i?M(t):t;for(;O(l)&&!z(l);){let s=k(l),a=vt(l);!a&&s.position==="fixed"&&(r=null),(i?!a&&!r:!a&&s.position==="static"&&!!r&&["absolute","fixed"].includes(r.position)||V(l)&&!a&&_e(t,l))?o=o.filter(f=>f!==l):r=s,l=M(l)}return e.set(t,o),o}function On(t){let{element:e,boundary:n,rootBoundary:o,strategy:r}=t,l=[...n==="clippingAncestors"?Z(e)?[]:Rn(e,this._c):[].concat(n),o],s=l[0],a=l.reduce((c,f)=>{let d=Ae(e,f,r);return c.top=N(d.top,c.top),c.right=ht(d.right,c.right),c.bottom=ht(d.bottom,c.bottom),c.left=N(d.left,c.left),c},Ae(e,s,r));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}}function kn(t){let{width:e,height:n}=Re(t);return{width:e,height:n}}function En(t,e,n){let o=_(e),r=L(e),i=n==="fixed",l=et(t,!0,i,e),s={scrollLeft:0,scrollTop:0},a=E(0);if(o||!o&&!i)if((H(e)!=="body"||V(r))&&(s=tt(e)),o){let h=et(e,!0,i,e);a.x=h.x+e.clientLeft,a.y=h.y+e.clientTop}else r&&(a.x=Pt(r));let c=r&&!o&&!i?Ee(r,s):E(0),f=l.left+s.scrollLeft-a.x-c.x,d=l.top+s.scrollTop-a.y-c.y;return{x:f,y:d,width:l.width,height:l.height}}function Lt(t){return k(t).position==="static"}function Ce(t,e){if(!_(t)||k(t).position==="fixed")return null;if(e)return e(t);let n=t.offsetParent;return L(t)===n&&(n=n.ownerDocument.body),n}function Te(t,e){let n=A(t);if(Z(t))return n;if(!_(t)){let r=M(t);for(;r&&!z(r);){if(O(r)&&!Lt(r))return r;r=M(r)}return n}let o=Ce(t,e);for(;o&&ye(o)&&Lt(o);)o=Ce(o,e);return o&&z(o)&&Lt(o)&&!vt(o)?n:o||Se(t)||n}var _n=async function(t){let e=this.getOffsetParent||Te,n=this.getDimensions,o=await n(t.floating);return{reference:En(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}};function Tn(t){return k(t).direction==="rtl"}var Ln={convertOffsetParentRelativeRectToViewportRelativeRect:yn,getDocumentElement:L,getClippingRect:On,getOffsetParent:Te,getElementRects:_n,getClientRects:Sn,getDimensions:kn,getScale:U,isElement:O,isRTL:Tn};var Le=be;var Pe=(t,e,n)=>{let o=new Map,r={platform:Ln,...n},i={...r.platform,_c:o};return ve(t,e,{...r,platform:i})};var Me=({render:t,html:e})=>{let n=new CSSStyleSheet;n.replaceSync(m`
+    :host {
+      display: contents;
+    }
     slot {
       display: contents;
     }
-    :host([hidden]) {
-      display: none;
+
+    ${x}
+    ${b}
+
+    @keyframes popover-in {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
     }
+
+    .popover-content {
+      animation: popover-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+      transform-origin: top;
+    }
+  `);class o extends R({render:t,styleSheet:n}){_isOpen=!1;_refElement;_floatingElement;open=i=>{this._isOpen=!0,this._refElement=i,this.reRender(),Pe(this._refElement,this._floatingElement,{placement:this.getAttribute("placement")||"bottom",middleware:[Le(12)]}).then(({x:l,y:s})=>{Object.assign(this._floatingElement.style,{left:`${l}px`,top:`${s}px`,position:"fixed"})})};close=()=>{this._isOpen=!1,this.reRender()};render=()=>this._isOpen?e`
+        <rtgl-view onclick=${this.close} pos="fix" cor="full">
+          <rtgl-view
+            ref=${i=>this._floatingElement=i}
+            bw="xs"
+            p="l"
+            class="popover-content"
+            onclick=${i=>i.stopPropagation()}
+          >
+            <slot></slot>
+          </rtgl-view>
+        </rtgl-view>
+      `:e``}return o};function Pn(t){let e=[];for(let n of t)if(e.push({title:n.title,slug:n.slug,type:n.type}),n.items&&Array.isArray(n.items))for(let o of n.items)e.push({title:o.title,slug:o.slug,type:o.type});return e}var We=({render:t,html:e})=>class extends R({render:t}){items=[];title={label:void 0,labelHref:void 0,href:void 0,image:{src:void 0,alt:void 0,width:void 0,height:void 0,href:void 0}};onMount=()=>{let o=this.getAttribute("title");o&&(console.log("titleAttribute",o),this.title=JSON.parse(decodeURIComponent(o)),this.reRender())};getItems=()=>{let o,r=this.getAttribute("items");return r?o=JSON.parse(decodeURIComponent(r)):o=this.items,Pn(o)};static get observedAttributes(){return["items"]}render=()=>e`
+        <rtgl-view h="f" w="272" bwr="xs">
+          <rtgl-view p="l">
+            <a
+              style="text-decoration: none; display: contents; color: inherit;"
+              href=${this.title.href}
+            >
+              <rtgl-view d="h" av="c" g="l">
+                ${this.title?.image?.src?e`<rtgl-image
+                      w=${this.title?.image?.width}
+                      h=${this.title?.image?.height}
+                      src=${this.title?.image?.src}
+                      alt=${this.title?.image?.alt||"Navbar"}
+                    />`:""}
+                ${this.title?.label?e`<rtgl-text s="lg">${this.title?.label}</rtgl-text>`:""}
+              </rtgl-view>
+            </a>
+          </rtgl-view>
+          <rtgl-view w="f" ph="l" pb="l" g="xs">
+            ${this.getItems().map((o,r)=>{let i=r===0;return o.type==="groupLabel"?e`
+                  <rtgl-view mt=${i?void 0:"m"} h="32" av="c" ph="m">
+                    <rtgl-text s="xs" c="mu-fg">${o.title}</rtgl-text>
+                  </rtgl-view>
+                `:e`
+                <a
+                  style="display: contents; text-decoration: none; color: inherit;"
+                  href=${o.slug}
+                >
+                  <rtgl-view
+                    h="32"
+                    av="c"
+                    ph="m"
+                    w="f"
+                    h-bgc="mu"
+                    br="l"
+                    bgc="${o.active?"mu":"bg"}"
+                    cur="p"
+                  >
+                    <rtgl-text s="sm">${o.title}</rtgl-text>
+                  </rtgl-view>
+                </a>
+              `})}
+          </rtgl-view>
+        </rtgl-view>
+      `};var Be=({render:t,html:e})=>class extends R({render:t}){items=[];_contentContainer;_selectedSlug;onUnmount=()=>{this._contentContainer.removeEventListener("scroll",this.checkCurrentHeading),window.removeEventListener("scroll",this.checkCurrentHeading)};checkCurrentHeading=()=>{let o=this._contentContainer.querySelectorAll("rtgl-text[id]"),r=Array.from(o),i=null,l=null,s=-1/0;r.forEach(a=>{let c=a.getBoundingClientRect();c.top<=100&&c.top>s&&(s=c.top,l=a.id)}),l&&l!==i&&(i=l,this._selectedSlug=l,this.reRender())};startListening=o=>{this._contentContainer=o;let r=this._contentContainer.querySelectorAll("rtgl-text[id]"),i=Array.from(r);this.items=i.map(l=>({slug:l.id,title:l.textContent})),o&&o.addEventListener("scroll",this.checkCurrentHeading,{passive:!0}),window.addEventListener("scroll",this.checkCurrentHeading,{passive:!0}),this.checkCurrentHeading()};render=()=>e`
+        <rtgl-view h="f" w="272">
+          <rtgl-view w="f" g="s" mt="xl">
+            ${this.items.map(o=>{let r=`${this._selectedSlug}`===o.slug?"fg":"mu-fg",i=`#${o.slug}`;return e`
+                <a
+                  style="display: contents; text-decoration: none; color: inherit;"
+                  href=${i}
+                >
+                  <rtgl-text s="sm" c=${r}>${o.title}</rtgl-text>
+                </a>
+              `})}
+          </rtgl-view>
+        </rtgl-view>
+      `};var De=({render:t,html:e})=>{let n=new CSSStyleSheet;n.replaceSync(m`
     :host {
-      display: flex;
-      align-self: auto;
-      align-content: flex-start;
-      flex-wrap: wrap;
-      border-style: solid;
-      border-width: 0;
-      box-sizing: border-box;
+      display: contents;
     }
-    :host([stretch]) {
-      align-self: stretch;
+    slot {
+      display: contents;
     }
-    ${$}
-    ${U}
-  ${P}
-  ${C}
-  ${x}
-  ${E}
-  `),class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[o]}connectedCallback(){e(this.shadow,this.render)}static get observedAttributes(){return["key","wh","w","h","hidden","s-w","s-h","s-d"]}_styles={default:{},sm:{},md:{},lg:{},xl:{}};attributeChangedCallback(s,i,a){["default","sm","md","lg","xl"].forEach(r=>{let d=u=>`${r==="default"?"":`${r}-`}${u}`,p=this.getAttribute(d("wh")),l=v(p===null?this.getAttribute(d("w")):p),h=v(p===null?this.getAttribute(d("h")):p),c=this.getAttribute(d("o")),g=this.getAttribute(d("z"));g!==null&&(this._styles[r]["z-index"]=g),c!==null&&(this._styles[r].opacity=c),l==="f"?this._styles[r].width="100%":l!==void 0&&(this._styles[r].width=l,this._styles[r]["min-width"]=l,this._styles[r]["max-width"]=l),h==="f"?this._styles[r].height="100%":h!==void 0&&(this._styles[r].height=h,this._styles[r]["min-height"]=h,this._styles[r]["max-height"]=h),this.hasAttribute("hidden")&&(this._styles[r].display="none")}),setTimeout(()=>{e(this.shadow,this.render)},0)}render=()=>t`
-        <style>
-          ${W(this._styles)}
-        </style>
-        <slot name="top"></slot>
-        ${this.items?.map((s,i)=>(typeof this.itemsRenderer=="function"?this.itemsRenderer:this.itemsRenderer.maps[s[this.itemsRenderer.key]])(s,i))}
-        <slot name="bottom"></slot>
-      `}};customElements.define("rtgl-button",wt({render:R,html:A}));customElements.define("rtgl-view",xt({render:R,html:A}));customElements.define("rtgl-text",$t({render:R,html:A}));customElements.define("rtgl-image",Ct({render:R,html:A}));customElements.define("rtgl-svg",_t({render:R,html:A}));customElements.define("rtgl-list-view",At({render:R,html:A}));})();
+    ${x}
+    ${b}
+  `);class o extends R({render:t,styleSheet:n}){title={label:void 0,labelHref:void 0,href:void 0,image:{src:void 0,alt:void 0,width:void 0,height:void 0,href:void 0}};onMount=()=>{let i=this.getAttribute("title");i&&(console.log("titleAttribute",i),this.title=JSON.parse(decodeURIComponent(i)),this.reRender())};render=()=>e`
+        <rtgl-view d="h" h="48" av="c" w="f">
+          <a
+            style="text-decoration: none; display: contents; color: inherit;"
+            href=${this.title.href}
+          >
+            <rtgl-view d="h" av="c" g="l">
+              ${this.title?.image?.src?e`<rtgl-image
+                    w=${this.title?.image?.width}
+                    h=${this.title?.image?.height}
+                    src=${this.title?.image?.src}
+                    alt=${this.title?.image?.alt||"Navbar"}
+                  />`:""}
+              ${this.title?.label?e`<rtgl-text s="lg">${this.title?.label}</rtgl-text>`:""}
+            </rtgl-view>
+          </a>
+          <rtgl-view flex="1"></rtgl-view>
+          <slot name="right"> </slot>
+        </rtgl-view>
+      `}return o};var Ne=({render:t,html:e})=>{let n=new CSSStyleSheet;n.replaceSync(m`
+    :host {
+      display: contents;
+    }
+    ${x}
+    ${b}
+  `);class o extends R({render:t,styleSheet:n}){form={title:void 0,description:void 0,fields:[],actions:[]};values={};fieldStates={};static get observedAttributes(){return["key","w","ellipsis"]}_onChange=(i,l)=>{console.log("onChange",{name:i,value:l}),this.values[i]=l;let s=this.form?.fields?.find(a=>a.name===i)?.validations;if(s){for(let a of s)if(a.rule instanceof RegExp){let c=a.rule.test(l);this.fieldStates[i]||(this.fieldStates[i]={}),c?delete this.fieldStates[i].error:this.fieldStates[i].error=a.message}}this.reRender()};_onSubmit=i=>{this.onSubmit&&this.onSubmit({action:i,values:this.values,fieldStates:this.fieldStates})};render=()=>e`
+        <rtgl-view p="m" w="f">
+          <form style="display: contents;">
+            <rtgl-text s="h2">${this.form.title}</rtgl-text>
+            <rtgl-text c="mu-fg">${this.form.description}</rtgl-text>
+            <rtgl-view g="l">
+              ${this.form.fields.map(i=>{if(i.type==="groupLabel")return e`<rtgl-text s="h4">${i.content}</rtgl-text> `;let l;i.type==="input"&&(l=e`
+                    <rtgl-input
+                      .onChange=${this._onChange.bind(this,i.name)}
+                      type="text"
+                      name="${i.name}"
+                    />
+                  `);let s=this.fieldStates?.[i?.name]?.error;return e`
+                  <rtgl-view g="m">
+                    <rtgl-text s="sm" c=${s?"de":"fg"}>${i.label}</rtgl-text>
+                    ${l}
+                    <rtgl-text s="sm" c="mu-fg">${i.description}</rtgl-text>
+                    ${s?e`<rtgl-text s="sm" c="de">${s}</rtgl-text>`:""}
+                  </rtgl-view>
+                `})}
+            </rtgl-view>
+            <rtgl-view g="m" mt="l" w="f">
+              ${this.form.actions.map(i=>e`<rtgl-button
+                  w=${i.fill?"f":""}
+                  onclick=${this._onSubmit.bind(this,i.id)}
+                  >${i.content}</rtgl-button
+                > `)}
+            </rtgl-view>
+          </form>
+        </rtgl-view>
+      `}return o};customElements.define("rtgl-button",te({render:S,html:y}));customElements.define("rtgl-view",oe({render:S,html:y}));customElements.define("rtgl-text",ie({render:S,html:y}));customElements.define("rtgl-image",se({render:S,html:y}));customElements.define("rtgl-svg",ae({render:S,html:y}));customElements.define("rtgl-input",ce({render:S,html:y}));customElements.define("rtgl-textarea",de({render:S,html:y}));customElements.define("rtgl-select",fe({render:S,html:y}));customElements.define("rtgl-popover",Me({render:S,html:y}));customElements.define("rtgl-sidebar",We({render:S,html:y}));customElements.define("rtgl-page-outline",Be({render:S,html:y}));customElements.define("rtgl-navbar",De({render:S,html:y}));customElements.define("rtgl-form",Ne({render:S,html:y}));})();
 /*! (c) Andrea Giammarchi - MIT */