@riverty/web-components 6.2.1 → 6.3.1

package/dist/collection/components/tabs/tabs.js

@@ -261,7 +261,7 @@ export class RTabs {
         this._changeFocusTab(e.target, e.detail.keycode);
     }
     render() {
-        return (h(Host, { key: '0737bf78e596f8fb9d4a2ec10f1503d1072f2683', class: "r-tabs" }, h("slot", { key: '5bc87b17930c9ea159ef29335c6b11f0f4c7d43e' })));
+        return (h(Host, { key: 'a1ff15e7b90774486932acd7035839fc8794e10b', class: "r-tabs" }, h("slot", { key: '4d8a00d7344c8cbc69896b43da740009fa54cab9' })));
     }
     static get is() { return "r-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,9 +158,9 @@ export class RTabsList {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '19666af123fe058aa3e654c153ad84ec16861a59', scrollable: `${this.scrollable}`, role: "tablist" }, h("div", { key: '5de7241f57b419133f81ae565bf517873a8e9268', class: "r-tabs-list" }, this.scrollable &&
-            h("div", { key: 'ff5edcbb61dd4ba9be3e0baf22822edbcbf8ec6d', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, this.renderScrollButton('left', this.firstItemVisible, this.scrollLeft, this.scrollLeftTooltip), !this.firstItemVisible && h("div", { key: '76fbeab529e2a7869ac7e946b1c0863969114888', class: "r-tabs-list--scroll-indicator" })), h("div", { key: 'd520b386242700c000daf85eba8d50fb014fc616', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, h("slot", { key: 'f8534275445ed4d32154519f0a8f592ee7ea3353' })), this.scrollable &&
-            h("div", { key: '8ca03d4864eba5af975de4dd6dc6fd3c3e8be108', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && h("div", { key: '1a0534b79bbe3273a73f48530a3a17ccac0d7826', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
+        return (h(Host, { key: '3a43356d4178acc008f6213b4f27488740582497', scrollable: `${this.scrollable}`, role: "tablist" }, h("div", { key: 'aa5fdb9a8e8445b083a9ac17d0b6c72f8693e181', class: "r-tabs-list" }, this.scrollable &&
+            h("div", { key: '2ba0a3eeae8fd073016af13c9781a20b3c1078cd', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, this.renderScrollButton('left', this.firstItemVisible, this.scrollLeft, this.scrollLeftTooltip), !this.firstItemVisible && h("div", { key: '132141c530c86a0cb5abb48ae5ab55fe00c33444', class: "r-tabs-list--scroll-indicator" })), h("div", { key: 'bbad4d5cf268fa5e15f2e83050ab4f40ec284cbc', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, h("slot", { key: '8531037917ff783f4467e232ffafff4f2fd0be1f' })), this.scrollable &&
+            h("div", { key: 'e39465fadb91478adf2f2ed529a89038ff6695c3', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && h("div", { key: 'a4d5660cde041b1ab6ef77c8498e74a85fb79289', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
     }
     static get is() { return "r-tabs-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,7 +94,10 @@ export class Toast {
         // This captures the current natural height for the animation
         this.updateHeightVariable();
         this.isOpen = false;
-        this.toastDismiss.emit();
+        // Only emit if still connected to DOM
+        if (this.host.isConnected) {
+            this.toastDismiss.emit();
+        }
         this.animationCompleted = false;
         if (this.removalTimer)
             clearTimeout(this.removalTimer);
@@ -259,6 +262,11 @@ export class Toast {
     }
     disconnectedCallback() {
         this.host.removeEventListener('animationend', this.handleAnimationEnd);
+        // Clear pending timers to prevent events from firing after component is removed
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+        if (this.removalTimer)
+            clearTimeout(this.removalTimer);
     }
     render() {
         const { headline, href, action, target, trailingIcon } = this;
@@ -278,14 +286,14 @@ export class Toast {
             name: trailingIcon,
             size: 'm'
         };
-        return (h(Host, Object.assign({ key: '4fa8a3d2db292941933f73437d823f3f6581d626' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}`, style: { visibility: this.isOpen ? 'visible' : 'hidden' } }), h("div", { key: '20506092a2459d836918da00f1670cf18730a42c', class: "r-toast" }, this.hasLeading &&
-            h("div", { key: '384ce331ff3825bc01323bbb6f3972ccd4198223', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: 'eb455c5729d37431b8576dfcaff6eceead5000bb', name: "leading" }), this.leadingIconVisible && h("r-icon", Object.assign({ key: '3b0b3e9d9516a072d5c3b5ca50ab3353cdf20053', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: 'dcfc949dda66a2437cbb4b3e2847266e55ab83d6', class: "r-toast--main" }, this.hasHeadline &&
-            h("h2", { key: 'c1abf4f2b6abc7b53db6727ff09f027d4b2a940d', class: "r-toast--headline" }, h("slot", { key: '9b6a57199eac2a4e0f96d38cc0b3d02adc2bb279', name: "headline" }, headline)), this.hasContent &&
-            h("div", { key: '6c182bd58efe6cd404ae7b20ee2464f3965b889d', class: "r-toast--content r-typography" }, h("slot", { key: 'a49fd6e859f1b512069fc3bed9c0c21da35d78cc', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            h("div", { key: 'b0282c4677483b96b3eac7ddbdb2e13ae245ebe2', class: "r-toast--action" }, h("slot", { key: 'e267d02a4e39a443865c1c0a62f3d6ed06e2a319', name: "action" }, this.hasActionLink &&
-                h("r-button", Object.assign({ key: '8785094717619bd69c5e711873598b2fb7eeb5be', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
-            h("div", { key: '066ecbc6346ed516aa9dd193505a26544bbdf92f', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '890fd983d1208ea514b89aeaf394ae82c1d1ec55', name: "trailing" }), this.isDismissManual &&
-                h("r-icon-button", Object.assign({ key: '2b9e06adc46cf1a726d5d78f7cedb2d1405b4c72' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), h("slot", { key: '7349c7b3422f194852609c2cdf150a5dc4498aa9', name: "dismiss" }))))));
+        return (h(Host, Object.assign({ key: '011a8bc8e8a873265a9f239290f479d37c01bedf' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}`, style: { visibility: this.isOpen ? 'visible' : 'hidden' } }), h("div", { key: '04b15f304e0870df9d420f838463d23a5b44e0c8', class: "r-toast" }, this.hasLeading &&
+            h("div", { key: '1f093aa61c368f7cfaf250c1c67e9cdeeffc004f', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: 'a60995cbcae0f7f89698696f8430e70905ffab52', name: "leading" }), this.leadingIconVisible && h("r-icon", Object.assign({ key: '4828bd01672cade715b713b9ae0fc711c4e3ae28', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: 'ff6be09bfb6c97c00fda03fe8b87cd41e7d6b5e3', class: "r-toast--main" }, this.hasHeadline &&
+            h("h2", { key: 'd127a98f7f215a490df84131fc213f83badce1ab', class: "r-toast--headline" }, h("slot", { key: 'b848f1596357d6806ca557b86bf18a7d476d7d61', name: "headline" }, headline)), this.hasContent &&
+            h("div", { key: 'a54472f865378dc9c0b387e3bd0b844bcef3e270', class: "r-toast--content r-typography" }, h("slot", { key: 'e5451f47f218f8c40c99acddbec8c36d683d00ca', onSlotchange: this.handleSlotChange })), this.hasAction &&
+            h("div", { key: 'da37911c654dd01adc69dbcb7e26fd06b29fef6d', class: "r-toast--action" }, h("slot", { key: 'b0a1aa508b2d9de350a1faa7ef7667c088f801fe', name: "action" }, this.hasActionLink &&
+                h("r-button", Object.assign({ key: 'b0473bb3b8d24ccd2b26a3e588ae58c21e026b59', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
+            h("div", { key: '69711c390acb6ca35f2ddfd350910f1e6c080f69', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: 'f5a1da0280b06c562c4b4c26a7d505c2cbf80903', name: "trailing" }), this.isDismissManual &&
+                h("r-icon-button", Object.assign({ key: '53f5d398b82066da7ebfba497efcc42845134e3c' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), h("slot", { key: '0fa33220eff7b05ff9580bd62a658ee67b70c09e', name: "dismiss" }))))));
     }
     static get is() { return "r-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class ToastGroup {
         this.observeSlotContentChange();
     }
     render() {
-        return (h(Host, { key: '85ab80be1fca1d1a9c3dc2e17de616747748a4dd' }, h("div", { key: 'a88670978563caeb8f500f4b5f9af2bcd0ade386', class: "r-toast-group" }, h("slot", { key: 'ab1480a47cfae0cacc45de708d51e8a77b6dfb85' }))));
+        return (h(Host, { key: '9924942e0ad98ba7e26b0b816bc79546c43c6064' }, h("div", { key: 'ea11ad2d95cb84e15773ab1278ae2229a6fda25d', class: "r-toast-group" }, h("slot", { key: '047c070360fe1649a96b867456228892fa75cd26' }))));
     }
     static get is() { return "r-toast-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,36 +1,5 @@
 :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;
@@ -49,14 +18,12 @@
 }
 
 .r-tooltip {
-  position: var(--r-tooltip--position);
+  position: var(--r-tooltip--position, relative);
 }
 .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);
@@ -70,37 +37,41 @@
   --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);
+  position: var(--r-tooltip--content--position, fixed);
+  display: var(--r-tooltip--content--display, none);
+  justify-content: var(--r-tooltip--content--justify-content, center);
+  align-items: var(--r-tooltip--content--align-items, center);
+  color: var(--r-tooltip--content--color, var(--r-text-inverse));
+  background-color: var(--r-tooltip--content--background-color, var(--r-background-inverse));
+  font-family: var(--r-tooltip--content--font-family, var(--r-font-family-text));
+  font-weight: var(--r-tooltip--content--font-weight, var(--r-font-weight-regular));
+  font-size: var(--r-tooltip--content--font-size, var(--r-font-size-200));
+  line-height: var(--r-tooltip--content--line-height, var(--r-line-height-s));
+  min-width: var(--r-tooltip--content--min-width, 32px);
+  max-width: var(--r-tooltip--content--max-width, 300px);
+  min-height: var(--r-tooltip--content--min-height, 32px);
+  padding: var(--r-tooltip--content--padding, var(--r-spacing-050) var(--r-spacing-100));
+  width: var(--r-tooltip--content--width, max-content);
+  word-break: var(--r-tooltip--content--word-break, break-word);
+  box-sizing: var(--r-tooltip--content--box-sizing, border-box);
+  z-index: var(--r-tooltip--content--z-index, 0);
+  white-space: var(--r-tooltip--content--white-space, normal);
 }
 .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);
+  display: var(--r-tooltip--arrow--display, none);
+  position: var(--r-tooltip--arrow--position, fixed);
+  width: var(--r-tooltip--arrow--width, 12px);
+  height: var(--r-tooltip--arrow--height, 12px);
+  transform: var(--r-tooltip--arrow--transform, rotate(180deg));
+  z-index: var(--r-tooltip--content--z-index);
 }
 .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);
+  content: var(--r-tooltip--arrow--inner-content, "");
+  display: var(--r-tooltip--arrow--inner--display, block);
+  width: var(--r-tooltip--arrow--inner--width, 12px);
+  height: var(--r-tooltip--arrow--inner--height, 6px);
+  background-color: var(--r-tooltip--arrow--inner--background-color, var(--r-background-inverse));
+  clip-path: var(--r-tooltip--arrow--inner--clip-path, polygon(50% 0%, 0% 100%, 100% 100%));
+  border-radius: var(--r-tooltip--arrow--inner--border-radius, 0);
+  align-self: var(--r-tooltip--arrow--inner--align-self, flex-end);
 }

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

@@ -22,11 +22,11 @@ export class Tooltip {
             }
         };
         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;
+            var _a, _b;
+            const elementRect = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const tooltipRect = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             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;
+            const hostHeight = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.height) + this.arrowHeight || 0;
             switch (this.positionState) {
                 case 'top':
                     this.alignPosition(this.tooltip, -offsetLeft, -this.tooltipContainerHeight);
@@ -35,21 +35,24 @@ export class Tooltip {
                     this.alignPosition(this.tooltip, -offsetLeft, hostHeight);
                     break;
                 case 'left':
-                    this.alignPosition(this.tooltip, -this.tooltipContainerWidth, -offsetHeight);
+                    this.tooltip.style.left = `${elementRect.left - tooltipRect.width - this.arrowWidth}px`;
+                    this.tooltip.style.top = `${elementRect.top + elementRect.height / 2 - tooltipRect.height / 2}px`;
                     break;
                 case 'right':
-                    this.alignPosition(this.tooltip, hostWidth, -offsetHeight);
+                    this.tooltip.style.left = `${elementRect.left + elementRect.width + this.arrowWidth}px`;
+                    this.tooltip.style.top = `${elementRect.top + elementRect.height / 2 - tooltipRect.height / 2}px`;
                     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;
+            var _a, _b, _c, _d;
+            const elementRect = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const tooltipRect = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            const hostHeight = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.height) || 0;
+            const offsetLeft = Math.abs((elementRect === null || elementRect === void 0 ? void 0 : elementRect.width) - ((_d = (_c = this.arrow) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.width)) / 2;
+            const arrowCenterY = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.top) + elementRect.height / 2 - this.arrowHeight / 2;
             switch (this.positionState) {
                 case 'top':
                     this.alignPosition(this.arrow, offsetLeft, -this.arrowHeight);
@@ -58,10 +61,12 @@ export class Tooltip {
                     this.alignPosition(this.arrow, offsetLeft, hostHeight);
                     break;
                 case 'left':
-                    this.alignPosition(this.arrow, -this.arrowWidth, offsetHeight);
+                    this.arrow.style.left = `${tooltipRect.left + tooltipRect.width}px`;
+                    this.arrow.style.top = `${arrowCenterY}px`;
                     break;
                 case 'right':
-                    this.alignPosition(this.arrow, hostWidth, offsetHeight);
+                    this.arrow.style.left = `${tooltipRect.left - this.arrowWidth}px`;
+                    this.arrow.style.top = `${arrowCenterY}px`;
                     break;
                 default:
                     break;
@@ -97,12 +102,15 @@ export class Tooltip {
             var _a;
             this.isShown = true;
             this.tooltip.classList.add('r-tooltip--content--visible');
+            this.updateZIndex();
             const interactiveElement = this.getInteractiveElement(this.activeElement);
             interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-description', (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.innerText);
         };
         this.removeTooltip = () => {
             this.isShown = false;
             this.tooltip.style.width = 'max-content';
+            this.tooltip.style.zIndex = '';
+            this.arrow.style.zIndex = '';
             this.tooltip.classList.remove('r-tooltip--content--visible');
             const interactiveElement = this.getInteractiveElement(this.activeElement);
             interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeAttribute('aria-description');
@@ -359,6 +367,23 @@ export class Tooltip {
             this.arrowPositionState = 'right';
         }
     }
+    updateZIndex() {
+        const dialogs = document.querySelectorAll('dialog[open]');
+        let highestZIndex = 0;
+        dialogs.forEach((dialog) => {
+            const htmlDialog = dialog;
+            if (htmlDialog.open) {
+                const style = getComputedStyle(htmlDialog);
+                const zIndex = parseInt(style.zIndex, 10);
+                if (!isNaN(zIndex) && zIndex > highestZIndex) {
+                    highestZIndex = zIndex;
+                }
+            }
+        });
+        const tooltipZIndex = highestZIndex > 0 ? highestZIndex + 10 : 1060;
+        this.tooltip.style.zIndex = `${tooltipZIndex}`;
+        this.arrow.style.zIndex = `${tooltipZIndex}`;
+    }
     render() {
         const { text, arrowPositionState, positionState, isShown, uniqueId } = this;
         const hostAttrs = {
@@ -375,7 +400,7 @@ export class Tooltip {
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (h(Host, Object.assign({ key: '5d8a002a227895d5e633e8b1df95ba449a9e253a' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '4e6340639dc27fc7d0e981ca7cf8a4046737527f', class: "r-tooltip" }, h("div", Object.assign({ key: 'bcf2d5c73b427b2941be8de56b9ce2f296ae07eb', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: 'be7037ba07bf11b4957910c52f4a3f329b514007' })), h("div", Object.assign({ key: '300a3ef08b7c73b6b07161c58860df518ae9a862', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '73912349289b0dc365552331197d94bd0896ff3c', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
+        return (h(Host, Object.assign({ key: '19155344b057a413834706bf19dd5a1bc082549d' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '298c77b5c9611aba36d3df450f2c4ebda728113a', class: "r-tooltip" }, h("div", Object.assign({ key: 'e97a5fb30b6b67cde30734b02acdd1f354d58219', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '3ad175db2674badbe9e022f52794a6f16afee7f5' })), h("div", Object.assign({ key: '6ed4995a7765422ff604e8da0797f651c12b1e8a', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '98e5991e801b1e54138c2a5156061237cafa2459', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     static get is() { return "r-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -1 +1,2 @@
-export {};
+import { checkForUpdates } from "./utils/version-checker";
+checkForUpdates('@riverty/web-components', '6.2.1');

package/dist/collection/utils/version-checker.js

@@ -0,0 +1,33 @@
+export async function checkForUpdates(packageName, currentVersion) {
+    if (typeof window === 'undefined' || !window.localStorage)
+        return;
+    const storageKey = `riverty-version-check:${packageName}`;
+    const lastCheck = localStorage.getItem(storageKey);
+    const oneDay = 24 * 60 * 60 * 1000;
+    if (lastCheck && Date.now() - parseInt(lastCheck, 10) < oneDay) {
+        return;
+    }
+    localStorage.setItem(storageKey, Date.now().toString());
+    const registryUrl = 'https://registry.npmjs.org';
+    try {
+        const response = await fetch(`${registryUrl}/${packageName}/latest`, {
+            signal: AbortSignal.timeout(5000)
+        });
+        if (!response.ok)
+            return;
+        const data = await response.json();
+        const latestVersion = data.version;
+        if (!latestVersion || latestVersion === currentVersion)
+            return;
+        const currentParts = currentVersion.split('.').map(Number);
+        const latestParts = latestVersion.split('.').map(Number);
+        const isMajorUpdate = latestParts[0] > currentParts[0];
+        console.warn(`%c⚠️ ${packageName} update available\n` +
+            `%c  Current: ${currentVersion} → Latest: ${latestVersion}\n` +
+            (isMajorUpdate ? `%c  ⚠️ This is a MAJOR version with breaking changes!\n` : '') +
+            `%c  Run: npm install ${packageName}@latest`, 'color: #f59e0b; font-weight: bold; font-size: 14px;', 'color: #6b7280;', isMajorUpdate ? 'color: #ef4444; font-weight: bold;' : '', 'color: #3b82f6;');
+    }
+    catch (_a) {
+        // Silently fail - version check is non-critical
+    }
+}

package/dist/esm/index-CTxpqopm.js

@@ -68,10 +68,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'r-design-system-devtools':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './r-design-system-devtools.entry.js').then(processMod, consoleError);
                 case 'r-accordion':
                     return import(
                       /* webpackMode: "lazy" */
@@ -100,18 +96,34 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './r-checkbox-group.entry.js').then(processMod, consoleError);
+                case 'r-design-system-devtools':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './r-design-system-devtools.entry.js').then(processMod, consoleError);
                 case 'r-dialog':
                     return import(
                       /* webpackMode: "lazy" */
                       './r-dialog.entry.js').then(processMod, consoleError);
+                case 'r-illustration':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './r-illustration.entry.js').then(processMod, consoleError);
                 case 'r-input-code':
                     return import(
                       /* webpackMode: "lazy" */
                       './r-input-code.entry.js').then(processMod, consoleError);
+                case 'r-input-date':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './r-input-date.entry.js').then(processMod, consoleError);
                 case 'r-input-password':
                     return import(
                       /* webpackMode: "lazy" */
                       './r-input-password.entry.js').then(processMod, consoleError);
+                case 'r-input-phone-number':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './r-input-phone-number.entry.js').then(processMod, consoleError);
                 case 'r-list-item':
                     return import(
                       /* webpackMode: "lazy" */
@@ -232,10 +244,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './r-button.entry.js').then(processMod, consoleError);
-                case 'r-illustration':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './r-illustration.entry.js').then(processMod, consoleError);
                 case 'r-icon-button_2':
                     return import(
                       /* webpackMode: "lazy" */
@@ -248,14 +256,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './r-icon.entry.js').then(processMod, consoleError);
-                case 'r-input-date':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './r-input-date.entry.js').then(processMod, consoleError);
-                case 'r-input-phone-number':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './r-input-phone-number.entry.js').then(processMod, consoleError);
           }
       }
   return import(

package/dist/esm/index.js

@@ -1 +1,35 @@
+async function checkForUpdates(packageName, currentVersion) {
+    if (typeof window === 'undefined' || !window.localStorage)
+        return;
+    const storageKey = `riverty-version-check:${packageName}`;
+    const lastCheck = localStorage.getItem(storageKey);
+    const oneDay = 24 * 60 * 60 * 1000;
+    if (lastCheck && Date.now() - parseInt(lastCheck, 10) < oneDay) {
+        return;
+    }
+    localStorage.setItem(storageKey, Date.now().toString());
+    const registryUrl = 'https://registry.npmjs.org';
+    try {
+        const response = await fetch(`${registryUrl}/${packageName}/latest`, {
+            signal: AbortSignal.timeout(5000)
+        });
+        if (!response.ok)
+            return;
+        const data = await response.json();
+        const latestVersion = data.version;
+        if (!latestVersion || latestVersion === currentVersion)
+            return;
+        const currentParts = currentVersion.split('.').map(Number);
+        const latestParts = latestVersion.split('.').map(Number);
+        const isMajorUpdate = latestParts[0] > currentParts[0];
+        console.warn(`%c⚠️ ${packageName} update available\n` +
+            `%c  Current: ${currentVersion} → Latest: ${latestVersion}\n` +
+            (isMajorUpdate ? `%c  ⚠️ This is a MAJOR version with breaking changes!\n` : '') +
+            `%c  Run: npm install ${packageName}@latest`, 'color: #f59e0b; font-weight: bold; font-size: 14px;', 'color: #6b7280;', isMajorUpdate ? 'color: #ef4444; font-weight: bold;' : '', 'color: #3b82f6;');
+    }
+    catch (_a) {
+        // Silently fail - version check is non-critical
+    }
+}
 
+checkForUpdates('@riverty/web-components', '6.2.1');