@waggylabs/yumekit 0.2.1 → 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-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";
+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.
@@ -151,6 +151,8 @@ var logo = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill
 
 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";
@@ -256,6 +258,7 @@ registerIcons({
     lock,
     logo,
     mail,
+    menu: menu$1,
     moon,
     palette,
     plus,
@@ -332,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(",");
@@ -362,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));
     }
@@ -939,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);
@@ -981,6 +988,7 @@ class YumeIcon extends HTMLElement {
         this.render();
     }
 
+    /** The registered icon name to display. */
     get name() {
         return this.getAttribute("name") || "";
     }
@@ -988,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";
     }
@@ -995,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") || "";
     }
@@ -1003,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") || "";
     }
@@ -1011,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);
@@ -1034,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] || "";
     }
@@ -1113,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";
@@ -1125,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);
@@ -1132,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();
         }
@@ -1250,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;
@@ -1292,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;
 
@@ -1353,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 {
@@ -1407,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);
     }
 }
@@ -1450,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>`;
@@ -1495,6 +1542,7 @@ class YumeAppbar extends HTMLElement {
             "size",
             "menu-direction",
             "sticky",
+            "mobile-breakpoint",
         ];
     }
 
@@ -1502,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();
     }
 
@@ -1570,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;
     }
@@ -1592,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;
@@ -1621,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;
@@ -1855,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);
@@ -1873,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");
@@ -1903,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);
@@ -1980,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");
@@ -2198,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") || "";
     }
@@ -2524,6 +2820,7 @@ class YumeCheckbox extends HTMLElement {
         this.updateState();
     }
 
+    /** @type {boolean} Whether the checkbox is checked. */
     get checked() {
         return this.hasAttribute("checked");
     }
@@ -2533,6 +2830,7 @@ class YumeCheckbox extends HTMLElement {
         else this.removeAttribute("checked");
     }
 
+    /** @type {boolean} Whether the checkbox is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -2542,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");
     }
@@ -2551,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";
     }
@@ -2559,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) {
@@ -2749,6 +3051,7 @@ class YumeDialog extends HTMLElement {
         }
     }
 
+    /** Whether the dialog is currently displayed. */
     get visible() {
         return this.hasAttribute("visible");
     }
@@ -2758,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");
     }
@@ -2766,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");
     }
@@ -2774,6 +3079,7 @@ class YumeDialog extends HTMLElement {
         else this.removeAttribute("closable");
     }
 
+    /** Whether to apply a blurred backdrop behind the dialog. */
     get showBackdrop() {
         return this.hasAttribute("show-backdrop");
     }
@@ -2782,6 +3088,7 @@ class YumeDialog extends HTMLElement {
         else this.removeAttribute("show-backdrop");
     }
 
+    /** Whether the dialog uses an entrance animation. */
     get animate() {
         return this.hasAttribute("animate");
     }
@@ -2790,6 +3097,7 @@ class YumeDialog extends HTMLElement {
         else this.removeAttribute("animate");
     }
 
+    /** Opens the dialog and focuses it. */
     show() {
         if (!this.shadowRoot.querySelector(".dialog")) {
             this.render();
@@ -2803,6 +3111,7 @@ class YumeDialog extends HTMLElement {
         }
     }
 
+    /** Closes the dialog. */
     hide() {
         document.removeEventListener("keydown", this.onKeyDown);
     }
@@ -2878,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;
@@ -2933,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;
             });
@@ -2958,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);
@@ -3082,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");
@@ -3469,6 +3760,7 @@ class YumeInput extends HTMLElement {
         this.render();
     }
 
+    /** @type {string} The current input value. */
     get value() {
         return this.input?.value || "";
     }
@@ -3479,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;
     }
@@ -3514,6 +3810,7 @@ class YumeInput extends HTMLElement {
             }[size] || "var(--sizing-medium, 40px)";
 
         const sheet = new CSSStyleSheet();
+
         sheet.replaceSync(`
             :host {
                 display: block;
@@ -3650,8 +3947,10 @@ class YumePanel extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+
         this._expanded = false;
         this._checkRouteMatchBound = this.checkRouteMatch.bind(this);
+
         this.render();
     }
 
@@ -3690,6 +3989,7 @@ class YumePanel extends HTMLElement {
         }
     }
 
+    /** @type {boolean} Whether the panel is in a selected/active state. */
     get selected() {
         return this.hasAttribute("selected");
     }
@@ -3699,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");
     }
@@ -3708,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")) {
@@ -3729,6 +4032,7 @@ class YumePanel extends HTMLElement {
         } else {
             this.collapse();
         }
+
         this.dispatchEvent(
             new CustomEvent("toggle", {
                 detail: { expanded: this._expanded },
@@ -3738,6 +4042,7 @@ class YumePanel extends HTMLElement {
         );
     }
 
+    /** Expands the panel to show its children. */
     expand() {
         if (!this.hasChildren()) return;
         this.expanded = true;
@@ -3752,6 +4057,7 @@ class YumePanel extends HTMLElement {
         );
     }
 
+    /** Collapses the panel to hide its children. */
     collapse() {
         this.expanded = false;
         this._expanded = false;
@@ -3781,6 +4087,7 @@ class YumePanel extends HTMLElement {
                 break;
             }
         }
+
         this.setAttribute("data-is-child", depth > 0 ? "true" : "false");
         this.style.setProperty("--panel-depth", depth);
     }
@@ -3836,6 +4143,7 @@ class YumePanel extends HTMLElement {
         const childrenSlot = this.shadowRoot.querySelector(
             'slot[name="children"]',
         );
+
         if (childrenSlot) {
             childrenSlot.addEventListener("slotchange", () =>
                 this.checkForChildren(),
@@ -3843,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) {
@@ -3859,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;
         }
@@ -3869,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) {
@@ -3878,6 +4195,7 @@ class YumePanel extends HTMLElement {
 
     render() {
         const sheet = new CSSStyleSheet();
+
         sheet.replaceSync(`
             :host {
                 display: block;
@@ -4055,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;
@@ -4068,6 +4387,7 @@ class YumeProgress extends HTMLElement {
         }
     }
 
+    /** Minimum value (default 0). */
     get min() {
         return parseFloat(this.getAttribute("min")) || 0;
     }
@@ -4076,6 +4396,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("min", String(val));
     }
 
+    /** Maximum value (default 100). */
     get max() {
         return parseFloat(this.getAttribute("max")) || 100;
     }
@@ -4084,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;
@@ -4097,6 +4419,7 @@ class YumeProgress extends HTMLElement {
         }
     }
 
+    /** Bar thickness: "small" | "medium" | "large" (default "medium"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -4105,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";
     }
@@ -4113,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";
     }
@@ -4121,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";
     }
@@ -4129,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");
     }
@@ -4138,6 +4465,7 @@ class YumeProgress extends HTMLElement {
         else this.removeAttribute("indeterminate");
     }
 
+    /** Whether the progress bar is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -4165,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;
@@ -4324,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 })
@@ -4337,6 +4668,7 @@ class YumeProgress extends HTMLElement {
                 );
             header.style.display = hasContent ? "" : "none";
         };
+
         slot.addEventListener("slotchange", update);
         update();
     }
@@ -4376,6 +4708,7 @@ class YumeRadio extends HTMLElement {
         }
     }
 
+    /** @type {string} The currently selected radio value. */
     get value() {
         return this._value;
     }
@@ -4387,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") || "[]");
@@ -4579,6 +4914,7 @@ class YumeSelect extends HTMLElement {
         if (!this.hasAttribute("label-position")) {
             this.setAttribute("label-position", "top");
         }
+
         this.updateValidation();
         this._internals.setFormValue(this.value);
     }
@@ -4589,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();
         }
@@ -4623,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(",");
@@ -4649,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") || "[]");
@@ -4657,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");
@@ -4683,6 +5030,7 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    /** Toggles the dropdown open or closed. */
     toggleDropdown() {
         const isOpen = this.dropdown.classList.contains("open");
         if (isOpen) {
@@ -4692,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);
@@ -4712,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";
@@ -4784,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();
@@ -5114,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;
@@ -5125,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;
     }
@@ -5133,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;
     }
@@ -5141,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;
@@ -5154,6 +5512,7 @@ class YumeSlider extends HTMLElement {
         }
     }
 
+    /** @type {string} The size variant ("small", "medium", or "large"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -5162,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";
     }
@@ -5170,6 +5530,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("color", val);
     }
 
+    /** @type {boolean} Whether the slider is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -5179,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";
     }
@@ -5187,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;
@@ -5319,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 }),
@@ -5490,6 +5854,7 @@ class YumeSwitch extends HTMLElement {
         }
     }
 
+    /** @type {boolean} Whether the switch is on. */
     get checked() {
         return this.hasAttribute("checked");
     }
@@ -5500,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";
     }
@@ -5509,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 }),
@@ -5530,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 })
@@ -5545,6 +5914,7 @@ class YumeSwitch extends HTMLElement {
                 );
             wrapper.style.display = hasContent ? "" : "none";
         };
+
         slot.addEventListener("slotchange", update);
         update();
     }
@@ -5827,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 = [];
     }
@@ -5843,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");
     }
@@ -5853,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");
     }
@@ -5863,6 +6235,7 @@ class YumeTable extends HTMLElement {
         );
     }
 
+    /** Whether to show alternating row backgrounds. */
     get striped() {
         return this.hasAttribute("striped");
     }
@@ -6352,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") || "[]");
@@ -6365,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";
@@ -6376,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";
@@ -6387,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;
@@ -6535,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");
@@ -6578,6 +6959,7 @@ class YumeTabs extends HTMLElement {
         const contentSlot = document.createElement("slot");
         contentSlot.name = slotName;
         panel.appendChild(contentSlot);
+
         return panel;
     }
 
@@ -6630,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";
     }
@@ -6637,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);
     }
@@ -6644,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);
     }
@@ -6736,6 +7121,7 @@ class YumeToast extends HTMLElement {
         return toast;
     }
 
+    /** Dismisses all visible toasts. */
     clear() {
         const container = this.shadowRoot.querySelector(".toast-container");
         if (!container) return;
@@ -6746,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(
@@ -6897,6 +7286,7 @@ class YumeTooltip extends HTMLElement {
         this.render();
     }
 
+    /** The tooltip text content. */
     get text() {
         return this.getAttribute("text") || "";
     }
@@ -6904,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";
     }
@@ -6911,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);
     }
@@ -6918,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";
     }
@@ -6925,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;
@@ -6938,6 +7334,7 @@ class YumeTooltip extends HTMLElement {
         }, this.delay);
     }
 
+    /** Immediately hides the tooltip. */
     hide() {
         clearTimeout(this._showTimeout);
         this._visible = false;
@@ -7150,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;
@@ -7162,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) {
@@ -7176,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);
     }