@riverty/web-components 5.4.0 → 5.6.0

package/dist/collection/components/label/label.js

@@ -25,9 +25,9 @@ export class RLabel {
             size: 's',
             color: tooltipIconColor
         };
-        return (h(Host, { key: '06097c8d9963d79b783b245a934832e3f8e7596b' }, h("div", { key: '2a3a8ddd22fddedb8e7a7472f81c05201ea26a77', class: "r-label" }, h("span", { key: '9d1814759bb2b3f8784a73aa75b215a19985f482', class: "r-label--slot" }, h("slot", { key: 'd472e83f02841c979bbfcc36c54068141de0d380' }), fieldIndicator &&
-            h("span", { key: 'f275ed855ebd8a684a35ce9b074b0e04471dcfe2', class: "r-label--marker" }, fieldIndicator)), tooltip &&
-            h("span", { key: 'aa336cbb979d0866e8f586c1596b9d9f38925023', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: '245cd576fadb1b31ca2041a9b3d9b5a9a63e381d' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'f83ce1d9d0ab51b3c5394866b01b1998559ddc68' }, tooltipIconAttrs)))))));
+        return (h(Host, { key: '2d7da94197a774e5b3399ff59dba01f946f0d8df' }, h("div", { key: '56baaf39a736e1f504502c9f49b4cf5fbff2f911', class: "r-label" }, h("span", { key: '5b0032c31e83b628d73a207eeaa915368edc7237', class: "r-label--slot" }, h("slot", { key: 'fbcd30c185b9eef55ea43c8ca8b082a0308953e2' }), fieldIndicator &&
+            h("span", { key: '0d355d5857e515e735dc543d3416540e0a0ffdba', class: "r-label--marker" }, fieldIndicator)), tooltip &&
+            h("span", { key: 'b450b3e7ee2b33dbdc02d9fce04bd2ef6a97713d', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: 'a1b2a24a312b7eabd5acd43273658bce3199ef1b' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'c22f6349b9c67a82b29f4a5758a77fb1b2910b75' }, tooltipIconAttrs)))))));
     }
     static get is() { return "r-label"; }
     static get encapsulation() { return "shadow"; }
@@ -127,7 +127,7 @@ export class RLabel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/list-item/list-item/list-item.css

@@ -1,4 +1,5 @@
-:host([alignment=top]) .r-list-item {
+:host([alignment=top]) {
+  --r-list-item--trailing-text--font-weight: bold;
   --r-list-item--trailing--align-self: start;
 }
 
@@ -74,6 +75,10 @@
   --r-list-item--leading-icon--color: rgba(104,104,104, 0.4);
 }
 
+:host([truncate-description]:not([truncate-description=false])) {
+  --r-list-item--description--white-space: nowrap;
+}
+
 :host {
   display: var(--display, block);
   pointer-events: var(--pointer-events, auto);
@@ -111,14 +116,6 @@
 .r-list-item--leading-icon {
   color: var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868));
 }
-.r-list-item--text {
-  flex-grow: var(--r-list-item--text--flex-grow, 1);
-  overflow: var(--r-list-item--overflow);
-  display: var(--r-list-item--text-slot--display);
-  white-space: var(--r-list-item--text--white-space, nowrap);
-  overflow: var(--r-list-item--text--overflow, hidden);
-  text-overflow: var(--r-list-item--text--text-overflow, ellipsis);
-}
 .r-list-item--trailing {
   display: var(--r-list-item--trailing--display, flex);
   align-self: var(--r-list-item--trailing--align-self, center);
@@ -130,14 +127,23 @@
   transform: var(--r-list-item--trailing-icon--transform, rotate(0deg));
   color: var(--r-list-item--trailing-icon--color, inherit);
 }
+.r-list-item--trailing-text {
+  font-weight: var(--r-list-item--trailing-text--font-weight, 400);
+  white-space: var(--r-list-item--trailing-text--white-space, nowrap);
+}
 .r-list-item--trailing ::slotted(*) {
   display: var(--r-list-item--trailing-slotted--display, flex);
   gap: var(--r-list-item--trailing-slotted--display, 8px);
 }
 .r-list-item--text {
   display: var(--r-list-item--text--display, flex);
+  flex-grow: var(--r-list-item--text--flex-grow, 1);
   flex-direction: var(--r-list-item--text--flex-direction, column);
   gap: var(--r-list-item--text--gap, 2px);
+  white-space: var(--r-list-item--text--white-space, normal);
+  overflow: var(--r-list-item--text--overflow, hidden);
+  text-overflow: var(--r-list-item--text--text-overflow, ellipsis);
+  font-weight: var(--r-list-item--trailing-text--font-weight, inherit);
 }
 .r-list-item--headline {
   font-size: var(--r-list-item--headline--font-size, 1rem);
@@ -150,8 +156,10 @@
   font-weight: var(--r-list-item--description--font-weight, var(--r-list-item--subtext--font-weight, 400));
   line-height: var(--r-list-item--description--line-height, var(--r-list-item--subtext--line-height, 1.5));
   color: var(--r-list-item--description--color, var(--r-list-item--subtext--color, var(--r-text-regular, #282828)));
+  white-space: var(--r-list-item--description--white-space, normal);
+  overflow: var(--r-list-item--description--overflow, hidden);
+  text-overflow: var(--r-list-item--description--text-overflow, ellipsis);
 }
-.r-list-item--subtext ::slotted(a.subtext), .r-list-item--description ::slotted(a.subtext) {
+.r-list-item--subtext ::slotted(a), .r-list-item--description ::slotted(a) {
   color: var(--r-list-item--description--color, var(--r-list-item--subtext--slotted--color, inherit));
-  text-decoration: var(--r-list-item--description--text-decoration, var(--r-list-item--subtext--slotted--text-decoration, none));
 }

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

@@ -18,14 +18,13 @@ export class RListItem {
         this.expanded = !this.expanded;
     }
     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;
+        return !!this.leadingIcon || !!this.leadingIconSrc;
     }
     get isLeadingSlot() {
         return this.isEl('[slot="leading"]');
     }
     get isLeading() {
-        return this.isLeadingIcon || this.isLeadingSlot;
+        return (this.isLeadingIcon && !this.hideLeadingIcon) || this.isLeadingSlot;
     }
     get isTrailingIcon() {
         var _a, _b;
@@ -82,7 +81,7 @@ export class RListItem {
         const TagName = this.tagName;
         const itemAttrs = Object.assign({ href: TagName === 'a' ? this.href : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null));
         const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs), this.isLeading &&
-            h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon &&
+            h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
                 h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
             h(Fragment, null, (this.isHeadlineSlot || headline) &&
                 h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot || subtext) &&
@@ -170,6 +169,25 @@ export class RListItem {
                 "setter": false,
                 "reflect": false
             },
+            "truncateDescription": {
+                "type": "boolean",
+                "attribute": "truncate-description",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "leadingIcon": {
                 "type": "string",
                 "attribute": "leading-icon",
@@ -214,6 +232,25 @@ export class RListItem {
                 "setter": false,
                 "reflect": false
             },
+            "hideLeadingIcon": {
+                "type": "boolean",
+                "attribute": "hide-leading-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if the leading icon shall become hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "trailingIcon": {
                 "type": "string",
                 "attribute": "trailing-icon",

package/dist/collection/components/radio-group/radio-group.js

@@ -329,12 +329,12 @@ export class RadioGroup {
             'tooltip-icon': tooltipIcon,
             'tooltip-icon-color': tooltipIconColor
         };
-        return (h(Host, { key: '899b3d8d509fa3d6f37a81279e6fc58b98e1314c' }, h("div", { key: 'dc1c47c966aac6ebaab2b8ec9061342b6c1e81e3', class: "r-radio-group", onClick: this.onLabelClick }, label &&
-            h("div", { key: '5b39dcc6952d971f8c03e2dab554b25bb1be3ccf', class: "r-radio-group--label-container" }, h("r-label", Object.assign({ key: '7f13b1571bccb986a0e36903399c8f15536de539', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), h("slot", { key: 'bfd151ce64e670722a6a1f3254763b6f514c99ab', name: "popover" })), hint &&
-            h("r-hint", { key: 'edb8bbe44470579a5638e5dbee0b7b843cc998b4', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '1727429f1c36de0fd13567af448aed7c84f7c7b1', class: "r-radio-group--content" }, h("slot", { key: 'f7d712be6351c44e5f072f85a407b5e73837b48b' }))), invalid && error &&
-            h("r-hint", { key: '71feb492e87164e485bb10a0e856d86ef3c57a7d', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
-            h("r-hint", { key: '0ddc4636948329a97e8140c9efc267a4a054ff3b', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
-            h("r-hint", { key: 'e7cfa4eccf754e90ad30b22b24dd9f2ce1fcadc8', role: "alert", variant: "success" }, this.validMessage)));
+        return (h(Host, { key: '0a209644dc2a122c793a38e1f624eccf3ca0b884' }, h("div", { key: 'b4d8dbe5fb3d1e11d87a7902addcc801852e3554', class: "r-radio-group", onClick: this.onLabelClick }, label &&
+            h("div", { key: 'c77bc88a07ddad6f45671c869b99b3fa5c4d0e2a', class: "r-radio-group--label-container" }, h("r-label", Object.assign({ key: '1dbfc739da13dbae04481912203a53837941b8e0', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), h("slot", { key: '2f1b6a50b2f7d7b1becef2cc95a4d7f6a26d970d', name: "popover" })), hint &&
+            h("r-hint", { key: 'c3c4310d3550d17d34ee26fa308cb3957a19dfd3', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '891beaea14680a2d629fa59f4597a968b8c2b695', class: "r-radio-group--content" }, h("slot", { key: '1d107723f7c363564e488309fdcb586ff43046ff' }))), invalid && error &&
+            h("r-hint", { key: 'de64c7c8a42136b7ac3ca93536a7654dc1d274fa', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
+            h("r-hint", { key: 'c40eba0d5b6c47276ca91ca1631948d11f950c86', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
+            h("r-hint", { key: '0b13cc722509fe66231f18bd2783b29b798882ef', role: "alert", variant: "success" }, this.validMessage)));
     }
     static get is() { return "r-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -540,7 +540,7 @@ export class RadioGroup {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -6,7 +6,6 @@ import StyleObserver from "style-observer";
  *
  * Overall behavior is based on native `<select>`
  *
- * [Docs](https://riverty.design/components/select)
  */
 export class Select {
     constructor() {
@@ -1005,8 +1004,8 @@ export class Select {
             disabled,
             required: isRequired
         };
-        return (h(Host, { key: 'aca9ddac308a41221f08de7fde92f45fcd89162f', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}` }, h("div", { key: '34c00c70c0b73cdd7afdcd65f175a94e82c900d2', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '5a2b30341687b152eb17c2fc5ca2f65b1fda886f', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: '10021c02cfe8a697ee3a0e452e0052044f2b80a7', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'cc7173f5b427c9fca7e08a12552227d3f20ad64c' }, labelAttr), label)), h("slot", { key: '625e1bd9f1fa11950ff75e1875e03510f55022c0', name: "popover" })), hint &&
-            h("r-hint", { key: '6d22db79a4375ddd901f5ea6b25d9c456e8f1ab2', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: 'a243a731bdd150386ea47ad0897831b37eed6621', class: "r-select" }, h("select", Object.assign({ key: 'e1878ed06636fad3768d8b4b1f4a944d30730346', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'b47cd423033129e827a99f8fcff39173f4c74ed9', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '04db58929d97226614d344f7f419c3e8aa7e250d', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: 'b23380c2c75c33e6a8a99737189c43400e29940b', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '83e215daafbd8909f9788e8918691b08417a5f2d', onSlotchange: this.handleSlotChange })))), h("div", { key: '57acdd7994fa67813e60641493e99f29afafcaf4', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: 'f14bc3026b6bee74b1192f37af64381958c0c87b', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
+        return (h(Host, { key: '4faff470b9b6b8b7d61e3076e92791ef59337a48', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}` }, h("div", { key: '0e171d25d2210017b79c8e4298e24335087f0528', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: 'd23c28cea13b76464697eadca26ba34a3d1009cd', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: '5eed04830b9339a2c274f79eda156fa48eaa8249', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: '85c9eecfbff6e3d5412c99faafc142bf495aedb4' }, labelAttr), label)), h("slot", { key: '72a93bf0defe9a3f41d7b7be5cf3415e95874141', name: "popover" })), hint &&
+            h("r-hint", { key: 'd0b4a4bd2ca88ba642285dc85920d57f73298bb5', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: 'd859fdbd5f21ab2ec625712e5704f7e594ecff05', class: "r-select" }, h("select", Object.assign({ key: '388cf0c3f3234c2547aec144060f0d700df2fa57', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'e2409bf6c794e8360089fc113144dfcd7dffbbe2', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '8b813027f707bf37ccdf022c852838eb4801e03e', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: 'b6aa6ab7eb6390b05ac6d475546ca9647edb1a02', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: 'e84ce6b5e610147962c25a930967e1554a91f2a1', onSlotchange: this.handleSlotChange })))), h("div", { key: '92a91fc11ac5c98330bd677a97ab76a88af48f3b', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: 'c23f0cc7347fb7ceb61c4696d527534ececec403', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
     }
     static get is() { return "r-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1193,7 +1192,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -885,7 +885,7 @@ export class RTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)   * Specifies the color of the tooltip icon\nfrom [Riverty color tokens](https://riverty.design/tokens/#colors) \ndisplayed alongside the label."
+                    "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,

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

@@ -30,7 +30,7 @@
   --r-toast--content--margin-top: var(--r-spacing-050, 0.5rem);
 }
 
-:host([aria-hidden=true]) {
+:host([data-visually-hidden=true]) {
   --r-toast--host--transition: all 0.15s;
   --r-toast--host--transition-delay: 0.15s;
   --r-toast--host--opacity: 0;
@@ -82,6 +82,12 @@
 :host .r-toast--trailing-button:active {
   --r-button--transform: scale(0.94);
 }
+@media (prefers-reduced-motion) {
+  :host {
+    --r-toast--transition: none;
+    --r-toast--host--animation-name: none;
+  }
+}
 
 .r-toast {
   font-family: var(--r-toast--font-family, var(--r-font-family-text, system-ui));
@@ -90,7 +96,7 @@
   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, var(--r-spacing-100, 1rem));
+  padding: var(--r-toast--padding, 16px);
   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, #466882));

package/dist/collection/components/toast/toast.js

@@ -10,7 +10,6 @@ export class Toast {
          * @default 'info' */
         this.status = 'info';
         /** Specifies an optional icon for the trailing slot of the dialog.
-         * For options check [Riverty Icons](https://riverty.design/components/icon)
          * @default 'cross'
          * */
         this.trailingIcon = 'cross';
@@ -158,14 +157,14 @@ export class Toast {
             name: trailingIcon,
             size: 'm'
         };
-        return (h(Host, { key: 'f5413c4a9e1335b4a4e2f37cef036acbc7c05770', id: this.uniqueId, role: `${this.isError ? 'alert' : 'status'}`, "aria-live": "polite", "aria-label": `${headline}`, "aria-hidden": `${this.isOpen ? 'false' : 'true'}` }, h("div", { key: '3a222a7eaac62655c1cc7361865321c6a130f1fc', class: "r-toast" }, this.hasLeading &&
-            h("div", { key: '91d8dd470641658118be1e7c99c4e2cf648fce5f', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: '2c877ff1c79839e66c5f7ec79926a4f5eb807d02', name: "leading" }), this.hasLeadingIcon && h("r-icon", Object.assign({ key: 'f238d9fc8eb6f0360bc97587e0b3ab9b2d077314', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '568bb66c165a3f3d9e52c74fc51673283e3789f8', class: "r-toast--main" }, this.hasHeadline &&
-            h("h2", { key: '2267cbc787dfe1d9de4b35bc81981c3fe0df8deb', class: "r-toast--headline" }, h("slot", { key: '0a64068708db344d785db7d94fdb7edfcdf4fb7e', name: "headline" }, headline)), this.hasContent &&
-            h("div", { key: 'e4b198949b659f7724ca2191145da9e577546bdf', class: "r-toast--content r-typography" }, h("slot", { key: 'bd063b802fd04ee1606e4934511a2f48ec2c9304', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            h("div", { key: '38c9af908aa62379cf9c914426bfb7d7ba707608', class: "r-toast--action" }, h("slot", { key: 'e25437e3a9298f21a9e6c7fd1b86cccaa096b44d', name: "action" }, this.hasActionLink &&
-                h("a", Object.assign({ key: '9cae694c50dd9aab6acde4924dce66ec7823c5b9', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
-            h("div", { key: 'fd7207cb911423a81a3ac80a26cbc025e5689e16', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '5bcd5167e2299f62c20ed80be93dd06a8303dcab', name: "trailing" }), this.isDismissManual &&
-                h("r-icon-button", Object.assign({ key: 'c33a87247c3ff02dc3ed4d4205f20fcdf2259f2e' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), h("slot", { key: '05ddb2629df06aaa350c88b442df7894a2f4bcd7', name: "dismiss" }))))));
+        return (h(Host, { key: 'ecccac165e35c1d3479db71c8da83d676592a428', id: this.uniqueId, role: "alert", "aria-live": `${this.isError ? 'assertive' : 'polite'}`, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }, h("div", { key: '18c27be9270236a6a4ca4de0bd10a64e6dd5532f', class: "r-toast" }, this.hasLeading &&
+            h("div", { key: '16d69b95a0b843efeec05449d71762abc3bb55be', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: 'acfa65e5150af0b2e2a06752e9d4b329bebebf1f', name: "leading" }), this.hasLeadingIcon && h("r-icon", Object.assign({ key: 'ecaddd2b51d91276e2eb20a1e992e0eeea541668', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '7cc6d9af5dfc4cf78a10071fb97e4e280ddbe8c4', class: "r-toast--main" }, this.hasHeadline &&
+            h("h2", { key: '88f4dae62b41098d730fb05f731ddf6dace827fd', class: "r-toast--headline" }, h("slot", { key: '93beeba62659efa72d5d6254ea63f9da23666936', name: "headline" }, headline)), this.hasContent &&
+            h("div", { key: 'b38a7111b06b93eb93141bf470a74e4ccbc701be', class: "r-toast--content r-typography" }, h("slot", { key: '8d734d4d579be0cee0a512a1c8017f7c11f6a4d7', onSlotchange: this.handleSlotChange })), this.hasAction &&
+            h("div", { key: '8cd04075e9c01e8478f0cd443d0711f23f9b072a', class: "r-toast--action" }, h("slot", { key: '788ec92aa6dd9141500004fd2f7bf99423cb6a8d', name: "action" }, this.hasActionLink &&
+                h("a", Object.assign({ key: 'd1ed349333ac36d5ef64a00f4b86055c6593567a', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
+            h("div", { key: '6fac76c40a13c7ad0ad417f7ea4793df130258db', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '96a11d4d0a2fed9303cbe6cac872504b177e8143', name: "trailing" }), this.isDismissManual &&
+                h("r-icon-button", Object.assign({ key: 'e1a913e0cfdebb82cd5b657a8c6847be4fbe9bf4' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), h("slot", { key: '1df0a1d761630c7c6b004078b0e9db5d33179a0e', name: "dismiss" }))))));
     }
     static get is() { return "r-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +248,7 @@ export class Toast {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies an optional icon for the leading slot of the dialog.\nFor options check [Riverty Icons](https://riverty.design/components/icon)"
+                    "text": "Specifies an optional icon for the leading slot of the dialog."
                 },
                 "getter": false,
                 "setter": false,
@@ -277,7 +276,7 @@ export class Toast {
                             "name": "default",
                             "text": "'cross'"
                         }],
-                    "text": "Specifies an optional icon for the trailing slot of the dialog.\nFor options check [Riverty Icons](https://riverty.design/components/icon)"
+                    "text": "Specifies an optional icon for the trailing slot of the dialog."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,4 +1,4 @@
-@media (max-width: 767px) {
+@media (max-width: 48rem) {
   :host {
     --width: auto;
     --right: 24px;
@@ -7,12 +7,19 @@
     --padding-right: 0;
   }
 }
-:host([aria-hidden=false]) {
-  --display: block;
+:host([data-visually-hidden=true]) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }
 
 :host {
-  display: var(--display, none);
+  display: var(--display, block);
   position: var(--position, fixed);
   top: var(--top, 32px);
   right: var(--right, 0);
@@ -30,13 +37,7 @@
 .r-toast-group {
   position: relative;
   display: var(--r-toast-group--display, flex);
-  flex-direction: var(--r-toast-group--flex-direction, column-reverse);
-  justify-content: var(--r-toast-group--justify-content, flex-end);
-  gap: var(--r-toast-group--gap, 16px);
-}
-.r-toast-group ::slotted(r-toast[aria-hidden=true]) {
-  --animation-name: slideOut;
-}
-.r-toast-group ::slotted(r-toast[aria-hidden=false]) {
-  --animation-name: slideIn;
+  flex-direction: var(--r-toast-group--flex-direction, column);
+  justify-content: var(--r-toast-group--justify-content, flex-start);
+  gap: var(--r-toast-group--gap, var(--r-spacing-100, 1rem));
 }

package/dist/collection/components/toast-group/toast-group.js

@@ -2,20 +2,30 @@ import { Host, h } from "@stencil/core";
 export class ToastGroup {
     constructor() {
         this.updateHiddenState = () => {
-            this.host.setAttribute('aria-hidden', `${this.hasChildren}`);
+            this.host.setAttribute('data-visually-hidden', `${!this.hasChildren}`);
+        };
+        this.observeSlotContentChange = () => {
+            this.observer = new MutationObserver(() => {
+                this.updateHiddenState();
+            });
+            this.observer.observe(this.host, {
+                childList: true,
+                subtree: true
+            });
         };
     }
     get hasChildren() {
-        return this.host.children.length < 1;
+        return this.host.querySelectorAll('r-toast').length > 0;
     }
     componentWillLoad() {
         this.updateHiddenState();
+        this.observeSlotContentChange();
     }
     render() {
-        return (h(Host, { key: 'cd72702e1eee0d746e85c2022038972dea391dba' }, h("div", { key: '86bce60683eab444715fa266d39cada11bf19ce4', class: "r-toast-group" }, h("slot", { key: '594c29dc3b2ba4762d8a5b7876a47923d11f6f86', onSlotchange: this.updateHiddenState }))));
+        return (h(Host, { key: '95e0b29bb1b6a45aabb4e7f5da283997c6b707a8' }, h("div", { key: '4b42e40646381d78f2b812f483ea993992ec7f12', class: "r-toast-group" }, h("slot", { key: 'db3cca9551652a78d9c1579532894fc86ca02b73' }))));
     }
     static get is() { return "r-toast-group"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["toast-group.css"]

package/dist/collection/components/tooltip/tooltip.css

@@ -1,13 +1,8 @@
 :host {
   display: inline-block;
   --r-tooltip--position: relative;
-  --r-tooltip--content--position: absolute;
-  --r-tooltip--content--top: auto;
-  --r-tooltip--content--right: auto;
-  --r-tooltip--content--bottom: auto;
-  --r-tooltip--content--left: auto;
+  --r-tooltip--content--position: fixed;
   --r-tooltip--content--display: none;
-  --r-tooltip--content--content: attr(tooltip-data);
   --r-tooltip--content--color: var(--r-text-inverse);
   --r-tooltip--content--background-color: var(--r-background-inverse);
   --r-tooltip--content--font-family: var(--r-font-family-text);
@@ -18,22 +13,17 @@
   --r-tooltip--content--max-width: 300px;
   --r-tooltip--content--min-height: 32px;
   --r-tooltip--content--padding: var(--r-spacing-050) var(--r-spacing-100);
-  --r-tooltip--content--width: max-content;
+  --r-tooltip--content--width: max-width;
   --r-tooltip--content--word-break: break-word;
   --r-tooltip--content--box-sizing: border-box;
   --r-tooltip--content--justify-content: center;
   --r-tooltip--content--align-items: center;
   --r-tooltip--content--z-index: 0;
-  --r-tooltip--content--transform: none;
   --r-tooltip--arrow--display: none;
-  --r-tooltip--arrow--position: absolute;
-  --r-tooltip--arrow--top: auto;
-  --r-tooltip--arrow--right: auto;
-  --r-tooltip--arrow--bottom: auto;
-  --r-tooltip--arrow--left: 50%;
+  --r-tooltip--arrow--position: fixed;
   --r-tooltip--arrow--width: 12px;
-  --r-tooltip--arrow--height: 6px;
-  --r-tooltip--arrow--transform: translateX(-50%) rotate(180deg);
+  --r-tooltip--arrow--height: 12px;
+  --r-tooltip--arrow--transform: rotate(180deg);
   --r-tooltip--arrow--inner-content: "";
   --r-tooltip--arrow--inner--width: 12px;
   --r-tooltip--arrow--inner--height: 6px;
@@ -46,63 +36,18 @@
   display: contents;
 }
 
-:host([data-arrow-position=left]) {
-  --r-tooltip--content--left: - var(--r-spacing-100);
-}
-
-:host([data-arrow-position=right]) {
-  --r-tooltip--content--right: - var(--r-spacing-100);
-}
-
-:host([data-arrow-position=center]) {
-  --r-tooltip--content--left: 50%;
-  --r-tooltip--content--transform: translate(-50%);
-}
-
-:host([data-position=top]) {
-  --r-tooltip--content--bottom: calc(100% + var(--r-spacing-075));
-  --r-tooltip--arrow--bottom: 100%;
-  --r-tooltip--arrow--height: calc(var(--r-tooltip--arrow--inner--height) + 1.5 * var(--r-spacing-025));
-}
-
-:host([data-position=top][data-arrow-position=right]) {
-  --r-tooltip--content--right: 0;
-  --r-tooltip--content--left: unset;
-}
-
 :host([data-position=bottom]) {
-  --r-tooltip--content--top: calc(100% + var(--r-spacing-075));
-  --r-tooltip--arrow--top: 100%;
-  --r-tooltip--arrow--height: calc(var(--r-tooltip--arrow--inner--height) + 1.6 * var(--r-spacing-025));
-  --r-tooltip--arrow--transform: translateX(-50%) rotate(0);
-}
-
-:host([data-position=bottom][data-arrow-position=right]) {
-  --r-tooltip--content--right: 0;
-  --r-tooltip--content--left: unset;
+  --r-tooltip--arrow--transform: rotate(0);
 }
 
 :host([data-position=right]) {
-  --r-tooltip--content--left: calc(100% + var(--r-tooltip--arrow--height) + 0.1875rem);
-  --r-tooltip--arrow--left: 100%;
   --r-tooltip--arrow--transform: rotate(270deg);
 }
 
 :host([data-position=left]) {
-  --r-tooltip--content--right: calc(100% + var(--r-tooltip--arrow--height) + 0.1875rem);
-  --r-tooltip--content--left: unset;
-  --r-tooltip--arrow--right: 100%;
-  --r-tooltip--arrow--left: unset;
   --r-tooltip--arrow--transform: rotate(90deg);
 }
 
-:host([data-position=right]),
-:host([data-position=left]) {
-  --r-tooltip--content--top: 50%;
-  --r-tooltip--content--transform: translateY(-50%);
-  --r-tooltip--arrow--top: calc(50% - calc(var(--r-tooltip--arrow--height)/2));
-}
-
 .r-tooltip {
   position: var(--r-tooltip--position);
 }
@@ -126,12 +71,7 @@
 }
 .r-tooltip--content {
   position: var(--r-tooltip--content--position);
-  top: var(--r-tooltip--content--top);
-  right: var(--r-tooltip--content--right);
-  bottom: var(--r-tooltip--content--bottom);
-  left: var(--r-tooltip--content--left);
   display: var(--r-tooltip--content--display);
-  content: var(--r-tooltip--content--content);
   color: var(--r-tooltip--content--color);
   background-color: var(--r-tooltip--content--background-color);
   font-family: var(--r-tooltip--content--font-family);
@@ -146,17 +86,12 @@
   word-break: var(--r-tooltip--content--word-break);
   box-sizing: var(--r-tooltip--content--box-sizing);
   z-index: var(--r-tooltip--content--z-index);
-  transform: var(--r-tooltip--content--transform);
 }
 .r-tooltip--arrow {
   display: var(--r-tooltip--arrow--display);
   position: var(--r-tooltip--arrow--position);
   width: var(--r-tooltip--arrow--width);
   height: var(--r-tooltip--arrow--height);
-  top: var(--r-tooltip--arrow--top);
-  right: var(--r-tooltip--arrow--right);
-  bottom: var(--r-tooltip--arrow--bottom);
-  left: var(--r-tooltip--arrow--left);
   transform: var(--r-tooltip--arrow--transform);
 }
 .r-tooltip--arrow:after {