@riverty/web-components 5.7.0 → 6.0.0

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

@@ -128,7 +128,7 @@ export class SelectOption {
             size: iconSize,
             color: iconColor
         };
-        return (h(Host, { key: '1f3440961f3c606f5b2b1eef77ae3c53fc1ea4a0', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '9a29dd16478d39c905f8cb54ca603e6982c3a24e', class: "r-select-option" }, icon && h("span", { key: 'fdcecb70781424749e0527f06eff5140a8a79ccc', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '5a1906d39a27bc70729d26e93fd8f0d77e80e972' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '572b0e90b5695e0233505f28fb7c9b3dbc90a73f', class: "r-select-option--icon" }, h("slot", { key: 'bc04c317491e690281b0f4442aaff3f86a5ddb12', name: "icon" })), h("span", { key: '77bf634b415a36d8463212918cf200fda8647f85', class: "r-select-option--label" }, h("slot", { key: '83dd97fa580d18f4a9e27beca4835adf6c746240' })))));
+        return (h(Host, { key: 'd059d75cec11ef39ddea8c4ddc9ce8bc9d1a57e7', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '70fa5c2fc9194d197b4124b6afad296d2849032c', class: "r-select-option" }, icon && h("span", { key: '07bdfeb2d8330c989e6b59c34ee85cac029135cb', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '358748199ca580e8a9d397ed4f5642a722703441' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '60a4e6059188b27d0fbe6e9b0134882cea803d90', class: "r-select-option--icon" }, h("slot", { key: '08b11beec2c086b21ab92ad6cab080bae1cd0eac', name: "icon" })), h("span", { key: '4397696c7b8ec172098d9bd82e0c89c55781bb91', class: "r-select-option--label" }, h("slot", { key: 'b9dddec8b9c455f130ed38577c9321cb6aced0dd' })))));
     }
     static get is() { return "r-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skip-link/skip-link.js

@@ -5,7 +5,7 @@ export class SkipLink {
         this.position = 'center';
     }
     render() {
-        return (h(Host, { key: '7ca2f29a347197be2951841e6b59807360e76f9d' }, h("slot", { key: '6d26f29f7dbec9d60e302de3cbbf0d8d2afd3009' })));
+        return (h(Host, { key: '5097cfa89ded56bcfb98dc24ca0b1e42c389e4ae' }, h("slot", { key: 'bba803efc4b82b0612e270665d5f80b740a786f1' })));
     }
     static get is() { return "r-skip-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stepper/stepper.js

@@ -11,7 +11,7 @@ export class Stepper {
     }
     render() {
         const completed = this.completed || this.completeSteps;
-        return (h(Host, { key: 'd501495c36f83cfc14c706f46936d5acc925d6d2' }, h("div", { key: 'a2952de15ea74093ea41663438bc8fec866d428b', 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: '4834a5947ae40241607131dcbb3dfa56354fdc13' }))));
+        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' }))));
     }
     static get is() { return "r-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stepper-item/stepper-item.js

@@ -11,8 +11,8 @@ export class StepperItem {
     }
     render() {
         const number = this.number || this.stepNumber;
-        return (h(Host, { key: 'a5004ade661b4abfacb920a256f6a12bbd32a6ea' }, h("div", { key: '1358044cc918c2988a2f32198b0a8260cf439ec0', class: "r-stepper-item" }, h("div", { key: 'ec2afea7c0b6d603ebce7dda25e93246fafb248a', 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: '6cf7607d13bdd0bd58885e5cc4c74c0068448dfc', class: "r-stepper-item--text" }, h("slot", { key: '8c47f057e435924f8c004be5f3112743127bf885' })))));
+        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' })))));
     }
     static get is() { return "r-stepper-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -41,7 +41,7 @@ export class RTab {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (h(Host, Object.assign({ key: '2e2b2d84376e097c80a84a1e7224c0f026c16277', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: 'c38098d413b17ba8b8ddd3436687879d1b37114f', class: "r-tab" }, h("span", { key: '3f7bfedd8a933da7ec52f34dd64f3a4e862cb836', class: "r-tab--slot" }, h("slot", { key: 'bc056a0d06188ddd1b47c3c062a4d51367e48393' })))));
+        return (h(Host, Object.assign({ key: '04af619a56c41414b02e942d9d5bba11ef5eb1a0', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: 'e3fcc9b084de339aafcf98d8c5ca06f0e9615916', class: "r-tab" }, h("span", { key: 'bb52bf58758c2404a61b595706ecb3e3f71942ee', class: "r-tab--slot" }, h("slot", { key: '939a0e9618875e4909dbb763290f5f439122e312' })))));
     }
     static get is() { return "r-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-panel/tab-panel.js

@@ -12,7 +12,7 @@ export class RTabPanel {
             active,
             'aria-labelledby': tabId
         };
-        return (h(Host, Object.assign({ key: '042aba1f5eebeafdff7035d8ad5afc9ec204eb8a', class: "r-typography" }, hostAttrs), h("div", { key: '0e9c72a859b07c1e4c2cb4a5d936fbadc07f23ca', class: "r-tab-panel" }, h("slot", { key: '2d588c5c67cfd26d7762a2be0c8400faa12a96c8' }))));
+        return (h(Host, Object.assign({ key: 'de50044bd0be5598615c2f84e66f5a552edb4ab9', class: "r-typography" }, hostAttrs), h("div", { key: 'e4db4fd5b115c96474f31d9d16881f496b8f4fd2', class: "r-tab-panel" }, h("slot", { key: 'd2ad80745f97933fb173f6ecd3635829d3c890ac' }))));
     }
     static get is() { return "r-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -233,7 +233,7 @@ export class RTabs {
         this._changeFocusTab(e.target, e.detail.keycode);
     }
     render() {
-        return (h(Host, { key: 'ddb0847ae3eb4a03c446b2dd193f2fa9603081df', class: "r-tabs" }, h("slot", { key: 'd60346bd45b58534e6ac922ac66c09c1bb04c532' })));
+        return (h(Host, { key: '4c86b16a8af456854579e7141ff2b3d2b60627e5', class: "r-tabs" }, h("slot", { key: '589b8ae9f3f51df095ed28b896714e1407fd9d87' })));
     }
     static get is() { return "r-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class RTabsList {
     render() {
-        return (h(Host, { key: '323b36e7d276c42c72764c34f2564153d80b64d2', role: "tablist" }, h("div", { key: 'bab777186d6d538c6f541e08bda090ab228f38d3', class: "r-tabs-list" }, h("slot", { key: '60a0d80ba3ada9d218ca8058cdcdf720277e19d0' }))));
+        return (h(Host, { key: '98a63f5b2df8649a90efc639cf745537eb903446', role: "tablist" }, h("div", { key: 'f1f0ce63461fed127e2e0789e941404545265b51', class: "r-tabs-list" }, h("slot", { key: 'e8302171cd66fba6332ed3301be7370dff43e69d' }))));
     }
     static get is() { return "r-tabs-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,11 +13,6 @@ export class RTextarea {
         this.resize = 'none';
         /** Custom message when the character limit is reached to alert screen reader users. */
         this.characterLimitReachedMessage = "You've reached the character limit.";
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Controls the visibility of validation indicators for the field.
-         * */
-        this.showValid = false;
         /** Custom validity state */
         this.validityState = null;
         /** Custom validity message */
@@ -72,16 +67,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 +88,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 +144,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);
@@ -167,11 +175,8 @@ export class RTextarea {
         const hasMessage = !!(this.customErrorMessage || this.validityMessage);
         return isInvalid && hasMessage;
     }
-    get hasValidationSuccess() {
-        return this.valid && this.validMessage && this.showValid;
-    }
     get hasMessage() {
-        return this.hasError || this.hasValidationError || this.hasValidationSuccess;
+        return this.hasError || this.hasValidationError;
     }
     /**
      * Determine whether this element should be ignored
@@ -212,7 +217,7 @@ export class RTextarea {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor, readonly } = this;
+        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, readonly } = this;
         const textareaAttrs = {
             name,
             rows,
@@ -231,14 +236,10 @@ export class RTextarea {
             'aria-invalid': `${!!invalid}`,
             'aria-required': `${!!required}`
         };
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip && !disabled ? {
-            tooltip,
-            tooltipIcon,
-            tooltipIconColor
+        const labelAttr = label ? {
+            label,
+            fieldIndicator
         } : {};
-        const labelAttr = label ? Object.assign({ label,
-            fieldIndicator }, tooltipAttrs) : {};
         // Filter out event listener properties based on naming convention.
         // Pass them to native element.
         const eventListeners = Object.entries(this).reduce((acc, [key, value]) => {
@@ -249,7 +250,7 @@ export class RTextarea {
         }, {});
         return (h(Host, null, h("div", { class: "r-textarea--label-container" }, h("label", { htmlFor: uniqueId }, label &&
             h("r-label", Object.assign({ id: `${uniqueId}-label` }, labelAttr), label)), h("slot", { name: "popover" })), hint &&
-            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--trailing" }, this.readonly && h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && h("slot", { name: "trailing" }))), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
+            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--trailing" }, this.readonly && h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && h("slot", { name: "trailing" }))), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage)), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
             h("div", { class: "visually-hidden", ref: el => this.characterLimitReachedAlert = el, "aria-live": "assertive" }))));
     }
     static get is() { return "r-textarea"; }
@@ -656,26 +657,6 @@ export class RTextarea {
                 "setter": false,
                 "reflect": false
             },
-            "showValid": {
-                "type": "boolean",
-                "attribute": "show-valid",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nControls the visibility of validation indicators for the field."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "valid": {
                 "type": "boolean",
                 "attribute": "valid",
@@ -695,25 +676,6 @@ export class RTextarea {
                 "setter": false,
                 "reflect": true
             },
-            "validMessage": {
-                "type": "string",
-                "attribute": "valid-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nCustom message displayed when the `<textarea>` value is valid,\nproviding positive feedback to the user."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "invalid": {
                 "type": "boolean",
                 "attribute": "invalid",
@@ -789,107 +751,6 @@ export class RTextarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "optional": {
-                "type": "boolean",
-                "attribute": "optional",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ This property will be removed"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "optionalText": {
-                "type": "string",
-                "attribute": "optional-text",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (use `fieldIndicator` instead) Text of an additional marker in the label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltip": {
-                "type": "string",
-                "attribute": "tooltip",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nTooltip text displayed when the user hovers over the icon,\nproviding additional information."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIcon": {
-                "type": "string",
-                "attribute": "tooltip-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nIcon used to trigger the tooltip for the label,\nproviding a visual cue for additional information."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIconColor": {
-                "type": "string",
-                "attribute": "tooltip-icon-color",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nSpecifies the color of the tooltip icon from Riverty color tokens.\nDisplayed alongside the label."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
             }
         };
     }
@@ -1151,6 +1012,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;