@waggylabs/yumekit 0.5.1 → 0.5.3

package/dist/index.js

@@ -2001,6 +2001,7 @@ class YumeButton extends HTMLElement {
             "right-icon",
             "color",
             "size",
+            "variant",
             "style-type",
             "type",
             "padding-mode",
@@ -2053,9 +2054,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();
         }
     }
@@ -2137,9 +2142,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);
@@ -2182,6 +2190,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
     // -------------------------------------------------------------------------
@@ -2236,7 +2256,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)`;
@@ -2292,7 +2312,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),
         );
 
@@ -2338,11 +2358,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);
         }
     }
 
@@ -2467,7 +2487,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))`,
         );
@@ -2497,7 +2517,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);
@@ -2785,11 +2805,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;
         }
 
@@ -2818,14 +2838,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")) {
@@ -4143,7 +4172,7 @@ class YumeAppbar extends HTMLElement {
             {
                 id,
                 color: "base",
-                "style-type": "flat",
+                "variant": "flat",
                 size: cfg.buttonSize,
                 "aria-label": "Open menu",
                 "aria-controls": panelId,
@@ -4295,7 +4324,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,
         });
@@ -5133,7 +5162,7 @@ class YumeSidebar extends HTMLElement {
             {
                 class: "collapse-btn",
                 color: "base",
-                "style-type": "flat",
+                "variant": "flat",
                 size: cfg.buttonSize,
                 "aria-label": isCollapsed
                     ? "Expand sidebar"
@@ -5181,7 +5210,7 @@ class YumeSidebar 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,
         });
@@ -5648,7 +5677,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 })],
@@ -7163,8 +7192,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();
@@ -8864,7 +8899,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));
@@ -8914,13 +8950,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;
@@ -9604,7 +9646,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"). */
@@ -9672,6 +9717,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(
@@ -10862,7 +10914,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;
 
@@ -12988,7 +13040,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),
+                );
             });
         });
 
@@ -13064,20 +13119,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"
@@ -13131,16 +13186,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>
         `;
@@ -13158,7 +13213,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"
@@ -13405,7 +13460,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}"
@@ -13431,7 +13486,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}"
@@ -13459,7 +13514,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}"
@@ -13507,7 +13562,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"
@@ -15601,7 +15656,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)
@@ -15674,7 +15729,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,
@@ -20458,13 +20513,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",
@@ -22860,7 +22915,7 @@ class YumeDialog extends HTMLElement {
     _buildCloseButton() {
         const btn = document.createElement("y-button");
         btn.setAttribute("size", "small");
-        btn.setAttribute("style-type", "flat");
+        btn.setAttribute("variant", "flat");
         btn.setAttribute("aria-label", "Close");
         btn.textContent = "\u2715";
         btn.addEventListener("click", () => { this.visible = false; });
@@ -26893,7 +26948,7 @@ class YumeHelp extends HTMLElement {
             {
                 class: "y-help-tooltip-close",
                 part: "close-button",
-                "style-type": "flat",
+                "variant": "flat",
                 size: "small",
                 "aria-label": this.closeLabel,
             },
@@ -26930,7 +26985,7 @@ class YumeHelp extends HTMLElement {
             {
                 class: "y-help-tooltip-btn",
                 part: "prev-button",
-                "style-type": "outlined",
+                "variant": "outlined",
                 size: "small",
                 "aria-label": this.prevLabel,
             },
@@ -26942,7 +26997,7 @@ class YumeHelp extends HTMLElement {
             {
                 class: "y-help-tooltip-btn",
                 part: "next-button",
-                "style-type": "filled",
+                "variant": "filled",
                 color: "primary",
                 size: "small",
                 "aria-label": this.nextLabel,
@@ -28752,7 +28807,10 @@ class YumeTextarea extends HTMLElement {
             : "default";
     }
     set variant(val) {
-        this.setAttribute("variant", val === "underline" ? "underline" : "default");
+        this.setAttribute(
+            "variant",
+            val === "underline" ? "underline" : "default",
+        );
     }
 
     /** @type {string} The current textarea value. */
@@ -28809,6 +28867,13 @@ class YumeTextarea extends HTMLElement {
     // -------------------------------------------------------------------------
 
     _bindTextareaListeners() {
+        this.inputContainer.addEventListener("mousedown", (e) => {
+            if (e.target !== this.textarea) {
+                e.preventDefault();
+                this.textarea.focus();
+            }
+        });
+
         this.textarea.addEventListener("input", (e) => {
             this.setAttribute("value", e.target.value);
             this._internals.setFormValue(
@@ -34374,7 +34439,7 @@ if (!customElements.get("y-table")) {
 
 class YumeTag extends HTMLElement {
     static get observedAttributes() {
-        return ["removable", "color", "style-type", "shape", "size"];
+        return ["removable", "color", "variant", "style-type", "shape", "size"];
     }
 
     // -------------------------------------------------------------------------
@@ -34392,6 +34457,10 @@ class YumeTag extends HTMLElement {
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "style-type" && newValue !== null) {
+            this._warnStyleTypeDeprecated();
+        }
+
         if (oldValue !== newValue) this.render();
     }
 
@@ -34432,14 +34501,29 @@ class YumeTag extends HTMLElement {
         this.setAttribute("size", val);
     }
 
-    /** Visual style: "filled" | "outlined" | "flat" (default "filled"). */
+    /**
+     * 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") || "filled";
+        return this.variant;
     }
     set styleType(val) {
         this.setAttribute("style-type", val);
     }
 
+    /** Visual style: "filled" (default) | "outlined" | "flat". */
+    get variant() {
+        return (
+            this.getAttribute("variant") ||
+            this.getAttribute("style-type") ||
+            "filled"
+        );
+    }
+    set variant(val) {
+        this.setAttribute("variant", val);
+    }
+
     // -------------------------------------------------------------------------
     // Public
     // -------------------------------------------------------------------------
@@ -34474,7 +34558,7 @@ class YumeTag extends HTMLElement {
             });
     }
 
-    _getCustomColorVariant(color, styleType) {
+    _getCustomColorVariant(color, variant) {
         const textColor = contrastTextColor(color);
         const variants = {
             filled: `
@@ -34490,11 +34574,11 @@ class YumeTag extends HTMLElement {
                 .remove { color: ${color}; }
             `,
         };
-        return variants[styleType] || variants.filled;
+        return variants[variant] || variants.filled;
     }
 
     _getStyle() {
-        const { color, styleType, shape, size } = this;
+        const { color, variant, shape, size } = this;
 
         const vars = {
             primary: [
@@ -34596,7 +34680,7 @@ class YumeTag extends HTMLElement {
         `;
 
         if (isCustomColor)
-            return baseStyle + this._getCustomColorVariant(color, styleType);
+            return baseStyle + this._getCustomColorVariant(color, variant);
 
         const [content, inverse, flatBackground] = varEntry || vars.base;
 
@@ -34615,7 +34699,16 @@ class YumeTag extends HTMLElement {
             `,
         };
 
-        return baseStyle + (styleVariants[styleType] || styleVariants.filled);
+        return baseStyle + (styleVariants[variant] || styleVariants.filled);
+    }
+
+    _warnStyleTypeDeprecated() {
+        if (YumeTag._styleTypeDeprecationWarned) return;
+
+        YumeTag._styleTypeDeprecationWarned = true;
+        console.warn(
+            'y-tag: the "style-type" attribute is deprecated and will be removed in a future major version. Use "variant" instead.',
+        );
     }
 }
 
@@ -34625,7 +34718,7 @@ if (!customElements.get("y-tag")) {
 
 class YumeTabs extends HTMLElement {
     static get observedAttributes() {
-        return ["options", "size", "position", "variant"];
+        return ["options", "size", "position", "variant", "overflow"];
     }
 
     // -------------------------------------------------------------------------
@@ -34637,15 +34730,23 @@ class YumeTabs extends HTMLElement {
         this.attachShadow({ mode: "open" });
         this._activeTab = "";
         this._warnedSlots = new Set();
+        this._resizeObserver = null;
+        this._onTablistScroll = this._onTablistScroll.bind(this);
     }
 
     connectedCallback() {
         if (!this.hasAttribute("size")) this.setAttribute("size", "medium");
         if (!this.hasAttribute("position"))
             this.setAttribute("position", "top");
+        if (!this.hasAttribute("overflow"))
+            this.setAttribute("overflow", "scroll");
         this.render();
     }
 
+    disconnectedCallback() {
+        this._teardownScroll();
+    }
+
     attributeChangedCallback(name, oldVal, newVal) {
         if (oldVal === newVal) return;
         if (name === "options") this._warnedSlots.clear();
@@ -34671,6 +34772,19 @@ class YumeTabs extends HTMLElement {
         this.render();
     }
 
+    /**
+     * @type {"scroll"|"wrap"} How a tab strip wider (or taller) than its
+     * container behaves. `"scroll"` keeps tabs on a single line and reveals
+     * prev/next arrow buttons when the strip overflows; `"wrap"` lets tabs flow
+     * onto multiple rows (or columns, for left/right positions).
+     */
+    get overflow() {
+        return this.getAttribute("overflow") === "wrap" ? "wrap" : "scroll";
+    }
+    set overflow(val) {
+        this.setAttribute("overflow", val === "wrap" ? "wrap" : "scroll");
+    }
+
     /** @type {"top"|"bottom"|"left"|"right"} Which edge the tab strip is placed on. */
     get position() {
         const pos = this.getAttribute("position");
@@ -34729,6 +34843,7 @@ class YumeTabs extends HTMLElement {
 
         const activeDef = tabs.find((t) => t.id === this._activeTab);
 
+        this._teardownScroll();
         this.shadowRoot.innerHTML = "";
 
         const style = document.createElement("style");
@@ -34741,11 +34856,12 @@ class YumeTabs extends HTMLElement {
             part: "tablist",
         });
         tabs.forEach((tab) => tablist.appendChild(this._createTabButton(tab)));
-        this.shadowRoot.appendChild(tablist);
 
+        this.shadowRoot.appendChild(this._buildTabStrip(tablist));
         this.shadowRoot.appendChild(this._createPanel(activeDef?.slot || ""));
 
         this._setupEvents();
+        this._setupScroll();
     }
 
     // -------------------------------------------------------------------------
@@ -34770,6 +34886,47 @@ class YumeTabs extends HTMLElement {
         parent.appendChild(createElement("slot", { name: slotName, class: "icon-slot" }));
     }
 
+    _buildScrollButton(direction) {
+        const vertical = this.position === "left" || this.position === "right";
+        const icon =
+            direction === "prev"
+                ? vertical
+                    ? "chevron-up"
+                    : "chevron-left"
+                : vertical
+                  ? "chevron-down"
+                  : "chevron-right";
+        const btn = createElement(
+            "button",
+            {
+                type: "button",
+                class: `scroll-btn scroll-${direction}`,
+                part: `scroll-button scroll-${direction}`,
+                "aria-label":
+                    direction === "prev"
+                        ? "Scroll tabs backward"
+                        : "Scroll tabs forward",
+                tabindex: "-1",
+                hidden: "",
+            },
+            [createElement("y-icon", { name: icon, size: this.size, "aria-hidden": "true" })],
+        );
+        btn.addEventListener("click", () => this._scrollTabs(direction));
+        return btn;
+    }
+
+    _buildTabStrip(tablist) {
+        const strip = createElement("div", { class: "tabstrip", part: "tabstrip" });
+        if (this.overflow === "scroll") {
+            strip.appendChild(this._buildScrollButton("prev"));
+            strip.appendChild(tablist);
+            strip.appendChild(this._buildScrollButton("next"));
+        } else {
+            strip.appendChild(tablist);
+        }
+        return strip;
+    }
+
     _createIcon(name) {
         return createElement("y-icon", { name, size: this.size });
     }
@@ -34850,16 +35007,63 @@ class YumeTabs extends HTMLElement {
             :host([position="left"]) { flex-direction: row; }
             :host([position="right"]) { flex-direction: row-reverse; }
 
+            .tabstrip {
+                display: flex;
+                position: relative;
+                z-index: 1;
+                min-width: 0;
+                min-height: 0;
+            }
+            :host([position="left"])  .tabstrip,
+            :host([position="right"]) .tabstrip { flex-direction: column; }
+            :host([position="top"])    .tabstrip { margin-bottom: -1px; }
+            :host([position="bottom"]) .tabstrip { margin-top: -1px; }
+            :host([position="left"])   .tabstrip { margin-right: -1px; }
+            :host([position="right"])  .tabstrip { margin-left: -1px; }
+
             .tablist {
                 display: flex;
                 gap: 0;
                 position: relative;
-                z-index: 1;
+                min-width: 0;
+                min-height: 0;
+            }
+            :host([position="left"])  .tablist,
+            :host([position="right"]) .tablist { flex-direction: column; }
+
+            /* Scroll mode: tabs stay on one line; arrow buttons drive scrolling,
+               so the native scrollbar is hidden. */
+            :host([overflow="scroll"]) .tablist {
+                flex: 1 1 auto;
+                overflow: auto;
+                scrollbar-width: none;
+                -ms-overflow-style: none;
+            }
+            :host([overflow="scroll"]) .tablist::-webkit-scrollbar { display: none; }
+
+            /* Wrap mode: tabs flow onto multiple rows (or columns). */
+            :host([overflow="wrap"]) .tablist { flex-wrap: wrap; }
+
+            .scroll-btn {
+                flex: 0 0 auto;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0 4px;
+                background: var(--component-tabs-inactive-background, var(--component-tabs-border-color));
+                color: var(--component-tabs-color);
+                border: 1px solid var(--component-tabs-border-color);
+                border-width: var(--component-tabs-border-width, var(--component-tab-border-width, 1px));
+                cursor: pointer;
+                font-family: inherit;
             }
-            :host([position="top"])    .tablist { margin-bottom: -1px; margin-top: 0; }
-            :host([position="bottom"]) .tablist { margin-top: -1px; margin-bottom: 0; }
-            :host([position="left"])   .tablist { flex-direction: column; margin-right: -1px; margin-left: 0; }
-            :host([position="right"])  .tablist { flex-direction: column; margin-left: -1px; margin-right: 0; }
+            .scroll-btn[hidden] { display: none; }
+            .scroll-btn:hover { background: var(--component-tabs-background); }
+            .scroll-btn:focus-visible {
+                outline: 2px solid var(--component-tabs-accent);
+                outline-offset: -1px;
+            }
+            :host([variant="accent"]) .scroll-btn { background: transparent; border: none; }
 
             :host([position="top"])    .tablist button { border-bottom: none; }
             :host([position="bottom"]) .tablist button { border-top: none; }
@@ -34975,6 +35179,10 @@ class YumeTabs extends HTMLElement {
         }
     }
 
+    _onTablistScroll() {
+        this._updateScrollButtons();
+    }
+
     _resolveActiveTab(tabs) {
         const currentInvalid =
             !this._activeTab ||
@@ -34984,8 +35192,26 @@ class YumeTabs extends HTMLElement {
         }
     }
 
+    _scrollTabs(direction) {
+        const tablist = this.shadowRoot.querySelector(".tablist");
+        if (!tablist) return;
+
+        const vertical = this.position === "left" || this.position === "right";
+        const amount =
+            (vertical ? tablist.clientHeight : tablist.clientWidth) * 0.75;
+        const delta = direction === "prev" ? -amount : amount;
+
+        tablist.scrollBy(
+            vertical
+                ? { top: delta, behavior: "smooth" }
+                : { left: delta, behavior: "smooth" },
+        );
+    }
+
     _setupEvents() {
-        const buttons = Array.from(this.shadowRoot.querySelectorAll("button"));
+        const buttons = Array.from(
+            this.shadowRoot.querySelectorAll(".tablist button"),
+        );
         buttons.forEach((button) => {
             if (button.disabled) return;
             button.addEventListener("click", () =>
@@ -34996,6 +35222,58 @@ class YumeTabs extends HTMLElement {
             );
         });
     }
+
+    _setupScroll() {
+        if (this.overflow !== "scroll") return;
+
+        const tablist = this.shadowRoot.querySelector(".tablist");
+        if (!tablist) return;
+
+        tablist.addEventListener("scroll", this._onTablistScroll, {
+            passive: true,
+        });
+        if (typeof ResizeObserver !== "undefined") {
+            this._resizeObserver = new ResizeObserver(() =>
+                this._updateScrollButtons(),
+            );
+            this._resizeObserver.observe(tablist);
+            this._resizeObserver.observe(this);
+        }
+
+        this._updateScrollButtons();
+    }
+
+    _teardownScroll() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        const tablist = this.shadowRoot?.querySelector(".tablist");
+        tablist?.removeEventListener("scroll", this._onTablistScroll);
+    }
+
+    _updateScrollButtons() {
+        const tablist = this.shadowRoot.querySelector(".tablist");
+        const prev = this.shadowRoot.querySelector(".scroll-prev");
+        const next = this.shadowRoot.querySelector(".scroll-next");
+        if (!tablist || !prev || !next) return;
+
+        const vertical = this.position === "left" || this.position === "right";
+        const scrollSize = vertical
+            ? tablist.scrollHeight
+            : tablist.scrollWidth;
+        const clientSize = vertical
+            ? tablist.clientHeight
+            : tablist.clientWidth;
+        const scrollPos = vertical ? tablist.scrollTop : tablist.scrollLeft;
+
+        if (scrollSize - clientSize <= 1) {
+            prev.hidden = true;
+            next.hidden = true;
+            return;
+        }
+
+        prev.hidden = scrollPos <= 1;
+        next.hidden = scrollPos >= scrollSize - clientSize - 1;
+    }
 }
 
 if (!customElements.get("y-tabs")) {