@rettangoli/ui 1.0.0-rc2 → 1.0.0-rc4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -1
- package/dist/rettangoli-iife-layout.min.js +52 -52
- package/dist/rettangoli-iife-ui.min.js +10 -10
- package/package.json +5 -2
- package/src/common.js +18 -9
- package/src/themes/reset.css +86 -0
- package/src/themes/theme-catppuccin.css +178 -0
- package/src/themes/theme-default.css +176 -0
package/README.md
CHANGED
|
@@ -34,7 +34,19 @@ customElements.define('rtgl-view', RettangoliView({}));
|
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
### Stylesheet
|
|
37
|
-
You must
|
|
37
|
+
You must load two CSS files in this order:
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<link rel="stylesheet" href="node_modules/@rettangoli/ui/src/themes/reset.css">
|
|
41
|
+
<link rel="stylesheet" href="node_modules/@rettangoli/ui/src/themes/theme-default.css">
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
`reset.css` is required for base HTML normalization. Then choose exactly one theme file.
|
|
45
|
+
|
|
46
|
+
Available prebuilt themes:
|
|
47
|
+
|
|
48
|
+
- `src/themes/theme-default.css`
|
|
49
|
+
- `src/themes/theme-catppuccin.css`
|
|
38
50
|
|
|
39
51
|
---
|
|
40
52
|
|
|
@@ -12,27 +12,27 @@ var rettangoli=(()=>{var z=`
|
|
|
12
12
|
bottom: 0;
|
|
13
13
|
z-index: 1;
|
|
14
14
|
}
|
|
15
|
-
`,I=({linkElement:i,href:t,newTab:e,rel:s})=>{i.href=t,e?i.target="_blank":i.removeAttribute("target"),s!=null?i.rel=s:e?i.rel="noopener noreferrer":i.removeAttribute("rel")},W=({shadowRoot:i,slotElement:t,linkElement:e,href:s,newTab:n,rel:r})=>{if(t.parentNode!==i&&i.appendChild(t),!s)return e&&e.parentNode===i&&i.removeChild(e),null;let o=e||document.createElement("a");return I({linkElement:o,href:s,newTab:n,rel:r}),o.parentNode!==i&&i.appendChild(o),o},
|
|
16
|
-
${
|
|
17
|
-
${
|
|
15
|
+
`,I=({linkElement:i,href:t,newTab:e,rel:s})=>{i.href=t,e?i.target="_blank":i.removeAttribute("target"),s!=null?i.rel=s:e?i.rel="noopener noreferrer":i.removeAttribute("rel")},W=({shadowRoot:i,slotElement:t,linkElement:e,href:s,newTab:n,rel:r})=>{if(t.parentNode!==i&&i.appendChild(t),!s)return e&&e.parentNode===i&&i.removeChild(e),null;let o=e||document.createElement("a");return I({linkElement:o,href:s,newTab:n,rel:r}),o.parentNode!==i&&i.appendChild(o),o},j=({shadowRoot:i,childElement:t,linkElement:e,href:s,newTab:n,rel:r})=>{if(!s)return e?(t.parentNode===e&&i.appendChild(t),e.parentNode===i&&i.removeChild(e),null):(t.parentNode!==i&&i.appendChild(t),null);let o=e||document.createElement("a");return I({linkElement:o,href:s,newTab:n,rel:r}),t.parentNode!==o&&o.appendChild(t),o.parentNode!==i&&i.appendChild(o),o};var x=["default","sm","md","lg","xl"],g=()=>x.reduce((i,t)=>(i[t]={},i),{});var St=/^([1-9]|1[0-2])fg$/,N=i=>typeof i=="string"&&St.test(i),f=({styleBucket:i,axis:t,dimension:e,fillValue:s,allowFlexGrow:n=!1,lockBounds:r=!0})=>{if(e!==void 0){if(e==="f"){i[t]=s;return}if(n&&N(e)){i["flex-grow"]=e.slice(0,-2),i["flex-basis"]="0%";return}i[t]=e,r&&(i[`min-${t}`]=e,i[`max-${t}`]=e)}},R=({style:i,width:t,fillValue:e="var(--width-stretch)",allowFlexGrow:s=!0,flexMinWidth:n="0"})=>{if(t==="f"){i.width=e,i.flexGrow="",i.flexBasis="",i.minWidth="";return}if(s&&N(t)){i.width="",i.flexGrow=t.slice(0,-2),i.flexBasis="0%",i.minWidth=n;return}if(t!=null){i.width=t,i.flexGrow="",i.flexBasis="",i.minWidth="";return}i.width="",i.flexGrow="",i.flexBasis="",i.minWidth=""};function u(i,...t){let e="";return i.forEach((s,n)=>{e+=s+(t[n]||"")}),e}var Et=["sm","md","lg","xl"],tt={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",cur:"cursor"},A=Object.keys(tt),_=i=>i.concat(Et.flatMap(t=>i.map(e=>`${t}-${e}`))),et={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)"},b=(i,t={},e=null)=>{let s="";for(let[n,r]of Object.entries(et)){n!=="default"&&(s+=`${r} {`);for(let[o,a]of Object.entries(i))for(let[l,h]of Object.entries(a)){let m=tt[o],y=h.startsWith("--")?`var(${h})`:h,S=n==="default"?o:`${n}-${o}`,L=n==="default"?`h-${o}`:`${n}-h-${o}`,C=($,k=!1)=>{let E=k?`:host([${$}="${l}"]:hover)`:`:host([${$}="${l}"])`;if(e)return e.split(",").map(T=>`${E} ${T.trim()}`).join(", ");let B=t[o];return B?`${E} ${B}`:E};if(m){let k=m.split(" ").map(E=>`${E}: ${y};`).join(" ");s+=`
|
|
16
|
+
${C(S)}{
|
|
17
|
+
${k}
|
|
18
18
|
}
|
|
19
|
-
${
|
|
20
|
-
${
|
|
19
|
+
${C(L,!0)}{
|
|
20
|
+
${k}
|
|
21
21
|
}
|
|
22
22
|
`}else s+=`
|
|
23
|
-
${
|
|
24
|
-
${
|
|
23
|
+
${C(S)}{
|
|
24
|
+
${h}
|
|
25
25
|
}
|
|
26
|
-
${
|
|
27
|
-
${
|
|
26
|
+
${C(L,!0)}{
|
|
27
|
+
${h}
|
|
28
28
|
}
|
|
29
|
-
`}
|
|
30
|
-
`);let o="";for(let[l
|
|
29
|
+
`}n!=="default"&&(s+="}")}return s};function At(i){if(i===null||i.includes("/"))return!1;let t=String(i);return/[0-9]$/.test(t)}var kt=i=>/%$/.test(i),Ct=i=>/^([1-9]|1[0-2])fg$/.test(i),c=i=>{if(i!==void 0)return Ct(i)||kt(i)?i:At(i)?`${i}px`:Object.keys(d).includes(i)?`var(${d[i]})`:i},d={xs:"--spacing-xs",sm:"--spacing-sm",md:"--spacing-md",lg:"--spacing-lg",xl:"--spacing-xl"};function w(i,t=":host"){let e="",s=["default","xl","lg","md","sm"];for(let n of s){let r=et[n];if(!i[n]||Object.keys(i[n]).length===0)continue;n!=="default"&&(e+=`${r} {
|
|
30
|
+
`);let o="";for(let[a,l]of Object.entries(i[n]))l!=null&&(o+=`${a}: ${l} !important;
|
|
31
31
|
`);e+=`${t} {
|
|
32
32
|
${o.trim()}
|
|
33
33
|
}
|
|
34
34
|
`,n!=="default"&&(e+=`}
|
|
35
|
-
`)}return e}var $t={mt:
|
|
35
|
+
`)}return e}var $t={mt:d,mr:d,mb:d,ml:d,m:d,mh:d,mv:d,s:{sm:`
|
|
36
36
|
height: 28px;
|
|
37
37
|
padding-left: 12px;
|
|
38
38
|
padding-right: 12px;
|
|
@@ -81,7 +81,7 @@ var rettangoli=(()=>{var z=`
|
|
|
81
81
|
`,lk:`
|
|
82
82
|
background-color: transparent;
|
|
83
83
|
color: var(--foreground);
|
|
84
|
-
`}},it=
|
|
84
|
+
`}},it=b($t,{},".surface");var zt=[{prefix:"sm",maxWidth:640},{prefix:"md",maxWidth:768},{prefix:"lg",maxWidth:1024},{prefix:"xl",maxWidth:1280}],P=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
85
85
|
:host {
|
|
86
86
|
display: inline-flex;
|
|
87
87
|
}
|
|
@@ -249,7 +249,7 @@ var rettangoli=(()=>{var z=`
|
|
|
249
249
|
}
|
|
250
250
|
|
|
251
251
|
${it}
|
|
252
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._containerElement=null,this._surfaceElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._prefixIcon=null,this._suffixIcon=null,this._surfaceElement.className="surface",this._surfaceElement.appendChild(this._slotElement),this._onWindowResize=this._onWindowResize.bind(this)}static get observedAttributes(){return["key","href","new-tab","rel","w","pre","suf","disabled","v","s","sq","sm-s","md-s","lg-s","xl-s"]}connectedCallback(){window.addEventListener("resize",this._onWindowResize),this._updateButton()}disconnectedCallback(){window.removeEventListener("resize",this._onWindowResize)}attributeChangedCallback(t,e,s){this._updateButton()}_onWindowResize(){(this.hasAttribute("sm-s")||this.hasAttribute("md-s")||this.hasAttribute("lg-s")||this.hasAttribute("xl-s"))&&this._updateIcon()}_resolveResponsiveSizeToken(){let t=window.innerWidth;for(let{prefix:e,maxWidth:s}of zt){let n=`${e}-s`;if(t<=s&&this.hasAttribute(n))return this.getAttribute(n)}return this.getAttribute("s")}_updateButton(){this.shadow.innerHTML="";let t=this.hasAttribute("disabled"),e=this.getAttribute("href"),s=this.hasAttribute("new-tab"),n=this.getAttribute("rel"),r=e&&!t,o=r?"a":"button";if(this._surfaceElement.tagName.toLowerCase()!==o){let
|
|
252
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._containerElement=null,this._surfaceElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._prefixIcon=null,this._suffixIcon=null,this._surfaceElement.className="surface",this._surfaceElement.appendChild(this._slotElement),this._onWindowResize=this._onWindowResize.bind(this)}static get observedAttributes(){return["key","href","new-tab","rel","w","pre","suf","disabled","v","s","sq","sm-s","md-s","lg-s","xl-s"]}connectedCallback(){window.addEventListener("resize",this._onWindowResize),this._updateButton()}disconnectedCallback(){window.removeEventListener("resize",this._onWindowResize)}attributeChangedCallback(t,e,s){this._updateButton()}_onWindowResize(){(this.hasAttribute("sm-s")||this.hasAttribute("md-s")||this.hasAttribute("lg-s")||this.hasAttribute("xl-s"))&&this._updateIcon()}_resolveResponsiveSizeToken(){let t=window.innerWidth;for(let{prefix:e,maxWidth:s}of zt){let n=`${e}-s`;if(t<=s&&this.hasAttribute(n))return this.getAttribute(n)}return this.getAttribute("s")}_updateButton(){this.shadow.innerHTML="";let t=this.hasAttribute("disabled"),e=this.getAttribute("href"),s=this.hasAttribute("new-tab"),n=this.getAttribute("rel"),r=e&&!t,o=r?"a":"button";if(this._surfaceElement.tagName.toLowerCase()!==o){let a=document.createElement(o);a.className="surface",a.appendChild(this._slotElement),this._surfaceElement=a}this._updateIcon(),this.hasAttribute("sq")?(this.style.width="",this.style.minWidth="",this.style.maxWidth="",this._surfaceElement.style.width="",this._surfaceElement.style.minWidth="",this._surfaceElement.style.maxWidth=""):this._updateWidth(),r?(I({linkElement:this._surfaceElement,href:e,newTab:s,rel:n}),this._surfaceElement.removeAttribute("disabled")):(this._surfaceElement.removeAttribute("href"),this._surfaceElement.removeAttribute("target"),this._surfaceElement.removeAttribute("rel"),t?this._surfaceElement.setAttribute("disabled",""):this._surfaceElement.removeAttribute("disabled")),this.shadow.appendChild(this._surfaceElement),this._containerElement=this._surfaceElement}_updateIcon(){this._prefixIcon&&(this._prefixIcon.remove(),this._prefixIcon=null),this._suffixIcon&&(this._suffixIcon.remove(),this._suffixIcon=null);let t={sm:14,md:18,lg:22},e=this._resolveResponsiveSizeToken(),s=18;this.hasAttribute("sq")?s={sm:14,lg:22}[e]||18:s=t[e]||18;let n=this.getAttribute("pre");n&&(this._prefixIcon=document.createElement("rtgl-svg"),this._prefixIcon.setAttribute("svg",n),this._prefixIcon.setAttribute("wh",s.toString()),this._prefixIcon.style.color="inherit",this._surfaceElement.insertBefore(this._prefixIcon,this._slotElement));let r=this.getAttribute("suf");r&&(this._suffixIcon=document.createElement("rtgl-svg"),this._suffixIcon.setAttribute("svg",r),this._suffixIcon.setAttribute("wh",s.toString()),this._suffixIcon.style.color="inherit",this._surfaceElement.appendChild(this._suffixIcon))}_updateWidth(){let t=c(this.getAttribute("w"));t==="f"?(this.style.width="var(--width-stretch)",this.style.minWidth="",this.style.maxWidth="",this._surfaceElement.style.width="100%",this._surfaceElement.style.minWidth="",this._surfaceElement.style.maxWidth=""):t!=null?(this.style.width=t,this.style.minWidth=t,this.style.maxWidth=t,this._surfaceElement.style.width="100%",this._surfaceElement.style.minWidth="",this._surfaceElement.style.maxWidth=""):(this.style.width="",this.style.minWidth="",this.style.maxWidth="",this._surfaceElement.style.width="",this._surfaceElement.style.minWidth="",this._surfaceElement.style.maxWidth="")}getBoundingClientRect(){return this._surfaceElement?this._surfaceElement.getBoundingClientRect():super.getBoundingClientRect()}},st=({render:i,html:t})=>P;var nt=u`
|
|
253
253
|
|
|
254
254
|
:host([d="h"]) {
|
|
255
255
|
flex-direction: row;
|
|
@@ -320,7 +320,7 @@ var rettangoli=(()=>{var z=`
|
|
|
320
320
|
justify-content: center;
|
|
321
321
|
}
|
|
322
322
|
}
|
|
323
|
-
`;var It={cur:{alias:"alias","all-scroll":"all-scroll",auto:"auto",cell:"cell","col-resize":"col-resize","context-menu":"context-menu",copy:"copy",crosshair:"crosshair",default:"default","e-resize":"e-resize","ew-resize":"ew-resize",grab:"grab",grabbing:"grabbing",help:"help",move:"move","n-resize":"n-resize","ne-resize":"ne-resize","nesw-resize":"nesw-resize","ns-resize":"ns-resize","nw-resize":"nw-resize","nwse-resize":"nwse-resize","no-drop":"no-drop",none:"none","not-allowed":"not-allowed",pointer:"pointer",progress:"progress","row-resize":"row-resize","s-resize":"s-resize","se-resize":"se-resize","sw-resize":"sw-resize",text:"text",url:"url","w-resize":"w-resize",wait:"wait","zoom-in":"zoom-in","zoom-out":"zoom-out"}},
|
|
323
|
+
`;var It={cur:{alias:"alias","all-scroll":"all-scroll",auto:"auto",cell:"cell","col-resize":"col-resize","context-menu":"context-menu",copy:"copy",crosshair:"crosshair",default:"default","e-resize":"e-resize","ew-resize":"ew-resize",grab:"grab",grabbing:"grabbing",help:"help",move:"move","n-resize":"n-resize","ne-resize":"ne-resize","nesw-resize":"nesw-resize","ns-resize":"ns-resize","nw-resize":"nw-resize","nwse-resize":"nwse-resize","no-drop":"no-drop",none:"none","not-allowed":"not-allowed",pointer:"pointer",progress:"progress","row-resize":"row-resize","s-resize":"s-resize","se-resize":"se-resize","sw-resize":"sw-resize",text:"text",url:"url","w-resize":"w-resize",wait:"wait","zoom-in":"zoom-in","zoom-out":"zoom-out"}},p=b(It);var rt=u`
|
|
324
324
|
:host([sh]:not([sv])) {
|
|
325
325
|
overflow-x: scroll;
|
|
326
326
|
flex-wrap: nowrap;
|
|
@@ -382,7 +382,7 @@ var rettangoli=(()=>{var z=`
|
|
|
382
382
|
left: 0;
|
|
383
383
|
top: 0;
|
|
384
384
|
height: 100%;
|
|
385
|
-
`},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:
|
|
385
|
+
`},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},pt:d,pr:d,pb:d,pl:d,p:d,ph:d,pv:d,g:d,gv:d,gh:d,bw:O,bwt:O,bwr:O,bwb:O,bwl:O,bc:{pr:"--primary",se:"--secondary",de:"--destructive",fg:"--foreground",bg:"--background",mu:"--muted",ac:"--accent",bo:"--border",tr:"transparent"},br:{xs:"--border-radius-xs",sm:"--border-radius-sm",md:"--border-radius-md",lg:"--border-radius-lg",xl:"--border-radius-xl",f:"--border-radius-f"}},ot=b(Wt);var Ot={mt:d,mr:d,mb:d,ml:d,m:d,mh:d,mv:d},v=b(Ot);var D=u`
|
|
386
386
|
a, a:link, a:visited, a:hover, a:active {
|
|
387
387
|
color: inherit;
|
|
388
388
|
text-decoration: none;
|
|
@@ -392,7 +392,7 @@ var rettangoli=(()=>{var z=`
|
|
|
392
392
|
margin: 0;
|
|
393
393
|
font: inherit;
|
|
394
394
|
}
|
|
395
|
-
`;var
|
|
395
|
+
`;var H=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
396
396
|
slot {
|
|
397
397
|
display: contents;
|
|
398
398
|
}
|
|
@@ -410,12 +410,12 @@ var rettangoli=(()=>{var z=`
|
|
|
410
410
|
|
|
411
411
|
${rt}
|
|
412
412
|
${nt}
|
|
413
|
-
${
|
|
414
|
-
${
|
|
413
|
+
${v}
|
|
414
|
+
${p}
|
|
415
415
|
${ot}
|
|
416
|
-
${
|
|
416
|
+
${D}
|
|
417
417
|
${z}
|
|
418
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",..._([...
|
|
418
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._slotElement=document.createElement("slot"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return["href","new-tab","rel",..._([...A,"op","wh","w","h","hide","show","sh","sv","z","d","ah","av","wrap","no-wrap","overflow"])]}_styles=g();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=W({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}connectedCallback(){this.updateStyles()}updateStyles(){this._styles=g(),x.forEach(e=>{let s=T=>`${e==="default"?"":`${e}-`}${T}`,n=this.getAttribute(s("wh")),r=c(n===null?this.getAttribute(s("w")):n),o=c(n===null?this.getAttribute(s("h")):n),a=this.getAttribute(s("op")),l=this.getAttribute(s("z"));l!==null&&(this._styles[e]["z-index"]=l),a!==null&&(this._styles[e].opacity=a),f({styleBucket:this._styles[e],axis:"width",dimension:r,fillValue:"var(--width-stretch)",allowFlexGrow:!0}),f({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%",allowFlexGrow:!0}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="flex");let h=this.getAttribute(s("d")),m=this.getAttribute(s("ah")),y=this.getAttribute(s("av"));h==="h"?this._styles[e]["flex-direction"]="row":h==="v"?this._styles[e]["flex-direction"]="column":e==="default"&&!h&&["sm","md","lg","xl"].some(xt=>this.hasAttribute(`${xt}-d`))&&(this._styles[e]["flex-direction"]="column");let S=h==="h",L=h==="v"||!h;S&&(m==="c"?this._styles[e]["justify-content"]="center":m==="e"?this._styles[e]["justify-content"]="flex-end":m==="s"&&(this._styles[e]["justify-content"]="flex-start"),y==="c"?(this._styles[e]["align-items"]="center",this._styles[e]["align-content"]="center"):y==="e"?(this._styles[e]["align-items"]="flex-end",this._styles[e]["align-content"]="flex-end"):y==="s"&&(this._styles[e]["align-items"]="flex-start")),L&&(m!==null||y!==null)&&(m==="c"?this._styles[e]["align-items"]="center":m==="e"?this._styles[e]["align-items"]="flex-end":m==="s"&&(this._styles[e]["align-items"]="flex-start"),y==="c"?this._styles[e]["justify-content"]="center":y==="e"?this._styles[e]["justify-content"]="flex-end":y==="s"&&(this._styles[e]["justify-content"]="flex-start"));let C=this.hasAttribute(s("wrap")),$=this.hasAttribute(s("no-wrap"));C&&(this._styles[e]["flex-wrap"]="wrap"),$&&(this._styles[e]["flex-wrap"]="nowrap");let k=this.hasAttribute(s("sh")),E=this.hasAttribute(s("sv")),B=this.getAttribute(s("overflow"));k&&E?(this._styles[e].overflow="scroll",this._styles[e]["flex-wrap"]="nowrap"):k?(this._styles[e]["overflow-x"]="scroll",this._styles[e]["flex-wrap"]="nowrap"):E&&(this._styles[e]["overflow-y"]="scroll",this._styles[e]["flex-wrap"]="nowrap"),B==="hidden"&&(this._styles[e].overflow="hidden",this._styles[e]["flex-wrap"]="nowrap")});let t=w(this._styles);t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}attributeChangedCallback(t,e,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}e!==s&&this.updateStyles()}},lt=({render:i,html:t})=>H;var Mt={ta:{s:"text-align: start;",c:"text-align: center;",e:"text-align: end;",j:"text-align: justify;"},s:{h1:`
|
|
419
419
|
font-size: var(--h1-font-size);
|
|
420
420
|
font-weight: var(--h1-font-weight);
|
|
421
421
|
line-height: var(--h1-line-height);
|
|
@@ -455,7 +455,7 @@ var rettangoli=(()=>{var z=`
|
|
|
455
455
|
font-weight: var(--xs-font-weight);
|
|
456
456
|
line-height: var(--xs-line-height);
|
|
457
457
|
letter-spacing: var(--xs-letter-spacing);
|
|
458
|
-
`}},at=
|
|
458
|
+
`}},at=b(Mt);var Lt={c:{pr:"color: var(--primary);",se:"color: var(--secondary);",de:"color: var(--destructive);",fg:"color: var(--foreground);",bg:"color: var(--background);",mu:"color: var(--muted-foreground);",ac:"color: var(--accent);",bo:"color: var(--border);",tr:"color: transparent;","pr-fg":"color: var(--primary-foreground);","se-fg":"color: var(--secondary-foreground);","de-fg":"color: var(--destructive-foreground);","mu-fg":"color: var(--muted-foreground);","ac-fg":"color: var(--accent-foreground);"}},V=b(Lt);var F=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
459
459
|
:host {
|
|
460
460
|
display: block;
|
|
461
461
|
font-size: var(--md-font-size);
|
|
@@ -476,10 +476,10 @@ var rettangoli=(()=>{var z=`
|
|
|
476
476
|
}
|
|
477
477
|
${z}
|
|
478
478
|
${at}
|
|
479
|
-
${
|
|
480
|
-
${
|
|
481
|
-
${
|
|
482
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._slotElement=document.createElement("slot"),this._linkElement=null,this._updateDOM()}static get observedAttributes(){return["key","w","ellipsis","href","new-tab","rel"]}connectedCallback(){this._updateStyling(),this._updateDOM()}attributeChangedCallback(t,e,s){t==="href"||t==="new-tab"||t==="rel"?this._updateDOM():this._updateStyling()}_updateStyling(){let t=
|
|
479
|
+
${V}
|
|
480
|
+
${v}
|
|
481
|
+
${p}
|
|
482
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._slotElement=document.createElement("slot"),this._linkElement=null,this._updateDOM()}static get observedAttributes(){return["key","w","ellipsis","href","new-tab","rel"]}connectedCallback(){this._updateStyling(),this._updateDOM()}attributeChangedCallback(t,e,s){t==="href"||t==="new-tab"||t==="rel"?this._updateDOM():this._updateStyling()}_updateStyling(){let t=c(this.getAttribute("w"));this.hasAttribute("ellipsis")?(this.style.overflow="hidden",this.style.textOverflow="ellipsis",this.style.whiteSpace="nowrap"):(this.style.overflow="",this.style.textOverflow="",this.style.whiteSpace=""),R({style:this.style,width:t,flexMinWidth:"0"})}_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=W({shadowRoot:this.shadow,slotElement:this._slotElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}},ht=({render:i,html:t})=>F;var M={xs:"--border-width-xs",sm:"--border-width-sm",md:"--border-width-md",lg:"--border-width-lg",xl:"--border-width-xl"},Bt={bgc:{pr:"background-color: var(--primary);",se:"background-color: var(--secondary);",de:"background-color: var(--destructive);",fg:"background-color: var(--foreground);",bg:"background-color: var(--background);",mu:"background-color: var(--muted);",ac:"background-color: var(--accent);",bo:"background-color: var(--border);"},pos:{rel:"relative",abs:"absolute",fix:"fixed"},shadow:{sm:"--shadow-sm",md:"--shadow-md",lg:"--shadow-lg"},bw:M,bwt:M,bwr:M,bwb:M,bwl:M,bc:{pr:"--primary",se:"--secondary",de:"--destructive",fg:"--foreground",bg:"--background",mu:"--muted",ac:"--accent",bo:"--border",tr:"transparent"},br:{xs:"--border-radius-xs",sm:"--border-radius-sm",md:"--border-radius-md",lg:"--border-radius-lg",xl:"--border-radius-xl",f:"--border-radius-f"}},dt=i=>b(Bt,{},i);var Tt={mt:d,mr:d,mb:d,ml:d,m:d,mh:d,mv:d},ut=i=>b(Tt,{},i);var q=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
483
483
|
:host {
|
|
484
484
|
display: contents;
|
|
485
485
|
}
|
|
@@ -506,7 +506,7 @@ var rettangoli=(()=>{var z=`
|
|
|
506
506
|
height: auto;
|
|
507
507
|
}
|
|
508
508
|
|
|
509
|
-
${
|
|
509
|
+
${D}
|
|
510
510
|
|
|
511
511
|
a {
|
|
512
512
|
display: block;
|
|
@@ -515,9 +515,9 @@ var rettangoli=(()=>{var z=`
|
|
|
515
515
|
}
|
|
516
516
|
|
|
517
517
|
${dt("img, a")}
|
|
518
|
-
${
|
|
519
|
-
${
|
|
520
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._imgElement=document.createElement("img"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return _([...
|
|
518
|
+
${ut("img, a")}
|
|
519
|
+
${p}
|
|
520
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styleElement=document.createElement("style"),this._imgElement=document.createElement("img"),this._linkElement=null,this.shadow.appendChild(this._styleElement),this._updateDOM()}static get observedAttributes(){return _([...A,"key","src","alt","href","new-tab","rel","wh","w","h","hide","show","op","z","of"])}_styles=g();_lastStyleString="";_updateDOM(){let t=this.getAttribute("href"),e=this.hasAttribute("new-tab"),s=this.getAttribute("rel");this._linkElement=j({shadowRoot:this.shadow,childElement:this._imgElement,linkElement:this._linkElement,href:t,newTab:e,rel:s})}connectedCallback(){this._updateImageAttributes(),this.updateStyles()}attributeChangedCallback(t,e,s){if(t==="href"||t==="new-tab"||t==="rel"){this._updateDOM();return}if(t==="src"||t==="alt"){this._updateImageAttributes();return}e!==s&&this.updateStyles()}updateStyles(){this._styles=g(),x.forEach(e=>{let s=h=>`${e==="default"?"":`${e}-`}${h}`,n=this.getAttribute(s("wh")),r=c(n===null?this.getAttribute(s("w")):n),o=c(n===null?this.getAttribute(s("h")):n),a=this.getAttribute(s("op")),l=this.getAttribute(s("z"));l!==null&&(this._styles[e]["z-index"]=l),a!==null&&(this._styles[e].opacity=a),f({styleBucket:this._styles[e],axis:"width",dimension:r,fillValue:"var(--width-stretch)"}),f({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%"}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none !important"),this.hasAttribute(s("show"))&&(this._styles[e].display="block !important")});let t=w(this._styles,"img, a");t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}_updateImageAttributes(){let t=this.getAttribute("src"),e=this.getAttribute("alt");t!==null?this._imgElement.setAttribute("src",t):this._imgElement.removeAttribute("src"),e!==null?this._imgElement.setAttribute("alt",e):this._imgElement.removeAttribute("alt")}},ct=({render:i,html:t})=>q;var pt=u`
|
|
521
521
|
:host([pt="xs"]) svg {
|
|
522
522
|
padding-top: var(--spacing-xs);
|
|
523
523
|
}
|
|
@@ -633,16 +633,16 @@ var rettangoli=(()=>{var z=`
|
|
|
633
633
|
padding-top: var(--spacing-xl);
|
|
634
634
|
padding-bottom: var(--spacing-xl);
|
|
635
635
|
}
|
|
636
|
-
`;var
|
|
636
|
+
`;var G=class i extends HTMLElement{static styleSheet=null;static _icons={};static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
637
637
|
:host {
|
|
638
638
|
color: var(--foreground);
|
|
639
639
|
flex-shrink: 0;
|
|
640
640
|
}
|
|
641
|
-
${
|
|
641
|
+
${V}
|
|
642
642
|
${pt}
|
|
643
|
-
${
|
|
644
|
-
${
|
|
645
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet]}static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return i._icons}static addIcon(t,e){i._icons[t]=e}connectedCallback(){this._updateSizing(),this._render()}attributeChangedCallback(t,e,s){this._updateSizing(),this._render()}_updateSizing(){let t=this.getAttribute("wh"),e=
|
|
643
|
+
${v}
|
|
644
|
+
${p}
|
|
645
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet]}static get observedAttributes(){return["key","svg","w","h","wh"]}static get icons(){return i._icons}static addIcon(t,e){i._icons[t]=e}connectedCallback(){this._updateSizing(),this._render()}attributeChangedCallback(t,e,s){this._updateSizing(),this._render()}_updateSizing(){let t=this.getAttribute("wh"),e=c(t===null?this.getAttribute("w"):t),s=c(t===null?this.getAttribute("h"):t);e!=null?this.style.width=e:this.style.width="",s!=null?this.style.height=s:this.style.height=""}_render(){try{let t=this.getAttribute("svg"),e=i._icons[t]||(window.rtglIcons||{})[t];if(e){this.shadow.innerHTML=e;return}}catch(t){console.log("error in rtgl-svg render",t)}this.shadow.innerHTML=""}},mt=({render:i,html:t})=>G;var Dt=["mt","mr","mb","ml","m","mh","mv","cur"],U=class i extends HTMLElement{static styleSheet=null;static inputSpecificAttributes=["type","disabled","s"];static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
646
646
|
:host {
|
|
647
647
|
display: contents;
|
|
648
648
|
}
|
|
@@ -675,9 +675,9 @@ var rettangoli=(()=>{var z=`
|
|
|
675
675
|
input:disabled {
|
|
676
676
|
cursor: not-allowed;
|
|
677
677
|
}
|
|
678
|
-
${
|
|
679
|
-
${
|
|
680
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles=
|
|
678
|
+
${v}
|
|
679
|
+
${p}
|
|
680
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles=g(),this._lastStyleString="",this._inputElement=document.createElement("input"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("input",this._onInput),this._inputElement.addEventListener("change",this._onChange)}static get observedAttributes(){return["key","type","placeholder","disabled","value","s",..._([...Dt,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}focus(){this._inputElement.focus()}_onInput=()=>{this.dispatchEvent(new CustomEvent("value-input",{detail:{value:this._inputElement.value},bubbles:!0}))};_onChange=()=>{this.dispatchEvent(new CustomEvent("value-change",{detail:{value:this._inputElement.value},bubbles:!0}))};attributeChangedCallback(t,e,s){if(e!==s){if(t==="key"){this._syncValueAttribute();return}if(t==="value"){this._syncValueAttribute();return}if(t==="placeholder"){this._syncPlaceholderAttribute();return}if(i.inputSpecificAttributes.includes(t)){this._updateInputAttributes();return}this.updateStyles()}}updateStyles(){this._styles=g(),x.forEach(e=>{let s=h=>`${e==="default"?"":`${e}-`}${h}`,n=this.getAttribute(s("wh")),r=c(n===null?this.getAttribute(s("w")):n),o=c(n===null?this.getAttribute(s("h")):n),a=this.getAttribute(s("op")),l=this.getAttribute(s("z"));l!==null&&(this._styles[e]["z-index"]=l),a!==null&&(this._styles[e].opacity=a),f({styleBucket:this._styles[e],axis:"width",dimension:r,fillValue:"var(--width-stretch)"}),f({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%"}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="block")});let t=w(this._styles,"input");t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}_setOrRemoveInputAttribute(t,e){if(e==null||e==="null"){this._inputElement.removeAttribute(t);return}this._inputElement.setAttribute(t,e)}_syncValueAttribute(){this._inputElement.value=this.getAttribute("value")??""}_syncPlaceholderAttribute(){this._setOrRemoveInputAttribute("placeholder",this.getAttribute("placeholder"))}_updateInputAttributes(){let e=this.getAttribute("type")==="password"?"password":"text",s=this.hasAttribute("disabled");this._setOrRemoveInputAttribute("type",e),s?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes(),this._syncValueAttribute(),this._syncPlaceholderAttribute(),this.updateStyles()}},gt=({render:i,html:t})=>U;var Vt=["mt","mr","mb","ml","m","mh","mv","cur"],K=class i extends HTMLElement{static styleSheet=null;static inputSpecificAttributes=["disabled","step","min","max","s"];static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
681
681
|
:host {
|
|
682
682
|
display: contents;
|
|
683
683
|
}
|
|
@@ -710,9 +710,9 @@ var rettangoli=(()=>{var z=`
|
|
|
710
710
|
input:disabled {
|
|
711
711
|
cursor: not-allowed;
|
|
712
712
|
}
|
|
713
|
-
${
|
|
714
|
-
${
|
|
715
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles=
|
|
713
|
+
${v}
|
|
714
|
+
${p}
|
|
715
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles=g(),this._lastStyleString="",this._inputElement=document.createElement("input"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("input",this._onInput),this._inputElement.addEventListener("change",this._onChange)}static get observedAttributes(){return["key","placeholder","disabled","value","step","min","max","s",..._([...Vt,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}focus(){this._inputElement.focus()}_emitValueEvent=t=>{let e=this._inputElement.value;if(e.trim()===""){this.dispatchEvent(new CustomEvent(t,{detail:{value:null},bubbles:!0}));return}let s=parseFloat(e);isNaN(s)||(s=this._clampValueToBounds(s),this._inputElement.value=s.toString(),this.dispatchEvent(new CustomEvent(t,{detail:{value:s},bubbles:!0})))};_onInput=()=>{this._emitValueEvent("value-input")};_onChange=()=>{this._emitValueEvent("value-change")};attributeChangedCallback(t,e,s){if(e!==s){if(t==="key"){this._syncValueAttribute();return}if(t==="value"){this._syncValueAttribute();return}if(t==="placeholder"){this._syncPlaceholderAttribute();return}if(i.inputSpecificAttributes.includes(t)){this._updateInputAttributes(),(t==="min"||t==="max")&&this._syncValueAttribute();return}this.updateStyles()}}updateStyles(){this._styles=g(),x.forEach(e=>{let s=h=>`${e==="default"?"":`${e}-`}${h}`,n=this.getAttribute(s("wh")),r=c(n===null?this.getAttribute(s("w")):n),o=c(n===null?this.getAttribute(s("h")):n),a=this.getAttribute(s("op")),l=this.getAttribute(s("z"));l!==null&&(this._styles[e]["z-index"]=l),a!==null&&(this._styles[e].opacity=a),f({styleBucket:this._styles[e],axis:"width",dimension:r,fillValue:"var(--width-stretch)"}),f({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%"}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="block")});let t=w(this._styles,"input");t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}_setOrRemoveInputAttribute(t,e){if(e==null||e==="null"){this._inputElement.removeAttribute(t);return}this._inputElement.setAttribute(t,e)}_clampValueToBounds(t){let e=t,s=this.getAttribute("min");if(s!==null){let r=parseFloat(s);isNaN(r)||(e=Math.max(e,r))}let n=this.getAttribute("max");if(n!==null){let r=parseFloat(n);isNaN(r)||(e=Math.min(e,r))}return e}_syncValueAttribute(){let t=this.getAttribute("value");if(t==null||t===""){this._inputElement.value="";return}let e=parseFloat(t);if(isNaN(e)){this._inputElement.value="";return}let s=this._clampValueToBounds(e);this._inputElement.value=s.toString()}_syncPlaceholderAttribute(){this._setOrRemoveInputAttribute("placeholder",this.getAttribute("placeholder"))}_updateInputAttributes(){let t=this.getAttribute("step"),e=this.getAttribute("min"),s=this.getAttribute("max"),n=this.hasAttribute("disabled");this._inputElement.setAttribute("type","number"),this._setOrRemoveInputAttribute("step",t),this._setOrRemoveInputAttribute("min",e),this._setOrRemoveInputAttribute("max",s),n?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes(),this._syncValueAttribute(),this._syncPlaceholderAttribute(),this.updateStyles()}},ft=({render:i,html:t})=>K;var X=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
716
716
|
:host {
|
|
717
717
|
display: contents;
|
|
718
718
|
}
|
|
@@ -735,9 +735,9 @@ var rettangoli=(()=>{var z=`
|
|
|
735
735
|
textarea:focus {
|
|
736
736
|
border-color: var(--foreground);
|
|
737
737
|
}
|
|
738
|
-
${
|
|
739
|
-
${
|
|
740
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._textareaElement=document.createElement("textarea"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._textareaElement),this._textareaElement.addEventListener("input",this._onInput),this._textareaElement.addEventListener("change",this._onChange)}_onInput=()=>{this.dispatchEvent(new CustomEvent("value-input",{detail:{value:this._textareaElement.value},bubbles:!0}))};_onChange=()=>{this.dispatchEvent(new CustomEvent("value-change",{detail:{value:this._textareaElement.value},bubbles:!0}))};static get observedAttributes(){return["key","placeholder","disabled","value","cols","rows",..._([...
|
|
738
|
+
${v}
|
|
739
|
+
${p}
|
|
740
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._textareaElement=document.createElement("textarea"),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._textareaElement),this._textareaElement.addEventListener("input",this._onInput),this._textareaElement.addEventListener("change",this._onChange)}_onInput=()=>{this.dispatchEvent(new CustomEvent("value-input",{detail:{value:this._textareaElement.value},bubbles:!0}))};_onChange=()=>{this.dispatchEvent(new CustomEvent("value-change",{detail:{value:this._textareaElement.value},bubbles:!0}))};static get observedAttributes(){return["key","placeholder","disabled","value","cols","rows",..._([...A,"wh","w","h","hide","show","op","z"])]}get value(){return this._textareaElement.value}set value(t){this._textareaElement.value=t}connectedCallback(){this._updateTextareaAttributes()}focus(){this._textareaElement&&this._textareaElement.focus()}select(){this._textareaElement&&this._textareaElement.select()}attributeChangedCallback(t,e,s){if(t==="key"){requestAnimationFrame(()=>{let r=this.getAttribute("value");this._textareaElement.value=r??""});return}if(t==="value"&&requestAnimationFrame(()=>{let r=this.getAttribute("value");this._textareaElement.value=r??""}),t==="placeholder"&&requestAnimationFrame(()=>{let r=this.getAttribute("placeholder");r===void 0||r==="null"?this._textareaElement.removeAttribute("placeholder"):this._textareaElement.setAttribute("placeholder",r??"")}),["cols","rows","disabled"].includes(t)){this._updateTextareaAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(r=>{let o=S=>`${r==="default"?"":`${r}-`}${S}`,a=this.getAttribute(o("wh")),l=c(a===null?this.getAttribute(o("w")):a),h=c(a===null?this.getAttribute(o("h")):a),m=this.getAttribute(o("op")),y=this.getAttribute(o("z"));y!==null&&(this._styles[r]["z-index"]=y),m!==null&&(this._styles[r].opacity=m),l==="f"?this._styles[r].width="var(--width-stretch)":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(o("hide"))&&(this._styles[r].display="none"),this.hasAttribute(o("show"))&&(this._styles[r].display="block")});let n=w(this._styles,"textarea");n!==this._lastStyleString&&(this._styleElement.textContent=n,this._lastStyleString=n)}_updateTextareaAttributes(){let t=this.getAttribute("cols"),e=this.getAttribute("rows"),s=this.hasAttribute("disabled");t!==null?this._textareaElement.setAttribute("cols",t):this._textareaElement.removeAttribute("cols"),e!==null?this._textareaElement.setAttribute("rows",e):this._textareaElement.removeAttribute("rows"),s?this._textareaElement.setAttribute("disabled",""):this._textareaElement.removeAttribute("disabled")}},bt=({render:i,html:t})=>X;var jt=["mt","mr","mb","ml","m","mh","mv","cur"],Nt=/^#[0-9a-fA-F]{6}$/,Q=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
741
741
|
:host {
|
|
742
742
|
display: contents;
|
|
743
743
|
}
|
|
@@ -758,9 +758,9 @@ var rettangoli=(()=>{var z=`
|
|
|
758
758
|
cursor: not-allowed;
|
|
759
759
|
opacity: 0.5;
|
|
760
760
|
}
|
|
761
|
-
${
|
|
762
|
-
${
|
|
763
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles=
|
|
761
|
+
${v}
|
|
762
|
+
${p}
|
|
763
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles=g(),this._lastStyleString="",this._inputElement=document.createElement("input"),this._inputElement.type="color",this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("change",this._onChange),this._inputElement.addEventListener("input",this._onInput)}static get observedAttributes(){return["key","value","disabled",..._([...jt,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}_onChange=()=>{this.dispatchEvent(new CustomEvent("value-change",{detail:{value:this._inputElement.value},bubbles:!0}))};_onInput=()=>{this.dispatchEvent(new CustomEvent("value-input",{detail:{value:this._inputElement.value},bubbles:!0}))};attributeChangedCallback(t,e,s){if(e!==s){if(t==="key"){this._syncValueAttribute();return}if(["value","disabled"].includes(t)){this._updateInputAttributes();return}this.updateStyles()}}updateStyles(){this._styles=g(),x.forEach(e=>{let s=h=>`${e==="default"?"":`${e}-`}${h}`,n=this.getAttribute(s("wh")),r=c(n===null?this.getAttribute(s("w")):n),o=c(n===null?this.getAttribute(s("h")):n),a=this.getAttribute(s("op")),l=this.getAttribute(s("z"));l!==null&&(this._styles[e]["z-index"]=l),a!==null&&(this._styles[e].opacity=a),f({styleBucket:this._styles[e],axis:"width",dimension:r,fillValue:"var(--width-stretch)"}),f({styleBucket:this._styles[e],axis:"height",dimension:o,fillValue:"100%"}),this.hasAttribute(s("hide"))&&(this._styles[e].display="none"),this.hasAttribute(s("show"))&&(this._styles[e].display="block")});let t=w(this._styles,'input[type="color"]');t!==this._lastStyleString&&(this._styleElement.textContent=t,this._lastStyleString=t)}_syncValueAttribute(){let t=this.getAttribute("value");if(t===null){this._inputElement.value="#000000";return}this._inputElement.value=Nt.test(t)?t:"#000000"}_updateInputAttributes(){let t=this.hasAttribute("disabled");this._syncValueAttribute(),t?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes(),this.updateStyles()}},vt=({render:i,html:t})=>Q;var J=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
764
764
|
:host {
|
|
765
765
|
display: contents;
|
|
766
766
|
}
|
|
@@ -812,9 +812,9 @@ var rettangoli=(()=>{var z=`
|
|
|
812
812
|
input[type="range"]:disabled::-moz-range-thumb {
|
|
813
813
|
cursor: not-allowed;
|
|
814
814
|
}
|
|
815
|
-
${
|
|
816
|
-
${
|
|
817
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._inputElement.type="range",this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("input",this._onInput),this._inputElement.addEventListener("change",this._onChange)}static get observedAttributes(){return["key","value","min","max","step","disabled",..._([...
|
|
815
|
+
${v}
|
|
816
|
+
${p}
|
|
817
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._inputElement.type="range",this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this.shadow.appendChild(this._inputElement),this._inputElement.addEventListener("input",this._onInput),this._inputElement.addEventListener("change",this._onChange)}static get observedAttributes(){return["key","value","min","max","step","disabled",..._([...A,"wh","w","h","hide","show","op","z"])]}get value(){return this._inputElement.value}set value(t){this._inputElement.value=t}_onInput=()=>{this.dispatchEvent(new CustomEvent("value-input",{detail:{value:Number(this._inputElement.value)},bubbles:!0}))};_onChange=()=>{this.dispatchEvent(new CustomEvent("value-change",{detail:{value:Number(this._inputElement.value)},bubbles:!0}))};attributeChangedCallback(t,e,s){if(t==="key"&&e!==s){requestAnimationFrame(()=>{let r=this.getAttribute("value"),o=this.getAttribute("min")||"0";this._inputElement.value=r??o});return}if(["value","min","max","step","disabled"].includes(t)){this._updateInputAttributes();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(r=>{let o=S=>`${r==="default"?"":`${r}-`}${S}`,a=this.getAttribute(o("wh")),l=c(a===null?this.getAttribute(o("w")):a),h=c(a===null?this.getAttribute(o("h")):a),m=this.getAttribute(o("op")),y=this.getAttribute(o("z"));y!==null&&(this._styles[r]["z-index"]=y),m!==null&&(this._styles[r].opacity=m),l==="f"?this._styles[r].width="var(--width-stretch)":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(o("hide"))&&(this._styles[r].display="none"),this.hasAttribute(o("show"))&&(this._styles[r].display="block")});let n=w(this._styles,'input[type="range"]');n!==this._lastStyleString&&(this._styleElement.textContent=n,this._lastStyleString=n)}_updateInputAttributes(){let t=this.getAttribute("value"),e=this.getAttribute("min"),s=this.getAttribute("max"),n=this.getAttribute("step"),r=this.hasAttribute("disabled");t!==null?this._inputElement.value=t:this._inputElement.value=e??0,e!==null?this._inputElement.min=e:this._inputElement.min="0",s!==null?this._inputElement.max=s:this._inputElement.max="100",n!==null?this._inputElement.step=n:this._inputElement.step="1",r?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled")}connectedCallback(){this._updateInputAttributes()}},yt=({render:i,html:t})=>J;var Y=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
818
818
|
:host {
|
|
819
819
|
display: contents;
|
|
820
820
|
}
|
|
@@ -885,7 +885,7 @@ var rettangoli=(()=>{var z=`
|
|
|
885
885
|
dialog[open] slot[name="content"] {
|
|
886
886
|
animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
887
887
|
}
|
|
888
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._slotElement=null,this._isConnected=!1,this._mouseDownInContent=!1,this._dialogElement.addEventListener("mousedown",t=>{this._mouseDownInContent=t.target!==this._dialogElement}),this._dialogElement.addEventListener("click",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&this._attemptClose(),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("contextmenu",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&(t.preventDefault(),this._attemptClose()),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._attemptClose()})}_attemptClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}attributeChangedCallback(t,e,s){t==="open"?s!==null&&!this._dialogElement.open&&this._isConnected?this._showModal():s===null&&this._dialogElement.open&&this._hideModal():t==="w"&&this._updateWidth()}_updateDialog(){this._updateWidth()}_updateWidth(){let t=this.getAttribute("w");t?this._dialogElement.style.width=t:this._dialogElement.style.width=""}_showModal(){this._dialogElement.open||(this._slotElement||(this._slotElement=document.createElement("slot"),this._slotElement.setAttribute("name","content"),this._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,this._applyAdaptiveCentering())}_hideModal(){this._dialogElement.open&&(this._dialogElement.close(),this._slotElement&&(this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_applyAdaptiveCentering(){this._slotElement&&requestAnimationFrame(()=>{if(!this._slotElement)return;let t=this._slotElement.offsetHeight,e=window.innerHeight,s=40;if(t>=e-2*s)this._slotElement.style.marginTop=`${s}px`,this._slotElement.style.marginBottom=`${s}px`,this._dialogElement.style.height="100vh";else{let n=e-t,r=Math.floor(n/2);this._slotElement.style.marginTop=`${r}px`,this._slotElement.style.marginBottom=`${r}px`,this._dialogElement.style.height="auto"}})}get dialog(){return this._dialogElement}},_t=({render:i,html:t})=>
|
|
888
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._slotElement=null,this._isConnected=!1,this._mouseDownInContent=!1,this._dialogElement.addEventListener("mousedown",t=>{this._mouseDownInContent=t.target!==this._dialogElement}),this._dialogElement.addEventListener("click",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&this._attemptClose(),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("contextmenu",t=>{t.target===this._dialogElement&&!this._mouseDownInContent&&(t.preventDefault(),this._attemptClose()),this._mouseDownInContent=!1}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._attemptClose()})}_attemptClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","w","s"]}connectedCallback(){this._updateDialog(),this._isConnected=!0,this.hasAttribute("open")&&this._showModal()}attributeChangedCallback(t,e,s){t==="open"?s!==null&&!this._dialogElement.open&&this._isConnected?this._showModal():s===null&&this._dialogElement.open&&this._hideModal():t==="w"&&this._updateWidth()}_updateDialog(){this._updateWidth()}_updateWidth(){let t=this.getAttribute("w");t?this._dialogElement.style.width=t:this._dialogElement.style.width=""}_showModal(){this._dialogElement.open||(this._slotElement||(this._slotElement=document.createElement("slot"),this._slotElement.setAttribute("name","content"),this._dialogElement.appendChild(this._slotElement)),this._dialogElement.showModal(),this._dialogElement.scrollTop=0,this._applyAdaptiveCentering())}_hideModal(){this._dialogElement.open&&(this._dialogElement.close(),this._slotElement&&(this._slotElement.style.marginTop="",this._slotElement.style.marginBottom="",this._dialogElement.removeChild(this._slotElement),this._slotElement=null),this._dialogElement.style.height="")}_applyAdaptiveCentering(){this._slotElement&&requestAnimationFrame(()=>{if(!this._slotElement)return;let t=this._slotElement.offsetHeight,e=window.innerHeight,s=40;if(t>=e-2*s)this._slotElement.style.marginTop=`${s}px`,this._slotElement.style.marginBottom=`${s}px`,this._dialogElement.style.height="100vh";else{let n=e-t,r=Math.floor(n/2);this._slotElement.style.marginTop=`${r}px`,this._slotElement.style.marginBottom=`${r}px`,this._dialogElement.style.height="auto"}})}get dialog(){return this._dialogElement}},_t=({render:i,html:t})=>Y;var Z=class i extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){i.styleSheet||(i.styleSheet=new CSSStyleSheet,i.styleSheet.replaceSync(u`
|
|
889
889
|
:host {
|
|
890
890
|
display: contents;
|
|
891
891
|
}
|
|
@@ -939,4 +939,4 @@ var rettangoli=(()=>{var z=`
|
|
|
939
939
|
min-width: 200px;
|
|
940
940
|
max-width: 400px;
|
|
941
941
|
}
|
|
942
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._dialogElement.addEventListener("click",t=>{t.stopPropagation();let e=t.composedPath();(e[0]===this._dialogElement||e[0].nodeName==="DIALOG"&&e[0]===this._dialogElement)&&this._emitClose()}),this._dialogElement.addEventListener("contextmenu",t=>{let e=t.composedPath();(e[0]===this._dialogElement||e[0].nodeName==="DIALOG"&&e[0]===this._dialogElement)&&(t.preventDefault(),this._emitClose())}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._emitClose()}),this._popoverContainer=document.createElement("div"),this._popoverContainer.className="popover-container",this._dialogElement.appendChild(this._popoverContainer),this._slotElement=null,this._isOpen=!1}_emitClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","x","y","place","no-overlay"]}connectedCallback(){this.hasAttribute("open")&&this._show()}disconnectedCallback(){this._isOpen&&this._dialogElement.open&&this._dialogElement.close()}attributeChangedCallback(t,e,s){t==="open"?s!==null&&!this._isOpen?this.isConnected&&this._show():s===null&&this._isOpen&&this._hide():(t==="x"||t==="y"||t==="place")&&this._isOpen?this._updatePosition():t==="no-overlay"&&e!==s&&this._isOpen&&(this._hide(),this._show())}_show(){this._isOpen||(this._slotElement||(this._slotElement=document.createElement("slot"),this._slotElement.setAttribute("name","content"),this._popoverContainer.appendChild(this._slotElement)),this._isOpen=!0,this._dialogElement.open||setTimeout(()=>{this._dialogElement&&!this._dialogElement.open&&(this.hasAttribute("no-overlay")?this._dialogElement.show():this._dialogElement.showModal())},0),requestAnimationFrame(()=>{this._updatePosition()}))}_hide(){this._isOpen&&(this._isOpen=!1,this._dialogElement.open&&this._dialogElement.close(),this._slotElement&&(this._popoverContainer.removeChild(this._slotElement),this._slotElement=null))}_updatePosition(){let t=parseFloat(this.getAttribute("x")||"0"),e=parseFloat(this.getAttribute("y")||"0"),s=this.getAttribute("place")||"bs";this.removeAttribute("positioned"),requestAnimationFrame(()=>{let n=this._popoverContainer.getBoundingClientRect(),{left:r,top:o}=this._calculatePosition(t,e,n.width,n.height,s);this._popoverContainer.style.left=`${r}px`,this._popoverContainer.style.top=`${o}px`,requestAnimationFrame(()=>{this.setAttribute("positioned","")})})}_calculatePosition(t,e,s,n,r){let
|
|
942
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._dialogElement=document.createElement("dialog"),this.shadow.appendChild(this._dialogElement),this._dialogElement.addEventListener("click",t=>{t.stopPropagation();let e=t.composedPath();(e[0]===this._dialogElement||e[0].nodeName==="DIALOG"&&e[0]===this._dialogElement)&&this._emitClose()}),this._dialogElement.addEventListener("contextmenu",t=>{let e=t.composedPath();(e[0]===this._dialogElement||e[0].nodeName==="DIALOG"&&e[0]===this._dialogElement)&&(t.preventDefault(),this._emitClose())}),this._dialogElement.addEventListener("cancel",t=>{t.preventDefault(),this._emitClose()}),this._popoverContainer=document.createElement("div"),this._popoverContainer.className="popover-container",this._dialogElement.appendChild(this._popoverContainer),this._slotElement=null,this._isOpen=!1}_emitClose(){this.dispatchEvent(new CustomEvent("close",{detail:{},bubbles:!0}))}static get observedAttributes(){return["open","x","y","place","no-overlay"]}connectedCallback(){this.hasAttribute("open")&&this._show()}disconnectedCallback(){this._isOpen&&this._dialogElement.open&&this._dialogElement.close()}attributeChangedCallback(t,e,s){t==="open"?s!==null&&!this._isOpen?this.isConnected&&this._show():s===null&&this._isOpen&&this._hide():(t==="x"||t==="y"||t==="place")&&this._isOpen?this._updatePosition():t==="no-overlay"&&e!==s&&this._isOpen&&(this._hide(),this._show())}_show(){this._isOpen||(this._slotElement||(this._slotElement=document.createElement("slot"),this._slotElement.setAttribute("name","content"),this._popoverContainer.appendChild(this._slotElement)),this._isOpen=!0,this._dialogElement.open||setTimeout(()=>{this._dialogElement&&!this._dialogElement.open&&(this.hasAttribute("no-overlay")?this._dialogElement.show():this._dialogElement.showModal())},0),requestAnimationFrame(()=>{this._updatePosition()}))}_hide(){this._isOpen&&(this._isOpen=!1,this._dialogElement.open&&this._dialogElement.close(),this._slotElement&&(this._popoverContainer.removeChild(this._slotElement),this._slotElement=null))}_updatePosition(){let t=parseFloat(this.getAttribute("x")||"0"),e=parseFloat(this.getAttribute("y")||"0"),s=this.getAttribute("place")||"bs";this.removeAttribute("positioned"),requestAnimationFrame(()=>{let n=this._popoverContainer.getBoundingClientRect(),{left:r,top:o}=this._calculatePosition(t,e,n.width,n.height,s);this._popoverContainer.style.left=`${r}px`,this._popoverContainer.style.top=`${o}px`,requestAnimationFrame(()=>{this.setAttribute("positioned","")})})}_calculatePosition(t,e,s,n,r){let a=t,l=e;switch(r){case"t":a=t-s/2,l=e-n-8;break;case"ts":a=t,l=e-n-8;break;case"te":a=t-s,l=e-n-8;break;case"r":a=t+8,l=e-n/2;break;case"rs":a=t+8,l=e;break;case"re":a=t+8,l=e-n;break;case"b":a=t-s/2,l=e+8;break;case"bs":a=t,l=e+8;break;case"be":a=t-s,l=e+8;break;case"l":a=t-s-8,l=e-n/2;break;case"ls":a=t-s-8,l=e;break;case"le":a=t-s-8,l=e-n;break;default:a=t,l=e+8;break}let h=8;return a=Math.max(h,Math.min(a,window.innerWidth-s-h)),l=Math.max(h,Math.min(l,window.innerHeight-n-h)),{left:a,top:l}}get popover(){return this._popoverContainer}},wt=({render:i,html:t})=>Z;customElements.define("rtgl-button",st({}));customElements.define("rtgl-view",lt({}));customElements.define("rtgl-text",ht({}));customElements.define("rtgl-image",ct({}));customElements.define("rtgl-svg",mt({}));customElements.define("rtgl-input",gt({}));customElements.define("rtgl-input-number",ft({}));customElements.define("rtgl-textarea",bt({}));customElements.define("rtgl-color-picker",vt({}));customElements.define("rtgl-slider",yt({}));customElements.define("rtgl-dialog",_t({}));customElements.define("rtgl-popover",wt({}));})();
|
|
@@ -12,21 +12,21 @@ var rettangoli=(()=>{var Cn=Object.defineProperty;var R=(e,t)=>{for(var r in t)C
|
|
|
12
12
|
bottom: 0;
|
|
13
13
|
z-index: 1;
|
|
14
14
|
}
|
|
15
|
-
`,Te=({linkElement:e,href:t,newTab:r,rel:s})=>{e.href=t,r?e.target="_blank":e.removeAttribute("target"),s!=null?e.rel=s:r?e.rel="noopener noreferrer":e.removeAttribute("rel")},Le=({shadowRoot:e,slotElement:t,linkElement:r,href:s,newTab:i,rel:n})=>{if(t.parentNode!==e&&e.appendChild(t),!s)return r&&r.parentNode===e&&e.removeChild(r),null;let a=r||document.createElement("a");return Te({linkElement:a,href:s,newTab:i,rel:n}),a.parentNode!==e&&e.appendChild(a),a},mt=({shadowRoot:e,childElement:t,linkElement:r,href:s,newTab:i,rel:n})=>{if(!s)return r?(t.parentNode===r&&e.appendChild(t),r.parentNode===e&&e.removeChild(r),null):(t.parentNode!==e&&e.appendChild(t),null);let a=r||document.createElement("a");return Te({linkElement:a,href:s,newTab:i,rel:n}),t.parentNode!==a&&a.appendChild(t),a.parentNode!==e&&e.appendChild(a),a};var ne=["default","sm","md","lg","xl"],K=()=>ne.reduce((e,t)=>(e[t]={},e),{});var In=/^([1-9]|1[0-2])fg$/,yt=e=>typeof e=="string"&&In.test(e),H=({styleBucket:e,axis:t,dimension:r,fillValue:s,allowFlexGrow:i=!1,lockBounds:n=!0})=>{if(r!==void 0){if(r==="f"){e[t]=s;return}if(i&&yt(r)){e["flex-grow"]=r.slice(0,-2),e["flex-basis"]="0%";return}e[t]=r,n&&(e[`min-${t}`]=r,e[`max-${t}`]=r)}},gt=({style:e,width:t,fillValue:r="var(--width-stretch)",allowFlexGrow:s=!0,flexMinWidth:i="0"})=>{if(t==="f"){e.width=r,e.flexGrow="",e.flexBasis="",e.minWidth="";return}if(s&&yt(t)){e.width="",e.flexGrow=t.slice(0,-2),e.flexBasis="0%",e.minWidth=i;return}if(t!=null){e.width=t,e.flexGrow="",e.flexBasis="",e.minWidth="";return}e.width="",e.flexGrow="",e.flexBasis="",e.minWidth=""};function L(e,...t){let r="";return e.forEach((s,i)=>{r+=s+(t[i]||"")}),r}var On=["sm","md","lg","xl"],Lr={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",cur:"cursor"},ue=Object.keys(Lr),ee=e=>e.concat(On.flatMap(t=>e.map(r=>`${t}-${r}`))),Rr={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)"},G=(e,t={},r=null)=>{let s="";for(let[i,n]of Object.entries(Rr)){i!=="default"&&(s+=`${n} {`);for(let[a,l]of Object.entries(e))
|
|
16
|
-
${
|
|
17
|
-
${
|
|
15
|
+
`,Te=({linkElement:e,href:t,newTab:r,rel:s})=>{e.href=t,r?e.target="_blank":e.removeAttribute("target"),s!=null?e.rel=s:r?e.rel="noopener noreferrer":e.removeAttribute("rel")},Le=({shadowRoot:e,slotElement:t,linkElement:r,href:s,newTab:i,rel:n})=>{if(t.parentNode!==e&&e.appendChild(t),!s)return r&&r.parentNode===e&&e.removeChild(r),null;let a=r||document.createElement("a");return Te({linkElement:a,href:s,newTab:i,rel:n}),a.parentNode!==e&&e.appendChild(a),a},mt=({shadowRoot:e,childElement:t,linkElement:r,href:s,newTab:i,rel:n})=>{if(!s)return r?(t.parentNode===r&&e.appendChild(t),r.parentNode===e&&e.removeChild(r),null):(t.parentNode!==e&&e.appendChild(t),null);let a=r||document.createElement("a");return Te({linkElement:a,href:s,newTab:i,rel:n}),t.parentNode!==a&&a.appendChild(t),a.parentNode!==e&&e.appendChild(a),a};var ne=["default","sm","md","lg","xl"],K=()=>ne.reduce((e,t)=>(e[t]={},e),{});var In=/^([1-9]|1[0-2])fg$/,yt=e=>typeof e=="string"&&In.test(e),H=({styleBucket:e,axis:t,dimension:r,fillValue:s,allowFlexGrow:i=!1,lockBounds:n=!0})=>{if(r!==void 0){if(r==="f"){e[t]=s;return}if(i&&yt(r)){e["flex-grow"]=r.slice(0,-2),e["flex-basis"]="0%";return}e[t]=r,n&&(e[`min-${t}`]=r,e[`max-${t}`]=r)}},gt=({style:e,width:t,fillValue:r="var(--width-stretch)",allowFlexGrow:s=!0,flexMinWidth:i="0"})=>{if(t==="f"){e.width=r,e.flexGrow="",e.flexBasis="",e.minWidth="";return}if(s&&yt(t)){e.width="",e.flexGrow=t.slice(0,-2),e.flexBasis="0%",e.minWidth=i;return}if(t!=null){e.width=t,e.flexGrow="",e.flexBasis="",e.minWidth="";return}e.width="",e.flexGrow="",e.flexBasis="",e.minWidth=""};function L(e,...t){let r="";return e.forEach((s,i)=>{r+=s+(t[i]||"")}),r}var On=["sm","md","lg","xl"],Lr={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",cur:"cursor"},ue=Object.keys(Lr),ee=e=>e.concat(On.flatMap(t=>e.map(r=>`${t}-${r}`))),Rr={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)"},G=(e,t={},r=null)=>{let s="";for(let[i,n]of Object.entries(Rr)){i!=="default"&&(s+=`${n} {`);for(let[a,l]of Object.entries(e))for(let[p,o]of Object.entries(l)){let c=Lr[a],u=o.startsWith("--")?`var(${o})`:o,d=i==="default"?a:`${i}-${a}`,h=i==="default"?`h-${a}`:`${i}-h-${a}`,f=(m,g=!1)=>{let y=g?`:host([${m}="${p}"]:hover)`:`:host([${m}="${p}"])`;if(r)return r.split(",").map(x=>`${y} ${x.trim()}`).join(", ");let w=t[a];return w?`${y} ${w}`:y};if(c){let g=c.split(" ").map(y=>`${y}: ${u};`).join(" ");s+=`
|
|
16
|
+
${f(d)}{
|
|
17
|
+
${g}
|
|
18
18
|
}
|
|
19
|
-
${
|
|
20
|
-
${
|
|
19
|
+
${f(h,!0)}{
|
|
20
|
+
${g}
|
|
21
21
|
}
|
|
22
22
|
`}else s+=`
|
|
23
|
-
${
|
|
24
|
-
${
|
|
23
|
+
${f(d)}{
|
|
24
|
+
${o}
|
|
25
25
|
}
|
|
26
|
-
${
|
|
27
|
-
${
|
|
26
|
+
${f(h,!0)}{
|
|
27
|
+
${o}
|
|
28
28
|
}
|
|
29
|
-
`}
|
|
29
|
+
`}i!=="default"&&(s+="}")}return s};function Tn(e){if(e===null||e.includes("/"))return!1;let t=String(e);return/[0-9]$/.test(t)}var Ln=e=>/%$/.test(e),Rn=e=>/^([1-9]|1[0-2])fg$/.test(e),N=e=>{if(e!==void 0)return Rn(e)||Ln(e)?e:Tn(e)?`${e}px`:Object.keys(S).includes(e)?`var(${S[e]})`:e},S={xs:"--spacing-xs",sm:"--spacing-sm",md:"--spacing-md",lg:"--spacing-lg",xl:"--spacing-xl"};function te(e,t=":host"){let r="",s=["default","xl","lg","md","sm"];for(let i of s){let n=Rr[i];if(!e[i]||Object.keys(e[i]).length===0)continue;i!=="default"&&(r+=`${n} {
|
|
30
30
|
`);let a="";for(let[l,p]of Object.entries(e[i]))p!=null&&(a+=`${l}: ${p} !important;
|
|
31
31
|
`);r+=`${t} {
|
|
32
32
|
${a.trim()}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rettangoli/ui",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-rc4",
|
|
4
4
|
"description": "A UI component library for building web interfaces.",
|
|
5
5
|
"main": "dist/rettangoli-esm.min.js",
|
|
6
6
|
"type": "module",
|
|
@@ -10,7 +10,10 @@
|
|
|
10
10
|
],
|
|
11
11
|
"exports": {
|
|
12
12
|
".": "./src/index.js",
|
|
13
|
-
"./cli": "./src/cli/index.js"
|
|
13
|
+
"./cli": "./src/cli/index.js",
|
|
14
|
+
"./themes/reset.css": "./src/themes/reset.css",
|
|
15
|
+
"./themes/theme-default.css": "./src/themes/theme-default.css",
|
|
16
|
+
"./themes/theme-catppuccin.css": "./src/themes/theme-catppuccin.css"
|
|
14
17
|
},
|
|
15
18
|
"module": "./src/index.js",
|
|
16
19
|
"repository": {
|
package/src/common.js
CHANGED
|
@@ -65,7 +65,6 @@ const generateCSS = (styles, descendants = {}, targetSelector = null) => {
|
|
|
65
65
|
css += `${mediaQuery} {`;
|
|
66
66
|
}
|
|
67
67
|
for (const [attr, values] of Object.entries(styles)) {
|
|
68
|
-
const dscendant = descendants[attr] ? ` ${descendants[attr]} ` : " ";
|
|
69
68
|
for (const [value, rule] of Object.entries(values)) {
|
|
70
69
|
const cssProperties = styleMap[attr];
|
|
71
70
|
const cssRule = rule.startsWith("--") ? `var(${rule})` : rule;
|
|
@@ -75,14 +74,24 @@ const generateCSS = (styles, descendants = {}, targetSelector = null) => {
|
|
|
75
74
|
const hoverAttributeWithBreakpoint =
|
|
76
75
|
size === "default" ? `h-${attr}` : `${size}-h-${attr}`;
|
|
77
76
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
const buildSelector = (attrStr, includeHover = false) => {
|
|
78
|
+
const base = includeHover
|
|
79
|
+
? `:host([${attrStr}="${value}"]:hover)`
|
|
80
|
+
: `:host([${attrStr}="${value}"])`;
|
|
81
|
+
|
|
81
82
|
if (targetSelector) {
|
|
82
|
-
|
|
83
|
-
|
|
83
|
+
return targetSelector
|
|
84
|
+
.split(",")
|
|
85
|
+
.map((target) => `${base} ${target.trim()}`)
|
|
86
|
+
.join(", ");
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
const descendant = descendants[attr];
|
|
90
|
+
if (descendant) {
|
|
91
|
+
return `${base} ${descendant}`;
|
|
84
92
|
}
|
|
85
|
-
|
|
93
|
+
|
|
94
|
+
return base;
|
|
86
95
|
};
|
|
87
96
|
|
|
88
97
|
if (cssProperties) {
|
|
@@ -96,7 +105,7 @@ const generateCSS = (styles, descendants = {}, targetSelector = null) => {
|
|
|
96
105
|
${buildSelector(attributeWithBreakpoint)}{
|
|
97
106
|
${propertyRules}
|
|
98
107
|
}
|
|
99
|
-
${buildSelector(hoverAttributeWithBreakpoint)}
|
|
108
|
+
${buildSelector(hoverAttributeWithBreakpoint, true)}{
|
|
100
109
|
${propertyRules}
|
|
101
110
|
}
|
|
102
111
|
`;
|
|
@@ -106,7 +115,7 @@ const generateCSS = (styles, descendants = {}, targetSelector = null) => {
|
|
|
106
115
|
${buildSelector(attributeWithBreakpoint)}{
|
|
107
116
|
${rule}
|
|
108
117
|
}
|
|
109
|
-
${buildSelector(hoverAttributeWithBreakpoint)}
|
|
118
|
+
${buildSelector(hoverAttributeWithBreakpoint, true)}{
|
|
110
119
|
${rule}
|
|
111
120
|
}
|
|
112
121
|
`;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/* Rettangoli UI base reset. Load before any theme file. */
|
|
2
|
+
*,
|
|
3
|
+
*::before,
|
|
4
|
+
*::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
html,
|
|
11
|
+
body {
|
|
12
|
+
min-height: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[hidden] {
|
|
16
|
+
display: none !important;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
html {
|
|
20
|
+
-webkit-text-size-adjust: 100%;
|
|
21
|
+
text-size-adjust: 100%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
body {
|
|
25
|
+
line-height: 1.5;
|
|
26
|
+
-webkit-font-smoothing: antialiased;
|
|
27
|
+
text-rendering: optimizeLegibility;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
img,
|
|
31
|
+
picture,
|
|
32
|
+
video,
|
|
33
|
+
canvas,
|
|
34
|
+
svg {
|
|
35
|
+
display: block;
|
|
36
|
+
max-width: 100%;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
input,
|
|
40
|
+
button,
|
|
41
|
+
textarea,
|
|
42
|
+
select {
|
|
43
|
+
font: inherit;
|
|
44
|
+
color: inherit;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
a {
|
|
48
|
+
color: inherit;
|
|
49
|
+
text-decoration: inherit;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
table {
|
|
53
|
+
border-collapse: collapse;
|
|
54
|
+
border-spacing: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:root {
|
|
58
|
+
--width-stretch: 100%;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@supports (width: -webkit-fill-available) {
|
|
62
|
+
:root {
|
|
63
|
+
--width-stretch: -webkit-fill-available;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@supports (width: -moz-available) {
|
|
68
|
+
:root {
|
|
69
|
+
--width-stretch: -moz-available;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@media (prefers-reduced-motion: reduce) {
|
|
74
|
+
html:focus-within {
|
|
75
|
+
scroll-behavior: auto;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
*,
|
|
79
|
+
*::before,
|
|
80
|
+
*::after {
|
|
81
|
+
animation-duration: 0.01ms !important;
|
|
82
|
+
animation-iteration-count: 1 !important;
|
|
83
|
+
transition-duration: 0.01ms !important;
|
|
84
|
+
scroll-behavior: auto !important;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
/* Rettangoli UI Catppuccin theme (Latte default, Mocha on .dark). */
|
|
2
|
+
:root {
|
|
3
|
+
--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
4
|
+
|
|
5
|
+
--spacing-xs: 2px;
|
|
6
|
+
--spacing-sm: 4px;
|
|
7
|
+
--spacing-md: 8px;
|
|
8
|
+
--spacing-lg: 16px;
|
|
9
|
+
--spacing-xl: 32px;
|
|
10
|
+
|
|
11
|
+
--border-radius-xs: 1px;
|
|
12
|
+
--border-radius-sm: 2px;
|
|
13
|
+
--border-radius-md: 4px;
|
|
14
|
+
--border-radius-lg: 8px;
|
|
15
|
+
--border-radius-xl: 16px;
|
|
16
|
+
--border-radius-f: 50%;
|
|
17
|
+
--border-radius-full: 9999px;
|
|
18
|
+
|
|
19
|
+
--border-width-xs: 1px;
|
|
20
|
+
--border-width-sm: 2px;
|
|
21
|
+
--border-width-md: 4px;
|
|
22
|
+
--border-width-lg: 8px;
|
|
23
|
+
--border-width-xl: 16px;
|
|
24
|
+
|
|
25
|
+
--shadow-sm: 0px 2px 6px rgba(0, 0, 0, .35), 0px 3px 5px rgba(0, 0, 0, .25), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .25);
|
|
26
|
+
--shadow-md: 0px 5px 12px rgba(0, 0, 0, .35), 0px 3px 5px rgba(0, 0, 0, .25), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .25);
|
|
27
|
+
--shadow-lg: 0px 10px 24px rgba(0, 0, 0, .35), 0px 3px 5px rgba(0, 0, 0, .25), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .25);
|
|
28
|
+
|
|
29
|
+
--h1-font-size: 3rem;
|
|
30
|
+
--h1-font-weight: 800;
|
|
31
|
+
--h1-line-height: 1;
|
|
32
|
+
--h1-letter-spacing: -.025em;
|
|
33
|
+
|
|
34
|
+
--h2-font-size: 1.875rem;
|
|
35
|
+
--h2-font-weight: 600;
|
|
36
|
+
--h2-line-height: 2.25rem;
|
|
37
|
+
--h2-letter-spacing: -.025em;
|
|
38
|
+
|
|
39
|
+
--h3-font-size: 1.5rem;
|
|
40
|
+
--h3-font-weight: 600;
|
|
41
|
+
--h3-line-height: 2rem;
|
|
42
|
+
--h3-letter-spacing: -.025em;
|
|
43
|
+
|
|
44
|
+
--h4-font-size: 1.25rem;
|
|
45
|
+
--h4-font-weight: 600;
|
|
46
|
+
--h4-line-height: 1.75rem;
|
|
47
|
+
--h4-letter-spacing: -.025em;
|
|
48
|
+
|
|
49
|
+
--lg-font-size: 1.125rem;
|
|
50
|
+
--lg-font-weight: 400;
|
|
51
|
+
--lg-line-height: 1.75rem;
|
|
52
|
+
--lg-letter-spacing: normal;
|
|
53
|
+
|
|
54
|
+
--md-font-size: 1rem;
|
|
55
|
+
--md-font-weight: 400;
|
|
56
|
+
--md-line-height: 1.5rem;
|
|
57
|
+
--md-letter-spacing: normal;
|
|
58
|
+
|
|
59
|
+
--sm-font-size: .875rem;
|
|
60
|
+
--sm-font-weight: 400;
|
|
61
|
+
--sm-line-height: 1;
|
|
62
|
+
--sm-letter-spacing: normal;
|
|
63
|
+
|
|
64
|
+
--xs-font-size: .75rem;
|
|
65
|
+
--xs-font-weight: 400;
|
|
66
|
+
--xs-line-height: 1;
|
|
67
|
+
--xs-letter-spacing: normal;
|
|
68
|
+
|
|
69
|
+
/* Catppuccin Latte */
|
|
70
|
+
--primary: #1e66f5;
|
|
71
|
+
--primary-foreground: #eff1f5;
|
|
72
|
+
--secondary: #ccd0da;
|
|
73
|
+
--secondary-foreground: #4c4f69;
|
|
74
|
+
--destructive: #d20f39;
|
|
75
|
+
--destructive-foreground: #eff1f5;
|
|
76
|
+
|
|
77
|
+
--background: #eff1f5;
|
|
78
|
+
--foreground: #4c4f69;
|
|
79
|
+
--muted: #e6e9ef;
|
|
80
|
+
--muted-foreground: #6c6f85;
|
|
81
|
+
--accent: #dce0e8;
|
|
82
|
+
--accent-foreground: #4c4f69;
|
|
83
|
+
--border: #bcc0cc;
|
|
84
|
+
--input: #ccd0da;
|
|
85
|
+
--ring: #7287fd;
|
|
86
|
+
|
|
87
|
+
--anchor-color: inherit;
|
|
88
|
+
--anchor-color-hover: inherit;
|
|
89
|
+
--anchor-text-decoration: none;
|
|
90
|
+
--anchor-text-decoration-hover: underline;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.dark {
|
|
94
|
+
/* Catppuccin Mocha */
|
|
95
|
+
--background: #1e1e2e;
|
|
96
|
+
--foreground: #cdd6f4;
|
|
97
|
+
--primary: #89b4fa;
|
|
98
|
+
--primary-foreground: #1e1e2e;
|
|
99
|
+
--secondary: #313244;
|
|
100
|
+
--secondary-foreground: #cdd6f4;
|
|
101
|
+
--muted: #313244;
|
|
102
|
+
--muted-foreground: #a6adc8;
|
|
103
|
+
--accent: #45475a;
|
|
104
|
+
--accent-foreground: #cdd6f4;
|
|
105
|
+
--destructive: #f38ba8;
|
|
106
|
+
--destructive-foreground: #1e1e2e;
|
|
107
|
+
--border: #585b70;
|
|
108
|
+
--input: #45475a;
|
|
109
|
+
--ring: #b4befe;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
body {
|
|
113
|
+
font-family: var(--font-family-sans);
|
|
114
|
+
font-size: var(--md-font-size);
|
|
115
|
+
font-weight: var(--md-font-weight);
|
|
116
|
+
line-height: var(--md-line-height);
|
|
117
|
+
letter-spacing: var(--md-letter-spacing);
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
background-color: var(--background);
|
|
121
|
+
color: var(--foreground);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
h1,
|
|
125
|
+
h2,
|
|
126
|
+
h3,
|
|
127
|
+
h4 {
|
|
128
|
+
font-family: var(--font-family-sans);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
h1 {
|
|
132
|
+
font-size: var(--h1-font-size);
|
|
133
|
+
font-weight: var(--h1-font-weight);
|
|
134
|
+
line-height: var(--h1-line-height);
|
|
135
|
+
letter-spacing: var(--h1-letter-spacing);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
h2 {
|
|
139
|
+
font-size: var(--h2-font-size);
|
|
140
|
+
font-weight: var(--h2-font-weight);
|
|
141
|
+
line-height: var(--h2-line-height);
|
|
142
|
+
letter-spacing: var(--h2-letter-spacing);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
h3 {
|
|
146
|
+
font-size: var(--h3-font-size);
|
|
147
|
+
font-weight: var(--h3-font-weight);
|
|
148
|
+
line-height: var(--h3-line-height);
|
|
149
|
+
letter-spacing: var(--h3-letter-spacing);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
h4 {
|
|
153
|
+
font-size: var(--h4-font-size);
|
|
154
|
+
font-weight: var(--h4-font-weight);
|
|
155
|
+
line-height: var(--h4-line-height);
|
|
156
|
+
letter-spacing: var(--h4-letter-spacing);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
p,
|
|
160
|
+
li {
|
|
161
|
+
font-size: var(--md-font-size);
|
|
162
|
+
font-weight: var(--md-font-weight);
|
|
163
|
+
line-height: var(--md-line-height);
|
|
164
|
+
letter-spacing: var(--md-letter-spacing);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
ul,
|
|
168
|
+
ol {
|
|
169
|
+
padding-left: 1.25rem;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
ul {
|
|
173
|
+
list-style: disc;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
ol {
|
|
177
|
+
list-style: decimal;
|
|
178
|
+
}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
/* Rettangoli UI default theme tokens and baseline typography. */
|
|
2
|
+
:root {
|
|
3
|
+
--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
4
|
+
|
|
5
|
+
--spacing-xs: 2px;
|
|
6
|
+
--spacing-sm: 4px;
|
|
7
|
+
--spacing-md: 8px;
|
|
8
|
+
--spacing-lg: 16px;
|
|
9
|
+
--spacing-xl: 32px;
|
|
10
|
+
|
|
11
|
+
--border-radius-xs: 1px;
|
|
12
|
+
--border-radius-sm: 2px;
|
|
13
|
+
--border-radius-md: 4px;
|
|
14
|
+
--border-radius-lg: 8px;
|
|
15
|
+
--border-radius-xl: 16px;
|
|
16
|
+
--border-radius-f: 50%;
|
|
17
|
+
--border-radius-full: 9999px;
|
|
18
|
+
|
|
19
|
+
--border-width-xs: 1px;
|
|
20
|
+
--border-width-sm: 2px;
|
|
21
|
+
--border-width-md: 4px;
|
|
22
|
+
--border-width-lg: 8px;
|
|
23
|
+
--border-width-xl: 16px;
|
|
24
|
+
|
|
25
|
+
--shadow-sm: 0px 2px 6px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);
|
|
26
|
+
--shadow-md: 0px 5px 12px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);
|
|
27
|
+
--shadow-lg: 0px 10px 24px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);
|
|
28
|
+
|
|
29
|
+
--h1-font-size: 3rem;
|
|
30
|
+
--h1-font-weight: 800;
|
|
31
|
+
--h1-line-height: 1;
|
|
32
|
+
--h1-letter-spacing: -.025em;
|
|
33
|
+
|
|
34
|
+
--h2-font-size: 1.875rem;
|
|
35
|
+
--h2-font-weight: 600;
|
|
36
|
+
--h2-line-height: 2.25rem;
|
|
37
|
+
--h2-letter-spacing: -.025em;
|
|
38
|
+
|
|
39
|
+
--h3-font-size: 1.5rem;
|
|
40
|
+
--h3-font-weight: 600;
|
|
41
|
+
--h3-line-height: 2rem;
|
|
42
|
+
--h3-letter-spacing: -.025em;
|
|
43
|
+
|
|
44
|
+
--h4-font-size: 1.25rem;
|
|
45
|
+
--h4-font-weight: 600;
|
|
46
|
+
--h4-line-height: 1.75rem;
|
|
47
|
+
--h4-letter-spacing: -.025em;
|
|
48
|
+
|
|
49
|
+
--lg-font-size: 1.125rem;
|
|
50
|
+
--lg-font-weight: 400;
|
|
51
|
+
--lg-line-height: 1.75rem;
|
|
52
|
+
--lg-letter-spacing: normal;
|
|
53
|
+
|
|
54
|
+
--md-font-size: 1rem;
|
|
55
|
+
--md-font-weight: 400;
|
|
56
|
+
--md-line-height: 1.5rem;
|
|
57
|
+
--md-letter-spacing: normal;
|
|
58
|
+
|
|
59
|
+
--sm-font-size: .875rem;
|
|
60
|
+
--sm-font-weight: 400;
|
|
61
|
+
--sm-line-height: 1;
|
|
62
|
+
--sm-letter-spacing: normal;
|
|
63
|
+
|
|
64
|
+
--xs-font-size: .75rem;
|
|
65
|
+
--xs-font-weight: 400;
|
|
66
|
+
--xs-line-height: 1;
|
|
67
|
+
--xs-letter-spacing: normal;
|
|
68
|
+
|
|
69
|
+
--primary: oklch(0.205 0 0);
|
|
70
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
71
|
+
--secondary: oklch(0.97 0 0);
|
|
72
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
73
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
74
|
+
--destructive-foreground: oklch(0.145 0 0);
|
|
75
|
+
|
|
76
|
+
--background: oklch(1 0 0);
|
|
77
|
+
--foreground: oklch(0.145 0 0);
|
|
78
|
+
--muted: oklch(0.97 0 0);
|
|
79
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
80
|
+
--accent: oklch(0.95 0 0);
|
|
81
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
82
|
+
--border: oklch(0.922 0 0);
|
|
83
|
+
--input: oklch(0.922 0 0);
|
|
84
|
+
--ring: oklch(0.708 0 0);
|
|
85
|
+
|
|
86
|
+
--anchor-color: inherit;
|
|
87
|
+
--anchor-color-hover: inherit;
|
|
88
|
+
--anchor-text-decoration: none;
|
|
89
|
+
--anchor-text-decoration-hover: underline;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.dark {
|
|
93
|
+
--background: oklch(0.145 0 0);
|
|
94
|
+
--foreground: oklch(0.985 0 0);
|
|
95
|
+
--primary: oklch(0.922 0 0);
|
|
96
|
+
--primary-foreground: oklch(0.305 0 0);
|
|
97
|
+
--secondary: oklch(0.269 0 0);
|
|
98
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
99
|
+
--muted: oklch(0.269 0 0);
|
|
100
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
101
|
+
--accent: oklch(0.371 0 0);
|
|
102
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
103
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
104
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
105
|
+
--border: oklch(1 0 0 / 10%);
|
|
106
|
+
--input: oklch(1 0 0 / 15%);
|
|
107
|
+
--ring: oklch(0.556 0 0);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
body {
|
|
111
|
+
font-family: var(--font-family-sans);
|
|
112
|
+
font-size: var(--md-font-size);
|
|
113
|
+
font-weight: var(--md-font-weight);
|
|
114
|
+
line-height: var(--md-line-height);
|
|
115
|
+
letter-spacing: var(--md-letter-spacing);
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: column;
|
|
118
|
+
background-color: var(--background);
|
|
119
|
+
color: var(--foreground);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
h1,
|
|
123
|
+
h2,
|
|
124
|
+
h3,
|
|
125
|
+
h4 {
|
|
126
|
+
font-family: var(--font-family-sans);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
h1 {
|
|
130
|
+
font-size: var(--h1-font-size);
|
|
131
|
+
font-weight: var(--h1-font-weight);
|
|
132
|
+
line-height: var(--h1-line-height);
|
|
133
|
+
letter-spacing: var(--h1-letter-spacing);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
h2 {
|
|
137
|
+
font-size: var(--h2-font-size);
|
|
138
|
+
font-weight: var(--h2-font-weight);
|
|
139
|
+
line-height: var(--h2-line-height);
|
|
140
|
+
letter-spacing: var(--h2-letter-spacing);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
h3 {
|
|
144
|
+
font-size: var(--h3-font-size);
|
|
145
|
+
font-weight: var(--h3-font-weight);
|
|
146
|
+
line-height: var(--h3-line-height);
|
|
147
|
+
letter-spacing: var(--h3-letter-spacing);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
h4 {
|
|
151
|
+
font-size: var(--h4-font-size);
|
|
152
|
+
font-weight: var(--h4-font-weight);
|
|
153
|
+
line-height: var(--h4-line-height);
|
|
154
|
+
letter-spacing: var(--h4-letter-spacing);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
p,
|
|
158
|
+
li {
|
|
159
|
+
font-size: var(--md-font-size);
|
|
160
|
+
font-weight: var(--md-font-weight);
|
|
161
|
+
line-height: var(--md-line-height);
|
|
162
|
+
letter-spacing: var(--md-letter-spacing);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
ul,
|
|
166
|
+
ol {
|
|
167
|
+
padding-left: 1.25rem;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
ul {
|
|
171
|
+
list-style: disc;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
ol {
|
|
175
|
+
list-style: decimal;
|
|
176
|
+
}
|