@studious-creative/yumekit 0.1.3 → 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.
Files changed (19) hide show
  1. package/dist/components/y-appbar.js +5 -0
  2. package/dist/components/y-dialog.js +3 -0
  3. package/dist/components/y-drawer.js +5 -0
  4. package/dist/components/y-menu.js +2 -0
  5. package/dist/components/y-radio.js +2 -2
  6. package/dist/components/y-switch.js +2 -2
  7. package/dist/components/y-table.js +4 -0
  8. package/dist/components/y-tabs.js +4 -1
  9. package/dist/components/y-tag.js +2 -2
  10. package/dist/components/y-theme.d.ts +1 -4
  11. package/dist/components/y-theme.js +37 -41
  12. package/dist/components/y-toast.js +3 -0
  13. package/dist/components/y-tooltip.js +1 -1
  14. package/dist/index.js +75 -49
  15. package/dist/react.d.ts +1 -0
  16. package/dist/styles/style.css +1 -13
  17. package/dist/styles/variables.css +1 -0
  18. package/dist/yumekit.min.js +1 -1
  19. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,3 +1,5 @@
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
+
1
3
  class YumeButton extends HTMLElement {
2
4
  static get observedAttributes() {
3
5
  return [
@@ -644,6 +646,7 @@ class YumeMenu extends HTMLElement {
644
646
  const li = document.createElement("li");
645
647
  li.className = "menuitem";
646
648
  li.setAttribute("role", "menuitem");
649
+ li.setAttribute("part", "menuitem");
647
650
  li.tabIndex = 0;
648
651
 
649
652
  const contentWrapper = document.createElement("span");
@@ -839,6 +842,7 @@ class YumeMenu extends HTMLElement {
839
842
  const rootUl = this._createMenuList(this.items);
840
843
  rootUl.classList.add("menu");
841
844
  rootUl.setAttribute("role", "menu");
845
+ rootUl.setAttribute("part", "menu");
842
846
  this.shadowRoot.appendChild(rootUl);
843
847
  }
844
848
  }
@@ -1297,6 +1301,7 @@ class YumeAppbar extends HTMLElement {
1297
1301
  /* --- Header: logo + title --- */
1298
1302
  const header = document.createElement("div");
1299
1303
  header.className = "appbar-header";
1304
+ header.setAttribute("part", "header");
1300
1305
 
1301
1306
  const headerContent = document.createElement("div");
1302
1307
  headerContent.className = "header-content";
@@ -1321,6 +1326,7 @@ class YumeAppbar extends HTMLElement {
1321
1326
  /* --- Body: y-button nav items --- */
1322
1327
  const body = document.createElement("div");
1323
1328
  body.className = "appbar-body";
1329
+ body.setAttribute("part", "body");
1324
1330
 
1325
1331
  const navItems = this.items;
1326
1332
  navItems.forEach((item) => {
@@ -1380,6 +1386,7 @@ class YumeAppbar extends HTMLElement {
1380
1386
  /* --- Footer: slot + collapse toggle (vertical only) --- */
1381
1387
  const footer = document.createElement("div");
1382
1388
  footer.className = "appbar-footer";
1389
+ footer.setAttribute("part", "footer");
1383
1390
 
1384
1391
  const footerSlot = document.createElement("slot");
1385
1392
  footerSlot.name = "footer";
@@ -2330,6 +2337,7 @@ class YumeDialog extends HTMLElement {
2330
2337
 
2331
2338
  const header = document.createElement("div");
2332
2339
  header.className = "header";
2340
+ header.setAttribute("part", "header");
2333
2341
 
2334
2342
  const headerContent = document.createElement("div");
2335
2343
  headerContent.className = "header-content";
@@ -2349,10 +2357,12 @@ class YumeDialog extends HTMLElement {
2349
2357
 
2350
2358
  const body = document.createElement("div");
2351
2359
  body.className = "body";
2360
+ body.setAttribute("part", "body");
2352
2361
  body.innerHTML = `<slot name="body"></slot>`;
2353
2362
 
2354
2363
  const footer = document.createElement("div");
2355
2364
  footer.className = "footer";
2365
+ footer.setAttribute("part", "footer");
2356
2366
  footer.innerHTML = `<slot name="footer"></slot>`;
2357
2367
 
2358
2368
  dialog.appendChild(header);
@@ -2740,6 +2750,7 @@ class YumeDrawer extends HTMLElement {
2740
2750
 
2741
2751
  const overlay = document.createElement("div");
2742
2752
  overlay.className = "overlay";
2753
+ overlay.setAttribute("part", "overlay");
2743
2754
  overlay.addEventListener("click", () => this._onOverlayClick());
2744
2755
  this.shadowRoot.appendChild(overlay);
2745
2756
 
@@ -2748,6 +2759,7 @@ class YumeDrawer extends HTMLElement {
2748
2759
  panel.setAttribute("role", "dialog");
2749
2760
  panel.setAttribute("aria-modal", "true");
2750
2761
  panel.setAttribute("tabindex", "-1");
2762
+ panel.setAttribute("part", "panel");
2751
2763
  panel.setAttribute("data-position", this.position);
2752
2764
 
2753
2765
  const handle = document.createElement("div");
@@ -2762,14 +2774,17 @@ class YumeDrawer extends HTMLElement {
2762
2774
 
2763
2775
  const header = document.createElement("div");
2764
2776
  header.className = "drawer-header";
2777
+ header.setAttribute("part", "header");
2765
2778
  header.innerHTML = `<slot name="header"></slot>`;
2766
2779
 
2767
2780
  const body = document.createElement("div");
2768
2781
  body.className = "drawer-body";
2782
+ body.setAttribute("part", "body");
2769
2783
  body.innerHTML = `<slot name="body"></slot>`;
2770
2784
 
2771
2785
  const footer = document.createElement("div");
2772
2786
  footer.className = "drawer-footer";
2787
+ footer.setAttribute("part", "footer");
2773
2788
  footer.innerHTML = `<slot name="footer"></slot>`;
2774
2789
 
2775
2790
  content.appendChild(header);
@@ -3848,11 +3863,11 @@ class YumeRadio extends HTMLElement {
3848
3863
 
3849
3864
  this.shadowRoot.innerHTML = `
3850
3865
  <style>${style}</style>
3851
- <fieldset role="radiogroup">
3866
+ <fieldset role="radiogroup" part="radio">
3852
3867
  ${options
3853
3868
  .map(
3854
3869
  (opt, idx) => `
3855
- <label>
3870
+ <label part="label">
3856
3871
  <input
3857
3872
  type="radio"
3858
3873
  name="${name}"
@@ -4829,6 +4844,7 @@ class YumeSwitch extends HTMLElement {
4829
4844
  }
4830
4845
 
4831
4846
  labelTag(pos) {
4847
+ if (this.getAttribute("label-display") === "false") return "";
4832
4848
  const labelPos = this.getAttribute("label-position");
4833
4849
  const shouldRender =
4834
4850
  (pos === "top" && (labelPos === "top" || labelPos === "left")) ||
@@ -4923,13 +4939,12 @@ class YumeSwitch extends HTMLElement {
4923
4939
  }
4924
4940
 
4925
4941
  updateLabelDisplay() {
4926
- const showLabels = this.getAttribute("label-display") !== "false";
4927
4942
  const showToggleLabels =
4928
4943
  this.hasAttribute("toggle-label") &&
4929
4944
  this.getAttribute("toggle-label") !== "false";
4930
4945
  this.style.setProperty(
4931
4946
  "--show-labels",
4932
- showLabels && showToggleLabels ? "flex" : "none",
4947
+ showToggleLabels ? "flex" : "none",
4933
4948
  );
4934
4949
  }
4935
4950
 
@@ -5338,8 +5353,10 @@ class YumeTable extends HTMLElement {
5338
5353
 
5339
5354
  const table = document.createElement("table");
5340
5355
  table.setAttribute("role", "grid");
5356
+ table.setAttribute("part", "table");
5341
5357
 
5342
5358
  const thead = document.createElement("thead");
5359
+ thead.setAttribute("part", "header");
5343
5360
  const headerRow = document.createElement("tr");
5344
5361
 
5345
5362
  columns.forEach((col) => {
@@ -5385,8 +5402,10 @@ class YumeTable extends HTMLElement {
5385
5402
 
5386
5403
  rows.forEach((row) => {
5387
5404
  const tr = document.createElement("tr");
5405
+ tr.setAttribute("part", "row");
5388
5406
  columns.forEach((col, colIdx) => {
5389
5407
  const td = document.createElement("td");
5408
+ td.setAttribute("part", "cell");
5390
5409
  if (col.rowHeader || colIdx === 0) {
5391
5410
  td.classList.add("row-header");
5392
5411
  }
@@ -5437,12 +5456,12 @@ class YumeTag extends HTMLElement {
5437
5456
  this.shadowRoot.innerHTML = "";
5438
5457
  this.shadowRoot.appendChild(style);
5439
5458
  this.shadowRoot.innerHTML += `
5440
- <span class="tag">
5459
+ <span class="tag" part="tag">
5441
5460
  <slot></slot>
5442
5461
  ${
5443
5462
  removable
5444
5463
  ? `
5445
- <button class="remove" aria-label="Remove tag">
5464
+ <button class="remove" part="remove" aria-label="Remove tag">
5446
5465
  ${close}
5447
5466
  </button>
5448
5467
  `
@@ -5769,7 +5788,7 @@ class YumeTabs extends HTMLElement {
5769
5788
  z-index: 0;
5770
5789
  border: var(--component-tab-border-width) solid var(--component-tabs-border-color);
5771
5790
  border-radius: var(--component-tab-border-radius-outer);
5772
- padding: var(--spacing-large);
5791
+ padding: var(--component-tab-content-padding);
5773
5792
  background: var(--component-tabs-background);
5774
5793
  }
5775
5794
  :host([position="top"]) .tabpanel { border-top-left-radius: 0; }
@@ -5789,6 +5808,7 @@ class YumeTabs extends HTMLElement {
5789
5808
  const btn = document.createElement("button");
5790
5809
  btn.id = `tab-${tab.id}`;
5791
5810
  btn.setAttribute("role", "tab");
5811
+ btn.setAttribute("part", "tab");
5792
5812
  btn.setAttribute("aria-selected", isActive);
5793
5813
  btn.setAttribute("aria-controls", `panel-${tab.id}`);
5794
5814
  btn.setAttribute("aria-disabled", isDisabled);
@@ -5823,6 +5843,7 @@ class YumeTabs extends HTMLElement {
5823
5843
  panel.className = "tabpanel";
5824
5844
  panel.id = `panel-${this._activeTab}`;
5825
5845
  panel.setAttribute("role", "tabpanel");
5846
+ panel.setAttribute("part", "content");
5826
5847
  panel.setAttribute("aria-labelledby", `tab-${this._activeTab}`);
5827
5848
 
5828
5849
  const contentSlot = document.createElement("slot");
@@ -5846,6 +5867,7 @@ class YumeTabs extends HTMLElement {
5846
5867
  const tablist = document.createElement("div");
5847
5868
  tablist.className = "tablist";
5848
5869
  tablist.setAttribute("role", "tablist");
5870
+ tablist.setAttribute("part", "tablist");
5849
5871
  tabs.forEach((tab) => tablist.appendChild(this._createTabButton(tab)));
5850
5872
  this.shadowRoot.appendChild(tablist);
5851
5873
 
@@ -5931,6 +5953,7 @@ class YumeToast extends HTMLElement {
5931
5953
  toast.className = `toast color-${color}`;
5932
5954
  toast.setAttribute("role", "alert");
5933
5955
  toast.setAttribute("aria-live", "assertive");
5956
+ toast.setAttribute("part", "toast");
5934
5957
 
5935
5958
  const bgVar = this._getColorBg(color);
5936
5959
  const resolvedBg = resolveCSSColor(bgVar, this);
@@ -5941,11 +5964,13 @@ class YumeToast extends HTMLElement {
5941
5964
  if (icon) {
5942
5965
  const iconEl = document.createElement("i");
5943
5966
  iconEl.className = `toast-icon ${icon}`;
5967
+ iconEl.setAttribute("part", "icon");
5944
5968
  toast.appendChild(iconEl);
5945
5969
  }
5946
5970
 
5947
5971
  const msg = document.createElement("span");
5948
5972
  msg.className = "toast-message";
5973
+ msg.setAttribute("part", "message");
5949
5974
  msg.textContent = message;
5950
5975
  toast.appendChild(msg);
5951
5976
 
@@ -6347,7 +6372,7 @@ class YumeTooltip extends HTMLElement {
6347
6372
  }
6348
6373
  </style>
6349
6374
  <slot class="trigger"></slot>
6350
- <div class="tooltip ${pos}" role="tooltip">${this.text}</div>
6375
+ <div class="tooltip ${pos}" role="tooltip" part="tooltip">${this.text}</div>
6351
6376
  `;
6352
6377
  }
6353
6378
  }
@@ -6356,12 +6381,24 @@ if (!customElements.get("y-tooltip")) {
6356
6381
  customElements.define("y-tooltip", YumeTooltip);
6357
6382
  }
6358
6383
 
6359
- class YumeTheme extends HTMLElement {
6360
- static defaultVariablesLoaded = false;
6361
- static defaultVariablesCSS = "";
6384
+ var blueLightCSS = "/* Themes - Blue Light */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-light-1);\n --primary-background-component: var(--blue-light-0);\n --primary-background-hover: var(--blue-light-2);\n --primary-background-active: var(--blue-light-3);\n --primary-background-border: var(--blue-light-4);\n --primary-content--: var(--blue--);\n --primary-content-hover: var(--blue-dark-7);\n --primary-content-active: var(--blue-dark-6);\n --secondary-background-app: var(--teal-light-1);\n --secondary-background-component: var(--teal-light-0);\n --secondary-background-hover: var(--teal-light-2);\n --secondary-background-border: var(--teal-light-3);\n --secondary-background-active: var(--teal-light-4);\n --secondary-content--: var(--teal--);\n --secondary-content-hover: var(--teal-dark-7);\n --secondary-content-active: var(--teal-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6385
+
6386
+ var blueDarkCSS = "/* Themes - Blue Dark */\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--blue-dark-1);\n --primary-background-component: var(--blue-dark-0);\n --primary-background-hover: var(--blue-dark-2);\n --primary-background-active: var(--blue-dark-3);\n --primary-background-border: var(--blue-dark-4);\n --primary-content--: var(--blue--);\n --primary-content-hover: var(--blue-light-7);\n --primary-content-active: var(--blue-light-6);\n --secondary-background-app: var(--teal-dark-1);\n --secondary-background-component: var(--teal-dark-0);\n --secondary-background-hover: var(--teal-dark-2);\n --secondary-background-border: var(--teal-dark-3);\n --secondary-background-active: var(--teal-dark-4);\n --secondary-content--: var(--teal--);\n --secondary-content-hover: var(--teal-light-7);\n --secondary-content-active: var(--teal-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-background-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6387
+
6388
+ var orangeLightCSS = "/* Themes - Orange Light */\n:root {\n --base-background-app: var(--neutral-light-1);\n --base-background-component: var(--neutral-light-0);\n --base-background-hover: var(--neutral-light-2);\n --base-background-border: var(--neutral-light-3);\n --base-background-active: var(--neutral-light-4);\n --base-content--: var(--neutral-dark-0);\n --base-content-light: var(--neutral-dark-1);\n --base-content-lighter: var(--neutral-dark-3);\n --base-content-lightest: var(--neutral-dark-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-light-1);\n --primary-background-component: var(--orange-light-0);\n --primary-background-hover: var(--orange-light-2);\n --primary-background-active: var(--orange-light-3);\n --primary-background-border: var(--orange-light-4);\n --primary-content--: var(--orange--);\n --primary-content-hover: var(--orange-dark-7);\n --primary-content-active: var(--orange-dark-6);\n --secondary-background-app: var(--amber-light-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-light-2);\n --secondary-background-border: var(--amber-light-3);\n --secondary-background-active: var(--amber-light-4);\n --secondary-content--: var(--amber--);\n --secondary-content-hover: var(--amber-dark-7);\n --secondary-content-active: var(--amber-dark-6);\n --success-background-app: var(--green-light-1);\n --success-background-component: var(--green-light-0);\n --success-background-hover: var(--green-light-2);\n --success-background-border: var(--green-light-3);\n --success-background-active: var(--green-light-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-dark-7);\n --success-content-active: var(--green-dark-6);\n --warning-background-app: var(--yellow-light-1);\n --warning-background-component: var(--yellow-light-0);\n --warning-background-hover: var(--yellow-light-2);\n --warning-background-border: var(--yellow-light-3);\n --warning-background-active: var(--yellow-light-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-dark-7);\n --warning-content-active: var(--yellow-dark-6);\n --error-background-app: var(--red-light-1);\n --error-background-component: var(--red-light-0);\n --error-background-hover: var(--red-light-2);\n --error-background-border: var(--red-light-3);\n --error-background-active: var(--red-light-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-dark-7);\n --error-content-active: var(--red-dark-6);\n --help-background-app: var(--indigo-light-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-light-2);\n --help-background-active: var(--indigo-light-3);\n --help-background-border: var(--indigo-light-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-dark-7);\n --help-content-active: var(--indigo-dark-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6389
+
6390
+ var orangeDarkCSS = "/* Themes - Orange Dark */\n:root {\n --base-background-app: var(--neutral-dark-1);\n --base-background-component: var(--neutral-dark-0);\n --base-background-hover: var(--neutral-dark-2);\n --base-background-border: var(--neutral-dark-3);\n --base-background-active: var(--neutral-dark-4);\n --base-content--: var(--neutral-light-0);\n --base-content-light: var(--neutral-light-1);\n --base-content-lighter: var(--neutral-light-3);\n --base-content-lightest: var(--neutral-light-5);\n --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n --primary-background-app: var(--orange-dark-1);\n --primary-background-component: var(--orange-dark-0);\n --primary-background-hover: var(--orange-dark-2);\n --primary-background-active: var(--orange-dark-3);\n --primary-background-border: var(--orange-dark-4);\n --primary-content--: var(--orange--);\n --primary-content-hover: var(--orange-light-7);\n --primary-content-active: var(--orange-light-6);\n --secondary-background-app: var(--amber-dark-1);\n --secondary-background-component: var(--amber-light-0);\n --secondary-background-hover: var(--amber-dark-2);\n --secondary-background-border: var(--amber-dark-3);\n --secondary-background-active: var(--amber-dark-4);\n --secondary-content--: var(--amber--);\n --secondary-content-hover: var(--amber-light-7);\n --secondary-content-active: var(--amber-light-6);\n --success-background-app: var(--green-dark-1);\n --success-background-component: var(--green-dark-0);\n --success-background-hover: var(--green-dark-2);\n --success-background-border: var(--green-dark-3);\n --success-background-active: var(--green-dark-4);\n --success-content--: var(--green--);\n --success-content-hover: var(--green-light-7);\n --success-content-active: var(--green-light-6);\n --warning-background-app: var(--yellow-dark-1);\n --warning-background-component: var(--yellow-dark-0);\n --warning-background-hover: var(--yellow-dark-2);\n --warning-background-border: var(--yellow-dark-3);\n --warning-background-active: var(--yellow-dark-4);\n --warning-content--: var(--yellow--);\n --warning-content-hover: var(--yellow-light-7);\n --warning-content-active: var(--yellow-light-6);\n --error-background-app: var(--red-dark-1);\n --error-background-component: var(--red-dark-0);\n --error-background-hover: var(--red-dark-2);\n --error-background-border: var(--red-dark-3);\n --error-background-active: var(--red-dark-4);\n --error-content--: var(--red--);\n --error-content-hover: var(--red-light-7);\n --error-content-active: var(--red-light-6);\n --help-background-app: var(--indigo-dark-1);\n --help-background-component: var(--indigo-light-0);\n --help-background-hover: var(--indigo-dark-2);\n --help-background-active: var(--indigo-dark-3);\n --help-background-border: var(--indigo-dark-4);\n --help-content--: var(--indigo--);\n --help-content-hover: var(--indigo-light-7);\n --help-content-active: var(--indigo-light-6);\n --component-appbar-background: var(--base-background-component);\n --component-appbar-color: var(--base-content--);\n --component-appbar-border-color: var(--base-background-border);\n --component-checkbox-background: var(--base-background-component);\n --component-checkbox-color: var(--base-content--);\n --component-checkbox-border-color: var(--base-content--);\n --component-checkbox-accent: var(--primary-content--);\n --component-dialog-background: var(--base-background-component);\n --component-dialog-color: var(--base-content--);\n --component-dialog-border-color: var(--base-background-border);\n --component-dialog-hover-background: var(--base-background-hover);\n --component-dialog-accent: var(--primary-content--);\n --component-drawer-background: var(--base-background-component);\n --component-drawer-color: var(--base-content--);\n --component-drawer-border-color: var(--base-background-border);\n --component-drawer-hover-background: var(--base-background-hover);\n --component-input-background: var(--base-background-app);\n --component-input-background-disabled: var(--base-background-component);\n --component-input-color: var(--base-content--);\n --component-input-border-color: var(--base-background-border);\n --component-input-accent: var(--primary-content--);\n --component-input-label-color: var(--base-content-light);\n --component-input-icon-color: var(--base-content-lighter);\n --component-input-error-color: var(--error-content--);\n --component-input-error-background: var(--error-background-component);\n --component-input-error-border-color: var(--error-background-border);\n --component-menu-background: var(--base-background-component);\n --component-menu-color: var(--base-content--);\n --component-menu-border-color: var(--base-background-border);\n --component-menu-hover-background: var(--base-background-hover);\n --component-menu-shadow: var(--base-shadow);\n --component-panel-background: var(--base-background-component);\n --component-panel-color: var(--base-content--);\n --component-panel-expanded-background: var(--base-background-app);\n --component-panel-accent: var(--primary-content--);\n --component-panel-active-border: var(--base-background-active);\n --component-panel-accent-hover-background: var(--primary-background-active);\n --component-panel-hover-background: var(--base-background-hover);\n --component-radio-color: var(--base-content--);\n --component-radio-accent: var(--primary-content--);\n --component-select-background: var(--base-background-app);\n --component-select-color: var(--base-content--);\n --component-select-border-color: var(--base-background-border);\n --component-select-accent: var(--primary-content--);\n --component-select-accent-contrast: var(--base-background-component);\n --component-select-label-color: var(--base-content-light);\n --component-select-hover-background: var(--base-background-hover);\n --component-select-shadow: var(--base-shadow);\n --component-select-error-color: var(--error-content--);\n --component-select-error-background: var(--error-background-component);\n --component-select-error-border-color: var(--error-background-border);\n --component-table-color: var(--base-content--);\n --component-table-border-color: var(--base-background-border);\n --component-table-hover-background: var(--base-background-hover);\n --component-table-active-background: var(--base-background-active);\n --component-table-color-light: var(--base-content-lightest);\n --component-tabs-background: var(--base-background-component);\n --component-tabs-color: var(--base-content--);\n --component-tabs-border-color: var(--base-background-border);\n --component-tabs-accent: var(--primary-content--);\n --font-family-header: \"Lexend\", sans-serif;\n --font-family-body: \"Lexend\", sans-serif;\n}\n";
6391
+
6392
+ const THEMES = {
6393
+ "blue-light": blueLightCSS,
6394
+ "blue-dark": blueDarkCSS,
6395
+ "orange-light": orangeLightCSS,
6396
+ "orange-dark": orangeDarkCSS,
6397
+ };
6362
6398
 
6399
+ class YumeTheme extends HTMLElement {
6363
6400
  static get observedAttributes() {
6364
- return ["theme-path"];
6401
+ return ["theme", "mode", "theme-path"];
6365
6402
  }
6366
6403
 
6367
6404
  constructor() {
@@ -6370,59 +6407,41 @@ class YumeTheme extends HTMLElement {
6370
6407
  }
6371
6408
 
6372
6409
  connectedCallback() {
6373
- this.loadDefaultVariables().then(() => {
6374
- const themePath = this.getAttribute("theme-path");
6375
- this.loadTheme(themePath);
6376
- });
6410
+ this._applyTheme();
6377
6411
  }
6378
6412
 
6379
6413
  attributeChangedCallback(name, oldValue, newValue) {
6380
- if (name === "theme-path" && oldValue !== newValue) {
6381
- this.loadTheme(newValue);
6414
+ if (oldValue !== newValue) {
6415
+ this._applyTheme();
6382
6416
  }
6383
6417
  }
6384
6418
 
6385
- async loadDefaultVariables() {
6386
- if (!YumeTheme.defaultVariablesLoaded) {
6387
- try {
6388
- const variablesUrl = new URL(
6389
- "styles/variables.css",
6390
- document.baseURI,
6391
- );
6392
- const response = await fetch(variablesUrl.href);
6393
- YumeTheme.defaultVariablesCSS = await response.text();
6394
- YumeTheme.defaultVariablesLoaded = true;
6395
- } catch (e) {
6396
- console.error(
6397
- "Failed to load default variables from styles/variables.css:",
6398
- e,
6399
- );
6400
- }
6401
- }
6402
- return Promise.resolve();
6403
- }
6419
+ async _applyTheme() {
6420
+ const themePath = this.getAttribute("theme-path");
6421
+ let themeCSS;
6404
6422
 
6405
- async loadTheme(themePath) {
6406
- let themeCSS = "";
6407
6423
  if (themePath) {
6408
6424
  try {
6409
- const themeUrl = new URL(themePath, document.baseURI);
6410
- const response = await fetch(themeUrl.href);
6425
+ const url = new URL(themePath, document.baseURI);
6426
+ const response = await fetch(url.href);
6411
6427
  themeCSS = await response.text();
6412
6428
  } catch (e) {
6413
6429
  console.error(`Failed to load theme from ${themePath}:`, e);
6430
+ themeCSS = "";
6414
6431
  }
6432
+ } else {
6433
+ const theme = this.getAttribute("theme") || "blue";
6434
+ const mode = this.getAttribute("mode") || "light";
6435
+ themeCSS = THEMES[`${theme}-${mode}`] || "";
6415
6436
  }
6416
6437
 
6417
- const combinedCSS = `
6418
- <style>
6419
- ${YumeTheme.defaultVariablesCSS}
6420
- </style>
6421
- ${themeCSS ? `<style>${themeCSS}</style>` : ""}
6422
- `;
6438
+ this.shadowRoot.innerHTML = `
6439
+ <style>${variablesCSS}</style>
6440
+ ${themeCSS ? `<style>${themeCSS}</style>` : ""}
6441
+ <slot></slot>
6442
+ `;
6423
6443
 
6424
- this.shadowRoot.innerHTML = `${combinedCSS}<slot></slot>`;
6425
- this.applyVariablesToHost(YumeTheme.defaultVariablesCSS + themeCSS);
6444
+ this.applyVariablesToHost(variablesCSS + themeCSS);
6426
6445
  }
6427
6446
 
6428
6447
  applyVariablesToHost(cssText) {
@@ -6439,4 +6458,11 @@ if (!customElements.get("y-theme")) {
6439
6458
  customElements.define("y-theme", YumeTheme);
6440
6459
  }
6441
6460
 
6461
+ if (typeof document !== "undefined" && !document.querySelector("[data-yumekit-vars]")) {
6462
+ const style = document.createElement("style");
6463
+ style.setAttribute("data-yumekit-vars", "");
6464
+ style.textContent = variablesCSS;
6465
+ document.head.appendChild(style);
6466
+ }
6467
+
6442
6468
  export { YumeAppbar, YumeAvatar, YumeBadge, YumeButton, YumeCard, YumeCheckbox, YumeInput, YumePanel, YumePanelBar, YumeProgress, YumeRadio, YumeSelect, YumeSlider, YumeTable, YumeTabs, YumeTag, YumeTheme, YumeToast, YumeTooltip };
package/dist/react.d.ts CHANGED
@@ -116,6 +116,7 @@ declare module 'react' {
116
116
  theme?: string;
117
117
  color?: string;
118
118
  mode?: string;
119
+ 'theme-path'?: string;
119
120
  }>;
120
121
  'y-toast': El<{
121
122
  open?: boolean | string;
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
  }
package/dist/styles/variables.css CHANGED
@@ -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);