rettangoli-ui 0.0.1

package/dist/rettangoli-ui.min.js

@@ -0,0 +1,953 @@
+var rettangoliUi=(()=>{var{isArray:rt}=Array,{getPrototypeOf:jt,getOwnPropertyDescriptor:Lt}=Object,w=[],et=()=>document.createRange(),E=(o,t,s)=>(o.set(t,s),s),{setPrototypeOf:Ot}=Object,C,at=(o,t,s)=>(C||(C=et()),s?C.setStartAfter(o):C.setStartBefore(o),C.setEndAfter(t),C.deleteContents(),o),P=({firstChild:o,lastChild:t},s)=>at(o,t,s),nt=!1,_=(o,t)=>nt&&o.nodeType===11?1/t<0?t?P(o,!0):o.lastChild:t?o.valueOf():o.firstChild:o,Y=o=>document.createComment(o),U=class extends(t=>{function s(e){return Ot(e,new.target.prototype)}return s.prototype=t.prototype,s})(DocumentFragment){#o=Y("<>");#s=Y("</>");#t=w;constructor(t){super(t),this.replaceChildren(this.#o,...t.childNodes,this.#s),nt=!0}get firstChild(){return this.#o}get lastChild(){return this.#s}get parentNode(){return this.#o.parentNode}remove(){P(this,!1)}replaceWith(t){P(this,!0).replaceWith(t)}valueOf(){let{firstChild:t,lastChild:s,parentNode:e}=this;if(e===this)this.#t===w&&(this.#t=[...this.childNodes]);else{if(e)for(this.#t=[t];t!==s;)this.#t.push(t=t.nextSibling);this.replaceChildren(...this.#t)}return this}},it=(o,t,s)=>o.setAttribute(t,s),L=(o,t)=>o.removeAttribute(t),M,Dt=(o,t,s)=>{s=s.slice(1),M||(M=new WeakMap);let e=M.get(o)||E(M,o,{}),r=e[s];return r&&r[0]&&o.removeEventListener(s,...r),r=rt(t)?t:[t,!1],e[s]=r,r[0]&&o.addEventListener(s,...r),t},T=(o,t)=>{let{t:s,n:e}=o,r=!1;switch(typeof t){case"object":if(t!==null){(e||s).replaceWith(o.n=t.valueOf());break}case"undefined":r=!0;default:s.data=r?"":t,e&&(o.n=null,e.replaceWith(s))}return t},O=(o,t,s)=>o[s]=t,Ht=(o,t,s)=>O(o,t,s.slice(1)),G=(o,t,s)=>t==null?(L(o,s),t):O(o,t,s),lt=(o,t)=>(typeof t=="function"?t(o):t.current=o,t),R=(o,t,s)=>(t==null?L(o,s):it(o,s,t),t),_t=(o,t,s)=>(o.toggleAttribute(s.slice(1),t),t),j=(o,t,s)=>{let{length:e}=t;if(o.data=`[${e}]`,e)return((r,a,i,n,d)=>{let u=i.length,p=a.length,c=u,l=0,h=0,m=null;for(;l<p||h<c;)if(p===l){let v=c<u?h?n(i[h-1],-0).nextSibling:n(i[c-h],0):d;for(;h<c;)r.insertBefore(n(i[h++],1),v)}else if(c===h)for(;l<p;)m&&m.has(a[l])||r.removeChild(n(a[l],-1)),l++;else if(a[l]===i[h])l++,h++;else if(a[p-1]===i[c-1])p--,c--;else if(a[l]===i[c-1]&&i[h]===a[p-1]){let v=n(a[--p],-1).nextSibling;r.insertBefore(n(i[h++],1),n(a[l++],-1).nextSibling),r.insertBefore(n(i[--c],1),v),a[p]=i[c]}else{if(!m){m=new Map;let v=h;for(;v<c;)m.set(i[v],v++)}if(m.has(a[l])){let v=m.get(a[l]);if(h<v&&v<c){let S=l,A=1;for(;++S<p&&S<c&&m.get(a[S])===v+A;)A++;if(A>v-h){let H=n(a[l],0);for(;h<v;)r.insertBefore(n(i[h++],1),H)}else r.replaceChild(n(i[h++],1),n(a[l++],-1))}else l++}else r.removeChild(n(a[l++],-1))}return i})(o.parentNode,s,t,_,o);switch(s.length){case 1:s[0].remove();case 0:break;default:at(_(s[0],0),_(s.at(-1),-0),!1)}return w},Rt=new Map([["aria",(o,t)=>{for(let s in t){let e=t[s],r=s==="role"?s:`aria-${s}`;e==null?L(o,r):it(o,r,e)}return t}],["class",(o,t)=>G(o,t,t==null?"class":"className")],["data",(o,t)=>{let{dataset:s}=o;for(let e in t)t[e]==null?delete s[e]:s[e]=t[e];return t}],["ref",lt],["style",(o,t)=>t==null?G(o,t,"style"):O(o.style,t,"cssText")]]),Ft=(o,t,s)=>{switch(t[0]){case".":return Ht;case"?":return _t;case"@":return Dt;default:return s||"ownerSVGElement"in o?t==="ref"?lt:R:Rt.get(t)||(t in o?t.startsWith("on")?O:((e,r)=>{let a;do a=Lt(e,r);while(!a&&(e=jt(e)));return a})(o,t)?.set?G:R:R)}},Vt=(o,t)=>(o.textContent=t??"",t),N=(o,t,s)=>({a:o,b:t,c:s}),k=()=>N(null,null,w),Bt=(o,t)=>t.reduceRight(Pt,o),Pt=(o,t)=>o.childNodes[t],ht=o=>(t,s)=>{let{a:e,b:r,c:a}=o(t,s),i=document.importNode(e,!0),n=w;if(r!==w){n=[];for(let l,h,m=0;m<r.length;m++){let{a:v,b:S,c:A}=r[m],H=v===h?l:l=Bt(i,h=v);n[m]=(d=S,u=H,p=A,c=S===j?[]:S===T?k():null,{v:w,u:d,t:u,n:p,c})}}var d,u,p,c;return((l,h)=>({b:l,c:h}))(a?i.firstChild:new U(i),n)},Ut=/^(?:plaintext|script|style|textarea|title|xmp)$/i,Gt=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,It=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,Zt=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,qt=/[\x01\x02]/g,F,V,W=document.createElement("template"),Jt=(o,t)=>{if(t)return F||(F=document.createElementNS("http://www.w3.org/2000/svg","svg"),V=et(),V.selectNodeContents(F)),V.createContextualFragment(o);W.innerHTML=o;let{content:s}=W;return W=W.cloneNode(!1),s},B=o=>{let t=[],s;for(;s=o.parentNode;)t.push(t.indexOf.call(s.childNodes,o)),o=s;return t},tt=()=>document.createTextNode(""),Kt=(o,t,s)=>{let e=Jt(((d,u,p)=>{let c=0;return d.join("
").trim().replace(It,(l,h,m,v)=>`<${h}${m.replace(Zt,"=$2$1").trimEnd()}${v?p||Gt.test(h)?" /":`></${h}`:""}>`).replace(qt,l=>l==="
"?`<!--${u+c++}-->`:u+c++)})(o,z,s),s),{length:r}=o,a=w;if(r>1){let d=[],u=document.createTreeWalker(e,129),p=0,c=`${z}${p++}`;for(a=[];p<r;){let l=u.nextNode();if(l.nodeType===8){if(l.data===c){let h=rt(t[p-1])?j:T;h===T&&d.push(l),a.push(N(B(l),h,null)),c=`${z}${p++}`}}else{let h;for(;l.hasAttribute(c);){h||(h=B(l));let m=l.getAttribute(c);a.push(N(h,Ft(l,m,s),m)),L(l,c),c=`${z}${p++}`}!s&&Ut.test(l.localName)&&l.textContent.trim()===`<!--${c}-->`&&(a.push(N(h||B(l),Vt,null)),c=`${z}${p++}`)}}for(p=0;p<d.length;p++)d[p].replaceWith(tt())}let{childNodes:i}=e,{length:n}=i;return n<1?(n=1,e.appendChild(tt())):n===1&&r!==1&&i[0].nodeType!==1&&(n=0),E(pt,o,N(e,a,n===1))},pt=new WeakMap,z="is\xB5",ct=o=>(t,s)=>pt.get(t)||Kt(t,s,o),Qt=ht(ct(!1)),Xt=ht(ct(!0)),I=(o,{s:t,t:s,v:e})=>{if(o.a!==s){let{b:r,c:a}=(t?Xt:Qt)(s,e);o.a=s,o.b=r,o.c=a}for(let{c:r}=o,a=0;a<r.length;a++){let i=e[a],n=r[a];switch(n.u){case j:n.v=j(n.t,Yt(n.c,i),n.v);break;case T:let d=i instanceof $?I(n.c||(n.c=k()),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},Yt=(o,t)=>{let s=0,{length:e}=t;for(e<o.length&&o.splice(e);s<e;s++){let r=t[s];r instanceof $?t[s]=I(o[s]||(o[s]=k()),r):o[s]=null}return t},$=class{constructor(t,s,e){this.s=t,this.t=s,this.v=e}toDOM(t=k()){return I(t,this)}};var gt=o=>(t,...s)=>new $(o,t,s),f=gt(!1),ro=gt(!0),ot=new WeakMap,x=(o,t)=>((s,e,r)=>{let a=ot.get(s)||E(ot,s,k()),{b:i}=a,n=r&&typeof e=="function"?e():e,d=n instanceof $?n.toDOM(a):n;return i!==d&&s.replaceChildren((a.b=d).valueOf()),s})(o,t,!0),st=new WeakMap,dt=o=>(t,s)=>{let e=st.get(t)||E(st,t,new Map);return e.get(s)||E(e,s,function(r,...a){return new $(o,r,a).toDOM(this)}.bind(k()))},eo=dt(!1),ao=dt(!0);function g(o,...t){let s="";return o.forEach((e,r)=>{s+=e+(t[r]||"")}),s}var b=g`
+: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=g`
+:host([flex="0"]) {
+  flex: 0;
+}
+:host([flex="1"]) {
+  flex: 1;
+}
+:host([flex="2"]) {
+  flex: 2;
+}
+:host([flex="3"]) {
+  flex: 3;
+}
+:host([flex="4"]) {
+  flex: 4;
+}
+:host([flex="5"]) {
+  flex: 5;
+}
+:host([flex="6"]) {
+  flex: 6;
+}
+:host([flex="7"]) {
+  flex: 7;
+}
+:host([flex="8"]) {
+  flex: 8;
+}
+:host([flex="9"]) {
+  flex: 9;
+}
+:host([flex="10"]) {
+  flex: 10;
+}
+:host([flex="11"]) {
+  flex: 11;
+}
+:host([flex="12"]) {
+  flex: 12;
+}
+
+:host([as="sch"]) {
+    align-self: stretch;
+}
+
+/* 
+: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 mt=new CSSStyleSheet;mt.replaceSync(g`
+:host {
+  display: flex;
+}
+
+slot {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+button {
+  flex: 1;
+  border-style: solid;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+:host([t="ps"]) button,
+:host([t="p"]) button,
+:host([t="pl"]) button {
+  color: var(--color-on-primary);
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
+}
+
+:host([t="ps"]) button:hover,
+:host([t="p"]) button:hover,
+:host([t="pl"]) button:hover {
+  border-color: var(--color-primary-hover);
+  background-color: var(--color-primary-hover);
+}
+
+:host([t="ps"]) button:active,
+:host([t="p"]) button:active,
+:host([t="pl"]) button:active {
+  border-color: var(--color-primary-active);
+  background-color: var(--color-primary-active);
+}
+
+:host([t="ss"]) button,
+:host([t="s"]) button,
+:host([t="sl"]) button {
+  color: var(--color-on-secondary);
+  border-color: var(--color-secondary);
+  background-color: var(--color-secondary);
+}
+
+:host([t="ss"]) button:hover,
+:host([t="s"]) button:hover,
+:host([t="sl"]) button:hover {
+  background-color: var(--color-secondary-hover);
+  border-color: var(--color-secondary-hover);
+}
+
+:host([t="ss"]) button:active,
+:host([t="s"]) button:active,
+:host([t="sl"]) button:active {
+  background-color: var(--color-secondary-active);
+  border-color: var(--color-secondary-active);
+}
+
+:host([t="es"]) button,
+:host([t="e"]) button,
+:host([t="el"]) button {
+  color: var(--color-on-error);
+  border-color: var(--color-error);
+  background-color: var(--color-error);
+}
+
+:host([t="es"]) button:hover,
+:host([t="e"]) button:hover,
+:host([t="el"]) button:hover {
+  background-color: var(--color-error-hover);
+  border-color: var(--color-error-hover);
+}
+
+:host([t="es"]) button:active,
+:host([t="e"]) button:active,
+:host([t="el"]) button:active {
+  background-color: var(--color-error-active);
+  border-color: var(--color-error-active);
+}
+
+:host([t="ps"]) button,
+:host([t="ss"]) button,
+:host([t="es"]) button {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
+  border-width: 2px;
+  border-radius: 1px;
+}
+
+:host([t="p"]) button,
+:host([t="s"]) button,
+:host([t="e"]) button {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 12px;
+  padding-right: 12px;
+  border-width: 4px;
+  border-radius: 2px;
+}
+
+:host([t="pl"]) button,
+:host([t="sl"]) button,
+:host([t="el"]) button {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
+  border-width: 6px;
+  border-radius: 3px;
+  font-size: 16px;
+}
+
+${b}
+${y}
+`);var Z=class extends HTMLElement{constructor(){super();let t=this.attachShadow({mode:"closed"});t.adoptedStyleSheets=[mt],x(t,this.render)}render=()=>f`
+      <button>
+        <slot></slot>
+      </button>
+    `},vt=Z;var ft=g`
+: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 ut=g`
+: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 xt=g`
+  :host([d="h"]) slot {
+    flex-direction: row;
+  }
+  :host([d="v"]) slot {
+    flex-direction: column;
+  }
+  :host([d="h"][ah="s"]) slot {
+    justify-content: flex-start;
+  }
+  :host([d="h"][ah="c"]) slot {
+    justify-content: center;
+  }
+  :host([d="h"][ah="e"]) slot {
+    justify-content: flex-end;
+  }
+  :host([d="h"][av="s"]) slot {
+    align-items: flex-start;
+  }
+  :host([d="h"][av="c"]) slot {
+    align-items: center;
+  }
+  :host([d="h"][av="e"]) slot {
+    align-items: flex-end;
+  }
+  :host([d="v"][ah="s"]) slot {
+    align-items: flex-start;
+  }
+  :host([d="v"][ah="c"]) slot {
+    align-items: center;
+  }
+  :host([d="v"][ah="e"]) slot {
+    align-items: flex-end;
+  }
+  :host([d="v"][av="s"]) slot {
+    justify-content: flex-start;
+  }
+  :host([d="v"][av="c"]) slot {
+    justify-content: center;
+  }
+  :host([d="v"][av="e"]) slot {
+    justify-content: flex-end;
+  }
+`;var D=g`
+:host([bgc="p"]) {
+    background-color: var(--color-primary);
+  }
+  :host([bgc="pc"]) {
+    background-color: var(--color-primary-container);
+  }
+  :host([bgc="s"]) {
+    background-color: var(--color-secondary);
+  }
+  :host([bgc="sc"]) {
+    background-color: var(--color-secondary-container);
+  }
+  :host([bgc="e"]) {
+    background-color: var(--color-error);
+  }
+  :host([bgc="ec"]) {
+    background-color: var(--color-error-container);
+  }
+  :host([bgc="su"]) {
+    background-color: var(--color-surface);
+  }
+  :host([bgc="sucl"]) {
+    background-color: var(--color-surface-container-low);
+  }
+  :host([bgc="suc"]) {
+    background-color: var(--color-surface-container);
+  }
+  :host([bgc="such"]) {
+    background-color: var(--color-surface-container-high);
+  }
+  :host([bgc="isu"]) {
+    background-color: var(--color-inverse-surface);
+  }
+`;var yt=new CSSStyleSheet;yt.replaceSync(g`
+:host {
+  display: flex;
+}
+slot {
+  display: flex;
+  flex: 1;
+}
+:host([fw="w"]) slot {
+  flex-wrap: wrap;
+}
+${y}
+${xt}
+${ft}
+${D}
+${ut}
+${b}
+`);function to(o){let t=String(o);return/[0-9]$/.test(t)}var bt=o=>{if(o!==void 0)return to(o)?`${o}px`:o},q=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[yt],x(this.shadow,this.render)}static get observedAttributes(){return["wh","w","h","hidden"]}attributeChangedCallback(t,s,e){let r=this.getAttribute("wh"),a=bt(r===null?this.getAttribute("w"):r),i=bt(r===null?this.getAttribute("h"):r),n=a?`width: ${a}; min-width: ${a}; max-width: ${a};`:"",d=i?`height: ${i}; min-height: ${i}; max-height: ${i};`:"",u=this.hasAttribute("hidden")?"display: none;":"",p=`${n} ${d} ${u}`;this.style=p,x(this.shadow,this.render)}render=()=>f`
+      <slot></slot>
+    `},wt=q;var St=new CSSStyleSheet;St.replaceSync(g`
+:host([c="on-p"]) slot {
+  color: var(--color-on-primary);
+}
+:host([c="on-pc"]) slot {
+  color: var(--color-on-primary-container);
+}
+:host([c="on-s"]) slot {
+  color: var(--color-on-secondary);
+}
+:host([c="on-sc"]) slot {
+  color: var(--color-on-secondary-container);
+}
+:host([c="on-su"]) slot {
+  color: var(--color-on-surface);
+}
+:host([c="on-suv"]) slot {
+  color: var(--color-on-surface-variant);
+}
+:host([c="i-on-su"]) slot {
+  color: var(--color-inverse-on-surface);
+}
+:host([c="on-e"]) slot {
+  color: var(--color-on-error);
+}
+:host([c="on-ec"]) slot {
+  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);
+}
+
+${b}
+${y}
+`);var J=class extends HTMLElement{constructor(){super();let t=this.attachShadow({mode:"closed"});t.adoptedStyleSheets=[St],x(t,this.render)}render(){return f`
+      <slot></slot>
+    `}},$t=J;var kt=new CSSStyleSheet;kt.replaceSync(g`
+:host {
+  display: flex;
+}
+:host([of="contain"]) img {
+  object-fit: contain;
+}
+:host([of="cover"]) img {
+  object-fit: cover;
+}
+img {
+  flex: 1;
+}
+${b}
+${y}
+`);function oo(o){let t=String(o);return/[0-9]$/.test(t)}var Ct=o=>{if(o!==void 0)return oo(o)?`${o}px`:o},K=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[kt],setTimeout(()=>{x(this.shadow,this.render)})}static get observedAttributes(){return["src","wh","w","h","of"]}attributeChangedCallback(t,s,e){let r=this.getAttribute("wh"),a=Ct(r===null?this.getAttribute("w"):r),i=Ct(r===null?this.getAttribute("h"):r),n=a?`width: ${a}; min-width: ${a}; max-width: ${a};`:"",d=i?`height: ${i}; min-height: ${i}; max-height: ${i};`:"",u=this.hasAttribute("hidden")?"display: none;":"",p=`${n} ${d} ${u}`;this.style=p,x(this.shadow,this.render)}render=()=>f`
+      <img
+        src="${this.getAttribute("src")}"
+        width="${this.getAttribute("w")}"
+        height="${this.getAttribute("h")}"
+      >
+    `},At=K;var zt=new CSSStyleSheet;zt.replaceSync(g`
+  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}
+${b}
+`);var Q=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[zt],this._formRef={},setTimeout(()=>{x(this.shadow,this.render)})}_handleRawSubmit=()=>{let t=new FormData(this._formRef.current),s={};for(let[e,r]of t.entries())s[e]=r;this.onClickSubmit&&this.onClickSubmit(s)};_renderTitles=()=>f`
+      ${this.formSchema.title?f`<rtgl-text s="tl" c="on-su">${this.formSchema.title}</rtgl-text>`:null}
+      ${this.formSchema.subtitle?f`<rtgl-text s="bm" color="on-su"
+            >${this.formSchema.subtitle}</rtgl-text
+          >`:null}
+    `;_renderFields=()=>this.formSchema.fields.map(t=>{let s=null;return t.type==="text"?s=f`<input
+          type="${t.type}"
+          name="${t.name}"
+          value="${t.value}"
+          placeholder="${t.options?.placeholder}"
+        />`:t.type==="textarea"&&(s=f`<textarea
+          name="${t.name}"
+          value="${t.value}"
+          rows="${t.options?.rows}"
+          placeholder="${t.options?.placeholder}"
+        ></textarea>`),f`
+        <rtgl-view d="v" g="s">
+          <rtgl-view d="v">
+            <rtgl-text s="ll" c="on-su">${t.label}</rtgl-text>
+            ${t.subLabel?f`<rtgl-text s="lm" c="on-su">${t.subLabel}</rtgl-text>`:null}
+          </rtgl-view>
+          ${s}
+        </rtgl-view>
+      `});render=()=>{let t={};return f`
+      <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 t="p" onclick=${this._handleRawSubmit}>
+              ${this.formSchema.submit.label}
+            </rtgl-button>
+          </rtgl-view>
+        </form>
+      </rtgl-view>
+    `}},Nt=Q;var Et=g`
+:host([pt="xs"]) svg {
+  padding-top: var(--spacing-xs);
+}
+:host([pt="s"]) svg {
+  padding-top: var(--spacing-s);
+}
+:host([pt="m"]) svg {
+  padding-top: var(--spacing-m);
+}
+:host([pt="l"]) svg {
+  padding-top: var(--spacing-l);
+}
+:host([pt="xl"]) svg {
+  padding-top: var(--spacing-xl);
+}
+:host([pr="xs"]) svg {
+  padding-right: var(--spacing-xs);
+}
+:host([pr="s"]) svg {
+  padding-right: var(--spacing-s);
+}
+:host([pr="m"]) svg {
+  padding-right: var(--spacing-m);
+}
+:host([pr="l"]) svg {
+  padding-right: var(--spacing-l);
+}
+:host([pr="xl"]) svg {
+  padding-right: var(--spacing-xl);
+}
+:host([pb="xs"]) svg {
+  padding-bottom: var(--spacing-xs);
+}
+:host([pb="s"]) svg {
+  padding-bottom: var(--spacing-s);
+}
+:host([pb="m"]) svg {
+  padding-bottom: var(--spacing-m);
+}
+:host([pb="l"]) svg {
+  padding-bottom: var(--spacing-l);
+}
+:host([pb="xl"]) svg {
+  padding-bottom: var(--spacing-xl);
+}
+:host([pl="xs"]) svg {
+  padding-left: var(--spacing-xs);
+}
+:host([pl="s"]) svg {
+  padding-left: var(--spacing-s);
+}
+:host([pl="m"]) svg {
+  padding-left: var(--spacing-m);
+}
+:host([pl="l"]) svg {
+  padding-left: var(--spacing-l);
+}
+:host([pl="xl"]) svg {
+  padding-left: var(--spacing-xl);
+}
+:host([p="xs"]) svg {
+  padding: var(--spacing-xs);
+}
+:host([p="s"]) svg {
+  padding: var(--spacing-s);
+}
+:host([p="m"]) svg {
+  padding: var(--spacing-m);
+}
+:host([p="l"]) svg {
+  padding: var(--spacing-l);
+}
+:host([p="xl"]) svg {
+  padding: var(--spacing-xl);
+}
+:host([ph="xs"]) svg {
+  padding-left: var(--spacing-xs);
+  padding-right: var(--spacing-xs);
+}
+:host([ph="s"]) svg {
+  padding-left: var(--spacing-s);
+  padding-right: var(--spacing-s);
+}
+:host([ph="m"]) svg {
+  padding-left: var(--spacing-m);
+  padding-right: var(--spacing-m);
+}
+:host([ph="l"]) svg {
+  padding-left: var(--spacing-l);
+  padding-right: var(--spacing-l);
+}
+:host([ph="xl"]) svg {
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
+}
+:host([pv="xs"]) svg {
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+}
+:host([pv="s"]) svg {
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
+}
+:host([pv="m"]) svg {
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
+}
+:host([pv="l"]) svg {
+  padding-top: var(--spacing-l);
+  padding-bottom: var(--spacing-l);
+}
+:host([pv="xl"]) svg {
+  padding-top: var(--spacing-xl);
+  padding-bottom: var(--spacing-xl);
+}
+`;var Mt=new CSSStyleSheet;Mt.replaceSync(g`
+
+: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);
+}
+
+${Et}
+${b}
+${y}
+`);function so(o){let t=String(o);return/[0-9]$/.test(t)}var Tt=o=>{if(o!==void 0)return so(o)?`${o}px`:o},X=class o extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[Mt],setTimeout(()=>{this.render()})}static _icons={};static get observedAttributes(){return["src","w","h","of","wh"]}static get icons(){return o._icons}static addIcon(t,s){o._icons[t]=s}attributeChangedCallback(t,s,e){let r=this.getAttribute("wh"),a=Tt(r===null?this.getAttribute("w"):r),i=Tt(r===null?this.getAttribute("h"):r),n=a?`width: ${a}; min-width: ${a}; max-width: ${a};`:"",d=i?`height: ${i}; min-height: ${i}; max-height: ${i};`:"",u=this.hasAttribute("hidden")?"display: none;":"",p=`${n} ${d} ${u}`;this.style=p,this.render()}render=()=>{try{let t=this.getAttribute("svg"),s=o._icons[t]||(window.rtglIcons||{})[t];if(s){this.shadow.innerHTML=s;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},Wt=X;customElements.define("rtgl-button",vt);customElements.define("rtgl-view",wt);customElements.define("rtgl-text",$t);customElements.define("rtgl-image",At);customElements.define("rtgl-form",Nt);customElements.define("rtgl-svg",Wt);})();
+/*! (c) Andrea Giammarchi - MIT */
+//# sourceMappingURL=rettangoli-ui.min.js.map