@studious-creative/yumekit 0.1.8 → 0.1.9

package/dist/components/y-appbar.js

@@ -1302,18 +1302,21 @@ class YumeAppbar extends HTMLElement {
                 collapsedWidth: "40px",
                 bodyGap: "2px",
                 buttonSize: "small",
+                iconSize: "small",
             },
             medium: {
                 padding: "var(--spacing-small, 6px)",
                 collapsedWidth: "52px",
                 bodyGap: "3px",
                 buttonSize: "medium",
+                iconSize: "medium",
             },
             large: {
                 padding: "var(--spacing-medium, 8px)",
                 collapsedWidth: "64px",
                 bodyGap: "4px",
                 buttonSize: "large",
+                iconSize: "large",
             },
         };
         const cfg = sizeConfig[size] || sizeConfig.medium;
@@ -1428,7 +1431,7 @@ class YumeAppbar extends HTMLElement {
 
             .appbar.vertical .appbar-header {
                 border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
-                padding-bottom: var(--_appbar-padding);
+                padding: var(--_appbar-padding);
                 margin-bottom: var(--_appbar-padding);
             }
             .appbar.vertical .appbar-footer {
@@ -1439,7 +1442,7 @@ class YumeAppbar extends HTMLElement {
 
             .appbar.horizontal .appbar-header {
                 border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
-                padding-right: var(--_appbar-padding);
+                padding: var(--_appbar-padding);
                 margin-right: var(--_appbar-padding);
             }
             .appbar.horizontal .appbar-footer {
@@ -1591,7 +1594,10 @@ class YumeAppbar extends HTMLElement {
         titleWrapper.appendChild(titleSlot);
         headerContent.appendChild(titleWrapper);
 
+        const headerSlot = document.createElement("slot");
+        headerSlot.name = "header";
         header.appendChild(headerContent);
+        header.appendChild(headerSlot);
         bar.appendChild(header);
 
         /* --- Body: y-button nav items --- */
@@ -1617,13 +1623,15 @@ class YumeAppbar extends HTMLElement {
                 if (item.icon.trim().startsWith("<")) {
                     const iconEl = document.createElement("span");
                     iconEl.slot = "left-icon";
+                    iconEl.setAttribute("part", "icon");
                     iconEl.innerHTML = item.icon;
                     btn.appendChild(iconEl);
                 } else {
                     const iconEl = document.createElement("y-icon");
                     iconEl.slot = "left-icon";
+                    iconEl.setAttribute("part", "icon");
                     iconEl.setAttribute("name", item.icon);
-                    iconEl.setAttribute("size", "small");
+                    iconEl.setAttribute("size", cfg.iconSize);
                     btn.appendChild(iconEl);
                 }
             }
@@ -1646,7 +1654,14 @@ class YumeAppbar extends HTMLElement {
                 });
             }
 
-            wrapper.appendChild(btn);
+            if (item.slot) {
+                const slot = document.createElement("slot");
+                slot.name = item.slot;
+                slot.appendChild(btn);
+                wrapper.appendChild(slot);
+            } else {
+                wrapper.appendChild(btn);
+            }
 
             if (hasChildren) {
                 const menu = document.createElement("y-menu");

package/dist/components/y-tag.d.ts

@@ -3,5 +3,5 @@ export class YumeTag extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     render(): void;
-    getStyle(color: any, styleType: any, shape: any): string;
+    getStyle(color: any, styleType: any, shape: any, size: any): string;
 }

package/dist/components/y-tag.js

@@ -14,7 +14,7 @@ const close = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width
 
 class YumeTag extends HTMLElement {
     static get observedAttributes() {
-        return ["removable", "color", "style-type", "shape"];
+        return ["removable", "color", "style-type", "shape", "size"];
     }
 
     constructor() {
@@ -36,9 +36,10 @@ class YumeTag extends HTMLElement {
         const color = this.getAttribute("color") || "base";
         const styleType = this.getAttribute("style-type") || "filled";
         const shape = this.getAttribute("shape") || "square";
+        const size = this.getAttribute("size") || "medium";
 
         const style = document.createElement("style");
-        style.textContent = this.getStyle(color, styleType, shape);
+        style.textContent = this.getStyle(color, styleType, shape, size);
 
         this.shadowRoot.innerHTML = "";
         this.shadowRoot.appendChild(style);
@@ -72,7 +73,7 @@ class YumeTag extends HTMLElement {
         }
     }
 
-    getStyle(color, styleType, shape) {
+    getStyle(color, styleType, shape, size) {
         const vars = {
             primary: [
                 "--primary-content--",
@@ -125,20 +126,44 @@ class YumeTag extends HTMLElement {
                 ? "var(--component-tag-border-radius-circle)"
                 : "var(--component-tag-border-radius-square)";
 
+        const sizeConfig = {
+            small: {
+                height: "var(--component-tag-height-small, 22px)",
+                padding:
+                    "var(--component-tag-padding-small, var(--spacing-2x-small))",
+                fontSize: "var(--font-size-small, 0.8em)",
+            },
+            medium: {
+                height: "var(--component-tag-height-medium, 28px)",
+                padding:
+                    "var(--component-tag-padding-medium, var(--spacing-x-small))",
+                fontSize: "var(--font-size-label, 0.83em)",
+            },
+            large: {
+                height: "var(--component-tag-height-large, 38px)",
+                padding:
+                    "var(--component-tag-padding-large, var(--spacing-small))",
+                fontSize: "var(--font-size-paragraph, 1em)",
+            },
+        };
+        const cfg = sizeConfig[size] || sizeConfig.medium;
+
         const baseStyle = `
             :host {
                 display: inline-block;
                 font-family: var(--font-family-body, sans-serif);
-                font-size: var(--font-size-label, 0.83em);
+                font-size: ${cfg.fontSize};
             }
             .tag {
                 display: inline-flex;
                 align-items: center;
                 gap: var(--spacing-2x-small);
-                padding: 0 var(--component-tag-padding-medium, var(--spacing-x-small));
+                height: ${cfg.height};
+                padding: 0 ${cfg.padding};
                 border: 1px solid transparent;
                 transition: background-color 0.2s, color 0.2s;
                 border-radius: ${borderRadius};
+                box-sizing: border-box;
             }
             .remove {
                 all: unset;

package/dist/components/y-theme.js

@@ -1,4 +1,4 @@
-var variablesCSS = "/* Colors */\n:root {\n    --neutral--: #7f8286ff;\n    --neutral-white: #ffffffff;\n    --neutral-black: #000000ff;\n    --neutral-light-0: #f7f7faff;\n    --neutral-light-1: #f0f0f2ff;\n    --neutral-light-2: #dfe0e3ff;\n    --neutral-light-3: #cacbcfff;\n    --neutral-light-4: #bbbdc0ff;\n    --neutral-light-5: #acaeb2ff;\n    --neutral-light-6: #9d9fa3ff;\n    --neutral-light-7: #8e9195ff;\n    --neutral-dark-0: #0c0c0dff;\n    --neutral-dark-1: #151617ff;\n    --neutral-dark-2: #292a2bff;\n    --neutral-dark-3: #37383aff;\n    --neutral-dark-4: #46474aff;\n    --neutral-dark-5: #545659ff;\n    --neutral-dark-6: #626568ff;\n    --neutral-dark-7: #717377ff;\n    --neutral-black-translucent: #0000001f;\n    --neutral-white-translucent: #1111111f;\n    --red--: #b80421ff;\n    --red-light-0: #f2e6e8ff;\n    --red-light-1: #ebcacfff;\n    --red-light-2: #e4aeb6ff;\n    --red-light-3: #dc919dff;\n    --red-light-4: #d57585ff;\n    --red-light-5: #ce596cff;\n    --red-light-6: #c73d53ff;\n    --red-light-7: #bf203aff;\n    --red-dark-0: #0d0103ff;\n    --red-dark-1: #220107ff;\n    --red-dark-2: #38020bff;\n    --red-dark-3: #4d020eff;\n    --red-dark-4: #630312ff;\n    --red-dark-5: #780316ff;\n    --red-dark-6: #8d031aff;\n    --red-dark-7: #a3041dff;\n    --red-translucent: #b804211f;\n    --orange--: #d13704ff;\n    --orange-light-0: #f2e9e6ff;\n    --orange-light-1: #eed3caff;\n    --orange-light-2: #eabdaeff;\n    --orange-light-3: #e6a691ff;\n    --orange-light-4: #e29075ff;\n    --orange-light-5: #dd7a59ff;\n    --orange-light-6: #d9643dff;\n    --orange-light-7: #d54d20ff;\n    --orange-dark-0: #0d0300ff;\n    --orange-dark-1: #260a01ff;\n    --orange-dark-2: #3e1001ff;\n    --orange-dark-3: #571702ff;\n    --orange-dark-4: #6f1d02ff;\n    --orange-dark-5: #882403ff;\n    --orange-dark-6: #a02a03ff;\n    --orange-dark-7: #b93104ff;\n    --orange-translucent: #d137041f;\n    --amber--: #d16004ff;\n    --amber-light-0: #f2ece6ff;\n    --amber-light-1: #eedbcaff;\n    --amber-light-2: #eac9aeff;\n    --amber-light-3: #e6b891ff;\n    --amber-light-4: #e2a675ff;\n    --amber-light-5: #dd9559ff;\n    --amber-light-6: #d9833dff;\n    --amber-light-7: #d57220ff;\n    --amber-dark-0: #0d0c0cff;\n    --amber-dark-1: #26170bff;\n    --amber-dark-2: #3e210aff;\n    --amber-dark-3: #572c09ff;\n    --amber-dark-4: #6f3608ff;\n    --amber-dark-5: #884107ff;\n    --amber-dark-6: #a04b06ff;\n    --amber-dark-7: #b95605ff;\n    --amber-translucent: #d160041f;\n    --yellow--: #d17f04ff;\n    --yellow-light-0: #f2eadfff;\n    --yellow-light-1: #eeddc4ff;\n    --yellow-light-2: #eacfa8ff;\n    --yellow-light-3: #e6c28dff;\n    --yellow-light-4: #e2b572ff;\n    --yellow-light-5: #dda756ff;\n    --yellow-light-6: #d99a3bff;\n    --yellow-light-7: #d58c1fff;\n    --yellow-dark-0: #0d0c0cff;\n    --yellow-dark-1: #261a0bff;\n    --yellow-dark-2: #3e290aff;\n    --yellow-dark-3: #573709ff;\n    --yellow-dark-4: #6f4608ff;\n    --yellow-dark-5: #885407ff;\n    --yellow-dark-6: #a06206ff;\n    --yellow-dark-7: #b97105ff;\n    --yellow-translucent: #d17f041f;\n    --lime--: #cad104ff;\n    --lime-light-0: #f2f2dfff;\n    --lime-light-1: #edeec4ff;\n    --lime-light-2: #e8eaa8ff;\n    --lime-light-3: #e3e68dff;\n    --lime-light-4: #dee272ff;\n    --lime-light-5: #d9dd56ff;\n    --lime-light-6: #d4d93bff;\n    --lime-light-7: #cfd51fff;\n    --lime-dark-0: #0d0d0cff;\n    --lime-dark-1: #25260bff;\n    --lime-dark-2: #3c3e0aff;\n    --lime-dark-3: #545709ff;\n    --lime-dark-4: #6c6f08ff;\n    --lime-dark-5: #838807ff;\n    --lime-dark-6: #9ba006ff;\n    --lime-dark-7: #b2b905ff;\n    --lime-translucent: #cad1041f;\n    --green--: #2dba73ff;\n    --green-light-0: #e6f2ecff;\n    --green-light-1: #cfebddff;\n    --green-light-2: #b8e4ceff;\n    --green-light-3: #a1ddbfff;\n    --green-light-4: #8ad6b0ff;\n    --green-light-5: #72cfa0ff;\n    --green-light-6: #5bc891ff;\n    --green-light-7: #44c182ff;\n    --green-dark-0: #030d08ff;\n    --green-dark-1: #082315ff;\n    --green-dark-2: #0e3823ff;\n    --green-dark-3: #134e30ff;\n    --green-dark-4: #18643eff;\n    --green-dark-5: #1d794bff;\n    --green-dark-6: #238f58ff;\n    --green-dark-7: #28a466ff;\n    --green-translucent: #2dba731f;\n    --teal--: #04b8b8ff;\n    --teal-light-0: #f2fffeff;\n    --teal-light-1: #d4f6f5ff;\n    --teal-light-2: #b7ededff;\n    --teal-light-3: #99e4e4ff;\n    --teal-light-4: #7bdcdbff;\n    --teal-light-5: #5dd3d2ff;\n    --teal-light-6: #40cacaff;\n    --teal-light-7: #22c1c1ff;\n    --teal-dark-0: #0c0d0dff;\n    --teal-dark-1: #0b2624ff;\n    --teal-dark-2: #0a3e3cff;\n    --teal-dark-3: #095753ff;\n    --teal-dark-4: #086f6aff;\n    --teal-dark-5: #078881ff;\n    --teal-dark-6: #06a099ff;\n    --teal-dark-7: #05b9b0ff;\n    --teal-translucent: #04b8b81f;\n    --blue--: #0576ffff;\n    --blue-light-0: #ebf5ffff;\n    --blue-light-1: #cee5ffff;\n    --blue-light-2: #b2d5ffff;\n    --blue-light-3: #95c5ffff;\n    --blue-light-4: #78b6ffff;\n    --blue-light-5: #5ba6ffff;\n    --blue-light-6: #3f96ffff;\n    --blue-light-7: #2286ffff;\n    --blue-dark-0: #0c0c0dff;\n    --blue-dark-1: #0b192bff;\n    --blue-dark-2: #0a274aff;\n    --blue-dark-3: #093468ff;\n    --blue-dark-4: #094186ff;\n    --blue-dark-5: #084ea4ff;\n    --blue-dark-6: #075cc3ff;\n    --blue-dark-7: #0669e1ff;\n    --blue-translucent: #0576ff1f;\n    --indigo--: #5405ffff;\n    --indigo-light-0: #f6f2ffff;\n    --indigo-light-1: #e2d4ffff;\n    --indigo-light-2: #ceb7ffff;\n    --indigo-light-3: #b999ffff;\n    --indigo-light-4: #a57cffff;\n    --indigo-light-5: #915effff;\n    --indigo-light-6: #7d40ffff;\n    --indigo-light-7: #6823ffff;\n    --indigo-dark-0: #0d0c0cff;\n    --indigo-dark-1: #160b2aff;\n    --indigo-dark-2: #1f0a49ff;\n    --indigo-dark-3: #280967ff;\n    --indigo-dark-4: #310986ff;\n    --indigo-dark-5: #3908a4ff;\n    --indigo-dark-6: #4207c2ff;\n    --indigo-dark-7: #4b06e1ff;\n    --indigo-translucent: #5405ff1f;\n    --purple--: #8a05ffff;\n    --purple-light-0: #f9f2ffff;\n    --purple-light-1: #ebd4ffff;\n    --purple-light-2: #ddb7ffff;\n    --purple-light-3: #cf99ffff;\n    --purple-light-4: #c27cffff;\n    --purple-light-5: #b45effff;\n    --purple-light-6: #a640ffff;\n    --purple-light-7: #9823ffff;\n    --purple-dark-0: #0c0c0dff;\n    --purple-dark-1: #1c0b2bff;\n    --purple-dark-2: #2c0a4aff;\n    --purple-dark-3: #3b0968ff;\n    --purple-dark-4: #4b0986ff;\n    --purple-dark-5: #5b08a4ff;\n    --purple-dark-6: #6b07c3ff;\n    --purple-dark-7: #7a06e1ff;\n    --purple-translucent: #8a05ff1f;\n    --pink--: #ff05a8ff;\n    --pink-light-0: #f9f2ffff;\n    --pink-light-1: #fad4f4ff;\n    --pink-light-2: #fbb7e9ff;\n    --pink-light-3: #fb99deff;\n    --pink-light-4: #fc7cd4ff;\n    --pink-light-5: #fd5ec9ff;\n    --pink-light-6: #fe40beff;\n    --pink-light-7: #fe23b3ff;\n    --pink-dark-0: #0c0c0dff;\n    --pink-dark-1: #2a0b20ff;\n    --pink-dark-2: #490a34ff;\n    --pink-dark-3: #670947ff;\n    --pink-dark-4: #86095bff;\n    --pink-dark-5: #a4086eff;\n    --pink-dark-6: #c20781ff;\n    --pink-dark-7: #e10695ff;\n    --pink-translucent: #ff05a81f;\n    --brown--: #ab642eff;\n    --brown-light-0: #f2dfdfff;\n    --brown-light-1: #e9d0c9ff;\n    --brown-light-2: #e0c0b3ff;\n    --brown-light-3: #d7b19dff;\n    --brown-light-4: #cfa287ff;\n    --brown-light-5: #c69270ff;\n    --brown-light-6: #bd835aff;\n    --brown-light-7: #b47344ff;\n    --brown-dark-0: #0d0c0cff;\n    --brown-dark-1: #211710ff;\n    --brown-dark-2: #352215ff;\n    --brown-dark-3: #482d19ff;\n    --brown-dark-4: #5c381dff;\n    --brown-dark-5: #704321ff;\n    --brown-dark-6: #844e26ff;\n    --brown-dark-7: #97592aff;\n    --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n    --border-none: 0px;\n    --border-x-thin: 1px;\n    --border-thin: 2px;\n    --border-medium: 4px;\n    --border-thick: 8px;\n    --border-x-thick: 10px;\n    --spacing-none: 0px;\n    --spacing-4x-small: 1px;\n    --spacing-2x-small: 2px;\n    --spacing-x-small: 4px;\n    --spacing-small: 6px;\n    --spacing-medium: 8px;\n    --spacing-large: 12px;\n    --spacing-x-large: 16px;\n    --spacing-2x-large: 24px;\n    --spacing-4x-large: 32px;\n    --font-size-display-1: 6em;\n    --font-size-display-2: 5.5em;\n    --font-size-display-3: 4.5em;\n    --font-size-display-4: 3.5em;\n    --font-size-h1: 2em;\n    --font-size-h2: 1.5em;\n    --font-size-h3: 1.17em;\n    --font-size-h4: 1em;\n    --font-size-h5: 0.83em;\n    --font-size-paragraph: 1em;\n    --font-size-small: 0.8em;\n    --font-size-label: 0.83em;\n    --font-size-button: 1em;\n    --font-size-quote: 1.17em;\n    --radii-none: 0px;\n    --radii-x-small: 0.125em;\n    --radii-small: 0.25em;\n    --radii-medium: 0.375em;\n    --radii-large: 0.5px;\n    --radii-x-large: 1em;\n    --radii-full: 9999px;\n    --sizing-2x-small: 16px;\n    --sizing-x-small: 19px;\n    --sizing-small: 32px;\n    --sizing-medium: 40px;\n    --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n    /* appbar */\n    --component-appbar-collapsed-width: 48px;\n    --component-appbar-padding: var(--spacing-medium);\n    --component-appbar-width: 240px;\n    --component-appbar-z-index: 100;\n\n    /* avatar */\n    --component-avatar-border-radius-circle: var(--radii-full);\n    --component-avatar-border-radius-square: var(--radii-small);\n    --component-avatar-size-large: var(--sizing-large);\n    --component-avatar-size-medium: var(--sizing-medium);\n    --component-avatar-size-small: var(--sizing-small);\n\n    /* badge */\n    --component-badge-border-radius-circle: var(--radii-full);\n    --component-badge-border-radius-square: var(--radii-small);\n    --component-badge-padding-large: var(--spacing-small);\n    --component-badge-padding-medium: var(--spacing-x-small);\n    --component-badge-padding-small: var(--spacing-2x-small);\n    --component-badge-size-large: var(--sizing-medium);\n    --component-badge-size-medium: var(--sizing-small);\n    --component-badge-size-small: var(--sizing-2x-small);\n\n    /* button */\n    --component-button-border-radius-inner: var(--radii-x-small);\n    --component-button-border-radius-outer: var(--radii-small);\n    --component-button-border-width: var(--border-thin);\n    --component-button-border-width-2: var(--border-x-thin);\n    --component-button-padding-large: var(--spacing-x-large);\n    --component-button-padding-medium: var(--spacing-medium);\n    --component-button-padding-small: var(--spacing-x-small);\n\n    /* card */\n    --component-card-border-radius-inner: var(--radii-small);\n    --component-card-border-radius-outer: var(--radii-medium);\n    --component-card-border-width: var(--border-x-thin);\n    --component-card-inner-border-width: var(--border-x-thin);\n    --component-card-padding-inner: var(--spacing-medium);\n    --component-card-padding-outer: var(--spacing-x-large);\n\n    /* checkbox */\n    --component-checkbox-icon-size: var(--sizing-2x-small);\n    --component-checkbox-size: var(--sizing-x-small);\n\n    /* dialog */\n    --component-dialog-border-radius-inner: var(--radii-x-small);\n    --component-dialog-border-radius-outer: var(--radii-small);\n    --component-dialog-border-width: var(--border-x-thin);\n    --component-dialog-inner-border-width: var(--border-x-thin);\n    --component-dialog-padding: var(--spacing-medium);\n    --component-dialog-z-index: 1000;\n\n    /* drawer */\n    --component-drawer-border-radius: var(--radii-small);\n    --component-drawer-border-width: var(--border-x-thin);\n    --component-drawer-handle-padding: var(--spacing-x-small);\n    --component-drawer-handle-width: var(--spacing-x-small);\n    --component-drawer-padding: var(--spacing-medium);\n    --component-drawer-z-index: 5000;\n\n    /* icon */\n    --component-icon-size-large: var(--spacing-4x-large);\n    --component-icon-size-medium: var(--spacing-2x-large);\n    --component-icon-size-small: var(--spacing-x-large);\n\n    /* inputs */\n    --component-inputs-border-radius-inner: var(--radii-x-small);\n    --component-inputs-border-radius-outer: var(--radii-small);\n    --component-inputs-border-width: var(--border-thin);\n    --component-inputs-padding-large: var(--spacing-x-large);\n    --component-inputs-padding-medium: var(--spacing-medium);\n    --component-inputs-padding-small: var(--spacing-x-small);\n\n    /* menu */\n    --component-menu-border-radius: var(--radii-x-small);\n    --component-menu-border-width: var(--border-x-thin);\n    --component-menu-padding-horizontal: var(--spacing-small);\n    --component-menu-padding-vertical: var(--spacing-x-small);\n    --component-menu-z-index: 1001;\n\n    /* panelbar */\n    --component-panelbar-border-radius: var(--radii-x-small);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-indent: var(--spacing-x-large);\n    --component-panelbar-padding: var(--spacing-medium);\n\n    /* progress */\n    --component-progress-border-radius-inner: var(--radii-small);\n    --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-progress-border-width: var(--border-x-thin);\n    --component-progress-padding: var(--spacing-x-small);\n    --component-progress-size-large: var(--sizing-large);\n    --component-progress-size-medium: var(--sizing-medium);\n    --component-progress-size-small: var(--sizing-small);\n\n    /* radio */\n    --component-radio-dot-offset: var(--spacing-2x-small);\n    --component-radio-dot-size: var(--spacing-medium);\n    --component-radio-size: var(--sizing-2x-small);\n\n    /* select */\n    --component-select-z-index: 6000;\n\n    /* sidebar */\n    --component-sidebar-border-radius: var(--radii-small);\n    --component-sidebar-border-width: var(--border-x-thin);\n\n    /* slider */\n    --component-slider-border-radius-inner: var(--radii-small);\n    --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-slider-border-width: var(--border-x-thin);\n    --component-slider-padding: var(--spacing-x-small);\n    --component-slider-thumb-border-radius: var(--radii-x-small);\n\n    /* switch */\n    --component-switch-border-radius: var(--radii-full);\n    --component-switch-border-width: var(--border-x-thin);\n    --component-switch-padding: var(--spacing-2x-small);\n\n    /* tab */\n    --component-tab-border-radius-inner: var(--radii-x-small);\n    --component-tab-border-radius-outer: var(--radii-small);\n    --component-tab-border-width: var(--border-x-thin);\n    --component-tab-content-padding: var(--spacing-large);\n    --component-tab-gap-large: var(--spacing-large);\n    --component-tab-gap-medium: var(--spacing-small);\n    --component-tab-gap-small: var(--spacing-2x-small);\n    --component-tab-padding-large: var(--spacing-2x-large);\n    --component-tab-padding-medium: var(--spacing-large);\n    --component-tab-padding-small: var(--spacing-small);\n\n    /* table */\n    --component-table-border-radius: var(--radii-small);\n    --component-table-border-width: var(--border-x-thin);\n    --component-table-border-width-header: var(--border-thin);\n    --component-table-padding-large: var(--spacing-large);\n    --component-table-padding-medium: var(--spacing-medium);\n    --component-table-padding-small: var(--spacing-small);\n\n    /* tag */\n    --component-tag-border-radius-circle: var(--radii-full);\n    --component-tag-border-radius-square: var(--radii-small);\n    --component-tag-padding-large: var(--spacing-small);\n    --component-tag-padding-medium: var(--spacing-x-small);\n    --component-tag-padding-small: var(--spacing-2x-small);\n    --component-tag-size-large: var(--sizing-large);\n    --component-tag-size-medium: var(--sizing-medium);\n    --component-tag-size-small: var(--sizing-small);\n\n    /* toast */\n    --component-toast-border-radius: var(--radii-small);\n    --component-toast-offset: var(--spacing-x-large);\n    --component-toast-padding: var(--spacing-medium);\n    --component-toast-padding-h: var(--spacing-x-large);\n    --component-toast-z-index: 9000;\n\n    /* tooltip */\n    --component-tooltip-border-radius: var(--radii-small);\n    --component-tooltip-padding: var(--spacing-x-small);\n    --component-tooltip-padding-h: var(--spacing-medium);\n    --component-tooltip-z-index: 7000;\n}\n\n/* Default Theme (Blue Light) */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-inverse: var(--neutral-white);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-light-1);\n    --primary-background-component: var(--blue-light-0);\n    --primary-background-hover: var(--blue-light-2);\n    --primary-background-active: var(--blue-light-3);\n    --primary-background-border: var(--blue-light-4);\n    --primary-content--: var(--blue--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--blue-dark-7);\n    --primary-content-active: var(--blue-dark-6);\n    --secondary-background-app: var(--teal-light-1);\n    --secondary-background-component: var(--teal-light-0);\n    --secondary-background-hover: var(--teal-light-2);\n    --secondary-background-border: var(--teal-light-3);\n    --secondary-background-active: var(--teal-light-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-inverse: var(--neutral-black);\n    --secondary-content-hover: var(--teal-dark-7);\n    --secondary-content-active: var(--teal-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-appbar-border-width: var(--component-sidebar-border-width);\n    --component-appbar-border-radius: var(--component-sidebar-border-radius);\n    --component-appbar-inner-border-width: var(\n        --component-sidebar-border-width\n    );\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-dialog-shadow: var(--base-shadow);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --component-tabs-font-family: var(--font-family-body);\n    --component-slider-width: 129px;\n    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
+var variablesCSS = "/* Colors */\n:root {\n    --neutral--: #7f8286ff;\n    --neutral-white: #ffffffff;\n    --neutral-black: #000000ff;\n    --neutral-light-0: #f7f7faff;\n    --neutral-light-1: #f0f0f2ff;\n    --neutral-light-2: #dfe0e3ff;\n    --neutral-light-3: #cacbcfff;\n    --neutral-light-4: #bbbdc0ff;\n    --neutral-light-5: #acaeb2ff;\n    --neutral-light-6: #9d9fa3ff;\n    --neutral-light-7: #8e9195ff;\n    --neutral-dark-0: #0c0c0dff;\n    --neutral-dark-1: #151617ff;\n    --neutral-dark-2: #292a2bff;\n    --neutral-dark-3: #37383aff;\n    --neutral-dark-4: #46474aff;\n    --neutral-dark-5: #545659ff;\n    --neutral-dark-6: #626568ff;\n    --neutral-dark-7: #717377ff;\n    --neutral-black-translucent: #0000001f;\n    --neutral-white-translucent: #1111111f;\n    --red--: #b80421ff;\n    --red-light-0: #f2e6e8ff;\n    --red-light-1: #ebcacfff;\n    --red-light-2: #e4aeb6ff;\n    --red-light-3: #dc919dff;\n    --red-light-4: #d57585ff;\n    --red-light-5: #ce596cff;\n    --red-light-6: #c73d53ff;\n    --red-light-7: #bf203aff;\n    --red-dark-0: #0d0103ff;\n    --red-dark-1: #220107ff;\n    --red-dark-2: #38020bff;\n    --red-dark-3: #4d020eff;\n    --red-dark-4: #630312ff;\n    --red-dark-5: #780316ff;\n    --red-dark-6: #8d031aff;\n    --red-dark-7: #a3041dff;\n    --red-translucent: #b804211f;\n    --orange--: #d13704ff;\n    --orange-light-0: #f2e9e6ff;\n    --orange-light-1: #eed3caff;\n    --orange-light-2: #eabdaeff;\n    --orange-light-3: #e6a691ff;\n    --orange-light-4: #e29075ff;\n    --orange-light-5: #dd7a59ff;\n    --orange-light-6: #d9643dff;\n    --orange-light-7: #d54d20ff;\n    --orange-dark-0: #0d0300ff;\n    --orange-dark-1: #260a01ff;\n    --orange-dark-2: #3e1001ff;\n    --orange-dark-3: #571702ff;\n    --orange-dark-4: #6f1d02ff;\n    --orange-dark-5: #882403ff;\n    --orange-dark-6: #a02a03ff;\n    --orange-dark-7: #b93104ff;\n    --orange-translucent: #d137041f;\n    --amber--: #d16004ff;\n    --amber-light-0: #f2ece6ff;\n    --amber-light-1: #eedbcaff;\n    --amber-light-2: #eac9aeff;\n    --amber-light-3: #e6b891ff;\n    --amber-light-4: #e2a675ff;\n    --amber-light-5: #dd9559ff;\n    --amber-light-6: #d9833dff;\n    --amber-light-7: #d57220ff;\n    --amber-dark-0: #0d0c0cff;\n    --amber-dark-1: #26170bff;\n    --amber-dark-2: #3e210aff;\n    --amber-dark-3: #572c09ff;\n    --amber-dark-4: #6f3608ff;\n    --amber-dark-5: #884107ff;\n    --amber-dark-6: #a04b06ff;\n    --amber-dark-7: #b95605ff;\n    --amber-translucent: #d160041f;\n    --yellow--: #d17f04ff;\n    --yellow-light-0: #f2eadfff;\n    --yellow-light-1: #eeddc4ff;\n    --yellow-light-2: #eacfa8ff;\n    --yellow-light-3: #e6c28dff;\n    --yellow-light-4: #e2b572ff;\n    --yellow-light-5: #dda756ff;\n    --yellow-light-6: #d99a3bff;\n    --yellow-light-7: #d58c1fff;\n    --yellow-dark-0: #0d0c0cff;\n    --yellow-dark-1: #261a0bff;\n    --yellow-dark-2: #3e290aff;\n    --yellow-dark-3: #573709ff;\n    --yellow-dark-4: #6f4608ff;\n    --yellow-dark-5: #885407ff;\n    --yellow-dark-6: #a06206ff;\n    --yellow-dark-7: #b97105ff;\n    --yellow-translucent: #d17f041f;\n    --lime--: #cad104ff;\n    --lime-light-0: #f2f2dfff;\n    --lime-light-1: #edeec4ff;\n    --lime-light-2: #e8eaa8ff;\n    --lime-light-3: #e3e68dff;\n    --lime-light-4: #dee272ff;\n    --lime-light-5: #d9dd56ff;\n    --lime-light-6: #d4d93bff;\n    --lime-light-7: #cfd51fff;\n    --lime-dark-0: #0d0d0cff;\n    --lime-dark-1: #25260bff;\n    --lime-dark-2: #3c3e0aff;\n    --lime-dark-3: #545709ff;\n    --lime-dark-4: #6c6f08ff;\n    --lime-dark-5: #838807ff;\n    --lime-dark-6: #9ba006ff;\n    --lime-dark-7: #b2b905ff;\n    --lime-translucent: #cad1041f;\n    --green--: #2dba73ff;\n    --green-light-0: #e6f2ecff;\n    --green-light-1: #cfebddff;\n    --green-light-2: #b8e4ceff;\n    --green-light-3: #a1ddbfff;\n    --green-light-4: #8ad6b0ff;\n    --green-light-5: #72cfa0ff;\n    --green-light-6: #5bc891ff;\n    --green-light-7: #44c182ff;\n    --green-dark-0: #030d08ff;\n    --green-dark-1: #082315ff;\n    --green-dark-2: #0e3823ff;\n    --green-dark-3: #134e30ff;\n    --green-dark-4: #18643eff;\n    --green-dark-5: #1d794bff;\n    --green-dark-6: #238f58ff;\n    --green-dark-7: #28a466ff;\n    --green-translucent: #2dba731f;\n    --teal--: #04b8b8ff;\n    --teal-light-0: #f2fffeff;\n    --teal-light-1: #d4f6f5ff;\n    --teal-light-2: #b7ededff;\n    --teal-light-3: #99e4e4ff;\n    --teal-light-4: #7bdcdbff;\n    --teal-light-5: #5dd3d2ff;\n    --teal-light-6: #40cacaff;\n    --teal-light-7: #22c1c1ff;\n    --teal-dark-0: #0c0d0dff;\n    --teal-dark-1: #0b2624ff;\n    --teal-dark-2: #0a3e3cff;\n    --teal-dark-3: #095753ff;\n    --teal-dark-4: #086f6aff;\n    --teal-dark-5: #078881ff;\n    --teal-dark-6: #06a099ff;\n    --teal-dark-7: #05b9b0ff;\n    --teal-translucent: #04b8b81f;\n    --blue--: #0576ffff;\n    --blue-light-0: #ebf5ffff;\n    --blue-light-1: #cee5ffff;\n    --blue-light-2: #b2d5ffff;\n    --blue-light-3: #95c5ffff;\n    --blue-light-4: #78b6ffff;\n    --blue-light-5: #5ba6ffff;\n    --blue-light-6: #3f96ffff;\n    --blue-light-7: #2286ffff;\n    --blue-dark-0: #0c0c0dff;\n    --blue-dark-1: #0b192bff;\n    --blue-dark-2: #0a274aff;\n    --blue-dark-3: #093468ff;\n    --blue-dark-4: #094186ff;\n    --blue-dark-5: #084ea4ff;\n    --blue-dark-6: #075cc3ff;\n    --blue-dark-7: #0669e1ff;\n    --blue-translucent: #0576ff1f;\n    --indigo--: #5405ffff;\n    --indigo-light-0: #f6f2ffff;\n    --indigo-light-1: #e2d4ffff;\n    --indigo-light-2: #ceb7ffff;\n    --indigo-light-3: #b999ffff;\n    --indigo-light-4: #a57cffff;\n    --indigo-light-5: #915effff;\n    --indigo-light-6: #7d40ffff;\n    --indigo-light-7: #6823ffff;\n    --indigo-dark-0: #0d0c0cff;\n    --indigo-dark-1: #160b2aff;\n    --indigo-dark-2: #1f0a49ff;\n    --indigo-dark-3: #280967ff;\n    --indigo-dark-4: #310986ff;\n    --indigo-dark-5: #3908a4ff;\n    --indigo-dark-6: #4207c2ff;\n    --indigo-dark-7: #4b06e1ff;\n    --indigo-translucent: #5405ff1f;\n    --purple--: #8a05ffff;\n    --purple-light-0: #f9f2ffff;\n    --purple-light-1: #ebd4ffff;\n    --purple-light-2: #ddb7ffff;\n    --purple-light-3: #cf99ffff;\n    --purple-light-4: #c27cffff;\n    --purple-light-5: #b45effff;\n    --purple-light-6: #a640ffff;\n    --purple-light-7: #9823ffff;\n    --purple-dark-0: #0c0c0dff;\n    --purple-dark-1: #1c0b2bff;\n    --purple-dark-2: #2c0a4aff;\n    --purple-dark-3: #3b0968ff;\n    --purple-dark-4: #4b0986ff;\n    --purple-dark-5: #5b08a4ff;\n    --purple-dark-6: #6b07c3ff;\n    --purple-dark-7: #7a06e1ff;\n    --purple-translucent: #8a05ff1f;\n    --pink--: #ff05a8ff;\n    --pink-light-0: #f9f2ffff;\n    --pink-light-1: #fad4f4ff;\n    --pink-light-2: #fbb7e9ff;\n    --pink-light-3: #fb99deff;\n    --pink-light-4: #fc7cd4ff;\n    --pink-light-5: #fd5ec9ff;\n    --pink-light-6: #fe40beff;\n    --pink-light-7: #fe23b3ff;\n    --pink-dark-0: #0c0c0dff;\n    --pink-dark-1: #2a0b20ff;\n    --pink-dark-2: #490a34ff;\n    --pink-dark-3: #670947ff;\n    --pink-dark-4: #86095bff;\n    --pink-dark-5: #a4086eff;\n    --pink-dark-6: #c20781ff;\n    --pink-dark-7: #e10695ff;\n    --pink-translucent: #ff05a81f;\n    --brown--: #ab642eff;\n    --brown-light-0: #f2dfdfff;\n    --brown-light-1: #e9d0c9ff;\n    --brown-light-2: #e0c0b3ff;\n    --brown-light-3: #d7b19dff;\n    --brown-light-4: #cfa287ff;\n    --brown-light-5: #c69270ff;\n    --brown-light-6: #bd835aff;\n    --brown-light-7: #b47344ff;\n    --brown-dark-0: #0d0c0cff;\n    --brown-dark-1: #211710ff;\n    --brown-dark-2: #352215ff;\n    --brown-dark-3: #482d19ff;\n    --brown-dark-4: #5c381dff;\n    --brown-dark-5: #704321ff;\n    --brown-dark-6: #844e26ff;\n    --brown-dark-7: #97592aff;\n    --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n    --border-none: 0px;\n    --border-x-thin: 1px;\n    --border-thin: 2px;\n    --border-medium: 4px;\n    --border-thick: 8px;\n    --border-x-thick: 10px;\n    --spacing-none: 0px;\n    --spacing-4x-small: 1px;\n    --spacing-2x-small: 2px;\n    --spacing-x-small: 4px;\n    --spacing-small: 6px;\n    --spacing-medium: 8px;\n    --spacing-large: 12px;\n    --spacing-x-large: 16px;\n    --spacing-2x-large: 24px;\n    --spacing-4x-large: 32px;\n    --font-size-display-1: 6em;\n    --font-size-display-2: 5.5em;\n    --font-size-display-3: 4.5em;\n    --font-size-display-4: 3.5em;\n    --font-size-h1: 2em;\n    --font-size-h2: 1.5em;\n    --font-size-h3: 1.17em;\n    --font-size-h4: 1em;\n    --font-size-h5: 0.83em;\n    --font-size-paragraph: 1em;\n    --font-size-small: 0.8em;\n    --font-size-label: 0.83em;\n    --font-size-button: 1em;\n    --font-size-quote: 1.17em;\n    --radii-none: 0px;\n    --radii-x-small: 0.125em;\n    --radii-small: 0.25em;\n    --radii-medium: 0.375em;\n    --radii-large: 0.5px;\n    --radii-x-large: 1em;\n    --radii-full: 9999px;\n    --sizing-2x-small: 16px;\n    --sizing-x-small: 19px;\n    --sizing-small: 32px;\n    --sizing-medium: 40px;\n    --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n    /* appbar */\n    --component-appbar-collapsed-width: 48px;\n    --component-appbar-padding: var(--spacing-medium);\n    --component-appbar-width: 240px;\n    --component-appbar-z-index: 100;\n\n    /* avatar */\n    --component-avatar-border-radius-circle: var(--radii-full);\n    --component-avatar-border-radius-square: var(--radii-small);\n    --component-avatar-size-large: var(--sizing-large);\n    --component-avatar-size-medium: var(--sizing-medium);\n    --component-avatar-size-small: var(--sizing-small);\n\n    /* badge */\n    --component-badge-border-radius-circle: var(--radii-full);\n    --component-badge-border-radius-square: var(--radii-small);\n    --component-badge-padding-large: var(--spacing-small);\n    --component-badge-padding-medium: var(--spacing-x-small);\n    --component-badge-padding-small: var(--spacing-2x-small);\n    --component-badge-size-large: var(--sizing-medium);\n    --component-badge-size-medium: var(--sizing-small);\n    --component-badge-size-small: var(--sizing-2x-small);\n\n    /* button */\n    --component-button-border-radius-inner: var(--radii-x-small);\n    --component-button-border-radius-outer: var(--radii-small);\n    --component-button-border-width: var(--border-thin);\n    --component-button-border-width-2: var(--border-x-thin);\n    --component-button-padding-large: var(--spacing-x-large);\n    --component-button-padding-medium: var(--spacing-medium);\n    --component-button-padding-small: var(--spacing-x-small);\n\n    /* card */\n    --component-card-border-radius-inner: var(--radii-small);\n    --component-card-border-radius-outer: var(--radii-medium);\n    --component-card-border-width: var(--border-x-thin);\n    --component-card-inner-border-width: var(--border-x-thin);\n    --component-card-padding-inner: var(--spacing-medium);\n    --component-card-padding-outer: var(--spacing-x-large);\n\n    /* checkbox */\n    --component-checkbox-icon-size: var(--sizing-2x-small);\n    --component-checkbox-size: var(--sizing-x-small);\n\n    /* dialog */\n    --component-dialog-border-radius-inner: var(--radii-x-small);\n    --component-dialog-border-radius-outer: var(--radii-small);\n    --component-dialog-border-width: var(--border-x-thin);\n    --component-dialog-inner-border-width: var(--border-x-thin);\n    --component-dialog-padding: var(--spacing-medium);\n    --component-dialog-z-index: 1000;\n\n    /* drawer */\n    --component-drawer-border-radius: var(--radii-small);\n    --component-drawer-border-width: var(--border-x-thin);\n    --component-drawer-handle-padding: var(--spacing-x-small);\n    --component-drawer-handle-width: var(--spacing-x-small);\n    --component-drawer-padding: var(--spacing-medium);\n    --component-drawer-z-index: 5000;\n\n    /* icon */\n    --component-icon-size-large: var(--spacing-4x-large);\n    --component-icon-size-medium: var(--spacing-2x-large);\n    --component-icon-size-small: var(--spacing-x-large);\n\n    /* inputs */\n    --component-inputs-border-radius-inner: var(--radii-x-small);\n    --component-inputs-border-radius-outer: var(--radii-small);\n    --component-inputs-border-width: var(--border-thin);\n    --component-inputs-padding-large: var(--spacing-x-large);\n    --component-inputs-padding-medium: var(--spacing-medium);\n    --component-inputs-padding-small: var(--spacing-x-small);\n\n    /* menu */\n    --component-menu-border-radius: var(--radii-x-small);\n    --component-menu-border-width: var(--border-x-thin);\n    --component-menu-padding-horizontal: var(--spacing-small);\n    --component-menu-padding-vertical: var(--spacing-x-small);\n    --component-menu-z-index: 1001;\n\n    /* panelbar */\n    --component-panelbar-border-radius: var(--radii-x-small);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-indent: var(--spacing-x-large);\n    --component-panelbar-padding: var(--spacing-medium);\n\n    /* progress */\n    --component-progress-border-radius-inner: var(--radii-small);\n    --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-progress-border-width: var(--border-x-thin);\n    --component-progress-padding: var(--spacing-x-small);\n    --component-progress-size-large: var(--sizing-large);\n    --component-progress-size-medium: var(--sizing-medium);\n    --component-progress-size-small: var(--sizing-small);\n\n    /* radio */\n    --component-radio-dot-offset: var(--spacing-2x-small);\n    --component-radio-dot-size: var(--spacing-medium);\n    --component-radio-size: var(--sizing-2x-small);\n\n    /* select */\n    --component-select-z-index: 6000;\n\n    /* sidebar */\n    --component-sidebar-border-radius: var(--radii-small);\n    --component-sidebar-border-width: var(--border-x-thin);\n\n    /* slider */\n    --component-slider-border-radius-inner: var(--radii-small);\n    --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-slider-border-width: var(--border-x-thin);\n    --component-slider-padding: var(--spacing-x-small);\n    --component-slider-thumb-border-radius: var(--radii-x-small);\n\n    /* switch */\n    --component-switch-border-radius: var(--radii-full);\n    --component-switch-border-width: var(--border-x-thin);\n    --component-switch-padding: var(--spacing-2x-small);\n\n    /* tab */\n    --component-tab-border-radius-inner: var(--radii-x-small);\n    --component-tab-border-radius-outer: var(--radii-small);\n    --component-tab-border-width: var(--border-x-thin);\n    --component-tab-content-padding: var(--spacing-large);\n    --component-tab-gap-large: var(--spacing-large);\n    --component-tab-gap-medium: var(--spacing-small);\n    --component-tab-gap-small: var(--spacing-2x-small);\n    --component-tab-padding-large: var(--spacing-2x-large);\n    --component-tab-padding-medium: var(--spacing-large);\n    --component-tab-padding-small: var(--spacing-small);\n\n    /* table */\n    --component-table-border-radius: var(--radii-small);\n    --component-table-border-width: var(--border-x-thin);\n    --component-table-border-width-header: var(--border-thin);\n    --component-table-padding-large: var(--spacing-large);\n    --component-table-padding-medium: var(--spacing-medium);\n    --component-table-padding-small: var(--spacing-small);\n\n    /* tag */\n    --component-tag-border-radius-circle: var(--radii-full);\n    --component-tag-border-radius-square: var(--radii-small);\n    --component-tag-padding-large: var(--spacing-small);\n    --component-tag-padding-medium: var(--spacing-x-small);\n    --component-tag-padding-small: var(--spacing-2x-small);\n    --component-tag-height-large: 38px;\n    --component-tag-height-medium: 28px;\n    --component-tag-height-small: 22px;\n    --component-tag-size-large: var(--sizing-large);\n    --component-tag-size-medium: var(--sizing-medium);\n    --component-tag-size-small: var(--sizing-small);\n\n    /* toast */\n    --component-toast-border-radius: var(--radii-small);\n    --component-toast-offset: var(--spacing-x-large);\n    --component-toast-padding: var(--spacing-medium);\n    --component-toast-padding-h: var(--spacing-x-large);\n    --component-toast-z-index: 9000;\n\n    /* tooltip */\n    --component-tooltip-border-radius: var(--radii-small);\n    --component-tooltip-padding: var(--spacing-x-small);\n    --component-tooltip-padding-h: var(--spacing-medium);\n    --component-tooltip-z-index: 7000;\n}\n\n/* Default Theme (Blue Light) */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-inverse: var(--neutral-white);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-light-1);\n    --primary-background-component: var(--blue-light-0);\n    --primary-background-hover: var(--blue-light-2);\n    --primary-background-active: var(--blue-light-3);\n    --primary-background-border: var(--blue-light-4);\n    --primary-content--: var(--blue--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--blue-dark-7);\n    --primary-content-active: var(--blue-dark-6);\n    --secondary-background-app: var(--teal-light-1);\n    --secondary-background-component: var(--teal-light-0);\n    --secondary-background-hover: var(--teal-light-2);\n    --secondary-background-border: var(--teal-light-3);\n    --secondary-background-active: var(--teal-light-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-inverse: var(--neutral-black);\n    --secondary-content-hover: var(--teal-dark-7);\n    --secondary-content-active: var(--teal-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-appbar-border-width: var(--component-sidebar-border-width);\n    --component-appbar-border-radius: var(--component-sidebar-border-radius);\n    --component-appbar-inner-border-width: var(\n        --component-sidebar-border-width\n    );\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-dialog-shadow: var(--base-shadow);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --component-tabs-font-family: var(--font-family-body);\n    --component-slider-width: 129px;\n    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
 
 var blueLightCSS = "/* Themes - Blue Light */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-inverse: var(--neutral-white);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-light-1);\n    --primary-background-component: var(--blue-light-0);\n    --primary-background-hover: var(--blue-light-2);\n    --primary-background-active: var(--blue-light-3);\n    --primary-background-border: var(--blue-light-4);\n    --primary-content--: var(--blue--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--blue-dark-7);\n    --primary-content-active: var(--blue-dark-6);\n    --secondary-background-app: var(--teal-light-1);\n    --secondary-background-component: var(--teal-light-0);\n    --secondary-background-hover: var(--teal-light-2);\n    --secondary-background-border: var(--teal-light-3);\n    --secondary-background-active: var(--teal-light-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-inverse: var(--neutral-black);\n    --secondary-content-hover: var(--teal-dark-7);\n    --secondary-content-active: var(--teal-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-appbar-border-width: var(--component-sidebar-border-width);\n    --component-appbar-border-radius: var(--component-sidebar-border-radius);\n    --component-appbar-inner-border-width: var(\n        --component-sidebar-border-width\n    );\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-dialog-shadow: var(--base-shadow);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --component-tabs-font-family: var(--font-family-body);\n    --component-slider-width: 129px;\n    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
 

package/dist/index.js

@@ -1,4 +1,4 @@
-var variablesCSS = "/* Colors */\n:root {\n    --neutral--: #7f8286ff;\n    --neutral-white: #ffffffff;\n    --neutral-black: #000000ff;\n    --neutral-light-0: #f7f7faff;\n    --neutral-light-1: #f0f0f2ff;\n    --neutral-light-2: #dfe0e3ff;\n    --neutral-light-3: #cacbcfff;\n    --neutral-light-4: #bbbdc0ff;\n    --neutral-light-5: #acaeb2ff;\n    --neutral-light-6: #9d9fa3ff;\n    --neutral-light-7: #8e9195ff;\n    --neutral-dark-0: #0c0c0dff;\n    --neutral-dark-1: #151617ff;\n    --neutral-dark-2: #292a2bff;\n    --neutral-dark-3: #37383aff;\n    --neutral-dark-4: #46474aff;\n    --neutral-dark-5: #545659ff;\n    --neutral-dark-6: #626568ff;\n    --neutral-dark-7: #717377ff;\n    --neutral-black-translucent: #0000001f;\n    --neutral-white-translucent: #1111111f;\n    --red--: #b80421ff;\n    --red-light-0: #f2e6e8ff;\n    --red-light-1: #ebcacfff;\n    --red-light-2: #e4aeb6ff;\n    --red-light-3: #dc919dff;\n    --red-light-4: #d57585ff;\n    --red-light-5: #ce596cff;\n    --red-light-6: #c73d53ff;\n    --red-light-7: #bf203aff;\n    --red-dark-0: #0d0103ff;\n    --red-dark-1: #220107ff;\n    --red-dark-2: #38020bff;\n    --red-dark-3: #4d020eff;\n    --red-dark-4: #630312ff;\n    --red-dark-5: #780316ff;\n    --red-dark-6: #8d031aff;\n    --red-dark-7: #a3041dff;\n    --red-translucent: #b804211f;\n    --orange--: #d13704ff;\n    --orange-light-0: #f2e9e6ff;\n    --orange-light-1: #eed3caff;\n    --orange-light-2: #eabdaeff;\n    --orange-light-3: #e6a691ff;\n    --orange-light-4: #e29075ff;\n    --orange-light-5: #dd7a59ff;\n    --orange-light-6: #d9643dff;\n    --orange-light-7: #d54d20ff;\n    --orange-dark-0: #0d0300ff;\n    --orange-dark-1: #260a01ff;\n    --orange-dark-2: #3e1001ff;\n    --orange-dark-3: #571702ff;\n    --orange-dark-4: #6f1d02ff;\n    --orange-dark-5: #882403ff;\n    --orange-dark-6: #a02a03ff;\n    --orange-dark-7: #b93104ff;\n    --orange-translucent: #d137041f;\n    --amber--: #d16004ff;\n    --amber-light-0: #f2ece6ff;\n    --amber-light-1: #eedbcaff;\n    --amber-light-2: #eac9aeff;\n    --amber-light-3: #e6b891ff;\n    --amber-light-4: #e2a675ff;\n    --amber-light-5: #dd9559ff;\n    --amber-light-6: #d9833dff;\n    --amber-light-7: #d57220ff;\n    --amber-dark-0: #0d0c0cff;\n    --amber-dark-1: #26170bff;\n    --amber-dark-2: #3e210aff;\n    --amber-dark-3: #572c09ff;\n    --amber-dark-4: #6f3608ff;\n    --amber-dark-5: #884107ff;\n    --amber-dark-6: #a04b06ff;\n    --amber-dark-7: #b95605ff;\n    --amber-translucent: #d160041f;\n    --yellow--: #d17f04ff;\n    --yellow-light-0: #f2eadfff;\n    --yellow-light-1: #eeddc4ff;\n    --yellow-light-2: #eacfa8ff;\n    --yellow-light-3: #e6c28dff;\n    --yellow-light-4: #e2b572ff;\n    --yellow-light-5: #dda756ff;\n    --yellow-light-6: #d99a3bff;\n    --yellow-light-7: #d58c1fff;\n    --yellow-dark-0: #0d0c0cff;\n    --yellow-dark-1: #261a0bff;\n    --yellow-dark-2: #3e290aff;\n    --yellow-dark-3: #573709ff;\n    --yellow-dark-4: #6f4608ff;\n    --yellow-dark-5: #885407ff;\n    --yellow-dark-6: #a06206ff;\n    --yellow-dark-7: #b97105ff;\n    --yellow-translucent: #d17f041f;\n    --lime--: #cad104ff;\n    --lime-light-0: #f2f2dfff;\n    --lime-light-1: #edeec4ff;\n    --lime-light-2: #e8eaa8ff;\n    --lime-light-3: #e3e68dff;\n    --lime-light-4: #dee272ff;\n    --lime-light-5: #d9dd56ff;\n    --lime-light-6: #d4d93bff;\n    --lime-light-7: #cfd51fff;\n    --lime-dark-0: #0d0d0cff;\n    --lime-dark-1: #25260bff;\n    --lime-dark-2: #3c3e0aff;\n    --lime-dark-3: #545709ff;\n    --lime-dark-4: #6c6f08ff;\n    --lime-dark-5: #838807ff;\n    --lime-dark-6: #9ba006ff;\n    --lime-dark-7: #b2b905ff;\n    --lime-translucent: #cad1041f;\n    --green--: #2dba73ff;\n    --green-light-0: #e6f2ecff;\n    --green-light-1: #cfebddff;\n    --green-light-2: #b8e4ceff;\n    --green-light-3: #a1ddbfff;\n    --green-light-4: #8ad6b0ff;\n    --green-light-5: #72cfa0ff;\n    --green-light-6: #5bc891ff;\n    --green-light-7: #44c182ff;\n    --green-dark-0: #030d08ff;\n    --green-dark-1: #082315ff;\n    --green-dark-2: #0e3823ff;\n    --green-dark-3: #134e30ff;\n    --green-dark-4: #18643eff;\n    --green-dark-5: #1d794bff;\n    --green-dark-6: #238f58ff;\n    --green-dark-7: #28a466ff;\n    --green-translucent: #2dba731f;\n    --teal--: #04b8b8ff;\n    --teal-light-0: #f2fffeff;\n    --teal-light-1: #d4f6f5ff;\n    --teal-light-2: #b7ededff;\n    --teal-light-3: #99e4e4ff;\n    --teal-light-4: #7bdcdbff;\n    --teal-light-5: #5dd3d2ff;\n    --teal-light-6: #40cacaff;\n    --teal-light-7: #22c1c1ff;\n    --teal-dark-0: #0c0d0dff;\n    --teal-dark-1: #0b2624ff;\n    --teal-dark-2: #0a3e3cff;\n    --teal-dark-3: #095753ff;\n    --teal-dark-4: #086f6aff;\n    --teal-dark-5: #078881ff;\n    --teal-dark-6: #06a099ff;\n    --teal-dark-7: #05b9b0ff;\n    --teal-translucent: #04b8b81f;\n    --blue--: #0576ffff;\n    --blue-light-0: #ebf5ffff;\n    --blue-light-1: #cee5ffff;\n    --blue-light-2: #b2d5ffff;\n    --blue-light-3: #95c5ffff;\n    --blue-light-4: #78b6ffff;\n    --blue-light-5: #5ba6ffff;\n    --blue-light-6: #3f96ffff;\n    --blue-light-7: #2286ffff;\n    --blue-dark-0: #0c0c0dff;\n    --blue-dark-1: #0b192bff;\n    --blue-dark-2: #0a274aff;\n    --blue-dark-3: #093468ff;\n    --blue-dark-4: #094186ff;\n    --blue-dark-5: #084ea4ff;\n    --blue-dark-6: #075cc3ff;\n    --blue-dark-7: #0669e1ff;\n    --blue-translucent: #0576ff1f;\n    --indigo--: #5405ffff;\n    --indigo-light-0: #f6f2ffff;\n    --indigo-light-1: #e2d4ffff;\n    --indigo-light-2: #ceb7ffff;\n    --indigo-light-3: #b999ffff;\n    --indigo-light-4: #a57cffff;\n    --indigo-light-5: #915effff;\n    --indigo-light-6: #7d40ffff;\n    --indigo-light-7: #6823ffff;\n    --indigo-dark-0: #0d0c0cff;\n    --indigo-dark-1: #160b2aff;\n    --indigo-dark-2: #1f0a49ff;\n    --indigo-dark-3: #280967ff;\n    --indigo-dark-4: #310986ff;\n    --indigo-dark-5: #3908a4ff;\n    --indigo-dark-6: #4207c2ff;\n    --indigo-dark-7: #4b06e1ff;\n    --indigo-translucent: #5405ff1f;\n    --purple--: #8a05ffff;\n    --purple-light-0: #f9f2ffff;\n    --purple-light-1: #ebd4ffff;\n    --purple-light-2: #ddb7ffff;\n    --purple-light-3: #cf99ffff;\n    --purple-light-4: #c27cffff;\n    --purple-light-5: #b45effff;\n    --purple-light-6: #a640ffff;\n    --purple-light-7: #9823ffff;\n    --purple-dark-0: #0c0c0dff;\n    --purple-dark-1: #1c0b2bff;\n    --purple-dark-2: #2c0a4aff;\n    --purple-dark-3: #3b0968ff;\n    --purple-dark-4: #4b0986ff;\n    --purple-dark-5: #5b08a4ff;\n    --purple-dark-6: #6b07c3ff;\n    --purple-dark-7: #7a06e1ff;\n    --purple-translucent: #8a05ff1f;\n    --pink--: #ff05a8ff;\n    --pink-light-0: #f9f2ffff;\n    --pink-light-1: #fad4f4ff;\n    --pink-light-2: #fbb7e9ff;\n    --pink-light-3: #fb99deff;\n    --pink-light-4: #fc7cd4ff;\n    --pink-light-5: #fd5ec9ff;\n    --pink-light-6: #fe40beff;\n    --pink-light-7: #fe23b3ff;\n    --pink-dark-0: #0c0c0dff;\n    --pink-dark-1: #2a0b20ff;\n    --pink-dark-2: #490a34ff;\n    --pink-dark-3: #670947ff;\n    --pink-dark-4: #86095bff;\n    --pink-dark-5: #a4086eff;\n    --pink-dark-6: #c20781ff;\n    --pink-dark-7: #e10695ff;\n    --pink-translucent: #ff05a81f;\n    --brown--: #ab642eff;\n    --brown-light-0: #f2dfdfff;\n    --brown-light-1: #e9d0c9ff;\n    --brown-light-2: #e0c0b3ff;\n    --brown-light-3: #d7b19dff;\n    --brown-light-4: #cfa287ff;\n    --brown-light-5: #c69270ff;\n    --brown-light-6: #bd835aff;\n    --brown-light-7: #b47344ff;\n    --brown-dark-0: #0d0c0cff;\n    --brown-dark-1: #211710ff;\n    --brown-dark-2: #352215ff;\n    --brown-dark-3: #482d19ff;\n    --brown-dark-4: #5c381dff;\n    --brown-dark-5: #704321ff;\n    --brown-dark-6: #844e26ff;\n    --brown-dark-7: #97592aff;\n    --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n    --border-none: 0px;\n    --border-x-thin: 1px;\n    --border-thin: 2px;\n    --border-medium: 4px;\n    --border-thick: 8px;\n    --border-x-thick: 10px;\n    --spacing-none: 0px;\n    --spacing-4x-small: 1px;\n    --spacing-2x-small: 2px;\n    --spacing-x-small: 4px;\n    --spacing-small: 6px;\n    --spacing-medium: 8px;\n    --spacing-large: 12px;\n    --spacing-x-large: 16px;\n    --spacing-2x-large: 24px;\n    --spacing-4x-large: 32px;\n    --font-size-display-1: 6em;\n    --font-size-display-2: 5.5em;\n    --font-size-display-3: 4.5em;\n    --font-size-display-4: 3.5em;\n    --font-size-h1: 2em;\n    --font-size-h2: 1.5em;\n    --font-size-h3: 1.17em;\n    --font-size-h4: 1em;\n    --font-size-h5: 0.83em;\n    --font-size-paragraph: 1em;\n    --font-size-small: 0.8em;\n    --font-size-label: 0.83em;\n    --font-size-button: 1em;\n    --font-size-quote: 1.17em;\n    --radii-none: 0px;\n    --radii-x-small: 0.125em;\n    --radii-small: 0.25em;\n    --radii-medium: 0.375em;\n    --radii-large: 0.5px;\n    --radii-x-large: 1em;\n    --radii-full: 9999px;\n    --sizing-2x-small: 16px;\n    --sizing-x-small: 19px;\n    --sizing-small: 32px;\n    --sizing-medium: 40px;\n    --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n    /* appbar */\n    --component-appbar-collapsed-width: 48px;\n    --component-appbar-padding: var(--spacing-medium);\n    --component-appbar-width: 240px;\n    --component-appbar-z-index: 100;\n\n    /* avatar */\n    --component-avatar-border-radius-circle: var(--radii-full);\n    --component-avatar-border-radius-square: var(--radii-small);\n    --component-avatar-size-large: var(--sizing-large);\n    --component-avatar-size-medium: var(--sizing-medium);\n    --component-avatar-size-small: var(--sizing-small);\n\n    /* badge */\n    --component-badge-border-radius-circle: var(--radii-full);\n    --component-badge-border-radius-square: var(--radii-small);\n    --component-badge-padding-large: var(--spacing-small);\n    --component-badge-padding-medium: var(--spacing-x-small);\n    --component-badge-padding-small: var(--spacing-2x-small);\n    --component-badge-size-large: var(--sizing-medium);\n    --component-badge-size-medium: var(--sizing-small);\n    --component-badge-size-small: var(--sizing-2x-small);\n\n    /* button */\n    --component-button-border-radius-inner: var(--radii-x-small);\n    --component-button-border-radius-outer: var(--radii-small);\n    --component-button-border-width: var(--border-thin);\n    --component-button-border-width-2: var(--border-x-thin);\n    --component-button-padding-large: var(--spacing-x-large);\n    --component-button-padding-medium: var(--spacing-medium);\n    --component-button-padding-small: var(--spacing-x-small);\n\n    /* card */\n    --component-card-border-radius-inner: var(--radii-small);\n    --component-card-border-radius-outer: var(--radii-medium);\n    --component-card-border-width: var(--border-x-thin);\n    --component-card-inner-border-width: var(--border-x-thin);\n    --component-card-padding-inner: var(--spacing-medium);\n    --component-card-padding-outer: var(--spacing-x-large);\n\n    /* checkbox */\n    --component-checkbox-icon-size: var(--sizing-2x-small);\n    --component-checkbox-size: var(--sizing-x-small);\n\n    /* dialog */\n    --component-dialog-border-radius-inner: var(--radii-x-small);\n    --component-dialog-border-radius-outer: var(--radii-small);\n    --component-dialog-border-width: var(--border-x-thin);\n    --component-dialog-inner-border-width: var(--border-x-thin);\n    --component-dialog-padding: var(--spacing-medium);\n    --component-dialog-z-index: 1000;\n\n    /* drawer */\n    --component-drawer-border-radius: var(--radii-small);\n    --component-drawer-border-width: var(--border-x-thin);\n    --component-drawer-handle-padding: var(--spacing-x-small);\n    --component-drawer-handle-width: var(--spacing-x-small);\n    --component-drawer-padding: var(--spacing-medium);\n    --component-drawer-z-index: 5000;\n\n    /* icon */\n    --component-icon-size-large: var(--spacing-4x-large);\n    --component-icon-size-medium: var(--spacing-2x-large);\n    --component-icon-size-small: var(--spacing-x-large);\n\n    /* inputs */\n    --component-inputs-border-radius-inner: var(--radii-x-small);\n    --component-inputs-border-radius-outer: var(--radii-small);\n    --component-inputs-border-width: var(--border-thin);\n    --component-inputs-padding-large: var(--spacing-x-large);\n    --component-inputs-padding-medium: var(--spacing-medium);\n    --component-inputs-padding-small: var(--spacing-x-small);\n\n    /* menu */\n    --component-menu-border-radius: var(--radii-x-small);\n    --component-menu-border-width: var(--border-x-thin);\n    --component-menu-padding-horizontal: var(--spacing-small);\n    --component-menu-padding-vertical: var(--spacing-x-small);\n    --component-menu-z-index: 1001;\n\n    /* panelbar */\n    --component-panelbar-border-radius: var(--radii-x-small);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-indent: var(--spacing-x-large);\n    --component-panelbar-padding: var(--spacing-medium);\n\n    /* progress */\n    --component-progress-border-radius-inner: var(--radii-small);\n    --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-progress-border-width: var(--border-x-thin);\n    --component-progress-padding: var(--spacing-x-small);\n    --component-progress-size-large: var(--sizing-large);\n    --component-progress-size-medium: var(--sizing-medium);\n    --component-progress-size-small: var(--sizing-small);\n\n    /* radio */\n    --component-radio-dot-offset: var(--spacing-2x-small);\n    --component-radio-dot-size: var(--spacing-medium);\n    --component-radio-size: var(--sizing-2x-small);\n\n    /* select */\n    --component-select-z-index: 6000;\n\n    /* sidebar */\n    --component-sidebar-border-radius: var(--radii-small);\n    --component-sidebar-border-width: var(--border-x-thin);\n\n    /* slider */\n    --component-slider-border-radius-inner: var(--radii-small);\n    --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-slider-border-width: var(--border-x-thin);\n    --component-slider-padding: var(--spacing-x-small);\n    --component-slider-thumb-border-radius: var(--radii-x-small);\n\n    /* switch */\n    --component-switch-border-radius: var(--radii-full);\n    --component-switch-border-width: var(--border-x-thin);\n    --component-switch-padding: var(--spacing-2x-small);\n\n    /* tab */\n    --component-tab-border-radius-inner: var(--radii-x-small);\n    --component-tab-border-radius-outer: var(--radii-small);\n    --component-tab-border-width: var(--border-x-thin);\n    --component-tab-content-padding: var(--spacing-large);\n    --component-tab-gap-large: var(--spacing-large);\n    --component-tab-gap-medium: var(--spacing-small);\n    --component-tab-gap-small: var(--spacing-2x-small);\n    --component-tab-padding-large: var(--spacing-2x-large);\n    --component-tab-padding-medium: var(--spacing-large);\n    --component-tab-padding-small: var(--spacing-small);\n\n    /* table */\n    --component-table-border-radius: var(--radii-small);\n    --component-table-border-width: var(--border-x-thin);\n    --component-table-border-width-header: var(--border-thin);\n    --component-table-padding-large: var(--spacing-large);\n    --component-table-padding-medium: var(--spacing-medium);\n    --component-table-padding-small: var(--spacing-small);\n\n    /* tag */\n    --component-tag-border-radius-circle: var(--radii-full);\n    --component-tag-border-radius-square: var(--radii-small);\n    --component-tag-padding-large: var(--spacing-small);\n    --component-tag-padding-medium: var(--spacing-x-small);\n    --component-tag-padding-small: var(--spacing-2x-small);\n    --component-tag-size-large: var(--sizing-large);\n    --component-tag-size-medium: var(--sizing-medium);\n    --component-tag-size-small: var(--sizing-small);\n\n    /* toast */\n    --component-toast-border-radius: var(--radii-small);\n    --component-toast-offset: var(--spacing-x-large);\n    --component-toast-padding: var(--spacing-medium);\n    --component-toast-padding-h: var(--spacing-x-large);\n    --component-toast-z-index: 9000;\n\n    /* tooltip */\n    --component-tooltip-border-radius: var(--radii-small);\n    --component-tooltip-padding: var(--spacing-x-small);\n    --component-tooltip-padding-h: var(--spacing-medium);\n    --component-tooltip-z-index: 7000;\n}\n\n/* Default Theme (Blue Light) */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-inverse: var(--neutral-white);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-light-1);\n    --primary-background-component: var(--blue-light-0);\n    --primary-background-hover: var(--blue-light-2);\n    --primary-background-active: var(--blue-light-3);\n    --primary-background-border: var(--blue-light-4);\n    --primary-content--: var(--blue--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--blue-dark-7);\n    --primary-content-active: var(--blue-dark-6);\n    --secondary-background-app: var(--teal-light-1);\n    --secondary-background-component: var(--teal-light-0);\n    --secondary-background-hover: var(--teal-light-2);\n    --secondary-background-border: var(--teal-light-3);\n    --secondary-background-active: var(--teal-light-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-inverse: var(--neutral-black);\n    --secondary-content-hover: var(--teal-dark-7);\n    --secondary-content-active: var(--teal-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-appbar-border-width: var(--component-sidebar-border-width);\n    --component-appbar-border-radius: var(--component-sidebar-border-radius);\n    --component-appbar-inner-border-width: var(\n        --component-sidebar-border-width\n    );\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-dialog-shadow: var(--base-shadow);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --component-tabs-font-family: var(--font-family-body);\n    --component-slider-width: 129px;\n    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
+var variablesCSS = "/* Colors */\n:root {\n    --neutral--: #7f8286ff;\n    --neutral-white: #ffffffff;\n    --neutral-black: #000000ff;\n    --neutral-light-0: #f7f7faff;\n    --neutral-light-1: #f0f0f2ff;\n    --neutral-light-2: #dfe0e3ff;\n    --neutral-light-3: #cacbcfff;\n    --neutral-light-4: #bbbdc0ff;\n    --neutral-light-5: #acaeb2ff;\n    --neutral-light-6: #9d9fa3ff;\n    --neutral-light-7: #8e9195ff;\n    --neutral-dark-0: #0c0c0dff;\n    --neutral-dark-1: #151617ff;\n    --neutral-dark-2: #292a2bff;\n    --neutral-dark-3: #37383aff;\n    --neutral-dark-4: #46474aff;\n    --neutral-dark-5: #545659ff;\n    --neutral-dark-6: #626568ff;\n    --neutral-dark-7: #717377ff;\n    --neutral-black-translucent: #0000001f;\n    --neutral-white-translucent: #1111111f;\n    --red--: #b80421ff;\n    --red-light-0: #f2e6e8ff;\n    --red-light-1: #ebcacfff;\n    --red-light-2: #e4aeb6ff;\n    --red-light-3: #dc919dff;\n    --red-light-4: #d57585ff;\n    --red-light-5: #ce596cff;\n    --red-light-6: #c73d53ff;\n    --red-light-7: #bf203aff;\n    --red-dark-0: #0d0103ff;\n    --red-dark-1: #220107ff;\n    --red-dark-2: #38020bff;\n    --red-dark-3: #4d020eff;\n    --red-dark-4: #630312ff;\n    --red-dark-5: #780316ff;\n    --red-dark-6: #8d031aff;\n    --red-dark-7: #a3041dff;\n    --red-translucent: #b804211f;\n    --orange--: #d13704ff;\n    --orange-light-0: #f2e9e6ff;\n    --orange-light-1: #eed3caff;\n    --orange-light-2: #eabdaeff;\n    --orange-light-3: #e6a691ff;\n    --orange-light-4: #e29075ff;\n    --orange-light-5: #dd7a59ff;\n    --orange-light-6: #d9643dff;\n    --orange-light-7: #d54d20ff;\n    --orange-dark-0: #0d0300ff;\n    --orange-dark-1: #260a01ff;\n    --orange-dark-2: #3e1001ff;\n    --orange-dark-3: #571702ff;\n    --orange-dark-4: #6f1d02ff;\n    --orange-dark-5: #882403ff;\n    --orange-dark-6: #a02a03ff;\n    --orange-dark-7: #b93104ff;\n    --orange-translucent: #d137041f;\n    --amber--: #d16004ff;\n    --amber-light-0: #f2ece6ff;\n    --amber-light-1: #eedbcaff;\n    --amber-light-2: #eac9aeff;\n    --amber-light-3: #e6b891ff;\n    --amber-light-4: #e2a675ff;\n    --amber-light-5: #dd9559ff;\n    --amber-light-6: #d9833dff;\n    --amber-light-7: #d57220ff;\n    --amber-dark-0: #0d0c0cff;\n    --amber-dark-1: #26170bff;\n    --amber-dark-2: #3e210aff;\n    --amber-dark-3: #572c09ff;\n    --amber-dark-4: #6f3608ff;\n    --amber-dark-5: #884107ff;\n    --amber-dark-6: #a04b06ff;\n    --amber-dark-7: #b95605ff;\n    --amber-translucent: #d160041f;\n    --yellow--: #d17f04ff;\n    --yellow-light-0: #f2eadfff;\n    --yellow-light-1: #eeddc4ff;\n    --yellow-light-2: #eacfa8ff;\n    --yellow-light-3: #e6c28dff;\n    --yellow-light-4: #e2b572ff;\n    --yellow-light-5: #dda756ff;\n    --yellow-light-6: #d99a3bff;\n    --yellow-light-7: #d58c1fff;\n    --yellow-dark-0: #0d0c0cff;\n    --yellow-dark-1: #261a0bff;\n    --yellow-dark-2: #3e290aff;\n    --yellow-dark-3: #573709ff;\n    --yellow-dark-4: #6f4608ff;\n    --yellow-dark-5: #885407ff;\n    --yellow-dark-6: #a06206ff;\n    --yellow-dark-7: #b97105ff;\n    --yellow-translucent: #d17f041f;\n    --lime--: #cad104ff;\n    --lime-light-0: #f2f2dfff;\n    --lime-light-1: #edeec4ff;\n    --lime-light-2: #e8eaa8ff;\n    --lime-light-3: #e3e68dff;\n    --lime-light-4: #dee272ff;\n    --lime-light-5: #d9dd56ff;\n    --lime-light-6: #d4d93bff;\n    --lime-light-7: #cfd51fff;\n    --lime-dark-0: #0d0d0cff;\n    --lime-dark-1: #25260bff;\n    --lime-dark-2: #3c3e0aff;\n    --lime-dark-3: #545709ff;\n    --lime-dark-4: #6c6f08ff;\n    --lime-dark-5: #838807ff;\n    --lime-dark-6: #9ba006ff;\n    --lime-dark-7: #b2b905ff;\n    --lime-translucent: #cad1041f;\n    --green--: #2dba73ff;\n    --green-light-0: #e6f2ecff;\n    --green-light-1: #cfebddff;\n    --green-light-2: #b8e4ceff;\n    --green-light-3: #a1ddbfff;\n    --green-light-4: #8ad6b0ff;\n    --green-light-5: #72cfa0ff;\n    --green-light-6: #5bc891ff;\n    --green-light-7: #44c182ff;\n    --green-dark-0: #030d08ff;\n    --green-dark-1: #082315ff;\n    --green-dark-2: #0e3823ff;\n    --green-dark-3: #134e30ff;\n    --green-dark-4: #18643eff;\n    --green-dark-5: #1d794bff;\n    --green-dark-6: #238f58ff;\n    --green-dark-7: #28a466ff;\n    --green-translucent: #2dba731f;\n    --teal--: #04b8b8ff;\n    --teal-light-0: #f2fffeff;\n    --teal-light-1: #d4f6f5ff;\n    --teal-light-2: #b7ededff;\n    --teal-light-3: #99e4e4ff;\n    --teal-light-4: #7bdcdbff;\n    --teal-light-5: #5dd3d2ff;\n    --teal-light-6: #40cacaff;\n    --teal-light-7: #22c1c1ff;\n    --teal-dark-0: #0c0d0dff;\n    --teal-dark-1: #0b2624ff;\n    --teal-dark-2: #0a3e3cff;\n    --teal-dark-3: #095753ff;\n    --teal-dark-4: #086f6aff;\n    --teal-dark-5: #078881ff;\n    --teal-dark-6: #06a099ff;\n    --teal-dark-7: #05b9b0ff;\n    --teal-translucent: #04b8b81f;\n    --blue--: #0576ffff;\n    --blue-light-0: #ebf5ffff;\n    --blue-light-1: #cee5ffff;\n    --blue-light-2: #b2d5ffff;\n    --blue-light-3: #95c5ffff;\n    --blue-light-4: #78b6ffff;\n    --blue-light-5: #5ba6ffff;\n    --blue-light-6: #3f96ffff;\n    --blue-light-7: #2286ffff;\n    --blue-dark-0: #0c0c0dff;\n    --blue-dark-1: #0b192bff;\n    --blue-dark-2: #0a274aff;\n    --blue-dark-3: #093468ff;\n    --blue-dark-4: #094186ff;\n    --blue-dark-5: #084ea4ff;\n    --blue-dark-6: #075cc3ff;\n    --blue-dark-7: #0669e1ff;\n    --blue-translucent: #0576ff1f;\n    --indigo--: #5405ffff;\n    --indigo-light-0: #f6f2ffff;\n    --indigo-light-1: #e2d4ffff;\n    --indigo-light-2: #ceb7ffff;\n    --indigo-light-3: #b999ffff;\n    --indigo-light-4: #a57cffff;\n    --indigo-light-5: #915effff;\n    --indigo-light-6: #7d40ffff;\n    --indigo-light-7: #6823ffff;\n    --indigo-dark-0: #0d0c0cff;\n    --indigo-dark-1: #160b2aff;\n    --indigo-dark-2: #1f0a49ff;\n    --indigo-dark-3: #280967ff;\n    --indigo-dark-4: #310986ff;\n    --indigo-dark-5: #3908a4ff;\n    --indigo-dark-6: #4207c2ff;\n    --indigo-dark-7: #4b06e1ff;\n    --indigo-translucent: #5405ff1f;\n    --purple--: #8a05ffff;\n    --purple-light-0: #f9f2ffff;\n    --purple-light-1: #ebd4ffff;\n    --purple-light-2: #ddb7ffff;\n    --purple-light-3: #cf99ffff;\n    --purple-light-4: #c27cffff;\n    --purple-light-5: #b45effff;\n    --purple-light-6: #a640ffff;\n    --purple-light-7: #9823ffff;\n    --purple-dark-0: #0c0c0dff;\n    --purple-dark-1: #1c0b2bff;\n    --purple-dark-2: #2c0a4aff;\n    --purple-dark-3: #3b0968ff;\n    --purple-dark-4: #4b0986ff;\n    --purple-dark-5: #5b08a4ff;\n    --purple-dark-6: #6b07c3ff;\n    --purple-dark-7: #7a06e1ff;\n    --purple-translucent: #8a05ff1f;\n    --pink--: #ff05a8ff;\n    --pink-light-0: #f9f2ffff;\n    --pink-light-1: #fad4f4ff;\n    --pink-light-2: #fbb7e9ff;\n    --pink-light-3: #fb99deff;\n    --pink-light-4: #fc7cd4ff;\n    --pink-light-5: #fd5ec9ff;\n    --pink-light-6: #fe40beff;\n    --pink-light-7: #fe23b3ff;\n    --pink-dark-0: #0c0c0dff;\n    --pink-dark-1: #2a0b20ff;\n    --pink-dark-2: #490a34ff;\n    --pink-dark-3: #670947ff;\n    --pink-dark-4: #86095bff;\n    --pink-dark-5: #a4086eff;\n    --pink-dark-6: #c20781ff;\n    --pink-dark-7: #e10695ff;\n    --pink-translucent: #ff05a81f;\n    --brown--: #ab642eff;\n    --brown-light-0: #f2dfdfff;\n    --brown-light-1: #e9d0c9ff;\n    --brown-light-2: #e0c0b3ff;\n    --brown-light-3: #d7b19dff;\n    --brown-light-4: #cfa287ff;\n    --brown-light-5: #c69270ff;\n    --brown-light-6: #bd835aff;\n    --brown-light-7: #b47344ff;\n    --brown-dark-0: #0d0c0cff;\n    --brown-dark-1: #211710ff;\n    --brown-dark-2: #352215ff;\n    --brown-dark-3: #482d19ff;\n    --brown-dark-4: #5c381dff;\n    --brown-dark-5: #704321ff;\n    --brown-dark-6: #844e26ff;\n    --brown-dark-7: #97592aff;\n    --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n    --border-none: 0px;\n    --border-x-thin: 1px;\n    --border-thin: 2px;\n    --border-medium: 4px;\n    --border-thick: 8px;\n    --border-x-thick: 10px;\n    --spacing-none: 0px;\n    --spacing-4x-small: 1px;\n    --spacing-2x-small: 2px;\n    --spacing-x-small: 4px;\n    --spacing-small: 6px;\n    --spacing-medium: 8px;\n    --spacing-large: 12px;\n    --spacing-x-large: 16px;\n    --spacing-2x-large: 24px;\n    --spacing-4x-large: 32px;\n    --font-size-display-1: 6em;\n    --font-size-display-2: 5.5em;\n    --font-size-display-3: 4.5em;\n    --font-size-display-4: 3.5em;\n    --font-size-h1: 2em;\n    --font-size-h2: 1.5em;\n    --font-size-h3: 1.17em;\n    --font-size-h4: 1em;\n    --font-size-h5: 0.83em;\n    --font-size-paragraph: 1em;\n    --font-size-small: 0.8em;\n    --font-size-label: 0.83em;\n    --font-size-button: 1em;\n    --font-size-quote: 1.17em;\n    --radii-none: 0px;\n    --radii-x-small: 0.125em;\n    --radii-small: 0.25em;\n    --radii-medium: 0.375em;\n    --radii-large: 0.5px;\n    --radii-x-large: 1em;\n    --radii-full: 9999px;\n    --sizing-2x-small: 16px;\n    --sizing-x-small: 19px;\n    --sizing-small: 32px;\n    --sizing-medium: 40px;\n    --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n    /* appbar */\n    --component-appbar-collapsed-width: 48px;\n    --component-appbar-padding: var(--spacing-medium);\n    --component-appbar-width: 240px;\n    --component-appbar-z-index: 100;\n\n    /* avatar */\n    --component-avatar-border-radius-circle: var(--radii-full);\n    --component-avatar-border-radius-square: var(--radii-small);\n    --component-avatar-size-large: var(--sizing-large);\n    --component-avatar-size-medium: var(--sizing-medium);\n    --component-avatar-size-small: var(--sizing-small);\n\n    /* badge */\n    --component-badge-border-radius-circle: var(--radii-full);\n    --component-badge-border-radius-square: var(--radii-small);\n    --component-badge-padding-large: var(--spacing-small);\n    --component-badge-padding-medium: var(--spacing-x-small);\n    --component-badge-padding-small: var(--spacing-2x-small);\n    --component-badge-size-large: var(--sizing-medium);\n    --component-badge-size-medium: var(--sizing-small);\n    --component-badge-size-small: var(--sizing-2x-small);\n\n    /* button */\n    --component-button-border-radius-inner: var(--radii-x-small);\n    --component-button-border-radius-outer: var(--radii-small);\n    --component-button-border-width: var(--border-thin);\n    --component-button-border-width-2: var(--border-x-thin);\n    --component-button-padding-large: var(--spacing-x-large);\n    --component-button-padding-medium: var(--spacing-medium);\n    --component-button-padding-small: var(--spacing-x-small);\n\n    /* card */\n    --component-card-border-radius-inner: var(--radii-small);\n    --component-card-border-radius-outer: var(--radii-medium);\n    --component-card-border-width: var(--border-x-thin);\n    --component-card-inner-border-width: var(--border-x-thin);\n    --component-card-padding-inner: var(--spacing-medium);\n    --component-card-padding-outer: var(--spacing-x-large);\n\n    /* checkbox */\n    --component-checkbox-icon-size: var(--sizing-2x-small);\n    --component-checkbox-size: var(--sizing-x-small);\n\n    /* dialog */\n    --component-dialog-border-radius-inner: var(--radii-x-small);\n    --component-dialog-border-radius-outer: var(--radii-small);\n    --component-dialog-border-width: var(--border-x-thin);\n    --component-dialog-inner-border-width: var(--border-x-thin);\n    --component-dialog-padding: var(--spacing-medium);\n    --component-dialog-z-index: 1000;\n\n    /* drawer */\n    --component-drawer-border-radius: var(--radii-small);\n    --component-drawer-border-width: var(--border-x-thin);\n    --component-drawer-handle-padding: var(--spacing-x-small);\n    --component-drawer-handle-width: var(--spacing-x-small);\n    --component-drawer-padding: var(--spacing-medium);\n    --component-drawer-z-index: 5000;\n\n    /* icon */\n    --component-icon-size-large: var(--spacing-4x-large);\n    --component-icon-size-medium: var(--spacing-2x-large);\n    --component-icon-size-small: var(--spacing-x-large);\n\n    /* inputs */\n    --component-inputs-border-radius-inner: var(--radii-x-small);\n    --component-inputs-border-radius-outer: var(--radii-small);\n    --component-inputs-border-width: var(--border-thin);\n    --component-inputs-padding-large: var(--spacing-x-large);\n    --component-inputs-padding-medium: var(--spacing-medium);\n    --component-inputs-padding-small: var(--spacing-x-small);\n\n    /* menu */\n    --component-menu-border-radius: var(--radii-x-small);\n    --component-menu-border-width: var(--border-x-thin);\n    --component-menu-padding-horizontal: var(--spacing-small);\n    --component-menu-padding-vertical: var(--spacing-x-small);\n    --component-menu-z-index: 1001;\n\n    /* panelbar */\n    --component-panelbar-border-radius: var(--radii-x-small);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-indent: var(--spacing-x-large);\n    --component-panelbar-padding: var(--spacing-medium);\n\n    /* progress */\n    --component-progress-border-radius-inner: var(--radii-small);\n    --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-progress-border-width: var(--border-x-thin);\n    --component-progress-padding: var(--spacing-x-small);\n    --component-progress-size-large: var(--sizing-large);\n    --component-progress-size-medium: var(--sizing-medium);\n    --component-progress-size-small: var(--sizing-small);\n\n    /* radio */\n    --component-radio-dot-offset: var(--spacing-2x-small);\n    --component-radio-dot-size: var(--spacing-medium);\n    --component-radio-size: var(--sizing-2x-small);\n\n    /* select */\n    --component-select-z-index: 6000;\n\n    /* sidebar */\n    --component-sidebar-border-radius: var(--radii-small);\n    --component-sidebar-border-width: var(--border-x-thin);\n\n    /* slider */\n    --component-slider-border-radius-inner: var(--radii-small);\n    --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-slider-border-width: var(--border-x-thin);\n    --component-slider-padding: var(--spacing-x-small);\n    --component-slider-thumb-border-radius: var(--radii-x-small);\n\n    /* switch */\n    --component-switch-border-radius: var(--radii-full);\n    --component-switch-border-width: var(--border-x-thin);\n    --component-switch-padding: var(--spacing-2x-small);\n\n    /* tab */\n    --component-tab-border-radius-inner: var(--radii-x-small);\n    --component-tab-border-radius-outer: var(--radii-small);\n    --component-tab-border-width: var(--border-x-thin);\n    --component-tab-content-padding: var(--spacing-large);\n    --component-tab-gap-large: var(--spacing-large);\n    --component-tab-gap-medium: var(--spacing-small);\n    --component-tab-gap-small: var(--spacing-2x-small);\n    --component-tab-padding-large: var(--spacing-2x-large);\n    --component-tab-padding-medium: var(--spacing-large);\n    --component-tab-padding-small: var(--spacing-small);\n\n    /* table */\n    --component-table-border-radius: var(--radii-small);\n    --component-table-border-width: var(--border-x-thin);\n    --component-table-border-width-header: var(--border-thin);\n    --component-table-padding-large: var(--spacing-large);\n    --component-table-padding-medium: var(--spacing-medium);\n    --component-table-padding-small: var(--spacing-small);\n\n    /* tag */\n    --component-tag-border-radius-circle: var(--radii-full);\n    --component-tag-border-radius-square: var(--radii-small);\n    --component-tag-padding-large: var(--spacing-small);\n    --component-tag-padding-medium: var(--spacing-x-small);\n    --component-tag-padding-small: var(--spacing-2x-small);\n    --component-tag-height-large: 38px;\n    --component-tag-height-medium: 28px;\n    --component-tag-height-small: 22px;\n    --component-tag-size-large: var(--sizing-large);\n    --component-tag-size-medium: var(--sizing-medium);\n    --component-tag-size-small: var(--sizing-small);\n\n    /* toast */\n    --component-toast-border-radius: var(--radii-small);\n    --component-toast-offset: var(--spacing-x-large);\n    --component-toast-padding: var(--spacing-medium);\n    --component-toast-padding-h: var(--spacing-x-large);\n    --component-toast-z-index: 9000;\n\n    /* tooltip */\n    --component-tooltip-border-radius: var(--radii-small);\n    --component-tooltip-padding: var(--spacing-x-small);\n    --component-tooltip-padding-h: var(--spacing-medium);\n    --component-tooltip-z-index: 7000;\n}\n\n/* Default Theme (Blue Light) */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-inverse: var(--neutral-white);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-light-1);\n    --primary-background-component: var(--blue-light-0);\n    --primary-background-hover: var(--blue-light-2);\n    --primary-background-active: var(--blue-light-3);\n    --primary-background-border: var(--blue-light-4);\n    --primary-content--: var(--blue--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--blue-dark-7);\n    --primary-content-active: var(--blue-dark-6);\n    --secondary-background-app: var(--teal-light-1);\n    --secondary-background-component: var(--teal-light-0);\n    --secondary-background-hover: var(--teal-light-2);\n    --secondary-background-border: var(--teal-light-3);\n    --secondary-background-active: var(--teal-light-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-inverse: var(--neutral-black);\n    --secondary-content-hover: var(--teal-dark-7);\n    --secondary-content-active: var(--teal-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-appbar-border-width: var(--component-sidebar-border-width);\n    --component-appbar-border-radius: var(--component-sidebar-border-radius);\n    --component-appbar-inner-border-width: var(\n        --component-sidebar-border-width\n    );\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-dialog-shadow: var(--base-shadow);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --component-tabs-font-family: var(--font-family-body);\n    --component-slider-width: 129px;\n    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
 
 /**
  * Icon registry — a runtime map of icon names to SVG markup strings.
@@ -1496,18 +1496,21 @@ class YumeAppbar extends HTMLElement {
                 collapsedWidth: "40px",
                 bodyGap: "2px",
                 buttonSize: "small",
+                iconSize: "small",
             },
             medium: {
                 padding: "var(--spacing-small, 6px)",
                 collapsedWidth: "52px",
                 bodyGap: "3px",
                 buttonSize: "medium",
+                iconSize: "medium",
             },
             large: {
                 padding: "var(--spacing-medium, 8px)",
                 collapsedWidth: "64px",
                 bodyGap: "4px",
                 buttonSize: "large",
+                iconSize: "large",
             },
         };
         const cfg = sizeConfig[size] || sizeConfig.medium;
@@ -1622,7 +1625,7 @@ class YumeAppbar extends HTMLElement {
 
             .appbar.vertical .appbar-header {
                 border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
-                padding-bottom: var(--_appbar-padding);
+                padding: var(--_appbar-padding);
                 margin-bottom: var(--_appbar-padding);
             }
             .appbar.vertical .appbar-footer {
@@ -1633,7 +1636,7 @@ class YumeAppbar extends HTMLElement {
 
             .appbar.horizontal .appbar-header {
                 border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
-                padding-right: var(--_appbar-padding);
+                padding: var(--_appbar-padding);
                 margin-right: var(--_appbar-padding);
             }
             .appbar.horizontal .appbar-footer {
@@ -1785,7 +1788,10 @@ class YumeAppbar extends HTMLElement {
         titleWrapper.appendChild(titleSlot);
         headerContent.appendChild(titleWrapper);
 
+        const headerSlot = document.createElement("slot");
+        headerSlot.name = "header";
         header.appendChild(headerContent);
+        header.appendChild(headerSlot);
         bar.appendChild(header);
 
         /* --- Body: y-button nav items --- */
@@ -1811,13 +1817,15 @@ class YumeAppbar extends HTMLElement {
                 if (item.icon.trim().startsWith("<")) {
                     const iconEl = document.createElement("span");
                     iconEl.slot = "left-icon";
+                    iconEl.setAttribute("part", "icon");
                     iconEl.innerHTML = item.icon;
                     btn.appendChild(iconEl);
                 } else {
                     const iconEl = document.createElement("y-icon");
                     iconEl.slot = "left-icon";
+                    iconEl.setAttribute("part", "icon");
                     iconEl.setAttribute("name", item.icon);
-                    iconEl.setAttribute("size", "small");
+                    iconEl.setAttribute("size", cfg.iconSize);
                     btn.appendChild(iconEl);
                 }
             }
@@ -1840,7 +1848,14 @@ class YumeAppbar extends HTMLElement {
                 });
             }
 
-            wrapper.appendChild(btn);
+            if (item.slot) {
+                const slot = document.createElement("slot");
+                slot.name = item.slot;
+                slot.appendChild(btn);
+                wrapper.appendChild(slot);
+            } else {
+                wrapper.appendChild(btn);
+            }
 
             if (hasChildren) {
                 const menu = document.createElement("y-menu");
@@ -5944,7 +5959,7 @@ if (!customElements.get("y-table")) {
 
 class YumeTag extends HTMLElement {
     static get observedAttributes() {
-        return ["removable", "color", "style-type", "shape"];
+        return ["removable", "color", "style-type", "shape", "size"];
     }
 
     constructor() {
@@ -5966,9 +5981,10 @@ class YumeTag extends HTMLElement {
         const color = this.getAttribute("color") || "base";
         const styleType = this.getAttribute("style-type") || "filled";
         const shape = this.getAttribute("shape") || "square";
+        const size = this.getAttribute("size") || "medium";
 
         const style = document.createElement("style");
-        style.textContent = this.getStyle(color, styleType, shape);
+        style.textContent = this.getStyle(color, styleType, shape, size);
 
         this.shadowRoot.innerHTML = "";
         this.shadowRoot.appendChild(style);
@@ -6002,7 +6018,7 @@ class YumeTag extends HTMLElement {
         }
     }
 
-    getStyle(color, styleType, shape) {
+    getStyle(color, styleType, shape, size) {
         const vars = {
             primary: [
                 "--primary-content--",
@@ -6055,20 +6071,44 @@ class YumeTag extends HTMLElement {
                 ? "var(--component-tag-border-radius-circle)"
                 : "var(--component-tag-border-radius-square)";
 
+        const sizeConfig = {
+            small: {
+                height: "var(--component-tag-height-small, 22px)",
+                padding:
+                    "var(--component-tag-padding-small, var(--spacing-2x-small))",
+                fontSize: "var(--font-size-small, 0.8em)",
+            },
+            medium: {
+                height: "var(--component-tag-height-medium, 28px)",
+                padding:
+                    "var(--component-tag-padding-medium, var(--spacing-x-small))",
+                fontSize: "var(--font-size-label, 0.83em)",
+            },
+            large: {
+                height: "var(--component-tag-height-large, 38px)",
+                padding:
+                    "var(--component-tag-padding-large, var(--spacing-small))",
+                fontSize: "var(--font-size-paragraph, 1em)",
+            },
+        };
+        const cfg = sizeConfig[size] || sizeConfig.medium;
+
         const baseStyle = `
             :host {
                 display: inline-block;
                 font-family: var(--font-family-body, sans-serif);
-                font-size: var(--font-size-label, 0.83em);
+                font-size: ${cfg.fontSize};
             }
             .tag {
                 display: inline-flex;
                 align-items: center;
                 gap: var(--spacing-2x-small);
-                padding: 0 var(--component-tag-padding-medium, var(--spacing-x-small));
+                height: ${cfg.height};
+                padding: 0 ${cfg.padding};
                 border: 1px solid transparent;
                 transition: background-color 0.2s, color 0.2s;
                 border-radius: ${borderRadius};
+                box-sizing: border-box;
             }
             .remove {
                 all: unset;