@waggylabs/yumekit 0.5.2 → 0.5.3

package/dist/components/y-data-grid.js

@@ -492,7 +492,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"). */
@@ -560,6 +563,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(
@@ -896,8 +906,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();
@@ -2009,7 +2025,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;
 
@@ -2123,6 +2139,7 @@ class YumeButton extends HTMLElement {
             "right-icon",
             "color",
             "size",
+            "variant",
             "style-type",
             "type",
             "padding-mode",
@@ -2175,9 +2192,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();
         }
     }
@@ -2259,9 +2280,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);
@@ -2304,6 +2328,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
     // -------------------------------------------------------------------------
@@ -2358,7 +2394,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)`;
@@ -2414,7 +2450,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),
         );
 
@@ -2460,11 +2496,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);
         }
     }
 
@@ -2589,7 +2625,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))`,
         );
@@ -2619,7 +2655,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);
@@ -2907,11 +2943,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;
         }
 
@@ -2940,14 +2976,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")) {
@@ -3327,7 +3372,10 @@ class YumeDatepicker extends HTMLElement {
         root.querySelectorAll(".month-btn").forEach((btn) => {
             btn.addEventListener("click", () => {
                 const vd = this._viewDateForSide(btn.dataset.side);
-                this._selectMonth(vd.getFullYear(), parseInt(btn.dataset.month));
+                this._selectMonth(
+                    vd.getFullYear(),
+                    parseInt(btn.dataset.month),
+                );
             });
         });
 
@@ -3403,20 +3451,20 @@ class YumeDatepicker extends HTMLElement {
             const isSelected = this._sameDay(date, this._startDate);
             const inRange = this._inRange(date);
 
-            let styleType = "flat";
+            let variant = "flat";
             let color = "base";
 
             if (isEdge || isSelected) {
-                styleType = "filled";
+                variant = "filled";
                 color = this.color;
             } else if (inRange) {
-                styleType = "flat";
+                variant = "flat";
                 color = this.color;
             }
 
             return `<y-button
                 class="day-btn"
-                style-type="${styleType}"
+                variant="${variant}"
                 color="${color}"
                 size="medium"
                 padding-mode="square"
@@ -3470,16 +3518,16 @@ class YumeDatepicker extends HTMLElement {
         return `
             <div class="cal-header">
                 <div class="nav-start">
-                    ${showPrev ? `<y-button class="nav-btn" data-action="prev-year" padding-mode="square" data-side="${side}" style-type="flat" size="small" aria-label="Previous year"><y-icon name="expand-left" size="small"></y-icon></y-button>` : ""}
-                    ${showPrev ? `<y-button class="nav-btn" data-action="prev-month" padding-mode="square"data-side="${side}" style-type="flat" size="small" aria-label="Previous month"><y-icon name="chevron-left" size="small"></y-icon></y-button>` : ""}
+                    ${showPrev ? `<y-button class="nav-btn" data-action="prev-year" padding-mode="square" data-side="${side}" variant="flat" size="small" aria-label="Previous year"><y-icon name="expand-left" size="small"></y-icon></y-button>` : ""}
+                    ${showPrev ? `<y-button class="nav-btn" data-action="prev-month" padding-mode="square" data-side="${side}" variant="flat" size="small" aria-label="Previous month"><y-icon name="chevron-left" size="small"></y-icon></y-button>` : ""}
                 </div>
                 <div class="header-selects">
                     ${this.showMonths ? `<y-select class="month-sel" data-side="${side}" size="small" value="${month}" options='${monthOptions}'></y-select>` : ""}
                     ${this.showYears ? `<y-select class="year-sel" data-side="${side}" size="small" value="${year}" options='${yearOptions}'></y-select>` : ""}
                 </div>
                 <div class="nav-end">
-                    ${showNext ? `<y-button class="nav-btn" data-action="next-month" padding-mode="square" data-side="${side}" style-type="flat" size="small" aria-label="Next month"><y-icon name="chevron-right" size="small"></y-icon></y-button>` : ""}
-                    ${showNext ? `<y-button class="nav-btn" data-action="next-year" padding-mode="square" data-side="${side}" style-type="flat" size="small" aria-label="Next year"><y-icon name="expand-right" size="small"></y-icon></y-button>` : ""}
+                    ${showNext ? `<y-button class="nav-btn" data-action="next-month" padding-mode="square" data-side="${side}" variant="flat" size="small" aria-label="Next month"><y-icon name="chevron-right" size="small"></y-icon></y-button>` : ""}
+                    ${showNext ? `<y-button class="nav-btn" data-action="next-year" padding-mode="square" data-side="${side}" variant="flat" size="small" aria-label="Next year"><y-icon name="expand-right" size="small"></y-icon></y-button>` : ""}
                 </div>
             </div>
         `;
@@ -3497,7 +3545,7 @@ class YumeDatepicker extends HTMLElement {
                         this._startDate.getMonth() === i;
                     return `<y-button
                         class="month-btn"
-                        style-type="${isSelected ? "filled" : "flat"}"
+                        variant="${isSelected ? "filled" : "flat"}"
                         color="${isSelected ? this.color : "base"}"
                         size="small"
                         padding-mode="square"
@@ -3744,7 +3792,7 @@ class YumeDatepicker extends HTMLElement {
             const sel = time.h === h;
             return `<y-button
                 class="time-btn${sel ? " selected" : ""}"
-                style-type="${sel ? "filled" : "flat"}"
+                variant="${sel ? "filled" : "flat"}"
                 color="${sel ? this.color : "base"}"
                 size="small"
                 data-hour="${h}"
@@ -3770,7 +3818,7 @@ class YumeDatepicker extends HTMLElement {
                                 m;
                             return `<y-button
                             class="time-btn${sel ? " selected" : ""}"
-                            style-type="${sel ? "filled" : "flat"}"
+                            variant="${sel ? "filled" : "flat"}"
                             color="${sel ? this.color : "base"}"
                             size="small"
                             data-minute="${m}"
@@ -3798,7 +3846,7 @@ class YumeDatepicker extends HTMLElement {
                                 s;
                             return `<y-button
                             class="time-btn${sel ? " selected" : ""}"
-                            style-type="${sel ? "filled" : "flat"}"
+                            variant="${sel ? "filled" : "flat"}"
                             color="${sel ? this.color : "base"}"
                             size="small"
                             data-second="${s}"
@@ -3846,7 +3894,7 @@ class YumeDatepicker extends HTMLElement {
                         const disabled = this._isYearDisabled(y);
                         return `<y-button
                     class="year-btn"
-                    style-type="${isSelected ? "filled" : "flat"}"
+                    variant="${isSelected ? "filled" : "flat"}"
                     color="${isSelected ? this.color : "base"}"
                     size="small"
                     padding-mode="square"
@@ -5940,7 +5988,7 @@ class YumePaginator extends HTMLElement {
         const attrs = {
             class: `button${isCurrent ? " active" : ""}`,
             part: parts.join(" "),
-            "style-type": isCurrent ? "filled" : "flat",
+            "variant": isCurrent ? "filled" : "flat",
             color: isCurrent ? "primary" : "base",
             size: this.size,
             // Number buttons stay square/circular even in themes (e.g. Material)
@@ -6013,7 +6061,7 @@ class YumePaginator extends HTMLElement {
         const attrs = {
             class: `nav nav-${direction}`,
             part: `${partName}${isDisabled ? " button--disabled" : ""}`,
-            "style-type": "flat",
+            "variant": "flat",
             color: "base",
             size: this.size,
             "aria-label": cfg.ariaLabel,
@@ -10797,13 +10845,13 @@ class YumeDataGrid extends HTMLElement {
 
         const actions = createElement("div", { class: "filter-actions" });
         const clearBtn = createElement("y-button", {
-            "style-type": "flat",
+            "variant": "flat",
             size: "small",
             type: "button",
         });
         clearBtn.textContent = "Clear";
         const applyBtn = createElement("y-button", {
-            "style-type": "filled",
+            "variant": "filled",
             color: "primary",
             size: "small",
             type: "button",

package/dist/components/y-date.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")) {
@@ -1330,7 +1359,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"). */
@@ -1398,6 +1430,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(
@@ -2588,7 +2627,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;
 
@@ -3068,7 +3107,10 @@ class YumeDatepicker extends HTMLElement {
         root.querySelectorAll(".month-btn").forEach((btn) => {
             btn.addEventListener("click", () => {
                 const vd = this._viewDateForSide(btn.dataset.side);
-                this._selectMonth(vd.getFullYear(), parseInt(btn.dataset.month));
+                this._selectMonth(
+                    vd.getFullYear(),
+                    parseInt(btn.dataset.month),
+                );
             });
         });
 
@@ -3144,20 +3186,20 @@ class YumeDatepicker extends HTMLElement {
             const isSelected = this._sameDay(date, this._startDate);
             const inRange = this._inRange(date);
 
-            let styleType = "flat";
+            let variant = "flat";
             let color = "base";
 
             if (isEdge || isSelected) {
-                styleType = "filled";
+                variant = "filled";
                 color = this.color;
             } else if (inRange) {
-                styleType = "flat";
+                variant = "flat";
                 color = this.color;
             }
 
             return `<y-button
                 class="day-btn"
-                style-type="${styleType}"
+                variant="${variant}"
                 color="${color}"
                 size="medium"
                 padding-mode="square"
@@ -3211,16 +3253,16 @@ class YumeDatepicker extends HTMLElement {
         return `
             <div class="cal-header">
                 <div class="nav-start">
-                    ${showPrev ? `<y-button class="nav-btn" data-action="prev-year" padding-mode="square" data-side="${side}" style-type="flat" size="small" aria-label="Previous year"><y-icon name="expand-left" size="small"></y-icon></y-button>` : ""}
-                    ${showPrev ? `<y-button class="nav-btn" data-action="prev-month" padding-mode="square"data-side="${side}" style-type="flat" size="small" aria-label="Previous month"><y-icon name="chevron-left" size="small"></y-icon></y-button>` : ""}
+                    ${showPrev ? `<y-button class="nav-btn" data-action="prev-year" padding-mode="square" data-side="${side}" variant="flat" size="small" aria-label="Previous year"><y-icon name="expand-left" size="small"></y-icon></y-button>` : ""}
+                    ${showPrev ? `<y-button class="nav-btn" data-action="prev-month" padding-mode="square" data-side="${side}" variant="flat" size="small" aria-label="Previous month"><y-icon name="chevron-left" size="small"></y-icon></y-button>` : ""}
                 </div>
                 <div class="header-selects">
                     ${this.showMonths ? `<y-select class="month-sel" data-side="${side}" size="small" value="${month}" options='${monthOptions}'></y-select>` : ""}
                     ${this.showYears ? `<y-select class="year-sel" data-side="${side}" size="small" value="${year}" options='${yearOptions}'></y-select>` : ""}
                 </div>
                 <div class="nav-end">
-                    ${showNext ? `<y-button class="nav-btn" data-action="next-month" padding-mode="square" data-side="${side}" style-type="flat" size="small" aria-label="Next month"><y-icon name="chevron-right" size="small"></y-icon></y-button>` : ""}
-                    ${showNext ? `<y-button class="nav-btn" data-action="next-year" padding-mode="square" data-side="${side}" style-type="flat" size="small" aria-label="Next year"><y-icon name="expand-right" size="small"></y-icon></y-button>` : ""}
+                    ${showNext ? `<y-button class="nav-btn" data-action="next-month" padding-mode="square" data-side="${side}" variant="flat" size="small" aria-label="Next month"><y-icon name="chevron-right" size="small"></y-icon></y-button>` : ""}
+                    ${showNext ? `<y-button class="nav-btn" data-action="next-year" padding-mode="square" data-side="${side}" variant="flat" size="small" aria-label="Next year"><y-icon name="expand-right" size="small"></y-icon></y-button>` : ""}
                 </div>
             </div>
         `;
@@ -3238,7 +3280,7 @@ class YumeDatepicker extends HTMLElement {
                         this._startDate.getMonth() === i;
                     return `<y-button
                         class="month-btn"
-                        style-type="${isSelected ? "filled" : "flat"}"
+                        variant="${isSelected ? "filled" : "flat"}"
                         color="${isSelected ? this.color : "base"}"
                         size="small"
                         padding-mode="square"
@@ -3485,7 +3527,7 @@ class YumeDatepicker extends HTMLElement {
             const sel = time.h === h;
             return `<y-button
                 class="time-btn${sel ? " selected" : ""}"
-                style-type="${sel ? "filled" : "flat"}"
+                variant="${sel ? "filled" : "flat"}"
                 color="${sel ? this.color : "base"}"
                 size="small"
                 data-hour="${h}"
@@ -3511,7 +3553,7 @@ class YumeDatepicker extends HTMLElement {
                                 m;
                             return `<y-button
                             class="time-btn${sel ? " selected" : ""}"
-                            style-type="${sel ? "filled" : "flat"}"
+                            variant="${sel ? "filled" : "flat"}"
                             color="${sel ? this.color : "base"}"
                             size="small"
                             data-minute="${m}"
@@ -3539,7 +3581,7 @@ class YumeDatepicker extends HTMLElement {
                                 s;
                             return `<y-button
                             class="time-btn${sel ? " selected" : ""}"
-                            style-type="${sel ? "filled" : "flat"}"
+                            variant="${sel ? "filled" : "flat"}"
                             color="${sel ? this.color : "base"}"
                             size="small"
                             data-second="${s}"
@@ -3587,7 +3629,7 @@ class YumeDatepicker extends HTMLElement {
                         const disabled = this._isYearDisabled(y);
                         return `<y-button
                     class="year-btn"
-                    style-type="${isSelected ? "filled" : "flat"}"
+                    variant="${isSelected ? "filled" : "flat"}"
                     color="${isSelected ? this.color : "base"}"
                     size="small"
                     padding-mode="square"