@riverty/web-components 5.5.0 → 5.7.0

package/dist/collection/components/input-phone-number/input-phone-number.js

@@ -275,10 +275,10 @@ export class InputPhoneNumber {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: '93e31af4d248db4fe90a84b897d96207dbf9b6e9' }, h("div", { key: 'fc909eb39efe18413838c9f051d7ad7d5aa461b3', class: "r-input-phone-number--label-container" }, h("label", { key: 'b849fc5188a03e52151006fd48338fe0a07dfd83', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: '6bab502ebce17055ef3e2862f9063bfd2d0d1291' }, labelAttr), label)), h("slot", { key: '014cbcd421f75299935cf430a8777ded1880134c', name: "popover" })), hint &&
-            h("r-hint", { key: '4f8e473e4c70ac62618f6d651dca1880aa755c3e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '7fa42ec6de7083cc8703f5bcbbfaabe283462d45', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '64b8a315acb0057e82d1c77dd3b35bc141378cc0' }), h("r-input", { key: '5fdaa9c0c5bb4913637b895f0979f377bac876bc', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled }, valid && phoneNumber &&
-            h("r-icon", { key: '6c25f0a2e473315279679c3e607691f8a3eca396', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: '39cca18332d8e6473bef33db6e395a8aac36a954', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '8feb70b56f27287b06a3ba894a554d736d9e9b4b', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
+        return (h(Host, { key: '87f5720347e3627524f95f7110088b8eddef7f8f' }, h("div", { key: '091e2048f011ff4167b35434567149de061954bd', class: "r-input-phone-number--label-container" }, h("label", { key: '80994d1cfd1b6f2228fb231f64894e660bdb1a1c', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: '36fa07371ee2c9d37645060a29f2d6f4ffe66342' }, labelAttr), label)), h("slot", { key: '76034d24a4208a46ee92185221256b9b5e87f971', name: "popover" })), hint &&
+            h("r-hint", { key: '574a0ec6541310640594eed29e0c301f5f9a01f7', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '63f37ce77a8e247091e0e6bf55632a834e19992d', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '36f3e834567d3ce77b6d89ae3e835eee630675b7' }), h("r-input", { key: '2f8dc7a95823b3107d8e24f90ae53791554c19af', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled }, valid && phoneNumber &&
+            h("r-icon", { key: '4559b1d4c55e35b2ef9560554a62d4742bca875e', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: 'c68a9255419c41e8b9fc02127d5f3b68cd14f40b', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '43712e3a6b916945b1a00d3c6d8ace5f7bdcc1d7', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
     }
     static get is() { return "r-input-phone-number"; }
     static get encapsulation() { return "shadow"; }
@@ -465,7 +465,7 @@ export class InputPhoneNumber {
                 "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/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/radio-button/radio-button.css

@@ -38,7 +38,7 @@
 
 :host([invalid]:not([invalid=false])),
 :host([invalid]:not([invalid=false])[checked]:not([checked=false])) {
-  --r-radio-button--box--border-color: var(--r-status-error-regular, #da1e28);
+  --r-radio-button--box--border-color: var(--r-status-error-regular, #b00c15);
   --r-radio-button--box--background-color: var(--r-status-error-soft, #fef6f6);
 }
 

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

@@ -24,9 +24,9 @@
 }
 
 :host([invalid]:not([invalid=false])) ::slotted(r-radio-button) {
-  --r-radio-button--box--border-color: var(--r-status-error-regular, #da1e28);
+  --r-radio-button--box--border-color: var(--r-status-error-regular, #b00c15);
   --r-radio-button--box--background-color: var(--r-status-error-soft, #fef6f6);
-  --r-radio-button--marker--background-color: var(--r-status-error-regular, #da1e28);
+  --r-radio-button--marker--background-color: var(--r-status-error-regular, #b00c15);
 }
 
 :host .r-radio-group {

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.css

@@ -26,8 +26,8 @@
 
 :host([invalid]:not([invalid=false])) {
   --r-select--container--background-color: var(--r-status-error-soft, #fef6f6);
-  --r-select--value--border-color: var(--r-status-error-regular, #da1e28);
-  --r-select--options--border-color: var(--r-status-error-regular, #da1e28);
+  --r-select--value--border-color: var(--r-status-error-regular, #b00c15);
+  --r-select--options--border-color: var(--r-status-error-regular, #b00c15);
 }
 
 :host([disabled]:not([disabled=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.css

@@ -35,7 +35,7 @@
 
 :host([invalid]:not([invalid=false])) {
   --r-textarea--container--background-color: var(--r-status-error-soft, #fef6f6);
-  --r-textarea--container--border-color: var(--r-status-error-regular, #da1e28);
+  --r-textarea--container--border-color: var(--r-status-error-regular, #b00c15);
 }
 
 .r-textarea--label-container {

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

@@ -1,19 +1,19 @@
 :host([status=info]) {
-  --r-toast--border-color: var(--r-status-info-regular, #466882);
+  --r-toast--border-color: var(--r-status-info-regular, #3e5c73);
   --r-toast--background-color: var(--r-status-info-soft, #f8fafb);
-  --r-toast--leading-icon--color: var(--r-status-info-regular, #466882);
+  --r-toast--leading-icon--color: var(--r-status-info-regular, #3e5c73);
 }
 
 :host([status=warning]) {
-  --r-toast--border-color: var(--r-status-warning-regular, #f26a20);
+  --r-toast--border-color: var(--r-status-warning-regular, #ff7429);
   --r-toast--background-color: var(--r-status-warning-soft, #fef9f5);
   --r-toast--leading-icon--color: var(--r-status-warning-strong, #89411A);
 }
 
 :host([status=error]) {
-  --r-toast--border-color: var(--r-status-error-regular, #da1e28);
+  --r-toast--border-color: var(--r-status-error-regular, #b00c15);
   --r-toast--background-color: var(--r-status-error-soft, #fef6f6);
-  --r-toast--leading-icon--color: var(--r-status-error-regular, #da1e28);
+  --r-toast--leading-icon--color: var(--r-status-error-regular, #b00c15);
 }
 
 :host([status=success]) {
@@ -99,7 +99,7 @@
   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));
+  border-color: var(--r-toast--border-color, var(--r-status-info-regular, #3e5c73));
   background-color: var(--r-toast--background-color, var(--r-status-info-soft, #f8fafb));
   box-sizing: var(--r-toast--box-sizing, border-box);
   transition: var(--r-toast--transition, all 0.3s);
@@ -108,7 +108,7 @@
   flex: var(--r-toast--content--flex, 1);
 }
 .r-toast--leading-icon {
-  color: var(--r-toast--leading-icon--color, var(--r-status-info-regular, #466882));
+  color: var(--r-toast--leading-icon--color, var(--r-status-info-regular, #3e5c73));
   margin-top: var(--r-toast--leading-icon--margin-top, 0);
 }
 .r-toast--headline {

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: 'd89f4e9245d32cd1f622beed7c053442c1977e7f', id: this.uniqueId, role: "alert", "aria-live": `${this.isError ? 'assertive' : 'polite'}`, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }, h("div", { key: '5292d419fa8122136b8694a47140418a2c3bbf1c', class: "r-toast" }, this.hasLeading &&
-            h("div", { key: '39d348a25e1dffb2c0dc6c550d94e0ee5a791089', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: '92693e79818ea57423bd56364bad96c4e85a8fb7', name: "leading" }), this.hasLeadingIcon && h("r-icon", Object.assign({ key: 'a6c8491b3bf1af387c228ab110775d380dc33afd', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '78e914e294adb359116045937146caaf9f82b4e6', class: "r-toast--main" }, this.hasHeadline &&
-            h("h2", { key: 'f33e94e74a2f93dc7bfb28f83120d79f07d3b254', class: "r-toast--headline" }, h("slot", { key: '3e61d7eb3b319dd00205bd010074edd1f2f809ba', name: "headline" }, headline)), this.hasContent &&
-            h("div", { key: '6d098697465a8c84c5dca4abcf5b7eab04ff4a23', class: "r-toast--content r-typography" }, h("slot", { key: '8ad7f7ce97edcbd601a7e08b48a2cd766d32e8bf', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            h("div", { key: '7b0df2b4f747b7436ddaa34c87b876d5d8023921', class: "r-toast--action" }, h("slot", { key: '9811a95fc1261f7565d31b2a54ca97a9a36ec236', name: "action" }, this.hasActionLink &&
-                h("a", Object.assign({ key: 'bbbd7f3f63da45f374d40152269fe68b359e298d', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
-            h("div", { key: '6a000a3e1e6dfbbbfe83b64ad550b39df030bef3', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '90ab154036ef2206394d1c43ad48a4973eec520f', name: "trailing" }), this.isDismissManual &&
-                h("r-icon-button", Object.assign({ key: '1433d0151fb3673d98b51f476e8bbe43d8f7ebd6' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), h("slot", { key: 'c47c59fbc4097fdaf4f3a4f27beab833dcef4f0e', 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: '0d44f0bca1b27a8f2321525c867ff9d3842a4b28' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), h("slot", { key: 'f0a708e9aec0f54734182dc0e7eb713921a11fe2', 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/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 {