@riverty/web-components 5.8.0 → 6.1.0

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-DJ4H_bFj.js');
 
-const tabCss = ":host{display:flex;outline:none;opacity:1;cursor:pointer}: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}:host(:active:not([disabled]:not([disabled=false]))){--r-tab--background-color: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}: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{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, 1);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);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)}.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, rgba(0, 0, 0, 0));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)}";
+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) {
@@ -30,6 +30,8 @@ const RTab = class {
             if (this.disabled)
                 return;
             switch (event.code) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
                 case 'Space':
                 case 'Home':
                 case 'End':
@@ -49,7 +51,9 @@ const RTab = class {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (index.h(index.Host, Object.assign({ key: '2e2b2d84376e097c80a84a1e7224c0f026c16277', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), index.h("span", { key: 'c38098d413b17ba8b8ddd3436687879d1b37114f', class: "r-tab" }, index.h("span", { key: '3f7bfedd8a933da7ec52f34dd64f3a4e862cb836', class: "r-tab--slot" }, index.h("slot", { key: 'bc056a0d06188ddd1b47c3c062a4d51367e48393' })))));
+        return (index.h(index.Host, Object.assign({ key: '619d576a8efdfa1f941be9760312d7254a922f10', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), index.h("span", { key: '15d69c67544bdb845df4b10411ff3e55fb5671a2', 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: '59e5f0740a92f1cfeb71ab9709db2f2a13152fb4' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,15 +2,173 @@
 
 var index = require('./index-DJ4H_bFj.js');
 
-const tabsListCss = ":host{display:block}.r-tabs-list{display:var(--r-tabs-list--display, flex);margin-bottom:var(--r-tabs-list--margin-bottom, 40px);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 ::slotted(r-tab){margin-right:var(--r-tabs-list--r-tab--margin-right, 40px)}.r-tabs-list ::slotted(r-tab:last-of-type){margin-right:var(--r-tabs-list--r-tab--last-of-type--margin-right, 0)}";
+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: '323b36e7d276c42c72764c34f2564153d80b64d2', role: "tablist" }, index.h("div", { key: 'bab777186d6d538c6f541e08bda090ab228f38d3', class: "r-tabs-list" }, index.h("slot", { key: '60a0d80ba3ada9d218ca8058cdcdf720277e19d0' }))));
+        return (index.h(index.Host, { key: '8191b15343491c66259b583930ee73916c6bbd9e', scrollable: `${this.scrollable}`, role: "tablist" }, index.h("div", { key: 'e5c2a308889986b80549aba5b9a7bec8e6961891', class: "r-tabs-list" }, this.scrollable &&
+            index.h("div", { key: '62e6abb4a9e5ff9c553162c6de4176c8ce4c0407', "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: '62e5c2ca7e76323ff367940cd9ab1cb6e5b6db74', class: "r-tabs-list--scroll-indicator" })), index.h("div", { key: '5f0b264eb4abaf51d4e2f3a85a92d89ff9e378f5', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, index.h("slot", { key: '38f6060007491fa9b50cf7cf7d36372c32e63d97' })), this.scrollable &&
+            index.h("div", { key: 'd51473735f550b81b5ba630126fe3bcc41848648', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && index.h("div", { key: '89d712984dd7797cbca0df86989cf8eedcd95a61', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
     }
+    get host() { return index.getElement(this); }
 };
 RTabsList.style = tabsListCss;
 

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

@@ -187,23 +187,51 @@ const RTabs = class {
         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) {
@@ -240,7 +268,7 @@ const RTabs = class {
         this._changeFocusTab(e.target, e.detail.keycode);
     }
     render() {
-        return (index.h(index.Host, { key: 'ddb0847ae3eb4a03c446b2dd193f2fa9603081df', class: "r-tabs" }, index.h("slot", { key: 'd60346bd45b58534e6ac922ac66c09c1bb04c532' })));
+        return (index.h(index.Host, { key: 'b058fd461951dad54e7eb73f7dc5df838c864ebd', class: "r-tabs" }, index.h("slot", { key: '8e93fded06f0f01dc326e8368aac200d36613753' })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 var index = require('./index-DJ4H_bFj.js');
 var formData = require('./formData-B2DZyLxP.js');
 
-const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #b00c15)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input{vertical-align:top;width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, transparent);opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 0px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);padding:var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));margin-top:var(--r-textarea--input--margin-top, 0);resize:var(--r-textarea--input--resize, both);z-index:var(--r-textarea--input--z-index, 1);outline:var(--r-textarea--input--outline, none);outline-offset:var(--r-textarea--input--outline-offset, 0);pointer-events:var(--r-textarea--input--pointer-events, auto);cursor:var(--r-textarea--input--cursor, inherit)}.r-textarea--container{display:flex;align-items:start;overflow:visible;background-color:var(--r-textarea--container--background-color, var(--r-background-interactive-softest, #f7f7f7));border-width:var(--r-textarea--container--border-width, 1px);border-style:var(--r-textarea--container--border-style, solid);border-color:var(--r-textarea--container--border-color, var(--r-border-soft, #686868));padding:var(--r-textarea--container--padding, 0);margin-top:var(--r-textarea--container--margin-top, var(--r-spacing-025, 0.25rem));box-shadow:var(--r-textarea--container--box-shadow, none);outline:var(--r-textarea--container--outline, none);outline-offset:var(--r-textarea--container--outline-offset, none)}.r-textarea--container[data-readonly=true]{--r-textarea--container--background-color:var(--r-background-soft, #f3f1f0);--r-textarea--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-textarea--container--cursor:text}.r-textarea--container:hover:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-hovered)}.r-textarea--container:active:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-pressed)}.r-textarea--container:focus-within{--r-textarea--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-textarea--container--outline:2px solid var(--r-border-focused, #0071e3);--r-textarea--container--outline-offset:2px}.r-textarea--trailing{display:var(--r-textarea--trailing--display, flex);margin-top:var(--r-textarea--trailing--margin-top, 0.688em);margin-right:var(--r-textarea--trailing--margin-right, 0.625em);margin-left:var(--r-textarea--trailing--margin-left, auto);gap:var(--r-textarea--trailing--gap, 0.625rem)}.r-textarea--trailing:empty{display:none}.r-textarea--readonly-icon{color:var(--r-textarea--readonly-icon--color, var(--r-icon-soft, #686868))}.r-textarea--messages{display:flex;gap:var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem))}.r-textarea--messages--counter{margin-left:auto}.r-textarea--messages:has(r-hint){margin-top:var(--r-spacing-025, 0.25rem)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #b00c15)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input{vertical-align:top;width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, transparent);opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 0px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);padding:var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));margin-top:var(--r-textarea--input--margin-top, 0);resize:var(--r-textarea--input--resize, both);z-index:var(--r-textarea--input--z-index, initial);outline:var(--r-textarea--input--outline, none);outline-offset:var(--r-textarea--input--outline-offset, 0);pointer-events:var(--r-textarea--input--pointer-events, auto);cursor:var(--r-textarea--input--cursor, inherit)}.r-textarea--container{display:flex;align-items:start;overflow:visible;background-color:var(--r-textarea--container--background-color, var(--r-background-interactive-softest, #f7f7f7));border-width:var(--r-textarea--container--border-width, 1px);border-style:var(--r-textarea--container--border-style, solid);border-color:var(--r-textarea--container--border-color, var(--r-border-soft, #686868));padding:var(--r-textarea--container--padding, 0);margin-top:var(--r-textarea--container--margin-top, var(--r-spacing-025, 0.25rem));box-shadow:var(--r-textarea--container--box-shadow, none);outline:var(--r-textarea--container--outline, none);outline-offset:var(--r-textarea--container--outline-offset, none)}.r-textarea--container[data-readonly=true]{--r-textarea--container--background-color:var(--r-background-soft, #f3f1f0);--r-textarea--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-textarea--container--cursor:text}.r-textarea--container:hover:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-hovered)}.r-textarea--container:active:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-pressed)}.r-textarea--container:focus-within{--r-textarea--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-textarea--container--outline:2px solid var(--r-border-focused, #0071e3);--r-textarea--container--outline-offset:2px}.r-textarea--trailing{display:var(--r-textarea--trailing--display, flex);margin-top:var(--r-textarea--trailing--margin-top, 0.688em);margin-right:var(--r-textarea--trailing--margin-right, 0.625em);margin-left:var(--r-textarea--trailing--margin-left, auto);gap:var(--r-textarea--trailing--gap, 0.625rem)}.r-textarea--trailing:empty{display:none}.r-textarea--readonly-icon{color:var(--r-textarea--readonly-icon--color, var(--r-icon-soft, #686868))}.r-textarea--messages{display:flex;gap:var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem))}.r-textarea--messages--counter{margin-left:auto}.r-textarea--messages:has(r-hint){margin-top:var(--r-spacing-025, 0.25rem)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 const RTextarea = class {
     constructor(hostRef) {
@@ -23,11 +23,6 @@ const RTextarea = class {
         this.resize = 'none';
         /** Custom message when the character limit is reached to alert screen reader users. */
         this.characterLimitReachedMessage = "You've reached the character limit.";
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Controls the visibility of validation indicators for the field.
-         * */
-        this.showValid = false;
         /** Custom validity state */
         this.validityState = null;
         /** Custom validity message */
@@ -190,11 +185,8 @@ const RTextarea = class {
         const hasMessage = !!(this.customErrorMessage || this.validityMessage);
         return isInvalid && hasMessage;
     }
-    get hasValidationSuccess() {
-        return this.valid && this.validMessage && this.showValid;
-    }
     get hasMessage() {
-        return this.hasError || this.hasValidationError || this.hasValidationSuccess;
+        return this.hasError || this.hasValidationError;
     }
     /**
      * Determine whether this element should be ignored
@@ -235,7 +227,7 @@ const RTextarea = class {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor, readonly } = this;
+        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, readonly } = this;
         const textareaAttrs = {
             name,
             rows,
@@ -254,14 +246,10 @@ const RTextarea = class {
             'aria-invalid': `${!!invalid}`,
             'aria-required': `${!!required}`
         };
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip && !disabled ? {
-            tooltip,
-            tooltipIcon,
-            tooltipIconColor
+        const labelAttr = label ? {
+            label,
+            fieldIndicator
         } : {};
-        const labelAttr = label ? Object.assign({ label,
-            fieldIndicator }, tooltipAttrs) : {};
         // Filter out event listener properties based on naming convention.
         // Pass them to native element.
         const eventListeners = Object.entries(this).reduce((acc, [key, value]) => {
@@ -272,7 +260,7 @@ const RTextarea = class {
         }, {});
         return (index.h(index.Host, null, index.h("div", { class: "r-textarea--label-container" }, index.h("label", { htmlFor: uniqueId }, label &&
             index.h("r-label", Object.assign({ id: `${uniqueId}-label` }, labelAttr), label)), index.h("slot", { name: "popover" })), hint &&
-            index.h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, index.h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), index.h("div", { class: "r-textarea--trailing" }, this.readonly && index.h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && index.h("slot", { name: "trailing" }))), index.h("div", { class: "r-textarea--messages" }, index.h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage), showCounter && index.h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
+            index.h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, index.h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), index.h("div", { class: "r-textarea--trailing" }, this.readonly && index.h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && index.h("slot", { name: "trailing" }))), index.h("div", { class: "r-textarea--messages" }, index.h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage)), showCounter && index.h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
             index.h("div", { class: "visually-hidden", ref: el => this.characterLimitReachedAlert = el, "aria-live": "assertive" }))));
     }
     get host() { return index.getElement(this); }

package/dist/cjs/r-toast-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DJ4H_bFj.js');
 
-const toastGroupCss = "@media (max-width: 48rem){.sc-r-toast-group-h{--width:auto;--right:24px;--bottom:auto;--left:24px;--padding-right:0}}[data-visually-hidden=true].sc-r-toast-group-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sc-r-toast-group-h{display:var(--display, block);position:var(--position, fixed);top:var(--top, 32px);right:var(--right, 0);bottom:var(--bottom, auto);left:var(--left, auto);overflow:var(--overflow, hidden);overflow-y:var(--overflow-y, auto);width:var(--width, 352px);max-height:var(--max-height, calc(100vh - 64px));padding-right:var(--padding-right, 32px);padding-bottom:var(--padding-bottom, 32px);z-index:var(--z-index, 1)}.r-toast-group.sc-r-toast-group{position:relative;display:var(--r-toast-group--display, flex);flex-direction:var(--r-toast-group--flex-direction, column);justify-content:var(--r-toast-group--justify-content, flex-start);gap:var(--r-toast-group--gap, var(--r-spacing-100, 1rem))}";
+const toastGroupCss = "@media (max-width: 48rem){.sc-r-toast-group-h{--width:auto;--right:24px;--bottom:auto;--left:24px;--padding-right:0}}[data-visually-hidden=true].sc-r-toast-group-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sc-r-toast-group-h{display:var(--display, block);position:var(--position, fixed);top:var(--top, 32px);right:var(--right, 0);bottom:var(--bottom, auto);left:var(--left, auto);overflow:var(--overflow, hidden);overflow-y:var(--overflow-y, auto);width:var(--width, 352px);max-height:var(--max-height, calc(100vh - 64px));padding-right:var(--padding-right, 32px);padding-bottom:var(--padding-bottom, 32px);z-index:var(--z-index, 1)}.r-toast-group.sc-r-toast-group{position:relative;display:var(--r-toast-group--display, flex);flex-direction:var(--r-toast-group--flex-direction, column);justify-content:var(--r-toast-group--justify-content, flex-start);--r-toast-group--spacing:var(--r-spacing-100, 1rem)}";
 
 const ToastGroup = class {
     constructor(hostRef) {
@@ -28,7 +28,7 @@ const ToastGroup = class {
         this.observeSlotContentChange();
     }
     render() {
-        return (index.h(index.Host, { key: '95e0b29bb1b6a45aabb4e7f5da283997c6b707a8' }, index.h("div", { key: '4b42e40646381d78f2b812f483ea993992ec7f12', class: "r-toast-group" }, index.h("slot", { key: 'db3cca9551652a78d9c1579532894fc86ca02b73' }))));
+        return (index.h(index.Host, { key: 'fa291737910745721236d14e38c54e7bf351b85e' }, index.h("div", { key: 'b755a032ee5b1152846946df270fd69ef4370a1a', class: "r-toast-group" }, index.h("slot", { key: 'd73b1e701b6b27b2e46f7f130bee1a16af2de53e' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-DJ4H_bFj.js');
 
-const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #3e5c73);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #3e5c73)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #ff7429);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-regular, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #b00c15);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #b00c15)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([data-visually-hidden=true]){--r-toast--host--transition:all 0.15s;--r-toast--host--transition-delay:0.15s;--r-toast--host--opacity:0;--r-toast--host--height-expanded:0}:host{animation-duration:var(--r-toast--host--animation-duration, 0.3s);animation-fill-mode:var(--r-toast--host--animation-fill-mode, forwards);animation-name:var(--r-toast--host--animation-name, none);box-sizing:var(--r-toast--host--box-sizing, border-box);display:var(--r-toast--host--display, block);height:var(--r-toast--host--height, var(--r-toast--host--height-expanded, auto));opacity:var(--r-toast--host--opacity, 1);overflow:var(--r-toast--host--overflow, hidden);position:var(--r-toast--host--position, relative);transition:var(--r-toast--host--transition, all 0.3s);transition-delay:var(--r-toast--host--transition-delay, 0s)}:host ::slotted(p){margin:0}:host ::slotted(p+p),:host ::slotted(p+ul),:host ::slotted(p+ol){margin-top:1rem}:host .r-toast--trailing-button{--r-button--width:2.75rem;--r-button--height:2.75rem;--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;position:relative;top:-8px;right:-8px}:host .r-toast--trailing-button:hover{--r-button--color:var(--r-text-strong, #000000);--r-button--background-color:var(--r-background-interactive-hovered, #000000)}:host .r-toast--trailing-button:active{--r-button--transform:scale(0.94)}@media (prefers-reduced-motion){:host{--r-toast--transition:none;--r-toast--host--animation-name:none}}.r-toast{font-family:var(--r-toast--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-toast--font-size, var(--r-font-size-400, 1rem));display:var(--r-toast--display, flex);flex-direction:var(--r-toast--flex-direction, row);align-items:var(--r-toast--align-items, stretch);gap:var(--r-toast--gap, var(--r-spacing-050, 0.5rem));padding:var(--r-toast--padding, 12px);border-width:var(--r-toast--border-width, 1px);border-style:var(--r-toast--border-style, solid);border-color:var(--r-toast--border-color, var(--r-status-info-regular, #3e5c73));background-color:var(--r-toast--background-color, var(--r-status-info-soft, #f8fafb));box-sizing:var(--r-toast--box-sizing, border-box);transition:var(--r-toast--transition, all 0.3s)}.r-toast--main{flex:var(--r-toast--content--flex, 1)}.r-toast--leading-icon{color:var(--r-toast--leading-icon--color, var(--r-status-info-regular, #3e5c73));margin-top:var(--r-toast--leading-icon--margin-top, 0);margin-right:var(--r-toast--leading-icon--margin-right, var(--r-spacing-025, 0.25rem))}.r-toast--headline{color:var(--r-toast--headline--color, var(--r-text-regular, #282828));font-size:var(--r-toast--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-toast--headline--font-weight, var(--r-font-weight-semibold, 600));line-height:var(--r-toast--headline--line-height, var(--r-line-height-m, 1.5));margin:var(--r-toast--headline--margin, 0)}.r-toast--content{display:var(--r-toast--content--display, block);color:var(--r-toast--content--color, var(--r-text-regular, #282828));line-height:var(--r-toast--content--line-height, var(--r-line-height-m, 1.5));font-size:var(--r-toast--content--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--content--font-weight, var(--r-font-weight-regular, 400));margin-top:var(--r-toast--content--margin-top, 0)}.r-toast--action{display:var(--r-toast--action--display, flex);margin-top:var(--r-toast--action--margin-top, var(--r-spacing-050, 0.5rem));color:var(--r-toast--action--color, var(--r-text-regular, #282828));font-size:var(--r-toast--action--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--action--font-weight, var(--r-font-weight-light, 300))}.r-toast--action-link,.r-toast--action ::slotted(r-button){--r-button--background-color:transparent;--r-button--border-width:0;--r-button--color:var(--r-text-regular);--r-button--padding:10px 2px 18px 2px;--r-button--slot--text-decoration:underline;--r-button--slot--text-underline-offset:9px}.r-toast--action-link:hover,.r-toast--action ::slotted(r-button:hover:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-hovered)}.r-toast--action-link:active,.r-toast--action ::slotted(r-button:active:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-pressed)}.r-toast--action ::slotted(*){font-size:inherit;color:inherit}.r-toast--action ::slotted(a){color:var(--r-toast--action--color, var(--r-text-regular, #282828))}";
+const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #3e5c73);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #3e5c73)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #ff7429);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-regular, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #b00c15);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #b00c15)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([data-visually-hidden=true]){--r-toast--host--animation-name:fade-out}:host(:not(:last-child)){margin-bottom:var(--r-toast-group--spacing, 0)}:host{animation-duration:var(--r-toast--host--animation-duration, 0.3s);animation-fill-mode:var(--r-toast--host--animation-fill-mode, forwards);animation-name:var(--r-toast--host--animation-name, fade-in);animation-timing-function:var(--r-toast--host--animation-timing-function, ease-in-out);box-sizing:var(--r-toast--host--box-sizing, border-box);display:var(--r-toast--host--display, block);height:var(--r-toast--host--height, var(--r-toast--host--height-expanded, auto));opacity:var(--r-toast--host--opacity, 1);overflow:var(--r-toast--host--overflow, hidden);position:var(--r-toast--host--position, relative);transition:var(--r-toast--host--transition, none);transition-delay:var(--r-toast--host--transition-delay, 0s)}:host ::slotted(p){margin:0}:host ::slotted(p+p),:host ::slotted(p+ul),:host ::slotted(p+ol){margin-top:1rem}:host .r-toast--trailing-button{--r-button--width:2.75rem;--r-button--height:2.75rem;--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;position:relative;top:-8px;right:-8px}:host .r-toast--trailing-button:hover{--r-button--color:var(--r-text-strong, #000000);--r-button--background-color:var(--r-background-interactive-hovered, #000000)}:host .r-toast--trailing-button:active{--r-button--transform:scale(0.94)}@media (prefers-reduced-motion){:host{transition:none;animation-name:none}}@keyframes fade-in{from{opacity:0;max-height:0;margin-bottom:0}to{opacity:1;max-height:fit-content;margin-bottom:var(--r-toast-group--spacing, 0)}}@keyframes fade-out{from{opacity:1;max-height:fit-content;margin-bottom:var(--r-toast-group--spacing, 0)}to{opacity:0;max-height:0;margin-bottom:0}}.r-toast{font-family:var(--r-toast--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-toast--font-size, var(--r-font-size-400, 1rem));display:var(--r-toast--display, flex);flex-direction:var(--r-toast--flex-direction, row);align-items:var(--r-toast--align-items, stretch);gap:var(--r-toast--gap, var(--r-spacing-050, 0.5rem));padding:var(--r-toast--padding, 12px);border-width:var(--r-toast--border-width, 1px);border-style:var(--r-toast--border-style, solid);border-color:var(--r-toast--border-color, var(--r-status-info-regular, #3e5c73));background-color:var(--r-toast--background-color, var(--r-status-info-soft, #f8fafb));box-sizing:var(--r-toast--box-sizing, border-box);transition:var(--r-toast--transition, none)}.r-toast--main{flex:var(--r-toast--content--flex, 1)}.r-toast--leading-icon{color:var(--r-toast--leading-icon--color, var(--r-status-info-regular, #3e5c73));margin-top:var(--r-toast--leading-icon--margin-top, 0);margin-right:var(--r-toast--leading-icon--margin-right, var(--r-spacing-025, 0.25rem))}.r-toast--headline{color:var(--r-toast--headline--color, var(--r-text-regular, #282828));font-size:var(--r-toast--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-toast--headline--font-weight, var(--r-font-weight-semibold, 600));line-height:var(--r-toast--headline--line-height, var(--r-line-height-m, 1.5));margin:var(--r-toast--headline--margin, 0)}.r-toast--content{display:var(--r-toast--content--display, block);color:var(--r-toast--content--color, var(--r-text-regular, #282828));line-height:var(--r-toast--content--line-height, var(--r-line-height-m, 1.5));font-size:var(--r-toast--content--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--content--font-weight, var(--r-font-weight-regular, 400));margin-top:var(--r-toast--content--margin-top, 0)}.r-toast--action{display:var(--r-toast--action--display, flex);margin-top:var(--r-toast--action--margin-top, var(--r-spacing-050, 0.5rem));color:var(--r-toast--action--color, var(--r-text-regular, #282828));font-size:var(--r-toast--action--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--action--font-weight, var(--r-font-weight-light, 300))}.r-toast--action-link,.r-toast--action ::slotted(r-button){--r-button--background-color:transparent;--r-button--border-width:0;--r-button--color:var(--r-text-regular);--r-button--padding:10px 2px 18px 2px;--r-button--slot--text-decoration:underline;--r-button--slot--text-underline-offset:9px}.r-toast--action-link:hover,.r-toast--action ::slotted(r-button:hover:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-hovered)}.r-toast--action-link:active,.r-toast--action ::slotted(r-button:active:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-pressed)}.r-toast--action ::slotted(*){font-size:inherit;color:inherit}.r-toast--action ::slotted(a){color:var(--r-toast--action--color, var(--r-text-regular, #282828))}";
 
 const Toast = class {
     constructor(hostRef) {
@@ -11,6 +11,7 @@ const Toast = class {
         this.toastDismiss = index.createEvent(this, "dismiss");
         this.toastReveal = index.createEvent(this, "reveal");
         this.toastHide = index.createEvent(this, "hide");
+        this.toastDismissed = index.createEvent(this, "dismissed");
         /**
          * Controls if toast is initially shown.
          * */
@@ -51,6 +52,7 @@ const Toast = class {
          * @default 300
          * */
         this.delayBeforeRemoval = 300;
+        this.animationCompleted = false;
         /** Unique id for each accordion item/row */
         this.uniqueId = `r-toast-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.hasElContent = (selector) => {
@@ -69,6 +71,12 @@ const Toast = class {
                 clearTimeout(this.delayTimer);
             }, time);
         };
+        this.handleAnimationEnd = (event) => {
+            if (event.animationName === 'fade-out') {
+                this.animationCompleted = true;
+                this.toastDismissed.emit();
+            }
+        };
         this.handleTrailingButtonClick = () => {
             this.rClickToastTrailingIcon.emit();
             this.dismiss();
@@ -86,9 +94,15 @@ const Toast = class {
         this.host.style.setProperty('--r-toast--host--height-expanded', `${this.host.offsetHeight}px`);
         this.isOpen = false;
         this.toastDismiss.emit();
+        this.animationCompleted = false;
         if (this.removalTimer)
             clearTimeout(this.removalTimer);
-        this.removalTimer = setTimeout(() => this.host.remove(), this.delayBeforeRemoval);
+        this.removalTimer = setTimeout(() => {
+            if (!this.animationCompleted) {
+                this.toastDismissed.emit();
+            }
+            this.host.remove();
+        }, this.delayBeforeRemoval);
     }
     /**
      * Reveals the toast notification by setting it to a visible state.
@@ -131,7 +145,7 @@ const Toast = class {
         return this.hasElContent('[slot="trailing"]');
     }
     get isDismissManual() {
-        return this.dismissMode === 'manual' || this.dismissable;
+        return this.dismissMode === 'manual';
     }
     get hasTrailing() {
         return this.hasTrailingSlot || this.isDismissManual;
@@ -180,6 +194,12 @@ const Toast = class {
     componentWillLoad() {
         this.open ? this.reveal() : this.hide();
     }
+    componentDidLoad() {
+        this.host.addEventListener('animationend', this.handleAnimationEnd);
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('animationend', this.handleAnimationEnd);
+    }
     render() {
         const { headline, href, action, target, trailingIcon } = this;
         const hostAttrs = this.announced ? {
@@ -198,14 +218,14 @@ const Toast = class {
             name: trailingIcon,
             size: 'm'
         };
-        return (index.h(index.Host, Object.assign({ key: 'f2eeed32d8cb3a36f985060b2301d5c4952740a3' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }), index.h("div", { key: '6dbcb19980495059a97ed6e2cf77b865c62f1d88', class: "r-toast" }, this.hasLeading &&
-            index.h("div", { key: 'f3a7de9a3045b7e0d965d956d0dc36ac03dfb3f6', class: "r-toast--leading" }, this.hasLeadingSlot && index.h("slot", { key: '942830d225925446c5e1bc6f5fc9e47caf8e2530', name: "leading" }), this.leadingIconVisible && index.h("r-icon", Object.assign({ key: '4c4bdd20f9c69c59d4763d638dc2f3730eee581c', class: "r-toast--leading-icon" }, leadingIconAttrs))), index.h("div", { key: '81180a1217f10f7cf4f630fd7866551deb8c3de2', class: "r-toast--main" }, this.hasHeadline &&
-            index.h("h2", { key: '2e22c9900e8f407739869a696f5d2dc8ec638caf', class: "r-toast--headline" }, index.h("slot", { key: '9a123b8a5456bd5f881981a9c89c5d35f15e9415', name: "headline" }, headline)), this.hasContent &&
-            index.h("div", { key: '34b506b6ef0ec533cec80c902d566ad428f55c7f', class: "r-toast--content r-typography" }, index.h("slot", { key: '6231fd58c33b9219a780838f35a2177661113cfb', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            index.h("div", { key: 'a856b17da30fa647b04e667b5d401b613490d2e7', class: "r-toast--action" }, index.h("slot", { key: '9c64432a3c76ba430de1ed680b336fce9cc2bf6a', name: "action" }, this.hasActionLink &&
-                index.h("r-button", Object.assign({ key: '05d60b75ac3eabfd75c3b30f38d8a6f36a7d9b84', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
-            index.h("div", { key: 'b5926bf99dd9bcf8a2783577156fbeb6ef14c889', class: "r-toast--trailing" }, this.hasTrailingSlot && index.h("slot", { key: 'ba860676e3af6ab4998ed5a2ce3691eefc01511a', name: "trailing" }), this.isDismissManual &&
-                index.h("r-icon-button", Object.assign({ key: '19827fa126fa17763abd4f7efd1459b68e3bfa3f' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), index.h("slot", { key: 'f398a89d77917a391a1bd883cdd40d87985931ff', name: "dismiss" }))))));
+        return (index.h(index.Host, Object.assign({ key: '72b7c716dc4cdb477d038c53d74909ccc25b2969' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }), index.h("div", { key: '1432abcf651e29aca897b15fe84f7f587ad276dc', class: "r-toast" }, this.hasLeading &&
+            index.h("div", { key: 'd7b672519074880fa6f6f3c4c2177dc11b73a872', class: "r-toast--leading" }, this.hasLeadingSlot && index.h("slot", { key: 'bbe0f9862ff7cb439116b2eb3041ce98ed1ddcb8', name: "leading" }), this.leadingIconVisible && index.h("r-icon", Object.assign({ key: 'ecf6d11d1a699b5d37d5a18eb9df678629cff3af', class: "r-toast--leading-icon" }, leadingIconAttrs))), index.h("div", { key: '2e90162bc7cb3144356efc4072db6d8743bb08d1', class: "r-toast--main" }, this.hasHeadline &&
+            index.h("h2", { key: 'd2872eb73463a0b074524d279f94c4482abe1e82', class: "r-toast--headline" }, index.h("slot", { key: '20086f692f4de101e874bef083dfaa299a09a849', name: "headline" }, headline)), this.hasContent &&
+            index.h("div", { key: '91cf6f661abe2442e362826b735c5448aeac8953', class: "r-toast--content r-typography" }, index.h("slot", { key: 'e156039d4cdbc81511cb8135570523b86b360007', onSlotchange: this.handleSlotChange })), this.hasAction &&
+            index.h("div", { key: '3e1e1d09dbbcd144c3ff426b0611ea9e2b8bf664', class: "r-toast--action" }, index.h("slot", { key: 'c746ab13ece27873eef3fbef5e8be29992f8a416', name: "action" }, this.hasActionLink &&
+                index.h("r-button", Object.assign({ key: '36a864ecd40815f2b0a7241d635d5a3966e75997', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
+            index.h("div", { key: 'becd53f1c89e40e314f79d45886151a8f56c6e84', class: "r-toast--trailing" }, this.hasTrailingSlot && index.h("slot", { key: '818cf3bb17290a498d7c626e64662e42a6d5242d', name: "trailing" }), this.isDismissManual &&
+                index.h("r-icon-button", Object.assign({ key: '28c2963f0a1f673bb72991ba6c888b99c48b69bb' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), index.h("slot", { key: '437e527e868b58e47f6b972220ddf2c657d3a7f2', name: "dismiss" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {