@riverty/web-components 6.3.0 → 6.3.1

package/dist/cjs/r-skip-link.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const skipLinkCss = ":host{display:inline-block;position:absolute;z-index:99999}:host:has(:not(:focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host:has(:focus-within){top:var(--r-spacing-100);padding:var(--r-spacing-100);border:1px solid var(--r-border-regular);background:var(--r-background-softest);left:var(--r-skip-link--left, 50%);transform:var(--r-skip-link--transform, translateX(-50%))}:host([position=left]){--r-skip-link--left:var(--r-spacing-100);--r-skip-link--transform:none}::slotted(*:not(:focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+
+const SkipLink = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Defines skip link position */
+        this.position = 'center';
+    }
+    render() {
+        return (index.h(index.Host, { key: '0a243668431f65138c3bf66e40013eb4be72a2be' }, index.h("slot", { key: '65749c9f436173b7497d11a8f71e5237317e4d3e' })));
+    }
+};
+SkipLink.style = skipLinkCss;
+
+exports.r_skip_link = SkipLink;

package/dist/cjs/r-stepper-item.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const stepperItemCss = ":host([active]){--r-stepper-item--indicator--background-color:var(--r-background-inverse, #282828);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}:host([complete]){--r-stepper-item--indicator--background-color:var(--r-status-success-regular, #298535);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--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, 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, var(--r-spacing-225, 2.25rem));white-space:var(--r-stepper-item--white-space, nowrap);gap:var(--r-stepper-item--gap, var(--r-spacing-100, 0.5rem))}.r-stepper-item--indicator{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);justify-content:var(--r-stepper-item--indicator--justify-content, center);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-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, 0.8125rem));color:var(--r-stepper-item--text--color, var(--r-text-regular, #282828));text-align:var(--r-stepper-item--text--text-align, center)}";
+
+const StepperItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Defines a property complete that determines whether the step is complete */
+        this.complete = false;
+        /** 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 (index.h(index.Host, { key: '2a3f15db4e1214ddb2b9b9ca61f7be4f7cc93cdf', role: "listitem", "aria-current": this.active ? 'step' : null }, index.h("div", { key: '98026269db0de698e020ac591d99cb4ac8ff296b', class: "r-stepper-item" }, index.h("div", { key: '87227beabbe2200e0ac4e99fa4246a72eaaebf55', class: "r-stepper-item--indicator" }, this.complete ? (index.h("r-icon", { name: "check", size: "s" })) : this.icon ? (index.h("r-icon", { name: this.icon, iconAriaLabel: this.label, size: "s" })) : number !== undefined ? (index.h("span", { "aria-hidden": `${!this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
+            index.h("div", { key: '447f86dfda0e76666e5d313f088e45e7a0a86787', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, index.h("slot", { key: '039013569ab20d64f2e067325f341b2d720acc19' })))));
+    }
+    get host() { return index.getElement(this); }
+};
+StepperItem.style = stepperItemCss;
+
+exports.r_stepper_item = StepperItem;

package/dist/cjs/r-stepper.cjs.entry.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const stepperCss = ".r-stepper{display:var(--r-stepper--display, flex);align-items:var(--r-stepper--align-items, top);list-style-type:var(--r-stepper--list-style-type, none);padding:var(--r-stepper--padding, 0);margin:var(--r-stepper--margin, 0)}.r-stepper>r-stepper-item,.r-stepper ::slotted(r-stepper-item){display:var(--r-stepper--slotted--stepper-item--display, flex)}.r-stepper>r-stepper-item:not(:last-of-type),.r-stepper ::slotted(r-stepper-item:not(:last-child)){flex:var(--r-stepper--slotted--stepper-item--flex, 1)}.r-stepper>r-stepper-item:not(:last-of-type)::after,.r-stepper ::slotted(r-stepper-item:not(:last-child))::after{content:var(--r-stepper-divider--content, \"\");display:var(--r-stepper-divider--display, block);position:var(--r-stepper-divider--position, relative);width:var(--r-stepper-divider--width, 100%);height:var(--r-stepper-divider--height, 1px);top:var(--r-stepper-divider--top, 0.625rem);background-color:var(--r-stepper-divider--background-color, var(--r-text-regular, #282828))}";
+
+const OFFSET = 20;
+const Stepper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** 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 (index.h(index.Host, { key: 'd4e3e3aca9a2c52e3549c686679ca6d110b715c0' }, index.h("ol", { key: '7cad36ede8507e3583f877ce3856df903f5ddd80', class: "r-stepper", "aria-label": this.label || null }, !this.hasSteps && Array.from({ length: this.total }, (_, index$1) => (index.h("r-stepper-item", { number: index$1 + 1, complete: completed > index$1, active: completed === index$1, key: index$1 }))), index.h("slot", { key: '4942b4293e607acc74afa59a49dd4b4ce0348f5e', onSlotchange: this.handleSlotChange }))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "completedStepsLabel": ["handleCompletedStepsLabelChange"]
+    }; }
+};
+Stepper.style = stepperCss;
+
+exports.r_stepper = Stepper;

package/dist/cjs/r-tab-panel.cjs.entry.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const tabPanelCss = ":host([active]:not([active=false])){display:block}:host{display:none;outline:none}:host(:focus-visible){box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-tab-panel{font-family:var(--r-tab-panel--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-tab-panel--font-size, var(--r-font-size-text-400, 1rem))}";
+
+const RTabPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Defines if the `panel` is hidden */
+        this.active = false;
+    }
+    render() {
+        const { tabId, active } = this;
+        const hostAttrs = {
+            role: 'tabpanel',
+            tabindex: '0',
+            active,
+            'aria-labelledby': tabId
+        };
+        return (index.h(index.Host, Object.assign({ key: '22e44ca7e5addc5d912e8005374cf0b01149eabe', class: "r-typography" }, hostAttrs), index.h("div", { key: '4b9498ba0f513636a5cfa0c29eb8158ab9ebca70', class: "r-tab-panel" }, index.h("slot", { key: 'e6d9d6538663c6a3b6c6772242bb8b7a107f26c0' }))));
+    }
+};
+RTabPanel.style = tabPanelCss;
+
+exports.r_tab_panel = RTabPanel;

package/dist/cjs/r-tab.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const tabCss = ":host{display:flex;outline:none;opacity:1;cursor:pointer}:host(:hover:not([disabled]:not([disabled=false]))){--r-tab--background:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false]))){--r-tab--background:var(--r-background-interactive-pressed, rgba(40,40,40,0.12))}:host(:focus-visible){--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--marker--visibility:visible}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-tab--pointer-events:none;--r-tab--color:var(--r-text-soft, #686868);--r-tab--marker--background-color:var(--r-border-soft, #686868)}.r-tab{position:var(--r-tab--position, relative);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, var(--r-line-height-m, 1.5));cursor:var(--r-tab--cursor, inherit);pointer-events:var(--r-tab--pointer-events, initial);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, \"\");width:var(--r-tab--marker--width, 100%);height:var(--r-tab--marker--height, 3px);position:var(--r-tab--marker--position, absolute);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, var(--r-border-regular, #282828));transition:var(--r-tab--marker--transition, all 0.1s ease-in)}.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}}";
+
+const RTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabChange = index.createEvent(this, "tabChange");
+        this.moveTabFocus = index.createEvent(this, "moveTabFocus");
+        /** Indicates if `<r-tab>` is disabled */
+        this.disabled = false;
+        /** Indicates if `<r-tab>` is active */
+        this.active = false;
+        this.handleClick = () => {
+            if (this.disabled || this.active)
+                return;
+            this.tabChange.emit({ element: this.host });
+        };
+        this.handleKeyup = (event) => {
+            if (this.disabled || this.active)
+                return;
+            const isSpace = event.code === 'Space';
+            const isEnter = event.code === 'Enter';
+            if (isEnter || isSpace)
+                this.tabChange.emit({ element: this.host });
+        };
+        this.handleKeydown = (event) => {
+            if (this.disabled)
+                return;
+            switch (event.code) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                case 'Space':
+                case 'Home':
+                case 'End':
+                    event.preventDefault();
+                    break;
+            }
+            this.moveTabFocus.emit({ element: this.host, keycode: event.code });
+        };
+    }
+    render() {
+        const { disabled, active, panelId } = this;
+        const hostAttrs = {
+            role: 'tab',
+            tabindex: `${active ? '0' : '-1'}`,
+            'panel-id': panelId,
+            'aria-controls': panelId,
+            'aria-selected': `${active}`,
+            'aria-disabled': `${disabled}`
+        };
+        return (index.h(index.Host, Object.assign({ key: 'b68ad2b51c624ef92886f791e2093951ec235042', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), index.h("span", { key: '59898569007666db12270834489378d695b7b651', class: "r-tab" }, disabled ?
+            index.h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
+            : index.h("slot", { name: "icon" }), index.h("slot", { key: '5e3b5ace265b9884bd659311d23955c084da995b' }))));
+    }
+    get host() { return index.getElement(this); }
+};
+RTab.style = tabCss;
+
+exports.r_tab = RTab;

package/dist/cjs/r-tabs-list.cjs.entry.js

@@ -0,0 +1,175 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const tabsListCss = ":host{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, 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, 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)}";
+
+const RTabsList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Visual variant of the tab list
+         * @defaulr 'expanded'
+         * */
+        this.variant = 'expanded';
+        /**
+         * Border style of the active tab
+         * @default 'standard'
+         * */
+        this.border = 'standard';
+        /** Indicates if the tab list is scrollable */
+        this.scrollable = false;
+        /** Indicates if the first tab is fully visible */
+        this.firstItemVisible = true;
+        /** Indicates if the last tab is fully visible */
+        this.lastItemVisible = false;
+        this.initiatizeResizeObserver = () => {
+            if (!this.containerRef || this.resizeObserver)
+                return;
+            this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
+            this.resizeObserver.observe(this.containerRef);
+        };
+        this.updateScrollState = () => {
+            if (!this.containerRef)
+                return;
+            const { scrollWidth, clientWidth } = this.containerRef;
+            const containerRect = this.containerRef.getBoundingClientRect();
+            const tabs = Array.from(this.tabElements);
+            // Check if content is scrollable
+            this.scrollable = scrollWidth > clientWidth;
+            if (!this.scrollable || tabs.length === 0) {
+                this.firstItemVisible = true;
+                this.lastItemVisible = true;
+                return;
+            }
+            const firstTab = tabs[0];
+            const firstTabRect = firstTab.getBoundingClientRect();
+            this.firstItemVisible = firstTabRect.left >= containerRect.left - 1;
+            const lastTab = tabs[tabs.length - 1];
+            const lastTabRect = lastTab.getBoundingClientRect();
+            this.lastItemVisible = lastTabRect.right <= containerRect.right + 1;
+        };
+        this.getVisibleTabOnLeft = () => {
+            if (!this.containerRef)
+                return null;
+            const containerRect = this.containerRef.getBoundingClientRect();
+            const tabs = Array.from(this.tabElements);
+            // Find first tab that's partially or fully visible from the left
+            for (const tab of tabs) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.right > containerRect.left + 1) {
+                    return tab;
+                }
+            }
+            return;
+        };
+        this.getVisibleTabOnRight = () => {
+            if (!this.containerRef)
+                return null;
+            const containerRect = this.containerRef.getBoundingClientRect();
+            const tabs = Array.from(this.tabElements);
+            for (let i = tabs.length - 1; i >= 0; i--) {
+                const tab = tabs[i];
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.left < containerRect.right - 1) {
+                    return tab;
+                }
+            }
+            return null;
+        };
+        this.scrollLeft = () => {
+            if (!this.containerRef)
+                return;
+            const visibleTab = this.getVisibleTabOnLeft();
+            if (!visibleTab)
+                return;
+            const tabs = Array.from(this.tabElements);
+            const currentIndex = tabs.indexOf(visibleTab);
+            const prevTab = currentIndex > 0 ? tabs[currentIndex - 1] : null;
+            if (!prevTab)
+                return;
+            const containerLeft = this.containerRef.getBoundingClientRect().left;
+            const prevTabLeft = prevTab.getBoundingClientRect().left;
+            const offset = prevTabLeft - containerLeft;
+            this.containerRef.scrollBy({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        this.scrollRight = () => {
+            if (!this.containerRef)
+                return;
+            const visibleTab = this.getVisibleTabOnRight();
+            if (!visibleTab)
+                return;
+            const tabs = Array.from(this.tabElements);
+            const currentIndex = tabs.indexOf(visibleTab);
+            const nextTab = currentIndex < tabs.length - 1 ? tabs[currentIndex + 1] : null;
+            if (!nextTab)
+                return;
+            const containerRight = this.containerRef.getBoundingClientRect().right;
+            const nextTabRight = nextTab.getBoundingClientRect().right;
+            const offset = nextTabRight - containerRight;
+            this.containerRef.scrollBy({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        this.scrollToActiveTab = (activeTabElement) => {
+            if (!this.containerRef || !this.scrollable)
+                return;
+            const activeTab = activeTabElement || this.host.querySelector('r-tab[active]');
+            if (!activeTab)
+                return;
+            const containerRect = this.containerRef.getBoundingClientRect();
+            const activeTabRect = activeTab.getBoundingClientRect();
+            // Check if already fully visible
+            const isVisible = activeTabRect.left >= containerRect.left &&
+                activeTabRect.right <= containerRect.right;
+            if (isVisible)
+                return;
+            // Center the active tab
+            const offset = (activeTabRect.left - containerRect.left) -
+                (containerRect.width / 2) +
+                (activeTabRect.width / 2);
+            this.containerRef.scrollBy({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        this.renderScrollButton = (direction, disabled, onClick, tooltip) => {
+            const iconName = direction === 'left' ? 'angle-left' : 'angle-right';
+            const button = (index.h("r-icon-button", { onRClick: onClick, disabled: disabled, name: iconName, size: "s", rTabindex: -1, class: "r-tabs-list--scroll-button" }));
+            if (tooltip) {
+                return (index.h("r-tooltip", { text: tooltip, position: "top" }, button));
+            }
+            return button;
+        };
+    }
+    /** Listen for "click" event on `<r-tab>` */
+    tabChangeAction(event) {
+        this.scrollToActiveTab(event.target);
+    }
+    /** `<r-tab>` group of elements */
+    get tabElements() {
+        return this.host.querySelectorAll('r-tab');
+    }
+    componentDidLoad() {
+        this.updateScrollState();
+        this.initiatizeResizeObserver();
+        this.scrollToActiveTab();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (index.h(index.Host, { key: '3a43356d4178acc008f6213b4f27488740582497', scrollable: `${this.scrollable}`, role: "tablist" }, index.h("div", { key: 'aa5fdb9a8e8445b083a9ac17d0b6c72f8693e181', class: "r-tabs-list" }, this.scrollable &&
+            index.h("div", { key: '2ba0a3eeae8fd073016af13c9781a20b3c1078cd', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, this.renderScrollButton('left', this.firstItemVisible, this.scrollLeft, this.scrollLeftTooltip), !this.firstItemVisible && index.h("div", { key: '132141c530c86a0cb5abb48ae5ab55fe00c33444', class: "r-tabs-list--scroll-indicator" })), index.h("div", { key: 'bbad4d5cf268fa5e15f2e83050ab4f40ec284cbc', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, index.h("slot", { key: '8531037917ff783f4467e232ffafff4f2fd0be1f' })), this.scrollable &&
+            index.h("div", { key: 'e39465fadb91478adf2f2ed529a89038ff6695c3', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && index.h("div", { key: 'a4d5660cde041b1ab6ef77c8498e74a85fb79289', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
+    }
+    get host() { return index.getElement(this); }
+};
+RTabsList.style = tabsListCss;
+
+exports.r_tabs_list = RTabsList;