effcss 2.2.0 → 3.0.0

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 CHANGED
@@ -19,36 +19,41 @@ EffCSS is a self-confident CSS-in-JS library based only on the browser APIs.
19
19
 
20
20
  ## Some features
21
21
 
22
- - zero-dependency
23
- - framework agnostic
24
- - runtime stylesheets generation
25
- - built-in BEM support
26
- - server-side rendering compatible
22
+ - zero-dependency
23
+ - framework agnostic
24
+ - runtime stylesheets generation
25
+ - built-in BEM support
26
+ - server-side rendering compatible
27
+
28
+ ## EffCSS v3
29
+
30
+ EffCSS v3 is already here! The new version simplifies the API - if you know JS and CSS, you are already know it.
31
+ Docs and examples will be available soon.
27
32
 
28
33
  ## Links
29
34
 
30
- - [Docs](https://effcss.surge.sh)
31
- - [Repository](https://gitverse.ru/msabitov/effcss)
32
- - [Github mirror](https://github.com/msabitov/effcss)
35
+ - [Docs for EffCSS v2](https://effcss.surge.sh)
36
+ - [Repository](https://gitverse.ru/msabitov/effcss)
37
+ - [Github mirror](https://github.com/msabitov/effcss)
33
38
 
34
- ## Use with
39
+ ## EffCSS v2 examples
35
40
 
36
- - [React](https://stackblitz.com/edit/vitejs-react-effcss?file=index.html)
37
- - [React SSR](https://stackblitz.com/edit/vitejs-react-ssr-effcss?file=index.html)
38
- - [Svelte](https://stackblitz.com/edit/vitejs-svelte-effcss?file=index.html)
39
- - [Svelte SSR](https://stackblitz.com/edit/vitejs-svelte-ssr-effcss?file=index.html)
40
- - [Vue](https://stackblitz.com/edit/vitejs-vue-effcss?file=index.html)
41
- - [Preact](https://stackblitz.com/edit/vitejs-preact-effcss?file=index.html)
42
- - [Qwik](https://stackblitz.com/edit/vitejs-qwik-effcss?file=index.html)
43
- - [Solid js](https://stackblitz.com/edit/vitejs-solid-effcss?file=index.html)
44
- - [Lit](https://stackblitz.com/edit/vitejs-lit-effcss?file=index.html)
45
- - [Angular](https://stackblitz.com/edit/angular-effcss?file=src%2Findex.html)
46
- - [HTML only](https://stackblitz.com/edit/static-effcss?file=index.html)
41
+ - [React](https://stackblitz.com/edit/vitejs-react-effcss?file=index.html)
42
+ - [React SSR](https://stackblitz.com/edit/vitejs-react-ssr-effcss?file=index.html)
43
+ - [Svelte](https://stackblitz.com/edit/vitejs-svelte-effcss?file=index.html)
44
+ - [Svelte SSR](https://stackblitz.com/edit/vitejs-svelte-ssr-effcss?file=index.html)
45
+ - [Vue](https://stackblitz.com/edit/vitejs-vue-effcss?file=index.html)
46
+ - [Preact](https://stackblitz.com/edit/vitejs-preact-effcss?file=index.html)
47
+ - [Qwik](https://stackblitz.com/edit/vitejs-qwik-effcss?file=index.html)
48
+ - [Solid js](https://stackblitz.com/edit/vitejs-solid-effcss?file=index.html)
49
+ - [Lit](https://stackblitz.com/edit/vitejs-lit-effcss?file=index.html)
50
+ - [Angular](https://stackblitz.com/edit/angular-effcss?file=src%2Findex.html)
51
+ - [HTML only](https://stackblitz.com/edit/static-effcss?file=index.html)
47
52
 
48
- ## Try with
53
+ ## Try EffCSS v2 with
49
54
 
50
- - [Storybook](https://stackblitz.com/edit/storybook-react-effcss?file=src%2Findex.ts)
51
- - [Vitest benchmarking](https://stackblitz.com/edit/vitest-bench-effcss?file=tests%2FPublic.bench.ts)
55
+ - [Storybook](https://stackblitz.com/edit/storybook-react-effcss?file=src%2Findex.ts)
56
+ - [Vitest benchmarking](https://stackblitz.com/edit/vitest-bench-effcss?file=tests%2FPublic.bench.ts)
52
57
 
53
58
  ## Installation
54
59
 
@@ -67,102 +72,150 @@ yarn add effcss
67
72
 
68
73
  ## Quick start
69
74
 
70
- First you need to connect the `<style-provider>`:
75
+ First, define and add `Style provider` to your HTML:
71
76
 
72
77
  ```html
73
78
  <!DOCTYPE html>
74
79
  <html lang="en">
75
- <head>
76
- <!--app-head-->
77
- <script src="https://unpkg.com/effcss/dist/build/define-provider.min.js" crossorigin="anonymous"></script>
78
- </head>
79
- <body>
80
- <style-provider>
81
- <div id="root"></div>
82
- </style-provider>
83
- <!--app-body-->
84
- </body>
80
+ <head>
81
+ <!-- the first script defines the style provider custom element -->
82
+ <script src="https://unpkg.com/effcss/dist/build/define-provider.min.js" crossorigin="anonymous"></script>
83
+ <!-- the second script is the style provider itself -->
84
+ <script is="effcss-provider"></script>
85
+ </head>
86
+ <body>
87
+ <div id="root"></div>
88
+ </body>
85
89
  </html>
86
90
  ```
87
91
 
88
- Then you only need to create the necessary styles before rendering. The easiest way to do this is via the `Style Dispatcher`:
92
+ Second, use `Style consumer` to operate styles in your JS:
89
93
 
90
94
  **main.js**
91
95
 
92
96
  ```jsx
93
- import { createDispatcher } from "effcss/utils/browser";
97
+ import { createConsumer } from 'effcss/consumer';
94
98
 
95
- const styleDispatcher = createDispatcher();
99
+ const consumer = createConsumer();
96
100
 
97
101
  const root = createRoot(document.getElementById('root'));
98
- root.render(<App css={styleDispatcher}/>);
102
+ root.render(<App css={consumer} />);
99
103
  ```
100
104
 
105
+ Each CSS stylesheet corresponds to a single `StyleSheet maker`. `Stylesheet maker` is a pure JS function that gets an object with utilities as arguments and should return object with style rules:
106
+
101
107
  **App.js**
102
108
 
103
109
  ```jsx
104
- import { useRef } from 'react'
105
-
106
- const cardStyle = {
107
- c: {
108
- // block
109
- _: {
110
- display: 'flex',
111
- justifyContent: 'center'
112
- },
113
- // element
114
- __logo: {
115
- padding: '2em'
116
- },
117
- // boolean element modifier
118
- __logo_c_: {
119
- color: '#888',
120
- ':hover': {
121
- color: 'black',
122
- }
123
- },
124
- // element modifier with value
125
- __logo_sz_lg: {
126
- width: '5rem'
127
- },
128
- // ordinary CSS
129
- '.square': {
130
- aspectRatio: 1,
131
- ':focus': {
132
- aspectRatio: '1/2'
133
- }
134
- },
135
- body: {
136
- boxSizing: 'border-box'
137
- }
138
- }
110
+ import { useRef } from 'react';
111
+ import { TStyleSheetMaker } from 'effcss';
112
+
113
+ // describe your styles in BEM notation so that other people can use them
114
+
115
+ export interface ICardMaker {
116
+ /**
117
+ * Card block
118
+ */
119
+ card: {
120
+ /**
121
+ * Block modifiers
122
+ */
123
+ '': {
124
+ /**
125
+ * Card border radius boolean modifier
126
+ */
127
+ rounded: '';
128
+ /**
129
+ * Card height modifier
130
+ */
131
+ h: 'full' | 'half';
132
+ };
133
+ /**
134
+ * Card footer element
135
+ */
136
+ footer: {
137
+ /**
138
+ * Footer visibility boolean modifier
139
+ */
140
+ visible: '';
141
+ /**
142
+ * Footer size modifier
143
+ */
144
+ sz: 's' | 'm' | 'l';
145
+ };
146
+ };
147
+ }
148
+
149
+ const myStyleSheetMaker: TStyleSheetMaker = ({ bem, pseudo, at: { kf }, merge }) = {
150
+ // creates unique keyframes identifier
151
+ const spin = kf();
152
+ // deeply merges objects
153
+ const cardLogoStyles = merge({
154
+ animation: `${spin.k} infinite 20s linear`,
155
+ [pseudo.h()]: {
156
+ filter: "drop-shadow(0 0 2em #61dafbaa)",
157
+ }
158
+ }, {
159
+ border: 'none',
160
+ aspectRatio: 1,
161
+ [pseudo.h()]: {
162
+ opacity: 0.5
163
+ }
164
+ });
165
+ return {
166
+ [spin.s]: {
167
+ from: {
168
+ transform: 'rotate(0deg)',
169
+ },
170
+ to: {
171
+ transform: 'rotate(360deg)',
172
+ },
173
+ },
174
+ '.card-logo': cardLogoStyles,
175
+ // block
176
+ [bem<ICardMaker>('card')]: { ... },
177
+ // block boolean attribute
178
+ [bem<ICardMaker>('card..rounded')]: { ... },
179
+ // block attribute with value
180
+ [bem<ICardMaker>('card..h.full')]: { ... },
181
+ // element
182
+ [bem<ICardMaker>('card.footer')]: { ... },
183
+ // element boolean attribute
184
+ [bem<ICardMaker>('card.footer.visible')]: { ... },
185
+ // element attribute with value
186
+ [bem<ICardMaker>('card.footer.sz.m')]: { ... },
187
+ };
139
188
  };
140
189
 
141
190
  export const App = (props) => {
142
- const { css } = props;
143
-
144
- const stylesRef = useRef();
145
- if (!stylesRef.current) {
146
- const cardCSS = css.use(cardStyle);
147
- stylesRef.current = {
148
- // just block selector
149
- block: cardCSS()(),
150
- // element with modifiers
151
- logoMod: cardCSS('logo')({
152
- c: '',
153
- sz: 'lg'
154
- }),
155
- };
156
- }
157
- const styles = stylesRef.current;
158
-
159
- // apply attributes to appropriate nodes
160
- return <div {...styles.block}>
161
- <div {...styles.logoMod}>
162
- ...
163
- </div>
164
- </div>;
165
- }
191
+ const { css } = props;
192
+ const stylesRef = useRef();
193
+ if (!stylesRef.current) {
194
+ const bem = css.use(myStyleSheetMaker);
195
+ // thanks to the ICardMaker interface,
196
+ // you don't need to look at the implementation - just create the necessary attributes
197
+ stylesRef.current = {
198
+ card: bem<ICardMaker>('card..rounded'),
199
+ // element with modifiers
200
+ footer: bem<ICardMaker>({
201
+ card: {
202
+ footer: {
203
+ visible: '',
204
+ size: 'm'
205
+ }
206
+ }
207
+ })
208
+ };
209
+ }
210
+ const styles = stylesRef.current;
211
+
212
+ // just apply attributes to appropriate elements
213
+ return (
214
+ <div {...styles.card}>
215
+ <div {...styles.footer}>...</div>
216
+ </div>
217
+ );
218
+ };
166
219
  ```
167
220
 
168
221
  That's all. Enjoy simplicity.
@@ -1,7 +1,7 @@
1
1
  /*
2
- * EffCSS v2.2.0
2
+ * EffCSS v3.0.0
3
3
  * {@link https://gitverse.ru/msabitov/effcss}
4
4
  * Copyright (c) Marat Sabitov
5
5
  * @license Apache 2.0
6
6
  */
7
- const t=Object.entries,e=(e,s,i)=>t(e).reduce(s,i),s=t=>"object"==typeof t,i=t=>`{${t}}`,r=Object.assign.bind(Object),n=(t,e)=>`${t}:${e};`,o=(t,e)=>["@property",t,i(n("syntax",e.syn||'"*"')+n("inherits",e.inh||!1)+(e.ini?n("initial-value",e.ini):""))].join(" "),l=t=>`var(${t})`,a=({l:t,c:e,h:s,a:i=1})=>`oklch(${t} ${e} ${s} / ${i})`,c=["l","c","h","a"];class h{constructor(h){this._outerKeys={},this._outerSets={},this._parseSelector=t=>{let e,s,i,r,n;return[e,n]=t.split(":"),e.startsWith("__")?[s,i,r]=e.slice(2).split("_"):[s,i,r]=e.split("_"),{e:s,m:i,mv:r,s:n}},this._prepareVarName=(...t)=>this._resolver.varName(...t),this._prepareKeyframesName=(...t)=>this._resolver.kfName(...t),this.compile=(h,p)=>{const{_:f,kf:m,k:b={},v:u={},c:d}=p,g=this._resolver.selector.bind(this),_=this._parseSelector;let y=r({},d),v=r({},b),$=r({_:{}},u),x="";if(f)for(let t in f){const e=f[t];if("c"===e.typ){const s={};c.forEach((i=>{const r=t+i,n=this._prepareVarName(h,r);s[i]=n,v["_"+r]=s[i],x+=o(n,e)})),$._[t]=a({l:l(s.l),c:l(s.c),h:l(s.h),a:l(s.a)}),e.all&&(y["_"+t+"l"]=`&lig=>${this._prepareVarName(h,t+"l")}:{1}`,y["_"+t+"c"]=`&chr=>${this._prepareVarName(h,t+"c")}:{1}`,y["_"+t+"h"]=`&hue=>${this._prepareVarName(h,t+"h")}:{1}`,y["_"+t+"a"]=`&alp=>${this._prepareVarName(h,t+"a")}:{1}`)}else{const s=this._prepareVarName(h,t);v["_"+t]=s,$._[t]=l(s),x+=o(s,e)}}const w=t=>v[t]||this._outerKeys[t],j=t=>{var e;return $[t]||this._outerSets[t]||(null===(e=this._outerSets)||void 0===e?void 0:e.root[t])},k=t=>t.replaceAll(/\{(.+?)\}/g,((t,e)=>{const[s,i]=e.split(".");if(i){const t=j(s);return""+((null==t?void 0:t[i])||(null==t?void 0:t.def)||"")}return""+(w(s)||"")})),S=e=>{const s=e.split("?");let i;for(let e in s){const r=s[e],[n,o]=r.split("=>"),l=n.match(/(\w+)(\[[\w,]+\])?/);if(!l)continue;const[a,c,h]=l,p=j(c);if(!p)continue;i=p;let f=t(i);const m=null==h?void 0:h.slice(1,-1).split(",");if(m){const t=new Set(m);f=f.filter((([e,s])=>t.has(e)))}if(o){let[t,e]=o.split("|");void 0===e&&(e=t,t=""),f=f.map((([s,i])=>[t.replace("{0}",s)||s,k(e.replaceAll("{1}",""+i))]))}(m||o)&&(i=Object.fromEntries(f));break}return i};function O(t,r,o){var l,a,c,p;let f=""+t;if((null===(l=null==t?void 0:t.startsWith)||void 0===l?void 0:l.call(t,"$"))&&(f=""+w(t.slice(1)),!f))return"";if(Array.isArray(r))return O(f,Object.assign({},...r.map((t=>"string"==typeof t?S(t):t))),o);if(null==r)return"";if(s(r)){const t=!o||(null===(a=o.startsWith)||void 0===a?void 0:a.call(o,"@"))||f.startsWith("&")||f.startsWith("@")?"":"&";if(f.startsWith("_")){const{e:n,m:o,mv:l}=_(f);return o&&"string"!=typeof l?e(r,((r,[l,a])=>{let c;return c=s(a)?e(a,((t,e)=>t+O(...e,f)),""):a+";",r+t+g({b:h,e:n,m:o,mv:l})+i(c)}),""):t+g({b:h,e:n,m:o,mv:l})+i(e(r,((t,e)=>t+O(...e,f)),""))}return t+f+i(e(r,((t,e)=>t+O(...e,f)),""))}{let t=""+r;return(null===(c=null==t?void 0:t.startsWith)||void 0===c?void 0:c.call(t,"&"))?O(f,S(t.slice(1)),o):(null===(p=null==t?void 0:t.includes)||void 0===p?void 0:p.call(t,"{"))?O(f,k(t),o):n(f.replace(/[A-Z]/g,(t=>"-"+t.toLowerCase())),t)}}let A="";if(m)for(let t in m){const s=m[t],r=this._prepareKeyframesName(h,t);v["kf_"+t]=r,A+=`@keyframes ${r} `+i(e(s,((t,[s,r])=>t+s+(String(+s)===s?"%":"")+i(e(r,((t,e)=>t+O(...e)),""))),""))}return x+A+e(y,((t,e)=>t+O(...e)),"")};const{sets:p,keys:f,resolver:m}=h;this._resolver=m,f&&(this._outerKeys=f),p&&(this._outerSets=p)}}const p=t=>Array.isArray(t)?t:[t];class f{constructor(){this._stylesheets={},this._rules={},this._styleSheetsArray=[],this._listeners=[],this.getIndex=t=>this._styleSheetsArray.findIndex((e=>e===t)),this.get=t=>this._stylesheets[t],this.has=t=>!!t&&!!this.get(t),this.getAll=()=>this._stylesheets,this.add=(t,e)=>{if(!this._stylesheets[t])return this._stylesheets[t]=e,this._styleSheetsArray.push(e),this.notify(),!0},this.status=t=>{const e=this.get(t);return!!e&&-1!==this.getIndex(e)},this.on=t=>{const e=p(t).reduce(((t,e)=>{const s=this.get(e);return!(!s||this.status(e))&&(this._styleSheetsArray.push(s),t)}),!0);return this.notify(),e},this.off=t=>{const e=p(t).reduce(((t,e)=>{const s=this.get(e);if(s&&this.status(e)){const e=this.getIndex(s);return this._styleSheetsArray.splice(e,1),t}return!1}),!0);return this.notify(),e},this.remove=t=>{const e=this.get(t);if(!e)return;const s=this.getIndex(e);return s>-1&&(this._styleSheetsArray.splice(s,1),delete this._stylesheets[t],delete this._rules[t]),this.notify(),!0},this.pack=(t,e)=>{const s=new CSSStyleSheet;if(s.replaceSync(e),s.cssRules.length)return this.add(t,s);console.log(`StyleSheet '${t}' is empty`)},this.replace=(t,e)=>{const s=this._stylesheets[t];if(s)return s.replaceSync(e),this.notify(),!0},this.apply=t=>{t.adoptedStyleSheets=this._styleSheetsArray},this.registerNode=t=>{this._listeners.findIndex((e=>e.deref()===t))>=0||(this._listeners.push(new WeakRef(t)),this.apply(t))},this.unregisterNode=t=>{const e=this._listeners.findIndex((e=>e.deref()===t));e>=0&&this._listeners.splice(e,1)},this.notify=()=>{this._listeners=this._listeners.reduce(((t,e)=>{const s=e.deref();return s&&(this.apply(s),t.push(e)),t}),[])}}removeAll(){return this._styleSheetsArray.splice(0),this._stylesheets={},this._rules={},this.notify(),!0}}const m=(...t)=>t.join(","),b="rem",u="-",d=" ",g="-x",_="-y",y="down",v="horizontal",$="vertical",x="text",w=x+u,j="font",k=j+u,S="column",O=S+u,A="max-",z="min-",N="content",C=N+"s",E="-items",K="self",T="inline",W="block",I="size",P="-radius",V="direction",q="outline",M="style",R=u+M,B="end",F=u+B,J="start",L=u+J,G="center",H="word",Z="line",D="break",Q=D+u,U="wrap",X="no"+U,Y="rule",tt="object",et="top",st=u+et,it="left",rt=u+it,nt="bottom",ot=u+nt,lt="right",at=u+lt,ct="width",ht=u+ct,pt="color",ft=u+pt,mt="overflow",bt="align",ut="type",dt="transform",gt="all",_t="height",yt="normal",vt="opacity",$t="visibility",xt="scale",wt="box",jt=u+wt,kt="border",St="position",Ot="none",At="auto",zt="fill",Nt="stroke",Ct="reverse",Et="space",Kt="fixed",Tt="origin",Wt="alpha",It="luminance",Pt="clip",Vt="zoom",qt="scroll",Mt="padding",Rt="margin",Bt="both",Ft="mode",Jt="repeat",Lt="light",Gt="linear",Ht="hidden",Zt="shadow",Dt="behavior",Qt="orientation",Ut="name",Xt="after",Yt="before",te="image",ee="list"+R,se=ee+u+ut,ie=ee+u+St,re=ee+u+te,ne=pt+"-scheme",oe=kt+ot,le=kt+rt,ae=kt+at,ce=kt+st,he=kt+u+W,pe=kt+u+T,fe=he+L,me=he+F,be=pe+L,ue=pe+F,de=kt+ht,ge=oe+ht,_e=le+ht,ye=ae+ht,ve=ce+ht,$e=he+ht,xe=pe+ht,we=fe+ht,je=me+ht,ke=be+ht,Se=ue+ht,Oe=kt+P,Ae=oe+rt+P,ze=oe+at+P,Ne=ce+rt+P,Ce=ce+at+P,Ee=kt+L+F+P,Ke=kt+L+L+P,Te=kt+F+F+P,We=kt+F+L+P,Ie=kt+ft,Pe=le+ft,Ve=ae+ft,qe=ce+ft,Me=oe+ft,Re=he+ft,Be=pe+ft,Fe=fe+ft,Je=me+ft,Le=be+ft,Ge=ue+ft,He=kt+R,Ze=le+R,De=ae+R,Qe=ce+R,Ue=oe+R,Xe=he+R,Ye=pe+R,ts=fe+R,es=me+R,ss=be+R,is=ue+R,rs=q+ft,ns=q+ht,os=q+R,ls=q+u+"offset",as=mt+g,cs=mt+_,hs=tt+u+"fit",ps=tt+u+St,fs=xt+u+y,ms=wt+u+Zt,bs=Mt+jt,us=kt+jt,ds=N+jt,gs=zt+jt,_s=Nt+jt,ys="view"+jt,vs="no-"+Pt,$s=Jt+g,xs=Jt+_,ws="no-"+Jt,js=Mt+rt,ks=Mt+st,Ss=Mt+at,Os=Mt+ot,As=Rt+rt,zs=Rt+st,Ns=Rt+at,Cs=Rt+ot,Es="grid",Ks="row",Ts="gap",Ws="justify",Is="flex",Ps=Is+u,Vs="place"+E,qs=T+u+Is,Ms=Ps+"basis",Rs=Ps+"grow",Bs=Ps+"shrink",Fs=Ps+V,Js=Ps+U,Ls=Ws+u+N,Gs=Ws+E,Hs=bt+E,Zs=bt+u+N,Ds=bt+u+K,Qs=Es+u+"template",Us=Qs+u+Ks+"s",Xs=Qs+u+S+"s",Ys=Ks+u+Ts,ti=O+Ts,ei=Ws+u+K,si=Es+u+Ks,ii=si+F,ri=si+L,ni=Es+u+S,oi=ni+F,li=ni+L,ai=O+"count",ci=O+zt,hi=O+Y,pi=hi+ft,fi=hi+R,mi=hi+ht,bi=O+"span",ui=S+ht,di=Ks+u+Ct,gi=O+Ct,_i=U+u+Ct,yi=Is+F,vi=Is+L,$i=Et+"-between",xi=Et+"-around",wi=Et+"-evenly",ji=T+u+Es,ki="mask-",Si=ki+Pt,Oi=ki+"composite",Ai=ki+Ft,zi=ki+Tt,Ni=ki+St,Ci=ki+Jt,Ei=ki+I,Ki=ki+ut,Ti="timing-function",Wi="delay",Ii="duration",Pi="animation",Vi=Pi+u,qi=Vi+Ut,Mi=Vi+Ti,Ri=Vi+V,Bi=Vi+"iteration-count",Fi=Vi+Ii,Ji=Vi+Wi,Li=Vi+"play-state",Gi=Vi+zt+u+Ft,Hi="transition",Zi=Hi+u,Di=Zi+Dt,Qi=Zi+"property",Ui=Zi+Ti,Xi=Zi+Ii,Yi=Zi+Wi,tr="alternate",er=tr+u+Ct,sr="-out",ir="ease",rr=ir+"-in",nr=rr+sr,or=ir+sr,lr="step",ar=lr+L,cr=lr+F,hr="translate",pr="rotate",fr="perspective",mr=fr+u+Tt,br=it+d+et,ur=lt+d+et,dr=it+d+nt,gr=lt+d+nt,_r="inset",yr=_r+u,vr=dt+jt,$r=dt+u+Tt,xr=dt+R,wr=yr+W,jr=wr+F,kr=wr+L,Sr=yr+T,Or=Sr+F,Ar=Sr+L,zr="fit-"+N,Nr=z+N,Cr=A+N,Er=wt+"-sizing",Kr=A+ct,Tr=z+ct,Wr=A+_t,Ir=z+_t,Pr=W+u+I,Vr=A+Pr,qr=z+Pr,Mr=T+u+I,Rr=A+Mr,Br=z+Mr,Fr=qt+u+Dt,Jr=qt+u+Rt,Lr=Jr+st,Gr=Jr+ot,Hr=Jr+rt,Zr=Jr+at,Dr=Jr+u+W,Qr=Dr+F,Ur=Dr+L,Xr=Jr+u+T,Yr=Xr+F,tn=Xr+L,en=qt+u+Mt,sn=en+st,rn=en+ot,nn=en+rt,on=en+at,ln=en+u+W,an=ln+F,cn=ln+L,hn=en+u+T,pn=hn+F,fn=hn+L,mn=qt+u+"snap",bn=mn+u+bt,un=mn+u+"stop",dn=mn+u+ut,gn="over"+Fr,_n=" mandatory",yn="x"+_n,vn="y"+_n,$n=W+_n,xn=T+_n,wn=Bt+_n,jn=" proximity",kn="x"+jn,Sn="y"+jn,On=W+jn,An=T+jn,zn=Bt+jn,Nn=w+"decoration",Cn=Nn+u+pt,En=Nn+u+"thickness",Kn=Nn+u+M,Tn=Nn+u+Z,Wn="white-"+Et,In=w+dt,Pn=w+bt,Vn=$+u+bt,qn=w+mt,Mn=w+Qt,Rn=w+"rendering",Bn=w+Zt,Fn=w+"emphasis",Jn=Fn+ft,Ln=Fn+u+St,Gn=Fn+R,Hn=w+U,Zn=Hn+u+Ft,Dn=Hn+R,Qn=H+u+D,Un=k+I,Xn=k+"weight",Yn=k+"family",to=k+M,eo=k+"synthesis",so=k+"variant",io=so+u+tr+"s",ro=so+"-caps",no=so+"-numeric",oo=so+u+St,lo=so+"-east-asian",ao=so+"-ligatures",co=so+"-settings",ho="writing-"+Ft,po=Z+u+_t,fo=Z+u+D,mo=Z+"-through",bo="over"+Z,uo="under"+Z,go="pre",_o=go+u+Z,yo=go+u+U,vo=Q+Et+"s",$o=Q+gt,xo=Q+H,wo=Q+Xt,jo=Q+Yt,ko=v+"-tb",So=$+"-lr",Oo=$+"-rl",Ao="keep-"+gt,zo="pointer",No="pan",Co=No+g,Eo=No+rt,Ko=No+at,To=No+_,Wo=No+u+y,Io="pinch-"+Vt,Po=$+u+x,Vo="grab",qo=Vo+"bing",Mo="resize",Ro="col-"+Mo,Bo="row-"+Mo,Fo="n-"+Mo,Jo="e-"+Mo,Lo="s-"+Mo,Go="w-"+Mo,Ho="ne-"+Mo,Zo="ew-"+Mo,Do="nw-"+Mo,Qo="se-"+Mo,Uo="sw-"+Mo,Xo="ns-"+Mo,Yo="nesw-"+Mo,tl="nwse-"+Mo,el=Vt+u+"in",sl=Vt+u+"out",il=zo+"-events",rl=qt+u+St,nl="caret"+ft,ol="accent"+ft,ll="filter",al="backdrop-"+ll,cl="background",hl=cl+u,pl=hl+te,fl=hl+pt,ml=hl+Pt,bl=hl+Tt,ul=hl+St,dl=ul+g,gl=ul+_,_l=hl+Jt,yl=hl+I,vl=hl+"blend-"+Ft,$l=hl+"attachment",xl="gradient",wl=Gt+u+xl,jl="radial-"+xl,kl="conic-"+xl,Sl=N+u+$t,Ol=Nt+ht,Al=Nt+u+vt,zl=zt+u+Y,Nl=zt+u+vt,Cl=pt+"-dodge",El=pt+"-burn",Kl="hard-"+Lt,Tl="soft-"+Lt,Wl=pt+"-mix",Il="revert",Pl=Il+"-layer",Vl="container",ql=Vl+u+ut,Ml=Vl+u+Ut,Rl=":first-",Bl=":last-",Fl=":only-",Jl="child",Ll="of-type",Gl=":nth-child",Hl="prefers-",Zl=Hl+ne,Dl="@media",Ql=pt+"-gamut",Ul=Hl+"contrast",Xl="scripting",Yl="::"+Xt,ta="::"+Yt,ea="sideways",sa=ea+at,ia={0:0,"1/12":"0.0833","1/10":"0.1","1/6":"0.1667","1/5":"0.2","1/4":"0.25","3/10":"0.3","1/3":"0.3333","2/5":"0.4","5/12":"0.4167","1/2":"0.5","7/12":"0.5833","3/5":"0.6","2/3":"0.6667","7/10":"0.7","3/4":"0.75","4/5":"0.8","5/6":"0.8333","9/10":"0.9","11/12":"0.9167",1:"1"},ra=[...Array(12).keys()].reduce(((t,e)=>(t[e]=e,t)),{}),na={u:{ini:"initial",inh:"inherit",u:"unset",r:Il,rl:Pl},rep:{rx:$s,ry:xs,r:Jt,s:Et,ro:"round",nr:ws},cnt:{n:yt,s:I,is:Mr},time:{def:300,xs:100,s:200,m:300,l:450,xl:600,no:0,min:50,max:750},lig:{def:.75,c:.05,s:.65,m:.75,l:.85,n:.9},hue:{def:261.35,b:261.35,i:194.77,e:29.23,w:70.66,s:142.49},chr:{def:.03,xs:.03,s:.06,m:.1,l:.15,xl:.25},alp:{def:1,min:0,xs:.1,s:.25,m:.5,l:.75,xl:.9,max:1},cu:{c:"currentColor",t:"transparent"},ff:{def:"Roboto, sans-serif",h:"Georgia, serif"},fwg:{xs:100,s:200,m:400,l:600,xl:700},fsz:{xs:.25,s:.5,m:1,l:1.5,xl:2},fst:{i:"italic",n:yt,o:"oblique"},lsp:{no:0,s:.05,m:.1,l:.2},ws:{n:yt,nw:X,p:go,pl:_o,pw:yo,bs:vo},wb:{n:yt,ba:$o,ka:Ao,bw:xo},wm:{htb:ko,vlr:So,vrl:Oo},hyp:{no:Ot,m:"manual",a:At},tt:{l:"lowercase",u:"uppercase",c:"capitalize"},td:{lt:mo,o:bo,u:uo},tor:{m:"mixed",u:"upright",sr:sa,s:ea,ugo:"use-glyph-"+Qt},ta:{l:it,c:G,j:Ws,r:lt,s:J,e:B},fr:ia,coef:ra,rat:{1:1,"2/1":2,"1/2":.5,"4/3":1.3333,"3/4":.75,"9/16":.5625,"16/9":1.7778},sp:{"3xs":.125,"2xs":.25,xs:.5,s:.75,m:1,l:1.25,xl:1.5,"2xl":2,"3xl":4},sz:{"3xs":1,"2xs":1.5,xs:2,s:5,m:10,l:15,xl:20,"2xl":25,"3xl":30},usz:{a:"auto",no:0,min:Nr,max:Cr,fit:zr},rad:{s:.5,m:1,l:2},th:{s:.1,m:.25,l:.5},csz:{cv:"cover",cn:"contain",a:At,f:zt,sd:fs},box:{c:ds,p:bs,b:us,f:gs,s:_s,v:ys,nc:vs,t:x},sc:{xs:.5,s:.67,m:1,l:1.5,xl:2},tr:{xs:.25,s:.5,m:1,l:1.5,xl:2},sk:{xs:-15,s:-10,m:0,l:10,xl:15},rot:{xs:-180,s:-90,m:0,l:90,xl:180},z:{s:.8,m:1,l:1.2},pers:{s:10,m:15,l:20},ali:{s:J,e:B,c:G,st:"stretch",sb:$i,sa:xi,se:wi,b:"baseline",fs:vi,fe:yi,no:Ot},dis:{g:Es,ig:ji,f:Is,if:qs,b:W,i:T},ca:ra,co:ra,ra:ra,ro:ra,fd:{r:Ks,rr:di,c:S,cr:gi},fb:ia,fo:ra,fg:ra,fs:ra,fw:{w:U,nw:X,wr:_i},lh:{xs:1,s:1.25,m:1.5,l:1.75,xl:2},lb:{a:At,any:"anywhere",n:yt,l:"loose",s:"strict"},ls:{no:Ot,dt:"dotted",i:_r,h:Ht,ds:"dashed",s:"solid",db:"double",o:"outset",r:"ridge",g:"groove"},ov:{h:Ht,s:qt,a:At,c:Pt,e:"ellipsis"},v:{h:Ht,v:"visible",c:"collapse",a:At},o:{min:0,xs:.1,s:.25,m:.5,l:.75,xl:.9,max:1},zi:{min:-1,1:1,2:2,3:3,4:4,5:5,max:10},ttf:{l:Gt,e:ir,ei:rr,eo:or,eio:nr,ss:ar,se:cr},tp:{col:m(pt,fl,Ie,Cn),icon:m(zt,Nt),flt:m(ll,al),ind:m(Mt,Rt),sz:m(ct,Kr,Tr,_t,Wr,Ir),esz:m(qr,Pr,Vr,Br,Mr,Rr),o:vt,b:kt,f:Is,g:Es,pos:m(St,it,et,nt,lt),tf:m(dt,hr,xt,pr,"skew",fr)},tb:{ad:"allow-discrete",n:yt},aic:{inf:"infinite",1:1,2:2,3:3,4:4,5:5},wc:{a:At,sp:rl,c:C,tf:dt,o:vt,i:_r,tfi:m(dt,_r)},afm:{no:Ot,f:"forwards",b:"backwards",both:Bt},adir:{r:Ct,a:tr,ar:er},aps:{r:"running",p:"paused"},pe:{a:At,no:Ot,all:gt,f:zt,s:Nt},cur:{h:"help",a:At,p:zo,cm:"context-menu",pr:"progress",w:"wait",cell:"cell",crh:"crosshair",t:x,vt:Po,cp:"copy",m:"move",g:Vo,gng:qo,cr:Ro,rr:Bo,nr:Fo,er:Jo,sr:Lo,wr:Go,ner:Ho,ewr:Zo,nwr:Do,ser:Qo,swr:Uo,nsr:Xo,neswr:Yo,nwser:tl,zi:el,zo:sl},res:{n:Ot,v:$,h:v,b:Bt},toa:{a:At,no:Ot,px:Co,pl:Eo,pr:Ko,py:To,pu:"pan-up",pd:Wo,pz:Io,m:"manipulation"},us:{n:Ot,t:x,all:gt,a:At},sb:{a:At,s:"smooth"},sss:{n:yt,a:"always"},sst:{n:Ot,x:"x",y:"y",b:W,i:T,both:Bt,xm:yn,ym:vn,bm:$n,im:xn,bothm:wn,xp:kn,yp:Sn,bp:On,ip:An,bothp:zn},pos:{r:"relative",a:"absolute",f:Kt,s:"static"},posv:{b:nt,t:et,c:G,l:it,r:lt,lt:br,rt:ur,lb:dr,rb:gr},cf:{a:At,b:"balance"},cs:{no:Ot,all:gt},mc:{a:"add",s:"subtract",i:"intersect",e:"exclude"},mt:{a:Wt,l:It},mm:{a:Wt,l:It,m:"match-source"},bgbm:{n:yt,m:"multiply",scr:"screen",o:"overlay",d:"darken",l:Lt+"en",dif:"difference",exc:"exclusion",h:"hue",sat:"saturation",c:pt,lum:"luminosity",cd:Cl,cb:El,hl:Kl,sl:Tl},bga:{s:qt,f:Kt,l:"local"}},oa={a:Pi,an:qi,adur:Fi,adel:Ji,aps:Li,afm:Gi,adir:Ri,aic:Bi,atf:Mi,tn:Hi,tdur:Xi,tdel:Yi,tb:Di,tp:Qi,ttf:Ui,ba:wo,bb:jo,bor:kt,bw:de,br:Oe,bs:He,bls:Ze,brs:De,bts:Qe,bbs:Ue,bbls:Xe,bis:Ye,bbss:ts,bbes:es,biss:ss,bies:is,brw:ye,blw:_e,btw:ve,bbw:ge,btlr:Ne,btrr:Ce,bbrr:ze,bblr:Ae,biw:xe,bblw:$e,bbew:je,bbsw:we,bisw:ke,biew:Se,besr:We,beer:Te,bssr:Ke,bser:Ee,bc:Ie,blc:Pe,brc:Ve,btc:qe,bbc:Me,bblc:Re,bic:Be,bbsc:Fe,bbec:Je,bisc:Le,biec:Ge,bg:cl,bgi:pl,bgc:fl,c:pt,cmix:Wl,csh:ne,acc:ol,ctc:nl,st:Nt,stw:Ol,sto:Al,fi:zt,fir:zl,fio:Nl,flt:ll,bf:al,dis:"display",g:Es,jc:Ls,ji:Gs,ai:Hs,pi:Vs,ac:Zs,gt:Qs,gtr:Us,gtc:Xs,gp:Ts,rg:Ys,cg:ti,as:Ds,js:ei,gr:si,gre:ii,grs:ri,gc:ni,gce:oi,gcs:li,fx:Is,fxd:Fs,fxw:Js,fxs:Bs,fxg:Rs,fxb:Ms,ord:"order",dir:V,m:Rt,ml:As,mr:Ns,mt:zs,mb:Cs,p:Mt,pl:js,pr:Ss,pt:ks,pb:Os,out:q,oc:rs,ow:ns,os:os,oo:ls,l:it,r:lt,t:et,b:nt,ins:_r,ib:wr,ibe:jr,ibs:kr,ii:Sr,iie:Or,iis:Ar,wc:"will-change",app:"appearance",pe:il,cur:"cursor",toa:"touch-action",us:"user-select",res:Mo,lis:ee,lisp:ie,lisi:re,list:se,sb:Fr,ssa:bn,sss:un,sst:dn,sm:Jr,sml:Hr,smr:Zr,smt:Lr,smb:Gr,sp:en,spl:nn,spr:on,spt:sn,spb:rn,smbl:Dr,smbe:Qr,smbs:Ur,smi:Xr,smie:Yr,smis:tn,spbl:ln,spbe:an,spbs:cn,spi:hn,spie:pn,spis:fn,osb:gn,ar:"aspect-ratio",w:ct,maxw:Kr,minw:Tr,h:_t,minh:Ir,maxh:Wr,bl:Pr,maxb:Vr,minb:qr,i:Mr,mini:Br,maxi:Rr,per:fr,pero:mr,rot:pr,sc:xt,tf:dt,tfb:vr,tfo:$r,tfs:xr,tr:hr,z:Vt,lts:"letter-spacing",lh:po,lb:fo,f:j,fst:to,ff:Yn,fwg:Xn,fsz:Un,fsn:eo,fv:so,fva:io,fvc:ro,fvea:lo,fvl:ao,fvn:no,fvs:co,fvp:oo,tt:In,td:Nn,tdt:En,tds:Kn,tdl:Tn,ta:Pn,to:qn,trg:Rn,ts:Bn,te:Fn,tep:Ln,tec:Jn,tes:Gn,tw:Hn,twm:Zn,tws:Dn,va:Vn,ws:Wn,tor:Mn,wb:Qn,wm:ho,hyp:"hyphens",bsz:Er,bsh:ms,pos:St,cf:ci,crs:fi,crc:pi,crw:mi,cs:bi,cw:ui,cc:ai,bgcl:ml,bgp:ul,bgpx:dl,bgpy:gl,bgbm:vl,bgo:bl,bgr:_l,bga:$l,bgsz:yl,mcl:Si,mcm:Oi,mm:Ai,mo:zi,mp:Ni,mre:Ci,msz:Ei,mtp:Ki,obf:hs,obp:ps,con:N,ov:mt,ovx:as,ovy:cs,v:$t,cv:Sl,o:vt,zi:"z-index",lgr:wl,rgr:jl,cgr:kl,inf:"infinite",cnt:ql,cnn:Ml,$:":root",$u:"*",$h:":hover",$f:":focus",$fv:":focus-visible",$a:":active",$v:":visited",$val:":valid",$inv:":invalid",$e:":empty",$d:":disabled",$r:":required",$o:":optional",$m:":modal",$l:":link",$fc:Rl+Jl,$lc:Bl+Jl,$oc:Fl+Jl,$1:Gl+"(odd)",$2:Gl+"(even)",$ft:Rl+Ll,$lt:Bl+Ll,$ot:Fl+Ll,$bef:ta,$aft:Yl,$bd:"::backdrop",$ba:`&${ta},&${Yl}`,$pl:":placeholder",$light:Dl+`(${Zl}: light)`,$dark:Dl+`(${Zl}: dark)`,$red_m:Dl+"(prefers-reduced-motion: reduce)",$ori_l:Dl+`(${Qt}: landscape)`,$ori_p:Dl+`(${Qt}: portrait)`,$gam_srgb:Dl+`(${Ql}: srgb)`,$gam_p3:Dl+`(${Ql}: p3)`,$gam_rec:Dl+`(${Ql}: rec2020)`,$con_no:Dl+`(${Ul}: no-preference)`,$con_m:Dl+`(${Ul}: more)`,$con_l:Dl+`(${Ul}: less)`,$con_c:Dl+`(${Ul}: custom)`,$scr_no:Dl+`(${Xl}: none)`,$scr_ini:Dl+`(${Xl}: initial-only)`,$scr_en:Dl+`(${Xl}: enabled)`,$ss:"@starting-style",$ns:"@namespace"},la={xs:30+b,sm:40+b,md:48+b,lg:64+b,xl:80+b},aa={xs:10+b,sm:20+b,md:30+b,lg:40+b,xl:48+b},ca={$c:"{u.inh}",$fsz:"16px",$ff:"{ff.def}",$$u:{$c:"{u.inh}",$fsz:"16px",$ff:"{ff.def}"}},ha={light:{lig:{def:.75,c:.05,s:.65,m:.75,l:.85,n:.9}},dark:{lig:{def:.4,n:.25,s:.3,m:.4,l:.5,c:.95}}},pa="{1}rem",fa="{1}deg",ma="span {1}",ba={fb:"calc(100% * {1})",ra:ma,ca:ma,sz:pa,sp:pa,rad:pa,th:pa,bp:pa,cbp:pa,fsz:pa,lsp:pa,tr:pa,pers:pa,sk:fa,rot:fa,time:"{1}ms"},ua="style-provider",da=t=>"object"==typeof t;class ga{constructor(t){this._counter=0,this._keys=new Set,this._configs=new Map,this.use=(t,e)=>{const s=this._configs.get(t);if(s)return s;const i=e||this._prefix+this._counter.toString(36);return this._keys.add(i),this._configs.set(t,i),this._counter++,i},this.mutate=(t,e)=>Object.assign(this.getConfigs()[t],e),this.getKey=t=>this._configs.get(t),this.getKeys=()=>[...this._keys],this.getConfigs=()=>Object.fromEntries(this._configs.entries().map((([t,e])=>[e,t]))),this._prefix=(null==t?void 0:t.prefix)||"eff",t.initContent&&Object.entries(t.initContent).forEach((([t,e])=>this.use(e,t))),t.hydrate&&(this._counter=0)}}const _a=globalThis.document,ya=t=>"application/json"===(null==t?void 0:t.getAttribute("type")),va=t=>Array.isArray(t)?t:[t];!function(t={}){const{name:e=ua,styles:s={},settings:i={}}=t,r=globalThis.customElements;!(null==r?void 0:r.get(e))&&(r.define(e,class extends HTMLElement{constructor(){super(...arguments),this._setState=()=>{const{units:t,keys:s,sets:i,mediaBP:r=la,containerBP:n=aa,rootStyle:o=ca,themes:l=ha}=this.settingsContent,a=Object.assign(Object.assign({},ba),t||{}),c=Object.assign(Object.assign({},oa),s||{}),h=Object.assign({},na);i&&Object.entries(i).forEach((([t,e])=>h[t]=Object.assign({},e)));const p=Object.entries(l);if(a)for(const t in a)h[t]=h[t]&&Object.fromEntries(Object.entries(h[t]).map((([e,s])=>[e,a[t].replace("{1}",""+s)])));r&&Object.entries(r).forEach((([t,e])=>{c[`min_${t}_`]=`@media (min-width:${e})`,c[`max_${t}_`]=`@media (max-width:${e})`})),n&&Object.entries(n).forEach((([t,e])=>{c[`cmin_${t}_`]=`@container (min-width:${e})`,c[`cmax_${t}_`]=`@container (max-width:${e})`}));const f={},m={};l&&h&&p.forEach((([t,e])=>{const s={};Object.entries(e).forEach((([t,e])=>{Object.entries(e).forEach((([e,i])=>{var r;const n=this._resolver.varName(this.prefix,t,e);a[t]?s[n]=a[t].replace("{1}",""+i):s[n]=i,f[n]||(f[n]=(null===(r=h[t])||void 0===r?void 0:r[e])||"unset",h[t]||(h[t]={}),h[t][e]=`var(${n})`)}))})),m[t]=s})),this._dict={sets:h,keys:c},this._mainConfig={c:Object.assign(Object.assign({[e]:{display:"contents"},_theme:m,$$:Object.assign(f,o)},(null==m?void 0:m.dark)?{$$dark:{$$:m.dark}}:{}),(null==m?void 0:m.light)?{$$light:{$$:m.light}}:{})}},this._resolveTargetKey=t=>"string"==typeof t?t:this._collector.getKey(t),this.use=(t,e)=>{let s=this._collector.use(t,e);return this._manager&&!this._manager.has(e)&&this._manager.pack(s,this.css(t,s)),this.resolve(s)},this.alter=(t,e)=>{const s=this._resolveTargetKey(t);if(s){const t=this._collector.mutate(s,e);this._manager.replace(s,this.css(t,s))}return this.resolve(s)},this.usePublic=t=>Object.fromEntries(Object.entries(t).map((([t,e])=>[t,this.use(e,t)]))),this.usePrivate=t=>t.map((t=>this.use(t))),this.css=(t,e)=>{var s;return null===(s=this._processor)||void 0===s?void 0:s.compile(e,t)},this.status=t=>{const e=this._resolveTargetKey(t);return!!e&&this._manager.status(e)},this.on=t=>this._manager.on(va(t).map(this._resolveTargetKey)),this.off=t=>this._manager.off(va(t).map(this._resolveTargetKey)),this.get=(t=this._mainConfig)=>this._manager.get(this._resolveTargetKey(t)),this.getMany=(t=this._collector.getKeys())=>t.map((t=>this.get(t))),this.resolve=t=>this._resolver.attr(t||this._collector.getKey(this._mainConfig)),this.subscribe=t=>this._manager.registerNode(t),this.unsubscribe=t=>this._manager.unregisterNode(t)}get prefix(){return this.getAttribute("prefix")||"eff"}get mode(){return this.getAttribute("mode")||"a"}get isolated(){return null!==this.getAttribute("isolated")}get hydrate(){return null!==this.getAttribute("hydrate")}get eventName(){return this.getAttribute("eventname")||"effcsschanges"}get _settingsSelector(){return"#"+(this.getAttribute("settingsid")||"effcss")}get _initSelector(){return"."+(this.getAttribute("initcls")||"effcss_init")}get settingsContent(){const t=null==_a?void 0:_a.querySelector(this._settingsSelector);let e;return e=ya(t)?(null==t?void 0:t.textContent)&&JSON.parse(null==t?void 0:t.textContent):t?null==t?void 0:t.effcss:i,e||{}}get initContent(){const t=_a.querySelectorAll(this._initSelector);let e=s||{};return t.forEach((t=>{let s;s=ya(t)?(null==t?void 0:t.textContent)&&JSON.parse(null==t?void 0:t.textContent):null==t?void 0:t.effcss,e=Object.assign(Object.assign({},e),s||{})})),e}get configs(){return this._collector.getConfigs()}connectedCallback(){this._resolver=(t=>{const{mode:e}=t,s=t=>Object.entries(t).reduce(((t,[e,s])=>(void 0!==s&&t.push(e+(s?"-"+s:"")),t)),[]).join(" "),i=(t,e)=>Object.defineProperties({[t]:e},{k:{value:t},v:{value:e}}),r=(...t)=>"--"+t.join("-"),n=(...t)=>t.join("-");return"c"===e?{selector:({b:t,e:e,m:s,mv:i})=>`.${t}${(e?"__"+e:"")+(s?"_"+s:"")+(s&&i?"_"+i:"")}`,attr:t=>e=>r=>{let n=r||"";da(n)&&(n=s(n));const o=t+(e?"__"+e:"");return n=o+(n?" "+(null==n?void 0:n.split(" ").map((t=>o+"_"+t.split("-").join("_"))).join(" ")):""),i("class",n)},varName:r,kfName:n}:{selector:({b:t,e:e,m:s,mv:i})=>`[data-${t}${e?"-"+e:""}${s?'~="'+(s||"")+(i?"-"+i:"")+'"':""}]`,attr:t=>e=>r=>{const n=`data-${t}${e?"-"+e:""}`;let o=r||"";return da(o)&&(o=s(o)),i(n,o)},varName:r,kfName:n}})({mode:this.mode}),this._setState();const t=this.initContent,e=this.prefix;var s;this._collector=(s={hydrate:this.hydrate,prefix:e,initContent:t},new ga(s)),this._processor=function(t){return new h(t)}({sets:this._dict.sets,keys:this._dict.keys,resolver:this._resolver}),this._manager=new f;const i=t=>this.dispatchEvent(new CustomEvent(this.eventName,{detail:{styles:t},bubbles:!0}));this._notifier={set adoptedStyleSheets(t){i(t)}},this.subscribe(this._notifier),this.use(this._mainConfig),this.usePublic(t),_a&&!this.isolated&&this._manager.registerNode(_a)}}),window.__EFFCSS_PARAMS__={name:e,styles:s,settings:i})}();
7
+ "function"==typeof SuppressedError&&SuppressedError;const t="@media",e="@container",s="@property",r="@keyframes",n="@layer",i="@scope",o="@supports",c=(e,s)=>{const r=t+` ${s||""}${s?" and ":""}(${e})`;return{s:r,q:e,t:s,toString:()=>r}};c.toString=()=>t;const a=t=>t+"px",l=t=>t+"vh",h=t=>t+"vw",u=t=>t+"rem",d=t=>t+"deg",p=t=>t+"ms",m=t=>t+"%",f=t=>t+"cqw",g=t=>t+"cqh",$=t=>t+"cqi",y=t=>t+"cqb",v=t=>t+"cqmin",b=t=>t+"cqmax",_=Object.fromEntries,k=Object.entries,x=":first-",S=":last-",j=":only-",w="child",q=":nth-",O="of-type",A=q+w,E=":focus",P={r:":root",h:":hover",f:E,fv:E+"-visible",a:":active",v:":visited",val:":valid",inv:":invalid",e:":empty",d:":disabled",rq:":required",o:":optional",m:":modal",l:":link",ph:":placeholder",fc:x+w,lc:S+w,oc:j+w,odd:A+"(odd)",even:A+"(even)",ft:x+O,lt:S+O,ot:j+O,bef:"::before",aft:"::after",bd:"::backdrop"},C={has:":has",not:":not",is:":is",wh:":where",st:":state",nthc:A,ntho:q+O,dir:":dir",lang:":lang"},I="oklch",K=t=>I+`(${t})`,M=t=>K(`from ${t}`),W="def",B=t=>{const e=(e,s)=>"string"==typeof s?t(e,s):s;class s{constructor(t={}){this.state={l:e("l",W),c:e("c",W),h:e("h",W),a:e("a",W)},this.merge=t=>new s(Object.assign(this.state,t)),this.l=t=>this.merge({l:e("l",t)}),this.c=t=>this.merge({c:e("c",t)}),this.h=t=>this.merge({h:e("h",t)}),this.a=t=>this.merge({a:e("a",t)}),this.state=Object.assign(this.state,t)}get s(){return this.toString()}toString(){const{l:t,c:e,h:s,a:r}=this.state;return K(`${t} ${e} ${s} / ${r}`)}}return t=>new s(t)},L=(t,e=.1)=>M(`${t} calc(l + ${e}) c h / alpha)`),N=(t,e=.1)=>M(`${t} calc(l - ${e}) c h / alpha)`),R=(t,e=.1)=>M(`${t} l c h / calc(alpha + ${e}))`),z=(t,e=.1)=>M(`${t} l c h / calc(alpha - ${e}))`),H=(t,e=.04)=>M(`${t} l calc(c + ${e}) h / alpha)`),T=(t,e=.04)=>M(`${t} l calc(c - ${e}) h / alpha)`),V=(t,e=30)=>M(`${t} l c calc(h${"number"==typeof e?e>0?" + "+e:" - "+-e:e}) / alpha)`),Z=({base:t,mixin:e,method:s,bpart:r,mpart:n})=>`color-mix(in ${s||I}, ${t}${void 0!==r?` ${r}%`:""}, ${e}${void 0!==n?` ${n}%`:""})`,D=t=>({create:B(t),oklch:K,lighten:L,darken:N,saturate:H,desaturate:T,fadein:R,fadeout:z,spin:V,mix:Z}),F=Object.assign,G=Object.entries,J=Array.isArray,Q=(t,...e)=>e.length?e.reduce(((t,e)=>(G(e).forEach((([e,s])=>{s&&"object"==typeof s&&t[e]?J(t[e])&&J(s)?t[e]=[...t[e],...s]:Q(t[e],s||{}):t[e]=s})),t)),t):t,U=(t,e,s)=>Object.entries(t).reduce(e,s),X=(t,e,s)=>{var r,n,i;let o=""+t;return null==e?"":"object"==typeof e?(!s||(null===(r=s.startsWith)||void 0===r?void 0:r.call(s,"@"))||(null===(n=o.startsWith)||void 0===n?void 0:n.call(o,"&"))||(null===(i=o.startsWith)||void 0===i?void 0:i.call(o,"@"))?"":"&")+o+`{${U(e,((t,e)=>t+X(...e,o)),"")}}`:`${c=o,c.replace(/[A-Z]/g,(t=>"-"+t.toLowerCase()))}:${""+e};`;var c},Y={dash:(...t)=>t.join("-"),comma:(...t)=>t.join(),space:(...t)=>t.join(" "),range:(t,e)=>Array.from(Array(t).entries()).reduce(((t,[s])=>F(t,e(s+1))),{}),each:(t,e)=>G(t).reduce(((t,[s,r])=>F(t,e(s,r))),{}),merge:Q,when:(t,e,s={})=>t?e:s},tt="width: ",et=t=>{const{scope:x,globalKey:S="",bp:j={}}=t,w=x(S),q=t=>w.varExp(...t.split("."));return{compile:({key:t,maker:S})=>{const O=x(t),A=(t=>{const a={cp:1,lay:1,kf:1,cq:1},l=(s,r)=>{const n="string"==typeof r?r:t.name("cq",a.cq++),i=e+` ${n?n+" ":""}(${s})`;return{c:n,q:s,s:i,toString:()=>i}};l.toString=()=>e;const h=(e,r)=>{const n="--"+(e||t.name("cp",a.cp++)),i=s+" "+n;return{k:n,v:`var(${n})`,s:i,r:{[i]:{syntax:(null==r?void 0:r.syn)||'"*"',inherits:(null==r?void 0:r.inh)||!1,initialValue:null==r?void 0:r.ini}},toString:()=>i}};h.toString=()=>s;const u=e=>{const s=e||t.name("kf",a.kf++),n=r+" "+s;return{k:s,s:n,toString:()=>n}};u.toString=()=>r;const d=e=>{const s=e||t.name("lay",a.lay++),r=n+" "+s;return{k:s,s:r,toString:()=>r}};d.toString=()=>n,d.toString=()=>i;const p=(t="",e=!1)=>{const s=o+` ${e?"not ":""}(${t})`;return{c:t,n:e,s:s,toString:()=>s}};return p.toString=()=>o,{pr:h,kf:u,mq:c,cq:l,lay:d,sc:(t="",e="")=>{const s=i+` ${t?`(${t})`:""}${t&&e?" ":""}${e?`to (${e})`:""}`;return{r:t,l:e,s:s,toString:()=>s}},sup:p}})(O),E=t=>{const e=j[t]||t;return"number"==typeof e?e+"rem":""},I=t=>"min-"+tt+E(t),K=t=>"max-"+tt+E(t),M=(t,e)=>"string"==typeof e?A.cq(t,e):A.mq(t),W=(t,e,s)=>""+M(I(t)+") and ("+K(e),s),B={up:(t,e)=>""+M(I(t),e),down:(t,e)=>""+M(K(t),e),between:W,only:(t,e)=>W(t,t,e)};return L=S(Object.assign(Y,{key:t,vars:q,bem:O.selector,pseudo:Object.assign(_(k(P).map((([t,e])=>{function s(t=""){return t+e}return s.toString=()=>e,[t,s]}))),_(k(C).map((([t,e])=>{function s(t,s=""){return s+e+`(${t})`}return s.toString=()=>e,[t,s]})))),color:D(w.varExp),units:{px:a,vh:l,vw:h,rem:u,deg:d,ms:p,pc:m,cqw:f,cqh:g,cqb:y,cqi:$,cqmin:v,cqmax:b},at:A,limit:B})),U(L,((t,e)=>t+X(...e)),"");var L}}};const st=void 0,rt=Object.entries,nt=Object.defineProperties,it=t=>`data-${t}`,ot=t=>"string"==typeof t,ct=t=>null!==t&&"object"==typeof t,at=(t,e)=>`${t}${e?"__"+e:""}`,lt=t=>t.split("."),ht=(t,e)=>rt(t).reduce(((t,[s,r])=>{if(ct(r)){const n=rt(r);n.length?t.push(...n.reduce(((t,[r,n])=>{if((t=>null!==t&&t!==st)(r)&&e&&t.push([s,r,st,st]),ct(n)){const e=rt(n);e.length&&t.push(...e.reduce(((t,[e,n])=>{const i=typeof n;return"string"!==i&&"number"!==i||t.push([s,r,e,n]),t}),[]))}return t}),[])):t.push([s,st,st,st])}return t}),[]),ut=(t,e,s,r)=>""+(at(t,e)+(s?"_"+s:"")+(s&&r?"_"+r:"")),dt=(t,e,s,r)=>"."+ut(t,e,s,r),pt=(t,e,s,r)=>`[${it(at(t,e))}${s&&r?`~="${s}_${r}"`:s?`~="${s}"`:""}]`,mt={def:.75,c:.05,s:.65,m:.75,l:.85,n:.9},ft="effcss-provider",gt={theme:null,hydrate:null,mode:"a",prefix:"f"},$t={bp:{"3xs":18,"2xs":24,xs:30,sm:40,md:48,lg:64,xl:80,"2xl":96},vars:{"":{rem:16,l:mt,h:{def:261.35,b:261.35,i:194.77,e:29.23,w:70.66,s:142.49},c:{def:.03,xs:.03,s:.06,m:.1,l:.15,xl:.25},a:{def:1,min:0,xs:.1,s:.25,m:.5,l:.75,xl:.9,max:1},t:{def:300,xs:100,s:200,m:300,l:450,xl:600,no:0,min:50,max:750},int:[...Array(12).keys()],fr:{0:0,"1/12":"0.0833","1/10":"0.1","1/6":"0.1667","1/5":"0.2","1/4":"0.25","3/10":"0.3","1/3":"0.3333","2/5":"0.4","5/12":"0.4167","1/2":"0.5","7/12":"0.5833","3/5":"0.6","2/3":"0.6667","7/10":"0.7","3/4":"0.75","4/5":"0.8","5/6":"0.8333","9/10":"0.9","11/12":"0.9167",1:"1"},ar:{1:1,"2/1":2,"1/2":.5,"4/3":1.3333,"3/4":.75,"9/16":.5625,"16/9":1.7778}},light:{l:mt},dark:{l:{def:.4,n:.25,s:.3,m:.4,l:.5,c:.95}}}},yt=({prefix:t})=>{let e=1;return{get base(){return t+0},get current(){return t+e},next(){return e++,this.current},reset(){e=1}}},vt=()=>{const t=new Set,e=new Map;return{use(s,r){const n=e.get(s);return n||(t.add(r),e.set(s,r),r)},useMany(t){return rt(t).map((([t,e])=>this.use(e,t)))},getKey:t=>e.get(t),get keys(){return[...t]},get makers(){return Object.fromEntries(e.entries().map((([t,e])=>[e,t])))}}},bt="theme",_t=Object.assign,kt=Object.entries,xt=Object.fromEntries,St=(t,e)=>t.getAttribute(e)||gt[e];!function(t={}){const e=window.document,s=window.customElements;if(null==s?void 0:s.get(ft))return!1;{class r extends HTMLScriptElement{constructor(){super(...arguments),this._c=vt(),this._m=function(){let t={},e={},s=[],r=[];const n=t=>t.adoptedStyleSheets=s,i=()=>{r=r.reduce(((t,e)=>{const s=e.deref();return s&&(n(s),t.push(e)),t}),[])},o=t=>s.findIndex((e=>e===t)),c=e=>e?t[e]:void 0,a=(e,r)=>{if(!t[e])return t[e]=r,s.push(r),i(),!0},l=t=>{const e=c(t);return!!e&&-1!==o(e)};return{apply:n,notify:i,getIndex:o,get:c,has:t=>!!t&&!!c(t),getAll:()=>t,add:a,status:l,on:(...t)=>{const e=t.reduce(((t,e)=>{const r=c(e);return!(!r||l(e))&&(s.push(r),t)}),!0);return i(),e},off:(...t)=>{const e=t.reduce(((t,e)=>{const r=c(e);if(r&&l(e)){const e=o(r);return s.splice(e,1),t}return!1}),!0);return i(),e},remove:r=>{const n=c(r);if(!n)return;const a=o(n);return a>-1&&(s.splice(a,1),delete t[r],delete e[r]),i(),!0},removeAll:()=>(s.splice(0),t={},e={},i(),!0),pack:(t,e)=>{const s=new CSSStyleSheet;return s.replaceSync(e),!!s.cssRules.length&&a(t,s)},replace:(e,s)=>{const r=t[e];if(r)return r.replaceSync(s),i(),!0},register:t=>{r.findIndex((e=>e.deref()===t))>=0||(r.push(new WeakRef(t)),n(t))},unregister:t=>{const e=r.findIndex((e=>e.deref()===t));e>=0&&r.splice(e,1)}}}(),this._cust=(t={})=>{const{varName:e}=this._s(this._k.base);function s(t,r){return kt(t).reduce(((t,[n,i])=>i&&"object"==typeof i?_t(t,s(i,[...r,n])):(t[e(...r,n)]=i,t)),{})}const r=xt(kt(t||{}).map((([t,e])=>[t,s(e,[])]))),{"":n={},dark:i,light:o}=r,c=function(t,e){var s={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(s[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(t);n<r.length;n++)e.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(t,r[n])&&(s[r[n]]=t[r[n]])}return s}(r,["","dark","light"]);this._=({bem:t,each:e,when:s,vars:r,merge:a,at:{mq:l}})=>{const h="prefers-color-scheme",u={light:`${h}: light`,dark:`${h}: dark`};return a({[`:root:has(script[is=${ft}])`]:a({fontSize:r("rem")},n)},s(!!i,{[l(u.dark).s]:i}),s(!!o,{[l(u.light).s]:o}),e(c,((e,s)=>({[`:root:has(script[is=${ft}][${bt}=${e}])`]:s,[t(`..theme.${e}`)]:s}))))},this.use(this._,this._k.base)},this.use=(t,e)=>{const s=e||this._k.current;let r=this._c.use(t,s);return this._m&&!this._m.has(e)&&this._m.pack(r,this.css(t,r)),e||this._k.next(),this.resolve(r)},this.usePublic=t=>xt(kt(t).map((([t,e])=>[t,this.use(e,t)]))),this.usePrivate=t=>t.map((t=>this.use(t))),this.resolve=t=>this._s(t||this._k.base).attr,this.css=(t,e)=>this._p.compile({key:e,maker:t}),this.status=t=>{const e=this.key(t);return!!e&&this._m.status(e)},this.on=(...t)=>this._m.on(...t.map(this.key)),this.off=(...t)=>this._m.off(...t.map(this.key)),this.key=t=>"string"==typeof t?t:this._c.getKey(t),this.stylesheets=(t=this._c.keys)=>t.map((t=>this._m.get(this.key(t))))}get prefix(){return St(this,"prefix")||""}get mode(){return St(this,"mode")}get hydrate(){return""===this.getAttribute("hydrate")}get settings(){return this._settings}set settings(t){var e,s,r;const n=_t({},this._settings,t),{makers:i,vars:o,bp:c,off:a}=n;c&&(null===(e=this._settings)||void 0===e?void 0:e.bp)!==c&&(this._p=et({scope:this._s,globalKey:this._k.base,bp:c})),o&&(null===(s=this._settings)||void 0===s?void 0:s.vars)!==o&&this._cust(o),i&&(null===(r=this._settings)||void 0===r?void 0:r.makers)!==i&&(this._c.useMany(i),this.usePublic(i),(null==a?void 0:a.length)&&this._settings.off!==a&&this.off(...a),this.hydrate&&this._k.reset()),this._settings=n}set theme(t){t?this.setAttribute(bt,t):this.removeAttribute(bt)}get theme(){return St(this,bt)||""}connectedCallback(){this._k=yt({prefix:this.prefix}),this._s=((t={})=>{const{mode:e}=t;let s,r;return t=>{const n=(...e)=>""+e.filter(Boolean).reduce(((t,e)=>`${t}-${e}`),t),i=(...t)=>"--"+n(...t);return"c"===e?(s=t=>{let e,s,r,i;return ot(t)?([e,s,r,i]=lt(t),dt(n(e),s,r,i)):t&&ht(t).map((([t,e,s,r])=>dt(n(t),e,s,r))).join(",")},r=t=>{let e,s,r,i;const o="class";let c="";return Array.isArray(t)?c=[...t.reduce(((t,o)=>([e,s,r,i]=lt(o),t.add(ut(n(e),s)),r&&t.add(ut(n(e),s,r,i)),t)),new Set).values()].join(" "):ot(t)?([e,s,r,i]=lt(t),c=ut(n(e),s,r,i)):c=t&&ht(t,!0).map((([t,e,s,r])=>ut(n(t),e,s,r))).join(" "),nt({[o]:c},{toString:{value:()=>`${o}="${c}"`}})}):(s=t=>{let e,s,r,i;return ot(t)?([e,s,r,i]=lt(t),pt(n(e),s,r,i)):t&&ht(t).map((([t,e,s,r])=>pt(n(t),e,s,r))).join(",")},r=t=>{let e,s,r,i,o,c,a="";if(Array.isArray(t))c=t.reduce(((t,c)=>{[e,s,r,i]=lt(c);const l=at(n(e),s);return o=it(l),a=r?i?`${r}_${i}`:`${r}`:"",t[o]&&a?t[o]=t[o]+" "+a:t[o]=a,t}),{});else if(ot(t)){[e,s,r,i]=lt(t);const l=at(n(e),s);o=it(l),a=r?i?`${r}_${i}`:`${r}`:"",c={[o]:a}}else c=t&&ht(t,!0).reduce(((t,[e,s,r,i])=>{const c=at(n(e),s);o=it(c);const l=r?i?`${r}_${i}`:`${r}`:"";return a=t[o]?t[o]+" "+l:l,t[o]=a,t}),{});return nt(c,{toString:{value:()=>rt(c).map((([t,e])=>`${t}="${e}"`)).join(" ")}}),c}),{selector:s,attr:r,name:n,varName:i,varExp:(...t)=>`var(${i(...t)})`}}})({mode:this.mode});const s=this;this._n={set adoptedStyleSheets(t){s.dispatchEvent(new CustomEvent("effcsschanges",{detail:{styles:t},bubbles:!0}))}},this._m.register(this._n),this._m.register(e),this.settings=_t({},$t,t)}toString(){return`<script ${[...this.attributes].map((t=>t.value?`${t.name}="${t.value}"`:""===t.value?t.name:"")).filter(Boolean).join(" ")}>${this.textContent}<\/script>`}}s.define(ft,r,{extends:"script"})}}();
@@ -0,0 +1,7 @@
1
+ /*
2
+ * EffCSS v3.0.0
3
+ * {@link https://gitverse.ru/msabitov/effcss}
4
+ * Copyright (c) Marat Sabitov
5
+ * @license Apache 2.0
6
+ */
7
+ const e=void 0,t=Object.entries,r=Object.defineProperties,n=e=>`data-${e}`,s=e=>"string"==typeof e,u=e=>null!==e&&"object"==typeof e,o=(e,t)=>`${e}${t?"__"+t:""}`,i=e=>e.split("."),a=(r,n)=>t(r).reduce(((r,[s,o])=>{if(u(o)){const i=t(o);i.length?r.push(...i.reduce(((r,[o,i])=>{if((t=>null!==t&&t!==e)(o)&&n&&r.push([s,o,e,e]),u(i)){const e=t(i);e.length&&r.push(...e.reduce(((e,[t,r])=>{const n=typeof r;return"string"!==n&&"number"!==n||e.push([s,o,t,r]),e}),[]))}return r}),[])):r.push([s,e,e,e])}return r}),[]),c=(e,t,r,n)=>""+(o(e,t)+(r?"_"+r:"")+(r&&n?"_"+n:"")),l=(e,t,r,n)=>"."+c(e,t,r,n),d=(e,t,r,s)=>`[${n(o(e,t))}${r&&s?`~="${r}_${s}"`:r?`~="${r}"`:""}]`,p="effcss-provider",m={theme:null,hydrate:null,mode:"a",prefix:"f"};Array(12).keys();const $=({prefix:e})=>{let t=1;return{get base(){return e+0},get current(){return e+t},next(){return t++,this.current},reset(){t=1}}},f=()=>{const e=new Set,r=new Map;return{use(t,n){const s=r.get(t);return s||(e.add(n),r.set(t,n),n)},useMany(e){return t(e).map((([e,t])=>this.use(t,e)))},getKey:e=>r.get(e),get keys(){return[...e]},get makers(){return Object.fromEntries(r.entries().map((([e,t])=>[t,e])))}}},g=(e={})=>{var u;let g,h,y,b,v=null===(u=null===globalThis||void 0===globalThis?void 0:globalThis.document)||void 0===u?void 0:u.querySelector(`script[is=${p}]`);if(v)return v;({prefix:h,mode:y,hydrate:b,theme:g}=Object.assign({},m,e));const j=new Set,x=()=>h||m.prefix,S=()=>y||m.mode,k=()=>""===b,O=$({prefix:x()}),_=((e={})=>{const{mode:u}=e;let p,m;return e=>{const $=(...t)=>""+t.filter(Boolean).reduce(((e,t)=>`${e}-${t}`),e),f=(...e)=>"--"+$(...e);return"c"===u?(p=e=>{let t,r,n,u;return s(e)?([t,r,n,u]=i(e),l($(t),r,n,u)):e&&a(e).map((([e,t,r,n])=>l($(e),t,r,n))).join(",")},m=e=>{let t,n,u,o;const l="class";let d="";return Array.isArray(e)?d=[...e.reduce(((e,r)=>([t,n,u,o]=i(r),e.add(c($(t),n)),u&&e.add(c($(t),n,u,o)),e)),new Set).values()].join(" "):s(e)?([t,n,u,o]=i(e),d=c($(t),n,u,o)):d=e&&a(e,!0).map((([e,t,r,n])=>c($(e),t,r,n))).join(" "),r({[l]:d},{toString:{value:()=>`${l}="${d}"`}})}):(p=e=>{let t,r,n,u;return s(e)?([t,r,n,u]=i(e),d($(t),r,n,u)):e&&a(e).map((([e,t,r,n])=>d($(e),t,r,n))).join(",")},m=e=>{let u,c,l,d,p,m,f="";if(Array.isArray(e))m=e.reduce(((e,t)=>{[u,c,l,d]=i(t);const r=o($(u),c);return p=n(r),f=l?d?`${l}_${d}`:`${l}`:"",e[p]&&f?e[p]=e[p]+" "+f:e[p]=f,e}),{});else if(s(e)){[u,c,l,d]=i(e);const t=o($(u),c);p=n(t),f=l?d?`${l}_${d}`:`${l}`:"",m={[p]:f}}else m=e&&a(e,!0).reduce(((e,[t,r,s,u])=>{const i=o($(t),r);p=n(i);const a=s?u?`${s}_${u}`:`${s}`:"";return f=e[p]?e[p]+" "+a:a,e[p]=f,e}),{});return r(m,{toString:{value:()=>t(m).map((([e,t])=>`${e}="${t}"`)).join(" ")}}),m}),{selector:p,attr:m,name:$,varName:f,varExp:(...e)=>`var(${f(...e)})`}}})({mode:S()}),A=f(),w=e=>"string"==typeof e?e:A.getKey(e),E=e=>_(e||O.base).attr,P=(e,t)=>{const r=t||O.current;let n=A.use(e,r);return t||O.next(),E(n)};return{get prefix(){return x()},get mode(){return S()},get hydrate(){return k()},set theme(e){g=e},get theme(){return g||""},get settings(){return{bp:undefined,vars:undefined,off:[...j],makers:A.makers}},set settings(e){},resolve:E,use:P,usePublic:e=>Object.fromEntries(Object.entries(e).map((([e,t])=>[e,P(t,e)]))),usePrivate:e=>e.map((e=>P(e))),css:()=>"",key:w,status:e=>{const t=w(e);return!!t&&!j.has(t)},on:(...e)=>e.map(w).reduce(((e,t)=>e&&!!t&&j.delete(t)),!0),off:(...e)=>e.map(w).reduce(((e,t)=>e&&!!t&&!!j.add(t)),!0),stylesheets:()=>[],toString(){const e=A.makers;delete e[O.base];const t=Object.entries({is:p,prefix:x(),mode:S(),hydrate:k(),theme:g}).map((([e,t])=>t?`${e}="${t}"`:""===t?e:"")).filter(Boolean).join(" "),r=`document.currentScript.settings = {makers: {${e?Object.entries(e).reduce(((e,[t,r])=>e+`${e?",":""}${t}: ${r.toString().replaceAll(/\s+/g," ")}`),""):""}},${j.size?` off: [${[...j]}]`:""}}`;return`<script ${t}>${r}<\/script>`}}};export{g as createConsumer};
package/dist/index.js CHANGED
@@ -1 +1,7 @@
1
- import{units as t,keys as e,sets as s,PREFIX as i,EVENT_NAME as r,SETTINGS_SCRIPT_ID as n,STYLES_SCRIPT_CLS as l,PROVIDER_TAG_NAME as o,mediaBP as h,containerBP as a,rootStyle as c,themes as u}from"./constants.js";import{createResolver as _,createCollector as d}from"./utils/common.js";const g=Object.entries,p=(t,e,s)=>g(t).reduce(e,s),m=t=>"object"==typeof t,f=t=>`{${t}}`,y=Object.assign.bind(Object),v=(t,e)=>`${t}:${e};`,b=(t,e)=>["@property",t,f(v("syntax",e.syn||'"*"')+v("inherits",e.inh||!1)+(e.ini?v("initial-value",e.ini):""))].join(" "),S=t=>`var(${t})`,$=({l:t,c:e,h:s,a:i=1})=>`oklch(${t} ${e} ${s} / ${i})`,j=["l","c","h","a"];class A{constructor(t){this._outerKeys={},this._outerSets={},this._parseSelector=t=>{let e,s,i,r,n;return[e,n]=t.split(":"),e.startsWith("__")?[s,i,r]=e.slice(2).split("_"):[s,i,r]=e.split("_"),{e:s,m:i,mv:r,s:n}},this._prepareVarName=(...t)=>this._resolver.varName(...t),this._prepareKeyframesName=(...t)=>this._resolver.kfName(...t),this.compile=(t,e)=>{const{_:s,kf:i,k:r={},v:n={},c:l}=e,o=this._resolver.selector.bind(this),h=this._parseSelector;let a=y({},l),c=y({},r),u=y({_:{}},n),_="";if(s)for(let e in s){const i=s[e];if("c"===i.typ){const s={};j.forEach((r=>{const n=e+r,l=this._prepareVarName(t,n);s[r]=l,c["_"+n]=s[r],_+=b(l,i)})),u._[e]=$({l:S(s.l),c:S(s.c),h:S(s.h),a:S(s.a)}),i.all&&(a["_"+e+"l"]=`&lig=>${this._prepareVarName(t,e+"l")}:{1}`,a["_"+e+"c"]=`&chr=>${this._prepareVarName(t,e+"c")}:{1}`,a["_"+e+"h"]=`&hue=>${this._prepareVarName(t,e+"h")}:{1}`,a["_"+e+"a"]=`&alp=>${this._prepareVarName(t,e+"a")}:{1}`)}else{const s=this._prepareVarName(t,e);c["_"+e]=s,u._[e]=S(s),_+=b(s,i)}}const d=t=>c[t]||this._outerKeys[t],A=t=>{var e;return u[t]||this._outerSets[t]||(null===(e=this._outerSets)||void 0===e?void 0:e.root[t])},O=t=>t.replaceAll(/\{(.+?)\}/g,((t,e)=>{const[s,i]=e.split(".");if(i){const t=A(s);return""+((null==t?void 0:t[i])||(null==t?void 0:t.def)||"")}return""+(d(s)||"")})),x=t=>{const e=t.split("?");let s;for(let t in e){const i=e[t],[r,n]=i.split("=>"),l=r.match(/(\w+)(\[[\w,]+\])?/);if(!l)continue;const[o,h,a]=l,c=A(h);if(!c)continue;s=c;let u=g(s);const _=null==a?void 0:a.slice(1,-1).split(",");if(_){const t=new Set(_);u=u.filter((([e,s])=>t.has(e)))}if(n){let[t,e]=n.split("|");void 0===e&&(e=t,t=""),u=u.map((([s,i])=>[t.replace("{0}",s)||s,O(e.replaceAll("{1}",""+i))]))}(_||n)&&(s=Object.fromEntries(u));break}return s};function N(e,s,i){var r,n,l,a;let c=""+e;if((null===(r=null==e?void 0:e.startsWith)||void 0===r?void 0:r.call(e,"$"))&&(c=""+d(e.slice(1)),!c))return"";if(Array.isArray(s))return N(c,Object.assign({},...s.map((t=>"string"==typeof t?x(t):t))),i);if(null==s)return"";if(m(s)){const e=!i||(null===(n=i.startsWith)||void 0===n?void 0:n.call(i,"@"))||c.startsWith("&")||c.startsWith("@")?"":"&";if(c.startsWith("_")){const{e:i,m:r,mv:n}=h(c);return r&&"string"!=typeof n?p(s,((s,[n,l])=>{let h;return h=m(l)?p(l,((t,e)=>t+N(...e,c)),""):l+";",s+e+o({b:t,e:i,m:r,mv:n})+f(h)}),""):e+o({b:t,e:i,m:r,mv:n})+f(p(s,((t,e)=>t+N(...e,c)),""))}return e+c+f(p(s,((t,e)=>t+N(...e,c)),""))}{let t=""+s;return(null===(l=null==t?void 0:t.startsWith)||void 0===l?void 0:l.call(t,"&"))?N(c,x(t.slice(1)),i):(null===(a=null==t?void 0:t.includes)||void 0===a?void 0:a.call(t,"{"))?N(c,O(t),i):v(c.replace(/[A-Z]/g,(t=>"-"+t.toLowerCase())),t)}}let k="";if(i)for(let e in i){const s=i[e],r=this._prepareKeyframesName(t,e);c["kf_"+e]=r,k+=`@keyframes ${r} `+f(p(s,((t,[e,s])=>t+e+(String(+e)===e?"%":"")+f(p(s,((t,e)=>t+N(...e)),""))),""))}return _+k+p(a,((t,e)=>t+N(...e)),"")};const{sets:e,keys:s,resolver:i}=t;this._resolver=i,s&&(this._outerKeys=s),e&&(this._outerSets=e)}}const O=t=>Array.isArray(t)?t:[t];class x{constructor(){this._stylesheets={},this._rules={},this._styleSheetsArray=[],this._listeners=[],this.getIndex=t=>this._styleSheetsArray.findIndex((e=>e===t)),this.get=t=>this._stylesheets[t],this.has=t=>!!t&&!!this.get(t),this.getAll=()=>this._stylesheets,this.add=(t,e)=>{if(!this._stylesheets[t])return this._stylesheets[t]=e,this._styleSheetsArray.push(e),this.notify(),!0},this.status=t=>{const e=this.get(t);return!!e&&-1!==this.getIndex(e)},this.on=t=>{const e=O(t).reduce(((t,e)=>{const s=this.get(e);return!(!s||this.status(e))&&(this._styleSheetsArray.push(s),t)}),!0);return this.notify(),e},this.off=t=>{const e=O(t).reduce(((t,e)=>{const s=this.get(e);if(s&&this.status(e)){const e=this.getIndex(s);return this._styleSheetsArray.splice(e,1),t}return!1}),!0);return this.notify(),e},this.remove=t=>{const e=this.get(t);if(!e)return;const s=this.getIndex(e);return s>-1&&(this._styleSheetsArray.splice(s,1),delete this._stylesheets[t],delete this._rules[t]),this.notify(),!0},this.pack=(t,e)=>{const s=new CSSStyleSheet;if(s.replaceSync(e),s.cssRules.length)return this.add(t,s);console.log(`StyleSheet '${t}' is empty`)},this.replace=(t,e)=>{const s=this._stylesheets[t];if(s)return s.replaceSync(e),this.notify(),!0},this.apply=t=>{t.adoptedStyleSheets=this._styleSheetsArray},this.registerNode=t=>{this._listeners.findIndex((e=>e.deref()===t))>=0||(this._listeners.push(new WeakRef(t)),this.apply(t))},this.unregisterNode=t=>{const e=this._listeners.findIndex((e=>e.deref()===t));e>=0&&this._listeners.splice(e,1)},this.notify=()=>{this._listeners=this._listeners.reduce(((t,e)=>{const s=e.deref();return s&&(this.apply(s),t.push(e)),t}),[])}}removeAll(){return this._styleSheetsArray.splice(0),this._stylesheets={},this._rules={},this.notify(),!0}}const N=globalThis.document,k=t=>"application/json"===(null==t?void 0:t.getAttribute("type")),C=t=>Array.isArray(t)?t:[t];function E(g={}){const{name:p=o,styles:m={},settings:f={}}=g,y=globalThis.customElements;return!(null==y?void 0:y.get(p))&&(y.define(p,class extends HTMLElement{constructor(){super(...arguments),this._setState=()=>{const{units:i,keys:r,sets:n,mediaBP:l=h,containerBP:o=a,rootStyle:_=c,themes:d=u}=this.settingsContent,g=Object.assign(Object.assign({},t),i||{}),m=Object.assign(Object.assign({},e),r||{}),f=Object.assign({},s);n&&Object.entries(n).forEach((([t,e])=>f[t]=Object.assign({},e)));const y=Object.entries(d);if(g)for(const t in g)f[t]=f[t]&&Object.fromEntries(Object.entries(f[t]).map((([e,s])=>[e,g[t].replace("{1}",""+s)])));l&&Object.entries(l).forEach((([t,e])=>{m[`min_${t}_`]=`@media (min-width:${e})`,m[`max_${t}_`]=`@media (max-width:${e})`})),o&&Object.entries(o).forEach((([t,e])=>{m[`cmin_${t}_`]=`@container (min-width:${e})`,m[`cmax_${t}_`]=`@container (max-width:${e})`}));const v={},b={};d&&f&&y.forEach((([t,e])=>{const s={};Object.entries(e).forEach((([t,e])=>{Object.entries(e).forEach((([e,i])=>{var r;const n=this._resolver.varName(this.prefix,t,e);g[t]?s[n]=g[t].replace("{1}",""+i):s[n]=i,v[n]||(v[n]=(null===(r=f[t])||void 0===r?void 0:r[e])||"unset",f[t]||(f[t]={}),f[t][e]=`var(${n})`)}))})),b[t]=s})),this._dict={sets:f,keys:m},this._mainConfig={c:Object.assign(Object.assign({[p]:{display:"contents"},_theme:b,$$:Object.assign(v,_)},(null==b?void 0:b.dark)?{$$dark:{$$:b.dark}}:{}),(null==b?void 0:b.light)?{$$light:{$$:b.light}}:{})}},this._resolveTargetKey=t=>"string"==typeof t?t:this._collector.getKey(t),this.use=(t,e)=>{let s=this._collector.use(t,e);return this._manager&&!this._manager.has(e)&&this._manager.pack(s,this.css(t,s)),this.resolve(s)},this.alter=(t,e)=>{const s=this._resolveTargetKey(t);if(s){const t=this._collector.mutate(s,e);this._manager.replace(s,this.css(t,s))}return this.resolve(s)},this.usePublic=t=>Object.fromEntries(Object.entries(t).map((([t,e])=>[t,this.use(e,t)]))),this.usePrivate=t=>t.map((t=>this.use(t))),this.css=(t,e)=>{var s;return null===(s=this._processor)||void 0===s?void 0:s.compile(e,t)},this.status=t=>{const e=this._resolveTargetKey(t);return!!e&&this._manager.status(e)},this.on=t=>this._manager.on(C(t).map(this._resolveTargetKey)),this.off=t=>this._manager.off(C(t).map(this._resolveTargetKey)),this.get=(t=this._mainConfig)=>this._manager.get(this._resolveTargetKey(t)),this.getMany=(t=this._collector.getKeys())=>t.map((t=>this.get(t))),this.resolve=t=>this._resolver.attr(t||this._collector.getKey(this._mainConfig)),this.subscribe=t=>this._manager.registerNode(t),this.unsubscribe=t=>this._manager.unregisterNode(t)}get prefix(){return this.getAttribute("prefix")||i}get mode(){return this.getAttribute("mode")||"a"}get isolated(){return null!==this.getAttribute("isolated")}get hydrate(){return null!==this.getAttribute("hydrate")}get eventName(){return this.getAttribute("eventname")||r}get _settingsSelector(){return"#"+(this.getAttribute("settingsid")||n)}get _initSelector(){return"."+(this.getAttribute("initcls")||l)}get settingsContent(){const t=null==N?void 0:N.querySelector(this._settingsSelector);let e;return e=k(t)?(null==t?void 0:t.textContent)&&JSON.parse(null==t?void 0:t.textContent):t?null==t?void 0:t.effcss:f,e||{}}get initContent(){const t=N.querySelectorAll(this._initSelector);let e=m||{};return t.forEach((t=>{let s;s=k(t)?(null==t?void 0:t.textContent)&&JSON.parse(null==t?void 0:t.textContent):null==t?void 0:t.effcss,e=Object.assign(Object.assign({},e),s||{})})),e}get configs(){return this._collector.getConfigs()}connectedCallback(){this._resolver=_({mode:this.mode}),this._setState();const t=this.initContent,e=this.prefix;var s;this._collector=d({hydrate:this.hydrate,prefix:e,initContent:t}),this._processor=(s={sets:this._dict.sets,keys:this._dict.keys,resolver:this._resolver},new A(s)),this._manager=new x;const i=t=>this.dispatchEvent(new CustomEvent(this.eventName,{detail:{styles:t},bubbles:!0}));this._notifier={set adoptedStyleSheets(t){i(t)}},this.subscribe(this._notifier),this.use(this._mainConfig),this.usePublic(t),N&&!this.isolated&&this._manager.registerNode(N)}}),window.__EFFCSS_PARAMS__={name:p,styles:m,settings:f},!0)}export{E as defineProvider};
1
+ /*
2
+ * EffCSS v3.0.0
3
+ * {@link https://gitverse.ru/msabitov/effcss}
4
+ * Copyright (c) Marat Sabitov
5
+ * @license Apache 2.0
6
+ */
7
+ "function"==typeof SuppressedError&&SuppressedError;const t="@media",e="@container",s="@property",r="@keyframes",n="@layer",i="@scope",o="@supports",c=(e,s)=>{const r=t+` ${s||""}${s?" and ":""}(${e})`;return{s:r,q:e,t:s,toString:()=>r}};c.toString=()=>t;const a=t=>t+"px",l=t=>t+"vh",h=t=>t+"vw",u=t=>t+"rem",d=t=>t+"deg",p=t=>t+"ms",m=t=>t+"%",f=t=>t+"cqw",g=t=>t+"cqh",$=t=>t+"cqi",y=t=>t+"cqb",v=t=>t+"cqmin",b=t=>t+"cqmax",_=Object.fromEntries,k=Object.entries,x=":first-",S=":last-",j=":only-",w="child",q=":nth-",O="of-type",A=q+w,E=":focus",P={r:":root",h:":hover",f:E,fv:E+"-visible",a:":active",v:":visited",val:":valid",inv:":invalid",e:":empty",d:":disabled",rq:":required",o:":optional",m:":modal",l:":link",ph:":placeholder",fc:x+w,lc:S+w,oc:j+w,odd:A+"(odd)",even:A+"(even)",ft:x+O,lt:S+O,ot:j+O,bef:"::before",aft:"::after",bd:"::backdrop"},C={has:":has",not:":not",is:":is",wh:":where",st:":state",nthc:A,ntho:q+O,dir:":dir",lang:":lang"},I="oklch",K=t=>I+`(${t})`,M=t=>K(`from ${t}`),W="def",B=t=>{const e=(e,s)=>"string"==typeof s?t(e,s):s;class s{constructor(t={}){this.state={l:e("l",W),c:e("c",W),h:e("h",W),a:e("a",W)},this.merge=t=>new s(Object.assign(this.state,t)),this.l=t=>this.merge({l:e("l",t)}),this.c=t=>this.merge({c:e("c",t)}),this.h=t=>this.merge({h:e("h",t)}),this.a=t=>this.merge({a:e("a",t)}),this.state=Object.assign(this.state,t)}get s(){return this.toString()}toString(){const{l:t,c:e,h:s,a:r}=this.state;return K(`${t} ${e} ${s} / ${r}`)}}return t=>new s(t)},L=(t,e=.1)=>M(`${t} calc(l + ${e}) c h / alpha)`),N=(t,e=.1)=>M(`${t} calc(l - ${e}) c h / alpha)`),R=(t,e=.1)=>M(`${t} l c h / calc(alpha + ${e}))`),z=(t,e=.1)=>M(`${t} l c h / calc(alpha - ${e}))`),H=(t,e=.04)=>M(`${t} l calc(c + ${e}) h / alpha)`),T=(t,e=.04)=>M(`${t} l calc(c - ${e}) h / alpha)`),V=(t,e=30)=>M(`${t} l c calc(h${"number"==typeof e?e>0?" + "+e:" - "+-e:e}) / alpha)`),Z=({base:t,mixin:e,method:s,bpart:r,mpart:n})=>`color-mix(in ${s||I}, ${t}${void 0!==r?` ${r}%`:""}, ${e}${void 0!==n?` ${n}%`:""})`,D=t=>({create:B(t),oklch:K,lighten:L,darken:N,saturate:H,desaturate:T,fadein:R,fadeout:z,spin:V,mix:Z}),F=Object.assign,G=Object.entries,J=Array.isArray,Q=(t,...e)=>e.length?e.reduce(((t,e)=>(G(e).forEach((([e,s])=>{s&&"object"==typeof s&&t[e]?J(t[e])&&J(s)?t[e]=[...t[e],...s]:Q(t[e],s||{}):t[e]=s})),t)),t):t,U=(t,e,s)=>Object.entries(t).reduce(e,s),X=(t,e,s)=>{var r,n,i;let o=""+t;return null==e?"":"object"==typeof e?(!s||(null===(r=s.startsWith)||void 0===r?void 0:r.call(s,"@"))||(null===(n=o.startsWith)||void 0===n?void 0:n.call(o,"&"))||(null===(i=o.startsWith)||void 0===i?void 0:i.call(o,"@"))?"":"&")+o+`{${U(e,((t,e)=>t+X(...e,o)),"")}}`:`${c=o,c.replace(/[A-Z]/g,(t=>"-"+t.toLowerCase()))}:${""+e};`;var c},Y={dash:(...t)=>t.join("-"),comma:(...t)=>t.join(),space:(...t)=>t.join(" "),range:(t,e)=>Array.from(Array(t).entries()).reduce(((t,[s])=>F(t,e(s+1))),{}),each:(t,e)=>G(t).reduce(((t,[s,r])=>F(t,e(s,r))),{}),merge:Q,when:(t,e,s={})=>t?e:s},tt="width: ",et=t=>{const{scope:x,globalKey:S="",bp:j={}}=t,w=x(S),q=t=>w.varExp(...t.split("."));return{compile:({key:t,maker:S})=>{const O=x(t),A=(t=>{const a={cp:1,lay:1,kf:1,cq:1},l=(s,r)=>{const n="string"==typeof r?r:t.name("cq",a.cq++),i=e+` ${n?n+" ":""}(${s})`;return{c:n,q:s,s:i,toString:()=>i}};l.toString=()=>e;const h=(e,r)=>{const n="--"+(e||t.name("cp",a.cp++)),i=s+" "+n;return{k:n,v:`var(${n})`,s:i,r:{[i]:{syntax:(null==r?void 0:r.syn)||'"*"',inherits:(null==r?void 0:r.inh)||!1,initialValue:null==r?void 0:r.ini}},toString:()=>i}};h.toString=()=>s;const u=e=>{const s=e||t.name("kf",a.kf++),n=r+" "+s;return{k:s,s:n,toString:()=>n}};u.toString=()=>r;const d=e=>{const s=e||t.name("lay",a.lay++),r=n+" "+s;return{k:s,s:r,toString:()=>r}};d.toString=()=>n,d.toString=()=>i;const p=(t="",e=!1)=>{const s=o+` ${e?"not ":""}(${t})`;return{c:t,n:e,s:s,toString:()=>s}};return p.toString=()=>o,{pr:h,kf:u,mq:c,cq:l,lay:d,sc:(t="",e="")=>{const s=i+` ${t?`(${t})`:""}${t&&e?" ":""}${e?`to (${e})`:""}`;return{r:t,l:e,s:s,toString:()=>s}},sup:p}})(O),E=t=>{const e=j[t]||t;return"number"==typeof e?e+"rem":""},I=t=>"min-"+tt+E(t),K=t=>"max-"+tt+E(t),M=(t,e)=>"string"==typeof e?A.cq(t,e):A.mq(t),W=(t,e,s)=>""+M(I(t)+") and ("+K(e),s),B={up:(t,e)=>""+M(I(t),e),down:(t,e)=>""+M(K(t),e),between:W,only:(t,e)=>W(t,t,e)};return L=S(Object.assign(Y,{key:t,vars:q,bem:O.selector,pseudo:Object.assign(_(k(P).map((([t,e])=>{function s(t=""){return t+e}return s.toString=()=>e,[t,s]}))),_(k(C).map((([t,e])=>{function s(t,s=""){return s+e+`(${t})`}return s.toString=()=>e,[t,s]})))),color:D(w.varExp),units:{px:a,vh:l,vw:h,rem:u,deg:d,ms:p,pc:m,cqw:f,cqh:g,cqb:y,cqi:$,cqmin:v,cqmax:b},at:A,limit:B})),U(L,((t,e)=>t+X(...e)),"");var L}}};const st=void 0,rt=Object.entries,nt=Object.defineProperties,it=t=>`data-${t}`,ot=t=>"string"==typeof t,ct=t=>null!==t&&"object"==typeof t,at=(t,e)=>`${t}${e?"__"+e:""}`,lt=t=>t.split("."),ht=(t,e)=>rt(t).reduce(((t,[s,r])=>{if(ct(r)){const n=rt(r);n.length?t.push(...n.reduce(((t,[r,n])=>{if((t=>null!==t&&t!==st)(r)&&e&&t.push([s,r,st,st]),ct(n)){const e=rt(n);e.length&&t.push(...e.reduce(((t,[e,n])=>{const i=typeof n;return"string"!==i&&"number"!==i||t.push([s,r,e,n]),t}),[]))}return t}),[])):t.push([s,st,st,st])}return t}),[]),ut=(t,e,s,r)=>""+(at(t,e)+(s?"_"+s:"")+(s&&r?"_"+r:"")),dt=(t,e,s,r)=>"."+ut(t,e,s,r),pt=(t,e,s,r)=>`[${it(at(t,e))}${s&&r?`~="${s}_${r}"`:s?`~="${s}"`:""}]`,mt={def:.75,c:.05,s:.65,m:.75,l:.85,n:.9},ft="effcss-provider",gt={theme:null,hydrate:null,mode:"a",prefix:"f"},$t={bp:{"3xs":18,"2xs":24,xs:30,sm:40,md:48,lg:64,xl:80,"2xl":96},vars:{"":{rem:16,l:mt,h:{def:261.35,b:261.35,i:194.77,e:29.23,w:70.66,s:142.49},c:{def:.03,xs:.03,s:.06,m:.1,l:.15,xl:.25},a:{def:1,min:0,xs:.1,s:.25,m:.5,l:.75,xl:.9,max:1},t:{def:300,xs:100,s:200,m:300,l:450,xl:600,no:0,min:50,max:750},int:[...Array(12).keys()],fr:{0:0,"1/12":"0.0833","1/10":"0.1","1/6":"0.1667","1/5":"0.2","1/4":"0.25","3/10":"0.3","1/3":"0.3333","2/5":"0.4","5/12":"0.4167","1/2":"0.5","7/12":"0.5833","3/5":"0.6","2/3":"0.6667","7/10":"0.7","3/4":"0.75","4/5":"0.8","5/6":"0.8333","9/10":"0.9","11/12":"0.9167",1:"1"},ar:{1:1,"2/1":2,"1/2":.5,"4/3":1.3333,"3/4":.75,"9/16":.5625,"16/9":1.7778}},light:{l:mt},dark:{l:{def:.4,n:.25,s:.3,m:.4,l:.5,c:.95}}}},yt=({prefix:t})=>{let e=1;return{get base(){return t+0},get current(){return t+e},next(){return e++,this.current},reset(){e=1}}},vt=()=>{const t=new Set,e=new Map;return{use(s,r){const n=e.get(s);return n||(t.add(r),e.set(s,r),r)},useMany(t){return rt(t).map((([t,e])=>this.use(e,t)))},getKey:t=>e.get(t),get keys(){return[...t]},get makers(){return Object.fromEntries(e.entries().map((([t,e])=>[e,t])))}}},bt="theme",_t=Object.assign,kt=Object.entries,xt=Object.fromEntries,St=(t,e)=>t.getAttribute(e)||gt[e];function jt(t={}){const e=window.document,s=window.customElements;if(null==s?void 0:s.get(ft))return!1;{class r extends HTMLScriptElement{constructor(){super(...arguments),this._c=vt(),this._m=function(){let t={},e={},s=[],r=[];const n=t=>t.adoptedStyleSheets=s,i=()=>{r=r.reduce(((t,e)=>{const s=e.deref();return s&&(n(s),t.push(e)),t}),[])},o=t=>s.findIndex((e=>e===t)),c=e=>e?t[e]:void 0,a=(e,r)=>{if(!t[e])return t[e]=r,s.push(r),i(),!0},l=t=>{const e=c(t);return!!e&&-1!==o(e)};return{apply:n,notify:i,getIndex:o,get:c,has:t=>!!t&&!!c(t),getAll:()=>t,add:a,status:l,on:(...t)=>{const e=t.reduce(((t,e)=>{const r=c(e);return!(!r||l(e))&&(s.push(r),t)}),!0);return i(),e},off:(...t)=>{const e=t.reduce(((t,e)=>{const r=c(e);if(r&&l(e)){const e=o(r);return s.splice(e,1),t}return!1}),!0);return i(),e},remove:r=>{const n=c(r);if(!n)return;const a=o(n);return a>-1&&(s.splice(a,1),delete t[r],delete e[r]),i(),!0},removeAll:()=>(s.splice(0),t={},e={},i(),!0),pack:(t,e)=>{const s=new CSSStyleSheet;return s.replaceSync(e),!!s.cssRules.length&&a(t,s)},replace:(e,s)=>{const r=t[e];if(r)return r.replaceSync(s),i(),!0},register:t=>{r.findIndex((e=>e.deref()===t))>=0||(r.push(new WeakRef(t)),n(t))},unregister:t=>{const e=r.findIndex((e=>e.deref()===t));e>=0&&r.splice(e,1)}}}(),this._cust=(t={})=>{const{varName:e}=this._s(this._k.base);function s(t,r){return kt(t).reduce(((t,[n,i])=>i&&"object"==typeof i?_t(t,s(i,[...r,n])):(t[e(...r,n)]=i,t)),{})}const r=xt(kt(t||{}).map((([t,e])=>[t,s(e,[])]))),{"":n={},dark:i,light:o}=r,c=function(t,e){var s={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(s[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(t);n<r.length;n++)e.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(t,r[n])&&(s[r[n]]=t[r[n]])}return s}(r,["","dark","light"]);this._=({bem:t,each:e,when:s,vars:r,merge:a,at:{mq:l}})=>{const h="prefers-color-scheme",u={light:`${h}: light`,dark:`${h}: dark`};return a({[`:root:has(script[is=${ft}])`]:a({fontSize:r("rem")},n)},s(!!i,{[l(u.dark).s]:i}),s(!!o,{[l(u.light).s]:o}),e(c,((e,s)=>({[`:root:has(script[is=${ft}][${bt}=${e}])`]:s,[t(`..theme.${e}`)]:s}))))},this.use(this._,this._k.base)},this.use=(t,e)=>{const s=e||this._k.current;let r=this._c.use(t,s);return this._m&&!this._m.has(e)&&this._m.pack(r,this.css(t,r)),e||this._k.next(),this.resolve(r)},this.usePublic=t=>xt(kt(t).map((([t,e])=>[t,this.use(e,t)]))),this.usePrivate=t=>t.map((t=>this.use(t))),this.resolve=t=>this._s(t||this._k.base).attr,this.css=(t,e)=>this._p.compile({key:e,maker:t}),this.status=t=>{const e=this.key(t);return!!e&&this._m.status(e)},this.on=(...t)=>this._m.on(...t.map(this.key)),this.off=(...t)=>this._m.off(...t.map(this.key)),this.key=t=>"string"==typeof t?t:this._c.getKey(t),this.stylesheets=(t=this._c.keys)=>t.map((t=>this._m.get(this.key(t))))}get prefix(){return St(this,"prefix")||""}get mode(){return St(this,"mode")}get hydrate(){return""===this.getAttribute("hydrate")}get settings(){return this._settings}set settings(t){var e,s,r;const n=_t({},this._settings,t),{makers:i,vars:o,bp:c,off:a}=n;c&&(null===(e=this._settings)||void 0===e?void 0:e.bp)!==c&&(this._p=et({scope:this._s,globalKey:this._k.base,bp:c})),o&&(null===(s=this._settings)||void 0===s?void 0:s.vars)!==o&&this._cust(o),i&&(null===(r=this._settings)||void 0===r?void 0:r.makers)!==i&&(this._c.useMany(i),this.usePublic(i),(null==a?void 0:a.length)&&this._settings.off!==a&&this.off(...a),this.hydrate&&this._k.reset()),this._settings=n}set theme(t){t?this.setAttribute(bt,t):this.removeAttribute(bt)}get theme(){return St(this,bt)||""}connectedCallback(){this._k=yt({prefix:this.prefix}),this._s=((t={})=>{const{mode:e}=t;let s,r;return t=>{const n=(...e)=>""+e.filter(Boolean).reduce(((t,e)=>`${t}-${e}`),t),i=(...t)=>"--"+n(...t);return"c"===e?(s=t=>{let e,s,r,i;return ot(t)?([e,s,r,i]=lt(t),dt(n(e),s,r,i)):t&&ht(t).map((([t,e,s,r])=>dt(n(t),e,s,r))).join(",")},r=t=>{let e,s,r,i;const o="class";let c="";return Array.isArray(t)?c=[...t.reduce(((t,o)=>([e,s,r,i]=lt(o),t.add(ut(n(e),s)),r&&t.add(ut(n(e),s,r,i)),t)),new Set).values()].join(" "):ot(t)?([e,s,r,i]=lt(t),c=ut(n(e),s,r,i)):c=t&&ht(t,!0).map((([t,e,s,r])=>ut(n(t),e,s,r))).join(" "),nt({[o]:c},{toString:{value:()=>`${o}="${c}"`}})}):(s=t=>{let e,s,r,i;return ot(t)?([e,s,r,i]=lt(t),pt(n(e),s,r,i)):t&&ht(t).map((([t,e,s,r])=>pt(n(t),e,s,r))).join(",")},r=t=>{let e,s,r,i,o,c,a="";if(Array.isArray(t))c=t.reduce(((t,c)=>{[e,s,r,i]=lt(c);const l=at(n(e),s);return o=it(l),a=r?i?`${r}_${i}`:`${r}`:"",t[o]&&a?t[o]=t[o]+" "+a:t[o]=a,t}),{});else if(ot(t)){[e,s,r,i]=lt(t);const l=at(n(e),s);o=it(l),a=r?i?`${r}_${i}`:`${r}`:"",c={[o]:a}}else c=t&&ht(t,!0).reduce(((t,[e,s,r,i])=>{const c=at(n(e),s);o=it(c);const l=r?i?`${r}_${i}`:`${r}`:"";return a=t[o]?t[o]+" "+l:l,t[o]=a,t}),{});return nt(c,{toString:{value:()=>rt(c).map((([t,e])=>`${t}="${e}"`)).join(" ")}}),c}),{selector:s,attr:r,name:n,varName:i,varExp:(...t)=>`var(${i(...t)})`}}})({mode:this.mode});const s=this;this._n={set adoptedStyleSheets(t){s.dispatchEvent(new CustomEvent("effcsschanges",{detail:{styles:t},bubbles:!0}))}},this._m.register(this._n),this._m.register(e),this.settings=_t({},$t,t)}toString(){return`<script ${[...this.attributes].map((t=>t.value?`${t.name}="${t.value}"`:""===t.value?t.name:"")).filter(Boolean).join(" ")}>${this.textContent}<\/script>`}}return s.define(ft,r,{extends:"script"}),!0}}export{jt as defineProvider};
@@ -0,0 +1,148 @@
1
+ import { TCreateScope } from '../../common';
2
+ export declare const resolveAtRules: (scope: ReturnType<ReturnType<TCreateScope>>) => {
3
+ /**
4
+ * `@property` selector
5
+ * @param name - property name
6
+ */
7
+ pr: {
8
+ (n?: string | number, p?: {
9
+ syn?: string;
10
+ inh?: boolean;
11
+ ini?: string | number | boolean;
12
+ }): {
13
+ /**
14
+ * Key
15
+ */
16
+ k: string;
17
+ /**
18
+ * Value
19
+ */
20
+ v: string;
21
+ /**
22
+ * Selector
23
+ */
24
+ s: string;
25
+ /**
26
+ * Rule
27
+ */
28
+ r: { [key in string]: {
29
+ syntax: string;
30
+ inherits: boolean;
31
+ initialValue?: string | number | boolean;
32
+ }; };
33
+ toString(): string;
34
+ };
35
+ toString(): string;
36
+ };
37
+ /**
38
+ * `@keyframes` selector
39
+ * @param name - keyframes name
40
+ */
41
+ kf: {
42
+ (name?: string): {
43
+ /**
44
+ * Key
45
+ */
46
+ k: string;
47
+ /**
48
+ * Selector
49
+ */
50
+ s: string;
51
+ toString(): string;
52
+ };
53
+ toString(): string;
54
+ };
55
+ /**
56
+ * `@media` selector
57
+ */
58
+ mq: {
59
+ (q: string, t?: string): {
60
+ s: string;
61
+ q: string;
62
+ t: string | undefined;
63
+ toString: () => string;
64
+ };
65
+ toString(): string;
66
+ };
67
+ /**
68
+ * `@container` selector
69
+ */
70
+ cq: {
71
+ (q: string, c?: string): {
72
+ /**
73
+ * Container
74
+ */
75
+ c: string;
76
+ /**
77
+ * Query
78
+ */
79
+ q: string;
80
+ /**
81
+ * Selector
82
+ */
83
+ s: string;
84
+ toString(): string;
85
+ };
86
+ toString(): string;
87
+ };
88
+ /**
89
+ * `@layer` selector
90
+ */
91
+ lay: {
92
+ (name?: string): {
93
+ /**
94
+ * Key
95
+ */
96
+ k: string;
97
+ /**
98
+ * Selector
99
+ */
100
+ s: string;
101
+ toString(): string;
102
+ };
103
+ toString(): string;
104
+ };
105
+ /**
106
+ * `@scope` selector
107
+ * @param r - scope root
108
+ * @param l - scope limit
109
+ */
110
+ sc: (r?: string, l?: string) => {
111
+ /**
112
+ * Root
113
+ */
114
+ r: string;
115
+ /**
116
+ * Limit
117
+ */
118
+ l: string;
119
+ /**
120
+ * Selector
121
+ */
122
+ s: string;
123
+ toString(): string;
124
+ };
125
+ /**
126
+ * `@supports` selector
127
+ * @param c - condition
128
+ * @param n - inverse condition
129
+ */
130
+ sup: {
131
+ (c?: string, n?: boolean): {
132
+ /**
133
+ * Condition
134
+ */
135
+ c: string;
136
+ /**
137
+ * Not
138
+ */
139
+ n: boolean;
140
+ /**
141
+ * Selector
142
+ */
143
+ s: string;
144
+ toString(): string;
145
+ };
146
+ toString(): string;
147
+ };
148
+ };
@@ -0,0 +1,12 @@
1
+ type TStrOrNum = string | number;
2
+ type TJoinArr = (...val: TStrOrNum[]) => string;
3
+ export declare const getBaseHandlers: () => {
4
+ dash: TJoinArr;
5
+ comma: TJoinArr;
6
+ space: TJoinArr;
7
+ range: (size: number, handler: (k: number) => object) => object;
8
+ each: <V>(rules: Record<string, V> | V[], handler: (k: string | number, v: V) => object) => object;
9
+ merge: (target: Record<string, any>, ...sources: Record<string, any>[]) => Record<string, any>;
10
+ when: (condition: boolean | undefined, rules: object, otherwise?: object) => object;
11
+ };
12
+ export {};