@riverty/web-components 5.7.0 → 6.0.0

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

@@ -1,36 +1,6 @@
 import { Host, h } from "@stencil/core";
 export class AccordionTrigger {
     constructor() {
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Icon to be used as status indication
-         **/
-        this.icon = 'angle-down';
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Defines the size of an icon used as status indication. Default: `m`.
-         **/
-        this.iconSize = 'm';
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Icon might be placed before or after content
-         **/
-        this.iconPosition = 'end';
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Icon for expanded state
-         **/
-        this.iconExpanded = 'angle-up';
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Icon for collapsed state
-         **/
-        this.iconCollapsed = 'angle-down';
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release. Use leading icon slot instead)
-         * Defines the size of an icon in leading slot. Default: `m`.
-         * */
-        this.leadingIconSize = 'm';
         this.handleClick = (event) => {
             if (this.disabled)
                 return;
@@ -97,13 +67,13 @@ export class AccordionTrigger {
             'data-has-panel': `${this.hasPanel}`
         };
         hostAttrs['aria-controls'] = this.panel ? `${this.panel}` : null;
-        return (h(Host, Object.assign({ key: 'd235b70fd5a27c0395e7d64b1ceec4a9254de4c6', onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, hostAttrs), h("span", { key: 'e0aa03725cae1b5b2562581388b9d86a56c7ff9c', class: "r-accordion-trigger" }, h("span", { key: '556699d5335fce11c5ad4e801d43770049971c52', class: "r-accordion-trigger--content" }, h("slot", { key: '0666ed3a794a45d16d385909e9c7d37924d9c8c5', name: "leading-icon" }, this.leadingIcon && h("r-icon", { key: '05d42ffa9abcff6a3261bfc9af598587f0cc0c83', name: this.leadingIcon, size: this.leadingIconSize })), this.splitted ?
+        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: 'c174ffb461cb2ea616928c7d905926c548afac36', class: "r-accordion-trigger--icon" }, this.splitted ?
-            h("slot", { name: `icon-${this.nameAddition}` }, h("r-icon", { name: this.expanded ? this.iconExpanded : this.iconCollapsed, size: this.iconSize }))
+                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: this.icon, size: this.iconSize }))))));
+                h("slot", { name: "icon" }, h("r-icon", { name: "angle-down", size: "m" }))))));
     }
     static get is() { return "r-accordion-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -194,187 +164,6 @@ export class AccordionTrigger {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "icon": {
-                "type": "string",
-                "attribute": "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": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nIcon to be used as status indication"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'angle-down'"
-            },
-            "iconSize": {
-                "type": "string",
-                "attribute": "icon-size",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconSize",
-                    "resolved": "\"l\" | \"m\" | \"s\"",
-                    "references": {
-                        "IconSize": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nDefines the size of an icon used as status indication. Default: `m`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'m'"
-            },
-            "iconPosition": {
-                "type": "string",
-                "attribute": "icon-position",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconPosition",
-                    "resolved": "\"end\" | \"start\"",
-                    "references": {
-                        "IconPosition": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nIcon might be placed before or after content"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'end'"
-            },
-            "iconExpanded": {
-                "type": "string",
-                "attribute": "icon-expanded",
-                "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_ (This property will be removed in November 2025 release.)\nIcon for expanded state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'angle-up'"
-            },
-            "iconCollapsed": {
-                "type": "string",
-                "attribute": "icon-collapsed",
-                "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_ (This property will be removed in November 2025 release.)\nIcon for collapsed state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'angle-down'"
-            },
-            "leadingIcon": {
-                "type": "string",
-                "attribute": "leading-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_ (This property will be removed in November 2025 release. Use leading icon slot instead)\nName of an icon rendered within leading slot (before content)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "leadingIconSize": {
-                "type": "string",
-                "attribute": "leading-icon-size",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconSize",
-                    "resolved": "\"l\" | \"m\" | \"s\"",
-                    "references": {
-                        "IconSize": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release. Use leading icon slot instead)\nDefines the size of an icon in leading slot. Default: `m`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'m'"
             }
         };
     }

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

@@ -3,13 +3,9 @@
   --background-color: var(--r-status-info-regular, #3e5c73);
 }
 
-:host([status=success]) {
-  --color: var(--r-status-success-soft, #f7fdf8);
-  --background-color: var(--r-status-success-regular, #298535);
-}
-
 :host([status=warning]) {
-  --color: var(--r-color-grey-charcoal-400, #282828);
+  --color: var(--r-text-warning, #000000);
+  --r-alert--leading-icon--color: var(--r-icon-warning, #000000);
   --background-color: var(--r-status-warning-regular, #ff7429);
 }
 
@@ -18,6 +14,27 @@
   --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;
   --position: absolute;
@@ -38,28 +55,33 @@
   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, 16px));
+  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);
   gap: var(--r-alert--gap, var(--r-spacing-100, 1rem));
-  padding: var(--r-alert--padding, var(--r-spacing-100, 1rem));
+  padding: var(--r-alert--padding, 16px);
   box-sizing: var(--r-alert--box-sizing, border-box);
 }
 .r-alert:empty {
   --r-alert--display: none;
 }
-.r-alert a {
-  color: var(--color);
-}
 .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--main:not(:has(.r-alert--headline)) {
+  --r-alert--content--margin-top: var(--r-spacing-025, 0.25rem);
+}
 .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));
@@ -67,7 +89,31 @@
   line-height: var(--r-alert--headline--line-height, var(--r-line-height-m, 1.5));
   margin: var(--r-alert--headline--margin, 0);
 }
-.r-alert--trailing r-button {
+.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);
+}

package/dist/collection/components/alert/alert.js

@@ -3,17 +3,26 @@ export class Alert {
     constructor() {
         /** Alert status controls apperance according to the status */
         this.status = 'info';
+        /** Sets role="alert" and will be announced to screen reader users */
+        this.announced = true;
         /** Defines an icon size to be presented in leading slot*/
         this.leadingIconSize = 'm';
+        /**
+         * Defines whether the leading icon is visible.
+         * @default true
+         * */
+        this.leadingIconVisible = true;
+        /** Defines an icon to be presented in trailing slot */
+        this.trailingIcon = 'cross';
         /** Defines an icon size to be presented in trailing slot*/
-        this.trailingIconSize = 's';
+        this.trailingIconSize = 'm';
         /**
          * Defines the target for the linked URL when `href` is provided.
          * Options: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         this.target = '_self';
         /** Text content for an alert dismiss button */
-        this.dismissButtonAriaLabel = 'close-button';
+        this.dismissButtonAriaLabel = 'Dismiss alert';
         this.isElContent = (selector) => {
             const el = this.host.querySelector(selector);
             return el !== null && (el === null || el === void 0 ? void 0 : el.textContent.trim().length) > 0;
@@ -33,15 +42,11 @@ export class Alert {
             this.collapseAlert();
         };
     }
-    get isLeadingIcon() {
-        var _a, _b;
-        return ((_a = this.leadingIcon) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.leadingIconSrc) === null || _b === void 0 ? void 0 : _b.length) > 0;
-    }
     get isLeadingSlot() {
         return this.isElContent('[slot="leading"]');
     }
     get isLeading() {
-        return this.isLeadingIcon || this.isLeadingSlot;
+        return this.leadingIconVisible || this.isLeadingSlot;
     }
     get isTrailingIcon() {
         var _a, _b;
@@ -74,13 +79,39 @@ export class Alert {
     get isDelay() {
         return this.delay && this.delay >= 0;
     }
+    get headlineSlotContent() {
+        var _a;
+        const el = this.host.querySelector('[slot="headline"]');
+        return (_a = el === null || el === void 0 ? void 0 : el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+    }
+    get statusBasedLeadingIconName() {
+        if (this.leadingIcon)
+            return this.leadingIcon;
+        switch (this.status) {
+            case 'info':
+                return 'circled-information-i';
+            case 'warning':
+                return 'circled-exclamation-mark';
+            case 'error':
+                return 'triangle-with-exclamation-mark';
+            default:
+                return 'circled-information-i';
+        }
+    }
     componentDidLoad() {
         if (this.isDelay)
             this.startCollapseTimer();
     }
     render() {
+        const hostAttrs = this.announced ? {
+            role: 'alert',
+            'aria-live': this.status === 'info' ? 'polite' : 'assertive'
+        } : {
+            role: 'region',
+            'aria-label': this.headlineSlotContent || this.headline || null
+        };
         const leadingIconAttrs = {
-            name: this.leadingIcon,
+            name: this.statusBasedLeadingIconName,
             src: this.leadingIconSrc,
             size: this.leadingIconSize
         };
@@ -89,14 +120,14 @@ export class Alert {
             src: this.trailingIconSrc,
             size: this.trailingIconSize
         };
-        return (h(Host, { key: 'f97ea22cbaacceb5954cbf084ddbe85975266463' }, h("div", { key: '8a2de8f27af0cb57bf429fbe0ae75557d6505111', class: "r-alert" }, this.isLeading &&
-            h("div", { key: '6ecab67bd5eb14b06ad13f1c5257c43ff5c5acdc', class: "r-alert--leading" }, h("slot", { key: '106fad47e317120e6bdc47a4509fe3b330a43451', name: "leading" }), this.isLeadingIcon && h("r-icon", Object.assign({ key: '4d2b589d2d6179eecdaec7f2be5e265fcaf5e82b' }, leadingIconAttrs))), this.isMain ?
+        return (h(Host, Object.assign({ key: 'e0bb7ba3b7ca0c93e47c20c8666489976b52fe6d' }, hostAttrs), h("div", { key: 'c13d2517796fb274af8632a574196603feb13e61', class: "r-alert" }, this.isLeading &&
+            h("div", { key: 'b38044eb982c0b9fcd352122a6d21008e1802abb', class: "r-alert--leading" }, h("slot", { key: '01a26f5684ab9dc959c5f79cb8694a23621d091f', name: "leading" }, this.leadingIconVisible && h("r-icon", Object.assign({ key: '36b7c3e1c35faee26737e0f165ecad79c109bd4f' }, leadingIconAttrs)))), this.isMain ?
             h("div", { class: "r-alert--main" }, h("slot", { name: "headline" }, this.isHeadline && h("h3", { class: "r-alert--headline" }, this.headline)), h("slot", { name: "content" }, this.isContent && h("div", { class: "r-alert--content" }, this.content)), h("slot", { name: "link" }, this.isLink &&
-                h("a", { class: "r-alert--link", href: this.href, target: this.target }, this.linkText)), h("slot", null))
+                h("r-button", { class: "r-alert--link", variant: "text-inline", size: "small", href: this.href, target: this.target }, this.linkText)), h("slot", null))
             :
                 h("slot", null), this.isTrailing &&
-            h("div", { key: '2bc31060546003c180d235f3992df5c1fdf31f30', class: "r-alert--trailing" }, h("slot", { key: '7816f3c023dd174dfe0b385ad282ad9356f7a45d', name: "trailing" }), this.isTrailingIcon &&
-                h("r-button", { key: '493fdd793b54ba34ebe6453d668d9251874b8409', variant: "blank", onClick: this.handleTrailingButtonClick, "r-aria-label": this.dismissButtonAriaLabel || trailingIconAttrs.name }, h("r-icon", Object.assign({ key: '9148348328646173144d98d2c2f58ea67ed20c88' }, trailingIconAttrs)))))));
+            h("div", { key: 'dc9b171a6263c167a08816bfb2c149376eef6d34', class: "r-alert--trailing" }, h("slot", { key: '2d31946de22bb1cc247969207fc4243e4fcd7c08', name: "trailing" }, this.isTrailingIcon &&
+                h("r-icon-button", { key: '0c738aed534f98062835a59b55fe7b83e20473fb', name: !this.trailingIconSrc ? this.trailingIcon : null, onClick: this.handleTrailingButtonClick, label: this.dismissButtonAriaLabel }, this.trailingIconSrc && h("r-icon", Object.assign({ key: '13653d686f0886f16c157cdb3a499abbd5006d2b' }, trailingIconAttrs))))))));
     }
     static get is() { return "r-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +149,7 @@ export class Alert {
                 "mutable": false,
                 "complexType": {
                     "original": "AlertStatus",
-                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "resolved": "\"error\" | \"info\" | \"warning\"",
                     "references": {
                         "AlertStatus": {
                             "location": "import",
@@ -138,6 +169,26 @@ export class Alert {
                 "reflect": true,
                 "defaultValue": "'info'"
             },
+            "announced": {
+                "type": "boolean",
+                "attribute": "announced",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets role=\"alert\" and will be announced to screen reader users"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
+            },
             "leadingIcon": {
                 "type": "string",
                 "attribute": "leading-icon",
@@ -208,6 +259,29 @@ export class Alert {
                 "reflect": false,
                 "defaultValue": "'m'"
             },
+            "leadingIconVisible": {
+                "type": "boolean",
+                "attribute": "leading-icon-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Defines whether the leading icon is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "trailingIcon": {
                 "type": "string",
                 "attribute": "trailing-icon",
@@ -231,7 +305,8 @@ export class Alert {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'cross'"
             },
             "trailingIconSrc": {
                 "type": "string",
@@ -276,7 +351,7 @@ export class Alert {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'s'"
+                "defaultValue": "'m'"
             },
             "headline": {
                 "type": "string",
@@ -417,7 +492,7 @@ export class Alert {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'close-button'"
+                "defaultValue": "'Dismiss alert'"
             }
         };
     }

package/dist/collection/components/alert/exports.js

@@ -1,2 +1,2 @@
-export const alertStatusArray = ['info', 'warning', 'success', 'error'];
+export const alertStatusArray = ['info', 'warning', 'error'];
 export const alertTargetArray = ['_blank', '_self', '_parent', '_top'];

package/dist/collection/components/badge/badge.js

@@ -29,7 +29,7 @@ export class RBadge {
         const hostAttrs = {
             variant
         };
-        return (h(Host, Object.assign({ key: '73206915b750bff058e10baa6b725f763ce9c4cc' }, hostAttrs), h("div", { key: 'cd108d117bfd02dbddf34f026aabee07dcf9a709', class: "r-badge" }, iconVisible && h("slot", { key: '8c171f451c87943a2e079eee5dc0b41da0ef0c2b', name: "icon" }, h("r-icon", { key: 'a9fdeb7b0685cd9f76916818bd6ea5fd320cb657', size: "s", name: this.iconName, iconAriaLabel: iconAriaLabel })), h("slot", { key: '507b120621c22339e988216713197f22ab7bf6f8' }))));
+        return (h(Host, Object.assign({ key: '414f16e5a8bde16b295420ea689be3b528b6b9d7' }, hostAttrs), h("div", { key: 'd06b6b22be283666817326c82503080c247b3cb7', class: "r-badge" }, iconVisible && h("slot", { key: '38e1c8768bbc6560294f798ba635bb6a1ecd5ee1', name: "icon" }, h("r-icon", { key: 'da0d4672b3fd929deb32944faeb2cf6676dd0751', size: "s", name: this.iconName, iconAriaLabel: iconAriaLabel })), h("slot", { key: 'f0c3ce3e33ddb887af28e03cbd9af75f0fe0346e' }))));
     }
     static get is() { return "r-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.css

@@ -51,7 +51,7 @@
   --r-button--border-color: var(--r-border-soft, #686868);
 }
 
-:host([variant=secondary] .r-button[aria-disabled=false]:active) {
+:host([variant=secondary] .r-button:not([aria-disabled=true]):active) {
   --r-button--color: var(--r-text-regular, #282828);
   --r-button--border-color: var(--r-border-soft, #686868);
   --r-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
@@ -70,7 +70,7 @@
   --r-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
 }
 
-:host([variant=text] .r-button[aria-disabled=false]:active) {
+:host([variant=text] .r-button:not([aria-disabled=true]):active) {
   --r-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
   --r-button--border-color: var(--r-border-soft, #686868);
 }
@@ -99,7 +99,6 @@
 }
 
 :host([variant=text-inline]:active:not([disabled]:not([disabled=false]))) {
-  --r-button--color: var(--r-border-softer, #c9c9c9);
   --r-button--border-color: transparent;
   --r-button--background-color: transparent;
 }
@@ -161,10 +160,10 @@
   vertical-align: var(--r-button--vertical-align, top);
   opacity: var(--r-button--opacity, 1);
 }
-.r-button[aria-disabled=false]:active {
-  --r-button--color: var(--r-text-regular, #282828);
-  --r-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
-  --r-button--border-color: var(--r-border-soft, #686868);
+.r-button:not([aria-disabled=true]):active {
+  --r-button--color: var(--r-button--color--active, var(--r-text-regular, #282828));
+  --r-button--background-color: var(--r-button--background-color--active, var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12)));
+  --r-button--border-color: var(--r-button--border-color--active, var(--r-border-soft, #686868));
 }
 .r-button--slot {
   position: var(--r-button--slot--position, relative);

package/dist/collection/components/button/button.js

@@ -131,7 +131,7 @@ export class Button {
             position: iconPosition
         };
         const TagName = isLink ? 'a' : 'button';
-        return (h(Host, { key: '0b48f424b11006ab76b94efcc9c2bf8f09b34102' }, h(TagName, Object.assign({ key: '3ce6a6d4a585fb785d44c9da2e41a6257ff83577', class: "r-button" }, attrs, { "aria-label": rAriaLabel || null, ref: (el) => (this.nativeElement = el), onClick: this.handleClick }), h("span", { key: '1a554fd1567c800d7ba10d8862e9fd90ede883a4', class: "r-button--slot" }, icon && h("r-icon", Object.assign({ key: '3a05d454414ce42b0a1ead502d0a7df48c35a647', name: icon }, iconAttrs, { size: "s" })), this.hasIconSlot && h("slot", { key: '723ad285f16dea5a7e007a46a47e308942366b92', name: "icon" }), h("div", { key: 'bf7829917767fa2d578508bbfa5c4456579f6766', style: { display: 'contents' } }, h("slot", { key: '59ecb9a9901fe5084af9d42ad408c7413e0c3d1f', onSlotchange: this.handleSlotChange }))))));
+        return (h(Host, { key: '97dbd8b4be7ada112d733f3e8838bb98b23ea37d' }, h(TagName, Object.assign({ key: '51ac8df717d9db6901b0bf313987fca0aa3c9e0e', class: "r-button" }, attrs, { "aria-label": rAriaLabel || null, ref: (el) => (this.nativeElement = el), onClick: this.handleClick }), h("span", { key: '5d18e8d4d11946a950196113ca34b13389d380d7', class: "r-button--slot" }, icon && h("r-icon", Object.assign({ key: 'b0eab29fd53184befd2e63cc48b8e9fa5262f742', name: icon }, iconAttrs, { size: "s" })), this.hasIconSlot && h("slot", { key: '1679c43372773a8888d790afcee23d4b4a4d5969', name: "icon" }), h("div", { key: 'd3862e66255a78e2cfb0ae3741cd8f82e4efc0ea', style: { display: 'contents' } }, h("slot", { key: '68dc5cbb93492c37139d6efdbc706050271f710f', onSlotchange: this.handleSlotChange }))))));
     }
     static get is() { return "r-button"; }
     static get encapsulation() { return "shadow"; }