@riverty/web-components 6.1.0 → 6.2.0

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.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}.r-stepper-item{display:var(--r-stepper-item--display, flex);flex-direction:var(--r-stepper-item--flex-direction, column);align-items:var(--r-stepper-item--align-items, center);justify-content:var(--r-stepper-item--justify-content, center);font-size:var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--color, var(--r-text-regular, #282828));font-family:var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));width:var(--r-stepper-item--width, 36px);white-space:var(--r-stepper-item--white-space, nowrap);gap:var(--r-stepper-item--gap, 8px)}.r-stepper-item--indicator{width:var(--r-stepper-item--indicator--width, 20px);height:var(--r-stepper-item--indicator--height, 20px);line-height:var(--r-stepper-item--indicator--line-height, 20px);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, 8px);margin-right:var(--r-stepper-item--indicator--margin-right, 8px)}.r-stepper-item--indicator--step-number{vertical-align:var(--r-stepper-item--step-number--vertical-align, middle)}.r-stepper-item--text{font-size:var(--r-stepper-item--text--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--text--color, var(--r-text-regular, #282828));text-align:var(--r-stepper-item--text--text-align, center)}";
+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) {
@@ -10,13 +10,28 @@ const StepperItem = class {
         /** Defines a property active that determines whether the step is active */
         this.active = false;
     }
+    /**
+     * Checks if the slot contains only visually-hidden elements (no visible text).
+     * Returns true if only visually-hidden elements are present.
+     */
+    get hasOnlyVisuallyHiddenContent() {
+        var _a;
+        const textContent = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        const visuallyHiddenElement = this.host.querySelector('.visually-hidden');
+        if (!visuallyHiddenElement) {
+            return false;
+        }
+        const visuallyHiddenText = visuallyHiddenElement.textContent || '';
+        const remainingText = textContent.replace(visuallyHiddenText.trim(), '').trim();
+        return !remainingText.length;
+    }
     get hasText() {
         return this.host.textContent.trim().length > 0;
     }
     render() {
         const number = this.number || this.stepNumber;
-        return (h(Host, { key: '3613c92e8ac7583bf5e3db7e90edca9a921fa475' }, h("div", { key: 'ca2c38443d9a855baea829e99ec9c642c279a3be', class: "r-stepper-item" }, h("div", { key: '513f01a9a3ac3a87c3622b14f051765121308241', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
-            h("div", { key: 'cec8659e5ff31608b05c6f62798a8a1048cd7539', class: "r-stepper-item--text" }, h("slot", { key: '6a9d581948decc8a15e66401275cb85bf52bb459' })))));
+        return (h(Host, { key: '4f55b5491ec5eee7cad6313fa85e7d6cc89b2178', role: "listitem", "aria-current": this.active ? 'step' : null }, h("div", { key: '2864f0e19f2f11af0f8674b9a701cd948024c085', class: "r-stepper-item" }, h("div", { key: 'de896ec98a13a4b20965a3ca58c5517a30de1f74', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, iconAriaLabel: this.label, size: "s" })) : number !== undefined ? (h("span", { "aria-hidden": `${!this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
+            h("div", { key: 'cf3b6b5e3f4454830ecce06a6b6c16225aadd93e', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, h("slot", { key: '65bd1f231c445f9681750c71ef156297edbf05fb' })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,7 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 
-const stepperCss = ".r-stepper{display:var(--r-stepper--display, flex);align-items:var(--r-stepper--align-items, top)}.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, 10px);background-color:var(--r-stepper-divider--background-color, var(--r-text-regular, #282828))}";
+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) {
         registerInstance(this, hostRef);
@@ -9,15 +10,87 @@ const Stepper = class {
         this.completed = 0;
         /** _DEPRECATED_ (use `completed` instead) Completed steps. Default value 0 */
         this.completeSteps = 0;
+        /** Label for completed steps for screen reader users. */
+        this.completedStepsLabel = 'Completed';
+        this.handleSlotChange = () => {
+            this.setStepStatus();
+            this.updateVisibilityOfStepText();
+        };
+    }
+    handleCompletedStepsLabelChange() {
+        this.setStepStatus();
+    }
+    onResize() {
+        this.updateVisibilityOfStepText();
     }
     get hasSteps() {
         return this.host.querySelectorAll('r-stepper-item').length > 0;
     }
+    componentDidLoad() {
+        this.setStepStatus();
+        this.updateVisibilityOfStepText();
+    }
+    setStepStatus() {
+        var _a;
+        const innerSteps = ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('r-stepper-item')) || [];
+        const slotSteps = this.host.querySelectorAll('r-stepper-item') || [];
+        const allSteps = [...Array.from(innerSteps), ...Array.from(slotSteps)];
+        allSteps === null || allSteps === void 0 ? void 0 : allSteps.forEach((step) => {
+            const existingSpan = step.querySelector('.visually-hidden');
+            if (existingSpan) {
+                existingSpan.remove();
+            }
+            const span = document.createElement('span');
+            span.className = 'visually-hidden';
+            span.textContent = `${step.complete ? `${this.completedStepsLabel}.` : ''}`;
+            step.prepend(span);
+        });
+    }
+    getTextElementWidth(stepElement) {
+        var _a;
+        const textElement = (_a = stepElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-stepper-item--text');
+        if (!textElement)
+            return 0;
+        // Temporarily remove visually-hidden to get the natural width
+        const wasHidden = textElement.classList.contains('visually-hidden');
+        if (wasHidden) {
+            textElement.classList.remove('visually-hidden');
+        }
+        const width = textElement.offsetWidth;
+        // Restore the previous state
+        if (wasHidden) {
+            textElement.classList.add('visually-hidden');
+        }
+        return width;
+    }
+    updateVisibilityOfStepText() {
+        const slotSteps = this.host.querySelectorAll('r-stepper-item') || [];
+        let totalWidth = 0;
+        slotSteps.forEach((step) => {
+            totalWidth += this.getTextElementWidth(step) + OFFSET;
+        });
+        const isOverflowing = totalWidth >= this.host.offsetWidth;
+        if (isOverflowing) {
+            slotSteps.forEach((step) => {
+                var _a;
+                (_a = step.shadowRoot.querySelector('.r-stepper-item--text')) === null || _a === void 0 ? void 0 : _a.classList.add('visually-hidden');
+            });
+        }
+        else {
+            slotSteps.forEach((step) => {
+                var _a;
+                (_a = step.shadowRoot.querySelector('.r-stepper-item--text')) === null || _a === void 0 ? void 0 : _a.classList.remove('visually-hidden');
+            });
+        }
+    }
     render() {
         const completed = this.completed || this.completeSteps;
-        return (h(Host, { key: '196ddb8922499f7222418d19cd6ddc994c211119' }, h("div", { key: '2220fcb8ec2125a15db198ec7948780d8d331e50', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '69c7eb87d53b67b19efc6da0ab489debc7e6b06c' }))));
+        return (h(Host, { key: '9a8684fe78d610b90c824a8bd06371efc222b94a' }, h("ol", { key: '89c37db27cab79946f29e5302784f3a17c853cef', class: "r-stepper", "aria-label": this.label || null }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '92d043648fb9c12ca5222a569ec40a917798af5a', onSlotchange: this.handleSlotChange }))));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "completedStepsLabel": ["handleCompletedStepsLabelChange"]
+    }; }
 };
 Stepper.style = stepperCss;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host } from './index-CTxpqopm.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))}";
 
@@ -16,7 +16,7 @@ const RTabPanel = class {
             active,
             'aria-labelledby': tabId
         };
-        return (h(Host, Object.assign({ key: 'db95a245a8aa8900e1cea5af71ac488352954299', class: "r-typography" }, hostAttrs), h("div", { key: '0e720978d72a9d9ba9da367794ac96c49737d854', class: "r-tab-panel" }, h("slot", { key: 'f16a0da6c7d3d2c1e0c57778837bdb47879468b4' }))));
+        return (h(Host, Object.assign({ key: 'f58718704b5625e82bfa531bcbf2b6c94c2e1ae3', class: "r-typography" }, hostAttrs), h("div", { key: '75dc2720b47da749a4d1e168e20338b94724a369', class: "r-tab-panel" }, h("slot", { key: '9710a7fc07751091c4ec0c97ae1d205ae540fdfd' }))));
     }
 };
 RTabPanel.style = tabPanelCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.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}}";
 
@@ -49,9 +49,9 @@ const RTab = class {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (h(Host, Object.assign({ key: '619d576a8efdfa1f941be9760312d7254a922f10', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '15d69c67544bdb845df4b10411ff3e55fb5671a2', class: "r-tab" }, disabled ?
+        return (h(Host, Object.assign({ key: '270a02c942f223ef5ac0f9f83d33c51bfd88c1c7', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '60bbf17ad69478028579b61d03ca316a55ce52ea', class: "r-tab" }, disabled ?
             h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
-            : h("slot", { name: "icon" }), h("slot", { key: '59e5f0740a92f1cfeb71ab9709db2f2a13152fb4' }))));
+            : h("slot", { name: "icon" }), h("slot", { key: '5b0582bebdf14a0de908d23d2a08d80cf1850b50' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.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)}";
 
@@ -162,9 +162,9 @@ const RTabsList = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '8191b15343491c66259b583930ee73916c6bbd9e', scrollable: `${this.scrollable}`, role: "tablist" }, h("div", { key: 'e5c2a308889986b80549aba5b9a7bec8e6961891', class: "r-tabs-list" }, this.scrollable &&
-            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 && h("div", { key: '62e5c2ca7e76323ff367940cd9ab1cb6e5b6db74', class: "r-tabs-list--scroll-indicator" })), h("div", { key: '5f0b264eb4abaf51d4e2f3a85a92d89ff9e378f5', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, h("slot", { key: '38f6060007491fa9b50cf7cf7d36372c32e63d97' })), this.scrollable &&
-            h("div", { key: 'd51473735f550b81b5ba630126fe3bcc41848648', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && h("div", { key: '89d712984dd7797cbca0df86989cf8eedcd95a61', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
+        return (h(Host, { key: '19666af123fe058aa3e654c153ad84ec16861a59', scrollable: `${this.scrollable}`, role: "tablist" }, h("div", { key: '5de7241f57b419133f81ae565bf517873a8e9268', class: "r-tabs-list" }, this.scrollable &&
+            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 && h("div", { key: '76fbeab529e2a7869ac7e946b1c0863969114888', class: "r-tabs-list--scroll-indicator" })), h("div", { key: 'd520b386242700c000daf85eba8d50fb014fc616', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, h("slot", { key: 'f8534275445ed4d32154519f0a8f592ee7ea3353' })), this.scrollable &&
+            h("div", { key: '8ca03d4864eba5af975de4dd6dc6fd3c3e8be108', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && h("div", { key: '1a0534b79bbe3273a73f48530a3a17ccac0d7826', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 
 const tabsCss = ":host{display:block;margin-top:var(--r-spacing-150, 1.5rem)}";
 
@@ -266,7 +266,7 @@ const RTabs = class {
         this._changeFocusTab(e.target, e.detail.keycode);
     }
     render() {
-        return (h(Host, { key: 'b058fd461951dad54e7eb73f7dc5df838c864ebd', class: "r-tabs" }, h("slot", { key: '8e93fded06f0f01dc326e8368aac200d36613753' })));
+        return (h(Host, { key: '0737bf78e596f8fb9d4a2ec10f1503d1072f2683', class: "r-tabs" }, h("slot", { key: '5bc87b17930c9ea159ef29335c6b11f0f4c7d43e' })));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.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, 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}";

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.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);--r-toast-group--spacing:var(--r-spacing-100, 1rem)}";
+const toastGroupCss = ":host([data-visually-hidden=true]){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:var(--display, block);position:var(--position, fixed);top:var(--top, 0);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-top:var(--padding-top, 16px);padding-bottom:var(--padding-bottom, 32px);z-index:var(--z-index, 1)}:host ::slotted(r-toast){margin-top:var(--r-spacing-100, 1rem)}.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)}";
 
 const ToastGroup = class {
     constructor(hostRef) {
@@ -9,8 +9,17 @@ const ToastGroup = class {
             this.host.setAttribute('data-visually-hidden', `${!this.hasChildren}`);
         };
         this.observeSlotContentChange = () => {
-            this.observer = new MutationObserver(() => {
+            this.observer = new MutationObserver(async (mutations) => {
+                var _a, _b;
                 this.updateHiddenState();
+                const addedToast = mutations
+                    .flatMap(mutation => Array.from(mutation.addedNodes))
+                    .find(node => node.nodeName === 'R-TOAST');
+                if (addedToast) {
+                    // Measure height then reveal for smooth animation
+                    await ((_a = addedToast.measureAndPrepareHeight) === null || _a === void 0 ? void 0 : _a.call(addedToast));
+                    await ((_b = addedToast.reveal) === null || _b === void 0 ? void 0 : _b.call(addedToast));
+                }
             });
             this.observer.observe(this.host, {
                 childList: true,
@@ -26,7 +35,7 @@ const ToastGroup = class {
         this.observeSlotContentChange();
     }
     render() {
-        return (h(Host, { key: 'fa291737910745721236d14e38c54e7bf351b85e' }, h("div", { key: 'b755a032ee5b1152846946df270fd69ef4370a1a', class: "r-toast-group" }, h("slot", { key: 'd73b1e701b6b27b2e46f7f130bee1a16af2de53e' }))));
+        return (h(Host, { key: '85ab80be1fca1d1a9c3dc2e17de616747748a4dd' }, h("div", { key: 'a88670978563caeb8f500f4b5f9af2bcd0ade386', class: "r-toast-group" }, h("slot", { key: 'ab1480a47cfae0cacc45de708d51e8a77b6dfb85' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.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--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 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-duration:0.2s;--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);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;margin-top:-8px;margin-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}to{opacity:1;max-height:var(--r-toast--host--height-expanded)}}@keyframes fade-out{from{opacity:1;max-height:var(--r-toast--host--height-expanded);margin-top:var(--r-spacing-100, 1rem)}to{opacity:0;max-height:0;margin-top: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);word-break:var(--r-toast--content--word-break, break-word)}.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);word-break:var(--r-toast--content--word-break, break-word)}.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) {
@@ -72,7 +72,17 @@ const Toast = class {
         this.handleAnimationEnd = (event) => {
             if (event.animationName === 'fade-out') {
                 this.animationCompleted = true;
-                this.toastDismissed.emit();
+                // Only emit if still connected to DOM
+                if (this.host.isConnected) {
+                    this.toastDismissed.emit();
+                }
+                // Clear height after fade-out completes as final cleanup
+                this.host.style.setProperty('--r-toast--host--height-expanded', null);
+            }
+            else if (event.animationName === 'fade-in') {
+                // Clear height restriction after fade-in completes to allow natural resizing
+                // The toast can now grow/shrink dynamically without animation constraints
+                this.host.style.setProperty('--r-toast--host--height-expanded', null);
             }
         };
         this.handleTrailingButtonClick = () => {
@@ -89,17 +99,28 @@ const Toast = class {
      * hide the toast before the auto-dismiss timer expires.
      */
     async dismiss() {
-        this.host.style.setProperty('--r-toast--host--height-expanded', `${this.host.offsetHeight}px`);
+        // Re-measure height before fade-out to ensure smooth collapse animation
+        // This captures the current natural height for the animation
+        this.updateHeightVariable();
         this.isOpen = false;
         this.toastDismiss.emit();
         this.animationCompleted = false;
         if (this.removalTimer)
             clearTimeout(this.removalTimer);
         this.removalTimer = setTimeout(() => {
-            if (!this.animationCompleted) {
+            if (!this.animationCompleted && this.host.isConnected) {
                 this.toastDismissed.emit();
             }
-            this.host.remove();
+            // Safely remove from DOM - check parent exists and contains this element
+            if (this.host.isConnected && this.host.parentNode) {
+                try {
+                    this.host.remove();
+                }
+                catch (e) {
+                    // In test environments, element may have already been removed
+                    // or DOM structure changed - silently ignore
+                }
+            }
         }, this.delayBeforeRemoval);
     }
     /**
@@ -108,27 +129,60 @@ const Toast = class {
      * automatically dismiss the toast after the specified duration.
      */
     async reveal() {
+        // Measure height for smooth fade-in animation
+        await this.measureAndPrepareHeight();
         this.isOpen = true;
-        this.toastReveal.emit();
+        // Only emit if still connected to DOM
+        if (this.host.isConnected) {
+            this.toastReveal.emit();
+        }
         if (this.delayTimer)
             clearTimeout(this.delayTimer);
         if (this.isDismissManual)
             return;
         if (this.hasDelay)
             this.startDelayTimer();
+        return this;
     }
     /**
      * Hides toast, keeps it in dom.
      * */
     async hide() {
+        this.updateHeightVariable();
         this.isOpen = false;
-        this.toastHide.emit();
+        // Only emit if still connected to DOM
+        if (this.host.isConnected) {
+            this.toastHide.emit();
+        }
+        return this;
     }
     /**
      * Toggles visibility of the toast.
      * */
     async toggle() {
         this.isOpen ? this.hide() : this.reveal();
+        return this;
+    }
+    /**
+     * Measures the natural height of toast and prepares it for reveal animation.
+     * This should be called on newly added toasts before they are revealed.
+     */
+    async measureAndPrepareHeight() {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                // Temporarily override animation to prevent visual glitches during measurement
+                const tempStyle = this.host.style.cssText;
+                this.host.style.cssText = tempStyle + '; animation: none !important; max-height: none !important; height: auto !important;';
+                const height = this.host.scrollHeight;
+                // Restore original style
+                this.host.style.cssText = tempStyle;
+                // Set the measured height for animation
+                if (height > 0) {
+                    this.host.style.setProperty('--r-toast--host--height-expanded', `${height}px`);
+                }
+                resolve();
+            });
+        });
     }
     handleOpenChange() {
         this.isOpen ? this.hide() : this.reveal();
@@ -190,10 +244,25 @@ const Toast = class {
         }
     }
     componentWillLoad() {
-        this.open ? this.reveal() : this.hide();
+        // Set initial state but don't trigger reveal yet - let mutation observer handle it
+        this.isOpen = this.open;
     }
-    componentDidLoad() {
+    async componentDidLoad() {
         this.host.addEventListener('animationend', this.handleAnimationEnd);
+        // Measure and store the toast height for smooth initial fade-in animation
+        await this.measureAndPrepareHeight();
+        // Start auto-dismiss timer if configured and toast is initially open
+        if (this.isOpen && !this.isDismissManual && this.hasDelay) {
+            this.startDelayTimer();
+        }
+    }
+    updateHeightVariable() {
+        // Use requestAnimationFrame to ensure the element is fully rendered
+        requestAnimationFrame(() => {
+            if (this.host.offsetHeight > 0) {
+                this.host.style.setProperty('--r-toast--host--height-expanded', `${this.host.offsetHeight}px`);
+            }
+        });
     }
     disconnectedCallback() {
         this.host.removeEventListener('animationend', this.handleAnimationEnd);
@@ -216,14 +285,14 @@ const Toast = class {
             name: trailingIcon,
             size: 'm'
         };
-        return (h(Host, Object.assign({ key: '72b7c716dc4cdb477d038c53d74909ccc25b2969' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }), h("div", { key: '1432abcf651e29aca897b15fe84f7f587ad276dc', class: "r-toast" }, this.hasLeading &&
-            h("div", { key: 'd7b672519074880fa6f6f3c4c2177dc11b73a872', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: 'bbe0f9862ff7cb439116b2eb3041ce98ed1ddcb8', name: "leading" }), this.leadingIconVisible && h("r-icon", Object.assign({ key: 'ecf6d11d1a699b5d37d5a18eb9df678629cff3af', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '2e90162bc7cb3144356efc4072db6d8743bb08d1', class: "r-toast--main" }, this.hasHeadline &&
-            h("h2", { key: 'd2872eb73463a0b074524d279f94c4482abe1e82', class: "r-toast--headline" }, h("slot", { key: '20086f692f4de101e874bef083dfaa299a09a849', name: "headline" }, headline)), this.hasContent &&
-            h("div", { key: '91cf6f661abe2442e362826b735c5448aeac8953', class: "r-toast--content r-typography" }, h("slot", { key: 'e156039d4cdbc81511cb8135570523b86b360007', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            h("div", { key: '3e1e1d09dbbcd144c3ff426b0611ea9e2b8bf664', class: "r-toast--action" }, h("slot", { key: 'c746ab13ece27873eef3fbef5e8be29992f8a416', name: "action" }, this.hasActionLink &&
-                h("r-button", Object.assign({ key: '36a864ecd40815f2b0a7241d635d5a3966e75997', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
-            h("div", { key: 'becd53f1c89e40e314f79d45886151a8f56c6e84', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '818cf3bb17290a498d7c626e64662e42a6d5242d', name: "trailing" }), this.isDismissManual &&
-                h("r-icon-button", Object.assign({ key: '28c2963f0a1f673bb72991ba6c888b99c48b69bb' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), h("slot", { key: '437e527e868b58e47f6b972220ddf2c657d3a7f2', name: "dismiss" }))))));
+        return (h(Host, Object.assign({ key: '4fa8a3d2db292941933f73437d823f3f6581d626' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}`, style: { visibility: this.isOpen ? 'visible' : 'hidden' } }), h("div", { key: '20506092a2459d836918da00f1670cf18730a42c', class: "r-toast" }, this.hasLeading &&
+            h("div", { key: '384ce331ff3825bc01323bbb6f3972ccd4198223', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: 'eb455c5729d37431b8576dfcaff6eceead5000bb', name: "leading" }), this.leadingIconVisible && h("r-icon", Object.assign({ key: '3b0b3e9d9516a072d5c3b5ca50ab3353cdf20053', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: 'dcfc949dda66a2437cbb4b3e2847266e55ab83d6', class: "r-toast--main" }, this.hasHeadline &&
+            h("h2", { key: 'c1abf4f2b6abc7b53db6727ff09f027d4b2a940d', class: "r-toast--headline" }, h("slot", { key: '9b6a57199eac2a4e0f96d38cc0b3d02adc2bb279', name: "headline" }, headline)), this.hasContent &&
+            h("div", { key: '6c182bd58efe6cd404ae7b20ee2464f3965b889d', class: "r-toast--content r-typography" }, h("slot", { key: 'a49fd6e859f1b512069fc3bed9c0c21da35d78cc', onSlotchange: this.handleSlotChange })), this.hasAction &&
+            h("div", { key: 'b0282c4677483b96b3eac7ddbdb2e13ae245ebe2', class: "r-toast--action" }, h("slot", { key: 'e267d02a4e39a443865c1c0a62f3d6ed06e2a319', name: "action" }, this.hasActionLink &&
+                h("r-button", Object.assign({ key: '8785094717619bd69c5e711873598b2fb7eeb5be', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
+            h("div", { key: '066ecbc6346ed516aa9dd193505a26544bbdf92f', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '890fd983d1208ea514b89aeaf394ae82c1d1ec55', name: "trailing" }), this.isDismissManual &&
+                h("r-icon-button", Object.assign({ key: '2b9e06adc46cf1a726d5d78f7cedb2d1405b4c72' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), h("slot", { key: '7349c7b3422f194852609c2cdf150a5dc4498aa9', name: "dismiss" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {