@riverty/web-components 6.1.0 → 6.2.0

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

@@ -31,6 +31,7 @@
 }
 
 :host([data-visually-hidden=true]) {
+  --r-toast--host--animation-duration: 0.2s;
   --r-toast--host--animation-name: fade-out;
 }
 
@@ -42,7 +43,6 @@
   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));
@@ -67,8 +67,8 @@
   --r-button--border-color: transparent;
   --r-button--background-color: transparent;
   position: relative;
-  top: -8px;
-  right: -8px;
+  margin-top: -8px;
+  margin-right: -8px;
 }
 :host .r-toast--trailing-button:hover {
   --r-button--color: var(--r-text-strong, #000000);
@@ -88,24 +88,22 @@
   from {
     opacity: 0;
     max-height: 0;
-    margin-bottom: 0;
   }
   to {
     opacity: 1;
-    max-height: fit-content;
-    margin-bottom: var(--r-toast-group--spacing, 0);
+    max-height: var(--r-toast--host--height-expanded);
   }
 }
 @keyframes fade-out {
   from {
     opacity: 1;
-    max-height: fit-content;
-    margin-bottom: var(--r-toast-group--spacing, 0);
+    max-height: var(--r-toast--host--height-expanded);
+    margin-top: var(--r-spacing-100, 1rem);
   }
   to {
     opacity: 0;
     max-height: 0;
-    margin-bottom: 0;
+    margin-top: 0;
   }
 }
 .r-toast {
@@ -125,6 +123,7 @@
 }
 .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));
@@ -145,6 +144,7 @@
   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);

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

@@ -63,7 +63,17 @@ export class Toast {
         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 = () => {
@@ -80,17 +90,28 @@ export class Toast {
      * 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);
     }
     /**
@@ -99,27 +120,62 @@ export class Toast {
      * 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;';
+                // Force reflow and measure
+                this.host.offsetHeight;
+                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();
@@ -181,10 +237,25 @@ export class Toast {
         }
     }
     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);
@@ -207,14 +278,14 @@ export class Toast {
             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" }))))));
     }
     static get is() { return "r-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -663,7 +734,7 @@ export class Toast {
             },
             "reveal": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<this>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -671,7 +742,7 @@ export class Toast {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<this>"
                 },
                 "docs": {
                     "text": "Reveals the toast notification by setting it to a visible state. \nIf the auto-dismiss delay is enabled, it will start the timer to \nautomatically dismiss the toast after the specified duration.",
@@ -680,7 +751,7 @@ export class Toast {
             },
             "hide": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<this>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -688,7 +759,7 @@ export class Toast {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<this>"
                 },
                 "docs": {
                     "text": "Hides toast, keeps it in dom.",
@@ -696,6 +767,23 @@ export class Toast {
                 }
             },
             "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<this>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<this>"
+                },
+                "docs": {
+                    "text": "Toggles visibility of the toast.",
+                    "tags": []
+                }
+            },
+            "measureAndPrepareHeight": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -708,7 +796,7 @@ export class Toast {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggles visibility of the toast.",
+                    "text": "Measures the natural height of toast and prepares it for reveal animation.\nThis should be called on newly added toasts before they are revealed.",
                     "tags": []
                 }
             }

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

@@ -1,12 +1,3 @@
-@media (max-width: 48rem) {
-  :host {
-    --width: auto;
-    --right: 24px;
-    --bottom: auto;
-    --left: 24px;
-    --padding-right: 0;
-  }
-}
 :host([data-visually-hidden=true]) {
   position: absolute;
   width: 1px;
@@ -21,7 +12,7 @@
 :host {
   display: var(--display, block);
   position: var(--position, fixed);
-  top: var(--top, 32px);
+  top: var(--top, 0);
   right: var(--right, 0);
   bottom: var(--bottom, auto);
   left: var(--left, auto);
@@ -30,14 +21,17 @@
   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);
-  --r-toast-group--spacing: var(--r-spacing-100, 1rem);
 }

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

@@ -5,8 +5,17 @@ export class ToastGroup {
             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,
@@ -22,10 +31,10 @@ export class ToastGroup {
         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' }))));
     }
     static get is() { return "r-toast-group"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["toast-group.css"]

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

@@ -94,13 +94,18 @@ export class Tooltip {
             this.rTooltipFocus.emit({ element: this.element });
         };
         this.showTooltip = () => {
+            var _a;
             this.isShown = true;
             this.tooltip.classList.add('r-tooltip--content--visible');
+            const interactiveElement = this.getInteractiveElement(this.activeElement);
+            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-description', (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.innerText);
         };
         this.removeTooltip = () => {
             this.isShown = false;
             this.tooltip.style.width = 'max-content';
             this.tooltip.classList.remove('r-tooltip--content--visible');
+            const interactiveElement = this.getInteractiveElement(this.activeElement);
+            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeAttribute('aria-description');
         };
         this.handleScroll = () => {
             if (!this.isShown) {
@@ -226,6 +231,21 @@ export class Tooltip {
     get activeElement() {
         return this.element.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
     }
+    /**
+     * Gets the actual interactive element (button/link) from within r-button or r-icon-button shadow DOM,
+     * or returns the element itself if it's already interactive
+     */
+    getInteractiveElement(element) {
+        if (!element)
+            return null;
+        if (element.tagName === 'R-BUTTON' || element.tagName === 'R-ICON-BUTTON') {
+            const shadowRoot = element.shadowRoot;
+            if (shadowRoot) {
+                return shadowRoot.querySelector('button, a');
+            }
+        }
+        return element;
+    }
     /**
      * Define position state
      */
@@ -314,7 +334,7 @@ export class Tooltip {
         this.adjustArrowPosition();
         this.alignTooltipPosition();
         this.alignArrowPosition();
-        // allow tooltip content wrap and recalculate position
+        // Allow tooltip content wrap and recalculate position
         if (this.tooltip.style.width === 'fit-content') {
             return;
         }
@@ -348,14 +368,14 @@ export class Tooltip {
         const triggerAttrs = {
             tabindex: !this.activeElement ? 0 : null,
             role: !this.activeElement ? 'button' : null,
-            'aria-describedby': isShown && uniqueId || null
+            'aria-describedby': !this.activeElement && isShown ? uniqueId : null
         };
         const contentAttrs = {
             id: uniqueId,
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        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" }))));
+        return (h(Host, Object.assign({ key: '5d8a002a227895d5e633e8b1df95ba449a9e253a' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '4e6340639dc27fc7d0e981ca7cf8a4046737527f', class: "r-tooltip" }, h("div", Object.assign({ key: 'bcf2d5c73b427b2941be8de56b9ce2f296ae07eb', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: 'be7037ba07bf11b4957910c52f4a3f329b514007' })), h("div", Object.assign({ key: '300a3ef08b7c73b6b07161c58860df518ae9a862', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '73912349289b0dc365552331197d94bd0896ff3c', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     static get is() { return "r-tooltip"; }
     static get encapsulation() { return "shadow"; }