effcss 4.11.0 → 4.13.0

package/README.md

@@ -30,6 +30,7 @@ EffCSS is a self-confident CSS-in-JS library based only on the browser APIs. Use
 
 -   [Docs](https://effnd.tech/css/)
 -   [SourceCraft](https://sourcecraft.dev/msabitov/effcss)
+-   [GitFlic](https://gitflic.ru/project/msabitov/effcss)
 -   [GitVerse](https://gitverse.ru/msabitov/effcss)
 -   [GitHub](https://github.com/msabitov/effcss)
 -   [GitLab](https://gitlab.com/msabitov/effcss)
@@ -79,15 +80,16 @@ Just call `useStyleProvider` in your code:
 
 ```jsx
 import { useStyleProvider } from "effcss";
+import { App } from "./App.tsx";
 
-const consumer = useStyleProvider({
+const styleProvider = useStyleProvider({
     attrs: {
         min: true // to create minified selectors
     }
 });
 
 const root = createRoot(document.getElementById("root"));
-root.render(<App css={consumer} />);
+root.render(<App styleProvider={styleProvider} />);
 ```
 
 Each CSS stylesheet corresponds to a single `Stylesheet maker`. `Stylesheet maker` is a JS function that should return object or string with style rules:
@@ -116,32 +118,16 @@ export type TMyMaker = {
          * Card height
          */
         h: 'full' | 'half';
-        /**
-         * Card logo scope
-         */
-        logo: {
-            /**
-             * Logo width
-             */
-            w: 's' | 'l';
-        },
-        /**
-         * Card footer scope
-         */
-        footer: {
-            /**
-             * Footer visibility
-             */
-            visible: '';
-            /**
-             * Footer size
-             */
-            sz: 's' | 'm' | 'l';
-        };
     };
 }
 
-export const myMaker: TStyleSheetMaker = ({ select, pseudo: {h}, at: { keyframes, property }, merge, palette, coef, size, units: {px} }) = {
+export const myMaker: TStyleSheetMaker = ({
+    select, merge,
+    pseudo: {h},
+    at: { keyframes, property },
+    theme: { neutral, size },
+    units: { px }
+}) = {
     // specify selector variants via generic
     const selector = select<TCardMaker>;
     // create property with unique identifier
@@ -168,31 +154,31 @@ export const myMaker: TStyleSheetMaker = ({ select, pseudo: {h}, at: { keyframes
         })
     }, {
         border: 'none',
-        background: palette.pale.xl.alpha(0.8),
+        background: neutral,
         aspectRatio: 1,
         ...h({
             opacity: 0.5
         })
     });
     return {
+        // add @property rule
         ...sizeProperty,
+        // add @keyframes rule
         ...spin,
-        [selector('fsz:16')]: { ... },
-        [selector('card')]: { ... },
-        [selector('card.logo')]: cardLogoStyles,
-        [selector('card.logo.w:s')]: {
-            ...widthProperty(px(100))
+        // add rules according to the TMyMaker contract
+        [selector('fsz:16')]: {
+            // rule content
+        },
+        [selector('card')]: {
+            // rule content
+        },
+        [selector('card.rounded:')]: {
+            // rule content
+        },
+        [selector('card.h:full')]: {
+            // rule content
         },
-        [selector('card.logo.w:l')]: widthProperty(px(300)),
-        [selector('card.rounded:')]: { ... },
-        [selector('card.h:full')]: { ... },
-        [selector('card.footer')]: { ... },
-        [selector('card.footer.visible:')]: { ... },
-        ...each(coef.short, (k, v) => ({
-            [selector(`card.footer.sz:${k}`)]: {
-                height: size(v)
-            }
-        }))
+        // ... and so on
     };
 };
 ```
@@ -208,25 +194,21 @@ import type { TMyMaker } from './maker';
 import { myMaker } from './maker';
 
 export const App = (props: {
-    css: IStyleProvider;
+    styleProvider: IStyleProvider;
 }) => {
-    const styleProvider = useStyleProvider();
     const stylesRef = useRef();
     // put it inside ref to avoid recalculations
     if (!stylesRef.current) {
-        const [card] = css.use(myStyleSheetMaker);
-        // thanks to the TMyMaker type,
-        // you don't need to look at the implementation - just create the necessary attributes
+        // thanks to the TMyMaker contract type,
+        // you don't need to look at the implementation - just pass the necessary selectors
         stylesRef.current = {
             // you can apply list of selectors
-            card: styleProvider.dx<TMyMaker>('card.rounded:', 'fsz:24'),
+            card: styleProvider.dx<TMyMaker>(myMaker, ['card.h:full', 'fsz:16']),
             // or you can apply object with selectors
-            footer: styleProvider.dx<TMyMaker>({
+            another: styleProvider.dx<TMyMaker>(myMaker, {
+                fsz: 16,
                 card: {
-                    footer: {
-                        visible: '',
-                        size: 'm'
-                    }
+                    h: 'full'
                 }
             })
         };
@@ -235,7 +217,7 @@ export const App = (props: {
     // just apply attributes to appropriate elements
     return (
         <div {...styles.card}>
-            <div {...styles.footer}>...</div>
+            <div {...styles.another}>...</div>
         </div>
     );
 };

package/dist/index.js

@@ -1,7 +1,7 @@
 /*
-* EffCSS v4.11.0
+* EffCSS v4.13.0
 * {@link https://sourcecraft.dev/msabitov/effcss}
 * Copyright (c) Marat Sabitov
 * @license Apache-2.0
 */
-const e=(e,t,r)=>Object.entries(e).reduce(t,r),t=(e,t)=>{return`${r=e,r.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()))}:${""+t};`;var r},r=Symbol("noParse"),s=(n,i,a)=>{let o=""+n;return null==i?"":Array.isArray(i)?i.map((e=>t(o,e))).join(""):"object"!=typeof i||i.hasOwnProperty(r)?""===i?o+";":t(o,i):(!a||a.startsWith?.("@")||o.startsWith?.("&")||o.startsWith?.("@")?"":"&")+o+`{${e(i,((e,t)=>e+s(...t,o)),"")}}`},n="@layer",i="@starting-style",a=e=>`(${e})`,o=e=>"string"==typeof e,l={and:(...e)=>Object.defineProperties({type:"and",value:e},{toString:{value:()=>e.filter(Boolean).map((e=>{const t=g(e);return"object"==typeof e&&"or"===e.type?a(t):t})).join(" and ")}}),or:(...e)=>Object.defineProperties({type:"or",value:e},{toString:{value:()=>e.filter(Boolean).map((e=>g(e))).join(" or ")}}),not:e=>"object"==typeof e&&"not"===e.type?e.value[0]:Object.defineProperties({type:"not",value:[e]},{toString:{value:()=>`not (${g(e,!0)})`}})},c=e=>{const t=t=>({toString:()=>`(min-${e}:${o(t)?t:t+"rem"})`}),r=t=>({toString:()=>`(max-${e}:${o(t)?t:t+"rem"})`}),s=(e,s)=>({toString:()=>`${t(e)} and ${r(s)}`});return{up:t,down:r,between:s,only:e=>s(e,e)}},u=c("width"),h=c("height"),m=c("inline-size"),d=c("block-size"),g=(e,t)=>e?"string"==typeof e?e.includes("(")||t?e:a(e):e+"":"",p=(e={})=>{const{type:t,condition:r}=e,s=g(r),n="object"==typeof r&&"or"===r.type,i=`@media${t?" "+t:""}${t&&s?" and":""}${s?" "+(t&&n?a(s):s):""}`;return Object.defineProperties((e=>({[i]:e})),{all:{get:()=>p({condition:r,type:"all"})},print:{get:()=>p({condition:r,type:"print"})},screen:{get:()=>p({condition:r,type:"screen"})},where:{value:e=>p({condition:e,type:t})},toString:{value:()=>i}})},b=p({}),f=({condition:e}={})=>{const t=g(e),r="@supports"+(t?" "+t:"");return Object.defineProperties((e=>({[r]:e})),{where:{value:e=>f({condition:e})},toString:{value:()=>r}})},$=f(),y=e=>({[i]:e});y.toString=i;const v=e=>{const{root:t="",limit:r="",mode:s=[!1,!1]}=e,n=`@scope ${t?`(${t}${s[0]?" > *":""})`:""}${t&&r?" ":""}${r?`to (${r}${s[1]?" > *":""})`:""}`;return Object.defineProperties((e=>({[n]:e})),{limit:{value:e=>v({root:t,limit:e,mode:s})},root:{value:e=>v({root:e,limit:r,mode:s})},both:{value:()=>v({root:t,limit:r,mode:[!1,!0]})},none:{value:()=>v({root:t,limit:r,mode:[!0,!1]})},low:{value:()=>v({root:t,limit:r,mode:[!0,!0]})},high:{value:()=>v({root:t,limit:r,mode:[!1,!1]})},toString:{value:()=>n}})},x=v({}),w=(e,t)=>`calc(${e} * 1${t})`,k=e=>w(e,"px"),j=e=>w(e,"vh"),S=e=>w(e,"vw"),_=e=>w(e,"vmin"),A=e=>w(e,"vmax"),O=e=>w(e,"em"),z=e=>w(e,"rem"),C=e=>w(e,"deg"),q=e=>w(e,"rad"),P=e=>w(e,"rad"),N=e=>w(e,"ms"),E=e=>w(e,"s"),T=e=>w(e,"%"),M=e=>w(e,"cqw"),R=e=>w(e,"cqh"),B=e=>w(e,"cqi"),W=e=>w(e,"cqb"),I=e=>w(e,"cqmin"),V=e=>w(e,"cqmax"),J=Object.fromEntries,L=Object.entries,H=":first-",D=":last-",K=":only-",U="child",F=":nth-",Z="of-type",G=F+U,Q=":focus",X="valid",Y="in"+X,ee=":user-",te="placeholder",re={r:":root",h:":hover",f:Q,fv:Q+"-visible",a:":active",v:":visited",val:":"+X,inv:":"+Y,uval:ee+X,uinv:ee+Y,e:":empty",d:":disabled",rq:":required",o:":optional",m:":modal",l:":link",phs:`:${te}-shown`,ch:":checked",po:":popover-open",fc:H+U,lc:D+U,oc:K+U,odd:G+"(odd)",even:G+"(even)",ft:H+Z,lt:D+Z,ot:K+Z,bef:"::before",aft:"::after",ph:`::${te}`,bd:"::backdrop",fl:"::first-line",dc:"::details-content",sel:"::selection"},se={has:":has",not:":not",is:":is",wh:":where",st:":state",nthc:G,ntho:F+Z,dir:":dir",lang:":lang"},ne=e=>`oklch(${e})`,ie=e=>ne(`from ${e}`),ae=e=>t=>t?ie(e+` ${t.l||"l"} ${t.c||"c"} ${t.h||"h"} / ${t.a||"1"}`):e,oe=(e,t=.1)=>ie(`${e} calc(l + ${t}) c h / alpha`),le=(e,t=.1)=>ie(`${e} calc(l - ${t}) c h / alpha`),ce=(e,t=.1)=>ie(`${e} l c h / calc(alpha + ${t})`),ue=(e,t=.1)=>ie(`${e} l c h / calc(alpha - ${t})`),he=(e,t=.04)=>ie(`${e} l calc(c + ${t}) h / alpha`),me=(e,t=.04)=>ie(`${e} l calc(c - ${t}) h / alpha`),de=e=>ie(`${e} l c calc(h + 180) / alpha`),ge=e=>ie(`${e} l 0 h / alpha`),pe=(e,t=30)=>ie(`${e} l c calc(h${"number"==typeof t?t>0?" + "+t:" - "+-t:t}) / alpha`),be=e=>{const t=e("color"),r=e("contrast"),s=e("neutral");return{root:ae(t),contrast:ae(r),neutral:ae(s),oklch:ne,lighten:oe,darken:le,saturate:he,desaturate:me,fadein:ce,fadeout:ue,spin:pe,complement:de,grayscale:ge}},fe=e=>{class t{state={l:"l",c:"base",h:"pri",a:"1",m:"bg"};constructor(e={}){Object.assign(this,{[r]:!0}),this.state=Object.assign(this.state,e)}get xs(){return new t({...this.state,l:"xs"})}get s(){return new t({...this.state,l:"s"})}get m(){return new t({...this.state,l:"m"})}get l(){return new t({...this.state,l:"l"})}get xl(){return new t({...this.state,l:"xl"})}get lightness(){return{xs:this.xs,s:this.s,m:this.m,l:this.l,xl:this.xl}}get gray(){return new t({...this.state,c:"gray"})}get pale(){return new t({...this.state,c:"pale"})}get base(){return new t({...this.state,c:"base"})}get rich(){return new t({...this.state,c:"rich"})}get chroma(){return{gray:this.gray,pale:this.pale,base:this.base,rich:this.rich}}get pri(){return new t({...this.state,h:"pri"})}get sec(){return new t({...this.state,h:"sec"})}get suc(){return new t({...this.state,h:"suc"})}get inf(){return new t({...this.state,h:"inf"})}get war(){return new t({...this.state,h:"war"})}get dan(){return new t({...this.state,h:"dan"})}get hue(){return{pri:this.pri,sec:this.sec,suc:this.suc,inf:this.inf,war:this.war,dan:this.dan}}alpha(e=1){return new t({...this.state,a:e+""})}get bg(){return new t({...this.state,m:"bg"})}get fg(){return new t({...this.state,m:"fg"})}toString(){const{l:t,c:r,h:s,a:n,m:i}=this.state;return`oklch(${e(`lightness.${i}.${t}`)} ${e(`chroma.${i}.${r}`)} ${e(`hue.${s}`)} / ${n})`}}return new t},$e=e=>{const t=(t,r=0)=>e(`coef.${t.state.center+r}`);class r{state={center:8};constructor(e={}){this.state=Object.assign(this.state,e)}get min(){return t(this,-4)}get xxs(){return t(this,-3)}get xs(){return t(this,-2)}get s(){return t(this,-1)}get m(){return t(this)}get l(){return t(this,1)}get xl(){return t(this,2)}get xxl(){return t(this,3)}get max(){return t(this,4)}get $xxs(){return new r({center:4})}get $xs(){return new r({center:8})}get $s(){return new r({center:12})}get $m(){return new r({center:16})}get $l(){return new r({center:20})}get $xl(){return new r({center:24})}get $xxl(){return new r({center:28})}get short(){return{s:this.s,m:this.m,l:this.l}}get base(){return{xs:this.xs,...this.short,xl:this.xl}}get long(){return{xxs:this.xxs,...this.base,xxl:this.xxl}}get full(){return{min:this.min,...this.long,max:this.max}}get main(){return{min:this.min,m:this.m,max:this.max}}get sparse(){return{min:this.min,xs:this.xs,m:this.m,xl:this.xl,max:this.max}}}return new r},ye=Object.assign,ve=Object.entries,xe=Array.isArray,we=e=>"object"==typeof e,ke=(e,t)=>Array.from(Array(e).entries()).reduce(((e,[r])=>ye(e,t(r+1))),{}),je=(e,t)=>ve(e).reduce(((e,[r,s])=>ye(e,t(r,s))),{}),Se=(e,t,r={})=>e?t:r,_e=(...e)=>e.join("-"),Ae=(...e)=>e.join(),Oe=(...e)=>e.join(" "),ze=(e,...t)=>t.length?t.reduce(((e,t)=>(t&&e&&we(t)&&ve(t).forEach((([t,r])=>{r&&we(r)&&e[t]?xe(e[t])&&xe(r)?e[t]=[...e[t],...r]:ze(e[t],r||{}):e[t]=r})),e)),e):e,Ce=Object.assign(J(L(re).map((([e,t])=>{function r(e=""){return e&&"object"==typeof e?{[t]:e}:e+t}return r.toString=()=>t,[e,r]}))),J(L(se).map((([e,t])=>{function r(e,r=""){const s=t+`(${e})`;return r&&"object"==typeof r?{[s]:r}:r+s}return r.toString=()=>t,[e,r]})))),qe={px:k,vh:j,vw:S,vmin:_,vmax:A,em:O,rem:z,deg:C,rad:q,turn:P,ms:N,s:E,pc:T,cqw:M,cqh:R,cqb:W,cqi:B,cqmin:I,cqmax:V},Pe=e=>1!==e?e+" * ":"",Ne=t=>{const{scope:i,globalKey:a}=t,o=i(a).varExp,c=(e=1)=>qe.ms(Pe(e)+o("time")),p=(e=1)=>qe.deg(Pe(e)+o("angle")),f=(e=1)=>qe.px(Pe(e)+o("size")),v=e=>e?`cubic-bezier(${e.x1||0},${e.y1||0},${e.x2||1},${e.y2||1})`:o("easing");return{compile:({key:t,maker:a,mode:w})=>{const k=i(t,w),j=k.selector,S=k.select,_=(e=>{const t={cp:1,lay:1,kf:1,cq:1},s=(n={})=>{const{scroll:i,type:a,name:o,condition:l}=n,c=g(l),u=`@container${o?" "+o:""}${c?" "+c:""}`;return Object.defineProperties((e=>({[u]:e})),{container:{value:(o||"none")+" / "+(a&&i?`${a} scroll-state`:i?"scroll-state":a||"normal"),enumerable:!0},named:{get:()=>s({scroll:i,condition:l,name:o||e.name(["cq",t.cq++]),type:a})},size:{get:()=>s({name:o,scroll:i,condition:l,type:"size"})},isize:{get:()=>s({name:o,scroll:i,condition:l,type:"inline-size"})},scroll:{get:()=>s({name:o,scroll:!0,condition:l,type:a})},where:{value:e=>s({name:o,scroll:i,condition:e,type:a})},[r]:{value:!0},toString:{value:()=>u}})},i=({name:r}={})=>{const s=`${n}${r?" "+r:""}`,a=e=>({[s]:e});return a.toString=()=>s,Object.defineProperties(a,{named:{get:()=>i({name:r||e.name(["lay",t.lay++])})},list:{value:(...e)=>({[n+(e.map((e=>(e+"").split(n)[1])).filter(Boolean).join(",")||r)]:""})}})};return{layer:i(),supports:$,keyframes:s=>{const n=e.name(["kf",t.kf++]),i="@keyframes "+n;return Object.defineProperties((e=>{if(!e)return{animationName:n};const{dur:t,tf:r,del:s,ic:i,dir:a,ps:o,fm:l}=e;return{animation:[t,r,s,i,a,o,l,n].filter(Boolean).join(" ")}}),{[i]:{value:s,enumerable:!0},toString:{value:()=>n},[r]:{value:!0}})},property:(s={})=>{let n,i,a='"*"',o=!0;"object"==typeof s?({syn:a=a,inh:o=o,ini:n,def:i}=s):(i=s,n=s,o=!1);const l="--"+e.name(["cp",t.cp++]),c=`var(${l}${void 0!==i?","+i:""})`,u="@property "+l;return Object.defineProperties((e=>({[l]:e})),{[u]:{value:{syntax:a,inherits:o,initialValue:n},enumerable:!0},toString:{value:()=>c},fallback:{value:e=>`var(${l},${e})`},[r]:{value:!0}})},scope:x,media:b,container:s({}),startingStyle:y,$logic:l,$width:u,$height:h,$block:d,$inline:m}})(k),A=a({dash:_e,comma:Ae,space:Oe,range:ke,each:je,when:Se,merge:ze,themeVar:o,size:f,time:c,angle:p,easing:v,bem:j,select:S,pseudo:Ce,color:be(o),palette:fe(o),coef:$e(o),units:qe,at:_});return"string"==typeof A?A:(t=>e(t,((e,t)=>e+s(...t)),""))(A)}}},Ee=Symbol("effcss-stylesheet");class Te{disabled=!1;cssRules=[];replaceSync(e){e&&(this.cssRules=[{cssText:e}])}}function Me({initStyles:e,emulate:t}={}){const r={};e?.forEach((e=>{const t=e?.dataset?.effcss;t&&(r[t]=e)}));let s={},n={},i=[],a=[];const o=(e,t)=>t.hasOwnProperty(Ee)?t:Object.defineProperties(t,{[Ee]:{value:e}}),l=e=>e.adoptedStyleSheets=[...e.adoptedStyleSheets?.length?[...e.adoptedStyleSheets].filter((e=>!e.hasOwnProperty(Ee))):[],...i],c=()=>{a=a.reduce(((e,t)=>{const r=t.deref();return r&&(l(r),e.push(t)),e}),[])},u=e=>e?s[e]:void 0,h=(e,t)=>{if(!s[e]){s[e]=o(e,t),i.push(s[e]);const n=r[e];return n&&(n.disabled=!0),c(),!0}};return{get:u,all:()=>s,add:h,status:e=>{const t=u(e);return!t?.disabled},on:(...e)=>{e.forEach((e=>{const t=u(e);t&&(t.disabled=!1)})),c()},off:(...e)=>{e.forEach((e=>{const t=u(e);t&&(t.disabled=!0)})),c()},remove:e=>{const t=u(e);if(!t)return;const r=(a=t,i.findIndex((e=>e===a)));var a;return r>-1&&(i.splice(r,1),delete s[e],delete n[e]),c(),!0},removeAll:()=>(i.splice(0),s={},n={},c(),!0),pack:(e,r)=>{let n=s[e]||(!t&&globalThis.CSSStyleSheet?new globalThis.CSSStyleSheet:new Te);return n.replaceSync(r),n=o(e,n),!!n.cssRules.length&&h(e,n)},register:e=>{a.findIndex((t=>t.deref()===e))>=0||(a.push(new WeakRef(e)),l(e))},unregister:e=>{const t=a.findIndex((t=>t.deref()===e));t>=0&&a.splice(t,1)},hydrate:e=>r[e]&&!r[e].disabled&&r[e].textContent||void 0}}const Re=({prefix:e})=>{let t=0;return{get initial(){return e+0},get current(){return e+t},next(){return t++,this.current}}},Be=({prefix:e})=>{const t=new Set,r=new Map,s=Re({prefix:e});return{use(e){let n=this.key(e);return n||(n=s.current,t.add(n),r.set(e,n),s.next(),n)},remake(e,t){const s=r.get(t);return s?(r.delete(t),r.set(e,s),s):this.use(e)},key:e=>e?r.get(e)||"":s.initial,get keys(){return[...t]},get makers(){return Object.fromEntries(r.entries().map((([e,t])=>[t,e])))}}},We=void 0,Ie=Object.entries,Ve=Object.defineProperties,Je=e=>"string"==typeof e,Le=e=>null!==e&&"object"==typeof e,He=e=>e.split("."),De=(e,t="")=>Ie(e).reduce(((e,[r,s])=>{const n=t?`${t}-${r}`:r;return"object"==typeof s?(e.add(n),e=e.union(De(s,n))):e.add(n+`_${s}`),e}),new Set),Ke=(e,t="")=>Ie(e).reduce(((e,[r,s])=>{const n=t?`${t}-${r}`:r;if("object"==typeof s){const t=Ke(s,n);t.size||e.add(n),e=e.union(t)}else t&&e.add(t),e.add(n+`_${s}`);return e}),new Set),Ue=(e,t)=>Ie(e).reduce(((e,[r,s])=>{if(Le(s)){const n=Ie(s);n.length?e.push(...n.reduce(((e,[s,n])=>{if((e=>null!==e&&e!==We)(s)&&t&&e.push([r,s,We,We]),Le(n)){const t=Ie(n);t.length&&e.push(...t.reduce(((e,[t,n])=>{const i=typeof n;return"string"!==i&&"number"!==i||e.push([r,s,t,n]),e}),[]))}return e}),[])):e.push([r,We,We,We])}return e}),[]),Fe=(e,t,r,s)=>""+(((e,t)=>`${e||""}${t?"__"+t:""}`)(e,t)+(r?"_"+r:"")+(r&&s?"_"+s:""))||"_",Ze=(e,t)=>"."+(t?e+(t.startsWith("_")?"":"-")+t:e),Ge=(e,t)=>`[data-${e}${t?`~="${t}"`:""}]`;const Qe=e=>e||"",Xe=Object.assign,Ye=Object.entries,et="theme",tt="delete",rt="update",st="$light",nt="$dark",it="lightness",at="chroma",ot=e=>Number((.1*184+.9*e).toFixed(2)),lt={time:200,size:16,angle:30,color:"#2192a7",contrast:"light-dark(black, white)",neutral:"light-dark(white, #1b1f1f)",easing:"linear",coef:{0:0,1:.0625,2:.125,3:.25,4:.5,5:.75,6:.875,7:.9375,8:1,9:1.0625,10:1.125,11:1.25,12:1.5,13:1.75,14:1.875,15:1.9375,16:2,17:3,18:4,19:5,20:7.5,21:10,22:12,23:15,24:16,25:20,26:28,27:36,28:48,29:64,30:80,31:120,32:150},hue:{pri:184,sec:290,suc:ot(142),inf:ot(264),war:ot(109),dan:ot(29)},[st]:{[it]:{bg:{xl:1,l:.94,m:.88,s:.83,xs:.78},fg:{xl:0,l:.12,m:.24,s:.36,xs:.48}},[at]:{bg:{gray:0,pale:.01,base:.04,rich:.7},fg:{gray:0,pale:.07,base:.11,rich:.15}}},[nt]:{[it]:{bg:{xl:.24,l:.3,m:.36,s:.42,xs:.48},fg:{xl:1,l:.93,m:.86,s:.79,xs:.72}},[at]:{bg:{pale:.02,base:.06,rich:.1},fg:{pale:.06,base:.1,rich:.14}}}},ct=({provider:e,init:t,scope:r,onChange:s})=>{const n={"":lt},i=[],a=({$light:e={},$dark:t={},...s})=>{function n(e,t=[]){return Ye(e).reduce(((e,[s,i])=>i&&"object"==typeof i?Xe(e,n(i,[...t,s])):(e[r.varName([...t,s])]=i,e)),{})}return{...n(s),[st]:n(e),[nt]:n(t)}},o={get:(e="")=>n[e],add(e,t){n[t]||(n[t]=ze({[st]:{},[nt]:{}},e),i.push({type:"add",payload:{params:e,name:t}}),s?.())},delete(e){e&&n[e]&&(this.current===e&&this.switch(),delete n[e],i.push({type:tt,payload:{name:e}}),s?.())},update(e,t=""){n[t]&&(n[t]=ze({[st]:{},[nt]:{}},n[t],e),i.push({type:rt,payload:{params:e,name:t}}),s?.())},switch(t=""){n[t]&&e.setAttribute(et,t)},vars(e=""){const t=this.get(e);return t?a(t):{[st]:{},[nt]:{}}},makeThemeVars:a,get list(){const{"":e,...t}=n;return Object.keys(t)},get current(){return e.getAttribute(et)||""},get all(){return n},get actions(){return i}};return t?.forEach((({type:e,payload:t})=>{switch(e){case"add":o.add(t.params,t.name);break;case tt:o.delete(t.name);break;case rt:o.update(t.params,t.name)}})),o},ut="effcss",ht=ut+"-provider",mt=ut+"-override",dt="values",gt=":host",pt="@media",bt="script",ft="style",$t="size",yt="time",vt="angle",xt="color",wt="contrast",kt="neutral",jt="easing",St=ut+"changes",_t="data-"+ut,At="prefers-color-scheme",Ot=`${At}: light`,zt=`${At}: dark`,Ct={mode:"a",pre:"f"},qt=e=>"boolean"==typeof e,Pt=(e,t)=>{const r=((e,t)=>e.getAttribute(t)||Ct[t])(e,t);return(e=>"string"==typeof e?Number(e):null)(r)},Nt=(e,t,r)=>null===r?e.removeAttribute(t):e.setAttribute(t,r+""),Et=e=>`:root:has([is=${ht}]${e?`[${e}]`:""})`,Tt=e=>Object.entries(e).reduce(((e,[t,r])=>e+t+":"+r+";"),""),Mt=({theme:e,attrs:t,scope:r})=>({bem:s,each:n,themeVar:i,merge:a,pseudo:{r:o},at:{media:l},units:{px:c}})=>{const u=t.size,h=t.time,m=t.angle,d=t.color,g=t.easing,p=t.contrast,b=t.neutral,{$dark:f={},$light:$={},...y}=e.vars();return a({[Et()]:{...y,...l.where(Ot)($),...l.where(zt)(f),[o()]:{fontSize:c(i("size"))}}},n(e.list,((t,r)=>{const{$dark:n={},$light:i={},...a}=e.vars(r),o={...a,...l.where(Ot)(i),...l.where(zt)(n)};return{[Et(`theme=${t}`)]:o,[s(`..theme.${t}`)]:o}})),u&&{[Et($t)]:{[r.varName($t)]:u}},h&&{[Et(yt)]:{[r.varName(yt)]:h}},m&&{[Et(vt)]:{[r.varName(vt)]:m}},d&&{[Et(xt)]:{[r.varName(xt)]:d}},g&&{[Et(jt)]:{[r.varName(jt)]:g}},p&&{[Et(wt)]:{[r.varName(wt)]:p}},b&&{[Et(kt)]:{[r.varName(kt)]:b}})},Rt=(e,t)=>({set(r){Nt(e,t,r)},get:()=>Pt(e,t)}),Bt=(e,t)=>({set(r){Nt(e,t,r)},get:()=>e.getAttribute(t)}),Wt=(e,{initStyles:t,emulate:r,onChange:s,globalMaker:n,noscript:i})=>{let a;e.textContent&&(a=JSON.parse(e.textContent)),Object.defineProperties(e,{pre:{get:()=>e.getAttribute("pre")||"f"},mode:{get:()=>e.getAttribute("mode")||"a"},min:{get:()=>""===e.getAttribute("min")},size:Rt(e,$t),time:Rt(e,yt),angle:Rt(e,vt),color:Bt(e,xt),easing:Bt(e,jt),contrast:Bt(e,wt),neutral:Bt(e,kt)});const o=Be({prefix:e.pre}),l=((e={})=>{const{mode:t,min:r,dict:s={}}=e,n=(e,r=t)=>{let s;s="a"===r?Ge:Ze;let i=0,a=Qe,o=Qe;const l=n.dict;l&&(l[e]||(l[e]={}),a=t=>l[e][t]??(l[e][t]=(i++).toString(36)),o=t=>l[e][t]);let c=t=>[e,...Je(t)?t.split("."):t].filter(Boolean).join("-"),u="class",h=t=>t?e+(t.startsWith("_")?"":"-")+t:void 0===t?void 0:e;"a"===r&&(u="data-"+e,h=Qe);const m=e=>"--"+c(Je(e)?e.split("."):e),d=e=>Ve({[u]:e},{toString:{value:()=>`${u}="${e}"`},$:{value:e}}),g=e=>{if(void 0===e)return function(e){const t=({b:r,e:s,m:n})=>({b:e=>t({b:e,e:"",m:{}}),e:e=>t({b:r,e:e,m:{}}),m:(e={})=>t({b:r,e:s,m:e}),get $(){return e({[r]:{[s]:n}})}});return t({b:"",e:"",m:{}})}(g);let t,r,s,n,i="";const a=Je(e);return i=a||Array.isArray(e)?[...(a?[e]:e).reduce(((e,i)=>([t,r,s,n]=He(i),e.add(h(o(Fe(t,r)))),s&&e.add(h(o(Fe(t,r,s,n)))),e)),new Set).values()].join(" "):e&&Ue(e,!0).map((([e,t,r,s])=>h(o(Fe(e,t,r,s))))).join(" "),d(i)};return g.list=(...e)=>{const t=[...e.reduce(((e,t)=>{const[r,s]=t.split(":");if(!r)return e;if(void 0===s)return e.add(r.replaceAll(".","-")),e;const n=r.split("."),i=n.pop(),a=n.join("-");return n.length?(e.add(a),e.add(a+`-${i}_${s}`)):e.add(`${i}_${s}`),e}),new Set).keys()].map((e=>h(o(e)))).join(" ");return d(t)},g.obj=(e,t)=>{let r=Ke;"full"===t&&(r=De);const s=[...r(e).values()].map((e=>h(o(e)))).join(" ");return d(s)},{select:t=>{const r=t.replaceAll(".","-").replace(":","_");return s(e,a(r))},selector:t=>{const[r,n,i,o]=He(t);return s(e,a(Fe(r,n,i,o)))},attr:g,name:c,varName:m,varExp:(e,t)=>`var(${m(e)}${void 0!==t?","+t:""})`}};return r&&(n.dict=s),n})({mode:e.mode,min:e.min,dict:a?.dict}),c=l(o.key()),u=Ne({scope:l,globalKey:o.key()}),h=Me({initStyles:t,emulate:r});e.theme=ct({provider:e,init:a?.theme,onChange:s,scope:c});const m=(({scope:e,collector:t,manager:r,processor:s,globalMaker:n})=>{const i=e=>"string"==typeof e?e:t.key(e),a=(r,s)=>e(r||t.key(),s).attr,o=(e,t,r)=>s.compile({key:t,maker:e,mode:r}),l=(e,s)=>{let n=t.use(e);return r&&!r.get(n)&&r.pack(n,r.hydrate(n)||o(e,n,s)),a(n,s)},c=(...e)=>0===e.length?[l(n)]:e.map((e=>l(e))),u=(e,t)=>{const r=l(e,"c");return Array.isArray(t)?r.list(...t).$:r.obj(t).$};u.join=(...e)=>e.reduce(((e,t)=>t?e?e+" "+t:t||"":e),"");const h=(e,t)=>{const r=l(e,"a");return Array.isArray(t)?r.list(...t):r.obj(t)};return h.join=(...e)=>e.reduce(((e,t)=>t?{...e,...t}:e),{}),{use:c,remake:(e,s)=>{let n=t.key(s||e);return r&&r.get(n)?(s&&t.remake(e,s),r.pack(n,r.hydrate(n)||o(e,n)),a(n)):c(e)[0]},css:o,cx:u,dx:h,status:e=>{const t=i(e);return!!t&&r.status(t)},on:(...e)=>r.on(...e.map(i)),off:(...e)=>r.off(...e.map(i)),stylesheets:(e=t.keys)=>e.map((e=>r.get(i(e))))}})({scope:l,processor:u,manager:h,collector:o,globalMaker:n});Object.defineProperties(e,{_c:{value:o},_s:{value:l},_p:{value:u},_m:{value:h},toString:{value:()=>{const t={...h.all()},r=Object.entries(t).filter((([e,t])=>!t.disabled)).map((([e,t])=>`<style ${_t}="${e}">${[...t.cssRules].map((e=>e.cssText)).join("")}</style>`)).join("");let s=ft,n="";const a={is:ht,min:e.getAttribute("min"),mode:e.getAttribute("mode"),size:e.getAttribute($t),time:e.getAttribute(yt),angle:e.getAttribute(vt),color:e.getAttribute(xt),easing:e.getAttribute(jt),contrast:e.getAttribute(wt),neutral:e.getAttribute(kt)};if(!i){s=bt,a.type="application/json";const t={theme:e.theme.actions,dict:l.dict};n=JSON.stringify(t)}return r+`<${s} ${Object.entries(a).map((([e,t])=>null!=t&&t!==Ct[e]?""===t?e:`${e}="${t}"`:"")).filter(Boolean).join(" ")}${e.theme.current?` theme="${e.theme.current}"`:""}>${n}</${s}>`}}}),Object.assign(e,m)},It=Symbol(ht),Vt=[$t,yt,vt,xt,jt,wt,kt],Jt=new Set(Vt),Lt=()=>globalThis?.document.querySelector(`[is=${ht}]`);const Ht=(e={})=>{let{noscript:t,attrs:r={}}=e,{mode:s=Ct.mode,min:n,pre:i=Ct.prefix,size:a=null,time:o=null,angle:l=null,color:c=null,easing:u=null,contrast:h=null,neutral:m=null}=r;return new class{get tagName(){return""}get textContent(){return""}attributes={size:a?a+"":null,time:o?o+"":null,angle:l?l+"":null,color:c||null,easing:u||null,contrast:h||null,neutral:m||null,pre:i,mode:s,min:n?"":null};getAttribute(e){const t=this.attributes[e];return null!=t?qt(t)?"":t+"":null}setAttribute(e,t){this.attributes[e]=t+"",Jt.has(e)&&this._customize()}removeAttribute(e){delete this.attributes[e]}theme;pre;mode;min;size;angle;time;color;easing;contrast;neutral;use;remake;css;cx;dx;get makers(){return this._c.makers}status;on;off;stylesheets;_c;_m;_s;_p;_;_n;_customize=()=>{const e=this.size,t=this.time,r=this.angle,s=this.color,n=this.easing,i=this.contrast,a=this.neutral,o=Mt({theme:this.theme,attrs:{size:e,time:t,angle:r,color:s,easing:n,contrast:i,neutral:a},scope:this._s(this._c.key())});this.remake(o,this._),this._=o};constructor(){Wt(this,{emulate:!0,onChange:this._customize,globalMaker:this._,noscript:t}),this._customize()}}},Dt=(e={})=>{const{emulate:t,global:r,...s}=e,n=globalThis?.document;let i;const a=globalThis[It];if(r&&a)i=a;else if(n&&!t){void 0===Dt.isDefined&&(Dt.isDefined=function(){const e=globalThis.document,t=globalThis.customElements;if(t?.get(ht))return!1;{class r extends HTMLScriptElement{static get observedAttributes(){return Vt}theme;pre;mode;min;size;angle;time;color;easing;contrast;neutral;use;remake;css;cx;dx;get makers(){return this._c.makers}status;on;off;stylesheets;_c;_m;_s;_p;_;_n;_customize=()=>{const e=this.size,t=this.time,r=this.angle,s=this.color,n=this.easing,i=this.contrast,a=this.neutral,o=Mt({theme:this.theme,attrs:{size:e,time:t,angle:r,color:s,easing:n,contrast:i,neutral:a},scope:this._s(this._c.key())});this.remake(o,this._),this._=o};attributeChangedCallback(){this.isConnected&&this._customize()}connectedCallback(){Wt(this,{initStyles:[...e.querySelectorAll(ft+`[${_t}]`)],onChange:this._customize,globalMaker:this._}),this._customize();const t=this;this._n={set adoptedStyleSheets(e){t.dispatchEvent(new CustomEvent(St,{detail:{styles:e},bubbles:!0}))}},this._m.register(this._n),this._m.register(e)}disconnectedCallback(){delete globalThis[It]}}t.define(ht,r,{extends:bt});class s extends HTMLElement{static get observedAttributes(){return[dt,...Vt]}_customize(){const e=Lt();if(this.shadowRoot&&e){const t=this.getAttribute(dt),r=new CSSStyleSheet,s=t?JSON.parse(decodeURIComponent(t)):{};Vt.forEach((e=>{const t=this.getAttribute(e);t&&(s[e]=t)}));const{$dark:n={},$light:i={},...a}=e.theme.makeThemeVars(s),o=Tt(i),l=Tt(n);r.replaceSync(gt+`{${"display:contents;"+Tt(a)}}`+gt+`([scheme=light]){color-scheme:light;${o}}`+gt+`([scheme=dark]){color-scheme:dark;${l}}`+pt+`(${Ot}){${gt}{${o}}}`+pt+`(${zt}){${gt}{${l}}}`),this.shadowRoot.adoptedStyleSheets=[r]}}attributeChangedCallback(){this.isConnected&&this._customize()}connectedCallback(){this.attachShadow({mode:"open"}).innerHTML="<slot></slot>",this._customize()}}return t.define(mt,s),!0}}());const e=Lt();if(e)i=e;else{const e=n.createElement(bt,{is:ht});e.setAttribute("is",ht);const t=s?.attrs;t&&Object.entries(t).map((([t,r])=>r&&Ct[t]!==r&&e.setAttribute(t,qt(r)?"":r+""))),n.head.appendChild(e),i=e}}else i=Ht(s);return r&&!a&&(globalThis[It]=i),i},Kt=e=>encodeURIComponent(JSON.stringify(e));export{Ct as DEFAULT_ATTRS,ht as TAG_NAME,mt as TAG_NAME_OVERRIDE,Kt as prepareOverrideValues,Dt as useStyleProvider};
+const e=(e,t,r)=>Object.entries(e).reduce(t,r),t=(e,t)=>{return`${r=e,r.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()))}:${""+t};`;var r},r=Symbol("noParse"),s=(n,i,a)=>{let o=""+n;return null==i?"":Array.isArray(i)?i.map((e=>t(o,e))).join(""):"object"!=typeof i||i.hasOwnProperty(r)?""===i?o+";":t(o,i):(!a||a.startsWith?.("@")||o.startsWith?.("&")||o.startsWith?.("@")?"":"&")+o+`{${e(i,((e,t)=>e+s(...t,o)),"")}}`},n="@layer",i="@starting-style",a=e=>`(${e})`,o=e=>"string"==typeof e,l={and:(...e)=>Object.defineProperties({type:"and",value:e},{toString:{value:()=>e.filter(Boolean).map((e=>{const t=p(e);return"object"==typeof e&&"or"===e.type?a(t):t})).join(" and ")}}),or:(...e)=>Object.defineProperties({type:"or",value:e},{toString:{value:()=>e.filter(Boolean).map((e=>p(e))).join(" or ")}}),not:e=>"object"==typeof e&&"not"===e.type?e.value[0]:Object.defineProperties({type:"not",value:[e]},{toString:{value:()=>`not (${p(e,!0)})`}})},c=e=>{const t=t=>({toString:()=>`(min-${e}:${o(t)?t:t+"rem"})`}),r=t=>({toString:()=>`(max-${e}:${o(t)?t:t+"rem"})`}),s=(e,s)=>({toString:()=>`${t(e)} and ${r(s)}`});return{up:t,down:r,between:s,only:e=>s(e,e)}},u=c("width"),h=c("height"),m=c("inline-size"),d=c("block-size"),p=(e,t)=>e?"string"==typeof e?e.includes("(")||t?e:a(e):e+"":"",g=(e={})=>{const{type:t,condition:r}=e,s=p(r),n="object"==typeof r&&"or"===r.type,i=`@media${t?" "+t:""}${t&&s?" and":""}${s?" "+(t&&n?a(s):s):""}`;return Object.defineProperties((e=>({[i]:e})),{all:{get:()=>g({condition:r,type:"all"})},print:{get:()=>g({condition:r,type:"print"})},screen:{get:()=>g({condition:r,type:"screen"})},where:{value:e=>g({condition:e,type:t})},toString:{value:()=>i}})},b=g({}),f=({condition:e}={})=>{const t=p(e),r="@supports"+(t?" "+t:"");return Object.defineProperties((e=>({[r]:e})),{where:{value:e=>f({condition:e})},toString:{value:()=>r}})},$=f(),y=e=>({[i]:e});y.toString=i;const v=e=>{const{root:t="",limit:r="",mode:s=[!1,!1]}=e,n=`@scope ${t?`(${t}${s[0]?" > *":""})`:""}${t&&r?" ":""}${r?`to (${r}${s[1]?" > *":""})`:""}`;return Object.defineProperties((e=>({[n]:e})),{limit:{value:e=>v({root:t,limit:e,mode:s})},root:{value:e=>v({root:e,limit:r,mode:s})},both:{value:()=>v({root:t,limit:r,mode:[!1,!0]})},none:{value:()=>v({root:t,limit:r,mode:[!0,!1]})},low:{value:()=>v({root:t,limit:r,mode:[!0,!0]})},high:{value:()=>v({root:t,limit:r,mode:[!1,!1]})},toString:{value:()=>n}})},x=v({}),w=(e,t)=>`calc(${e} * 1${t})`,j=e=>w(e,"px"),k=e=>w(e,"vh"),S=e=>w(e,"vw"),_=e=>w(e,"vmin"),A=e=>w(e,"vmax"),O=e=>w(e,"em"),z=e=>w(e,"rem"),C=e=>w(e,"deg"),P=e=>w(e,"rad"),q=e=>w(e,"rad"),E=e=>w(e,"ms"),N=e=>w(e,"s"),T=e=>w(e,"%"),R=e=>w(e,"cqw"),M=e=>w(e,"cqh"),B=e=>w(e,"cqi"),W=e=>w(e,"cqb"),I=e=>w(e,"cqmin"),V=e=>w(e,"cqmax"),J=Object.fromEntries,L=Object.entries,H=":first-",D=":last-",U=":only-",F="child",Z=":nth-",G="of-type",K=Z+F,Q=":focus",X="valid",Y="in"+X,ee=":user-",te="placeholder",re={r:":root",h:":hover",f:Q,fv:Q+"-visible",a:":active",v:":visited",val:":"+X,inv:":"+Y,uval:ee+X,uinv:ee+Y,e:":empty",d:":disabled",rq:":required",o:":optional",m:":modal",l:":link",phs:`:${te}-shown`,ch:":checked",po:":popover-open",fc:H+F,lc:D+F,oc:U+F,odd:K+"(odd)",even:K+"(even)",ft:H+G,lt:D+G,ot:U+G,bef:"::before",aft:"::after",ph:`::${te}`,bd:"::backdrop",fl:"::first-line",dc:"::details-content",sel:"::selection"},se={has:":has",not:":not",is:":is",wh:":where",st:":state",nthc:K,ntho:Z+G,dir:":dir",lang:":lang"},ne=e=>`oklch(${e})`,ie=e=>ne(`from ${e}`),ae=e=>t=>{if(!t)return e||"currentColor";const{l:r,c:s,h:n,a:i=1}=t;return ne(r&&s&&n?(e?`from ${e} `:"")+`${r} ${s} ${n} / ${i||(e?"alpha":1)}`:`from ${e||"currentColor"} ${r||"l"} ${s||"c"} ${n||"h"} / ${i||"alpha"}`)},oe=(e,t=.1)=>ie(`${e} calc(l + ${t}) c h / alpha`),le=(e,t=.1)=>ie(`${e} calc(l - ${t}) c h / alpha`),ce=(e,t=.1)=>ie(`${e} l c h / calc(alpha + ${t})`),ue=(e,t=.1)=>ie(`${e} l c h / calc(alpha - ${t})`),he=(e,t=.04)=>ie(`${e} l calc(c + ${t}) h / alpha`),me=(e,t=.04)=>ie(`${e} l calc(c - ${t}) h / alpha`),de=e=>ie(`${e} l c calc(h + 180) / alpha`),pe=e=>ie(`${e} l 0 h / alpha`),ge=(e,t=30)=>ie(`${e} l c calc(h${"number"==typeof t?t>0?" + "+t:" - "+-t:t}) / alpha`),be=e=>"string"==typeof e?ne(e):ae(e.from)(e),fe=e=>{const t=e("color"),r=e("contrast"),s=e("neutral");return{root:ae(t),contrast:ae(r),neutral:ae(s),oklch:be,lighten:oe,darken:le,saturate:he,desaturate:me,fadein:ce,fadeout:ue,spin:ge,complement:de,grayscale:pe}},$e=e=>{class t{state={l:"l",c:"base",h:"pri",a:"1",m:"bg"};constructor(e={}){Object.assign(this,{[r]:!0}),this.state=Object.assign(this.state,e)}get xs(){return new t({...this.state,l:"xs"})}get s(){return new t({...this.state,l:"s"})}get m(){return new t({...this.state,l:"m"})}get l(){return new t({...this.state,l:"l"})}get xl(){return new t({...this.state,l:"xl"})}get lightness(){return{xs:this.xs,s:this.s,m:this.m,l:this.l,xl:this.xl}}get gray(){return new t({...this.state,c:"gray"})}get pale(){return new t({...this.state,c:"pale"})}get base(){return new t({...this.state,c:"base"})}get rich(){return new t({...this.state,c:"rich"})}get chroma(){return{gray:this.gray,pale:this.pale,base:this.base,rich:this.rich}}get pri(){return new t({...this.state,h:"pri"})}get sec(){return new t({...this.state,h:"sec"})}get suc(){return new t({...this.state,h:"suc"})}get inf(){return new t({...this.state,h:"inf"})}get war(){return new t({...this.state,h:"war"})}get dan(){return new t({...this.state,h:"dan"})}get hue(){return{pri:this.pri,sec:this.sec,suc:this.suc,inf:this.inf,war:this.war,dan:this.dan}}alpha(e=1){return new t({...this.state,a:e+""})}get bg(){return new t({...this.state,m:"bg"})}get fg(){return new t({...this.state,m:"fg"})}toString(){const{l:t,c:r,h:s,a:n,m:i}=this.state;return`oklch(${e(`lightness.${i}.${t}`)} ${e(`chroma.${i}.${r}`)} ${e(`hue.${s}`)} / ${n})`}}return new t},ye=e=>{const t=(t,r=0)=>e(`coef.${t.state.center+r}`);class r{state={center:8};constructor(e={}){this.state=Object.assign(this.state,e)}get min(){return t(this,-4)}get xxs(){return t(this,-3)}get xs(){return t(this,-2)}get s(){return t(this,-1)}get m(){return t(this)}get l(){return t(this,1)}get xl(){return t(this,2)}get xxl(){return t(this,3)}get max(){return t(this,4)}get $xxs(){return new r({center:4})}get $xs(){return new r({center:8})}get $s(){return new r({center:12})}get $m(){return new r({center:16})}get $l(){return new r({center:20})}get $xl(){return new r({center:24})}get $xxl(){return new r({center:28})}get short(){return{s:this.s,m:this.m,l:this.l}}get base(){return{xs:this.xs,...this.short,xl:this.xl}}get long(){return{xxs:this.xxs,...this.base,xxl:this.xxl}}get full(){return{min:this.min,...this.long,max:this.max}}get main(){return{min:this.min,m:this.m,max:this.max}}get sparse(){return{min:this.min,xs:this.xs,m:this.m,xl:this.xl,max:this.max}}}return new r},ve=Object.assign,xe=Object.entries,we=Array.isArray,je=e=>"object"==typeof e,ke=(e,t)=>Array.from(Array(e).entries()).reduce(((e,[r])=>ve(e,t(r+1))),{}),Se=(e,t)=>xe(e).reduce(((e,[r,s])=>ve(e,t(r,s))),{}),_e=(e,t,r={})=>e?t:r,Ae=(...e)=>e.join("-"),Oe=(...e)=>e.join(),ze=(...e)=>e.join(" "),Ce=(e,...t)=>t.length?t.reduce(((e,t)=>(t&&e&&je(t)&&xe(t).forEach((([t,r])=>{r&&je(r)&&e[t]?we(e[t])&&we(r)?e[t]=[...e[t],...r]:Ce(e[t],r||{}):e[t]=r})),e)),e):e,Pe=(e,t,s="")=>{const n=(n=0)=>{const i=t(e),a=n?t(e+"-"+n,i):i;return Object.defineProperties(((e=1)=>`calc(${a} * ${e}${s})`),{toString:{value:()=>`calc(${a} * 1${s})`},[r]:{value:!0}})},i={get:(e,t,r)=>"symbol"==typeof t||Number.isNaN(+t)?Reflect.get(e,t,r):n(+t)};return new Proxy(n(),i)},qe=(e,t)=>{const s=(s=0)=>{const n=t(e),i=s?t(e+"-"+s,n):n;return Object.defineProperties({},{toString:{value:()=>i},[r]:{value:!0}})},n={get:(e,t,r)=>"symbol"==typeof t||Number.isNaN(+t)?Reflect.get(e,t,r):s(+t)};return new Proxy(s(),n)},Ee=Object.assign(J(L(re).map((([e,t])=>{function r(e=""){return e&&"object"==typeof e?{[t]:e}:e+t}return r.toString=()=>t,[e,r]}))),J(L(se).map((([e,t])=>{function r(e,r=""){const s=t+`(${e})`;return r&&"object"==typeof r?{[s]:r}:r+s}return r.toString=()=>t,[e,r]})))),Ne={px:j,vh:k,vw:S,vmin:_,vmax:A,em:O,rem:z,deg:C,rad:P,turn:q,ms:E,s:N,pc:T,cqw:R,cqh:M,cqb:W,cqi:B,cqmin:I,cqmax:V},Te=e=>1!==e?e+" * ":"",Re=t=>{const{scope:i,prefix:a}=t,o=i(a).varExp,c=(e=1)=>Ne.ms(Te(e)+o("time")),g=(e=1)=>Ne.deg(Te(e)+o("angle")),f=(e=1)=>Ne.px(Te(e)+o("size")),v=e=>e?`cubic-bezier(${e.x1||0},${e.y1||0},${e.x2||1},${e.y2||1})`:o("easing"),w={variable:o,tuning:o,time:Pe("time",o,"ms"),angle:Pe("angle",o,"deg"),size:Pe("size",o,"px"),space:Pe("space",o,"px"),easing:qe("easing",o),color:qe("color",o),contrast:qe("contrast",o),neutral:qe("neutral",o)};return{compile:({key:t,maker:a,mode:j})=>{const k=i(t,j);w.tuning=k.varExp;const S=k.selector,_=k.select,A=(e=>{const t={cp:1,lay:1,kf:1,cq:1},s=(n={})=>{const{scroll:i,type:a,name:o,condition:l}=n,c=p(l),u=`@container${o?" "+o:""}${c?" "+c:""}`;return Object.defineProperties((e=>({[u]:e})),{container:{value:(o||"none")+" / "+(a&&i?`${a} scroll-state`:i?"scroll-state":a||"normal"),enumerable:!0},named:{get:()=>s({scroll:i,condition:l,name:o||e.name(["cq",t.cq++]),type:a})},size:{get:()=>s({name:o,scroll:i,condition:l,type:"size"})},isize:{get:()=>s({name:o,scroll:i,condition:l,type:"inline-size"})},scroll:{get:()=>s({name:o,scroll:!0,condition:l,type:a})},where:{value:e=>s({name:o,scroll:i,condition:e,type:a})},[r]:{value:!0},toString:{value:()=>u}})},i=({name:r}={})=>{const s=`${n}${r?" "+r:""}`,a=e=>({[s]:e});return a.toString=()=>s,Object.defineProperties(a,{named:{get:()=>i({name:r||e.name(["lay",t.lay++])})},list:{value:(...e)=>({[n+(e.map((e=>(e+"").split(n)[1])).filter(Boolean).join(",")||r)]:""})}})};return{layer:i(),supports:$,keyframes:s=>{const n=e.name(["kf",t.kf++]),i="@keyframes "+n;return Object.defineProperties((e=>{if(!e)return{animationName:n};const{dur:t,tf:r,del:s,ic:i,dir:a,ps:o,fm:l}=e;return{animation:[t,r,s,i,a,o,l,n].filter(Boolean).join(" ")}}),{[i]:{value:s,enumerable:!0},toString:{value:()=>n},[r]:{value:!0}})},property:(s={})=>{let n,i,a='"*"',o=!0;"object"==typeof s?({syn:a=a,inh:o=o,ini:n,def:i}=s):(i=s,n=s,o=!1);const l="--"+e.name(["cp",t.cp++]),c=`var(${l}${void 0!==i?","+i:""})`,u="@property "+l;return Object.defineProperties((e=>({[l]:e})),{[u]:{value:{syntax:a,inherits:o,initialValue:n},enumerable:!0},toString:{value:()=>c},fallback:{value:e=>`var(${l},${e})`},[r]:{value:!0}})},scope:x,media:b,container:s({}),startingStyle:y,$logic:l,$width:u,$height:h,$block:d,$inline:m}})(k),O=a({dash:Ae,comma:Oe,space:ze,range:ke,each:Se,when:_e,merge:Ce,theme:w,themeVar:o,size:f,time:c,angle:g,easing:v,bem:S,select:_,pseudo:Ee,color:fe(o),palette:$e(o),coef:ye(o),units:Ne,at:A});return"string"==typeof O?O:(t=>e(t,((e,t)=>e+s(...t)),""))(O)}}},Me=Symbol("effcss-stylesheet");class Be{disabled=!1;cssRules=[];replaceSync(e){e&&(this.cssRules=[{cssText:e}])}}function We({initStyles:e,emulate:t}={}){const r={};e?.forEach((e=>{const t=e?.dataset?.effcss;t&&(r[t]=e)}));let s={},n={},i=[],a=[];const o=(e,t)=>t.hasOwnProperty(Me)?t:Object.defineProperties(t,{[Me]:{value:e}}),l=e=>e.adoptedStyleSheets=[...e.adoptedStyleSheets?.length?[...e.adoptedStyleSheets].filter((e=>!e.hasOwnProperty(Me))):[],...i],c=()=>{a=a.reduce(((e,t)=>{const r=t.deref();return r&&(l(r),e.push(t)),e}),[])},u=e=>e?s[e]:void 0,h=(e,t)=>{if(!s[e]){s[e]=o(e,t),i.push(s[e]);const n=r[e];return n&&(n.disabled=!0),c(),!0}};return{get:u,all:()=>s,add:h,status:e=>{const t=u(e);return!t?.disabled},on:(...e)=>{e.forEach((e=>{const t=u(e);t&&(t.disabled=!1)})),c()},off:(...e)=>{e.forEach((e=>{const t=u(e);t&&(t.disabled=!0)})),c()},remove:e=>{const t=u(e);if(!t)return;const r=(a=t,i.findIndex((e=>e===a)));var a;return r>-1&&(i.splice(r,1),delete s[e],delete n[e]),c(),!0},removeAll:()=>(i.splice(0),s={},n={},c(),!0),pack:(e,r)=>{let n=s[e]||(!t&&globalThis.CSSStyleSheet?new globalThis.CSSStyleSheet:new Be);return n.replaceSync(r),n=o(e,n),!!n.cssRules.length&&h(e,n)},register:e=>{a.findIndex((t=>t.deref()===e))>=0||(a.push(new WeakRef(e)),l(e))},unregister:e=>{const t=a.findIndex((t=>t.deref()===e));t>=0&&a.splice(t,1)},hydrate:e=>r[e]&&!r[e].disabled&&r[e].textContent||void 0}}const Ie=({prefix:e})=>{let t=0;return{get initial(){return e},get current(){return e+(t||"")},next(){return t++,this.current}}},Ve=({prefix:e})=>{const t=new Set,r=new Map,s=Ie({prefix:e});return{use(e){let n=this.key(e);return n||(n=s.current,t.add(n),r.set(e,n),s.next(),n)},remake(e,t){const s=r.get(t);return s?(r.delete(t),r.set(e,s),s):this.use(e)},key:e=>e?r.get(e)||"":s.initial,get keys(){return[...t]},get makers(){return Object.fromEntries(r.entries().map((([e,t])=>[t,e])))}}},Je=void 0,Le=Object.entries,He=Object.defineProperties,De=e=>"string"==typeof e,Ue=e=>null!==e&&"object"==typeof e,Fe=e=>e.split("."),Ze=(e,t="")=>Le(e).reduce(((e,[r,s])=>{const n=t?`${t}-${r}`:r;return"object"==typeof s?(e.add(n),e=e.union(Ze(s,n))):e.add(n+`_${s}`),e}),new Set),Ge=(e,t="")=>Le(e).reduce(((e,[r,s])=>{const n=t?`${t}-${r}`:r;if("object"==typeof s){const t=Ge(s,n);t.size||e.add(n),e=e.union(t)}else t&&e.add(t),e.add(n+`_${s}`);return e}),new Set),Ke=(e,t)=>Le(e).reduce(((e,[r,s])=>{if(Ue(s)){const n=Le(s);n.length?e.push(...n.reduce(((e,[s,n])=>{if((e=>null!==e&&e!==Je)(s)&&t&&e.push([r,s,Je,Je]),Ue(n)){const t=Le(n);t.length&&e.push(...t.reduce(((e,[t,n])=>{const i=typeof n;return"string"!==i&&"number"!==i||e.push([r,s,t,n]),e}),[]))}return e}),[])):e.push([r,Je,Je,Je])}return e}),[]),Qe=(e,t,r,s)=>""+(((e,t)=>`${e||""}${t?"__"+t:""}`)(e,t)+(r?"_"+r:"")+(r&&s?"_"+s:""))||"_",Xe=(e,t)=>"."+(t?e+(t.startsWith("_")?"":"-")+t:e),Ye=(e,t)=>`[data-${e}${t?`~="${t}"`:""}]`;const et=e=>e||"",tt=Object.assign,rt=Object.entries,st="theme",nt="delete",it="update",at="$light",ot="$dark",lt="lightness",ct="chroma",ut=e=>Number((.1*184+.9*e).toFixed(2)),ht={time:200,size:16,space:12,angle:30,color:"#2192a7",contrast:"light-dark(black, white)",neutral:"light-dark(white, #1b1f1f)",easing:"linear",coef:{0:0,1:.0625,2:.125,3:.25,4:.5,5:.75,6:.875,7:.9375,8:1,9:1.0625,10:1.125,11:1.25,12:1.5,13:1.75,14:1.875,15:1.9375,16:2,17:3,18:4,19:5,20:7.5,21:10,22:12,23:15,24:16,25:20,26:28,27:36,28:48,29:64,30:80,31:120,32:150},hue:{pri:184,sec:290,suc:ut(142),inf:ut(264),war:ut(109),dan:ut(29)},[at]:{[lt]:{bg:{xl:1,l:.94,m:.88,s:.83,xs:.78},fg:{xl:0,l:.12,m:.24,s:.36,xs:.48}},[ct]:{bg:{gray:0,pale:.01,base:.04,rich:.7},fg:{gray:0,pale:.07,base:.11,rich:.15}}},[ot]:{[lt]:{bg:{xl:.24,l:.3,m:.36,s:.42,xs:.48},fg:{xl:1,l:.93,m:.86,s:.79,xs:.72}},[ct]:{bg:{pale:.02,base:.06,rich:.1},fg:{pale:.06,base:.1,rich:.14}}}},mt=({provider:e,init:t,scope:r,onChange:s})=>{const n={"":ht},i=[],a=({$light:e={},$dark:t={},...s})=>{function n(e,t=[]){return rt(e).reduce(((e,[s,i])=>Array.isArray(i)?(i.forEach(((n,i)=>{e[r.varName([...t,s,i])]=n})),e):i&&"object"==typeof i?tt(e,n(i,s?[...t,s]:t)):(e[r.varName([...t,s])]=i,e)),{})}return{...n(s),[at]:n(e),[ot]:n(t)}},o={get:(e="")=>n[e],add(e,t){n[t]||(n[t]=Ce({[at]:{},[ot]:{}},e),i.push({type:"add",payload:{params:e,name:t}}),s?.())},delete(e){e&&n[e]&&(this.current===e&&this.switch(),delete n[e],i.push({type:nt,payload:{name:e}}),s?.())},update(e,t=""){const r=n[t];if(r){let a;a="function"==typeof e?e(r):e,n[t]=Ce({[at]:{},[ot]:{}},r,a),i.push({type:it,payload:{params:e,name:t}}),s?.()}},switch(t=""){n[t]&&e.setAttribute(st,t)},vars(e=""){const t=this.get(e);return t?a(t):{[at]:{},[ot]:{}}},makeThemeVars:a,get list(){const{"":e,...t}=n;return Object.keys(t)},get current(){return e.getAttribute(st)||""},get all(){return n},get actions(){return i}};return t?.forEach((({type:e,payload:t})=>{switch(e){case"add":o.add(t.params,t.name);break;case nt:o.delete(t.name);break;case it:o.update(t.params,t.name)}})),o},dt="effcss",pt=dt+"-provider",gt=dt+"-override",bt="values",ft=":host",$t="@media",yt="script",vt="style",xt="size",wt="space",jt="time",kt="angle",St="color",_t="contrast",At="neutral",Ot="easing",zt=dt+"changes",Ct="data-"+dt,Pt="prefers-color-scheme",qt=`${Pt}: light`,Et=`${Pt}: dark`,Nt={mode:"a",pre:"f"},Tt=";",Rt=e=>"boolean"==typeof e,Mt=e=>"string"==typeof e?Number(e):null,Bt=(e,t)=>{const r=((e,t)=>e.getAttribute(t)||Nt[t])(e,t);if(!r)return Mt(r);const s=r.split(Tt);return s.length>1?s.map(Mt):Mt(r)},Wt=(e,t,r)=>null===r?e.removeAttribute(t):e.setAttribute(t,Array.isArray(r)?r.join(Tt):r+""),It=e=>`:root:has([is=${pt}]${e?`[${e}]`:""})`,Vt=e=>Object.entries(e).reduce(((e,[t,r])=>e+t+":"+r+";"),""),Jt=(e,t)=>e+(+t?"-"+t:""),Lt=({theme:e,attrs:t,scope:r})=>({bem:s,each:n,themeVar:i,merge:a,pseudo:{r:o},at:{media:l},units:{px:c}})=>{const{$dark:u={},$light:h={},...m}=e.vars();return a({[It()]:{...m,...l.where(qt)(h),...l.where(Et)(u),[o()]:{fontSize:c(i("size"))}}},n(e.list,((t,r)=>{const{$dark:n={},$light:i={},...a}=e.vars(r),o={...a,...l.where(qt)(i),...l.where(Et)(n)};return{[It(`theme=${t}`)]:o,[s(`..theme.${t}`)]:o}})),...Object.entries(t).map((([e,t])=>t&&{[It(e)]:n(Array.isArray(t)?t:[t],((t,s)=>({[r.varName(Jt(e,+t))]:s})))})))},Ht=(e,t)=>({set(r){Wt(e,t,r)},get:()=>Bt(e,t)}),Dt=(e,t)=>({set(r){Wt(e,t,r)},get(){const r=e.getAttribute(t);if(!r)return r;const s=r.split(Tt);return s.length>1?s:r}}),Ut=(e,{initStyles:t,emulate:r,onChange:s,globalMaker:n,noscript:i})=>{let a;e.textContent&&(a=JSON.parse(e.textContent)),Object.defineProperties(e,{pre:{get:()=>e.getAttribute("pre")||"f"},mode:{get:()=>e.getAttribute("mode")||"a"},min:{get:()=>""===e.getAttribute("min")},size:Ht(e,xt),space:Ht(e,wt),time:Ht(e,jt),angle:Ht(e,kt),color:Dt(e,St),easing:Dt(e,Ot),contrast:Dt(e,_t),neutral:Dt(e,At)});const o=e.pre,l=Ve({prefix:o}),c=((e={})=>{const{mode:t,min:r,dict:s={}}=e,n=(e,r=t)=>{let s;s="a"===r?Ye:Xe;let i=0,a=et,o=et;const l=n.dict;l&&(l[e]||(l[e]={}),a=t=>l[e][t]??(l[e][t]=(i++).toString(36)),o=t=>l[e][t]);let c=t=>[e,...De(t)?t.split("."):t].filter(Boolean).join("-"),u="class",h=t=>t?e+(t.startsWith("_")?"":"-")+t:void 0===t?void 0:e;"a"===r&&(u="data-"+e,h=et);const m=e=>"--"+c(De(e)?e.split("."):e),d=e=>He({[u]:e},{toString:{value:()=>`${u}="${e}"`},$:{value:e}}),p=e=>{if(void 0===e)return function(e){const t=({b:r,e:s,m:n})=>({b:e=>t({b:e,e:"",m:{}}),e:e=>t({b:r,e:e,m:{}}),m:(e={})=>t({b:r,e:s,m:e}),get $(){return e({[r]:{[s]:n}})}});return t({b:"",e:"",m:{}})}(p);let t,r,s,n,i="";const a=De(e);return i=a||Array.isArray(e)?[...(a?[e]:e).reduce(((e,i)=>([t,r,s,n]=Fe(i),e.add(h(o(Qe(t,r)))),s&&e.add(h(o(Qe(t,r,s,n)))),e)),new Set).values()].join(" "):e&&Ke(e,!0).map((([e,t,r,s])=>h(o(Qe(e,t,r,s))))).join(" "),d(i)};return p.list=(...e)=>{const t=[...e.reduce(((e,t)=>{const[r,s]=t.split(":");if(!r)return e;if(void 0===s)return e.add(r.replaceAll(".","-")),e;const n=r.split("."),i=n.pop(),a=n.join("-");return n.length?(e.add(a),e.add(a+`-${i}_${s}`)):e.add(`${i}_${s}`),e}),new Set).keys()].map((e=>h(o(e)))).join(" ");return d(t)},p.obj=(e,t)=>{let r=Ge;"full"===t&&(r=Ze);const s=[...r(e).values()].map((e=>h(o(e)))).join(" ");return d(s)},{select:t=>{const r=t.replaceAll(".","-").replace(":","_");return s(e,a(r))},selector:t=>{const[r,n,i,o]=Fe(t);return s(e,a(Qe(r,n,i,o)))},attr:p,name:c,varName:m,varExp:(e,t)=>`var(${m(e)}${void 0!==t?","+t:""})`}};return r&&(n.dict=s),n})({mode:e.mode,min:e.min,dict:a?.dict}),u=c(l.key()),h=Re({scope:c,prefix:o}),m=We({initStyles:t,emulate:r});e.theme=mt({provider:e,init:a?.theme,onChange:s,scope:u});const d=(({scope:e,collector:t,manager:r,processor:s,globalMaker:n})=>{const i=e=>"string"==typeof e?e:t.key(e),a=(r,s)=>e(r||t.key(),s).attr,o=(e,t,r)=>s.compile({key:t,maker:e,mode:r}),l=(e,s)=>{let n=t.use(e);return r&&!r.get(n)&&r.pack(n,r.hydrate(n)||o(e,n,s)),a(n,s)},c=(...e)=>0===e.length?[l(n)]:e.map((e=>l(e))),u=(e,t)=>{const r=l(e,"c");return Array.isArray(t)?r.list(...t).$:r.obj(t).$};u.join=(...e)=>e.reduce(((e,t)=>t?e?e+" "+t:t||"":e),"");const h=(e,t)=>{const r=l(e,"a");return Array.isArray(t)?r.list(...t):r.obj(t)};return h.join=(...e)=>e.reduce(((e,t)=>t?{...e,...t}:e),{}),{use:c,remake:(e,s)=>{let n=t.key(s||e);return r&&r.get(n)?(s&&t.remake(e,s),r.pack(n,r.hydrate(n)||o(e,n)),a(n)):c(e)[0]},css:o,cx:u,dx:h,tune:(r,s)=>{const n=t.key(s);let i={};if(n){const a=e(n);function o(e,t){"object"!=typeof t?i[a.varName(e)]=t:Object.entries(t).map((([t,r])=>{o(t&&e?e+"-"+t:e||t,r)}))}o("",r)}return i},status:e=>{const t=i(e);return!!t&&r.status(t)},on:(...e)=>r.on(...e.map(i)),off:(...e)=>r.off(...e.map(i)),stylesheets:(e=t.keys)=>e.map((e=>r.get(i(e))))}})({scope:c,processor:h,manager:m,collector:l,globalMaker:n});Object.defineProperties(e,{_c:{value:l},_s:{value:c},_p:{value:h},_m:{value:m},toString:{value:()=>{const t={...m.all()},r=Object.entries(t).filter((([e,t])=>!t.disabled)).map((([e,t])=>`<style ${Ct}="${e}">${[...t.cssRules].map((e=>e.cssText)).join("")}</style>`)).join("");let s=vt,n="";const a={is:pt,min:e.getAttribute("min"),mode:e.getAttribute("mode"),size:e.getAttribute(xt),space:e.getAttribute(wt),time:e.getAttribute(jt),angle:e.getAttribute(kt),color:e.getAttribute(St),easing:e.getAttribute(Ot),contrast:e.getAttribute(_t),neutral:e.getAttribute(At)};if(!i){s=yt,a.type="application/json";const t={theme:e.theme.actions,dict:c.dict};n=JSON.stringify(t)}return r+`<${s} ${Object.entries(a).map((([e,t])=>null!=t&&t!==Nt[e]?""===t?e:`${e}="${t}"`:"")).filter(Boolean).join(" ")}${e.theme.current?` theme="${e.theme.current}"`:""}>${n}</${s}>`}}}),Object.assign(e,d)},Ft=Symbol(pt),Zt=[xt,wt,jt,kt,St,Ot,_t,At],Gt=new Set(Zt),Kt=()=>globalThis?.document.querySelector(`[is=${pt}]`);const Qt=(e={})=>{let{noscript:t,attrs:r={}}=e,{mode:s=Nt.mode,min:n,pre:i=Nt.prefix,size:a=null,space:o=null,time:l=null,angle:c=null,easing:u=null,color:h=null,contrast:m=null,neutral:d=null}=r;return new class{get tagName(){return""}get textContent(){return""}attributes={size:a?a+"":null,space:o?o+"":null,time:l?l+"":null,angle:c?c+"":null,color:h||null,easing:u||null,contrast:m||null,neutral:d||null,pre:i,mode:s,min:n?"":null};getAttribute(e){const t=this.attributes[e];return null!=t?Rt(t)?"":t+"":null}setAttribute(e,t){this.attributes[e]=t+"",Gt.has(e)&&this._customize()}removeAttribute(e){delete this.attributes[e]}theme;pre;mode;min;size;space;angle;time;color;easing;contrast;neutral;use;remake;css;cx;dx;tune;get makers(){return this._c.makers}status;on;off;stylesheets;_c;_m;_s;_p;_;_n;_customize=()=>{const e=this.size,t=this.space,r=this.time,s=this.angle,n=this.color,i=this.easing,a=this.contrast,o=this.neutral,l=Lt({theme:this.theme,attrs:{size:e,space:t,time:r,angle:s,color:n,easing:i,contrast:a,neutral:o},scope:this._s(this._c.key())});this.remake(l,this._),this._=l};constructor(){Ut(this,{emulate:!0,onChange:this._customize,globalMaker:this._,noscript:t}),this._customize()}}},Xt=(e={})=>{const{emulate:t,global:r,...s}=e,n=globalThis?.document;let i;const a=globalThis[Ft];if(r&&a)i=a;else if(n&&!t){void 0===Xt.isDefined&&(Xt.isDefined=function(){const e=globalThis.document,t=globalThis.customElements;if(t?.get(pt))return!1;{class r extends HTMLScriptElement{static get observedAttributes(){return Zt}theme;pre;mode;min;size;space;angle;time;color;easing;contrast;neutral;use;remake;css;cx;dx;tune;get makers(){return this._c.makers}status;on;off;stylesheets;_c;_m;_s;_p;_;_n;_customize=()=>{const e=this.size,t=this.space,r=this.time,s=this.angle,n=this.color,i=this.easing,a=this.contrast,o=this.neutral,l=Lt({theme:this.theme,attrs:{size:e,space:t,time:r,angle:s,color:n,easing:i,contrast:a,neutral:o},scope:this._s(this._c.key())});this.remake(l,this._),this._=l};attributeChangedCallback(){this.isConnected&&this._customize()}connectedCallback(){Ut(this,{initStyles:[...e.querySelectorAll(vt+`[${Ct}]`)],onChange:this._customize,globalMaker:this._}),this._customize();const t=this;this._n={set adoptedStyleSheets(e){t.dispatchEvent(new CustomEvent(zt,{detail:{styles:e},bubbles:!0}))}},this._m.register(this._n),this._m.register(e)}disconnectedCallback(){delete globalThis[Ft]}}t.define(pt,r,{extends:yt});class s extends HTMLElement{static get observedAttributes(){return[bt,...Zt]}_customize(){const e=Kt();if(this.shadowRoot&&e){const t=this.getAttribute(bt),r=new CSSStyleSheet,s=t?JSON.parse(decodeURIComponent(t)):{};Zt.forEach((e=>{const t=this.getAttribute(e);t&&t.split(Tt).forEach(((t,r)=>{s[Jt(e,r)]=t}))}));const{$dark:n={},$light:i={},...a}=e.theme.makeThemeVars(s),o=Vt(i),l=Vt(n);r.replaceSync(ft+`{${"display:contents;"+Vt(a)}}`+ft+`([scheme=light]){color-scheme:light;${o}}`+ft+`([scheme=dark]){color-scheme:dark;${l}}`+$t+`(${qt}){${ft}{${o}}}`+$t+`(${Et}){${ft}{${l}}}`),this.shadowRoot.adoptedStyleSheets=[r]}}attributeChangedCallback(){this.isConnected&&this._customize()}connectedCallback(){this.attachShadow({mode:"open"}).innerHTML="<slot></slot>",this._customize()}}return t.define(gt,s),!0}}());const e=Kt();if(e)i=e;else{const e=n.createElement(yt,{is:pt});e.setAttribute("is",pt);const t=s?.attrs;t&&Object.entries(t).map((([t,r])=>r&&Nt[t]!==r&&e.setAttribute(t,Rt(r)?"":r+""))),n.head.appendChild(e),i=e}}else i=Qt(s);return r&&!a&&(globalThis[Ft]=i),i},Yt=e=>encodeURIComponent(JSON.stringify(e));export{Nt as DEFAULT_ATTRS,pt as TAG_NAME,gt as TAG_NAME_OVERRIDE,Yt as prepareOverrideValues,Xt as useStyleProvider};

package/dist/types/_provider/_process/color.d.ts

@@ -17,28 +17,39 @@ type TOKLCH = {
      */
     a?: string | number;
 };
-type TChangeStr = (val: string) => string;
+type TOKLCHFrom = TOKLCH & {
+    /**
+     * Origin color
+     */
+    from?: string;
+};
 type TChangeColor = (color: string | object, val?: number | string) => string;
 export declare const resolveColor: (varExp: ReturnType<ReturnType<TCreateScope>>["varExp"]) => {
     /**
      * Theme root color
      * @param params - oklch params
+     * @deprecated
+     * Will be deleted in the next major version. Use `theme.color` utility instead
      */
     root: (params?: TOKLCH) => string;
     /**
      * Theme contrast color
      * @param params - oklch params
+     * @deprecated
+     * Will be deleted in the next major version. Use `theme.contrast` utility instead
      */
     contrast: (params?: TOKLCH) => string;
     /**
      * Theme neutral color
      * @param params - oklch params
+     * @deprecated
+     * Will be deleted in the next major version. Use `theme.neutral` utility instead
      */
     neutral: (params?: TOKLCH) => string;
     /**
      * oklch()
      */
-    oklch: TChangeStr;
+    oklch: (params: TOKLCHFrom | string) => string;
     /**
      * Increase color lightness
      */

package/dist/types/_provider/_process/vars.d.ts

@@ -0,0 +1,8 @@
+type TScalableVariable = (coef?: number | string | object) => string;
+type TProxyVariable = {
+    [index: number]: TScalableVariable;
+};
+type TProxyScalableVariable = TProxyVariable & TScalableVariable;
+export declare const scalableVariable: (name: string, resolver: (val: string, fallback?: string | number) => string, unit?: string | object) => TProxyScalableVariable;
+export declare const simpleVariable: (name: string, resolver: (val: string, fallback?: string | number) => string) => TProxyVariable;
+export {};

package/dist/types/_provider/process.d.ts

@@ -6,6 +6,7 @@ import { resolveColor } from './_process/color';
 import { resolvePalette } from './_process/palette';
 import { resolveCoef } from './_process/coef';
 import { dash, comma, space, range, each, when, merge } from './utils';
+import { scalableVariable, simpleVariable } from './_process/vars';
 type TScope = ReturnType<ReturnType<TCreateScope>>;
 type TBezier = {
     x1?: number;
@@ -14,6 +15,8 @@ type TBezier = {
     y2?: number;
 };
 type TRelative = (coef?: number | string | object) => string;
+type TProxyNumVar = ReturnType<typeof scalableVariable>;
+type TProxyStrVar = ReturnType<typeof simpleVariable>;
 export interface IMakerParams {
     dash: typeof dash;
     comma: typeof comma;
@@ -60,24 +63,83 @@ export interface IMakerParams {
      * Resolve theme variable
      * @param name - name
      * @param fallback - fallback value
+     * @deprecated
+     * Will be deleted in the next major version. Use `theme.variable` utility instead
      */
     themeVar: TScope['varExp'];
     /**
      * Scalable size value
+     * @deprecated
+     * Will be deleted in the next major version. Use `theme.size` utility instead
      */
     size: TRelative;
     /**
      * Scalable time value
+     * @deprecated
+     * Will be deleted in the next major version. Use `theme.time` utility instead
      */
     time: TRelative;
     /**
      * Scalable angle value
+     * @deprecated
+     * Will be deleted in the next major version. Use `theme.angle` utility instead
      */
     angle: TRelative;
     /**
      * Easing function
+     * @deprecated
+     * Will be deleted in the next major version. Use `theme.easing` utility instead
      */
     easing: (bezier?: TBezier) => string;
+    /**
+     * Theme utils
+     */
+    theme: {
+        /**
+         * Resolve theme variable
+         * @param name - name
+         * @param fallback - fallback value
+         */
+        variable: TScope['varExp'];
+        /**
+         * Get tuning value
+         * @param name - name
+         * @param fallback - fallback value
+         */
+        tuning: TScope['varExp'];
+        /**
+         * Size variable
+         */
+        size: TProxyNumVar;
+        /**
+         * Space variable
+         */
+        space: TProxyNumVar;
+        /**
+         * Time variable
+         */
+        time: TProxyNumVar;
+        /**
+         * Angle variable
+         */
+        angle: TProxyNumVar;
+        /**
+         * Easing function variable
+         */
+        easing: TProxyStrVar;
+        /**
+         * Base color variable
+         */
+        color: TProxyStrVar;
+        /**
+         * Contrast color variable
+         */
+        contrast: TProxyStrVar;
+        /**
+         * Neutral color variable
+         */
+        neutral: TProxyStrVar;
+    };
 }
 export type TProcessor = {
     /**
@@ -92,7 +154,7 @@ export type TProcessor = {
 };
 type TCreateProcessor = (params: {
     scope: ReturnType<TCreateScope>;
-    globalKey: string;
+    prefix: string;
 }) => TProcessor;
 /**
  * Create style processor

package/dist/types/_provider/scope.d.ts

@@ -1,7 +1,7 @@
 type Paths<T> = T extends object ? {
     [K in keyof T]: `${Exclude<K, symbol>}${'' | Paths<T[K]> extends '' ? '' : `.${Paths<T[K]>}`}`;
 }[keyof T] : T extends string ? T : never;
-type TDeepPartial<T> = T extends object ? {
+export type TDeepPartial<T> = T extends object ? {
     [P in keyof T]?: TDeepPartial<T[P]>;
 } : T;
 type TBlocks<T> = Exclude<keyof T, symbol | number>;
@@ -112,7 +112,7 @@ export type TScope = {
     /**
      * Var expression
      */
-    varExp: <T extends Record<string, object | number | string | boolean> = TDefaultTheme>(name: TLeaves<T>, fallback?: string | number) => string;
+    varExp: <T extends Record<string, object | number | string | boolean>>(name: TLeaves<T>, fallback?: string | number) => string;
 };
 /**
  * Style scope resolver

package/dist/types/_provider/theme.d.ts

@@ -22,13 +22,13 @@ type TThemeAction = {
     };
 };
 export type TThemeValue = {
-    [key in (string | number)]: string | number | boolean | TThemeValue;
+    [key in (string | number)]: string | number | boolean | (string | number)[] | TThemeValue;
 };
 export type TThemeController = {
     get(name?: string): TThemeValue;
     add(params: TThemeValue, name: string): void;
     delete(name: string): void;
-    update(params: TThemeValue, name?: string): void;
+    update(params: TThemeValue | ((prev: object) => object), name?: string): void;
     switch(name?: string): void;
     vars<T extends object = object>(theme?: string): TThemeParams<T>;
     makeThemeVars<T extends object>(params: TThemeParams<T>): TThemeValue;

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import type { TProcessor } from './_provider/process';
 import type { TCollector } from './_provider/collect';
+import type { TDeepPartial } from './_provider/scope';
 import type { TDetails, TScopeResolver, TStyles } from './_provider/scope';
 import type { TThemeController } from './_provider/theme';
 export type { TShortRange, TMainRange, TBaseRange, TLongRange, TFullRange, TSparseRange } from './_provider/_process/coef';
@@ -13,6 +14,10 @@ type TAttrs = {
      * Root font size in px
      */
     size: number;
+    /**
+     * Root space variable in px
+     */
+    space: number;
     /**
      * Root time in ms
      */
@@ -101,8 +106,8 @@ export type TMonoElement<TStyle extends object> = {
  * Style target
  */
 type TStyleTarget = string | TStyleSheetMaker;
-type TNumberOrNull = number | null;
-type TStringOrNull = string | null;
+type TNumberAttr = number[] | number | null;
+type TStringAttr = string[] | string | null;
 /**
  * Classname expression
  */
@@ -168,66 +173,75 @@ export interface IStyleProvider {
     /**
      * Get root size value
      */
-    get size(): TNumberOrNull;
+    get size(): TNumberAttr;
     /**
      * Set root size value
-     * @param val - rem value in px
+     * @param val - variable value in px
      */
-    set size(val: TNumberOrNull);
+    set size(val: TNumberAttr);
+    /**
+     * Get root space value
+     */
+    get space(): TNumberAttr;
+    /**
+     * Set root space value
+     * @param val - variable value in px
+     */
+    set space(val: TNumberAttr);
     /**
      * Get root time value
      */
-    get time(): TNumberOrNull;
+    get time(): TNumberAttr;
     /**
      * Set root time value
      * @param val - time value in ms
      */
-    set time(val: TNumberOrNull);
+    set time(val: TNumberAttr);
     /**
      * Get root angle value
      */
-    get angle(): TNumberOrNull;
+    get angle(): TNumberAttr;
     /**
      * Set root angle value
      * @param val - angle value in ms
      */
-    set angle(val: TNumberOrNull);
+    set angle(val: TNumberAttr);
     /**
      * Get brand color value
      */
-    get color(): TStringOrNull;
+    get color(): TStringAttr;
     /**
      * Set brand color value
      * @param val - color string
      */
-    set color(val: TStringOrNull);
+    set color(val: TStringAttr);
     /**
      * Get neutral color value
      */
-    get neutral(): TStringOrNull;
+    get neutral(): TStringAttr;
     /**
      * Set neutral color value
      * @param val - color string
      */
-    set neutral(val: TStringOrNull);
+    set neutral(val: TStringAttr);
     /**
      * Get contrast color value
      */
-    get contrast(): TStringOrNull;
+    get contrast(): TStringAttr;
     /**
      * Set contrast color value
      * @param val - color string
      */
-    set contrast(val: TStringOrNull);
+    set contrast(val: TStringAttr);
     /**
      * Get root easing function
      */
-    get easing(): TStringOrNull;
+    get easing(): TStringAttr;
     /**
      * Set root easing function
      * @param val - easing function
      */
-    set easing(val: TStringOrNull);
+    set easing(val: TStringAttr);
     /**
      * Use stylesheet makers
      * @param makers - stylesheet makers
@@ -253,6 +267,12 @@ export interface IStyleProvider {
      * Data attributes expression resolver
      */
     dx: DX;
+    /**
+     * Tune stylesheet
+     * @param maker - stylesheet maker
+     * @param tunings - tunings object
+     */
+    tune<T extends object>(tunings: TDeepPartial<T>, maker?: TStyleSheetMaker): object;
     /**
      * Is stylesheet on
      * @param key - stylesheet key

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "effcss",
-    "version": "4.11.0",
+    "version": "4.13.0",
     "description": "Self-confident CSS-in-JS",
     "type": "module",
     "scripts": {