@waggylabs/yumekit 0.5.1 → 0.5.3

package/dist/components/y-appbar.js

@@ -7,6 +7,7 @@ class YumeButton extends HTMLElement {
             "right-icon",
             "color",
             "size",
+            "variant",
             "style-type",
             "type",
             "padding-mode",
@@ -59,9 +60,13 @@ class YumeButton extends HTMLElement {
             }
         }
 
+        if (name === "style-type" && newValue !== null) {
+            this._warnStyleTypeDeprecated();
+        }
+
         this._init();
 
-        if (["color", "size", "style-type", "disabled"].includes(name)) {
+        if (["color", "size", "variant", "style-type", "disabled"].includes(name)) {
             this._updateStyles();
         }
     }
@@ -143,9 +148,12 @@ class YumeButton extends HTMLElement {
         this.setAttribute("size", val);
     }
 
-    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    /**
+     * Deprecated alias for `variant`. Use `variant` instead; retained for
+     * backward compatibility and removed in a future major version.
+     */
     get styleType() {
-        return this.getAttribute("style-type") || "outlined";
+        return this.variant;
     }
     set styleType(val) {
         this.setAttribute("style-type", val);
@@ -188,6 +196,18 @@ class YumeButton extends HTMLElement {
         this.setAttribute("value", newVal);
     }
 
+    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    get variant() {
+        return (
+            this.getAttribute("variant") ||
+            this.getAttribute("style-type") ||
+            "outlined"
+        );
+    }
+    set variant(val) {
+        this.setAttribute("variant", val);
+    }
+
     // -------------------------------------------------------------------------
     // Public
     // -------------------------------------------------------------------------
@@ -242,7 +262,7 @@ class YumeButton extends HTMLElement {
         });
     }
 
-    _applyCustomColorStyles(color, styleType, size) {
+    _applyCustomColorStyles(color, variant, size) {
         const text = contrastTextColor(color);
         const hover = `color-mix(in srgb, ${color} 85%, black)`;
         const active = `color-mix(in srgb, ${color} 70%, black)`;
@@ -298,7 +318,7 @@ class YumeButton extends HTMLElement {
             },
         };
 
-        Object.entries(styles[styleType] || styles.outlined).forEach(
+        Object.entries(styles[variant] || styles.outlined).forEach(
             ([key, val]) => this.button.style.setProperty(key, val),
         );
 
@@ -344,11 +364,11 @@ class YumeButton extends HTMLElement {
         );
     }
 
-    _applyInteractionStyles(vars, styleType) {
-        if (styleType === "filled") {
+    _applyInteractionStyles(vars, variant) {
+        if (variant === "filled") {
             this._applyFilledInteractionStyles(vars);
         } else {
-            this._applyUnfilledInteractionStyles(vars, styleType);
+            this._applyUnfilledInteractionStyles(vars, variant);
         }
     }
 
@@ -473,7 +493,7 @@ class YumeButton extends HTMLElement {
         this.shadowRoot.appendChild(style);
     }
 
-    _applyUnfilledInteractionStyles(vars, styleType) {
+    _applyUnfilledInteractionStyles(vars, variant) {
         const borderColor = this._outlineBorderColor(
             `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
         );
@@ -503,7 +523,7 @@ class YumeButton extends HTMLElement {
             `var(${vars[6]}, #0c0c0d)`,
         );
 
-        if (styleType === "outlined") {
+        if (variant === "outlined") {
             // Outlined buttons keep their border color across all states
             this.button.style.setProperty("--hover-border-color", borderColor);
             this.button.style.setProperty("--focus-border-color", borderColor);
@@ -791,11 +811,11 @@ class YumeButton extends HTMLElement {
     }
 
     _updateStyles() {
-        const { color, size, styleType } = this;
+        const { color, size, variant } = this;
         const colorVars = this._getColorVarsMap();
 
         if (!colorVars[color] && isSafeCssColor(color)) {
-            this._applyCustomColorStyles(color, styleType, size);
+            this._applyCustomColorStyles(color, variant, size);
             return;
         }
 
@@ -824,14 +844,23 @@ class YumeButton extends HTMLElement {
             },
         };
 
-        const currentStyle = styleVars[styleType] || styleVars.outlined;
+        const currentStyle = styleVars[variant] || styleVars.outlined;
         Object.entries(currentStyle).forEach(([key, value]) => {
             this.button.style.setProperty(key, value);
         });
 
-        this._applyInteractionStyles(vars, styleType);
+        this._applyInteractionStyles(vars, variant);
         this._applySizeStyles(size);
     }
+
+    _warnStyleTypeDeprecated() {
+        if (YumeButton._styleTypeDeprecationWarned) return;
+
+        YumeButton._styleTypeDeprecationWarned = true;
+        console.warn(
+            'y-button: the "style-type" attribute is deprecated and will be removed in a future major version. Use "variant" instead.',
+        );
+    }
 }
 
 if (!customElements.get("y-button")) {
@@ -2168,7 +2197,7 @@ class YumeAppbar extends HTMLElement {
             {
                 id,
                 color: "base",
-                "style-type": "flat",
+                "variant": "flat",
                 size: cfg.buttonSize,
                 "aria-label": "Open menu",
                 "aria-controls": panelId,
@@ -2320,7 +2349,7 @@ class YumeAppbar extends HTMLElement {
         const btn = createElement("y-button", {
             id: btnId,
             color: isActive ? "primary" : "base",
-            "style-type": "flat",
+            "variant": "flat",
             size: cfg.buttonSize,
             "aria-current": isActive ? "page" : false,
         });

package/dist/components/y-banner.js

@@ -7,6 +7,7 @@ class YumeButton extends HTMLElement {
             "right-icon",
             "color",
             "size",
+            "variant",
             "style-type",
             "type",
             "padding-mode",
@@ -59,9 +60,13 @@ class YumeButton extends HTMLElement {
             }
         }
 
+        if (name === "style-type" && newValue !== null) {
+            this._warnStyleTypeDeprecated();
+        }
+
         this._init();
 
-        if (["color", "size", "style-type", "disabled"].includes(name)) {
+        if (["color", "size", "variant", "style-type", "disabled"].includes(name)) {
             this._updateStyles();
         }
     }
@@ -143,9 +148,12 @@ class YumeButton extends HTMLElement {
         this.setAttribute("size", val);
     }
 
-    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    /**
+     * Deprecated alias for `variant`. Use `variant` instead; retained for
+     * backward compatibility and removed in a future major version.
+     */
     get styleType() {
-        return this.getAttribute("style-type") || "outlined";
+        return this.variant;
     }
     set styleType(val) {
         this.setAttribute("style-type", val);
@@ -188,6 +196,18 @@ class YumeButton extends HTMLElement {
         this.setAttribute("value", newVal);
     }
 
+    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    get variant() {
+        return (
+            this.getAttribute("variant") ||
+            this.getAttribute("style-type") ||
+            "outlined"
+        );
+    }
+    set variant(val) {
+        this.setAttribute("variant", val);
+    }
+
     // -------------------------------------------------------------------------
     // Public
     // -------------------------------------------------------------------------
@@ -242,7 +262,7 @@ class YumeButton extends HTMLElement {
         });
     }
 
-    _applyCustomColorStyles(color, styleType, size) {
+    _applyCustomColorStyles(color, variant, size) {
         const text = contrastTextColor(color);
         const hover = `color-mix(in srgb, ${color} 85%, black)`;
         const active = `color-mix(in srgb, ${color} 70%, black)`;
@@ -298,7 +318,7 @@ class YumeButton extends HTMLElement {
             },
         };
 
-        Object.entries(styles[styleType] || styles.outlined).forEach(
+        Object.entries(styles[variant] || styles.outlined).forEach(
             ([key, val]) => this.button.style.setProperty(key, val),
         );
 
@@ -344,11 +364,11 @@ class YumeButton extends HTMLElement {
         );
     }
 
-    _applyInteractionStyles(vars, styleType) {
-        if (styleType === "filled") {
+    _applyInteractionStyles(vars, variant) {
+        if (variant === "filled") {
             this._applyFilledInteractionStyles(vars);
         } else {
-            this._applyUnfilledInteractionStyles(vars, styleType);
+            this._applyUnfilledInteractionStyles(vars, variant);
         }
     }
 
@@ -473,7 +493,7 @@ class YumeButton extends HTMLElement {
         this.shadowRoot.appendChild(style);
     }
 
-    _applyUnfilledInteractionStyles(vars, styleType) {
+    _applyUnfilledInteractionStyles(vars, variant) {
         const borderColor = this._outlineBorderColor(
             `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
         );
@@ -503,7 +523,7 @@ class YumeButton extends HTMLElement {
             `var(${vars[6]}, #0c0c0d)`,
         );
 
-        if (styleType === "outlined") {
+        if (variant === "outlined") {
             // Outlined buttons keep their border color across all states
             this.button.style.setProperty("--hover-border-color", borderColor);
             this.button.style.setProperty("--focus-border-color", borderColor);
@@ -791,11 +811,11 @@ class YumeButton extends HTMLElement {
     }
 
     _updateStyles() {
-        const { color, size, styleType } = this;
+        const { color, size, variant } = this;
         const colorVars = this._getColorVarsMap();
 
         if (!colorVars[color] && isSafeCssColor(color)) {
-            this._applyCustomColorStyles(color, styleType, size);
+            this._applyCustomColorStyles(color, variant, size);
             return;
         }
 
@@ -824,14 +844,23 @@ class YumeButton extends HTMLElement {
             },
         };
 
-        const currentStyle = styleVars[styleType] || styleVars.outlined;
+        const currentStyle = styleVars[variant] || styleVars.outlined;
         Object.entries(currentStyle).forEach(([key, value]) => {
             this.button.style.setProperty(key, value);
         });
 
-        this._applyInteractionStyles(vars, styleType);
+        this._applyInteractionStyles(vars, variant);
         this._applySizeStyles(size);
     }
+
+    _warnStyleTypeDeprecated() {
+        if (YumeButton._styleTypeDeprecationWarned) return;
+
+        YumeButton._styleTypeDeprecationWarned = true;
+        console.warn(
+            'y-button: the "style-type" attribute is deprecated and will be removed in a future major version. Use "variant" instead.',
+        );
+    }
 }
 
 if (!customElements.get("y-button")) {
@@ -1395,7 +1424,7 @@ class YumeBanner extends HTMLElement {
                     part: "close-btn",
                     "aria-label": "Dismiss banner",
                     color,
-                    "style-type": "filled",
+                    "variant": "filled",
                     size,
                 },
                 [createElement("y-icon", { name: "x", size: iconSize })],

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

@@ -32,7 +32,10 @@ export class YumeButton extends HTMLElement {
     /** Size: "small" | "medium" | "large" (default "medium"). */
     get size(): string;
     set styleType(val: string);
-    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    /**
+     * Deprecated alias for `variant`. Use `variant` instead; retained for
+     * backward compatibility and removed in a future major version.
+     */
     get styleType(): string;
     set type(val: string);
     /** Button type: "button" | "submit" | "reset" (default "button"). */
@@ -40,13 +43,16 @@ export class YumeButton extends HTMLElement {
     set value(newVal: any);
     /** The current selected value(s), comma-separated when 'multiple' is set. */
     get value(): any;
+    set variant(val: string);
+    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    get variant(): string;
     _addEventListeners(): void;
-    _applyCustomColorStyles(color: any, styleType: any, size: any): void;
+    _applyCustomColorStyles(color: any, variant: any, size: any): void;
     _applyFilledInteractionStyles(vars: any): void;
-    _applyInteractionStyles(vars: any, styleType: any): void;
+    _applyInteractionStyles(vars: any, variant: any): void;
     _applySizeStyles(size: any): void;
     _applyStyles(): void;
-    _applyUnfilledInteractionStyles(vars: any, styleType: any): void;
+    _applyUnfilledInteractionStyles(vars: any, variant: any): void;
     _getColorVarsMap(): {
         primary: string[];
         secondary: string[];
@@ -71,4 +77,5 @@ export class YumeButton extends HTMLElement {
     _outlineBorder(defaultColor: any): string;
     _outlineBorderColor(defaultColor: any): string;
     _updateStyles(): void;
+    _warnStyleTypeDeprecated(): void;
 }

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

@@ -32,7 +32,10 @@ export class YumeButton extends HTMLElement {
     /** Size: "small" | "medium" | "large" (default "medium"). */
     get size(): string;
     set styleType(val: string);
-    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    /**
+     * Deprecated alias for `variant`. Use `variant` instead; retained for
+     * backward compatibility and removed in a future major version.
+     */
     get styleType(): string;
     set type(val: string);
     /** Button type: "button" | "submit" | "reset" (default "button"). */
@@ -40,13 +43,16 @@ export class YumeButton extends HTMLElement {
     set value(newVal: any);
     /** The current selected value(s), comma-separated when 'multiple' is set. */
     get value(): any;
+    set variant(val: string);
+    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    get variant(): string;
     _addEventListeners(): void;
-    _applyCustomColorStyles(color: any, styleType: any, size: any): void;
+    _applyCustomColorStyles(color: any, variant: any, size: any): void;
     _applyFilledInteractionStyles(vars: any): void;
-    _applyInteractionStyles(vars: any, styleType: any): void;
+    _applyInteractionStyles(vars: any, variant: any): void;
     _applySizeStyles(size: any): void;
     _applyStyles(): void;
-    _applyUnfilledInteractionStyles(vars: any, styleType: any): void;
+    _applyUnfilledInteractionStyles(vars: any, variant: any): void;
     _getColorVarsMap(): {
         primary: string[];
         secondary: string[];
@@ -71,4 +77,5 @@ export class YumeButton extends HTMLElement {
     _outlineBorder(defaultColor: any): string;
     _outlineBorderColor(defaultColor: any): string;
     _updateStyles(): void;
+    _warnStyleTypeDeprecated(): void;
 }

package/dist/components/y-button.js

@@ -7,6 +7,7 @@ class YumeButton extends HTMLElement {
             "right-icon",
             "color",
             "size",
+            "variant",
             "style-type",
             "type",
             "padding-mode",
@@ -59,9 +60,13 @@ class YumeButton extends HTMLElement {
             }
         }
 
+        if (name === "style-type" && newValue !== null) {
+            this._warnStyleTypeDeprecated();
+        }
+
         this._init();
 
-        if (["color", "size", "style-type", "disabled"].includes(name)) {
+        if (["color", "size", "variant", "style-type", "disabled"].includes(name)) {
             this._updateStyles();
         }
     }
@@ -143,9 +148,12 @@ class YumeButton extends HTMLElement {
         this.setAttribute("size", val);
     }
 
-    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    /**
+     * Deprecated alias for `variant`. Use `variant` instead; retained for
+     * backward compatibility and removed in a future major version.
+     */
     get styleType() {
-        return this.getAttribute("style-type") || "outlined";
+        return this.variant;
     }
     set styleType(val) {
         this.setAttribute("style-type", val);
@@ -188,6 +196,18 @@ class YumeButton extends HTMLElement {
         this.setAttribute("value", newVal);
     }
 
+    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    get variant() {
+        return (
+            this.getAttribute("variant") ||
+            this.getAttribute("style-type") ||
+            "outlined"
+        );
+    }
+    set variant(val) {
+        this.setAttribute("variant", val);
+    }
+
     // -------------------------------------------------------------------------
     // Public
     // -------------------------------------------------------------------------
@@ -242,7 +262,7 @@ class YumeButton extends HTMLElement {
         });
     }
 
-    _applyCustomColorStyles(color, styleType, size) {
+    _applyCustomColorStyles(color, variant, size) {
         const text = contrastTextColor(color);
         const hover = `color-mix(in srgb, ${color} 85%, black)`;
         const active = `color-mix(in srgb, ${color} 70%, black)`;
@@ -298,7 +318,7 @@ class YumeButton extends HTMLElement {
             },
         };
 
-        Object.entries(styles[styleType] || styles.outlined).forEach(
+        Object.entries(styles[variant] || styles.outlined).forEach(
             ([key, val]) => this.button.style.setProperty(key, val),
         );
 
@@ -344,11 +364,11 @@ class YumeButton extends HTMLElement {
         );
     }
 
-    _applyInteractionStyles(vars, styleType) {
-        if (styleType === "filled") {
+    _applyInteractionStyles(vars, variant) {
+        if (variant === "filled") {
             this._applyFilledInteractionStyles(vars);
         } else {
-            this._applyUnfilledInteractionStyles(vars, styleType);
+            this._applyUnfilledInteractionStyles(vars, variant);
         }
     }
 
@@ -473,7 +493,7 @@ class YumeButton extends HTMLElement {
         this.shadowRoot.appendChild(style);
     }
 
-    _applyUnfilledInteractionStyles(vars, styleType) {
+    _applyUnfilledInteractionStyles(vars, variant) {
         const borderColor = this._outlineBorderColor(
             `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
         );
@@ -503,7 +523,7 @@ class YumeButton extends HTMLElement {
             `var(${vars[6]}, #0c0c0d)`,
         );
 
-        if (styleType === "outlined") {
+        if (variant === "outlined") {
             // Outlined buttons keep their border color across all states
             this.button.style.setProperty("--hover-border-color", borderColor);
             this.button.style.setProperty("--focus-border-color", borderColor);
@@ -791,11 +811,11 @@ class YumeButton extends HTMLElement {
     }
 
     _updateStyles() {
-        const { color, size, styleType } = this;
+        const { color, size, variant } = this;
         const colorVars = this._getColorVarsMap();
 
         if (!colorVars[color] && isSafeCssColor(color)) {
-            this._applyCustomColorStyles(color, styleType, size);
+            this._applyCustomColorStyles(color, variant, size);
             return;
         }
 
@@ -824,14 +844,23 @@ class YumeButton extends HTMLElement {
             },
         };
 
-        const currentStyle = styleVars[styleType] || styleVars.outlined;
+        const currentStyle = styleVars[variant] || styleVars.outlined;
         Object.entries(currentStyle).forEach(([key, value]) => {
             this.button.style.setProperty(key, value);
         });
 
-        this._applyInteractionStyles(vars, styleType);
+        this._applyInteractionStyles(vars, variant);
         this._applySizeStyles(size);
     }
+
+    _warnStyleTypeDeprecated() {
+        if (YumeButton._styleTypeDeprecationWarned) return;
+
+        YumeButton._styleTypeDeprecationWarned = true;
+        console.warn(
+            'y-button: the "style-type" attribute is deprecated and will be removed in a future major version. Use "variant" instead.',
+        );
+    }
 }
 
 if (!customElements.get("y-button")) {

package/dist/components/y-checkbox.js

@@ -505,8 +505,14 @@ class YumeCheckbox extends HTMLElement {
     // -------------------------------------------------------------------------
 
     _bindCheckboxListeners() {
+        const wrapper = this.shadowRoot.querySelector(".wrapper");
         const box = this.shadowRoot.querySelector(".checkbox");
-        box.addEventListener("click", () => this.toggle());
+
+        wrapper.addEventListener("click", () => {
+            if (this.disabled) return;
+            box.focus();
+            this.toggle();
+        });
         box.addEventListener("keydown", (e) => {
             if (e.key === " " || e.key === "Enter") {
                 e.preventDefault();

package/dist/components/y-code.js

@@ -1947,7 +1947,8 @@ class YumeCode extends HTMLElement {
     _buildStyles() {
         return `
             :host {
-                display: block;
+                display: flex;
+                flex-direction: column;
                 font-family: var(--component-code-font-family, var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace));
                 color: var(--component-code-text-color, var(--base-content--, #1a1a1a));
                 background: var(--component-code-bg-color, var(--base-background-component, #f6f8fa));
@@ -1997,13 +1998,19 @@ class YumeCode extends HTMLElement {
             .pre-wrap {
                 position: relative;
                 overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                flex: 1 1 auto;
+                min-height: 0;
             }
 
             pre.code {
                 margin: 0;
                 padding: var(--spacing-small, 8px) 0;
+                flex: 1 1 auto;
+                min-height: 0;
                 overflow-x: ${this.wrap ? "hidden" : "auto"};
-                overflow-y: ${this.maxLines ? "auto" : "visible"};
+                overflow-y: auto;
                 font-size: var(--component-code-font-size, 0.9em);
                 line-height: var(--component-code-line-height, 1.55);
                 tab-size: 4;

package/dist/components/y-color.js

@@ -132,7 +132,10 @@ class YumeInput extends HTMLElement {
             : "default";
     }
     set variant(val) {
-        this.setAttribute("variant", val === "underline" ? "underline" : "default");
+        this.setAttribute(
+            "variant",
+            val === "underline" ? "underline" : "default",
+        );
     }
 
     /** @type {string} Input type (default "text"). */
@@ -200,6 +203,13 @@ class YumeInput extends HTMLElement {
     // -------------------------------------------------------------------------
 
     _bindInputListeners() {
+        this.inputContainer.addEventListener("mousedown", (e) => {
+            if (e.target !== this.input) {
+                e.preventDefault();
+                this.input.focus();
+            }
+        });
+
         this.input.addEventListener("input", (e) => {
             this.setAttribute("value", e.target.value);
             this.dispatchEvent(
@@ -1750,7 +1760,7 @@ class YumeSelect extends HTMLElement {
             tag.setAttribute("removable", "");
             tag.setAttribute("size", "small");
             tag.setAttribute("color", opt.color || "primary");
-            tag.setAttribute("style-type", "filled");
+            tag.setAttribute("variant", "filled");
             tag.textContent = opt.label;
             tag.dataset.value = opt.value;
 

package/dist/components/y-colorpicker.js

@@ -132,7 +132,10 @@ class YumeInput extends HTMLElement {
             : "default";
     }
     set variant(val) {
-        this.setAttribute("variant", val === "underline" ? "underline" : "default");
+        this.setAttribute(
+            "variant",
+            val === "underline" ? "underline" : "default",
+        );
     }
 
     /** @type {string} Input type (default "text"). */
@@ -200,6 +203,13 @@ class YumeInput extends HTMLElement {
     // -------------------------------------------------------------------------
 
     _bindInputListeners() {
+        this.inputContainer.addEventListener("mousedown", (e) => {
+            if (e.target !== this.input) {
+                e.preventDefault();
+                this.input.focus();
+            }
+        });
+
         this.input.addEventListener("input", (e) => {
             this.setAttribute("value", e.target.value);
             this.dispatchEvent(
@@ -1750,7 +1760,7 @@ class YumeSelect extends HTMLElement {
             tag.setAttribute("removable", "");
             tag.setAttribute("size", "small");
             tag.setAttribute("color", opt.color || "primary");
-            tag.setAttribute("style-type", "filled");
+            tag.setAttribute("variant", "filled");
             tag.textContent = opt.label;
             tag.dataset.value = opt.value;