@riverty/web-components 6.2.0 → 6.3.0

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

@@ -1,235 +0,0 @@
-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

@@ -1,93 +0,0 @@
-: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

@@ -1,220 +0,0 @@
-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

@@ -1,119 +0,0 @@
-: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);
-}
-.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);
-}