@riverty/web-components 6.0.0 → 6.2.0

package/dist/collection/components/stepper/stepper.js

@@ -1,17 +1,87 @@
 import { h, Host } from "@stencil/core";
+const OFFSET = 20;
 export class Stepper {
     constructor() {
         /** Complete steps. Default value 0 */
         this.completed = 0;
         /** _DEPRECATED_ (use `completed` instead) Completed steps. Default value 0 */
         this.completeSteps = 0;
+        /** Label for completed steps for screen reader users. */
+        this.completedStepsLabel = 'Completed';
+        this.handleSlotChange = () => {
+            this.setStepStatus();
+            this.updateVisibilityOfStepText();
+        };
+    }
+    handleCompletedStepsLabelChange() {
+        this.setStepStatus();
+    }
+    onResize() {
+        this.updateVisibilityOfStepText();
     }
     get hasSteps() {
         return this.host.querySelectorAll('r-stepper-item').length > 0;
     }
+    componentDidLoad() {
+        this.setStepStatus();
+        this.updateVisibilityOfStepText();
+    }
+    setStepStatus() {
+        var _a;
+        const innerSteps = ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('r-stepper-item')) || [];
+        const slotSteps = this.host.querySelectorAll('r-stepper-item') || [];
+        const allSteps = [...Array.from(innerSteps), ...Array.from(slotSteps)];
+        allSteps === null || allSteps === void 0 ? void 0 : allSteps.forEach((step) => {
+            const existingSpan = step.querySelector('.visually-hidden');
+            if (existingSpan) {
+                existingSpan.remove();
+            }
+            const span = document.createElement('span');
+            span.className = 'visually-hidden';
+            span.textContent = `${step.complete ? `${this.completedStepsLabel}.` : ''}`;
+            step.prepend(span);
+        });
+    }
+    getTextElementWidth(stepElement) {
+        var _a;
+        const textElement = (_a = stepElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-stepper-item--text');
+        if (!textElement)
+            return 0;
+        // Temporarily remove visually-hidden to get the natural width
+        const wasHidden = textElement.classList.contains('visually-hidden');
+        if (wasHidden) {
+            textElement.classList.remove('visually-hidden');
+        }
+        const width = textElement.offsetWidth;
+        // Restore the previous state
+        if (wasHidden) {
+            textElement.classList.add('visually-hidden');
+        }
+        return width;
+    }
+    updateVisibilityOfStepText() {
+        const slotSteps = this.host.querySelectorAll('r-stepper-item') || [];
+        let totalWidth = 0;
+        slotSteps.forEach((step) => {
+            totalWidth += this.getTextElementWidth(step) + OFFSET;
+        });
+        const isOverflowing = totalWidth >= this.host.offsetWidth;
+        if (isOverflowing) {
+            slotSteps.forEach((step) => {
+                var _a;
+                (_a = step.shadowRoot.querySelector('.r-stepper-item--text')) === null || _a === void 0 ? void 0 : _a.classList.add('visually-hidden');
+            });
+        }
+        else {
+            slotSteps.forEach((step) => {
+                var _a;
+                (_a = step.shadowRoot.querySelector('.r-stepper-item--text')) === null || _a === void 0 ? void 0 : _a.classList.remove('visually-hidden');
+            });
+        }
+    }
     render() {
         const completed = this.completed || this.completeSteps;
-        return (h(Host, { key: '196ddb8922499f7222418d19cd6ddc994c211119' }, h("div", { key: '2220fcb8ec2125a15db198ec7948780d8d331e50', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '69c7eb87d53b67b19efc6da0ab489debc7e6b06c' }))));
+        return (h(Host, { key: '9a8684fe78d610b90c824a8bd06371efc222b94a' }, h("ol", { key: '89c37db27cab79946f29e5302784f3a17c853cef', class: "r-stepper", "aria-label": this.label || null }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '92d043648fb9c12ca5222a569ec40a917798af5a', onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "r-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -85,8 +155,62 @@ export class Stepper {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the stepper for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "completedStepsLabel": {
+                "type": "string",
+                "attribute": "completed-steps-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for completed steps for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'Completed'"
             }
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "completedStepsLabel",
+                "methodName": "handleCompletedStepsLabelChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

package/dist/collection/components/stepper-item/stepper-item.css

@@ -12,22 +12,35 @@
   --r-stepper-item--indicator--border-color: transparent;
 }
 
+::slotted(.visually-hidden),
+[data-visually-hidden-only=true],
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 .r-stepper-item {
   display: var(--r-stepper-item--display, flex);
   flex-direction: var(--r-stepper-item--flex-direction, column);
   align-items: var(--r-stepper-item--align-items, center);
   justify-content: var(--r-stepper-item--justify-content, center);
-  font-size: var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));
-  color: var(--r-stepper-item--color, var(--r-text-soft, #686868));
+  font-size: var(--r-stepper-item--font-size, var(--r-font-size-200, 0.8125rem));
+  color: var(--r-stepper-item--color, var(--r-text-regular, #282828));
   font-family: var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));
-  width: var(--r-stepper-item--width, 36px);
+  width: var(--r-stepper-item--width, var(--r-spacing-225, 2.25rem));
   white-space: var(--r-stepper-item--white-space, nowrap);
-  gap: var(--r-stepper-item--gap, 8px);
+  gap: var(--r-stepper-item--gap, var(--r-spacing-100, 0.5rem));
 }
 .r-stepper-item--indicator {
-  width: var(--r-stepper-item--indicator--width, 20px);
-  height: var(--r-stepper-item--indicator--height, 20px);
-  line-height: var(--r-stepper-item--indicator--line-height, 20px);
+  width: var(--r-stepper-item--indicator--width, var(--r-spacing-125, 1.25rem));
+  height: var(--r-stepper-item--indicator--height, var(--r-spacing-125, 1.25rem));
+  line-height: var(--r-stepper-item--indicator--line-height, var(--r-spacing-125, 1.25rem));
   border-radius: var(--r-stepper-item--indicator--border-radius, 50%);
   background-color: var(--r-stepper-item--indicator--background-color, transparent);
   display: var(--r-stepper-item--indicator--display, flex);
@@ -35,15 +48,15 @@
   align-items: var(--r-stepper-item--indicator--align-items, center);
   border-width: var(--r-stepper-item--indicator--border-width, 1px);
   border-style: var(--r-stepper-item--indicator--border-style, solid);
-  border-color: var(--r-stepper-item--indicator--border-color, var(--r-border-soft, #686868));
-  margin-left: var(--r-stepper-item--indicator--margin-left, 8px);
-  margin-right: var(--r-stepper-item--indicator--margin-right, 8px);
+  border-color: var(--r-stepper-item--indicator--border-color, var(--r-text-regular, #282828));
+  margin-left: var(--r-stepper-item--indicator--margin-left, var(--r-spacing-100, 0.5rem));
+  margin-right: var(--r-stepper-item--indicator--margin-right, var(--r-spacing-100, 0.5rem));
 }
 .r-stepper-item--indicator--step-number {
   vertical-align: var(--r-stepper-item--step-number--vertical-align, middle);
 }
 .r-stepper-item--text {
-  font-size: var(--r-stepper-item--text--font-size, var(--r-font-size-200, 13px));
-  color: var(--r-stepper-item--text--color, var(--r-text-soft, #686868));
+  font-size: var(--r-stepper-item--text--font-size, var(--r-font-size-200, 0.8125rem));
+  color: var(--r-stepper-item--text--color, var(--r-text-regular, #282828));
   text-align: var(--r-stepper-item--text--text-align, center);
 }

package/dist/collection/components/stepper-item/stepper-item.js

@@ -6,13 +6,28 @@ export class StepperItem {
         /** Defines a property active that determines whether the step is active */
         this.active = false;
     }
+    /**
+     * Checks if the slot contains only visually-hidden elements (no visible text).
+     * Returns true if only visually-hidden elements are present.
+     */
+    get hasOnlyVisuallyHiddenContent() {
+        var _a;
+        const textContent = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        const visuallyHiddenElement = this.host.querySelector('.visually-hidden');
+        if (!visuallyHiddenElement) {
+            return false;
+        }
+        const visuallyHiddenText = visuallyHiddenElement.textContent || '';
+        const remainingText = textContent.replace(visuallyHiddenText.trim(), '').trim();
+        return !remainingText.length;
+    }
     get hasText() {
         return this.host.textContent.trim().length > 0;
     }
     render() {
         const number = this.number || this.stepNumber;
-        return (h(Host, { key: '3613c92e8ac7583bf5e3db7e90edca9a921fa475' }, h("div", { key: 'ca2c38443d9a855baea829e99ec9c642c279a3be', class: "r-stepper-item" }, h("div", { key: '513f01a9a3ac3a87c3622b14f051765121308241', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
-            h("div", { key: 'cec8659e5ff31608b05c6f62798a8a1048cd7539', class: "r-stepper-item--text" }, h("slot", { key: '6a9d581948decc8a15e66401275cb85bf52bb459' })))));
+        return (h(Host, { key: '4f55b5491ec5eee7cad6313fa85e7d6cc89b2178', role: "listitem", "aria-current": this.active ? 'step' : null }, h("div", { key: '2864f0e19f2f11af0f8674b9a701cd948024c085', class: "r-stepper-item" }, h("div", { key: 'de896ec98a13a4b20965a3ca58c5517a30de1f74', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, iconAriaLabel: this.label, size: "s" })) : number !== undefined ? (h("span", { "aria-hidden": `${!this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
+            h("div", { key: 'cf3b6b5e3f4454830ecce06a6b6c16225aadd93e', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, h("slot", { key: '65bd1f231c445f9681750c71ef156297edbf05fb' })))));
     }
     static get is() { return "r-stepper-item"; }
     static get encapsulation() { return "shadow"; }
@@ -130,6 +145,25 @@ export class StepperItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the step icon for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
             }
         };
     }

package/dist/collection/components/tab/tab.css

@@ -6,42 +6,30 @@
 }
 
 :host(:hover:not([disabled]:not([disabled=false]))) {
-  --r-tab--color: var(--r-text-strong);
-  --r-tab--marker--height: 5px;
-  --r-tab--marker--background-color: var(--r-border-softer, #c9c9c9);
-  --r-tab--marker--visibility: visible;
+  --r-tab--background: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
 }
 
 :host(:active:not([disabled]:not([disabled=false]))) {
-  --r-tab--background-color: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
+  --r-tab--background: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
 }
 
 :host(:focus-visible) {
-  --r-tab--marker--visibility: visible;
-  --r-tab--marker--height: 5px;
-  --r-tab--marker--background-color: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
-  --r-tab--slot--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
-  --r-tab--slot--outline: 2px solid var(--r-border-focused, #0071e3);
-  --r-tab--slot--outline-offset: 2px;
+  --r-tab--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
+  --r-tab--outline: 2px solid var(--r-border-focused, #0071e3);
+  --r-tab--outline-offset: 2px;
 }
 
 :host([active]:not([active=false])) {
   cursor: default;
   --r-tab--font-weight: var(--r-font-weight-semibold, 600);
-  --r-tab--color: var(--r-text-strong, #000);
-  --r-tab--padding-left: 0.5625rem;
-  --r-tab--padding-right: 0.5625rem;
-  --r-tab--marker--background-color: var(--r-border-regular, #282828);
   --r-tab--marker--visibility: visible;
-  --r-tab--marker--height: 3px;
 }
 
 :host([disabled]:not([disabled=false])) {
-  opacity: 0.4;
   cursor: not-allowed;
   --r-tab--pointer-events: none;
-  --r-tab--marker--visibility: hidden;
-  --r-tab--slot--box-shadow: none;
+  --r-tab--color: var(--r-text-soft, #686868);
+  --r-tab--marker--background-color: var(--r-border-soft, #686868) ;
 }
 
 .r-tab {
@@ -49,19 +37,26 @@
   font-family: var(--r-tab--font-family, var(--r-font-family-text, system-ui));
   font-weight: var(--r-tab--font-weight, var(--r-font-weight-regular, 400));
   font-size: var(--r-tab--font-size, var(--r-font-size-400, 1rem));
-  line-height: var(--r-tab--line-height, 1);
+  line-height: var(--r-tab--line-height, var(--r-line-height-m, 1.5));
   cursor: var(--r-tab--cursor, inherit);
   pointer-events: var(--r-tab--pointer-events, initial);
-  padding-top: var(--r-tab--padding-top, 0);
-  padding-right: var(--r-tab--padding-right, 0.625rem);
-  padding-bottom: var(--r-tab--padding-bottom, 1.25rem);
-  padding-left: var(--r-tab--padding-left, 0.625rem);
+  display: var(--r-tab--display, flex);
+  align-items: var(--r-tab--align-items, center);
+  justify-content: var(--r-tab--justify-content, center);
+  gap: var(--r-tab--gap, var(--r-spacing-050, 0.5rem));
+  width: var(--r-tab--width, auto);
+  padding-top: var(--r-tab--padding-top, var(--r-spacing-025, 0.25rem));
+  padding-right: var(--r-tab--padding-right, var(--r-spacing-050, 0.5rem));
+  padding-bottom: var(--r-tab--padding-bottom, var(--r-spacing-100, 1rem));
+  padding-left: var(--r-tab--padding-left, var(--r-spacing-050, 0.5rem));
+  margin-bottom: var(--r-tab--margin-bottom, -1px);
   opacity: var(--r-tab--opacity, 1);
   background: var(--r-tab--background, none);
   color: var(--r-tab--color, var(--r-text-regular, #282828));
   border: var(--r-tab--border, none);
   box-shadow: var(--r-tab--box-shadow, none);
   outline: var(--r-tab--outline, none);
+  outline-offset: var(--r-tab--outline-offset, 0);
 }
 .r-tab::after {
   content: var(--r-tab--marker--content, "");
@@ -71,11 +66,16 @@
   bottom: var(--r-tab--marker--bottom, 0);
   left: var(--r-tab--marker--left, 0);
   visibility: var(--r-tab--marker--visibility, hidden);
-  background-color: var(--r-tab--marker--background-color, rgba(0, 0, 0, 0));
+  background-color: var(--r-tab--marker--background-color, var(--r-border-regular, #282828));
   transition: var(--r-tab--marker--transition, all 0.1s ease-in);
 }
-.r-tab--slot {
-  box-shadow: var(--r-tab--slot--box-shadow, none);
-  outline: var(--r-tab--slot--outline, none);
-  outline-offset: var(--r-tab--slot--outline-offset, 0);
+.r-tab--disabled-icon,
+.r-tab ::slotted([slot=icon]) {
+  color: var(--r-tab--icon--color, var(--r-icon-soft, #686868));
+}
+
+@media (prefers-reduced-motion) {
+  .r-tab::after {
+    transition: none;
+  }
 }

package/dist/collection/components/tab/tab.js

@@ -22,6 +22,8 @@ export class RTab {
             if (this.disabled)
                 return;
             switch (event.code) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
                 case 'Space':
                 case 'Home':
                 case 'End':
@@ -41,7 +43,9 @@ export class RTab {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (h(Host, Object.assign({ key: '04af619a56c41414b02e942d9d5bba11ef5eb1a0', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: 'e3fcc9b084de339aafcf98d8c5ca06f0e9615916', class: "r-tab" }, h("span", { key: 'bb52bf58758c2404a61b595706ecb3e3f71942ee', class: "r-tab--slot" }, h("slot", { key: '939a0e9618875e4909dbb763290f5f439122e312' })))));
+        return (h(Host, Object.assign({ key: '270a02c942f223ef5ac0f9f83d33c51bfd88c1c7', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '60bbf17ad69478028579b61d03ca316a55ce52ea', class: "r-tab" }, disabled ?
+            h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
+            : h("slot", { name: "icon" }), h("slot", { key: '5b0582bebdf14a0de908d23d2a08d80cf1850b50' }))));
     }
     static get is() { return "r-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-panel/tab-panel.js

@@ -12,7 +12,7 @@ export class RTabPanel {
             active,
             'aria-labelledby': tabId
         };
-        return (h(Host, Object.assign({ key: 'de50044bd0be5598615c2f84e66f5a552edb4ab9', class: "r-typography" }, hostAttrs), h("div", { key: 'e4db4fd5b115c96474f31d9d16881f496b8f4fd2', class: "r-tab-panel" }, h("slot", { key: 'd2ad80745f97933fb173f6ecd3635829d3c890ac' }))));
+        return (h(Host, Object.assign({ key: 'f58718704b5625e82bfa531bcbf2b6c94c2e1ae3', class: "r-typography" }, hostAttrs), h("div", { key: '75dc2720b47da749a4d1e168e20338b94724a369', class: "r-tab-panel" }, h("slot", { key: '9710a7fc07751091c4ec0c97ae1d205ae540fdfd' }))));
     }
     static get is() { return "r-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -180,23 +180,51 @@ export class RTabs {
         history.pushState({ tabId, tabsGroup }, '', url.toString());
     }
     _changeFocusTab(tab, keycode) {
-        var _a, _b, _c, _d;
         const tabs = Array.from(this.tabElements).filter(element => !element.disabled);
         const index = tabs.indexOf(tab);
+        let nextTab;
         switch (keycode) {
             case 'ArrowLeft':
-                index === 0 ? (_a = tabs[tabs.length - 1]) === null || _a === void 0 ? void 0 : _a.focus() : tabs[index - 1].focus();
+                nextTab = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
                 break;
             case 'ArrowRight':
-                index === tabs.length - 1 ? (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.focus() : tabs[index + 1].focus();
+                nextTab = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
                 break;
             case 'Home':
-                (_c = tabs[0]) === null || _c === void 0 ? void 0 : _c.focus();
+                nextTab = tabs[0];
                 break;
             case 'End':
-                (_d = tabs[tabs.length - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                nextTab = tabs[tabs.length - 1];
                 break;
         }
+        if (nextTab) {
+            nextTab.focus();
+            this.scrollTabIntoView(nextTab);
+        }
+    }
+    scrollTabIntoView(tab) {
+        var _a;
+        const tabsList = this.host.querySelector('r-tabs-list');
+        if (!tabsList)
+            return;
+        const container = (_a = tabsList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-tabs-list--tabs-container');
+        if (!container)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        // Check if tab is fully visible
+        const isFullyVisible = tabRect.left >= containerRect.left - 1 &&
+            tabRect.right <= containerRect.right + 1;
+        if (isFullyVisible)
+            return;
+        // Calculate scroll offset to center the tab
+        const centerOffset = (tabRect.left - containerRect.left) -
+            (containerRect.width / 2) +
+            (tabRect.width / 2);
+        container.scrollBy({
+            left: centerOffset,
+            behavior: 'smooth'
+        });
     }
     /** Listen for "click" event on `<r-tab>` */
     tabChangeAction(event) {
@@ -233,7 +261,7 @@ export class RTabs {
         this._changeFocusTab(e.target, e.detail.keycode);
     }
     render() {
-        return (h(Host, { key: '4c86b16a8af456854579e7141ff2b3d2b60627e5', class: "r-tabs" }, h("slot", { key: '589b8ae9f3f51df095ed28b896714e1407fd9d87' })));
+        return (h(Host, { key: '0737bf78e596f8fb9d4a2ec10f1503d1072f2683', class: "r-tabs" }, h("slot", { key: '5bc87b17930c9ea159ef29335c6b11f0f4c7d43e' })));
     }
     static get is() { return "r-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs-list/exports.js

@@ -0,0 +1,2 @@
+export const TabListVariantArray = ['expanded', 'compact'];
+export const ActiveTabBorderArray = ['standard', 'branded'];

package/dist/collection/components/tabs-list/tabs-list.css

@@ -2,15 +2,56 @@
   display: block;
 }
 
+:host([variant=compact]) {
+  --r-tabs-list--r-tab--margin-right: 0;
+  --r-tabs-list--r-tab--flex: 1;
+  --r-tab--width: 100%;
+}
+
+:host([scrollable=true]) {
+  --r-tabs-list--tabs-container--margin: -6px 4px ;
+}
+
+:host([border=branded]) {
+  --r-tab--marker--background-color: var(--r-border-brand-vanguard, #527a42);
+}
+
 .r-tabs-list {
   display: var(--r-tabs-list--display, flex);
-  margin-bottom: var(--r-tabs-list--margin-bottom, 40px);
+  margin-bottom: var(--r-tabs-list--margin-bottom, var(--r-spacing-250, 2.5rem));
   border-bottom-width: var(--r-tabs-list--border-bottom-width, 1px);
   border-bottom-style: var(--r-tabs-list--border-bottom-style, solid);
   border-bottom-color: var(--r-tabs-list--border-bottom-color, var(--r-border-softer, #c9c9c9));
 }
+.r-tabs-list--scroll-button {
+  --r-icon-button--border-radius: var(--r-tabs-list--border-radius, 0);
+  --r-icon-button--width: var(--r-tabs-list--scroll-button--width, var(--r-spacing-200, 2rem));
+  --r-icon-button--height: var(--r-tabs-list--scroll-button--height, var(--r-spacing-200, 2rem));
+}
+.r-tabs-list--tabs-container {
+  display: var(--r-tabs-list--tabs-container--display, flex);
+  flex: var(--r-tabs-list--tabs-container--flex, 1);
+  overflow: var(--r-tabs-list--tabs-container--overflow, scroll hidden);
+  scroll-snap-type: var(--r-tabs-list--tabs-container--scroll-snap-type, x proximity);
+  scrollbar-width: var(--r-tabs-list--tabs-container--scrollbar-width, none);
+  margin: var(--r-tabs-list--tabs-container--margin, -6px);
+  padding: var(--r-tabs-list--tabs-container--padding, 6px);
+}
+.r-tabs-list--scroll-button-container {
+  display: var(--r-tabs-list--scroll-button-container--display, flex);
+  align-items: var(--r-tabs-list--scroll-button-container--align-items, start);
+  gap: var(--r-tabs-list--scroll-button-container--gap, var(--r-spacing-025, 0.25rem));
+}
+.r-tabs-list--scroll-indicator {
+  margin-top: var(--r-tabs-list--scroll-indicator--margin, 2px);
+  width: var(--r-tabs-list--scroll-button--after--width, 1px);
+  height: var(--r-tabs-list--scroll-button--after--height, var(--r-spacing-175, 1.75rem));
+  background-color: var(--r-tabs-list----scroll-indicator--background-color, var(--r-border-softer, #c9c9c9));
+  z-index: var(--r-tabs-list----scroll-indicator--z-index, 1);
+}
 .r-tabs-list ::slotted(r-tab) {
-  margin-right: var(--r-tabs-list--r-tab--margin-right, 40px);
+  margin-right: var(--r-tabs-list--r-tab--margin-right, var(--r-spacing-250, 2.5rem));
+  flex: var(--r-tabs-list--r-tab--flex, none);
 }
 .r-tabs-list ::slotted(r-tab:last-of-type) {
   margin-right: var(--r-tabs-list--r-tab--last-of-type--margin-right, 0);