@waggylabs/yumekit 0.3.0 → 0.3.1

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

@@ -7,10 +7,19 @@ export class YumeSelect extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    _value: any;
     set value(val: string);
     /** @type {string} The current selected value, or comma-separated values when multiple. */
     get value(): string;
-    _value: string;
+    set options(val: Array<{
+        value: string;
+        label: string;
+    }>);
+    /** @type {Array<{value: string, label: string}>} The options array for the select. */
+    get options(): Array<{
+        value: string;
+        label: string;
+    }>;
     /**
      * Returns the parsed options array from the "options" attribute.
      * @returns {Array<{value: string, label: string}>}

package/dist/components/y-select.js

@@ -65,6 +65,13 @@ class YumeSelect extends HTMLElement {
         if (oldValue === newValue) return;
 
         if (name === "value") {
+            if (this.hasAttribute("multiple")) {
+                this.selectedValues = new Set(
+                    (newValue || "").split(",").map((v) => v.trim()).filter(Boolean),
+                );
+            } else {
+                this._value = newValue || "";
+            }
             this.updateDisplay();
             this._internals.setFormValue(newValue, this.getAttribute("name"));
             this.updateSelectedStyles();
@@ -116,11 +123,8 @@ class YumeSelect extends HTMLElement {
         this.updateSelectedStyles();
     }
 
-    /**
-     * Returns the parsed options array from the "options" attribute.
-     * @returns {Array<{value: string, label: string}>}
-     */
-    getOptions() {
+    /** @type {Array<{value: string, label: string}>} The options array for the select. */
+    get options() {
         try {
             return JSON.parse(this.getAttribute("options") || "[]");
         } catch (e) {
@@ -128,6 +132,18 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    set options(val) {
+        this.setAttribute("options", JSON.stringify(val));
+    }
+
+    /**
+     * Returns the parsed options array from the "options" attribute.
+     * @returns {Array<{value: string, label: string}>}
+     */
+    getOptions() {
+        return this.options;
+    }
+
     /**
      * Returns the display text for the current selection.
      * @returns {string}

package/dist/index.js

@@ -5007,6 +5007,13 @@ class YumeSelect extends HTMLElement {
         if (oldValue === newValue) return;
 
         if (name === "value") {
+            if (this.hasAttribute("multiple")) {
+                this.selectedValues = new Set(
+                    (newValue || "").split(",").map((v) => v.trim()).filter(Boolean),
+                );
+            } else {
+                this._value = newValue || "";
+            }
             this.updateDisplay();
             this._internals.setFormValue(newValue, this.getAttribute("name"));
             this.updateSelectedStyles();
@@ -5058,11 +5065,8 @@ class YumeSelect extends HTMLElement {
         this.updateSelectedStyles();
     }
 
-    /**
-     * Returns the parsed options array from the "options" attribute.
-     * @returns {Array<{value: string, label: string}>}
-     */
-    getOptions() {
+    /** @type {Array<{value: string, label: string}>} The options array for the select. */
+    get options() {
         try {
             return JSON.parse(this.getAttribute("options") || "[]");
         } catch (e) {
@@ -5070,6 +5074,18 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    set options(val) {
+        this.setAttribute("options", JSON.stringify(val));
+    }
+
+    /**
+     * Returns the parsed options array from the "options" attribute.
+     * @returns {Array<{value: string, label: string}>}
+     */
+    getOptions() {
+        return this.options;
+    }
+
     /**
      * Returns the display text for the current selection.
      * @returns {string}

package/dist/react.d.ts

@@ -16,12 +16,14 @@ declare module "react" {
                 size?: "small" | "medium" | "large";
                 "menu-direction"?: "right" | "down" | "";
                 sticky?: "start" | "end";
+                "mobile-breakpoint"?: string | number;
             }>;
             "y-avatar": El<{
                 src?: string;
                 alt?: string;
                 size?: "small" | "medium" | "large";
                 shape?: string;
+                color?: string;
             }>;
             "y-badge": El<{
                 value?: string;
@@ -62,13 +64,23 @@ declare module "react" {
                 disabled?: boolean | string;
                 indeterminate?: boolean | string;
                 "label-position"?: "top" | "bottom" | "left" | "right";
-                color?: string;
-                size?: string;
             }>;
             "y-dialog": El<{
                 visible?: boolean | string;
                 anchor?: string;
                 closable?: boolean | string;
+                "show-backdrop"?: boolean | string;
+                animate?: boolean | string;
+                position?:
+                    | "center"
+                    | "top-left"
+                    | "top-center"
+                    | "top-right"
+                    | "left"
+                    | "right"
+                    | "bottom-left"
+                    | "bottom-center"
+                    | "bottom-right";
             }>;
             "y-drawer": El<{
                 visible?: boolean | string;
@@ -87,14 +99,10 @@ declare module "react" {
                 type?: string;
                 name?: string;
                 value?: string;
-                placeholder?: string;
                 disabled?: boolean | string;
                 invalid?: boolean | string;
-                required?: boolean | string;
-                color?: string;
                 size?: "small" | "medium" | "large";
-                label?: string;
-                "label-position"?: string;
+                "label-position"?: "top" | "bottom";
             }>;
             "y-menu": El<{
                 items?: string;
@@ -129,22 +137,19 @@ declare module "react" {
                 value?: string;
                 options?: string;
                 disabled?: boolean | string;
-                color?: string;
-                size?: string;
             }>;
             "y-select": El<{
                 name?: string;
                 value?: string;
                 disabled?: boolean | string;
                 multiple?: boolean | string;
-                color?: string;
-                size?: string;
+                size?: "small" | "medium" | "large";
                 placeholder?: string;
                 options?: string;
                 invalid?: boolean | string;
                 required?: boolean | string;
-                "label-position"?: string;
-                "display-mode"?: string;
+                "label-position"?: "top" | "bottom";
+                "display-mode"?: "tag";
                 "close-on-click-outside"?: string;
             }>;
             "y-slider": El<{
@@ -163,7 +168,7 @@ declare module "react" {
                 value?: string;
                 checked?: boolean | string;
                 disabled?: boolean | string;
-                animate?: string;
+                animate?: boolean | string;
                 "toggle-label"?: boolean | string;
                 "label-position"?: "top" | "bottom" | "left" | "right";
                 color?: string;
@@ -189,8 +194,7 @@ declare module "react" {
             }>;
             "y-theme": El<{
                 theme?: string;
-                mode?: "light" | "dark";
-                "theme-path"?: string;
+                "cross-origin"?: boolean | string;
             }>;
             "y-toast": El<{
                 position?: