@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/accordion-section/accordion-section.js

@@ -0,0 +1,235 @@
+import { Host, h } from "@stencil/core";
+export class AccordionSection {
+    constructor() {
+        /** Defines heading level for accordion header */
+        this.headingAriaLevel = 2;
+        this.isExpanded = this.expanded || this.hasExpandedChild || false;
+        this.uniqueId = `r-accordion-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this._linkElements = () => {
+            var _a, _b, _c, _d;
+            const isTriggerId = this.hasTrigger && this.triggerElement.hasAttribute('id');
+            const isPanelId = this.hasPanel && this.panelElement.hasAttribute('id');
+            (_a = this.panelElement) === null || _a === void 0 ? void 0 : _a.setAttribute('id', !isPanelId && `${this.uniqueId}-panel`);
+            (_b = this.panelElement) === null || _b === void 0 ? void 0 : _b.setAttribute('trigger', !isTriggerId && `${this.uniqueId}-trigger`);
+            (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.setAttribute('id', !isTriggerId && `${this.uniqueId}-trigger`);
+            (_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.setAttribute('panel', !isPanelId && `${this.uniqueId}-panel`);
+        };
+    }
+    get hasExpandedChild() {
+        return this.host.querySelector(`
+      r-accordion-trigger[expanded]:not([expanded="false"]), 
+      r-accordion-panel[expanded]:not([expanded="false"])
+    `) !== null;
+    }
+    rClickTriggerAction() {
+        if (this.complete)
+            this._switchExpanded();
+    }
+    rKeyupTriggerAction() {
+        if (this.complete)
+            this._switchExpanded();
+    }
+    get accordionElement() {
+        return this.host.closest('r-accordion') || null;
+    }
+    get triggerElement() {
+        return this.host.querySelector('r-accordion-trigger') || null;
+    }
+    get panelElement() {
+        return this.host.querySelector('r-accordion-panel') || null;
+    }
+    get hasTrigger() {
+        return this.triggerElement !== null;
+    }
+    get hasPanel() {
+        return this.panelElement !== null;
+    }
+    get complete() {
+        return this.hasTrigger && this.hasPanel;
+    }
+    _checkStructure() {
+        // If structure is complete --> no actions required
+        if (this.complete)
+            return;
+        // Mark section, trigger and panel
+        if (this.hasPanel)
+            this.panelElement.dataset.hasTrigger = `${this.hasTrigger}`;
+        if (this.hasTrigger)
+            this.triggerElement.dataset.hasPanel = `${this.hasPanel}`;
+        // If structure of section is not complete --> section must be expanded
+        this.host.expanded = true;
+    }
+    _checkDisabled() {
+        var _a, _b;
+        const isDisabled = ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.disabled) || ((_b = this.panelElement) === null || _b === void 0 ? void 0 : _b.disabled) || this.disabled;
+        this.disabled = isDisabled;
+        this._updateProp('disabled');
+    }
+    _checkExpanded() {
+        this.expanded = this.isExpanded;
+        this._updateProp('expanded');
+    }
+    _resetExpanded() {
+        this.host.classList.add('triggered');
+        const sectionElements = this.accordionElement.querySelectorAll(`r-accordion-section:not(.triggered)`);
+        sectionElements.forEach((section) => {
+            var _a, _b;
+            section.removeAttribute('expanded');
+            (_a = section.querySelector('r-accordion-trigger')) === null || _a === void 0 ? void 0 : _a.removeAttribute('expanded');
+            (_b = section.querySelector('r-accordion-panel')) === null || _b === void 0 ? void 0 : _b.removeAttribute('expanded');
+        });
+        this.host.classList.remove('triggered');
+    }
+    _switchExpanded() {
+        var _a;
+        if (!((_a = this.accordionElement) === null || _a === void 0 ? void 0 : _a.multiple) && this.complete)
+            this._resetExpanded();
+        this.expanded = !this.expanded;
+        this._updateProp('expanded');
+    }
+    _updateProp(name) {
+        if (this.triggerElement)
+            this.triggerElement[name] = this[name];
+        if (this.panelElement)
+            this.panelElement[name] = this[name];
+    }
+    expandedAction() {
+        this.rChangeExpanded.emit({
+            element: this.host,
+            expanded: this.expanded
+        });
+    }
+    componentWillLoad() {
+        this._checkDisabled();
+        this._checkExpanded();
+        this._checkStructure();
+        this._linkElements();
+    }
+    render() {
+        return (h(Host, { key: '7d2d81fddab0d5115b7412e087a8924a01fb8f68' }, h("div", { key: '84261f6c1065910e468ca570c9f68fc800705fc5', class: "r-accordion-section" }, h("div", { key: 'dc84a18a2a356fd52adf0c49cfa7008f053c3ebd', role: "heading", "aria-level": this.headingAriaLevel }, h("slot", { key: '312ad3f397910f86911c8f23f36ac5b4f5112d16', name: "accordion-trigger" })), h("slot", { key: '0aab606a6c07f0b4c7e132e68eeba70967b7be6e', name: "accordion-panel" }))));
+    }
+    static get is() { return "r-accordion-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["accordion-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["accordion-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if `<r-accordion-section>` is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "expanded": {
+                "type": "boolean",
+                "attribute": "expanded",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if `<r-accordion-expanded>` is expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "headingAriaLevel": {
+                "type": "number",
+                "attribute": "heading-aria-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines heading level for accordion header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "2"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rChangeExpanded",
+                "name": "rChangeExpanded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit click on trigger"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRAccordionSectionElement\n    expanded: boolean\n  }",
+                    "resolved": "{ element: HTMLRAccordionSectionElement; expanded: boolean; }",
+                    "references": {
+                        "HTMLRAccordionSectionElement": {
+                            "location": "global",
+                            "id": "global::HTMLRAccordionSectionElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "expandedAction"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "rClickTrigger",
+                "method": "rClickTriggerAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "rKeyupTrigger",
+                "method": "rKeyupTriggerAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/accordion-trigger/accordion-trigger.css

@@ -0,0 +1,93 @@
+:host {
+  display: block;
+  cursor: pointer;
+  font-family: var(--r-font-family-text, system-ui);
+  outline: none;
+}
+:host slot {
+  display: contents;
+}
+
+:host(:focus-visible) {
+  box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
+  outline: 2px solid var(--r-border-focused, #0071e3);
+  outline-offset: 2px;
+}
+
+:host(:hover:not([data-has-panel=false]):not([disabled]:not([disabled=false]))) {
+  --r-accordion-trigger--background-color: var(--r-background-interactive-hovered, rgba(40,40,40,0.04));
+}
+
+:host(:active:not([data-has-panel=false]):not([disabled]:not([disabled=false]))) {
+  --r-accordion-trigger--background-color: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
+}
+
+:host([expanded]:not([expanded=false]):not([splitted])) {
+  --r-accordion-trigger--icon--background-color: var(--r-color-white-haze-400);
+  --r-accordion-trigger--icon--transform: rotate(180deg);
+}
+
+:host([disabled]:not([disabled=false])) {
+  cursor: not-allowed;
+  --r-accordion-trigger--content--leading-slot--opacity: 0.4;
+  --r-accordion-trigger--icon--opacity: 0.4;
+  --r-accordion-trigger--background-color: transparent;
+}
+
+:host([data-has-panel=false]) {
+  cursor: default;
+  --r-accordion-trigger--icon--display: none;
+}
+
+.r-accordion-trigger {
+  display: var(--r-accordion-trigger--display, flex);
+  align-items: var(--r-accordion-trigger--align-items, center);
+  flex-direction: var(--r-accordion-trigger--flex-direction, end);
+  justify-content: var(--r-accordion-trigger--justify-content, space-between);
+  gap: var(--r-accordion-trigger--gap, var(--r-spacing-150, 1.5rem));
+  color: var(--r-accordion-trigger--color, var(--r-text-regular, #282828));
+  padding-right: var(--r-accordion-trigger--padding-right, var(--r-spacing-100, 1rem));
+  padding-left: var(--r-accordion-trigger--padding-left, var(--r-spacing-100, 1rem));
+  padding-top: var(--r-accordion-trigger--padding-top, var(--r-spacing-150, 1.5rem));
+  padding-bottom: var(--r-accordion-trigger--padding-bottom, var(--r-spacing-150, 1.5rem));
+  background-color: var(--r-accordion-trigger--background-color, transparent);
+}
+
+.r-accordion-trigger--content {
+  box-sizing: var(--r-accordion-trigger--content--box-sizing, border-box);
+  width: var(--r-accordion-trigger--content--width, 100%);
+  display: var(--r-accordion-trigger--content--display, flex);
+  align-items: var(--r-accordion-trigger--content--align-items, center);
+  gap: var(--r-accordion-trigger--content--gap, var(--r-spacing-100, 1rem));
+  border-width: var(--r-accordion-trigger--content--border-width, 0);
+  background-color: var(--r-accordion-trigger--content--background-color, transparent);
+  color: var(--r-accordion-trigger--content--color, inherit);
+  text-align: var(--r-accordion-trigger--content--text-align, left);
+  text-transform: var(--r-accordion-trigger--content--text-transform, none);
+  font-size: var(--r-accordion-trigger--content--font-size, var(--r-font-size-500));
+  font-weight: var(--r-accordion-trigger--content--font-weight, var(--r-font-weight-regular));
+  letter-spacing: var(--r-accordion-trigger--content--letter-spacing, normal);
+}
+.r-accordion-trigger--content ::slotted([slot=leading-icon]) {
+  color: var(--r-accordion-trigger--content--leading-slot--color, var(--r-icon-soft, #686868));
+  opacity: var(--r-accordion-trigger--content--leading-slot--opacity, 1);
+}
+
+.r-accordion-trigger--icon {
+  display: var(--r-accordion-trigger--icon--display, flex);
+  align-items: var(--r-accordion-trigger--icon--align-items, center);
+  justify-content: var(--r-accordion-trigger--icon--justify-content, center);
+  min-width: var(--r-accordion-trigger--icon--min-width, var(--r-spacing-150, 1.5rem));
+  width: var(--r-accordion-trigger--icon--width, var(--r-spacing-150, 1.5rem));
+  height: var(--r-accordion-trigger--icon--height, var(--r-spacing-150, 1.5rem));
+  transition: var(--r-accordion-trigger--icon--transition, transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1) 0s);
+  transform: var(--r-accordion-trigger--icon--transform, rotate(0deg));
+  color: var(--r-accordion-trigger--icon--color, var(--r-text-regular, #282828));
+  opacity: var(--r-accordion-trigger--icon--opacity, 1);
+}
+
+@media (prefers-reduced-motion) {
+  .r-accordion-trigger--icon {
+    transition: none;
+  }
+}

package/dist/collection/components/accordion-trigger/accordion-trigger.js

@@ -0,0 +1,220 @@
+import { Host, h } from "@stencil/core";
+export class AccordionTrigger {
+    constructor() {
+        this.handleClick = (event) => {
+            if (this.disabled)
+                return;
+            event.stopPropagation();
+            event.preventDefault();
+            this.rClickTrigger.emit({
+                element: this.host,
+                panelId: this.panel,
+                expanded: this.expanded
+            });
+        };
+        this.handleKeyup = (event) => {
+            if (this.disabled)
+                return;
+            const isSpace = event.code === 'Space';
+            const isEnter = event.code === 'Enter';
+            if (isSpace || isEnter) {
+                event.stopPropagation();
+                event.preventDefault();
+                this.rKeyupTrigger.emit({
+                    element: this.host,
+                    panelId: this.panel,
+                    expanded: this.expanded
+                });
+            }
+        };
+        this.handleKeydown = (event) => {
+            if (this.disabled)
+                return;
+            const isSpace = event.code === 'Space';
+            if (isSpace) {
+                event.preventDefault();
+            }
+        };
+        this._replaceSlotName = elementName => {
+            var _a, _b;
+            const selector = `.r-accordion-trigger--${elementName}`;
+            const element = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+            (_b = element === null || element === void 0 ? void 0 : element.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.setAttribute('name', `${elementName}-${this.nameAddition}`);
+        };
+    }
+    get hasPanel() {
+        const sectionElement = this.host.closest('r-accordion-section');
+        const panelElement = sectionElement === null || sectionElement === void 0 ? void 0 : sectionElement.querySelector('r-accordion-panel');
+        return panelElement !== null;
+    }
+    get nameAddition() {
+        return this.expanded ? 'expanded' : 'collapsed';
+    }
+    updateExpanded() {
+        if (!this.splitted)
+            return;
+        this._replaceSlotName('icon');
+        this._replaceSlotName('content');
+    }
+    render() {
+        const hostAttrs = {
+            role: 'button',
+            tabindex: `${this.disabled ? '-1' : '0'}`,
+            slot: 'accordion-trigger',
+            'aria-controls': `${this.panel || ''}`,
+            'aria-expanded': `${this.expanded || false}`,
+            'aria-disabled': `${this.disabled || false}`,
+            'data-has-panel': `${this.hasPanel}`
+        };
+        hostAttrs['aria-controls'] = this.panel ? `${this.panel}` : null;
+        return (h(Host, Object.assign({ key: 'e823c4799fa51824a6de4db7bf857385b0558ec4', onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, hostAttrs), h("span", { key: '55249e964a4eb164a4f842567f8cf14c9c58fee5', class: "r-accordion-trigger" }, h("span", { key: '37ffd053c1af48ff23ee9d1c22b6a0b6c92a3110', class: "r-accordion-trigger--content" }, h("slot", { key: 'b4583e319fd62bb98c2f2b312cd2edcfc646ddb5', name: "leading-icon" }), this.splitted ?
+            h("slot", { name: `content-${this.nameAddition}` }, h("slot", null))
+            :
+                h("slot", null)), h("span", { key: '190013be64d4239d80be83ae9fb581b1d1e64f83', class: "r-accordion-trigger--icon" }, this.splitted ?
+            h("slot", { name: `icon-${this.nameAddition}` }, h("r-icon", { name: this.expanded ? 'angle-up' : 'angle-down', size: "m" }))
+            :
+                h("slot", { name: "icon" }, h("r-icon", { name: "angle-down", size: "m" }))))));
+    }
+    static get is() { return "r-accordion-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["accordion-trigger.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["accordion-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "panel": {
+                "type": "string",
+                "attribute": "panel",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the panel this trigger controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "expanded": {
+                "type": "boolean",
+                "attribute": "expanded",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indication of the controlled panel revelation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "splitted": {
+                "type": "boolean",
+                "attribute": "splitted",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls if expanded and collapsed icons are not the same"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rClickTrigger",
+                "name": "rClickTrigger",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit click on trigger"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRAccordionTriggerElement\n    panelId: string,\n    expanded: boolean\n  }",
+                    "resolved": "{ element: HTMLRAccordionTriggerElement; panelId: string; expanded: boolean; }",
+                    "references": {
+                        "HTMLRAccordionTriggerElement": {
+                            "location": "global",
+                            "id": "global::HTMLRAccordionTriggerElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "rKeyupTrigger",
+                "name": "rKeyupTrigger",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit keyup on trigger"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRAccordionTriggerElement\n    panelId: string,\n    expanded: boolean\n  }",
+                    "resolved": "{ element: HTMLRAccordionTriggerElement; panelId: string; expanded: boolean; }",
+                    "references": {
+                        "HTMLRAccordionTriggerElement": {
+                            "location": "global",
+                            "id": "global::HTMLRAccordionTriggerElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "updateExpanded"
+            }];
+    }
+}

package/dist/collection/components/alert/alert.css

@@ -0,0 +1,120 @@
+:host([status=info]) {
+  --color: var(--r-status-info-soft, #f8fafb);
+  --background-color: var(--r-status-info-regular, #3e5c73);
+}
+
+:host([status=warning]) {
+  --color: var(--r-text-warning, #000000);
+  --r-alert--leading-icon--color: var(--r-icon-warning, #000000);
+  --background-color: var(--r-status-warning-regular, #ff7429);
+}
+
+:host([status=error]) {
+  --color: var(--r-status-error-soft, #fef6f6);
+  --background-color: var(--r-status-error-regular, #b00c15);
+}
+
+:host([status=error]) r-icon-button:hover,
+:host([status=info]) r-icon-button:hover {
+  --r-icon-button--background-color: var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04));
+}
+:host([status=error]) r-icon-button:active,
+:host([status=info]) r-icon-button:active {
+  --r-icon-button--background-color: var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12));
+}
+:host([status=error]) .r-alert--link:hover,
+:host([status=error]) ::slotted(r-button:hover:not([disabled]):not([disabled=true])),
+:host([status=info]) .r-alert--link:hover,
+:host([status=info]) ::slotted(r-button:hover:not([disabled]):not([disabled=true])) {
+  --r-button--background-color: var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04));
+}
+:host([status=error]) .r-alert--link:active,
+:host([status=error]) ::slotted(r-button:active:not([disabled]):not([disabled=true])),
+:host([status=info]) .r-alert--link:active,
+:host([status=info]) ::slotted(r-button:active:not([disabled]):not([disabled=true])) {
+  --r-button--background-color--active: var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12));
+}
+
+:host([aria-hidden=true]) {
+  --transition: all 0.5s;
+  --opacity: 0;
+  --display: none;
+}
+
+:host {
+  display: var(--display, block);
+  color: var(--color, var(--r-status-info-soft, #f8fafb));
+  background-color: var(--background-color, var(--r-status-info-regular, #3e5c73));
+  position: var(--position, relative);
+  width: var(--width, 100%);
+  left: var(--left, 0);
+  transition: var(--transition, none);
+  transition-behavior: var(--transition-behavior, allow-discrete);
+  visibility: var(--visibility, visible);
+  opacity: var(--opacity, 1);
+  z-index: var(--z-index, unset);
+  font-family: var(--font-family, var(--r-font-family-text, system-ui));
+  font-size: var(--font-size, var(--r-font-size-400, 1rem));
+  font-weight: var(--font-weight, var(--r-font-weight-regular, 400));
+}
+@media (prefers-reduced-motion) {
+  :host {
+    transition: none;
+  }
+}
+
+.r-alert {
+  display: var(--r-alert--display, grid);
+  grid-template-columns: var(--r-alert--grid-template-columns, auto 1fr auto);
+  align-items: var(--r-alert--align-items, start);
+  gap: var(--r-alert--gap, var(--r-spacing-100, 1rem));
+  padding: var(--r-alert--padding, 16px);
+  box-sizing: var(--r-alert--box-sizing, border-box);
+}
+.r-alert[data-has-headline=false] {
+  --r-alert--align-items: center;
+}
+.r-alert:empty {
+  --r-alert--display: none;
+}
+.r-alert--main {
+  display: var(--r-alert--main--display, flex);
+  flex-flow: var(--r-alert--main--flex-flow, column);
+  gap: var(--r-alert--main--gap, var(--r-spacing-050));
+}
+.r-alert--headline {
+  color: var(--r-alert--headline--color, var(--color));
+  font-size: var(--r-alert--headline--font-size, var(--r-font-size-400, 1rem));
+  font-weight: var(--r-alert--headline--font-weight, var(--r-font-weight-semibold, 600));
+  line-height: var(--r-alert--headline--line-height, var(--r-line-height-m, 1.5));
+  margin: var(--r-alert--headline--margin, 0);
+}
+.r-alert--leading {
+  color: var(--r-alert--leading-icon--color, var(--color));
+}
+.r-alert--trailing r-icon-button {
+  --r-button--padding: 0;
+  --r-button--color: var(--color);
+}
+.r-alert--content {
+  margin-top: var(--r-alert--content--margin-top, 0);
+  line-height: var(--r-alert--content--line-height, 1.5);
+}
+.r-alert--link,
+.r-alert ::slotted(r-button) {
+  --r-button--background-color: transparent;
+  --r-button--border-width: 0;
+  --r-button--color: var(--r-alert--link--color, var(--color));
+  --r-button--padding: 10px 2px 18px 2px;
+  --r-button--slot--text-decoration: underline;
+  --r-button--slot--text-underline-offset: 9px;
+}
+.r-alert--link:hover,
+.r-alert ::slotted(r-button:hover:not([disabled]):not([disabled=true])) {
+  --r-button--background-color: var(--r-background-interactive-hovered);
+}
+.r-alert--link:active,
+.r-alert ::slotted(r-button:active:not([disabled]):not([disabled=true])) {
+  --r-button--color--active: var(--r-alert--link--color, var(--color));
+  --r-button--background-color--active: var(--r-background-interactive-pressed);
+}