@waggylabs/yumekit 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,4 +1,4 @@
-var variablesCSS = "/* Colors */\n:root {\n    --neutral--: #7f8286ff;\n    --neutral-white: #ffffffff;\n    --neutral-black: #000000ff;\n    --neutral-light-0: #f7f7faff;\n    --neutral-light-1: #f0f0f2ff;\n    --neutral-light-2: #dfe0e3ff;\n    --neutral-light-3: #cacbcfff;\n    --neutral-light-4: #bbbdc0ff;\n    --neutral-light-5: #acaeb2ff;\n    --neutral-light-6: #9d9fa3ff;\n    --neutral-light-7: #8e9195ff;\n    --neutral-dark-0: #0c0c0dff;\n    --neutral-dark-1: #151617ff;\n    --neutral-dark-2: #292a2bff;\n    --neutral-dark-3: #37383aff;\n    --neutral-dark-4: #46474aff;\n    --neutral-dark-5: #545659ff;\n    --neutral-dark-6: #626568ff;\n    --neutral-dark-7: #717377ff;\n    --neutral-black-translucent: #0000001f;\n    --neutral-white-translucent: #1111111f;\n    --red--: #b80421ff;\n    --red-light-0: #f2e6e8ff;\n    --red-light-1: #ebcacfff;\n    --red-light-2: #e4aeb6ff;\n    --red-light-3: #dc919dff;\n    --red-light-4: #d57585ff;\n    --red-light-5: #ce596cff;\n    --red-light-6: #c73d53ff;\n    --red-light-7: #bf203aff;\n    --red-dark-0: #0d0103ff;\n    --red-dark-1: #220107ff;\n    --red-dark-2: #38020bff;\n    --red-dark-3: #4d020eff;\n    --red-dark-4: #630312ff;\n    --red-dark-5: #780316ff;\n    --red-dark-6: #8d031aff;\n    --red-dark-7: #a3041dff;\n    --red-translucent: #b804211f;\n    --orange--: #d13704ff;\n    --orange-light-0: #f2e9e6ff;\n    --orange-light-1: #eed3caff;\n    --orange-light-2: #eabdaeff;\n    --orange-light-3: #e6a691ff;\n    --orange-light-4: #e29075ff;\n    --orange-light-5: #dd7a59ff;\n    --orange-light-6: #d9643dff;\n    --orange-light-7: #d54d20ff;\n    --orange-dark-0: #0d0300ff;\n    --orange-dark-1: #260a01ff;\n    --orange-dark-2: #3e1001ff;\n    --orange-dark-3: #571702ff;\n    --orange-dark-4: #6f1d02ff;\n    --orange-dark-5: #882403ff;\n    --orange-dark-6: #a02a03ff;\n    --orange-dark-7: #b93104ff;\n    --orange-translucent: #d137041f;\n    --amber--: #d16004ff;\n    --amber-light-0: #f2ece6ff;\n    --amber-light-1: #eedbcaff;\n    --amber-light-2: #eac9aeff;\n    --amber-light-3: #e6b891ff;\n    --amber-light-4: #e2a675ff;\n    --amber-light-5: #dd9559ff;\n    --amber-light-6: #d9833dff;\n    --amber-light-7: #d57220ff;\n    --amber-dark-0: #0d0c0cff;\n    --amber-dark-1: #26170bff;\n    --amber-dark-2: #3e210aff;\n    --amber-dark-3: #572c09ff;\n    --amber-dark-4: #6f3608ff;\n    --amber-dark-5: #884107ff;\n    --amber-dark-6: #a04b06ff;\n    --amber-dark-7: #b95605ff;\n    --amber-translucent: #d160041f;\n    --yellow--: #d17f04ff;\n    --yellow-light-0: #f2eadfff;\n    --yellow-light-1: #eeddc4ff;\n    --yellow-light-2: #eacfa8ff;\n    --yellow-light-3: #e6c28dff;\n    --yellow-light-4: #e2b572ff;\n    --yellow-light-5: #dda756ff;\n    --yellow-light-6: #d99a3bff;\n    --yellow-light-7: #d58c1fff;\n    --yellow-dark-0: #0d0c0cff;\n    --yellow-dark-1: #261a0bff;\n    --yellow-dark-2: #3e290aff;\n    --yellow-dark-3: #573709ff;\n    --yellow-dark-4: #6f4608ff;\n    --yellow-dark-5: #885407ff;\n    --yellow-dark-6: #a06206ff;\n    --yellow-dark-7: #b97105ff;\n    --yellow-translucent: #d17f041f;\n    --lime--: #cad104ff;\n    --lime-light-0: #f2f2dfff;\n    --lime-light-1: #edeec4ff;\n    --lime-light-2: #e8eaa8ff;\n    --lime-light-3: #e3e68dff;\n    --lime-light-4: #dee272ff;\n    --lime-light-5: #d9dd56ff;\n    --lime-light-6: #d4d93bff;\n    --lime-light-7: #cfd51fff;\n    --lime-dark-0: #0d0d0cff;\n    --lime-dark-1: #25260bff;\n    --lime-dark-2: #3c3e0aff;\n    --lime-dark-3: #545709ff;\n    --lime-dark-4: #6c6f08ff;\n    --lime-dark-5: #838807ff;\n    --lime-dark-6: #9ba006ff;\n    --lime-dark-7: #b2b905ff;\n    --lime-translucent: #cad1041f;\n    --green--: #2dba73ff;\n    --green-light-0: #e6f2ecff;\n    --green-light-1: #cfebddff;\n    --green-light-2: #b8e4ceff;\n    --green-light-3: #a1ddbfff;\n    --green-light-4: #8ad6b0ff;\n    --green-light-5: #72cfa0ff;\n    --green-light-6: #5bc891ff;\n    --green-light-7: #44c182ff;\n    --green-dark-0: #030d08ff;\n    --green-dark-1: #082315ff;\n    --green-dark-2: #0e3823ff;\n    --green-dark-3: #134e30ff;\n    --green-dark-4: #18643eff;\n    --green-dark-5: #1d794bff;\n    --green-dark-6: #238f58ff;\n    --green-dark-7: #28a466ff;\n    --green-translucent: #2dba731f;\n    --teal--: #04b8b8ff;\n    --teal-light-0: #f2fffeff;\n    --teal-light-1: #d4f6f5ff;\n    --teal-light-2: #b7ededff;\n    --teal-light-3: #99e4e4ff;\n    --teal-light-4: #7bdcdbff;\n    --teal-light-5: #5dd3d2ff;\n    --teal-light-6: #40cacaff;\n    --teal-light-7: #22c1c1ff;\n    --teal-dark-0: #0c0d0dff;\n    --teal-dark-1: #0b2624ff;\n    --teal-dark-2: #0a3e3cff;\n    --teal-dark-3: #095753ff;\n    --teal-dark-4: #086f6aff;\n    --teal-dark-5: #078881ff;\n    --teal-dark-6: #06a099ff;\n    --teal-dark-7: #05b9b0ff;\n    --teal-translucent: #04b8b81f;\n    --blue--: #0576ffff;\n    --blue-light-0: #ebf5ffff;\n    --blue-light-1: #cee5ffff;\n    --blue-light-2: #b2d5ffff;\n    --blue-light-3: #95c5ffff;\n    --blue-light-4: #78b6ffff;\n    --blue-light-5: #5ba6ffff;\n    --blue-light-6: #3f96ffff;\n    --blue-light-7: #2286ffff;\n    --blue-dark-0: #0c0c0dff;\n    --blue-dark-1: #0b192bff;\n    --blue-dark-2: #0a274aff;\n    --blue-dark-3: #093468ff;\n    --blue-dark-4: #094186ff;\n    --blue-dark-5: #084ea4ff;\n    --blue-dark-6: #075cc3ff;\n    --blue-dark-7: #0669e1ff;\n    --blue-translucent: #0576ff1f;\n    --indigo--: #5405ffff;\n    --indigo-light-0: #f6f2ffff;\n    --indigo-light-1: #e2d4ffff;\n    --indigo-light-2: #ceb7ffff;\n    --indigo-light-3: #b999ffff;\n    --indigo-light-4: #a57cffff;\n    --indigo-light-5: #915effff;\n    --indigo-light-6: #7d40ffff;\n    --indigo-light-7: #6823ffff;\n    --indigo-dark-0: #0d0c0cff;\n    --indigo-dark-1: #160b2aff;\n    --indigo-dark-2: #1f0a49ff;\n    --indigo-dark-3: #280967ff;\n    --indigo-dark-4: #310986ff;\n    --indigo-dark-5: #3908a4ff;\n    --indigo-dark-6: #4207c2ff;\n    --indigo-dark-7: #4b06e1ff;\n    --indigo-translucent: #5405ff1f;\n    --purple--: #8a05ffff;\n    --purple-light-0: #f9f2ffff;\n    --purple-light-1: #ebd4ffff;\n    --purple-light-2: #ddb7ffff;\n    --purple-light-3: #cf99ffff;\n    --purple-light-4: #c27cffff;\n    --purple-light-5: #b45effff;\n    --purple-light-6: #a640ffff;\n    --purple-light-7: #9823ffff;\n    --purple-dark-0: #0c0c0dff;\n    --purple-dark-1: #1c0b2bff;\n    --purple-dark-2: #2c0a4aff;\n    --purple-dark-3: #3b0968ff;\n    --purple-dark-4: #4b0986ff;\n    --purple-dark-5: #5b08a4ff;\n    --purple-dark-6: #6b07c3ff;\n    --purple-dark-7: #7a06e1ff;\n    --purple-translucent: #8a05ff1f;\n    --pink--: #ff05a8ff;\n    --pink-light-0: #f9f2ffff;\n    --pink-light-1: #fad4f4ff;\n    --pink-light-2: #fbb7e9ff;\n    --pink-light-3: #fb99deff;\n    --pink-light-4: #fc7cd4ff;\n    --pink-light-5: #fd5ec9ff;\n    --pink-light-6: #fe40beff;\n    --pink-light-7: #fe23b3ff;\n    --pink-dark-0: #0c0c0dff;\n    --pink-dark-1: #2a0b20ff;\n    --pink-dark-2: #490a34ff;\n    --pink-dark-3: #670947ff;\n    --pink-dark-4: #86095bff;\n    --pink-dark-5: #a4086eff;\n    --pink-dark-6: #c20781ff;\n    --pink-dark-7: #e10695ff;\n    --pink-translucent: #ff05a81f;\n    --brown--: #ab642eff;\n    --brown-light-0: #f2dfdfff;\n    --brown-light-1: #e9d0c9ff;\n    --brown-light-2: #e0c0b3ff;\n    --brown-light-3: #d7b19dff;\n    --brown-light-4: #cfa287ff;\n    --brown-light-5: #c69270ff;\n    --brown-light-6: #bd835aff;\n    --brown-light-7: #b47344ff;\n    --brown-dark-0: #0d0c0cff;\n    --brown-dark-1: #211710ff;\n    --brown-dark-2: #352215ff;\n    --brown-dark-3: #482d19ff;\n    --brown-dark-4: #5c381dff;\n    --brown-dark-5: #704321ff;\n    --brown-dark-6: #844e26ff;\n    --brown-dark-7: #97592aff;\n    --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n    --border-none: 0px;\n    --border-x-thin: 1px;\n    --border-thin: 2px;\n    --border-medium: 4px;\n    --border-thick: 8px;\n    --border-x-thick: 10px;\n    --spacing-none: 0px;\n    --spacing-4x-small: 1px;\n    --spacing-2x-small: 2px;\n    --spacing-x-small: 4px;\n    --spacing-small: 6px;\n    --spacing-medium: 8px;\n    --spacing-large: 12px;\n    --spacing-x-large: 16px;\n    --spacing-2x-large: 24px;\n    --spacing-4x-large: 32px;\n    --font-size-display-1: 6em;\n    --font-size-display-2: 5.5em;\n    --font-size-display-3: 4.5em;\n    --font-size-display-4: 3.5em;\n    --font-size-h1: 2em;\n    --font-size-h2: 1.5em;\n    --font-size-h3: 1.17em;\n    --font-size-h4: 1em;\n    --font-size-h5: 0.83em;\n    --font-size-paragraph: 1em;\n    --font-size-small: 0.8em;\n    --font-size-label: 0.83em;\n    --font-size-button: 1em;\n    --font-size-quote: 1.17em;\n    --radii-none: 0px;\n    --radii-x-small: 0.125em;\n    --radii-small: 0.25em;\n    --radii-medium: 0.375em;\n    --radii-large: 0.5px;\n    --radii-x-large: 1em;\n    --radii-full: 9999px;\n    --sizing-2x-small: 16px;\n    --sizing-x-small: 19px;\n    --sizing-small: 32px;\n    --sizing-medium: 40px;\n    --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n    /* appbar */\n    --component-appbar-collapsed-width: 48px;\n    --component-appbar-padding: var(--spacing-medium);\n    --component-appbar-width: 240px;\n    --component-appbar-z-index: 100;\n\n    /* avatar */\n    --component-avatar-border-radius-circle: var(--radii-full);\n    --component-avatar-border-radius-square: var(--radii-small);\n    --component-avatar-size-large: var(--sizing-large);\n    --component-avatar-size-medium: var(--sizing-medium);\n    --component-avatar-size-small: var(--sizing-small);\n\n    /* badge */\n    --component-badge-border-radius-circle: var(--radii-full);\n    --component-badge-border-radius-square: var(--radii-small);\n    --component-badge-padding-large: var(--spacing-small);\n    --component-badge-padding-medium: var(--spacing-x-small);\n    --component-badge-padding-small: var(--spacing-2x-small);\n    --component-badge-size-large: var(--sizing-medium);\n    --component-badge-size-medium: var(--sizing-small);\n    --component-badge-size-small: var(--sizing-2x-small);\n\n    /* button */\n    --component-button-border-radius-inner: var(--radii-x-small);\n    --component-button-border-radius-outer: var(--radii-small);\n    --component-button-border-width: var(--border-thin);\n    --component-button-border-width-2: var(--border-x-thin);\n    --component-button-padding-large: var(--spacing-x-large);\n    --component-button-padding-medium: var(--spacing-medium);\n    --component-button-padding-small: var(--spacing-x-small);\n\n    /* card */\n    --component-card-border-radius-inner: var(--radii-small);\n    --component-card-border-radius-outer: var(--radii-medium);\n    --component-card-border-width: var(--border-x-thin);\n    --component-card-inner-border-width: var(--border-x-thin);\n    --component-card-padding-inner: var(--spacing-medium);\n    --component-card-padding-outer: var(--spacing-x-large);\n\n    /* checkbox */\n    --component-checkbox-icon-size: var(--sizing-2x-small);\n    --component-checkbox-size: var(--sizing-x-small);\n\n    /* dialog */\n    --component-dialog-border-radius-inner: var(--radii-x-small);\n    --component-dialog-border-radius-outer: var(--radii-small);\n    --component-dialog-border-width: var(--border-x-thin);\n    --component-dialog-inner-border-width: var(--border-x-thin);\n    --component-dialog-padding: var(--spacing-medium);\n    --component-dialog-z-index: 1000;\n\n    /* drawer */\n    --component-drawer-border-radius: var(--radii-small);\n    --component-drawer-border-width: var(--border-x-thin);\n    --component-drawer-handle-padding: var(--spacing-x-small);\n    --component-drawer-handle-width: var(--spacing-x-small);\n    --component-drawer-padding: var(--spacing-medium);\n    --component-drawer-z-index: 5000;\n\n    /* icon */\n    --component-icon-size-large: var(--spacing-4x-large);\n    --component-icon-size-medium: var(--spacing-2x-large);\n    --component-icon-size-small: var(--spacing-x-large);\n\n    /* inputs */\n    --component-inputs-border-radius-inner: var(--radii-x-small);\n    --component-inputs-border-radius-outer: var(--radii-small);\n    --component-inputs-border-width: var(--border-thin);\n    --component-inputs-padding-large: var(--spacing-x-large);\n    --component-inputs-padding-medium: var(--spacing-medium);\n    --component-inputs-padding-small: var(--spacing-x-small);\n\n    /* menu */\n    --component-menu-border-radius: var(--radii-x-small);\n    --component-menu-border-width: var(--border-x-thin);\n    --component-menu-padding-horizontal: var(--spacing-small);\n    --component-menu-padding-vertical: var(--spacing-x-small);\n    --component-menu-z-index: 1001;\n\n    /* panelbar */\n    --component-panelbar-border-radius: var(--radii-x-small);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-indent: var(--spacing-x-large);\n    --component-panelbar-padding: var(--spacing-medium);\n\n    /* progress */\n    --component-progress-border-radius-inner: var(--radii-small);\n    --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-progress-border-width: var(--border-x-thin);\n    --component-progress-padding: var(--spacing-x-small);\n    --component-progress-size-large: var(--sizing-large);\n    --component-progress-size-medium: var(--sizing-medium);\n    --component-progress-size-small: var(--sizing-small);\n\n    /* radio */\n    --component-radio-dot-offset: var(--spacing-2x-small);\n    --component-radio-dot-size: var(--spacing-medium);\n    --component-radio-size: var(--sizing-2x-small);\n\n    /* select */\n    --component-select-z-index: 6000;\n\n    /* sidebar */\n    --component-sidebar-border-radius: var(--radii-small);\n    --component-sidebar-border-width: var(--border-x-thin);\n\n    /* slider */\n    --component-slider-border-radius-inner: var(--radii-small);\n    --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-slider-border-width: var(--border-x-thin);\n    --component-slider-padding: var(--spacing-x-small);\n    --component-slider-thumb-border-radius: var(--radii-x-small);\n\n    /* switch */\n    --component-switch-border-radius: var(--radii-full);\n    --component-switch-border-width: var(--border-x-thin);\n    --component-switch-padding: var(--spacing-2x-small);\n\n    /* tab */\n    --component-tab-border-radius-inner: var(--radii-x-small);\n    --component-tab-border-radius-outer: var(--radii-small);\n    --component-tab-border-width: var(--border-x-thin);\n    --component-tab-content-padding: var(--spacing-large);\n    --component-tab-gap-large: var(--spacing-large);\n    --component-tab-gap-medium: var(--spacing-small);\n    --component-tab-gap-small: var(--spacing-2x-small);\n    --component-tab-padding-large: var(--spacing-2x-large);\n    --component-tab-padding-medium: var(--spacing-large);\n    --component-tab-padding-small: var(--spacing-small);\n\n    /* table */\n    --component-table-border-radius: var(--radii-small);\n    --component-table-border-width: var(--border-x-thin);\n    --component-table-border-width-header: var(--border-thin);\n    --component-table-padding-large: var(--spacing-large);\n    --component-table-padding-medium: var(--spacing-medium);\n    --component-table-padding-small: var(--spacing-small);\n\n    /* tag */\n    --component-tag-border-radius-circle: var(--radii-full);\n    --component-tag-border-radius-square: var(--radii-small);\n    --component-tag-padding-large: var(--spacing-small);\n    --component-tag-padding-medium: var(--spacing-x-small);\n    --component-tag-padding-small: var(--spacing-2x-small);\n    --component-tag-height-large: 38px;\n    --component-tag-height-medium: 28px;\n    --component-tag-height-small: 22px;\n    --component-tag-size-large: var(--sizing-large);\n    --component-tag-size-medium: var(--sizing-medium);\n    --component-tag-size-small: var(--sizing-small);\n\n    /* toast */\n    --component-toast-border-radius: var(--radii-small);\n    --component-toast-offset: var(--spacing-x-large);\n    --component-toast-padding: var(--spacing-medium);\n    --component-toast-padding-h: var(--spacing-x-large);\n    --component-toast-z-index: 9000;\n\n    /* tooltip */\n    --component-tooltip-border-radius: var(--radii-small);\n    --component-tooltip-padding: var(--spacing-x-small);\n    --component-tooltip-padding-h: var(--spacing-medium);\n    --component-tooltip-z-index: 7000;\n}\n\n/* Default Theme (Blue Light) */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-inverse: var(--neutral-white);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-light-1);\n    --primary-background-component: var(--blue-light-0);\n    --primary-background-hover: var(--blue-light-2);\n    --primary-background-active: var(--blue-light-3);\n    --primary-background-border: var(--blue-light-4);\n    --primary-content--: var(--blue--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--blue-dark-7);\n    --primary-content-active: var(--blue-dark-6);\n    --secondary-background-app: var(--teal-light-1);\n    --secondary-background-component: var(--teal-light-0);\n    --secondary-background-hover: var(--teal-light-2);\n    --secondary-background-border: var(--teal-light-3);\n    --secondary-background-active: var(--teal-light-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-inverse: var(--neutral-black);\n    --secondary-content-hover: var(--teal-dark-7);\n    --secondary-content-active: var(--teal-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-appbar-border-width: var(--component-sidebar-border-width);\n    --component-appbar-border-radius: var(--component-sidebar-border-radius);\n    --component-appbar-inner-border-width: var(\n        --component-sidebar-border-width\n    );\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-dialog-shadow: var(--base-shadow);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --component-tabs-font-family: var(--font-family-body);\n    --component-slider-width: 129px;\n    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
+var 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: 52px;\n    --component-appbar-mobile-breakpoint: 768px;\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-x-large: 28px;\n    --component-icon-size-large: 22px;\n    --component-icon-size-medium: 18px;\n    --component-icon-size-small: 14px;\n    --component-icon-size-x-small: 10px;\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-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-thin);\n    --component-switch-padding: var(--spacing-2x-small);\n\n    /* tab */\n    --component-tab-border-radius-inner: var(--radii-x-small);\n    --component-tab-border-radius-outer: var(--radii-small);\n    --component-tab-border-width: var(--border-x-thin);\n    --component-tab-content-padding: var(--spacing-large);\n    --component-tab-gap-large: var(--spacing-large);\n    --component-tab-gap-medium: var(--spacing-small);\n    --component-tab-gap-small: var(--spacing-2x-small);\n    --component-tab-padding-large: var(--spacing-2x-large);\n    --component-tab-padding-medium: var(--spacing-large);\n    --component-tab-padding-small: var(--spacing-small);\n\n    /* table */\n    --component-table-border-radius: var(--radii-small);\n    --component-table-border-width: var(--border-x-thin);\n    --component-table-border-width-header: var(--border-thin);\n    --component-table-padding-large: var(--spacing-large);\n    --component-table-padding-medium: var(--spacing-medium);\n    --component-table-padding-small: var(--spacing-small);\n\n    /* tag */\n    --component-tag-border-radius-circle: var(--radii-full);\n    --component-tag-border-radius-square: var(--radii-small);\n    --component-tag-padding-large: var(--spacing-small);\n    --component-tag-padding-medium: var(--spacing-x-small);\n    --component-tag-padding-small: var(--spacing-2x-small);\n    --component-tag-height-large: 38px;\n    --component-tag-height-medium: 28px;\n    --component-tag-height-small: 22px;\n    --component-tag-size-large: var(--sizing-large);\n    --component-tag-size-medium: var(--sizing-medium);\n    --component-tag-size-small: var(--sizing-small);\n\n    /* toast */\n    --component-toast-border-radius: var(--radii-small);\n    --component-toast-offset: var(--spacing-x-large);\n    --component-toast-padding: var(--spacing-medium);\n    --component-toast-padding-h: var(--spacing-x-large);\n    --component-toast-z-index: 9000;\n\n    /* tooltip */\n    --component-tooltip-border-radius: var(--radii-small);\n    --component-tooltip-padding: var(--spacing-x-small);\n    --component-tooltip-padding-h: var(--spacing-medium);\n    --component-tooltip-z-index: 7000;\n}\n\n/* Default Theme (Blue Light) */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-inverse: var(--neutral-white);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-light-1);\n    --primary-background-component: var(--blue-light-0);\n    --primary-background-hover: var(--blue-light-2);\n    --primary-background-active: var(--blue-light-3);\n    --primary-background-border: var(--blue-light-4);\n    --primary-content--: var(--blue--);\n    --primary-content-inverse: var(--neutral-white);\n    --primary-content-hover: var(--blue-dark-7);\n    --primary-content-active: var(--blue-dark-6);\n    --secondary-background-app: var(--teal-light-1);\n    --secondary-background-component: var(--teal-light-0);\n    --secondary-background-hover: var(--teal-light-2);\n    --secondary-background-border: var(--teal-light-3);\n    --secondary-background-active: var(--teal-light-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-inverse: var(--neutral-black);\n    --secondary-content-hover: var(--teal-dark-7);\n    --secondary-content-active: var(--teal-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-inverse: var(--neutral-black);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-inverse: var(--neutral-black);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-inverse: var(--neutral-white);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-inverse: var(--neutral-white);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-appbar-border-width: var(--component-sidebar-border-width);\n    --component-appbar-border-radius: var(--component-sidebar-border-radius);\n    --component-appbar-inner-border-width: var(\n        --component-sidebar-border-width\n    );\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-dialog-shadow: var(--base-shadow);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --component-tabs-font-family: var(--font-family-body);\n    --component-slider-width: 129px;\n    --font-family-header: \"Lexend\", sans-serif;\n    --font-family-body: \"Lexend\", sans-serif;\n}\n";
 
 /**
  * Icon registry — a runtime map of icon names to SVG markup strings.
@@ -29,6 +29,8 @@ function getIcon(name) {
     return icons.get(name) || "";
 }
 
+var accessibility = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"4\" r=\"1.5\"/>\n  <path d=\"M7 8h10\"/>\n  <path d=\"M12 8v4\"/>\n  <path d=\"m8 20 4-8 4 8\"/>\n  <path d=\"M7 16h10\"/>\n</svg>\n";
+
 var ai = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 8V4H8\"/>\n  <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\"/>\n  <path d=\"M2 14h2M20 14h2M15 13v2M9 13v2\"/>\n</svg>\n";
 
 var arrowRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>\n  <polyline points=\"12 5 19 12 12 19\"/>\n</svg>\n";
@@ -111,6 +113,8 @@ var diagram = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" f
 
 var discord = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n  <path d=\"M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028z\"/>\n</svg>\n";
 
+var download = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n  <polyline points=\"7 10 12 15 17 10\"/>\n  <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/>\n</svg>\n";
+
 var expandRight$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polyline points=\"13 17 18 12 13 7\"/>\n  <polyline points=\"6 17 11 12 6 7\"/>\n</svg>\n";
 
 var features = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n  <path d=\"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83\"/>\n</svg>\n";
@@ -123,6 +127,10 @@ var folder = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fi
 
 var github = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n  <path d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\"/>\n</svg>\n";
 
+var globe = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n  <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"/>\n  <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"/>\n</svg>\n";
+
+var grid = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n  <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n  <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n  <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n</svg>\n";
+
 var home = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/>\n  <polyline points=\"9 22 9 12 15 12 15 22\"/>\n</svg>\n";
 
 var image = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n  <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"/>\n  <polyline points=\"21 15 16 10 5 21\"/>\n</svg>\n";
@@ -131,28 +139,48 @@ var indeterminate$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2
 
 var layout = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n  <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\n  <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"/>\n</svg>\n";
 
+var leftFromBracket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n  <polyline points=\"14 7 9 12 14 17\"/>\n  <line x1=\"9\" y1=\"12\" x2=\"21\" y2=\"12\"/>\n</svg>\n";
+
+var leftToBracket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n  <polyline points=\"16 17 21 12 16 7\"/>\n  <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n</svg>\n";
+
 var listCheck = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/>\n  <line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/>\n  <line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/>\n  <polyline points=\"3 6 4 7 6 5\"/>\n  <polyline points=\"3 12 4 13 6 11\"/>\n  <polyline points=\"3 18 4 19 6 17\"/>\n</svg>\n";
 
+var lock = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\n  <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\n</svg>\n";
+
 var logo = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 2L2 7l10 5 10-5-10-5z\"/>\n  <path d=\"M2 17l10 5 10-5\"/>\n  <path d=\"M2 12l10 5 10-5\"/>\n</svg>\n";
 
 var mail = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/>\n  <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/>\n</svg>\n";
 
+var menu$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"/>\n  <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/>\n  <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"/>\n</svg>\n";
+
 var moon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"/>\n</svg>\n";
 
 var palette = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"13.5\" cy=\"6.5\" r=\"1.5\"/>\n  <circle cx=\"17.5\" cy=\"10.5\" r=\"1.5\"/>\n  <circle cx=\"8.5\" cy=\"7.5\" r=\"1.5\"/>\n  <circle cx=\"6.5\" cy=\"12.5\" r=\"1.5\"/>\n  <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"/>\n</svg>\n";
 
 var plus = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/>\n  <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>\n</svg>\n";
 
+var puzzle = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.707-1.704L4.23 8.77a.979.979 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.627-1.627a2.404 2.404 0 0 1 3.409 0l1.568 1.568c.219.22.556.328.878.29.493-.075.84-.505 1.02-.969a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.968 1.02z\"/>\n</svg>\n";
+
+var rightFromBracket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"/>\n  <polyline points=\"8 7 3 12 8 17\"/>\n  <line x1=\"3\" y1=\"12\" x2=\"15\" y2=\"12\"/>\n</svg>\n";
+
+var rightToBracket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"/>\n  <polyline points=\"10 17 15 12 10 7\"/>\n  <line x1=\"15\" y1=\"12\" x2=\"3\" y2=\"12\"/>\n</svg>\n";
+
 var save = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"/>\n  <polyline points=\"17 21 17 13 7 13 7 21\"/>\n  <polyline points=\"7 3 7 8 15 8\"/>\n</svg>\n";
 
 var search = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n  <path d=\"m21 21-4.35-4.35\"/>\n</svg>\n";
 
 var settings = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n  <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"/>\n</svg>\n";
 
+var shield = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n</svg>\n";
+
 var star = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/>\n</svg>\n";
 
 var sun = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"5\"/>\n  <path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"/>\n</svg>\n";
 
+var swap = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polyline points=\"16 3 21 3 21 8\"/>\n  <line x1=\"4\" y1=\"20\" x2=\"21\" y2=\"3\"/>\n  <polyline points=\"21 16 21 21 16 21\"/>\n  <line x1=\"15\" y1=\"15\" x2=\"21\" y2=\"21\"/>\n  <line x1=\"4\" y1=\"4\" x2=\"9\" y2=\"9\"/>\n</svg>\n";
+
+var upload = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n  <polyline points=\"17 8 12 3 7 8\"/>\n  <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n</svg>\n";
+
 var user = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n  <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n</svg>\n";
 
 var users = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"/>\n  <circle cx=\"9\" cy=\"7\" r=\"4\"/>\n  <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"/>\n  <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/>\n</svg>\n";
@@ -169,6 +197,7 @@ var warning = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" f
 
 
 registerIcons({
+    accessibility,
     ai,
     "arrow-right": arrowRight,
     "arrow-up": arrowUp,
@@ -210,27 +239,40 @@ registerIcons({
     compass,
     diagram,
     discord,
+    download,
     "expand-right": expandRight$1,
     features,
     figma,
     filter,
     folder,
     github,
+    globe,
+    grid,
     home,
     image,
     indeterminate: indeterminate$1,
     layout,
+    "left-from-bracket": leftFromBracket,
+    "left-to-bracket": leftToBracket,
     "list-check": listCheck,
+    lock,
     logo,
     mail,
+    menu: menu$1,
     moon,
     palette,
     plus,
+    puzzle,
+    "right-from-bracket": rightFromBracket,
+    "right-to-bracket": rightToBracket,
     save,
     search,
     settings,
+    shield,
     star,
     sun,
+    swap,
+    upload,
     user,
     users,
     warning,
@@ -293,6 +335,7 @@ class YumeButton extends HTMLElement {
         }
     }
 
+    /** The current selected value(s), comma-separated when 'multiple' is set. */
     get value() {
         if (this.hasAttribute("multiple")) {
             return Array.from(this.selectedValues).join(",");
@@ -323,6 +366,10 @@ class YumeButton extends HTMLElement {
         this.setAttribute("value", newVal);
     }
 
+    /**
+     * Sets the button options from an array of objects.
+     * @param {Array<Object>} options
+     */
     setOptions(options) {
         this.setAttribute("options", JSON.stringify(options));
     }
@@ -900,7 +947,6 @@ function sanitizeSvg(raw) {
         }
     };
 
-    // Sanitize the <svg> element's own attributes
     for (const attr of [...svg.attributes]) {
         if (!ALLOWED_ATTRS.has(attr.name.toLowerCase())) {
             svg.removeAttribute(attr.name);
@@ -942,6 +988,7 @@ class YumeIcon extends HTMLElement {
         this.render();
     }
 
+    /** The registered icon name to display. */
     get name() {
         return this.getAttribute("name") || "";
     }
@@ -949,6 +996,7 @@ class YumeIcon extends HTMLElement {
         this.setAttribute("name", val);
     }
 
+    /** Icon size: "small" | "medium" | "large" (default "medium"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -956,6 +1004,7 @@ class YumeIcon extends HTMLElement {
         this.setAttribute("size", val);
     }
 
+    /** Color theme: "base" | "primary" | "secondary" | "success" | "warning" | "error" | "help". */
     get color() {
         return this.getAttribute("color") || "";
     }
@@ -964,6 +1013,7 @@ class YumeIcon extends HTMLElement {
         else this.removeAttribute("color");
     }
 
+    /** Accessible label for the icon. When set, the icon gets role="img". */
     get label() {
         return this.getAttribute("label") || "";
     }
@@ -972,8 +1022,9 @@ class YumeIcon extends HTMLElement {
         else this.removeAttribute("label");
     }
 
+    /** Stroke weight: "thin" | "regular" | "thick". */
     get weight() {
-        return this.getAttribute("weight") || "";
+        return this.getAttribute("weight") || "regular";
     }
     set weight(val) {
         if (val) this.setAttribute("weight", val);
@@ -995,18 +1046,22 @@ class YumeIcon extends HTMLElement {
 
     _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)",
+            "x-small": "var(--component-icon-size-x-small, 10px)",
+            small: "var(--component-icon-size-small, 14px)",
+            medium: "var(--component-icon-size-medium, 18px)",
+            large: "var(--component-icon-size-large, 22px)",
+            "x-large": "var(--component-icon-size-x-large, 28px)",
         };
         return map[size] || map.medium;
     }
 
     _getWeight(weight) {
         const map = {
-            thin: "1",
-            regular: "1.5",
-            thick: "2",
+            "x-thin": "1",
+            thin: "1.5",
+            regular: "2",
+            thick: "2.5",
+            "x-thick": "3",
         };
         return map[weight] || "";
     }
@@ -1074,11 +1129,14 @@ class YumeMenu extends HTMLElement {
 
     connectedCallback() {
         if (!this.hasAttribute("items")) this.items = [];
+
         this._setupAnchor();
         this.render();
+
         document.addEventListener("click", this._onDocumentClick);
         window.addEventListener("scroll", this._onScrollOrResize, true);
         window.addEventListener("resize", this._onScrollOrResize);
+
         this.style.position = "fixed";
         this.style.zIndex = "1000";
         this.style.display = "none";
@@ -1086,6 +1144,7 @@ class YumeMenu extends HTMLElement {
 
     disconnectedCallback() {
         this._teardownAnchor();
+
         document.removeEventListener("click", this._onDocumentClick);
         window.removeEventListener("scroll", this._onScrollOrResize, true);
         window.removeEventListener("resize", this._onScrollOrResize);
@@ -1093,14 +1152,18 @@ class YumeMenu extends HTMLElement {
 
     attributeChangedCallback(name, oldVal, newVal) {
         if (oldVal === newVal) return;
+
         if (name === "items" || name === "size") this.render();
+
         if (name === "anchor") {
             this._teardownAnchor();
             this._setupAnchor();
         }
+
         if (name === "visible") {
             this._updatePosition();
         }
+
         if (name === "direction") {
             this._updatePosition();
         }
@@ -1211,9 +1274,20 @@ class YumeMenu extends HTMLElement {
 
     _onAnchorClick(e) {
         e.stopPropagation();
+        if (!this.visible) {
+            YumeMenu._closeAll(this);
+        }
         this.visible = !this.visible;
     }
 
+    static _closeAll(except) {
+        document.querySelectorAll("y-menu").forEach((menu) => {
+            if (menu !== except && menu.visible) {
+                menu.visible = false;
+            }
+        });
+    }
+
     _onDocumentClick(e) {
         const path = e.composedPath();
         if (this._anchorEl && path.includes(this._anchorEl)) return;
@@ -1253,7 +1327,13 @@ class YumeMenu extends HTMLElement {
         }
 
         const anchorRect = this._anchorEl.getBoundingClientRect();
+
+        // Temporarily show off-screen to measure actual dimensions
+        this.style.visibility = "hidden";
+        this.style.display = "block";
         const menuRect = this.getBoundingClientRect();
+        this.style.visibility = "";
+
         const vw = window.innerWidth;
         const vh = window.innerHeight;
 
@@ -1314,8 +1394,8 @@ class YumeMenu extends HTMLElement {
         this.shadowRoot.innerHTML = "";
 
         const paddingVar = `var(--component-button-padding-${this.size}, 0.5rem)`;
-
         const style = document.createElement("style");
+
         style.textContent = `
             ul.menu,
             ul.submenu {
@@ -1368,12 +1448,14 @@ class YumeMenu extends HTMLElement {
                 flex: 1;
             }
         `;
+
         this.shadowRoot.appendChild(style);
 
         const rootUl = this._createMenuList(this.items);
         rootUl.classList.add("menu");
         rootUl.setAttribute("role", "menu");
         rootUl.setAttribute("part", "menu");
+
         this.shadowRoot.appendChild(rootUl);
     }
 }
@@ -1411,6 +1493,10 @@ const checkmark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><
 
 const indeterminate = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" rx="1" ry="1" fill="currentColor"/></svg>`;
 
+/* ── Menu (hamburger) ────────────────────────────────────────────── */
+
+const menu = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>`;
+
 /* ── Close / remove ───────────────────────────────────────────────── */
 
 const close = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"><line x1="6" y1="6" x2="14" y2="14" /><line x1="14" y1="6" x2="6" y2="14" /></svg>`;
@@ -1456,6 +1542,7 @@ class YumeAppbar extends HTMLElement {
             "size",
             "menu-direction",
             "sticky",
+            "mobile-breakpoint",
         ];
     }
 
@@ -1463,17 +1550,26 @@ class YumeAppbar extends HTMLElement {
         super();
         this.attachShadow({ mode: "open" });
         this._onCollapseClick = this._onCollapseClick.bind(this);
+        this._onMediaChange = this._onMediaChange.bind(this);
         this._idCounter = 0;
+        this._mql = null;
+        this._isMobile = false;
     }
 
     connectedCallback() {
+        this._setupMediaQuery();
         this.render();
     }
 
-    disconnectedCallback() {}
+    disconnectedCallback() {
+        this._teardownMediaQuery();
+    }
 
     attributeChangedCallback(name, oldVal, newVal) {
         if (oldVal === newVal) return;
+        if (name === "mobile-breakpoint" || name === "orientation") {
+            this._setupMediaQuery();
+        }
         this.render();
     }
 
@@ -1531,6 +1627,23 @@ class YumeAppbar extends HTMLElement {
         else this.removeAttribute("sticky");
     }
 
+    /**
+     * Override the mobile breakpoint (in pixels) for this instance.
+     * Falls back to the CSS variable --component-appbar-mobile-breakpoint (default 768).
+     */
+    get mobileBreakpoint() {
+        return this.getAttribute("mobile-breakpoint") || "";
+    }
+    set mobileBreakpoint(val) {
+        if (val) this.setAttribute("mobile-breakpoint", val);
+        else this.removeAttribute("mobile-breakpoint");
+    }
+
+    /** Whether the appbar is currently rendering in mobile mode. */
+    get mobile() {
+        return this._isMobile;
+    }
+
     toggle() {
         this.collapsed = !this.collapsed;
     }
@@ -1553,7 +1666,228 @@ class YumeAppbar extends HTMLElement {
         return false;
     }
 
+    _getBreakpointPx() {
+        const attr = this.mobileBreakpoint;
+        if (attr) {
+            const px = parseInt(attr, 10);
+            if (!isNaN(px) && px > 0) return px;
+        }
+        const cssVal = getComputedStyle(document.documentElement)
+            .getPropertyValue("--component-appbar-mobile-breakpoint")
+            .trim();
+        if (cssVal) {
+            const px = parseInt(cssVal, 10);
+            if (!isNaN(px) && px > 0) return px;
+        }
+        return 768;
+    }
+
+    _setupMediaQuery() {
+        this._teardownMediaQuery();
+        if (this.orientation !== "horizontal") {
+            this._isMobile = false;
+            return;
+        }
+        const bp = this._getBreakpointPx();
+        this._mql = window.matchMedia(`(max-width: ${bp}px)`);
+        this._isMobile = this._mql.matches;
+        this._mql.addEventListener("change", this._onMediaChange);
+    }
+
+    _teardownMediaQuery() {
+        if (this._mql) {
+            this._mql.removeEventListener("change", this._onMediaChange);
+            this._mql = null;
+        }
+    }
+
+    _onMediaChange(e) {
+        this._isMobile = e.matches;
+        this.render();
+    }
+
+    /**
+     * Convert appbar nav items to y-menu item format.
+     * Maps `href` → `url` and recursively converts children.
+     */
+    _toMenuItems(items) {
+        return items.map((item) => {
+            const mi = { text: item.text || "" };
+            if (item.href) mi.url = item.href;
+            if (item.icon) mi.icon = item.icon;
+            if (item.children?.length) {
+                mi.children = this._toMenuItems(item.children);
+            }
+            return mi;
+        });
+    }
+
     render() {
+        if (this._isMobile) {
+            this._renderMobile();
+        } else {
+            this._renderDesktop();
+        }
+    }
+
+    _renderMobile() {
+        const size = this.size;
+
+        const sizeConfig = {
+            small: {
+                padding: "var(--spacing-x-small, 4px)",
+                buttonSize: "small",
+                iconSize: "small",
+            },
+            medium: {
+                padding: "var(--spacing-small, 6px)",
+                buttonSize: "medium",
+                iconSize: "medium",
+            },
+            large: {
+                padding: "var(--spacing-medium, 8px)",
+                buttonSize: "large",
+                iconSize: "large",
+            },
+        };
+
+        this.shadowRoot.innerHTML = "";
+        this._idCounter = 0;
+
+        const cfg = sizeConfig[size] || sizeConfig.medium;
+        const style = document.createElement("style");
+
+        style.textContent = `
+            :host {
+                display: block;
+                font-family: var(--font-family-body, sans-serif);
+                color: var(--component-appbar-color, #f7f7fa);
+            }
+
+            :host([sticky]),
+            :host([sticky="start"]),
+            :host([sticky="end"]) {
+                position: sticky;
+                top: 0;
+                left: 0;
+                width: 100%;
+                z-index: var(--component-appbar-z-index, 100);
+            }
+
+            :host([sticky]) .appbar {
+                border-radius: 0;
+                border: none;
+                border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+            }
+
+            .appbar {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                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);
+                box-sizing: border-box;
+                width: 100%;
+                height: auto;
+            }
+
+            .mobile-start {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+            }
+
+            .mobile-center {
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                overflow: hidden;
+            }
+
+            .mobile-end {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+            }
+
+            .mobile-end ::slotted(*) {
+                display: block;
+            }
+
+            ::slotted(*) {
+                display: block;
+            }
+        `;
+        this.shadowRoot.appendChild(style);
+
+        const bar = document.createElement("div");
+        bar.className = "appbar";
+        bar.setAttribute("role", "navigation");
+        bar.style.setProperty("--_appbar-padding", cfg.padding);
+
+        /* ── Left: hamburger button ── */
+        const startSection = document.createElement("div");
+        startSection.className = "mobile-start";
+
+        const menuBtn = document.createElement("y-button");
+        const menuBtnId = this._uid("appbar-mobile-menu");
+        menuBtn.id = menuBtnId;
+        menuBtn.setAttribute("color", "base");
+        menuBtn.setAttribute("style-type", "flat");
+        menuBtn.setAttribute("size", cfg.buttonSize);
+        menuBtn.setAttribute("aria-label", "Open menu");
+
+        const menuIcon = document.createElement("span");
+        menuIcon.slot = "left-icon";
+        menuIcon.innerHTML = menu;
+        menuBtn.appendChild(menuIcon);
+
+        startSection.appendChild(menuBtn);
+
+        const navItems = this.items;
+        if (navItems.length > 0) {
+            const mobileMenu = document.createElement("y-menu");
+            mobileMenu.setAttribute("anchor", menuBtnId);
+            mobileMenu.setAttribute("direction", "down");
+            mobileMenu.setAttribute("size", cfg.buttonSize);
+            mobileMenu.items = this._toMenuItems(navItems);
+            startSection.appendChild(mobileMenu);
+        }
+
+        bar.appendChild(startSection);
+
+        /* ── Center: logo + title ── */
+        const centerSection = document.createElement("div");
+        centerSection.className = "mobile-center";
+
+        const logoSlot = document.createElement("slot");
+        logoSlot.name = "logo";
+        centerSection.appendChild(logoSlot);
+
+        const titleSlot = document.createElement("slot");
+        titleSlot.name = "title";
+        centerSection.appendChild(titleSlot);
+
+        bar.appendChild(centerSection);
+
+        /* ── Right: footer slot ── */
+        const endSection = document.createElement("div");
+        endSection.className = "mobile-end";
+        endSection.setAttribute("part", "footer");
+
+        const footerSlot = document.createElement("slot");
+        footerSlot.name = "footer";
+        endSection.appendChild(footerSlot);
+
+        bar.appendChild(endSection);
+        this.shadowRoot.appendChild(bar);
+    }
+
+    _renderDesktop() {
         const isVertical = this.orientation === "vertical";
         const isCollapsed = this.collapsed && isVertical;
         const size = this.size;
@@ -1582,12 +1916,13 @@ class YumeAppbar extends HTMLElement {
                 iconSize: "large",
             },
         };
-        const cfg = sizeConfig[size] || sizeConfig.medium;
 
         this.shadowRoot.innerHTML = "";
         this._idCounter = 0;
 
+        const cfg = sizeConfig[size] || sizeConfig.medium;
         const style = document.createElement("style");
+
         style.textContent = `
             :host {
                 display: block;
@@ -1816,15 +2151,11 @@ class YumeAppbar extends HTMLElement {
         `;
         this.shadowRoot.appendChild(style);
 
-        // Clone document stylesheets so CSS-class-based icons (e.g. Font Awesome) render in shadow DOM
-        document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
-            this.shadowRoot.appendChild(link.cloneNode(true));
-        });
-
         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);
         bar.style.setProperty("--_appbar-collapsed-width", cfg.collapsedWidth);
@@ -1834,7 +2165,6 @@ class YumeAppbar extends HTMLElement {
             `calc(${cfg.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)))`,
         );
 
-        /* --- Header: logo + title --- */
         const header = document.createElement("div");
         header.className = "appbar-header";
         header.setAttribute("part", "header");
@@ -1864,21 +2194,22 @@ class YumeAppbar extends HTMLElement {
         header.appendChild(headerSlot);
         bar.appendChild(header);
 
-        /* --- Body: y-button nav items --- */
         const body = document.createElement("div");
         body.className = "appbar-body";
         body.setAttribute("part", "body");
 
         const navItems = this.items;
+
         navItems.forEach((item) => {
             const hasChildren = item.children?.length > 0;
             const wrapper = document.createElement("div");
-            wrapper.className = "nav-item";
-
             const btn = document.createElement("y-button");
             const btnId = this._uid("appbar-btn");
-            btn.id = btnId;
             const isActive = this._isItemActive(item);
+
+            wrapper.className = "nav-item";
+            btn.id = btnId;
+
             btn.setAttribute("color", isActive ? "primary" : "base");
             btn.setAttribute("style-type", "flat");
             btn.setAttribute("size", cfg.buttonSize);
@@ -1941,7 +2272,6 @@ class YumeAppbar extends HTMLElement {
 
         bar.appendChild(body);
 
-        /* --- Footer: slot + collapse toggle (vertical only) --- */
         const footer = document.createElement("div");
         footer.className = "appbar-footer";
         footer.setAttribute("part", "footer");
@@ -2159,22 +2489,27 @@ class YumeBadge extends HTMLElement {
         }
     }
 
+    /** Horizontal alignment of the badge: "left" | "right" (default "right"). */
     get alignment() {
         return this.getAttribute("alignment") || "right";
     }
 
+    /** Color theme: "primary" | "secondary" | "base" | "success" | "warning" | "error" | "help". */
     get color() {
         return this.getAttribute("color") || "primary";
     }
 
+    /** Vertical position of the badge: "top" | "bottom" (default "top"). */
     get position() {
         return this.getAttribute("position") || "top";
     }
 
+    /** Badge size: "small" | "medium" | "large" (default "small"). */
     get size() {
         return this.getAttribute("size") || "small";
     }
 
+    /** The text content displayed inside the badge. */
     get value() {
         return this.getAttribute("value") || "";
     }
@@ -2485,6 +2820,7 @@ class YumeCheckbox extends HTMLElement {
         this.updateState();
     }
 
+    /** @type {boolean} Whether the checkbox is checked. */
     get checked() {
         return this.hasAttribute("checked");
     }
@@ -2494,6 +2830,7 @@ class YumeCheckbox extends HTMLElement {
         else this.removeAttribute("checked");
     }
 
+    /** @type {boolean} Whether the checkbox is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -2503,6 +2840,7 @@ class YumeCheckbox extends HTMLElement {
         else this.removeAttribute("disabled");
     }
 
+    /** @type {boolean} Whether the checkbox is in an indeterminate state. */
     get indeterminate() {
         return this.hasAttribute("indeterminate");
     }
@@ -2512,6 +2850,7 @@ class YumeCheckbox extends HTMLElement {
         else this.removeAttribute("indeterminate");
     }
 
+    /** @type {string} The form value submitted when checked. Defaults to "on". */
     get value() {
         return this.getAttribute("value") || "on";
     }
@@ -2520,10 +2859,12 @@ class YumeCheckbox extends HTMLElement {
         this.setAttribute("value", val);
     }
 
+    /** @type {string|null} The form name of the checkbox. */
     get name() {
         return this.getAttribute("name");
     }
 
+    /** Toggles the checked state and dispatches a "change" event. */
     toggle() {
         if (this.disabled) return;
         if (this.indeterminate) {
@@ -2681,7 +3022,7 @@ if (!customElements.get("y-checkbox")) {
 
 class YumeDialog extends HTMLElement {
     static get observedAttributes() {
-        return ["visible", "anchor", "closable"];
+        return ["visible", "anchor", "closable", "show-backdrop", "animate"];
     }
 
     constructor() {
@@ -2710,6 +3051,7 @@ class YumeDialog extends HTMLElement {
         }
     }
 
+    /** Whether the dialog is currently displayed. */
     get visible() {
         return this.hasAttribute("visible");
     }
@@ -2719,6 +3061,7 @@ class YumeDialog extends HTMLElement {
         else this.removeAttribute("visible");
     }
 
+    /** The id of the element that toggles this dialog on click. */
     get anchor() {
         return this.getAttribute("anchor");
     }
@@ -2727,6 +3070,7 @@ class YumeDialog extends HTMLElement {
         this.setAttribute("anchor", id);
     }
 
+    /** Whether the dialog renders a close button in the header. */
     get closable() {
         return this.hasAttribute("closable");
     }
@@ -2735,6 +3079,25 @@ class YumeDialog extends HTMLElement {
         else this.removeAttribute("closable");
     }
 
+    /** Whether to apply a blurred backdrop behind the dialog. */
+    get showBackdrop() {
+        return this.hasAttribute("show-backdrop");
+    }
+    set showBackdrop(val) {
+        if (val) this.setAttribute("show-backdrop", "");
+        else this.removeAttribute("show-backdrop");
+    }
+
+    /** Whether the dialog uses an entrance animation. */
+    get animate() {
+        return this.hasAttribute("animate");
+    }
+    set animate(val) {
+        if (val) this.setAttribute("animate", "");
+        else this.removeAttribute("animate");
+    }
+
+    /** Opens the dialog and focuses it. */
     show() {
         if (!this.shadowRoot.querySelector(".dialog")) {
             this.render();
@@ -2748,6 +3111,7 @@ class YumeDialog extends HTMLElement {
         }
     }
 
+    /** Closes the dialog. */
     hide() {
         document.removeEventListener("keydown", this.onKeyDown);
     }
@@ -2788,6 +3152,16 @@ class YumeDialog extends HTMLElement {
                 z-index: var(--component-dialog-z-index, 1000);
             }
             :host([visible]) { display: flex; }
+            :host([show-backdrop]) {
+                backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
+                -webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
+            }
+
+            @keyframes dialog-fade-in {
+                from { opacity: 0; transform: translateY(16px) scale(0.97); }
+                to   { opacity: 1; transform: translateY(0) scale(1); }
+            }
+
             .dialog {
                 background: var(--component-dialog-background);
                 border: var(--component-dialog-border-width, 1px) solid var(--component-dialog-border-color);
@@ -2798,6 +3172,9 @@ class YumeDialog extends HTMLElement {
                 flex-direction: column;
                 box-shadow: var(--component-dialog-shadow, 0 2px 10px rgba(0,0,0,0.3));
             }
+            :host([animate][visible]) .dialog {
+                animation: dialog-fade-in var(--component-dialog-animation-duration, 0.2s) ease-out both;
+            }
             .header {
                 padding: var(--component-dialog-padding, var(--spacing-medium));
                 font-weight: bold;
@@ -2810,26 +3187,6 @@ class YumeDialog extends HTMLElement {
             .header-content {
                 flex: 1;
             }
-            .close-btn {
-                background: none;
-                border: none;
-                cursor: pointer;
-                padding: var(--spacing-x-small, 4px);
-                color: var(--component-dialog-color, #f7f7fa);
-                font-size: 1.25em;
-                line-height: 1;
-                border-radius: var(--component-button-border-radius-outer, 4px);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            .close-btn:hover {
-                background: var(--component-dialog-hover-background, #292a2b);
-            }
-            .close-btn:focus-visible {
-                outline: 2px solid var(--component-dialog-accent);
-                outline-offset: -1px;
-            }
             .body {
                 padding: var(--component-dialog-padding, var(--spacing-medium));
                 overflow: auto;
@@ -2865,10 +3222,11 @@ class YumeDialog extends HTMLElement {
         header.appendChild(headerContent);
 
         if (this.closable) {
-            const closeBtn = document.createElement("button");
-            closeBtn.className = "close-btn";
+            const closeBtn = document.createElement("y-button");
+            closeBtn.setAttribute("size", "small");
+            closeBtn.setAttribute("style-type", "flat");
             closeBtn.setAttribute("aria-label", "Close");
-            closeBtn.innerHTML = "&#10005;";
+            closeBtn.textContent = "\u2715";
             closeBtn.addEventListener("click", () => {
                 this.visible = false;
             });
@@ -2890,18 +3248,20 @@ class YumeDialog extends HTMLElement {
         dialog.appendChild(footer);
         this.shadowRoot.appendChild(dialog);
 
-        // Hide slot containers that have no slotted content
         const hideIfEmpty = (wrapper) => {
             const slot = wrapper.querySelector("slot");
             if (!slot) return;
+
             const update = () => {
                 const hasContent =
                     slot.assignedNodes({ flatten: true }).length > 0;
                 wrapper.style.display = hasContent ? "" : "none";
             };
+
             slot.addEventListener("slotchange", update);
             update();
         };
+
         if (!this.closable) hideIfEmpty(header);
         hideIfEmpty(body);
         hideIfEmpty(footer);
@@ -3014,8 +3374,7 @@ class YumeDrawer extends HTMLElement {
 
     _show() {
         this.style.display = "block";
-        // Force a reflow so the browser registers the initial state
-        this.offsetHeight; // eslint-disable-line no-unused-expressions
+        this.offsetHeight;
 
         const overlay = this.shadowRoot.querySelector(".overlay");
         const panel = this.shadowRoot.querySelector(".drawer-panel");
@@ -3401,6 +3760,7 @@ class YumeInput extends HTMLElement {
         this.render();
     }
 
+    /** @type {string} The current input value. */
     get value() {
         return this.input?.value || "";
     }
@@ -3411,6 +3771,10 @@ class YumeInput extends HTMLElement {
         this._internals.setFormValue(val, this.getAttribute("name"));
     }
 
+    /**
+     * Checks the validity of the underlying input element.
+     * @returns {boolean} Whether the input is valid.
+     */
     checkValidity() {
         return this.input?.checkValidity?.() ?? true;
     }
@@ -3446,6 +3810,7 @@ class YumeInput extends HTMLElement {
             }[size] || "var(--sizing-medium, 40px)";
 
         const sheet = new CSSStyleSheet();
+
         sheet.replaceSync(`
             :host {
                 display: block;
@@ -3582,8 +3947,10 @@ class YumePanel extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+
         this._expanded = false;
         this._checkRouteMatchBound = this.checkRouteMatch.bind(this);
+
         this.render();
     }
 
@@ -3622,6 +3989,7 @@ class YumePanel extends HTMLElement {
         }
     }
 
+    /** @type {boolean} Whether the panel is in a selected/active state. */
     get selected() {
         return this.hasAttribute("selected");
     }
@@ -3631,6 +3999,7 @@ class YumePanel extends HTMLElement {
         else this.removeAttribute("selected");
     }
 
+    /** @type {boolean} Whether the panel's children slot is visible. */
     get expanded() {
         return this.hasAttribute("expanded");
     }
@@ -3640,8 +4009,10 @@ class YumePanel extends HTMLElement {
         else this.removeAttribute("expanded");
     }
 
+    /** Toggles the expanded state (collapses siblings when inside an exclusive panelbar). */
     toggle() {
         if (!this.hasChildren()) return;
+
         if (!this._expanded) {
             const parentBar = this.closest("y-panelbar");
             if (parentBar && parentBar.hasAttribute("exclusive")) {
@@ -3661,6 +4032,7 @@ class YumePanel extends HTMLElement {
         } else {
             this.collapse();
         }
+
         this.dispatchEvent(
             new CustomEvent("toggle", {
                 detail: { expanded: this._expanded },
@@ -3670,6 +4042,7 @@ class YumePanel extends HTMLElement {
         );
     }
 
+    /** Expands the panel to show its children. */
     expand() {
         if (!this.hasChildren()) return;
         this.expanded = true;
@@ -3684,6 +4057,7 @@ class YumePanel extends HTMLElement {
         );
     }
 
+    /** Collapses the panel to hide its children. */
     collapse() {
         this.expanded = false;
         this._expanded = false;
@@ -3713,6 +4087,7 @@ class YumePanel extends HTMLElement {
                 break;
             }
         }
+
         this.setAttribute("data-is-child", depth > 0 ? "true" : "false");
         this.style.setProperty("--panel-depth", depth);
     }
@@ -3768,6 +4143,7 @@ class YumePanel extends HTMLElement {
         const childrenSlot = this.shadowRoot.querySelector(
             'slot[name="children"]',
         );
+
         if (childrenSlot) {
             childrenSlot.addEventListener("slotchange", () =>
                 this.checkForChildren(),
@@ -3775,11 +4151,17 @@ class YumePanel extends HTMLElement {
         }
     }
 
+    /**
+     * Checks whether the panel has slotted children content.
+     * @returns {boolean}
+     */
     hasChildren() {
         const childrenSlot = this.shadowRoot.querySelector(
             'slot[name="children"]',
         );
+
         if (!childrenSlot) return false;
+
         const nodes = childrenSlot.assignedNodes({ flatten: true });
         return nodes.some((n) => {
             if (n.nodeType === Node.TEXT_NODE) {
@@ -3791,7 +4173,9 @@ class YumePanel extends HTMLElement {
 
     checkForChildren() {
         const hasChildren = this.hasChildren();
+
         this.setAttribute("data-has-children", hasChildren ? "true" : "false");
+
         if (!hasChildren && this.expanded) {
             this.expanded = false;
         }
@@ -3801,6 +4185,7 @@ class YumePanel extends HTMLElement {
         const hasChildren = this.hasChildren();
         const header = this.shadowRoot.querySelector(".header");
         const isExpanded = this.expanded && hasChildren;
+
         this._expanded = isExpanded;
 
         if (header) {
@@ -3810,6 +4195,7 @@ class YumePanel extends HTMLElement {
 
     render() {
         const sheet = new CSSStyleSheet();
+
         sheet.replaceSync(`
             :host {
                 display: block;
@@ -3987,6 +4373,7 @@ class YumeProgress extends HTMLElement {
         }
     }
 
+    /** Current progress value, or null if unset. */
     get value() {
         const val = parseFloat(this.getAttribute("value"));
         return Number.isNaN(val) ? null : val;
@@ -4000,6 +4387,7 @@ class YumeProgress extends HTMLElement {
         }
     }
 
+    /** Minimum value (default 0). */
     get min() {
         return parseFloat(this.getAttribute("min")) || 0;
     }
@@ -4008,6 +4396,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("min", String(val));
     }
 
+    /** Maximum value (default 100). */
     get max() {
         return parseFloat(this.getAttribute("max")) || 100;
     }
@@ -4016,6 +4405,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("max", String(val));
     }
 
+    /** Step increment for snapping, or null if continuous. */
     get step() {
         const s = parseFloat(this.getAttribute("step"));
         return Number.isNaN(s) || s <= 0 ? null : s;
@@ -4029,6 +4419,7 @@ class YumeProgress extends HTMLElement {
         }
     }
 
+    /** Bar thickness: "small" | "medium" | "large" (default "medium"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -4037,6 +4428,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("size", val);
     }
 
+    /** Color theme for the progress bar (default "primary"). */
     get color() {
         return this.getAttribute("color") || "primary";
     }
@@ -4045,6 +4437,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("color", val);
     }
 
+    /** Whether to show the value label on the bar (default true). */
     get labelDisplay() {
         return this.getAttribute("label-display") !== "false";
     }
@@ -4053,6 +4446,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("label-display", val ? "true" : "false");
     }
 
+    /** Label format: "percent" | "value" | "fraction" (default "percent"). */
     get labelFormat() {
         return this.getAttribute("label-format") || "percent";
     }
@@ -4061,6 +4455,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("label-format", val);
     }
 
+    /** Whether the progress bar shows an indeterminate animation. */
     get indeterminate() {
         return this.hasAttribute("indeterminate");
     }
@@ -4070,6 +4465,7 @@ class YumeProgress extends HTMLElement {
         else this.removeAttribute("indeterminate");
     }
 
+    /** Whether the progress bar is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -4097,6 +4493,7 @@ class YumeProgress extends HTMLElement {
         this.value = Math.max(this.value - s, this.min);
     }
 
+    /** Computed fill percentage (0–100), accounting for min, max, and step. */
     get percentage() {
         if (this.value === null) return 0;
         const range = this.max - this.min;
@@ -4256,7 +4653,9 @@ class YumeProgress extends HTMLElement {
     _autoHideHeader() {
         const header = this.shadowRoot.querySelector(".progress-header");
         const slot = header?.querySelector("slot");
+
         if (!slot || !header) return;
+
         const update = () => {
             const hasContent = slot
                 .assignedNodes({ flatten: true })
@@ -4269,6 +4668,7 @@ class YumeProgress extends HTMLElement {
                 );
             header.style.display = hasContent ? "" : "none";
         };
+
         slot.addEventListener("slotchange", update);
         update();
     }
@@ -4308,6 +4708,7 @@ class YumeRadio extends HTMLElement {
         }
     }
 
+    /** @type {string} The currently selected radio value. */
     get value() {
         return this._value;
     }
@@ -4319,10 +4720,12 @@ class YumeRadio extends HTMLElement {
         this.updateChecked();
     }
 
+    /** @type {string} The form name of the radio group. */
     get name() {
         return this.getAttribute("name") || "";
     }
 
+    /** @type {Array<{value: string, label: string}>} The radio options parsed from the "options" attribute. */
     get options() {
         try {
             return JSON.parse(this.getAttribute("options") || "[]");
@@ -4511,6 +4914,7 @@ class YumeSelect extends HTMLElement {
         if (!this.hasAttribute("label-position")) {
             this.setAttribute("label-position", "top");
         }
+
         this.updateValidation();
         this._internals.setFormValue(this.value);
     }
@@ -4521,7 +4925,9 @@ class YumeSelect extends HTMLElement {
 
     _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();
         }
@@ -4555,6 +4961,7 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    /** @type {string} The current selected value, or comma-separated values when multiple. */
     get value() {
         if (this.hasAttribute("multiple")) {
             return Array.from(this.selectedValues).join(",");
@@ -4581,6 +4988,10 @@ class YumeSelect extends HTMLElement {
         this.updateSelectedStyles();
     }
 
+    /**
+     * Returns the parsed options array from the "options" attribute.
+     * @returns {Array<{value: string, label: string}>}
+     */
     getOptions() {
         try {
             return JSON.parse(this.getAttribute("options") || "[]");
@@ -4589,6 +5000,10 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    /**
+     * Returns the display text for the current selection.
+     * @returns {string}
+     */
     getDisplayText() {
         const options = this.getOptions();
         const isMulti = this.hasAttribute("multiple");
@@ -4615,6 +5030,7 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    /** Toggles the dropdown open or closed. */
     toggleDropdown() {
         const isOpen = this.dropdown.classList.contains("open");
         if (isOpen) {
@@ -4624,16 +5040,19 @@ class YumeSelect extends HTMLElement {
             this.selectContainer.classList.add("open");
             this._positionDropdown();
             this._onScrollOrResize = this._positionDropdown.bind(this);
+
             window.addEventListener("scroll", this._onScrollOrResize, true);
             window.addEventListener("resize", this._onScrollOrResize);
             document.addEventListener("click", this._onDocumentClick, true);
         }
     }
 
+    /** Closes the dropdown. */
     closeDropdown() {
         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);
@@ -4644,11 +5063,13 @@ class YumeSelect extends HTMLElement {
     _positionDropdown() {
         const rect = this.selectContainer.getBoundingClientRect();
         const gap = 4;
+
         this.dropdown.style.left = `${rect.left}px`;
         this.dropdown.style.width = `${rect.width}px`;
 
         const spaceBelow = window.innerHeight - rect.bottom - gap;
         const maxH = 200;
+
         if (spaceBelow >= maxH || spaceBelow >= rect.top) {
             this.dropdown.style.top = `${rect.bottom + gap}px`;
             this.dropdown.style.bottom = "auto";
@@ -4716,6 +5137,7 @@ class YumeSelect extends HTMLElement {
     renderTags() {
         const isMulti = this.hasAttribute("multiple");
         const isTagMode = this.getAttribute("display-mode") === "tag";
+
         if (!isMulti || !isTagMode || !this.displayElement) return;
 
         const options = this.getOptions();
@@ -5046,6 +5468,7 @@ class YumeSlider extends HTMLElement {
         }
     }
 
+    /** @type {number} The current slider value, clamped between min and max. */
     get value() {
         const val = parseFloat(this.getAttribute("value"));
         return Number.isNaN(val) ? 0 : val;
@@ -5057,6 +5480,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("value", String(stepped));
     }
 
+    /** @type {number} The minimum allowed value. Defaults to 0. */
     get min() {
         return parseFloat(this.getAttribute("min")) || 0;
     }
@@ -5065,6 +5489,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("min", String(val));
     }
 
+    /** @type {number} The maximum allowed value. Defaults to 100. */
     get max() {
         return parseFloat(this.getAttribute("max")) || 100;
     }
@@ -5073,6 +5498,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("max", String(val));
     }
 
+    /** @type {number|null} The step increment, or null for continuous. */
     get step() {
         const s = parseFloat(this.getAttribute("step"));
         return Number.isNaN(s) || s <= 0 ? null : s;
@@ -5086,6 +5512,7 @@ class YumeSlider extends HTMLElement {
         }
     }
 
+    /** @type {string} The size variant ("small", "medium", or "large"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -5094,6 +5521,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("size", val);
     }
 
+    /** @type {string} The color theme for the slider track and thumb. */
     get color() {
         return this.getAttribute("color") || "primary";
     }
@@ -5102,6 +5530,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("color", val);
     }
 
+    /** @type {boolean} Whether the slider is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -5111,6 +5540,7 @@ class YumeSlider extends HTMLElement {
         else this.removeAttribute("disabled");
     }
 
+    /** @type {string} The slider orientation ("horizontal" or "vertical"). */
     get orientation() {
         return this.getAttribute("orientation") || "horizontal";
     }
@@ -5119,6 +5549,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("orientation", val);
     }
 
+    /** @type {number} The current value as a percentage of the min-max range. */
     get percentage() {
         const range = this.max - this.min;
         if (range <= 0) return 0;
@@ -5251,6 +5682,7 @@ class YumeSlider extends HTMLElement {
             Math.min(1, (e.clientX - rect.left) / rect.width),
         );
         const rawValue = this.min + ratio * (this.max - this.min);
+
         this.value = rawValue;
         this.dispatchEvent(
             new Event("input", { bubbles: true, composed: true }),
@@ -5422,6 +5854,7 @@ class YumeSwitch extends HTMLElement {
         }
     }
 
+    /** @type {boolean} Whether the switch is on. */
     get checked() {
         return this.hasAttribute("checked");
     }
@@ -5432,6 +5865,7 @@ class YumeSwitch extends HTMLElement {
         this.update();
     }
 
+    /** @type {string} The form value submitted when checked. Defaults to "on". */
     get value() {
         return this.getAttribute("value") || "on";
     }
@@ -5441,8 +5875,10 @@ class YumeSwitch extends HTMLElement {
         this.update();
     }
 
+    /** Toggles the checked state and dispatches a "change" event. */
     toggle() {
         if (this.hasAttribute("disabled")) return;
+
         this.checked = !this.checked;
         this.dispatchEvent(
             new Event("change", { bubbles: true, composed: true }),
@@ -5462,9 +5898,10 @@ class YumeSwitch extends HTMLElement {
 
     _autoHideLabel() {
         const slot = this.shadowRoot.querySelector('slot[name="label"]');
-        if (!slot) return;
         const wrapper = slot.closest(".label-wrapper");
-        if (!wrapper) return;
+
+        if (!slot || !wrapper) return;
+
         const update = () => {
             const hasContent = slot
                 .assignedNodes({ flatten: true })
@@ -5477,6 +5914,7 @@ class YumeSwitch extends HTMLElement {
                 );
             wrapper.style.display = hasContent ? "" : "none";
         };
+
         slot.addEventListener("slotchange", update);
         update();
     }
@@ -5759,7 +6197,7 @@ class YumeTable extends HTMLElement {
         super();
         this.attachShadow({ mode: "open" });
         this._sortField = null;
-        this._sortDir = "none"; // "none" | "asc" | "desc"
+        this._sortDir = "none";
         this._parsedData = [];
         this._parsedColumns = [];
     }
@@ -5775,6 +6213,7 @@ class YumeTable extends HTMLElement {
         this.render();
     }
 
+    /** Column definitions as a JSON string or array of { field, header?, sortable? } objects. */
     get columns() {
         return this.getAttribute("columns");
     }
@@ -5785,6 +6224,7 @@ class YumeTable extends HTMLElement {
         );
     }
 
+    /** Row data as a JSON string or array of objects keyed by column field names. */
     get data() {
         return this.getAttribute("data");
     }
@@ -5795,6 +6235,7 @@ class YumeTable extends HTMLElement {
         );
     }
 
+    /** Whether to show alternating row backgrounds. */
     get striped() {
         return this.hasAttribute("striped");
     }
@@ -6284,6 +6725,7 @@ class YumeTabs extends HTMLElement {
         }
     }
 
+    /** @type {Array<Object>} Tab definitions with id, label, slot, and optional disabled flag. */
     get options() {
         try {
             return JSON.parse(this.getAttribute("options") || "[]");
@@ -6297,6 +6739,7 @@ class YumeTabs extends HTMLElement {
         this.render();
     }
 
+    /** @type {"small"|"medium"|"large"} Controls tab button padding and gap. */
     get size() {
         const sz = this.getAttribute("size");
         return ["small", "medium", "large"].includes(sz) ? sz : "medium";
@@ -6308,6 +6751,7 @@ class YumeTabs extends HTMLElement {
         else this.setAttribute("size", "medium");
     }
 
+    /** @type {"top"|"bottom"|"left"|"right"} Which edge the tab strip is placed on. */
     get position() {
         const pos = this.getAttribute("position");
         return ["top", "bottom", "left", "right"].includes(pos) ? pos : "top";
@@ -6319,6 +6763,10 @@ class YumeTabs extends HTMLElement {
         else this.setAttribute("position", "top");
     }
 
+    /**
+     * Activates a tab by its id.
+     * @param {string} id - The id of the tab to activate.
+     */
     activateTab(id) {
         const tab = this.options.find((t) => t.id === id);
         if (!tab || tab.disabled) return;
@@ -6467,6 +6915,7 @@ class YumeTabs extends HTMLElement {
         const isActive = tab.id === this._activeTab;
         const isDisabled = !!tab.disabled;
         const btn = document.createElement("button");
+
         btn.id = `tab-${tab.id}`;
         btn.setAttribute("role", "tab");
         btn.setAttribute("part", "tab");
@@ -6510,6 +6959,7 @@ class YumeTabs extends HTMLElement {
         const contentSlot = document.createElement("slot");
         contentSlot.name = slotName;
         panel.appendChild(contentSlot);
+
         return panel;
     }
 
@@ -6562,6 +7012,7 @@ class YumeToast extends HTMLElement {
         this.render();
     }
 
+    /** Screen position for the toast stack (e.g. "top-right", "bottom-center"). */
     get position() {
         return this.getAttribute("position") || "bottom-right";
     }
@@ -6569,6 +7020,7 @@ class YumeToast extends HTMLElement {
         this.setAttribute("position", val);
     }
 
+    /** Default auto-dismiss duration in milliseconds. */
     get duration() {
         return parseInt(this.getAttribute("duration") ?? "4000", 10);
     }
@@ -6576,6 +7028,7 @@ class YumeToast extends HTMLElement {
         this.setAttribute("duration", String(val));
     }
 
+    /** Maximum number of toasts visible at once. */
     get max() {
         return parseInt(this.getAttribute("max") ?? "5", 10);
     }
@@ -6668,6 +7121,7 @@ class YumeToast extends HTMLElement {
         return toast;
     }
 
+    /** Dismisses all visible toasts. */
     clear() {
         const container = this.shadowRoot.querySelector(".toast-container");
         if (!container) return;
@@ -6678,8 +7132,11 @@ class YumeToast extends HTMLElement {
 
     _removeToast(toast) {
         if (!toast || toast._removing) return;
+
         toast._removing = true;
+
         clearTimeout(toast._timeout);
+
         toast.classList.remove("visible");
         toast.classList.add("exit");
         toast.addEventListener(
@@ -6829,6 +7286,7 @@ class YumeTooltip extends HTMLElement {
         this.render();
     }
 
+    /** The tooltip text content. */
     get text() {
         return this.getAttribute("text") || "";
     }
@@ -6836,6 +7294,7 @@ class YumeTooltip extends HTMLElement {
         this.setAttribute("text", val);
     }
 
+    /** Placement relative to the trigger: "top" | "bottom" | "left" | "right". */
     get position() {
         return this.getAttribute("position") || "top";
     }
@@ -6843,6 +7302,7 @@ class YumeTooltip extends HTMLElement {
         this.setAttribute("position", val);
     }
 
+    /** Delay in milliseconds before the tooltip appears. */
     get delay() {
         return parseInt(this.getAttribute("delay") ?? "200", 10);
     }
@@ -6850,6 +7310,7 @@ class YumeTooltip extends HTMLElement {
         this.setAttribute("delay", String(val));
     }
 
+    /** Color theme for the tooltip (e.g. "base", "primary", "error"). */
     get color() {
         return this.getAttribute("color") || "base";
     }
@@ -6857,11 +7318,14 @@ class YumeTooltip extends HTMLElement {
         this.setAttribute("color", val);
     }
 
+    /** Programmatically shows the tooltip after the configured delay. */
     show() {
         clearTimeout(this._hideTimeout);
+
         this._showTimeout = setTimeout(() => {
             this._visible = true;
             const tip = this.shadowRoot.querySelector(".tooltip");
+
             if (tip) {
                 const [, fg] = getColorVarPair(this.color);
                 tip.style.color = fg;
@@ -6870,6 +7334,7 @@ class YumeTooltip extends HTMLElement {
         }, this.delay);
     }
 
+    /** Immediately hides the tooltip. */
     hide() {
         clearTimeout(this._showTimeout);
         this._visible = false;
@@ -7082,6 +7547,10 @@ class YumeTheme extends HTMLElement {
         this.applyVariablesToHost(variablesCSS + themeCSS);
     }
 
+    /**
+     * Parses CSS custom properties from the given text and sets them on the host element.
+     * @param {string} cssText - Raw CSS containing custom property declarations.
+     */
     applyVariablesToHost(cssText) {
         const regex = /--([\w-]+):\s*([^;]+);/g;
         let match;
@@ -7094,6 +7563,7 @@ class YumeTheme extends HTMLElement {
         }
     }
 
+    /** Removes all theme custom properties previously applied to the host element. */
     clearThemeProperties() {
         if (this._themeProps) {
             for (const prop of this._themeProps) {
@@ -7108,13 +7578,15 @@ class YumeTheme extends HTMLElement {
         const style = document.createElement("style");
         style.setAttribute("data-yumekit-page-styles", "");
         style.textContent = `
-            html, body {
-                margin: 0;
-                padding: 0;
+            :host {
                 font-family: var(--font-family-header, "Lexend", sans-serif);
                 color: var(--base-content--, #000);
                 font-weight: 300;
             }
+
+            :host * {
+                color: var(--base-content--, #000);
+            }
         `;
         document.head.appendChild(style);
     }