@waggylabs/yumekit 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -31,6 +31,16 @@ Delete any empty sections before publishing.
 <!-- ### Security -->
 <!-- Vulnerability patches or hardening changes -->
 
+## [0.5.2] - 2026-06-27
+
+### Added
+
+- `y-tabs` gains an `overflow` attribute: `scroll` (default) keeps tabs on a single line and shows prev/next arrow buttons when the strip overflows its container, while `wrap` lets tabs flow onto multiple rows.
+
+### Changed
+
+- `y-code` now scrolls its content within a height-constrained container — set a CSS `height` or `max-height` and the code area scrolls, where previously vertical scrolling only kicked in with `max-lines`.
+
 ## [0.5.1] - 2026-06-20
 
 ### Added

package/README.md

@@ -73,68 +73,59 @@ Then use the `<y-theme>` component to apply a theme:
 
 ## Components
 
-| Component     | Element            | Description                                              |
-| ------------- | ------------------ | ------------------------------------------------------- |
-| Animate       | `<y-animate>`      | Scroll/viewport-triggered animation wrapper             |
-| App Bar       | `<y-appbar>`       | Top or side navigation bar                              |
-| Avatar        | `<y-avatar>`       | User avatar with shape and color variants               |
-| Avatar Group  | `<y-avatar-group>` | Overlapping avatar group with overflow count            |
-| Badge         | `<y-badge>`        | Status badge or label                                   |
-| Banner        | `<y-banner>`       | Full-width inline message / alert banner                |
-| Break         | `<y-break>`        | Divider with optional centered label, icon, or slot     |
-| Breadcrumbs   | `<y-breadcrumbs>`  | Navigation breadcrumb trail with collapse support       |
-| Button        | `<y-button>`       | Button with icon, size, and style variants              |
-| Button Group  | `<y-button-group>` | Groups buttons (or inputs) into a connected toolbar     |
-| Card          | `<y-card>`         | Content card container                                  |
-| Checkbox      | `<y-checkbox>`     | Form checkbox input                                     |
-| Code          | `<y-code>`         | Code block with built-in syntax highlighting            |
-| Color         | `<y-color>`        | Color swatch / value display                            |
-| Color Picker  | `<y-colorpicker>`  | Interactive color picker                                |
-| Data Grid     | `<y-data-grid>`    | Data grid with sorting, filtering, editing, pagination  |
-| Date          | `<y-date>`         | Date input                                              |
-| DatePicker    | `<y-datepicker>`   | A date and time picker                                  |
-| Dialog        | `<y-dialog>`       | Modal dialog                                            |
-| Dock          | `<y-dock>`         | Fixed navigation dock                                   |
-| Drawer        | `<y-drawer>`       | Side drawer / sidebar                                   |
-| Droplist      | `<y-droplist>`     | Drag-and-drop reorderable list                          |
-| Gallery       | `<y-gallery>`      | Media gallery with lightbox                             |
-| Grid          | `<y-grid>`         | CSS Grid layout container                               |
-| Help          | `<y-help>`         | Guided product tour / onboarding walkthrough            |
-| Icon          | `<y-icon>`         | SVG icon display                                        |
-| Input         | `<y-input>`        | Text input field                                        |
-| Masonry       | `<y-masonry>`      | JS-positioned masonry layout                            |
-| Menu          | `<y-menu>`         | Dropdown navigation menu                                |
-| Paginator     | `<y-paginator>`    | Pagination controls                                     |
-| Panel Bar     | `<y-panelbar>`     | Accordion panel group                                   |
-| Popover       | `<y-popover>`      | Anchored floating popover                               |
-| Progress      | `<y-progress>`     | Progress bar                                            |
-| Radio         | `<y-radio>`        | Radio button input                                      |
-| Rating        | `<y-rating>`       | Star / icon rating input                                |
-| Select        | `<y-select>`       | Select / dropdown input                                 |
-| Shape         | `<y-shape>`        | Decorative CSS shape container                          |
-| Sidebar       | `<y-sidebar>`      | Collapsible app sidebar navigation                      |
-| Slider        | `<y-slider>`       | Range slider input                                      |
-| Splitter      | `<y-splitter>`     | Two-pane container with a draggable resize handle       |
-| Stack         | `<y-stack>`        | Flexbox layout container (row or column)                |
-| Stepper       | `<y-stepper>`      | Multi-step wizard with sequential flow                  |
-| Switch        | `<y-switch>`       | Toggle switch                                           |
-| Table         | `<y-table>`        | Sortable data table                                     |
-| Tabs          | `<y-tabs>`         | Tabbed interface                                        |
-| Tag           | `<y-tag>`          | Tag / chip label                                        |
-| Textarea      | `<y-textarea>`     | Multi-line text input                                   |
-| Theme         | `<y-theme>`        | Theme provider                                          |
-| Toast         | `<y-toast>`        | Notification toast                                      |
-| Tooltip       | `<y-tooltip>`      | Tooltip / popover                                       |
-| Tree          | `<y-tree>`         | Hierarchical tree view                                  |
-
-### Sub-elements
-
-These are building blocks used inside their parent component, not standalone components (and not included in the count above):
-
-| Element         | Used inside    | Description                       |
-| --------------- | -------------- | -------------------------------- |
-| `<y-panel>`     | `<y-panelbar>` | Individual accordion panel       |
-| `<y-tree-item>` | `<y-tree>`     | Individual node within a tree    |
+| Component    | Element            | Description                                            |
+| ------------ | ------------------ | ------------------------------------------------------ |
+| Animate      | `<y-animate>`      | Scroll/viewport-triggered animation wrapper            |
+| App Bar      | `<y-appbar>`       | Top or side navigation bar                             |
+| Avatar       | `<y-avatar>`       | User avatar with shape and color variants              |
+| Avatar Group | `<y-avatar-group>` | Overlapping avatar group with overflow count           |
+| Badge        | `<y-badge>`        | Status badge or label                                  |
+| Banner       | `<y-banner>`       | Full-width inline message / alert banner               |
+| Break        | `<y-break>`        | Divider with optional centered label, icon, or slot    |
+| Breadcrumbs  | `<y-breadcrumbs>`  | Navigation breadcrumb trail with collapse support      |
+| Button       | `<y-button>`       | Button with icon, size, and style variants             |
+| Button Group | `<y-button-group>` | Groups buttons (or inputs) into a connected toolbar    |
+| Card         | `<y-card>`         | Content card container                                 |
+| Checkbox     | `<y-checkbox>`     | Form checkbox input                                    |
+| Code         | `<y-code>`         | Code block with built-in syntax highlighting           |
+| Color        | `<y-color>`        | Color swatch / value display                           |
+| Color Picker | `<y-colorpicker>`  | Interactive color picker                               |
+| Data Grid    | `<y-data-grid>`    | Data grid with sorting, filtering, editing, pagination |
+| Date         | `<y-date>`         | Date input                                             |
+| DatePicker   | `<y-datepicker>`   | A date and time picker                                 |
+| Dialog       | `<y-dialog>`       | Modal dialog                                           |
+| Dock         | `<y-dock>`         | Fixed navigation dock                                  |
+| Drawer       | `<y-drawer>`       | Side drawer / sidebar                                  |
+| Droplist     | `<y-droplist>`     | Drag-and-drop reorderable list                         |
+| Gallery      | `<y-gallery>`      | Media gallery with lightbox                            |
+| Grid         | `<y-grid>`         | CSS Grid layout container                              |
+| Help         | `<y-help>`         | Guided product tour / onboarding walkthrough           |
+| Icon         | `<y-icon>`         | SVG icon display                                       |
+| Input        | `<y-input>`        | Text input field                                       |
+| Masonry      | `<y-masonry>`      | JS-positioned masonry layout                           |
+| Menu         | `<y-menu>`         | Dropdown navigation menu                               |
+| Paginator    | `<y-paginator>`    | Pagination controls                                    |
+| Panel Bar    | `<y-panelbar>`     | Accordion panel group                                  |
+| Popover      | `<y-popover>`      | Anchored floating popover                              |
+| Progress     | `<y-progress>`     | Progress bar                                           |
+| Radio        | `<y-radio>`        | Radio button input                                     |
+| Rating       | `<y-rating>`       | Star / icon rating input                               |
+| Select       | `<y-select>`       | Select / dropdown input                                |
+| Shape        | `<y-shape>`        | Decorative CSS shape container                         |
+| Sidebar      | `<y-sidebar>`      | Collapsible app sidebar navigation                     |
+| Slider       | `<y-slider>`       | Range slider input                                     |
+| Splitter     | `<y-splitter>`     | Two-pane container with a draggable resize handle      |
+| Stack        | `<y-stack>`        | Flexbox layout container (row or column)               |
+| Stepper      | `<y-stepper>`      | Multi-step wizard with sequential flow                 |
+| Switch       | `<y-switch>`       | Toggle switch                                          |
+| Table        | `<y-table>`        | Sortable data table                                    |
+| Tabs         | `<y-tabs>`         | Tabbed interface                                       |
+| Tag          | `<y-tag>`          | Tag / chip label                                       |
+| Textarea     | `<y-textarea>`     | Multi-line text input                                  |
+| Theme        | `<y-theme>`        | Theme provider                                         |
+| Toast        | `<y-toast>`        | Notification toast                                     |
+| Tooltip      | `<y-tooltip>`      | Tooltip / popover                                      |
+| Tree         | `<y-tree>`         | Hierarchical tree view                                 |
 
 ---
 

package/dist/ai/llm.txt

@@ -3,7 +3,7 @@
 A modern, framework-agnostic Web Components UI kit providing 51 production-ready custom HTML elements. Built entirely on native web standards with zero external runtime dependencies.
 
 ## Version
-0.5.1
+0.5.2
 
 ## License
 MIT
@@ -1657,6 +1657,7 @@ Attributes:
 - `position` — `"top"` (default) | `"bottom"` | `"left"` | `"right"`
 - `size` — `"small"` | `"medium"` | `"large"`
 - `variant` — `"default"` (default, bordered boxes) | `"accent"` (minimal tabs; the active tab shows a primary-colored indicator border on its content-facing edge — bottom for `top` tabs, top for `bottom`, etc. — like Material/Carbon)
+- `overflow` — `"scroll"` (default; tabs stay on one line and prev/next arrow buttons appear when the strip overflows its container) | `"wrap"` (tabs flow onto multiple rows, or columns for `left`/`right` positions)
 
 Methods: `activateTab(id)`
 

package/dist/ai/skill/reference.md

@@ -1363,6 +1363,7 @@ Methods: `.show(opts)` — **single options object**: `{ message, color, duratio
 | `position` | `top` (default) \| `bottom` \| `left` \| `right` |
 | `size`     | `small` \| `medium` \| `large`                   |
 | `variant`  | `default` (bordered boxes) \| `accent` (minimal tabs; active tab shows a primary indicator border on its content-facing edge, like Material/Carbon) |
+| `overflow` | `scroll` (default; one line + prev/next arrows when the strip overflows) \| `wrap` (tabs flow onto multiple rows/columns) |
 
 Options object shape: `{"id":"tab1","label":"Tab 1","slot":"tab1","disabled":false,"leftIcon":"home","rightIcon":"arrow-right"}` — `id`, `label`, and `slot` are required; `disabled`, `leftIcon`, `rightIcon` are optional.
 

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-tabs/y-tabs.d.ts

@@ -2,11 +2,22 @@ export class YumeTabs extends HTMLElement {
     static get observedAttributes(): string[];
     _activeTab: string;
     _warnedSlots: Set<any>;
+    _resizeObserver: ResizeObserver;
+    _onTablistScroll(): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
     set options(val: Array<any>);
     /** @type {Array<Object>} Tab definitions. Each object: `{ id, label, slot, disabled?, leftIcon?, rightIcon? }`. `leftIcon`/`rightIcon` are `y-icon` names rendered inside the tab button. Use the `tab-content-{id}` slot to supply fully custom tab button content instead. */
     get options(): Array<any>;
+    set overflow(val: "scroll" | "wrap");
+    /**
+     * @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(): "scroll" | "wrap";
     set position(val: "top" | "bottom" | "left" | "right");
     /** @type {"top"|"bottom"|"left"|"right"} Which edge the tab strip is placed on. */
     get position(): "top" | "bottom" | "left" | "right";
@@ -27,6 +38,8 @@ export class YumeTabs extends HTMLElement {
     activateTab(id: string): void;
     render(): void;
     _appendDeprecatedIconSlot(parent: any, side: any, tabId: any): void;
+    _buildScrollButton(direction: any): HTMLElement;
+    _buildTabStrip(tablist: any): HTMLElement;
     _createIcon(name: any): HTMLElement;
     _createPanel(slotName: any): HTMLElement;
     _createTabButton(tab: any): HTMLElement;
@@ -34,5 +47,9 @@ export class YumeTabs extends HTMLElement {
     _getStyles(): string;
     _handleTabKeydown(e: any, buttons: any): void;
     _resolveActiveTab(tabs: any): void;
+    _scrollTabs(direction: any): void;
     _setupEvents(): void;
+    _setupScroll(): void;
+    _teardownScroll(): void;
+    _updateScrollButtons(): void;
 }

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

@@ -2,11 +2,22 @@ export class YumeTabs extends HTMLElement {
     static get observedAttributes(): string[];
     _activeTab: string;
     _warnedSlots: Set<any>;
+    _resizeObserver: ResizeObserver;
+    _onTablistScroll(): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
     set options(val: Array<any>);
     /** @type {Array<Object>} Tab definitions. Each object: `{ id, label, slot, disabled?, leftIcon?, rightIcon? }`. `leftIcon`/`rightIcon` are `y-icon` names rendered inside the tab button. Use the `tab-content-{id}` slot to supply fully custom tab button content instead. */
     get options(): Array<any>;
+    set overflow(val: "scroll" | "wrap");
+    /**
+     * @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(): "scroll" | "wrap";
     set position(val: "top" | "bottom" | "left" | "right");
     /** @type {"top"|"bottom"|"left"|"right"} Which edge the tab strip is placed on. */
     get position(): "top" | "bottom" | "left" | "right";
@@ -27,6 +38,8 @@ export class YumeTabs extends HTMLElement {
     activateTab(id: string): void;
     render(): void;
     _appendDeprecatedIconSlot(parent: any, side: any, tabId: any): void;
+    _buildScrollButton(direction: any): HTMLElement;
+    _buildTabStrip(tablist: any): HTMLElement;
     _createIcon(name: any): HTMLElement;
     _createPanel(slotName: any): HTMLElement;
     _createTabButton(tab: any): HTMLElement;
@@ -34,5 +47,9 @@ export class YumeTabs extends HTMLElement {
     _getStyles(): string;
     _handleTabKeydown(e: any, buttons: any): void;
     _resolveActiveTab(tabs: any): void;
+    _scrollTabs(direction: any): void;
     _setupEvents(): void;
+    _setupScroll(): void;
+    _teardownScroll(): void;
+    _updateScrollButtons(): void;
 }

package/dist/components/y-tabs.js

@@ -362,7 +362,7 @@ if (!customElements.get("y-icon")) {
 
 class YumeTabs extends HTMLElement {
     static get observedAttributes() {
-        return ["options", "size", "position", "variant"];
+        return ["options", "size", "position", "variant", "overflow"];
     }
 
     // -------------------------------------------------------------------------
@@ -374,15 +374,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();
@@ -408,6 +416,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");
@@ -466,6 +487,7 @@ class YumeTabs extends HTMLElement {
 
         const activeDef = tabs.find((t) => t.id === this._activeTab);
 
+        this._teardownScroll();
         this.shadowRoot.innerHTML = "";
 
         const style = document.createElement("style");
@@ -478,11 +500,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();
     }
 
     // -------------------------------------------------------------------------
@@ -507,6 +530,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 });
     }
@@ -587,16 +651,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;
+            }
+            .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([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; }
+            :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; }
@@ -712,6 +823,10 @@ class YumeTabs extends HTMLElement {
         }
     }
 
+    _onTablistScroll() {
+        this._updateScrollButtons();
+    }
+
     _resolveActiveTab(tabs) {
         const currentInvalid =
             !this._activeTab ||
@@ -721,8 +836,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", () =>
@@ -733,6 +866,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")) {