diff --git a/docs/scripts/ui.js b/docs/scripts/ui.js
index 17a9919..b2590db 100644
--- a/docs/scripts/ui.js
+++ b/docs/scripts/ui.js
@@ -1,4 +1,4 @@
-(()=>{var x=new CSSStyleSheet,X=()=>x.replaceSync(`/* 
+(()=>{var H=new CSSStyleSheet,ce=()=>H.replaceSync(`/* 
 <div class="accordion accordion--dark">
     <div class="accordion__item">
       <input type="radio" name="accordion-group" id="ag1" hidden="" class="accordion__input">
@@ -123,7 +123,7 @@
     }
   }
 }
-`);var S=new CSSStyleSheet,ee=()=>S.replaceSync(`/* 
+`);var z=new CSSStyleSheet,se=()=>z.replaceSync(`/* 
 <label class="alert alert--[MODIFIERS]">
   <input type="checkbox" class="alert__toggle" />
   <div class="alert__close">\uFF0B</div>
@@ -390,7 +390,7 @@
     padding: 0;
   }
 }
-`);var _=new CSSStyleSheet,oe=()=>_.replaceSync(`/* 
+`);var M=new CSSStyleSheet,be=()=>M.replaceSync(`/* 
 Usage:
 <span class="badge badge-[MODIFIER]">Basic</badge>
 */
@@ -488,7 +488,124 @@ Usage:
   vertical-align: middle;
   width: max-content;
 }
-`);var T=new CSSStyleSheet,re=()=>T.replaceSync("");var te=new Map,me=new MutationObserver(e=>{e.forEach(o=>{if(o.addedNodes.length>0&&o.type==="childList"){for(let t of o.addedNodes)if(t instanceof Element)for(let[r,[n,a]]of te.entries()){let i=t.querySelectorAll(r);for(let l of i)O(l,n,a)}}})});me.observe(document,{attributes:!0,childList:!0,subtree:!0});function fe(e,o=!0,t){return(...r)=>{o&&te.set(e,[r,t]);let n=document.querySelectorAll(e);for(let a of n)O(a,r,t)}}function ke(e,o){return(...t)=>O(e,t,o)}function ye(e,o){return(...t)=>{let r="http://www.w3.org/1999/xhtml",n=document.createElementNS(r,e);return O(n,t,o)}}function O(e,o=[],t={}){o.forEach(([n,...a])=>t[n](e,...a));function r(...n){return n.forEach(a=>e.append(a)),e}return r}function V(e){return new Proxy({},{get:(o,t)=>t==="el"?r=>ke(r,e):t==="$el"?(r,n)=>fe(r,n,e):ye(t,e)})}function U(e){let{event:o=null,eventElement:t=window,hideOnFalse:r=!0,invokeImmediately:n=!0,mediaMinWidth:a=0,mediaMaxWidth:i=1/0,state:l=void 0}=e??{};return(...s)=>{let[d,u,k,m]=s,g=()=>{if(!(window.innerWidth>=a&&window.innerWidth<=i))return;let y=l&&typeof k=="function"?k(l.get()):k,Z=String(y)==="true"||String(y)==="false",Q=typeof m=="function"?m(l?l.get():void 0):m??!0;if(Z&&r&&String(y)==="false"||Z&&Q===!1)return d.removeAttribute(u);Q!==!1&&d.setAttribute(u,String(y))};l&&l.sub(g),o&&(d??t).addEventListener(o,g),window.addEventListener("resize",g),n&&g()}}function K(e){let{event:o=null,eventElement:t=window,invokeImmediately:r=!0,mediaMinWidth:n=0,mediaMaxWidth:a=1/0,method:i="classList",state:l=null}=e??{};return(...s)=>{let[d,u,k]=s,m=()=>{if(!(window.innerWidth>=n&&window.innerWidth<=a))return;let h=typeof u=="function"?u(l?l.get():void 0):u;(typeof k=="function"?k(l?l.get():void 0):k??!0)&&(i==="className"?d.setAttribute("class",h):d.classList.add(h))};l&&l.sub(m),o&&(d??t).addEventListener(o,m),window.addEventListener("resize",m),r&&m()}}function E(e){let{state:o,event:t}=e??{};return(...r)=>{let[n,a,i]=r,l=()=>{(typeof i=="function"?i(o?o.get():void 0):i??!0)?n.addEventListener(t,d=>a(d)):n.removeEventListener(t,d=>a(d))};o&&o.sub(l),l()}}function J(e){let{state:o}=e??{};return(...t)=>{let[r,n,a]=t,i=()=>{let l=o?n(o.get()):n();(typeof a=="function"?a(o?o.get():void 0):a??!0)&&(r.innerHTML="",Array.isArray(l)?l.forEach(d=>{d instanceof HTMLElement?r.appendChild(d):r.appendChild(document.createTextNode(String(d)))}):l instanceof HTMLElement?r.appendChild(l):r.innerHTML=String(l))};o&&o.sub(i),i()}}function G(e){let{event:o=null,eventElement:t=window,invokeImmediately:r=!0,mediaMinWidth:n=0,mediaMaxWidth:a=1/0,state:i=void 0}=e??{};return(...l)=>{let[s,d,u,k]=l,m=()=>{if(!(window.innerWidth>=n&&window.innerWidth<=a))return;let h=String(typeof u=="function"?u(i?i.get():void 0):u);(typeof k=="function"?k(i?i.get():void 0):k??!0)&&(d.startsWith("--")?s.style.setProperty(d,h):s.style[d]=h)};i&&i.sub(m),window.addEventListener("resize",m),o&&(s??t).addEventListener(o,m),r&&!o&&m()}}function we(e,o,t){let r=o.split("."),n=(a,i,l)=>{let[s,...d]=i;return d.length===0?Array.isArray(a)?[...a.slice(0,s),l,...a.slice(s+1)]:{...a,[s]:l}:(a[s]===void 0&&(a[s]=typeof d[0]=="number"?[]:{}),{...a,[s]:n(a[s],d,l)})};return n(e,r,t)}function B(e,o){let t=e;if(o){let g=o.storage.getItem(o.key),h=JSON.parse(g),y=h!=null;(o.overwrite??!0)&&y&&(e=h),!(o.overwrite??!0)&&y&&(Array.isArray(e)&&Array.isArray(h)?e=[...e,...h]:typeof e=="object"&&typeof h=="object"&&(e={...e,...h}))}let r=e,n=[],a=()=>r,i=()=>n.forEach(g=>g(r)),l=g=>()=>d(g(r)),s=()=>d(t),d=g=>{r=g,n.forEach(h=>h(r)),o&&o.storage.setItem(o.key,JSON.stringify(r))};return{deepSet:(g,h)=>d(we(r,g,h)),get:a,pub:i,reset:s,reduce:l,set:d,sub:g=>n.push(g),unsub:g=>n.splice(n.indexOf(g),1)}}var L={bgColorHoverToken:"--background-700",bgColorToken:"--background-500",borderColorToken:"--foreground-100",borderRadius:.35,borderWidth:.25,colorHoverToken:"--text-500",colorToken:"--text-500",fontSize:1.5,fontWeight:500,lineHeight:3};var H={bgColorHoverToken:"--background-700",bgColorToken:"--background-500",borderColorToken:"--foreground-100",borderRadius:.35,borderWidth:.25,colorHoverToken:"--text-500",colorToken:"--text-500",fontSize:1.5,fontWeight:500,lineHeight:3};var xe={pastel:{colors:{palette:{black:"#333333",red:"#d38459",orange:"#f1be78",yellow:"#fffacd",green:"#77dd77",blue:"#aec6cf",purple:"#c3b1e1",pink:"#ffb6c1",white:"#e2e2e2"},semantic:{action:"blue",background:"blue",brand:"red",error:"red",foreground:"white",info:"blue",success:"green",text:"black",warning:"yellow"},saturationRange:1,lightnessRange:1},button:{...L,colorToken:"--black-600",fontSize:1.25,lineHeight:4,borderWidth:.25,bgColorToken:"--background-700",bgColorHoverToken:"--background-800",borderColorToken:"--background-400"},dropdown:{...H,colorToken:"--black-600",fontSize:1.25,lineHeight:4,borderWidth:.25,bgColorToken:"--background-700",bgColorHoverToken:"--background-800",borderColorToken:"--background-400"},scaling:{borders:1,colGap:1,icon:1,padding:1,rowGap:1,text:1,weight:1}},rich:{colors:{palette:{black:"#000000",red:"#b22222",orange:"#ff4500",yellow:"#ffd700",green:"#006400",blue:"#00008b",purple:"#4b0082",pink:"#ff1493",white:"#f5f5f5"},semantic:{action:"blue",background:"black",brand:"red",error:"red",foreground:"black",info:"blue",success:"green",text:"white",warning:"yellow"},saturationRange:.1,lightnessRange:.25},button:L,dropdown:H,scaling:{borders:1,colGap:1,icon:1,padding:1,rowGap:1,text:1,weight:1}}},b=B(xe),f=B("pastel",{key:"theme",storage:sessionStorage});var M=new CSSStyleSheet,ae=()=>{let e=f.get()!=="none"?b.get()[f.get()].button:L;return M.replaceSync(`
+`);var P=new CSSStyleSheet,he=()=>P.replaceSync("");var ge=new Map,Ae=new MutationObserver(e=>{e.forEach(o=>{if(o.addedNodes.length>0&&o.type==="childList"){for(let r of o.addedNodes)if(r instanceof Element)for(let[t,[a,n]]of ge.entries()){let i=r.querySelectorAll(t);for(let d of i)K(d,a,n)}}})});Ae.observe(document,{attributes:!0,childList:!0,subtree:!0});function We(e,o=!0,r){return(...t)=>{o&&ge.set(e,[t,r]);let a=document.querySelectorAll(e);for(let n of a)K(n,t,r)}}function Ne(e,o){return(...r)=>K(e,r,o)}function Ie(e,o){return(...r)=>{let t="http://www.w3.org/1999/xhtml",a=document.createElementNS(t,e);return K(a,r,o)}}function K(e,o=[],r={}){o.forEach(([a,...n])=>r[a](e,...n));function t(...a){return a.forEach(n=>e.append(n)),e}return t}function A(e){return new Proxy({},{get:(o,r)=>r==="el"?t=>Ne(t,e):r==="$el"?(t,a)=>We(t,a,e):Ie(r,e)})}function pe(e,o=[],r={}){o.forEach(([a,...n])=>r[a](e,...n));function t(...a){return a.forEach(n=>e.append(n)),e}return t}function te(e){return new Proxy({},{get:(o,r)=>r==="el"?t=>(...a)=>pe(t,a,e):(...t)=>{let a="http://www.w3.org/2000/svg",n=document.createElementNS(a,r);return pe(n,t,e)}})}function _(e){let{event:o=null,eventElement:r=window,hideOnFalse:t=!0,invokeImmediately:a=!0,mediaMinWidth:n=0,mediaMaxWidth:i=1/0,state:d=void 0}=e??{};return(...s)=>{let[c,l,f,h]=s,g=()=>{if(!(window.innerWidth>=n&&window.innerWidth<=i))return;let u=d&&typeof f=="function"?f(d.get()):f,w=String(u)==="true"||String(u)==="false",T=typeof h=="function"?h(d?d.get():void 0):h??!0;if(w&&t&&String(u)==="false"||w&&T===!1)return c.removeAttribute(l);T!==!1&&c.setAttribute(l,String(u))};d&&d.sub(g),o&&(c??r).addEventListener(o,g),window.addEventListener("resize",g),a&&g()}}function W(e){let{event:o=null,eventElement:r=window,invokeImmediately:t=!0,mediaMinWidth:a=0,mediaMaxWidth:n=1/0,method:i="classList",state:d=null}=e??{};return(...s)=>{let[c,l,f]=s,h=()=>{if(!(window.innerWidth>=a&&window.innerWidth<=n))return;let p=typeof l=="function"?l(d?d.get():void 0):l;(typeof f=="function"?f(d?d.get():void 0):f??!0)&&(i==="className"?c.setAttribute("class",p):c.classList.add(p))};d&&d.sub(h),o&&(c??r).addEventListener(o,h),window.addEventListener("resize",h),t&&h()}}function N(e){let{state:o,event:r}=e??{};return(...t)=>{let[a,n,i]=t,d=()=>{(typeof i=="function"?i(o?o.get():void 0):i??!0)?a.addEventListener(r,c=>n(c)):a.removeEventListener(r,c=>n(c))};o&&o.sub(d),d()}}function E(e){let{state:o}=e??{};return(...r)=>{let[t,a,n]=r,i=()=>{let d=o?a(o.get()):a();(typeof n=="function"?n(o?o.get():void 0):n??!0)&&(t.innerHTML="",Array.isArray(d)?d.forEach(c=>{c instanceof HTMLElement||c instanceof SVGElement?t.appendChild(c):t.appendChild(document.createTextNode(String(c)))}):d instanceof HTMLElement||d instanceof SVGElement?t.appendChild(d):t.innerHTML=String(d))};o&&o.sub(i),i()}}function L(e){let{event:o=null,eventElement:r=window,invokeImmediately:t=!0,mediaMinWidth:a=0,mediaMaxWidth:n=1/0,state:i=void 0}=e??{};return(...d)=>{let[s,c,l,f]=d,h=()=>{if(!(window.innerWidth>=a&&window.innerWidth<=n))return;let p=String(typeof l=="function"?l(i?i.get():void 0):l);(typeof f=="function"?f(i?i.get():void 0):f??!0)&&(c.startsWith("--")?s.style.setProperty(c,p):s.style[c]=p)};i&&i.sub(h),window.addEventListener("resize",h),o&&(s??r).addEventListener(o,h),t&&!o&&h()}}function De(e,o,r){let t=o.split("."),a=(n,i,d)=>{let[s,...c]=i;return c.length===0?Array.isArray(n)?[...n.slice(0,s),d,...n.slice(s+1)]:{...n,[s]:d}:(n[s]===void 0&&(n[s]=typeof c[0]=="number"?[]:{}),{...n,[s]:a(n[s],c,d)})};return a(e,t,r)}function q(e,o){let r=e;if(o){let g=o.storage.getItem(o.key),p=JSON.parse(g),u=p!=null;(o.overwrite??!0)&&u&&(e=p),!(o.overwrite??!0)&&u&&(Array.isArray(e)&&Array.isArray(p)?e=[...e,...p]:typeof e=="object"&&typeof p=="object"&&(e={...e,...p}))}let t=e,a=[],n=()=>t,i=()=>a.forEach(g=>g(t)),d=g=>()=>c(g(t)),s=()=>c(r),c=g=>{t=g,a.forEach(p=>p(t)),o&&o.storage.setItem(o.key,JSON.stringify(t))};return{deepSet:(g,p)=>c(De(t,g,p)),get:n,pub:i,reset:s,reduce:d,set:c,sub:g=>a.push(g),unsub:g=>a.splice(a.indexOf(g),1)}}var J={bgColorHoverToken:"--background-700",bgColorToken:"--background-500",borderColorToken:"--foreground-100",borderColorHoverToken:"--foreground-200",borderRadiusToken:"--radius-scaling",borderWidthToken:"--borders-scaling",colorHoverToken:"--text-500",colorToken:"--text-500"},I=new CSSStyleSheet,ue=()=>{let e=v.get()!=="none"?m.get()[v.get()].dropdown:J,o=`
+.dropdown {
+    
+    --dropdown-bg-color: var(${e.bgColorToken}, white);
+    --dropdown-bg-color-hover: var(${e.bgColorHoverToken}, rgba(0, 0, 0, 0.1));
+    --dropdown-border-color: var(${e.borderColorToken}, black);
+    --dropdown-color: var(${e.colorToken}, black);
+    --dropdown-color-hover: var(${e.colorHoverToken}, black);
+    --dropdown-border-radius: calc(0.5 * var(${e.borderRadiusToken}, 1));
+    --dropdown-border-width: calc(0.25 * var(${e.borderWidthToken}, 1));
+    --dropdown-font-size: calc(1.5 * var(--font-scaling));
+    --dropdown-font-weight: 500;
+    --dropdown-line-height: calc(4 * var(--font-scaling));
+    --dropdown-arrow-size: calc(0.8 * var(--font-scaling));
+
+    appearance: none;
+    border-radius: var(--dropdown-border-radius);
+    border: var(--dropdown-border-width) solid var(--dropdown-border-color);
+    color: var(--dropdown-color);
+    cursor: pointer;
+    display: block;
+    font-size: var(--dropdown-font-size);
+    font-weight: var(--dropdown-font-weight);
+    line-height: var(--dropdown-line-height);
+    padding: 0 calc(var(--dropdown-line-height) * 1.5) 0 calc(var(--dropdown-line-height) / 2);
+    position: relative;
+    width: 100%;
+    background-image: 
+      linear-gradient(45deg, transparent 50%, var(--dropdown-color) 50%), 
+      linear-gradient(135deg, var(--dropdown-color) 50%, transparent 50%),
+      linear-gradient(to bottom, var(--dropdown-border-color) 0%, var(--dropdown-border-color) 100%);
+    background-color: var(--dropdown-bg-color);
+    background-size: 
+      var(--dropdown-arrow-size) var(--dropdown-arrow-size), 
+      var(--dropdown-arrow-size) var(--dropdown-arrow-size),
+      var(--dropdown-border-width) var(--dropdown-line-height);
+    background-position: 
+      calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2)) center, 
+      calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2) + var(--dropdown-arrow-size)) center,
+      calc(100% - calc(var(--dropdown-line-height) * 1.25 + var(--dropdown-border-width) - calc(var(--dropdown-arrow-size) / 2))) center;
+    background-repeat: no-repeat;
+    position: relative;
+}
+
+
+
+.dropdown[disabled] {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.dropdown:hover {
+    background-color: var(--dropdown-bg-color-hover);
+    color: var(--dropdown-color-hover);
+}
+
+.dropdown option {
+    color: var(--dropdown-color);
+    background-color: var(--dropdown-bg-color);
+}
+`;return I.replaceSync(o)};var Z={bgColorHoverToken:"--background-100",bgColorToken:"--background-100",borderColorToken:"--foreground-100",borderColorHoverToken:"--foreground-200",borderRadius:"--border-radius-500",borderWidth:"--border-width-100",colorHoverToken:"--foreground-500",colorToken:"--foreground-500"},ne=new CSSStyleSheet,ve=()=>{let e=v.get()!=="none"?m.get()[v.get()].slider:Z;return ne.replaceSync(`
+.slider { 
+  --slider-bg-color: var(${e.bgColorToken}, black);
+  --slider-bg-color-hover: var(${e.bgColorHoverToken}, rgba(0, 0, 0, 0.1));
+  --slider-border-color: var(${e.borderColorToken}, black);
+  --slider-border-radius: ${e.borderRadius}ch;
+  --slider-border-width: ${e.borderWidth}ch;
+  --slider-color: var(${e.colorToken}, white);
+  --slider-color-hover: var(${e.colorHoverToken}, black);
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--slider-bg-color);
+  border-radius: var(--slider-border-radius);
+  height: 20px;
+  width: 100%;
+}
+
+.slider:hover {
+  background: var(--slider-bg-color-hover);
+}
+
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--slider-color);
+  cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb:hover {
+  background: var(--slider-color-hover);
+}
+`)};var Q={colorToken:"--text-500",fontSizeBase:1.5,fontSizeSpread:.25,fontWeight:500,lineHeight:1.5},ae=new CSSStyleSheet,me=()=>{let e=v.get()!=="none"?m.get()[v.get()].typography:Q,r=`
+.h1, .h2, .h3, .h4, .h5, .h6, .p, .span, .div, .li, .td, .th, .summary { 
+  --text-color: var(${e.colorToken}, white);
+  --text-font-size-base: ${e.fontSizeBase}ch;
+  --text-font-weight: ${e.fontWeight};
+  --text-line-height: ${e.lineHeight}ch;
+}
+
+.h1 { font-size: calc(var(--text-font-size-base) * 2); }
+.h2 { font-size: calc(var(--text-font-size-base) * 1.5); }
+.h3 { font-size: calc(var(--text-font-size-base) * 1.25); }
+.h4 { font-size: var(--text-font-size-base); }
+.h5 { font-size: calc(var(--text-font-size-base) * 0.75); }
+.h6 { font-size: calc(var(--text-font-size-base) * 0.5); }
+.p { font-size: var(--text-font-size-base); }
+.span { font-size: var(--text-font-size-base); }
+.div { font-size: var(--text-font-size-base); }
+.li { font-size: var(--text-font-size-base); }
+.td { font-size: var(--text-font-size-base); }
+.th { font-size: var(--text-font-size-base); }
+.summary { font-size: var(--text-font-size-base); }
+`;return ae.replaceSync(r)};var Re={pastel:{colors:{palette:{black:"#333333",red:"#d38459",orange:"#f1be78",yellow:"#fffacd",green:"#77dd77",blue:"#aec6cf",purple:"#c3b1e1",pink:"#ffb6c1",white:"#e2e2e2"},semantic:{action:"blue",background:"purple",brand:"red",error:"red",foreground:"white",info:"blue",success:"green",text:"red",warning:"yellow"}},button:{...X,colorToken:"--black-600",bgColorToken:"--background-700",bgColorHoverToken:"--background-800",borderColorToken:"--background-400"},dropdown:{...J,colorToken:"--black-600",bgColorToken:"--background-700",bgColorHoverToken:"--background-800",borderColorToken:"--background-400",borderColorHoverToken:"--background-500"},slider:{...Z},typography:{...Q,colorToken:"--white-500"},scaling:{borderRadius:1,borderWidth:.5,columnWidth:1,fontSize:2,iconSize:2,rowWidth:1,padding:1,saturation:.25,lightness:.5}},rich:{colors:{palette:{black:"#000000",red:"#b22222",orange:"#ff4500",yellow:"#ffd700",green:"#006400",blue:"#00008b",purple:"#4b0082",pink:"#ff1493",white:"#f5f5f5"},semantic:{action:"blue",background:"black",brand:"red",error:"red",foreground:"black",info:"blue",success:"green",text:"white",warning:"yellow"}},button:X,dropdown:J,slider:{...Z},typography:{...Q},scaling:{borderRadius:1,borderWidth:0,columnWidth:1,fontSize:1,iconSize:1,rowWidth:1,padding:1,saturation:.1,lightness:.25}}},m=q(Re),v=q("pastel",{key:"theme",storage:sessionStorage});var X={bgColorHoverToken:"--background-700",bgColorToken:"--background-500",borderColorToken:"--foreground-100",borerColorHoverToken:"--foreground-200",colorHoverToken:"--text-500",colorToken:"--text-500"},D=new CSSStyleSheet,fe=()=>{let e=v.get()!=="none"?m.get()[v.get()].button:X;return D.replaceSync(`
 .button { 
   --button-bg-color: var(${e.bgColorToken}, black);
   --button-bg-color-hover: var(${e.bgColorHoverToken}, rgba(0, 0, 0, 0.1));
@@ -526,7 +643,7 @@ Usage:
     background-color: var(--button-bg-color-hover);
     color: var(--button-color-hover);
 }
-`)};var C=new CSSStyleSheet,ne=()=>C.replaceSync(`.card {
+`)};var R=new CSSStyleSheet,ke=()=>R.replaceSync(`.card {
   /* Settings */
   --card-bg-color: inherit;
   --card-font-family: inherit;
@@ -730,7 +847,7 @@ Usage:
     padding-bottom: calc(var(--card-spacing) / 2);
   }
 }
-`);var z=new CSSStyleSheet,Y=()=>{let e="var(--token-color-background, black)",o="var(--token-color-background-hue)",t="var(--token-color-background-saturation)",r="var(--token-color-background-lightness)",a=`
+`);var U=new CSSStyleSheet,ie=()=>{let e="var(--token-color-background, black)",o="var(--token-color-background-hue)",r="var(--token-color-background-saturation)",t="var(--token-color-background-lightness)",n=`
   .dashboard {
 
     --dashboard-overflow-y: hidden;
@@ -742,7 +859,7 @@ Usage:
     --dashboard-overflow: auto;
     --dashboard-overflow-y: auto;
 
-    --dashboard-aside-bg-color: hsl(${o}, ${t}, calc(${r} + 1.5%));
+    --dashboard-aside-bg-color: hsl(${o}, ${r}, calc(${t} + 1.5%));
     --dashboard-aside-body-column: 1/4;
     --dashboard-aside-body-row: 6/7;
     --dashboard-aside-body-padding: 20px;
@@ -753,7 +870,7 @@ Usage:
     --dashboard-aside-header-row: 5/6;
     --dashboard-aside-header-padding: 20px;
     
-    --dashboard-main-bg-color: hsl(${o}, ${t}, calc(${r} + 0%));
+    --dashboard-main-bg-color: hsl(${o}, ${r}, calc(${t} + 0%));
     --dashboard-main-body-column: 1/4;
     --dashboard-main-body-row: 4/5;
     --dashboard-main-body-padding: 20px;
@@ -764,7 +881,7 @@ Usage:
     --dashboard-main-header-row: 3/4;
     --dashboard-main-header-padding: 20px;
 
-    --dashboard-nav-bg-color: hsl(${o}, ${t}, calc(${r} + 1.5%));
+    --dashboard-nav-bg-color: hsl(${o}, ${r}, calc(${t} + 1.5%));
     --dashboard-nav-body-column: 1/4;
     --dashboard-nav-body-row: 2/3;
     --dashboard-nav-body-padding: 20px;
@@ -803,7 +920,7 @@ Usage:
     --dashboard-nav-header-row: 1/2;
     --dashboard-nav-body-row: 2/3;
     }
-}`,l=`
+}`,d=`
 
 .dashboard {
     align-items: flex-start;
@@ -909,7 +1026,7 @@ Usage:
     grid-row: var(--dashboard-aside-footer-row, 3/4);
     height: 100%;
     padding: var(--dashboard-aside-footer-padding, 20px);
-}`;return z.replaceSync(`${a}${i}${l}`)};var $=new CSSStyleSheet,ie=()=>$.replaceSync(`:root {
+}`;return U.replaceSync(`${n}${i}${d}`)};var G=new CSSStyleSheet,ye=()=>G.replaceSync(`:root {
   --dialog-bg-color: var(--token-black, black);
   --dialog-border-radius: 8px;
   --dialog-close-size: 13px;
@@ -1037,64 +1154,7 @@ Usage:
     height: auto;
   }
 }
-`);var A=new CSSStyleSheet,le=()=>{let e=f.get()!=="none"?b.get()[f.get()].dropdown:H,o=`
-.dropdown {
-    
-    --dropdown-bg-color: var(${e.bgColorToken}, white);
-    --dropdown-bg-color-hover: var(${e.bgColorHoverToken}, rgba(0, 0, 0, 0.1));
-    --dropdown-border-color: var(${e.borderColorToken}, black);
-    --dropdown-border-radius: ${e.borderRadius}ch;
-    --dropdown-border-width: ${e.borderWidth}ch;
-    --dropdown-color: var(${e.colorToken}, black);
-    --dropdown-color-hover: var(${e.colorHoverToken}, black);
-    --dropdown-font-size: ${e.fontSize}ch;
-    --dropdown-font-weight: ${e.fontWeight};
-    --dropdown-line-height: ${e.lineHeight}ch;
-    --dropdown-arrow-size: ${e.lineHeight*.21}ch;
-
-    appearance: none;
-    border-radius: var(--dropdown-border-radius);
-    border: var(--dropdown-border-width) solid var(--dropdown-border-color);
-    color: var(--dropdown-color);
-    cursor: pointer;
-    display: block;
-    font-size: var(--dropdown-font-size);
-    font-weight: var(--dropdown-font-weight);
-    line-height: var(--dropdown-line-height);
-    padding: 0 calc(var(--dropdown-line-height) * 1.5) 0 calc(var(--dropdown-line-height) / 2);
-    position: relative;
-    width: 100%;
-    background-image: 
-      linear-gradient(45deg, transparent 50%, var(--dropdown-color) 50%), 
-      linear-gradient(135deg, var(--dropdown-color) 50%, transparent 50%),
-      linear-gradient(to bottom, var(--dropdown-border-color) 0%, var(--dropdown-border-color) 100%);
-    background-color: var(--dropdown-bg-color);
-    background-size: 
-      var(--dropdown-arrow-size) var(--dropdown-arrow-size), 
-      var(--dropdown-arrow-size) var(--dropdown-arrow-size),
-      var(--dropdown-border-width) var(--dropdown-line-height);
-    background-position: 
-      calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2)) center, 
-      calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2) + var(--dropdown-arrow-size)) center,
-      calc(100% - calc(var(--dropdown-line-height) * 1.25 + var(--dropdown-border-width) - calc(var(--dropdown-arrow-size) / 2))) center;
-    background-repeat: no-repeat;
-}
-
-.dropdown[disabled] {
-    cursor: not-allowed;
-    opacity: 0.45;
-}
-
-.dropdown:hover {
-    background-color: var(--dropdown-bg-color-hover);
-    color: var(--dropdown-color-hover);
-}
-
-.dropdown option {
-    color: var(--dropdown-color);
-    background-color: var(--dropdown-bg-color);
-}
-`;return A.replaceSync(o)};var P=new CSSStyleSheet,de=()=>P.replaceSync(`.flexgrid {
+`);var O=new CSSStyleSheet,we=()=>O.replaceSync(`.flexgrid {
   --mobile-gap: 10px;
   --tablet-gap: 20px;
   --desktop-gap: 30px;
@@ -1137,7 +1197,7 @@ Usage:
   height: max-content;
   flex: 1 0 var(--width);
 }
-`);var N=new CSSStyleSheet,ce=()=>N.replaceSync(`:root {
+`);var B=new CSSStyleSheet,xe=()=>B.replaceSync(`:root {
 
 }
 
@@ -1195,7 +1255,7 @@ Usage:
 
 /* States */
 .flexpane--loading {}
-.flexpane--disabled {}`);var D=new CSSStyleSheet,se=()=>D.replaceSync(`.grid {
+.flexpane--disabled {}`);var V=new CSSStyleSheet,Se=()=>V.replaceSync(`.grid {
   --bg-color: var(--token-black, black);
   --desktop-columns: 12;
   --desktop-max-col-width: 6ch;
@@ -1282,7 +1342,7 @@ Usage:
     grid-column-end: var(--desktop-col-end);
   }
 }
-`);var I=new CSSStyleSheet,be=()=>I.replaceSync(`.section {
+`);var F=new CSSStyleSheet,Te=()=>F.replaceSync(`.section {
 }
 
 .section__header {
@@ -1300,7 +1360,7 @@ Usage:
 .section__content {
 }
 
-`);var R=new CSSStyleSheet,ge=()=>R.replaceSync(`.toggle {
+`);var j=new CSSStyleSheet,_e=()=>j.replaceSync(`.toggle {
   position: relative;
   width: 50px;
   height: 50px;
@@ -1360,18 +1420,18 @@ Usage:
   transition: all 0.3s;
   transform: rotate(-45deg);
 }
-`);function Se(e){e=e.replace(/^#/,""),e.length===3&&(e=e.split("").map(d=>d+d).join(""));let o=parseInt(e.slice(0,2),16)/255,t=parseInt(e.slice(2,4),16)/255,r=parseInt(e.slice(4,6),16)/255,n=Math.max(o,t,r),a=Math.min(o,t,r),i=0,l=0,s=(n+a)/2;if(n!==a){let d=n-a;switch(l=s>.5?d/(2-n-a):d/(n+a),n){case o:i=(t-r)/d+(t<r?6:0);break;case t:i=(r-o)/d+2;break;case r:i=(o-t)/d+4;break}i/=6}return{hue:Math.round(i*360),saturation:Math.round(l*100),lightness:Math.round(s*100)}}var q=(e,o,t,r)=>{let{hue:n,saturation:a,lightness:i}=Se(e),l=i>=100?100:i,s=a>=100?100:a,d=o===50?i:Math.min(Math.max(l+(o-50)*t,0),100),u=a===0?0:a===50?a:Math.min(Math.max(s+(o-50)*r,0),100);return{hue:n,saturation:u,lightness:d}};var w=new CSSStyleSheet,he=[10,20,30,40,50,60,70,80,90],j=()=>{let e="";for(let o in b.get()){e+=':root[data-theme="'+o+`"] {
-`;for(let t in b.get()[o].colors.palette){let r=b.get()[o].colors.palette[t];for(let n of he){let a=q(r,n,b.get()[o].colors.lightnessRange,b.get()[o].colors.saturationRange),i=`hsl(${a.hue}, ${a.saturation}%, ${a.lightness}%)`;e+=`--${t}-${n}0: ${i};
-`}}for(let t in b.get()[o].colors.semantic){let r=b.get()[o].colors.semantic[t],n=b.get()[o].colors.palette[r];for(let a of he){let i=q(n,a,b.get()[o].colors.lightnessRange,b.get()[o].colors.saturationRange),l=`hsl(${i.hue}, ${i.saturation}%, ${i.lightness}%)`;e+=`--${t}-${a}0: ${l};
-`}}e+=`--icon-scaling: ${b.get()[o].scaling.icon}ch;
-`,e+=`--text-scaling: ${b.get()[o].scaling.text}ch;
-`,e+=`--col-gap-scaling: ${b.get()[o].scaling.colGap}ch;
-`,e+=`--row-gap-scaling: ${b.get()[o].scaling.rowGap}ch;
-`,e+=`--padding-scaling: ${b.get()[o].scaling.padding}ch;
-`,e+=`--borders-scaling: ${b.get()[o].scaling.borders}ch;
-`,e+=`--weight-scaling: ${b.get()[o].scaling.weight}ch;
-`,e+=`}
-`}w.replaceSync(e)};var W=new CSSStyleSheet,pe=()=>W.replaceSync(`.tooltip {
+`);function le(e){e=e.replace(/^#/,""),e.length===3&&(e=e.split("").map(c=>c+c).join(""));let o=parseInt(e.slice(0,2),16)/255,r=parseInt(e.slice(2,4),16)/255,t=parseInt(e.slice(4,6),16)/255,a=Math.max(o,r,t),n=Math.min(o,r,t),i=0,d=0,s=(a+n)/2;if(a!==n){let c=a-n;switch(d=s>.5?c/(2-a-n):c/(a+n),a){case o:i=(r-t)/c+(r<t?6:0);break;case r:i=(t-o)/c+2;break;case t:i=(o-r)/c+4;break}i/=6}return{hue:Math.round(i*360),saturation:Math.round(d*100),lightness:Math.round(s*100)}}function Ee(e=100,o=0,r=100){let t={x:0,y:e},a={x:e,y:0},n,i;o===0?(n={x:e/2,y:e/2},i={x:e/2,y:e/2}):o>0?(n={x:e*o,y:e},i={x:e,y:e*o}):(n={x:0,y:e*(1+o)},i={x:e*(1+o),y:0});function d(h,g,p,u,w){let T=(1-h)**3*g.x+3*(1-h)**2*h*p.x+3*(1-h)*h**2*u.x+h**3*w.x,Me=(1-h)**3*g.y+3*(1-h)**2*h*p.y+3*(1-h)*h**2*u.y+h**3*w.y,Pe=T/e;return{x:T,y:Me,v:Pe}}let s=[0],c=t;for(let h=1;h<=r;h++){let g=h/r,p=d(g,t,n,i,a),u=p.x-c.x,w=p.y-c.y,T=Math.sqrt(u*u+w*w);s.push(s[h-1]+T),c=p}let l=s[r],f=[];for(let h=0;h<=r;h++){let g=h/r*l,p=0;for(let u=1;u<=r;u++)if(s[u]>=g){let w=(g-s[u-1])/(s[u]-s[u-1]);p=(u-1+w)/r;break}f.push(d(p,t,n,i,a))}return f}var $=(e,o,r,t)=>{let{hue:a,saturation:n,lightness:i}=le(e),d=i>=100?100:i,s=n>=100?100:n,c=o===50?i:Math.min(Math.max(d+(o-50)*r,0),100),l=n===0?0:n===50?n:Math.min(Math.max(s+(o-50)*t,0),100);return{hue:a,saturation:l,lightness:c}};function x(e,o,r,t,a){let n=[],i=(d,s,c)=>(d=Math.pow(d,c),s<0?Math.pow(d,1+Math.abs(s)):s>0?1-Math.pow(1-d,1+s):d);for(let d=0;d<e;d++){let s=d/(e-1),c=i(s,t,a),l=o+c*(r-o);n.push(l)}return n}var C=new CSSStyleSheet,Le=[10,20,30,40,50,60,70,80,90],ee=()=>{let e="";for(let o in m.get()){e+=':root[data-theme="'+o+`"] {
+`;for(let l in m.get()[o].colors.palette){let f=m.get()[o].colors.palette[l];for(let h of Le){let g=$(f,h,m.get()[o].scaling.lightness,m.get()[o].scaling.saturation),p=`hsl(${g.hue}, ${g.saturation}%, ${g.lightness}%)`;e+=`--${l}-${h}0: ${p};
+`}}for(let l in m.get()[o].colors.semantic){let f=m.get()[o].colors.semantic[l],h=m.get()[o].colors.palette[f];for(let g of Le){let p=$(h,g,m.get()[o].scaling.lightness,m.get()[o].scaling.saturation),u=`hsl(${p.hue}, ${p.saturation}%, ${p.lightness}%)`;e+=`--${l}-${g}0: ${u};
+`}}let r=m.get()[o].scaling,t=x(10,1,9,r.borderWidth,1);for(let l=1;l<=t.length;l++)e+=`--border-width-${l}00: ${t[l-1]}px;
+`;let a=x(10,1,9,r.borderRadius,1);for(let l=1;l<=a.length;l++)e+=`--border-radius-${l}00: ${a[l-1]}px;
+`;let n=x(10,1,9,r.columnWidth,1);for(let l=1;l<=n.length;l++)e+=`--column-width-${l}00: ${n[l-1]}ch;
+`;let i=x(10,1,9,r.fontSize,1);for(let l=1;l<=i.length;l++)e+=`--font-size-${l}00: ${i[l-1]}ch;
+`;let d=x(10,1,9,r.iconSize,1);for(let l=1;l<=d.length;l++)e+=`--icon-size-${l}00: ${d[l-1]}ch;
+`;let s=x(10,1,9,r.rowWidth,1);for(let l=1;l<=s.length;l++)e+=`--row-width-${l}00: ${s[l-1]}ch;
+`;let c=x(10,1,9,r.padding,1);for(let l=1;l<=c.length;l++)e+=`--padding-${l}00: ${c[l-1]}ch;
+`;e+=`}
+`}console.log(e),C.replaceSync(e)};var Y=new CSSStyleSheet,$e=()=>Y.replaceSync(`.tooltip {
   cursor: pointer;
   position: relative;
 }
@@ -1422,6 +1482,6 @@ Usage:
   opacity: 1;
   transition: all 0.75s ease;
 }
-`);function p(e){let o="",t=Array.from(e.cssRules);for(let r of t)o+=r.cssText+`
-`;return o}var v=new JSZip;var F=e=>{switch(e.action){case"DISABLE_TOKENS":j();break;case"DOWNLOAD_ALL":v.file("tokens.css",p(w)),v.file("accordion.css",p(x)),v.file("alerts.css",p(S)),v.file("badge.css",p(_)),v.file("bg.css",p(T)),v.file("button.css",p(M)),v.file("card.css",p(C)),v.file("dashboard.css",p(z)),v.file("dialog.css",p($)),v.file("dropdown.css",p(A)),v.file("flexgrid.css",p(P)),v.file("flexpane.css",p(N)),v.file("grid.css",p(D)),v.file("section.css",p(I)),v.file("toggles.css",p(R)),v.file("tooltip.css",p(W)),v.generateAsync({type:"blob"}).then(t=>{let r=document.createElement("a");r.href=URL.createObjectURL(t),r.download="capui.zip",r.click()});break;case"DOWNLOAD_THEME_TOKENS":let o=document.createElement("a");o.href=URL.createObjectURL(new Blob([p(w)],{type:"text/css"})),o.download="tokens.css",o.click();break;case"ENABLE_TOKENS":j();break;case"SET_THEME":f.set(e.theme),F({action:"RENDER_ALL_STYLESHEETS"});break;case"RENDER_ALL_STYLESHEETS":j(),Y(),X(),ee(),oe(),re(),ae(),ne(),Y(),ie(),le(),de(),ce(),se(),be(),ge(),pe();break}};var ve=(e,o="0px",t="center",r="center",n="auto")=>(e.style.display="flex",e.style.gap=o,e.style.flexDirection="column",e.style.alignItems=t,e.style.justifyContent=r,e.style.width=n),ue=(e,o="0px",t="center",r="center",n="auto")=>(e.style.display="flex",e.style.gap=o,e.style.flexDirection="row",e.style.alignItems=t,e.style.justifyContent=r,e.style.width=n);var c=V({"style:theme":G({state:f}),"attr:theme":U({state:f}),attr:U(),change:E({event:"change"}),class:K(),click:E({event:"click"}),innerHTML:J(),input:E({event:"input"}),style:G(),column:ve,row:ue});var _e=c.div(["row","10px","center","space-between"],["style","backgroundColor","var(--background-600, white)"],["style","color","var(--text-500, black)"],["style","position","fixed"],["style","top","0"],["style","width","100%"])(c.div(["row","2ch"],["style","padding","0 2ch"])(c.div(["style","color","var(--brand-500)"],["style","height","100%"],["style","fontFamily","Splash"],["style","fontWeight","bold"],["style","fontSize","5ch"],["style","textAlign","center"])("cap"),c.div(["style","color","var(--brand-500)"],["style","height","100%"],["style","fontWeight","bold"],["style","fontSize","0.5ch"],["style","textAlign","center"])("v1.0.0")),c.div(["row","20px"],["style","padding","0 20px"])(c.select(["class","dropdown"],["class","dropdown--small"],["change",e=>window.location.hash=e.target.value])(c.optgroup(["attr","label","Section"])(c.option()("tokens"),c.option()("buttons"),c.option()("dropdown"),c.option()("accordion"),c.option()("alerts"),c.option()("badge"),c.option()("bg"),c.option()("card"),c.option()("dashboard"),c.option()("dialog"),c.option()("flexgrid"),c.option()("flexpane"),c.option()("grid"),c.option()("section"),c.option()("toggles"),c.option()("tooltip"))))),Te=c.div()("Body"),Ee=c.div(["row","2ch"],["style","backgroundColor","var(--background-600)"],["style","position","fixed"],["style","bottom","0"],["style","width","100%"],["style","color","var(--text-500, black)"],["style","padding","2ch"])(c.select(["class","dropdown"],["change",e=>F({action:"SET_THEME",theme:e.target.value})])(c.optgroup(["attr","label","Pick a theme"])(c.option(["attr","value","none"])("none"),...Object.keys(b.get()).map(e=>c.option(["attr","value",e],["attr","selected",e===f.get()])(e)))),c.button(["class","button"])("capui.zip"));document.addEventListener("DOMContentLoaded",()=>{let e=c.$el("#root");c.$el("html")(["attr:theme","data-theme",f.get],["style","backgroundColor","var(--background-500)"]),e(["innerHTML",()=>[_e,Te,Ee]]),F({action:"RENDER_ALL_STYLESHEETS"}),document.adoptedStyleSheets=[w,x,S,_,T,M,C,z,$,A,P,N,D,I,R,W]});})();
+`);var oe=(e,o="0px",r="center",t="center",a="auto")=>(e.style.display="flex",e.style.gap=o,e.style.flexDirection="column",e.style.alignItems=r,e.style.justifyContent=t,e.style.width=a),Ce=(e,o="0px",r="center",t="center",a="auto")=>(e.style.display="flex",e.style.gap=o,e.style.flexDirection="row",e.style.alignItems=r,e.style.justifyContent=t,e.style.width=a);var b=A({"innerHTML:theme":E({state:v}),"style:theme":L({state:v}),"attr:theme":_({state:v}),attr:_(),change:N({event:"change"}),class:W(),click:N({event:"click"}),innerHTML:E(),input:N({event:"input"}),style:L(),column:oe,row:Ce});var He=()=>{if(v.get()==="none")return b.div()("none");let e=m.get()[v.get()],o=m.get()[v.get()].colors,r=[10,20,30,40,50,60,70,80,90],t=(n,i)=>{let{hue:d,saturation:s,lightness:c}=$(n,i,e.scaling.lightness,e.scaling.saturation);return`hsl(${d}, ${s}%, ${c}%)`},a=(n,i)=>{let{hue:d,saturation:s,lightness:c}=$(n,i,e.scaling.lightness,e.scaling.saturation),l=c>40?0:100;return`hsl(${d}, ${s}%, ${l}%, 0.35)`};return b.div(["column","0px","stretch","space-between","100%"])(...Object.entries(o.palette).map(([n,i])=>{let{hue:d,saturation:s,lightness:c}=le(i);return b.div(["row"])(...r.map(l=>b.div(["column"],["style","width",`${100/r.length}%`],["style","fontSize","9px"],["style","backgroundColor",t(i,l)],["style","padding","6px"])(b.span(["style","transform","rotate(-45deg)"],["style","color",a(i,l)])(`${l}0`))))}))};var de=te({attr:_(),style:L(),html:E()}),ze=A({attr:_(),class:W(),html:E(),style:L(),column:oe}),S=(e=100,o=0,r=50)=>{let t=Ee(e,o,r),a=.4,n=e*a,i=t.map(s=>({x:s.x+e*a/2,y:s.y+e*a/2})),d=`M ${i[0].x} ${i[0].y}`;for(let s=1;s<i.length-1;s++){let c={x:(i[s].x+i[s+1].x)/2,y:(i[s].y+i[s+1].y)/2};d+=` Q ${i[s].x} ${i[s].y} ${c.x} ${c.y}`}return d+=` T ${i[i.length-1].x} ${i[i.length-1].y}`,ze.div(["column","20px"],["html",()=>[de.svg(["attr","height","100px"],["attr","stroke-width",e*a/4],["attr","viewBox",`0 0 ${e+n} ${e+n}`],["attr","width","100px"],["style","borderRadius","5px"],["style","fill","transparent"],["style","stroke","var(--black-500)"])(de.rect(["attr","width",100+n],["attr","height",100+n])(),de.path(["attr","d",d],["attr","fill","none"],["attr","stroke-linecap","round"],["attr","stroke-width",e*a/8],["attr","stroke","var(--black-500)"])()),ze.input(["attr","type","range"],["attr","min","-1"],["attr","max","1"],["attr","step","0.01"],["attr","value",0],["class","slider"])()]])()};function k(e){let o="",r=Array.from(e.cssRules);for(let t of r)o+=t.cssText+`
+`;return o}var y=new JSZip,re=e=>{switch(e.action){case"DISABLE_TOKENS":ee();break;case"DOWNLOAD_ALL":y.file("tokens.css",k(C)),y.file("accordion.css",k(H)),y.file("alerts.css",k(z)),y.file("badge.css",k(M)),y.file("bg.css",k(P)),y.file("button.css",k(D)),y.file("card.css",k(R)),y.file("dashboard.css",k(U)),y.file("dialog.css",k(G)),y.file("dropdown.css",k(I)),y.file("flexgrid.css",k(O)),y.file("flexpane.css",k(B)),y.file("grid.css",k(V)),y.file("section.css",k(F)),y.file("toggles.css",k(j)),y.file("tooltip.css",k(Y)),y.generateAsync({type:"blob"}).then(r=>{let t=document.createElement("a");t.href=URL.createObjectURL(r),t.download="capui.zip",t.click()});break;case"DOWNLOAD_THEME_TOKENS":let o=document.createElement("a");o.href=URL.createObjectURL(new Blob([k(C)],{type:"text/css"})),o.download="tokens.css",o.click();break;case"ENABLE_TOKENS":ee();break;case"SET_THEME":v.set(e.theme),re({action:"RENDER_ALL_STYLESHEETS"});break;case"RENDER_ALL_STYLESHEETS":ee(),ie(),ce(),se(),be(),he(),fe(),ke(),ie(),ye(),ue(),we(),xe(),Se(),Te(),ve(),_e(),$e(),me();break}};var Ue=b.div(["row","10px","center","space-between"],["style","backgroundColor","var(--background-600, white)"],["style","color","var(--text-500, black)"],["style","position","sticky"],["style","top","0"],["style","width","100%"])(b.div(["row","2ch"],["style","padding","0 2ch"])(b.div(["style","color","var(--brand-500)"],["style","height","100%"],["style","fontFamily","Splash"],["style","fontWeight","bold"],["style","fontSize","5ch"],["style","textAlign","center"])("cap"),b.div(["style","color","var(--brand-500)"],["style","height","100%"],["style","fontWeight","bold"],["style","fontSize","0.5ch"],["style","textAlign","center"])("v1.0.0")),b.div(["row","20px"],["style","padding","0 20px"])(b.select(["class","dropdown"],["change",e=>window.location.hash=e.target.value])(b.optgroup(["attr","label","Section"])(b.option()("tokens"),b.option()("buttons"),b.option()("dropdown"),b.option()("accordion"),b.option()("alerts"),b.option()("badge"),b.option()("bg"),b.option()("card"),b.option()("dashboard"),b.option()("dialog"),b.option()("flexgrid"),b.option()("flexpane"),b.option()("grid"),b.option()("section"),b.option()("toggles"),b.option()("tooltip"))))),Ge=b.div(["column","20px","flex-start","space-between"],["style","width","100%"],["style","padding","20px"],["innerHTML:theme",()=>[b.div(["row","5px"])(S(100,-1,5),S(100,-.5,5),S(100,-.25,5),S(100,0,5),S(100,.25,5),S(100,.5,5),S(100,1,5)),b.div(["column","0","flex-start"])(b.div(["class","h2"])("Palette"),b.p(["class","p"])("Select a color row to edit")),He()]])(),Oe=b.div(["row","2ch"],["style","backgroundColor","var(--background-600)"],["style","position","fixed"],["style","bottom","0"],["style","width","100%"],["style","color","var(--text-500, black)"],["style","padding","2ch"])(b.select(["class","dropdown"],["change",e=>re({action:"SET_THEME",theme:e.target.value})])(b.optgroup(["attr","label","Pick a theme"])(b.option(["attr","value","none"])("none"),...Object.keys(m.get()).map(e=>b.option(["attr","value",e],["attr","selected",e===v.get()])(e)))),b.button(["class","button"])("capui.zip"));document.addEventListener("DOMContentLoaded",()=>{let e=b.$el("#root");b.$el("html")(["attr:theme","data-theme",v.get],["style","backgroundColor","var(--background-600)"]),e(["innerHTML",()=>[Ue,Ge,Oe]]),re({action:"RENDER_ALL_STYLESHEETS"}),document.adoptedStyleSheets=[C,H,z,M,P,D,R,U,G,I,O,B,V,F,ne,j,Y,ae]});})();
 //# sourceMappingURL=ui.js.map
diff --git a/docs/scripts/ui.js.map b/docs/scripts/ui.js.map
index 8c71f2e..9211885 100644
--- a/docs/scripts/ui.js.map
+++ b/docs/scripts/ui.js.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/components/accordion/accordion.ts", "../../src/components/alerts/alerts.ts", "../../src/components/badge/badge.ts", "../../src/components/bg/bg.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.11/node_modules/@linttrap/oem/src/html/HTML.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.11/node_modules/@linttrap/oem/src/html/traits/Attribute.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.11/node_modules/@linttrap/oem/src/html/traits/ClassName.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.11/node_modules/@linttrap/oem/src/html/traits/Event.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.11/node_modules/@linttrap/oem/src/html/traits/InnerHTML.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.11/node_modules/@linttrap/oem/src/html/traits/Style.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.11/node_modules/@linttrap/oem/src/state/State.ts", "../../src/components/button/button-vars.ts", "../../src/components/dropdown/dropdown-vars.ts", "../../src/state.ts", "../../src/components/button/button.ts", "../../src/components/card/card.ts", "../../src/components/dashboard/dashboard.ts", "../../src/components/dialog/dialog.ts", "../../src/components/dropdown/dropdown.ts", "../../src/components/flexgrid/flexgrid.ts", "../../src/components/flexpane/flexpane.ts", "../../src/components/grid/grid.ts", "../../src/components/section/section.ts", "../../src/components/toggles/toggles.ts", "../../src/util/generators.ts", "../../src/components/tokens/tokens.ts", "../../src/components/tooltip/tooltip.ts", "../../src/util/css.ts", "../../src/fsm.ts", "../../src/traits.ts", "../../src/template.ts", "../../src/index.ts"],
-  "sourcesContent": ["export const accordionStyleSheet = new CSSStyleSheet();\n\nexport const renderAccordionStyleSheet = () =>\n  accordionStyleSheet.replaceSync(`/* \n<div class=\"accordion accordion--dark\">\n    <div class=\"accordion__item\">\n      <input type=\"radio\" name=\"accordion-group\" id=\"ag1\" hidden=\"\" class=\"accordion__input\">\n      <label for=\"ag1\" class=\"accordion__header\">Item 1</label>\n      <div class=\"accordion__body\">Content for Item 1...</div>\n    </div>\n    ...\n</div> \n*/\n\n.accordion {\n  --body-bg: inherit;\n  --body-text-color: inherit;\n  --border-color: inherit;\n  --border-radius: 4px;\n  --font-family: var(--token-font-sans, sans-serif);\n  --font-size: 14px;\n  --header-bg: inherit;\n  --header-color: inherit;\n  --header-hover-bg: inherit;\n  --header-selected-bg: inherit;\n  --spacing: 12px;\n  --toggle-size: 6px;\n\n  &.accordion--dark {\n    --body-bg: var(--token-black-90, black);\n    --body-text-color: var(--token-white, white);\n    --border-color: var(--token-white-10, white);\n    --border-radius: 4px;\n    --font-family: var(--token-font-sans, sans-serif);\n    --font-size: 14px;\n    --header-bg: var(--token-black, black);\n    --header-color: var(--token-white, white);\n    --header-hover-bg: var(--token-black-90, black);\n    --spacing: 12px;\n    --toggle-size: 6px;\n  }\n\n  &.accordion--light {\n    --body-bg: var(--token-white, white);\n    --body-text-color: var(--token-black, black);\n    --border-color: var(--token-black-10, black);\n    --border-radius: 4px;\n    --font-family: var(--token-font-sans, sans-serif);\n    --font-size: 14px;\n    --header-bg: var(--token-white-90, white);\n    --header-color: var(--token-black, black);\n    --header-hover-bg: var(--token-white-80, white);\n    --spacing: 12px;\n    --toggle-size: 6px;\n  }\n\n  width: 100%;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n\n  .accordion__item {\n    &:first-child .accordion__header {\n      border-top-left-radius: var(--border-radius);\n      border-top-right-radius: var(--border-radius);\n    }\n\n    &:last-child:not(:has(.accordion__input:checked)) .accordion__header {\n      border-bottom-left-radius: var(--border-radius);\n      border-bottom-right-radius: var(--border-radius);\n    }\n\n    &:last-child:has(.accordion__input:checked) .accordion__body {\n      border-bottom-left-radius: var(--border-radius);\n      border-bottom-right-radius: var(--border-radius);\n    }\n\n    .accordion__header {\n      background-color: var(--header-bg);\n      border-bottom: 1px solid var(--border-color);\n      color: var(--header-color);\n      cursor: pointer;\n      display: block;\n      font-weight: bold;\n      padding: var(--spacing);\n      position: relative;\n\n      &:hover {\n        background-color: var(--header-hover-bg);\n        transition: all 200ms;\n      }\n\n      &::after {\n        border-left: 2px solid var(--header-color);\n        border-bottom: 2px solid var(--header-color);\n        color: var(--header-text-color);\n        content: \"\";\n        display: flex;\n        width: var(--toggle-size);\n        height: var(--toggle-size);\n        position: absolute;\n        right: var(--spacing);\n        top: calc(50% - var(--toggle-size) / 2 * 2);\n        transform: rotate(-45deg);\n      }\n    }\n\n    .accordion__input {\n      display: none;\n\n      &:checked + .accordion__header + .accordion__body {\n        display: block;\n      }\n      &:checked + .accordion__header::after {\n        transform: rotate(135deg);\n        top: calc(50% - var(--toggle-size) / 2);\n      }\n    }\n\n    .accordion__body {\n      background-color: var(--body-bg);\n      border-bottom: 1px solid var(--border-color);\n      color: var(--body-text-color);\n      padding: var(--spacing);\n      font-size: var(--font-size);\n      display: none;\n    }\n  }\n}\n`);\n", "export const alertsStyleSheet = new CSSStyleSheet();\n\nexport const renderAlertsStyleSheet = () =>\n  alertsStyleSheet.replaceSync(`/* \n<label class=\"alert alert--[MODIFIERS]\">\n  <input type=\"checkbox\" class=\"alert__toggle\" />\n  <div class=\"alert__close\">\uFF0B</div>\n  <div class=\"alert__title\">Alert Title</div>\n  <div class=\"alert__message\">\n    lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae\n    sunt a te dicta?\n  </div>\n</label> \n*/\n\n/* Solid Alerts */\n.alert {\n  --bg: inherit;\n  --bg-hover: inherit;\n  --border-color: inherit;\n  --border-color-hover: inherit;\n  --border-radius: 4px;\n  --border-style: solid;\n  --border-width: 2px;\n  --font-family: var(--token-font-sans, sans-serif);\n  --font-size: 13px;\n  --padding: 20px;\n  --text-align: left;\n  --text-color: inherit;\n  --link-color: inherit;\n  --link-color-hover: inherit;\n\n  &.alert--dark {\n    --bg: var(--token-black, black);\n    --bg-hover: var(--token-black-80, black);\n    --border-color: var(--token-black, black);\n    --border-color-hover: var(--token-black-60, black);\n    --text-color: var(--token-white, white);\n    --link-color: var(--token-white, white);\n    --link-color-hover: var(--token-white-60, white);\n    &.alert--ghost {\n      --bg: var(--token-black-20, black);\n      --bg-hover: var(--token-black-40, black);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-black, black);\n      --link-color: var(--token-black, black);\n      --link-color-hover: var(--token-black-60, black);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-black-20, black);\n      --border-color: var(--token-black, black);\n      --text-color: var(--token-black, black);\n      --link-color: var(--token-black, black);\n      --link-color-hover: var(--token-black-60, black);\n    }\n  }\n\n  &.alert--error {\n    --bg: var(--token-red, red);\n    --bg-hover: var(--token-red-80, red);\n    --border-color: var(--token-red, red);\n    --border-color-hover: var(--token-red-60, red);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-red-10, red);\n      --bg-hover: var(--token-red-20, red);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-red, red);\n      --link-color: var(--token-red, red);\n      --link-color-hover: var(--token-red-60, red);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-red-20, red);\n      --border-color: var(--token-red, red);\n      --text-color: var(--token-red, red);\n      --link-color: var(--token-red, red);\n      --link-color-hover: var(--token-red-60, red);\n    }\n  }\n\n  &.alert--info {\n    --bg: var(--token-blue, blue);\n    --bg-hover: var(--token-blue-80, blue);\n    --border-color: var(--token-blue, blue);\n    --border-color-hover: var(--token-blue-60, blue);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-blue-10, blue);\n      --bg-hover: var(--token-blue-20, blue);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-blue, blue);\n      --link-color: var(--token-blue, blue);\n      --link-color-hover: var(--token-blue-60, blue);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-blue-20, blue);\n      --border-color: var(--token-blue, blue);\n      --text-color: var(--token-blue, blue);\n      --link-color: var(--token-blue, blue);\n      --link-color-hover: var(--token-blue-60, blue);\n    }\n  }\n\n  &.alert--light {\n    --bg: var(--token-white, white);\n    --bg-hover: var(--token-white-80, white);\n    --border-color: var(--token-white, white);\n    --border-color-hover: var(--token-white-60, white);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-white-10, white);\n      --bg-hover: var(--token-white-20, white);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-white, white);\n      --link-color: var(--token-white, white);\n      --link-color-hover: var(--token-white-60, white);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-white-20, white);\n      --border-color: var(--token-white, white);\n      --text-color: var(--token-white, white);\n      --link-color: var(--token-white, white);\n      --link-color-hover: var(--token-white-60, white);\n    }\n  }\n\n  &.alert--success {\n    --bg: var(--token-green, green);\n    --bg-hover: var(--token-green-80, green);\n    --border-color: var(--token-green, green);\n    --border-color-hover: var(--token-green-60, green);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-green-10, green);\n      --bg-hover: var(--token-green-20, green);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-green, green);\n      --link-color: var(--token-green, green);\n      --link-color-hover: var(--token-green-60, green);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-green-20, green);\n      --border-color: var(--token-green, green);\n      --text-color: var(--token-green, green);\n      --link-color: var(--token-green, green);\n      --link-color-hover: var(--token-green-60, green);\n    }\n  }\n\n  &.alert--warning {\n    --bg: var(--token-yellow, yellow);\n    --bg-hover: var(--token-yellow-80, yellow);\n    --border-color: var(--token-yellow, yellow);\n    --border-color-hover: var(--token-yellow-60, yellow);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-yellow-10, yellow);\n      --bg-hover: var(--token-yellow-20, yellow);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-yellow, yellow);\n      --link-color: var(--token-yellow, yellow);\n      --link-color-hover: var(--token-yellow-60, yellow);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-yellow-20, yellow);\n      --border-color: var(--token-yellow, yellow);\n      --text-color: var(--token-yellow, yellow);\n      --link-color: var(--token-yellow, yellow);\n      --link-color-hover: var(--token-yellow-60, yellow);\n    }\n  }\n\n  background-color: var(--bg);\n  border-color: var(--border-color);\n  border-width: var(--border-width);\n  border-radius: var(--border-radius);\n  border-style: var(--border-style);\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family);\n  gap: calc(var(--padding) / 2);\n  overflow: hidden;\n  padding: var(--padding);\n  position: relative;\n  text-align: var(--text-align, left);\n  transition: all 0.3s;\n  width: 100%;\n\n  &:hover {\n    background-color: var(--bg-hover);\n    border-color: var(--border-color-hover);\n  }\n\n  .alert__title {\n    font-size: var(--font-size);\n    font-weight: bold;\n    color: var(--text-color);\n    margin-right: var(--padding);\n  }\n\n  .alert__message {\n    font-size: var(--font-size);\n    color: var(--text-color);\n    a {\n      color: var(--link-color);\n      &:hover {\n        color: var(--link-color-hover);\n      }\n    }\n  }\n\n  .alert__close {\n    color: var(--text-color);\n    cursor: pointer;\n    transform: rotate(45deg);\n    position: absolute;\n    top: calc(var(--padding) / 2);\n    right: calc(var(--padding) / 2);\n    font-size: 20px;\n  }\n\n  .alert__toggle {\n    display: none;\n  }\n\n  &:has(.alert__toggle:checked) {\n    animation: alert-closing-animation 0.25s linear forwards;\n  }\n}\n\n/* Animations */\n\n@keyframes alert-closing-animation {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n    height: auto;\n    padding: var(--padding-medium);\n  }\n  100% {\n    opacity: 0;\n    height: 0;\n    padding: 0;\n  }\n}\n`);\n", "export const badgeStyleSheet = new CSSStyleSheet();\n\nexport const renderBadgeStyleSheet = () =>\n  badgeStyleSheet.replaceSync(`/* \nUsage:\n<span class=\"badge badge-[MODIFIER]\">Basic</badge>\n*/\n\n.badge {\n  --bg: inherit;\n  --text-color: inherit;\n  --border-radius: 5px;\n  --border-width: 2px;\n  --border-color: inherit;\n  --font-family: var(--token-font-sans, sans-serif);\n  --font-size: 10px;\n  --padding: 3px 6px;\n\n  &.badge--dark {\n    --bg: var(--token-black);\n    --text-color: var(--token-white);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-black);\n      --border-color: var(--token-black);\n    }\n  }\n  &.badge--error {\n    --bg: var(--token-red);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-red);\n      --border-color: var(--token-red);\n    }\n  }\n  &.badge--info {\n    --bg: var(--token-blue);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-blue);\n      --border-color: var(--token-blue);\n    }\n  }\n  &.badge--light {\n    --bg: var(--token-white);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-white);\n      --border-color: var(--token-white);\n    }\n  }\n  &.badge--success {\n    --bg: var(--token-green);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-green);\n      --border-color: var(--token-green);\n    }\n  }\n  &.badge--warning {\n    --bg: var(--token-yellow);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-yellow);\n      --border-color: var(--token-yellow);\n    }\n  }\n  &.badge--small {\n    --font-size: 9px;\n    --padding: 2px 4px;\n  }\n  &.badge--large {\n    --font-size: 11px;\n    --padding: 4px 8px;\n  }\n\n  background-color: var(--bg);\n  border-radius: var(--border-radius);\n  border: 0;\n  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);\n  color: var(--text-color);\n  cursor: pointer;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  font-weight: bold;\n  min-width: 15px;\n  outline: none;\n  padding: var(--padding);\n  position: relative;\n  text-align: center;\n  text-wrap: nowrap;\n  transition: all 0.3s;\n  user-select: none;\n  vertical-align: middle;\n  width: max-content;\n}\n`);\n", "export const bgStyleSheet = new CSSStyleSheet();\n\nexport const renderBGStyleSheet = () => bgStyleSheet.replaceSync(``);\n", "import { HtmlReturnType } from '../types';\n\nconst selectorMap = new Map<string, [any[], any]>();\n\nconst matchObserver = new MutationObserver((mutations) => {\n  mutations.forEach((mutation) => {\n    if (mutation.addedNodes.length > 0 && mutation.type === 'childList') {\n      for (const node of mutation.addedNodes) {\n        if (node instanceof Element) {\n          for (const [selector, [props, config]] of selectorMap.entries()) {\n            const els = node.querySelectorAll(selector);\n            for (const el of els) HtmlTag(el as HTMLElement, props, config);\n          }\n        }\n      }\n    }\n  });\n});\nmatchObserver.observe(document, { attributes: true, childList: true, subtree: true });\n\nfunction AdoptElBySelector(selector: string, watch: boolean = true, config: any) {\n  return (...props: any[]) => {\n    // on mutation\n    if (watch) selectorMap.set(selector, [props, config]);\n    // onload\n    const els = document.querySelectorAll(selector);\n    for (const el of els) HtmlTag(el as HTMLElement, props, config);\n  };\n}\n\nfunction AdoptElByInstance(el: HTMLElement, config: any) {\n  return (...props: any[]) => HtmlTag(el, props, config);\n}\n\nfunction CreateEl(tag: string, config: any) {\n  return (...props: any[]) => {\n    const ns = 'http://www.w3.org/1999/xhtml';\n    const el = document.createElementNS(ns, tag as string);\n    return HtmlTag(el, props, config);\n  };\n}\n\nfunction HtmlTag(el: HTMLElement, traits: any[] = [], config: any = {}) {\n  traits.forEach(([trait, ...args]) => config[trait](el, ...args));\n  function fn(...children: any[]) {\n    children.forEach((child) => el.append(child));\n    return el;\n  }\n  return fn;\n}\n\nexport function HTML<P extends Record<string, any>>(config?: P) {\n  return new Proxy(\n    {},\n    {\n      get: (_, prop) => {\n        if (prop === 'el') return (el: HTMLElement) => AdoptElByInstance(el, config);\n        if (prop === '$el') return (selector: string, watch: boolean) => AdoptElBySelector(selector, watch, config);\n        return CreateEl(prop as string, config);\n      },\n    },\n  ) as HtmlReturnType<P>;\n}\n", "import { StateType } from '../../types';\n\ntype UseAttributeProps<T> = {\n  event?: keyof GlobalEventHandlersEventMap | null;\n  eventElement?: HTMLElement | Window;\n  hideOnFalse?: boolean;\n  invokeImmediately?: boolean;\n  mediaMaxWidth?: number;\n  mediaMinWidth?: number;\n  state?: StateType<T>;\n};\n\nexport function useAttribute(\n  props?: UseAttributeProps<any>,\n): (\n  el: HTMLElement,\n  prop: string,\n  val: (() => string | number | boolean) | (string | number | boolean),\n  condition?: boolean | (() => boolean),\n) => void;\n\nexport function useAttribute<T>(\n  props?: UseAttributeProps<T>,\n): (\n  el: HTMLElement,\n  prop: string,\n  val: ((state: T) => string | number | boolean) | (string | number | boolean),\n  condition?: ((state: T) => boolean) | boolean,\n) => void;\n\nexport function useAttribute<T>(props?: UseAttributeProps<T>) {\n  const {\n    event = null,\n    eventElement = window,\n    hideOnFalse = true,\n    invokeImmediately = true,\n    mediaMinWidth = 0,\n    mediaMaxWidth = Infinity,\n    state = undefined,\n  } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, prop, val, condition] = htmlProps;\n    // application\n    const apply = () => {\n      const isInBreakpoint = window.innerWidth >= mediaMinWidth && window.innerWidth <= mediaMaxWidth;\n      if (!isInBreakpoint) return;\n      const _val = state && typeof val === 'function' ? val(state.get()) : val;\n      const _isBool = String(_val) === 'true' || String(_val) === 'false';\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      if (_isBool && hideOnFalse && String(_val) === 'false') return el.removeAttribute(prop);\n      if (_isBool && _condition === false) return el.removeAttribute(prop);\n      if (_condition === false) return;\n      el.setAttribute(prop, String(_val));\n    };\n\n    // handle state changes\n    if (state) state.sub(apply);\n\n    // handle event changes\n    if (event) (el ?? eventElement).addEventListener(event, apply);\n\n    // handle breakpoint changes\n    window.addEventListener('resize', apply);\n\n    // apply immediately\n    if (invokeImmediately) apply();\n  };\n}\n", "import { StateType } from '../../types';\n\ntype UseClassNameProps<T> = {\n  event?: keyof GlobalEventHandlersEventMap | null;\n  eventElement?: HTMLElement | Window;\n  invokeImmediately?: boolean;\n  mediaMaxWidth?: number;\n  mediaMinWidth?: number;\n  method?: 'classList' | 'className';\n  state?: StateType<T> | null;\n};\n\nexport function useClassName(\n  props?: UseClassNameProps<any>,\n): (el: HTMLElement, className: string | (() => string), condition?: boolean | (() => boolean)) => void;\n\nexport function useClassName<T>(\n  props?: UseClassNameProps<T>,\n): (el: HTMLElement, className: string | ((state: T) => string), condition?: boolean | ((state: T) => boolean)) => void;\n\nexport function useClassName<T>(props?: UseClassNameProps<T>) {\n  const {\n    event = null,\n    eventElement = window,\n    invokeImmediately = true,\n    mediaMinWidth = 0,\n    mediaMaxWidth = Infinity,\n    method = 'classList',\n    state = null,\n  } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, className, condition] = htmlProps;\n    // application\n    const apply = () => {\n      const isInBreakpoint = window.innerWidth >= mediaMinWidth && window.innerWidth <= mediaMaxWidth;\n      if (!isInBreakpoint) return;\n      const _className = typeof className === 'function' ? className(state ? state.get() : undefined) : className;\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      if (_condition) method === 'className' ? el.setAttribute('class', _className) : el.classList.add(_className);\n    };\n\n    // handle state changes\n    if (state) state.sub(apply);\n\n    // handle event changes\n    if (event) (el ?? eventElement).addEventListener(event, apply);\n\n    // handle breakpoint changes\n    window.addEventListener('resize', apply);\n\n    // apply immediately\n    if (invokeImmediately) apply();\n  };\n}\n", "import { StateType } from '../../types';\n\ntype UseEventProps<T, E extends keyof GlobalEventHandlersEventMap> = {\n  event: E;\n  state?: StateType<T>;\n};\n\nexport function useEvent<E extends keyof GlobalEventHandlersEventMap>(\n  props?: UseEventProps<any, E>,\n): (\n  el: HTMLElement,\n  cb: (evt?: GlobalEventHandlersEventMap[E]) => void,\n  condition?: (() => boolean) | boolean | (() => boolean),\n) => void;\n\nexport function useEvent<T, E extends keyof GlobalEventHandlersEventMap>(\n  props?: UseEventProps<T, E>,\n): (\n  el: HTMLElement,\n  cb: (evt?: GlobalEventHandlersEventMap[E]) => void,\n  condition?: ((state: T) => boolean) | boolean | (() => boolean),\n) => void;\n\nexport function useEvent<T, E extends keyof GlobalEventHandlersEventMap>(props?: UseEventProps<T, E>) {\n  const { state, event } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, cb, condition] = htmlProps;\n    const apply = () => {\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      if (_condition) {\n        el.addEventListener(event, (e: E) => cb(e));\n      } else {\n        el.removeEventListener(event, (e: E) => cb(e));\n      }\n    };\n\n    // handle state changes\n    if (state) state.sub(apply);\n\n    // apply immediately\n    apply();\n  };\n}\n\n// export const useEvent =\n//   <E extends keyof GlobalEventHandlersEventMap>(evt: E) =>\n//   (el: HTMLElement, cb: (evt: GlobalEventHandlersEventMap[E]) => any, condition?: (() => boolean) | boolean) => {\n//     (typeof condition === 'function' ? condition() : condition ?? true) ? el.addEventListener(evt, cb) : null;\n//   };\n", "import { StateType } from '../../types';\n\ntype UseInnerHTMLProps<T> = {\n  state: StateType<T>;\n};\n\nexport function useInnerHTML<T>({\n  state,\n}: UseInnerHTMLProps<T>): (\n  el: HTMLElement,\n  children: (state: T) => string | number | HTMLElement | (string | number | HTMLElement)[],\n  condition?: ((state: T) => boolean) | boolean,\n) => void;\n\nexport function useInnerHTML(): (\n  el: HTMLElement,\n  children: () => string | number | HTMLElement | (string | number | HTMLElement)[],\n  condition?: (() => boolean) | boolean,\n) => void;\n\nexport function useInnerHTML<T>(props?: UseInnerHTMLProps<T>) {\n  const { state } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, children, condition] = htmlProps;\n    const apply = () => {\n      const _children = state ? children(state.get()) : children();\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      if (_condition) {\n        el.innerHTML = '';\n        if (Array.isArray(_children)) {\n          _children.forEach((c) => {\n            if (c instanceof HTMLElement) el.appendChild(c);\n            else el.appendChild(document.createTextNode(String(c)));\n          });\n        } else if (_children instanceof HTMLElement) {\n          el.appendChild(_children);\n        } else {\n          el.innerHTML = String(_children);\n        }\n      }\n    };\n    if (state) state.sub(apply);\n    apply();\n  };\n}\n", "import { StateType } from '../../types';\n\ntype UseStyleProps<T> = {\n  event?: keyof GlobalEventHandlersEventMap | null;\n  eventElement?: HTMLElement | Window;\n  invokeImmediately?: boolean;\n  mediaMaxWidth?: number;\n  mediaMinWidth?: number;\n  mediaType?: 'screen' | 'print';\n  state?: StateType<T>;\n};\n\nexport function useStyle(\n  props?: UseStyleProps<any>,\n): (\n  el: HTMLElement,\n  prop: keyof CSSStyleDeclaration | `--${string}`,\n  val: (() => string | number) | (string | number),\n  condition?: boolean | (() => boolean),\n) => void;\n\nexport function useStyle<T>(\n  props?: UseStyleProps<T>,\n): (\n  el: HTMLElement,\n  prop: keyof CSSStyleDeclaration | `--${string}`,\n  val: ((state: T) => string | number) | (string | number),\n  condition?: boolean | ((state: T) => boolean),\n) => void;\n\nexport function useStyle<T>(props?: UseStyleProps<T>) {\n  const {\n    event = null,\n    eventElement = window,\n    invokeImmediately = true,\n    mediaMinWidth = 0,\n    mediaMaxWidth = Infinity,\n    state = undefined,\n  } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, prop, val, condition] = htmlProps;\n    const apply = () => {\n      const isInBreakpoint = window.innerWidth >= mediaMinWidth && window.innerWidth <= mediaMaxWidth;\n      if (!isInBreakpoint) return;\n      const _val = String(typeof val === 'function' ? val(state ? state.get() : undefined) : val);\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      _condition\n        ? prop.startsWith('--')\n          ? el.style.setProperty(prop, _val)\n          : (el.style[prop as any] = _val as any)\n        : null;\n    };\n\n    // handle state changes\n    if (state) state.sub(apply);\n\n    // handle resize changes\n    window.addEventListener('resize', apply);\n\n    // handle event changes\n    if (event) (el ?? eventElement).addEventListener(event, apply);\n\n    // apply immediately\n    if (invokeImmediately && !event) apply();\n  };\n}\n", "import { StateType } from '../types';\n\nfunction deepSet<T>(obj: T, pathKeys: string, value: any): T {\n  const path = pathKeys.split('.');\n  const update = (obj: any, path: (string | number)[], value: any): any => {\n    const [head, ...tail] = path;\n    if (tail.length === 0) {\n      return Array.isArray(obj)\n        ? [...obj.slice(0, head as number), value, ...obj.slice((head as number) + 1)]\n        : { ...obj, [head]: value };\n    }\n\n    if (obj[head] === undefined) {\n      obj[head] = typeof tail[0] === 'number' ? [] : {};\n    }\n\n    return {\n      ...obj,\n      [head]: update(obj[head], tail, value),\n    };\n  };\n\n  return update(obj, path as (string | number)[], value);\n}\n\ntype Persistence = {\n  key: string;\n  storage: Storage;\n  overwrite?: boolean;\n};\n\nexport function State<T>(param: T, persistence?: Persistence): StateType<T> {\n  const originalParam: T = param;\n\n  // handle persistence defaults\n  if (persistence) {\n    const storageParam: any = persistence.storage.getItem(persistence.key);\n    const parsedStorageParam = JSON.parse(storageParam);\n    const isStorageParamValid = parsedStorageParam !== null && parsedStorageParam !== undefined;\n    if ((persistence.overwrite ?? true) && isStorageParamValid) param = parsedStorageParam;\n    if (!(persistence.overwrite ?? true) && isStorageParamValid) {\n      if (Array.isArray(param) && Array.isArray(parsedStorageParam)) {\n        param = [...param, ...parsedStorageParam] as any;\n      } else if (typeof param === 'object' && typeof parsedStorageParam === 'object') {\n        param = { ...param, ...parsedStorageParam };\n      }\n    }\n  }\n\n  let _param: T = param;\n  const _subscribers: ((param: T) => any)[] = [];\n  const _get = (): T => _param;\n  const _pub = () => _subscribers.forEach((i) => i(_param));\n  const _reduce = (cb: (param: T) => T) => () => _set(cb(_param));\n  const _reset = () => _set(originalParam);\n  const _set = (param: T) => {\n    _param = param;\n    _subscribers.forEach((i) => i(_param));\n    if (persistence) persistence.storage.setItem(persistence.key, JSON.stringify(_param));\n  };\n  const _deepSet = (path: string, value: any) => _set(deepSet(_param, path, value));\n  const _sub = (cb: (param: T) => any) => _subscribers.push(cb);\n  const _unsub = (cb: (param: T) => any) => _subscribers.splice(_subscribers.indexOf(cb), 1);\n  return {\n    deepSet: _deepSet,\n    get: _get,\n    pub: _pub,\n    reset: _reset,\n    reduce: _reduce,\n    set: _set,\n    sub: _sub,\n    unsub: _unsub,\n  };\n}\n", "export type ButtonSettings = {\n  bgColorHoverToken: `--${string}`;\n  bgColorToken: `--${string}`;\n  borderColorToken: `--${string}`;\n  borderRadius: number;\n  borderWidth: number;\n  colorHoverToken: `--${string}`;\n  colorToken: `--${string}`;\n  fontSize: number;\n  fontWeight: number;\n  lineHeight: number;\n};\n\nexport const DEFAULT_BUTTON_SETTINGS: ButtonSettings = {\n  bgColorHoverToken: \"--background-700\",\n  bgColorToken: \"--background-500\",\n  borderColorToken: \"--foreground-100\",\n  borderRadius: 0.35,\n  borderWidth: 0.25,\n  colorHoverToken: \"--text-500\",\n  colorToken: \"--text-500\",\n  fontSize: 1.5,\n  fontWeight: 500,\n  lineHeight: 3,\n};\n", "export type DropdownSettings = {\n  bgColorHoverToken: `--${string}`;\n  bgColorToken: `--${string}`;\n  borderColorToken: `--${string}`;\n  borderRadius: number;\n  borderWidth: number;\n  colorHoverToken: `--${string}`;\n  colorToken: `--${string}`;\n  fontSize: number;\n  fontWeight: number;\n  lineHeight: number;\n};\n\nexport const DEFAULT_DROPDOWN_SETTINGS: DropdownSettings = {\n  bgColorHoverToken: \"--background-700\",\n  bgColorToken: \"--background-500\",\n  borderColorToken: \"--foreground-100\",\n  borderRadius: 0.35,\n  borderWidth: 0.25,\n  colorHoverToken: \"--text-500\",\n  colorToken: \"--text-500\",\n  fontSize: 1.5,\n  fontWeight: 500,\n  lineHeight: 3,\n};\n", "import { State } from \"@linttrap/oem\";\nimport { ButtonSettings, DEFAULT_BUTTON_SETTINGS } from \"./components/button/button-vars\";\nimport { DEFAULT_DROPDOWN_SETTINGS, DropdownSettings } from \"./components/dropdown/dropdown-vars\";\n\ntype Palette = {\n  black: string;\n  white: string;\n  blue: string;\n  yellow: string;\n  red: string;\n  green: string;\n  orange: string;\n  purple: string;\n  pink: string;\n};\n\ntype Semantic = {\n  action: keyof Palette;\n  background: keyof Palette;\n  brand: keyof Palette;\n  error: keyof Palette;\n  foreground: keyof Palette;\n  info: keyof Palette;\n  success: keyof Palette;\n  text: keyof Palette;\n  warning: keyof Palette;\n};\n\ntype Theme = {\n  colors: {\n    palette: Palette;\n    semantic: Semantic;\n    saturationRange: number;\n    lightnessRange: number;\n  };\n  button: ButtonSettings;\n  dropdown: DropdownSettings;\n  scaling: {\n    borders: number;\n    colGap: number;\n    icon: number;\n    padding: number;\n    rowGap: number;\n    text: number;\n    weight: number;\n  };\n};\n\nconst DEFAULT_THEMES: Record<string, Theme> = {\n  pastel: {\n    colors: {\n      palette: {\n        black: \"#333333\",\n        red: \"#d38459\",\n        orange: \"#f1be78\",\n        yellow: \"#fffacd\",\n        green: \"#77dd77\",\n        blue: \"#aec6cf\",\n        purple: \"#c3b1e1\",\n        pink: \"#ffb6c1\",\n        white: \"#e2e2e2\",\n      },\n      semantic: {\n        action: \"blue\",\n        background: \"blue\",\n        brand: \"red\",\n        error: \"red\",\n        foreground: \"white\",\n        info: \"blue\",\n        success: \"green\",\n        text: \"black\",\n        warning: \"yellow\",\n      },\n      saturationRange: 1,\n      lightnessRange: 1,\n    },\n    button: {\n      ...DEFAULT_BUTTON_SETTINGS,\n      colorToken: \"--black-600\",\n      fontSize: 1.25,\n      lineHeight: 4,\n      borderWidth: 0.25,\n      bgColorToken: \"--background-700\",\n      bgColorHoverToken: \"--background-800\",\n      borderColorToken: \"--background-400\",\n    },\n    dropdown: {\n      ...DEFAULT_DROPDOWN_SETTINGS,\n      colorToken: \"--black-600\",\n      fontSize: 1.25,\n      lineHeight: 4,\n      borderWidth: 0.25,\n      bgColorToken: \"--background-700\",\n      bgColorHoverToken: \"--background-800\",\n      borderColorToken: \"--background-400\",\n    },\n    scaling: {\n      borders: 1,\n      colGap: 1,\n      icon: 1,\n      padding: 1,\n      rowGap: 1,\n      text: 1,\n      weight: 1,\n    },\n  },\n  rich: {\n    colors: {\n      palette: {\n        black: \"#000000\",\n        red: \"#b22222\",\n        orange: \"#ff4500\",\n        yellow: \"#ffd700\",\n        green: \"#006400\",\n        blue: \"#00008b\",\n        purple: \"#4b0082\",\n        pink: \"#ff1493\",\n        white: \"#f5f5f5\",\n      },\n      semantic: {\n        action: \"blue\",\n        background: \"black\",\n        brand: \"red\",\n        error: \"red\",\n        foreground: \"black\",\n        info: \"blue\",\n        success: \"green\",\n        text: \"white\",\n        warning: \"yellow\",\n      },\n      saturationRange: 0.1,\n      lightnessRange: 0.25,\n    },\n    button: DEFAULT_BUTTON_SETTINGS,\n    dropdown: DEFAULT_DROPDOWN_SETTINGS,\n    scaling: {\n      borders: 1,\n      colGap: 1,\n      icon: 1,\n      padding: 1,\n      rowGap: 1,\n      text: 1,\n      weight: 1,\n    },\n  },\n};\n\nexport const themes = State<Record<string, Theme>>(DEFAULT_THEMES);\n\nexport const theme = State<string>(\"pastel\", {\n  key: \"theme\",\n  storage: sessionStorage,\n});\n\n// export type Tokens = {\n//   colors: {\n//     background: [color: string, contrast: string];\n//     foreground: [color: string, contrast: string];\n//     brand: [color: string, contrast: string];\n//     error: [color: string, contrast: string];\n//     info: [color: string, contrast: string];\n//     active: [color: string, contrast: string];\n//     passive: [color: string, contrast: string];\n//     success: [color: string, contrast: string];\n//     warning: [color: string, contrast: string];\n//     black: [color: string, contrast: string];\n//     neutral: [color: string, contrast: string];\n//     white: [color: string, contrast: string];\n//   };\n//   fonts: {\n//     primary: string;\n//     secondary: string;\n//     tertiary: string;\n//   };\n//   sizing: {\n//     padding: number;\n//     margin: number;\n//     fonts: number;\n//   };\n//   // expression:{} // TBD\n// };\n\n// export type Colors = keyof Tokens[\"colors\"];\n// export const colorPickerState = State<Colors>(\"black\", {\n//   key: \"colorPicker\",\n//   storage: sessionStorage,\n// });\n\n// export type Pages = \"ACCORDION\" | \"HOME\" | \"THEME\" | \"UTILITY\";\n// const page = new URLSearchParams(window.location.search).get(\"page\") as Pages;\n// export const pageState = State<Pages>(page ?? \"HOME\", {\n//   key: \"page\",\n//   storage: sessionStorage,\n// });\n\n// export type Properties = \"COLOR_PICKER\";\n// export const propertiesState = State<Properties>(\"COLOR_PICKER\", {\n//   key: \"properties\",\n//   storage: sessionStorage,\n// });\n\n// export type Themes = \"dark\" | \"light\" | \"pastel\" | \"cafe\" | \"ocean\";\n// export const themeState = State<Themes>(\"dark\", {\n//   key: \"theme\",\n//   storage: sessionStorage,\n// });\n\n// const DEFAULT_THEMES: Record<string, Tokens> = {\n//   dark: {\n//     colors: {\n//       background: [\"#212121\", \"#bababa\"],\n//       brand: [\"#9e93b4\", \"#FFFFFF\"],\n//       error: [\"#da7272\", \"#44313f\"],\n//       foreground: [\"#383838\", \"#FFFFFF\"],\n//       info: [\"#87B5D9\", \"#283443\"],\n//       active: [\"#5f9ece\", \"#324153\"],\n//       passive: [\"#c2c2c2\", \"#262626\"],\n//       success: [\"#578557\", \"#c5d3c5\"],\n//       warning: [\"#dab350\", \"#494022\"],\n//       black: [\"#212121\", \"#FFFFFF\"],\n//       neutral: [\"#3d3d3d\", \"#bababa\"],\n//       white: [\"#e6e6e6\", \"#5c5c5c\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n//   light: {\n//     colors: {\n//       background: [\"#dedede\", \"#969696\"],\n//       brand: [\"#9e93b4\", \"#FFFFFF\"],\n//       error: [\"#da7272\", \"#44313f\"],\n//       foreground: [\"#d1d1d1\", \"#949494\"],\n//       info: [\"#87B5D9\", \"#283443\"],\n//       active: [\"#5f9ece\", \"#324153\"],\n//       passive: [\"#c2c2c2\", \"#999999\"],\n//       success: [\"#578557\", \"#c5d3c5\"],\n//       warning: [\"#dab350\", \"#494022\"],\n//       black: [\"#212121\", \"#FFFFFF\"],\n//       neutral: [\"#3d3d3d\", \"#bababa\"],\n//       white: [\"#e6e6e6\", \"#5c5c5c\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n//   pastel: {\n//     colors: {\n//       background: [\"#FFB6C1\", \"#FFFACD\"],\n//       brand: [\"#FFB6C1\", \"#E0FFFF\"],\n//       error: [\"#FFA07A\", \"#87CEFA\"],\n//       foreground: [\"#D8BFD8\", \"#FFD700\"],\n//       info: [\"#B0E0E6\", \"#98FB98\"],\n//       active: [\"#FFDAB9\", \"#DDA0DD\"],\n//       passive: [\"#FFDEAD\", \"#F0E68C\"],\n//       success: [\"#98FB98\", \"#FF6A6A\"],\n//       warning: [\"#FFD700\", \"#90EE90\"],\n//       black: [\"#D3D3D3\", \"#FFFFE0\"],\n//       neutral: [\"#808080\", \"#FFFFFF\"],\n//       white: [\"#FFFFFF\", \"#D3D3D3\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n//   cafe: {\n//     colors: {\n//       background: [\"#3E2723\", \"#FFD54F\"],\n//       brand: [\"#795548\", \"#D7CCC8\"],\n//       error: [\"#D32F2F\", \"#C5E1A5\"],\n//       foreground: [\"#5D4037\", \"#FFEB3B\"],\n//       info: [\"#627f8d\", \"#FFCC80\"],\n//       active: [\"#659cb3\", \"#ffffff\"],\n//       passive: [\"#FFA726\", \"#3e2723\"],\n//       success: [\"#388E3C\", \"#ffffff\"],\n//       warning: [\"#ff8000\", \"#ffffff\"],\n//       black: [\"#4E342E\", \"#FFECB3\"],\n//       neutral: [\"#808080\", \"#FFFFFF\"],\n//       white: [\"#FFFFFF\", \"#757575\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n//   ocean: {\n//     colors: {\n//       background: [\"#001F3F\", \"#7FDBFF\"],\n//       brand: [\"#0074D9\", \"#39CCCC\"],\n//       error: [\"#FF4136\", \"#85144b\"],\n//       foreground: [\"#001F3F\", \"#FFDC00\"],\n//       info: [\"#39CCCC\", \"#3D9970\"],\n//       active: [\"#FF851B\", \"#B10DC9\"],\n//       passive: [\"#FFDC00\", \"#FF4136\"],\n//       success: [\"#2ECC40\", \"#FF4136\"],\n//       warning: [\"#FF851B\", \"#2ECC40\"],\n//       black: [\"#001F3F\", \"#7FDBFF\"],\n//       neutral: [\"#808080\", \"#FFFFFF\"],\n//       white: [\"#DDDDDD\", \"#001F3F\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n// };\n\n// export const themesState = State<Record<Themes, Tokens>>(DEFAULT_THEMES, {\n//   key: \"tokens\",\n//   storage: sessionStorage,\n// });\n\n// export const tokensEnabledState = State<boolean>(true, {\n//   key: \"tokensEnabled\",\n//   storage: sessionStorage,\n// });\n", "import { theme, themes } from \"../../state\";\nimport { DEFAULT_BUTTON_SETTINGS } from \"./button-vars\";\n\nexport const buttonStyleSheet = new CSSStyleSheet();\n\nexport const renderButtonStyleSheet = () => {\n  const settings = theme.get() !== \"none\" ? themes.get()[theme.get()].button : DEFAULT_BUTTON_SETTINGS;\n\n  return buttonStyleSheet.replaceSync(`\n.button { \n  --button-bg-color: var(${settings.bgColorToken}, black);\n  --button-bg-color-hover: var(${settings.bgColorHoverToken}, rgba(0, 0, 0, 0.1));\n  --button-border-color: var(${settings.borderColorToken}, black);\n  --button-border-radius: ${settings.borderRadius}ch;\n  --button-border-width: ${settings.borderWidth}ch;\n  --button-color: var(${settings.colorToken}, white);\n  --button-color-hover: var(${settings.colorHoverToken}, black);\n  --button-font-size: ${settings.fontSize}ch;\n  --button-font-weight: ${settings.fontWeight};\n  --button-line-height: ${settings.lineHeight}ch;\n  --button-arrow-size: ${settings.fontSize * 0.5}ch;\n\n  appearance: none;\n  background-color: var(--button-bg-color);\n  border-radius: var(--button-border-radius);\n  border: var(--button-border-width) solid var(--button-border-color);\n  color: var(--button-color);\n  cursor: pointer;\n  display: block;\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  line-height: var(--button-line-height);\n  padding: 0 calc(var(--button-line-height) * 1.5) 0 calc(var(--button-line-height) / 2);\n  position: relative;\n  width: 100%;\n}\n\n.button[disabled] {\n    cursor: not-allowed;\n    opacity: 0.45;\n}\n\n.button:hover {\n    background-color: var(--button-bg-color-hover);\n    color: var(--button-color-hover);\n}\n`);\n};\n", "export const cardStyleSheet = new CSSStyleSheet();\n\nexport const renderCardStyleSheet = () =>\n  cardStyleSheet.replaceSync(`.card {\n  /* Settings */\n  --card-bg-color: inherit;\n  --card-font-family: inherit;\n  --card-font-size: inherit;\n  --card-text-color: inherit;\n  --card-inner-border-color: inherit;\n  --card-inner-border-width: inherit;\n  --card-outer-border-color: inherit;\n  --card-outer-border-radius: inherit;\n  --card-outer-border-width: inherit;\n  --card-spacing: inherit;\n  --card-transition-duration: inherit;\n  --card-transition-timing: inherit;\n\n  &.card--small {\n    --card-spacing: 10px;\n    --card-font-size: 14px;\n    --card-outer-border-radius: 4px;\n    --card-outer-border-width: 1px;\n    --card-inner-border-width: 0px;\n  }\n\n  &.card--medium {\n    --card-spacing: 15px;\n    --card-font-size: 16px;\n    --card-outer-border-radius: 8px;\n    --card-outer-border-width: 2px;\n    --card-inner-border-width: 1px;\n  }\n\n  &.card--large {\n    --card-spacing: 20px;\n    --card-font-size: 18px;\n    --card-outer-border-radius: 12px;\n    --card-outer-border-width: 3px;\n    --card-inner-border-width: 2px;\n  }\n\n  &.card--dark {\n    --card-bg-color: var(--token-black, black);\n    --card-text-color: var(--token-white, white);\n    --card-inner-border-color: var(--token-white-20, white);\n    --card-outer-border-color: var(--token-black, black);\n    &.card--ghost {\n      --card-bg-color: var(--token-black-10, black);\n      --card-text-color: var(--token-black, black);\n      --card-inner-border-color: var(--token-black-20, black);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-black, black);\n      --card-inner-border-color: var(--token-black-20, black);\n      --card-outer-border-color: var(--token-black-70, black);\n    }\n  }\n\n  &.card--error {\n    --card-bg-color: var(--token-red);\n    --card-text-color: var(--token-white, white);\n    --card-inner-border-color: var(--token-white-30, white);\n    --card-outer-border-color: var(--token-red, red);\n    &.card--ghost {\n      --card-bg-color: var(--token-red-10, red);\n      --card-text-color: var(--token-red, red);\n      --card-inner-border-color: var(--token-red-30, red);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-red, red);\n      --card-inner-border-color: var(--token-red-30, red);\n      --card-outer-border-color: var(--token-red, red);\n    }\n  }\n\n  &.card--info {\n    --card-bg-color: var(--token-blue);\n    --card-text-color: var(--token-white, white);\n    --card-inner-border-color: var(--token-white-30, white);\n    --card-outer-border-color: var(--token-blue, blue);\n    &.card--ghost {\n      --card-bg-color: var(--token-blue-10, blue);\n      --card-text-color: var(--token-blue, blue);\n      --card-inner-border-color: var(--token-blue-30, blue);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-blue, blue);\n      --card-inner-border-color: var(--token-blue-30, blue);\n      --card-outer-border-color: var(--token-blue, blue);\n    }\n  }\n\n  &.card--light {\n    --card-bg-color: var(--token-white, white);\n    --card-text-color: var(--token-black, black);\n    --card-inner-border-color: var(--token-black-20, black);\n    --card-outer-border-color: var(--token-white, white);\n    &.card--ghost {\n      --card-bg-color: var(--token-white-05, white);\n      --card-text-color: var(--token-white, white);\n      --card-inner-border-color: var(--token-white-20, white);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-white, white);\n      --card-inner-border-color: var(--token-white-20, white);\n      --card-outer-border-color: var(--token-white-70, white);\n    }\n  }\n\n  &.card--success {\n    --card-bg-color: var(--token-green);\n    --card-text-color: var(--token-white, white);\n    --card-inner-border-color: var(--token-white-30, white);\n    --card-outer-border-color: var(--token-green, green);\n    &.card--ghost {\n      --card-bg-color: var(--token-green-10, green);\n      --card-text-color: var(--token-green, green);\n      --card-inner-border-color: var(--token-green-30, green);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-green, green);\n      --card-inner-border-color: var(--token-green-20, green);\n      --card-outer-border-color: var(--token-green, green);\n    }\n  }\n\n  &.card--warning {\n    --card-bg-color: var(--token-yellow);\n    --card-text-color: var(--token-black, black);\n    --card-inner-border-color: var(--token-black-20, black);\n    --card-outer-border-color: var(--token-yellow, yellow);\n    &.card--ghost {\n      --card-bg-color: var(--token-yellow-10, yellow);\n      --card-text-color: var(--token-yellow, yellow);\n      --card-inner-border-color: var(--token-yellow-20, yellow);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-yellow, yellow);\n      --card-inner-border-color: var(--token-yellow-20, yellow);\n      --card-outer-border-color: var(--token-yellow, yellow);\n    }\n  }\n\n  /* Rules */\n  background-color: var(--card-bg-color);\n  border-radius: var(--card-outer-border-radius);\n  border-style: solid;\n  border-width: var(--card-outer-border-width);\n  border-color: var(--card-outer-border-color);\n  display: grid;\n  grid-template-areas: \"card__title card__actions\" \"card__body card__body\" \"card__footer card__footer\";\n  grid-template-rows: max-content 1fr max-content;\n  font-family: var(--card-font-family);\n  font-size: var(--card-font-size);\n  font-weight: normal;\n  row-gap: var(--card-spacing);\n  padding: var(--card-spacing);\n  text-align: left;\n  transition: all var(--card-transition-duration, 0.3s) var(--card-transition-timing, ease);\n\n  .card__actions {\n    align-items: center;\n    border-bottom: var(--card-inner-border-width) solid var(--card-inner-border-color);\n    display: flex;\n    flex-wrap: wrap;\n    grid-area: card__actions;\n    justify-content: flex-end;\n    padding-bottom: calc(var(--card-spacing) / 2);\n  }\n\n  .card__body {\n    grid-area: card__body;\n  }\n\n  .card__footer {\n    align-items: center;\n    border-top: var(--card-inner-border-width) solid var(--card-inner-border-color);\n    display: flex;\n    grid-area: card__footer;\n    padding-top: calc(var(--card-spacing) / 2);\n    justify-content: flex-end;\n  }\n\n  .card__title {\n    align-items: center;\n    border-bottom: var(--card-inner-border-width) solid var(--card-inner-border-color);\n    color: var(--card-text-color);\n    display: flex;\n    font-size: var(--card-font-large);\n    font-weight: bold;\n    grid-area: card__title;\n    padding-bottom: calc(var(--card-spacing) / 2);\n  }\n}\n`);\n", "export const dashboardStyleSheet = new CSSStyleSheet();\n\nexport const renderDashboardStyleSheet = () => {\n  const bg = `var(--token-color-background, black)`;\n  const bgHueVar = `var(--token-color-background-hue)`;\n  const bgSaturationVar = `var(--token-color-background-saturation)`;\n  const bgLightnessVar = `var(--token-color-background-lightness)`;\n  const bgContrast = `--token-color-background-contrast`;\n\n  const vars = `\n  .dashboard {\n\n    --dashboard-overflow-y: hidden;\n    --dashboard-rows: auto auto;\n    --dashboard-text-color: var(${bgContrast}, black);\n    --dashboard-max-height: auto;\n    --dashboard-bg-color: var(${bg}, black);\n    --dashboard-columns: 1fr 1fr 1fr;\n    --dashboard-overflow: auto;\n    --dashboard-overflow-y: auto;\n\n    --dashboard-aside-bg-color: hsl(${bgHueVar}, ${bgSaturationVar}, calc(${bgLightnessVar} + 1.5%));\n    --dashboard-aside-body-column: 1/4;\n    --dashboard-aside-body-row: 6/7;\n    --dashboard-aside-body-padding: 20px;\n    --dashboard-aside-footer-column: 1/4;\n    --dashboard-aside-footer-row: 8/9;\n    --dashboard-aside-footer-padding: 20px;\n    --dashboard-aside-header-column: 1/4;\n    --dashboard-aside-header-row: 5/6;\n    --dashboard-aside-header-padding: 20px;\n    \n    --dashboard-main-bg-color: hsl(${bgHueVar}, ${bgSaturationVar}, calc(${bgLightnessVar} + 0%));\n    --dashboard-main-body-column: 1/4;\n    --dashboard-main-body-row: 4/5;\n    --dashboard-main-body-padding: 20px;\n    --dashboard-main-footer-column: 1/4;\n    --dashboard-main-footer-row: 10/11;\n    --dashboard-main-footer-padding: 20px;\n    --dashboard-main-header-column: 1/4;\n    --dashboard-main-header-row: 3/4;\n    --dashboard-main-header-padding: 20px;\n\n    --dashboard-nav-bg-color: hsl(${bgHueVar}, ${bgSaturationVar}, calc(${bgLightnessVar} + 1.5%));\n    --dashboard-nav-body-column: 1/4;\n    --dashboard-nav-body-row: 2/3;\n    --dashboard-nav-body-padding: 20px;\n    --dashboard-nav-footer-column: 1/4;\n    --dashboard-nav-footer-row: 9/10;\n    --dashboard-nav-footer-padding: 20px;\n    --dashboard-nav-header-column: 1/4;\n    --dashboard-nav-header-row: 1/2;\n    --dashboard-nav-header-padding: 0;\n}`;\n\n  const tablet = `@media (min-width: 768px) {\n.dashboard {\n    --dashboard-columns: 1fr 3fr 1fr;\n    --dashboard-rows: min-content 1fr min-content;\n    --dashboard-overflow: hidden;\n    --dashboard-overflow-y: auto;\n    --dashboard-max-height: 100vh;\n\n    --dashboard-aside-body-column: 3/4;\n    --dashboard-aside-footer-column: 3/4;\n    --dashboard-aside-footer-row: 3/4;\n    --dashboard-aside-header-column: 3/4;\n    --dashboard-aside-header-row: 1/2;\n    --dashboard-aside-body-row: 2/3;\n\n    --dashboard-main-body-column: 2/3;\n    --dashboard-main-footer-column: 2/3;\n    --dashboard-main-footer-row: 3/4;\n    --dashboard-main-header-column: 2/3;\n    --dashboard-main-header-row: 1/2;\n    --dashboard-main-body-row: 2/3;\n\n    --dashboard-nav-body-column: 1/2;\n    --dashboard-nav-footer-column: 1/2;\n    --dashboard-nav-footer-row: 3/4;\n    --dashboard-nav-header-column: 1/2;\n    --dashboard-nav-header-row: 1/2;\n    --dashboard-nav-body-row: 2/3;\n    }\n}`;\n\n  const rules = `\n\n.dashboard {\n    align-items: flex-start;\n    background-color: var(--dashboard-bg-color);\n    box-sizing: border-box;\n    color: var(--dashboard-text-color, white);\n    display: grid;\n    grid-template-columns: var(--dashboard-columns, 1fr);\n    grid-template-rows: var(--dashboard-rows, auto);\n    height: var(--dashboard-max-height, auto);\n    max-height: var(--dashboard-max-height, auto);\n    overflow-y: var(--dashboard-overflow, auto);\n}\n\n.dashboard__nav-header {\n    align-items: center;\n    background-color: var(--dashboard-nav-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-nav-header-column, 1/2);\n    grid-row: var(--dashboard-nav-header-row, 1/2);\n    height: 100%;\n    padding: var(--dashboard-nav-header-padding, 20px);\n}\n\n.dashboard__nav {\n    align-items: center;\n    background-color: var(--dashboard-nav-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-nav-body-column, 1/2);\n    grid-row: var(--dashboard-nav-body-row, 2/3);\n    height: 100%;\n    justify-content: flex-start;\n    overflow-y: var(--dashboard-overflow-y, auto);\n    padding: var(--dashboard-nav-body-padding, 20px);\n}\n\n.dashboard__nav-footer {\n    background-color: var(--dashboard-nav-bg-color);\n    grid-column: var(--dashboard-nav-footer-column, 1/2);\n    grid-row: var(--dashboard-nav-footer-row, 3/4);\n    height: 100%;\n    padding: var(--dashboard-nav-footer-padding, 20px);\n}\n\n.dashboard__main-header {\n    align-items: flex-start;\n    background-color: var(--dashboard-main-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-main-header-column, 2/3);\n    grid-row: var(--dashboard-main-header-row, 1/2);\n    height: 100%;\n    justify-content: center;\n    padding: var(--dashboard-main-header-padding, 20px);\n}\n\n.dashboard__main {\n    align-items: flex-start;\n    background-color: var(--dashboard-main-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-main-body-column, 2/3);\n    grid-row: var(--dashboard-main-body-row, 2/3);\n    height: 100%;\n    overflow-y: var(--dashboard-overflow-y, auto);\n    padding: var(--dashboard-main-body-padding, 20px);\n}\n\n.dashboard__main-footer {\n    background-color: var(--dashboard-main-bg-color);\n    grid-row: var(--dashboard-main-footer-row, 3/4);\n    grid-column: var(--dashboard-main-footer-column, 2/3);\n    height: 100%;\n    padding: var(--dashboard-main-footer-padding, 20px);\n}\n\n.dashboard__aside-header {\n    align-items: flex-end;\n    background-color: var(--dashboard-aside-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-aside-header-column, 3/4);\n    grid-row: var(--dashboard-aside-header-row, 1/2);\n    height: 100%;\n    justify-content: center;\n    padding: var(--dashboard-aside-header-padding, 20px);\n}\n\n.dashboard__aside {\n    background-color: var(--dashboard-aside-bg-color);\n    grid-column: var(--dashboard-aside-body-column, 3/4);\n    grid-row: var(--dashboard-aside-body-row, 2/3);\n    height: 100%;\n    overflow-y: var(--dashboard-overflow-y, auto);\n    padding: var(--dashboard-aside-body-padding, 20px);\n}\n\n.dashboard__aside-footer {\n    background-color: var(--dashboard-aside-bg-color);\n    grid-column: var(--dashboard-aside-footer-column, 3/4);\n    grid-row: var(--dashboard-aside-footer-row, 3/4);\n    height: 100%;\n    padding: var(--dashboard-aside-footer-padding, 20px);\n}`;\n\n  return dashboardStyleSheet.replaceSync(`${vars}${tablet}${rules}`);\n};\n", "export const dialogStyleSheet = new CSSStyleSheet();\n\nexport const renderDialogStyleSheet = () =>\n  dialogStyleSheet.replaceSync(`:root {\n  --dialog-bg-color: var(--token-black, black);\n  --dialog-border-radius: 8px;\n  --dialog-close-size: 13px;\n  --dialog-gap: 0px;\n  --dialog-max-height: 90vh;\n  --dialog-max-width: 90vh;\n  --dialog-scrollbar-thumb-color: var(--token-white-10, black);\n  --dialog-scrollbar-track-color: var(--token-white-02, black);\n  --dialog-spacing: 16px;\n  --dialog-text-color: var(--token-white, white);\n  --dialog-title-size: 20px;\n}\n\n.dialog[open] {\n  align-items: center;\n  backdrop-filter: blur(2px); /* Optional: Adds a blur effect to the background elements */\n  background-color: var(--token-white-03, white); /* Optional: for dimming the background */\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 1000; /* High z-index to ensure it is on top */\n}\n\n.dialog__view {\n  background: var(--dialog-bg-color);\n  border-radius: var(--dialog-border-radius);\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  display: flex;\n  flex-direction: column;\n  gap: var(--dialog-gap);\n  height: var(--dialog-max-height);\n  width: var(--dialog-max-width);\n}\n\n.dialog__header {\n  align-items: center;\n  color: var(--token-white);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-size: var(--dialog-title-size);\n  border-bottom: 1px solid var(--token-white-10);\n  padding: var(--dialog-spacing);\n}\n\n.dialog__body {\n  flex: 1;\n  overflow-y: auto; /* Ensure only vertical scrolling */\n  max-height: calc(var(--dialog-max-height) - 60px); /* Subtract header and footer heights */\n  padding: var(--dialog-spacing);\n}\n\n.dialog__footer {\n  padding: var(--dialog-spacing);\n  border-top: 1px solid var(--token-white-10);\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  gap: var(--dialog-spacing);\n}\n\n/* Scrollbar styling */\n.dialog__body::-webkit-scrollbar {\n  width: 10px;\n  background-color: var(--dialog-scrollbar-track-color);\n}\n\n.dialog__body::-webkit-scrollbar-track {\n  background-color: var(--dialog-scrollbar-track-color);\n}\n\n.dialog__body::-webkit-scrollbar-thumb {\n  background-color: var(--dialog-scrollbar-thumb-color);\n  border-radius: 5px;\n}\n\n/* Modifier classes for different dialog sizes */\n.dialog--full-screen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  border-radius: 0;\n}\n\n.dialog--big {\n  width: 80%;\n  max-width: 800px;\n  height: 60%;\n}\n\n.dialog--medium {\n  width: 60%;\n  max-width: 600px;\n  height: 50%;\n}\n\n.dialog--small {\n  width: 40%;\n  max-width: 400px;\n  height: 40%;\n}\n\n/* Responsive adjustments */\n@media (max-width: 600px) {\n  .dialog--big,\n  .dialog--medium,\n  .dialog--small {\n    width: 90%;\n    max-width: none;\n    height: auto;\n  }\n}\n\n@media (max-width: 400px) {\n  .dialog--full-screen,\n  .dialog--big,\n  .dialog--medium,\n  .dialog--small {\n    width: 100%;\n    max-width: none;\n    height: auto;\n  }\n}\n`);\n", "import { theme, themes } from \"../../state\";\nimport { DEFAULT_DROPDOWN_SETTINGS } from \"./dropdown-vars\";\n\nexport const dropdownStyleSheet = new CSSStyleSheet();\n\nexport const renderDropdownStyleSheet = () => {\n  const settings = theme.get() !== \"none\" ? themes.get()[theme.get()].dropdown : DEFAULT_DROPDOWN_SETTINGS;\n\n  const styles = `\n.dropdown {\n    \n    --dropdown-bg-color: var(${settings.bgColorToken}, white);\n    --dropdown-bg-color-hover: var(${settings.bgColorHoverToken}, rgba(0, 0, 0, 0.1));\n    --dropdown-border-color: var(${settings.borderColorToken}, black);\n    --dropdown-border-radius: ${settings.borderRadius}ch;\n    --dropdown-border-width: ${settings.borderWidth}ch;\n    --dropdown-color: var(${settings.colorToken}, black);\n    --dropdown-color-hover: var(${settings.colorHoverToken}, black);\n    --dropdown-font-size: ${settings.fontSize}ch;\n    --dropdown-font-weight: ${settings.fontWeight};\n    --dropdown-line-height: ${settings.lineHeight}ch;\n    --dropdown-arrow-size: ${settings.lineHeight * 0.21}ch;\n\n    appearance: none;\n    border-radius: var(--dropdown-border-radius);\n    border: var(--dropdown-border-width) solid var(--dropdown-border-color);\n    color: var(--dropdown-color);\n    cursor: pointer;\n    display: block;\n    font-size: var(--dropdown-font-size);\n    font-weight: var(--dropdown-font-weight);\n    line-height: var(--dropdown-line-height);\n    padding: 0 calc(var(--dropdown-line-height) * 1.5) 0 calc(var(--dropdown-line-height) / 2);\n    position: relative;\n    width: 100%;\n    background-image: \n      linear-gradient(45deg, transparent 50%, var(--dropdown-color) 50%), \n      linear-gradient(135deg, var(--dropdown-color) 50%, transparent 50%),\n      linear-gradient(to bottom, var(--dropdown-border-color) 0%, var(--dropdown-border-color) 100%);\n    background-color: var(--dropdown-bg-color);\n    background-size: \n      var(--dropdown-arrow-size) var(--dropdown-arrow-size), \n      var(--dropdown-arrow-size) var(--dropdown-arrow-size),\n      var(--dropdown-border-width) var(--dropdown-line-height);\n    background-position: \n      calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2)) center, \n      calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2) + var(--dropdown-arrow-size)) center,\n      calc(100% - calc(var(--dropdown-line-height) * 1.25 + var(--dropdown-border-width) - calc(var(--dropdown-arrow-size) / 2))) center;\n    background-repeat: no-repeat;\n}\n\n.dropdown[disabled] {\n    cursor: not-allowed;\n    opacity: 0.45;\n}\n\n.dropdown:hover {\n    background-color: var(--dropdown-bg-color-hover);\n    color: var(--dropdown-color-hover);\n}\n\n.dropdown option {\n    color: var(--dropdown-color);\n    background-color: var(--dropdown-bg-color);\n}\n`;\n\n  return dropdownStyleSheet.replaceSync(styles);\n};\n", "export const flexgridStyleSheet = new CSSStyleSheet();\n\nexport const renderFlexGridStyleSheet = () =>\n  flexgridStyleSheet.replaceSync(`.flexgrid {\n  --mobile-gap: 10px;\n  --tablet-gap: 20px;\n  --desktop-gap: 30px;\n  --mobile-width: 200px;\n  --tablet-width: 200px;\n  --desktop-width: 200px;\n}\n\n@media screen and (min-width: 0px) and (max-width: 767px) {\n  .flexgrid {\n    --width: var(--mobile-width);\n    --gap: var(--mobile-gap);\n  }\n}\n\n@media screen and (min-width: 768px) and (max-width: 1023px) {\n  .flexgrid {\n    --width: var(--tablet-width);\n    --gap: var(--tablet-gap);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .flexgrid {\n    --width: var(--desktop-width);\n    --gap: var(--desktop-gap);\n  }\n}\n\n.flexgrid {\n  display: flex;\n  gap: var(--gap);\n  justify-content: center;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.flexgrid__item {\n  width: 100%;\n  height: max-content;\n  flex: 1 0 var(--width);\n}\n`);\n", "export const flexpaneStyleSheet = new CSSStyleSheet();\n\nexport const renderFlexpaneStyleSheet = () =>\n  flexpaneStyleSheet.replaceSync(`:root {\n\n}\n\n.flexpane {\n\n  /* Defaults */\n  &.flexpane__header {}\n  &.flexpane__header__title {}\n  &.flexpane__body {}\n  &.flexpane__footer {}\n\n  /* Modes */\n  .flexpane--alert {\n\n    /* Structure */\n    &.flexpane__header {}\n    &.flexpane__header__title {}\n    &.flexpane__body {}\n    &.flexpane__footer {}\n\n    /* Colors */\n    &.flexpane--dark {\n      &.flexpane__header {}\n      &.flexpane__header__title {}\n      &.flexpane__body {}\n      &.flexpane__footer {}\n    }\n\n    .flexpane--light {}\n    .flexpane--success {}\n    .flexpane--warning {}\n    .flexpane--error {}\n    .flexpane--info {}\n\n    /* Variants */\n    .flexpane--outline {\n      &.flexpane__header {}\n      &.flexpane__header__title {}\n      &.flexpane__body {}\n      &.flexpane__footer {}\n    }\n    .flexpane--ghost {}\n\n  }\n  .flexpane--toast {}\n  .flexpane--modal {}\n  .flexpane--drawer {}\n  .flexpane--sidebar {}\n  .flexpane--popover {}\n  .flexpane--card {}\n  .flexpane--dialog {}\n}\n\n\n\n/* States */\n.flexpane--loading {}\n.flexpane--disabled {}`);\n", "export const gridStyleSheet = new CSSStyleSheet();\n\nexport const renderGridStyleSheet = () =>\n  gridStyleSheet.replaceSync(`.grid {\n  --bg-color: var(--token-black, black);\n  --desktop-columns: 12;\n  --desktop-max-col-width: 6ch;\n  --desktop-col-gap: 2ch;\n  --mobile-col-gap: 2ch;\n  --desktop-row-gap: 2ch;\n  --mobile-row-gap: 1ch;\n  --mobile-columns: 6;\n  --mobile-max-col-width: 1fr;\n  --scrollbar-thumb-color: var(--token-black-80, black);\n  --scrollbar-track-color: var(--token-white-10, black);\n  --text-color: var(--token-white, white);\n  background-color: var(--bg-color);\n  color: var(--text-color);\n  display: grid;\n  width: 100%;\n  max-width: var(--max-width);\n  margin: 0 auto;\n  box-sizing: border-box;\n  height: 100vh;\n  max-height: 100vh;\n  grid-template-rows: max-content max-content max-content 1fr;\n}\n\n@media (min-width: 0px) {\n  .grid {\n    grid-template-columns: repeat(var(--mobile-columns), var(--mobile-max-col-width));\n    column-gap: var(--mobile-col-gap);\n    row-gap: var(--mobile-row-gap);\n  }\n}\n\n@media (min-width: 768px) {\n  .grid {\n    grid-template-columns: 1fr repeat(var(--desktop-columns), minmax(0px, var(--desktop-max-col-width))) 1fr;\n    column-gap: var(--desktop-col-gap);\n    row-gap: var(--desktop-row-gap);\n  }\n}\n\n.grid__item {\n  --mobile-align-items: start;\n  --mobile-justify-items: start;\n  --mobile-row-start: auto;\n  --mobile-row-end: auto;\n  --desktop-align-items: center;\n  --desktop-justify-items: start;\n  --desktop-row-start: auto;\n  --desktop-row-end: auto;\n  background-color: red;\n  display: grid;\n  grid-template-columns: subgrid;\n  box-sizing: border-box;\n  align-items: var(--mobile-align-items);\n  justify-items: var(--mobile-justify-items);\n}\n\n@media screen and (min-width: 0px) and (max-width: 767px) {\n  .grid__item--row-start-var {\n    grid-row-start: var(--mobile-row-start);\n  }\n  .grid__item--row-end-var {\n    grid-row-end: var(--mobile-row-end);\n  }\n  .grid__item--col-start-var {\n    grid-column-start: var(--mobile-col-start);\n  }\n  .grid__item--col-end-var {\n    grid-column-end: var(--mobile-col-end);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  .grid__item--row-start-var {\n    grid-row-start: var(--desktop-row-start);\n  }\n  .grid__item--row-end-var {\n    grid-row-end: var(--desktop-row-end);\n  }\n  .grid__item--col-start-var {\n    grid-column-start: var(--desktop-col-start);\n  }\n  .grid__item--col-end-var {\n    grid-column-end: var(--desktop-col-end);\n  }\n}\n`);\n", "export const sectionStyleSheet = new CSSStyleSheet();\n\nexport const renderSectionStyleSheet = () =>\n  sectionStyleSheet.replaceSync(`.section {\n}\n\n.section__header {\n}\n\n.section__header__title {\n  font-size: 1.5em;\n}\n\n.section__header__description {\n  font-size: 1em;\n  opacity: 0.5;\n}\n\n.section__content {\n}\n\n`);\n", "export const togglesStyleSheet = new CSSStyleSheet();\n\nexport const renderTogglesStyleSheet = () =>\n  togglesStyleSheet.replaceSync(`.toggle {\n  position: relative;\n  width: 50px;\n  height: 50px;\n  background-color: var(--bg-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.toggle input {\n  display: none;\n}\n\n.toggle:before {\n  border-bottom: 2px solid var(--text-color);\n  border-top: 2px solid var(--text-color);\n  content: \"\";\n  height: 12px;\n  left: 12.5px;\n  position: absolute;\n  width: 25px;\n  transition: all 0.3s;\n}\n\n.toggle:after {\n  position: absolute;\n  border-top: 2px solid var(--text-color);\n  content: \"\";\n  display: block;\n  width: 50%;\n  content: \"\";\n  transition: all 0.3s;\n}\n\n.toggle:has(input:checked)::before {\n  border-width: 0;\n  position: absolute;\n  left: 12.5px;\n  background-color: var(--text-color);\n  content: \"\";\n  display: block;\n  height: 2px;\n  width: 25px;\n  transition: all 0.3s;\n  transform: rotate(45deg);\n}\n.toggle:has(input:checked)::after {\n  border-width: 0;\n  position: absolute;\n  left: 12.5px;\n  background-color: var(--text-color);\n  content: \"\";\n  display: block;\n  height: 2px;\n  width: 25px;\n  transition: all 0.3s;\n  transform: rotate(-45deg);\n}\n`);\n", "export function hexToHSL(hex: string) {\n  hex = hex.replace(/^#/, \"\");\n  if (hex.length === 3) {\n    hex = hex\n      .split(\"\")\n      .map((x) => x + x)\n      .join(\"\");\n  }\n  const r = parseInt(hex.slice(0, 2), 16) / 255;\n  const g = parseInt(hex.slice(2, 4), 16) / 255;\n  const b = parseInt(hex.slice(4, 6), 16) / 255;\n\n  const max = Math.max(r, g, b),\n    min = Math.min(r, g, b);\n  let h = 0,\n    s = 0,\n    l = (max + min) / 2;\n\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n    }\n    h /= 6;\n  }\n\n  return {\n    hue: Math.round(h * 360),\n    saturation: Math.round(s * 100),\n    lightness: Math.round(l * 100),\n  };\n}\n\nexport const generateColorVariation = (\n  hex: string,\n  variation: number,\n  lightnessRange: number,\n  saturationRange: number\n) => {\n  const { hue, saturation, lightness } = hexToHSL(hex);\n  const _lightness = lightness >= 100 ? 100 : lightness;\n  const _saturation = saturation >= 100 ? 100 : saturation;\n  const rangedLightness =\n    variation === 50 ? lightness : Math.min(Math.max(_lightness + (variation - 50) * lightnessRange, 0), 100);\n  const rangedSaturation =\n    saturation === 0\n      ? 0\n      : saturation === 50\n      ? saturation\n      : Math.min(Math.max(_saturation + (variation - 50) * saturationRange, 0), 100);\n  return { hue, saturation: rangedSaturation, lightness: rangedLightness };\n};\n\n// // Function to generate HSL variations\n// export function generateHSLVariations(hexColor: string): { [key: number]: string } {\n//   const [baseHue, baseSaturation, baseLightness] = hexToHSL(hexColor);\n\n//   const variations: { [key: number]: string } = {};\n//   for (let i = 1; i <= 9; i++) {\n//     const suffix = i * 100;\n//     let variationLightness: number;\n\n//     if (suffix < 500) {\n//       variationLightness = baseLightness - (500 - suffix) * 0.1;\n//     } else if (suffix > 500) {\n//       variationLightness = baseLightness + (suffix - 500) * 0.1;\n//     } else {\n//       variationLightness = baseLightness;\n//     }\n\n//     // Ensure lightness stays within 0-100 range\n//     variationLightness = Math.max(0, Math.min(100, variationLightness));\n\n//     variations[suffix] = `hsl(${baseHue.toFixed(1)}, ${baseSaturation.toFixed(1)}%, ${variationLightness.toFixed(1)}%)`;\n//   }\n\n//   return variations;\n// }\n\n// // Function to generate HSL variations\n// export function generateHSLcontrastVariations(hexColor: string): { [key: number]: string } {\n//   const [baseHue, baseSaturation, baseLightness] = hexToHSL(hexColor);\n\n//   const variations: { [key: number]: string } = {};\n//   for (let i = 1; i <= 9; i++) {\n//     const suffix = i * 100;\n//     let variationLightness: number;\n\n//     if (suffix > 500) {\n//       variationLightness = baseLightness + (500 - suffix) * 0.1;\n//     } else if (suffix < 500) {\n//       variationLightness = baseLightness - (suffix - 500) * 0.1;\n//     } else {\n//       variationLightness = baseLightness;\n//     }\n\n//     // Ensure lightness stays within 0-100 range\n//     variationLightness = Math.max(0, Math.min(100, variationLightness));\n\n//     variations[suffix] = `hsl(${baseHue.toFixed(1)}, ${baseSaturation.toFixed(1)}%, ${variationLightness.toFixed(1)}%)`;\n//   }\n\n//   return variations;\n// }\n\n// // Example usage\n// const baseColorHex = \"#3498db\"; // Replace with your fundamental color\n// const colorVariations = generateHSLVariations(baseColorHex);\n\n// console.log(colorVariations);\n", "import { themes } from \"../../state\";\nimport { generateColorVariation } from \"../../util/generators\";\n\nexport const tokensStyleSheet = new CSSStyleSheet();\nconst variation = [10, 20, 30, 40, 50, 60, 70, 80, 90];\n\nexport const renderTokensStyleSheet = () => {\n  let tokens = \"\";\n  for (const theme in themes.get()) {\n    tokens += ':root[data-theme=\"' + theme + '\"] {\\n';\n\n    // palette\n    for (const key in themes.get()[theme].colors.palette) {\n      const value = (themes.get()[theme].colors.palette as any)[key];\n      for (const num of variation) {\n        const hsl = generateColorVariation(\n          value,\n          num,\n          themes.get()[theme].colors.lightnessRange,\n          themes.get()[theme].colors.saturationRange\n        );\n        const color = `hsl(${hsl.hue}, ${hsl.saturation}%, ${hsl.lightness}%)`;\n        tokens += `--${key}-${num}0: ${color};\\n`;\n      }\n    }\n\n    // semantic\n    for (const key in themes.get()[theme].colors.semantic) {\n      const colorKey = (themes.get()[theme].colors.semantic as any)[key];\n      const value = (themes.get()[theme].colors.palette as any)[colorKey];\n      for (const num of variation) {\n        const hsl = generateColorVariation(\n          value,\n          num,\n          themes.get()[theme].colors.lightnessRange,\n          themes.get()[theme].colors.saturationRange\n        );\n        const color = `hsl(${hsl.hue}, ${hsl.saturation}%, ${hsl.lightness}%)`;\n        tokens += `--${key}-${num}0: ${color};\\n`;\n      }\n    }\n\n    // inputs\n    tokens += `--icon-scaling: ${themes.get()[theme].scaling.icon}ch;\\n`;\n    tokens += `--text-scaling: ${themes.get()[theme].scaling.text}ch;\\n`;\n    tokens += `--col-gap-scaling: ${themes.get()[theme].scaling.colGap}ch;\\n`;\n    tokens += `--row-gap-scaling: ${themes.get()[theme].scaling.rowGap}ch;\\n`;\n    tokens += `--padding-scaling: ${themes.get()[theme].scaling.padding}ch;\\n`;\n    tokens += `--borders-scaling: ${themes.get()[theme].scaling.borders}ch;\\n`;\n    tokens += `--weight-scaling: ${themes.get()[theme].scaling.weight}ch;\\n`;\n\n    tokens += `}\\n`;\n  }\n\n  // console.log(tokens);\n  tokensStyleSheet.replaceSync(tokens);\n};\n", "export const tooltipStyleSheet = new CSSStyleSheet();\n\nexport const renderTooltipStyleSheet = () =>\n  tooltipStyleSheet.replaceSync(`.tooltip {\n  cursor: pointer;\n  position: relative;\n}\n\n.tooltip::before {\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: calc(50% - 100px);\n  background-color: white;\n  border-radius: 5px;\n  color: #fff;\n  content: attr(aria-label);\n  display: flex;\n  padding: 1rem;\n  justify-content: center;\n  text-transform: none;\n  transition: all 0.5s ease;\n  width: 180px;\n  z-index: 100;\n}\n\n.tooltip::after {\n  display: flex;\n  position: absolute;\n  bottom: calc(100%);\n  left: calc(50% - 10px);\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  border-top: 10px solid white;\n  content: \" \";\n  font-size: 0;\n  line-height: 0;\n  width: 0;\n}\n\n.tooltip::before,\n.tooltip::after {\n  color: black;\n  opacity: 0;\n  pointer-events: none;\n  text-align: center;\n}\n\n.tooltip:focus::before,\n.tooltip:focus::after,\n.tooltip:hover::before,\n.tooltip:hover::after {\n  opacity: 1;\n  transition: all 0.75s ease;\n}\n`);\n", "export function getStylesheetContents(sheet: CSSStyleSheet): string {\n  let cssText = \"\";\n  const rulesArray = Array.from(sheet.cssRules);\n  for (let rule of rulesArray) {\n    cssText += rule.cssText + \"\\n\";\n  }\n  return cssText;\n}\n", "import { accordionStyleSheet, renderAccordionStyleSheet } from \"./components/accordion/accordion\";\nimport { alertsStyleSheet, renderAlertsStyleSheet } from \"./components/alerts/alerts\";\nimport { badgeStyleSheet, renderBadgeStyleSheet } from \"./components/badge/badge\";\nimport { bgStyleSheet, renderBGStyleSheet } from \"./components/bg/bg\";\nimport { buttonStyleSheet, renderButtonStyleSheet } from \"./components/button/button\";\nimport { cardStyleSheet, renderCardStyleSheet } from \"./components/card/card\";\nimport { dashboardStyleSheet, renderDashboardStyleSheet } from \"./components/dashboard/dashboard\";\nimport { dialogStyleSheet, renderDialogStyleSheet } from \"./components/dialog/dialog\";\nimport { dropdownStyleSheet, renderDropdownStyleSheet } from \"./components/dropdown/dropdown\";\nimport { flexgridStyleSheet, renderFlexGridStyleSheet } from \"./components/flexgrid/flexgrid\";\nimport { flexpaneStyleSheet, renderFlexpaneStyleSheet } from \"./components/flexpane/flexpane\";\nimport { gridStyleSheet, renderGridStyleSheet } from \"./components/grid/grid\";\nimport { renderSectionStyleSheet, sectionStyleSheet } from \"./components/section/section\";\nimport { renderTogglesStyleSheet, togglesStyleSheet } from \"./components/toggles/toggles\";\nimport { renderTokensStyleSheet, tokensStyleSheet } from \"./components/tokens/tokens\";\nimport { renderTooltipStyleSheet, tooltipStyleSheet } from \"./components/tooltip/tooltip\";\nimport { theme } from \"./state\";\nimport { getStylesheetContents } from \"./util/css\";\n\ndeclare var JSZip: any;\n\ntype FSM =\n  | {\n      action: \"DISABLE_TOKENS\";\n    }\n  | {\n      action: \"DOWNLOAD_ALL\";\n    }\n  | {\n      action: \"DOWNLOAD_THEME_TOKENS\";\n    }\n  | {\n      action: \"ENABLE_TOKENS\";\n    }\n  | {\n      action: \"SET_THEME\";\n      theme: string;\n    }\n  | {\n      action: \"RENDER_ALL_STYLESHEETS\";\n    };\n\nconst zip = new JSZip();\n\nconst renderAllStyleSheets = () => {\n  // load style sheets\n  renderTokensStyleSheet();\n  renderDashboardStyleSheet();\n  renderAccordionStyleSheet();\n  renderAlertsStyleSheet();\n  renderBadgeStyleSheet();\n  renderBGStyleSheet();\n  renderButtonStyleSheet();\n  renderCardStyleSheet();\n  renderDashboardStyleSheet();\n  renderDialogStyleSheet();\n  renderDropdownStyleSheet();\n  renderFlexGridStyleSheet();\n  renderFlexpaneStyleSheet();\n  renderGridStyleSheet();\n  renderSectionStyleSheet();\n  renderTogglesStyleSheet();\n  renderTooltipStyleSheet();\n};\n\nexport const fsm = (msg: FSM) => {\n  switch (msg.action) {\n    case \"DISABLE_TOKENS\":\n      renderTokensStyleSheet();\n      break;\n    case \"DOWNLOAD_ALL\":\n      zip.file(\"tokens.css\", getStylesheetContents(tokensStyleSheet));\n      zip.file(\"accordion.css\", getStylesheetContents(accordionStyleSheet));\n      zip.file(\"alerts.css\", getStylesheetContents(alertsStyleSheet));\n      zip.file(\"badge.css\", getStylesheetContents(badgeStyleSheet));\n      zip.file(\"bg.css\", getStylesheetContents(bgStyleSheet));\n      zip.file(\"button.css\", getStylesheetContents(buttonStyleSheet));\n      zip.file(\"card.css\", getStylesheetContents(cardStyleSheet));\n      zip.file(\"dashboard.css\", getStylesheetContents(dashboardStyleSheet));\n      zip.file(\"dialog.css\", getStylesheetContents(dialogStyleSheet));\n      zip.file(\"dropdown.css\", getStylesheetContents(dropdownStyleSheet));\n      zip.file(\"flexgrid.css\", getStylesheetContents(flexgridStyleSheet));\n      zip.file(\"flexpane.css\", getStylesheetContents(flexpaneStyleSheet));\n      zip.file(\"grid.css\", getStylesheetContents(gridStyleSheet));\n      zip.file(\"section.css\", getStylesheetContents(sectionStyleSheet));\n      zip.file(\"toggles.css\", getStylesheetContents(togglesStyleSheet));\n      zip.file(\"tooltip.css\", getStylesheetContents(tooltipStyleSheet));\n      zip.generateAsync({ type: \"blob\" }).then((content: any) => {\n        const link: any = document.createElement(\"a\");\n        link.href = URL.createObjectURL(content);\n        link.download = \"capui.zip\";\n        link.click();\n      });\n      break;\n    case \"DOWNLOAD_THEME_TOKENS\":\n      const link: any = document.createElement(\"a\");\n      link.href = URL.createObjectURL(new Blob([getStylesheetContents(tokensStyleSheet)], { type: \"text/css\" }));\n      link.download = \"tokens.css\";\n      link.click();\n      break;\n    case \"ENABLE_TOKENS\":\n      // tokensEnabledState.set(true);\n      renderTokensStyleSheet();\n      break;\n    case \"SET_THEME\":\n      theme.set(msg.theme);\n      fsm({ action: \"RENDER_ALL_STYLESHEETS\" });\n      break;\n    case \"RENDER_ALL_STYLESHEETS\":\n      renderTokensStyleSheet();\n      renderDashboardStyleSheet();\n      renderAccordionStyleSheet();\n      renderAlertsStyleSheet();\n      renderBadgeStyleSheet();\n      renderBGStyleSheet();\n      renderButtonStyleSheet();\n      renderCardStyleSheet();\n      renderDashboardStyleSheet();\n      renderDialogStyleSheet();\n      renderDropdownStyleSheet();\n      renderFlexGridStyleSheet();\n      renderFlexpaneStyleSheet();\n      renderGridStyleSheet();\n      renderSectionStyleSheet();\n      renderTogglesStyleSheet();\n      renderTooltipStyleSheet();\n      break;\n  }\n};\n", "export const useColumn = (\n  el: HTMLElement,\n  gap: string = \"0px\",\n  alignItems: CSSStyleDeclaration[\"alignItems\"] = \"center\",\n  justifyContent: CSSStyleDeclaration[\"justifyContent\"] = \"center\",\n  width: string = \"auto\"\n) => (\n  (el.style.display = \"flex\"),\n  (el.style.gap = gap),\n  (el.style.flexDirection = \"column\"),\n  (el.style.alignItems = alignItems),\n  (el.style.justifyContent = justifyContent),\n  (el.style.width = width)\n);\n\nexport const useRow = (\n  el: HTMLElement,\n  gap: string = \"0px\",\n  alignItems: CSSStyleDeclaration[\"alignItems\"] = \"center\",\n  justifyContent: CSSStyleDeclaration[\"justifyContent\"] = \"center\",\n  width: string = \"auto\"\n) => (\n  (el.style.display = \"flex\"),\n  (el.style.gap = gap),\n  (el.style.flexDirection = \"row\"),\n  (el.style.alignItems = alignItems),\n  (el.style.justifyContent = justifyContent),\n  (el.style.width = width)\n);\n", "import { HTML, useAttribute, useClassName, useEvent, useInnerHTML, useStyle } from \"@linttrap/oem\";\nimport { theme } from \"./state\";\nimport { useColumn, useRow } from \"./traits\";\n// import { colorPickerState, pageState, propertiesState, themeState, themesState, tokensEnabledState } from \"./state\";\n\nexport function useSVGImage() {\n  return (el: HTMLElement, path: string) =>\n    fetch(path)\n      .then((response) => response.text())\n      .then((text) => (el.innerHTML = text));\n}\n\nexport const html = HTML({\n  // \"attr:tokensEnabled\": useAttribute({ state: tokensEnabledState }),\n  // \"click:tokensEnabled\": useEvent({ event: \"click\", state: tokensEnabledState }),\n  // \"innerHTML:colorPicker\": useInnerHTML({ state: colorPickerState }),\n  // \"innerHTML:pages\": useInnerHTML({ state: pageState }),\n  // \"innerHTML:properties\": useInnerHTML({ state: propertiesState }),\n  // \"innerHTML:themes\": useInnerHTML({ state: themesState }),\n  // \"innerHTML:theme\": useInnerHTML({ state: themeState }),\n  // \"innerText:pages\": useTextContent({ state: pageState }),\n  // \"style:themes\": useStyle({ state: themesState }),\n  // \"svg:load\": useSVGImage(),\n  // \"text:tokensEnabled\": useTextContent({ state: tokensEnabledState }),\n  \"style:theme\": useStyle({ state: theme }),\n  \"attr:theme\": useAttribute({ state: theme }),\n  attr: useAttribute(),\n  change: useEvent({ event: \"change\" }),\n  class: useClassName(),\n  click: useEvent({ event: \"click\" }),\n  innerHTML: useInnerHTML(),\n  input: useEvent({ event: \"input\" }),\n  style: useStyle(),\n  column: useColumn,\n  row: useRow,\n});\n", "import { accordionStyleSheet } from \"./components/accordion/accordion\";\nimport { alertsStyleSheet } from \"./components/alerts/alerts\";\nimport { badgeStyleSheet } from \"./components/badge/badge\";\nimport { bgStyleSheet } from \"./components/bg/bg\";\nimport { buttonStyleSheet } from \"./components/button/button\";\nimport { cardStyleSheet } from \"./components/card/card\";\nimport { dashboardStyleSheet } from \"./components/dashboard/dashboard\";\nimport { dialogStyleSheet } from \"./components/dialog/dialog\";\nimport { dropdownStyleSheet } from \"./components/dropdown/dropdown\";\nimport { flexgridStyleSheet } from \"./components/flexgrid/flexgrid\";\nimport { flexpaneStyleSheet } from \"./components/flexpane/flexpane\";\nimport { gridStyleSheet } from \"./components/grid/grid\";\nimport { sectionStyleSheet } from \"./components/section/section\";\nimport { togglesStyleSheet } from \"./components/toggles/toggles\";\nimport { tokensStyleSheet } from \"./components/tokens/tokens\";\nimport { tooltipStyleSheet } from \"./components/tooltip/tooltip\";\nimport { fsm } from \"./fsm\";\nimport { theme, themes } from \"./state\";\nimport { html } from \"./template\";\n\nconst Header = html.div(\n  [\"row\", \"10px\", \"center\", \"space-between\"],\n  [\"style\", \"backgroundColor\", \"var(--background-600, white)\"],\n  [\"style\", \"color\", \"var(--text-500, black)\"],\n  [\"style\", \"position\", \"fixed\"],\n  [\"style\", \"top\", \"0\"],\n  [\"style\", \"width\", \"100%\"]\n)(\n  html.div([\"row\", \"2ch\"], [\"style\", \"padding\", \"0 2ch\"])(\n    html.div(\n      [\"style\", \"color\", \"var(--brand-500)\"],\n      [\"style\", \"height\", \"100%\"],\n      [\"style\", \"fontFamily\", \"Splash\"],\n      [\"style\", \"fontWeight\", \"bold\"],\n      [\"style\", \"fontSize\", \"5ch\"],\n      [\"style\", \"textAlign\", \"center\"]\n    )(\"cap\"),\n    html.div(\n      [\"style\", \"color\", \"var(--brand-500)\"],\n      [\"style\", \"height\", \"100%\"],\n      [\"style\", \"fontWeight\", \"bold\"],\n      [\"style\", \"fontSize\", \"0.5ch\"],\n      [\"style\", \"textAlign\", \"center\"]\n    )(\"v1.0.0\")\n  ),\n  html.div(\n    [\"row\", \"20px\"],\n    [\"style\", \"padding\", \"0 20px\"]\n  )(\n    html.select(\n      [\"class\", \"dropdown\"],\n      [\"class\", \"dropdown--small\"],\n      [\"change\", (e) => (window.location.hash = (e!.target as any).value)]\n    )(\n      html.optgroup([\"attr\", \"label\", \"Section\"])(\n        html.option()(\"tokens\"),\n        html.option()(\"buttons\"),\n        html.option()(\"dropdown\"),\n        html.option()(\"accordion\"),\n        html.option()(\"alerts\"),\n        html.option()(\"badge\"),\n        html.option()(\"bg\"),\n        html.option()(\"card\"),\n        html.option()(\"dashboard\"),\n        html.option()(\"dialog\"),\n        html.option()(\"flexgrid\"),\n        html.option()(\"flexpane\"),\n        html.option()(\"grid\"),\n        html.option()(\"section\"),\n        html.option()(\"toggles\"),\n        html.option()(\"tooltip\")\n      )\n    )\n  )\n);\n\nconst Body = html.div()(\"Body\");\n\nconst Footer = html.div(\n  [\"row\", \"2ch\"],\n  [\"style\", \"backgroundColor\", \"var(--background-600)\"],\n  [\"style\", \"position\", \"fixed\"],\n  [\"style\", \"bottom\", \"0\"],\n  [\"style\", \"width\", \"100%\"],\n  [\"style\", \"color\", \"var(--text-500, black)\"],\n  [\"style\", \"padding\", \"2ch\"]\n)(\n  html.select(\n    [\"class\", \"dropdown\"],\n    [\"change\", (e) => fsm({ action: \"SET_THEME\", theme: (e!.target as any).value as string })]\n  )(\n    html.optgroup([\"attr\", \"label\", \"Pick a theme\"])(\n      html.option([\"attr\", \"value\", \"none\"])(\"none\"),\n      ...Object.keys(themes.get()).map((t: string) =>\n        html.option([\"attr\", \"value\", t], [\"attr\", \"selected\", t === theme.get()])(t)\n      )\n    )\n  ),\n  html.button([\"class\", \"button\"])(\"capui.zip\")\n);\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const root = html.$el(\"#root\");\n  const doc = html.$el(\"html\");\n  doc([\"attr:theme\", \"data-theme\", theme.get], [\"style\", \"backgroundColor\", \"var(--background-500)\"]);\n  root([\"innerHTML\", () => [Header, Body, Footer]]);\n  fsm({ action: \"RENDER_ALL_STYLESHEETS\" });\n\n  document.adoptedStyleSheets = [\n    tokensStyleSheet,\n    accordionStyleSheet,\n    alertsStyleSheet,\n    badgeStyleSheet,\n    bgStyleSheet,\n    buttonStyleSheet,\n    cardStyleSheet,\n    dashboardStyleSheet,\n    dialogStyleSheet,\n    dropdownStyleSheet,\n    flexgridStyleSheet,\n    flexpaneStyleSheet,\n    gridStyleSheet,\n    sectionStyleSheet,\n    togglesStyleSheet,\n    tooltipStyleSheet,\n  ];\n});\n"],
-  "mappings": "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",
+  "sources": ["../../src/components/accordion/accordion.ts", "../../src/components/alerts/alerts.ts", "../../src/components/badge/badge.ts", "../../src/components/bg/bg.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.12/node_modules/@linttrap/oem/src/html/HTML.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.12/node_modules/@linttrap/oem/src/html/SVG.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.12/node_modules/@linttrap/oem/src/html/traits/Attribute.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.12/node_modules/@linttrap/oem/src/html/traits/ClassName.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.12/node_modules/@linttrap/oem/src/html/traits/Event.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.12/node_modules/@linttrap/oem/src/html/traits/InnerHTML.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.12/node_modules/@linttrap/oem/src/html/traits/Style.ts", "../../node_modules/.pnpm/@linttrap+oem@0.1.12/node_modules/@linttrap/oem/src/state/State.ts", "../../src/components/dropdown/dropdown.ts", "../../src/components/slider/slider.ts", "../../src/components/typography/typography.ts", "../../src/state.ts", "../../src/components/button/button.ts", "../../src/components/card/card.ts", "../../src/components/dashboard/dashboard.ts", "../../src/components/dialog/dialog.ts", "../../src/components/flexgrid/flexgrid.ts", "../../src/components/flexpane/flexpane.ts", "../../src/components/grid/grid.ts", "../../src/components/section/section.ts", "../../src/components/toggles/toggles.ts", "../../src/util/helpers.ts", "../../src/components/tokens/tokens.ts", "../../src/components/tooltip/tooltip.ts", "../../src/traits.ts", "../../src/template.ts", "../../src/features/PaletteList.ts", "../../src/features/ScalePicker.ts", "../../src/util/css.ts", "../../src/fsm.ts", "../../src/index.ts"],
+  "sourcesContent": ["export const accordionStyleSheet = new CSSStyleSheet();\n\nexport const renderAccordionStyleSheet = () =>\n  accordionStyleSheet.replaceSync(`/* \n<div class=\"accordion accordion--dark\">\n    <div class=\"accordion__item\">\n      <input type=\"radio\" name=\"accordion-group\" id=\"ag1\" hidden=\"\" class=\"accordion__input\">\n      <label for=\"ag1\" class=\"accordion__header\">Item 1</label>\n      <div class=\"accordion__body\">Content for Item 1...</div>\n    </div>\n    ...\n</div> \n*/\n\n.accordion {\n  --body-bg: inherit;\n  --body-text-color: inherit;\n  --border-color: inherit;\n  --border-radius: 4px;\n  --font-family: var(--token-font-sans, sans-serif);\n  --font-size: 14px;\n  --header-bg: inherit;\n  --header-color: inherit;\n  --header-hover-bg: inherit;\n  --header-selected-bg: inherit;\n  --spacing: 12px;\n  --toggle-size: 6px;\n\n  &.accordion--dark {\n    --body-bg: var(--token-black-90, black);\n    --body-text-color: var(--token-white, white);\n    --border-color: var(--token-white-10, white);\n    --border-radius: 4px;\n    --font-family: var(--token-font-sans, sans-serif);\n    --font-size: 14px;\n    --header-bg: var(--token-black, black);\n    --header-color: var(--token-white, white);\n    --header-hover-bg: var(--token-black-90, black);\n    --spacing: 12px;\n    --toggle-size: 6px;\n  }\n\n  &.accordion--light {\n    --body-bg: var(--token-white, white);\n    --body-text-color: var(--token-black, black);\n    --border-color: var(--token-black-10, black);\n    --border-radius: 4px;\n    --font-family: var(--token-font-sans, sans-serif);\n    --font-size: 14px;\n    --header-bg: var(--token-white-90, white);\n    --header-color: var(--token-black, black);\n    --header-hover-bg: var(--token-white-80, white);\n    --spacing: 12px;\n    --toggle-size: 6px;\n  }\n\n  width: 100%;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n\n  .accordion__item {\n    &:first-child .accordion__header {\n      border-top-left-radius: var(--border-radius);\n      border-top-right-radius: var(--border-radius);\n    }\n\n    &:last-child:not(:has(.accordion__input:checked)) .accordion__header {\n      border-bottom-left-radius: var(--border-radius);\n      border-bottom-right-radius: var(--border-radius);\n    }\n\n    &:last-child:has(.accordion__input:checked) .accordion__body {\n      border-bottom-left-radius: var(--border-radius);\n      border-bottom-right-radius: var(--border-radius);\n    }\n\n    .accordion__header {\n      background-color: var(--header-bg);\n      border-bottom: 1px solid var(--border-color);\n      color: var(--header-color);\n      cursor: pointer;\n      display: block;\n      font-weight: bold;\n      padding: var(--spacing);\n      position: relative;\n\n      &:hover {\n        background-color: var(--header-hover-bg);\n        transition: all 200ms;\n      }\n\n      &::after {\n        border-left: 2px solid var(--header-color);\n        border-bottom: 2px solid var(--header-color);\n        color: var(--header-text-color);\n        content: \"\";\n        display: flex;\n        width: var(--toggle-size);\n        height: var(--toggle-size);\n        position: absolute;\n        right: var(--spacing);\n        top: calc(50% - var(--toggle-size) / 2 * 2);\n        transform: rotate(-45deg);\n      }\n    }\n\n    .accordion__input {\n      display: none;\n\n      &:checked + .accordion__header + .accordion__body {\n        display: block;\n      }\n      &:checked + .accordion__header::after {\n        transform: rotate(135deg);\n        top: calc(50% - var(--toggle-size) / 2);\n      }\n    }\n\n    .accordion__body {\n      background-color: var(--body-bg);\n      border-bottom: 1px solid var(--border-color);\n      color: var(--body-text-color);\n      padding: var(--spacing);\n      font-size: var(--font-size);\n      display: none;\n    }\n  }\n}\n`);\n", "export const alertsStyleSheet = new CSSStyleSheet();\n\nexport const renderAlertsStyleSheet = () =>\n  alertsStyleSheet.replaceSync(`/* \n<label class=\"alert alert--[MODIFIERS]\">\n  <input type=\"checkbox\" class=\"alert__toggle\" />\n  <div class=\"alert__close\">\uFF0B</div>\n  <div class=\"alert__title\">Alert Title</div>\n  <div class=\"alert__message\">\n    lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae\n    sunt a te dicta?\n  </div>\n</label> \n*/\n\n/* Solid Alerts */\n.alert {\n  --bg: inherit;\n  --bg-hover: inherit;\n  --border-color: inherit;\n  --border-color-hover: inherit;\n  --border-radius: 4px;\n  --border-style: solid;\n  --border-width: 2px;\n  --font-family: var(--token-font-sans, sans-serif);\n  --font-size: 13px;\n  --padding: 20px;\n  --text-align: left;\n  --text-color: inherit;\n  --link-color: inherit;\n  --link-color-hover: inherit;\n\n  &.alert--dark {\n    --bg: var(--token-black, black);\n    --bg-hover: var(--token-black-80, black);\n    --border-color: var(--token-black, black);\n    --border-color-hover: var(--token-black-60, black);\n    --text-color: var(--token-white, white);\n    --link-color: var(--token-white, white);\n    --link-color-hover: var(--token-white-60, white);\n    &.alert--ghost {\n      --bg: var(--token-black-20, black);\n      --bg-hover: var(--token-black-40, black);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-black, black);\n      --link-color: var(--token-black, black);\n      --link-color-hover: var(--token-black-60, black);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-black-20, black);\n      --border-color: var(--token-black, black);\n      --text-color: var(--token-black, black);\n      --link-color: var(--token-black, black);\n      --link-color-hover: var(--token-black-60, black);\n    }\n  }\n\n  &.alert--error {\n    --bg: var(--token-red, red);\n    --bg-hover: var(--token-red-80, red);\n    --border-color: var(--token-red, red);\n    --border-color-hover: var(--token-red-60, red);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-red-10, red);\n      --bg-hover: var(--token-red-20, red);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-red, red);\n      --link-color: var(--token-red, red);\n      --link-color-hover: var(--token-red-60, red);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-red-20, red);\n      --border-color: var(--token-red, red);\n      --text-color: var(--token-red, red);\n      --link-color: var(--token-red, red);\n      --link-color-hover: var(--token-red-60, red);\n    }\n  }\n\n  &.alert--info {\n    --bg: var(--token-blue, blue);\n    --bg-hover: var(--token-blue-80, blue);\n    --border-color: var(--token-blue, blue);\n    --border-color-hover: var(--token-blue-60, blue);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-blue-10, blue);\n      --bg-hover: var(--token-blue-20, blue);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-blue, blue);\n      --link-color: var(--token-blue, blue);\n      --link-color-hover: var(--token-blue-60, blue);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-blue-20, blue);\n      --border-color: var(--token-blue, blue);\n      --text-color: var(--token-blue, blue);\n      --link-color: var(--token-blue, blue);\n      --link-color-hover: var(--token-blue-60, blue);\n    }\n  }\n\n  &.alert--light {\n    --bg: var(--token-white, white);\n    --bg-hover: var(--token-white-80, white);\n    --border-color: var(--token-white, white);\n    --border-color-hover: var(--token-white-60, white);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-white-10, white);\n      --bg-hover: var(--token-white-20, white);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-white, white);\n      --link-color: var(--token-white, white);\n      --link-color-hover: var(--token-white-60, white);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-white-20, white);\n      --border-color: var(--token-white, white);\n      --text-color: var(--token-white, white);\n      --link-color: var(--token-white, white);\n      --link-color-hover: var(--token-white-60, white);\n    }\n  }\n\n  &.alert--success {\n    --bg: var(--token-green, green);\n    --bg-hover: var(--token-green-80, green);\n    --border-color: var(--token-green, green);\n    --border-color-hover: var(--token-green-60, green);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-green-10, green);\n      --bg-hover: var(--token-green-20, green);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-green, green);\n      --link-color: var(--token-green, green);\n      --link-color-hover: var(--token-green-60, green);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-green-20, green);\n      --border-color: var(--token-green, green);\n      --text-color: var(--token-green, green);\n      --link-color: var(--token-green, green);\n      --link-color-hover: var(--token-green-60, green);\n    }\n  }\n\n  &.alert--warning {\n    --bg: var(--token-yellow, yellow);\n    --bg-hover: var(--token-yellow-80, yellow);\n    --border-color: var(--token-yellow, yellow);\n    --border-color-hover: var(--token-yellow-60, yellow);\n    --text-color: var(--token-black, black);\n    --link-color: var(--token-black, black);\n    --link-color-hover: var(--token-black-60, black);\n    &.alert--ghost {\n      --bg: var(--token-yellow-10, yellow);\n      --bg-hover: var(--token-yellow-20, yellow);\n      --border-color: transparent;\n      --border-color-hover: transparent;\n      --text-color: var(--token-yellow, yellow);\n      --link-color: var(--token-yellow, yellow);\n      --link-color-hover: var(--token-yellow-60, yellow);\n    }\n    &.alert--outline {\n      --bg: transparent;\n      --bg-hover: var(--token-yellow-20, yellow);\n      --border-color: var(--token-yellow, yellow);\n      --text-color: var(--token-yellow, yellow);\n      --link-color: var(--token-yellow, yellow);\n      --link-color-hover: var(--token-yellow-60, yellow);\n    }\n  }\n\n  background-color: var(--bg);\n  border-color: var(--border-color);\n  border-width: var(--border-width);\n  border-radius: var(--border-radius);\n  border-style: var(--border-style);\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family);\n  gap: calc(var(--padding) / 2);\n  overflow: hidden;\n  padding: var(--padding);\n  position: relative;\n  text-align: var(--text-align, left);\n  transition: all 0.3s;\n  width: 100%;\n\n  &:hover {\n    background-color: var(--bg-hover);\n    border-color: var(--border-color-hover);\n  }\n\n  .alert__title {\n    font-size: var(--font-size);\n    font-weight: bold;\n    color: var(--text-color);\n    margin-right: var(--padding);\n  }\n\n  .alert__message {\n    font-size: var(--font-size);\n    color: var(--text-color);\n    a {\n      color: var(--link-color);\n      &:hover {\n        color: var(--link-color-hover);\n      }\n    }\n  }\n\n  .alert__close {\n    color: var(--text-color);\n    cursor: pointer;\n    transform: rotate(45deg);\n    position: absolute;\n    top: calc(var(--padding) / 2);\n    right: calc(var(--padding) / 2);\n    font-size: 20px;\n  }\n\n  .alert__toggle {\n    display: none;\n  }\n\n  &:has(.alert__toggle:checked) {\n    animation: alert-closing-animation 0.25s linear forwards;\n  }\n}\n\n/* Animations */\n\n@keyframes alert-closing-animation {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n    height: auto;\n    padding: var(--padding-medium);\n  }\n  100% {\n    opacity: 0;\n    height: 0;\n    padding: 0;\n  }\n}\n`);\n", "export const badgeStyleSheet = new CSSStyleSheet();\n\nexport const renderBadgeStyleSheet = () =>\n  badgeStyleSheet.replaceSync(`/* \nUsage:\n<span class=\"badge badge-[MODIFIER]\">Basic</badge>\n*/\n\n.badge {\n  --bg: inherit;\n  --text-color: inherit;\n  --border-radius: 5px;\n  --border-width: 2px;\n  --border-color: inherit;\n  --font-family: var(--token-font-sans, sans-serif);\n  --font-size: 10px;\n  --padding: 3px 6px;\n\n  &.badge--dark {\n    --bg: var(--token-black);\n    --text-color: var(--token-white);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-black);\n      --border-color: var(--token-black);\n    }\n  }\n  &.badge--error {\n    --bg: var(--token-red);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-red);\n      --border-color: var(--token-red);\n    }\n  }\n  &.badge--info {\n    --bg: var(--token-blue);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-blue);\n      --border-color: var(--token-blue);\n    }\n  }\n  &.badge--light {\n    --bg: var(--token-white);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-white);\n      --border-color: var(--token-white);\n    }\n  }\n  &.badge--success {\n    --bg: var(--token-green);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-green);\n      --border-color: var(--token-green);\n    }\n  }\n  &.badge--warning {\n    --bg: var(--token-yellow);\n    --text-color: var(--token-black);\n    &.badge--outline {\n      --bg: transparent;\n      --text-color: var(--token-yellow);\n      --border-color: var(--token-yellow);\n    }\n  }\n  &.badge--small {\n    --font-size: 9px;\n    --padding: 2px 4px;\n  }\n  &.badge--large {\n    --font-size: 11px;\n    --padding: 4px 8px;\n  }\n\n  background-color: var(--bg);\n  border-radius: var(--border-radius);\n  border: 0;\n  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);\n  color: var(--text-color);\n  cursor: pointer;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  font-weight: bold;\n  min-width: 15px;\n  outline: none;\n  padding: var(--padding);\n  position: relative;\n  text-align: center;\n  text-wrap: nowrap;\n  transition: all 0.3s;\n  user-select: none;\n  vertical-align: middle;\n  width: max-content;\n}\n`);\n", "export const bgStyleSheet = new CSSStyleSheet();\n\nexport const renderBGStyleSheet = () => bgStyleSheet.replaceSync(``);\n", "import { HtmlReturnType } from '../types';\n\nconst selectorMap = new Map<string, [any[], any]>();\n\nconst matchObserver = new MutationObserver((mutations) => {\n  mutations.forEach((mutation) => {\n    if (mutation.addedNodes.length > 0 && mutation.type === 'childList') {\n      for (const node of mutation.addedNodes) {\n        if (node instanceof Element) {\n          for (const [selector, [props, config]] of selectorMap.entries()) {\n            const els = node.querySelectorAll(selector);\n            for (const el of els) HtmlTag(el as HTMLElement, props, config);\n          }\n        }\n      }\n    }\n  });\n});\nmatchObserver.observe(document, { attributes: true, childList: true, subtree: true });\n\nfunction AdoptElBySelector(selector: string, watch: boolean = true, config: any) {\n  return (...props: any[]) => {\n    // on mutation\n    if (watch) selectorMap.set(selector, [props, config]);\n    // onload\n    const els = document.querySelectorAll(selector);\n    for (const el of els) HtmlTag(el as HTMLElement, props, config);\n  };\n}\n\nfunction AdoptElByInstance(el: HTMLElement, config: any) {\n  return (...props: any[]) => HtmlTag(el, props, config);\n}\n\nfunction CreateEl(tag: string, config: any) {\n  return (...props: any[]) => {\n    const ns = 'http://www.w3.org/1999/xhtml';\n    const el = document.createElementNS(ns, tag as string);\n    return HtmlTag(el, props, config);\n  };\n}\n\nfunction HtmlTag(el: HTMLElement, traits: any[] = [], config: any = {}) {\n  traits.forEach(([trait, ...args]) => config[trait](el, ...args));\n  function fn(...children: any[]) {\n    children.forEach((child) => el.append(child));\n    return el;\n  }\n  return fn;\n}\n\nexport function HTML<P extends Record<string, any>>(config?: P) {\n  return new Proxy(\n    {},\n    {\n      get: (_, prop) => {\n        if (prop === 'el') return (el: HTMLElement) => AdoptElByInstance(el, config);\n        if (prop === '$el') return (selector: string, watch: boolean) => AdoptElBySelector(selector, watch, config);\n        return CreateEl(prop as string, config);\n      },\n    },\n  ) as HtmlReturnType<P>;\n}\n", "import { SvgReturnType } from '../types';\n\nfunction SvgTag(el: SVGElement, traits: any[] = [], config: any = {}) {\n  traits.forEach(([trait, ...args]) => config[trait](el, ...args));\n  function fn(...children: any[]) {\n    children.forEach((child) => el.append(child));\n    return el;\n  }\n  return fn;\n}\n\nexport function SVG<P extends Record<string, any>>(config?: P) {\n  return new Proxy(\n    {},\n    {\n      get: (_, prop) => {\n        if (prop === 'el')\n          return (el: SVGElement) =>\n            (...props: any[]) =>\n              SvgTag(el, props, config);\n        return (...props: any[]) => {\n          const ns = 'http://www.w3.org/2000/svg';\n          const el = document.createElementNS(ns, prop as string);\n          return SvgTag(el, props, config);\n        };\n      },\n    },\n  ) as SvgReturnType<P>;\n}\n", "import { StateType } from '../../types';\n\ntype UseAttributeProps<T> = {\n  event?: keyof GlobalEventHandlersEventMap | null;\n  eventElement?: HTMLElement | Window;\n  hideOnFalse?: boolean;\n  invokeImmediately?: boolean;\n  mediaMaxWidth?: number;\n  mediaMinWidth?: number;\n  state?: StateType<T>;\n};\n\nexport function useAttribute(\n  props?: UseAttributeProps<any>,\n): (\n  el: HTMLElement,\n  prop: string,\n  val: (() => string | number | boolean) | (string | number | boolean),\n  condition?: boolean | (() => boolean),\n) => void;\n\nexport function useAttribute<T>(\n  props?: UseAttributeProps<T>,\n): (\n  el: HTMLElement,\n  prop: string,\n  val: ((state: T) => string | number | boolean) | (string | number | boolean),\n  condition?: ((state: T) => boolean) | boolean,\n) => void;\n\nexport function useAttribute<T>(props?: UseAttributeProps<T>) {\n  const {\n    event = null,\n    eventElement = window,\n    hideOnFalse = true,\n    invokeImmediately = true,\n    mediaMinWidth = 0,\n    mediaMaxWidth = Infinity,\n    state = undefined,\n  } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, prop, val, condition] = htmlProps;\n    // application\n    const apply = () => {\n      const isInBreakpoint = window.innerWidth >= mediaMinWidth && window.innerWidth <= mediaMaxWidth;\n      if (!isInBreakpoint) return;\n      const _val = state && typeof val === 'function' ? val(state.get()) : val;\n      const _isBool = String(_val) === 'true' || String(_val) === 'false';\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      if (_isBool && hideOnFalse && String(_val) === 'false') return el.removeAttribute(prop);\n      if (_isBool && _condition === false) return el.removeAttribute(prop);\n      if (_condition === false) return;\n      el.setAttribute(prop, String(_val));\n    };\n\n    // handle state changes\n    if (state) state.sub(apply);\n\n    // handle event changes\n    if (event) (el ?? eventElement).addEventListener(event, apply);\n\n    // handle breakpoint changes\n    window.addEventListener('resize', apply);\n\n    // apply immediately\n    if (invokeImmediately) apply();\n  };\n}\n", "import { StateType } from '../../types';\n\ntype UseClassNameProps<T> = {\n  event?: keyof GlobalEventHandlersEventMap | null;\n  eventElement?: HTMLElement | Window;\n  invokeImmediately?: boolean;\n  mediaMaxWidth?: number;\n  mediaMinWidth?: number;\n  method?: 'classList' | 'className';\n  state?: StateType<T> | null;\n};\n\nexport function useClassName(\n  props?: UseClassNameProps<any>,\n): (el: HTMLElement, className: string | (() => string), condition?: boolean | (() => boolean)) => void;\n\nexport function useClassName<T>(\n  props?: UseClassNameProps<T>,\n): (el: HTMLElement, className: string | ((state: T) => string), condition?: boolean | ((state: T) => boolean)) => void;\n\nexport function useClassName<T>(props?: UseClassNameProps<T>) {\n  const {\n    event = null,\n    eventElement = window,\n    invokeImmediately = true,\n    mediaMinWidth = 0,\n    mediaMaxWidth = Infinity,\n    method = 'classList',\n    state = null,\n  } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, className, condition] = htmlProps;\n    // application\n    const apply = () => {\n      const isInBreakpoint = window.innerWidth >= mediaMinWidth && window.innerWidth <= mediaMaxWidth;\n      if (!isInBreakpoint) return;\n      const _className = typeof className === 'function' ? className(state ? state.get() : undefined) : className;\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      if (_condition) method === 'className' ? el.setAttribute('class', _className) : el.classList.add(_className);\n    };\n\n    // handle state changes\n    if (state) state.sub(apply);\n\n    // handle event changes\n    if (event) (el ?? eventElement).addEventListener(event, apply);\n\n    // handle breakpoint changes\n    window.addEventListener('resize', apply);\n\n    // apply immediately\n    if (invokeImmediately) apply();\n  };\n}\n", "import { StateType } from '../../types';\n\ntype UseEventProps<T, E extends keyof GlobalEventHandlersEventMap> = {\n  event: E;\n  state?: StateType<T>;\n};\n\nexport function useEvent<E extends keyof GlobalEventHandlersEventMap>(\n  props?: UseEventProps<any, E>,\n): (\n  el: HTMLElement,\n  cb: (evt?: GlobalEventHandlersEventMap[E]) => void,\n  condition?: (() => boolean) | boolean | (() => boolean),\n) => void;\n\nexport function useEvent<T, E extends keyof GlobalEventHandlersEventMap>(\n  props?: UseEventProps<T, E>,\n): (\n  el: HTMLElement,\n  cb: (evt?: GlobalEventHandlersEventMap[E]) => void,\n  condition?: ((state: T) => boolean) | boolean | (() => boolean),\n) => void;\n\nexport function useEvent<T, E extends keyof GlobalEventHandlersEventMap>(props?: UseEventProps<T, E>) {\n  const { state, event } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, cb, condition] = htmlProps;\n    const apply = () => {\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      if (_condition) {\n        el.addEventListener(event, (e: E) => cb(e));\n      } else {\n        el.removeEventListener(event, (e: E) => cb(e));\n      }\n    };\n\n    // handle state changes\n    if (state) state.sub(apply);\n\n    // apply immediately\n    apply();\n  };\n}\n\n// export const useEvent =\n//   <E extends keyof GlobalEventHandlersEventMap>(evt: E) =>\n//   (el: HTMLElement, cb: (evt: GlobalEventHandlersEventMap[E]) => any, condition?: (() => boolean) | boolean) => {\n//     (typeof condition === 'function' ? condition() : condition ?? true) ? el.addEventListener(evt, cb) : null;\n//   };\n", "import { StateType } from '../../types';\n\ntype UseInnerHTMLProps<T> = {\n  state: StateType<T>;\n};\n\nexport function useInnerHTML<T>({\n  state,\n}: UseInnerHTMLProps<T>): (\n  el: HTMLElement,\n  children: (state: T) => string | number | HTMLElement | SVGElement | (string | number | HTMLElement | SVGElement)[],\n  condition?: ((state: T) => boolean) | boolean,\n) => void;\n\nexport function useInnerHTML(): (\n  el: HTMLElement,\n  children: () => string | number | HTMLElement | SVGElement | (string | number | HTMLElement | SVGElement)[],\n  condition?: (() => boolean) | boolean,\n) => void;\n\nexport function useInnerHTML<T>(props?: UseInnerHTMLProps<T>) {\n  const { state } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, children, condition] = htmlProps;\n    const apply = () => {\n      const _children = state ? children(state.get()) : children();\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      if (_condition) {\n        el.innerHTML = '';\n        if (Array.isArray(_children)) {\n          _children.forEach((c) => {\n            if (c instanceof HTMLElement || c instanceof SVGElement) el.appendChild(c);\n            else el.appendChild(document.createTextNode(String(c)));\n          });\n        } else if (_children instanceof HTMLElement || _children instanceof SVGElement) {\n          el.appendChild(_children);\n        } else {\n          el.innerHTML = String(_children);\n        }\n      }\n    };\n    if (state) state.sub(apply);\n    apply();\n  };\n}\n", "import { StateType } from '../../types';\n\ntype UseStyleProps<T> = {\n  event?: keyof GlobalEventHandlersEventMap | null;\n  eventElement?: HTMLElement | Window;\n  invokeImmediately?: boolean;\n  mediaMaxWidth?: number;\n  mediaMinWidth?: number;\n  mediaType?: 'screen' | 'print';\n  state?: StateType<T>;\n};\n\nexport function useStyle(\n  props?: UseStyleProps<any>,\n): (\n  el: HTMLElement,\n  prop: keyof CSSStyleDeclaration | `--${string}`,\n  val: (() => string | number) | (string | number),\n  condition?: boolean | (() => boolean),\n) => void;\n\nexport function useStyle<T>(\n  props?: UseStyleProps<T>,\n): (\n  el: HTMLElement,\n  prop: keyof CSSStyleDeclaration | `--${string}`,\n  val: ((state: T) => string | number) | (string | number),\n  condition?: boolean | ((state: T) => boolean),\n) => void;\n\nexport function useStyle<T>(props?: UseStyleProps<T>) {\n  const {\n    event = null,\n    eventElement = window,\n    invokeImmediately = true,\n    mediaMinWidth = 0,\n    mediaMaxWidth = Infinity,\n    state = undefined,\n  } = props ?? {};\n  return (...htmlProps: any) => {\n    const [el, prop, val, condition] = htmlProps;\n    const apply = () => {\n      const isInBreakpoint = window.innerWidth >= mediaMinWidth && window.innerWidth <= mediaMaxWidth;\n      if (!isInBreakpoint) return;\n      const _val = String(typeof val === 'function' ? val(state ? state.get() : undefined) : val);\n      const _condition =\n        typeof condition === 'function' ? condition(state ? state.get() : undefined) : condition ?? true;\n      _condition\n        ? prop.startsWith('--')\n          ? el.style.setProperty(prop, _val)\n          : (el.style[prop as any] = _val as any)\n        : null;\n    };\n\n    // handle state changes\n    if (state) state.sub(apply);\n\n    // handle resize changes\n    window.addEventListener('resize', apply);\n\n    // handle event changes\n    if (event) (el ?? eventElement).addEventListener(event, apply);\n\n    // apply immediately\n    if (invokeImmediately && !event) apply();\n  };\n}\n", "import { StateType } from '../types';\n\nfunction deepSet<T>(obj: T, pathKeys: string, value: any): T {\n  const path = pathKeys.split('.');\n  const update = (obj: any, path: (string | number)[], value: any): any => {\n    const [head, ...tail] = path;\n    if (tail.length === 0) {\n      return Array.isArray(obj)\n        ? [...obj.slice(0, head as number), value, ...obj.slice((head as number) + 1)]\n        : { ...obj, [head]: value };\n    }\n\n    if (obj[head] === undefined) {\n      obj[head] = typeof tail[0] === 'number' ? [] : {};\n    }\n\n    return {\n      ...obj,\n      [head]: update(obj[head], tail, value),\n    };\n  };\n\n  return update(obj, path as (string | number)[], value);\n}\n\ntype Persistence = {\n  key: string;\n  storage: Storage;\n  overwrite?: boolean;\n};\n\nexport function State<T>(param: T, persistence?: Persistence): StateType<T> {\n  const originalParam: T = param;\n\n  // handle persistence defaults\n  if (persistence) {\n    const storageParam: any = persistence.storage.getItem(persistence.key);\n    const parsedStorageParam = JSON.parse(storageParam);\n    const isStorageParamValid = parsedStorageParam !== null && parsedStorageParam !== undefined;\n    if ((persistence.overwrite ?? true) && isStorageParamValid) param = parsedStorageParam;\n    if (!(persistence.overwrite ?? true) && isStorageParamValid) {\n      if (Array.isArray(param) && Array.isArray(parsedStorageParam)) {\n        param = [...param, ...parsedStorageParam] as any;\n      } else if (typeof param === 'object' && typeof parsedStorageParam === 'object') {\n        param = { ...param, ...parsedStorageParam };\n      }\n    }\n  }\n\n  let _param: T = param;\n  const _subscribers: ((param: T) => any)[] = [];\n  const _get = (): T => _param;\n  const _pub = () => _subscribers.forEach((i) => i(_param));\n  const _reduce = (cb: (param: T) => T) => () => _set(cb(_param));\n  const _reset = () => _set(originalParam);\n  const _set = (param: T) => {\n    _param = param;\n    _subscribers.forEach((i) => i(_param));\n    if (persistence) persistence.storage.setItem(persistence.key, JSON.stringify(_param));\n  };\n  const _deepSet = (path: string, value: any) => _set(deepSet(_param, path, value));\n  const _sub = (cb: (param: T) => any) => _subscribers.push(cb);\n  const _unsub = (cb: (param: T) => any) => _subscribers.splice(_subscribers.indexOf(cb), 1);\n  return {\n    deepSet: _deepSet,\n    get: _get,\n    pub: _pub,\n    reset: _reset,\n    reduce: _reduce,\n    set: _set,\n    sub: _sub,\n    unsub: _unsub,\n  };\n}\n", "import { theme, themes } from \"../../state\";\n\nexport type DropdownSettings = {\n  bgColorHoverToken: `--${string}`;\n  bgColorToken: `--${string}`;\n  borderColorToken: `--${string}`;\n  borderColorHoverToken: `--${string}`;\n  borderRadiusToken: `--${string}`;\n  borderWidthToken: `--${string}`;\n  colorHoverToken: `--${string}`;\n  colorToken: `--${string}`;\n};\n\nexport const DEFAULT_DROPDOWN_SETTINGS: DropdownSettings = {\n  bgColorHoverToken: \"--background-700\",\n  bgColorToken: \"--background-500\",\n  borderColorToken: \"--foreground-100\",\n  borderColorHoverToken: \"--foreground-200\",\n  borderRadiusToken: \"--radius-scaling\",\n  borderWidthToken: \"--borders-scaling\",\n  colorHoverToken: \"--text-500\",\n  colorToken: \"--text-500\",\n};\n\nexport const dropdownStyleSheet = new CSSStyleSheet();\n\nexport const renderDropdownStyleSheet = () => {\n  const settings = theme.get() !== \"none\" ? themes.get()[theme.get()].dropdown : DEFAULT_DROPDOWN_SETTINGS;\n\n  const styles = `\n.dropdown {\n    \n    --dropdown-bg-color: var(${settings.bgColorToken}, white);\n    --dropdown-bg-color-hover: var(${settings.bgColorHoverToken}, rgba(0, 0, 0, 0.1));\n    --dropdown-border-color: var(${settings.borderColorToken}, black);\n    --dropdown-color: var(${settings.colorToken}, black);\n    --dropdown-color-hover: var(${settings.colorHoverToken}, black);\n    --dropdown-border-radius: calc(0.5 * var(${settings.borderRadiusToken}, 1));\n    --dropdown-border-width: calc(0.25 * var(${settings.borderWidthToken}, 1));\n    --dropdown-font-size: calc(1.5 * var(--font-scaling));\n    --dropdown-font-weight: 500;\n    --dropdown-line-height: calc(4 * var(--font-scaling));\n    --dropdown-arrow-size: calc(0.8 * var(--font-scaling));\n\n    appearance: none;\n    border-radius: var(--dropdown-border-radius);\n    border: var(--dropdown-border-width) solid var(--dropdown-border-color);\n    color: var(--dropdown-color);\n    cursor: pointer;\n    display: block;\n    font-size: var(--dropdown-font-size);\n    font-weight: var(--dropdown-font-weight);\n    line-height: var(--dropdown-line-height);\n    padding: 0 calc(var(--dropdown-line-height) * 1.5) 0 calc(var(--dropdown-line-height) / 2);\n    position: relative;\n    width: 100%;\n    background-image: \n      linear-gradient(45deg, transparent 50%, var(--dropdown-color) 50%), \n      linear-gradient(135deg, var(--dropdown-color) 50%, transparent 50%),\n      linear-gradient(to bottom, var(--dropdown-border-color) 0%, var(--dropdown-border-color) 100%);\n    background-color: var(--dropdown-bg-color);\n    background-size: \n      var(--dropdown-arrow-size) var(--dropdown-arrow-size), \n      var(--dropdown-arrow-size) var(--dropdown-arrow-size),\n      var(--dropdown-border-width) var(--dropdown-line-height);\n    background-position: \n      calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2)) center, \n      calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2) + var(--dropdown-arrow-size)) center,\n      calc(100% - calc(var(--dropdown-line-height) * 1.25 + var(--dropdown-border-width) - calc(var(--dropdown-arrow-size) / 2))) center;\n    background-repeat: no-repeat;\n    position: relative;\n}\n\n\n\n.dropdown[disabled] {\n    cursor: not-allowed;\n    opacity: 0.45;\n}\n\n.dropdown:hover {\n    background-color: var(--dropdown-bg-color-hover);\n    color: var(--dropdown-color-hover);\n}\n\n.dropdown option {\n    color: var(--dropdown-color);\n    background-color: var(--dropdown-bg-color);\n}\n`;\n\n  return dropdownStyleSheet.replaceSync(styles);\n};\n", "import { theme, themes } from \"../../state\";\n\nexport type SliderSettings = {\n  bgColorHoverToken: `--${string}`;\n  bgColorToken: `--${string}`;\n  borderColorToken: `--${string}`;\n  borderColorHoverToken: `--${string}`;\n  borderRadius: `--${string}`;\n  borderWidth: `--${string}`;\n  colorHoverToken: `--${string}`;\n  colorToken: `--${string}`;\n};\n\nexport const DEFAULT_SLIDER_SETTINGS: SliderSettings = {\n  bgColorHoverToken: \"--background-100\",\n  bgColorToken: \"--background-100\",\n  borderColorToken: \"--foreground-100\",\n  borderColorHoverToken: \"--foreground-200\",\n  borderRadius: \"--border-radius-500\",\n  borderWidth: \"--border-width-100\",\n  colorHoverToken: \"--foreground-500\",\n  colorToken: \"--foreground-500\",\n};\n\nexport const sliderStyleSheet = new CSSStyleSheet();\n\nexport const renderSliderStyleSheet = () => {\n  const settings = theme.get() !== \"none\" ? themes.get()[theme.get()].slider : DEFAULT_SLIDER_SETTINGS;\n\n  return sliderStyleSheet.replaceSync(`\n.slider { \n  --slider-bg-color: var(${settings.bgColorToken}, black);\n  --slider-bg-color-hover: var(${settings.bgColorHoverToken}, rgba(0, 0, 0, 0.1));\n  --slider-border-color: var(${settings.borderColorToken}, black);\n  --slider-border-radius: ${settings.borderRadius}ch;\n  --slider-border-width: ${settings.borderWidth}ch;\n  --slider-color: var(${settings.colorToken}, white);\n  --slider-color-hover: var(${settings.colorHoverToken}, black);\n}\n\n.slider {\n  -webkit-appearance: none;\n  appearance: none;\n  background: var(--slider-bg-color);\n  border-radius: var(--slider-border-radius);\n  height: 20px;\n  width: 100%;\n}\n\n.slider:hover {\n  background: var(--slider-bg-color-hover);\n}\n\n.slider::-webkit-slider-thumb {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--slider-color);\n  cursor: pointer;\n}\n\n.slider::-webkit-slider-thumb:hover {\n  background: var(--slider-color-hover);\n}\n`);\n};\n", "import { theme, themes } from \"../../state\";\n\nexport type TypographySettings = {\n  colorToken: `--${string}`;\n  fontSizeBase: number;\n  fontSizeSpread: number;\n  fontWeight: number;\n  lineHeight: number;\n};\n\nexport const DEFAULT_TYPOGRAPHY_SETTINGS: TypographySettings = {\n  colorToken: \"--text-500\",\n  fontSizeBase: 1.5,\n  fontSizeSpread: 0.25,\n  fontWeight: 500,\n  lineHeight: 1.5,\n};\n\nexport const typographyStylesheet = new CSSStyleSheet();\n\nexport const renderTypographyStylesheet = () => {\n  const settings = theme.get() !== \"none\" ? themes.get()[theme.get()].typography : DEFAULT_TYPOGRAPHY_SETTINGS;\n  const typographyTagList = \".h1, .h2, .h3, .h4, .h5, .h6, .p, .span, .div, .li, .td, .th, .summary\";\n  const styles = `\n${typographyTagList} { \n  --text-color: var(${settings.colorToken}, white);\n  --text-font-size-base: ${settings.fontSizeBase}ch;\n  --text-font-weight: ${settings.fontWeight};\n  --text-line-height: ${settings.lineHeight}ch;\n}\n\n.h1 { font-size: calc(var(--text-font-size-base) * 2); }\n.h2 { font-size: calc(var(--text-font-size-base) * 1.5); }\n.h3 { font-size: calc(var(--text-font-size-base) * 1.25); }\n.h4 { font-size: var(--text-font-size-base); }\n.h5 { font-size: calc(var(--text-font-size-base) * 0.75); }\n.h6 { font-size: calc(var(--text-font-size-base) * 0.5); }\n.p { font-size: var(--text-font-size-base); }\n.span { font-size: var(--text-font-size-base); }\n.div { font-size: var(--text-font-size-base); }\n.li { font-size: var(--text-font-size-base); }\n.td { font-size: var(--text-font-size-base); }\n.th { font-size: var(--text-font-size-base); }\n.summary { font-size: var(--text-font-size-base); }\n`;\n\n  return typographyStylesheet.replaceSync(styles);\n};\n", "import { State } from \"@linttrap/oem\";\nimport { ButtonSettings, DEFAULT_BUTTON_SETTINGS } from \"./components/button/button\";\nimport { DEFAULT_DROPDOWN_SETTINGS, DropdownSettings } from \"./components/dropdown/dropdown\";\nimport { DEFAULT_SLIDER_SETTINGS, SliderSettings } from \"./components/slider/slider\";\nimport { DEFAULT_TYPOGRAPHY_SETTINGS, TypographySettings } from \"./components/typography/typography\";\n\ntype Palette = {\n  black: string;\n  white: string;\n  blue: string;\n  yellow: string;\n  red: string;\n  green: string;\n  orange: string;\n  purple: string;\n  pink: string;\n};\n\ntype Semantic = {\n  action: keyof Palette;\n  background: keyof Palette;\n  brand: keyof Palette;\n  error: keyof Palette;\n  foreground: keyof Palette;\n  info: keyof Palette;\n  success: keyof Palette;\n  text: keyof Palette;\n  warning: keyof Palette;\n};\n\ntype Theme = {\n  colors: {\n    palette: Palette;\n    semantic: Semantic;\n  };\n  button: ButtonSettings;\n  dropdown: DropdownSettings;\n  slider: SliderSettings;\n  typography: TypographySettings;\n  scaling: {\n    borderWidth: number;\n    borderRadius: number;\n    columnWidth: number;\n    fontSize: number;\n    iconSize: number;\n    rowWidth: number;\n    padding: number;\n    saturation: number;\n    lightness: number;\n  };\n};\n\nconst DEFAULT_THEMES: Record<string, Theme> = {\n  pastel: {\n    colors: {\n      palette: {\n        black: \"#333333\",\n        red: \"#d38459\",\n        orange: \"#f1be78\",\n        yellow: \"#fffacd\",\n        green: \"#77dd77\",\n        blue: \"#aec6cf\",\n        purple: \"#c3b1e1\",\n        pink: \"#ffb6c1\",\n        white: \"#e2e2e2\",\n      },\n      semantic: {\n        action: \"blue\",\n        background: \"purple\",\n        brand: \"red\",\n        error: \"red\",\n        foreground: \"white\",\n        info: \"blue\",\n        success: \"green\",\n        text: \"red\",\n        warning: \"yellow\",\n      },\n    },\n    button: {\n      ...DEFAULT_BUTTON_SETTINGS,\n      colorToken: \"--black-600\",\n      bgColorToken: \"--background-700\",\n      bgColorHoverToken: \"--background-800\",\n      borderColorToken: \"--background-400\",\n    },\n    dropdown: {\n      ...DEFAULT_DROPDOWN_SETTINGS,\n      colorToken: \"--black-600\",\n      bgColorToken: \"--background-700\",\n      bgColorHoverToken: \"--background-800\",\n      borderColorToken: \"--background-400\",\n      borderColorHoverToken: \"--background-500\",\n    },\n    slider: { ...DEFAULT_SLIDER_SETTINGS },\n    typography: { ...DEFAULT_TYPOGRAPHY_SETTINGS, colorToken: \"--white-500\" },\n    scaling: {\n      borderRadius: 1,\n      borderWidth: 0.5,\n      columnWidth: 1,\n      fontSize: 2,\n      iconSize: 2,\n      rowWidth: 1,\n      padding: 1,\n      saturation: 0.25,\n      lightness: 0.5,\n    },\n  },\n  rich: {\n    colors: {\n      palette: {\n        black: \"#000000\",\n        red: \"#b22222\",\n        orange: \"#ff4500\",\n        yellow: \"#ffd700\",\n        green: \"#006400\",\n        blue: \"#00008b\",\n        purple: \"#4b0082\",\n        pink: \"#ff1493\",\n        white: \"#f5f5f5\",\n      },\n      semantic: {\n        action: \"blue\",\n        background: \"black\",\n        brand: \"red\",\n        error: \"red\",\n        foreground: \"black\",\n        info: \"blue\",\n        success: \"green\",\n        text: \"white\",\n        warning: \"yellow\",\n      },\n    },\n    button: DEFAULT_BUTTON_SETTINGS,\n    dropdown: DEFAULT_DROPDOWN_SETTINGS,\n    slider: { ...DEFAULT_SLIDER_SETTINGS },\n    typography: { ...DEFAULT_TYPOGRAPHY_SETTINGS },\n    scaling: {\n      borderRadius: 1,\n      borderWidth: 0,\n      columnWidth: 1,\n      fontSize: 1,\n      iconSize: 1,\n      rowWidth: 1,\n      padding: 1,\n      saturation: 0.1,\n      lightness: 0.25,\n    },\n  },\n};\n\nexport const themes = State<Record<string, Theme>>(DEFAULT_THEMES);\n\nexport const theme = State<string>(\"pastel\", {\n  key: \"theme\",\n  storage: sessionStorage,\n});\n\n// export type Tokens = {\n//   colors: {\n//     background: [color: string, contrast: string];\n//     foreground: [color: string, contrast: string];\n//     brand: [color: string, contrast: string];\n//     error: [color: string, contrast: string];\n//     info: [color: string, contrast: string];\n//     active: [color: string, contrast: string];\n//     passive: [color: string, contrast: string];\n//     success: [color: string, contrast: string];\n//     warning: [color: string, contrast: string];\n//     black: [color: string, contrast: string];\n//     neutral: [color: string, contrast: string];\n//     white: [color: string, contrast: string];\n//   };\n//   fonts: {\n//     primary: string;\n//     secondary: string;\n//     tertiary: string;\n//   };\n//   sizing: {\n//     padding: number;\n//     margin: number;\n//     fonts: number;\n//   };\n//   // expression:{} // TBD\n// };\n\n// export type Colors = keyof Tokens[\"colors\"];\n// export const colorPickerState = State<Colors>(\"black\", {\n//   key: \"colorPicker\",\n//   storage: sessionStorage,\n// });\n\n// export type Pages = \"ACCORDION\" | \"HOME\" | \"THEME\" | \"UTILITY\";\n// const page = new URLSearchParams(window.location.search).get(\"page\") as Pages;\n// export const pageState = State<Pages>(page ?? \"HOME\", {\n//   key: \"page\",\n//   storage: sessionStorage,\n// });\n\n// export type Properties = \"COLOR_PICKER\";\n// export const propertiesState = State<Properties>(\"COLOR_PICKER\", {\n//   key: \"properties\",\n//   storage: sessionStorage,\n// });\n\n// export type Themes = \"dark\" | \"light\" | \"pastel\" | \"cafe\" | \"ocean\";\n// export const themeState = State<Themes>(\"dark\", {\n//   key: \"theme\",\n//   storage: sessionStorage,\n// });\n\n// const DEFAULT_THEMES: Record<string, Tokens> = {\n//   dark: {\n//     colors: {\n//       background: [\"#212121\", \"#bababa\"],\n//       brand: [\"#9e93b4\", \"#FFFFFF\"],\n//       error: [\"#da7272\", \"#44313f\"],\n//       foreground: [\"#383838\", \"#FFFFFF\"],\n//       info: [\"#87B5D9\", \"#283443\"],\n//       active: [\"#5f9ece\", \"#324153\"],\n//       passive: [\"#c2c2c2\", \"#262626\"],\n//       success: [\"#578557\", \"#c5d3c5\"],\n//       warning: [\"#dab350\", \"#494022\"],\n//       black: [\"#212121\", \"#FFFFFF\"],\n//       neutral: [\"#3d3d3d\", \"#bababa\"],\n//       white: [\"#e6e6e6\", \"#5c5c5c\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n//   light: {\n//     colors: {\n//       background: [\"#dedede\", \"#969696\"],\n//       brand: [\"#9e93b4\", \"#FFFFFF\"],\n//       error: [\"#da7272\", \"#44313f\"],\n//       foreground: [\"#d1d1d1\", \"#949494\"],\n//       info: [\"#87B5D9\", \"#283443\"],\n//       active: [\"#5f9ece\", \"#324153\"],\n//       passive: [\"#c2c2c2\", \"#999999\"],\n//       success: [\"#578557\", \"#c5d3c5\"],\n//       warning: [\"#dab350\", \"#494022\"],\n//       black: [\"#212121\", \"#FFFFFF\"],\n//       neutral: [\"#3d3d3d\", \"#bababa\"],\n//       white: [\"#e6e6e6\", \"#5c5c5c\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n//   pastel: {\n//     colors: {\n//       background: [\"#FFB6C1\", \"#FFFACD\"],\n//       brand: [\"#FFB6C1\", \"#E0FFFF\"],\n//       error: [\"#FFA07A\", \"#87CEFA\"],\n//       foreground: [\"#D8BFD8\", \"#FFD700\"],\n//       info: [\"#B0E0E6\", \"#98FB98\"],\n//       active: [\"#FFDAB9\", \"#DDA0DD\"],\n//       passive: [\"#FFDEAD\", \"#F0E68C\"],\n//       success: [\"#98FB98\", \"#FF6A6A\"],\n//       warning: [\"#FFD700\", \"#90EE90\"],\n//       black: [\"#D3D3D3\", \"#FFFFE0\"],\n//       neutral: [\"#808080\", \"#FFFFFF\"],\n//       white: [\"#FFFFFF\", \"#D3D3D3\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n//   cafe: {\n//     colors: {\n//       background: [\"#3E2723\", \"#FFD54F\"],\n//       brand: [\"#795548\", \"#D7CCC8\"],\n//       error: [\"#D32F2F\", \"#C5E1A5\"],\n//       foreground: [\"#5D4037\", \"#FFEB3B\"],\n//       info: [\"#627f8d\", \"#FFCC80\"],\n//       active: [\"#659cb3\", \"#ffffff\"],\n//       passive: [\"#FFA726\", \"#3e2723\"],\n//       success: [\"#388E3C\", \"#ffffff\"],\n//       warning: [\"#ff8000\", \"#ffffff\"],\n//       black: [\"#4E342E\", \"#FFECB3\"],\n//       neutral: [\"#808080\", \"#FFFFFF\"],\n//       white: [\"#FFFFFF\", \"#757575\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n//   ocean: {\n//     colors: {\n//       background: [\"#001F3F\", \"#7FDBFF\"],\n//       brand: [\"#0074D9\", \"#39CCCC\"],\n//       error: [\"#FF4136\", \"#85144b\"],\n//       foreground: [\"#001F3F\", \"#FFDC00\"],\n//       info: [\"#39CCCC\", \"#3D9970\"],\n//       active: [\"#FF851B\", \"#B10DC9\"],\n//       passive: [\"#FFDC00\", \"#FF4136\"],\n//       success: [\"#2ECC40\", \"#FF4136\"],\n//       warning: [\"#FF851B\", \"#2ECC40\"],\n//       black: [\"#001F3F\", \"#7FDBFF\"],\n//       neutral: [\"#808080\", \"#FFFFFF\"],\n//       white: [\"#DDDDDD\", \"#001F3F\"],\n//     },\n//     fonts: { primary: \"Arial, sans-serif\", secondary: \"Arial, sans-serif\", tertiary: \"Arial, sans-serif\" },\n//     sizing: { padding: 1, margin: 1, fonts: 1 },\n//   },\n// };\n\n// export const themesState = State<Record<Themes, Tokens>>(DEFAULT_THEMES, {\n//   key: \"tokens\",\n//   storage: sessionStorage,\n// });\n\n// export const tokensEnabledState = State<boolean>(true, {\n//   key: \"tokensEnabled\",\n//   storage: sessionStorage,\n// });\n", "import { theme, themes } from \"../../state\";\n\nexport type ButtonSettings = {\n  bgColorHoverToken: `--${string}`;\n  bgColorToken: `--${string}`;\n  borderColorToken: `--${string}`;\n  borerColorHoverToken: `--${string}`;\n  colorHoverToken: `--${string}`;\n  colorToken: `--${string}`;\n};\n\nexport const DEFAULT_BUTTON_SETTINGS: ButtonSettings = {\n  bgColorHoverToken: \"--background-700\",\n  bgColorToken: \"--background-500\",\n  borderColorToken: \"--foreground-100\",\n  borerColorHoverToken: \"--foreground-200\",\n  colorHoverToken: \"--text-500\",\n  colorToken: \"--text-500\",\n};\n\nexport const buttonStyleSheet = new CSSStyleSheet();\n\nexport const renderButtonStyleSheet = () => {\n  const settings = theme.get() !== \"none\" ? themes.get()[theme.get()].button : DEFAULT_BUTTON_SETTINGS;\n\n  return buttonStyleSheet.replaceSync(`\n.button { \n  --button-bg-color: var(${settings.bgColorToken}, black);\n  --button-bg-color-hover: var(${settings.bgColorHoverToken}, rgba(0, 0, 0, 0.1));\n  --button-border-color: var(${settings.borderColorToken}, black);\n  --button-border-radius: ${settings.borderRadius}ch;\n  --button-border-width: ${settings.borderWidth}ch;\n  --button-color: var(${settings.colorToken}, white);\n  --button-color-hover: var(${settings.colorHoverToken}, black);\n  --button-font-size: ${settings.fontSize}ch;\n  --button-font-weight: ${settings.fontWeight};\n  --button-line-height: ${settings.lineHeight}ch;\n  --button-arrow-size: ${settings.fontSize * 0.5}ch;\n\n  appearance: none;\n  background-color: var(--button-bg-color);\n  border-radius: var(--button-border-radius);\n  border: var(--button-border-width) solid var(--button-border-color);\n  color: var(--button-color);\n  cursor: pointer;\n  display: block;\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  line-height: var(--button-line-height);\n  padding: 0 calc(var(--button-line-height) * 1.5) 0 calc(var(--button-line-height) / 2);\n  position: relative;\n  width: 100%;\n}\n\n.button[disabled] {\n    cursor: not-allowed;\n    opacity: 0.45;\n}\n\n.button:hover {\n    background-color: var(--button-bg-color-hover);\n    color: var(--button-color-hover);\n}\n`);\n};\n", "export const cardStyleSheet = new CSSStyleSheet();\n\nexport const renderCardStyleSheet = () =>\n  cardStyleSheet.replaceSync(`.card {\n  /* Settings */\n  --card-bg-color: inherit;\n  --card-font-family: inherit;\n  --card-font-size: inherit;\n  --card-text-color: inherit;\n  --card-inner-border-color: inherit;\n  --card-inner-border-width: inherit;\n  --card-outer-border-color: inherit;\n  --card-outer-border-radius: inherit;\n  --card-outer-border-width: inherit;\n  --card-spacing: inherit;\n  --card-transition-duration: inherit;\n  --card-transition-timing: inherit;\n\n  &.card--small {\n    --card-spacing: 10px;\n    --card-font-size: 14px;\n    --card-outer-border-radius: 4px;\n    --card-outer-border-width: 1px;\n    --card-inner-border-width: 0px;\n  }\n\n  &.card--medium {\n    --card-spacing: 15px;\n    --card-font-size: 16px;\n    --card-outer-border-radius: 8px;\n    --card-outer-border-width: 2px;\n    --card-inner-border-width: 1px;\n  }\n\n  &.card--large {\n    --card-spacing: 20px;\n    --card-font-size: 18px;\n    --card-outer-border-radius: 12px;\n    --card-outer-border-width: 3px;\n    --card-inner-border-width: 2px;\n  }\n\n  &.card--dark {\n    --card-bg-color: var(--token-black, black);\n    --card-text-color: var(--token-white, white);\n    --card-inner-border-color: var(--token-white-20, white);\n    --card-outer-border-color: var(--token-black, black);\n    &.card--ghost {\n      --card-bg-color: var(--token-black-10, black);\n      --card-text-color: var(--token-black, black);\n      --card-inner-border-color: var(--token-black-20, black);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-black, black);\n      --card-inner-border-color: var(--token-black-20, black);\n      --card-outer-border-color: var(--token-black-70, black);\n    }\n  }\n\n  &.card--error {\n    --card-bg-color: var(--token-red);\n    --card-text-color: var(--token-white, white);\n    --card-inner-border-color: var(--token-white-30, white);\n    --card-outer-border-color: var(--token-red, red);\n    &.card--ghost {\n      --card-bg-color: var(--token-red-10, red);\n      --card-text-color: var(--token-red, red);\n      --card-inner-border-color: var(--token-red-30, red);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-red, red);\n      --card-inner-border-color: var(--token-red-30, red);\n      --card-outer-border-color: var(--token-red, red);\n    }\n  }\n\n  &.card--info {\n    --card-bg-color: var(--token-blue);\n    --card-text-color: var(--token-white, white);\n    --card-inner-border-color: var(--token-white-30, white);\n    --card-outer-border-color: var(--token-blue, blue);\n    &.card--ghost {\n      --card-bg-color: var(--token-blue-10, blue);\n      --card-text-color: var(--token-blue, blue);\n      --card-inner-border-color: var(--token-blue-30, blue);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-blue, blue);\n      --card-inner-border-color: var(--token-blue-30, blue);\n      --card-outer-border-color: var(--token-blue, blue);\n    }\n  }\n\n  &.card--light {\n    --card-bg-color: var(--token-white, white);\n    --card-text-color: var(--token-black, black);\n    --card-inner-border-color: var(--token-black-20, black);\n    --card-outer-border-color: var(--token-white, white);\n    &.card--ghost {\n      --card-bg-color: var(--token-white-05, white);\n      --card-text-color: var(--token-white, white);\n      --card-inner-border-color: var(--token-white-20, white);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-white, white);\n      --card-inner-border-color: var(--token-white-20, white);\n      --card-outer-border-color: var(--token-white-70, white);\n    }\n  }\n\n  &.card--success {\n    --card-bg-color: var(--token-green);\n    --card-text-color: var(--token-white, white);\n    --card-inner-border-color: var(--token-white-30, white);\n    --card-outer-border-color: var(--token-green, green);\n    &.card--ghost {\n      --card-bg-color: var(--token-green-10, green);\n      --card-text-color: var(--token-green, green);\n      --card-inner-border-color: var(--token-green-30, green);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-green, green);\n      --card-inner-border-color: var(--token-green-20, green);\n      --card-outer-border-color: var(--token-green, green);\n    }\n  }\n\n  &.card--warning {\n    --card-bg-color: var(--token-yellow);\n    --card-text-color: var(--token-black, black);\n    --card-inner-border-color: var(--token-black-20, black);\n    --card-outer-border-color: var(--token-yellow, yellow);\n    &.card--ghost {\n      --card-bg-color: var(--token-yellow-10, yellow);\n      --card-text-color: var(--token-yellow, yellow);\n      --card-inner-border-color: var(--token-yellow-20, yellow);\n      --card-outer-border-color: transparent;\n    }\n    &.card--outline {\n      --card-bg-color: transparent;\n      --card-text-color: var(--token-yellow, yellow);\n      --card-inner-border-color: var(--token-yellow-20, yellow);\n      --card-outer-border-color: var(--token-yellow, yellow);\n    }\n  }\n\n  /* Rules */\n  background-color: var(--card-bg-color);\n  border-radius: var(--card-outer-border-radius);\n  border-style: solid;\n  border-width: var(--card-outer-border-width);\n  border-color: var(--card-outer-border-color);\n  display: grid;\n  grid-template-areas: \"card__title card__actions\" \"card__body card__body\" \"card__footer card__footer\";\n  grid-template-rows: max-content 1fr max-content;\n  font-family: var(--card-font-family);\n  font-size: var(--card-font-size);\n  font-weight: normal;\n  row-gap: var(--card-spacing);\n  padding: var(--card-spacing);\n  text-align: left;\n  transition: all var(--card-transition-duration, 0.3s) var(--card-transition-timing, ease);\n\n  .card__actions {\n    align-items: center;\n    border-bottom: var(--card-inner-border-width) solid var(--card-inner-border-color);\n    display: flex;\n    flex-wrap: wrap;\n    grid-area: card__actions;\n    justify-content: flex-end;\n    padding-bottom: calc(var(--card-spacing) / 2);\n  }\n\n  .card__body {\n    grid-area: card__body;\n  }\n\n  .card__footer {\n    align-items: center;\n    border-top: var(--card-inner-border-width) solid var(--card-inner-border-color);\n    display: flex;\n    grid-area: card__footer;\n    padding-top: calc(var(--card-spacing) / 2);\n    justify-content: flex-end;\n  }\n\n  .card__title {\n    align-items: center;\n    border-bottom: var(--card-inner-border-width) solid var(--card-inner-border-color);\n    color: var(--card-text-color);\n    display: flex;\n    font-size: var(--card-font-large);\n    font-weight: bold;\n    grid-area: card__title;\n    padding-bottom: calc(var(--card-spacing) / 2);\n  }\n}\n`);\n", "export const dashboardStyleSheet = new CSSStyleSheet();\n\nexport const renderDashboardStyleSheet = () => {\n  const bg = `var(--token-color-background, black)`;\n  const bgHueVar = `var(--token-color-background-hue)`;\n  const bgSaturationVar = `var(--token-color-background-saturation)`;\n  const bgLightnessVar = `var(--token-color-background-lightness)`;\n  const bgContrast = `--token-color-background-contrast`;\n\n  const vars = `\n  .dashboard {\n\n    --dashboard-overflow-y: hidden;\n    --dashboard-rows: auto auto;\n    --dashboard-text-color: var(${bgContrast}, black);\n    --dashboard-max-height: auto;\n    --dashboard-bg-color: var(${bg}, black);\n    --dashboard-columns: 1fr 1fr 1fr;\n    --dashboard-overflow: auto;\n    --dashboard-overflow-y: auto;\n\n    --dashboard-aside-bg-color: hsl(${bgHueVar}, ${bgSaturationVar}, calc(${bgLightnessVar} + 1.5%));\n    --dashboard-aside-body-column: 1/4;\n    --dashboard-aside-body-row: 6/7;\n    --dashboard-aside-body-padding: 20px;\n    --dashboard-aside-footer-column: 1/4;\n    --dashboard-aside-footer-row: 8/9;\n    --dashboard-aside-footer-padding: 20px;\n    --dashboard-aside-header-column: 1/4;\n    --dashboard-aside-header-row: 5/6;\n    --dashboard-aside-header-padding: 20px;\n    \n    --dashboard-main-bg-color: hsl(${bgHueVar}, ${bgSaturationVar}, calc(${bgLightnessVar} + 0%));\n    --dashboard-main-body-column: 1/4;\n    --dashboard-main-body-row: 4/5;\n    --dashboard-main-body-padding: 20px;\n    --dashboard-main-footer-column: 1/4;\n    --dashboard-main-footer-row: 10/11;\n    --dashboard-main-footer-padding: 20px;\n    --dashboard-main-header-column: 1/4;\n    --dashboard-main-header-row: 3/4;\n    --dashboard-main-header-padding: 20px;\n\n    --dashboard-nav-bg-color: hsl(${bgHueVar}, ${bgSaturationVar}, calc(${bgLightnessVar} + 1.5%));\n    --dashboard-nav-body-column: 1/4;\n    --dashboard-nav-body-row: 2/3;\n    --dashboard-nav-body-padding: 20px;\n    --dashboard-nav-footer-column: 1/4;\n    --dashboard-nav-footer-row: 9/10;\n    --dashboard-nav-footer-padding: 20px;\n    --dashboard-nav-header-column: 1/4;\n    --dashboard-nav-header-row: 1/2;\n    --dashboard-nav-header-padding: 0;\n}`;\n\n  const tablet = `@media (min-width: 768px) {\n.dashboard {\n    --dashboard-columns: 1fr 3fr 1fr;\n    --dashboard-rows: min-content 1fr min-content;\n    --dashboard-overflow: hidden;\n    --dashboard-overflow-y: auto;\n    --dashboard-max-height: 100vh;\n\n    --dashboard-aside-body-column: 3/4;\n    --dashboard-aside-footer-column: 3/4;\n    --dashboard-aside-footer-row: 3/4;\n    --dashboard-aside-header-column: 3/4;\n    --dashboard-aside-header-row: 1/2;\n    --dashboard-aside-body-row: 2/3;\n\n    --dashboard-main-body-column: 2/3;\n    --dashboard-main-footer-column: 2/3;\n    --dashboard-main-footer-row: 3/4;\n    --dashboard-main-header-column: 2/3;\n    --dashboard-main-header-row: 1/2;\n    --dashboard-main-body-row: 2/3;\n\n    --dashboard-nav-body-column: 1/2;\n    --dashboard-nav-footer-column: 1/2;\n    --dashboard-nav-footer-row: 3/4;\n    --dashboard-nav-header-column: 1/2;\n    --dashboard-nav-header-row: 1/2;\n    --dashboard-nav-body-row: 2/3;\n    }\n}`;\n\n  const rules = `\n\n.dashboard {\n    align-items: flex-start;\n    background-color: var(--dashboard-bg-color);\n    box-sizing: border-box;\n    color: var(--dashboard-text-color, white);\n    display: grid;\n    grid-template-columns: var(--dashboard-columns, 1fr);\n    grid-template-rows: var(--dashboard-rows, auto);\n    height: var(--dashboard-max-height, auto);\n    max-height: var(--dashboard-max-height, auto);\n    overflow-y: var(--dashboard-overflow, auto);\n}\n\n.dashboard__nav-header {\n    align-items: center;\n    background-color: var(--dashboard-nav-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-nav-header-column, 1/2);\n    grid-row: var(--dashboard-nav-header-row, 1/2);\n    height: 100%;\n    padding: var(--dashboard-nav-header-padding, 20px);\n}\n\n.dashboard__nav {\n    align-items: center;\n    background-color: var(--dashboard-nav-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-nav-body-column, 1/2);\n    grid-row: var(--dashboard-nav-body-row, 2/3);\n    height: 100%;\n    justify-content: flex-start;\n    overflow-y: var(--dashboard-overflow-y, auto);\n    padding: var(--dashboard-nav-body-padding, 20px);\n}\n\n.dashboard__nav-footer {\n    background-color: var(--dashboard-nav-bg-color);\n    grid-column: var(--dashboard-nav-footer-column, 1/2);\n    grid-row: var(--dashboard-nav-footer-row, 3/4);\n    height: 100%;\n    padding: var(--dashboard-nav-footer-padding, 20px);\n}\n\n.dashboard__main-header {\n    align-items: flex-start;\n    background-color: var(--dashboard-main-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-main-header-column, 2/3);\n    grid-row: var(--dashboard-main-header-row, 1/2);\n    height: 100%;\n    justify-content: center;\n    padding: var(--dashboard-main-header-padding, 20px);\n}\n\n.dashboard__main {\n    align-items: flex-start;\n    background-color: var(--dashboard-main-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-main-body-column, 2/3);\n    grid-row: var(--dashboard-main-body-row, 2/3);\n    height: 100%;\n    overflow-y: var(--dashboard-overflow-y, auto);\n    padding: var(--dashboard-main-body-padding, 20px);\n}\n\n.dashboard__main-footer {\n    background-color: var(--dashboard-main-bg-color);\n    grid-row: var(--dashboard-main-footer-row, 3/4);\n    grid-column: var(--dashboard-main-footer-column, 2/3);\n    height: 100%;\n    padding: var(--dashboard-main-footer-padding, 20px);\n}\n\n.dashboard__aside-header {\n    align-items: flex-end;\n    background-color: var(--dashboard-aside-bg-color);\n    display: flex;\n    flex-direction: column;\n    grid-column: var(--dashboard-aside-header-column, 3/4);\n    grid-row: var(--dashboard-aside-header-row, 1/2);\n    height: 100%;\n    justify-content: center;\n    padding: var(--dashboard-aside-header-padding, 20px);\n}\n\n.dashboard__aside {\n    background-color: var(--dashboard-aside-bg-color);\n    grid-column: var(--dashboard-aside-body-column, 3/4);\n    grid-row: var(--dashboard-aside-body-row, 2/3);\n    height: 100%;\n    overflow-y: var(--dashboard-overflow-y, auto);\n    padding: var(--dashboard-aside-body-padding, 20px);\n}\n\n.dashboard__aside-footer {\n    background-color: var(--dashboard-aside-bg-color);\n    grid-column: var(--dashboard-aside-footer-column, 3/4);\n    grid-row: var(--dashboard-aside-footer-row, 3/4);\n    height: 100%;\n    padding: var(--dashboard-aside-footer-padding, 20px);\n}`;\n\n  return dashboardStyleSheet.replaceSync(`${vars}${tablet}${rules}`);\n};\n", "export const dialogStyleSheet = new CSSStyleSheet();\n\nexport const renderDialogStyleSheet = () =>\n  dialogStyleSheet.replaceSync(`:root {\n  --dialog-bg-color: var(--token-black, black);\n  --dialog-border-radius: 8px;\n  --dialog-close-size: 13px;\n  --dialog-gap: 0px;\n  --dialog-max-height: 90vh;\n  --dialog-max-width: 90vh;\n  --dialog-scrollbar-thumb-color: var(--token-white-10, black);\n  --dialog-scrollbar-track-color: var(--token-white-02, black);\n  --dialog-spacing: 16px;\n  --dialog-text-color: var(--token-white, white);\n  --dialog-title-size: 20px;\n}\n\n.dialog[open] {\n  align-items: center;\n  backdrop-filter: blur(2px); /* Optional: Adds a blur effect to the background elements */\n  background-color: var(--token-white-03, white); /* Optional: for dimming the background */\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 1000; /* High z-index to ensure it is on top */\n}\n\n.dialog__view {\n  background: var(--dialog-bg-color);\n  border-radius: var(--dialog-border-radius);\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  display: flex;\n  flex-direction: column;\n  gap: var(--dialog-gap);\n  height: var(--dialog-max-height);\n  width: var(--dialog-max-width);\n}\n\n.dialog__header {\n  align-items: center;\n  color: var(--token-white);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-size: var(--dialog-title-size);\n  border-bottom: 1px solid var(--token-white-10);\n  padding: var(--dialog-spacing);\n}\n\n.dialog__body {\n  flex: 1;\n  overflow-y: auto; /* Ensure only vertical scrolling */\n  max-height: calc(var(--dialog-max-height) - 60px); /* Subtract header and footer heights */\n  padding: var(--dialog-spacing);\n}\n\n.dialog__footer {\n  padding: var(--dialog-spacing);\n  border-top: 1px solid var(--token-white-10);\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  gap: var(--dialog-spacing);\n}\n\n/* Scrollbar styling */\n.dialog__body::-webkit-scrollbar {\n  width: 10px;\n  background-color: var(--dialog-scrollbar-track-color);\n}\n\n.dialog__body::-webkit-scrollbar-track {\n  background-color: var(--dialog-scrollbar-track-color);\n}\n\n.dialog__body::-webkit-scrollbar-thumb {\n  background-color: var(--dialog-scrollbar-thumb-color);\n  border-radius: 5px;\n}\n\n/* Modifier classes for different dialog sizes */\n.dialog--full-screen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  border-radius: 0;\n}\n\n.dialog--big {\n  width: 80%;\n  max-width: 800px;\n  height: 60%;\n}\n\n.dialog--medium {\n  width: 60%;\n  max-width: 600px;\n  height: 50%;\n}\n\n.dialog--small {\n  width: 40%;\n  max-width: 400px;\n  height: 40%;\n}\n\n/* Responsive adjustments */\n@media (max-width: 600px) {\n  .dialog--big,\n  .dialog--medium,\n  .dialog--small {\n    width: 90%;\n    max-width: none;\n    height: auto;\n  }\n}\n\n@media (max-width: 400px) {\n  .dialog--full-screen,\n  .dialog--big,\n  .dialog--medium,\n  .dialog--small {\n    width: 100%;\n    max-width: none;\n    height: auto;\n  }\n}\n`);\n", "export const flexgridStyleSheet = new CSSStyleSheet();\n\nexport const renderFlexGridStyleSheet = () =>\n  flexgridStyleSheet.replaceSync(`.flexgrid {\n  --mobile-gap: 10px;\n  --tablet-gap: 20px;\n  --desktop-gap: 30px;\n  --mobile-width: 200px;\n  --tablet-width: 200px;\n  --desktop-width: 200px;\n}\n\n@media screen and (min-width: 0px) and (max-width: 767px) {\n  .flexgrid {\n    --width: var(--mobile-width);\n    --gap: var(--mobile-gap);\n  }\n}\n\n@media screen and (min-width: 768px) and (max-width: 1023px) {\n  .flexgrid {\n    --width: var(--tablet-width);\n    --gap: var(--tablet-gap);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .flexgrid {\n    --width: var(--desktop-width);\n    --gap: var(--desktop-gap);\n  }\n}\n\n.flexgrid {\n  display: flex;\n  gap: var(--gap);\n  justify-content: center;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.flexgrid__item {\n  width: 100%;\n  height: max-content;\n  flex: 1 0 var(--width);\n}\n`);\n", "export const flexpaneStyleSheet = new CSSStyleSheet();\n\nexport const renderFlexpaneStyleSheet = () =>\n  flexpaneStyleSheet.replaceSync(`:root {\n\n}\n\n.flexpane {\n\n  /* Defaults */\n  &.flexpane__header {}\n  &.flexpane__header__title {}\n  &.flexpane__body {}\n  &.flexpane__footer {}\n\n  /* Modes */\n  .flexpane--alert {\n\n    /* Structure */\n    &.flexpane__header {}\n    &.flexpane__header__title {}\n    &.flexpane__body {}\n    &.flexpane__footer {}\n\n    /* Colors */\n    &.flexpane--dark {\n      &.flexpane__header {}\n      &.flexpane__header__title {}\n      &.flexpane__body {}\n      &.flexpane__footer {}\n    }\n\n    .flexpane--light {}\n    .flexpane--success {}\n    .flexpane--warning {}\n    .flexpane--error {}\n    .flexpane--info {}\n\n    /* Variants */\n    .flexpane--outline {\n      &.flexpane__header {}\n      &.flexpane__header__title {}\n      &.flexpane__body {}\n      &.flexpane__footer {}\n    }\n    .flexpane--ghost {}\n\n  }\n  .flexpane--toast {}\n  .flexpane--modal {}\n  .flexpane--drawer {}\n  .flexpane--sidebar {}\n  .flexpane--popover {}\n  .flexpane--card {}\n  .flexpane--dialog {}\n}\n\n\n\n/* States */\n.flexpane--loading {}\n.flexpane--disabled {}`);\n", "export const gridStyleSheet = new CSSStyleSheet();\n\nexport const renderGridStyleSheet = () =>\n  gridStyleSheet.replaceSync(`.grid {\n  --bg-color: var(--token-black, black);\n  --desktop-columns: 12;\n  --desktop-max-col-width: 6ch;\n  --desktop-col-gap: 2ch;\n  --mobile-col-gap: 2ch;\n  --desktop-row-gap: 2ch;\n  --mobile-row-gap: 1ch;\n  --mobile-columns: 6;\n  --mobile-max-col-width: 1fr;\n  --scrollbar-thumb-color: var(--token-black-80, black);\n  --scrollbar-track-color: var(--token-white-10, black);\n  --text-color: var(--token-white, white);\n  background-color: var(--bg-color);\n  color: var(--text-color);\n  display: grid;\n  width: 100%;\n  max-width: var(--max-width);\n  margin: 0 auto;\n  box-sizing: border-box;\n  height: 100vh;\n  max-height: 100vh;\n  grid-template-rows: max-content max-content max-content 1fr;\n}\n\n@media (min-width: 0px) {\n  .grid {\n    grid-template-columns: repeat(var(--mobile-columns), var(--mobile-max-col-width));\n    column-gap: var(--mobile-col-gap);\n    row-gap: var(--mobile-row-gap);\n  }\n}\n\n@media (min-width: 768px) {\n  .grid {\n    grid-template-columns: 1fr repeat(var(--desktop-columns), minmax(0px, var(--desktop-max-col-width))) 1fr;\n    column-gap: var(--desktop-col-gap);\n    row-gap: var(--desktop-row-gap);\n  }\n}\n\n.grid__item {\n  --mobile-align-items: start;\n  --mobile-justify-items: start;\n  --mobile-row-start: auto;\n  --mobile-row-end: auto;\n  --desktop-align-items: center;\n  --desktop-justify-items: start;\n  --desktop-row-start: auto;\n  --desktop-row-end: auto;\n  background-color: red;\n  display: grid;\n  grid-template-columns: subgrid;\n  box-sizing: border-box;\n  align-items: var(--mobile-align-items);\n  justify-items: var(--mobile-justify-items);\n}\n\n@media screen and (min-width: 0px) and (max-width: 767px) {\n  .grid__item--row-start-var {\n    grid-row-start: var(--mobile-row-start);\n  }\n  .grid__item--row-end-var {\n    grid-row-end: var(--mobile-row-end);\n  }\n  .grid__item--col-start-var {\n    grid-column-start: var(--mobile-col-start);\n  }\n  .grid__item--col-end-var {\n    grid-column-end: var(--mobile-col-end);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  .grid__item--row-start-var {\n    grid-row-start: var(--desktop-row-start);\n  }\n  .grid__item--row-end-var {\n    grid-row-end: var(--desktop-row-end);\n  }\n  .grid__item--col-start-var {\n    grid-column-start: var(--desktop-col-start);\n  }\n  .grid__item--col-end-var {\n    grid-column-end: var(--desktop-col-end);\n  }\n}\n`);\n", "export const sectionStyleSheet = new CSSStyleSheet();\n\nexport const renderSectionStyleSheet = () =>\n  sectionStyleSheet.replaceSync(`.section {\n}\n\n.section__header {\n}\n\n.section__header__title {\n  font-size: 1.5em;\n}\n\n.section__header__description {\n  font-size: 1em;\n  opacity: 0.5;\n}\n\n.section__content {\n}\n\n`);\n", "export const togglesStyleSheet = new CSSStyleSheet();\n\nexport const renderTogglesStyleSheet = () =>\n  togglesStyleSheet.replaceSync(`.toggle {\n  position: relative;\n  width: 50px;\n  height: 50px;\n  background-color: var(--bg-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.toggle input {\n  display: none;\n}\n\n.toggle:before {\n  border-bottom: 2px solid var(--text-color);\n  border-top: 2px solid var(--text-color);\n  content: \"\";\n  height: 12px;\n  left: 12.5px;\n  position: absolute;\n  width: 25px;\n  transition: all 0.3s;\n}\n\n.toggle:after {\n  position: absolute;\n  border-top: 2px solid var(--text-color);\n  content: \"\";\n  display: block;\n  width: 50%;\n  content: \"\";\n  transition: all 0.3s;\n}\n\n.toggle:has(input:checked)::before {\n  border-width: 0;\n  position: absolute;\n  left: 12.5px;\n  background-color: var(--text-color);\n  content: \"\";\n  display: block;\n  height: 2px;\n  width: 25px;\n  transition: all 0.3s;\n  transform: rotate(45deg);\n}\n.toggle:has(input:checked)::after {\n  border-width: 0;\n  position: absolute;\n  left: 12.5px;\n  background-color: var(--text-color);\n  content: \"\";\n  display: block;\n  height: 2px;\n  width: 25px;\n  transition: all 0.3s;\n  transform: rotate(-45deg);\n}\n`);\n", "export function hexToHSL(hex: string) {\n  hex = hex.replace(/^#/, \"\");\n  if (hex.length === 3) {\n    hex = hex\n      .split(\"\")\n      .map((x) => x + x)\n      .join(\"\");\n  }\n  const r = parseInt(hex.slice(0, 2), 16) / 255;\n  const g = parseInt(hex.slice(2, 4), 16) / 255;\n  const b = parseInt(hex.slice(4, 6), 16) / 255;\n\n  const max = Math.max(r, g, b),\n    min = Math.min(r, g, b);\n  let h = 0,\n    s = 0,\n    l = (max + min) / 2;\n\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n    }\n    h /= 6;\n  }\n\n  return {\n    hue: Math.round(h * 360),\n    saturation: Math.round(s * 100),\n    lightness: Math.round(l * 100),\n  };\n}\n\ninterface Point {\n  x: number;\n  y: number;\n  v?: number;\n}\n\nexport function generateBezierCurve(size: number = 100, curvature: number = 0, steps: number = 100): Point[] {\n  const p0: Point = { x: 0, y: size }; // Start point (bottom left)\n  const p3: Point = { x: size, y: 0 }; // End point (top right)\n\n  // Adjust control points based on curvature\n  let p1: Point, p2: Point;\n  if (curvature === 0) {\n    // Straight line\n    p1 = { x: size / 2, y: size / 2 };\n    p2 = { x: size / 2, y: size / 2 };\n  } else if (curvature > 0) {\n    // Positive curvature (upward curve)\n    p1 = { x: size * curvature, y: size };\n    p2 = { x: size, y: size * curvature };\n  } else {\n    // Negative curvature (downward curve)\n    p1 = { x: 0, y: size * (1 + curvature) };\n    p2 = { x: size * (1 + curvature), y: 0 };\n  }\n\n  // Function to calculate cubic B\u00E9zier point\n  function getBezierPoint(t: number, p0: Point, p1: Point, p2: Point, p3: Point): Point {\n    const x = (1 - t) ** 3 * p0.x + 3 * (1 - t) ** 2 * t * p1.x + 3 * (1 - t) * t ** 2 * p2.x + t ** 3 * p3.x;\n    const y = (1 - t) ** 3 * p0.y + 3 * (1 - t) ** 2 * t * p1.y + 3 * (1 - t) * t ** 2 * p2.y + t ** 3 * p3.y;\n    const v = x / size;\n    return { x, y, v };\n  }\n\n  // Calculate arc lengths at discrete intervals\n  const arcLengths = [0];\n  let prevPoint = p0;\n  for (let i = 1; i <= steps; i++) {\n    const t = i / steps;\n    const point = getBezierPoint(t, p0, p1, p2, p3);\n    const dx = point.x - prevPoint.x;\n    const dy = point.y - prevPoint.y;\n    const length = Math.sqrt(dx * dx + dy * dy);\n    arcLengths.push(arcLengths[i - 1] + length);\n    prevPoint = point;\n  }\n  const totalLength = arcLengths[steps];\n\n  // Generate evenly spaced coordinates based on arc length\n  const coordinates: Point[] = [];\n  for (let i = 0; i <= steps; i++) {\n    const targetLength = (i / steps) * totalLength;\n    let t = 0;\n    for (let j = 1; j <= steps; j++) {\n      if (arcLengths[j] >= targetLength) {\n        const ratio = (targetLength - arcLengths[j - 1]) / (arcLengths[j] - arcLengths[j - 1]);\n        t = (j - 1 + ratio) / steps;\n        break;\n      }\n    }\n    coordinates.push(getBezierPoint(t, p0, p1, p2, p3));\n  }\n\n  return coordinates;\n}\n\nexport const generateColorVariation = (\n  hex: string,\n  variation: number,\n  lightnessScaling: number,\n  saturationScaling: number\n) => {\n  const { hue, saturation, lightness } = hexToHSL(hex);\n  const _lightness = lightness >= 100 ? 100 : lightness;\n  const _saturation = saturation >= 100 ? 100 : saturation;\n  const rangedLightness =\n    variation === 50 ? lightness : Math.min(Math.max(_lightness + (variation - 50) * lightnessScaling, 0), 100);\n  const rangedSaturation =\n    saturation === 0\n      ? 0\n      : saturation === 50\n      ? saturation\n      : Math.min(Math.max(_saturation + (variation - 50) * saturationScaling, 0), 100);\n  return { hue, saturation: rangedSaturation, lightness: rangedLightness };\n};\n\nexport function scaleNumbers(\n  range: number,\n  startValue: number,\n  endValue: number,\n  curve: number,\n  lean: number\n): number[] {\n  const scaledNumbers: number[] = [];\n\n  const interpolate = (t: number, curve: number, lean: number): number => {\n    // Apply lean\n    t = Math.pow(t, lean);\n\n    if (curve < 0) {\n      return Math.pow(t, 1 + Math.abs(curve)); // Ease-in (slow start, fast end)\n    } else if (curve > 0) {\n      return 1 - Math.pow(1 - t, 1 + curve); // Ease-out (fast start, slow end)\n    } else {\n      return t; // Linear\n    }\n  };\n\n  for (let i = 0; i < range; i++) {\n    const t = i / (range - 1); // Normalize t between 0 and 1\n    // console.log(`t (${i}):`, t); // Debug log\n    const scaledT = interpolate(t, curve, lean);\n    // console.log(`scaledT (${i}):`, scaledT); // Debug log\n    const scaledValue = startValue + scaledT * (endValue - startValue);\n    // console.log(`scaledValue (${i}):`, scaledValue); // Debug log\n    scaledNumbers.push(scaledValue);\n  }\n\n  return scaledNumbers;\n}\n\n// // Function to generate HSL variations\n// export function generateHSLVariations(hexColor: string): { [key: number]: string } {\n//   const [baseHue, baseSaturation, baseLightness] = hexToHSL(hexColor);\n\n//   const variations: { [key: number]: string } = {};\n//   for (let i = 1; i <= 9; i++) {\n//     const suffix = i * 100;\n//     let variationLightness: number;\n\n//     if (suffix < 500) {\n//       variationLightness = baseLightness - (500 - suffix) * 0.1;\n//     } else if (suffix > 500) {\n//       variationLightness = baseLightness + (suffix - 500) * 0.1;\n//     } else {\n//       variationLightness = baseLightness;\n//     }\n\n//     // Ensure lightness stays within 0-100 range\n//     variationLightness = Math.max(0, Math.min(100, variationLightness));\n\n//     variations[suffix] = `hsl(${baseHue.toFixed(1)}, ${baseSaturation.toFixed(1)}%, ${variationLightness.toFixed(1)}%)`;\n//   }\n\n//   return variations;\n// }\n\n// // Function to generate HSL variations\n// export function generateHSLcontrastVariations(hexColor: string): { [key: number]: string } {\n//   const [baseHue, baseSaturation, baseLightness] = hexToHSL(hexColor);\n\n//   const variations: { [key: number]: string } = {};\n//   for (let i = 1; i <= 9; i++) {\n//     const suffix = i * 100;\n//     let variationLightness: number;\n\n//     if (suffix > 500) {\n//       variationLightness = baseLightness + (500 - suffix) * 0.1;\n//     } else if (suffix < 500) {\n//       variationLightness = baseLightness - (suffix - 500) * 0.1;\n//     } else {\n//       variationLightness = baseLightness;\n//     }\n\n//     // Ensure lightness stays within 0-100 range\n//     variationLightness = Math.max(0, Math.min(100, variationLightness));\n\n//     variations[suffix] = `hsl(${baseHue.toFixed(1)}, ${baseSaturation.toFixed(1)}%, ${variationLightness.toFixed(1)}%)`;\n//   }\n\n//   return variations;\n// }\n\n// // Example usage\n// const baseColorHex = \"#3498db\"; // Replace with your fundamental color\n// const colorVariations = generateHSLVariations(baseColorHex);\n\n// console.log(colorVariations);\n", "import { themes } from \"../../state\";\nimport { generateColorVariation, scaleNumbers } from \"../../util/helpers\";\n\nexport const tokensStyleSheet = new CSSStyleSheet();\n\nconst colorScaling = [10, 20, 30, 40, 50, 60, 70, 80, 90];\n\nexport const renderTokensStyleSheet = () => {\n  let tokens = \"\";\n  for (const theme in themes.get()) {\n    tokens += ':root[data-theme=\"' + theme + '\"] {\\n';\n\n    // palette\n    for (const key in themes.get()[theme].colors.palette) {\n      const value = (themes.get()[theme].colors.palette as any)[key];\n      for (const num of colorScaling) {\n        const hsl = generateColorVariation(\n          value,\n          num,\n          themes.get()[theme].scaling.lightness,\n          themes.get()[theme].scaling.saturation\n        );\n        const color = `hsl(${hsl.hue}, ${hsl.saturation}%, ${hsl.lightness}%)`;\n        tokens += `--${key}-${num}0: ${color};\\n`;\n      }\n    }\n\n    // semantic\n    for (const key in themes.get()[theme].colors.semantic) {\n      const colorKey = (themes.get()[theme].colors.semantic as any)[key];\n      const value = (themes.get()[theme].colors.palette as any)[colorKey];\n      for (const num of colorScaling) {\n        const hsl = generateColorVariation(\n          value,\n          num,\n          themes.get()[theme].scaling.lightness,\n          themes.get()[theme].scaling.saturation\n        );\n        const color = `hsl(${hsl.hue}, ${hsl.saturation}%, ${hsl.lightness}%)`;\n        tokens += `--${key}-${num}0: ${color};\\n`;\n      }\n    }\n\n    // inputs\n    const scaling = themes.get()[theme].scaling;\n    const borders = scaleNumbers(10, 1, 9, scaling.borderWidth, 1);\n    for (let n = 1; n <= borders.length; n++) tokens += `--border-width-${n}00: ${borders[n - 1]}px;\\n`;\n    const radii = scaleNumbers(10, 1, 9, scaling.borderRadius, 1);\n    for (let n = 1; n <= radii.length; n++) tokens += `--border-radius-${n}00: ${radii[n - 1]}px;\\n`;\n    const columns = scaleNumbers(10, 1, 9, scaling.columnWidth, 1);\n    for (let n = 1; n <= columns.length; n++) tokens += `--column-width-${n}00: ${columns[n - 1]}ch;\\n`;\n    const fontSizes = scaleNumbers(10, 1, 9, scaling.fontSize, 1);\n    for (let n = 1; n <= fontSizes.length; n++) tokens += `--font-size-${n}00: ${fontSizes[n - 1]}ch;\\n`;\n    const iconSizes = scaleNumbers(10, 1, 9, scaling.iconSize, 1);\n    for (let n = 1; n <= iconSizes.length; n++) tokens += `--icon-size-${n}00: ${iconSizes[n - 1]}ch;\\n`;\n    const rowWidths = scaleNumbers(10, 1, 9, scaling.rowWidth, 1);\n    for (let n = 1; n <= rowWidths.length; n++) tokens += `--row-width-${n}00: ${rowWidths[n - 1]}ch;\\n`;\n    const paddings = scaleNumbers(10, 1, 9, scaling.padding, 1);\n    for (let n = 1; n <= paddings.length; n++) tokens += `--padding-${n}00: ${paddings[n - 1]}ch;\\n`;\n\n    tokens += `}\\n`;\n  }\n\n  console.log(tokens);\n  tokensStyleSheet.replaceSync(tokens);\n};\n", "export const tooltipStyleSheet = new CSSStyleSheet();\n\nexport const renderTooltipStyleSheet = () =>\n  tooltipStyleSheet.replaceSync(`.tooltip {\n  cursor: pointer;\n  position: relative;\n}\n\n.tooltip::before {\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: calc(50% - 100px);\n  background-color: white;\n  border-radius: 5px;\n  color: #fff;\n  content: attr(aria-label);\n  display: flex;\n  padding: 1rem;\n  justify-content: center;\n  text-transform: none;\n  transition: all 0.5s ease;\n  width: 180px;\n  z-index: 100;\n}\n\n.tooltip::after {\n  display: flex;\n  position: absolute;\n  bottom: calc(100%);\n  left: calc(50% - 10px);\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  border-top: 10px solid white;\n  content: \" \";\n  font-size: 0;\n  line-height: 0;\n  width: 0;\n}\n\n.tooltip::before,\n.tooltip::after {\n  color: black;\n  opacity: 0;\n  pointer-events: none;\n  text-align: center;\n}\n\n.tooltip:focus::before,\n.tooltip:focus::after,\n.tooltip:hover::before,\n.tooltip:hover::after {\n  opacity: 1;\n  transition: all 0.75s ease;\n}\n`);\n", "export const useColumn = (\n  el: HTMLElement,\n  gap: string = \"0px\",\n  alignItems: CSSStyleDeclaration[\"alignItems\"] = \"center\",\n  justifyContent: CSSStyleDeclaration[\"justifyContent\"] = \"center\",\n  width: string = \"auto\"\n) => (\n  (el.style.display = \"flex\"),\n  (el.style.gap = gap),\n  (el.style.flexDirection = \"column\"),\n  (el.style.alignItems = alignItems),\n  (el.style.justifyContent = justifyContent),\n  (el.style.width = width)\n);\n\nexport const useRow = (\n  el: HTMLElement,\n  gap: string = \"0px\",\n  alignItems: CSSStyleDeclaration[\"alignItems\"] = \"center\",\n  justifyContent: CSSStyleDeclaration[\"justifyContent\"] = \"center\",\n  width: string = \"auto\"\n) => (\n  (el.style.display = \"flex\"),\n  (el.style.gap = gap),\n  (el.style.flexDirection = \"row\"),\n  (el.style.alignItems = alignItems),\n  (el.style.justifyContent = justifyContent),\n  (el.style.width = width)\n);\n", "import { HTML, useAttribute, useClassName, useEvent, useInnerHTML, useStyle } from \"@linttrap/oem\";\nimport { theme } from \"./state\";\nimport { useColumn, useRow } from \"./traits\";\n// import { colorPickerState, pageState, propertiesState, themeState, themesState, tokensEnabledState } from \"./state\";\n\nexport function useSVGImage() {\n  return (el: HTMLElement, path: string) =>\n    fetch(path)\n      .then((response) => response.text())\n      .then((text) => (el.innerHTML = text));\n}\n\nexport const html = HTML({\n  // \"attr:tokensEnabled\": useAttribute({ state: tokensEnabledState }),\n  // \"click:tokensEnabled\": useEvent({ event: \"click\", state: tokensEnabledState }),\n  // \"innerHTML:colorPicker\": useInnerHTML({ state: colorPickerState }),\n  // \"innerHTML:pages\": useInnerHTML({ state: pageState }),\n  // \"innerHTML:properties\": useInnerHTML({ state: propertiesState }),\n  // \"innerHTML:themes\": useInnerHTML({ state: themesState }),\n  \"innerHTML:theme\": useInnerHTML({ state: theme }),\n  // \"innerText:pages\": useTextContent({ state: pageState }),\n  // \"style:themes\": useStyle({ state: themesState }),\n  // \"svg:load\": useSVGImage(),\n  // \"text:tokensEnabled\": useTextContent({ state: tokensEnabledState }),\n  \"style:theme\": useStyle({ state: theme }),\n  \"attr:theme\": useAttribute({ state: theme }),\n  attr: useAttribute(),\n  change: useEvent({ event: \"change\" }),\n  class: useClassName(),\n  click: useEvent({ event: \"click\" }),\n  innerHTML: useInnerHTML(),\n  input: useEvent({ event: \"input\" }),\n  style: useStyle(),\n  column: useColumn,\n  row: useRow,\n});\n", "import { theme, themes } from \"../state\";\nimport { html } from \"../template\";\nimport { generateColorVariation, hexToHSL } from \"../util/helpers\";\n\nexport const PaletteList = () => {\n  if (theme.get() === \"none\") return html.div()(\"none\");\n  const currentTheme = themes.get()[theme.get()];\n  const colors = themes.get()[theme.get()].colors;\n  const variation = [10, 20, 30, 40, 50, 60, 70, 80, 90];\n\n  const getValue = (hex: string, variation: number) => {\n    const { hue, saturation, lightness } = generateColorVariation(\n      hex,\n      variation,\n      currentTheme.scaling.lightness,\n      currentTheme.scaling.saturation\n    );\n    const hslValue = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n    return hslValue;\n  };\n\n  const getTextColor = (hex: string, variation: number) => {\n    const { hue, saturation, lightness } = generateColorVariation(\n      hex,\n      variation,\n      currentTheme.scaling.lightness,\n      currentTheme.scaling.saturation\n    );\n    const relativeLightness = lightness > 40 ? 0 : 100;\n    const hslValue = `hsl(${hue}, ${saturation}%, ${relativeLightness}%, 0.35)`;\n    return hslValue;\n  };\n\n  return html.div([\"column\", \"0px\", \"stretch\", \"space-between\", \"100%\"])(\n    ...Object.entries(colors.palette).map(([name, value]) => {\n      const { hue, saturation, lightness } = hexToHSL(value);\n      return html.div([\"row\"])(\n        ...variation.map((num) =>\n          html.div(\n            [\"column\"],\n            [\"style\", \"width\", `${100 / variation.length}%`],\n            [\"style\", \"fontSize\", \"9px\"],\n            [\"style\", \"backgroundColor\", getValue(value, num)],\n            [\"style\", \"padding\", \"6px\"]\n          )(\n            html.span([\"style\", \"transform\", \"rotate(-45deg)\"], [\"style\", \"color\", getTextColor(value, num)])(`${num}0`)\n          )\n        )\n      );\n    })\n  );\n};\n", "import { HTML, SVG, useAttribute, useClassName, useInnerHTML, useStyle } from \"@linttrap/oem\";\nimport { useColumn } from \"../traits\";\nimport { generateBezierCurve } from \"../util/helpers\";\n\nconst svg = SVG({\n  attr: useAttribute(),\n  style: useStyle(),\n  html: useInnerHTML(),\n});\n\nconst html = HTML({\n  attr: useAttribute(),\n  class: useClassName(),\n  html: useInnerHTML(),\n  style: useStyle(),\n  column: useColumn,\n});\n\nexport const BezierPlotter = (size: number = 100, curvature: number = 0, steps: number = 50) => {\n  const coordinates = generateBezierCurve(size, curvature, steps);\n  const padFactor = 0.4;\n  const pad = size * padFactor;\n  const points = coordinates.map((p) => ({ x: p.x + (size * padFactor) / 2, y: p.y + (size * padFactor) / 2 }));\n  let d = `M ${points[0].x} ${points[0].y}`;\n  for (let i = 1; i < points.length - 1; i++) {\n    const cp = {\n      x: (points[i].x + points[i + 1].x) / 2,\n      y: (points[i].y + points[i + 1].y) / 2,\n    };\n    d += ` Q ${points[i].x} ${points[i].y} ${cp.x} ${cp.y}`;\n  }\n  d += ` T ${points[points.length - 1].x} ${points[points.length - 1].y}`;\n  return html.div(\n    [\"column\", \"20px\"],\n    [\n      \"html\",\n      () => [\n        svg.svg(\n          [\"attr\", \"height\", \"100px\"],\n          [\"attr\", \"stroke-width\", (size * padFactor) / 4],\n          [\"attr\", \"viewBox\", `0 0 ${size + pad} ${size + pad}`],\n          [\"attr\", \"width\", \"100px\"],\n          [\"style\", \"borderRadius\", \"5px\"],\n          [\"style\", \"fill\", \"transparent\"],\n          [\"style\", \"stroke\", \"var(--black-500)\"]\n        )(\n          svg.rect([\"attr\", \"width\", 100 + pad], [\"attr\", \"height\", 100 + pad])(),\n          // curved path for coordinates\n          svg.path(\n            [\"attr\", \"d\", d],\n            [\"attr\", \"fill\", \"none\"],\n            [\"attr\", \"stroke-linecap\", \"round\"],\n            [\"attr\", \"stroke-width\", (size * padFactor) / 8],\n            [\"attr\", \"stroke\", \"var(--black-500)\"]\n          )()\n        ),\n        html.input(\n          [\"attr\", \"type\", \"range\"],\n          [\"attr\", \"min\", \"-1\"],\n          [\"attr\", \"max\", \"1\"],\n          [\"attr\", \"step\", \"0.01\"],\n          [\"attr\", \"value\", 0],\n          [\"class\", \"slider\"]\n        )(),\n      ],\n    ]\n  )();\n};\n", "export function getStylesheetContents(sheet: CSSStyleSheet): string {\n  let cssText = \"\";\n  const rulesArray = Array.from(sheet.cssRules);\n  for (let rule of rulesArray) {\n    cssText += rule.cssText + \"\\n\";\n  }\n  return cssText;\n}\n", "import { accordionStyleSheet, renderAccordionStyleSheet } from \"./components/accordion/accordion\";\nimport { alertsStyleSheet, renderAlertsStyleSheet } from \"./components/alerts/alerts\";\nimport { badgeStyleSheet, renderBadgeStyleSheet } from \"./components/badge/badge\";\nimport { bgStyleSheet, renderBGStyleSheet } from \"./components/bg/bg\";\nimport { buttonStyleSheet, renderButtonStyleSheet } from \"./components/button/button\";\nimport { cardStyleSheet, renderCardStyleSheet } from \"./components/card/card\";\nimport { dashboardStyleSheet, renderDashboardStyleSheet } from \"./components/dashboard/dashboard\";\nimport { dialogStyleSheet, renderDialogStyleSheet } from \"./components/dialog/dialog\";\nimport { dropdownStyleSheet, renderDropdownStyleSheet } from \"./components/dropdown/dropdown\";\nimport { flexgridStyleSheet, renderFlexGridStyleSheet } from \"./components/flexgrid/flexgrid\";\nimport { flexpaneStyleSheet, renderFlexpaneStyleSheet } from \"./components/flexpane/flexpane\";\nimport { gridStyleSheet, renderGridStyleSheet } from \"./components/grid/grid\";\nimport { renderSectionStyleSheet, sectionStyleSheet } from \"./components/section/section\";\nimport { renderSliderStyleSheet } from \"./components/slider/slider\";\nimport { renderTogglesStyleSheet, togglesStyleSheet } from \"./components/toggles/toggles\";\nimport { renderTokensStyleSheet, tokensStyleSheet } from \"./components/tokens/tokens\";\nimport { renderTooltipStyleSheet, tooltipStyleSheet } from \"./components/tooltip/tooltip\";\nimport { renderTypographyStylesheet } from \"./components/typography/typography\";\nimport { theme } from \"./state\";\nimport { getStylesheetContents } from \"./util/css\";\n\ndeclare var JSZip: any;\n\ntype FSM =\n  | {\n      action: \"DISABLE_TOKENS\";\n    }\n  | {\n      action: \"DOWNLOAD_ALL\";\n    }\n  | {\n      action: \"DOWNLOAD_THEME_TOKENS\";\n    }\n  | {\n      action: \"ENABLE_TOKENS\";\n    }\n  | {\n      action: \"SET_THEME\";\n      theme: string;\n    }\n  | {\n      action: \"RENDER_ALL_STYLESHEETS\";\n    };\n\nconst zip = new JSZip();\n\nexport const fsm = (msg: FSM) => {\n  switch (msg.action) {\n    case \"DISABLE_TOKENS\":\n      renderTokensStyleSheet();\n      break;\n    case \"DOWNLOAD_ALL\":\n      zip.file(\"tokens.css\", getStylesheetContents(tokensStyleSheet));\n      zip.file(\"accordion.css\", getStylesheetContents(accordionStyleSheet));\n      zip.file(\"alerts.css\", getStylesheetContents(alertsStyleSheet));\n      zip.file(\"badge.css\", getStylesheetContents(badgeStyleSheet));\n      zip.file(\"bg.css\", getStylesheetContents(bgStyleSheet));\n      zip.file(\"button.css\", getStylesheetContents(buttonStyleSheet));\n      zip.file(\"card.css\", getStylesheetContents(cardStyleSheet));\n      zip.file(\"dashboard.css\", getStylesheetContents(dashboardStyleSheet));\n      zip.file(\"dialog.css\", getStylesheetContents(dialogStyleSheet));\n      zip.file(\"dropdown.css\", getStylesheetContents(dropdownStyleSheet));\n      zip.file(\"flexgrid.css\", getStylesheetContents(flexgridStyleSheet));\n      zip.file(\"flexpane.css\", getStylesheetContents(flexpaneStyleSheet));\n      zip.file(\"grid.css\", getStylesheetContents(gridStyleSheet));\n      zip.file(\"section.css\", getStylesheetContents(sectionStyleSheet));\n      zip.file(\"toggles.css\", getStylesheetContents(togglesStyleSheet));\n      zip.file(\"tooltip.css\", getStylesheetContents(tooltipStyleSheet));\n      zip.generateAsync({ type: \"blob\" }).then((content: any) => {\n        const link: any = document.createElement(\"a\");\n        link.href = URL.createObjectURL(content);\n        link.download = \"capui.zip\";\n        link.click();\n      });\n      break;\n    case \"DOWNLOAD_THEME_TOKENS\":\n      const link: any = document.createElement(\"a\");\n      link.href = URL.createObjectURL(new Blob([getStylesheetContents(tokensStyleSheet)], { type: \"text/css\" }));\n      link.download = \"tokens.css\";\n      link.click();\n      break;\n    case \"ENABLE_TOKENS\":\n      // tokensEnabledState.set(true);\n      renderTokensStyleSheet();\n      break;\n    case \"SET_THEME\":\n      theme.set(msg.theme);\n      fsm({ action: \"RENDER_ALL_STYLESHEETS\" });\n      break;\n    case \"RENDER_ALL_STYLESHEETS\":\n      renderTokensStyleSheet();\n      renderDashboardStyleSheet();\n      renderAccordionStyleSheet();\n      renderAlertsStyleSheet();\n      renderBadgeStyleSheet();\n      renderBGStyleSheet();\n      renderButtonStyleSheet();\n      renderCardStyleSheet();\n      renderDashboardStyleSheet();\n      renderDialogStyleSheet();\n      renderDropdownStyleSheet();\n      renderFlexGridStyleSheet();\n      renderFlexpaneStyleSheet();\n      renderGridStyleSheet();\n      renderSectionStyleSheet();\n      renderSliderStyleSheet();\n      renderTogglesStyleSheet();\n      renderTooltipStyleSheet();\n      renderTypographyStylesheet();\n      break;\n  }\n};\n", "import { accordionStyleSheet } from \"./components/accordion/accordion\";\nimport { alertsStyleSheet } from \"./components/alerts/alerts\";\nimport { badgeStyleSheet } from \"./components/badge/badge\";\nimport { bgStyleSheet } from \"./components/bg/bg\";\nimport { buttonStyleSheet } from \"./components/button/button\";\nimport { cardStyleSheet } from \"./components/card/card\";\nimport { dashboardStyleSheet } from \"./components/dashboard/dashboard\";\nimport { dialogStyleSheet } from \"./components/dialog/dialog\";\nimport { dropdownStyleSheet } from \"./components/dropdown/dropdown\";\nimport { flexgridStyleSheet } from \"./components/flexgrid/flexgrid\";\nimport { flexpaneStyleSheet } from \"./components/flexpane/flexpane\";\nimport { gridStyleSheet } from \"./components/grid/grid\";\nimport { sectionStyleSheet } from \"./components/section/section\";\nimport { sliderStyleSheet } from \"./components/slider/slider\";\nimport { togglesStyleSheet } from \"./components/toggles/toggles\";\nimport { tokensStyleSheet } from \"./components/tokens/tokens\";\nimport { tooltipStyleSheet } from \"./components/tooltip/tooltip\";\nimport { typographyStylesheet } from \"./components/typography/typography\";\nimport { PaletteList } from \"./features/PaletteList\";\nimport { BezierPlotter } from \"./features/ScalePicker\";\nimport { fsm } from \"./fsm\";\nimport { theme, themes } from \"./state\";\nimport { html } from \"./template\";\n\nconst Header = html.div(\n  [\"row\", \"10px\", \"center\", \"space-between\"],\n  [\"style\", \"backgroundColor\", \"var(--background-600, white)\"],\n  [\"style\", \"color\", \"var(--text-500, black)\"],\n  [\"style\", \"position\", \"sticky\"],\n  [\"style\", \"top\", \"0\"],\n  [\"style\", \"width\", \"100%\"]\n)(\n  html.div([\"row\", \"2ch\"], [\"style\", \"padding\", \"0 2ch\"])(\n    html.div(\n      [\"style\", \"color\", \"var(--brand-500)\"],\n      [\"style\", \"height\", \"100%\"],\n      [\"style\", \"fontFamily\", \"Splash\"],\n      [\"style\", \"fontWeight\", \"bold\"],\n      [\"style\", \"fontSize\", \"5ch\"],\n      [\"style\", \"textAlign\", \"center\"]\n    )(\"cap\"),\n    html.div(\n      [\"style\", \"color\", \"var(--brand-500)\"],\n      [\"style\", \"height\", \"100%\"],\n      [\"style\", \"fontWeight\", \"bold\"],\n      [\"style\", \"fontSize\", \"0.5ch\"],\n      [\"style\", \"textAlign\", \"center\"]\n    )(\"v1.0.0\")\n  ),\n  html.div(\n    [\"row\", \"20px\"],\n    [\"style\", \"padding\", \"0 20px\"]\n  )(\n    html.select(\n      [\"class\", \"dropdown\"],\n      [\"change\", (e) => (window.location.hash = (e!.target as any).value)]\n    )(\n      html.optgroup([\"attr\", \"label\", \"Section\"])(\n        html.option()(\"tokens\"),\n        html.option()(\"buttons\"),\n        html.option()(\"dropdown\"),\n        html.option()(\"accordion\"),\n        html.option()(\"alerts\"),\n        html.option()(\"badge\"),\n        html.option()(\"bg\"),\n        html.option()(\"card\"),\n        html.option()(\"dashboard\"),\n        html.option()(\"dialog\"),\n        html.option()(\"flexgrid\"),\n        html.option()(\"flexpane\"),\n        html.option()(\"grid\"),\n        html.option()(\"section\"),\n        html.option()(\"toggles\"),\n        html.option()(\"tooltip\")\n      )\n    )\n  )\n);\n\nconst Body = html.div(\n  [\"column\", \"20px\", \"flex-start\", \"space-between\"],\n  [\"style\", \"width\", \"100%\"],\n  [\"style\", \"padding\", \"20px\"],\n  [\n    \"innerHTML:theme\",\n    () => [\n      html.div([\"row\", \"5px\"])(\n        BezierPlotter(100, -1, 5),\n        BezierPlotter(100, -0.5, 5),\n        BezierPlotter(100, -0.25, 5),\n        BezierPlotter(100, 0, 5),\n        BezierPlotter(100, 0.25, 5),\n        BezierPlotter(100, 0.5, 5),\n        BezierPlotter(100, 1, 5)\n      ),\n      html.div([\"column\", \"0\", \"flex-start\"])(\n        html.div([\"class\", \"h2\"])(\"Palette\"),\n        html.p([\"class\", \"p\"])(\"Select a color row to edit\")\n      ),\n      PaletteList(),\n    ],\n  ]\n)();\n\nconst Footer = html.div(\n  [\"row\", \"2ch\"],\n  [\"style\", \"backgroundColor\", \"var(--background-600)\"],\n  [\"style\", \"position\", \"fixed\"],\n  [\"style\", \"bottom\", \"0\"],\n  [\"style\", \"width\", \"100%\"],\n  [\"style\", \"color\", \"var(--text-500, black)\"],\n  [\"style\", \"padding\", \"2ch\"]\n)(\n  html.select(\n    [\"class\", \"dropdown\"],\n    [\"change\", (e) => fsm({ action: \"SET_THEME\", theme: (e!.target as any).value as string })]\n  )(\n    html.optgroup([\"attr\", \"label\", \"Pick a theme\"])(\n      html.option([\"attr\", \"value\", \"none\"])(\"none\"),\n      ...Object.keys(themes.get()).map((t: string) =>\n        html.option([\"attr\", \"value\", t], [\"attr\", \"selected\", t === theme.get()])(t)\n      )\n    )\n  ),\n  html.button([\"class\", \"button\"])(\"capui.zip\")\n);\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const root = html.$el(\"#root\");\n  const doc = html.$el(\"html\");\n  doc([\"attr:theme\", \"data-theme\", theme.get], [\"style\", \"backgroundColor\", \"var(--background-600)\"]);\n  root([\"innerHTML\", () => [Header, Body, Footer]]);\n  fsm({ action: \"RENDER_ALL_STYLESHEETS\" });\n\n  document.adoptedStyleSheets = [\n    tokensStyleSheet,\n    accordionStyleSheet,\n    alertsStyleSheet,\n    badgeStyleSheet,\n    bgStyleSheet,\n    buttonStyleSheet,\n    cardStyleSheet,\n    dashboardStyleSheet,\n    dialogStyleSheet,\n    dropdownStyleSheet,\n    flexgridStyleSheet,\n    flexpaneStyleSheet,\n    gridStyleSheet,\n    sectionStyleSheet,\n    sliderStyleSheet,\n    togglesStyleSheet,\n    tooltipStyleSheet,\n    typographyStylesheet,\n  ];\n});\n"],
+  "mappings": "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",
   "names": []
 }
diff --git a/package.json b/package.json
index a895398..06db5c4 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
   },
   "scripts": {},
   "dependencies": {
-    "@linttrap/oem": "^0.1.11",
+    "@linttrap/oem": "^0.1.12",
     "css.gg": "^2.1.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3b7730..a4a3795 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   '@linttrap/oem':
-    specifier: ^0.1.11
-    version: 0.1.11
+    specifier: ^0.1.12
+    version: 0.1.12
   css.gg:
     specifier: ^2.1.1
     version: 2.1.1
@@ -49,8 +49,8 @@ devDependencies:
 
 packages:
 
-  /@linttrap/oem@0.1.11:
-    resolution: {integrity: sha512-+aiaB7MyMKaJiqILXTgY30NVvFgkGw5g0ez+7RkwyxZ35LUBpfBpX19UJQSk0rUSBnKnr0c9RC748pI4+sx4fA==}
+  /@linttrap/oem@0.1.12:
+    resolution: {integrity: sha512-UP6M4qP5DQitqPA0IkGzm5hbFBnIQLjyni03fiLpCJYaqQYcoqQEqs8EMdIGaUnlGsnX9mc9wvM9tJ1qvIOBFw==}
     dev: false
 
   /@playwright/test@1.41.2:
diff --git a/src/components/button/button-vars.ts b/src/components/button/button-vars.ts
deleted file mode 100644
index 1b39baf..0000000
--- a/src/components/button/button-vars.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type ButtonSettings = {
-  bgColorHoverToken: `--${string}`;
-  bgColorToken: `--${string}`;
-  borderColorToken: `--${string}`;
-  borderRadius: number;
-  borderWidth: number;
-  colorHoverToken: `--${string}`;
-  colorToken: `--${string}`;
-  fontSize: number;
-  fontWeight: number;
-  lineHeight: number;
-};
-
-export const DEFAULT_BUTTON_SETTINGS: ButtonSettings = {
-  bgColorHoverToken: "--background-700",
-  bgColorToken: "--background-500",
-  borderColorToken: "--foreground-100",
-  borderRadius: 0.35,
-  borderWidth: 0.25,
-  colorHoverToken: "--text-500",
-  colorToken: "--text-500",
-  fontSize: 1.5,
-  fontWeight: 500,
-  lineHeight: 3,
-};
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 0b51ea8..caeff13 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,5 +1,22 @@
 import { theme, themes } from "../../state";
-import { DEFAULT_BUTTON_SETTINGS } from "./button-vars";
+
+export type ButtonSettings = {
+  bgColorHoverToken: `--${string}`;
+  bgColorToken: `--${string}`;
+  borderColorToken: `--${string}`;
+  borerColorHoverToken: `--${string}`;
+  colorHoverToken: `--${string}`;
+  colorToken: `--${string}`;
+};
+
+export const DEFAULT_BUTTON_SETTINGS: ButtonSettings = {
+  bgColorHoverToken: "--background-700",
+  bgColorToken: "--background-500",
+  borderColorToken: "--foreground-100",
+  borerColorHoverToken: "--foreground-200",
+  colorHoverToken: "--text-500",
+  colorToken: "--text-500",
+};
 
 export const buttonStyleSheet = new CSSStyleSheet();
 
diff --git a/src/components/dropdown/dropdown-vars.ts b/src/components/dropdown/dropdown-vars.ts
deleted file mode 100644
index 334a4bb..0000000
--- a/src/components/dropdown/dropdown-vars.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type DropdownSettings = {
-  bgColorHoverToken: `--${string}`;
-  bgColorToken: `--${string}`;
-  borderColorToken: `--${string}`;
-  borderRadius: number;
-  borderWidth: number;
-  colorHoverToken: `--${string}`;
-  colorToken: `--${string}`;
-  fontSize: number;
-  fontWeight: number;
-  lineHeight: number;
-};
-
-export const DEFAULT_DROPDOWN_SETTINGS: DropdownSettings = {
-  bgColorHoverToken: "--background-700",
-  bgColorToken: "--background-500",
-  borderColorToken: "--foreground-100",
-  borderRadius: 0.35,
-  borderWidth: 0.25,
-  colorHoverToken: "--text-500",
-  colorToken: "--text-500",
-  fontSize: 1.5,
-  fontWeight: 500,
-  lineHeight: 3,
-};
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 3354e9e..666a0e9 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -1,5 +1,26 @@
 import { theme, themes } from "../../state";
-import { DEFAULT_DROPDOWN_SETTINGS } from "./dropdown-vars";
+
+export type DropdownSettings = {
+  bgColorHoverToken: `--${string}`;
+  bgColorToken: `--${string}`;
+  borderColorToken: `--${string}`;
+  borderColorHoverToken: `--${string}`;
+  borderRadiusToken: `--${string}`;
+  borderWidthToken: `--${string}`;
+  colorHoverToken: `--${string}`;
+  colorToken: `--${string}`;
+};
+
+export const DEFAULT_DROPDOWN_SETTINGS: DropdownSettings = {
+  bgColorHoverToken: "--background-700",
+  bgColorToken: "--background-500",
+  borderColorToken: "--foreground-100",
+  borderColorHoverToken: "--foreground-200",
+  borderRadiusToken: "--radius-scaling",
+  borderWidthToken: "--borders-scaling",
+  colorHoverToken: "--text-500",
+  colorToken: "--text-500",
+};
 
 export const dropdownStyleSheet = new CSSStyleSheet();
 
@@ -12,14 +33,14 @@ export const renderDropdownStyleSheet = () => {
     --dropdown-bg-color: var(${settings.bgColorToken}, white);
     --dropdown-bg-color-hover: var(${settings.bgColorHoverToken}, rgba(0, 0, 0, 0.1));
     --dropdown-border-color: var(${settings.borderColorToken}, black);
-    --dropdown-border-radius: ${settings.borderRadius}ch;
-    --dropdown-border-width: ${settings.borderWidth}ch;
     --dropdown-color: var(${settings.colorToken}, black);
     --dropdown-color-hover: var(${settings.colorHoverToken}, black);
-    --dropdown-font-size: ${settings.fontSize}ch;
-    --dropdown-font-weight: ${settings.fontWeight};
-    --dropdown-line-height: ${settings.lineHeight}ch;
-    --dropdown-arrow-size: ${settings.lineHeight * 0.21}ch;
+    --dropdown-border-radius: calc(0.5 * var(${settings.borderRadiusToken}, 1));
+    --dropdown-border-width: calc(0.25 * var(${settings.borderWidthToken}, 1));
+    --dropdown-font-size: calc(1.5 * var(--font-scaling));
+    --dropdown-font-weight: 500;
+    --dropdown-line-height: calc(4 * var(--font-scaling));
+    --dropdown-arrow-size: calc(0.8 * var(--font-scaling));
 
     appearance: none;
     border-radius: var(--dropdown-border-radius);
@@ -47,8 +68,11 @@ export const renderDropdownStyleSheet = () => {
       calc(100% - calc(var(--dropdown-line-height) / 2) - calc(var(--dropdown-arrow-size) / 2) + var(--dropdown-arrow-size)) center,
       calc(100% - calc(var(--dropdown-line-height) * 1.25 + var(--dropdown-border-width) - calc(var(--dropdown-arrow-size) / 2))) center;
     background-repeat: no-repeat;
+    position: relative;
 }
 
+
+
 .dropdown[disabled] {
     cursor: not-allowed;
     opacity: 0.45;
diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts
new file mode 100644
index 0000000..b102426
--- /dev/null
+++ b/src/components/slider/slider.ts
@@ -0,0 +1,67 @@
+import { theme, themes } from "../../state";
+
+export type SliderSettings = {
+  bgColorHoverToken: `--${string}`;
+  bgColorToken: `--${string}`;
+  borderColorToken: `--${string}`;
+  borderColorHoverToken: `--${string}`;
+  borderRadius: `--${string}`;
+  borderWidth: `--${string}`;
+  colorHoverToken: `--${string}`;
+  colorToken: `--${string}`;
+};
+
+export const DEFAULT_SLIDER_SETTINGS: SliderSettings = {
+  bgColorHoverToken: "--background-100",
+  bgColorToken: "--background-100",
+  borderColorToken: "--foreground-100",
+  borderColorHoverToken: "--foreground-200",
+  borderRadius: "--border-radius-500",
+  borderWidth: "--border-width-100",
+  colorHoverToken: "--foreground-500",
+  colorToken: "--foreground-500",
+};
+
+export const sliderStyleSheet = new CSSStyleSheet();
+
+export const renderSliderStyleSheet = () => {
+  const settings = theme.get() !== "none" ? themes.get()[theme.get()].slider : DEFAULT_SLIDER_SETTINGS;
+
+  return sliderStyleSheet.replaceSync(`
+.slider { 
+  --slider-bg-color: var(${settings.bgColorToken}, black);
+  --slider-bg-color-hover: var(${settings.bgColorHoverToken}, rgba(0, 0, 0, 0.1));
+  --slider-border-color: var(${settings.borderColorToken}, black);
+  --slider-border-radius: ${settings.borderRadius}ch;
+  --slider-border-width: ${settings.borderWidth}ch;
+  --slider-color: var(${settings.colorToken}, white);
+  --slider-color-hover: var(${settings.colorHoverToken}, black);
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--slider-bg-color);
+  border-radius: var(--slider-border-radius);
+  height: 20px;
+  width: 100%;
+}
+
+.slider:hover {
+  background: var(--slider-bg-color-hover);
+}
+
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--slider-color);
+  cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb:hover {
+  background: var(--slider-color-hover);
+}
+`);
+};
diff --git a/src/components/tokens/tokens.ts b/src/components/tokens/tokens.ts
index 959d36f..05d5cbb 100644
--- a/src/components/tokens/tokens.ts
+++ b/src/components/tokens/tokens.ts
@@ -1,8 +1,9 @@
 import { themes } from "../../state";
-import { generateColorVariation } from "../../util/generators";
+import { generateColorVariation, scaleNumbers } from "../../util/helpers";
 
 export const tokensStyleSheet = new CSSStyleSheet();
-const variation = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+
+const colorScaling = [10, 20, 30, 40, 50, 60, 70, 80, 90];
 
 export const renderTokensStyleSheet = () => {
   let tokens = "";
@@ -12,12 +13,12 @@ export const renderTokensStyleSheet = () => {
     // palette
     for (const key in themes.get()[theme].colors.palette) {
       const value = (themes.get()[theme].colors.palette as any)[key];
-      for (const num of variation) {
+      for (const num of colorScaling) {
         const hsl = generateColorVariation(
           value,
           num,
-          themes.get()[theme].colors.lightnessRange,
-          themes.get()[theme].colors.saturationRange
+          themes.get()[theme].scaling.lightness,
+          themes.get()[theme].scaling.saturation
         );
         const color = `hsl(${hsl.hue}, ${hsl.saturation}%, ${hsl.lightness}%)`;
         tokens += `--${key}-${num}0: ${color};\n`;
@@ -28,12 +29,12 @@ export const renderTokensStyleSheet = () => {
     for (const key in themes.get()[theme].colors.semantic) {
       const colorKey = (themes.get()[theme].colors.semantic as any)[key];
       const value = (themes.get()[theme].colors.palette as any)[colorKey];
-      for (const num of variation) {
+      for (const num of colorScaling) {
         const hsl = generateColorVariation(
           value,
           num,
-          themes.get()[theme].colors.lightnessRange,
-          themes.get()[theme].colors.saturationRange
+          themes.get()[theme].scaling.lightness,
+          themes.get()[theme].scaling.saturation
         );
         const color = `hsl(${hsl.hue}, ${hsl.saturation}%, ${hsl.lightness}%)`;
         tokens += `--${key}-${num}0: ${color};\n`;
@@ -41,17 +42,25 @@ export const renderTokensStyleSheet = () => {
     }
 
     // inputs
-    tokens += `--icon-scaling: ${themes.get()[theme].scaling.icon}ch;\n`;
-    tokens += `--text-scaling: ${themes.get()[theme].scaling.text}ch;\n`;
-    tokens += `--col-gap-scaling: ${themes.get()[theme].scaling.colGap}ch;\n`;
-    tokens += `--row-gap-scaling: ${themes.get()[theme].scaling.rowGap}ch;\n`;
-    tokens += `--padding-scaling: ${themes.get()[theme].scaling.padding}ch;\n`;
-    tokens += `--borders-scaling: ${themes.get()[theme].scaling.borders}ch;\n`;
-    tokens += `--weight-scaling: ${themes.get()[theme].scaling.weight}ch;\n`;
+    const scaling = themes.get()[theme].scaling;
+    const borders = scaleNumbers(10, 1, 9, scaling.borderWidth, 1);
+    for (let n = 1; n <= borders.length; n++) tokens += `--border-width-${n}00: ${borders[n - 1]}px;\n`;
+    const radii = scaleNumbers(10, 1, 9, scaling.borderRadius, 1);
+    for (let n = 1; n <= radii.length; n++) tokens += `--border-radius-${n}00: ${radii[n - 1]}px;\n`;
+    const columns = scaleNumbers(10, 1, 9, scaling.columnWidth, 1);
+    for (let n = 1; n <= columns.length; n++) tokens += `--column-width-${n}00: ${columns[n - 1]}ch;\n`;
+    const fontSizes = scaleNumbers(10, 1, 9, scaling.fontSize, 1);
+    for (let n = 1; n <= fontSizes.length; n++) tokens += `--font-size-${n}00: ${fontSizes[n - 1]}ch;\n`;
+    const iconSizes = scaleNumbers(10, 1, 9, scaling.iconSize, 1);
+    for (let n = 1; n <= iconSizes.length; n++) tokens += `--icon-size-${n}00: ${iconSizes[n - 1]}ch;\n`;
+    const rowWidths = scaleNumbers(10, 1, 9, scaling.rowWidth, 1);
+    for (let n = 1; n <= rowWidths.length; n++) tokens += `--row-width-${n}00: ${rowWidths[n - 1]}ch;\n`;
+    const paddings = scaleNumbers(10, 1, 9, scaling.padding, 1);
+    for (let n = 1; n <= paddings.length; n++) tokens += `--padding-${n}00: ${paddings[n - 1]}ch;\n`;
 
     tokens += `}\n`;
   }
 
-  // console.log(tokens);
+  console.log(tokens);
   tokensStyleSheet.replaceSync(tokens);
 };
diff --git a/src/components/typography/typography.ts b/src/components/typography/typography.ts
new file mode 100644
index 0000000..4f76c8c
--- /dev/null
+++ b/src/components/typography/typography.ts
@@ -0,0 +1,48 @@
+import { theme, themes } from "../../state";
+
+export type TypographySettings = {
+  colorToken: `--${string}`;
+  fontSizeBase: number;
+  fontSizeSpread: number;
+  fontWeight: number;
+  lineHeight: number;
+};
+
+export const DEFAULT_TYPOGRAPHY_SETTINGS: TypographySettings = {
+  colorToken: "--text-500",
+  fontSizeBase: 1.5,
+  fontSizeSpread: 0.25,
+  fontWeight: 500,
+  lineHeight: 1.5,
+};
+
+export const typographyStylesheet = new CSSStyleSheet();
+
+export const renderTypographyStylesheet = () => {
+  const settings = theme.get() !== "none" ? themes.get()[theme.get()].typography : DEFAULT_TYPOGRAPHY_SETTINGS;
+  const typographyTagList = ".h1, .h2, .h3, .h4, .h5, .h6, .p, .span, .div, .li, .td, .th, .summary";
+  const styles = `
+${typographyTagList} { 
+  --text-color: var(${settings.colorToken}, white);
+  --text-font-size-base: ${settings.fontSizeBase}ch;
+  --text-font-weight: ${settings.fontWeight};
+  --text-line-height: ${settings.lineHeight}ch;
+}
+
+.h1 { font-size: calc(var(--text-font-size-base) * 2); }
+.h2 { font-size: calc(var(--text-font-size-base) * 1.5); }
+.h3 { font-size: calc(var(--text-font-size-base) * 1.25); }
+.h4 { font-size: var(--text-font-size-base); }
+.h5 { font-size: calc(var(--text-font-size-base) * 0.75); }
+.h6 { font-size: calc(var(--text-font-size-base) * 0.5); }
+.p { font-size: var(--text-font-size-base); }
+.span { font-size: var(--text-font-size-base); }
+.div { font-size: var(--text-font-size-base); }
+.li { font-size: var(--text-font-size-base); }
+.td { font-size: var(--text-font-size-base); }
+.th { font-size: var(--text-font-size-base); }
+.summary { font-size: var(--text-font-size-base); }
+`;
+
+  return typographyStylesheet.replaceSync(styles);
+};
diff --git a/src/features/NumberScalingPicker.ts b/src/features/NumberScalingPicker.ts
new file mode 100644
index 0000000..eb3ed9f
--- /dev/null
+++ b/src/features/NumberScalingPicker.ts
@@ -0,0 +1,103 @@
+import { HTML, SVG, State, useAttribute, useEvent, useInnerHTML, useStyle, useTextContent } from "@linttrap/oem";
+import { useColumn, useRow } from "../traits";
+import { scaleNumbers } from "../util/helpers";
+
+type NumberScalingPickerProps = {
+  xLabel: string;
+  yLabel: string;
+  range: number;
+  startValue: number;
+  endValue: number;
+  curve: number;
+  lean: number;
+  scale?: number[];
+};
+
+export const NumberScalingPicker = (props: NumberScalingPickerProps) => {
+  const state = State<NumberScalingPickerProps>({
+    ...props,
+    scale: scaleNumbers(props.range, props.startValue, props.endValue, props.curve, props.lean),
+  });
+
+  state.sub(console.log);
+
+  const html = HTML({
+    attr: useAttribute({ state }),
+    column: useColumn,
+    row: useRow,
+    text: useTextContent({ state }),
+    input: useEvent({ event: "input" }),
+    svg: useInnerHTML({ state }),
+  });
+
+  const svg = SVG({
+    attr: useAttribute({ state }),
+    style: useStyle(),
+    html: useInnerHTML({ state }),
+  });
+
+  const handleCurveInput = (e: any) => {
+    const _curr = state.get();
+    state.set({
+      ...state.get(),
+      curve: parseFloat(e.target.value),
+      scale: scaleNumbers(_curr.range, _curr.startValue, _curr.endValue, parseFloat(e.target.value), _curr.lean),
+    });
+  };
+
+  const handleLeanInput = (e: any) => {
+    const _curr = state.get();
+    state.set({
+      ...state.get(),
+      lean: parseFloat(e.target.value),
+      scale: scaleNumbers(_curr.range, _curr.startValue, _curr.endValue, _curr.curve, parseFloat(e.target.value)),
+    });
+  };
+
+  const getWidth = () => state.get().endValue - state.get().startValue;
+  const getHeight = () => state.get().endValue - state.get().startValue;
+
+  return html.div(["column", "20px", "flex-start", "flex-start"])(
+    html.div([
+      "svg",
+      () =>
+        svg.svg(
+          ["attr", "width", "100px"],
+          ["attr", "height", "100px"],
+          ["style", "borderRadius", "5px"],
+          ["attr", "viewBox", `0 0 ${getWidth()} ${getHeight()}`]
+        )(
+          svg.rect(["attr", "width", "100px"], ["attr", "height", "100px"])(),
+          ...state
+            .get()
+            .scale!.map((s, i) =>
+              svg.circle(["attr", "cx", i], ["attr", "cy", s], ["attr", "r", 0.3], ["attr", "fill", "white"])()
+            )
+        ),
+    ])(),
+    html.div(["row", "20px"])(
+      html.label()(props.xLabel),
+      html.input(
+        ["attr", "type", "range"],
+        ["attr", "min", state.get().startValue],
+        ["attr", "max", state.get().endValue],
+        ["attr", "step", state.get().endValue / state.get().range],
+        ["attr", "value", (s) => s.curve],
+        ["input", handleCurveInput]
+      )(),
+      html.div(["text", (s) => s.curve])()
+    ),
+    html.div(["row", "20px"])(
+      html.label()(props.yLabel),
+      html.input(
+        ["attr", "type", "range"],
+        ["attr", "min", state.get().startValue],
+        ["attr", "max", state.get().endValue],
+        ["attr", "step", state.get().endValue / state.get().range],
+        ["attr", "value", (s) => s.lean],
+        ["input", handleLeanInput]
+      )(),
+      html.div(["text", (s) => s.lean])()
+    )
+  );
+};
diff --git a/src/pages/Themes/PaletteList.ts b/src/features/PaletteList.ts
similarity index 52%
rename from src/pages/Themes/PaletteList.ts
rename to src/features/PaletteList.ts
index 76d7280..fec75d3 100644
--- a/src/pages/Themes/PaletteList.ts
+++ b/src/features/PaletteList.ts
@@ -1,18 +1,19 @@
-import { paletteState } from "../../state";
-import { html } from "../../template";
-import { generateColorVariation, hexToHSL } from "../../util/generators";
+import { theme, themes } from "../state";
+import { html } from "../template";
+import { generateColorVariation, hexToHSL } from "../util/helpers";
 
 export const PaletteList = () => {
-  const palette = paletteState.get();
-  const colors = Object.entries(palette.colors);
+  if (theme.get() === "none") return html.div()("none");
+  const currentTheme = themes.get()[theme.get()];
+  const colors = themes.get()[theme.get()].colors;
   const variation = [10, 20, 30, 40, 50, 60, 70, 80, 90];
 
   const getValue = (hex: string, variation: number) => {
     const { hue, saturation, lightness } = generateColorVariation(
       hex,
       variation,
-      palette.lightnessRange,
-      palette.saturationRange
+      currentTheme.scaling.lightness,
+      currentTheme.scaling.saturation
     );
     const hslValue = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
     return hslValue;
@@ -22,32 +23,25 @@ export const PaletteList = () => {
     const { hue, saturation, lightness } = generateColorVariation(
       hex,
       variation,
-      palette.lightnessRange,
-      palette.saturationRange
+      currentTheme.scaling.lightness,
+      currentTheme.scaling.saturation
     );
     const relativeLightness = lightness > 40 ? 0 : 100;
     const hslValue = `hsl(${hue}, ${saturation}%, ${relativeLightness}%, 0.35)`;
     return hslValue;
   };
 
-  //   const colorHue = `--token-color-${colorKey}-contrast-hue`;
-  //   const colorSaturation = `--token-color-${colorKey}-contrast-saturation`;
-  //   const colorLightness = `--token-color-${colorKey}-contrast-lightness`;
-  //   const colorShadow = `hsla(var(${colorHue}), var(${colorSaturation}), var(${colorLightness}),0.1)`;
-
-  return html.div(["column", "0px"])(
-    ...colors.map(([name, value]) => {
+  return html.div(["column", "0px", "stretch", "space-between", "100%"])(
+    ...Object.entries(colors.palette).map(([name, value]) => {
       const { hue, saturation, lightness } = hexToHSL(value);
-      const hslValue = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-
       return html.div(["row"])(
         ...variation.map((num) =>
           html.div(
             ["column"],
             ["style", "width", `${100 / variation.length}%`],
-            ["style", "height", "40px"],
-            ["style", "fontSize", "10px"],
-            ["style", "backgroundColor", getValue(value, num)]
+            ["style", "fontSize", "9px"],
+            ["style", "backgroundColor", getValue(value, num)],
+            ["style", "padding", "6px"]
           )(
             html.span(["style", "transform", "rotate(-45deg)"], ["style", "color", getTextColor(value, num)])(`${num}0`)
           )
diff --git a/src/features/ScalePicker.ts b/src/features/ScalePicker.ts
new file mode 100644
index 0000000..e683da2
--- /dev/null
+++ b/src/features/ScalePicker.ts
@@ -0,0 +1,68 @@
+import { HTML, SVG, useAttribute, useClassName, useInnerHTML, useStyle } from "@linttrap/oem";
+import { useColumn } from "../traits";
+import { generateBezierCurve } from "../util/helpers";
+
+const svg = SVG({
+  attr: useAttribute(),
+  style: useStyle(),
+  html: useInnerHTML(),
+});
+
+const html = HTML({
+  attr: useAttribute(),
+  class: useClassName(),
+  html: useInnerHTML(),
+  style: useStyle(),
+  column: useColumn,
+});
+
+export const BezierPlotter = (size: number = 100, curvature: number = 0, steps: number = 50) => {
+  const coordinates = generateBezierCurve(size, curvature, steps);
+  const padFactor = 0.4;
+  const pad = size * padFactor;
+  const points = coordinates.map((p) => ({ x: p.x + (size * padFactor) / 2, y: p.y + (size * padFactor) / 2 }));
+  let d = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const cp = {
+      x: (points[i].x + points[i + 1].x) / 2,
+      y: (points[i].y + points[i + 1].y) / 2,
+    };
+    d += ` Q ${points[i].x} ${points[i].y} ${cp.x} ${cp.y}`;
+  }
+  d += ` T ${points[points.length - 1].x} ${points[points.length - 1].y}`;
+  return html.div(
+    ["column", "20px"],
+    [
+      "html",
+      () => [
+        svg.svg(
+          ["attr", "height", "100px"],
+          ["attr", "stroke-width", (size * padFactor) / 4],
+          ["attr", "viewBox", `0 0 ${size + pad} ${size + pad}`],
+          ["attr", "width", "100px"],
+          ["style", "borderRadius", "5px"],
+          ["style", "fill", "transparent"],
+          ["style", "stroke", "var(--black-500)"]
+        )(
+          svg.rect(["attr", "width", 100 + pad], ["attr", "height", 100 + pad])(),
+          // curved path for coordinates
+          svg.path(
+            ["attr", "d", d],
+            ["attr", "fill", "none"],
+            ["attr", "stroke-linecap", "round"],
+            ["attr", "stroke-width", (size * padFactor) / 8],
+            ["attr", "stroke", "var(--black-500)"]
+          )()
+        ),
+        html.input(
+          ["attr", "type", "range"],
+          ["attr", "min", "-1"],
+          ["attr", "max", "1"],
+          ["attr", "step", "0.01"],
+          ["attr", "value", 0],
+          ["class", "slider"]
+        )(),
+      ],
+    ]
+  )();
+};
diff --git a/src/fsm.ts b/src/fsm.ts
index d0e05c7..07491ee 100644
--- a/src/fsm.ts
+++ b/src/fsm.ts
@@ -11,9 +11,11 @@ import { flexgridStyleSheet, renderFlexGridStyleSheet } from "./components/flexg
 import { flexpaneStyleSheet, renderFlexpaneStyleSheet } from "./components/flexpane/flexpane";
 import { gridStyleSheet, renderGridStyleSheet } from "./components/grid/grid";
 import { renderSectionStyleSheet, sectionStyleSheet } from "./components/section/section";
+import { renderSliderStyleSheet } from "./components/slider/slider";
 import { renderTogglesStyleSheet, togglesStyleSheet } from "./components/toggles/toggles";
 import { renderTokensStyleSheet, tokensStyleSheet } from "./components/tokens/tokens";
 import { renderTooltipStyleSheet, tooltipStyleSheet } from "./components/tooltip/tooltip";
+import { renderTypographyStylesheet } from "./components/typography/typography";
 import { theme } from "./state";
 import { getStylesheetContents } from "./util/css";
 
@@ -42,27 +44,6 @@ type FSM =
 
 const zip = new JSZip();
 
-const renderAllStyleSheets = () => {
-  // load style sheets
-  renderTokensStyleSheet();
-  renderDashboardStyleSheet();
-  renderAccordionStyleSheet();
-  renderAlertsStyleSheet();
-  renderBadgeStyleSheet();
-  renderBGStyleSheet();
-  renderButtonStyleSheet();
-  renderCardStyleSheet();
-  renderDashboardStyleSheet();
-  renderDialogStyleSheet();
-  renderDropdownStyleSheet();
-  renderFlexGridStyleSheet();
-  renderFlexpaneStyleSheet();
-  renderGridStyleSheet();
-  renderSectionStyleSheet();
-  renderTogglesStyleSheet();
-  renderTooltipStyleSheet();
-};
-
 export const fsm = (msg: FSM) => {
   switch (msg.action) {
     case "DISABLE_TOKENS":
@@ -122,8 +103,10 @@ export const fsm = (msg: FSM) => {
       renderFlexpaneStyleSheet();
       renderGridStyleSheet();
       renderSectionStyleSheet();
+      renderSliderStyleSheet();
       renderTogglesStyleSheet();
       renderTooltipStyleSheet();
+      renderTypographyStylesheet();
       break;
   }
 };
diff --git a/src/index.ts b/src/index.ts
index 3fd9bd9..6995910 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,9 +11,13 @@ import { flexgridStyleSheet } from "./components/flexgrid/flexgrid";
 import { flexpaneStyleSheet } from "./components/flexpane/flexpane";
 import { gridStyleSheet } from "./components/grid/grid";
 import { sectionStyleSheet } from "./components/section/section";
+import { sliderStyleSheet } from "./components/slider/slider";
 import { togglesStyleSheet } from "./components/toggles/toggles";
 import { tokensStyleSheet } from "./components/tokens/tokens";
 import { tooltipStyleSheet } from "./components/tooltip/tooltip";
+import { typographyStylesheet } from "./components/typography/typography";
+import { PaletteList } from "./features/PaletteList";
+import { BezierPlotter } from "./features/ScalePicker";
 import { fsm } from "./fsm";
 import { theme, themes } from "./state";
 import { html } from "./template";
@@ -22,7 +26,7 @@ const Header = html.div(
   ["row", "10px", "center", "space-between"],
   ["style", "backgroundColor", "var(--background-600, white)"],
   ["style", "color", "var(--text-500, black)"],
-  ["style", "position", "fixed"],
+  ["style", "position", "sticky"],
   ["style", "top", "0"],
   ["style", "width", "100%"]
 )(
@@ -49,7 +53,6 @@ const Header = html.div(
   )(
     html.select(
       ["class", "dropdown"],
-      ["class", "dropdown--small"],
       ["change", (e) => (window.location.hash = (e!.target as any).value)]
     )(
       html.optgroup(["attr", "label", "Section"])(
@@ -74,7 +77,30 @@ const Header = html.div(
   )
 );
 
-const Body = html.div()("Body");
+const Body = html.div(
+  ["column", "20px", "flex-start", "space-between"],
+  ["style", "width", "100%"],
+  ["style", "padding", "20px"],
+  [
+    "innerHTML:theme",
+    () => [
+      html.div(["row", "5px"])(
+        BezierPlotter(100, -1, 5),
+        BezierPlotter(100, -0.5, 5),
+        BezierPlotter(100, -0.25, 5),
+        BezierPlotter(100, 0, 5),
+        BezierPlotter(100, 0.25, 5),
+        BezierPlotter(100, 0.5, 5),
+        BezierPlotter(100, 1, 5)
+      ),
+      html.div(["column", "0", "flex-start"])(
+        html.div(["class", "h2"])("Palette"),
+        html.p(["class", "p"])("Select a color row to edit")
+      ),
+      PaletteList(),
+    ],
+  ]
+)();
 
 const Footer = html.div(
   ["row", "2ch"],
@@ -102,7 +128,7 @@ const Footer = html.div(
 document.addEventListener("DOMContentLoaded", () => {
   const root = html.$el("#root");
   const doc = html.$el("html");
-  doc(["attr:theme", "data-theme", theme.get], ["style", "backgroundColor", "var(--background-500)"]);
+  doc(["attr:theme", "data-theme", theme.get], ["style", "backgroundColor", "var(--background-600)"]);
   root(["innerHTML", () => [Header, Body, Footer]]);
   fsm({ action: "RENDER_ALL_STYLESHEETS" });
 
@@ -121,7 +147,9 @@ document.addEventListener("DOMContentLoaded", () => {
     flexpaneStyleSheet,
     gridStyleSheet,
     sectionStyleSheet,
+    sliderStyleSheet,
     togglesStyleSheet,
     tooltipStyleSheet,
+    typographyStylesheet,
   ];
 });
diff --git a/src/pages/Themes/ThemePage.ts b/src/pages/Themes/ThemePage.ts
index 9fc355a..9e715eb 100644
--- a/src/pages/Themes/ThemePage.ts
+++ b/src/pages/Themes/ThemePage.ts
@@ -1,7 +1,7 @@
+import { PaletteList } from "../../features/PaletteList";
 import { fsm } from "../../fsm";
 import { Tokens, themeState, themesState } from "../../state";
 import { html } from "../../template";
-import { PaletteList } from "./PaletteList";
 
 const ColorCard = (colorKey: keyof Tokens["colors"]) => {
   const colorHue = `--token-color-${colorKey}-contrast-hue`;
diff --git a/src/state.ts b/src/state.ts
index 697c7d8..2743c36 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -1,6 +1,8 @@
 import { State } from "@linttrap/oem";
-import { ButtonSettings, DEFAULT_BUTTON_SETTINGS } from "./components/button/button-vars";
-import { DEFAULT_DROPDOWN_SETTINGS, DropdownSettings } from "./components/dropdown/dropdown-vars";
+import { ButtonSettings, DEFAULT_BUTTON_SETTINGS } from "./components/button/button";
+import { DEFAULT_DROPDOWN_SETTINGS, DropdownSettings } from "./components/dropdown/dropdown";
+import { DEFAULT_SLIDER_SETTINGS, SliderSettings } from "./components/slider/slider";
+import { DEFAULT_TYPOGRAPHY_SETTINGS, TypographySettings } from "./components/typography/typography";
 
 type Palette = {
   black: string;
@@ -30,19 +32,21 @@ type Theme = {
   colors: {
     palette: Palette;
     semantic: Semantic;
-    saturationRange: number;
-    lightnessRange: number;
   };
   button: ButtonSettings;
   dropdown: DropdownSettings;
+  slider: SliderSettings;
+  typography: TypographySettings;
   scaling: {
-    borders: number;
-    colGap: number;
-    icon: number;
+    borderWidth: number;
+    borderRadius: number;
+    columnWidth: number;
+    fontSize: number;
+    iconSize: number;
+    rowWidth: number;
     padding: number;
-    rowGap: number;
-    text: number;
-    weight: number;
+    saturation: number;
+    lightness: number;
   };
 };
 
@@ -62,24 +66,19 @@ const DEFAULT_THEMES: Record<string, Theme> = {
       },
       semantic: {
         action: "blue",
-        background: "blue",
+        background: "purple",
         brand: "red",
         error: "red",
         foreground: "white",
         info: "blue",
         success: "green",
-        text: "black",
+        text: "red",
         warning: "yellow",
       },
-      saturationRange: 1,
-      lightnessRange: 1,
     },
     button: {
       ...DEFAULT_BUTTON_SETTINGS,
       colorToken: "--black-600",
-      fontSize: 1.25,
-      lineHeight: 4,
-      borderWidth: 0.25,
       bgColorToken: "--background-700",
       bgColorHoverToken: "--background-800",
       borderColorToken: "--background-400",
@@ -87,21 +86,23 @@ const DEFAULT_THEMES: Record<string, Theme> = {
     dropdown: {
       ...DEFAULT_DROPDOWN_SETTINGS,
       colorToken: "--black-600",
-      fontSize: 1.25,
-      lineHeight: 4,
-      borderWidth: 0.25,
       bgColorToken: "--background-700",
       bgColorHoverToken: "--background-800",
       borderColorToken: "--background-400",
+      borderColorHoverToken: "--background-500",
     },
+    slider: { ...DEFAULT_SLIDER_SETTINGS },
+    typography: { ...DEFAULT_TYPOGRAPHY_SETTINGS, colorToken: "--white-500" },
     scaling: {
-      borders: 1,
-      colGap: 1,
-      icon: 1,
+      borderRadius: 1,
+      borderWidth: 0.5,
+      columnWidth: 1,
+      fontSize: 2,
+      iconSize: 2,
+      rowWidth: 1,
       padding: 1,
-      rowGap: 1,
-      text: 1,
-      weight: 1,
+      saturation: 0.25,
+      lightness: 0.5,
     },
   },
   rich: {
@@ -128,19 +129,21 @@ const DEFAULT_THEMES: Record<string, Theme> = {
         text: "white",
         warning: "yellow",
       },
-      saturationRange: 0.1,
-      lightnessRange: 0.25,
     },
     button: DEFAULT_BUTTON_SETTINGS,
     dropdown: DEFAULT_DROPDOWN_SETTINGS,
+    slider: { ...DEFAULT_SLIDER_SETTINGS },
+    typography: { ...DEFAULT_TYPOGRAPHY_SETTINGS },
     scaling: {
-      borders: 1,
-      colGap: 1,
-      icon: 1,
+      borderRadius: 1,
+      borderWidth: 0,
+      columnWidth: 1,
+      fontSize: 1,
+      iconSize: 1,
+      rowWidth: 1,
       padding: 1,
-      rowGap: 1,
-      text: 1,
-      weight: 1,
+      saturation: 0.1,
+      lightness: 0.25,
     },
   },
 };
diff --git a/src/template.ts b/src/template.ts
index 211417a..1f3e3ff 100644
--- a/src/template.ts
+++ b/src/template.ts
@@ -17,7 +17,7 @@ export const html = HTML({
   // "innerHTML:pages": useInnerHTML({ state: pageState }),
   // "innerHTML:properties": useInnerHTML({ state: propertiesState }),
   // "innerHTML:themes": useInnerHTML({ state: themesState }),
-  // "innerHTML:theme": useInnerHTML({ state: themeState }),
+  "innerHTML:theme": useInnerHTML({ state: theme }),
   // "innerText:pages": useTextContent({ state: pageState }),
   // "style:themes": useStyle({ state: themesState }),
   // "svg:load": useSVGImage(),
diff --git a/src/util/generators.ts b/src/util/helpers.ts
similarity index 51%
rename from src/util/generators.ts
rename to src/util/helpers.ts
index 120f3d0..eed384f 100644
--- a/src/util/generators.ts
+++ b/src/util/helpers.ts
@@ -40,26 +40,127 @@ export function hexToHSL(hex: string) {
   };
 }
 
+interface Point {
+  x: number;
+  y: number;
+  v?: number;
+}
+
+export function generateBezierCurve(size: number = 100, curvature: number = 0, steps: number = 100): Point[] {
+  const p0: Point = { x: 0, y: size }; // Start point (bottom left)
+  const p3: Point = { x: size, y: 0 }; // End point (top right)
+
+  // Adjust control points based on curvature
+  let p1: Point, p2: Point;
+  if (curvature === 0) {
+    // Straight line
+    p1 = { x: size / 2, y: size / 2 };
+    p2 = { x: size / 2, y: size / 2 };
+  } else if (curvature > 0) {
+    // Positive curvature (upward curve)
+    p1 = { x: size * curvature, y: size };
+    p2 = { x: size, y: size * curvature };
+  } else {
+    // Negative curvature (downward curve)
+    p1 = { x: 0, y: size * (1 + curvature) };
+    p2 = { x: size * (1 + curvature), y: 0 };
+  }
+
+  // Function to calculate cubic Bézier point
+  function getBezierPoint(t: number, p0: Point, p1: Point, p2: Point, p3: Point): Point {
+    const x = (1 - t) ** 3 * p0.x + 3 * (1 - t) ** 2 * t * p1.x + 3 * (1 - t) * t ** 2 * p2.x + t ** 3 * p3.x;
+    const y = (1 - t) ** 3 * p0.y + 3 * (1 - t) ** 2 * t * p1.y + 3 * (1 - t) * t ** 2 * p2.y + t ** 3 * p3.y;
+    const v = x / size;
+    return { x, y, v };
+  }
+
+  // Calculate arc lengths at discrete intervals
+  const arcLengths = [0];
+  let prevPoint = p0;
+  for (let i = 1; i <= steps; i++) {
+    const t = i / steps;
+    const point = getBezierPoint(t, p0, p1, p2, p3);
+    const dx = point.x - prevPoint.x;
+    const dy = point.y - prevPoint.y;
+    const length = Math.sqrt(dx * dx + dy * dy);
+    arcLengths.push(arcLengths[i - 1] + length);
+    prevPoint = point;
+  }
+  const totalLength = arcLengths[steps];
+
+  // Generate evenly spaced coordinates based on arc length
+  const coordinates: Point[] = [];
+  for (let i = 0; i <= steps; i++) {
+    const targetLength = (i / steps) * totalLength;
+    let t = 0;
+    for (let j = 1; j <= steps; j++) {
+      if (arcLengths[j] >= targetLength) {
+        const ratio = (targetLength - arcLengths[j - 1]) / (arcLengths[j] - arcLengths[j - 1]);
+        t = (j - 1 + ratio) / steps;
+        break;
+      }
+    }
+    coordinates.push(getBezierPoint(t, p0, p1, p2, p3));
+  }
+
+  return coordinates;
+}
+
 export const generateColorVariation = (
   hex: string,
   variation: number,
-  lightnessRange: number,
-  saturationRange: number
+  lightnessScaling: number,
+  saturationScaling: number
 ) => {
   const { hue, saturation, lightness } = hexToHSL(hex);
   const _lightness = lightness >= 100 ? 100 : lightness;
   const _saturation = saturation >= 100 ? 100 : saturation;
   const rangedLightness =
-    variation === 50 ? lightness : Math.min(Math.max(_lightness + (variation - 50) * lightnessRange, 0), 100);
+    variation === 50 ? lightness : Math.min(Math.max(_lightness + (variation - 50) * lightnessScaling, 0), 100);
   const rangedSaturation =
     saturation === 0
       ? 0
       : saturation === 50
       ? saturation
-      : Math.min(Math.max(_saturation + (variation - 50) * saturationRange, 0), 100);
+      : Math.min(Math.max(_saturation + (variation - 50) * saturationScaling, 0), 100);
   return { hue, saturation: rangedSaturation, lightness: rangedLightness };
 };
 
+export function scaleNumbers(
+  range: number,
+  startValue: number,
+  endValue: number,
+  curve: number,
+  lean: number
+): number[] {
+  const scaledNumbers: number[] = [];
+
+  const interpolate = (t: number, curve: number, lean: number): number => {
+    // Apply lean
+    t = Math.pow(t, lean);
+
+    if (curve < 0) {
+      return Math.pow(t, 1 + Math.abs(curve)); // Ease-in (slow start, fast end)
+    } else if (curve > 0) {
+      return 1 - Math.pow(1 - t, 1 + curve); // Ease-out (fast start, slow end)
+    } else {
+      return t; // Linear
+    }
+  };
+
+  for (let i = 0; i < range; i++) {
+    const t = i / (range - 1); // Normalize t between 0 and 1
+    // console.log(`t (${i}):`, t); // Debug log
+    const scaledT = interpolate(t, curve, lean);
+    // console.log(`scaledT (${i}):`, scaledT); // Debug log
+    const scaledValue = startValue + scaledT * (endValue - startValue);
+    // console.log(`scaledValue (${i}):`, scaledValue); // Debug log
+    scaledNumbers.push(scaledValue);
+  }
+
+  return scaledNumbers;
+}
+
 // // Function to generate HSL variations
 // export function generateHSLVariations(hexColor: string): { [key: number]: string } {
 //   const [baseHue, baseSaturation, baseLightness] = hexToHSL(hexColor);