@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,19 +0,0 @@
-'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: '08280b6003ccf78bf96eba9778fd3ddcaebc8947' }, index.h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
-    }
-};
-SkipLink.style = skipLinkCss;
-
-exports.r_skip_link = SkipLink;

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

@@ -1,42 +0,0 @@
-'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: '4f55b5491ec5eee7cad6313fa85e7d6cc89b2178', role: "listitem", "aria-current": this.active ? 'step' : null }, index.h("div", { key: '2864f0e19f2f11af0f8674b9a701cd948024c085', class: "r-stepper-item" }, index.h("div", { key: 'de896ec98a13a4b20965a3ca58c5517a30de1f74', 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: 'cf3b6b5e3f4454830ecce06a6b6c16225aadd93e', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, index.h("slot", { key: '65bd1f231c445f9681750c71ef156297edbf05fb' })))));
-    }
-    get host() { return index.getElement(this); }
-};
-StepperItem.style = stepperItemCss;
-
-exports.r_stepper_item = StepperItem;

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

@@ -1,99 +0,0 @@
-'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: '9a8684fe78d610b90c824a8bd06371efc222b94a' }, index.h("ol", { key: '89c37db27cab79946f29e5302784f3a17c853cef', 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: '92d043648fb9c12ca5222a569ec40a917798af5a', 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

@@ -1,26 +0,0 @@
-'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: 'f58718704b5625e82bfa531bcbf2b6c94c2e1ae3', class: "r-typography" }, hostAttrs), index.h("div", { key: '75dc2720b47da749a4d1e168e20338b94724a369', class: "r-tab-panel" }, index.h("slot", { key: '9710a7fc07751091c4ec0c97ae1d205ae540fdfd' }))));
-    }
-};
-RTabPanel.style = tabPanelCss;
-
-exports.r_tab_panel = RTabPanel;

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

@@ -1,62 +0,0 @@
-'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: '270a02c942f223ef5ac0f9f83d33c51bfd88c1c7', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), index.h("span", { key: '60bbf17ad69478028579b61d03ca316a55ce52ea', 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: '5b0582bebdf14a0de908d23d2a08d80cf1850b50' }))));
-    }
-    get host() { return index.getElement(this); }
-};
-RTab.style = tabCss;
-
-exports.r_tab = RTab;

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

@@ -1,175 +0,0 @@
-'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: '19666af123fe058aa3e654c153ad84ec16861a59', scrollable: `${this.scrollable}`, role: "tablist" }, index.h("div", { key: '5de7241f57b419133f81ae565bf517873a8e9268', class: "r-tabs-list" }, this.scrollable &&
-            index.h("div", { key: 'ff5edcbb61dd4ba9be3e0baf22822edbcbf8ec6d', "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: '76fbeab529e2a7869ac7e946b1c0863969114888', class: "r-tabs-list--scroll-indicator" })), index.h("div", { key: 'd520b386242700c000daf85eba8d50fb014fc616', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, index.h("slot", { key: 'f8534275445ed4d32154519f0a8f592ee7ea3353' })), this.scrollable &&
-            index.h("div", { key: '8ca03d4864eba5af975de4dd6dc6fd3c3e8be108', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && index.h("div", { key: '1a0534b79bbe3273a73f48530a3a17ccac0d7826', 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;