@studious-creative/yumekit 0.1.5 → 0.1.7

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    --component-appbar-collapsed-width: 48px;\n    --component-appbar-padding: var(--spacing-medium);\n    --component-appbar-width: 240px;\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    --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    --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-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    --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    --component-checkbox-icon-size: var(--sizing-2x-small);\n    --component-checkbox-size: var(--sizing-x-small);\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-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-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    --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-panelbar-border-radius: var(--radii-x-small);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-padding: var(--spacing-medium);\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    --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    --component-sidebar-border-radius: var(--radii-small);\n    --component-sidebar-border-width: var(--border-x-thin);\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    --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    --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-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-content-padding: var(--spacing-large);\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    --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    --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    --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-tooltip-border-radius: var(--radii-small);\n    --component-tooltip-padding: var(--spacing-x-small);\n    --component-tooltip-padding-h: var(--spacing-medium);\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-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";
 
 class YumeButton extends HTMLElement {
     static get observedAttributes() {
@@ -225,8 +225,8 @@ class YumeButton extends HTMLElement {
             position: relative;
             overflow: hidden;
             border-radius: var(--component-button-border-radius-outer, 4px);
-            border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #1D1D1D));
-            background: var(--background-color, #F1F6FA);
+            border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));
+            background: var(--background-color, #0c0c0d);
             transition: background-color 0.1s, color 0.1s, border-color 0.1s;
             cursor: pointer;
             color: var(--text-color);
@@ -333,6 +333,7 @@ class YumeButton extends HTMLElement {
                 "--primary-background-component",
                 "--primary-background-hover",
                 "--primary-background-active",
+                "--primary-content-inverse",
             ],
             secondary: [
                 "--secondary-content--",
@@ -341,6 +342,7 @@ class YumeButton extends HTMLElement {
                 "--secondary-background-component",
                 "--secondary-background-hover",
                 "--secondary-background-active",
+                "--secondary-content-inverse",
             ],
             base: [
                 "--base-content--",
@@ -349,6 +351,7 @@ class YumeButton extends HTMLElement {
                 "--base-background-component",
                 "--base-background-hover",
                 "--base-background-active",
+                "--base-content-inverse",
             ],
             success: [
                 "--success-content--",
@@ -357,6 +360,7 @@ class YumeButton extends HTMLElement {
                 "--success-background-component",
                 "--success-background-hover",
                 "--success-background-active",
+                "--success-content-inverse",
             ],
             error: [
                 "--error-content--",
@@ -365,6 +369,7 @@ class YumeButton extends HTMLElement {
                 "--error-background-component",
                 "--error-background-hover",
                 "--error-background-active",
+                "--error-content-inverse",
             ],
             warning: [
                 "--warning-content--",
@@ -373,6 +378,7 @@ class YumeButton extends HTMLElement {
                 "--warning-background-component",
                 "--warning-background-hover",
                 "--warning-background-active",
+                "--warning-content-inverse",
             ],
             help: [
                 "--help-content--",
@@ -381,6 +387,7 @@ class YumeButton extends HTMLElement {
                 "--help-background-component",
                 "--help-background-hover",
                 "--help-background-active",
+                "--help-content-inverse",
             ],
         };
 
@@ -401,19 +408,19 @@ class YumeButton extends HTMLElement {
 
         const styleVars = {
             outlined: {
-                "--background-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
-                "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
-                "--text-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                "--background-color": `var(${colorVars[color][3]}, #0c0c0d)`,
+                "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
+                "--text-color": `var(${colorVars[color][0]}, #f7f7fa)`,
             },
             filled: {
-                "--background-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
-                "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
-                "--text-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+                "--background-color": `var(${colorVars[color][0]}, #f7f7fa)`,
+                "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
+                "--text-color": `var(${colorVars[color][6]}, #0c0c0d)`,
             },
             flat: {
-                "--background-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
-                "--border-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
-                "--text-color": `var(${colorVars[color][0]},rgba(29,29,29,1))`,
+                "--background-color": `var(${colorVars[color][3]},#0c0c0d)`,
+                "--border-color": `var(${colorVars[color][3]},#0c0c0d)`,
+                "--text-color": `var(${colorVars[color][0]},#f7f7fa)`,
             },
         };
 
@@ -425,66 +432,66 @@ class YumeButton extends HTMLElement {
         if (styleType === "filled") {
             this.button.style.setProperty(
                 "--hover-background-color",
-                `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
+                `var(${colorVars[color][1]}, #292a2b)`,
             );
             this.button.style.setProperty(
                 "--hover-text-color",
-                `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+                `var(${colorVars[color][6]}, #0c0c0d)`,
             );
             this.button.style.setProperty(
                 "--hover-border-color",
-                `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
+                `var(${colorVars[color][1]}, #292a2b)`,
             );
             this.button.style.setProperty(
                 "--focus-background-color",
-                `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
+                `var(${colorVars[color][2]}, #46474a)`,
             );
             this.button.style.setProperty(
                 "--focus-text-color",
-                `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+                `var(${colorVars[color][6]}, #0c0c0d)`,
             );
             this.button.style.setProperty(
                 "--focus-border-color",
-                `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
+                `var(${colorVars[color][2]}, #46474a)`,
             );
             this.button.style.setProperty(
                 "--active-background-color",
-                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                `var(${colorVars[color][0]}, #f7f7fa)`,
             );
             this.button.style.setProperty(
                 "--active-text-color",
-                `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+                `var(${colorVars[color][6]}, #0c0c0d)`,
             );
             this.button.style.setProperty(
                 "--active-border-color",
-                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                `var(${colorVars[color][0]}, #f7f7fa)`,
             );
         } else {
-            const borderColor = `var(${colorVars[color][0]}, rgba(29,29,29,1))`;
+            const borderColor = `var(${colorVars[color][0]}, #f7f7fa)`;
 
             this.button.style.setProperty(
                 "--hover-background-color",
-                `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
+                `var(${colorVars[color][4]}, #292a2b)`,
             );
             this.button.style.setProperty(
                 "--hover-text-color",
-                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                `var(${colorVars[color][0]}, #f7f7fa)`,
             );
             this.button.style.setProperty(
                 "--focus-background-color",
-                `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
+                `var(${colorVars[color][5]}, #46474a)`,
             );
             this.button.style.setProperty(
                 "--focus-text-color",
-                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                `var(${colorVars[color][0]}, #f7f7fa)`,
             );
             this.button.style.setProperty(
                 "--active-background-color",
-                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                `var(${colorVars[color][0]}, #f7f7fa)`,
             );
             this.button.style.setProperty(
                 "--active-text-color",
-                `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+                `var(${colorVars[color][6]}, #0c0c0d)`,
             );
 
             if (styleType === "outlined") {
@@ -505,15 +512,15 @@ class YumeButton extends HTMLElement {
                 // Flat buttons match border to background
                 this.button.style.setProperty(
                     "--hover-border-color",
-                    `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
+                    `var(${colorVars[color][4]}, #292a2b)`,
                 );
                 this.button.style.setProperty(
                     "--focus-border-color",
-                    `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
+                    `var(${colorVars[color][5]}, #46474a)`,
                 );
                 this.button.style.setProperty(
                     "--active-border-color",
-                    `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                    `var(${colorVars[color][0]}, #f7f7fa)`,
                 );
             }
         }
@@ -757,9 +764,30 @@ class YumeMenu extends HTMLElement {
                 left = anchorRect.left - menuRect.width;
             }
             if (top + menuRect.height > vh) {
-                top = vh - menuRect.height - 10;
+                top = anchorRect.top - menuRect.height;
+            }
+        } else if (this.direction === "up") {
+            top = anchorRect.top - menuRect.height;
+            left = anchorRect.left;
+
+            if (top < 0) {
+                top = anchorRect.bottom;
+            }
+            if (left + menuRect.width > vw) {
+                left = vw - menuRect.width - 10;
+            }
+        } else if (this.direction === "left") {
+            top = anchorRect.top;
+            left = anchorRect.left - menuRect.width;
+
+            if (left < 0) {
+                left = anchorRect.right;
+            }
+            if (top + menuRect.height > vh) {
+                top = anchorRect.top - menuRect.height;
             }
         } else {
+            // "down" (default)
             top = anchorRect.bottom;
             left = anchorRect.left;
 
@@ -771,8 +799,8 @@ class YumeMenu extends HTMLElement {
             }
         }
 
-        top = Math.max(10, Math.min(top, vh - menuRect.height - 10));
-        left = Math.max(10, Math.min(left, vw - menuRect.width - 10));
+        top = Math.max(0, Math.min(top, vh - menuRect.height));
+        left = Math.max(0, Math.min(left, vw - menuRect.width));
 
         this.style.top = `${top}px`;
         this.style.left = `${left}px`;
@@ -791,8 +819,8 @@ class YumeMenu extends HTMLElement {
                 list-style: none;
                 margin: 0;
                 padding: 0;
-                background: var(--component-menu-background, #fff);
-                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);
+                background: var(--component-menu-background, #0c0c0d);
+                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
                 border-radius: var(--component-menu-border-radius, 4px);
                 box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
                 min-width: 150px;
@@ -807,12 +835,12 @@ class YumeMenu extends HTMLElement {
                 align-items: center;
                 justify-content: space-between;
                 white-space: nowrap;
-                color: var(--component-menu-color, #000);
+                color: var(--component-menu-color, #f7f7fa);
                 font-size: var(--font-size-button, 1em);
             }
 
             li.menuitem:hover {
-                background: var(--component-menu-hover-background, #eee);
+                background: var(--component-menu-hover-background, #292a2b);
             }
 
             ul.submenu {
@@ -820,7 +848,7 @@ class YumeMenu extends HTMLElement {
                 top: 0;
                 left: 100%;
                 display: none;
-                z-index: 1001;
+                z-index: var(--component-menu-z-index, 1001);
             }
 
             li.menuitem:hover > ul.submenu {
@@ -1058,12 +1086,12 @@ class YumeAppbar extends HTMLElement {
             :host {
                 display: block;
                 font-family: var(--font-family-body, sans-serif);
-                color: var(--component-appbar-color, #fff);
+                color: var(--component-appbar-color, #f7f7fa);
             }
 
             :host([sticky]) {
                 position: sticky;
-                z-index: 100;
+                z-index: var(--component-appbar-z-index, 100);
             }
             :host([orientation="vertical"][sticky="start"]),
             :host(:not([orientation])[sticky="start"]) {
@@ -1094,23 +1122,23 @@ class YumeAppbar extends HTMLElement {
             }
             :host([orientation="vertical"][sticky="start"]) .appbar,
             :host(:not([orientation])[sticky="start"]) .appbar {
-                border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
             }
             :host([orientation="vertical"][sticky="end"]) .appbar,
             :host(:not([orientation])[sticky="end"]) .appbar {
-                border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
             }
             :host([orientation="horizontal"][sticky="start"]) .appbar {
-                border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
             }
             :host([orientation="horizontal"][sticky="end"]) .appbar {
-                border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
             }
 
             .appbar {
                 display: flex;
-                background: var(--component-appbar-background, #111);
-                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                background: var(--component-appbar-background, #0c0c0d);
+                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
                 border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
                 overflow: visible;
                 padding: var(--_appbar-padding);
@@ -1159,23 +1187,23 @@ 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, #333);
+                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);
                 margin-bottom: var(--_appbar-padding);
             }
             .appbar.vertical .appbar-footer {
-                border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
                 padding-top: var(--_appbar-padding);
                 margin-top: var(--_appbar-padding);
             }
 
             .appbar.horizontal .appbar-header {
-                border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                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);
                 margin-right: var(--_appbar-padding);
             }
             .appbar.horizontal .appbar-footer {
-                border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
                 padding-left: var(--_appbar-padding);
                 margin-left: var(--_appbar-padding);
             }
@@ -1288,6 +1316,7 @@ class YumeAppbar extends HTMLElement {
 
         const bar = document.createElement("div");
         bar.className = `appbar ${isVertical ? "vertical" : "horizontal"}`;
+
         if (isCollapsed) bar.classList.add("collapsed");
         bar.setAttribute("role", "navigation");
         bar.style.setProperty("--_appbar-padding", cfg.padding);
@@ -1308,6 +1337,7 @@ class YumeAppbar extends HTMLElement {
 
         const logoWrapper = document.createElement("div");
         logoWrapper.className = "logo-wrapper";
+
         const logoSlot = document.createElement("slot");
         logoSlot.name = "logo";
         logoWrapper.appendChild(logoSlot);
@@ -1315,6 +1345,7 @@ class YumeAppbar extends HTMLElement {
 
         const titleWrapper = document.createElement("div");
         titleWrapper.className = "header-title";
+
         const titleSlot = document.createElement("slot");
         titleSlot.name = "title";
         titleWrapper.appendChild(titleSlot);
@@ -1496,8 +1527,8 @@ class YumeAvatar extends HTMLElement {
             width: 100%;
             height: 100%;
             border-radius: ${borderRadius};
-            background-color: var(--primary-content--, rgba(4, 134, 209, 1));
-            color: var(--primary-background-component, rgba(245, 250, 250, 1));
+            background-color: var(--primary-content--, #0576ff);
+            color: var(--primary-background-component, #0c0c0d);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -1570,17 +1601,17 @@ class YumeBadge extends HTMLElement {
         return this.getAttribute("value") || "";
     }
 
-    getBadgeColor(color) {
+    getBadgeColors(color) {
         const colorMap = {
-            primary: "var(--primary-content--)",
-            secondary: "var(--secondary-content--)",
-            base: "var(--base-content--)",
-            success: "var(--success-content--)",
-            warning: "var(--warning-content--)",
-            error: "var(--error-content--)",
-            help: "var(--help-content--)",
+            primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
+            secondary: ["var(--secondary-content--)", "var(--secondary-content-inverse)"],
+            base: ["var(--base-content--)", "var(--base-content-inverse)"],
+            success: ["var(--success-content--)", "var(--success-content-inverse)"],
+            warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
+            error: ["var(--error-content--)", "var(--error-content-inverse)"],
+            help: ["var(--help-content--)", "var(--help-content-inverse)"],
         };
-        return colorMap[color] || color;
+        return colorMap[color] || [color, "var(--neutral-white, #fff)"];
     }
 
     getBadgePosition(position, alignment) {
@@ -1628,7 +1659,7 @@ class YumeBadge extends HTMLElement {
     }
 
     render() {
-        const badgeColor = this.getBadgeColor(this.color);
+        const [badgeColor, badgeTextColor] = this.getBadgeColors(this.color);
         const { fontSize, padding, minSize } = this.getSizeAttributes(
             this.size,
         );
@@ -1649,7 +1680,7 @@ class YumeBadge extends HTMLElement {
                     position: ${hasTarget ? "absolute" : "static"};
                     ${hasTarget ? positionStyles : ""}
                     background: ${badgeColor};
-                    color: var(--base-background-component, #fff);
+                    color: ${badgeTextColor};
                     font-size: ${fontSize};
                     font-weight: bold;
                     padding: ${padding};
@@ -2096,6 +2127,16 @@ class YumeCheckbox extends HTMLElement {
                 line-height: 0;
             }
 
+            :host([disabled]) .checkbox {
+                border-color: var(--component-checkbox-border-color);
+                background: var(--component-checkbox-disabled-background, var(--component-checkbox-background));
+                cursor: not-allowed;
+            }
+
+            :host([disabled]) .checkbox:hover {
+                border-color: var(--component-checkbox-border-color);
+            }
+
             .checkbox:hover {
                 border-color: var(--component-checkbox-accent);
             }
@@ -2107,7 +2148,7 @@ class YumeCheckbox extends HTMLElement {
                 display: block;
             }
 
-            .label {
+            [part="label"] {
                 display: inline-flex;
                 align-items: center;
                 font-size: 0.9em;
@@ -2265,7 +2306,7 @@ class YumeDialog extends HTMLElement {
                 align-items: center;
                 justify-content: center;
                 background: rgba(0,0,0,0.5);
-                z-index: 1000;
+                z-index: var(--component-dialog-z-index, 1000);
             }
             :host([visible]) { display: flex; }
             .dialog {
@@ -2295,7 +2336,7 @@ class YumeDialog extends HTMLElement {
                 border: none;
                 cursor: pointer;
                 padding: var(--spacing-x-small, 4px);
-                color: var(--component-dialog-color, #000);
+                color: var(--component-dialog-color, #f7f7fa);
                 font-size: 1.25em;
                 line-height: 1;
                 border-radius: var(--component-button-border-radius-outer, 4px);
@@ -2304,7 +2345,7 @@ class YumeDialog extends HTMLElement {
                 justify-content: center;
             }
             .close-btn:hover {
-                background: var(--component-dialog-hover-background, #eee);
+                background: var(--component-dialog-hover-background, #292a2b);
             }
             .close-btn:focus-visible {
                 outline: 2px solid var(--component-dialog-accent);
@@ -2609,7 +2650,7 @@ class YumeDrawer extends HTMLElement {
                 position: fixed;
                 top: 0; left: 0; right: 0; bottom: 0;
                 display: none;
-                z-index: 1000;
+                z-index: var(--component-drawer-z-index, 5000);
             }
             :host([visible]) {
                 display: block;
@@ -2627,8 +2668,8 @@ class YumeDrawer extends HTMLElement {
 
             .drawer-panel {
                 position: absolute;
-                background: var(--component-drawer-background, #fff);
-                color: var(--component-drawer-color, #000);
+                background: var(--component-drawer-background, #0c0c0d);
+                color: var(--component-drawer-color, #f7f7fa);
                 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                 overflow: hidden;
                 outline: none;
@@ -2649,12 +2690,12 @@ class YumeDrawer extends HTMLElement {
             .drawer-panel[data-position="left"] {
                 left: 0;
                 transform: translateX(-100%);
-                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
             .drawer-panel[data-position="right"] {
                 right: 0;
                 transform: translateX(100%);
-                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
 
             .drawer-panel[data-position="top"],
@@ -2666,12 +2707,12 @@ class YumeDrawer extends HTMLElement {
             .drawer-panel[data-position="top"] {
                 top: 0;
                 transform: translateY(-100%);
-                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
             .drawer-panel[data-position="bottom"] {
                 bottom: 0;
                 transform: translateY(100%);
-                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
 
             .drawer-panel.open { transform: translate(0, 0); }
@@ -2708,7 +2749,7 @@ class YumeDrawer extends HTMLElement {
                 flex-shrink: 0;
                 align-items: center;
                 justify-content: center;
-                color: var(--component-drawer-color, #999);
+                color: var(--component-drawer-color, #f7f7fa);
                 opacity: 0.6;
                 touch-action: none;         /* needed for pointer events */
                 user-select: none;
@@ -2717,7 +2758,7 @@ class YumeDrawer extends HTMLElement {
             .resize-handle:hover,
             .resize-handle:active {
                 opacity: 1;
-                background: var(--component-drawer-hover-background, rgba(128,128,128,0.15));
+                background: var(--component-drawer-hover-background, #292a2b);
             }
 
             .drawer-panel[data-position="left"] > .resize-handle,
@@ -2806,6 +2847,277 @@ if (!customElements.get("y-drawer")) {
     customElements.define("y-drawer", YumeDrawer);
 }
 
+/**
+ * Icon registry — a runtime map of icon names to SVG markup strings.
+ *
+ * Register only the icons you need for tree-shaking:
+ *
+ *   import { registerIcon } from "@studious-creative/yumekit";
+ *   registerIcon("home", homeSvgString);
+ *
+ * Or register all bundled icons at once (separate import):
+ *
+ *   import "@studious-creative/yumekit/icons/all.js";
+ */
+
+const icons = new Map();
+
+function registerIcon(name, svg) {
+    icons.set(name, svg);
+}
+
+function registerIcons(entries) {
+    for (const [name, svg] of Object.entries(entries)) {
+        icons.set(name, svg);
+    }
+}
+
+function getIcon(name) {
+    return icons.get(name) || "";
+}
+
+// Allowlist-based SVG sanitizer — only known-safe elements and attributes are kept.
+const ALLOWED_ELEMENTS = new Set([
+    "svg",
+    "g",
+    "path",
+    "circle",
+    "ellipse",
+    "rect",
+    "line",
+    "polyline",
+    "polygon",
+    "text",
+    "tspan",
+    "defs",
+    "clippath",
+    "mask",
+    "lineargradient",
+    "radialgradient",
+    "stop",
+    "symbol",
+    "title",
+    "desc",
+    "metadata",
+]);
+
+const ALLOWED_ATTRS = new Set([
+    "viewbox",
+    "xmlns",
+    "fill",
+    "stroke",
+    "stroke-width",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "stroke-dasharray",
+    "stroke-dashoffset",
+    "stroke-miterlimit",
+    "stroke-opacity",
+    "fill-opacity",
+    "fill-rule",
+    "clip-rule",
+    "opacity",
+    "d",
+    "cx",
+    "cy",
+    "r",
+    "rx",
+    "ry",
+    "x",
+    "x1",
+    "x2",
+    "y",
+    "y1",
+    "y2",
+    "width",
+    "height",
+    "points",
+    "transform",
+    "id",
+    "class",
+    "clip-path",
+    "mask",
+    "offset",
+    "stop-color",
+    "stop-opacity",
+    "gradient-units",
+    "gradienttransform",
+    "gradientunits",
+    "spreadmethod",
+    "patternunits",
+    "patterntransform",
+    "font-size",
+    "font-family",
+    "font-weight",
+    "text-anchor",
+    "dominant-baseline",
+    "alignment-baseline",
+    "dx",
+    "dy",
+    "rotate",
+    "textlength",
+    "lengthadjust",
+    "display",
+    "visibility",
+    "color",
+    "vector-effect",
+]);
+
+function sanitizeSvg(raw) {
+    if (!raw) return "";
+    const doc = new DOMParser().parseFromString(raw, "image/svg+xml");
+    const svg = doc.querySelector("svg");
+    if (!svg) return "";
+
+    const walk = (el) => {
+        for (const child of [...el.children]) {
+            if (!ALLOWED_ELEMENTS.has(child.tagName.toLowerCase())) {
+                child.remove();
+                continue;
+            }
+            for (const attr of [...child.attributes]) {
+                if (!ALLOWED_ATTRS.has(attr.name.toLowerCase())) {
+                    child.removeAttribute(attr.name);
+                }
+            }
+            walk(child);
+        }
+    };
+
+    // Sanitize the <svg> element's own attributes
+    for (const attr of [...svg.attributes]) {
+        if (!ALLOWED_ATTRS.has(attr.name.toLowerCase())) {
+            svg.removeAttribute(attr.name);
+        }
+    }
+    walk(svg);
+    return svg.outerHTML;
+}
+
+// Cache sanitized SVG markup per icon name to avoid repeated DOMParser + DOM-walk
+// on every render. The cache is naturally bounded by the number of registered icons.
+const sanitizedSvgCache = new Map();
+
+function getCachedSvg(name) {
+    if (sanitizedSvgCache.has(name)) {
+        return sanitizedSvgCache.get(name);
+    }
+    const result = sanitizeSvg(getIcon(name));
+    sanitizedSvgCache.set(name, result);
+    return result;
+}
+
+class YumeIcon extends HTMLElement {
+    static get observedAttributes() {
+        return ["name", "size", "color", "label"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+
+    get name() {
+        return this.getAttribute("name") || "";
+    }
+    set name(val) {
+        this.setAttribute("name", val);
+    }
+
+    get size() {
+        return this.getAttribute("size") || "medium";
+    }
+    set size(val) {
+        this.setAttribute("size", val);
+    }
+
+    get color() {
+        return this.getAttribute("color") || "base";
+    }
+    set color(val) {
+        this.setAttribute("color", val);
+    }
+
+    get label() {
+        return this.getAttribute("label") || "";
+    }
+    set label(val) {
+        if (val) this.setAttribute("label", val);
+        else this.removeAttribute("label");
+    }
+
+    _getColor(color) {
+        const map = {
+            base: "var(--base-content--, #f7f7fa)",
+            primary: "var(--primary-content--, #0576ff)",
+            secondary: "var(--secondary-content--, #04b8b8)",
+            success: "var(--success-content--, #2dba73)",
+            warning: "var(--warning-content--, #d17f04)",
+            error: "var(--error-content--, #b80421)",
+            help: "var(--help-content--, #5405ff)",
+        };
+        return map[color] || map.base;
+    }
+
+    _getSize(size) {
+        const map = {
+            small: "var(--component-icon-size-small, 16px)",
+            medium: "var(--component-icon-size-medium, 24px)",
+            large: "var(--component-icon-size-large, 32px)",
+        };
+        return map[size] || map.medium;
+    }
+
+    render() {
+        const svg = getCachedSvg(this.name);
+        const sizeVal = this._getSize(this.size);
+        const colorVal = this._getColor(this.color);
+        const label = this.label;
+
+        if (label) {
+            this.setAttribute("role", "img");
+            this.setAttribute("aria-label", label);
+            this.removeAttribute("aria-hidden");
+        } else {
+            this.setAttribute("aria-hidden", "true");
+            this.removeAttribute("role");
+            this.removeAttribute("aria-label");
+        }
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: ${sizeVal};
+                    height: ${sizeVal};
+                    color: ${colorVal};
+                    line-height: 0;
+                }
+                .icon-wrapper svg {
+                    width: 100%;
+                    height: 100%;
+                }
+            </style>
+            <span class="icon-wrapper" part="icon">${svg}</span>
+        `;
+    }
+}
+
+if (!customElements.get("y-icon")) {
+    customElements.define("y-icon", YumeIcon);
+}
+
 class YumeInput extends HTMLElement {
     static formAssociated = true;
 
@@ -3101,7 +3413,12 @@ class YumePanel extends HTMLElement {
         if (!this._expanded) {
             const parentBar = this.closest("y-panelbar");
             if (parentBar && parentBar.hasAttribute("exclusive")) {
-                const siblingPanels = parentBar.querySelectorAll("y-panel");
+                const parent = this.parentElement;
+                const siblingPanels = parent
+                    ? Array.from(parent.children).filter(
+                          (el) => el.tagName === "Y-PANEL",
+                      )
+                    : [];
                 siblingPanels.forEach((panel) => {
                     if (panel !== this && panel.expanded) {
                         panel.collapse();
@@ -3153,9 +3470,19 @@ class YumePanel extends HTMLElement {
     }
 
     updateChildState() {
-        const parentPanel = this.parentElement?.closest("y-panel");
-        const isChild = Boolean(parentPanel && parentPanel !== this);
-        this.setAttribute("data-is-child", isChild ? "true" : "false");
+        let depth = 0;
+        let el = this.parentElement;
+        while (el) {
+            const parent = el.closest("y-panel");
+            if (parent && parent !== this) {
+                depth++;
+                el = parent.parentElement;
+            } else {
+                break;
+            }
+        }
+        this.setAttribute("data-is-child", depth > 0 ? "true" : "false");
+        this.style.setProperty("--panel-depth", depth);
     }
 
     checkRouteMatch() {
@@ -3171,7 +3498,8 @@ class YumePanel extends HTMLElement {
         const header = this.shadowRoot.querySelector(".header");
         if (!header) return;
 
-        header.addEventListener("click", () => {
+        header.addEventListener("click", (e) => {
+            e.stopPropagation();
             if (this.hasAttribute("href")) {
                 const href = this.getAttribute("href");
                 if (this.getAttribute("history") !== "false") {
@@ -3281,7 +3609,7 @@ class YumePanel extends HTMLElement {
             }
 
             :host([data-is-child="true"]) .header {
-                padding-left: calc(var(--component-panelbar-padding, 4px) * 2);
+                padding-left: calc(var(--component-panelbar-padding, 4px) + (var(--panel-depth, 1) * var(--component-panelbar-indent, 16px)));
             }
 
             .header {
@@ -3924,6 +4252,7 @@ class YumeSelect extends HTMLElement {
             "placeholder",
             "options",
             "display-mode",
+            "close-on-click-outside",
         ];
     }
 
@@ -3932,6 +4261,7 @@ class YumeSelect extends HTMLElement {
         this._internals = this.attachInternals();
         this.attachShadow({ mode: "open" });
         this.selectedValues = new Set();
+        this._onDocumentClick = this._onDocumentClick.bind(this);
         this.render();
     }
 
@@ -3943,6 +4273,18 @@ class YumeSelect extends HTMLElement {
         this._internals.setFormValue(this.value);
     }
 
+    disconnectedCallback() {
+        this.closeDropdown();
+    }
+
+    _onDocumentClick(e) {
+        if (this.getAttribute("close-on-click-outside") === "false") return;
+        const path = e.composedPath();
+        if (!path.includes(this) && this.dropdown?.classList.contains("open")) {
+            this.closeDropdown();
+        }
+    }
+
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue) return;
 
@@ -4041,15 +4383,18 @@ class YumeSelect extends HTMLElement {
             this._onScrollOrResize = this._positionDropdown.bind(this);
             window.addEventListener("scroll", this._onScrollOrResize, true);
             window.addEventListener("resize", this._onScrollOrResize);
+            document.addEventListener("click", this._onDocumentClick, true);
         }
     }
 
     closeDropdown() {
-        this.dropdown.classList.remove("open");
-        this.selectContainer.classList.remove("open");
+        this.dropdown?.classList.remove("open");
+        this.selectContainer?.classList.remove("open");
+        document.removeEventListener("click", this._onDocumentClick, true);
         if (this._onScrollOrResize) {
             window.removeEventListener("scroll", this._onScrollOrResize, true);
             window.removeEventListener("resize", this._onScrollOrResize);
+            this._onScrollOrResize = null;
         }
     }
 
@@ -4209,6 +4554,7 @@ class YumeSelect extends HTMLElement {
     }
 
     render() {
+        this.closeDropdown();
         this.applyStyles();
         this.shadowRoot.innerHTML = this.generateTemplate();
         this.queryRefs();
@@ -4282,7 +4628,7 @@ class YumeSelect extends HTMLElement {
 
             .dropdown {
                 position: fixed;
-                z-index: 9999;
+                z-index: var(--component-select-z-index, 6000);
                 background: var(--component-select-background);
                 border: var(--component-inputs-border-width) solid var(--component-select-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);
@@ -5251,12 +5597,12 @@ class YumeTable extends HTMLElement {
 
         const topColor =
             dir === "asc"
-                ? "var(--component-table-color, #333)"
-                : "var(--component-table-color-light, #bbb)";
+                ? "var(--component-table-color, #f7f7fa)"
+                : "var(--component-table-color-light, #acaeb2)";
         const bottomColor =
             dir === "desc"
-                ? "var(--component-table-color, #333)"
-                : "var(--component-table-color-light, #bbb)";
+                ? "var(--component-table-color, #f7f7fa)"
+                : "var(--component-table-color-light, #acaeb2)";
 
         return sortArrows(topColor, bottomColor);
     }
@@ -5276,7 +5622,7 @@ class YumeTable extends HTMLElement {
             :host {
                 display: block;
                 font-family: var(--font-family-body, sans-serif);
-                color: var(--component-table-color, #000);
+                color: var(--component-table-color, #f7f7fa);
             }
 
             .table-wrapper {
@@ -5297,7 +5643,7 @@ class YumeTable extends HTMLElement {
                 font-size: var(--font-size-paragraph, 1em);
                 white-space: nowrap;
                 background: transparent;
-                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #ccc);
+                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #37383a);
                 user-select: none;
             }
 
@@ -5306,7 +5652,7 @@ class YumeTable extends HTMLElement {
             }
 
             thead th.sortable:hover {
-                background: var(--component-table-hover-background, #f5f5f5);
+                background: var(--component-table-hover-background, #292a2b);
             }
 
             .th-content {
@@ -5323,7 +5669,7 @@ class YumeTable extends HTMLElement {
             tbody td {
                 padding: ${paddingVar};
                 font-size: var(--font-size-paragraph, 1em);
-                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #ccc);
+                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #37383a);
             }
 
             tbody tr:last-child td {
@@ -5337,13 +5683,13 @@ class YumeTable extends HTMLElement {
             ${
                 striped
                     ? `tbody tr:nth-child(even) {
-                    background: var(--component-table-hover-background, #f9f9f9);
+                    background: var(--component-table-hover-background, #292a2b);
                 }`
                     : ""
             }
 
             tbody tr:hover {
-                background: var(--component-table-active-background, #eee);
+                background: var(--component-table-active-background, #46474a);
             }
         `;
         this.shadowRoot.appendChild(style);
@@ -5491,40 +5837,47 @@ class YumeTag extends HTMLElement {
                 "--primary-content--",
                 "--primary-content-hover",
                 "--primary-background-component",
+                "--primary-content-inverse",
             ],
             secondary: [
                 "--secondary-content--",
                 "--secondary-content-hover",
                 "--secondary-background-component",
+                "--secondary-content-inverse",
             ],
             base: [
                 "--base-content--",
                 "--base-content-lighter",
                 "--base-background-component",
+                "--base-content-inverse",
             ],
             success: [
                 "--success-content--",
                 "--success-content-hover",
                 "--success-background-component",
+                "--success-content-inverse",
             ],
             error: [
                 "--error-content--",
                 "--error-content-hover",
                 "--error-background-component",
+                "--error-content-inverse",
             ],
             warning: [
                 "--warning-content--",
                 "--warning-content-hover",
                 "--warning-background-component",
+                "--warning-content-inverse",
             ],
             help: [
                 "--help-content--",
                 "--help-content-hover",
                 "--help-background-component",
+                "--help-content-inverse",
             ],
         };
 
-        const [content, hover, background] = vars[color] || vars.base;
+        const [content, hover, background, inverse] = vars[color] || vars.base;
 
         const borderRadius =
             shape === "round"
@@ -5561,10 +5914,10 @@ class YumeTag extends HTMLElement {
             filled: `
                 .tag {
                     background: var(${content});
-                    color: var(${background});
+                    color: var(${inverse});
                 }
                 .remove {
-                    color: var(${background});
+                    color: var(${inverse});
                 }
             `,
             outlined: `
@@ -6041,7 +6394,7 @@ class YumeToast extends HTMLElement {
 
     _getPositionStyles() {
         const pos = this.position;
-        const base = `position: fixed; z-index: 10000; display: flex; flex-direction: column; gap: var(--spacing-small, 6px); pointer-events: none; max-width: 420px; min-width: 280px;`;
+        const base = `position: fixed; z-index: var(--component-toast-z-index, 9000); display: flex; flex-direction: column; gap: var(--spacing-small, 6px); pointer-events: none; max-width: 420px; min-width: 280px;`;
         const pad = `var(--component-toast-offset, var(--spacing-x-large, 16px))`;
 
         const map = {
@@ -6282,7 +6635,7 @@ class YumeTooltip extends HTMLElement {
 
                 .tooltip {
                     position: absolute;
-                    z-index: 9999;
+                    z-index: var(--component-tooltip-z-index, 7000);
                     white-space: nowrap;
                     pointer-events: none;
                     opacity: 0;
@@ -6381,13 +6734,13 @@ if (!customElements.get("y-tooltip")) {
     customElements.define("y-tooltip", YumeTooltip);
 }
 
-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-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-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-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-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-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-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-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-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-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    --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";
 
-var blueDarkCSS = "/* Themes - Blue Dark */\n:root {\n    --base-background-app: var(--neutral-dark-1);\n    --base-background-component: var(--neutral-dark-0);\n    --base-background-hover: var(--neutral-dark-2);\n    --base-background-border: var(--neutral-dark-3);\n    --base-background-active: var(--neutral-dark-4);\n    --base-content--: var(--neutral-light-0);\n    --base-content-light: var(--neutral-light-1);\n    --base-content-lighter: var(--neutral-light-3);\n    --base-content-lightest: var(--neutral-light-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-dark-1);\n    --primary-background-component: var(--blue-dark-0);\n    --primary-background-hover: var(--blue-dark-2);\n    --primary-background-active: var(--blue-dark-3);\n    --primary-background-border: var(--blue-dark-4);\n    --primary-content--: var(--blue--);\n    --primary-content-hover: var(--blue-light-7);\n    --primary-content-active: var(--blue-light-6);\n    --secondary-background-app: var(--teal-dark-1);\n    --secondary-background-component: var(--teal-dark-0);\n    --secondary-background-hover: var(--teal-dark-2);\n    --secondary-background-border: var(--teal-dark-3);\n    --secondary-background-active: var(--teal-dark-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-hover: var(--teal-light-7);\n    --secondary-content-active: var(--teal-light-6);\n    --success-background-app: var(--green-dark-1);\n    --success-background-component: var(--green-dark-0);\n    --success-background-hover: var(--green-dark-2);\n    --success-background-border: var(--green-dark-3);\n    --success-background-active: var(--green-dark-4);\n    --success-content--: var(--green--);\n    --success-content-hover: var(--green-light-7);\n    --success-content-active: var(--green-light-6);\n    --warning-background-app: var(--yellow-dark-1);\n    --warning-background-component: var(--yellow-dark-0);\n    --warning-background-hover: var(--yellow-dark-2);\n    --warning-background-border: var(--yellow-dark-3);\n    --warning-background-active: var(--yellow-dark-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-hover: var(--yellow-light-7);\n    --warning-content-active: var(--yellow-light-6);\n    --error-background-app: var(--red-dark-1);\n    --error-background-component: var(--red-dark-0);\n    --error-background-hover: var(--red-dark-2);\n    --error-background-border: var(--red-dark-3);\n    --error-background-active: var(--red-dark-4);\n    --error-content--: var(--red--);\n    --error-content-hover: var(--red-light-7);\n    --error-content-active: var(--red-light-6);\n    --help-background-app: var(--indigo-dark-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-dark-2);\n    --help-background-active: var(--indigo-dark-3);\n    --help-background-border: var(--indigo-dark-4);\n    --help-content--: var(--indigo--);\n    --help-content-hover: var(--indigo-light-7);\n    --help-content-active: var(--indigo-light-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-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-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    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
+var blueDarkCSS = "/* Themes - Blue Dark */\n:root {\n    --base-background-app: var(--neutral-dark-1);\n    --base-background-component: var(--neutral-dark-0);\n    --base-background-hover: var(--neutral-dark-2);\n    --base-background-border: var(--neutral-dark-3);\n    --base-background-active: var(--neutral-dark-4);\n    --base-content--: var(--neutral-light-0);\n    --base-content-inverse: var(--neutral-black);\n    --base-content-light: var(--neutral-light-1);\n    --base-content-lighter: var(--neutral-light-3);\n    --base-content-lightest: var(--neutral-light-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-dark-1);\n    --primary-background-component: var(--blue-dark-0);\n    --primary-background-hover: var(--blue-dark-2);\n    --primary-background-active: var(--blue-dark-3);\n    --primary-background-border: var(--blue-dark-4);\n    --primary-content--: var(--blue--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--blue-light-7);\n    --primary-content-active: var(--blue-light-6);\n    --secondary-background-app: var(--teal-dark-1);\n    --secondary-background-component: var(--teal-dark-0);\n    --secondary-background-hover: var(--teal-dark-2);\n    --secondary-background-border: var(--teal-dark-3);\n    --secondary-background-active: var(--teal-dark-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-inverse: var(--neutral-black);\n    --secondary-content-hover: var(--teal-light-7);\n    --secondary-content-active: var(--teal-light-6);\n    --success-background-app: var(--green-dark-1);\n    --success-background-component: var(--green-dark-0);\n    --success-background-hover: var(--green-dark-2);\n    --success-background-border: var(--green-dark-3);\n    --success-background-active: var(--green-dark-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-light-7);\n    --success-content-active: var(--green-light-6);\n    --warning-background-app: var(--yellow-dark-1);\n    --warning-background-component: var(--yellow-dark-0);\n    --warning-background-hover: var(--yellow-dark-2);\n    --warning-background-border: var(--yellow-dark-3);\n    --warning-background-active: var(--yellow-dark-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-light-7);\n    --warning-content-active: var(--yellow-light-6);\n    --error-background-app: var(--red-dark-1);\n    --error-background-component: var(--red-dark-0);\n    --error-background-hover: var(--red-dark-2);\n    --error-background-border: var(--red-dark-3);\n    --error-background-active: var(--red-dark-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-light-7);\n    --error-content-active: var(--red-light-6);\n    --help-background-app: var(--indigo-dark-1);\n    --help-background-component: var(--indigo-dark-0);\n    --help-background-hover: var(--indigo-dark-2);\n    --help-background-active: var(--indigo-dark-3);\n    --help-background-border: var(--indigo-dark-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-light-7);\n    --help-content-active: var(--indigo-light-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 orangeLightCSS = "/* Themes - Orange 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-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(--orange-light-1);\n    --primary-background-component: var(--orange-light-0);\n    --primary-background-hover: var(--orange-light-2);\n    --primary-background-active: var(--orange-light-3);\n    --primary-background-border: var(--orange-light-4);\n    --primary-content--: var(--orange--);\n    --primary-content-hover: var(--orange-dark-7);\n    --primary-content-active: var(--orange-dark-6);\n    --secondary-background-app: var(--amber-light-1);\n    --secondary-background-component: var(--amber-light-0);\n    --secondary-background-hover: var(--amber-light-2);\n    --secondary-background-border: var(--amber-light-3);\n    --secondary-background-active: var(--amber-light-4);\n    --secondary-content--: var(--amber--);\n    --secondary-content-hover: var(--amber-dark-7);\n    --secondary-content-active: var(--amber-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-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-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-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-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-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-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    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
+var orangeLightCSS = "/* Themes - Orange 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(--orange-light-1);\n    --primary-background-component: var(--orange-light-0);\n    --primary-background-hover: var(--orange-light-2);\n    --primary-background-active: var(--orange-light-3);\n    --primary-background-border: var(--orange-light-4);\n    --primary-content--: var(--orange--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--orange-dark-7);\n    --primary-content-active: var(--orange-dark-6);\n    --secondary-background-app: var(--amber-light-1);\n    --secondary-background-component: var(--amber-light-0);\n    --secondary-background-hover: var(--amber-light-2);\n    --secondary-background-border: var(--amber-light-3);\n    --secondary-background-active: var(--amber-light-4);\n    --secondary-content--: var(--amber--);\n    --secondary-content-inverse: var(--neutral-white);\n    --secondary-content-hover: var(--amber-dark-7);\n    --secondary-content-active: var(--amber-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 orangeDarkCSS = "/* Themes - Orange Dark */\n:root {\n    --base-background-app: var(--neutral-dark-1);\n    --base-background-component: var(--neutral-dark-0);\n    --base-background-hover: var(--neutral-dark-2);\n    --base-background-border: var(--neutral-dark-3);\n    --base-background-active: var(--neutral-dark-4);\n    --base-content--: var(--neutral-light-0);\n    --base-content-light: var(--neutral-light-1);\n    --base-content-lighter: var(--neutral-light-3);\n    --base-content-lightest: var(--neutral-light-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--orange-dark-1);\n    --primary-background-component: var(--orange-dark-0);\n    --primary-background-hover: var(--orange-dark-2);\n    --primary-background-active: var(--orange-dark-3);\n    --primary-background-border: var(--orange-dark-4);\n    --primary-content--: var(--orange--);\n    --primary-content-hover: var(--orange-light-7);\n    --primary-content-active: var(--orange-light-6);\n    --secondary-background-app: var(--amber-dark-1);\n    --secondary-background-component: var(--amber-light-0);\n    --secondary-background-hover: var(--amber-dark-2);\n    --secondary-background-border: var(--amber-dark-3);\n    --secondary-background-active: var(--amber-dark-4);\n    --secondary-content--: var(--amber--);\n    --secondary-content-hover: var(--amber-light-7);\n    --secondary-content-active: var(--amber-light-6);\n    --success-background-app: var(--green-dark-1);\n    --success-background-component: var(--green-dark-0);\n    --success-background-hover: var(--green-dark-2);\n    --success-background-border: var(--green-dark-3);\n    --success-background-active: var(--green-dark-4);\n    --success-content--: var(--green--);\n    --success-content-hover: var(--green-light-7);\n    --success-content-active: var(--green-light-6);\n    --warning-background-app: var(--yellow-dark-1);\n    --warning-background-component: var(--yellow-dark-0);\n    --warning-background-hover: var(--yellow-dark-2);\n    --warning-background-border: var(--yellow-dark-3);\n    --warning-background-active: var(--yellow-dark-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-hover: var(--yellow-light-7);\n    --warning-content-active: var(--yellow-light-6);\n    --error-background-app: var(--red-dark-1);\n    --error-background-component: var(--red-dark-0);\n    --error-background-hover: var(--red-dark-2);\n    --error-background-border: var(--red-dark-3);\n    --error-background-active: var(--red-dark-4);\n    --error-content--: var(--red--);\n    --error-content-hover: var(--red-light-7);\n    --error-content-active: var(--red-light-6);\n    --help-background-app: var(--indigo-dark-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-dark-2);\n    --help-background-active: var(--indigo-dark-3);\n    --help-background-border: var(--indigo-dark-4);\n    --help-content--: var(--indigo--);\n    --help-content-hover: var(--indigo-light-7);\n    --help-content-active: var(--indigo-light-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-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-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    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
+var orangeDarkCSS = "/* Themes - Orange Dark */\n:root {\n    --base-background-app: var(--neutral-dark-1);\n    --base-background-component: var(--neutral-dark-0);\n    --base-background-hover: var(--neutral-dark-2);\n    --base-background-border: var(--neutral-dark-3);\n    --base-background-active: var(--neutral-dark-4);\n    --base-content--: var(--neutral-light-0);\n    --base-content-inverse: var(--neutral-black);\n    --base-content-light: var(--neutral-light-1);\n    --base-content-lighter: var(--neutral-light-3);\n    --base-content-lightest: var(--neutral-light-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--orange-dark-1);\n    --primary-background-component: var(--orange-dark-0);\n    --primary-background-hover: var(--orange-dark-2);\n    --primary-background-active: var(--orange-dark-3);\n    --primary-background-border: var(--orange-dark-4);\n    --primary-content--: var(--orange--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--orange-light-7);\n    --primary-content-active: var(--orange-light-6);\n    --secondary-background-app: var(--amber-dark-1);\n    --secondary-background-component: var(--amber-dark-0);\n    --secondary-background-hover: var(--amber-dark-2);\n    --secondary-background-border: var(--amber-dark-3);\n    --secondary-background-active: var(--amber-dark-4);\n    --secondary-content--: var(--amber--);\n    --secondary-content-inverse: var(--neutral-white);\n    --secondary-content-hover: var(--amber-light-7);\n    --secondary-content-active: var(--amber-light-6);\n    --success-background-app: var(--green-dark-1);\n    --success-background-component: var(--green-dark-0);\n    --success-background-hover: var(--green-dark-2);\n    --success-background-border: var(--green-dark-3);\n    --success-background-active: var(--green-dark-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-light-7);\n    --success-content-active: var(--green-light-6);\n    --warning-background-app: var(--yellow-dark-1);\n    --warning-background-component: var(--yellow-dark-0);\n    --warning-background-hover: var(--yellow-dark-2);\n    --warning-background-border: var(--yellow-dark-3);\n    --warning-background-active: var(--yellow-dark-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-light-7);\n    --warning-content-active: var(--yellow-light-6);\n    --error-background-app: var(--red-dark-1);\n    --error-background-component: var(--red-dark-0);\n    --error-background-hover: var(--red-dark-2);\n    --error-background-border: var(--red-dark-3);\n    --error-background-active: var(--red-dark-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-light-7);\n    --error-content-active: var(--red-light-6);\n    --help-background-app: var(--indigo-dark-1);\n    --help-background-component: var(--indigo-dark-0);\n    --help-background-hover: var(--indigo-dark-2);\n    --help-background-active: var(--indigo-dark-3);\n    --help-background-border: var(--indigo-dark-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-light-7);\n    --help-content-active: var(--indigo-light-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";
 
 const THEMES = {
     "blue-light": blueLightCSS,
@@ -6404,6 +6757,7 @@ class YumeTheme extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = "<slot></slot>";
     }
 
     connectedCallback() {
@@ -6447,10 +6801,22 @@ class YumeTheme extends HTMLElement {
     applyVariablesToHost(cssText) {
         const regex = /--([\w-]+):\s*([^;]+);/g;
         let match;
+        this._themeProps = [];
 
         while ((match = regex.exec(cssText)) !== null) {
-            this.style.setProperty(`--${match[1]}`, match[2].trim());
+            const prop = `--${match[1]}`;
+            this.style.setProperty(prop, match[2].trim());
+            this._themeProps.push(prop);
+        }
+    }
+
+    clearThemeProperties() {
+        if (this._themeProps) {
+            for (const prop of this._themeProps) {
+                this.style.removeProperty(prop);
+            }
         }
+        this._themeProps = [];
     }
 }
 
@@ -6458,11 +6824,14 @@ if (!customElements.get("y-theme")) {
     customElements.define("y-theme", YumeTheme);
 }
 
-if (typeof document !== "undefined" && !document.querySelector("[data-yumekit-vars]")) {
+if (
+    typeof document !== "undefined" &&
+    !document.querySelector("[data-yumekit-vars]")
+) {
     const style = document.createElement("style");
     style.setAttribute("data-yumekit-vars", "");
     style.textContent = variablesCSS;
     document.head.appendChild(style);
 }
 
-export { YumeAppbar, YumeAvatar, YumeBadge, YumeButton, YumeCard, YumeCheckbox, YumeInput, YumePanel, YumePanelBar, YumeProgress, YumeRadio, YumeSelect, YumeSlider, YumeTable, YumeTabs, YumeTag, YumeTheme, YumeToast, YumeTooltip };
+export { YumeAppbar, YumeAvatar, YumeBadge, YumeButton, YumeCard, YumeCheckbox, YumeIcon, YumeInput, YumePanel, YumePanelBar, YumeProgress, YumeRadio, YumeSelect, YumeSlider, YumeTable, YumeTabs, YumeTag, YumeTheme, YumeToast, YumeTooltip, getIcon, registerIcon, registerIcons };