@studious-creative/yumekit 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/y-appbar.js +5 -0
- package/dist/components/y-dialog.js +3 -0
- package/dist/components/y-drawer.js +5 -0
- package/dist/components/y-menu.js +2 -0
- package/dist/components/y-radio.js +2 -2
- package/dist/components/y-switch.js +2 -2
- package/dist/components/y-table.js +4 -0
- package/dist/components/y-tabs.js +4 -1
- package/dist/components/y-tag.js +2 -2
- package/dist/components/y-theme.js +1 -1
- package/dist/components/y-toast.js +3 -0
- package/dist/components/y-tooltip.js +1 -1
- package/dist/index.js +32 -9
- package/dist/styles/style.css +1 -13
- package/dist/styles/variables.css +1 -0
- package/dist/yumekit.min.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var variablesCSS = "/* Colors */\n:root {\n --neutral--: #7f8286ff;\n --neutral-white: #ffffffff;\n --neutral-black: #000000ff;\n --neutral-light-0: #f7f7faff;\n --neutral-light-1: #f0f0f2ff;\n --neutral-light-2: #dfe0e3ff;\n --neutral-light-3: #cacbcfff;\n --neutral-light-4: #bbbdc0ff;\n --neutral-light-5: #acaeb2ff;\n --neutral-light-6: #9d9fa3ff;\n --neutral-light-7: #8e9195ff;\n --neutral-dark-0: #0c0c0dff;\n --neutral-dark-1: #151617ff;\n --neutral-dark-2: #292a2bff;\n --neutral-dark-3: #37383aff;\n --neutral-dark-4: #46474aff;\n --neutral-dark-5: #545659ff;\n --neutral-dark-6: #626568ff;\n --neutral-dark-7: #717377ff;\n --neutral-black-translucent: #0000001f;\n --neutral-white-translucent: #1111111f;\n --red--: #b80421ff;\n --red-light-0: #f2e6e8ff;\n --red-light-1: #ebcacfff;\n --red-light-2: #e4aeb6ff;\n --red-light-3: #dc919dff;\n --red-light-4: #d57585ff;\n --red-light-5: #ce596cff;\n --red-light-6: #c73d53ff;\n --red-light-7: #bf203aff;\n --red-dark-0: #0d0103ff;\n --red-dark-1: #220107ff;\n --red-dark-2: #38020bff;\n --red-dark-3: #4d020eff;\n --red-dark-4: #630312ff;\n --red-dark-5: #780316ff;\n --red-dark-6: #8d031aff;\n --red-dark-7: #a3041dff;\n --red-translucent: #b804211f;\n --orange--: #d13704ff;\n --orange-light-0: #f2e9e6ff;\n --orange-light-1: #eed3caff;\n --orange-light-2: #eabdaeff;\n --orange-light-3: #e6a691ff;\n --orange-light-4: #e29075ff;\n --orange-light-5: #dd7a59ff;\n --orange-light-6: #d9643dff;\n --orange-light-7: #d54d20ff;\n --orange-dark-0: #0d0300ff;\n --orange-dark-1: #260a01ff;\n --orange-dark-2: #3e1001ff;\n --orange-dark-3: #571702ff;\n --orange-dark-4: #6f1d02ff;\n --orange-dark-5: #882403ff;\n --orange-dark-6: #a02a03ff;\n --orange-dark-7: #b93104ff;\n --orange-translucent: #d137041f;\n --amber--: #d16004ff;\n --amber-light-0: #f2ece6ff;\n --amber-light-1: #eedbcaff;\n --amber-light-2: #eac9aeff;\n --amber-light-3: #e6b891ff;\n --amber-light-4: #e2a675ff;\n --amber-light-5: #dd9559ff;\n --amber-light-6: #d9833dff;\n --amber-light-7: #d57220ff;\n --amber-dark-0: #0d0c0cff;\n --amber-dark-1: #26170bff;\n --amber-dark-2: #3e210aff;\n --amber-dark-3: #572c09ff;\n --amber-dark-4: #6f3608ff;\n --amber-dark-5: #884107ff;\n --amber-dark-6: #a04b06ff;\n --amber-dark-7: #b95605ff;\n --amber-translucent: #d160041f;\n --yellow--: #d17f04ff;\n --yellow-light-0: #f2eadfff;\n --yellow-light-1: #eeddc4ff;\n --yellow-light-2: #eacfa8ff;\n --yellow-light-3: #e6c28dff;\n --yellow-light-4: #e2b572ff;\n --yellow-light-5: #dda756ff;\n --yellow-light-6: #d99a3bff;\n --yellow-light-7: #d58c1fff;\n --yellow-dark-0: #0d0c0cff;\n --yellow-dark-1: #261a0bff;\n --yellow-dark-2: #3e290aff;\n --yellow-dark-3: #573709ff;\n --yellow-dark-4: #6f4608ff;\n --yellow-dark-5: #885407ff;\n --yellow-dark-6: #a06206ff;\n --yellow-dark-7: #b97105ff;\n --yellow-translucent: #d17f041f;\n --lime--: #cad104ff;\n --lime-light-0: #f2f2dfff;\n --lime-light-1: #edeec4ff;\n --lime-light-2: #e8eaa8ff;\n --lime-light-3: #e3e68dff;\n --lime-light-4: #dee272ff;\n --lime-light-5: #d9dd56ff;\n --lime-light-6: #d4d93bff;\n --lime-light-7: #cfd51fff;\n --lime-dark-0: #0d0d0cff;\n --lime-dark-1: #25260bff;\n --lime-dark-2: #3c3e0aff;\n --lime-dark-3: #545709ff;\n --lime-dark-4: #6c6f08ff;\n --lime-dark-5: #838807ff;\n --lime-dark-6: #9ba006ff;\n --lime-dark-7: #b2b905ff;\n --lime-translucent: #cad1041f;\n --green--: #2dba73ff;\n --green-light-0: #e6f2ecff;\n --green-light-1: #cfebddff;\n --green-light-2: #b8e4ceff;\n --green-light-3: #a1ddbfff;\n --green-light-4: #8ad6b0ff;\n --green-light-5: #72cfa0ff;\n --green-light-6: #5bc891ff;\n --green-light-7: #44c182ff;\n --green-dark-0: #030d08ff;\n --green-dark-1: #082315ff;\n --green-dark-2: #0e3823ff;\n --green-dark-3: #134e30ff;\n --green-dark-4: #18643eff;\n --green-dark-5: #1d794bff;\n --green-dark-6: #238f58ff;\n --green-dark-7: #28a466ff;\n --green-translucent: #2dba731f;\n --teal--: #04b8b8ff;\n --teal-light-0: #f2fffeff;\n --teal-light-1: #d4f6f5ff;\n --teal-light-2: #b7ededff;\n --teal-light-3: #99e4e4ff;\n --teal-light-4: #7bdcdbff;\n --teal-light-5: #5dd3d2ff;\n --teal-light-6: #40cacaff;\n --teal-light-7: #22c1c1ff;\n --teal-dark-0: #0c0d0dff;\n --teal-dark-1: #0b2624ff;\n --teal-dark-2: #0a3e3cff;\n --teal-dark-3: #095753ff;\n --teal-dark-4: #086f6aff;\n --teal-dark-5: #078881ff;\n --teal-dark-6: #06a099ff;\n --teal-dark-7: #05b9b0ff;\n --teal-translucent: #04b8b81f;\n --blue--: #0576ffff;\n --blue-light-0: #ebf5ffff;\n --blue-light-1: #cee5ffff;\n --blue-light-2: #b2d5ffff;\n --blue-light-3: #95c5ffff;\n --blue-light-4: #78b6ffff;\n --blue-light-5: #5ba6ffff;\n --blue-light-6: #3f96ffff;\n --blue-light-7: #2286ffff;\n --blue-dark-0: #0c0c0dff;\n --blue-dark-1: #0b192bff;\n --blue-dark-2: #0a274aff;\n --blue-dark-3: #093468ff;\n --blue-dark-4: #094186ff;\n --blue-dark-5: #084ea4ff;\n --blue-dark-6: #075cc3ff;\n --blue-dark-7: #0669e1ff;\n --blue-translucent: #0576ff1f;\n --indigo--: #5405ffff;\n --indigo-light-0: #f6f2ffff;\n --indigo-light-1: #e2d4ffff;\n --indigo-light-2: #ceb7ffff;\n --indigo-light-3: #b999ffff;\n --indigo-light-4: #a57cffff;\n --indigo-light-5: #915effff;\n --indigo-light-6: #7d40ffff;\n --indigo-light-7: #6823ffff;\n --indigo-dark-0: #0d0c0cff;\n --indigo-dark-1: #160b2aff;\n --indigo-dark-2: #1f0a49ff;\n --indigo-dark-3: #280967ff;\n --indigo-dark-4: #310986ff;\n --indigo-dark-5: #3908a4ff;\n --indigo-dark-6: #4207c2ff;\n --indigo-dark-7: #4b06e1ff;\n --indigo-translucent: #5405ff1f;\n --purple--: #8a05ffff;\n --purple-light-0: #f9f2ffff;\n --purple-light-1: #ebd4ffff;\n --purple-light-2: #ddb7ffff;\n --purple-light-3: #cf99ffff;\n --purple-light-4: #c27cffff;\n --purple-light-5: #b45effff;\n --purple-light-6: #a640ffff;\n --purple-light-7: #9823ffff;\n --purple-dark-0: #0c0c0dff;\n --purple-dark-1: #1c0b2bff;\n --purple-dark-2: #2c0a4aff;\n --purple-dark-3: #3b0968ff;\n --purple-dark-4: #4b0986ff;\n --purple-dark-5: #5b08a4ff;\n --purple-dark-6: #6b07c3ff;\n --purple-dark-7: #7a06e1ff;\n --purple-translucent: #8a05ff1f;\n --pink--: #ff05a8ff;\n --pink-light-0: #f9f2ffff;\n --pink-light-1: #fad4f4ff;\n --pink-light-2: #fbb7e9ff;\n --pink-light-3: #fb99deff;\n --pink-light-4: #fc7cd4ff;\n --pink-light-5: #fd5ec9ff;\n --pink-light-6: #fe40beff;\n --pink-light-7: #fe23b3ff;\n --pink-dark-0: #0c0c0dff;\n --pink-dark-1: #2a0b20ff;\n --pink-dark-2: #490a34ff;\n --pink-dark-3: #670947ff;\n --pink-dark-4: #86095bff;\n --pink-dark-5: #a4086eff;\n --pink-dark-6: #c20781ff;\n --pink-dark-7: #e10695ff;\n --pink-translucent: #ff05a81f;\n --brown--: #ab642eff;\n --brown-light-0: #f2dfdfff;\n --brown-light-1: #e9d0c9ff;\n --brown-light-2: #e0c0b3ff;\n --brown-light-3: #d7b19dff;\n --brown-light-4: #cfa287ff;\n --brown-light-5: #c69270ff;\n --brown-light-6: #bd835aff;\n --brown-light-7: #b47344ff;\n --brown-dark-0: #0d0c0cff;\n --brown-dark-1: #211710ff;\n --brown-dark-2: #352215ff;\n --brown-dark-3: #482d19ff;\n --brown-dark-4: #5c381dff;\n --brown-dark-5: #704321ff;\n --brown-dark-6: #844e26ff;\n --brown-dark-7: #97592aff;\n --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n --border-none: 0px;\n --border-x-thin: 1px;\n --border-thin: 2px;\n --border-medium: 4px;\n --border-thick: 8px;\n --border-x-thick: 10px;\n --spacing-none: 0px;\n --spacing-4x-small: 1px;\n --spacing-2x-small: 2px;\n --spacing-x-small: 4px;\n --spacing-small: 6px;\n --spacing-medium: 8px;\n --spacing-large: 12px;\n --spacing-x-large: 16px;\n --spacing-2x-large: 24px;\n --spacing-4x-large: 32px;\n --font-size-display-1: 6em;\n --font-size-display-2: 5.5em;\n --font-size-display-3: 4.5em;\n --font-size-display-4: 3.5em;\n --font-size-h1: 2em;\n --font-size-h2: 1.5em;\n --font-size-h3: 1.17em;\n --font-size-h4: 1em;\n --font-size-h5: 0.83em;\n --font-size-paragraph: 1em;\n --font-size-small: 0.8em;\n --font-size-label: 0.83em;\n --font-size-button: 1em;\n --font-size-quote: 1.17em;\n --radii-none: 0px;\n --radii-x-small: 0.125em;\n --radii-small: 0.25em;\n --radii-medium: 0.375em;\n --radii-large: 0.5px;\n --radii-x-large: 1em;\n --radii-full: 9999px;\n --sizing-2x-small: 16px;\n --sizing-x-small: 19px;\n --sizing-small: 32px;\n --sizing-medium: 40px;\n --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n --component-appbar-collapsed-width: 48px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-avatar-border-radius-circle: var(--radii-full);\n --component-avatar-border-radius-square: var(--radii-small);\n --component-avatar-size-large: var(--sizing-large);\n --component-avatar-size-medium: var(--sizing-medium);\n --component-avatar-size-small: var(--sizing-small);\n --component-badge-border-radius-circle: var(--radii-full);\n --component-badge-border-radius-square: var(--radii-small);\n --component-badge-padding-large: var(--spacing-small);\n --component-badge-padding-medium: var(--spacing-x-small);\n --component-badge-padding-small: var(--spacing-2x-small);\n --component-badge-size-large: var(--sizing-medium);\n --component-badge-size-medium: var(--sizing-small);\n --component-badge-size-small: var(--sizing-2x-small);\n --component-button-border-radius-inner: var(--radii-x-small);\n --component-button-border-radius-outer: var(--radii-small);\n --component-button-border-width: var(--border-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n --component-card-border-radius-inner: var(--radii-small);\n --component-card-border-radius-outer: var(--radii-medium);\n --component-card-border-width: var(--border-x-thin);\n --component-card-inner-border-width: var(--border-x-thin);\n --component-card-padding-inner: var(--spacing-medium);\n --component-card-padding-outer: var(--spacing-x-large);\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n --component-dialog-border-radius-inner: var(--radii-x-small);\n --component-dialog-border-radius-outer: var(--radii-small);\n --component-dialog-border-width: var(--border-x-thin);\n --component-dialog-inner-border-width: var(--border-x-thin);\n --component-dialog-padding: var(--spacing-medium);\n --component-drawer-border-radius: var(--radii-small);\n --component-drawer-border-width: var(--border-x-thin);\n --component-drawer-handle-padding: var(--spacing-x-small);\n --component-drawer-handle-width: var(--spacing-x-small);\n --component-drawer-padding: var(--spacing-medium);\n --component-inputs-border-radius-inner: var(--radii-x-small);\n --component-inputs-border-radius-outer: var(--radii-small);\n --component-inputs-border-width: var(--border-thin);\n --component-inputs-padding-large: var(--spacing-x-large);\n --component-inputs-padding-medium: var(--spacing-medium);\n --component-inputs-padding-small: var(--spacing-x-small);\n --component-menu-border-radius: var(--radii-x-small);\n --component-menu-border-width: var(--border-x-thin);\n --component-menu-padding-horizontal: var(--spacing-small);\n --component-menu-padding-vertical: var(--spacing-x-small);\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-padding: var(--spacing-medium);\n --component-progress-border-radius-inner: var(--radii-small);\n --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-progress-border-width: var(--border-x-thin);\n --component-progress-padding: var(--spacing-x-small);\n --component-progress-size-large: var(--sizing-large);\n --component-progress-size-medium: var(--sizing-medium);\n --component-progress-size-small: var(--sizing-small);\n --component-radio-dot-offset: var(--spacing-2x-small);\n --component-radio-dot-size: var(--spacing-medium);\n --component-radio-size: var(--sizing-2x-small);\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n --component-slider-border-radius-inner: var(--radii-small);\n --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-slider-border-width: var(--border-x-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-x-thin);\n --component-switch-padding: var(--spacing-2x-small);\n --component-tab-border-radius-inner: var(--radii-x-small);\n --component-tab-border-radius-outer: var(--radii-small);\n --component-tab-border-width: var(--border-x-thin);\n --component-tab-gap-large: var(--spacing-large);\n --component-tab-gap-medium: var(--spacing-small);\n --component-tab-gap-small: var(--spacing-2x-small);\n --component-tab-padding-large: var(--spacing-2x-large);\n --component-tab-padding-medium: var(--spacing-large);\n --component-tab-padding-small: var(--spacing-small);\n --component-table-border-radius: var(--radii-small);\n --component-table-border-width: var(--border-x-thin);\n --component-table-border-width-header: var(--border-thin);\n --component-table-padding-large: var(--spacing-large);\n --component-table-padding-medium: var(--spacing-medium);\n --component-table-padding-small: var(--spacing-small);\n --component-tag-border-radius-circle: var(--radii-full);\n --component-tag-border-radius-square: var(--radii-small);\n --component-tag-padding-large: var(--spacing-small);\n --component-tag-padding-medium: var(--spacing-x-small);\n --component-tag-padding-small: var(--spacing-2x-small);\n --component-tag-size-large: var(--sizing-large);\n --component-tag-size-medium: var(--sizing-medium);\n --component-tag-size-small: var(--sizing-small);\n --component-toast-border-radius: var(--radii-small);\n --component-toast-offset: var(--spacing-x-large);\n --component-toast-padding: var(--spacing-medium);\n --component-toast-padding-h: var(--spacing-x-large);\n --component-tooltip-border-radius: var(--radii-small);\n --component-tooltip-padding: var(--spacing-x-small);\n --component-tooltip-padding-h: var(--spacing-medium);\n}\n";
|
|
1
|
+
var variablesCSS = "/* Colors */\n:root {\n --neutral--: #7f8286ff;\n --neutral-white: #ffffffff;\n --neutral-black: #000000ff;\n --neutral-light-0: #f7f7faff;\n --neutral-light-1: #f0f0f2ff;\n --neutral-light-2: #dfe0e3ff;\n --neutral-light-3: #cacbcfff;\n --neutral-light-4: #bbbdc0ff;\n --neutral-light-5: #acaeb2ff;\n --neutral-light-6: #9d9fa3ff;\n --neutral-light-7: #8e9195ff;\n --neutral-dark-0: #0c0c0dff;\n --neutral-dark-1: #151617ff;\n --neutral-dark-2: #292a2bff;\n --neutral-dark-3: #37383aff;\n --neutral-dark-4: #46474aff;\n --neutral-dark-5: #545659ff;\n --neutral-dark-6: #626568ff;\n --neutral-dark-7: #717377ff;\n --neutral-black-translucent: #0000001f;\n --neutral-white-translucent: #1111111f;\n --red--: #b80421ff;\n --red-light-0: #f2e6e8ff;\n --red-light-1: #ebcacfff;\n --red-light-2: #e4aeb6ff;\n --red-light-3: #dc919dff;\n --red-light-4: #d57585ff;\n --red-light-5: #ce596cff;\n --red-light-6: #c73d53ff;\n --red-light-7: #bf203aff;\n --red-dark-0: #0d0103ff;\n --red-dark-1: #220107ff;\n --red-dark-2: #38020bff;\n --red-dark-3: #4d020eff;\n --red-dark-4: #630312ff;\n --red-dark-5: #780316ff;\n --red-dark-6: #8d031aff;\n --red-dark-7: #a3041dff;\n --red-translucent: #b804211f;\n --orange--: #d13704ff;\n --orange-light-0: #f2e9e6ff;\n --orange-light-1: #eed3caff;\n --orange-light-2: #eabdaeff;\n --orange-light-3: #e6a691ff;\n --orange-light-4: #e29075ff;\n --orange-light-5: #dd7a59ff;\n --orange-light-6: #d9643dff;\n --orange-light-7: #d54d20ff;\n --orange-dark-0: #0d0300ff;\n --orange-dark-1: #260a01ff;\n --orange-dark-2: #3e1001ff;\n --orange-dark-3: #571702ff;\n --orange-dark-4: #6f1d02ff;\n --orange-dark-5: #882403ff;\n --orange-dark-6: #a02a03ff;\n --orange-dark-7: #b93104ff;\n --orange-translucent: #d137041f;\n --amber--: #d16004ff;\n --amber-light-0: #f2ece6ff;\n --amber-light-1: #eedbcaff;\n --amber-light-2: #eac9aeff;\n --amber-light-3: #e6b891ff;\n --amber-light-4: #e2a675ff;\n --amber-light-5: #dd9559ff;\n --amber-light-6: #d9833dff;\n --amber-light-7: #d57220ff;\n --amber-dark-0: #0d0c0cff;\n --amber-dark-1: #26170bff;\n --amber-dark-2: #3e210aff;\n --amber-dark-3: #572c09ff;\n --amber-dark-4: #6f3608ff;\n --amber-dark-5: #884107ff;\n --amber-dark-6: #a04b06ff;\n --amber-dark-7: #b95605ff;\n --amber-translucent: #d160041f;\n --yellow--: #d17f04ff;\n --yellow-light-0: #f2eadfff;\n --yellow-light-1: #eeddc4ff;\n --yellow-light-2: #eacfa8ff;\n --yellow-light-3: #e6c28dff;\n --yellow-light-4: #e2b572ff;\n --yellow-light-5: #dda756ff;\n --yellow-light-6: #d99a3bff;\n --yellow-light-7: #d58c1fff;\n --yellow-dark-0: #0d0c0cff;\n --yellow-dark-1: #261a0bff;\n --yellow-dark-2: #3e290aff;\n --yellow-dark-3: #573709ff;\n --yellow-dark-4: #6f4608ff;\n --yellow-dark-5: #885407ff;\n --yellow-dark-6: #a06206ff;\n --yellow-dark-7: #b97105ff;\n --yellow-translucent: #d17f041f;\n --lime--: #cad104ff;\n --lime-light-0: #f2f2dfff;\n --lime-light-1: #edeec4ff;\n --lime-light-2: #e8eaa8ff;\n --lime-light-3: #e3e68dff;\n --lime-light-4: #dee272ff;\n --lime-light-5: #d9dd56ff;\n --lime-light-6: #d4d93bff;\n --lime-light-7: #cfd51fff;\n --lime-dark-0: #0d0d0cff;\n --lime-dark-1: #25260bff;\n --lime-dark-2: #3c3e0aff;\n --lime-dark-3: #545709ff;\n --lime-dark-4: #6c6f08ff;\n --lime-dark-5: #838807ff;\n --lime-dark-6: #9ba006ff;\n --lime-dark-7: #b2b905ff;\n --lime-translucent: #cad1041f;\n --green--: #2dba73ff;\n --green-light-0: #e6f2ecff;\n --green-light-1: #cfebddff;\n --green-light-2: #b8e4ceff;\n --green-light-3: #a1ddbfff;\n --green-light-4: #8ad6b0ff;\n --green-light-5: #72cfa0ff;\n --green-light-6: #5bc891ff;\n --green-light-7: #44c182ff;\n --green-dark-0: #030d08ff;\n --green-dark-1: #082315ff;\n --green-dark-2: #0e3823ff;\n --green-dark-3: #134e30ff;\n --green-dark-4: #18643eff;\n --green-dark-5: #1d794bff;\n --green-dark-6: #238f58ff;\n --green-dark-7: #28a466ff;\n --green-translucent: #2dba731f;\n --teal--: #04b8b8ff;\n --teal-light-0: #f2fffeff;\n --teal-light-1: #d4f6f5ff;\n --teal-light-2: #b7ededff;\n --teal-light-3: #99e4e4ff;\n --teal-light-4: #7bdcdbff;\n --teal-light-5: #5dd3d2ff;\n --teal-light-6: #40cacaff;\n --teal-light-7: #22c1c1ff;\n --teal-dark-0: #0c0d0dff;\n --teal-dark-1: #0b2624ff;\n --teal-dark-2: #0a3e3cff;\n --teal-dark-3: #095753ff;\n --teal-dark-4: #086f6aff;\n --teal-dark-5: #078881ff;\n --teal-dark-6: #06a099ff;\n --teal-dark-7: #05b9b0ff;\n --teal-translucent: #04b8b81f;\n --blue--: #0576ffff;\n --blue-light-0: #ebf5ffff;\n --blue-light-1: #cee5ffff;\n --blue-light-2: #b2d5ffff;\n --blue-light-3: #95c5ffff;\n --blue-light-4: #78b6ffff;\n --blue-light-5: #5ba6ffff;\n --blue-light-6: #3f96ffff;\n --blue-light-7: #2286ffff;\n --blue-dark-0: #0c0c0dff;\n --blue-dark-1: #0b192bff;\n --blue-dark-2: #0a274aff;\n --blue-dark-3: #093468ff;\n --blue-dark-4: #094186ff;\n --blue-dark-5: #084ea4ff;\n --blue-dark-6: #075cc3ff;\n --blue-dark-7: #0669e1ff;\n --blue-translucent: #0576ff1f;\n --indigo--: #5405ffff;\n --indigo-light-0: #f6f2ffff;\n --indigo-light-1: #e2d4ffff;\n --indigo-light-2: #ceb7ffff;\n --indigo-light-3: #b999ffff;\n --indigo-light-4: #a57cffff;\n --indigo-light-5: #915effff;\n --indigo-light-6: #7d40ffff;\n --indigo-light-7: #6823ffff;\n --indigo-dark-0: #0d0c0cff;\n --indigo-dark-1: #160b2aff;\n --indigo-dark-2: #1f0a49ff;\n --indigo-dark-3: #280967ff;\n --indigo-dark-4: #310986ff;\n --indigo-dark-5: #3908a4ff;\n --indigo-dark-6: #4207c2ff;\n --indigo-dark-7: #4b06e1ff;\n --indigo-translucent: #5405ff1f;\n --purple--: #8a05ffff;\n --purple-light-0: #f9f2ffff;\n --purple-light-1: #ebd4ffff;\n --purple-light-2: #ddb7ffff;\n --purple-light-3: #cf99ffff;\n --purple-light-4: #c27cffff;\n --purple-light-5: #b45effff;\n --purple-light-6: #a640ffff;\n --purple-light-7: #9823ffff;\n --purple-dark-0: #0c0c0dff;\n --purple-dark-1: #1c0b2bff;\n --purple-dark-2: #2c0a4aff;\n --purple-dark-3: #3b0968ff;\n --purple-dark-4: #4b0986ff;\n --purple-dark-5: #5b08a4ff;\n --purple-dark-6: #6b07c3ff;\n --purple-dark-7: #7a06e1ff;\n --purple-translucent: #8a05ff1f;\n --pink--: #ff05a8ff;\n --pink-light-0: #f9f2ffff;\n --pink-light-1: #fad4f4ff;\n --pink-light-2: #fbb7e9ff;\n --pink-light-3: #fb99deff;\n --pink-light-4: #fc7cd4ff;\n --pink-light-5: #fd5ec9ff;\n --pink-light-6: #fe40beff;\n --pink-light-7: #fe23b3ff;\n --pink-dark-0: #0c0c0dff;\n --pink-dark-1: #2a0b20ff;\n --pink-dark-2: #490a34ff;\n --pink-dark-3: #670947ff;\n --pink-dark-4: #86095bff;\n --pink-dark-5: #a4086eff;\n --pink-dark-6: #c20781ff;\n --pink-dark-7: #e10695ff;\n --pink-translucent: #ff05a81f;\n --brown--: #ab642eff;\n --brown-light-0: #f2dfdfff;\n --brown-light-1: #e9d0c9ff;\n --brown-light-2: #e0c0b3ff;\n --brown-light-3: #d7b19dff;\n --brown-light-4: #cfa287ff;\n --brown-light-5: #c69270ff;\n --brown-light-6: #bd835aff;\n --brown-light-7: #b47344ff;\n --brown-dark-0: #0d0c0cff;\n --brown-dark-1: #211710ff;\n --brown-dark-2: #352215ff;\n --brown-dark-3: #482d19ff;\n --brown-dark-4: #5c381dff;\n --brown-dark-5: #704321ff;\n --brown-dark-6: #844e26ff;\n --brown-dark-7: #97592aff;\n --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n --border-none: 0px;\n --border-x-thin: 1px;\n --border-thin: 2px;\n --border-medium: 4px;\n --border-thick: 8px;\n --border-x-thick: 10px;\n --spacing-none: 0px;\n --spacing-4x-small: 1px;\n --spacing-2x-small: 2px;\n --spacing-x-small: 4px;\n --spacing-small: 6px;\n --spacing-medium: 8px;\n --spacing-large: 12px;\n --spacing-x-large: 16px;\n --spacing-2x-large: 24px;\n --spacing-4x-large: 32px;\n --font-size-display-1: 6em;\n --font-size-display-2: 5.5em;\n --font-size-display-3: 4.5em;\n --font-size-display-4: 3.5em;\n --font-size-h1: 2em;\n --font-size-h2: 1.5em;\n --font-size-h3: 1.17em;\n --font-size-h4: 1em;\n --font-size-h5: 0.83em;\n --font-size-paragraph: 1em;\n --font-size-small: 0.8em;\n --font-size-label: 0.83em;\n --font-size-button: 1em;\n --font-size-quote: 1.17em;\n --radii-none: 0px;\n --radii-x-small: 0.125em;\n --radii-small: 0.25em;\n --radii-medium: 0.375em;\n --radii-large: 0.5px;\n --radii-x-large: 1em;\n --radii-full: 9999px;\n --sizing-2x-small: 16px;\n --sizing-x-small: 19px;\n --sizing-small: 32px;\n --sizing-medium: 40px;\n --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n --component-appbar-collapsed-width: 48px;\n --component-appbar-padding: var(--spacing-medium);\n --component-appbar-width: 240px;\n --component-avatar-border-radius-circle: var(--radii-full);\n --component-avatar-border-radius-square: var(--radii-small);\n --component-avatar-size-large: var(--sizing-large);\n --component-avatar-size-medium: var(--sizing-medium);\n --component-avatar-size-small: var(--sizing-small);\n --component-badge-border-radius-circle: var(--radii-full);\n --component-badge-border-radius-square: var(--radii-small);\n --component-badge-padding-large: var(--spacing-small);\n --component-badge-padding-medium: var(--spacing-x-small);\n --component-badge-padding-small: var(--spacing-2x-small);\n --component-badge-size-large: var(--sizing-medium);\n --component-badge-size-medium: var(--sizing-small);\n --component-badge-size-small: var(--sizing-2x-small);\n --component-button-border-radius-inner: var(--radii-x-small);\n --component-button-border-radius-outer: var(--radii-small);\n --component-button-border-width: var(--border-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-border-width-2: var(--border-x-thin);\n --component-button-padding-large: var(--spacing-x-large);\n --component-button-padding-medium: var(--spacing-medium);\n --component-button-padding-small: var(--spacing-x-small);\n --component-card-border-radius-inner: var(--radii-small);\n --component-card-border-radius-outer: var(--radii-medium);\n --component-card-border-width: var(--border-x-thin);\n --component-card-inner-border-width: var(--border-x-thin);\n --component-card-padding-inner: var(--spacing-medium);\n --component-card-padding-outer: var(--spacing-x-large);\n --component-checkbox-icon-size: var(--sizing-2x-small);\n --component-checkbox-size: var(--sizing-x-small);\n --component-dialog-border-radius-inner: var(--radii-x-small);\n --component-dialog-border-radius-outer: var(--radii-small);\n --component-dialog-border-width: var(--border-x-thin);\n --component-dialog-inner-border-width: var(--border-x-thin);\n --component-dialog-padding: var(--spacing-medium);\n --component-drawer-border-radius: var(--radii-small);\n --component-drawer-border-width: var(--border-x-thin);\n --component-drawer-handle-padding: var(--spacing-x-small);\n --component-drawer-handle-width: var(--spacing-x-small);\n --component-drawer-padding: var(--spacing-medium);\n --component-inputs-border-radius-inner: var(--radii-x-small);\n --component-inputs-border-radius-outer: var(--radii-small);\n --component-inputs-border-width: var(--border-thin);\n --component-inputs-padding-large: var(--spacing-x-large);\n --component-inputs-padding-medium: var(--spacing-medium);\n --component-inputs-padding-small: var(--spacing-x-small);\n --component-menu-border-radius: var(--radii-x-small);\n --component-menu-border-width: var(--border-x-thin);\n --component-menu-padding-horizontal: var(--spacing-small);\n --component-menu-padding-vertical: var(--spacing-x-small);\n --component-panelbar-border-radius: var(--radii-x-small);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-border-width: var(--border-x-thin);\n --component-panelbar-padding: var(--spacing-medium);\n --component-progress-border-radius-inner: var(--radii-small);\n --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-progress-border-width: var(--border-x-thin);\n --component-progress-padding: var(--spacing-x-small);\n --component-progress-size-large: var(--sizing-large);\n --component-progress-size-medium: var(--sizing-medium);\n --component-progress-size-small: var(--sizing-small);\n --component-radio-dot-offset: var(--spacing-2x-small);\n --component-radio-dot-size: var(--spacing-medium);\n --component-radio-size: var(--sizing-2x-small);\n --component-sidebar-border-radius: var(--radii-small);\n --component-sidebar-border-width: var(--border-x-thin);\n --component-slider-border-radius-inner: var(--radii-small);\n --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n --component-slider-border-width: var(--border-x-thin);\n --component-slider-padding: var(--spacing-x-small);\n --component-slider-thumb-border-radius: var(--radii-x-small);\n --component-switch-border-radius: var(--radii-full);\n --component-switch-border-width: var(--border-x-thin);\n --component-switch-padding: var(--spacing-2x-small);\n --component-tab-border-radius-inner: var(--radii-x-small);\n --component-tab-border-radius-outer: var(--radii-small);\n --component-tab-border-width: var(--border-x-thin);\n --component-tab-gap-large: var(--spacing-large);\n --component-tab-gap-medium: var(--spacing-small);\n --component-tab-gap-small: var(--spacing-2x-small);\n --component-tab-content-padding: var(--spacing-large);\n --component-tab-padding-large: var(--spacing-2x-large);\n --component-tab-padding-medium: var(--spacing-large);\n --component-tab-padding-small: var(--spacing-small);\n --component-table-border-radius: var(--radii-small);\n --component-table-border-width: var(--border-x-thin);\n --component-table-border-width-header: var(--border-thin);\n --component-table-padding-large: var(--spacing-large);\n --component-table-padding-medium: var(--spacing-medium);\n --component-table-padding-small: var(--spacing-small);\n --component-tag-border-radius-circle: var(--radii-full);\n --component-tag-border-radius-square: var(--radii-small);\n --component-tag-padding-large: var(--spacing-small);\n --component-tag-padding-medium: var(--spacing-x-small);\n --component-tag-padding-small: var(--spacing-2x-small);\n --component-tag-size-large: var(--sizing-large);\n --component-tag-size-medium: var(--sizing-medium);\n --component-tag-size-small: var(--sizing-small);\n --component-toast-border-radius: var(--radii-small);\n --component-toast-offset: var(--spacing-x-large);\n --component-toast-padding: var(--spacing-medium);\n --component-toast-padding-h: var(--spacing-x-large);\n --component-tooltip-border-radius: var(--radii-small);\n --component-tooltip-padding: var(--spacing-x-small);\n --component-tooltip-padding-h: var(--spacing-medium);\n}\n";
|
|
2
2
|
|
|
3
3
|
class YumeButton extends HTMLElement {
|
|
4
4
|
static get observedAttributes() {
|
|
@@ -646,6 +646,7 @@ class YumeMenu extends HTMLElement {
|
|
|
646
646
|
const li = document.createElement("li");
|
|
647
647
|
li.className = "menuitem";
|
|
648
648
|
li.setAttribute("role", "menuitem");
|
|
649
|
+
li.setAttribute("part", "menuitem");
|
|
649
650
|
li.tabIndex = 0;
|
|
650
651
|
|
|
651
652
|
const contentWrapper = document.createElement("span");
|
|
@@ -841,6 +842,7 @@ class YumeMenu extends HTMLElement {
|
|
|
841
842
|
const rootUl = this._createMenuList(this.items);
|
|
842
843
|
rootUl.classList.add("menu");
|
|
843
844
|
rootUl.setAttribute("role", "menu");
|
|
845
|
+
rootUl.setAttribute("part", "menu");
|
|
844
846
|
this.shadowRoot.appendChild(rootUl);
|
|
845
847
|
}
|
|
846
848
|
}
|
|
@@ -1299,6 +1301,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1299
1301
|
/* --- Header: logo + title --- */
|
|
1300
1302
|
const header = document.createElement("div");
|
|
1301
1303
|
header.className = "appbar-header";
|
|
1304
|
+
header.setAttribute("part", "header");
|
|
1302
1305
|
|
|
1303
1306
|
const headerContent = document.createElement("div");
|
|
1304
1307
|
headerContent.className = "header-content";
|
|
@@ -1323,6 +1326,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1323
1326
|
/* --- Body: y-button nav items --- */
|
|
1324
1327
|
const body = document.createElement("div");
|
|
1325
1328
|
body.className = "appbar-body";
|
|
1329
|
+
body.setAttribute("part", "body");
|
|
1326
1330
|
|
|
1327
1331
|
const navItems = this.items;
|
|
1328
1332
|
navItems.forEach((item) => {
|
|
@@ -1382,6 +1386,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1382
1386
|
/* --- Footer: slot + collapse toggle (vertical only) --- */
|
|
1383
1387
|
const footer = document.createElement("div");
|
|
1384
1388
|
footer.className = "appbar-footer";
|
|
1389
|
+
footer.setAttribute("part", "footer");
|
|
1385
1390
|
|
|
1386
1391
|
const footerSlot = document.createElement("slot");
|
|
1387
1392
|
footerSlot.name = "footer";
|
|
@@ -2332,6 +2337,7 @@ class YumeDialog extends HTMLElement {
|
|
|
2332
2337
|
|
|
2333
2338
|
const header = document.createElement("div");
|
|
2334
2339
|
header.className = "header";
|
|
2340
|
+
header.setAttribute("part", "header");
|
|
2335
2341
|
|
|
2336
2342
|
const headerContent = document.createElement("div");
|
|
2337
2343
|
headerContent.className = "header-content";
|
|
@@ -2351,10 +2357,12 @@ class YumeDialog extends HTMLElement {
|
|
|
2351
2357
|
|
|
2352
2358
|
const body = document.createElement("div");
|
|
2353
2359
|
body.className = "body";
|
|
2360
|
+
body.setAttribute("part", "body");
|
|
2354
2361
|
body.innerHTML = `<slot name="body"></slot>`;
|
|
2355
2362
|
|
|
2356
2363
|
const footer = document.createElement("div");
|
|
2357
2364
|
footer.className = "footer";
|
|
2365
|
+
footer.setAttribute("part", "footer");
|
|
2358
2366
|
footer.innerHTML = `<slot name="footer"></slot>`;
|
|
2359
2367
|
|
|
2360
2368
|
dialog.appendChild(header);
|
|
@@ -2742,6 +2750,7 @@ class YumeDrawer extends HTMLElement {
|
|
|
2742
2750
|
|
|
2743
2751
|
const overlay = document.createElement("div");
|
|
2744
2752
|
overlay.className = "overlay";
|
|
2753
|
+
overlay.setAttribute("part", "overlay");
|
|
2745
2754
|
overlay.addEventListener("click", () => this._onOverlayClick());
|
|
2746
2755
|
this.shadowRoot.appendChild(overlay);
|
|
2747
2756
|
|
|
@@ -2750,6 +2759,7 @@ class YumeDrawer extends HTMLElement {
|
|
|
2750
2759
|
panel.setAttribute("role", "dialog");
|
|
2751
2760
|
panel.setAttribute("aria-modal", "true");
|
|
2752
2761
|
panel.setAttribute("tabindex", "-1");
|
|
2762
|
+
panel.setAttribute("part", "panel");
|
|
2753
2763
|
panel.setAttribute("data-position", this.position);
|
|
2754
2764
|
|
|
2755
2765
|
const handle = document.createElement("div");
|
|
@@ -2764,14 +2774,17 @@ class YumeDrawer extends HTMLElement {
|
|
|
2764
2774
|
|
|
2765
2775
|
const header = document.createElement("div");
|
|
2766
2776
|
header.className = "drawer-header";
|
|
2777
|
+
header.setAttribute("part", "header");
|
|
2767
2778
|
header.innerHTML = `<slot name="header"></slot>`;
|
|
2768
2779
|
|
|
2769
2780
|
const body = document.createElement("div");
|
|
2770
2781
|
body.className = "drawer-body";
|
|
2782
|
+
body.setAttribute("part", "body");
|
|
2771
2783
|
body.innerHTML = `<slot name="body"></slot>`;
|
|
2772
2784
|
|
|
2773
2785
|
const footer = document.createElement("div");
|
|
2774
2786
|
footer.className = "drawer-footer";
|
|
2787
|
+
footer.setAttribute("part", "footer");
|
|
2775
2788
|
footer.innerHTML = `<slot name="footer"></slot>`;
|
|
2776
2789
|
|
|
2777
2790
|
content.appendChild(header);
|
|
@@ -3850,11 +3863,11 @@ class YumeRadio extends HTMLElement {
|
|
|
3850
3863
|
|
|
3851
3864
|
this.shadowRoot.innerHTML = `
|
|
3852
3865
|
<style>${style}</style>
|
|
3853
|
-
<fieldset role="radiogroup">
|
|
3866
|
+
<fieldset role="radiogroup" part="radio">
|
|
3854
3867
|
${options
|
|
3855
3868
|
.map(
|
|
3856
3869
|
(opt, idx) => `
|
|
3857
|
-
<label>
|
|
3870
|
+
<label part="label">
|
|
3858
3871
|
<input
|
|
3859
3872
|
type="radio"
|
|
3860
3873
|
name="${name}"
|
|
@@ -4831,6 +4844,7 @@ class YumeSwitch extends HTMLElement {
|
|
|
4831
4844
|
}
|
|
4832
4845
|
|
|
4833
4846
|
labelTag(pos) {
|
|
4847
|
+
if (this.getAttribute("label-display") === "false") return "";
|
|
4834
4848
|
const labelPos = this.getAttribute("label-position");
|
|
4835
4849
|
const shouldRender =
|
|
4836
4850
|
(pos === "top" && (labelPos === "top" || labelPos === "left")) ||
|
|
@@ -4925,13 +4939,12 @@ class YumeSwitch extends HTMLElement {
|
|
|
4925
4939
|
}
|
|
4926
4940
|
|
|
4927
4941
|
updateLabelDisplay() {
|
|
4928
|
-
const showLabels = this.getAttribute("label-display") !== "false";
|
|
4929
4942
|
const showToggleLabels =
|
|
4930
4943
|
this.hasAttribute("toggle-label") &&
|
|
4931
4944
|
this.getAttribute("toggle-label") !== "false";
|
|
4932
4945
|
this.style.setProperty(
|
|
4933
4946
|
"--show-labels",
|
|
4934
|
-
|
|
4947
|
+
showToggleLabels ? "flex" : "none",
|
|
4935
4948
|
);
|
|
4936
4949
|
}
|
|
4937
4950
|
|
|
@@ -5340,8 +5353,10 @@ class YumeTable extends HTMLElement {
|
|
|
5340
5353
|
|
|
5341
5354
|
const table = document.createElement("table");
|
|
5342
5355
|
table.setAttribute("role", "grid");
|
|
5356
|
+
table.setAttribute("part", "table");
|
|
5343
5357
|
|
|
5344
5358
|
const thead = document.createElement("thead");
|
|
5359
|
+
thead.setAttribute("part", "header");
|
|
5345
5360
|
const headerRow = document.createElement("tr");
|
|
5346
5361
|
|
|
5347
5362
|
columns.forEach((col) => {
|
|
@@ -5387,8 +5402,10 @@ class YumeTable extends HTMLElement {
|
|
|
5387
5402
|
|
|
5388
5403
|
rows.forEach((row) => {
|
|
5389
5404
|
const tr = document.createElement("tr");
|
|
5405
|
+
tr.setAttribute("part", "row");
|
|
5390
5406
|
columns.forEach((col, colIdx) => {
|
|
5391
5407
|
const td = document.createElement("td");
|
|
5408
|
+
td.setAttribute("part", "cell");
|
|
5392
5409
|
if (col.rowHeader || colIdx === 0) {
|
|
5393
5410
|
td.classList.add("row-header");
|
|
5394
5411
|
}
|
|
@@ -5439,12 +5456,12 @@ class YumeTag extends HTMLElement {
|
|
|
5439
5456
|
this.shadowRoot.innerHTML = "";
|
|
5440
5457
|
this.shadowRoot.appendChild(style);
|
|
5441
5458
|
this.shadowRoot.innerHTML += `
|
|
5442
|
-
<span class="tag">
|
|
5459
|
+
<span class="tag" part="tag">
|
|
5443
5460
|
<slot></slot>
|
|
5444
5461
|
${
|
|
5445
5462
|
removable
|
|
5446
5463
|
? `
|
|
5447
|
-
<button class="remove" aria-label="Remove tag">
|
|
5464
|
+
<button class="remove" part="remove" aria-label="Remove tag">
|
|
5448
5465
|
${close}
|
|
5449
5466
|
</button>
|
|
5450
5467
|
`
|
|
@@ -5771,7 +5788,7 @@ class YumeTabs extends HTMLElement {
|
|
|
5771
5788
|
z-index: 0;
|
|
5772
5789
|
border: var(--component-tab-border-width) solid var(--component-tabs-border-color);
|
|
5773
5790
|
border-radius: var(--component-tab-border-radius-outer);
|
|
5774
|
-
padding: var(--
|
|
5791
|
+
padding: var(--component-tab-content-padding);
|
|
5775
5792
|
background: var(--component-tabs-background);
|
|
5776
5793
|
}
|
|
5777
5794
|
:host([position="top"]) .tabpanel { border-top-left-radius: 0; }
|
|
@@ -5791,6 +5808,7 @@ class YumeTabs extends HTMLElement {
|
|
|
5791
5808
|
const btn = document.createElement("button");
|
|
5792
5809
|
btn.id = `tab-${tab.id}`;
|
|
5793
5810
|
btn.setAttribute("role", "tab");
|
|
5811
|
+
btn.setAttribute("part", "tab");
|
|
5794
5812
|
btn.setAttribute("aria-selected", isActive);
|
|
5795
5813
|
btn.setAttribute("aria-controls", `panel-${tab.id}`);
|
|
5796
5814
|
btn.setAttribute("aria-disabled", isDisabled);
|
|
@@ -5825,6 +5843,7 @@ class YumeTabs extends HTMLElement {
|
|
|
5825
5843
|
panel.className = "tabpanel";
|
|
5826
5844
|
panel.id = `panel-${this._activeTab}`;
|
|
5827
5845
|
panel.setAttribute("role", "tabpanel");
|
|
5846
|
+
panel.setAttribute("part", "content");
|
|
5828
5847
|
panel.setAttribute("aria-labelledby", `tab-${this._activeTab}`);
|
|
5829
5848
|
|
|
5830
5849
|
const contentSlot = document.createElement("slot");
|
|
@@ -5848,6 +5867,7 @@ class YumeTabs extends HTMLElement {
|
|
|
5848
5867
|
const tablist = document.createElement("div");
|
|
5849
5868
|
tablist.className = "tablist";
|
|
5850
5869
|
tablist.setAttribute("role", "tablist");
|
|
5870
|
+
tablist.setAttribute("part", "tablist");
|
|
5851
5871
|
tabs.forEach((tab) => tablist.appendChild(this._createTabButton(tab)));
|
|
5852
5872
|
this.shadowRoot.appendChild(tablist);
|
|
5853
5873
|
|
|
@@ -5933,6 +5953,7 @@ class YumeToast extends HTMLElement {
|
|
|
5933
5953
|
toast.className = `toast color-${color}`;
|
|
5934
5954
|
toast.setAttribute("role", "alert");
|
|
5935
5955
|
toast.setAttribute("aria-live", "assertive");
|
|
5956
|
+
toast.setAttribute("part", "toast");
|
|
5936
5957
|
|
|
5937
5958
|
const bgVar = this._getColorBg(color);
|
|
5938
5959
|
const resolvedBg = resolveCSSColor(bgVar, this);
|
|
@@ -5943,11 +5964,13 @@ class YumeToast extends HTMLElement {
|
|
|
5943
5964
|
if (icon) {
|
|
5944
5965
|
const iconEl = document.createElement("i");
|
|
5945
5966
|
iconEl.className = `toast-icon ${icon}`;
|
|
5967
|
+
iconEl.setAttribute("part", "icon");
|
|
5946
5968
|
toast.appendChild(iconEl);
|
|
5947
5969
|
}
|
|
5948
5970
|
|
|
5949
5971
|
const msg = document.createElement("span");
|
|
5950
5972
|
msg.className = "toast-message";
|
|
5973
|
+
msg.setAttribute("part", "message");
|
|
5951
5974
|
msg.textContent = message;
|
|
5952
5975
|
toast.appendChild(msg);
|
|
5953
5976
|
|
|
@@ -6349,7 +6372,7 @@ class YumeTooltip extends HTMLElement {
|
|
|
6349
6372
|
}
|
|
6350
6373
|
</style>
|
|
6351
6374
|
<slot class="trigger"></slot>
|
|
6352
|
-
<div class="tooltip ${pos}" role="tooltip">${this.text}</div>
|
|
6375
|
+
<div class="tooltip ${pos}" role="tooltip" part="tooltip">${this.text}</div>
|
|
6353
6376
|
`;
|
|
6354
6377
|
}
|
|
6355
6378
|
}
|
package/dist/styles/style.css
CHANGED
|
@@ -3,18 +3,6 @@ body {
|
|
|
3
3
|
margin: 0;
|
|
4
4
|
padding: 0;
|
|
5
5
|
font-family: var(--font-family-header, "Lexend", sans-serif);
|
|
6
|
-
font-weight: 300;
|
|
7
6
|
color: var(--base-content--, #000);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
h1,
|
|
11
|
-
h2,
|
|
12
|
-
h3,
|
|
13
|
-
h4,
|
|
14
|
-
h5,
|
|
15
|
-
h6,
|
|
16
|
-
p,
|
|
17
|
-
a,
|
|
18
|
-
label {
|
|
19
|
-
font-weight: 600;
|
|
7
|
+
font-weight: 300;
|
|
20
8
|
}
|
|
@@ -370,6 +370,7 @@
|
|
|
370
370
|
--component-tab-gap-large: var(--spacing-large);
|
|
371
371
|
--component-tab-gap-medium: var(--spacing-small);
|
|
372
372
|
--component-tab-gap-small: var(--spacing-2x-small);
|
|
373
|
+
--component-tab-content-padding: var(--spacing-large);
|
|
373
374
|
--component-tab-padding-large: var(--spacing-2x-large);
|
|
374
375
|
--component-tab-padding-medium: var(--spacing-large);
|
|
375
376
|
--component-tab-padding-small: var(--spacing-small);
|