@riverty/web-components 6.0.0 → 6.1.0

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

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

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

@@ -1,7 +1,166 @@
 import { Host, h } from "@stencil/core";
 export class RTabsList {
+    constructor() {
+        /**
+         * 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 = (h("r-icon-button", { onRClick: onClick, disabled: disabled, name: iconName, size: "s", rTabindex: -1, class: "r-tabs-list--scroll-button" }));
+            if (tooltip) {
+                return (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 (h(Host, { key: '98a63f5b2df8649a90efc639cf745537eb903446', role: "tablist" }, h("div", { key: 'f1f0ce63461fed127e2e0789e941404545265b51', class: "r-tabs-list" }, h("slot", { key: 'e8302171cd66fba6332ed3301be7370dff43e69d' }))));
+        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)))));
     }
     static get is() { return "r-tabs-list"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +174,121 @@ export class RTabsList {
             "$": ["tabs-list.css"]
         };
     }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabListVariant",
+                    "resolved": "\"compact\" | \"expanded\"",
+                    "references": {
+                        "TabListVariant": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/tabs-list/exports.ts::TabListVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaulr",
+                            "text": "'expanded'"
+                        }],
+                    "text": "Visual variant of the tab list"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'expanded'"
+            },
+            "border": {
+                "type": "string",
+                "attribute": "border",
+                "mutable": false,
+                "complexType": {
+                    "original": "ActiveTabBorder",
+                    "resolved": "\"branded\" | \"standard\"",
+                    "references": {
+                        "ActiveTabBorder": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/tabs-list/exports.ts::ActiveTabBorder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'standard'"
+                        }],
+                    "text": "Border style of the active tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'standard'"
+            },
+            "scrollLeftTooltip": {
+                "type": "string",
+                "attribute": "scroll-left-tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip visibility for left scroll button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "scrollRightTooltip": {
+                "type": "string",
+                "attribute": "scroll-right-tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip visibility for left right button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "scrollable": {},
+            "firstItemVisible": {},
+            "lastItemVisible": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "tabChange",
+                "method": "tabChangeAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/textarea/textarea.css

@@ -76,7 +76,7 @@
   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);
+  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);

package/dist/collection/components/toast/toast.css

@@ -31,23 +31,25 @@
 }
 
 :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;
+  --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, none);
+  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, all 0.3s);
+  transition: var(--r-toast--host--transition, none);
   transition-delay: var(--r-toast--host--transition-delay, 0s);
 }
 :host ::slotted(p) {
@@ -77,11 +79,35 @@
 }
 @media (prefers-reduced-motion) {
   :host {
-    --r-toast--transition: none;
-    --r-toast--host--animation-name: none;
+    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));
@@ -95,7 +121,7 @@
   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);
+  transition: var(--r-toast--transition, none);
 }
 .r-toast--main {
   flex: var(--r-toast--content--flex, 1);

package/dist/collection/components/toast/toast.js

@@ -41,6 +41,7 @@ export class Toast {
          * @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) => {
@@ -59,6 +60,12 @@ export class Toast {
                 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();
@@ -76,9 +83,15 @@ export class Toast {
         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.
@@ -170,6 +183,12 @@ export class Toast {
     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 ? {
@@ -188,14 +207,14 @@ export class Toast {
             name: trailingIcon,
             size: 'm'
         };
-        return (h(Host, Object.assign({ key: '11d9a9cce4598984682419e16e15fe7b729f3407' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }), h("div", { key: '54ec630d4a3ae1cd904eed72f4232188f1fd4449', class: "r-toast" }, this.hasLeading &&
-            h("div", { key: 'ac681856ff541aa8d86be8b4c2e252c5768cc4d7', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: 'f0fe00eedca4b8fa3515cf57c3eaaded40879fc7', name: "leading" }), this.leadingIconVisible && h("r-icon", Object.assign({ key: 'd5028dd6a0af6cbe6c8f602bf9de2cf0b5e23ed5', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '9a093ec50d733c0b5d84802d4e6de301dced145f', class: "r-toast--main" }, this.hasHeadline &&
-            h("h2", { key: '5fd2dd5139c14e7f95d12f987fa2aa14b746f9ee', class: "r-toast--headline" }, h("slot", { key: '9951ba737e8a10a1f9a68dc72c18f4b42645a13c', name: "headline" }, headline)), this.hasContent &&
-            h("div", { key: 'd476014ac425fff629df7e17f8fd5bdd7dd508e2', class: "r-toast--content r-typography" }, h("slot", { key: '34d63dad6ff75a19f3faa4a20b683495ebfb0b0f', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            h("div", { key: '61ee7f4922349100f78d6dde6a55cf78ff1de2bd', class: "r-toast--action" }, h("slot", { key: '8e70ff93aac9ef4e086f539aba2797122dc5402e', name: "action" }, this.hasActionLink &&
-                h("r-button", Object.assign({ key: '556f7182d22ac37ec60653da44667f9a4d2b6cab', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
-            h("div", { key: '806708fbaec919dea26c83f0e2446a9b4c9377cb', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '91f35c745b8de0797085a7829743415bfc5f2ce1', name: "trailing" }), this.isDismissManual &&
-                h("r-icon-button", Object.assign({ key: '9fe07d3faeeda5cf46494167868dfc664f11d80f' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), h("slot", { key: 'fc3bd145b42458c857d84cac443ccde89ca6c1db', name: "dismiss" }))))));
+        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" }))))));
     }
     static get is() { return "r-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -606,6 +625,21 @@ export class Toast {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "toastDismissed",
+                "name": "dismissed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dismiss toast animation is complete\nand the element has fully disappeared from the view.\nFired by dismiss(), by the auto-dismiss timer (delay), by changing open property, and by the trailing\ndismiss button."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/toast-group/toast-group.css

@@ -39,5 +39,5 @@
   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));
+  --r-toast-group--spacing: var(--r-spacing-100, 1rem);
 }

package/dist/collection/components/toast-group/toast-group.js

@@ -22,7 +22,7 @@ export class ToastGroup {
         this.observeSlotContentChange();
     }
     render() {
-        return (h(Host, { key: 'bbb13408cb02b62fe5f6ab1c09548509bfb3a195' }, h("div", { key: 'd82f7deff5b66aa8f9e19d29a5b34fc4b984c94d', class: "r-toast-group" }, h("slot", { key: '02a49bceae7197f72d5b80ba7d71374345d0f0c7' }))));
+        return (h(Host, { key: 'fa291737910745721236d14e38c54e7bf351b85e' }, h("div", { key: 'b755a032ee5b1152846946df270fd69ef4370a1a', class: "r-toast-group" }, h("slot", { key: 'd73b1e701b6b27b2e46f7f130bee1a16af2de53e' }))));
     }
     static get is() { return "r-toast-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -355,7 +355,7 @@ export class Tooltip {
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (h(Host, Object.assign({ key: '1b2ce4ee1a9f9ca227b96e567fb61b560858734e' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '1379aefd4bf69b312a9ce3ef443f5e9fe970f09e', class: "r-tooltip" }, h("div", Object.assign({ key: '80f00e66c8f01bb0df9107943c15d6616e4e7197', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '42e1453731bdd404083e11d3d2f0ae4603e4c57b' })), h("div", Object.assign({ key: '00aa4f22f9c3e40d1c8e86cdd950ef1d160e29cf', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: 'b717d5e45d3f970ee87f409d61a6353fb138fc7b', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
+        return (h(Host, Object.assign({ key: '9b3e1226c3aa4c7a2cdefe1be4da3891ecb962c7' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: 'baf56908fb53986eb5cba9114a8679956e13a6ea', class: "r-tooltip" }, h("div", Object.assign({ key: '9528f90cbe833ba2f7ad2abcae432e77bd9a9470', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: 'c8159d843ca32e08015187d82d95c4bab7965ddb' })), h("div", Object.assign({ key: 'c4c02a0b5b461d872b2ea504dc38eb3d69be24f0', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '5667fcd6378a28e3c713de840bf65dfa0e094a91', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     static get is() { return "r-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -388,7 +388,7 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "position": {