@riverty/web-components 5.5.0 → 5.6.0

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.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: '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/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 {

package/dist/collection/components/tooltip/tooltip.js

@@ -9,6 +9,75 @@ export class Tooltip {
         this.arrowPositionState = 'left';
         this.isShown = false;
         this.uniqueId = `r-tooltip-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.getOffsetLeft = (arrowPosition) => {
+            var _a, _b, _c;
+            const offsetLeft = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) - ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width));
+            switch (arrowPosition) {
+                case 'center':
+                    return offsetLeft / 2;
+                case 'right':
+                    return offsetLeft;
+                default:
+                    return 0;
+            }
+        };
+        this.alignTooltipPosition = () => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const offsetHeight = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) - ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height)) / 2;
+            const offsetLeft = this.getOffsetLeft(this.arrowPositionState);
+            const hostHeight = ((_e = (_d = this.element) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.height) + this.arrowHeight || 0;
+            const hostWidth = ((_g = (_f = this.element) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.width) + this.arrowWidth || 0;
+            switch (this.positionState) {
+                case 'top':
+                    this.alignPosition(this.tooltip, -offsetLeft, -this.tooltipContainerHeight);
+                    break;
+                case 'bottom':
+                    this.alignPosition(this.tooltip, -offsetLeft, hostHeight);
+                    break;
+                case 'left':
+                    this.alignPosition(this.tooltip, -this.tooltipContainerWidth, -offsetHeight);
+                    break;
+                case 'right':
+                    this.alignPosition(this.tooltip, hostWidth, -offsetHeight);
+                    break;
+                default:
+                    break;
+            }
+        };
+        this.alignArrowPosition = () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            const offsetHeight = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) - ((_c = (_b = this.arrow) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height)) / 2;
+            const offsetLeft = Math.abs(((_d = this.element) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().width) - ((_f = (_e = this.arrow) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.width)) / 2;
+            const hostHeight = ((_h = (_g = this.element) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect()) === null || _h === void 0 ? void 0 : _h.height) || 0;
+            const hostWidth = ((_k = (_j = this.element) === null || _j === void 0 ? void 0 : _j.getBoundingClientRect()) === null || _k === void 0 ? void 0 : _k.width) || 0;
+            switch (this.positionState) {
+                case 'top':
+                    this.alignPosition(this.arrow, offsetLeft, -this.arrowHeight);
+                    break;
+                case 'bottom':
+                    this.alignPosition(this.arrow, offsetLeft, hostHeight);
+                    break;
+                case 'left':
+                    this.alignPosition(this.arrow, -this.arrowWidth, offsetHeight);
+                    break;
+                case 'right':
+                    this.alignPosition(this.arrow, hostWidth, offsetHeight);
+                    break;
+                default:
+                    break;
+            }
+        };
+        this.alignPosition = (element, offsetLeft, offsetTop) => {
+            var _a;
+            if (!element) {
+                return;
+            }
+            let elementOffset = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            let left = elementOffset.left + offsetLeft;
+            let top = elementOffset.top + offsetTop;
+            element.style.left = `${left > 0 ? left : 0}px`;
+            element.style.top = `${top}px`;
+        };
         /**
          * Listen on hovering tooltip element and update tooltip position if needed
          */
@@ -26,11 +95,22 @@ export class Tooltip {
         };
         this.showTooltip = () => {
             this.isShown = true;
-            this.tooltipValue.classList.add('r-tooltip--content--visible');
+            this.tooltip.classList.add('r-tooltip--content--visible');
         };
         this.removeTooltip = () => {
             this.isShown = false;
-            this.tooltipValue.classList.remove('r-tooltip--content--visible');
+            this.tooltip.style.width = 'max-content';
+            this.tooltip.classList.remove('r-tooltip--content--visible');
+        };
+        this.handleScroll = () => {
+            if (!this.isShown) {
+                return;
+            }
+            if (!this.isOnScreen) {
+                this.removeTooltip();
+                return;
+            }
+            this.setCorrectPosition();
         };
     }
     /**
@@ -59,30 +139,47 @@ export class Tooltip {
             this.removeTooltip();
         }
     }
-    /**
-     * Tooltip element value
-     */
-    get tooltipValue() {
-        var _a, _b;
-        return (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.uniqueId);
-    }
     /**
      * Parent with non visible overflow
      */
     get overflowedParent() {
         return this.findOverflowParent(this.element.parentElement);
     }
+    get arrowWidth() {
+        var _a;
+        return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+    }
+    get arrowHeight() {
+        var _a;
+        return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+    }
+    get tooltipContainerWidth() {
+        var _a, _b;
+        return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) + this.arrowWidth || 0;
+    }
+    get tooltipContainerHeight() {
+        var _a, _b;
+        return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) + this.arrowHeight || 0;
+    }
     /**
      * Available space at the top
      */
     get top() {
-        return !this.overflowedParent ? this.element.getBoundingClientRect().top : Math.abs(this.overflowedParent.getBoundingClientRect().top - this.element.getBoundingClientRect().top);
+        return this.element.getBoundingClientRect().top;
     }
     /**
      * Available space on the left
      */
     get left() {
-        return !this.overflowedParent ? this.element.getBoundingClientRect().left : Math.abs(this.overflowedParent.getBoundingClientRect().left - this.element.getBoundingClientRect().left);
+        return this.element.getBoundingClientRect().left;
+    }
+    get isOnScreen() {
+        const parent = this.overflowedParent || document.documentElement;
+        const parentRect = parent.getBoundingClientRect();
+        const elementRect = this.element.getBoundingClientRect();
+        const isVerticallyVisible = elementRect.top >= parentRect.top && elementRect.bottom <= parentRect.bottom;
+        const isHorizontallyVisible = elementRect.left >= parentRect.left && elementRect.right <= parentRect.right;
+        return isVerticallyVisible && isHorizontallyVisible;
     }
     /**
      * Available space at the bottom
@@ -91,7 +188,7 @@ export class Tooltip {
         function calculateBottomSpace(element) {
             return window.innerHeight - element.getBoundingClientRect().top - element.getBoundingClientRect().height;
         }
-        return !this.overflowedParent ? calculateBottomSpace(this.element) : Math.abs(calculateBottomSpace(this.overflowedParent) - calculateBottomSpace(this.element));
+        return calculateBottomSpace(this.element);
     }
     /**
      * Available space on the right
@@ -100,35 +197,31 @@ export class Tooltip {
         function calculateRightSpace(element) {
             return window.innerWidth - element.getBoundingClientRect().left - element.getBoundingClientRect().width;
         }
-        return !this.overflowedParent ? calculateRightSpace(this.element) : Math.abs(calculateRightSpace(this.overflowedParent) - calculateRightSpace(this.element));
+        return calculateRightSpace(this.element);
     }
     /**
      * Defines which horizontal placement is available
      */
     get horizontalPlacement() {
-        var _a;
-        return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetWidth) + OFFSET < this.left ? 'left' : 'right';
+        return this.tooltipContainerWidth + OFFSET < this.left ? 'left' : 'right';
     }
     /**
      * Defines which vertical placement is available
      */
     get verticalPlacement() {
-        var _a;
-        return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetHeight) + OFFSET < this.top ? 'top' : 'bottom';
+        return this.tooltipContainerHeight + OFFSET < this.top ? 'top' : 'bottom';
     }
     /**
      * Checks if there is enough space for placing tooltip vertically
      */
     get isEnoughSpaceVertically() {
-        var _a, _b;
-        return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetHeight) + OFFSET < this.top || ((_b = this.tooltipValue) === null || _b === void 0 ? void 0 : _b.offsetHeight) + OFFSET < this.bottom;
+        return this.tooltipContainerHeight + OFFSET < this.top || this.tooltipContainerHeight + OFFSET < this.bottom;
     }
     /**
      * Checks if there is enough space for placing tooltip horizontally
      */
     get isEnoughSpaceHorizontally() {
-        var _a, _b;
-        return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetWidth) + OFFSET < this.left || ((_b = this.tooltipValue) === null || _b === void 0 ? void 0 : _b.offsetWidth) + OFFSET < this.right;
+        return this.tooltipContainerWidth + OFFSET < this.left || this.tooltipContainerWidth + OFFSET < this.right;
     }
     get activeElement() {
         return this.element.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
@@ -143,13 +236,16 @@ export class Tooltip {
      * Listen to active child element
      */
     componentDidLoad() {
-        var _a, _b;
+        var _a, _b, _c;
         (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
             this.handleFocus();
         });
         (_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', () => {
             this.removeTooltip();
         });
+        (_c = this.overflowedParent) === null || _c === void 0 ? void 0 : _c.addEventListener('scroll', () => {
+            this.handleScroll();
+        });
     }
     /**
      * Finds first element's parent with not visible overflow.
@@ -198,25 +294,32 @@ export class Tooltip {
      * First it checks the available space for a defined position and then sets the new one based on the available space.
      */
     setCorrectPosition() {
-        var _a, _b, _c, _d;
-        if (!this.tooltipValue || !this.isShown) {
+        if (!this.tooltip || !this.isShown) {
             return;
         }
         switch (this.position) {
             case 'top':
-                this.positionState = ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetHeight) + OFFSET < this.top ? this.position : this.getAlternativePosition();
+                this.positionState = this.tooltipContainerHeight + OFFSET < this.top ? this.position : this.getAlternativePosition();
                 break;
             case 'bottom':
-                this.positionState = ((_b = this.tooltipValue) === null || _b === void 0 ? void 0 : _b.offsetHeight) + OFFSET < this.bottom ? this.position : this.getAlternativePosition();
+                this.positionState = this.tooltipContainerHeight + OFFSET < this.bottom ? this.position : this.getAlternativePosition();
                 break;
             case 'left':
-                this.positionState = ((_c = this.tooltipValue) === null || _c === void 0 ? void 0 : _c.offsetWidth) + OFFSET < this.left ? this.position : this.getAlternativePosition();
+                this.positionState = this.tooltipContainerWidth + OFFSET < this.left ? this.position : this.getAlternativePosition();
                 break;
             case 'right':
-                this.positionState = ((_d = this.tooltipValue) === null || _d === void 0 ? void 0 : _d.offsetWidth) + OFFSET < this.right ? this.position : this.getAlternativePosition();
+                this.positionState = this.tooltipContainerWidth + OFFSET < this.right ? this.position : this.getAlternativePosition();
                 break;
         }
         this.adjustArrowPosition();
+        this.alignTooltipPosition();
+        this.alignArrowPosition();
+        // allow tooltip content wrap and recalculate position
+        if (this.tooltip.style.width === 'fit-content') {
+            return;
+        }
+        this.tooltip.style.width = 'fit-content';
+        this.alignTooltipPosition();
     }
     /**
      * Adjusts arrow correct position.
@@ -224,10 +327,9 @@ export class Tooltip {
      * For right & left tooltip positions there is only one position = "center".
      */
     adjustArrowPosition() {
-        var _a, _b;
-        const isEnoughTooltipSpaceLeft = ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetWidth) / 2 + OFFSET < this.left;
-        const isEnoughTooltipSpaceRight = ((_b = this.tooltipValue) === null || _b === void 0 ? void 0 : _b.offsetWidth) / 2 + OFFSET < this.right;
-        if (isEnoughTooltipSpaceLeft && isEnoughTooltipSpaceRight || this.positionState === 'left' || this.positionState === 'right') {
+        const isEnoughTooltipSpaceLeft = this.tooltipContainerWidth / 2 + OFFSET < this.left;
+        const isEnoughTooltipSpaceRight = this.tooltipContainerWidth / 2 + OFFSET < this.right;
+        if (isEnoughTooltipSpaceLeft && isEnoughTooltipSpaceRight || !isEnoughTooltipSpaceLeft && !isEnoughTooltipSpaceRight || this.positionState === 'left' || this.positionState === 'right') {
             this.arrowPositionState = 'center';
         }
         else if (!isEnoughTooltipSpaceLeft) {
@@ -253,7 +355,7 @@ export class Tooltip {
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (h(Host, Object.assign({ key: 'e168f9f1212433eb17769c11260f546e441ca274' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: 'b8ea713c2b09b6053af73ac7d26a30f210c90e94', class: "r-tooltip" }, h("div", Object.assign({ key: '19cc679ec640dc98f167077e0bab16423e186258', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '17266fefef386f3b417d8e7d112e0345aa98e878' })), h("div", Object.assign({ key: 'e53283c02be43833362277fc8fe78e99c4a9adba', class: "r-tooltip--content" }, contentAttrs), text), h("div", { key: '98f1caf44ec7bd286cb8126022692d825f4ab617', class: "r-tooltip--arrow" }))));
+        return (h(Host, Object.assign({ key: 'f0b2e0117f0604d325becbcc05686433fbd3d506' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '2f5ff7638dedddd04dac78a2131438457211354b', class: "r-tooltip" }, h("div", Object.assign({ key: 'cb562089f6e7ac27b99ba09953c2f28f29e3e649', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '2e09b16563b9aa325ff64f10af1ad5f4728a2417' })), h("div", Object.assign({ key: 'ffe53881e5ec5335073a7adf2ed5479f3a56f00f', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '3f85fb76e934b18d5963d125699d00776c6abbac', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     static get is() { return "r-tooltip"; }
     static get encapsulation() { return "shadow"; }