@ukic/web-components 3.7.0 → 3.8.0

package/dist/collection/components/ic-tab-group/ic-tab-group.js

@@ -16,11 +16,11 @@ export class TabGroup {
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (h(Host, { key: '5e2ac19760c3c6f6a5fa4e24e4b65d06bf958734', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: '08da1fef9eb0a16a7f9d0f7cffff3894b3319b09', role: "tablist", "aria-label": label, class: {
                 ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-group-monochrome"]: !!monochrome,
-            } }, h("ic-horizontal-scroll", { key: 'c1af66d6ccce50093586a87024d2fc2064204e65', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '5d74a60b33b216eea766a5d15e9d130cda924d2b', class: "tabs-container" }, h("slot", { key: '7d95c9b98a270810c391abc779ca0bda5c7fa24f' })))));
+            } }, h("ic-horizontal-scroll", { key: 'c12cc06aba78c85277b3eab2250c8e61a3b4c4da', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '01c299ea10f8600e2e9df303e06c4e97dcdab7c3', class: "tabs-container" }, h("slot", { key: '1f2cb7d4f2f86c7e3ba8f910797a963d15d9a7e0' })))));
     }
     static get is() { return "ic-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js

@@ -17,10 +17,10 @@ export class TabPanel {
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: '866d13ac3e2c93c8ea20e83d8513a74664aabfcb', class: {
+        return (h(Host, { key: 'ec5befdef261599b9f010a547bec533c28422dcd', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: 'a44da18c8534659c240dcb84ba9941b61574f546' }, h("slot", { key: '91a267e9b16c4ebdadb1b5facb9f7f50f3944f8e' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '76bf7fc0f05bd9422c79ba6a592561c211b20bec' }, h("slot", { key: '5ecfbc0ad3dc9c11b482f81557afc2afa5dd2803' }))));
     }
     static get is() { return "ic-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-text-field/ic-text-field.js

@@ -366,14 +366,14 @@ export class TextField {
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '353a70181ab18c4f636b34e2177bb9d088567885', class: {
+        return (h(Host, { key: 'af9f4dab9e78765b8e1e578d57783e5487d83f6b', class: {
                 "ic-text-field-full-width": fullWidth,
                 "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: '96d0ef6132ed2a26ee535cfc5055ddc6287446f6', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: 'dfcb7859651f74678636e4cda1ba0706b2e3b1fb', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'd9ee297f2de674a969486a3d00eef54526eace50', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '0a178235ced26ef73fd907d41424a8b4942659dc', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'c5206e3d1af81d4bf9bf0afcc9277899ca2287be', class: {
+            } }, h("ic-input-container", { key: '7417dcc2f53f877899b713093e81a4db38c394c7', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '36ae0e2a6a99024c0b8fbd141519dcd4d5390e6d', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '9392299204d1bc2ef1b0bb464984b8f8bc148834', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'd6819ae02cab210950e11d74c1dac6dd3c5505ed', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '660f12ab2717dfd7b75bd19a60c92c167fb06db3', class: {
                 readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: 'f3945929b482d9a0a954dc1afa658fc0c45d90c8', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
+            }, slot: "left-icon" }, h("slot", { key: '8631fc623d4f5b422921add6d01992b736acdf22', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
                 "no-left-pad": !showLeftIcon && readonly,
                 readonly,
                 "truncate-value": truncateValue,
@@ -381,19 +381,19 @@ export class TextField {
                 "no-resize": resize === false || !!readonly,
                 "no-left-pad": !showLeftIcon && !!readonly,
                 readonly: !!readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '6397d66b59b148884cb2fd7f8913063ca24f0de1', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'c5e7f94345cebe1dc99ba475aa5bde1b45dda0e0', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '1c7fe7d7654373753295a44a3e126ce2409099cc', name: "menu" }), (!isEmptyString(validationStatus) ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: 'c92ce219c83dccaec610f5caeb2a71b4753cbe2f', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '4ee50a7855e3a2c3fb5ab4ad655b278bb7a2190d', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '9ab8449f815482c7cd689d3d22b918de4c72c27b', name: "menu" }), (!isEmptyString(validationStatus) ||
             !isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
             maxCharactersWarning ||
             minCharactersUnattained ||
             minValueUnattained) &&
-            !validationInlineInternal && (h("ic-input-validation", { key: '2ba3ff987910423696b822529b36e59f04b36025', status: this.hasStatus(currentStatus) === false ||
+            !validationInlineInternal && (h("ic-input-validation", { key: 'b87afc1859b8a33d5767b5b0c61056936b760de7', status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: '01e443574b72a18ebd0b0646b0c2c30b59cc5726', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '90d4e1d9325a34444c38a9c75eaaa5e256c23cae', variant: "caption", class: "char-count-text" }, h("span", { key: '901a7db053e3fa59e6db506a53be92ddbf54be5d', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '83b08ec8e8ba8286cc8024b647552c5b3e0d09e5', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '28e0fc0de7a73057a7b00bd7e40e71c7611a980c', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: 'b0f41b53066d1c7b6fa4442796ec5122198575bf', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'acc961a28e30293d1031a8469327e3f70c179936', variant: "caption", class: "char-count-text" }, h("span", { key: '94e2d9e62a04beccd7abc4309a70f6a0908f4d34', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'caf33b69417c2a5d956b7a88ea3855212c7e3e19', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: 'f69c682178137ae9da47c05c15b81de48e06189a', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
     }
     static get is() { return "ic-text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-theme/ic-theme.js

@@ -65,7 +65,7 @@ export class Theme {
     }
     render() {
         const { themeClass } = this;
-        return (h(Host, { key: 'b49257f527c4a26eca25d04500d822785cba320b', class: themeClass }, h("slot", { key: '09782aca70372e6897e9032b66a166335778a6fe' })));
+        return (h(Host, { key: '512d47b99bd3f18979a2e5bf12dc1959c4135026', class: themeClass }, h("slot", { key: '16f87dc2ea22a43fa7208a9a4e37c5e37e779fc6' })));
     }
     static get is() { return "ic-theme"; }
     static get properties() {

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

@@ -202,13 +202,13 @@ export class Toast {
     }
     render() {
         const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
-        return (h(Host, { key: '77ff93e63eaa0ac86b8afc447c5f2190131dd758', class: { ["ic-toast-hidden"]: !visible }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '0fcc1bf6aaf4c42a8ba4828c82777f75426b63bd', class: "container" }, variant && visible && (h("div", { key: '87093bc655aa884d3e815f49a7ed5675e7e26b60', class: "toast-icon-container" }, h("div", { key: 'b169b9bad445f582c0d0019cb646f0648ea589a1', class: {
+        return (h(Host, { key: '72285c4f90a5364563549c3991a56ea15a7f09b0', class: { ["ic-toast-hidden"]: !visible }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '165ac4c4776633f826dfb4da11ec950ab5ee1d74', class: "container" }, variant && visible && (h("div", { key: '646d6326faeb131c256375eaa7a422862e603c87', class: "toast-icon-container" }, h("div", { key: '1a679a2ad07206ce49af54f099aab135db3dc863', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '22a0c86247222789d4590a8c2698120c74fe3c59', class: {
+            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: 'faec1abb053c98b482f2cbbc3b6cbb097bc7cfca', class: {
                 ["toast-content"]: true,
                 ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-            } }, h("div", { key: 'fba229f896689a7309d2e6e1d566e3e7dbd32932', class: "toast-text" }, h("ic-typography", { key: 'd672976872f8789ed4a51c4af23e64a48ba19bc8', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: 'f51c64d977c09cc5e6502b780dc70de84ebaa035', variant: "body", class: "toast-message" }, visible && h("p", { key: 'f827dbff18b4b0cfd713747f09d62e0040f8f1a3' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '3f5cee133b54735d6d7466ceb37389d27b61c7a0', class: "toast-action-container" }, h("slot", { key: 'b7882de8b13f069887ebd612ab6e260b063c65d1', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", "aria-label": dismissButtonAriaLabel })))));
+            } }, h("div", { key: '66a53a2d8f2433d55b353b8b19f487007baea78a', class: "toast-text" }, h("ic-typography", { key: 'af86eaaef197aff5faae041b32c3823ffcbb785b', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '9a04f32939a2739826207d6b3df6796eb0d424ac', variant: "body", class: "toast-message" }, visible && h("p", { key: '9ba710ed859c1dd9e8a6ed448207890faad5d706' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '68bf4d05f52322d6d056a583194e21b2dcadc2d1', class: "toast-action-container" }, h("slot", { key: '39524496fb13e55b7828f5c6d70172ffe80ebae8', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", "aria-label": dismissButtonAriaLabel })))));
     }
     static get is() { return "ic-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-toast-region/ic-toast-region.js

@@ -40,7 +40,7 @@ export class ToastRegion {
         }
     }
     render() {
-        return h("slot", { key: '9a80027a3b497771ca83af4172fdccc2bfcc10f0' });
+        return h("slot", { key: '304f72b97b4c6fe1ff998e46f6d2daf80dca9c18' });
     }
     static get is() { return "ic-toast-region"; }
     static get properties() {

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

@@ -137,7 +137,7 @@ export class ToggleButton {
     render() {
         const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, outline, size, theme, tooltipPlacement, variant, } = this;
         const iconVariant = variant === "icon";
-        return (h(Host, { key: 'f2118b4a93ef348f3df18806e1e8e50d6583aadb', class: {
+        return (h(Host, { key: 'f8fcf3d711713e186960027c00f605b09350eb1b', class: {
                 "ic-toggle-button-checked": checked,
                 "ic-toggle-button-disabled": disabled,
                 "ic-toggle-button-icon": iconVariant,
@@ -147,7 +147,7 @@ export class ToggleButton {
                 "ic-toggle-button-hide-outline": !outline,
                 [`ic-toggle-button-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleFocus }, h("ic-button", { key: 'ad1c3c331cb9d900a8c815aa3e1fce192111d7a3', "aria-pressed": `${checked}`, variant: iconVariant ? "icon" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: '4fa14905c645f54646c70aa054d2c7f47254c77d' }), isSlotUsed(this.el, "icon") && (h("slot", { key: 'ea79cad11be50ce8a6a35a6cf8e743237e349d2c', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'dc96229f6178198a47c7f597179e069208e49acb', name: "badge", slot: "badge" })))));
+            }, onFocus: this.handleFocus }, h("ic-button", { key: 'a0d0f8b473b1731359a735e7249c3b3467e7012d', "aria-pressed": `${checked}`, variant: iconVariant ? "icon" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'a8335c7d4dbd6af3dff53ad5b7f7e0e34440be72' }), isSlotUsed(this.el, "icon") && (h("slot", { key: 'c8e3337c6c4e2be224a3e15d107f67ece853c89f', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '1ae2a852eadc170c44fca19bf4993abd206cf4f3', name: "badge", slot: "badge" })))));
     }
     static get is() { return "ic-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -226,14 +226,14 @@ export class ToggleButtonGroup {
     }
     render() {
         const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
-        return (h(Host, { key: 'b76a2d77d20894bcbf3bd350945e8953c9c690ef', role: "group", "aria-label": accessibleLabel, tabindex: 0, class: {
+        return (h(Host, { key: 'bac81c86de7bedb193b11682ba0e845c6fb2e767', role: "group", "aria-label": accessibleLabel, tabindex: 0, class: {
                 "ic-toggle-button-group-disabled": disabled,
                 "ic-toggle-button-group-full-width": fullWidth,
                 "ic-toggle-button-group-loading": loading,
                 "ic-toggle-button-group-monochrome": monochrome,
                 "ic-toggle-button-group-hide-outline": !outline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus }, h("slot", { key: '755e5420c42800c0d436adf366afe611edd8e529' })));
+            }, onFocus: this.handleHostFocus }, h("slot", { key: '66dd0f8c1aff7be57ecc0abf5386cdc43f64eb80' })));
     }
     static get is() { return "ic-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -573,11 +573,8 @@ video {
   top: calc(-1 * var(--ic-space-1px));
 }
 
-:host(.on-dialog) .ic-tooltip-container {
-  transform: translate(
-    var(--tooltip-translate-x),
-    var(--tooltip-translate-y)
-  ) !important;
+:host(.ic-tooltip-on-dialog) {
+  display: inline-block;
 }
 
 @media screen and (max-width: 576px) {

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

@@ -4,11 +4,9 @@ import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class Tooltip {
     constructor() {
         this.delayedHideEvents = ["mouseleave"];
-        this.dialogOverflow = false;
         this.instantHideEvents = ["focusout"];
         this.mouseOverTool = false;
         this.persistTooltip = false;
-        this.onDialog = false;
         this.showEvents = [
             !this.disableHover && "mouseenter",
             !this.disableHover && "focusin",
@@ -35,76 +33,11 @@ export class Tooltip {
          */
         this.theme = "inherit";
         this.popperProps = {};
-        this.getTooltipTranslate = (dialogEl) => {
-            const child = this.el.children[0].getBoundingClientRect();
-            let tooltipX;
-            let tooltipY;
-            switch (this.placement) {
-                case "bottom":
-                    tooltipX = child.left - dialogEl.left - 0.5 * child.width;
-                    tooltipY = child.bottom - dialogEl.top;
-                    break;
-                case "bottom-start":
-                    tooltipX = child.left - dialogEl.left;
-                    tooltipY = child.bottom - dialogEl.top;
-                    break;
-                case "bottom-end":
-                    tooltipX = child.right - dialogEl.right;
-                    tooltipY = child.bottom - dialogEl.top;
-                    break;
-                case "top":
-                    tooltipX = child.left - dialogEl.left - 0.5 * child.width;
-                    tooltipY = child.top - dialogEl.bottom;
-                    break;
-                case "top-start":
-                    tooltipX = child.left - dialogEl.left;
-                    tooltipY = child.top - dialogEl.bottom;
-                    break;
-                case "top-end":
-                    tooltipX = child.right - dialogEl.right;
-                    tooltipY = child.top - dialogEl.bottom;
-                    break;
-                case "left":
-                case "left-start":
-                    tooltipX = child.right - dialogEl.right - child.width;
-                    tooltipY = child.bottom - dialogEl.top - child.height;
-                    break;
-                case "left-end":
-                    tooltipX = child.right - dialogEl.right - child.width;
-                    tooltipY = child.top - dialogEl.bottom + child.height;
-                    break;
-                case "right":
-                case "right-start":
-                    tooltipX = child.left - dialogEl.left + child.width;
-                    tooltipY = child.bottom - dialogEl.top - child.height;
-                    break;
-                case "right-end":
-                    tooltipX = child.left - dialogEl.left + child.width;
-                    tooltipY = child.top - dialogEl.bottom + child.height;
-                    break;
-            }
-            if (this.dialogOverflow && tooltipX && tooltipX < 0) {
-                if (this.placement.includes("top") ||
-                    this.placement.includes("bottom")) {
-                    this.toolTip.style.setProperty("--tooltip-arrow-translate", `${tooltipX}px`);
-                    tooltipX = child.left - dialogEl.left;
-                }
-                if (this.placement.includes("left")) {
-                    this.placement = "right";
-                    tooltipX = child.left - dialogEl.left + child.width;
-                }
-            }
-            this.toolTip.style.setProperty("--tooltip-translate-x", `${tooltipX}px`);
-            this.toolTip.style.setProperty("--tooltip-translate-y", `${tooltipY}px`);
-        };
         this.show = () => {
-            var _a, _b, _c;
             if (this.label) {
                 this.toolTip.setAttribute("data-show", "");
-                if (this.onDialog) {
-                    this.el.classList.add("on-dialog");
-                    const dialogEl = (_c = (_b = (_a = this.icDialogEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("dialog")) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-                    dialogEl && this.getTooltipTranslate(dialogEl);
+                if (this.dialogContentArea) {
+                    this.el.classList.add("ic-tooltip-on-dialog");
                 }
                 this.popperInstance = createPopper(this.el, this.toolTip, Object.assign({ placement: this.placement, modifiers: [
                         {
@@ -123,6 +56,23 @@ export class Tooltip {
                             name: "eventListeners",
                             options: { scroll: false, resize: false },
                         },
+                        ...(this.dialogContentArea
+                            ? [
+                                {
+                                    name: "preventOverflow",
+                                    options: {
+                                        boundary: this.dialogContentArea,
+                                        padding: 8,
+                                    },
+                                },
+                                {
+                                    name: "flip",
+                                    options: {
+                                        boundary: this.dialogContentArea,
+                                    },
+                                },
+                            ]
+                            : []),
                     ] }, this.popperProps));
             }
             else {
@@ -220,12 +170,17 @@ export class Tooltip {
         }
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b;
         this.manageEventListeners("add");
-        this.icDialogEl = this.el.closest("ic-dialog");
-        this.dialogOverflow =
-            ((_a = this.icDialogEl) === null || _a === void 0 ? void 0 : _a.getAttribute("data-overflow")) === "true";
-        this.onDialog = this.icDialogEl !== null;
+        let dialog;
+        if (this.el.getRootNode().host) {
+            dialog = this.el.getRootNode().host.closest("ic-dialog");
+        }
+        else {
+            dialog = this.el.closest("ic-dialog");
+        }
+        this.dialogContentArea =
+            (_b = (_a = dialog === null || dialog === void 0 ? void 0 : dialog.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".content-area")) !== null && _b !== void 0 ? _b : null;
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tooltip");
     }
     componentDidRender() {
@@ -252,10 +207,10 @@ export class Tooltip {
     }
     render() {
         const { label, maxLines, silent, theme } = this;
-        return (h(Host, { key: 'b74dcdc9aef3ccb3442da3e59dbc4eedd67b7c34', class: {
+        return (h(Host, { key: '45c8808ecc7904b44e269ec6ae844da6f75710f0', class: {
                 "ic-tooltip": true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '125643a0b41e40399b337e82b3745d59a630c723', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: '5db777ac8f6a7c414c0f46004827ff54efd5c011', maxLines: maxLines, variant: "caption" }, label), h("div", { key: 'd1d160835da2227e0b15fca3ae66ccdaf77b60fb', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: '5726e244c1e16e66e36dfd7e4fcc73c12d742b02' })));
+            } }, h("div", { key: 'a03ff6ebeb4d0476077838329f7f00cd29c1004d', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: '92b33499dae505e7e09bc92a8c91f1097de03b7b', maxLines: maxLines, variant: "caption" }, label), h("div", { key: '37523617a917645fe37edb4e6d6e250ffc4d7b67', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: '44217d6c93aa8dab3250ebfde59f17bc51596576' })));
     }
     static get is() { return "ic-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -332,7 +287,7 @@ export class Tooltip {
             },
             "placement": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "IcTooltipPlacements",
                     "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | undefined",

package/dist/collection/components/ic-tooltip/ic-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Method,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport { Instance, Options, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement | null;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  @Watch(\"disableClick\")\n  watchDisableClickHandler(): void {\n    if (this.disableClick) {\n      this.hide();\n    }\n    this.updateTooltipEvents();\n  }\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  @Watch(\"disableHover\")\n  watchDisableHoverHandler(): void {\n    if (this.disableHover) {\n      this.hide();\n    }\n    this.updateTooltipEvents();\n  }\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * Sets the tooltip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n  @Watch(\"label\")\n  watchLabelHandler(): void {\n    if (this.toolTip?.hasAttribute(\"data-show\") && this.popperInstance) {\n      this.popperInstance.update();\n    }\n  }\n\n  @State() popperProps: Partial<Options> = {};\n\n  /**\n   * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip\n   * @param props object - createPopper props set externally\n   */\n  @Method()\n  async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n    this.popperProps = props;\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot?.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines &&\n      this.maxLines > 0 &&\n      typographyEl?.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = !!persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  /**\n   * @internal Method to return if tooltip is currently visible.\n   */\n  @Method()\n  async isTooltipVisible(): Promise<boolean> {\n    return Promise.resolve(this.toolTip.hasAttribute(\"data-show\"));\n  }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX && tooltipX < 0) {\n      if (\n        this.placement!.includes(\"top\") ||\n        this.placement!.includes(\"bottom\")\n      ) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement!.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  private show = () => {\n    if (this.label) {\n      this.toolTip.setAttribute(\"data-show\", \"\");\n\n      if (this.onDialog) {\n        this.el.classList.add(\"on-dialog\");\n        const dialogEl = this.icDialogEl?.shadowRoot\n          ?.querySelector(\"dialog\")\n          ?.getBoundingClientRect();\n\n        dialogEl && this.getTooltipTranslate(dialogEl);\n      }\n\n      this.popperInstance = createPopper(this.el, this.toolTip, {\n        placement: this.placement,\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 10],\n            },\n          },\n          {\n            name: \"arrow\",\n            options: {\n              element: this.arrow,\n            },\n          },\n          {\n            name: \"eventListeners\",\n            options: { scroll: false, resize: false },\n          },\n        ],\n        ...this.popperProps,\n      });\n    } else {\n      console.warn(`Tooltip can't display without prop 'label' set`);\n    }\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      if (event) {\n        this.el[method](event, this.show);\n        if (this.toolTip !== undefined) {\n          this.toolTip[method](event, this.mouseEnterTooltip);\n        }\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown as EventListener);\n  };\n\n  private updateTooltipEvents = () => {\n    this.manageEventListeners(\"remove\");\n    this.showEvents = [\n      !this.disableHover && \"mouseenter\",\n      !this.disableHover && \"focusin\",\n      !this.disableClick && \"click\",\n    ];\n    this.manageEventListeners(\"add\");\n  };\n\n  render() {\n    const { label, maxLines, silent, theme } = this;\n    return (\n      <Host\n        class={{\n          \"ic-tooltip\": true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={`${silent}`}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Method,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport { Instance, Options, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogContentArea: HTMLDivElement | null;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  @Watch(\"disableClick\")\n  watchDisableClickHandler(): void {\n    if (this.disableClick) {\n      this.hide();\n    }\n    this.updateTooltipEvents();\n  }\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  @Watch(\"disableHover\")\n  watchDisableHoverHandler(): void {\n    if (this.disableHover) {\n      this.hide();\n    }\n    this.updateTooltipEvents();\n  }\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * Sets the tooltip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n  @Watch(\"label\")\n  watchLabelHandler(): void {\n    if (this.toolTip?.hasAttribute(\"data-show\") && this.popperInstance) {\n      this.popperInstance.update();\n    }\n  }\n\n  @State() popperProps: Partial<Options> = {};\n\n  /**\n   * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip\n   * @param props object - createPopper props set externally\n   */\n  @Method()\n  async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n    this.popperProps = props;\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    let dialog: HTMLIcDialogElement | null;\n    if ((this.el.getRootNode() as ShadowRoot).host) {\n      dialog = (this.el.getRootNode() as ShadowRoot).host.closest(\"ic-dialog\");\n    } else {\n      dialog = this.el.closest(\"ic-dialog\");\n    }\n    this.dialogContentArea =\n      dialog?.shadowRoot?.querySelector(\".content-area\") ?? null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot?.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines &&\n      this.maxLines > 0 &&\n      typographyEl?.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = !!persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  /**\n   * @internal Method to return if tooltip is currently visible.\n   */\n  @Method()\n  async isTooltipVisible(): Promise<boolean> {\n    return Promise.resolve(this.toolTip.hasAttribute(\"data-show\"));\n  }\n\n  private show = () => {\n    if (this.label) {\n      this.toolTip.setAttribute(\"data-show\", \"\");\n\n      if (this.dialogContentArea) {\n        this.el.classList.add(\"ic-tooltip-on-dialog\");\n      }\n\n      this.popperInstance = createPopper(this.el, this.toolTip, {\n        placement: this.placement,\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 10],\n            },\n          },\n          {\n            name: \"arrow\",\n            options: {\n              element: this.arrow,\n            },\n          },\n          {\n            name: \"eventListeners\",\n            options: { scroll: false, resize: false },\n          },\n          ...(this.dialogContentArea\n            ? [\n                {\n                  name: \"preventOverflow\",\n                  options: {\n                    boundary: this.dialogContentArea,\n                    padding: 8,\n                  },\n                },\n                {\n                  name: \"flip\",\n                  options: {\n                    boundary: this.dialogContentArea,\n                  },\n                },\n              ]\n            : []),\n        ],\n        ...this.popperProps,\n      });\n    } else {\n      console.warn(`Tooltip can't display without prop 'label' set`);\n    }\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      if (event) {\n        this.el[method](event, this.show);\n        if (this.toolTip !== undefined) {\n          this.toolTip[method](event, this.mouseEnterTooltip);\n        }\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown as EventListener);\n  };\n\n  private updateTooltipEvents = () => {\n    this.manageEventListeners(\"remove\");\n    this.showEvents = [\n      !this.disableHover && \"mouseenter\",\n      !this.disableHover && \"focusin\",\n      !this.disableClick && \"click\",\n    ];\n    this.manageEventListeners(\"add\");\n  };\n\n  render() {\n    const { label, maxLines, silent, theme } = this;\n    return (\n      <Host\n        class={{\n          \"ic-tooltip\": true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={`${silent}`}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-top-navigation/ic-top-navigation.js

@@ -211,16 +211,16 @@ export class TopNavigation {
         const attrs = Component == "a" && {
             href: href,
         };
-        return (h(Host, { key: '04ae428a97e2c58967096b74d112eaff245f8dff', class: {
+        return (h(Host, { key: 'b0d2e6aebeb66ddb4ca659cfba83e2cdbd6ec3f4', class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
                 [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '567b43f0ff4239ec947520f1b3cfdca5f248a273', class: "top-navigation" }, h("ic-section-container", { key: 'de93c750d52edcafbf52b45f35adeb6547a68b7b', aligned: contentAligned, "full-height": true }, h("header", { key: '70f3227f015418d9fa82e64786a0b6c9543b3bee', role: "banner" }, h("div", { key: 'cd42a8c33f9baef9566f2fea19d3e9462f4e067a', class: "top-panel-container" }, h("div", { key: '192dbc95a46ffb8d06a7f55258e791a149003bd4', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: '434d3d4de2d251752145200352425032692fc1cd', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: '6f3d2089eb16b717946baa082706beb46f04657d', class: "app-icon-container" }, h("slot", { key: '0daa4b46d9e2d72aa1c68e62279e5a3389ec3ab2', name: "app-icon" }))), isSmallDeviceSize &&
+            } }, h("div", { key: '4a4576c41289fc356d5cfd4e0414901bd8d21a88', class: "top-navigation" }, h("ic-section-container", { key: 'ec7aa4c1ce015f80c3850c2eba3b1e6b6d00c475', aligned: contentAligned, "full-height": true }, h("header", { key: 'b388f01d5e3084e0530dcc5b460d773b8f51d1f2', role: "banner" }, h("div", { key: 'a733f85700e1abccdf8aeceb97198359c53f9960', class: "top-panel-container" }, h("div", { key: '948679467aee550281cdec8c5e43c6d5b4e7fd29', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: '4054a371178c53cf2794e7a9a653575b95a9354c', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: '11616acef1f4ff274320f24da803eab7cc52fa1d', class: "app-icon-container" }, h("slot", { key: 'b36a9b7f67c72851dd11fd8f356a6735f4676814', name: "app-icon" }))), isSmallDeviceSize &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '83a440ebcedf586a87690b57ea9ecfce1495ceb7', class: "app-status" }, h("ic-typography", { key: '0889ee69e31b3665821b286915a43e253fd66c1a', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: '542d3f22383d5bac8eda47fcd47ef694f054929b', class: "app-version" }, h("ic-typography", { key: '0ed2b7209b4f03da9d462ac1406d3530696b702c', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: 'dbc3439b52e9d9257fc1c98ad50e25e92140ceca', class: "search-menu-container" }, h("div", { key: '3f5b5d05659459daab6d0bcbd69dd0ac70eae0f8', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: 'b3f55a4e18ef3c55503b56447d5fbeb19e569a4f', class: "search-bar-container" }, h("slot", { key: '99ebca2aa04bf76d949384c517dc2012312dbd92', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '6113dfcd92cf06c1f9a533ec6c2f0af3d26abca7', class: "navigation-tabs" }, h("span", { key: 'fa638d34955dccbdb7a8f149e0a8e083e3df0f72', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: 'fc6e24c76b720a463e81dbbe00c91a065bb260ea', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: 'da133fd91d91ff172067fc9aad86651a4c3a2f95', monochrome: true, appearance: foregroundColor }, h("ul", { key: 'f48330caa3937f35f2f65a3fbad830bda2b5c342', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: '74eb909d405109d5387f42e00a633e8ed09ff6f6', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: 'c77d988d1af3ac37eebb5d598b5f649f1d47c899', version: version, status: status, class: {
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '42f5c01069f02f82abd34b4a540050154bdafec5', class: "app-status" }, h("ic-typography", { key: '6052ad2c828b533ec121ee45d71c0afcdaae0622', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: '173b8c98351d425e843aae093902b91feaa7fd05', class: "app-version" }, h("ic-typography", { key: 'f46ecb51ac2c1f2c01beabf4590ac76681d94733', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '8f85b0505a04f7a3affb88ceaa81fe9eccd72ea1', class: "search-menu-container" }, h("div", { key: 'ff332cfc554fef6856becd5fb87b9f315565bc1e', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: 'ef7c477979320e20293484f6594eb89a38973540', class: "search-bar-container" }, h("slot", { key: 'b19e53fc019ff1d16c0da99d7d38bc6428dd7cc8', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: 'bdd8f9b982328135f06fc010828bbf0dc803a788', class: "navigation-tabs" }, h("span", { key: 'e231e5a002a04ff6275aa2d6a39c66d83787367a', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: '201327e158e97d601a8fb93b8174af6091bd0295', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: 'df8f402d0da993079b7378292cba17e85259c53c', monochrome: true, appearance: foregroundColor }, h("ul", { key: '22aa05880499690dcd43572705234bdb6fd386b0', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: 'effb669cef379880d7b45ca4e74ef096c10a1afb', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: 'a0a45fb9db2ea99414cdc2570f6c9697a96f01ad', version: version, status: status, class: {
                 inline,
-            } }, hasIconButtons && (h("div", { key: '77d9283a5fdffa724e13f667e9d09ae72f72329e', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '020b485ca53e55926b072738ab7dcb465f1efce5', name: "buttons" }))), h("ul", { key: '16101ca81c95d2de0d55c7a051ccffd5a987f5f8', slot: "navigation" }, h("slot", { key: '02bde8c67591e4c2c15d005252f1f7ae87cff61a', name: "navigation" }))))));
+            } }, hasIconButtons && (h("div", { key: '8c74bfd6c807022ccb315bd4718fa8a521fb08ae', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '1720467597b353122e907f7c83e1f9e0ef62c9ad', name: "buttons" }))), h("ul", { key: 'ccdc85df3febad2d603caeccafbd675be4d3d9a2', slot: "navigation" }, h("slot", { key: '1f465185f8937c81b279e8823127e0e8bc7d6841', name: "navigation" }))))));
     }
     static get is() { return "ic-top-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-typography/ic-typography.js

@@ -163,7 +163,7 @@ export class Typography {
     render() {
         var _a, _b;
         const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, theme, } = this;
-        return (h(Host, { key: 'f3ae0024474b949d4cd79a2d626524a08f0a83f9', class: {
+        return (h(Host, { key: '0f64ad9e02b32790b2bc269df212468b2f9426f7', class: {
                 [`ic-typography-${variant}`]: true,
                 [`ic-typography-vertical-margins-${variant}`]: !!applyVerticalMargins,
                 ["ic-typography-bold"]: !!bold,
@@ -176,7 +176,7 @@ export class Typography {
             ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
                 "IC-TOOLTIP") &&
             maxLines &&
-            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines && maxLines > 0 && truncated && (h("button", { key: 'ab55fb9e3b5d0ed50a99d8f194fe0e9436de1613', class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded }, expanded ? "See less" : "See more"))));
+            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines && maxLines > 0 && truncated && (h("button", { key: '3e5f7e8b549122986d1dc67fe35b5e270233eb71', class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded }, expanded ? "See less" : "See more"))));
     }
     static get is() { return "ic-typography"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ic-action-chip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcActionChip extends Components.IcActionChip, HTMLElement {}
+export const IcActionChip: {
+    prototype: IcActionChip;
+    new (): IcActionChip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;