@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/toggle-button/toggle-button.css

@@ -147,7 +147,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -174,6 +174,16 @@
   cursor: default;
 }
 
+:host(.ix-focused) .btn {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
+:host .btn:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
 :host {
   --ix-button-border-radius-left: var(--theme-btn--border-radius);
   --ix-button-border-radius-right: var(--theme-btn--border-radius);
@@ -248,7 +258,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -275,13 +285,24 @@
   cursor: default;
 }
 
+:host(.ix-focused) .btn {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
+:host .btn:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
 :host .btn-primary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-primary, :host .btn-primary.focus, :host .btn-primary:focus-visible {
+:host .btn-primary {
   background-color: var(--theme-btn-primary--background);
   color: var(--theme-btn-primary--color);
   --ix-button-color: var(--theme-btn-primary--color);
@@ -289,10 +310,6 @@
   border-color: var(--theme-btn-primary--border-color);
   border-style: solid;
 }
-:host .btn-primary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-primary.selected {
   background-color: var(--theme-btn-primary--background--pressed);
   color: var(--theme-btn-primary--color--pressed);
@@ -341,12 +358,13 @@
 }
 
 :host .btn-secondary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-secondary, :host .btn-secondary.focus, :host .btn-secondary:focus-visible {
+:host .btn-secondary {
   background-color: var(--theme-btn-secondary--background);
   color: var(--theme-btn-secondary--color);
   --ix-button-color: var(--theme-btn-secondary--color);
@@ -354,10 +372,6 @@
   border-color: var(--theme-btn-secondary--border-color);
   border-style: solid;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-secondary.selected {
   background-color: var(--theme-btn-secondary--background--pressed);
   color: var(--theme-btn-secondary--color--pressed);
@@ -406,12 +420,13 @@
 }
 
 :host .btn-tertiary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-tertiary, :host .btn-tertiary.focus, :host .btn-tertiary:focus-visible {
+:host .btn-tertiary {
   background-color: var(--theme-btn-tertiary--background);
   color: var(--theme-btn-tertiary--color);
   --ix-button-color: var(--theme-btn-tertiary--color);
@@ -419,10 +434,6 @@
   border-color: var(--theme-btn-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-tertiary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-tertiary.selected {
   background-color: var(--theme-btn-tertiary--background--pressed);
   color: var(--theme-btn-tertiary--color--pressed);
@@ -471,12 +482,13 @@
 }
 
 :host .btn-subtle-primary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-subtle-primary, :host .btn-subtle-primary.focus, :host .btn-subtle-primary:focus-visible {
+:host .btn-subtle-primary {
   background-color: var(--theme-btn-subtle-primary--background);
   color: var(--theme-btn-subtle-primary--color);
   --ix-button-color: var(--theme-btn-subtle-primary--color);
@@ -484,10 +496,6 @@
   border-color: var(--theme-btn-subtle-primary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-primary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-subtle-primary.selected {
   background-color: var(--theme-btn-subtle-primary--background--pressed);
   color: var(--theme-btn-subtle-primary--color--pressed);
@@ -536,12 +544,13 @@
 }
 
 :host .btn-subtle-secondary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-subtle-secondary, :host .btn-subtle-secondary.focus, :host .btn-subtle-secondary:focus-visible {
+:host .btn-subtle-secondary {
   background-color: var(--theme-btn-subtle-secondary--background);
   color: var(--theme-btn-subtle-secondary--color);
   --ix-button-color: var(--theme-btn-subtle-secondary--color);
@@ -549,10 +558,6 @@
   border-color: var(--theme-btn-subtle-secondary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-secondary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-subtle-secondary.selected {
   background-color: var(--theme-btn-subtle-secondary--background--pressed);
   color: var(--theme-btn-subtle-secondary--color--pressed);
@@ -601,12 +606,13 @@
 }
 
 :host .btn-subtle-tertiary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-subtle-tertiary, :host .btn-subtle-tertiary.focus, :host .btn-subtle-tertiary:focus-visible {
+:host .btn-subtle-tertiary {
   background-color: var(--theme-btn-subtle-tertiary--background);
   color: var(--theme-btn-subtle-tertiary--color);
   --ix-button-color: var(--theme-btn-subtle-tertiary--color);
@@ -614,10 +620,6 @@
   border-color: var(--theme-btn-subtle-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-subtle-tertiary.selected {
   background-color: var(--theme-btn-subtle-tertiary--background--pressed);
   color: var(--theme-btn-subtle-tertiary--color--pressed);
@@ -666,12 +668,13 @@
 }
 
 :host .btn-danger-primary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-danger-primary, :host .btn-danger-primary.focus, :host .btn-danger-primary:focus-visible {
+:host .btn-danger-primary {
   background-color: var(--theme-btn-danger-primary--background);
   color: var(--theme-btn-danger-primary--color);
   --ix-button-color: var(--theme-btn-danger-primary--color);
@@ -679,10 +682,6 @@
   border-color: var(--theme-btn-danger-primary--border-color);
   border-style: solid;
 }
-:host .btn-danger-primary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-danger-primary.selected {
   background-color: var(--theme-btn-danger-primary--background--pressed);
   color: var(--theme-btn-danger-primary--color--pressed);
@@ -731,12 +730,13 @@
 }
 
 :host .btn-danger-secondary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-danger-secondary, :host .btn-danger-secondary.focus, :host .btn-danger-secondary:focus-visible {
+:host .btn-danger-secondary {
   background-color: var(--theme-btn-danger-secondary--background);
   color: var(--theme-btn-danger-secondary--color);
   --ix-button-color: var(--theme-btn-danger-secondary--color);
@@ -744,10 +744,6 @@
   border-color: var(--theme-btn-danger-secondary--border-color);
   border-style: solid;
 }
-:host .btn-danger-secondary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-danger-secondary.selected {
   background-color: var(--theme-btn-danger-secondary--background--pressed);
   color: var(--theme-btn-danger-secondary--color--pressed);
@@ -796,12 +792,13 @@
 }
 
 :host .btn-danger-tertiary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-danger-tertiary, :host .btn-danger-tertiary.focus, :host .btn-danger-tertiary:focus-visible {
+:host .btn-danger-tertiary {
   background-color: var(--theme-btn-danger-tertiary--background);
   color: var(--theme-btn-danger-tertiary--color);
   --ix-button-color: var(--theme-btn-danger-tertiary--color);
@@ -809,10 +806,6 @@
   border-color: var(--theme-btn-danger-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-danger-tertiary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-danger-tertiary.selected {
   background-color: var(--theme-btn-danger-tertiary--background--pressed);
   color: var(--theme-btn-danger-tertiary--color--pressed);

package/dist/collection/components/toggle-button/toggle-button.js

@@ -6,34 +6,49 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from "@stencil/core";
+import { h, Host, Mixin, } from "@stencil/core";
 import { BaseButton } from "../button/base-button";
-import { a11yBoolean, a11yHostAttributes, getFallbackLabelFromIconName, } from "../utils/a11y";
-export class ToggleButton {
+import { a11yBoolean, getFallbackLabelFromIconName } from "../utils/a11y";
+import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
+export class ToggleButton extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
-        /**
-         * Button variant.
-         */
-        this.variant = 'subtle-primary';
-        /**
-         * Disable the button
-         */
-        this.disabled = false;
-        /**
-         * Loading button
-         */
-        this.loading = false;
-        /**
-         * Show button as pressed
-         */
-        this.pressed = false;
+        super();
     }
+    hostElement;
+    /**
+     * Button variant.
+     */
+    variant = 'subtle-primary';
+    /**
+     * Disable the button
+     */
+    disabled = false;
+    /**
+     * Loading button
+     */
+    loading = false;
+    /**
+     * Icon name
+     */
+    icon;
+    /**
+     * Icon name for the right side of the button
+     * @since 4.0.0
+     */
+    iconRight;
+    /**
+     * Show button as pressed
+     */
+    pressed = false;
+    /**
+     * Pressed change event
+     */
+    pressedChange;
     dispatchPressedChange() {
         this.pressedChange.emit(!this.pressed);
     }
     render() {
-        var _a, _b;
-        const a11y = a11yHostAttributes(this.hostElement);
         const baseButtonProps = {
             variant: this.variant,
             iconOnly: false,
@@ -46,13 +61,15 @@ export class ToggleButton {
             onClick: () => this.dispatchPressedChange(),
             type: 'button',
             ariaAttributes: {
+                ...this.inheritAriaAttributes,
                 'aria-pressed': a11yBoolean(this.pressed),
-                'aria-label': (_b = (_a = a11y['aria-label']) !== null && _a !== void 0 ? _a : this.ariaLabelButton) !== null && _b !== void 0 ? _b : getFallbackLabelFromIconName(this.icon),
+                'aria-label': this.inheritAriaAttributes['aria-label'] ??
+                    getFallbackLabelFromIconName(this.icon),
             },
         };
-        return (h(Host, { key: '18372c75b69190a4f75e544d389250bcafbe742f', class: {
+        return (h(Host, { key: '22c2548a493307f2efc554a137e4e6ba93d913a4', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '08cea7593cbbedca44a0bcbf7b0c878cce18be87' }, baseButtonProps), h("slot", { key: '3adefc76a4730d1e333173d6301ba1f6bf9c5ac0' }))));
+            } }, h(BaseButton, { key: '015a3ad74d231eaf896c29c6ab5fae45e6cf4fb5', ...baseButtonProps }, h("slot", { key: 'ad0158fc047212e96f296147b753f6847af768bc' }))));
     }
     static get is() { return "ix-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -194,28 +211,6 @@ export class ToggleButton {
                 "reflect": false,
                 "attribute": "pressed",
                 "defaultValue": "false"
-            },
-            "ariaLabelButton": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "3.2.0"
-                        }],
-                    "text": "ARIA label that will be set on the native HTML button element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "aria-label-button"
             }
         };
     }

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

@@ -20,26 +20,41 @@ let tooltipInstance = 0;
  * @slot title-content - Content of tooltip title
  */
 export class Tooltip {
-    constructor() {
-        /**
-         * Define if the user can access the tooltip via mouse.
-         */
-        this.interactive = false;
-        /**
-         * Initial placement of the tooltip.
-         * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
-         */
-        this.placement = 'top';
-        /** @internal */
-        this.showDelay = 0;
-        /** @internal */
-        this.hideDelay = 50;
-        /** @internal */
-        this.animationFrame = false;
-        this.visible = false;
-        this.instance = tooltipInstance++;
-        this.dialogRef = makeRef();
-    }
+    /**
+     * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
+     */
+    for;
+    /**
+     * Title of the tooltip
+     */
+    titleContent;
+    /**
+     * Define if the user can access the tooltip via mouse.
+     */
+    interactive = false;
+    /**
+     * Initial placement of the tooltip.
+     * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
+     */
+    placement = 'top';
+    /** @internal */
+    showDelay = 0;
+    /** @internal */
+    hideDelay = 50;
+    /** @internal */
+    animationFrame = false;
+    hostElement;
+    visible = false;
+    hideTooltipTimeout;
+    showTooltipTimeout;
+    visibleFor;
+    disposeAutoUpdate;
+    disposeTriggerListener;
+    disposeTooltipListener;
+    disposeDomChangeListener;
+    hasDisconnected = false;
+    instance = tooltipInstance++;
+    dialogRef = makeRef();
     get arrowElement() {
         return this.hostElement.shadowRoot.querySelector('.arrow');
     }
@@ -68,11 +83,10 @@ export class Tooltip {
         }
         const dialog = await this.dialogRef.waitForCurrent();
         this.hideTooltipTimeout = setTimeout(() => {
-            var _a, _b;
             this.setAnchorElement();
             dialog.hidePopover();
-            (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-            (_b = this.disposeTooltipListener) === null || _b === void 0 ? void 0 : _b.call(this);
+            this.disposeAutoUpdate?.();
+            this.disposeTooltipListener?.();
         }, hideDelay);
     }
     setAnchorElement(anchorElement) {
@@ -94,16 +108,32 @@ export class Tooltip {
             left: 'unset',
         };
         if (placement.startsWith('top')) {
-            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), bottom: numberToPixel(ARROW_OFFSET) });
+            return {
+                ...resetPosition,
+                left: numberToPixel(x),
+                bottom: numberToPixel(ARROW_OFFSET),
+            };
         }
         if (placement.startsWith('right')) {
-            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(ARROW_OFFSET), top: numberToPixel(y) });
+            return {
+                ...resetPosition,
+                left: numberToPixel(ARROW_OFFSET),
+                top: numberToPixel(y),
+            };
         }
         if (placement.startsWith('bottom')) {
-            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), top: numberToPixel(ARROW_OFFSET) });
+            return {
+                ...resetPosition,
+                left: numberToPixel(x),
+                top: numberToPixel(ARROW_OFFSET),
+            };
         }
         if (placement.startsWith('left')) {
-            return Object.assign(Object.assign({}, resetPosition), { right: numberToPixel(ARROW_OFFSET), top: numberToPixel(y) });
+            return {
+                ...resetPosition,
+                right: numberToPixel(ARROW_OFFSET),
+                top: numberToPixel(y),
+            };
         }
     }
     async computeTooltipPosition(target, dialog) {
@@ -134,12 +164,10 @@ export class Tooltip {
             return;
         }
         return new Promise((resolve) => {
-            var _a;
-            (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.disposeAutoUpdate?.();
             this.disposeAutoUpdate = autoUpdate(target, dialog, async () => {
-                var _a;
                 const computeResponse = await this.computeTooltipPosition(target, dialog);
-                const isHidden = (_a = computeResponse.middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden;
+                const isHidden = computeResponse.middlewareData.hide?.referenceHidden;
                 if (isHidden) {
                     this.hideTooltip(0);
                     resolve(computeResponse);
@@ -190,8 +218,7 @@ export class Tooltip {
         return elements;
     }
     async registerTriggerListener() {
-        var _a;
-        (_a = this.disposeTriggerListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposeTriggerListener?.();
         const triggerElementList = await this.queryAnchorElements();
         if (!triggerElementList) {
             return;
@@ -232,8 +259,7 @@ export class Tooltip {
         this.disposeTriggerListener = addDisposableEventListenerAsArray(listeners);
     }
     registerTooltipListener(dialog) {
-        var _a;
-        (_a = this.disposeTooltipListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposeTooltipListener?.();
         this.disposeTooltipListener = addDisposableEventListenerAsArray([
             {
                 element: dialog,
@@ -286,6 +312,7 @@ export class Tooltip {
         ]);
     }
     registerDomChangeListener() {
+        this.disposeDomChangeListener?.();
         const observer = new MutationObserver(() => {
             this.registerTriggerListener();
         });
@@ -317,13 +344,19 @@ export class Tooltip {
     componentDidLoad() {
         this.registerDomChangeListener();
     }
+    connectedCallback() {
+        if (this.hasDisconnected) {
+            this.registerTriggerListener();
+            this.registerDomChangeListener();
+        }
+    }
     disconnectedCallback() {
-        var _a, _b, _c, _d;
+        this.hasDisconnected = true;
         this.clearTimeouts();
-        (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
-        (_b = this.disposeTriggerListener) === null || _b === void 0 ? void 0 : _b.call(this);
-        (_c = this.disposeTooltipListener) === null || _c === void 0 ? void 0 : _c.call(this);
-        (_d = this.disposeDomChangeListener) === null || _d === void 0 ? void 0 : _d.call(this);
+        this.disposeAutoUpdate?.();
+        this.disposeTriggerListener?.();
+        this.disposeTooltipListener?.();
+        this.disposeDomChangeListener?.();
     }
     handleTitleIconSlotChange(e) {
         const slot = e.target;
@@ -335,7 +368,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '0c5234ef90749fc655fcfe1b207ff07a56542c9a', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: '0d47ccccc273824891784dea6985f8d465bbb97a', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: '3c2b83f9d07786a69d8defe6942eb47e2c92bf72', class: "tooltip-container" }, h("div", { key: '799cc98634dcded6644c8b556d5f9dbc58bea809', class: "content-wrapper" }, h("div", { key: '760197461d8959ae1a04f827435f925359f54e04', class: 'tooltip-title' }, h("slot", { key: 'f5316e309883dac441181c3ffe05594e1a2a9034', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: '9e9b3a4390f4e586b91ae2ce1bbd94bc53d432c1', format: "h5" }, this.titleContent, h("slot", { key: '1e05a5984ce3638bdea2bdbea322e505b8211495', name: "title-content" }))), h("slot", { key: 'b74f4b6142b68920fc74029d751521b6c4faf706' }), h("div", { key: '26a4a736c0f1dbedaf788472a7232cefc095c8a8', class: "arrow" }))))));
+        return (h(Host, { key: '8aed42852f615787c48fa06b0682738a1f330440', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: 'f9291fb22d6a57c8cb4e6a2ad00b93291e21ba8e', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: 'b3549060bdc5e21ce10c3a131d96172b156e4b15', class: "tooltip-container" }, h("div", { key: '9faaaf7ad71f73267270b97d2d4ba06de1c9db15', class: "content-wrapper" }, h("div", { key: '2613a69b5ade812a9bf6850c40ea0b6c3b231c29', class: 'tooltip-title' }, h("slot", { key: 'b4e2bd1cbefd7a1e684967e876404e9df78b3c2b', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: 'ad34b68a4b538da01990d41b8ba5f35e6f54f71a', format: "h5" }, this.titleContent, h("slot", { key: '670455a0bfda60771c9af9b1b1890826f9a9431f', name: "title-content" }))), h("slot", { key: '82e0591cfb4861702b6a65f8e598d6475e5054f6' }), h("div", { key: '19145d17a5db3aaaf1750f3e6fcb0091d4baad4c', class: "arrow" }))))));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -360,8 +393,8 @@ export class Tooltip {
                     "references": {
                         "ElementReference": {
                             "location": "import",
-                            "path": "src/components",
-                            "id": "src/components.d.ts::ElementReference",
+                            "path": "../utils/element-reference",
+                            "id": "src/components/utils/element-reference.ts::ElementReference",
                             "referenceLocation": "ElementReference"
                         }
                     }
@@ -530,7 +563,7 @@ export class Tooltip {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.43.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element",
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.43.5_patch_hash=5b7b26f1b6644ca4134fe78af13f89b6653dffeffd2c09206b7c9402d0470193/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element",
                             "referenceLocation": "Element"
                         }
                     },