@waggylabs/yumekit 0.4.0-beta.41 → 0.4.0-beta.46

package/CHANGELOG.md

@@ -42,7 +42,7 @@ Delete any empty sections before publishing.
 - `y-select`: new `searchable` attribute — enables autocomplete-style inline filtering. In single mode the value display is replaced by a text input that clears on open (showing the current selection as a placeholder) and restores the selected label on close. In multi-tag mode the input appears after the last tag and the dropdown stays open after each selection.
 - `y-select`: new `clearable` attribute — shows a clear button (using the `close` icon) when a value is selected. Works independently of `searchable`.
 - `y-select` tag display mode: per-option `color` field — each option object in the `options` array may now include a `color` key (predefined scheme or CSS color) to individually color its tag.
-- `y-switch`: new `color` attribute for the toggle indicator when checked. Accepts predefined scheme names or custom CSS colors. Defaults to `"primary"`.
+- `y-switch`: new `on-color` and `off-color` attributes for the toggle indicator when checked and unchecked respectively. Accepts predefined scheme names or custom CSS colors. Defaults to `"primary"` for on.
 - Custom CSS color support (`#hex`, `rgb()`, `hsl()`) added to the `color` attribute of `y-avatar`, `y-button`, `y-icon`, `y-tag`, `y-toast`, and `y-tooltip`. Predefined scheme names continue to resolve through design tokens; custom values use WCAG-based luminance to auto-contrast the text color. `y-slider` already supported custom color passthrough.
 
 ### Changed

package/dist/components/y-appbar.js

@@ -906,6 +906,11 @@ class YumeMenu extends HTMLElement {
                 opacity: 0.6;
             }
 
+            .submenu-indicator svg {
+                width: 16px;
+                height: 16px;
+            }
+
             .item-content {
                 flex: 1;
             }

package/dist/components/y-menu.js

@@ -177,6 +177,11 @@ class YumeMenu extends HTMLElement {
                 opacity: 0.6;
             }
 
+            .submenu-indicator svg {
+                width: 16px;
+                height: 16px;
+            }
+
             .item-content {
                 flex: 1;
             }

package/dist/components/y-select.js

@@ -1,3 +1,5 @@
+import { contrastTextColor } from '../modules/helpers.js';
+
 var chevronDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polyline points=\"6 9 12 15 18 9\"/>\n</svg>\n";
 
 class YumeSelect extends HTMLElement {
@@ -54,7 +56,10 @@ class YumeSelect extends HTMLElement {
         if (name === "value") {
             if (this.hasAttribute("multiple")) {
                 this.selectedValues = new Set(
-                    (newValue || "").split(",").map((v) => v.trim()).filter(Boolean),
+                    (newValue || "")
+                        .split(",")
+                        .map((v) => v.trim())
+                        .filter(Boolean),
                 );
             } else {
                 this._value = newValue || "";
@@ -65,17 +70,19 @@ class YumeSelect extends HTMLElement {
             this._updateSelectedStyles();
         }
 
-        if ([
-            "label-position",
-            "disabled",
-            "invalid",
-            "required",
-            "placeholder",
-            "options",
-            "size",
-            "searchable",
-            "clearable",
-        ].includes(name)) {
+        if (
+            [
+                "label-position",
+                "disabled",
+                "invalid",
+                "required",
+                "placeholder",
+                "options",
+                "size",
+                "searchable",
+                "clearable",
+            ].includes(name)
+        ) {
             this.render();
         }
 
@@ -89,44 +96,64 @@ class YumeSelect extends HTMLElement {
     // -------------------------------------------------------------------------
 
     /** @type {boolean} Whether to show a clear button when a value is selected. */
-    get clearable() { return this.hasAttribute("clearable"); }
+    get clearable() {
+        return this.hasAttribute("clearable");
+    }
     set clearable(val) {
         if (val) this.setAttribute("clearable", "");
         else this.removeAttribute("clearable");
     }
 
     /** @type {boolean} Whether the select is disabled. */
-    get disabled() { return this.hasAttribute("disabled"); }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
     set disabled(val) {
         if (val) this.setAttribute("disabled", "");
         else this.removeAttribute("disabled");
     }
 
     /** @type {string} Display mode: "tag" for multi-select tag display. */
-    get displayMode() { return this.getAttribute("display-mode") || ""; }
-    set displayMode(val) { this.setAttribute("display-mode", val); }
+    get displayMode() {
+        return this.getAttribute("display-mode") || "";
+    }
+    set displayMode(val) {
+        this.setAttribute("display-mode", val);
+    }
 
     /** @type {boolean} Whether the select is in an invalid state. */
-    get invalid() { return this.hasAttribute("invalid"); }
+    get invalid() {
+        return this.hasAttribute("invalid");
+    }
     set invalid(val) {
         if (val) this.setAttribute("invalid", "");
         else this.removeAttribute("invalid");
     }
 
     /** @type {string} Label position: "top" | "bottom" (default "top"). */
-    get labelPosition() { return this.getAttribute("label-position") || "top"; }
-    set labelPosition(val) { this.setAttribute("label-position", val); }
+    get labelPosition() {
+        return this.getAttribute("label-position") || "top";
+    }
+    set labelPosition(val) {
+        this.setAttribute("label-position", val);
+    }
 
     /** @type {boolean} Whether multiple values can be selected. */
-    get multiple() { return this.hasAttribute("multiple"); }
+    get multiple() {
+        return this.hasAttribute("multiple");
+    }
     set multiple(val) {
         if (val) this.setAttribute("multiple", "");
         else this.removeAttribute("multiple");
     }
 
     /** @type {string} The form field name. */
-    get name() { return this.getAttribute("name") || ""; }
-    set name(val) { this.setAttribute("name", val); }
+    get name() {
+        return this.getAttribute("name") || "";
+    }
+    set name(val) {
+        this.setAttribute("name", val);
+    }
 
     /** @type {Array<{value: string, label: string}>} The options array for the select. */
     get options() {
@@ -137,30 +164,45 @@ class YumeSelect extends HTMLElement {
         }
     }
     set options(val) {
-        this.setAttribute("options", Array.isArray(val) ? JSON.stringify(val) : (val ?? "[]"));
+        this.setAttribute(
+            "options",
+            Array.isArray(val) ? JSON.stringify(val) : (val ?? "[]"),
+        );
     }
 
     /** @type {string} Placeholder text when no value is selected. */
-    get placeholder() { return this.getAttribute("placeholder") || "Select..."; }
-    set placeholder(val) { this.setAttribute("placeholder", val); }
+    get placeholder() {
+        return this.getAttribute("placeholder") || "Select...";
+    }
+    set placeholder(val) {
+        this.setAttribute("placeholder", val);
+    }
 
     /** @type {boolean} Whether the select requires a value. */
-    get required() { return this.hasAttribute("required"); }
+    get required() {
+        return this.hasAttribute("required");
+    }
     set required(val) {
         if (val) this.setAttribute("required", "");
         else this.removeAttribute("required");
     }
 
     /** @type {boolean} Whether the dropdown shows an inline search filter input. */
-    get searchable() { return this.hasAttribute("searchable"); }
+    get searchable() {
+        return this.hasAttribute("searchable");
+    }
     set searchable(val) {
         if (val) this.setAttribute("searchable", "");
         else this.removeAttribute("searchable");
     }
 
     /** @type {string} Select size: "small" | "medium" | "large" (default "medium"). */
-    get size() { return this.getAttribute("size") || "medium"; }
-    set size(val) { this.setAttribute("size", val); }
+    get size() {
+        return this.getAttribute("size") || "medium";
+    }
+    set size(val) {
+        this.setAttribute("size", val);
+    }
 
     /** @type {string} The current selected value, or comma-separated values when multiple. */
     get value() {
@@ -172,7 +214,9 @@ class YumeSelect extends HTMLElement {
     set value(val) {
         if (this.hasAttribute("multiple")) {
             if (typeof val === "string") {
-                this.selectedValues = new Set(val.split(",").map((v) => v.trim()));
+                this.selectedValues = new Set(
+                    val.split(",").map((v) => v.trim()),
+                );
             } else if (Array.isArray(val)) {
                 this.selectedValues = new Set(val);
             }
@@ -263,17 +307,19 @@ class YumeSelect extends HTMLElement {
         const isDisabled = this.hasAttribute("disabled");
         const size = this.getAttribute("size") || "medium";
 
-        const paddingVar = {
-            small: "--component-inputs-padding-small",
-            medium: "--component-inputs-padding-medium",
-            large: "--component-inputs-padding-large",
-        }[size] || "--component-inputs-padding-medium";
+        const paddingVar =
+            {
+                small: "--component-inputs-padding-small",
+                medium: "--component-inputs-padding-medium",
+                large: "--component-inputs-padding-large",
+            }[size] || "--component-inputs-padding-medium";
 
-        const minHeightVar = {
-            small: "var(--sizing-small, 32px)",
-            medium: "var(--sizing-medium, 40px)",
-            large: "var(--sizing-large, 56px)",
-        }[size] || "var(--sizing-medium, 40px)";
+        const minHeightVar =
+            {
+                small: "var(--sizing-small, 32px)",
+                medium: "var(--sizing-medium, 40px)",
+                large: "var(--sizing-large, 56px)",
+            }[size] || "var(--sizing-medium, 40px)";
 
         const sheet = new CSSStyleSheet();
         sheet.replaceSync(`
@@ -407,7 +453,6 @@ class YumeSelect extends HTMLElement {
                 justify-content: center;
                 background: none;
                 border: none;
-                padding: 2px;
                 cursor: pointer;
                 color: inherit;
                 opacity: 0.6;
@@ -478,9 +523,13 @@ class YumeSelect extends HTMLElement {
             });
 
             // Prevent input click from bubbling to container (avoid re-focusing)
-            this.searchInput?.addEventListener("click", (e) => e.stopPropagation());
+            this.searchInput?.addEventListener("click", (e) =>
+                e.stopPropagation(),
+            );
         } else {
-            this.selectContainer.addEventListener("click", () => this.toggleDropdown());
+            this.selectContainer.addEventListener("click", () =>
+                this.toggleDropdown(),
+            );
         }
 
         // Clear button click → clear selection
@@ -497,18 +546,21 @@ class YumeSelect extends HTMLElement {
                 this._filterOptions("");
                 if (this.searchInput) {
                     this.searchInput.value = "";
-                    this.searchInput.placeholder = this.getAttribute("placeholder") || "Select...";
+                    this.searchInput.placeholder =
+                        this.getAttribute("placeholder") || "Select...";
                     this.searchInput.focus();
                     if (!this.dropdown.classList.contains("open")) {
                         this._openDropdown();
                     }
                 }
             }
-            this.dispatchEvent(new CustomEvent("change", {
-                detail: { value: "" },
-                bubbles: true,
-                composed: true,
-            }));
+            this.dispatchEvent(
+                new CustomEvent("change", {
+                    detail: { value: "" },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
             this.updateValidation();
         });
 
@@ -526,7 +578,10 @@ class YumeSelect extends HTMLElement {
                         this.selectedValues.add(val);
                     }
 
-                    this.setAttribute("value", Array.from(this.selectedValues).join(","));
+                    this.setAttribute(
+                        "value",
+                        Array.from(this.selectedValues).join(","),
+                    );
                 } else {
                     const isSelected = val === this.value;
                     if (isSelected && !isRequired) {
@@ -536,11 +591,13 @@ class YumeSelect extends HTMLElement {
                     }
                 }
 
-                this.dispatchEvent(new CustomEvent("change", {
-                    detail: { value: this.value },
-                    bubbles: true,
-                    composed: true,
-                }));
+                this.dispatchEvent(
+                    new CustomEvent("change", {
+                        detail: { value: this.value },
+                        bubbles: true,
+                        composed: true,
+                    }),
+                );
 
                 this.updateValidation();
 
@@ -571,7 +628,8 @@ class YumeSelect extends HTMLElement {
         });
 
         const noResults = this.dropdown.querySelector(".no-results");
-        if (noResults) noResults.style.display = visibleCount === 0 ? "" : "none";
+        if (noResults)
+            noResults.style.display = visibleCount === 0 ? "" : "none";
     }
 
     _generateTemplate() {
@@ -633,11 +691,14 @@ class YumeSelect extends HTMLElement {
                 ${!isLabelTop ? '<div class="label-wrapper"><slot name="label"></slot></div>' : ""}
                 <div class="dropdown" part="dropdown">
                     ${this.options
-                        .map((opt) => `
-                        <div class="dropdown-item ${valueSet.has(opt.value) ? "selected" : ""}" data-value="${opt.value}">
-                            ${opt.label}
-                        </div>
-                    `)
+                        .map((opt) => {
+                            const isSelected = valueSet.has(opt.value);
+                            const customColor = isSelected && opt.color && !["base","primary","secondary","success","warning","error","help"].includes(opt.color);
+                            const inlineStyle = customColor
+                                ? `style="background:${opt.color};color:${contrastTextColor(opt.color)}"`
+                                : "";
+                            return `<div class="dropdown-item ${isSelected ? "selected" : ""}" data-value="${opt.value}" data-color="${opt.color || ""}" ${inlineStyle}>${opt.label}</div>`;
+                        })
                         .join("")}
                     <div class="no-results" style="display:none">No results</div>
                 </div>
@@ -652,13 +713,21 @@ class YumeSelect extends HTMLElement {
         if (isMulti && isTagMode) return "";
 
         if (isMulti) {
-            const count = this.options.filter((opt) => this.selectedValues.has(opt.value)).length;
+            const count = this.options.filter((opt) =>
+                this.selectedValues.has(opt.value),
+            ).length;
             return count > 0
                 ? `${count} Selected`
                 : this.getAttribute("placeholder") || "Select...";
         } else {
-            const selected = this.options.find((opt) => opt.value === this.value);
-            return selected?.label || this.getAttribute("placeholder") || "Select...";
+            const selected = this.options.find(
+                (opt) => opt.value === this.value,
+            );
+            return (
+                selected?.label ||
+                this.getAttribute("placeholder") ||
+                "Select..."
+            );
         }
     }
 
@@ -680,9 +749,14 @@ class YumeSelect extends HTMLElement {
         this._onScrollOrResize = this._positionDropdown.bind(this);
 
         // For single searchable: clear input so user can type fresh
-        if (this.searchable && !this.hasAttribute("multiple") && this.searchInput) {
+        if (
+            this.searchable &&
+            !this.hasAttribute("multiple") &&
+            this.searchInput
+        ) {
             const currentLabel = this.value ? this._getDisplayText() : "";
-            this.searchInput.placeholder = currentLabel || this.getAttribute("placeholder") || "Select...";
+            this.searchInput.placeholder =
+                currentLabel || this.getAttribute("placeholder") || "Select...";
             this.searchInput.value = "";
             this._filterOptions("");
         }
@@ -712,7 +786,8 @@ class YumeSelect extends HTMLElement {
     }
 
     _queryRefs() {
-        this.selectContainer = this.shadowRoot.querySelector(".select-container");
+        this.selectContainer =
+            this.shadowRoot.querySelector(".select-container");
         this.dropdown = this.shadowRoot.querySelector(".dropdown");
         this.labelWrapper = this.shadowRoot.querySelector(".label-wrapper");
         this.displayElement = this.shadowRoot.querySelector(".value-display");
@@ -735,7 +810,9 @@ class YumeSelect extends HTMLElement {
 
         this.displayElement.innerHTML = "";
 
-        const selected = this.options.filter((opt) => this.selectedValues.has(opt.value));
+        const selected = this.options.filter((opt) =>
+            this.selectedValues.has(opt.value),
+        );
 
         selected.forEach((opt) => {
             const tag = document.createElement("y-tag");
@@ -748,16 +825,21 @@ class YumeSelect extends HTMLElement {
 
             tag.addEventListener("remove", () => {
                 this.selectedValues.delete(opt.value);
-                this.setAttribute("value", Array.from(this.selectedValues).join(","));
+                this.setAttribute(
+                    "value",
+                    Array.from(this.selectedValues).join(","),
+                );
                 this._renderTags();
                 this._updateSelectedStyles();
                 this.updateValidation();
 
-                this.dispatchEvent(new CustomEvent("change", {
-                    detail: { value: this.value },
-                    bubbles: true,
-                    composed: true,
-                }));
+                this.dispatchEvent(
+                    new CustomEvent("change", {
+                        detail: { value: this.value },
+                        bubbles: true,
+                        composed: true,
+                    }),
+                );
             });
 
             this.displayElement.appendChild(tag);
@@ -778,7 +860,8 @@ class YumeSelect extends HTMLElement {
         if (isTagMode) {
             this._renderTags();
             if (isClearable && this.clearButton) {
-                this.clearButton.style.display = this.selectedValues.size > 0 ? "flex" : "none";
+                this.clearButton.style.display =
+                    this.selectedValues.size > 0 ? "flex" : "none";
             }
         } else if (isSearchable && !isMulti && this.searchInput) {
             // Update inline search input to reflect current selection
@@ -808,9 +891,19 @@ class YumeSelect extends HTMLElement {
         const isMulti = this.hasAttribute("multiple");
         const valueSet = isMulti ? this.selectedValues : new Set([this.value]);
 
+        const namedColors = new Set(["base","primary","secondary","success","warning","error","help"]);
         this.dropdown?.querySelectorAll(".dropdown-item").forEach((item) => {
             const val = item.getAttribute("data-value");
-            item.classList.toggle("selected", valueSet.has(val));
+            const isSelected = valueSet.has(val);
+            item.classList.toggle("selected", isSelected);
+            const color = item.getAttribute("data-color");
+            if (isSelected && color && !namedColors.has(color)) {
+                item.style.background = color;
+                item.style.color = contrastTextColor(color);
+            } else {
+                item.style.background = "";
+                item.style.color = "";
+            }
         });
     }
 

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

@@ -10,9 +10,12 @@ declare class YumeSwitch extends HTMLElement {
     set checked(val: boolean);
     /** @type {boolean} Whether the switch is on. */
     get checked(): boolean;
-    set color(val: string);
-    /** @type {string} Color theme for the active toggle. */
-    get color(): string;
+    set onColor(val: string);
+    /** @type {string} Color theme for the active (on) toggle. */
+    get onColor(): string;
+    set offColor(val: string);
+    /** @type {string} Color theme for the inactive (off) toggle. Defaults to base. */
+    get offColor(): string;
     set disabled(val: boolean);
     /** @type {boolean} Whether the switch is disabled. */
     get disabled(): boolean;
@@ -36,7 +39,7 @@ declare class YumeSwitch extends HTMLElement {
     _buildStyleSheet(): CSSStyleSheet;
     _labelTag(pos: any): "" | "<label class=\"label-wrapper\"><slot name=\"label\"></slot></label>";
     _mirrorToggleLabels(): void;
-    _resolveToggleColor(): any;
+    _resolveColor(color: any, fallback: any): any;
     _update(): void;
     _updateAria(): void;
     _updateDirection(): void;

package/dist/components/y-switch.js

@@ -2,7 +2,7 @@ class YumeSwitch extends HTMLElement {
     static formAssociated = true;
 
     static get observedAttributes() {
-        return ["checked", "disabled", "animate", "toggle-label", "label-position", "size", "value", "color"];
+        return ["checked", "disabled", "animate", "toggle-label", "label-position", "size", "value", "on-color", "off-color"];
     }
 
     // -------------------------------------------------------------------------
@@ -45,9 +45,16 @@ class YumeSwitch extends HTMLElement {
         this._update();
     }
 
-    /** @type {string} Color theme for the active toggle. */
-    get color() { return this.getAttribute("color") || "primary"; }
-    set color(val) { this.setAttribute("color", val); }
+    /** @type {string} Color theme for the active (on) toggle. */
+    get onColor() { return this.getAttribute("on-color") || "primary"; }
+    set onColor(val) { this.setAttribute("on-color", val); }
+
+    /** @type {string} Color theme for the inactive (off) toggle. Defaults to base. */
+    get offColor() { return this.getAttribute("off-color") || ""; }
+    set offColor(val) {
+        if (val) this.setAttribute("off-color", val);
+        else this.removeAttribute("off-color");
+    }
 
     /** @type {boolean} Whether the switch is disabled. */
     get disabled() { return this.hasAttribute("disabled"); }
@@ -282,7 +289,7 @@ class YumeSwitch extends HTMLElement {
         });
     }
 
-    _resolveToggleColor() {
+    _resolveColor(color, fallback) {
         const predefined = {
             primary: "var(--primary-content--)",
             secondary: "var(--secondary-content--)",
@@ -292,7 +299,7 @@ class YumeSwitch extends HTMLElement {
             error: "var(--error-content--)",
             help: "var(--help-content--)",
         };
-        return predefined[this.color] || this.color;
+        return predefined[color] || color || fallback;
     }
 
     _update() {
@@ -364,7 +371,9 @@ class YumeSwitch extends HTMLElement {
                 : "0",
         );
         this.style.setProperty("--toggle-bg",
-            this.checked ? this._resolveToggleColor() : "var(--base-content-light)",
+            this.checked
+                ? this._resolveColor(this.onColor, "var(--primary-content--)")
+                : this._resolveColor(this.offColor, "var(--base-content-light)"),
         );
         this.style.setProperty("--toggle-transition",
             this.animate ? "transform 0.25s ease, background 0.25s ease" : "none",

package/dist/components/y-table.js

@@ -208,6 +208,11 @@ class YumeTable extends HTMLElement {
                 vertical-align: middle;
             }
 
+            .sort-icon svg {
+                width: 14px;
+                height: 14px;
+            }
+
             tbody td {
                 padding: ${paddingVar};
                 font-size: var(--font-size-paragraph, 1em);