@ukic/canary-web-components 2.0.0-canary.21 → 2.0.0-canary.22

package/hydrate/index.js

@@ -7692,10 +7692,10 @@ const debounceEvent = (event, wait) => {
     const original = event._original || event;
     return {
         _original: event,
-        emit: debounce$2(original.emit.bind(original), wait),
+        emit: debounce$3(original.emit.bind(original), wait),
     };
 };
-const debounce$2 = (func, wait = 0) => {
+const debounce$3 = (func, wait = 0) => {
     let timer;
     return (...args) => {
         clearTimeout(timer);
@@ -7844,7 +7844,7 @@ const handleHiddenFormButtonClick = (form, button) => {
 };
 const isEmptyString$1 = (value) => value ? value.trim().length === 0 : true;
 // A helper function that checks if a prop has been defined
-const isPropDefined = (prop) => prop !== undefined ? prop : null;
+const isPropDefined$1 = (prop) => prop !== undefined ? prop : null;
 /**
  * Extracts the label using the value from an object. Requires the object to have a label and value property.
  * @param value - value from object
@@ -8052,7 +8052,7 @@ const removeFormResetListener$1 = (el, callbackFn) => {
     var _a;
     (_a = el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", callbackFn);
 };
-const pxToRem = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
+const pxToRem$1 = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
 const removeDisabledFalse$1 = (disabled, element) => {
     if (!disabled) {
         element.removeAttribute("disabled");
@@ -8073,6 +8073,7 @@ const checkSlotInChildMutations$1 = (addedNodes, removedNodes, slotName) => {
         : node.slot === slotName);
     return hasSlot(addedNodes) || hasSlot(removedNodes);
 };
+const isElInAGGrid = (el) => !!el.closest(".ag-cell") && !!el.closest(".ag-root");
 
 var chevronIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
@@ -8659,7 +8660,7 @@ class Badge {
                 }
             }
         };
-        this.isAccessibleLabelDefined = () => isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
+        this.isAccessibleLabelDefined = () => isPropDefined$1(this.accessibleLabel) && this.accessibleLabel !== null;
         this.accessibleLabel = undefined;
         this.customColor = null;
         this.maxNumber = undefined;
@@ -8763,7 +8764,7 @@ class Breadcrumb {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.renderDefaultBreadcrumb = (current, pageTitle, describedById, href) => {
-            const hasPageTitle = pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== "";
+            const hasPageTitle = pageTitle !== null && isPropDefined$1(pageTitle) && pageTitle !== "";
             if (current && hasPageTitle) {
                 return (hAsync("span", { class: {
                         "current-page-container": current,
@@ -8805,8 +8806,8 @@ class Breadcrumb {
     render() {
         const { current, href, pageTitle } = this;
         const describedById = `${pageTitle && pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
-        const hasPageTitle = pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== "";
-        const hasHref = href !== null && isPropDefined(href) && href !== "";
+        const hasPageTitle = pageTitle !== null && isPropDefined$1(pageTitle) && pageTitle !== "";
+        const hasHref = href !== null && isPropDefined$1(href) && href !== "";
         return (hAsync(Host, { class: {
                 back: this.showBackIcon,
             }, "aria-current": current && "page", role: "listitem" }, hAsync("div", { class: "breadcrumb" }, hAsync("span", { innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), this.showBackIcon && describedById && (hAsync("span", { id: describedById, class: "hide" }, `Back to ${pageTitle}`)), hasPageTitle && hasHref ? (this.renderDefaultBreadcrumb(current, pageTitle, describedById, href)) : (hAsync("slot", null)))));
@@ -9045,7 +9046,7 @@ class BreadcrumbGroup {
     }; }
 }
 
-var arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+var arrowDropdown$1 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
 </svg>`;
 
@@ -9328,7 +9329,7 @@ class Button {
                 this.variant !== "destructive" && (hAsync("span", { class: {
                     ["arrow-dropdown"]: !this.dropdownExpanded,
                     ["dropdown-expanded"]: this.dropdownExpanded,
-                }, innerHTML: arrowDropdown }))));
+                }, innerHTML: arrowDropdown$1 }))));
         };
         return (hAsync(Host, { class: {
                 ["disabled"]: this.disabled && !this.loading,
@@ -9707,6 +9708,13 @@ const inheritAttributes = (element, attributes = []) => {
     });
     return attributeObject;
 };
+const debounce$2 = (func, wait = 0) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
+};
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -9776,6 +9784,8 @@ const getThemeFromContext = (el, themeFromEvent = null) => {
     return IcThemeForegroundEnum.Default;
 };
 const isEmptyString = (value) => value ? value.trim().length === 0 : true;
+// A helper function that checks if a prop has been defined
+const isPropDefined = (prop) => prop !== undefined ? prop : null;
 const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
 const getSlot = (element, name) => {
     if (element && element.querySelector) {
@@ -9883,6 +9893,7 @@ const getOptionsWithoutGroupTitlesCount = (options) => {
     }
     return optionsWithoutGroupTitles.length;
 };
+const pxToRem = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
 const isNumeric = (value) => {
     return /^-?\d+$/.test(value);
 };
@@ -10186,7 +10197,7 @@ class Checkbox {
     }
     render() {
         const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, formaction, formenctype, formmethod, formnovalidate, formtarget, displayIndeterminate, groupLabel, label, name, size, small, value, } = this;
-        const id = `ic-checkbox-${isPropDefined(label) || value}-${groupLabel}`.replace(/ /g, "-");
+        const id = `ic-checkbox-${isPropDefined$1(label) || value}-${groupLabel}`.replace(/ /g, "-");
         const parentElementSize = el.parentElement
             .size;
         checked
@@ -10340,7 +10351,7 @@ var dismissIcon = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org
 </svg>
 `;
 
-const icChipCss = "/*!@html*/html.sc-ic-chip{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-chip{margin:0}/*!@main*/main.sc-ic-chip{display:block}/*!@h1*/h1.sc-ic-chip{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-chip{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-chip{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-chip{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-chip{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-chip,strong.sc-ic-chip{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-chip,kbd.sc-ic-chip,samp.sc-ic-chip{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-chip{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-chip,sup.sc-ic-chip{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-chip{bottom:-0.25em}/*!@sup*/sup.sc-ic-chip{top:-0.5em}/*!@img*/img.sc-ic-chip{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-chip,input.sc-ic-chip,optgroup.sc-ic-chip,select.sc-ic-chip,textarea.sc-ic-chip{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-chip,input.sc-ic-chip{overflow:visible}/*!@button,\nselect*/button.sc-ic-chip,select.sc-ic-chip{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-chip,[type=\"button\"].sc-ic-chip,[type=\"reset\"].sc-ic-chip,[type=\"submit\"].sc-ic-chip{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-chip::-moz-focus-inner,[type=\"button\"].sc-ic-chip::-moz-focus-inner,[type=\"reset\"].sc-ic-chip::-moz-focus-inner,[type=\"submit\"].sc-ic-chip::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-chip:-moz-focusring,[type=\"button\"].sc-ic-chip:-moz-focusring,[type=\"reset\"].sc-ic-chip:-moz-focusring,[type=\"submit\"].sc-ic-chip:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-chip{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-chip{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-chip{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-chip{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-chip,[type=\"radio\"].sc-ic-chip{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-chip::-webkit-inner-spin-button,[type=\"number\"].sc-ic-chip::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-chip{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-chip::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-chip::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-chip{display:block}/*!@summary*/summary.sc-ic-chip{display:list-item}/*!@template*/template.sc-ic-chip{display:none}/*!@[hidden]*/[hidden].sc-ic-chip{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-chip,body.sc-ic-chip,div.sc-ic-chip,span.sc-ic-chip,applet.sc-ic-chip,object.sc-ic-chip,iframe.sc-ic-chip,h1.sc-ic-chip,h2.sc-ic-chip,h3.sc-ic-chip,h4.sc-ic-chip,h5.sc-ic-chip,h6.sc-ic-chip,p.sc-ic-chip,blockquote.sc-ic-chip,pre.sc-ic-chip,a.sc-ic-chip,abbr.sc-ic-chip,acronym.sc-ic-chip,address.sc-ic-chip,big.sc-ic-chip,cite.sc-ic-chip,code.sc-ic-chip,del.sc-ic-chip,dfn.sc-ic-chip,em.sc-ic-chip,img.sc-ic-chip,ins.sc-ic-chip,kbd.sc-ic-chip,q.sc-ic-chip,s.sc-ic-chip,samp.sc-ic-chip,small.sc-ic-chip,strike.sc-ic-chip,strong.sc-ic-chip,sub.sc-ic-chip,sup.sc-ic-chip,tt.sc-ic-chip,var.sc-ic-chip,b.sc-ic-chip,u.sc-ic-chip,i.sc-ic-chip,center.sc-ic-chip,dl.sc-ic-chip,dt.sc-ic-chip,dd.sc-ic-chip,ol.sc-ic-chip,ul.sc-ic-chip,li.sc-ic-chip,fieldset.sc-ic-chip,form.sc-ic-chip,label.sc-ic-chip,legend.sc-ic-chip,table.sc-ic-chip,caption.sc-ic-chip,tbody.sc-ic-chip,tfoot.sc-ic-chip,thead.sc-ic-chip,tr.sc-ic-chip,th.sc-ic-chip,td.sc-ic-chip,article.sc-ic-chip,aside.sc-ic-chip,canvas.sc-ic-chip,details.sc-ic-chip,embed.sc-ic-chip,figure.sc-ic-chip,figcaption.sc-ic-chip,footer.sc-ic-chip,header.sc-ic-chip,hgroup.sc-ic-chip,menu.sc-ic-chip,nav.sc-ic-chip,output.sc-ic-chip,ruby.sc-ic-chip,section.sc-ic-chip,summary.sc-ic-chip,time.sc-ic-chip,mark.sc-ic-chip,audio.sc-ic-chip,video.sc-ic-chip{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-chip-h{display:inline-block}/*!@.chip*/.chip.sc-ic-chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}/*!@.chip.small*/.chip.small.sc-ic-chip{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}/*!@.chip.large*/.chip.large.sc-ic-chip{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}/*!@.label*/.label.sc-ic-chip{padding:0 var(--ic-space-xs)}/*!@.chip.hovered:not(:focus-within)*/.chip.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-architectural-300)}/*!@.chip:focus-within*/.chip.sc-ic-chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}/*!@.chip.outline.hovered:not(:focus-within),\n.chip.outlined.hovered:not(:focus-within)*/.chip.outline.hovered.sc-ic-chip:not(:focus-within),.chip.outlined.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}/*!@ic-tooltip:focus-within*/ic-tooltip.sc-ic-chip:focus-within{z-index:1}/*!@.filled*/.filled.sc-ic-chip{background-color:var(--chip-custom-color, var(--ic-architectural-200));color:var(--chip-custom-foreground-color, black);border:none}/*!@.filled.disabled*/.filled.disabled.sc-ic-chip{background-color:var(--ic-architectural-100)}/*!@.outline,\n.outlined*/.outline.sc-ic-chip,.outlined.sc-ic-chip{color:var(--ic-architectural-900);border:var(--ic-border-width) solid\n    var(--chip-custom-color, var(--ic-architectural-900));padding:calc(var(--ic-space-xxs) - var(--ic-space-1px))}/*!@.outline.small,\n.outlined.small*/.outline.small.sc-ic-chip,.outlined.small.sc-ic-chip{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}/*!@.outline.large,\n.outlined.large*/.outline.large.sc-ic-chip,.outlined.large.sc-ic-chip{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}/*!@.outline.disabled,\n.outlined.disabled*/.outline.disabled.sc-ic-chip,.outlined.disabled.sc-ic-chip{border:var(--ic-border-disabled);background:none}/*!@.chip.disabled ic-typography*/.chip.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:var(--ic-architectural-500)}/*!@.filled.disabled ic-typography*/.filled.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:var(--ic-architectural-600)}/*!@.dismiss-icon*/.dismiss-icon.sc-ic-chip{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}/*!@.dismiss-icon:focus*/.dismiss-icon.sc-ic-chip:focus{outline:var(--ic-hc-focus-outline)}/*!@.dismiss-icon[disabled]*/.dismiss-icon[disabled].sc-ic-chip{pointer-events:none;color:var(--ic-architectural-200)}/*!@.icon*/.icon.sc-ic-chip{padding:var(--ic-space-xxxs);box-sizing:border-box}/*!@.icon,\nic-tooltip*/.icon.sc-ic-chip,ic-tooltip.sc-ic-chip{width:var(--ic-space-lg);height:var(--ic-space-lg)}/*!@.chip.disabled path,\n.chip.disabled ::slotted(svg)*/.chip.disabled.sc-ic-chip path.sc-ic-chip,.chip.disabled.sc-ic-chip-s>svg,.chip.disabled .sc-ic-chip-s>svg{fill:var(--ic-architectural-200)}/*!@.chip.white-background*/.chip.white-background.sc-ic-chip{background-color:var(--ic-architectural-white)}/*!@.chip.white-background.hovered:not(:focus-within)*/.chip.white-background.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-action-dark-bg-hover-no-alpha) !important}@media (forced-colors: active){/*!@.chip*/.chip.sc-ic-chip{border:var(--ic-hc-border)}/*!@.filled.small*/.filled.small.sc-ic-chip{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}/*!@.filled*/.filled.sc-ic-chip{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}/*!@.filled.large*/.filled.large.sc-ic-chip{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}/*!@.chip.disabled*/.chip.disabled.sc-ic-chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}/*!@.chip.disabled ic-typography*/.chip.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:GrayText}/*!@.chip.disabled path,\n  .chip.disabled ::slotted(svg)*/.chip.disabled.sc-ic-chip path.sc-ic-chip,.chip.disabled.sc-ic-chip-s>svg,.chip.disabled .sc-ic-chip-s>svg{fill:GrayText}/*!@.chip:focus-within*/.chip.sc-ic-chip:focus-within{outline:none;border-color:Highlight}}";
+const icChipCss = "/*!@html*/html.sc-ic-chip{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-chip{margin:0}/*!@main*/main.sc-ic-chip{display:block}/*!@h1*/h1.sc-ic-chip{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-chip{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-chip{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-chip{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-chip{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-chip,strong.sc-ic-chip{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-chip,kbd.sc-ic-chip,samp.sc-ic-chip{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-chip{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-chip,sup.sc-ic-chip{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-chip{bottom:-0.25em}/*!@sup*/sup.sc-ic-chip{top:-0.5em}/*!@img*/img.sc-ic-chip{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-chip,input.sc-ic-chip,optgroup.sc-ic-chip,select.sc-ic-chip,textarea.sc-ic-chip{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-chip,input.sc-ic-chip{overflow:visible}/*!@button,\nselect*/button.sc-ic-chip,select.sc-ic-chip{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-chip,[type=\"button\"].sc-ic-chip,[type=\"reset\"].sc-ic-chip,[type=\"submit\"].sc-ic-chip{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-chip::-moz-focus-inner,[type=\"button\"].sc-ic-chip::-moz-focus-inner,[type=\"reset\"].sc-ic-chip::-moz-focus-inner,[type=\"submit\"].sc-ic-chip::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-chip:-moz-focusring,[type=\"button\"].sc-ic-chip:-moz-focusring,[type=\"reset\"].sc-ic-chip:-moz-focusring,[type=\"submit\"].sc-ic-chip:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-chip{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-chip{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-chip{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-chip{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-chip,[type=\"radio\"].sc-ic-chip{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-chip::-webkit-inner-spin-button,[type=\"number\"].sc-ic-chip::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-chip{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-chip::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-chip::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-chip{display:block}/*!@summary*/summary.sc-ic-chip{display:list-item}/*!@template*/template.sc-ic-chip{display:none}/*!@[hidden]*/[hidden].sc-ic-chip{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-chip,body.sc-ic-chip,div.sc-ic-chip,span.sc-ic-chip,applet.sc-ic-chip,object.sc-ic-chip,iframe.sc-ic-chip,h1.sc-ic-chip,h2.sc-ic-chip,h3.sc-ic-chip,h4.sc-ic-chip,h5.sc-ic-chip,h6.sc-ic-chip,p.sc-ic-chip,blockquote.sc-ic-chip,pre.sc-ic-chip,a.sc-ic-chip,abbr.sc-ic-chip,acronym.sc-ic-chip,address.sc-ic-chip,big.sc-ic-chip,cite.sc-ic-chip,code.sc-ic-chip,del.sc-ic-chip,dfn.sc-ic-chip,em.sc-ic-chip,img.sc-ic-chip,ins.sc-ic-chip,kbd.sc-ic-chip,q.sc-ic-chip,s.sc-ic-chip,samp.sc-ic-chip,small.sc-ic-chip,strike.sc-ic-chip,strong.sc-ic-chip,sub.sc-ic-chip,sup.sc-ic-chip,tt.sc-ic-chip,var.sc-ic-chip,b.sc-ic-chip,u.sc-ic-chip,i.sc-ic-chip,center.sc-ic-chip,dl.sc-ic-chip,dt.sc-ic-chip,dd.sc-ic-chip,ol.sc-ic-chip,ul.sc-ic-chip,li.sc-ic-chip,fieldset.sc-ic-chip,form.sc-ic-chip,label.sc-ic-chip,legend.sc-ic-chip,table.sc-ic-chip,caption.sc-ic-chip,tbody.sc-ic-chip,tfoot.sc-ic-chip,thead.sc-ic-chip,tr.sc-ic-chip,th.sc-ic-chip,td.sc-ic-chip,article.sc-ic-chip,aside.sc-ic-chip,canvas.sc-ic-chip,details.sc-ic-chip,embed.sc-ic-chip,figure.sc-ic-chip,figcaption.sc-ic-chip,footer.sc-ic-chip,header.sc-ic-chip,hgroup.sc-ic-chip,menu.sc-ic-chip,nav.sc-ic-chip,output.sc-ic-chip,ruby.sc-ic-chip,section.sc-ic-chip,summary.sc-ic-chip,time.sc-ic-chip,mark.sc-ic-chip,audio.sc-ic-chip,video.sc-ic-chip{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-chip-h{display:inline-block;max-width:100%}/*!@.chip*/.chip.sc-ic-chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}/*!@.chip.small*/.chip.small.sc-ic-chip{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}/*!@.chip.large*/.chip.large.sc-ic-chip{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}/*!@.label*/.label.sc-ic-chip{padding:0 var(--ic-space-xs)}/*!@.chip.hovered:not(:focus-within)*/.chip.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-architectural-300)}/*!@.chip:focus-within*/.chip.sc-ic-chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}/*!@.chip.outline.hovered:not(:focus-within),\n.chip.outlined.hovered:not(:focus-within)*/.chip.outline.hovered.sc-ic-chip:not(:focus-within),.chip.outlined.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}/*!@ic-tooltip:focus-within*/ic-tooltip.sc-ic-chip:focus-within{z-index:1}/*!@.filled*/.filled.sc-ic-chip{background-color:var(--chip-custom-color, var(--ic-architectural-200));color:var(--chip-custom-foreground-color, black);border:none}/*!@.filled.disabled*/.filled.disabled.sc-ic-chip{background-color:var(--ic-architectural-100)}/*!@.outline,\n.outlined*/.outline.sc-ic-chip,.outlined.sc-ic-chip{color:var(--ic-architectural-900);border:var(--ic-border-width) solid\n    var(--chip-custom-color, var(--ic-architectural-900));padding:calc(var(--ic-space-xxs) - var(--ic-space-1px))}/*!@.outline.small,\n.outlined.small*/.outline.small.sc-ic-chip,.outlined.small.sc-ic-chip{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}/*!@.outline.large,\n.outlined.large*/.outline.large.sc-ic-chip,.outlined.large.sc-ic-chip{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}/*!@.outline.disabled,\n.outlined.disabled*/.outline.disabled.sc-ic-chip,.outlined.disabled.sc-ic-chip{border:var(--ic-border-disabled);background:none}/*!@.chip.disabled ic-typography*/.chip.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:var(--ic-architectural-500)}/*!@.filled.disabled ic-typography*/.filled.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:var(--ic-architectural-600)}/*!@.dismiss-icon*/.dismiss-icon.sc-ic-chip{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}/*!@.dismiss-icon:focus*/.dismiss-icon.sc-ic-chip:focus{outline:var(--ic-hc-focus-outline)}/*!@.dismiss-icon[disabled]*/.dismiss-icon[disabled].sc-ic-chip{pointer-events:none;color:var(--ic-architectural-200)}/*!@.icon*/.icon.sc-ic-chip{padding:var(--ic-space-xxxs);box-sizing:border-box}/*!@.icon,\nic-tooltip*/.icon.sc-ic-chip,ic-tooltip.sc-ic-chip{width:var(--ic-space-lg);height:var(--ic-space-lg)}/*!@.chip.disabled path,\n.chip.disabled ::slotted(svg)*/.chip.disabled.sc-ic-chip path.sc-ic-chip,.chip.disabled.sc-ic-chip-s>svg,.chip.disabled .sc-ic-chip-s>svg{fill:var(--ic-architectural-200)}/*!@.chip.white-background*/.chip.white-background.sc-ic-chip{background-color:var(--ic-architectural-white)}/*!@.chip.white-background.hovered:not(:focus-within)*/.chip.white-background.hovered.sc-ic-chip:not(:focus-within){background-color:var(--ic-action-dark-bg-hover-no-alpha) !important}@media (forced-colors: active){/*!@.chip*/.chip.sc-ic-chip{border:var(--ic-hc-border)}/*!@.filled.small*/.filled.small.sc-ic-chip{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}/*!@.filled*/.filled.sc-ic-chip{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}/*!@.filled.large*/.filled.large.sc-ic-chip{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}/*!@.chip.disabled*/.chip.disabled.sc-ic-chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}/*!@.chip.disabled ic-typography*/.chip.disabled.sc-ic-chip ic-typography.sc-ic-chip{color:GrayText}/*!@.chip.disabled path,\n  .chip.disabled ::slotted(svg)*/.chip.disabled.sc-ic-chip path.sc-ic-chip,.chip.disabled.sc-ic-chip-s>svg,.chip.disabled .sc-ic-chip-s>svg{fill:GrayText}/*!@.chip:focus-within*/.chip.sc-ic-chip:focus-within{outline:none;border-color:Highlight}}";
 
 /**
  * @slot icon - Content will be rendered at the start of the chip.
@@ -10351,6 +10362,7 @@ class Chip {
         registerInstance(this, hostRef);
         this.dismiss = createEvent(this, "dismiss", 7);
         this.icDismiss = createEvent(this, "icDismiss", 7);
+        this.inAGGrid = false;
         this.dismissAction = () => {
             this.dismiss.emit();
             this.icDismiss.emit();
@@ -10394,6 +10406,11 @@ class Chip {
             this.variant = "outlined";
         }
     }
+    componentWillRender() {
+        if (isElInAGGrid(this.el)) {
+            this.inAGGrid = true;
+        }
+    }
     componentDidLoad() {
         onComponentRequiredPropUndefined$1([{ prop: this.label, propName: "label" }], "Chip");
     }
@@ -10418,7 +10435,7 @@ class Chip {
                 dismissible,
                 hovered,
                 "white-background": this.variant === "outlined" && !this.transparentBackground,
-            } }, isSlotUsed$1(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "label", "apply-vertical-margins": false, class: "label" }, hAsync("span", null, label)), dismissible && (hAsync("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, hAsync("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" }))));
+            } }, isSlotUsed$1(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, hAsync("span", null, label)), dismissible && (hAsync("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, hAsync("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -10638,18 +10655,8 @@ var descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24
     <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
 </svg>`;
 
-const icDataTableCss = "/*!@:host*/.sc-ic-data-table-h{position:relative;display:block;height:100%;max-height:100%}/*!@.table-container*/.table-container.sc-ic-data-table{position:relative;height:calc(100% - var(--ic-space-xxxs))}/*!@ic-loading-indicator*/ic-loading-indicator.sc-ic-data-table{position:sticky;top:20px}/*!@.table-row-container*/.table-row-container.sc-ic-data-table{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}/*!@:host([show-pagination=\"true\"]) .table-row-container*/[show-pagination=\"true\"].sc-ic-data-table-h .table-row-container.sc-ic-data-table{height:calc(100% - 3.5625rem)}/*!@table*/table.sc-ic-data-table{table-layout:fixed;border-spacing:0;width:100%}/*!@.table-row-container:focus*/.table-row-container.sc-ic-data-table:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}/*!@:host([embedded=\"true\"]) .table-row-container*/[embedded=\"true\"].sc-ic-data-table-h .table-row-container.sc-ic-data-table{border:var(--ic-border-light)}/*!@.column-header-sticky*/.column-header-sticky.sc-ic-data-table{position:sticky;top:0;z-index:1}/*!@.column-header-overlay*/.column-header-overlay.sc-ic-data-table{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}/*!@.row-header-sticky*/.row-header-sticky.sc-ic-data-table{position:sticky;left:0}/*!@.column-header,\n.table-row*/.column-header.sc-ic-data-table,.table-row.sc-ic-data-table{box-sizing:border-box}/*!@.table-row-selected*/.table-row-selected.sc-ic-data-table{background-color:var(--ic-table-row-selected) !important}/*!@.sort-button*/.sort-button.sc-ic-data-table{margin-left:auto}/*!@.sort-button:hover*/.sort-button.sc-ic-data-table:hover{background-color:var(--ic-action-dark-bg-hover)}/*!@.sort-button:active*/.sort-button.sc-ic-data-table:active{background-color:var(--ic-action-dark-bg-active)}/*!@.sort-button svg*/.sort-button.sc-ic-data-table svg.sc-ic-data-table{color:var(--ic-architectural-black)}/*!@.sort-button-unsorted svg*/.sort-button-unsorted.sc-ic-data-table svg.sc-ic-data-table{color:var(--ic-color-tertiary-text)}/*!@.table-density-dense*/.table-density-dense.sc-ic-data-table{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}/*!@.text-dense*/.text-dense.sc-ic-data-table{font-size:var(--ic-font-size-label)}/*!@.table-density-spacious*/.table-density-spacious.sc-ic-data-table{padding:0.625rem var(--ic-space-xs) !important}/*!@.text-spacious*/.text-spacious.sc-ic-data-table{font-size:1.125rem}/*!@.column-header-text*/.column-header-text.sc-ic-data-table{font-weight:var(--ic-font-weight-bold)}/*!@.column-header,\n.row-header*/.column-header.sc-ic-data-table,.row-header.sc-ic-data-table{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}/*!@.column-header:last-child*/.column-header.sc-ic-data-table:last-child{border-right:none}/*!@.scrollable .column-header:last-child*/.scrollable.sc-ic-data-table .column-header.sc-ic-data-table:last-child{border-right:var(--ic-border-light) !important}/*!@:host([embedded=\"true\"]) tr:last-child .table-cell,\n:host([embedded=\"true\"]) tr:last-child .row-header*/[embedded=\"true\"].sc-ic-data-table-h tr.sc-ic-data-table:last-child .table-cell.sc-ic-data-table,[embedded=\"true\"].sc-ic-data-table-h tr.sc-ic-data-table:last-child .row-header.sc-ic-data-table{border-bottom:none}/*!@.column-header-alignment-left,\n.row-header-alignment-left,\n.cell-alignment-left*/.column-header-alignment-left.sc-ic-data-table,.row-header-alignment-left.sc-ic-data-table,.cell-alignment-left.sc-ic-data-table{text-align:left !important;justify-content:start !important}/*!@.column-header-alignment-right,\n.row-header-alignment-right,\n.cell-alignment-right*/.column-header-alignment-right.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table,.cell-alignment-right.sc-ic-data-table{text-align:right !important;justify-content:end !important}/*!@.column-header-alignment-center,\n.row-header-alignment-center,\n.cell-alignment-center*/.column-header-alignment-center.sc-ic-data-table,.row-header-alignment-center.sc-ic-data-table,.cell-alignment-center.sc-ic-data-table{text-align:center !important;justify-content:center !important}/*!@.table-row:nth-child(even)*/.table-row.sc-ic-data-table:nth-child(even){background-color:var(--ic-architectural-20)}/*!@.table-cell*/.table-cell.sc-ic-data-table{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px)}/*!@.data-type-string*/.data-type-string.sc-ic-data-table{text-align:left;vertical-align:top}/*!@.data-type-number,\n.data-type-date*/.data-type-number.sc-ic-data-table,.data-type-date.sc-ic-data-table{text-align:right;justify-content:end;vertical-align:top}/*!@.cell-alignment-top*/.cell-alignment-top.sc-ic-data-table{vertical-align:top}/*!@.cell-alignment-middle*/.cell-alignment-middle.sc-ic-data-table{vertical-align:middle}/*!@.cell-alignment-bottom*/.cell-alignment-bottom.sc-ic-data-table{vertical-align:bottom}/*!@.cell-emphasis-low*/.cell-emphasis-low.sc-ic-data-table{color:var(--ic-color-secondary-text)}/*!@.cell-emphasis-high*/.cell-emphasis-high.sc-ic-data-table{font-weight:var(--ic-font-weight-bold)}/*!@.pagination-container*/.pagination-container.sc-ic-data-table{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}/*!@.screen-reader-sort-text,\n.table-caption*/.screen-reader-sort-text.sc-ic-data-table,.table-caption.sc-ic-data-table{position:absolute;left:-100rem}/*!@.table-cell,\n.column-header,\n.row-header*/.table-cell.sc-ic-data-table,.column-header.sc-ic-data-table,.row-header.sc-ic-data-table{word-wrap:break-word;white-space:pre-wrap}/*!@.loading-empty*/.loading-empty.sc-ic-data-table{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}/*!@.updating-state*/.updating-state.sc-ic-data-table{padding:0;border-bottom:var(--ic-border-light)}/*!@.updating-state-headers*/.updating-state-headers.sc-ic-data-table{border-bottom:none}/*!@.loading*/.loading.sc-ic-data-table{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}/*!@.loading.show-background*/.loading.show-background.sc-ic-data-table{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}/*!@.loading.show*/.loading.show.sc-ic-data-table{opacity:1}/*!@.icon,\n::slotted(svg)*/.icon.sc-ic-data-table,.sc-ic-data-table-s>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}/*!@.column-header-alignment-right > .icon,\n.row-header-alignment-right > .icon,\n.cell-alignment-right > .icon,\n.column-header-alignment-right > ::slotted(svg),\n.row-header-alignment-right > ::slotted(svg),\n.cell-alignment-right > ::slotted(svg)*/.column-header-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.cell-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.column-header-alignment-right>.sc-ic-data-table-s>svg,.row-header-alignment-right>.sc-ic-data-table-s>svg,.cell-alignment-right>.sc-ic-data-table-s>svg{margin-right:auto}/*!@.column-header-alignment-center > ic-typography,\n.row-header-alignment-right > ic-typography,\n.cell-alignment-center > ic-typography*/.column-header-alignment-center.sc-ic-data-table>ic-typography.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table>ic-typography.sc-ic-data-table,.cell-alignment-center.sc-ic-data-table>ic-typography.sc-ic-data-table{flex:1}/*!@.icon > svg*/.icon.sc-ic-data-table>svg.sc-ic-data-table{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}@media screen and (min-width: 576px){/*!@.column-header-inner-container*/.column-header-inner-container.sc-ic-data-table{display:flex;align-items:center}/*!@.cell-container*/.cell-container.sc-ic-data-table{display:flex}}";
+const icDataTableCss = "/*!@:host*/.sc-ic-data-table-h{position:relative;display:block;height:100%;max-height:100%}/*!@tbody*/tbody.sc-ic-data-table{vertical-align:top}/*!@.table-container*/.table-container.sc-ic-data-table{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column}/*!@.cell-container*/.cell-container.sc-ic-data-table{display:flex;min-height:1.5rem;overflow-y:hidden}/*!@.truncation-show-hide*/.truncation-show-hide.sc-ic-data-table{overflow:visible;display:block}/*!@.cell-icon.truncation-show-hide*/.cell-icon.truncation-show-hide.sc-ic-data-table{display:flex}/*!@.cell-container:not(.data-type-element, .truncation-show-hide)*/.cell-container.sc-ic-data-table:not(.data-type-element,.truncation-show-hide).sc-ic-data-table{overflow-x:hidden}/*!@ic-loading-indicator*/ic-loading-indicator.sc-ic-data-table{position:sticky;top:20px}/*!@.table-row-container*/.table-row-container.sc-ic-data-table{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}/*!@:host([show-pagination=\"true\"]) .table-row-container*/[show-pagination=\"true\"].sc-ic-data-table-h .table-row-container.sc-ic-data-table{height:calc(100% - 3.5625rem)}/*!@table*/table.sc-ic-data-table{table-layout:fixed;border-spacing:0;width:100%}/*!@.table-row-container:focus*/.table-row-container.sc-ic-data-table:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}/*!@:host([embedded=\"true\"]) .table-row-container*/[embedded=\"true\"].sc-ic-data-table-h .table-row-container.sc-ic-data-table{border:var(--ic-border-light)}/*!@.column-header-sticky*/.column-header-sticky.sc-ic-data-table{position:sticky;top:0;z-index:1}/*!@.column-header-overlay*/.column-header-overlay.sc-ic-data-table{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}/*!@.row-header-sticky*/.row-header-sticky.sc-ic-data-table{position:sticky;left:0}/*!@.column-header,\n.table-row*/.column-header.sc-ic-data-table,.table-row.sc-ic-data-table{box-sizing:border-box}/*!@.table-row-selected*/.table-row-selected.sc-ic-data-table{background-color:var(--ic-table-row-selected) !important}/*!@.sort-button*/.sort-button.sc-ic-data-table{margin-left:auto}/*!@.sort-button:hover*/.sort-button.sc-ic-data-table:hover{background-color:var(--ic-action-dark-bg-hover)}/*!@.sort-button:active*/.sort-button.sc-ic-data-table:active{background-color:var(--ic-action-dark-bg-active)}/*!@.sort-button svg*/.sort-button.sc-ic-data-table svg.sc-ic-data-table{color:var(--ic-architectural-black)}/*!@.sort-button-unsorted svg*/.sort-button-unsorted.sc-ic-data-table svg.sc-ic-data-table{color:var(--ic-color-tertiary-text)}/*!@.table-density-dense*/.table-density-dense.sc-ic-data-table{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}/*!@.text-dense*/.text-dense.sc-ic-data-table{font-size:var(--ic-font-size-label)}/*!@.table-density-spacious*/.table-density-spacious.sc-ic-data-table{padding:0.625rem var(--ic-space-xs) !important}/*!@.text-spacious*/.text-spacious.sc-ic-data-table{font-size:1.125rem}/*!@.column-header-text*/.column-header-text.sc-ic-data-table{font-weight:var(--ic-font-weight-bold)}/*!@.column-header,\n.row-header*/.column-header.sc-ic-data-table,.row-header.sc-ic-data-table{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}/*!@.column-header:last-child*/.column-header.sc-ic-data-table:last-child{border-right:none}/*!@.scrollable .column-header:last-child*/.scrollable.sc-ic-data-table .column-header.sc-ic-data-table:last-child{border-right:var(--ic-border-light) !important}/*!@:host([embedded=\"true\"]) tr:last-child .table-cell,\n:host([embedded=\"true\"]) tr:last-child .row-header*/[embedded=\"true\"].sc-ic-data-table-h tr.sc-ic-data-table:last-child .table-cell.sc-ic-data-table,[embedded=\"true\"].sc-ic-data-table-h tr.sc-ic-data-table:last-child .row-header.sc-ic-data-table{border-bottom:none}/*!@.column-header-alignment-left,\n.row-header-alignment-left,\n.cell-alignment-left*/.column-header-alignment-left.sc-ic-data-table,.row-header-alignment-left.sc-ic-data-table,.cell-alignment-left.sc-ic-data-table{text-align:left !important;justify-content:start !important}/*!@.column-header-alignment-right,\n.row-header-alignment-right,\n.cell-alignment-right*/.column-header-alignment-right.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table,.cell-alignment-right.sc-ic-data-table{text-align:right !important;justify-content:end !important}/*!@.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography*/.cell-alignment-right.truncation-tooltip.sc-ic-data-table ic-tooltip.sc-ic-data-table ic-typography.sc-ic-data-table{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}/*!@.cell-alignment-right.truncation-show-hide ic-typography*/.cell-alignment-right.truncation-show-hide.sc-ic-data-table ic-typography.sc-ic-data-table{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}/*!@.column-header-alignment-center,\n.row-header-alignment-center,\n.cell-alignment-center*/.column-header-alignment-center.sc-ic-data-table,.row-header-alignment-center.sc-ic-data-table,.cell-alignment-center.sc-ic-data-table{text-align:center !important;justify-content:center !important}/*!@.table-row:nth-child(even)*/.table-row.sc-ic-data-table:nth-child(even){background-color:var(--ic-architectural-20)}/*!@.table-cell*/.table-cell.sc-ic-data-table{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px);overflow:hidden}/*!@.data-type-string,\n.data-type-address*/.data-type-string.sc-ic-data-table,.data-type-address.sc-ic-data-table{text-align:left;vertical-align:top}/*!@.data-type-number,\n.data-type-date*/.data-type-number.sc-ic-data-table,.data-type-date.sc-ic-data-table{text-align:right;justify-content:end;vertical-align:top}/*!@.cell-alignment-top*/.cell-alignment-top.sc-ic-data-table{vertical-align:top;align-items:flex-start}/*!@.cell-alignment-middle*/.cell-alignment-middle.sc-ic-data-table{vertical-align:middle;align-items:center}/*!@.cell-alignment-bottom*/.cell-alignment-bottom.sc-ic-data-table{vertical-align:bottom;align-items:flex-end}/*!@.cell-emphasis-low*/.cell-emphasis-low.sc-ic-data-table{color:var(--ic-color-secondary-text)}/*!@.cell-emphasis-high*/.cell-emphasis-high.sc-ic-data-table{font-weight:var(--ic-font-weight-bold)}/*!@.pagination-container*/.pagination-container.sc-ic-data-table{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}/*!@.screen-reader-sort-text,\n.table-caption*/.screen-reader-sort-text.sc-ic-data-table,.table-caption.sc-ic-data-table{position:absolute;left:-100rem}/*!@.table-cell,\n.column-header,\n.row-header*/.table-cell.sc-ic-data-table,.column-header.sc-ic-data-table,.row-header.sc-ic-data-table{word-wrap:break-word;white-space:pre-wrap}/*!@.loading-empty*/.loading-empty.sc-ic-data-table{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}/*!@.updating-state*/.updating-state.sc-ic-data-table{padding:0;border-bottom:var(--ic-border-light)}/*!@.updating-state-headers*/.updating-state-headers.sc-ic-data-table{border-bottom:none}/*!@.loading*/.loading.sc-ic-data-table{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}/*!@.loading.show-background*/.loading.show-background.sc-ic-data-table{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}/*!@.loading.show*/.loading.show.sc-ic-data-table{opacity:1}/*!@.icon,\n::slotted(svg)*/.icon.sc-ic-data-table,.sc-ic-data-table-s>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}/*!@.column-header-alignment-right > .icon,\n.row-header-alignment-right > .icon,\n.cell-alignment-right > .icon,\n.column-header-alignment-right > ::slotted(svg),\n.row-header-alignment-right > ::slotted(svg),\n.cell-alignment-right > ::slotted(svg)*/.column-header-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.cell-alignment-right.sc-ic-data-table>.icon.sc-ic-data-table,.column-header-alignment-right>.sc-ic-data-table-s>svg,.row-header-alignment-right>.sc-ic-data-table-s>svg,.cell-alignment-right>.sc-ic-data-table-s>svg{margin-right:auto}/*!@.column-header-alignment-center > ic-typography,\n.row-header-alignment-right > ic-typography,\n.cell-alignment-center > ic-typography*/.column-header-alignment-center.sc-ic-data-table>ic-typography.sc-ic-data-table,.row-header-alignment-right.sc-ic-data-table>ic-typography.sc-ic-data-table,.cell-alignment-center.sc-ic-data-table>ic-typography.sc-ic-data-table{flex:1}/*!@.icon > svg*/.icon.sc-ic-data-table>svg.sc-ic-data-table{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}/*!@.truncation-tooltip ic-typography*/.truncation-tooltip.sc-ic-data-table ic-typography.sc-ic-data-table{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}/*!@.truncation-tooltip ic-typography,\n.truncation-show-hide ic-typography*/.truncation-tooltip.sc-ic-data-table ic-typography.sc-ic-data-table,.truncation-show-hide.sc-ic-data-table ic-typography.sc-ic-data-table{white-space:normal}/*!@.ic-tooltip-overflow*/.ic-tooltip-overflow.sc-ic-data-table{overflow:hidden}@media screen and (min-width: 576px){/*!@.column-header-inner-container*/.column-header-inner-container.sc-ic-data-table{display:flex;align-items:center}}";
 
-const DENSITY_HEIGHT_MULTIPLIER = {
-    dense: 0.8,
-    default: 1,
-    spacious: 1.2,
-};
-const SORT_ICONS = {
-    unsorted: unsortedIcon,
-    ascending: ascendingIcon,
-    descending: descendingIcon,
-};
 /**
  * @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
  * @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.
@@ -10661,7 +10668,155 @@ class DataTable {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.icRowHeightChange = createEvent(this, "icRowHeightChange", 7);
+        this.DENSITY_HEIGHT_MULTIPLIER = {
+            dense: 0.8,
+            default: 1,
+            spacious: 1.2,
+        };
+        this.DENSITY_PADDING_HEIGHT_DIFF = {
+            dense: 8,
+            default: 16,
+            spacious: 20,
+        };
+        this.SORT_ICONS = {
+            unsorted: unsortedIcon,
+            ascending: ascendingIcon,
+            descending: descendingIcon,
+        };
         this.hasLoadedForOneSecond = true;
+        this.resizeObserver = null;
+        this.SHOW_HIDE_STRING = "show-hide";
+        this.SHOW_HIDE_CSS_CLASS = `${this.SHOW_HIDE_STRING}-wrap`;
+        this.TOOLTIP_STRING = "tooltip";
+        this.TOOLTIP = `ic-${this.TOOLTIP_STRING}`;
+        this.TEXT_WRAP_STRING = "text-wrap";
+        this.TEXT_WRAP_CLASS = `.${this.TEXT_WRAP_STRING}`;
+        this.dataUpdated = false;
+        this.rowHeightSet = false;
+        this.initialLoad = false;
+        this.icPageChangeEvent = false;
+        this.itemsPerPageChange = false;
+        this.DATA_ROW_HEIGHT_STRING = "data-row-height";
+        this.DEFAULT_LINE_HEIGHT = 24;
+        this.densityUpdate = false;
+        this.updateSetRowHeight = (typographyEl) => {
+            const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            if (typographyEl) {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const rowHeight = fontSize *
+                    parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                if (typographyEl.scrollHeight > rowHeight) {
+                    cellContainer.style.removeProperty("height");
+                }
+            }
+            else {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const rowHeight = fontSize *
+                        parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    if (typographyEl.scrollHeight > rowHeight) {
+                        cellContainer.style.removeProperty("height");
+                    }
+                });
+            }
+        };
+        this.debounceDataTruncation = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
+                    this.resizeObserver = new ResizeObserver(
+                    // This gets triggered twice due to updated data and see more/see less button
+                    debounce$2(() => {
+                        // console.log("resizeObserver triggered");
+                        this.dataTruncation(typographyEl);
+                    }, 200));
+                    this.resizeObserver.observe(typographyEl);
+                }
+            });
+        };
+        this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
+        this.truncate = (typographyEl, cellContainer, tooltip) => {
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                //24 is the height of a single line
+                if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                    if (this.truncationPattern === this.TOOLTIP_STRING) {
+                        this.addTooltipTruncation(typographyEl, cellContainer, tooltip);
+                    }
+                    if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                }
+            }
+            else {
+                if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
+                    typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
+                    cellContainer.appendChild(typographyEl);
+                    tooltip.remove();
+                }
+                if (this.truncationPattern === this.SHOW_HIDE_STRING &&
+                    !isEmptyString(typographyEl.getAttribute("max-lines"))) {
+                    this.resetShowHideTruncation(typographyEl);
+                }
+            }
+        };
+        this.dataTruncation = (typographyEl) => {
+            // Tooltip truncation mentioned in AC. Will need revisiting
+            const tooltip = this.getTooltip(typographyEl);
+            const cellContainer = this.getCellContainer(typographyEl);
+            if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.classList.contains("data-type-element")) ||
+                this.dataUpdated) {
+                return;
+            }
+            if (this.truncationPattern === this.SHOW_HIDE_STRING &&
+                typographyEl.shadowRoot.querySelector("button")) {
+                const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                // If the see more/see less is present and the max lines is equal to the cell container
+                // remove the see more/see less button
+                if (showHideBtn) {
+                    const truncWrapper = this.getTruncWrapper(typographyEl);
+                    if (this.getLines(truncWrapper.scrollHeight) ===
+                        +typographyEl.getAttribute("max-lines")) {
+                        this.resetShowHideTruncation(typographyEl);
+                    }
+                }
+            }
+            // Deals with setting and resetting row height and re-truncating data
+            if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
+                const truncWrapper = this.getTruncWrapper(typographyEl);
+                // cellContainer.clientHeight - 24 removes the extra line by see more/see less
+                if (truncWrapper &&
+                    cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
+                        truncWrapper.scrollHeight) {
+                    this.resetShowHideTruncation(typographyEl);
+                    return;
+                }
+                if (typographyEl.scrollHeight > cellContainer.clientHeight) {
+                    this.addShowHideTruncation(cellContainer, typographyEl);
+                    return;
+                }
+            }
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
+                (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
+                (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+                if (tooltip) {
+                    this.removeTooltip(cellContainer, typographyEl, tooltip);
+                }
+                return;
+            }
+            this.truncate(typographyEl, cellContainer, tooltip);
+        };
+        this.removeTextWrap = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const tableCell = typographyEl.closest("td");
+                if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
+                    tableCell.classList.remove(this.TEXT_WRAP_STRING);
+                }
+            });
+        };
+        this.getCellContainer = (typographyEl) => {
+            return typographyEl.closest(".cell-container");
+        };
+        this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
+            array.forEach((val) => val.textWrap && delete val.textWrap);
         this.startLoadingTimer = () => {
             this.hasLoadedForOneSecond = false;
             this.timerStarted = Date.now();
@@ -10687,13 +10842,31 @@ class DataTable {
                 return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
             }
         };
+        this.getCellOptions = (cell, key) => {
+            if (!(this.isObject(cell) && Object.keys(cell).includes(key)))
+                return;
+            return this.getObjectValue(cell, key);
+        };
         this.createUpdatingIndicator = () => {
             const { appearance, description, max, min, progress } = this.updatingOptions || {};
             return (hAsync("th", { colSpan: this.columns.length, class: "updating-state" }, hAsync("ic-loading-indicator", { appearance: appearance, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
         };
+        this.setRowHeight = (height) => {
+            return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
+                this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
+        };
+        this.setTruncationClass = () => {
+            if (this.truncationPattern) {
+                return { [`truncation-${this.truncationPattern}`]: true };
+            }
+            return {};
+        };
         this.createCells = (row, rowIndex) => {
+            var _a;
             const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
+            const index = rowIndex;
+            const rowOptions = this.getRowOptions(rowKeys, rowValues);
             let rowAlignment;
             let rowEmphasis;
             const headerIndex = rowKeys.indexOf("header");
@@ -10701,42 +10874,63 @@ class DataTable {
                 rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
                 rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
             }
+            const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index }));
+            const currentRowHeight = variableRowHeightVal
+                ? variableRowHeightVal !== "auto" && variableRowHeightVal
+                : this.globalRowHeight !== "auto" && this.globalRowHeight;
             return rowValues.map((cell, index) => {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 const columnProps = this.columns[index];
                 const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
                 const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
                 const cellValue = (key) => this.getObjectValue(cell, key);
-                return rowKeys[index] === "header" ? (hAsync("th", { scope: "row", colSpan: cellValue("colspan"), class: {
-                        ["row-header"]: true,
-                        [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
-                        ["row-header-sticky"]: this.stickyRowHeaders,
-                    } }, cellValue("title"))) : (hAsync("td", { class: {
-                        ["table-cell"]: true,
-                        [`table-density-${this.density}`]: this.notDefaultDensity(),
-                        [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
-                        [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
-                            rowAlignment ||
-                            this.getCellAlignment(cell, "vertical")}`]: !!((_b = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
-                            !!rowAlignment ||
-                            !!this.getCellAlignment(cell, "vertical"),
-                    } }, hAsync("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
-                        !isSlotUsed(this.el, cellSlotName)
-                        ? cell
-                        : null, class: {
-                        "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element",
-                        [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
-                        [`cell-alignment-${((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.horizontal) ||
-                            this.getCellAlignment(cell, "horizontal")}`]: !!((_d = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _d === void 0 ? void 0 : _d.horizontal) ||
-                            !!this.getCellAlignment(cell, "horizontal"),
-                    } }, isSlotUsed(this.el, cellSlotName) ? (hAsync("slot", { name: cellSlotName })) : (hAsync(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (hAsync("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _e === void 0 ? void 0 : _e.onAllCells)) && (hAsync("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), hAsync("ic-typography", { variant: "body", class: {
-                        [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
-                            (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                            rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                            !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
-                            !!rowEmphasis,
-                        [`text-${this.density}`]: this.notDefaultDensity(),
-                    } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (hAsync("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))))))));
+                if (rowKeys[index] === "header") {
+                    return (hAsync("th", { scope: "row", colSpan: cellValue("colspan"), class: {
+                            ["row-header"]: true,
+                            [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
+                            ["row-header-sticky"]: this.stickyRowHeaders,
+                        } }, cellValue("title")));
+                }
+                if (rowKeys[index] !== "rowOptions") {
+                    return (hAsync("td", { class: {
+                            ["table-cell"]: true,
+                            [`table-density-${this.density}`]: this.notDefaultDensity(),
+                        } }, hAsync("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
+                            !isSlotUsed(this.el, cellSlotName)
+                            ? cell
+                            : null, class: Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
+                                ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
+                                rowAlignment ||
+                                this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
+                                !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
+                                !!rowAlignment ||
+                                !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
+                                ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
+                                this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
+                                !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
+                                !!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
+                                (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
+                                !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), style: {
+                            height: (this.truncationPattern || currentRowHeight) &&
+                                !columnProps.textWrap &&
+                                !rowOptions.textWrap &&
+                                !this.getCellOptions(cell, "textWrap") &&
+                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element"
+                                ? this.setRowHeight(currentRowHeight)
+                                : null,
+                        }, "data-row-height": this.truncationPattern || currentRowHeight
+                            ? this.setRowHeight(currentRowHeight)
+                            : null }, isSlotUsed(this.el, cellSlotName) ? (hAsync("slot", { name: cellSlotName })) : (hAsync(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (hAsync("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_k = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _k === void 0 ? void 0 : _k.onAllCells)) && (hAsync("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
+                        !isSlotUsed(this.el, cellSlotName) && (hAsync("ic-typography", { variant: "body", class: {
+                            [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                                (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                                rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+                                !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
+                                !!rowEmphasis,
+                            [`text-${this.density}`]: this.notDefaultDensity(),
+                        } }, this.isObject(cell) &&
+                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (hAsync("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
+                }
             });
         };
         this.createColumnHeaders = () => {
@@ -10753,7 +10947,7 @@ class DataTable {
                     [`text-${this.density}`]: this.notDefaultDensity(),
                 } }, title), this.sortable && (hAsync("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
                 // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.sortRows(key), innerHTML: SORT_ICONS[this.sortedColumn === key
+                onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
                     ? this.sortedColumnOrder
                     : "unsorted"], class: {
                     ["sort-button"]: true,
@@ -10761,6 +10955,10 @@ class DataTable {
                         this.sortedColumnOrder === "unsorted",
                 } }))))));
         };
+        this.onRowClick = (row) => {
+            this.selectedRow =
+                this.selectedRow !== row && !this.loading && !this.updating && row;
+        };
         this.createRows = () => {
             const data = this.showPagination
                 ? this.data.slice(this.fromRow, this.toRow)
@@ -10780,24 +10978,11 @@ class DataTable {
             return data
                 .sort(!this.sortable ? undefined : this.getSortFunction())
                 .map((row, index) => {
-                var _a;
-                const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index }));
-                const findRowHeight = variableRowHeightVal
-                    ? variableRowHeightVal !== "auto" && variableRowHeightVal
-                    : this.globalRowHeight !== "auto" && this.globalRowHeight;
                 return (hAsync("tr", {
                     // eslint-disable-next-line react/jsx-no-bind
-                    onClick: () => (this.selectedRow =
-                        this.selectedRow !== row &&
-                            !this.loading &&
-                            !this.updating &&
-                            row), class: {
+                    onClick: () => this.onRowClick(row), class: {
                         ["table-row"]: true,
                         ["table-row-selected"]: this.selectedRow === row,
-                    }, style: {
-                        height: findRowHeight
-                            ? `${findRowHeight * DENSITY_HEIGHT_MULTIPLIER[this.density]}px`
-                            : null,
                     }
                 }, this.createCells(row, index)));
             });
@@ -10860,6 +11045,25 @@ class DataTable {
             }
             this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
             sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
+            this.tableSorted = true;
+        };
+        this.getTypographyElements = () => {
+            return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text)"));
+        };
+        this.getTooltip = (typographyEl) => {
+            return typographyEl.closest(this.TOOLTIP);
+        };
+        this.updateTruncationTooltip = (removeTooltipOnly = false) => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const tooltip = this.getTooltip(typographyEl);
+                const cellContainer = this.getCellContainer(typographyEl);
+                if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                    this.removeTooltip(cellContainer, typographyEl, tooltip);
+                    typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
+                    return;
+                }
+                this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
+            });
         };
         this.updateScrollOffset = () => {
             this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
@@ -10873,12 +11077,13 @@ class DataTable {
         this.sortedColumn = undefined;
         this.sortedColumnOrder = undefined;
         this.toRow = undefined;
+        this.currentRowHeight = undefined;
         this.caption = undefined;
         this.columns = undefined;
         this.data = undefined;
         this.density = "default";
         this.embedded = false;
-        this.globalRowHeight = 40;
+        this.globalRowHeight = "auto";
         this.hideColumnHeaders = false;
         this.loading = false;
         this.loadingOptions = undefined;
@@ -10907,10 +11112,15 @@ class DataTable {
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
+        this.truncationPattern = undefined;
         this.updating = false;
         this.updatingOptions = undefined;
         this.variableRowHeight = undefined;
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentWillLoad() {
         var _a;
         this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
@@ -10919,10 +11129,15 @@ class DataTable {
         this.sortedColumn = this.sortOptions.defaultColumn;
         this.sortedColumnOrder = this.sortOptions.sortOrders[0];
         this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 });
+        this.initialLoad = true;
+        this.previousItemsPerPage = this.rowsPerPage;
     }
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
         const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+        if (this.dataUpdated) {
+            this.dataUpdated = false;
+        }
         if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
             (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
             this.scrollable = true;
@@ -10931,11 +11146,144 @@ class DataTable {
             this.startLoadingTimer();
             this.showLoadingIndicator();
         }
+        if (this.truncationPattern) {
+            this.getTypographyElements().forEach((typographyEl) => {
+                if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
+                    this.dataTruncation(typographyEl);
+                }
+            });
+            this.debounceDataTruncation();
+        }
+        if (this.globalRowHeight !== "auto") {
+            this.updateSetRowHeight();
+        }
     }
-    handleItemsPerPageChange({ detail, target, }) {
-        if (target.parentElement !== this.el) {
-            this.previousRowsPerPage = this.rowsPerPage;
-            this.rowsPerPage = detail.value;
+    componentDidUpdate() {
+        this.truncateUpdatedData();
+    }
+    truncateUpdatedData() {
+        if (this.dataUpdated) {
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.resetShowHideTruncation();
+            }
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            this.dataUpdated = false;
+        }
+        if (this.tableSorted) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            this.tableSorted = false;
+        }
+        // This function recalculates the tooltip truncation when the rowHeight has been set.
+        // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
+        if (this.rowHeightSet) {
+            const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            this.getTypographyElements().forEach((typographyEl) => {
+                var _a;
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                const rowHeight = fontSize *
+                    parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                // If the set row height is bigger than the cell container even
+                // with textWrap, set the row height
+                if (!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
+                    rowHeight > cellContainer.clientHeight) {
+                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                }
+                if (this.truncationPattern) {
+                    // If the set row height is bigger than the typography truncation wrapper
+                    // scroll height, remove see more / see less button
+                    if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                        const truncWrapper = this.getTruncWrapper(typographyEl);
+                        const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                        if (showHideBtn &&
+                            (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
+                            this.resetShowHideTruncation(typographyEl);
+                            return;
+                        }
+                    }
+                    this.truncate(typographyEl, cellContainer, tooltipEl);
+                }
+                else {
+                    this.updateSetRowHeight(typographyEl);
+                }
+            });
+            this.rowHeightSet = false;
+        }
+        // Only run truncation on the new rows
+        // when the number of items per page has increased
+        if (this.itemsPerPageChange) {
+            const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
+            if (this.rowsPerPage > this.previousItemsPerPage) {
+                const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
+                newRows.forEach((row) => {
+                    row
+                        .querySelectorAll("ic-typography")
+                        .forEach((typographyEl) => {
+                        const cellContainer = this.getCellContainer(typographyEl);
+                        const tooltipEl = this.getTooltip(typographyEl);
+                        this.truncate(typographyEl, cellContainer, tooltipEl);
+                    });
+                });
+            }
+            this.previousItemsPerPage = this.rowsPerPage;
+            this.itemsPerPageChange = false;
+        }
+        if (!this.initialLoad && this.icPageChangeEvent) {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            // set truncation to see more if opened and next/previous page is pressed
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                    if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
+                        !showHideBtn) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                });
+            }
+            this.icPageChangeEvent = false;
+        }
+        if (this.densityUpdate) {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                this.truncate(typographyEl, cellContainer, tooltipEl);
+            });
+            this.densityUpdate = false;
+        }
+    }
+    createShowHideTruncation(typographyEl, cellContainer) {
+        typographyEl.checkMaxLines(typographyEl.scrollHeight);
+        typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+        typographyEl.setShowHideExpanded(false);
+        cellContainer.style.height = null;
+    }
+    addTooltipTruncation(typographyEl, cellContainer, tooltip) {
+        this.addLineClampCSS(typographyEl, cellContainer);
+        if (!tooltip) {
+            this.createTruncationTooltip(typographyEl, cellContainer);
+        }
+    }
+    addShowHideTruncation(cellContainer, typographyEl) {
+        cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
+        this.createShowHideTruncation(typographyEl, cellContainer);
+    }
+    getTruncWrapper(typographyEl) {
+        return typographyEl.shadowRoot.querySelector(".trunc-wrapper");
+    }
+    // Set the height to initial if row height is set and the show / hide truncation
+    // is clicked
+    handleTypographyTruncationExpandToggle({ detail, }) {
+        const { expanded, typographyEl } = detail;
+        const cellContainer = this.getCellContainer(typographyEl);
+        if (cellContainer.style.height && expanded) {
+            cellContainer.style.height = "inherit";
         }
     }
     handlePageChange({ detail, target }) {
@@ -10954,6 +11302,19 @@ class DataTable {
                 this.previousRowsPerPage = this.rowsPerPage;
             }
         }
+        if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
+            // This is to prevent icPageChange from triggering truncation on first load
+            this.icPageChangeEvent = true;
+        }
+        this.previousPaginationPage = detail.value;
+        this.initialLoad = false;
+    }
+    handleItemsPerPageChange({ detail, target, }) {
+        if (target.parentElement !== this.el) {
+            this.previousRowsPerPage = this.rowsPerPage;
+            this.rowsPerPage = detail.value;
+        }
+        this.itemsPerPageChange = true;
     }
     handleDensityChange(ev) {
         this.density = ev.detail.value;
@@ -10971,7 +11332,23 @@ class DataTable {
             }, 500);
         }
     }
-    dataHandler(newData) {
+    truncationPatternHandler(newValue) {
+        if (newValue === this.SHOW_HIDE_STRING) {
+            this.updateTruncationTooltip(true);
+            // Not using debounceDataTruncation here due to resizeObserver not being triggered
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltip = this.getTooltip(typographyEl);
+                this.truncate(typographyEl, cellContainer, tooltip);
+            });
+        }
+        if (newValue === this.TOOLTIP_STRING) {
+            // ResizeObserver is trigger here due to the see more/see less links being removed.
+            // The resizeObserver will also apply the tooltip where relevant
+            this.resetShowHideTruncation();
+        }
+    }
+    async dataHandler(newData) {
         this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 });
         if (this.loading) {
             !this.hasLoadedForOneSecond
@@ -10981,31 +11358,124 @@ class DataTable {
         }
         if (this.updating)
             this.updating = false;
+        this.dataUpdated = true;
+    }
+    async densityHandler() {
+        this.densityUpdate = true;
+    }
+    resetShowHideTruncation(typographyEl) {
+        if (typographyEl) {
+            const truncWrapper = this.getTruncWrapper(typographyEl);
+            const cellContainer = this.getCellContainer(typographyEl);
+            if ((truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
+                !isEmptyString(typographyEl.getAttribute("max-lines")) &&
+                Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
+                    +typographyEl.getAttribute("max-lines")) {
+                typographyEl.checkMaxLines(truncWrapper.scrollHeight);
+                typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+                typographyEl.setShowHideExpanded(false);
+                cellContainer.style.height = null;
+            }
+            else {
+                typographyEl.resetTruncation().then(() => {
+                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                });
+            }
+        }
+        else {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                typographyEl.resetTruncation().then(() => {
+                    cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                });
+            });
+        }
     }
-    rowHeightChangeHandler() {
-        this.icRowHeightChange.emit();
+    rowHeightChangeHandler(newValue, oldValue) {
+        if (+newValue !== +oldValue) {
+            this.deleteTextWrapDataKey(this.data);
+            this.deleteTextWrapDataKey(this.columns);
+            this.removeTextWrap();
+            this.icRowHeightChange.emit();
+            this.rowHeightSet = true;
+        }
     }
     /**
-     * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+     * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
      */
-    async resetRowHeights() {
-        this.globalRowHeight = 40;
+    async resetRowHeights(rowHeight) {
+        this.globalRowHeight = rowHeight || "auto";
         this.variableRowHeight = null;
     }
     showLoadingIndicator() {
         this.loadingIndicator.classList.add("show");
     }
+    getRowOptions(rowKeys, rowValues) {
+        const rowOptionsIndex = rowKeys.indexOf("rowOptions");
+        return rowOptionsIndex > -1 && rowValues[rowOptionsIndex];
+    }
+    regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly) {
+        // When sorting the table, instead of regenerating the tooltip,
+        // the tooltip details are updated
+        if (tooltip) {
+            if (this.tableSorted) {
+                tooltip.setAttribute("target", typographyEl.id);
+                tooltip.setAttribute("label", typographyEl.textContent);
+            }
+            else {
+                this.removeTooltip(cellContainer, typographyEl, tooltip);
+            }
+            if (removeTooltipOnly) {
+                return;
+            }
+        }
+        // This add line clamp to data only when
+        // the data object has been updated
+        if (!typographyEl.getAttribute("style") && this.dataUpdated) {
+            this.addLineClampCSS(typographyEl, cellContainer);
+        }
+        // Adding the tableSorted boolean prevents the tooltip
+        // being regenerated and flashing
+        if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
+            !this.tableSorted) {
+            if (!typographyEl.getAttribute("style")) {
+                this.addLineClampCSS(typographyEl, cellContainer);
+            }
+            this.createTruncationTooltip(typographyEl, cellContainer);
+        }
+    }
+    removeTooltip(cellContainer, typographyEl, tooltip) {
+        cellContainer.appendChild(typographyEl);
+        if (tooltip) {
+            tooltip.remove();
+        }
+    }
+    addLineClampCSS(typographyEl, cellContainer) {
+        typographyEl.setAttribute("style", `--ic-line-clamp: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
+    }
+    createTruncationTooltip(typographyEl, cellContainer) {
+        const tooltipEl = document.createElement("ic-tooltip");
+        tooltipEl.setAttribute("target", typographyEl.id);
+        tooltipEl.setAttribute("label", typographyEl.textContent);
+        tooltipEl.classList.add("ic-tooltip-overflow");
+        tooltipEl.setExternalPopperProps({
+            // This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
+            strategy: "fixed",
+        });
+        cellContainer.appendChild(tooltipEl);
+        tooltipEl.appendChild(typographyEl);
+    }
     render() {
         const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
         return (hAsync("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && hAsync("slot", { name: "title-bar" }), hAsync("div", { class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, hAsync("table", null, hAsync("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (hAsync("thead", { class: {
+            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, isSlotUsed(this.el, "title-bar") && hAsync("slot", { name: "title-bar" }), hAsync("table", null, hAsync("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (hAsync("thead", { class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
             } }, hAsync("tr", null, createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (hAsync("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && hAsync("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
+            (hideColumnHeaders ? (hAsync("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && !loading && hAsync("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
             !loading &&
             (isSlotUsed(this.el, "empty-state") ? (hAsync("slot", { name: "empty-state" })) : (hAsync("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (hAsync("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
                 "loading-empty": loading,
@@ -11018,7 +11488,9 @@ class DataTable {
     get el() { return getElement(this); }
     static get watchers() { return {
         "loading": ["loadingHandler"],
+        "truncationPattern": ["truncationPatternHandler"],
         "data": ["dataHandler"],
+        "density": ["densityHandler"],
         "globalRowHeight": ["rowHeightChangeHandler"],
         "variableRowHeight": ["rowHeightChangeHandler"]
     }; }
@@ -11043,6 +11515,7 @@ class DataTable {
             "sortOptions": [16],
             "stickyColumnHeaders": [4, "sticky-column-headers"],
             "stickyRowHeaders": [4, "sticky-row-headers"],
+            "truncationPattern": [1, "truncation-pattern"],
             "updating": [4],
             "updatingOptions": [16],
             "variableRowHeight": [1040],
@@ -11055,9 +11528,10 @@ class DataTable {
             "sortedColumn": [32],
             "sortedColumnOrder": [32],
             "toRow": [32],
+            "currentRowHeight": [32],
             "resetRowHeights": [64]
         },
-        "$listeners$": [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]],
+        "$listeners$": [[0, "typographyTruncationExpandToggle", "handleTypographyTruncationExpandToggle"], [0, "icPageChange", "handlePageChange"], [0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -12083,6 +12557,7 @@ class DateInput {
         this.disablePast = false;
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
         this.helperText = undefined;
+        this.hideHelperText = false;
         this.inputId = `ic-date-input-${inputIds$5++}`;
         this.label = undefined;
         this.max = "";
@@ -12326,7 +12801,7 @@ class DateInput {
         }
     }
     render() {
-        const { inputId, label, disabled, helperText, showClearButton, showCalendarButton, size, } = this;
+        const { inputId, label, disabled, helperText, hideHelperText, showClearButton, showCalendarButton, size, } = this;
         const hasCustomValidation = !isEmptyString(this.validationStatus) &&
             !isEmptyString(this.validationText);
         const validationStatus = hasCustomValidation
@@ -12336,7 +12811,7 @@ class DateInput {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (hAsync(Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { disabled: disabled }, hAsync("ic-input-label", { for: inputId, label: label, helperText: helperText, disabled: disabled }), hAsync("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), `${this.defaultHelperText}.`), hAsync("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, hAsync("div", { class: "input-container" }, hAsync("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), hAsync("div", { class: "action-buttons" }, showClearButton && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
+        return (hAsync(Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { disabled: disabled }, hAsync("ic-input-label", { for: inputId, label: label, helperText: !hideHelperText ? helperText : null, disabled: disabled }), hAsync("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), hAsync("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, hAsync("div", { class: "input-container" }, hAsync("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), hAsync("div", { class: "action-buttons" }, showClearButton && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
@@ -12370,6 +12845,7 @@ class DateInput {
             "disablePast": [4, "disable-past"],
             "disablePastMessage": [1, "disable-past-message"],
             "helperText": [1025, "helper-text"],
+            "hideHelperText": [4, "hide-helper-text"],
             "inputId": [1, "input-id"],
             "label": [1],
             "max": [1],
@@ -13185,6 +13661,9 @@ class DatePicker {
             if (this.helperText !== undefined) {
                 inputProps.helperText = this.helperText;
             }
+            if (this.hideHelperText !== false) {
+                inputProps.hideHelperText = this.hideHelperText;
+            }
             if (this.inputId !== undefined) {
                 inputProps.inputId = this.inputId;
             }
@@ -13235,6 +13714,7 @@ class DatePicker {
         this.disablePast = false;
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
         this.helperText = undefined;
+        this.hideHelperText = false;
         this.inputId = undefined;
         this.label = undefined;
         this.max = "";
@@ -13465,6 +13945,7 @@ class DatePicker {
             "disablePast": [4, "disable-past"],
             "disablePastMessage": [1, "disable-past-message"],
             "helperText": [1, "helper-text"],
+            "hideHelperText": [4, "hide-helper-text"],
             "inputId": [1, "input-id"],
             "label": [1],
             "max": [1],
@@ -13614,7 +14095,7 @@ class Dialog {
             }
         };
         this.setAlertVariant = () => {
-            if (isPropDefined(this.status) && this.status !== null) {
+            if (isPropDefined$1(this.status) && this.status !== null) {
                 const alert = this.el.shadowRoot.querySelector("ic-alert");
                 alert.setAttribute("variant", this.status);
             }
@@ -14333,7 +14814,7 @@ class Hero {
     render() {
         const { aligned, small, size, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
         let style = {};
-        if (isPropDefined(backgroundImage)) {
+        if (isPropDefined$1(backgroundImage)) {
             style = {
                 "background-image": "url(" + backgroundImage + ")",
                 "background-position": scrollFactor,
@@ -14349,7 +14830,7 @@ class Hero {
                 ["left-container-full-width"]: this.leftContentFullWidth,
             } }, hAsync("div", { class: "heading" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: small || size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: !small && size !== "small",
-            } }, heading))), hAsync("div", { class: "subheading" }, hAsync("slot", { name: "subheading" }, hAsync("ic-typography", { variant: "body" }, subheading))), hAsync("div", { class: "interaction-container" }, hAsync("slot", { name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (hAsync("div", { class: "right-container" }, hAsync("slot", { name: "secondary" }, secondaryHeading && (hAsync("div", { class: "secondary-container" }, hAsync("div", { class: "secondary-heading" }, hAsync("ic-typography", { variant: "h4" }, secondaryHeading)), hAsync("div", { class: "secondary-subheading" }, hAsync("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, heading))), hAsync("div", { class: "subheading" }, hAsync("slot", { name: "subheading" }, hAsync("ic-typography", { variant: "body" }, subheading))), hAsync("div", { class: "interaction-container" }, hAsync("slot", { name: "interaction" }))), (isPropDefined$1(secondaryHeading) || this.rightContent) && (hAsync("div", { class: "right-container" }, hAsync("slot", { name: "secondary" }, secondaryHeading && (hAsync("div", { class: "secondary-container" }, hAsync("div", { class: "secondary-heading" }, hAsync("ic-typography", { variant: "h4" }, secondaryHeading)), hAsync("div", { class: "secondary-subheading" }, hAsync("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     get el() { return getElement(this); }
     static get style() { return icHeroCss; }
@@ -14947,7 +15428,7 @@ class LoadingIndicator {
             return cls;
         };
         this.updateLabel = () => {
-            if (isPropDefined(this.label)) {
+            if (isPropDefined$1(this.label)) {
                 this.labelList = this.label.split("/");
                 const labelIndex = 0;
                 this.indicatorLabel = this.labelList[labelIndex];
@@ -20332,7 +20813,7 @@ class MenuGroup {
     }
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (hAsync(Host, { "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (hAsync("ic-typography", { variant: "subtitle-small" }, this.label)), hAsync("ul", { role: "group" }, hAsync("slot", null)), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (hAsync("hr", null))));
+        return (hAsync(Host, { "aria-label": this.label !== null ? this.label : "" }, isPropDefined$1(this.label) && (hAsync("ic-typography", { variant: "subtitle-small" }, this.label)), hAsync("ul", { role: "group" }, hAsync("slot", null)), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (hAsync("hr", null))));
     }
     get el() { return getElement(this); }
     static get style() { return icMenuGroupCss; }
@@ -20360,7 +20841,7 @@ class MenuItem {
         this.handleMenuItemClick = createEvent(this, "handleMenuItemClick", 7);
         this.triggerPopoverMenuInstance = createEvent(this, "triggerPopoverMenuInstance", 7);
         this.handleClick = (e) => {
-            if (isPropDefined(this.submenuTriggerFor)) {
+            if (isPropDefined$1(this.submenuTriggerFor)) {
                 this.triggerPopoverMenuInstance.emit();
             }
             else if (this.variant === "toggle") {
@@ -20374,16 +20855,16 @@ class MenuItem {
         };
         this.getMenuItemAriaLabel = () => {
             let ariaLabel = this.label;
-            if (isPropDefined(this.description)) {
+            if (isPropDefined$1(this.description)) {
                 ariaLabel = `${ariaLabel}, ${this.description}`;
             }
-            if (isPropDefined(this.keyboardShortcut)) {
+            if (isPropDefined$1(this.keyboardShortcut)) {
                 ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;
             }
             if (this.variant === "destructive") {
                 ariaLabel = `${ariaLabel}, destructive`;
             }
-            if (isPropDefined(this.submenuTriggerFor)) {
+            if (isPropDefined$1(this.submenuTriggerFor)) {
                 ariaLabel = `${ariaLabel}, triggers submenu`;
             }
             if (this.el.classList.contains("ic-popover-submenu-back-button")) {
@@ -20413,7 +20894,7 @@ class MenuItem {
     }
     componentWillLoad() {
         // This ensures that trigger menu items are always set to the default variant
-        if (isPropDefined(this.submenuTriggerFor) && this.variant !== "default") {
+        if (isPropDefined$1(this.submenuTriggerFor) && this.variant !== "default") {
             this.variant = "default";
         }
         removeDisabledFalse$1(this.disabled, this.el);
@@ -20433,17 +20914,17 @@ class MenuItem {
         };
         return (hAsync(Host, { class: {
                 ["disabled"]: this.disabled,
-            } }, hAsync("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle" ? this.toggleChecked : undefined }, hAsync("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), ariaControlsId: isPropDefined(this.submenuTriggerFor)
+            } }, hAsync("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle" ? this.toggleChecked : undefined }, hAsync("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined$1(this.href), hreflang: isPropDefined$1(this.hreflang), target: isPropDefined$1(this.target), rel: isPropDefined$1(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), ariaControlsId: isPropDefined$1(this.submenuTriggerFor)
                 ? `ic-popover-submenu-${this.submenuTriggerFor}`
-                : false, "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
+                : false, "aria-haspopup": isPropDefined$1(this.submenuTriggerFor) ||
                 this.el.classList.contains("ic-popover-submenu-back-button")
                 ? "menu"
-                : false, ariaOwnsId: isPropDefined(this.submenuTriggerFor)
+                : false, ariaOwnsId: isPropDefined$1(this.submenuTriggerFor)
                 ? `ic-popover-submenu-${this.submenuTriggerFor}`
                 : false }, hAsync("div", { class: "focus-border" }, isSlotUsed$1(this.el, "icon") && (hAsync("span", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync(MenuItemInformation, null), this.variant === "toggle" && (hAsync("span", { class: {
                 ["check-icon"]: true,
                 ["hide"]: !this.toggleChecked,
-            }, "aria-hidden": "true", innerHTML: checkIcon })), isPropDefined(this.submenuTriggerFor) && (hAsync("span", { class: { ["submenu-icon"]: true }, "aria-hidden": "true", innerHTML: chevronIcon })))))));
+            }, "aria-hidden": "true", innerHTML: checkIcon })), isPropDefined$1(this.submenuTriggerFor) && (hAsync("span", { class: { ["submenu-icon"]: true }, "aria-hidden": "true", innerHTML: chevronIcon })))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -22063,7 +22544,7 @@ class PopoverMenu {
         };
         this.getMenuAriaLabel = () => {
             const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);
-            if (isPropDefined(this.submenuId)) {
+            if (isPropDefined$1(this.submenuId)) {
                 return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;
             }
             else {
@@ -22109,7 +22590,7 @@ class PopoverMenu {
                 !this.popoverMenuEls.some((menuItem) => menuItem.id)) {
                 this.popoverMenuEls.unshift(this.backButton);
             }
-            this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;
+            this.currentFocus = isPropDefined$1(this.submenuId) ? 1 : 0;
             // Needed so that anchorEl isn't always focused
             setTimeout(this.setButtonFocus, 50);
         }
@@ -22222,9 +22703,9 @@ class PopoverMenu {
             }, tabindex: open ? "0" : "-1" }, hAsync("div", { class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (hAsync("div", null, hAsync("ic-menu-item", { class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, hAsync("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, hAsync("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" }))), hAsync("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), hAsync("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu", "aria-owns": isPropDefined(this.submenuId)
+            } }, isPropDefined$1(this.submenuId) && (hAsync("div", null, hAsync("ic-menu-item", { class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, hAsync("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, hAsync("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" }))), hAsync("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), hAsync("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu", "aria-owns": isPropDefined$1(this.submenuId)
                 ? `ic-popover-submenu-back-button-${this.submenuLevel}`
-                : false, "aria-controls": isPropDefined(this.submenuId)
+                : false, "aria-controls": isPropDefined$1(this.submenuId)
                 ? `ic-popover-submenu-back-button-${this.submenuLevel}`
                 : false }, hAsync("slot", null))))));
     }
@@ -22262,6 +22743,9 @@ class RadioGroup {
         registerInstance(this, hostRef);
         this.icChange = createEvent(this, "icChange", 7);
         this.resizeObserver = null;
+        this.ADDITIONAL_FIELD = "additional-field";
+        this.RADIO_HORIZONTAL = "horizontal";
+        this.RADIO_VERTICAL = "vertical";
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
                 this.checkOrientation();
@@ -22323,14 +22807,14 @@ class RadioGroup {
                     }
                 });
                 this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);
-            }
-            if (this.initialOrientation === "horizontal" &&
-                this.radioOptions !== undefined &&
-                (this.radioOptions.length > 2 ||
-                    (this.radioOptions.length === 2 &&
-                        (isSlotUsed$1(this.radioOptions[0], "additional-field") ||
-                            isSlotUsed$1(this.radioOptions[1], "additional-field"))))) {
-                this.currentOrientation = "vertical";
+                if (this.initialOrientation === this.RADIO_HORIZONTAL &&
+                    this.radioOptions !== undefined &&
+                    (this.radioOptions.length > 2 ||
+                        (this.radioOptions.length === 2 &&
+                            (isSlotUsed$1(this.radioOptions[0], this.ADDITIONAL_FIELD) ||
+                                isSlotUsed$1(this.radioOptions[1], this.ADDITIONAL_FIELD))))) {
+                    this.currentOrientation = this.RADIO_VERTICAL;
+                }
             }
         };
         this.checkedValue = "";
@@ -22351,6 +22835,7 @@ class RadioGroup {
     }
     orientationChangeHandler() {
         this.initialOrientation = this.orientation;
+        this.checkOrientation();
     }
     disconnectedCallback() {
         var _a, _b;
@@ -22400,20 +22885,35 @@ class RadioGroup {
         }
     }
     checkOrientation() {
-        if (this.initialOrientation === "horizontal") {
+        var _a, _b;
+        if (this.initialOrientation === this.RADIO_HORIZONTAL) {
             let totalWidth = 0;
-            this.radioOptions.forEach(({ clientWidth }, i, arr) => {
-                totalWidth += clientWidth;
-                if (i < arr.length - 1)
-                    totalWidth += 40;
-            });
-            if (this.currentOrientation === "horizontal" &&
-                totalWidth > this.radioContainer.clientWidth) {
-                this.currentOrientation = "vertical";
+            if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {
+                this.radioOptions.forEach(({ clientWidth }, i, arr) => {
+                    totalWidth += clientWidth;
+                    if (i < arr.length - 1)
+                        totalWidth += 40;
+                });
             }
-            else if (this.currentOrientation === "vertical" &&
-                totalWidth < this.radioContainer.clientWidth) {
-                this.currentOrientation = "horizontal";
+            else {
+                totalWidth = 0;
+            }
+            if (this.initialOrientation == this.RADIO_HORIZONTAL) {
+                if (this.radioOptions !== undefined &&
+                    (this.radioOptions.length > 2 ||
+                        (this.radioOptions.length === 2 &&
+                            (isSlotUsed$1(this.radioOptions[0], this.ADDITIONAL_FIELD) ||
+                                isSlotUsed$1(this.radioOptions[1], this.ADDITIONAL_FIELD))))) {
+                    this.currentOrientation = this.RADIO_VERTICAL;
+                }
+                else {
+                    if (totalWidth >= ((_a = this.radioContainer) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
+                        this.currentOrientation = this.RADIO_VERTICAL;
+                    }
+                    else if (totalWidth < ((_b = this.radioContainer) === null || _b === void 0 ? void 0 : _b.clientWidth)) {
+                        this.currentOrientation = this.RADIO_HORIZONTAL;
+                    }
+                }
             }
         }
     }
@@ -22421,7 +22921,7 @@ class RadioGroup {
         renderHiddenInput$1(true, this.el, this.name, this.checkedValue, this.disabled);
         return (hAsync(Host, { onKeyDown: this.handleKeyDown, class: { small: this.small || this.size === "small" } }, hAsync("div", { role: "radiogroup", "aria-label": `${this.label}${this.required ? ", required" : ""}` }, !this.hideLabel && (hAsync("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled })), hAsync("div", { class: {
                 "radio-buttons-container": true,
-                horizontal: this.currentOrientation === "horizontal",
+                horizontal: this.currentOrientation === this.RADIO_HORIZONTAL,
             }, ref: (el) => (this.radioContainer = el) }, hAsync("slot", null))), hasValidationStatus$1(this.validationStatus, this.disabled) && (hAsync("ic-input-validation", { ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
     }
     get el() { return getElement(this); }
@@ -22583,7 +23083,7 @@ class RadioOption {
     }
     render() {
         const { additionalFieldDisplay, disabled, dynamicText, form, formaction, formenctype, formmethod, formnovalidate, formtarget, groupLabel, handleClick, hasAdditionalField, label, name, selected, swallowClick, value, } = this;
-        const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;
+        const id = `ic-radio-option-${isPropDefined$1(label) || value}-${groupLabel}`;
         return (hAsync(Host, { onClick: handleClick, class: { disabled } }, hAsync("div", { class: { ["container"]: true, disabled } }, hAsync("div", null, hAsync("input", { role: "radio", tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled ? true : null, checked: selected, ref: (el) => (this.radioElement = el), form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget }), hAsync("span", { class: "checkmark" })), hAsync("ic-typography", { class: "radio-label", variant: "body" }, hAsync("label", { htmlFor: id }, label))), hasAdditionalField && (hAsync("div", { onClick: swallowClick, class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
@@ -25153,7 +25653,7 @@ class SideNavigation {
             });
         };
         this.renderTopBar = ({ isSDevice, foregroundColor, menuOpen, href, isAppNameSubtitleVariant, }) => {
-            const hasTitle = this.appTitle !== "" && isPropDefined(this.appTitle);
+            const hasTitle = this.appTitle !== "" && isPropDefined$1(this.appTitle);
             const Component = isSlotUsed$1(this.el, "app-title") ? "div" : "a";
             const attrs = Component == "a" && {
                 href: href,
@@ -25420,7 +25920,7 @@ class Step {
         }
         // STEP STATUS
         let stepStatus;
-        if (isPropDefined(this.stepStatus)) {
+        if (isPropDefined$1(this.stepStatus)) {
             stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);
         }
         // STEP TYPE
@@ -25458,7 +25958,7 @@ class Step {
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
             !!this.stepStatus) && (hAsync("div", { class: "step-status" }, statusIcon !== undefined && statusIcon, (this.stepSubtitle || stepType) && (hAsync("ic-typography", { variant: "caption" }, this.stepSubtitle !== null &&
-            isPropDefined(this.stepSubtitle)
+            isPropDefined$1(this.stepSubtitle)
             ? this.stepSubtitle
             : this.stepType === "disabled" ||
                 (this.variant === "compact" &&
@@ -25467,7 +25967,7 @@ class Step {
                 (this.variant === "compact" &&
                     this.compactStepStyling === "completed")
                 ? stepType
-                : this.stepStatus && stepStatus))))), this.lastStep ? (hAsync("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined(this.nextStepTitle) && (hAsync("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", hAsync("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepTitle))))));
+                : this.stepStatus && stepStatus))))), this.lastStep ? (hAsync("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined$1(this.nextStepTitle) && (hAsync("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", hAsync("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepTitle))))));
         // ICON FOR DEFAULT STEP
         let icon;
         if (this.stepType !== "completed") {
@@ -25487,7 +25987,7 @@ class Step {
         const defaultStep = (hAsync("div", { class: {
                 ["step"]: true,
                 [`${this.stepType}`]: true,
-            } }, hAsync("div", { class: "step-top" }, hAsync("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle || this.stepStatus) && (hAsync("div", { class: "step-title-area" }, this.stepTitle && (hAsync("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepTitle && (this.stepSubtitle || this.stepStatus) && (hAsync("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle !== null && isPropDefined(this.stepSubtitle)
+            } }, hAsync("div", { class: "step-top" }, hAsync("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle || this.stepStatus) && (hAsync("div", { class: "step-title-area" }, this.stepTitle && (hAsync("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepTitle && (this.stepSubtitle || this.stepStatus) && (hAsync("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle !== null && isPropDefined$1(this.stepSubtitle)
             ? this.stepSubtitle
             : stepStatus))))));
         return (hAsync(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.stepType === "current") && "step", class: {
@@ -25563,7 +26063,7 @@ class Stepper {
             lastStep.style.maxWidth = "none";
             if (this.alignedFullWidth) {
                 this.stepperWidth = this.el.offsetWidth;
-                lastStep.style.maxWidth = pxToRem(`${this.stepperWidth / this.steps.length}px`);
+                lastStep.style.maxWidth = pxToRem$1(`${this.stepperWidth / this.steps.length}px`);
                 this.lastStepWidth = lastStep.offsetWidth;
             }
         };
@@ -25634,9 +26134,9 @@ class Stepper {
                 if (this.variant === "default") {
                     if (!step.lastStep) {
                         if (this.alignedFullWidth) {
-                            step.style.width = pxToRem(`${(this.stepperWidth - this.lastStepWidth) /
+                            step.style.width = pxToRem$1(`${(this.stepperWidth - this.lastStepWidth) /
                                 (this.steps.length - 1)}px`);
-                            step.style.minWidth = pxToRem("148px");
+                            step.style.minWidth = pxToRem$1("148px");
                         }
                     }
                     else if (step.lastStep) {
@@ -25647,21 +26147,21 @@ class Stepper {
                         else {
                             step.style.maxWidth =
                                 this.connectorWidth > 100
-                                    ? pxToRem(`${this.connectorWidth + 48}px`)
-                                    : pxToRem("148px");
+                                    ? pxToRem$1(`${this.connectorWidth + 48}px`)
+                                    : pxToRem$1("148px");
                         }
                     }
                     if (this.aligned === "left") {
                         step.style.width =
                             this.connectorWidth > 100
-                                ? pxToRem(`${this.connectorWidth + 48}px`)
-                                : pxToRem("148px");
+                                ? pxToRem$1(`${this.connectorWidth + 48}px`)
+                                : pxToRem$1("148px");
                         const stepConnect = step.shadowRoot.querySelector(".step > .step-top > .step-connect");
                         if (stepConnect) {
                             stepConnect.style.width =
                                 this.connectorWidth > 100
-                                    ? pxToRem(`${this.connectorWidth}px`)
-                                    : pxToRem("100px");
+                                    ? pxToRem$1(`${this.connectorWidth}px`)
+                                    : pxToRem$1("100px");
                         }
                     }
                     if (this.hideStepInfo && stepTitleArea !== null) {
@@ -26364,7 +26864,7 @@ class TabPanel {
         const { panelId, selectedTab, appearance } = this;
         return (hAsync(Host, { class: {
                 ["ic-tab-panel-light"]: appearance === IcThemeForegroundEnum$1.Light,
-            }, role: "tabpanel", hidden: isPropDefined(panelId) && isPropDefined(selectedTab)
+            }, role: "tabpanel", hidden: isPropDefined$1(panelId) && isPropDefined$1(selectedTab)
                 ? !(panelId === selectedTab)
                 : true }, hAsync("div", null, hAsync("slot", null))));
     }
@@ -26798,7 +27298,7 @@ class Toast {
                 (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : VARIANT_ICONS[this.variant].ariaLabel;
         }
         if (this.isManual) {
-            const toastMessage = isPropDefined(this.message)
+            const toastMessage = isPropDefined$1(this.message)
                 ? `. ${this.message}`
                 : "";
             this.el.setAttribute("aria-label", this.variant
@@ -27360,9 +27860,7 @@ class Tooltip {
                         .getBoundingClientRect();
                     this.getTooltipTranslate(dialogEl);
                 }
-                this.popperInstance = createPopper$1(this.el, this.toolTip, {
-                    placement: this.placement,
-                    modifiers: [
+                this.popperInstance = createPopper$1(this.el, this.toolTip, Object.assign({ placement: this.placement, modifiers: [
                         {
                             name: "offset",
                             options: {
@@ -27379,8 +27877,7 @@ class Tooltip {
                             name: "eventListeners",
                             options: { scroll: false, resize: false },
                         },
-                    ],
-                });
+                    ] }, this.popperProps));
             }
             else {
                 console.warn(`Tooltip can't display without prop 'label' set`);
@@ -27440,6 +27937,14 @@ class Tooltip {
         this.silent = false;
         this.target = undefined;
         this.label = undefined;
+        this.popperProps = {};
+    }
+    /**
+     * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip
+     * @param props object - createPopper props set externally
+     */
+    async setExternalPopperProps(props) {
+        this.popperProps = props;
     }
     disconnectedCallback() {
         this.manageEventListeners("remove");
@@ -27493,6 +27998,8 @@ class Tooltip {
             "silent": [4],
             "target": [513],
             "label": [1],
+            "popperProps": [32],
+            "setExternalPopperProps": [64],
             "displayTooltip": [64],
             "isTooltipVisible": [64]
         },
@@ -27666,7 +28173,7 @@ class TopNavigation {
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
         const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "default" : "large";
-        const hasTitle = appTitle !== "" && isPropDefined(appTitle);
+        const hasTitle = appTitle !== "" && isPropDefined$1(appTitle);
         const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;
         const appTitleVariant = overMobileBreakpoint
             ? deviceSize <= DEVICE_SIZES.S
@@ -27723,27 +28230,492 @@ class TopNavigation {
     }; }
 }
 
-const icTypographyCss = "/*!@html*/html.sc-ic-typography{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-typography{margin:0}/*!@main*/main.sc-ic-typography{display:block}/*!@h1*/h1.sc-ic-typography{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-typography{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-typography{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-typography{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-typography{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-typography,strong.sc-ic-typography{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-typography,kbd.sc-ic-typography,samp.sc-ic-typography{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-typography{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-typography,sup.sc-ic-typography{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-typography{bottom:-0.25em}/*!@sup*/sup.sc-ic-typography{top:-0.5em}/*!@img*/img.sc-ic-typography{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-typography,input.sc-ic-typography,optgroup.sc-ic-typography,select.sc-ic-typography,textarea.sc-ic-typography{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-typography,input.sc-ic-typography{overflow:visible}/*!@button,\nselect*/button.sc-ic-typography,select.sc-ic-typography{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-typography,[type=\"button\"].sc-ic-typography,[type=\"reset\"].sc-ic-typography,[type=\"submit\"].sc-ic-typography{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-typography::-moz-focus-inner,[type=\"button\"].sc-ic-typography::-moz-focus-inner,[type=\"reset\"].sc-ic-typography::-moz-focus-inner,[type=\"submit\"].sc-ic-typography::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-typography:-moz-focusring,[type=\"button\"].sc-ic-typography:-moz-focusring,[type=\"reset\"].sc-ic-typography:-moz-focusring,[type=\"submit\"].sc-ic-typography:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-typography{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-typography{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-typography{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-typography{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-typography,[type=\"radio\"].sc-ic-typography{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-typography::-webkit-inner-spin-button,[type=\"number\"].sc-ic-typography::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-typography{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-typography::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-typography::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-typography{display:block}/*!@summary*/summary.sc-ic-typography{display:list-item}/*!@template*/template.sc-ic-typography{display:none}/*!@[hidden]*/[hidden].sc-ic-typography{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-typography,body.sc-ic-typography,div.sc-ic-typography,span.sc-ic-typography,applet.sc-ic-typography,object.sc-ic-typography,iframe.sc-ic-typography,h1.sc-ic-typography,h2.sc-ic-typography,h3.sc-ic-typography,h4.sc-ic-typography,h5.sc-ic-typography,h6.sc-ic-typography,p.sc-ic-typography,blockquote.sc-ic-typography,pre.sc-ic-typography,a.sc-ic-typography,abbr.sc-ic-typography,acronym.sc-ic-typography,address.sc-ic-typography,big.sc-ic-typography,cite.sc-ic-typography,code.sc-ic-typography,del.sc-ic-typography,dfn.sc-ic-typography,em.sc-ic-typography,img.sc-ic-typography,ins.sc-ic-typography,kbd.sc-ic-typography,q.sc-ic-typography,s.sc-ic-typography,samp.sc-ic-typography,small.sc-ic-typography,strike.sc-ic-typography,strong.sc-ic-typography,sub.sc-ic-typography,sup.sc-ic-typography,tt.sc-ic-typography,var.sc-ic-typography,b.sc-ic-typography,u.sc-ic-typography,i.sc-ic-typography,center.sc-ic-typography,dl.sc-ic-typography,dt.sc-ic-typography,dd.sc-ic-typography,ol.sc-ic-typography,ul.sc-ic-typography,li.sc-ic-typography,fieldset.sc-ic-typography,form.sc-ic-typography,label.sc-ic-typography,legend.sc-ic-typography,table.sc-ic-typography,caption.sc-ic-typography,tbody.sc-ic-typography,tfoot.sc-ic-typography,thead.sc-ic-typography,tr.sc-ic-typography,th.sc-ic-typography,td.sc-ic-typography,article.sc-ic-typography,aside.sc-ic-typography,canvas.sc-ic-typography,details.sc-ic-typography,embed.sc-ic-typography,figure.sc-ic-typography,figcaption.sc-ic-typography,footer.sc-ic-typography,header.sc-ic-typography,hgroup.sc-ic-typography,menu.sc-ic-typography,nav.sc-ic-typography,output.sc-ic-typography,ruby.sc-ic-typography,section.sc-ic-typography,summary.sc-ic-typography,time.sc-ic-typography,mark.sc-ic-typography,audio.sc-ic-typography,video.sc-ic-typography{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-typography-h{display:block;position:relative}/*!@:host(.ic-typography-vertical-margins-h1)*/.ic-typography-vertical-margins-h1.sc-ic-typography-h{margin:0 0 var(--ic-space-xl)}/*!@:host(.ic-typography-vertical-margins-h2)*/.ic-typography-vertical-margins-h2.sc-ic-typography-h{margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}/*!@:host(.ic-typography-vertical-margins-h3)*/.ic-typography-vertical-margins-h3.sc-ic-typography-h{margin:var(--ic-space-xl) 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-h4)*/.ic-typography-vertical-margins-h4.sc-ic-typography-h{margin:var(--ic-space-lg) 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small)*/.ic-typography-vertical-margins-subtitle-large.sc-ic-typography-h,.ic-typography-vertical-margins-subtitle-small.sc-ic-typography-h,.ic-typography-vertical-margins-body.sc-ic-typography-h,.ic-typography-vertical-margins-code-large.sc-ic-typography-h,.ic-typography-vertical-margins-code-small.sc-ic-typography-h,.ic-typography-vertical-margins-code-extra-small.sc-ic-typography-h{margin:0 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase)*/.ic-typography-vertical-margins-caption.sc-ic-typography-h,.ic-typography-vertical-margins-caption-uppercase.sc-ic-typography-h{margin:0 0 var(--ic-space-xs)}/*!@:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child)*/.ic-typography-vertical-margins-h2.sc-ic-typography-h:first-child,.ic-typography-vertical-margins-h3.sc-ic-typography-h:first-child,.ic-typography-vertical-margins-h4.sc-ic-typography-h:first-child{margin-top:0}/*!@:host(.ic-typography-h1)*/.ic-typography-h1.sc-ic-typography-h{font:var(--ic-font-h1) !important}/*!@:host(.ic-typography-h2)*/.ic-typography-h2.sc-ic-typography-h{font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-h3)*/.ic-typography-h3.sc-ic-typography-h{font:var(--ic-font-h3)}/*!@:host(.ic-typography-h4)*/.ic-typography-h4.sc-ic-typography-h{font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-subtitle-large)*/.ic-typography-subtitle-large.sc-ic-typography-h{font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-subtitle-small)*/.ic-typography-subtitle-small.sc-ic-typography-h{font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-body)*/.ic-typography-body.sc-ic-typography-h{font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}/*!@:host(.ic-typography-caption)*/.ic-typography-caption.sc-ic-typography-h{font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-caption-uppercase)*/.ic-typography-caption-uppercase.sc-ic-typography-h{font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}/*!@:host(.ic-typography-label)*/.ic-typography-label.sc-ic-typography-h{font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-label-uppercase)*/.ic-typography-label-uppercase.sc-ic-typography-h{font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}/*!@:host(.ic-typography-code-large)*/.ic-typography-code-large.sc-ic-typography-h{font:var(--ic-font-code-large);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-code-small)*/.ic-typography-code-small.sc-ic-typography-h{font:var(--ic-font-code-small);letter-spacing:var(--ic-font-letter-spacing-0pt005)}/*!@:host(.ic-typography-code-extra-small)*/.ic-typography-code-extra-small.sc-ic-typography-h{font:var(--ic-font-code-extra-small);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-badge)*/.ic-typography-badge.sc-ic-typography-h{font:var(--ic-font-badge);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-badge-small)*/.ic-typography-badge-small.sc-ic-typography-h{font:var(--ic-font-badge-small);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-no-wrap)*/.ic-typography-no-wrap.sc-ic-typography-h{white-space:nowrap}/*!@:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label)*/.sc-ic-typography-h .sc-ic-typography-s>h1,.sc-ic-typography-h.sc-ic-typography-s>h2,.sc-ic-typography-h .sc-ic-typography-s>h2,.sc-ic-typography-h.sc-ic-typography-s>h3,.sc-ic-typography-h .sc-ic-typography-s>h3,.sc-ic-typography-h.sc-ic-typography-s>h4,.sc-ic-typography-h .sc-ic-typography-s>h4,.sc-ic-typography-h.sc-ic-typography-s>h5,.sc-ic-typography-h .sc-ic-typography-s>h5,.sc-ic-typography-h.sc-ic-typography-s>h6,.sc-ic-typography-h .sc-ic-typography-s>h6,.sc-ic-typography-h.sc-ic-typography-s>p,.sc-ic-typography-h .sc-ic-typography-s>p,.sc-ic-typography-h.sc-ic-typography-s>label,.sc-ic-typography-h .sc-ic-typography-s>label{font:inherit;letter-spacing:inherit}/*!@.trunc-wrapper*/.trunc-wrapper.sc-ic-typography{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--truncation-max-lines, initial);-webkit-line-clamp:var(--truncation-max-lines, initial);overflow:hidden}/*!@.trunc-btn*/.trunc-btn.sc-ic-typography{border:none;background:none;padding:0;color:var(--ic-color-primary-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}/*!@.trunc-btn:hover,\n.trunc-btn.focus*/.trunc-btn.sc-ic-typography:hover,.trunc-btn.focus.sc-ic-typography{outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none;cursor:pointer}/*!@:host(.strikethrough)*/.strikethrough.sc-ic-typography-h{text-decoration:line-through}/*!@:host(.underline)*/.underline.sc-ic-typography-h{text-decoration:underline}/*!@:host(.underline.strikethrough)*/.underline.strikethrough.sc-ic-typography-h{text-decoration:line-through underline}/*!@:host(.italic)*/.italic.sc-ic-typography-h{font-style:italic !important}/*!@:host(.bold)*/.bold.sc-ic-typography-h{font-weight:var(--ic-font-weight-bold)}@supports (text-underline-offset: 25%){/*!@.trunc-btn:hover,\n  .trunc-btn.focus*/.trunc-btn.sc-ic-typography:hover,.trunc-btn.focus.sc-ic-typography{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
+var arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
+</svg>`;
+
+const icTreeItemCss = "/*!@:host*/.sc-ic-tree-item-h{display:block;border:none;position:relative}/*!@:host .tree-item-content*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item{display:flex;align-items:center;height:calc(var(--ic-space-xl) + var(--ic-space-xs));padding:0 var(--ic-space-xs);text-decoration:none;color:var(--ic-primary-text)}/*!@::slotted([slot=\"router-item\"])*/.sc-ic-tree-item-s>[slot=\"router-item\"]{display:flex;align-items:center;height:calc(var(--ic-space-xl) + var(--ic-space-xs));text-decoration:none;font-family:var(--ic-font-body-family);color:var(--ic-primary-text);padding:0 var(--ic-space-xs) !important}/*!@::slotted([slot=\"router-item\"].ic-tree-item-single)*/.sc-ic-tree-item-s>[slot=\"router-item\"].ic-tree-item-single{padding-left:calc(var(--ic-space-xl) + var(--ic-space-xs)) !important}/*!@:host .tree-item-content:focus,\n::slotted([slot=\"router-item\"]:focus)*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item:focus,.sc-ic-tree-item-s>[slot=\"router-item\"]:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}/*!@:host .tree-item-content:hover,\n::slotted([slot=\"router-item\"]:hover)*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item:hover,.sc-ic-tree-item-s>[slot=\"router-item\"]:hover{background-color:var(--ic-action-dark-bg-hover) !important;cursor:pointer}/*!@:host .tree-item-content:active,\n::slotted([slot=\"router-item\"]:active)*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item:active,.sc-ic-tree-item-s>[slot=\"router-item\"]:active{background-color:var(--ic-action-dark-bg-active) !important}/*!@:host(.ic-tree-item-selected) .tree-item-content,\n:host(.ic-tree-item-selected) ::slotted([slot=\"router-item\"])*/.ic-tree-item-selected.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-selected.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-selected .sc-ic-tree-item-s>[slot=\"router-item\"]{background-color:var(--ic-action-default-bg-hover) !important}/*!@:host(.ic-tree-item-small) .tree-item-content,\n:host(.ic-tree-item-small) ::slotted([slot=\"router-item\"])*/.ic-tree-item-small.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-small.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-small .sc-ic-tree-item-s>[slot=\"router-item\"]{height:var(--ic-space-xl)}/*!@:host(.ic-tree-item-large) .tree-item-content,\n:host(.ic-tree-item-large) ::slotted([slot=\"router-item\"])*/.ic-tree-item-large.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-large.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-large .sc-ic-tree-item-s>[slot=\"router-item\"]{height:var(--ic-space-xxl)}/*!@:host(.ic-tree-item-disabled)*/.ic-tree-item-disabled.sc-ic-tree-item-h{pointer-events:none}/*!@:host(.ic-tree-item-disabled) .tree-item-content,\n:host(.ic-tree-item-disabled) .arrow-dropdown,\n:host(.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),\n:host(.ic-tree-item-disabled) ::slotted([slot=\"router-item\"])*/.ic-tree-item-disabled.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.ic-tree-item-disabled.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-disabled.sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-disabled .sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-disabled.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-disabled .sc-ic-tree-item-s>[slot=\"router-item\"]{color:var(--ic-architectural-200) !important;fill:var(--ic-architectural-200);pointer-events:none}/*!@:host(.ic-tree-item-light) .tree-item-content,\n:host(.ic-tree-item-light) .arrow-dropdown,\n:host(.ic-tree-item-light) ::slotted([slot=\"icon\"]),\n:host(.ic-tree-item-light) ::slotted([slot=\"router-item\"])*/.ic-tree-item-light.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.ic-tree-item-light.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-light.sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-light .sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-light.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-light .sc-ic-tree-item-s>[slot=\"router-item\"]{color:var(--ic-architectural-white);fill:var(--ic-architectural-white)}/*!@:host .arrow-dropdown*/.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item{color:var(--ic-action-default);margin-right:var(--ic-space-xs)}/*!@:host(.ic-tree-item-small) .arrow-dropdown*/.ic-tree-item-small.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item{margin-right:var(--ic-space-xxs)}/*!@:host .tree-item-expanded*/.sc-ic-tree-item-h .tree-item-expanded.sc-ic-tree-item{transform:rotate(180deg);margin-top:calc(-1 * var(--ic-space-xxs))}/*!@:host .ic-tree-item-single*/.sc-ic-tree-item-h .ic-tree-item-single.sc-ic-tree-item{padding-left:calc(var(--ic-space-xl) + var(--ic-space-xs))}/*!@:host(.ic-tree-item-small) .ic-tree-item-single*/.ic-tree-item-small.sc-ic-tree-item-h .ic-tree-item-single.sc-ic-tree-item{padding-left:calc(var(--ic-space-xl) + var(--ic-space-xxs))}/*!@.icon-container*/.icon-container.sc-ic-tree-item{width:var(--ic-space-lg);height:var(--ic-space-lg);margin:0 var(--ic-space-xs) 0 0}/*!@:host(.ic-tree-item-small) .icon-container*/.ic-tree-item-small.sc-ic-tree-item-h .icon-container.sc-ic-tree-item{margin:0 var(--ic-space-xxs) 0 0}/*!@.ic-text-overflow*/.ic-text-overflow.sc-ic-tree-item{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}/*!@.ic-tooltip-overflow*/.ic-tooltip-overflow.sc-ic-tree-item{overflow:hidden}@media (forced-colors: active){/*!@::slotted([slot=\"icon\"])*/.sc-ic-tree-item-s>[slot=\"icon\"]{fill:currentcolor}/*!@:host(.ic-tree-item-disabled) .tree-item-content,\n  :host(.ic-tree-item-disabled) .arrow-dropdown,\n  :host(.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),\n  :host(.ic-tree-item-disabled) ::slotted([slot=\"router-item\"])*/.ic-tree-item-disabled.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.ic-tree-item-disabled.sc-ic-tree-item-h .arrow-dropdown.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-disabled.sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-disabled .sc-ic-tree-item-s>[slot=\"icon\"],.sc-ic-tree-item-h.ic-tree-item-disabled.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-disabled .sc-ic-tree-item-s>[slot=\"router-item\"]{color:GrayText !important;fill:GrayText !important}/*!@:host .tree-item-content:focus,\n  ::slotted([slot=\"router-item\"]:focus)*/.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item:focus,.sc-ic-tree-item-s>[slot=\"router-item\"]:focus{border:var(--ic-hc-border) !important}/*!@:host(.ic-tree-item-selected) .tree-item-content,\n  :host(.ic-tree-item-selected) ::slotted([slot=\"router-item\"])*/.ic-tree-item-selected.sc-ic-tree-item-h .tree-item-content.sc-ic-tree-item,.sc-ic-tree-item-h.ic-tree-item-selected.sc-ic-tree-item-s>[slot=\"router-item\"],.sc-ic-tree-item-h.ic-tree-item-selected .sc-ic-tree-item-s>[slot=\"router-item\"]{color:Highlight !important}}";
+
+let treeItemIds = 0;
+/**
+ * @slot label - Content is set as the tree item label.
+ * @slot icon - Content is placed to the left of the label.
+ * @slot router-item - Handle routing by nesting your routes in this slot.
+ */
+class TreeItem {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icTreeItemSelected = createEvent(this, "icTreeItemSelected", 7);
+        this.treeItemId = `ic-tree-item-${treeItemIds++}`;
+        this.treeItemTag = "IC-TREE-ITEM";
+        this.hostMutationObserver = null;
+        this.TOOLTIP = "ic-tooltip";
+        this.handleTreeItemClicked = () => {
+            if (this.isParent) {
+                this.expanded = !this.expanded;
+                this.hasParentExpanded = true;
+            }
+            this.updateAriaLabel();
+            this.selected = true;
+            this.watchSelectedHandler();
+        };
+        this.setTreeItemPadding = () => {
+            let level = 1;
+            let parentElement = this.el.parentElement;
+            const treeItemContent = this.el.shadowRoot.querySelector(".tree-item-content");
+            const isSiblingOfParent = Array.from(parentElement.children)
+                .map((sibling) => {
+                if (sibling !== this.el &&
+                    !sibling.querySelector('[slot="router-item"]') &&
+                    !sibling.querySelector('[slot="label"]')) {
+                    return sibling.children.length > 0;
+                }
+                else {
+                    return false;
+                }
+            })
+                .includes(true);
+            const isChild = parentElement.tagName === this.treeItemTag;
+            const isRouterItem = this.hasRouterSlot();
+            if ((isSiblingOfParent && !this.el.isParent) ||
+                (isChild && !this.el.isParent)) {
+                if (isRouterItem) {
+                    this.routerSlot.classList.add("ic-tree-item-single");
+                }
+                else {
+                    treeItemContent.classList.add("ic-tree-item-single");
+                }
+            }
+            while (parentElement) {
+                if (parentElement.tagName === this.treeItemTag) {
+                    level++;
+                    if (!this.el.isParent && isSiblingOfParent) {
+                        treeItemContent.style.paddingLeft = `calc(var(--ic-space-xl) + ${level * 16}px)`;
+                    }
+                    else if (!this.el.isParent) {
+                        treeItemContent.style.paddingLeft = `calc(var(--ic-space-xs) + ${level * 24}px`;
+                    }
+                    else {
+                        treeItemContent.style.paddingLeft = `${level * 16}px`;
+                    }
+                }
+                parentElement = parentElement.parentElement;
+            }
+        };
+        this.truncateTreeItemLabel = (treeItem) => {
+            const typographyEl = treeItem.shadowRoot.querySelector(".tree-item-label");
+            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
+            const treeContent = treeItem.shadowRoot.querySelector(".tree-item-content");
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (treeContent === null || treeContent === void 0 ? void 0 : treeContent.clientHeight)) {
+                typographyEl.classList.add("ic-text-overflow");
+                if (!tooltip) {
+                    const tooltipEl = document.createElement("ic-tooltip");
+                    tooltipEl.setAttribute("target", this.el.id);
+                    tooltipEl.setAttribute("label", typographyEl.textContent);
+                    tooltipEl.classList.add("ic-tooltip-overflow");
+                    tooltipEl.setAttribute("placement", "right");
+                    treeContent.appendChild(tooltipEl);
+                    tooltipEl.appendChild(typographyEl);
+                }
+            }
+        };
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations(addedNodes, removedNodes, "icon")
+                : false)) ;
+        };
+        this.handleDisplayTooltip = (display) => {
+            const typographyEl = this.el.shadowRoot.querySelector(".tree-item-label");
+            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.displayTooltip(display);
+        };
+        this.childTreeItems = undefined;
+        this.appearance = "dark";
+        this.disabled = false;
+        this.expanded = false;
+        this.hasParentExpanded = false;
+        this.href = undefined;
+        this.hreflang = "";
+        this.isParent = false;
+        this.label = "";
+        this.referrerpolicy = undefined;
+        this.rel = undefined;
+        this.selected = false;
+        this.size = "default";
+        this.target = undefined;
+    }
+    watchSelectedHandler() {
+        if (this.selected) {
+            this.icTreeItemSelected.emit({ id: this.el.id });
+        }
+        this.updateAriaLabel();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentDidLoad() {
+        this.childTreeItems = Array.from(this.el.children).filter((child) => child.tagName === this.treeItemTag);
+        if (this.childTreeItems.length > 0) {
+            this.isParent = true;
+        }
+        this.setTreeItemPadding();
+        this.updateAriaLabel();
+        this.truncateTreeItemLabel(this.el);
+        !isSlotUsed(this.el, "label") &&
+            onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tree item");
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
+    }
+    componentDidUpdate() {
+        if (this.hasParentExpanded) {
+            this.childTreeItems.forEach((child) => {
+                this.truncateTreeItemLabel(child);
+            });
+            this.hasParentExpanded = false;
+        }
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Enter" || ev.key === " ") {
+            ev.stopImmediatePropagation();
+            this.handleTreeItemClicked();
+        }
+    }
+    /**
+     * Sets focus on the native `input`.
+     */
+    async setFocus() {
+        var _a, _b;
+        if (this.hasRouterSlot()) {
+            (_a = this.routerSlot) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = this.treeItemElement) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    /**
+     * @internal Updates the aria-label of the tree item.
+     */
+    async updateAriaLabel() {
+        let ariaLabel;
+        if (this.hasRouterSlot()) {
+            ariaLabel = this.routerSlot.textContent;
+        }
+        else if (isSlotUsed(this.el, "label")) {
+            ariaLabel = this.el.querySelector('[slot="label"]').textContent;
+        }
+        else {
+            ariaLabel = this.label;
+        }
+        if (this.isParent) {
+            ariaLabel = `${ariaLabel}, triggers submenu, ${this.expanded ? "expanded" : "collapsed"}`;
+        }
+        if (this.el.parentElement) {
+            const treeItems = Array.from(this.el.parentElement.children).filter((child) => child.tagName === this.treeItemTag);
+            const index = treeItems.indexOf(this.el) + 1;
+            const parentChildren = treeItems.length;
+            ariaLabel = `${ariaLabel}, ${index} of ${parentChildren}`;
+        }
+        if (this.selected) {
+            ariaLabel = `${ariaLabel}, active`;
+        }
+        if (this.disabled) {
+            ariaLabel = `${ariaLabel}, dimmed`;
+        }
+        if (this.hasRouterSlot()) {
+            this.routerSlot.ariaLabel = ariaLabel;
+        }
+        else {
+            this.treeItemElement.ariaLabel = ariaLabel;
+        }
+    }
+    hasRouterSlot() {
+        this.routerSlot = this.el.querySelector('[slot="router-item"]');
+        return !!this.routerSlot;
+    }
+    render() {
+        const { appearance, disabled, label, selected, size, expanded } = this;
+        const Component = this.href && !this.disabled ? "a" : "div";
+        const attrs = Component == "a" && {
+            href: this.href,
+            hrefLang: this.hreflang,
+            referrerPolicy: this.referrerpolicy,
+            rel: this.rel,
+            target: this.target,
+        };
+        return (hAsync(Host, { class: {
+                [`ic-tree-item-${appearance}`]: true,
+                "ic-tree-item-disabled": disabled,
+                "ic-tree-item-selected": !disabled && selected,
+                [`ic-tree-item-${size}`]: size !== "default",
+            }, id: this.treeItemId }, this.hasRouterSlot() ? (hAsync("slot", { name: "router-item" })) : (hAsync(Component, Object.assign({ class: {
+                "tree-item-content": true,
+            }, tabIndex: disabled ? -1 : 0, onClick: this.handleTreeItemClicked, ref: (el) => (this.treeItemElement = el), "aria-disabled": disabled ? "true" : "false", "aria-live": "polite" }, attrs, { onFocus: () => this.handleDisplayTooltip(true), onBlur: () => this.handleDisplayTooltip(false) }), this.isParent && (hAsync("span", { class: {
+                ["arrow-dropdown"]: true,
+                ["tree-item-expanded"]: expanded,
+            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? hAsync("slot", { name: "label" }) : label))), expanded && (hAsync("div", { "aria-hidden": `${!expanded}` }, hAsync("slot", null)))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selected": ["watchSelectedHandler"]
+    }; }
+    static get style() { return icTreeItemCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-tree-item",
+        "$members$": {
+            "appearance": [1],
+            "disabled": [4],
+            "expanded": [1028],
+            "hasParentExpanded": [1028, "has-parent-expanded"],
+            "href": [1],
+            "hreflang": [1],
+            "isParent": [1028, "is-parent"],
+            "label": [1],
+            "referrerpolicy": [1],
+            "rel": [1],
+            "selected": [1028],
+            "size": [1],
+            "target": [1],
+            "childTreeItems": [32],
+            "setFocus": [64],
+            "updateAriaLabel": [64]
+        },
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const icTreeViewCss = "/*!@:host*/.sc-ic-tree-view-h{display:block;width:var(--tree-view-width, 100%)}/*!@:host .heading-area-container*/.sc-ic-tree-view-h .heading-area-container.sc-ic-tree-view{border-bottom:var(--ic-border-default);display:flex;align-items:center;height:calc(var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px));padding:0 var(--ic-space-xs)}/*!@:host(.ic-tree-view-small) .heading-area-container*/.ic-tree-view-small.sc-ic-tree-view-h .heading-area-container.sc-ic-tree-view{height:calc(var(--ic-space-xl) - var(--ic-space-1px))}/*!@:host(.ic-tree-view-large) .heading-area-container*/.ic-tree-view-large.sc-ic-tree-view-h .heading-area-container.sc-ic-tree-view{height:calc(var(--ic-space-xxl) - var(--ic-space-1px))}/*!@:host(.ic-tree-view-light) .heading-area-container*/.ic-tree-view-light.sc-ic-tree-view-h .heading-area-container.sc-ic-tree-view{color:var(--ic-architectural-white);fill:var(--ic-architectural-white)}/*!@.icon-container*/.icon-container.sc-ic-tree-view{width:var(--ic-space-lg);height:var(--ic-space-lg);margin:0 var(--ic-space-xs) 0 0}/*!@:host(.ic-tree-view-small) .icon-container*/.ic-tree-view-small.sc-ic-tree-view-h .icon-container.sc-ic-tree-view{margin:0 var(--ic-space-xxs) 0 0}/*!@.ic-text-overflow*/.ic-text-overflow.sc-ic-tree-view{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}/*!@.ic-tooltip-overflow*/.ic-tooltip-overflow.sc-ic-tree-view{overflow:hidden}@media (forced-colors: active){/*!@::slotted([slot=\"icon\"])*/.sc-ic-tree-view-s>[slot=\"icon\"]{fill:currentcolor}}";
+
+let treeViewIds = 0;
+/**
+ * @slot heading - Content is set as the tree view heading.
+ * @slot icon - Content is placed to the left of the heading.
+ */
+class TreeView {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.treeViewId = `ic-tree-view-${treeViewIds++}`;
+        this.treeItemTag = "IC-TREE-ITEM";
+        this.hostMutationObserver = null;
+        this.handleKeyDown = (event) => {
+            var _a;
+            const focussedChild = this.treeItems.indexOf(this.treeItems.filter((el) => el === document.activeElement)[0]);
+            const expanded = (_a = this.treeItems[focussedChild]) === null || _a === void 0 ? void 0 : _a.expanded;
+            switch (event.key) {
+                case "ArrowDown":
+                    this.treeItems[this.getNextItemToSelect(focussedChild, true)].setFocus();
+                    if (focussedChild !== this.treeItems.length - 1) {
+                        event.preventDefault();
+                    }
+                    break;
+                case "ArrowUp":
+                    this.treeItems[this.getNextItemToSelect(focussedChild, false)].setFocus();
+                    if (focussedChild !== 0) {
+                        event.preventDefault();
+                    }
+                    break;
+                case "ArrowRight":
+                    if (this.treeItems[focussedChild].isParent && !expanded) {
+                        this.treeItems[focussedChild].expanded = true;
+                        this.treeItems[focussedChild].hasParentExpanded = true;
+                        this.treeItems[focussedChild].updateAriaLabel();
+                    }
+                    else if (this.treeItems[focussedChild].isParent && expanded) {
+                        this.treeItems[focussedChild].children[0].setFocus();
+                    }
+                    event.preventDefault();
+                    break;
+                case "ArrowLeft":
+                    if (this.treeItems[focussedChild].isParent && expanded) {
+                        this.treeItems[focussedChild].expanded = false;
+                        this.treeItems[focussedChild].hasParentExpanded = false;
+                        this.treeItems[focussedChild].updateAriaLabel();
+                    }
+                    else if (this.treeItems[focussedChild].parentElement.tagName ===
+                        this.treeItemTag) {
+                        this.treeItems[focussedChild].parentElement.setFocus();
+                    }
+                    event.preventDefault();
+                    break;
+            }
+        };
+        this.getNextItemToSelect = (currentItem, movingDown) => {
+            const numItems = this.treeItems.length - 1;
+            if (currentItem < 1) {
+                currentItem = 0;
+            }
+            let nextItem = movingDown ? currentItem + 1 : currentItem - 1;
+            if (nextItem < 0) {
+                nextItem = 0;
+            }
+            else if (nextItem > numItems) {
+                nextItem = numItems;
+            }
+            const maxAttempts = numItems + 1;
+            let attempts = 0;
+            while (attempts < maxAttempts) {
+                if (nextItem < 0 || nextItem > numItems) {
+                    return currentItem;
+                }
+                if (!this.treeItems[nextItem].disabled &&
+                    (this.treeItems[nextItem].parentElement.tagName !== this.treeItemTag ||
+                        this.treeItems[nextItem].parentElement
+                            .expanded)) {
+                    return nextItem;
+                }
+                if (nextItem === numItems && this.treeItems[nextItem].disabled) {
+                    return currentItem;
+                }
+                nextItem = movingDown ? nextItem + 1 : nextItem - 1;
+                attempts++;
+            }
+            return currentItem;
+        };
+        this.linkTreeItems = () => {
+            this.treeItems.forEach((treeItem) => {
+                treeItem.setAttribute("context-id", this.treeViewId);
+            });
+        };
+        this.setTreeItems = () => {
+            this.treeItems = this.getAllTreeItems(this.el);
+            this.linkTreeItems();
+        };
+        this.addSlotChangeListener = () => {
+            this.el.addEventListener("slotchange", this.setTreeItems);
+        };
+        this.truncateTreeViewHeading = () => {
+            const typographyEl = this.el.shadowRoot.querySelector(".tree-view-header");
+            const tooltip = typographyEl.closest("ic-tooltip");
+            const headingContainer = this.el.shadowRoot.querySelector(".heading-area-container");
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (headingContainer === null || headingContainer === void 0 ? void 0 : headingContainer.clientHeight)) {
+                typographyEl.classList.add("ic-text-overflow");
+                if (!tooltip) {
+                    const tooltipEl = document.createElement("ic-tooltip");
+                    tooltipEl.setAttribute("target", this.el.id);
+                    tooltipEl.setAttribute("label", typographyEl.textContent);
+                    tooltipEl.classList.add("ic-tooltip-overflow");
+                    tooltipEl.setAttribute("placement", "right");
+                    headingContainer.appendChild(tooltipEl);
+                    tooltipEl.appendChild(typographyEl);
+                }
+            }
+        };
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations(addedNodes, removedNodes, "icon")
+                : false)) ;
+        };
+        this.isHeadingDefined = () => isPropDefined(this.heading) && this.heading !== null;
+        this.hasHeadingAreaContent = () => {
+            return (isSlotUsed(this.el, "heading") ||
+                this.isHeadingDefined() ||
+                isSlotUsed(this.el, "icon"));
+        };
+        this.treeItems = undefined;
+        this.appearance = "dark";
+        this.heading = "";
+        this.size = "default";
+    }
+    watchAppearanceHandler() {
+        this.treeItems.forEach((treeItem) => {
+            treeItem.appearance = this.appearance;
+        });
+    }
+    watchSizeHandler() {
+        this.treeItems.forEach((treeItem) => {
+            treeItem.size = this.size;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.removeEventListener("slotchange", this.setTreeItems);
+        (_b = this.hostMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    componentDidLoad() {
+        this.setTreeItems();
+        this.watchAppearanceHandler();
+        this.watchSizeHandler();
+        setTimeout(() => {
+            this.truncateTreeViewHeading();
+        }, 100);
+        this.addSlotChangeListener();
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
+    }
+    handleTreeItemSelected(event) {
+        this.treeItems.forEach((treeItem) => {
+            if (treeItem.selected && treeItem.id !== event.detail.id) {
+                treeItem.selected = false;
+            }
+        });
+    }
+    getAllTreeItems(element) {
+        const treeItems = [];
+        const collectTreeItems = (el) => {
+            Array.from(el.children).forEach((child) => {
+                if (child.tagName === this.treeItemTag) {
+                    treeItems.push(child);
+                }
+                collectTreeItems(child);
+            });
+        };
+        collectTreeItems(element);
+        return treeItems;
+    }
+    render() {
+        const { appearance, heading, size } = this;
+        return (hAsync(Host, { "context-id": this.treeViewId, class: {
+                [`ic-tree-view-${appearance}`]: true,
+                [`ic-tree-view-${size}`]: size !== "default",
+            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (hAsync("div", { class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "subtitle-large", class: "tree-view-header" }, isSlotUsed(this.el, "heading") ? (hAsync("slot", { name: "heading" })) : (heading)))), hAsync("slot", null)));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "appearance": ["watchAppearanceHandler"],
+        "size": ["watchSizeHandler"]
+    }; }
+    static get style() { return icTreeViewCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-tree-view",
+        "$members$": {
+            "appearance": [1],
+            "heading": [1],
+            "size": [1],
+            "treeItems": [32]
+        },
+        "$listeners$": [[0, "icTreeItemSelected", "handleTreeItemSelected"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const icTypographyCss = "/*!@html*/html.sc-ic-typography{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-typography{margin:0}/*!@main*/main.sc-ic-typography{display:block}/*!@h1*/h1.sc-ic-typography{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-typography{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-typography{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-typography{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-typography{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-typography,strong.sc-ic-typography{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-typography,kbd.sc-ic-typography,samp.sc-ic-typography{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-typography{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-typography,sup.sc-ic-typography{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-typography{bottom:-0.25em}/*!@sup*/sup.sc-ic-typography{top:-0.5em}/*!@img*/img.sc-ic-typography{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-typography,input.sc-ic-typography,optgroup.sc-ic-typography,select.sc-ic-typography,textarea.sc-ic-typography{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-typography,input.sc-ic-typography{overflow:visible}/*!@button,\nselect*/button.sc-ic-typography,select.sc-ic-typography{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-typography,[type=\"button\"].sc-ic-typography,[type=\"reset\"].sc-ic-typography,[type=\"submit\"].sc-ic-typography{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-typography::-moz-focus-inner,[type=\"button\"].sc-ic-typography::-moz-focus-inner,[type=\"reset\"].sc-ic-typography::-moz-focus-inner,[type=\"submit\"].sc-ic-typography::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-typography:-moz-focusring,[type=\"button\"].sc-ic-typography:-moz-focusring,[type=\"reset\"].sc-ic-typography:-moz-focusring,[type=\"submit\"].sc-ic-typography:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-typography{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-typography{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-typography{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-typography{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-typography,[type=\"radio\"].sc-ic-typography{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-typography::-webkit-inner-spin-button,[type=\"number\"].sc-ic-typography::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-typography{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-typography::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-typography::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-typography{display:block}/*!@summary*/summary.sc-ic-typography{display:list-item}/*!@template*/template.sc-ic-typography{display:none}/*!@[hidden]*/[hidden].sc-ic-typography{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-typography,body.sc-ic-typography,div.sc-ic-typography,span.sc-ic-typography,applet.sc-ic-typography,object.sc-ic-typography,iframe.sc-ic-typography,h1.sc-ic-typography,h2.sc-ic-typography,h3.sc-ic-typography,h4.sc-ic-typography,h5.sc-ic-typography,h6.sc-ic-typography,p.sc-ic-typography,blockquote.sc-ic-typography,pre.sc-ic-typography,a.sc-ic-typography,abbr.sc-ic-typography,acronym.sc-ic-typography,address.sc-ic-typography,big.sc-ic-typography,cite.sc-ic-typography,code.sc-ic-typography,del.sc-ic-typography,dfn.sc-ic-typography,em.sc-ic-typography,img.sc-ic-typography,ins.sc-ic-typography,kbd.sc-ic-typography,q.sc-ic-typography,s.sc-ic-typography,samp.sc-ic-typography,small.sc-ic-typography,strike.sc-ic-typography,strong.sc-ic-typography,sub.sc-ic-typography,sup.sc-ic-typography,tt.sc-ic-typography,var.sc-ic-typography,b.sc-ic-typography,u.sc-ic-typography,i.sc-ic-typography,center.sc-ic-typography,dl.sc-ic-typography,dt.sc-ic-typography,dd.sc-ic-typography,ol.sc-ic-typography,ul.sc-ic-typography,li.sc-ic-typography,fieldset.sc-ic-typography,form.sc-ic-typography,label.sc-ic-typography,legend.sc-ic-typography,table.sc-ic-typography,caption.sc-ic-typography,tbody.sc-ic-typography,tfoot.sc-ic-typography,thead.sc-ic-typography,tr.sc-ic-typography,th.sc-ic-typography,td.sc-ic-typography,article.sc-ic-typography,aside.sc-ic-typography,canvas.sc-ic-typography,details.sc-ic-typography,embed.sc-ic-typography,figure.sc-ic-typography,figcaption.sc-ic-typography,footer.sc-ic-typography,header.sc-ic-typography,hgroup.sc-ic-typography,menu.sc-ic-typography,nav.sc-ic-typography,output.sc-ic-typography,ruby.sc-ic-typography,section.sc-ic-typography,summary.sc-ic-typography,time.sc-ic-typography,mark.sc-ic-typography,audio.sc-ic-typography,video.sc-ic-typography{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-typography-h{display:block;position:relative}/*!@:host(.ic-typography-vertical-margins-h1)*/.ic-typography-vertical-margins-h1.sc-ic-typography-h{margin:0 0 var(--ic-space-xl)}/*!@:host(.ic-typography-vertical-margins-h2)*/.ic-typography-vertical-margins-h2.sc-ic-typography-h{margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}/*!@:host(.ic-typography-vertical-margins-h3)*/.ic-typography-vertical-margins-h3.sc-ic-typography-h{margin:var(--ic-space-xl) 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-h4)*/.ic-typography-vertical-margins-h4.sc-ic-typography-h{margin:var(--ic-space-lg) 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small)*/.ic-typography-vertical-margins-subtitle-large.sc-ic-typography-h,.ic-typography-vertical-margins-subtitle-small.sc-ic-typography-h,.ic-typography-vertical-margins-body.sc-ic-typography-h,.ic-typography-vertical-margins-code-large.sc-ic-typography-h,.ic-typography-vertical-margins-code-small.sc-ic-typography-h,.ic-typography-vertical-margins-code-extra-small.sc-ic-typography-h{margin:0 0 var(--ic-space-md)}/*!@:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase)*/.ic-typography-vertical-margins-caption.sc-ic-typography-h,.ic-typography-vertical-margins-caption-uppercase.sc-ic-typography-h{margin:0 0 var(--ic-space-xs)}/*!@:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child)*/.ic-typography-vertical-margins-h2.sc-ic-typography-h:first-child,.ic-typography-vertical-margins-h3.sc-ic-typography-h:first-child,.ic-typography-vertical-margins-h4.sc-ic-typography-h:first-child{margin-top:0}/*!@:host(.ic-typography-h1)*/.ic-typography-h1.sc-ic-typography-h{font:var(--ic-font-h1) !important}/*!@:host(.ic-typography-h2)*/.ic-typography-h2.sc-ic-typography-h{font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-h3)*/.ic-typography-h3.sc-ic-typography-h{font:var(--ic-font-h3)}/*!@:host(.ic-typography-h4)*/.ic-typography-h4.sc-ic-typography-h{font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-subtitle-large)*/.ic-typography-subtitle-large.sc-ic-typography-h{font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-subtitle-small)*/.ic-typography-subtitle-small.sc-ic-typography-h{font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}/*!@:host(.ic-typography-body)*/.ic-typography-body.sc-ic-typography-h{font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}/*!@:host(.ic-typography-caption)*/.ic-typography-caption.sc-ic-typography-h{font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-caption-uppercase)*/.ic-typography-caption-uppercase.sc-ic-typography-h{font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}/*!@:host(.ic-typography-label)*/.ic-typography-label.sc-ic-typography-h{font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-label-uppercase)*/.ic-typography-label-uppercase.sc-ic-typography-h{font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}/*!@:host(.ic-typography-code-large)*/.ic-typography-code-large.sc-ic-typography-h{font:var(--ic-font-code-large);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-code-small)*/.ic-typography-code-small.sc-ic-typography-h{font:var(--ic-font-code-small);letter-spacing:var(--ic-font-letter-spacing-0pt005)}/*!@:host(.ic-typography-code-extra-small)*/.ic-typography-code-extra-small.sc-ic-typography-h{font:var(--ic-font-code-extra-small);letter-spacing:var(--ic-font-letter-spacing-0pt025)}/*!@:host(.ic-typography-badge)*/.ic-typography-badge.sc-ic-typography-h{font:var(--ic-font-badge);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-badge-small)*/.ic-typography-badge-small.sc-ic-typography-h{font:var(--ic-font-badge-small);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}/*!@:host(.ic-typography-no-wrap)*/.ic-typography-no-wrap.sc-ic-typography-h{white-space:nowrap}/*!@:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label)*/.sc-ic-typography-h .sc-ic-typography-s>h1,.sc-ic-typography-h.sc-ic-typography-s>h2,.sc-ic-typography-h .sc-ic-typography-s>h2,.sc-ic-typography-h.sc-ic-typography-s>h3,.sc-ic-typography-h .sc-ic-typography-s>h3,.sc-ic-typography-h.sc-ic-typography-s>h4,.sc-ic-typography-h .sc-ic-typography-s>h4,.sc-ic-typography-h.sc-ic-typography-s>h5,.sc-ic-typography-h .sc-ic-typography-s>h5,.sc-ic-typography-h.sc-ic-typography-s>h6,.sc-ic-typography-h .sc-ic-typography-s>h6,.sc-ic-typography-h.sc-ic-typography-s>p,.sc-ic-typography-h .sc-ic-typography-s>p,.sc-ic-typography-h.sc-ic-typography-s>label,.sc-ic-typography-h .sc-ic-typography-s>label{font:inherit;letter-spacing:inherit}/*!@.trunc-wrapper*/.trunc-wrapper.sc-ic-typography{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--truncation-max-lines, initial);-webkit-line-clamp:var(--truncation-max-lines, initial);overflow:hidden;padding-right:var(--ellipsis-padding-right, 0)}/*!@.trunc-btn*/.trunc-btn.sc-ic-typography{border:none;background:none;padding:0;color:var(--ic-color-primary-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}/*!@.trunc-btn:hover,\n.trunc-btn.focus*/.trunc-btn.sc-ic-typography:hover,.trunc-btn.focus.sc-ic-typography{outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none;cursor:pointer}/*!@:host(.strikethrough)*/.strikethrough.sc-ic-typography-h{text-decoration:line-through}/*!@:host(.underline)*/.underline.sc-ic-typography-h{text-decoration:underline}/*!@:host(.underline.strikethrough)*/.underline.strikethrough.sc-ic-typography-h{text-decoration:line-through underline}/*!@:host(.italic)*/.italic.sc-ic-typography-h{font-style:italic !important}/*!@:host(.bold)*/.bold.sc-ic-typography-h{font-weight:var(--ic-font-weight-bold)}/*!@:host(.in-ag-grid),\n:host(.in-ag-grid) ::slotted(*)*/.in-ag-grid.sc-ic-typography-h,.sc-ic-typography-h.in-ag-grid.sc-ic-typography-s>*,.sc-ic-typography-h.in-ag-grid .sc-ic-typography-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@supports (text-underline-offset: 25%){/*!@.trunc-btn:hover,\n  .trunc-btn.focus*/.trunc-btn.sc-ic-typography:hover,.trunc-btn.focus.sc-ic-typography{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
 
 class Typography {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.typographyTruncationExpandToggle = createEvent(this, "typographyTruncationExpandToggle", 7);
         this.focusBtnFromKeyboard = true;
+        this.inAGGrid = false;
         this.lastMarkerTop = 0;
         this.lastWidth = 0;
         this.resizeObserver = null;
         this.truncatedHeight = 0;
-        this.toggleExpanded = () => {
+        this.toggleExpanded = (ev) => {
+            ev.stopPropagation();
             this.expanded = !this.expanded;
-        };
-        this.checkMaxLines = (height) => {
-            //24 is the height of a single line
-            const numLines = Math.floor(height / 24);
-            if (numLines > this.maxLines) {
-                this.el.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
-                this.truncatedHeight = this.el.clientHeight;
-                this.truncated = true;
-            }
+            this.typographyTruncationExpandToggle.emit({
+                expanded: this.expanded,
+                typographyEl: this.el,
+            });
         };
         this.checkMarkerPosition = (elTop, markerTop) => {
             if (markerTop - elTop < this.truncatedHeight) {
@@ -27811,6 +28783,18 @@ class Typography {
             this.resizeObserver.disconnect();
         }
     }
+    /**
+     * @internal This is used by data table to remove all truncation in certain events
+     */
+    async resetTruncation() {
+        if (this.truncated) {
+            this.truncated = false;
+            this.maxLines = 0;
+            this.el.removeAttribute("max-lines");
+            this.expanded = false;
+            this.el.removeAttribute("style");
+        }
+    }
     componentDidLoad() {
         var _a, _b;
         if ((this.variant === "body" ||
@@ -27826,6 +28810,30 @@ class Typography {
             checkResizeObserver$1(this.runResizeObserver);
         }
     }
+    componentWillRender() {
+        if (isElInAGGrid(this.el)) {
+            this.inAGGrid = true;
+        }
+    }
+    /**
+     * @internal This checks if the number of lines of text exceeds the maxLines prop. If so, set the line clamp CSS to the max lines
+     * @param height - text container height
+     */
+    async checkMaxLines(height) {
+        //24 is the height of a single line
+        const numLines = Math.floor(height / 24);
+        if (numLines > this.maxLines) {
+            this.el.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`);
+            this.truncatedHeight = this.el.clientHeight;
+            this.truncated = true;
+        }
+    }
+    /**
+     * @internal This method makes it possible to set the expanded status of truncated text outside of ic-typography component
+     */
+    async setShowHideExpanded(expanded) {
+        this.expanded = expanded;
+    }
     render() {
         var _a, _b;
         const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, } = this;
@@ -27836,6 +28844,7 @@ class Typography {
                 ["italic"]: italic,
                 ["strikethrough"]: strikethrough,
                 ["underline"]: underline,
+                ["in-ag-grid"]: this.inAGGrid,
             } }, (variant === "body" ||
             ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
                 "IC-TOOLTIP") &&
@@ -27853,13 +28862,16 @@ class Typography {
             "applyVerticalMargins": [4, "apply-vertical-margins"],
             "bold": [4],
             "italic": [4],
-            "maxLines": [2, "max-lines"],
+            "maxLines": [1026, "max-lines"],
             "strikethrough": [4],
             "underline": [4],
             "variant": [1],
             "truncated": [32],
             "truncButtonFocussed": [32],
-            "expanded": [32]
+            "expanded": [32],
+            "resetTruncation": [64],
+            "checkMaxLines": [64],
+            "setShowHideExpanded": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -27939,6 +28951,8 @@ registerComponents([
   ToggleButtonGroup,
   Tooltip,
   TopNavigation,
+  TreeItem,
+  TreeView,
   Typography,
 ]);