@waggylabs/yumekit 0.5.0-beta.81 → 0.5.0

package/CHANGELOG.md

@@ -111,12 +111,16 @@ Delete any empty sections before publishing.
 
 - `y-progress`: expanded to a multi-mode indicator supporting `bar`, `ring`, and `pie` shapes plus multi-value rendering.
 
+- `y-rating`: selected icons now render with the thickest stroke weight, making them easier to distinguish from the unselected outlines beyond color alone.
+
 - **Breaking** `y-appbar`: vertical sidebar mode removed — migrate vertical navigation to the new `y-sidebar`. `sticky="start"` / `sticky="end"` now refer to the top / bottom edges, and `menu-direction` defaults to `"down"`.
 
 - **Breaking** `y-stack`: refocused as a flexbox-only primitive. Migration: `<y-stack mode="grid" …>` → `<y-grid …>`; `<y-stack mode="masonry" …>` → `<y-masonry …>`. The `mode` and `columns` attributes and the related `--component-stack-*` variables are removed.
 
 ### Fixed
 
+- Property setters that back a JSON attribute no longer double-encode a string value. Assigning a JSON string (e.g. `el.ticks = "[0,25,50]"`, as React 19 does for matching properties) previously ran it through `JSON.stringify` again, producing an unparseable attribute and a blank render. Setters now mirror string input directly, matching `y-progress`. Affects `y-slider` (`ticks`), `y-appbar`/`y-sidebar`/`y-dock`/`y-stepper`/`y-breadcrumbs` (`items`), `y-tabs` (`options`), `y-paginator` (`pageSizeOptions`), and `y-color`/`y-colorpicker` (`formats`).
+
 - `y-avatar`: when the image at `src` fails to load, the component now falls back to the initials rendering rather than displaying the browser's broken-image graphic.
 
 - Orphaned CSS custom properties across several components now resolve to real design tokens instead of only their inline fallbacks. `y-dialog`, `y-banner`, `y-droplist`, `y-gallery`, `y-breadcrumbs`, `y-dock`, `y-input`, `y-progress`, `y-slider`, `y-stepper`, and `y-table` referenced `--component-*` variables that were never defined in the token pipeline; these are now themeable. Also fixed `y-gallery`'s broken `--neutral-black-translucent` fallback and stale `--y-color-*` references in the `y-droplist` stories.

package/dist/components/y-appbar.js

@@ -127,14 +127,6 @@ class YumeButton extends HTMLElement {
     // Public
     // -------------------------------------------------------------------------
 
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options) {
-        this.setAttribute("options", JSON.stringify(options));
-    }
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
@@ -1527,7 +1519,9 @@ class YumeAppbar extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /**

package/dist/components/y-banner.js

@@ -127,14 +127,6 @@ class YumeButton extends HTMLElement {
     // Public
     // -------------------------------------------------------------------------
 
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options) {
-        this.setAttribute("options", JSON.stringify(options));
-    }
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------

package/dist/components/y-breadcrumbs.js

@@ -399,7 +399,9 @@ class YumeBreadcrumbs extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /** Maximum visible items before collapsing. */

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

@@ -33,11 +33,6 @@ export class YumeButton extends HTMLElement {
     set value(newVal: any);
     /** The current selected value(s), comma-separated when 'multiple' is set. */
     get value(): any;
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options: Array<any>): void;
     _addEventListeners(): void;
     _applyCustomColorStyles(color: any, styleType: any, size: any): void;
     _applyFilledInteractionStyles(vars: any): void;

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

@@ -33,11 +33,6 @@ export class YumeButton extends HTMLElement {
     set value(newVal: any);
     /** The current selected value(s), comma-separated when 'multiple' is set. */
     get value(): any;
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options: Array<any>): void;
     _addEventListeners(): void;
     _applyCustomColorStyles(color: any, styleType: any, size: any): void;
     _applyFilledInteractionStyles(vars: any): void;

package/dist/components/y-button.js

@@ -127,14 +127,6 @@ class YumeButton extends HTMLElement {
     // Public
     // -------------------------------------------------------------------------
 
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options) {
-        this.setAttribute("options", JSON.stringify(options));
-    }
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------

package/dist/components/y-color.js

@@ -1776,7 +1776,9 @@ class YumeColorpicker extends HTMLElement {
         }
     }
     set formats(val) {
-        this.setAttribute("formats", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("formats");
+        else if (typeof val === "string") this.setAttribute("formats", val);
+        else this.setAttribute("formats", JSON.stringify(val));
     }
 
     get showAlpha() {
@@ -2823,7 +2825,9 @@ class YumeColor extends HTMLElement {
         }
     }
     set formats(v) {
-        this.setAttribute("formats", JSON.stringify(v));
+        if (v === null || v === undefined) this.removeAttribute("formats");
+        else if (typeof v === "string") this.setAttribute("formats", v);
+        else this.setAttribute("formats", JSON.stringify(v));
     }
 
     get invalid() {

package/dist/components/y-colorpicker.js

@@ -1776,7 +1776,9 @@ class YumeColorpicker extends HTMLElement {
         }
     }
     set formats(val) {
-        this.setAttribute("formats", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("formats");
+        else if (typeof val === "string") this.setAttribute("formats", val);
+        else this.setAttribute("formats", JSON.stringify(val));
     }
 
     get showAlpha() {

package/dist/components/y-date.js

@@ -127,14 +127,6 @@ class YumeButton extends HTMLElement {
     // Public
     // -------------------------------------------------------------------------
 
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options) {
-        this.setAttribute("options", JSON.stringify(options));
-    }
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------

package/dist/components/y-datepicker.js

@@ -127,14 +127,6 @@ class YumeButton extends HTMLElement {
     // Public
     // -------------------------------------------------------------------------
 
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options) {
-        this.setAttribute("options", JSON.stringify(options));
-    }
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------

package/dist/components/y-dock.js

@@ -423,7 +423,9 @@ class YumeDock extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /** Which edge of the viewport the dock anchors to. */

package/dist/components/y-paginator.js

@@ -127,14 +127,6 @@ class YumeButton extends HTMLElement {
     // Public
     // -------------------------------------------------------------------------
 
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options) {
-        this.setAttribute("options", JSON.stringify(options));
-    }
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
@@ -2082,6 +2074,7 @@ class YumePaginator extends HTMLElement {
     }
     set pageSizeOptions(v) {
         if (v == null) this.removeAttribute("page-size-options");
+        else if (typeof v === "string") this.setAttribute("page-size-options", v);
         else this.setAttribute("page-size-options", JSON.stringify(v));
     }
 

package/dist/components/y-rating.js

@@ -349,6 +349,13 @@ class YumeRating extends HTMLElement {
                 color: ${filledColor};
             }
 
+            /* Selected icons use the thickest stroke (matches y-icon's "x-thick")
+               so they read as bolder than the unselected outlines. */
+            .icon.filled svg,
+            .icon.filled svg * {
+                stroke-width: 3 !important;
+            }
+
             .icon svg {
                 width: 100%;
                 height: 100%;

package/dist/components/y-sidebar.js

@@ -127,14 +127,6 @@ class YumeButton extends HTMLElement {
     // Public
     // -------------------------------------------------------------------------
 
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options) {
-        this.setAttribute("options", JSON.stringify(options));
-    }
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
@@ -1528,7 +1520,9 @@ class YumeSidebar extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /**

package/dist/components/y-slider.js

@@ -514,6 +514,11 @@ class YumeSlider extends HTMLElement {
             this.setAttribute("ticks", "true");
         } else if (typeof val === "number") {
             this.setAttribute("ticks", String(val));
+        } else if (typeof val === "string") {
+            // Mirror the attribute form directly. React 19 (and any property
+            // assignment) routes strings like "5" or "[0,25,50]" here; JSON
+            // -stringifying them would double-encode and break _resolveTicks.
+            this.setAttribute("ticks", val);
         } else {
             this.setAttribute("ticks", JSON.stringify(val));
         }

package/dist/components/y-stepper.js

@@ -419,7 +419,9 @@ class YumeStepper extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /** When set, users can only advance via next() or complete(). */

package/dist/components/y-tabs.js

@@ -389,7 +389,9 @@ class YumeTabs extends HTMLElement {
         }
     }
     set options(val) {
-        this.setAttribute("options", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("options");
+        else if (typeof val === "string") this.setAttribute("options", val);
+        else this.setAttribute("options", JSON.stringify(val));
         this.render();
     }
 

package/dist/index.js

@@ -1730,14 +1730,6 @@ class YumeButton extends HTMLElement {
     // Public
     // -------------------------------------------------------------------------
 
-    /**
-     * Sets the button options from an array of objects.
-     * @param {Array<Object>} options
-     */
-    setOptions(options) {
-        this.setAttribute("options", JSON.stringify(options));
-    }
-
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
@@ -3111,7 +3103,9 @@ class YumeAppbar extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /**
@@ -4234,7 +4228,9 @@ class YumeSidebar extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /**
@@ -5582,7 +5578,9 @@ class YumeBreadcrumbs extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /** Maximum visible items before collapsing. */
@@ -7888,7 +7886,9 @@ class YumeColorpicker extends HTMLElement {
         }
     }
     set formats(val) {
-        this.setAttribute("formats", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("formats");
+        else if (typeof val === "string") this.setAttribute("formats", val);
+        else this.setAttribute("formats", JSON.stringify(val));
     }
 
     get showAlpha() {
@@ -8935,7 +8935,9 @@ class YumeColor extends HTMLElement {
         }
     }
     set formats(v) {
-        this.setAttribute("formats", JSON.stringify(v));
+        if (v === null || v === undefined) this.removeAttribute("formats");
+        else if (typeof v === "string") this.setAttribute("formats", v);
+        else this.setAttribute("formats", JSON.stringify(v));
     }
 
     get invalid() {
@@ -15083,7 +15085,9 @@ class YumeDock extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /** Which edge of the viewport the dock anchors to. */
@@ -17221,6 +17225,7 @@ class YumePaginator extends HTMLElement {
     }
     set pageSizeOptions(v) {
         if (v == null) this.removeAttribute("page-size-options");
+        else if (typeof v === "string") this.setAttribute("page-size-options", v);
         else this.setAttribute("page-size-options", JSON.stringify(v));
     }
 
@@ -19643,6 +19648,13 @@ class YumeRating extends HTMLElement {
                 color: ${filledColor};
             }
 
+            /* Selected icons use the thickest stroke (matches y-icon's "x-thick")
+               so they read as bolder than the unselected outlines. */
+            .icon.filled svg,
+            .icon.filled svg * {
+                stroke-width: 3 !important;
+            }
+
             .icon svg {
                 width: 100%;
                 height: 100%;
@@ -20419,6 +20431,11 @@ class YumeSlider extends HTMLElement {
             this.setAttribute("ticks", "true");
         } else if (typeof val === "number") {
             this.setAttribute("ticks", String(val));
+        } else if (typeof val === "string") {
+            // Mirror the attribute form directly. React 19 (and any property
+            // assignment) routes strings like "5" or "[0,25,50]" here; JSON
+            // -stringifying them would double-encode and break _resolveTicks.
+            this.setAttribute("ticks", val);
         } else {
             this.setAttribute("ticks", JSON.stringify(val));
         }
@@ -22314,7 +22331,9 @@ class YumeStepper extends HTMLElement {
         }
     }
     set items(val) {
-        this.setAttribute("items", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("items");
+        else if (typeof val === "string") this.setAttribute("items", val);
+        else this.setAttribute("items", JSON.stringify(val));
     }
 
     /** When set, users can only advance via next() or complete(). */
@@ -24011,7 +24030,9 @@ class YumeTabs extends HTMLElement {
         }
     }
     set options(val) {
-        this.setAttribute("options", JSON.stringify(val));
+        if (val === null || val === undefined) this.removeAttribute("options");
+        else if (typeof val === "string") this.setAttribute("options", val);
+        else this.setAttribute("options", JSON.stringify(val));
         this.render();
     }