@riverty/web-components 5.4.0 → 5.6.0

package/dist/cjs/r-hint_3.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BnETQtSf.js');
+var index = require('./index-DJ4H_bFj.js');
 
 const hintCss = ":host{--r-hint--text--flex:1}:host([variant=information]){--r-hint--color:var(--r-text-soft, #686868)}:host([variant=success]),:host([success]){--r-hint--color:var(--r-status-success-regular, #298535)}:host([variant=warning]),:host([warning]){--r-hint--color:var(--r-status-warning-strong, #89411a)}:host([variant=error]),:host([invalid]){--r-hint--color:var(--r-status-error-regular, #da1e28)}:host([icon-position=end]){--r-hint--flex-direction:row-reverse}:host{display:block}.r-hint{display:var(--r-hint--display, flex);flex-direction:var(--r-hint--flex-direction, row);gap:var(--r-hint--gap, var(--r-spacing-050, 0.5rem));font-family:var(--r-hint--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-hint--font-size, var(--r-font-size-300, 0.875rem));line-height:var(--r-hint--line-height, var(--r-line-height-m, 1.5));color:var(--r-hint--color, var(--r-text-soft, #686868));font-weight:var(--r-hint--font-weight, var(--r-font-weight-regular, 400));margin-top:var(--r-hint--margin-top, 0);margin-bottom:var(--r-hint--margin-bottom, 0)}.r-hint--icon{display:var(--r-hint--icon--display, flex);align-items:var(--r-hint--icon--align-items, start);min-width:var(--r-hint--icon--min-width, 1rem);margin-top:var(--r-hint--icon--margin-top, 0.15rem)}.r-hint--text{flex:var(--r-hint--text--flex, 1)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
@@ -57,14 +57,14 @@ const RLabel = class {
             size: 's',
             color: tooltipIconColor
         };
-        return (index.h(index.Host, { key: '06097c8d9963d79b783b245a934832e3f8e7596b' }, index.h("div", { key: '2a3a8ddd22fddedb8e7a7472f81c05201ea26a77', class: "r-label" }, index.h("span", { key: '9d1814759bb2b3f8784a73aa75b215a19985f482', class: "r-label--slot" }, index.h("slot", { key: 'd472e83f02841c979bbfcc36c54068141de0d380' }), fieldIndicator &&
-            index.h("span", { key: 'f275ed855ebd8a684a35ce9b074b0e04471dcfe2', class: "r-label--marker" }, fieldIndicator)), tooltip &&
-            index.h("span", { key: 'aa336cbb979d0866e8f586c1596b9d9f38925023', class: "r-label--tooltip-icon" }, index.h("r-tooltip", Object.assign({ key: '245cd576fadb1b31ca2041a9b3d9b5a9a63e381d' }, tooltipAttrs), index.h("r-icon", Object.assign({ key: 'f83ce1d9d0ab51b3c5394866b01b1998559ddc68' }, tooltipIconAttrs)))))));
+        return (index.h(index.Host, { key: '2d7da94197a774e5b3399ff59dba01f946f0d8df' }, index.h("div", { key: '56baaf39a736e1f504502c9f49b4cf5fbff2f911', class: "r-label" }, index.h("span", { key: '5b0032c31e83b628d73a207eeaa915368edc7237', class: "r-label--slot" }, index.h("slot", { key: 'fbcd30c185b9eef55ea43c8ca8b082a0308953e2' }), fieldIndicator &&
+            index.h("span", { key: '0d355d5857e515e735dc543d3416540e0a0ffdba', class: "r-label--marker" }, fieldIndicator)), tooltip &&
+            index.h("span", { key: 'b450b3e7ee2b33dbdc02d9fce04bd2ef6a97713d', class: "r-label--tooltip-icon" }, index.h("r-tooltip", Object.assign({ key: 'a1b2a24a312b7eabd5acd43273658bce3199ef1b' }, tooltipAttrs), index.h("r-icon", Object.assign({ key: 'c22f6349b9c67a82b29f4a5758a77fb1b2910b75' }, tooltipIconAttrs)))))));
     }
 };
 RLabel.style = labelCss;
 
-const tooltipCss = ":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--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);--r-tooltip--content--font-weight:var(--r-font-weight-regular);--r-tooltip--content--font-size:var(--r-font-size-200);--r-tooltip--content--line-height:var(--r-line-height-s);--r-tooltip--content--min-width:32px;--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--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--width:12px;--r-tooltip--arrow--height:6px;--r-tooltip--arrow--transform:translateX(-50%) rotate(180deg);--r-tooltip--arrow--inner-content:\"\";--r-tooltip--arrow--inner--width:12px;--r-tooltip--arrow--inner--height:6px;--r-tooltip--arrow--inner--background-color:var(--r-tooltip--content--background-color);--r-tooltip--arrow--inner--clip-path:polygon(50% 0%, 0% 100%, 100% 100%);--r-tooltip--arrow--inner--border-radius:0;--r-tooltip--arrow--inner--align-self:flex-end}:host slot{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}: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)}.r-tooltip:has(.r-tooltip--content--visible){--r-tooltip--content--width:max-content;--r-tooltip--content--display:flex;--r-tooltip--content--z-index:1060;--r-tooltip--arrow--display:flex;--r-tooltip--arrow--inner--display:block}.r-tooltip--trigger{color:var(--r-tooltip--trigger--color, inherit);box-shadow:var(--r-tooltip--trigger--box-shadow, none);outline:var(--r-tooltip--trigger--outline, none);outline-offset:var(--r-tooltip--trigger--outline-offset, 0)}.r-tooltip--trigger:focus{--r-tooltip--trigger--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-tooltip--trigger--outline:2px solid var(--r-border-focused);--r-tooltip--trigger--outline-offset:2px}.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);font-weight:var(--r-tooltip--content--font-weight);font-size:var(--r-tooltip--content--font-size);line-height:var(--r-tooltip--content--line-height);min-width:var(--r-tooltip--content--min-width);max-width:var(--r-tooltip--content--max-width);min-height:var(--r-tooltip--content--min-height);padding:var(--r-tooltip--content--padding);width:var(--r-tooltip--content--width);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{content:var(--r-tooltip--arrow--inner-content);display:var(--r-tooltip--arrow--inner--display);width:var(--r-tooltip--arrow--inner--width);height:var(--r-tooltip--arrow--inner--height);background-color:var(--r-tooltip--arrow--inner--background-color);clip-path:var(--r-tooltip--arrow--inner--clip-path);border-radius:var(--r-tooltip--arrow--inner--border-radius);align-self:var(--r-tooltip--arrow--inner--align-self)}";
+const tooltipCss = ":host{display:inline-block;--r-tooltip--position:relative;--r-tooltip--content--position:fixed;--r-tooltip--content--display:none;--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);--r-tooltip--content--font-weight:var(--r-font-weight-regular);--r-tooltip--content--font-size:var(--r-font-size-200);--r-tooltip--content--line-height:var(--r-line-height-s);--r-tooltip--content--min-width:32px;--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-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--arrow--display:none;--r-tooltip--arrow--position:fixed;--r-tooltip--arrow--width:12px;--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;--r-tooltip--arrow--inner--background-color:var(--r-tooltip--content--background-color);--r-tooltip--arrow--inner--clip-path:polygon(50% 0%, 0% 100%, 100% 100%);--r-tooltip--arrow--inner--border-radius:0;--r-tooltip--arrow--inner--align-self:flex-end}:host slot{display:contents}:host([data-position=bottom]){--r-tooltip--arrow--transform:rotate(0)}:host([data-position=right]){--r-tooltip--arrow--transform:rotate(270deg)}:host([data-position=left]){--r-tooltip--arrow--transform:rotate(90deg)}.r-tooltip{position:var(--r-tooltip--position)}.r-tooltip:has(.r-tooltip--content--visible){--r-tooltip--content--width:max-content;--r-tooltip--content--display:flex;--r-tooltip--content--z-index:1060;--r-tooltip--arrow--display:flex;--r-tooltip--arrow--inner--display:block}.r-tooltip--trigger{color:var(--r-tooltip--trigger--color, inherit);box-shadow:var(--r-tooltip--trigger--box-shadow, none);outline:var(--r-tooltip--trigger--outline, none);outline-offset:var(--r-tooltip--trigger--outline-offset, 0)}.r-tooltip--trigger:focus{--r-tooltip--trigger--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-tooltip--trigger--outline:2px solid var(--r-border-focused);--r-tooltip--trigger--outline-offset:2px}.r-tooltip--content{position:var(--r-tooltip--content--position);display:var(--r-tooltip--content--display);color:var(--r-tooltip--content--color);background-color:var(--r-tooltip--content--background-color);font-family:var(--r-tooltip--content--font-family);font-weight:var(--r-tooltip--content--font-weight);font-size:var(--r-tooltip--content--font-size);line-height:var(--r-tooltip--content--line-height);min-width:var(--r-tooltip--content--min-width);max-width:var(--r-tooltip--content--max-width);min-height:var(--r-tooltip--content--min-height);padding:var(--r-tooltip--content--padding);width:var(--r-tooltip--content--width);word-break:var(--r-tooltip--content--word-break);box-sizing:var(--r-tooltip--content--box-sizing);z-index:var(--r-tooltip--content--z-index)}.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);transform:var(--r-tooltip--arrow--transform)}.r-tooltip--arrow:after{content:var(--r-tooltip--arrow--inner-content);display:var(--r-tooltip--arrow--inner--display);width:var(--r-tooltip--arrow--inner--width);height:var(--r-tooltip--arrow--inner--height);background-color:var(--r-tooltip--arrow--inner--background-color);clip-path:var(--r-tooltip--arrow--inner--clip-path);border-radius:var(--r-tooltip--arrow--inner--border-radius);align-self:var(--r-tooltip--arrow--inner--align-self)}";
 
 const OFFSET = 20;
 const Tooltip = class {
@@ -78,6 +78,71 @@ const Tooltip = class {
         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;
+            }
+        };
+        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;
+            }
+        };
+        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
          */
@@ -95,11 +160,22 @@ const Tooltip = class {
         };
         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();
         };
     }
     /**
@@ -128,30 +204,47 @@ const Tooltip = class {
             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
@@ -160,7 +253,7 @@ const Tooltip = class {
         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
@@ -169,35 +262,31 @@ const Tooltip = class {
         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"])');
@@ -212,13 +301,16 @@ const Tooltip = class {
      * 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.
@@ -267,25 +359,32 @@ const Tooltip = class {
      * 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.
@@ -293,10 +392,9 @@ const Tooltip = class {
      * 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) {
@@ -322,7 +420,7 @@ const Tooltip = class {
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (index.h(index.Host, Object.assign({ key: 'e168f9f1212433eb17769c11260f546e441ca274' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), index.h("div", { key: 'b8ea713c2b09b6053af73ac7d26a30f210c90e94', class: "r-tooltip" }, index.h("div", Object.assign({ key: '19cc679ec640dc98f167077e0bab16423e186258', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), index.h("slot", { key: '17266fefef386f3b417d8e7d112e0345aa98e878' })), index.h("div", Object.assign({ key: 'e53283c02be43833362277fc8fe78e99c4a9adba', class: "r-tooltip--content" }, contentAttrs), text), index.h("div", { key: '98f1caf44ec7bd286cb8126022692d825f4ab617', class: "r-tooltip--arrow" }))));
+        return (index.h(index.Host, Object.assign({ key: 'f0b2e0117f0604d325becbcc05686433fbd3d506' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), index.h("div", { key: '2f5ff7638dedddd04dac78a2131438457211354b', class: "r-tooltip" }, index.h("div", Object.assign({ key: 'cb562089f6e7ac27b99ba09953c2f28f29e3e649', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), index.h("slot", { key: '2e09b16563b9aa325ff64f10af1ad5f4728a2417' })), index.h("div", Object.assign({ key: 'ffe53881e5ec5335073a7adf2ed5479f3a56f00f', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), index.h("div", { key: '3f85fb76e934b18d5963d125699d00776c6abbac', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/r-icon-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BnETQtSf.js');
+var index = require('./index-DJ4H_bFj.js');
 
 const iconButtonCss = ":host{display:inline-flex;vertical-align:top;--r-icon-button--color:inherit}:host(:hover:not([disabled]:not([disabled=false])):not(:active)){--r-icon-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));--r-icon-button--border-color:var(--r-border-soft, #686868)}:host(:active:not([disabled]:not([disabled=false]))){--r-icon-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));--r-icon-button--border-color:var(--r-border-soft, #686868)}:host(:focus-within:not(:active):not([disabled]:not([disabled=false]))){box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}:host([disabled]:not([disabled=false])){opacity:0.4;--r-icon-button--cursor:not-allowed;--r-icon-button--box-shadow:none;--r-icon-button--background-color:transparent;--r-icon-button--border-color:transparent}:host([variant=contained]){--r-icon-button--color:var(--r-icon-inverse, #fff);--r-icon-button--background-color:var(--r-background-interactive-regular, #282828);--r-icon-button--border-color:var(--r-border-transparent, transparent);--r-icon-button--box-shadow:none}:host([variant=contained]:hover:not([disabled]:not([disabled=false]))){--r-icon-button--color:var(--r-icon-regular, #282828);--r-icon-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));--r-icon-button--border-color:var(--r-border-soft, #686868)}:host([variant=contained]:active:not([disabled]:not([disabled=false]))){--r-icon-button--color:var(--r-icon-regular, #282828);--r-icon-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));--r-icon-button--border-color:var(--r-border-soft, #686868)}:host([variant=contained][disabled]:not([disabled=false])){--r-icon-button--color:var(--r-icon-inverse, #fff);--r-icon-button--background-color:var(--r-background-interactive-regular, #282828);--r-icon-button--border-color:transparent}:host([size=s]){--r-icon-button--height:1.5rem;--r-icon-button--width:1.5rem}:host([size=m]){--r-icon-button--height:2.25rem;--r-icon-button--width:2.25rem}:host([size=l]){--r-icon-button--height:2.75rem;--r-icon-button--width:2.75rem}.r-icon-button{display:var(--r-icon-button--display, inline-flex);align-items:var(--r-icon-button--align-items, center);justify-content:var(--r-icon-button--justify-content, center);outline:var(--r-icon-button--outline, none);cursor:var(--r-icon-button--cursor, pointer);pointer-events:var(--r-icon-button--pointer-events, initial);padding:var(--r-icon-button--padding, 0);border:var(--r-icon-button--border, none);color:var(--r-icon-button--color, inherit);background-color:var(--r-icon-button--background-color, transparent);box-sizing:var(--r-icon-button--box-sizing, border-box);border-width:var(--r-icon-button--border-width, 1px);border-style:var(--r-icon-button--border-style, solid);border-color:var(--r-icon-button--border-color, transparent);border-radius:var(--r-icon-button--border-radius, 50%);z-index:var(--r-icon-button--z-index, initial);width:var(--r-icon-button--width, 2.25rem);height:var(--r-icon-button--height, 2.25rem)}.r-icon-button--target-area{position:var(--r-icon-button--target-area--position, absolute);background:var(--r-icon-button--target-area--background, rgba(0, 0, 0, 0));width:var(--r-icon-button--target-area--width, 2.75rem);height:var(--r-icon-button--target-area--height, 2.75rem);z-index:var(--r-icon-button--target-area--z-index, 1)}.r-icon-button--icon{display:flex;align-items:center;justify-content:center}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}";
 
@@ -65,11 +65,11 @@ const IconButton = class {
             name,
             size
         };
-        const buttonTemplate = () => (index.h("button", Object.assign({ key: '9edaaa1a459ffc088ec0b5817a06636634a8a700', type: "button", class: "r-icon-button", "aria-label": this.host.getAttribute('aria-label') || null }, buttonAttrs, { onClick: this._handleClick, onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.nativeElement = el) }), name ?
+        const buttonTemplate = () => (index.h("button", Object.assign({ key: 'ce7c3beb7c5fdbff3b47011289fe730dddf844f5', type: "button", class: "r-icon-button", "aria-label": this.host.getAttribute('aria-label') || null }, buttonAttrs, { onClick: this._handleClick, onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.nativeElement = el) }), name ?
             index.h("r-icon", Object.assign({}, iconAttrs))
             :
-                index.h("r-icon", { size: size, class: "r-icon-button--icon" }, index.h("slot", null)), index.h("span", { key: 'f1a386a189634b597a1744520aba2b862e206278', class: "r-icon-button--label visually-hidden" }, this.label), index.h("span", { key: 'c66d4aaabec9fc5ef871d520c7037b94bb1a6f2b', class: "r-icon-button--target-area" })));
-        return (index.h(index.Host, { key: '8de48d1041bb285a3bff1b831eb24619f61e8d00' }, !disabled && tooltipText ?
+                index.h("r-icon", { size: size, class: "r-icon-button--icon" }, index.h("slot", null)), index.h("span", { key: '914c52bcfa15416981670f65cc4c009dd887003a', class: "r-icon-button--label visually-hidden" }, this.label), index.h("span", { key: 'e30a94256908de2c81f42d294e68a5e5524055c0', class: "r-icon-button--target-area" })));
+        return (index.h(index.Host, { key: 'b894237ccf791815719dc96ab85b7717141afdaf' }, !disabled && tooltipText ?
             index.h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
             :
                 buttonTemplate()));