@riverty/web-components 5.7.0 → 5.8.0

package/dist/collection/components/select/select.js

@@ -48,10 +48,13 @@ export class Select {
         this.valueToDisplay = '';
         this.isInitializing = false;
         this.isResetting = false;
-        this.isNewValue = false;
         this.focusedOption = null;
         this.isValueFocused = false;
         this.isNoResultsFound = false;
+        /** Indicates if the user has interacted with the select (focused/clicked) */
+        this.touched = false;
+        /** Indicates if the value has been changed by user interaction */
+        this.dirty = false;
         this.handleSlotChange = () => {
             setTimeout(() => {
                 this.initialize();
@@ -65,16 +68,19 @@ export class Select {
         /** Unique id */
         this.uniqueId = `r-select-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
             for (const state in element.validity) {
                 if (element.validity[state]) {
-                    this.validityState = state;
+                    validityState = state;
                     if (this[state + 'Message']) {
-                        this.validityMessage = this[state + 'Message'];
-                        return;
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
                     }
-                    this.validityMessage = element.validationMessage;
+                    validityMessage = element.validationMessage;
                 }
             }
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element = null) => {
             if (element === null)
@@ -83,7 +89,9 @@ export class Select {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -105,6 +113,8 @@ export class Select {
                 return;
             e.preventDefault();
             e.stopPropagation();
+            // Mark as touched when user clicks on the select
+            this.touched = true;
             this.toggle();
             if (!this.isExpanded)
                 return;
@@ -119,7 +129,11 @@ export class Select {
                     return () => {
                         var _a;
                         if (this.isExpanded) {
-                            this.setValue(((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '');
+                            const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
+                            if (newValue !== this.currentValue) {
+                                this.dirty = true;
+                            }
+                            this.setValueFromUserInteraction(newValue);
                             return;
                         }
                         this.expand();
@@ -140,7 +154,11 @@ export class Select {
                             return;
                         }
                         if (this.focusedOption && altKey) {
-                            this.setValue(((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '');
+                            const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
+                            if (newValue !== this.currentValue) {
+                                this.dirty = true;
+                            }
+                            this.setValueFromUserInteraction(newValue);
                             return;
                         }
                         if (!this.combobox && this.focusedOption === this.optionElements[0])
@@ -214,7 +232,14 @@ export class Select {
                     };
                 }
                 case 'Tab':
-                    return () => { var _a; return this.setValue(((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || ''); };
+                    return () => {
+                        var _a;
+                        const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
+                        if (newValue !== this.currentValue) {
+                            this.dirty = true;
+                        }
+                        this.setValueFromUserInteraction(newValue);
+                    };
                 default:
                     // No matching key handler: intentional no-op
                     return () => { void 0; };
@@ -286,7 +311,11 @@ export class Select {
                         return;
                     }
                     this.valueElement.value = '';
-                    this.setValue('');
+                    const newValue = '';
+                    if (newValue !== this.currentValue) {
+                        this.dirty = true;
+                    }
+                    this.setValueFromUserInteraction(newValue);
                     this.reportValidity();
                     break;
                 default:
@@ -303,6 +332,8 @@ export class Select {
         };
         this.onValueFocus = () => {
             this.isValueFocused = true;
+            // Mark as touched when user focuses on the select
+            this.touched = true;
         };
         this.filterOptionsListByComboboxValue = (value = '') => {
             const options = Array.from(this.host.querySelectorAll('r-select-option:not([data-no-results="true"])'));
@@ -348,6 +379,8 @@ export class Select {
         this.onResetForm = () => {
             // Clear validation results
             this.resetValidation();
+            // Reset touched and dirty states
+            this.markAsPristine();
             // Restore initial value
             this.setValue(this.initial['value']);
             // Emit rReset
@@ -387,15 +420,24 @@ export class Select {
     handleValueChange(value, oldValue) {
         if (this.isInitializing)
             return;
-        this.isNewValue = oldValue !== value;
-        this.isNewValue && this.setValue(value);
+        // Only process if this is not the initial load (oldValue is defined)
+        if (oldValue !== undefined && oldValue !== value) {
+            // This is a programmatic change from parent attribute
+            // Do NOT mark as dirty, do NOT emit rChange
+            this._renderSelected(value, false);
+            this.clearComboboxOptions();
+        }
     }
     /** Listen for custom event triggered by "onClick" event on `<r-select-option>` */
     optionSelectAction(e) {
         e.stopPropagation();
         if (this.disabled)
             return;
-        this.setValue(e.target.value);
+        // Mark as dirty only if value actually changes
+        if (e.target.value !== this.currentValue) {
+            this.dirty = true;
+        }
+        this.setValueFromUserInteraction(e.target.value);
     }
     tooltipFocusAction() {
         this.collapse();
@@ -435,11 +477,28 @@ export class Select {
         if (this.isExpanded)
             this.defineListboxPositionState();
     }
-    /** Set value of the select */
+    /**
+     * Set value of the select programmatically.
+     * Does NOT mark as dirty or emit change events.
+     * Use this for programmatic value updates.
+     */
     async setValue(value = '') {
         // Clear validation results
         this.resetValidation();
-        this._renderSelected(value, this.currentValue !== value);
+        // Don't emit change event for programmatic updates
+        this._renderSelected(value, false);
+        this.clearComboboxOptions();
+    }
+    /**
+     * Internal method to set value from user interaction.
+     * Assumes dirty flag is already set by the caller.
+     * Will emit rChange if dirty flag is true.
+     */
+    setValueFromUserInteraction(value = '') {
+        // Clear validation results
+        this.resetValidation();
+        // Emit change event for user interactions (if dirty is set)
+        this._renderSelected(value, true);
         this.clearComboboxOptions();
     }
     /** Set value of the select */
@@ -450,6 +509,8 @@ export class Select {
     async reset() {
         // Clear validation results
         this.resetValidation();
+        // Reset touched and dirty states
+        this.markAsPristine();
         // Collapse options listbox
         this.collapse();
         // Restore unfiltered list
@@ -482,6 +543,35 @@ export class Select {
         this.invalid = this.initial['invalid'];
         this.valid = !this.invalid;
     }
+    /**
+     * Returns whether the select has been touched (focused/clicked by user).
+     * @returns A boolean indicating whether the select has been touched.
+     */
+    async isTouched() {
+        return this.touched;
+    }
+    /**
+     * Returns whether the select value has been changed by user interaction.
+     * @returns A boolean indicating whether the select is dirty.
+     */
+    async isDirty() {
+        return this.dirty;
+    }
+    /**
+     * Marks the select as untouched and pristine (not dirty).
+     */
+    async markAsPristine() {
+        this.touched = false;
+        this.dirty = false;
+    }
+    /**
+     * Validates the textarea without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the textarea is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
     /** Check validity and reveal validation state and message */
     async reportValidity() {
         this.validateFormElement(this.nativeElement);
@@ -614,7 +704,11 @@ export class Select {
         if (!this.isBusy) {
             this.reportValidity();
         }
-        if (emitValue) {
+        // Only emit rChange if:
+        // 1. emitValue is true
+        // 2. Not during initialization or reset
+        // 3. The component is dirty (user has interacted)
+        if (emitValue && !this.isBusy && this.dirty) {
             this.rChange.emit({
                 element: this.host,
                 value: value
@@ -1004,8 +1098,8 @@ export class Select {
             disabled,
             required: isRequired
         };
-        return (h(Host, { key: '4faff470b9b6b8b7d61e3076e92791ef59337a48', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}` }, h("div", { key: '0e171d25d2210017b79c8e4298e24335087f0528', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: 'd23c28cea13b76464697eadca26ba34a3d1009cd', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: '5eed04830b9339a2c274f79eda156fa48eaa8249', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: '85c9eecfbff6e3d5412c99faafc142bf495aedb4' }, labelAttr), label)), h("slot", { key: '72a93bf0defe9a3f41d7b7be5cf3415e95874141', name: "popover" })), hint &&
-            h("r-hint", { key: 'd0b4a4bd2ca88ba642285dc85920d57f73298bb5', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: 'd859fdbd5f21ab2ec625712e5704f7e594ecff05', class: "r-select" }, h("select", Object.assign({ key: '388cf0c3f3234c2547aec144060f0d700df2fa57', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'e2409bf6c794e8360089fc113144dfcd7dffbbe2', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '8b813027f707bf37ccdf022c852838eb4801e03e', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: 'b6aa6ab7eb6390b05ac6d475546ca9647edb1a02', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: 'e84ce6b5e610147962c25a930967e1554a91f2a1', onSlotchange: this.handleSlotChange })))), h("div", { key: '92a91fc11ac5c98330bd677a97ab76a88af48f3b', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: 'c23f0cc7347fb7ceb61c4696d527534ececec403', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
+        return (h(Host, { key: '9c22bae93d955802f695b20f25d3ff5c79fcc7d8', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: '2e8de0d2041d00c4d90caf5aba2aeb50fcfc86e5', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '273524030b099899861c93e9bba205c6c820d425', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'f050500698aa5a48d6db101074129fae09899de3', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'b5560ba5b8ee794eb775a555dec514f4d6e6546f' }, labelAttr), label)), h("slot", { key: 'bbbbe371702b95ac3d1636756eb673dc44c0dcb4', name: "popover" })), hint &&
+            h("r-hint", { key: '27585bacce2143f20bdb20a3e03b5700dbb87d9b', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '92a69fbee0890d5ddab0353348cdb4d8eb772137', class: "r-select" }, h("select", Object.assign({ key: 'bc2de60d73dcebf750a99e7b88eacc701a8c0b85', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'b561dee21bdf58abe51786564a18812a20a0e97f', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '06984ccf7f6740e2480ef61924676e99d40044d4', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: '67888a456006e44869081876d35cdceca754942d', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '4f404790887ad37d488183d814bb69f33c262688', onSlotchange: this.handleSlotChange })))), h("div", { key: '0b223f242cfc90ce38a0cf83d38dc0c81348b36d', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: '57336df2dd79b8f91be950f7a4ca05258ec26184', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
     }
     static get is() { return "r-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1793,10 +1887,11 @@ export class Select {
             "valueToDisplay": {},
             "isInitializing": {},
             "isResetting": {},
-            "isNewValue": {},
             "focusedOption": {},
             "isValueFocused": {},
-            "isNoResultsFound": {}
+            "isNoResultsFound": {},
+            "touched": {},
+            "dirty": {}
         };
     }
     static get events() {
@@ -1910,7 +2005,7 @@ export class Select {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Set value of the select",
+                    "text": "Set value of the select programmatically.\nDoes NOT mark as dirty or emit change events.\nUse this for programmatic value updates.",
                     "tags": []
                 }
             },
@@ -1965,6 +2060,83 @@ export class Select {
                     "tags": []
                 }
             },
+            "isTouched": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the select has been touched (focused/clicked by user).",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the select has been touched."
+                        }]
+                }
+            },
+            "isDirty": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the select value has been changed by user interaction.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the select is dirty."
+                        }]
+                }
+            },
+            "markAsPristine": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Marks the select as untouched and pristine (not dirty).",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the textarea without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the textarea is valid."
+                        }]
+                }
+            },
             "reportValidity": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",

package/dist/collection/components/textarea/textarea.js

@@ -72,16 +72,19 @@ export class RTextarea {
             this.rReset.emit({ element: host, value });
         };
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
             for (const state in element.validity) {
                 if (element.validity[state]) {
-                    this.validityState = state;
+                    validityState = state;
                     if (this[state + 'Message']) {
-                        this.validityMessage = this[state + 'Message'];
-                        return;
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
                     }
-                    this.validityMessage = element.validationMessage;
+                    validityMessage = element.validationMessage;
                 }
             }
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element = null) => {
             if (element === null)
@@ -90,7 +93,9 @@ export class RTextarea {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -144,6 +149,14 @@ export class RTextarea {
         this.customErrorMessage = message;
         this.validateFormElement(this.nativeElement);
     }
+    /**
+     * Validates the textarea without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the textarea is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
     /** Validates an element and displays validity state. */
     async reportValidity() {
         this.validateFormElement(this.nativeElement);
@@ -1151,6 +1164,26 @@ export class RTextarea {
                     "tags": []
                 }
             },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the textarea without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the textarea is valid."
+                        }]
+                }
+            },
             "reportValidity": {
                 "complexType": {
                     "signature": "() => Promise<void>",

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

@@ -7,7 +7,7 @@
 :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-strong, #89411A);
+  --r-toast--leading-icon--color: var(--r-status-warning-regular, #89411A);
 }
 
 :host([status=error]) {
@@ -58,13 +58,6 @@
 :host ::slotted(p + ol) {
   margin-top: 1rem;
 }
-:host .r-toast--action-link:hover {
-  --r-toast--action--color: var(--r-text-strong, #000000);
-}
-:host .r-toast--action-link:focus {
-  outline: var(--r-toast--action-link--outline, 2px solid var(--r-border-focused, #0071e3));
-  box-shadow: var(--r-toast--action-link--box-shadow, 0 0 0 1px var(--r-border-focused-outlined, #fff), 0 0 0 3px var(--r-border-focused, #0071e3), 0 0 0 4px var(--r-border-focused-outlined, #fff));
-}
 :host .r-toast--trailing-button {
   --r-button--width: 2.75rem;
   --r-button--height: 2.75rem;
@@ -95,8 +88,8 @@
   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-075, 0.75rem));
-  padding: var(--r-toast--padding, 16px);
+  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));
@@ -110,12 +103,13 @@
 .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, 1);
+  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 {
@@ -123,7 +117,7 @@
   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-light, 300));
+  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 {
@@ -133,8 +127,22 @@
   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 {
-  color: var(--r-toast--action--color, var(--r-text-regular, #282828));
+.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;