@ukic/web-components 3.7.0 → 3.8.0

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

@@ -379,14 +379,14 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
         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,
@@ -394,19 +394,19 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
                 "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."))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-theme.js

@@ -68,7 +68,7 @@ const Theme = /*@__PURE__*/ proxyCustomElement(class Theme extends HTMLElement {
     }
     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 watchers() { return {
         "brandColor": ["watchBrandColorPropHandler"],

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

@@ -43,7 +43,7 @@ const ToastRegion = /*@__PURE__*/ proxyCustomElement(class ToastRegion extends H
         }
     }
     render() {
-        return h("slot", { key: '9a80027a3b497771ca83af4172fdccc2bfcc10f0' });
+        return h("slot", { key: '304f72b97b4c6fe1ff998e46f6d2daf80dca9c18' });
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toast.js

@@ -209,13 +209,13 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     }
     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 })))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -232,14 +232,14 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
     }
     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' })));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -145,7 +145,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
     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,
@@ -155,7 +155,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 "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 delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-tooltip2.js

@@ -1793,7 +1793,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const icTooltipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tooltip){width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;--ic-tooltip-background:var(--ic-color-background-primary-dark);--ic-tooltip-text:var(--ic-color-text-primary-dark);--ic-tooltip-border:var(--ic-color-border-neutral-grey-light)}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-tooltip-background);text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-tooltip-border);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay);width:-moz-max-content;width:max-content}:host(.ic-tooltip) ic-typography{--ic-typography-color:var(--ic-tooltip-text)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-tooltip-border);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.on-dialog) .ic-tooltip-container{transform:translate(\n    var(--tooltip-translate-x),\n    var(--tooltip-translate-y)\n  ) !important}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-border-hc)}}";
+const icTooltipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tooltip){width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;--ic-tooltip-background:var(--ic-color-background-primary-dark);--ic-tooltip-text:var(--ic-color-text-primary-dark);--ic-tooltip-border:var(--ic-color-border-neutral-grey-light)}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-tooltip-background);text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-tooltip-border);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay);width:-moz-max-content;width:max-content}:host(.ic-tooltip) ic-typography{--ic-typography-color:var(--ic-tooltip-text)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-tooltip-border);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip-on-dialog){display:inline-block}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-border-hc)}}";
 const IcTooltipStyle0 = icTooltipCss;
 
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement$1 {
@@ -1802,11 +1802,9 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         this.__registerHost();
         this.__attachShadow();
         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",
@@ -1833,76 +1831,11 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
          */
         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: [
                         {
@@ -1921,6 +1854,23 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
                             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 {
@@ -2018,12 +1968,17 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         }
     }
     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() {
@@ -2050,10 +2005,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     }
     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' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -2066,7 +2021,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         "disableClick": [4, "disable-click"],
         "disableHover": [4, "disable-hover"],
         "maxLines": [2, "max-lines"],
-        "placement": [1025],
+        "placement": [1],
         "silent": [4],
         "target": [513],
         "theme": [1],