@studious-creative/yumekit 0.1.4 → 0.1.6

package/dist/components/y-drawer.js

@@ -279,8 +279,8 @@ class YumeDrawer extends HTMLElement {
 
             .drawer-panel {
                 position: absolute;
-                background: var(--component-drawer-background, #fff);
-                color: var(--component-drawer-color, #000);
+                background: var(--component-drawer-background, #0c0c0d);
+                color: var(--component-drawer-color, #f7f7fa);
                 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                 overflow: hidden;
                 outline: none;
@@ -301,12 +301,12 @@ class YumeDrawer extends HTMLElement {
             .drawer-panel[data-position="left"] {
                 left: 0;
                 transform: translateX(-100%);
-                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
             .drawer-panel[data-position="right"] {
                 right: 0;
                 transform: translateX(100%);
-                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
 
             .drawer-panel[data-position="top"],
@@ -318,12 +318,12 @@ class YumeDrawer extends HTMLElement {
             .drawer-panel[data-position="top"] {
                 top: 0;
                 transform: translateY(-100%);
-                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
             .drawer-panel[data-position="bottom"] {
                 bottom: 0;
                 transform: translateY(100%);
-                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
             }
 
             .drawer-panel.open { transform: translate(0, 0); }
@@ -360,7 +360,7 @@ class YumeDrawer extends HTMLElement {
                 flex-shrink: 0;
                 align-items: center;
                 justify-content: center;
-                color: var(--component-drawer-color, #999);
+                color: var(--component-drawer-color, #f7f7fa);
                 opacity: 0.6;
                 touch-action: none;         /* needed for pointer events */
                 user-select: none;
@@ -369,7 +369,7 @@ class YumeDrawer extends HTMLElement {
             .resize-handle:hover,
             .resize-handle:active {
                 opacity: 1;
-                background: var(--component-drawer-hover-background, rgba(128,128,128,0.15));
+                background: var(--component-drawer-hover-background, #292a2b);
             }
 
             .drawer-panel[data-position="left"] > .resize-handle,
@@ -402,6 +402,7 @@ class YumeDrawer extends HTMLElement {
 
         const overlay = document.createElement("div");
         overlay.className = "overlay";
+        overlay.setAttribute("part", "overlay");
         overlay.addEventListener("click", () => this._onOverlayClick());
         this.shadowRoot.appendChild(overlay);
 
@@ -410,6 +411,7 @@ class YumeDrawer extends HTMLElement {
         panel.setAttribute("role", "dialog");
         panel.setAttribute("aria-modal", "true");
         panel.setAttribute("tabindex", "-1");
+        panel.setAttribute("part", "panel");
         panel.setAttribute("data-position", this.position);
 
         const handle = document.createElement("div");
@@ -424,14 +426,17 @@ class YumeDrawer extends HTMLElement {
 
         const header = document.createElement("div");
         header.className = "drawer-header";
+        header.setAttribute("part", "header");
         header.innerHTML = `<slot name="header"></slot>`;
 
         const body = document.createElement("div");
         body.className = "drawer-body";
+        body.setAttribute("part", "body");
         body.innerHTML = `<slot name="body"></slot>`;
 
         const footer = document.createElement("div");
         footer.className = "drawer-footer";
+        footer.setAttribute("part", "footer");
         footer.innerHTML = `<slot name="footer"></slot>`;
 
         content.appendChild(header);

package/dist/components/y-menu.js

@@ -95,6 +95,7 @@ class YumeMenu extends HTMLElement {
             const li = document.createElement("li");
             li.className = "menuitem";
             li.setAttribute("role", "menuitem");
+            li.setAttribute("part", "menuitem");
             li.tabIndex = 0;
 
             const contentWrapper = document.createElement("span");
@@ -239,8 +240,8 @@ class YumeMenu extends HTMLElement {
                 list-style: none;
                 margin: 0;
                 padding: 0;
-                background: var(--component-menu-background, #fff);
-                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);
+                background: var(--component-menu-background, #0c0c0d);
+                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
                 border-radius: var(--component-menu-border-radius, 4px);
                 box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
                 min-width: 150px;
@@ -255,12 +256,12 @@ class YumeMenu extends HTMLElement {
                 align-items: center;
                 justify-content: space-between;
                 white-space: nowrap;
-                color: var(--component-menu-color, #000);
+                color: var(--component-menu-color, #f7f7fa);
                 font-size: var(--font-size-button, 1em);
             }
 
             li.menuitem:hover {
-                background: var(--component-menu-hover-background, #eee);
+                background: var(--component-menu-hover-background, #292a2b);
             }
 
             ul.submenu {
@@ -290,6 +291,7 @@ class YumeMenu extends HTMLElement {
         const rootUl = this._createMenuList(this.items);
         rootUl.classList.add("menu");
         rootUl.setAttribute("role", "menu");
+        rootUl.setAttribute("part", "menu");
         this.shadowRoot.appendChild(rootUl);
     }
 }

package/dist/components/y-radio.js

@@ -152,11 +152,11 @@ class YumeRadio extends HTMLElement {
 
         this.shadowRoot.innerHTML = `
             <style>${style}</style>
-            <fieldset role="radiogroup">
+            <fieldset role="radiogroup" part="radio">
                 ${options
                     .map(
                         (opt, idx) => `
-                    <label>
+                    <label part="label">
                         <input
                             type="radio"
                             name="${name}"

package/dist/components/y-switch.js

@@ -75,6 +75,7 @@ class YumeSwitch extends HTMLElement {
     }
 
     labelTag(pos) {
+        if (this.getAttribute("label-display") === "false") return "";
         const labelPos = this.getAttribute("label-position");
         const shouldRender =
             (pos === "top" && (labelPos === "top" || labelPos === "left")) ||
@@ -169,13 +170,12 @@ class YumeSwitch extends HTMLElement {
     }
 
     updateLabelDisplay() {
-        const showLabels = this.getAttribute("label-display") !== "false";
         const showToggleLabels =
             this.hasAttribute("toggle-label") &&
             this.getAttribute("toggle-label") !== "false";
         this.style.setProperty(
             "--show-labels",
-            showLabels && showToggleLabels ? "flex" : "none",
+            showToggleLabels ? "flex" : "none",
         );
     }
 

package/dist/components/y-table.js

@@ -150,12 +150,12 @@ class YumeTable extends HTMLElement {
 
         const topColor =
             dir === "asc"
-                ? "var(--component-table-color, #333)"
-                : "var(--component-table-color-light, #bbb)";
+                ? "var(--component-table-color, #f7f7fa)"
+                : "var(--component-table-color-light, #acaeb2)";
         const bottomColor =
             dir === "desc"
-                ? "var(--component-table-color, #333)"
-                : "var(--component-table-color-light, #bbb)";
+                ? "var(--component-table-color, #f7f7fa)"
+                : "var(--component-table-color-light, #acaeb2)";
 
         return sortArrows(topColor, bottomColor);
     }
@@ -175,7 +175,7 @@ class YumeTable extends HTMLElement {
             :host {
                 display: block;
                 font-family: var(--font-family-body, sans-serif);
-                color: var(--component-table-color, #000);
+                color: var(--component-table-color, #f7f7fa);
             }
 
             .table-wrapper {
@@ -196,7 +196,7 @@ class YumeTable extends HTMLElement {
                 font-size: var(--font-size-paragraph, 1em);
                 white-space: nowrap;
                 background: transparent;
-                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #ccc);
+                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #37383a);
                 user-select: none;
             }
 
@@ -205,7 +205,7 @@ class YumeTable extends HTMLElement {
             }
 
             thead th.sortable:hover {
-                background: var(--component-table-hover-background, #f5f5f5);
+                background: var(--component-table-hover-background, #292a2b);
             }
 
             .th-content {
@@ -222,7 +222,7 @@ class YumeTable extends HTMLElement {
             tbody td {
                 padding: ${paddingVar};
                 font-size: var(--font-size-paragraph, 1em);
-                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #ccc);
+                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #37383a);
             }
 
             tbody tr:last-child td {
@@ -236,13 +236,13 @@ class YumeTable extends HTMLElement {
             ${
                 striped
                     ? `tbody tr:nth-child(even) {
-                    background: var(--component-table-hover-background, #f9f9f9);
+                    background: var(--component-table-hover-background, #292a2b);
                 }`
                     : ""
             }
 
             tbody tr:hover {
-                background: var(--component-table-active-background, #eee);
+                background: var(--component-table-active-background, #46474a);
             }
         `;
         this.shadowRoot.appendChild(style);
@@ -252,8 +252,10 @@ class YumeTable extends HTMLElement {
 
         const table = document.createElement("table");
         table.setAttribute("role", "grid");
+        table.setAttribute("part", "table");
 
         const thead = document.createElement("thead");
+        thead.setAttribute("part", "header");
         const headerRow = document.createElement("tr");
 
         columns.forEach((col) => {
@@ -299,8 +301,10 @@ class YumeTable extends HTMLElement {
 
         rows.forEach((row) => {
             const tr = document.createElement("tr");
+            tr.setAttribute("part", "row");
             columns.forEach((col, colIdx) => {
                 const td = document.createElement("td");
+                td.setAttribute("part", "cell");
                 if (col.rowHeader || colIdx === 0) {
                     td.classList.add("row-header");
                 }

package/dist/components/y-tabs.js

@@ -190,7 +190,7 @@ class YumeTabs extends HTMLElement {
                 z-index: 0;
                 border: var(--component-tab-border-width) solid var(--component-tabs-border-color);
                 border-radius: var(--component-tab-border-radius-outer);
-                padding: var(--spacing-large);
+                padding: var(--component-tab-content-padding);
                 background: var(--component-tabs-background);
             }
             :host([position="top"])    .tabpanel { border-top-left-radius: 0; }
@@ -210,6 +210,7 @@ class YumeTabs extends HTMLElement {
         const btn = document.createElement("button");
         btn.id = `tab-${tab.id}`;
         btn.setAttribute("role", "tab");
+        btn.setAttribute("part", "tab");
         btn.setAttribute("aria-selected", isActive);
         btn.setAttribute("aria-controls", `panel-${tab.id}`);
         btn.setAttribute("aria-disabled", isDisabled);
@@ -244,6 +245,7 @@ class YumeTabs extends HTMLElement {
         panel.className = "tabpanel";
         panel.id = `panel-${this._activeTab}`;
         panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("part", "content");
         panel.setAttribute("aria-labelledby", `tab-${this._activeTab}`);
 
         const contentSlot = document.createElement("slot");
@@ -267,6 +269,7 @@ class YumeTabs extends HTMLElement {
         const tablist = document.createElement("div");
         tablist.className = "tablist";
         tablist.setAttribute("role", "tablist");
+        tablist.setAttribute("part", "tablist");
         tabs.forEach((tab) => tablist.appendChild(this._createTabButton(tab)));
         this.shadowRoot.appendChild(tablist);
 

package/dist/components/y-tag.js

@@ -43,12 +43,12 @@ class YumeTag extends HTMLElement {
         this.shadowRoot.innerHTML = "";
         this.shadowRoot.appendChild(style);
         this.shadowRoot.innerHTML += `
-            <span class="tag">
+            <span class="tag" part="tag">
                 <slot></slot>
                 ${
                     removable
                         ? `
-                    <button class="remove" aria-label="Remove tag">
+                    <button class="remove" part="remove" aria-label="Remove tag">
                         ${close}
                     </button>
                 `
@@ -78,40 +78,47 @@ class YumeTag extends HTMLElement {
                 "--primary-content--",
                 "--primary-content-hover",
                 "--primary-background-component",
+                "--primary-content-inverse",
             ],
             secondary: [
                 "--secondary-content--",
                 "--secondary-content-hover",
                 "--secondary-background-component",
+                "--secondary-content-inverse",
             ],
             base: [
                 "--base-content--",
                 "--base-content-lighter",
                 "--base-background-component",
+                "--base-content-inverse",
             ],
             success: [
                 "--success-content--",
                 "--success-content-hover",
                 "--success-background-component",
+                "--success-content-inverse",
             ],
             error: [
                 "--error-content--",
                 "--error-content-hover",
                 "--error-background-component",
+                "--error-content-inverse",
             ],
             warning: [
                 "--warning-content--",
                 "--warning-content-hover",
                 "--warning-background-component",
+                "--warning-content-inverse",
             ],
             help: [
                 "--help-content--",
                 "--help-content-hover",
                 "--help-background-component",
+                "--help-content-inverse",
             ],
         };
 
-        const [content, hover, background] = vars[color] || vars.base;
+        const [content, hover, background, inverse] = vars[color] || vars.base;
 
         const borderRadius =
             shape === "round"
@@ -148,10 +155,10 @@ class YumeTag extends HTMLElement {
             filled: `
                 .tag {
                     background: var(${content});
-                    color: var(${background});
+                    color: var(${inverse});
                 }
                 .remove {
-                    color: var(${background});
+                    color: var(${inverse});
                 }
             `,
             outlined: `

package/dist/components/y-theme.d.ts

@@ -4,4 +4,6 @@ export class YumeTheme extends HTMLElement {
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     _applyTheme(): Promise<void>;
     applyVariablesToHost(cssText: any): void;
+    _themeProps: any[];
+    clearThemeProperties(): void;
 }