@ukic/canary-web-components 2.0.0-canary.14 → 2.0.0-canary.15

package/hydrate/index.js

@@ -7928,25 +7928,26 @@ const getThemeColorBrightness = () => {
 /**
  * Returns if dark or light foreground colors should be used for color contrast reasons
  * @returns "dark" or "light"
+ * @param brightness - Optional custom brightness value. Defaults to `getThemeColorBrightness`
  */
-const getThemeForegroundColor = () => getThemeColorBrightness() > DARK_MODE_THRESHOLD
+const getThemeForegroundColor = (brightness = getThemeColorBrightness()) => brightness > DARK_MODE_THRESHOLD
     ? IcThemeForegroundEnum$1.Dark
     : IcThemeForegroundEnum$1.Light;
-const getSlot = (element, name) => {
+const getSlot$1 = (element, name) => {
     if (element && element.querySelector) {
         return element.querySelector(`[slot="${name}"]`);
     }
     return null;
 };
-const slotHasContent = (element, name) => getSlot(element, name) !== null;
-const getSlotContent = (element, name) => {
-    const slot = getSlot(element, name);
+const slotHasContent = (element, name) => getSlot$1(element, name) !== null;
+const getSlotContent$1 = (element, name) => {
+    const slot = getSlot$1(element, name);
     if (slot) {
-        return getSlotElements(slot);
+        return getSlotElements$1(slot);
     }
     return null;
 };
-const getSlotElements = (slot) => {
+const getSlotElements$1 = (slot) => {
     const slotContent = slot.firstElementChild;
     if (slotContent !== null) {
         const elements = slotContent.assignedElements
@@ -7959,17 +7960,17 @@ const getSlotElements = (slot) => {
         return slot === null ? null : [slot];
     }
 };
-const getNavItemParentDetails = (el) => {
+const getNavItemParentDetails = ({ parentElement, }) => {
     let navType = { navType: "", parent: null };
-    switch (getParentElementType(el)) {
+    switch (parentElement.tagName) {
         case "IC-NAVIGATION-GROUP":
-            navType = getNavItemParentDetails(el.parentElement);
+            navType = getNavItemParentDetails(parentElement);
             break;
         case "IC-TOP-NAVIGATION":
-            navType = { navType: "top", parent: getParentElement(el) };
+            navType = { navType: "top", parent: parentElement };
             break;
         case "IC-SIDE-NAVIGATION":
-            navType = { navType: "side", parent: getParentElement(el) };
+            navType = { navType: "side", parent: parentElement };
             break;
         case "IC-PAGE-HEADER":
             navType = { navType: "page-header", parent: null };
@@ -7985,10 +7986,8 @@ const DEVICE_SIZES = {
     XL: Number(getCssProperty$1("--ic-breakpoint-xl").replace("px", "")), // 1200
     UNDEFINED: 1200,
 };
-const hasValidationStatus$1 = (status, disabled) => {
-    return status !== "" && !disabled;
-};
-const isSlotUsed = (element, slotName) => Array.from(element.children).some((child) => child.getAttribute("slot") === slotName);
+const hasValidationStatus$1 = (status, disabled) => !!status && !disabled;
+const isSlotUsed$1 = ({ children }, slotName) => Array.from(children).some((child) => child.getAttribute("slot") === slotName);
 // added as a common method to allow detection of gatsby hydration issue, where (camelCase) props are initially undefined & then update
 // with a value. Allows a callback function to be executed when this is the case
 const onComponentPropUndefinedChange = (oldValue, newValue, callback) => {
@@ -7997,100 +7996,61 @@ const onComponentPropUndefinedChange = (oldValue, newValue, callback) => {
     }
 };
 const onComponentRequiredPropUndefined$1 = (props, component) => {
-    for (let i = 0; i < props.length; i++) {
-        const { prop, propName } = props[i];
+    props.forEach(({ prop, propName }) => {
         if (prop === null || prop === undefined) {
             console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase$1(propName)}' (react) required`);
         }
-    }
-};
-const kebabToCamelCase$1 = (kebabCase) => {
-    kebabCase = kebabCase.toLowerCase();
-    const individualWords = kebabCase.split("-");
-    let camelCase = individualWords[0];
-    for (let i = 1; i < individualWords.length; i++) {
-        camelCase +=
-            individualWords[i].substring(0, 1).toUpperCase() +
-                individualWords[i].substring(1);
-    }
-    return camelCase;
+    });
 };
+const kebabToCamelCase$1 = (kebabCase) => kebabCase
+    .toLowerCase()
+    .split("-")
+    .map((word, index) => index === 0
+    ? word
+    : `${word.substring(0, 1).toUpperCase()}${word.substring(1)}`)
+    .join("");
 const checkResizeObserver$1 = (callbackFn) => {
     if (typeof window !== "undefined" &&
         typeof window.ResizeObserver !== "undefined") {
         callbackFn();
     }
 };
-const hex2dec = function (v) {
-    return parseInt(v, 16);
-};
+const hex2dec = (v) => parseInt(v, 16);
 const hexToRgba = (hex) => {
-    let c;
-    if (hex.length === 4) {
-        c = hex.replace("#", "").split("");
-        return {
-            r: hex2dec(c[0] + c[0]),
-            g: hex2dec(c[1] + c[1]),
-            b: hex2dec(c[2] + c[2]),
-            a: 1,
-        };
-    }
-    else {
-        return {
-            r: hex2dec(hex.slice(1, 3)),
-            g: hex2dec(hex.slice(3, 5)),
-            b: hex2dec(hex.slice(5)),
-            a: 1,
-        };
-    }
+    const hexChars = hex
+        .replace("#", "")
+        .split("")
+        .map((char) => char.repeat(2));
+    return {
+        r: hex2dec(hex.length === 4 ? hexChars[0] : hex.slice(1, 3)),
+        g: hex2dec(hex.length === 4 ? hexChars[1] : hex.slice(3, 5)),
+        b: hex2dec(hex.length === 4 ? hexChars[2] : hex.slice(5)),
+        a: 1,
+    };
 };
 const rgbaStrToObj = (rgbaStr) => {
-    const fourthChar = rgbaStr.slice(3, 4);
-    let colorRGBA;
-    if (fourthChar.toLowerCase() === "a") {
-        colorRGBA = { r: null, g: null, b: null, a: null };
-        const rgba = rgbaStr
-            .substring(5, rgbaStr.length - 1)
-            .replace(/ /g, "")
-            .split(",");
-        colorRGBA.r = Number(rgba[0]);
-        colorRGBA.g = Number(rgba[1]);
-        colorRGBA.b = Number(rgba[2]);
-        colorRGBA.a = Number(rgba[3]);
-    }
-    else {
-        colorRGBA = { r: null, g: null, b: null, a: 1 };
-        const rgb = rgbaStr
-            .substring(4, rgbaStr.length - 1)
-            .replace(/ /g, "")
-            .split(",");
-        colorRGBA.r = Number(rgb[0]);
-        colorRGBA.g = Number(rgb[1]);
-        colorRGBA.b = Number(rgb[2]);
-    }
-    return colorRGBA;
+    const isRGBA = rgbaStr.slice(3, 4).toLowerCase() === "a";
+    const rgbValues = rgbaStr
+        .substring(isRGBA ? 5 : 4, rgbaStr.length - 1)
+        .replace(/ /g, "")
+        .split(",")
+        .map(Number);
+    return {
+        r: rgbValues[0],
+        g: rgbValues[1],
+        b: rgbValues[2],
+        a: isRGBA ? rgbValues[3] : 1,
+    };
 };
-const elementOverflowsX = (element) => element.scrollWidth > element.clientWidth;
-/**
- *
- * @param child - The child element
- * @returns string
- */
-const getParentElementType = (child) => child.parentElement.tagName;
-const getParentElement = (child) => child.parentElement;
+const elementOverflowsX = ({ scrollWidth, clientWidth, }) => scrollWidth > clientWidth;
 const hasClassificationBanner = () => !!document.querySelector("ic-classification-banner:not([inline='true'])");
-const getForm$1 = (el) => el.closest("FORM");
 const addFormResetListener$1 = (el, callbackFn) => {
-    const form = getForm$1(el);
-    if (form !== null) {
-        form.addEventListener("reset", callbackFn);
-    }
+    var _a;
+    (_a = el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.addEventListener("reset", callbackFn);
 };
 const removeFormResetListener$1 = (el, callbackFn) => {
-    const form = getForm$1(el);
-    if (form !== null) {
-        form.removeEventListener("reset", 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 removeDisabledFalse$1 = (disabled, element) => {
@@ -8099,15 +8059,12 @@ const removeDisabledFalse$1 = (disabled, element) => {
     }
 };
 const convertToRGBA = (color) => {
-    let colorRGBA = null;
-    const firstChar = color.slice(0, 1);
-    if (firstChar === "#") {
-        colorRGBA = hexToRgba(color);
-    }
-    else if (firstChar.toLowerCase() === "r") {
-        colorRGBA = rgbaStrToObj(color);
-    }
-    return colorRGBA;
+    const firstChar = color === null || color === void 0 ? void 0 : color.slice(0, 1).toLowerCase();
+    return firstChar === "#"
+        ? hexToRgba(color)
+        : firstChar === "r"
+            ? rgbaStrToObj(color)
+            : null;
 };
 
 var chevronIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -8212,7 +8169,7 @@ class Accordion {
                 [`${size}`]: true,
                 ["section-button"]: true,
                 ["section-button-open"]: expanded && !disabled,
-            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "subtitle-large", class: "section-header" }, isSlotUsed(this.el, "heading") ? (hAsync("slot", { name: "heading" })) : (this.heading)), hAsync("span", { class: {
+            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed$1(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "subtitle-large", class: "section-header" }, isSlotUsed$1(this.el, "heading") ? (hAsync("slot", { name: "heading" })) : (this.heading)), hAsync("span", { class: {
                 ["expand-chevron"]: true,
                 ["content-expanded-chevron"]: expanded && !disabled,
             }, "aria-hidden": "true", innerHTML: chevronIcon })), hAsync("div", { class: {
@@ -8245,6 +8202,9 @@ class Accordion {
 const icAccordionGroupCss = "/*!@html*/html.sc-ic-accordion-group{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-accordion-group{margin:0}/*!@main*/main.sc-ic-accordion-group{display:block}/*!@h1*/h1.sc-ic-accordion-group{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-accordion-group{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-accordion-group{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-accordion-group{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-accordion-group{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-accordion-group,strong.sc-ic-accordion-group{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-accordion-group,kbd.sc-ic-accordion-group,samp.sc-ic-accordion-group{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-accordion-group{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-accordion-group,sup.sc-ic-accordion-group{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-accordion-group{bottom:-0.25em}/*!@sup*/sup.sc-ic-accordion-group{top:-0.5em}/*!@img*/img.sc-ic-accordion-group{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-accordion-group,input.sc-ic-accordion-group,optgroup.sc-ic-accordion-group,select.sc-ic-accordion-group,textarea.sc-ic-accordion-group{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-accordion-group,input.sc-ic-accordion-group{overflow:visible}/*!@button,\nselect*/button.sc-ic-accordion-group,select.sc-ic-accordion-group{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-accordion-group,[type=\"button\"].sc-ic-accordion-group,[type=\"reset\"].sc-ic-accordion-group,[type=\"submit\"].sc-ic-accordion-group{-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-accordion-group::-moz-focus-inner,[type=\"button\"].sc-ic-accordion-group::-moz-focus-inner,[type=\"reset\"].sc-ic-accordion-group::-moz-focus-inner,[type=\"submit\"].sc-ic-accordion-group::-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-accordion-group:-moz-focusring,[type=\"button\"].sc-ic-accordion-group:-moz-focusring,[type=\"reset\"].sc-ic-accordion-group:-moz-focusring,[type=\"submit\"].sc-ic-accordion-group:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-accordion-group{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-accordion-group{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-accordion-group{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-accordion-group{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-accordion-group,[type=\"radio\"].sc-ic-accordion-group{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-accordion-group::-webkit-inner-spin-button,[type=\"number\"].sc-ic-accordion-group::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-accordion-group{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-accordion-group::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-accordion-group::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-accordion-group{display:block}/*!@summary*/summary.sc-ic-accordion-group{display:list-item}/*!@template*/template.sc-ic-accordion-group{display:none}/*!@[hidden]*/[hidden].sc-ic-accordion-group{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-accordion-group,body.sc-ic-accordion-group,div.sc-ic-accordion-group,span.sc-ic-accordion-group,applet.sc-ic-accordion-group,object.sc-ic-accordion-group,iframe.sc-ic-accordion-group,h1.sc-ic-accordion-group,h2.sc-ic-accordion-group,h3.sc-ic-accordion-group,h4.sc-ic-accordion-group,h5.sc-ic-accordion-group,h6.sc-ic-accordion-group,p.sc-ic-accordion-group,blockquote.sc-ic-accordion-group,pre.sc-ic-accordion-group,a.sc-ic-accordion-group,abbr.sc-ic-accordion-group,acronym.sc-ic-accordion-group,address.sc-ic-accordion-group,big.sc-ic-accordion-group,cite.sc-ic-accordion-group,code.sc-ic-accordion-group,del.sc-ic-accordion-group,dfn.sc-ic-accordion-group,em.sc-ic-accordion-group,img.sc-ic-accordion-group,ins.sc-ic-accordion-group,kbd.sc-ic-accordion-group,q.sc-ic-accordion-group,s.sc-ic-accordion-group,samp.sc-ic-accordion-group,small.sc-ic-accordion-group,strike.sc-ic-accordion-group,strong.sc-ic-accordion-group,sub.sc-ic-accordion-group,sup.sc-ic-accordion-group,tt.sc-ic-accordion-group,var.sc-ic-accordion-group,b.sc-ic-accordion-group,u.sc-ic-accordion-group,i.sc-ic-accordion-group,center.sc-ic-accordion-group,dl.sc-ic-accordion-group,dt.sc-ic-accordion-group,dd.sc-ic-accordion-group,ol.sc-ic-accordion-group,ul.sc-ic-accordion-group,li.sc-ic-accordion-group,fieldset.sc-ic-accordion-group,form.sc-ic-accordion-group,label.sc-ic-accordion-group,legend.sc-ic-accordion-group,table.sc-ic-accordion-group,caption.sc-ic-accordion-group,tbody.sc-ic-accordion-group,tfoot.sc-ic-accordion-group,thead.sc-ic-accordion-group,tr.sc-ic-accordion-group,th.sc-ic-accordion-group,td.sc-ic-accordion-group,article.sc-ic-accordion-group,aside.sc-ic-accordion-group,canvas.sc-ic-accordion-group,details.sc-ic-accordion-group,embed.sc-ic-accordion-group,figure.sc-ic-accordion-group,figcaption.sc-ic-accordion-group,footer.sc-ic-accordion-group,header.sc-ic-accordion-group,hgroup.sc-ic-accordion-group,menu.sc-ic-accordion-group,nav.sc-ic-accordion-group,output.sc-ic-accordion-group,ruby.sc-ic-accordion-group,section.sc-ic-accordion-group,summary.sc-ic-accordion-group,time.sc-ic-accordion-group,mark.sc-ic-accordion-group,audio.sc-ic-accordion-group,video.sc-ic-accordion-group{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@.group-title-container*/.group-title-container.sc-ic-accordion-group{padding:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center}/*!@:host(.small) .group-title-container*/.small.sc-ic-accordion-group-h .group-title-container.sc-ic-accordion-group{padding:var(--ic-space-xxs) var(--ic-space-xs)}/*!@:host(.large) .group-title-container*/.large.sc-ic-accordion-group-h .group-title-container.sc-ic-accordion-group{padding:var(--ic-space-sm) var(--ic-space-xs)}/*!@:host(.light)*/.light.sc-ic-accordion-group-h{color:var(--ic-architectural-white)}/*!@:host(.accordion-group.dark) ::slotted(ic-accordion)*/.sc-ic-accordion-group-h.accordion-group.dark .sc-ic-accordion-group-s>ic-accordion{color:var(--ic-architectural-white)}";
 
 let accordionGroupIds = 0;
+/**
+ * @slot group-title - Content is placed as the accordion group title.
+ */
 class AccordionGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -8334,7 +8294,7 @@ class AccordionGroup {
                 [`${appearance}`]: true,
                 [`${size}`]: true,
                 ["accordion-group"]: true,
-            } }, hAsync("div", { class: "group-title-container" }, hAsync("ic-typography", { variant: "h4" }, hAsync("h3", null, groupTitle)), !singleExpansion && (hAsync("ic-button", { ref: (el) => (this.allButtonEl = el), appearance: appearance === "light" ? "light" : "default", onClick: this.handleExpanded, variant: "tertiary", "aria-label": `${this.accordionOpenBtnText()} ${accessibleButtonLabel}` }, this.accordionOpenBtnText()))), hAsync("slot", null)));
+            } }, hAsync("div", { class: "group-title-container" }, hAsync("ic-typography", { variant: "h4" }, hAsync("h3", null, isSlotUsed$1(this.el, "group-title") ? (hAsync("slot", { name: "group-title" })) : (groupTitle))), !singleExpansion && (hAsync("ic-button", { ref: (el) => (this.allButtonEl = el), appearance: appearance === "light" ? "light" : "default", onClick: this.handleExpanded, variant: "tertiary", "aria-label": `${this.accordionOpenBtnText()} ${accessibleButtonLabel}` }, this.accordionOpenBtnText()))), hAsync("slot", null)));
     }
     get el() { return getElement(this); }
     static get style() { return icAccordionGroupCss; }
@@ -8421,7 +8381,7 @@ class Alert {
             } }, heading && (hAsync("ic-typography", { class: {
                 ["alert-title"]: true,
                 ["alert-title-above"]: titleAbove || this.alertTitleWrap,
-            }, variant: "subtitle-large" }, hAsync("p", null, heading))), hAsync("slot", { name: "message" }, hAsync("ic-typography", { variant: "body" }, message))), isSlotUsed(this.el, "action") && (hAsync("div", { class: "alert-action-container" }, hAsync("slot", { name: "action" })))), hAsync("div", { class: "dismiss-icon-container" }, dismissible && (hAsync("ic-button", { class: {
+            }, variant: "subtitle-large" }, hAsync("p", null, heading))), hAsync("slot", { name: "message" }, hAsync("ic-typography", { variant: "body" }, message))), isSlotUsed$1(this.el, "action") && (hAsync("div", { class: "alert-action-container" }, hAsync("slot", { name: "action" })))), hAsync("div", { class: "dismiss-icon-container" }, dismissible && (hAsync("ic-button", { class: {
                 ["svg-container"]: true,
                 ["dismiss-icon"]: true,
             }, innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", appearance: IcThemeForegroundEnum$1.Dark, title: "dismiss" })))))));
@@ -8452,7 +8412,7 @@ var ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" a
 </svg>
 `;
 
-const icBackToTopCss = "/*!@html*/html.sc-ic-back-to-top{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-back-to-top{margin:0}/*!@main*/main.sc-ic-back-to-top{display:block}/*!@h1*/h1.sc-ic-back-to-top{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-back-to-top{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-back-to-top{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-back-to-top{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-back-to-top{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-back-to-top,strong.sc-ic-back-to-top{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-back-to-top,kbd.sc-ic-back-to-top,samp.sc-ic-back-to-top{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-back-to-top{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-back-to-top,sup.sc-ic-back-to-top{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-back-to-top{bottom:-0.25em}/*!@sup*/sup.sc-ic-back-to-top{top:-0.5em}/*!@img*/img.sc-ic-back-to-top{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-back-to-top,input.sc-ic-back-to-top,optgroup.sc-ic-back-to-top,select.sc-ic-back-to-top,textarea.sc-ic-back-to-top{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-back-to-top,input.sc-ic-back-to-top{overflow:visible}/*!@button,\nselect*/button.sc-ic-back-to-top,select.sc-ic-back-to-top{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-back-to-top,[type=\"button\"].sc-ic-back-to-top,[type=\"reset\"].sc-ic-back-to-top,[type=\"submit\"].sc-ic-back-to-top{-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-back-to-top::-moz-focus-inner,[type=\"button\"].sc-ic-back-to-top::-moz-focus-inner,[type=\"reset\"].sc-ic-back-to-top::-moz-focus-inner,[type=\"submit\"].sc-ic-back-to-top::-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-back-to-top:-moz-focusring,[type=\"button\"].sc-ic-back-to-top:-moz-focusring,[type=\"reset\"].sc-ic-back-to-top:-moz-focusring,[type=\"submit\"].sc-ic-back-to-top:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-back-to-top{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-back-to-top{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-back-to-top{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-back-to-top{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-back-to-top,[type=\"radio\"].sc-ic-back-to-top{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-back-to-top::-webkit-inner-spin-button,[type=\"number\"].sc-ic-back-to-top::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-back-to-top{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-back-to-top::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-back-to-top::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-back-to-top{display:block}/*!@summary*/summary.sc-ic-back-to-top{display:list-item}/*!@template*/template.sc-ic-back-to-top{display:none}/*!@[hidden]*/[hidden].sc-ic-back-to-top{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-back-to-top,body.sc-ic-back-to-top,div.sc-ic-back-to-top,span.sc-ic-back-to-top,applet.sc-ic-back-to-top,object.sc-ic-back-to-top,iframe.sc-ic-back-to-top,h1.sc-ic-back-to-top,h2.sc-ic-back-to-top,h3.sc-ic-back-to-top,h4.sc-ic-back-to-top,h5.sc-ic-back-to-top,h6.sc-ic-back-to-top,p.sc-ic-back-to-top,blockquote.sc-ic-back-to-top,pre.sc-ic-back-to-top,a.sc-ic-back-to-top,abbr.sc-ic-back-to-top,acronym.sc-ic-back-to-top,address.sc-ic-back-to-top,big.sc-ic-back-to-top,cite.sc-ic-back-to-top,code.sc-ic-back-to-top,del.sc-ic-back-to-top,dfn.sc-ic-back-to-top,em.sc-ic-back-to-top,img.sc-ic-back-to-top,ins.sc-ic-back-to-top,kbd.sc-ic-back-to-top,q.sc-ic-back-to-top,s.sc-ic-back-to-top,samp.sc-ic-back-to-top,small.sc-ic-back-to-top,strike.sc-ic-back-to-top,strong.sc-ic-back-to-top,sub.sc-ic-back-to-top,sup.sc-ic-back-to-top,tt.sc-ic-back-to-top,var.sc-ic-back-to-top,b.sc-ic-back-to-top,u.sc-ic-back-to-top,i.sc-ic-back-to-top,center.sc-ic-back-to-top,dl.sc-ic-back-to-top,dt.sc-ic-back-to-top,dd.sc-ic-back-to-top,ol.sc-ic-back-to-top,ul.sc-ic-back-to-top,li.sc-ic-back-to-top,fieldset.sc-ic-back-to-top,form.sc-ic-back-to-top,label.sc-ic-back-to-top,legend.sc-ic-back-to-top,table.sc-ic-back-to-top,caption.sc-ic-back-to-top,tbody.sc-ic-back-to-top,tfoot.sc-ic-back-to-top,thead.sc-ic-back-to-top,tr.sc-ic-back-to-top,th.sc-ic-back-to-top,td.sc-ic-back-to-top,article.sc-ic-back-to-top,aside.sc-ic-back-to-top,canvas.sc-ic-back-to-top,details.sc-ic-back-to-top,embed.sc-ic-back-to-top,figure.sc-ic-back-to-top,figcaption.sc-ic-back-to-top,footer.sc-ic-back-to-top,header.sc-ic-back-to-top,hgroup.sc-ic-back-to-top,menu.sc-ic-back-to-top,nav.sc-ic-back-to-top,output.sc-ic-back-to-top,ruby.sc-ic-back-to-top,section.sc-ic-back-to-top,summary.sc-ic-back-to-top,time.sc-ic-back-to-top,mark.sc-ic-back-to-top,audio.sc-ic-back-to-top,video.sc-ic-back-to-top{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-back-to-top-h{display:block;position:absolute;right:0}/*!@button*/button.sc-ic-back-to-top{position:fixed;right:var(--ic-space-md);bottom:var(--ic-space-md);height:2.5rem;align-items:center;padding:var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n    var(--ic-space-sm);margin:0;gap:var(--ic-space-xs);display:flex;background-color:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-action-default);outline-width:inherit;box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:5rem;text-decoration:none;visibility:hidden;opacity:0;transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);cursor:pointer;z-index:var(--ic-z-index-back-to-top)}/*!@button:hover*/button.sc-ic-back-to-top:hover{text-decoration:none;background-color:var(--ic-action-default-bg-hover-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-hover)}/*!@button:active*/button.sc-ic-back-to-top:active{text-decoration:none;background-color:var(--ic-action-default-bg-active-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-active)}/*!@button:focus*/button.sc-ic-back-to-top:focus{box-shadow:var(--ic-border-focus)}/*!@.ic-back-to-top-link.show*/.ic-back-to-top-link.show.sc-ic-back-to-top{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}/*!@.ic-back-to-top-link.by-footer*/.ic-back-to-top-link.by-footer.sc-ic-back-to-top{position:relative;right:var(--ic-space-md);bottom:3.5rem}/*!@.ic-back-to-top-link.offset-banner*/.ic-back-to-top-link.offset-banner.sc-ic-back-to-top{margin-bottom:var(--ic-space-lg)}/*!@.ic-back-to-top-icon*/.ic-back-to-top-icon.sc-ic-back-to-top{fill:var(--ic-action-default);padding-left:var(--ic-space-xxs);padding-top:var(--ic-space-xxxs)}/*!@.ic-back-to-top-icon > svg*/.ic-back-to-top-icon.sc-ic-back-to-top>svg.sc-ic-back-to-top{height:var(--ic-space-md);width:var(--ic-space-md);display:inline-block}/*!@.ic-back-to-top-link span*/.ic-back-to-top-link.sc-ic-back-to-top span.sc-ic-back-to-top{color:var(--ic-action-default)}/*!@.ic-back-to-top-link:hover .ic-back-to-top-icon*/.ic-back-to-top-link.sc-ic-back-to-top:hover .ic-back-to-top-icon.sc-ic-back-to-top{fill:var(--ic-action-default-hover)}/*!@.ic-back-to-top-link:hover span*/.ic-back-to-top-link.sc-ic-back-to-top:hover span.sc-ic-back-to-top{color:var(--ic-action-default-hover)}@media (forced-colors: active){/*!@.ic-back-to-top-icon*/.ic-back-to-top-icon.sc-ic-back-to-top{fill:currentcolor}}";
+const icBackToTopCss = "/*!@html*/html.sc-ic-back-to-top{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-back-to-top{margin:0}/*!@main*/main.sc-ic-back-to-top{display:block}/*!@h1*/h1.sc-ic-back-to-top{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-back-to-top{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-back-to-top{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-back-to-top{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-back-to-top{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-back-to-top,strong.sc-ic-back-to-top{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-back-to-top,kbd.sc-ic-back-to-top,samp.sc-ic-back-to-top{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-back-to-top{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-back-to-top,sup.sc-ic-back-to-top{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-back-to-top{bottom:-0.25em}/*!@sup*/sup.sc-ic-back-to-top{top:-0.5em}/*!@img*/img.sc-ic-back-to-top{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-back-to-top,input.sc-ic-back-to-top,optgroup.sc-ic-back-to-top,select.sc-ic-back-to-top,textarea.sc-ic-back-to-top{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-back-to-top,input.sc-ic-back-to-top{overflow:visible}/*!@button,\nselect*/button.sc-ic-back-to-top,select.sc-ic-back-to-top{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-back-to-top,[type=\"button\"].sc-ic-back-to-top,[type=\"reset\"].sc-ic-back-to-top,[type=\"submit\"].sc-ic-back-to-top{-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-back-to-top::-moz-focus-inner,[type=\"button\"].sc-ic-back-to-top::-moz-focus-inner,[type=\"reset\"].sc-ic-back-to-top::-moz-focus-inner,[type=\"submit\"].sc-ic-back-to-top::-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-back-to-top:-moz-focusring,[type=\"button\"].sc-ic-back-to-top:-moz-focusring,[type=\"reset\"].sc-ic-back-to-top:-moz-focusring,[type=\"submit\"].sc-ic-back-to-top:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-back-to-top{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-back-to-top{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-back-to-top{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-back-to-top{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-back-to-top,[type=\"radio\"].sc-ic-back-to-top{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-back-to-top::-webkit-inner-spin-button,[type=\"number\"].sc-ic-back-to-top::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-back-to-top{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-back-to-top::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-back-to-top::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-back-to-top{display:block}/*!@summary*/summary.sc-ic-back-to-top{display:list-item}/*!@template*/template.sc-ic-back-to-top{display:none}/*!@[hidden]*/[hidden].sc-ic-back-to-top{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-back-to-top,body.sc-ic-back-to-top,div.sc-ic-back-to-top,span.sc-ic-back-to-top,applet.sc-ic-back-to-top,object.sc-ic-back-to-top,iframe.sc-ic-back-to-top,h1.sc-ic-back-to-top,h2.sc-ic-back-to-top,h3.sc-ic-back-to-top,h4.sc-ic-back-to-top,h5.sc-ic-back-to-top,h6.sc-ic-back-to-top,p.sc-ic-back-to-top,blockquote.sc-ic-back-to-top,pre.sc-ic-back-to-top,a.sc-ic-back-to-top,abbr.sc-ic-back-to-top,acronym.sc-ic-back-to-top,address.sc-ic-back-to-top,big.sc-ic-back-to-top,cite.sc-ic-back-to-top,code.sc-ic-back-to-top,del.sc-ic-back-to-top,dfn.sc-ic-back-to-top,em.sc-ic-back-to-top,img.sc-ic-back-to-top,ins.sc-ic-back-to-top,kbd.sc-ic-back-to-top,q.sc-ic-back-to-top,s.sc-ic-back-to-top,samp.sc-ic-back-to-top,small.sc-ic-back-to-top,strike.sc-ic-back-to-top,strong.sc-ic-back-to-top,sub.sc-ic-back-to-top,sup.sc-ic-back-to-top,tt.sc-ic-back-to-top,var.sc-ic-back-to-top,b.sc-ic-back-to-top,u.sc-ic-back-to-top,i.sc-ic-back-to-top,center.sc-ic-back-to-top,dl.sc-ic-back-to-top,dt.sc-ic-back-to-top,dd.sc-ic-back-to-top,ol.sc-ic-back-to-top,ul.sc-ic-back-to-top,li.sc-ic-back-to-top,fieldset.sc-ic-back-to-top,form.sc-ic-back-to-top,label.sc-ic-back-to-top,legend.sc-ic-back-to-top,table.sc-ic-back-to-top,caption.sc-ic-back-to-top,tbody.sc-ic-back-to-top,tfoot.sc-ic-back-to-top,thead.sc-ic-back-to-top,tr.sc-ic-back-to-top,th.sc-ic-back-to-top,td.sc-ic-back-to-top,article.sc-ic-back-to-top,aside.sc-ic-back-to-top,canvas.sc-ic-back-to-top,details.sc-ic-back-to-top,embed.sc-ic-back-to-top,figure.sc-ic-back-to-top,figcaption.sc-ic-back-to-top,footer.sc-ic-back-to-top,header.sc-ic-back-to-top,hgroup.sc-ic-back-to-top,menu.sc-ic-back-to-top,nav.sc-ic-back-to-top,output.sc-ic-back-to-top,ruby.sc-ic-back-to-top,section.sc-ic-back-to-top,summary.sc-ic-back-to-top,time.sc-ic-back-to-top,mark.sc-ic-back-to-top,audio.sc-ic-back-to-top,video.sc-ic-back-to-top{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-back-to-top-h{display:block;position:absolute;right:0}/*!@.positioning*/.positioning.sc-ic-back-to-top{position:fixed;right:var(--ic-space-md);bottom:var(--ic-space-md);transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);z-index:var(--ic-z-index-back-to-top)}/*!@button*/button.sc-ic-back-to-top{height:2.5rem;align-items:center;padding:var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n    var(--ic-space-sm);margin:0;gap:var(--ic-space-xs);display:flex;background-color:var(--ic-architectural-white);border:var(--ic-border-width) solid var(--ic-action-default);outline-width:inherit;box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:5rem;text-decoration:none;visibility:hidden;opacity:0;cursor:pointer}/*!@button:hover*/button.sc-ic-back-to-top:hover{text-decoration:none;background-color:var(--ic-action-default-bg-hover-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-hover)}/*!@button:active*/button.sc-ic-back-to-top:active{text-decoration:none;background-color:var(--ic-action-default-bg-active-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-active)}/*!@button:focus*/button.sc-ic-back-to-top:focus{box-shadow:var(--ic-border-focus)}/*!@.ic-back-to-top-link.show*/.ic-back-to-top-link.show.sc-ic-back-to-top{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}/*!@.ic-back-to-top-link.by-footer*/.ic-back-to-top-link.by-footer.sc-ic-back-to-top{position:relative;right:var(--ic-space-md);bottom:3.5rem}/*!@.ic-back-to-top-link.offset-banner*/.ic-back-to-top-link.offset-banner.sc-ic-back-to-top{margin-bottom:var(--ic-space-lg)}/*!@.ic-back-to-top-icon*/.ic-back-to-top-icon.sc-ic-back-to-top{fill:var(--ic-action-default);padding-left:var(--ic-space-xxs);padding-top:var(--ic-space-xxxs)}/*!@.ic-back-to-top-icon > svg*/.ic-back-to-top-icon.sc-ic-back-to-top>svg.sc-ic-back-to-top{height:var(--ic-space-md);width:var(--ic-space-md);display:inline-block}/*!@.ic-back-to-top-link span*/.ic-back-to-top-link.sc-ic-back-to-top span.sc-ic-back-to-top{color:var(--ic-action-default)}/*!@.ic-back-to-top-link:hover .ic-back-to-top-icon*/.ic-back-to-top-link.sc-ic-back-to-top:hover .ic-back-to-top-icon.sc-ic-back-to-top{fill:var(--ic-action-default-hover)}/*!@.ic-back-to-top-link:hover span*/.ic-back-to-top-link.sc-ic-back-to-top:hover span.sc-ic-back-to-top{color:var(--ic-action-default-hover)}@media (forced-colors: active){/*!@.ic-back-to-top-icon*/.ic-back-to-top-icon.sc-ic-back-to-top{fill:currentcolor}}";
 
 const backToTopLabel = "Back to top";
 class BackToTop {
@@ -8531,10 +8491,21 @@ class BackToTop {
             const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
             this.bannerOffset = banners.length > 0;
         };
+        this.buildButton = () => {
+            const { bannerOffset, targetElVisible, footerVisible, variant } = this;
+            return (hAsync("button", { class: {
+                    ["ic-back-to-top-link"]: true,
+                    ["offset-banner"]: bannerOffset,
+                    ["show"]: !targetElVisible,
+                    ["by-footer"]: footerVisible,
+                    ["positioning"]: variant !== "icon",
+                }, "aria-label": backToTopLabel, onClick: this.handleClick }, hAsync("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), this.variant !== "icon" && (hAsync("ic-typography", { variant: "subtitle-small" }, hAsync("span", null, backToTopLabel)))));
+        };
         this.bannerOffset = false;
         this.footerVisible = false;
         this.targetElVisible = true;
         this.target = undefined;
+        this.variant = "default";
     }
     watchPropHandler(newValue, oldValue) {
         //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
@@ -8561,13 +8532,8 @@ class BackToTop {
         onComponentRequiredPropUndefined$1([{ prop: this.target, propName: "target" }], "Back to Top");
     }
     render() {
-        const { bannerOffset, targetElVisible, footerVisible } = this;
-        return (hAsync("button", { class: {
-                ["ic-back-to-top-link"]: true,
-                ["offset-banner"]: bannerOffset,
-                ["show"]: !targetElVisible,
-                ["by-footer"]: footerVisible,
-            }, "aria-label": backToTopLabel, onClick: this.handleClick }, hAsync("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), hAsync("ic-typography", { variant: "subtitle-small" }, hAsync("span", null, backToTopLabel))));
+        const { variant, buildButton } = this;
+        return variant === "icon" ? (hAsync("ic-tooltip", { label: backToTopLabel, placement: "top", class: "positioning" }, buildButton())) : (buildButton());
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -8580,6 +8546,7 @@ class BackToTop {
         "$tagName$": "ic-back-to-top",
         "$members$": {
             "target": [1],
+            "variant": [1],
             "bannerOffset": [32],
             "footerVisible": [32],
             "targetElVisible": [32]
@@ -8600,102 +8567,59 @@ class Badge {
         registerInstance(this, hostRef);
         this.ariaLabel = null;
         this.setBadgeColour = () => {
-            if (this.customColor !== null && convertToRGBA(this.customColor) !== null) {
-                const colorRGBA = convertToRGBA(this.customColor);
+            const colorRGBA = convertToRGBA(this.customColor);
+            if (colorRGBA) {
                 this.customColorRGBA = colorRGBA;
-                this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;
+                const { r, g, b, a } = colorRGBA;
+                this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
             }
         };
-        this.getBadgeForeground = () => {
-            let red;
-            let green;
-            let blue;
+        this.getBadgeRGB = () => {
             switch (this.variant) {
                 case "custom":
-                    red = this.customColorRGBA.r;
-                    green = this.customColorRGBA.g;
-                    blue = this.customColorRGBA.b;
-                    break;
+                    return this.customColorRGBA;
                 case "error":
-                    red = parseInt(getCssProperty$1("--ic-status-error-r"));
-                    green = parseInt(getCssProperty$1("--ic-status-error-g"));
-                    blue = parseInt(getCssProperty$1("--ic-status-error-b"));
-                    break;
                 case "success":
-                    red = parseInt(getCssProperty$1("--ic-status-success-r"));
-                    green = parseInt(getCssProperty$1("--ic-status-success-g"));
-                    blue = parseInt(getCssProperty$1("--ic-status-success-b"));
-                    break;
                 case "warning":
-                    red = parseInt(getCssProperty$1("--ic-status-warning-r"));
-                    green = parseInt(getCssProperty$1("--ic-status-warning-g"));
-                    blue = parseInt(getCssProperty$1("--ic-status-warning-b"));
-                    break;
                 case "info": {
-                    const info = hexToRgba(getCssProperty$1("--ic-status-info"));
-                    red = info.r;
-                    green = info.g;
-                    blue = info.b;
-                    break;
-                }
-                case "neutral": {
-                    const neutral = hexToRgba(getCssProperty$1("--ic-architectural-500"));
-                    red = neutral.r;
-                    green = neutral.g;
-                    blue = neutral.b;
-                    break;
-                }
-                case "light": {
-                    const light = hexToRgba(getCssProperty$1("--ic-architectural-40"));
-                    red = light.r;
-                    green = light.g;
-                    blue = light.b;
-                    break;
+                    return rgbaStrToObj(getCssProperty$1(`--ic-status-${this.variant}`));
                 }
+                case "neutral":
+                case "light":
+                    return hexToRgba(getCssProperty$1(`--ic-architectural-${this.variant === "neutral" ? 500 : 40}`));
             }
-            const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
-            this.foregroundColour =
-                brightness > 133.3505
-                    ? IcThemeForegroundEnum$1.Dark
-                    : IcThemeForegroundEnum$1.Light;
         };
-        this.getTextLabel = () => {
-            let label;
-            if (this.textLabel !== null) {
-                if (this.maxNumber !== null) {
-                    label =
-                        Number(this.textLabel) > this.maxNumber
-                            ? `${this.maxNumber}+`
-                            : this.textLabel;
-                }
-                else {
-                    label = this.textLabel;
-                }
-            }
-            return label;
+        this.getBadgeForeground = () => {
+            const { r, g, b } = this.getBadgeRGB();
+            this.foregroundColour = getThemeForegroundColor((r * 299 + g * 587 + b * 114) / 1000);
         };
+        this.getTextLabel = () => this.maxNumber && Number(this.textLabel) > this.maxNumber
+            ? `${this.maxNumber}+`
+            : this.textLabel;
         // Set aria-label on badge and / or parent element
         // Aria-describedby seems to not work, probably due to shadow DOM
         this.setAccessibleLabel = () => {
-            const parentElType = getParentElementType(this.el);
-            const parentElAriaLabel = getParentElement(this.el).ariaLabel;
+            const parentEl = this.el.parentElement;
             const defaultAriaLabel = this.isAccessibleLabelDefined()
                 ? this.accessibleLabel
                 : this.textLabel || "with badge being displayed";
-            if (getParentElement(this.el) !== null) {
-                if (parentElType !== "IC-CARD" &&
-                    (parentElType !== "IC-TAB" ||
-                        (parentElType === "IC-TAB" && parentElAriaLabel))) {
-                    getParentElement(this.el).ariaLabel = `${parentElAriaLabel ? `${parentElAriaLabel} ,` : ""} ${defaultAriaLabel}`;
+            if (parentEl) {
+                const { tagName } = parentEl;
+                if (tagName !== "IC-CARD" &&
+                    (tagName !== "IC-TAB" || (tagName === "IC-TAB" && this.parentAriaLabel))) {
+                    const ariaLabelPrefix = this.parentAriaLabel
+                        ? `${this.parentAriaLabel} ,`
+                        : "";
+                    parentEl.ariaLabel = this.visible
+                        ? `${ariaLabelPrefix} ${defaultAriaLabel}`
+                        : undefined;
                 }
                 else {
                     this.ariaLabel = `, ${defaultAriaLabel}`;
                 }
             }
         };
-        this.isAccessibleLabelDefined = () => {
-            return isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
-        };
+        this.isAccessibleLabelDefined = () => isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
         this.accessibleLabel = undefined;
         this.customColor = null;
         this.maxNumber = undefined;
@@ -8706,9 +8630,25 @@ class Badge {
         this.variant = "neutral";
         this.visible = true;
     }
+    accessibleLabelHandler() {
+        this.setAccessibleLabel();
+    }
+    customColorHandler() {
+        this.variant === "custom" && this.setBadgeColour();
+    }
+    variantHandler() {
+        this.getBadgeForeground();
+    }
+    visibleHandler() {
+        this.setAccessibleLabel();
+    }
     componentWillLoad() {
+        var _a;
         this.variant === "custom" && this.setBadgeColour();
         this.getBadgeForeground();
+        const ariaLabel = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.ariaLabel;
+        if (ariaLabel)
+            this.parentAriaLabel = ariaLabel;
         this.setAccessibleLabel();
     }
     componentDidLoad() {
@@ -8728,19 +8668,24 @@ class Badge {
         this.visible = false;
     }
     render() {
-        const { position, size, type, variant, foregroundColour, visible } = this;
+        const { ariaLabel, el, foregroundColour, getTextLabel, position, size, textLabel, type, variant, visible, } = this;
         return (hAsync(Host, { class: {
                 [`${position}`]: true,
                 [`${size}`]: true,
                 [`${variant}`]: true,
                 [`${type}`]: true,
                 [`foreground-${foregroundColour}`]: foregroundColour !== null,
-                ["show"]: visible,
-                ["hide"]: !visible,
-            }, id: this.el.id || null, "aria-label": this.ariaLabel, role: "status" }, type === "icon" && hAsync("slot", { name: "badge-icon" }), type === "text" && (hAsync("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, this.getTextLabel()))));
+                [`${visible ? "show" : "hide"}`]: true,
+            }, id: el.id || null, "aria-label": ariaLabel, role: "status" }, type === "icon" && hAsync("slot", { name: "badge-icon" }), type === "text" && textLabel && (hAsync("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, getTextLabel()))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "accessibleLabel": ["accessibleLabelHandler"],
+        "customColor": ["customColorHandler"],
+        "variant": ["variantHandler"],
+        "visible": ["visibleHandler"]
+    }; }
     static get style() { return icBadgeCss; }
     static get cmpMeta() { return {
         "$flags$": 25,
@@ -8783,9 +8728,9 @@ class Breadcrumb {
                 return (hAsync("span", { class: {
                         "current-page-container": current,
                         [this.appearance]: true,
-                    } }, isSlotUsed(this.el, "icon") && hAsync("slot", { name: "icon" }), pageTitle));
+                    } }, isSlotUsed$1(this.el, "icon") && hAsync("slot", { name: "icon" }), pageTitle));
             }
-            return (hAsync("ic-link", { appearance: this.appearance, href: href, class: "breadcrumb-link", "aria-describedby": this.showBackIcon && describedById && describedById }, this.showBackIcon && (hAsync("div", { class: "back-icon", innerHTML: backIcon })), isSlotUsed(this.el, "icon") && hAsync("slot", { name: "icon" }), pageTitle));
+            return (hAsync("ic-link", { appearance: this.appearance, href: href, class: "breadcrumb-link", "aria-describedby": this.showBackIcon && describedById && describedById }, this.showBackIcon && (hAsync("div", { class: "back-icon", innerHTML: backIcon })), isSlotUsed$1(this.el, "icon") && hAsync("slot", { name: "icon" }), pageTitle));
         };
         this.setSlottedCurrentPageClass = () => {
             const icLink = this.el.querySelector("ic-link");
@@ -8933,6 +8878,8 @@ class BreadcrumbGroup {
                 this.removeVisuallyHiddenClass(breadcrumb);
             });
             this.expandedBreadcrumbs = true;
+            // Set focus to first unhidden breadcrumb
+            this.collapsedBreadcrumbs[0].setFocus();
         };
         this.transitionendHandler = (event) => {
             if (event.propertyName === "opacity") {
@@ -9326,15 +9273,15 @@ class Button {
                 ["dark"]: this.appearance === IcThemeForegroundEnum$1.Dark,
                 ["light"]: this.appearance === IcThemeForegroundEnum$1.Light,
                 ["full-width"]: this.fullWidth,
-                ["with-badge"]: isSlotUsed(this.el, "badge"),
+                ["with-badge"]: isSlotUsed$1(this.el, "badge"),
                 ["dropdown-no-icon"]: this.dropdown &&
-                    !isSlotUsed(this.el, "icon") &&
-                    !isSlotUsed(this.el, "left-icon"),
-                ["top-icon"]: isSlotUsed(this.el, "top-icon"),
+                    !isSlotUsed$1(this.el, "icon") &&
+                    !isSlotUsed$1(this.el, "left-icon"),
+                ["top-icon"]: isSlotUsed$1(this.el, "top-icon"),
                 ["white-background"]: this.variant === "secondary" &&
                     !this.transparentBackground &&
                     this.appearance !== "light",
-            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (hAsync("ic-tooltip", { id: describedBy, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && (!!title || !!ariaLabel) }, this.hasRouterSlot() ? (hAsync("slot", { name: "router-item" })) : (hAsync(ButtonContent, null)))), isSlotUsed(this.el, "badge") && hAsync("slot", { name: "badge" }), !this.hasTooltip &&
+            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (hAsync("ic-tooltip", { id: describedBy, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && (!!title || !!ariaLabel) }, this.hasRouterSlot() ? (hAsync("slot", { name: "router-item" })) : (hAsync(ButtonContent, null)))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" }), !this.hasTooltip &&
             (this.hasRouterSlot() ? (hAsync("slot", { name: "router-item" })) : (hAsync(ButtonContent, null))), this.describedByContent && (hAsync("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
     }
     static get delegatesFocus() { return true; }
@@ -9452,7 +9399,7 @@ class Card {
         removeDisabledFalse$1(this.disabled, this.el);
     }
     componentDidLoad() {
-        !isSlotUsed(this.el, "heading") &&
+        !isSlotUsed$1(this.el, "heading") &&
             onComponentRequiredPropUndefined$1([{ prop: this.heading, propName: "heading" }], "Card");
         this.updateTheme();
     }
@@ -9505,12 +9452,12 @@ class Card {
                 ["fullwidth"]: fullWidth,
                 ["focussed"]: isFocussed,
                 ["dark"]: this.appearance === IcThemeForegroundEnum$1.Dark,
-            }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), isSlotUsed(this.el, "image-top") && (hAsync("div", { class: "image-top" }, hAsync("slot", { name: "image-top" }))), hAsync("div", { class: "card-header" }, isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("div", { class: "card-title" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h4" }, hAsync("p", null, heading)))), isSlotUsed(this.el, "interaction-button") && (hAsync("div", { class: "interaction-button" }, hAsync("slot", { name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (hAsync("div", { class: "subheading" }, hAsync("slot", { name: "subheading" }, hAsync("ic-typography", { variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (hAsync("div", { class: "adornment" }, hAsync("slot", { name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (hAsync("div", { class: "image-mid" }, hAsync("slot", { name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (hAsync("div", { class: {
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), isSlotUsed$1(this.el, "image-top") && (hAsync("div", { class: "image-top" }, hAsync("slot", { name: "image-top" }))), hAsync("div", { class: "card-header" }, isSlotUsed$1(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("div", { class: "card-title" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h4" }, hAsync("p", null, heading)))), isSlotUsed$1(this.el, "interaction-button") && (hAsync("div", { class: "interaction-button" }, hAsync("slot", { name: "interaction-button" })))), (subheading || isSlotUsed$1(this.el, "subheading")) && (hAsync("div", { class: "subheading" }, hAsync("slot", { name: "subheading" }, hAsync("ic-typography", { variant: "subtitle-small" }, subheading)))), isSlotUsed$1(this.el, "adornment") && (hAsync("div", { class: "adornment" }, hAsync("slot", { name: "adornment" }))), isSlotUsed$1(this.el, "image-mid") && (hAsync("div", { class: "image-mid" }, hAsync("slot", { name: "image-mid" }))), (message || isSlotUsed$1(this.el, "message")) && (hAsync("div", { class: {
                 ["card-message"]: true,
-            } }, message && hAsync("ic-typography", { variant: "body" }, message), isSlotUsed(this.el, "message") && hAsync("slot", { name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (hAsync("div", { class: "interaction-area" }, hAsync("div", { class: "interaction-controls" }, hAsync("slot", { name: "interaction-controls" })), expandable && (hAsync("ic-tooltip", { id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, hAsync("button", { class: {
+            } }, message && hAsync("ic-typography", { variant: "body" }, message), isSlotUsed$1(this.el, "message") && hAsync("slot", { name: "message" }))), (isSlotUsed$1(this.el, "interaction-controls") || expandable) && (hAsync("div", { class: "interaction-area" }, hAsync("div", { class: "interaction-controls" }, hAsync("slot", { name: "interaction-controls" })), expandable && (hAsync("ic-tooltip", { id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, hAsync("button", { class: {
                 ["toggle-button"]: true,
                 [`toggle-button-${this.areaExpanded ? "expanded" : "closed"}`]: true,
-            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (hAsync("div", { class: "expanded-content", id: "expanded-content-area" }, hAsync("slot", { name: "expanded-content" }))), isSlotUsed(this.el, "badge") && hAsync("slot", { name: "badge" })));
+            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed$1(this.el, "expanded-content") && this.areaExpanded && (hAsync("div", { class: "expanded-content", id: "expanded-content-area" }, hAsync("slot", { name: "expanded-content" }))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" })));
     }
     get el() { return getElement(this); }
     static get style() { return icCardCss; }
@@ -9554,7 +9501,6 @@ class Checkbox {
         registerInstance(this, hostRef);
         this.checkboxChecked = createEvent(this, "checkboxChecked", 7);
         this.icCheck = createEvent(this, "icCheck", 7);
-        this.IC_TEXT_FIELD = "ic-text-field";
         this.handleClick = () => {
             this.checked = !this.checked;
             this.icCheck.emit();
@@ -9585,6 +9531,12 @@ class Checkbox {
     componentWillLoad() {
         removeDisabledFalse$1(this.disabled, this.el);
         addFormResetListener$1(this.el, this.handleFormReset);
+        const checkboxGroup = this.el.parentElement;
+        if (checkboxGroup) {
+            if (!this.name)
+                this.name = checkboxGroup.name;
+            this.groupLabel = checkboxGroup.label;
+        }
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined$1([
@@ -9594,21 +9546,18 @@ class Checkbox {
     }
     componentDidRender() {
         if (this.additionalFieldDisplay === "static") {
-            const textfield = this.el.querySelector(this.IC_TEXT_FIELD);
+            const textfield = this.el.querySelector("ic-text-field");
             if (!this.checked) {
-                textfield && textfield.setAttribute("disabled", "");
+                textfield === null || textfield === void 0 ? void 0 : textfield.setAttribute("disabled", "");
             }
             else {
-                textfield && textfield.removeAttribute("disabled");
+                textfield === null || textfield === void 0 ? void 0 : textfield.removeAttribute("disabled");
             }
         }
         else if (this.additionalFieldContainer) {
-            if (!this.checked) {
-                this.additionalFieldContainer.style.display = "none";
-            }
-            else {
-                this.additionalFieldContainer.style.display = "flex";
-            }
+            this.additionalFieldContainer.style.display = !this.checked
+                ? "none"
+                : "flex";
         }
     }
     disconnectedCallback() {
@@ -9618,28 +9567,28 @@ class Checkbox {
      * Sets focus on the checkbox.
      */
     async setFocus() {
-        const checkboxEl = this.el.shadowRoot.querySelector(".checkbox");
-        if (checkboxEl) {
-            checkboxEl.focus();
-        }
+        var _a;
+        (_a = this.el.shadowRoot.querySelector(".checkbox")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        let id = `ic-checkbox-${isPropDefined(this.label) ? this.label : this.value}-${this.groupLabel}`;
-        id = id.replace(/ /g, "-");
-        const parentElementSize = this.el.parentElement.size;
-        this.checked
-            ? renderHiddenInput$1(true, this.el, this.name, this.checked && this.value, this.disabled)
-            : removeHiddenInput(this.el);
+        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, formaction, formenctype, formmethod, formnovalidate, formtarget, indeterminate, groupLabel, label, name, size, small, value, } = this;
+        const id = `ic-checkbox-${isPropDefined(label) || value}-${groupLabel}`.replace(/ /g, "-");
+        const parentElementSize = el.parentElement
+            .size;
+        checked
+            ? renderHiddenInput$1(true, el, name, checked && value, disabled)
+            : removeHiddenInput(el);
         return (hAsync(Host, { class: {
-                ["disabled"]: this.disabled,
-                ["small"]: this.small,
-                [`${this.size || parentElementSize}`]: true,
-            } }, hAsync("div", { class: "container" }, this.checked && !this.indeterminate && (hAsync("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, hAsync("title", null, "checkmark icon"), hAsync("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), this.checked && this.indeterminate && (hAsync("div", { class: "indeterminate-symbol" })), hAsync("input", { role: "checkbox", class: {
-                ["checkbox"]: true,
-                ["checked"]: this.checked,
-                ["indeterminate"]: this.indeterminate,
-            }, type: "checkbox", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.checked, indeterminate: this.indeterminate, onClick: this.handleClick, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), hAsync("ic-typography", { class: "checkbox-label", variant: "body" }, hAsync("label", { htmlFor: id }, this.label))), isSlotUsed(this.el, "additional-field") && (hAsync("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, this.additionalFieldDisplay === "dynamic" && (hAsync("div", { class: "branch-corner" })), hAsync("div", null, this.additionalFieldDisplay === "dynamic" && (hAsync("ic-typography", { variant: "caption" }, hAsync("p", { class: "dynamic-text", "aria-live": "polite" }, this.dynamicText))), hAsync("div", { class: {
-                "additional-field-wrapper": this.additionalFieldDisplay === "static",
+                disabled,
+                small,
+                [`${size || parentElementSize}`]: true,
+            } }, hAsync("div", { class: "container" }, checked &&
+            (!indeterminate ? (hAsync("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, hAsync("title", null, "checkmark icon"), hAsync("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))) : (hAsync("div", { class: "indeterminate-symbol" }))), hAsync("input", { role: "checkbox", class: {
+                checkbox: true,
+                checked,
+                indeterminate,
+            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: indeterminate, onClick: this.handleClick, form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget }), hAsync("ic-typography", { class: "checkbox-label", variant: "body" }, hAsync("label", { htmlFor: id }, label))), isSlotUsed$1(el, "additional-field") && (hAsync("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (hAsync("div", { class: "branch-corner" })), hAsync("div", null, additionalFieldDisplay === "dynamic" && (hAsync("ic-typography", { variant: "caption" }, hAsync("p", { class: "dynamic-text", "aria-live": "polite" }, dynamicText))), hAsync("div", { class: {
+                "additional-field-wrapper": additionalFieldDisplay === "static",
             } }, hAsync("slot", { name: "additional-field" })))))));
     }
     static get delegatesFocus() { return true; }
@@ -9693,6 +9642,16 @@ class CheckboxGroup {
         this.validationStatus = "";
         this.validationText = "";
     }
+    labelNameHandler(newValue, oldValue, propName) {
+        Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
+            if (propName === "label")
+                checkbox.groupLabel = newValue;
+            else if (checkbox.name === oldValue) {
+                // If the checkbox name has been set by the parent, then override it
+                checkbox.name = newValue;
+            }
+        });
+    }
     handleChange(ev) {
         //don't pass on the event if it has come from slotted text field
         //otherwise any icChange handler bound to the checkbox group will also run
@@ -9704,20 +9663,15 @@ class CheckboxGroup {
         removeDisabledFalse$1(this.disabled, this.el);
     }
     componentDidLoad() {
-        Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
-            if (!checkbox.name)
-                checkbox.name = this.name;
-            checkbox.groupLabel = this.label;
-        });
         onComponentRequiredPropUndefined$1([
             { prop: this.label, propName: "label" },
             { prop: this.name, propName: "name" },
         ], "Checkbox Group");
     }
-    selectHandler(ev) {
-        const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter((checkbox) => checkbox.checked && !checkbox.disabled);
+    selectHandler({ target }) {
+        const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter(({ checked, disabled }) => checked && !disabled);
         this.icChange.emit({
-            value: checkedOptions.map((opt) => opt.value),
+            value: checkedOptions.map(({ value }) => value),
             checkedOptions: checkedOptions.map((opt) => {
                 var _a;
                 return ({
@@ -9725,19 +9679,21 @@ class CheckboxGroup {
                     textFieldValue: (_a = opt.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
                 });
             }),
-            selectedOption: ev.target,
+            selectedOption: target,
         });
     }
     render() {
-        const describedBy = getInputDescribedByText$1(this.name, this.helperText !== "", this.validationStatus !== "");
-        const hadValidationStatus = hasValidationStatus$1(this.validationStatus, this.disabled);
-        return (hAsync(Host, { class: { ["small"]: this.small, [`${this.size}`]: true } }, (this.validationStatus === "error" ||
-            this.required ||
-            this.hideLabel) && (hAsync("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, this.label, " ", this.validationStatus === "error" ? "invalid data " : null, " ", this.required ? "required" : null)), hAsync("fieldset", { id: this.name, "aria-labelledby": `${this.validationStatus === "error" || this.required || this.hideLabel
+        const { disabled, helperText, hideLabel, label, name, required, size, small, validationStatus, validationText, } = this;
+        const describedBy = getInputDescribedByText$1(name, helperText !== "", validationStatus !== "");
+        return (hAsync(Host, { class: { ["small"]: small, [`${size}`]: true } }, (validationStatus === "error" || required || hideLabel) && (hAsync("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), hAsync("fieldset", { id: name, "aria-labelledby": `${validationStatus === "error" || required || hideLabel
                 ? "screenReaderOnlyText"
-                : ""} ${describedBy}`.trim(), disabled: this.disabled }, !this.hideLabel && (hAsync("legend", null, hAsync("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled, for: this.name }))), hAsync("div", { class: "checkboxes-container" }, hAsync("slot", null))), hadValidationStatus && (hAsync("ic-input-validation", { for: this.name, ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
+                : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (hAsync("legend", null, hAsync("ic-input-label", { class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, for: name }))), hAsync("div", { class: "checkboxes-container" }, hAsync("slot", null))), hasValidationStatus$1(validationStatus, disabled) && (hAsync("ic-input-validation", { for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "label": ["labelNameHandler"],
+        "name": ["labelNameHandler"]
+    }; }
     static get style() { return icCheckboxGroupCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -9765,7 +9721,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-200)}/*!@.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}/*!@.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.
@@ -9781,23 +9737,20 @@ class Chip {
             this.icDismiss.emit();
         };
         this.mouseEnterHandler = () => {
-            this.isHovered = true;
+            this.hovered = true;
         };
         this.mouseLeaveHandler = () => {
-            this.isHovered = false;
+            this.hovered = false;
         };
         this.setChipColour = () => {
-            if (convertToRGBA(this.customColor) !== null) {
-                const colorRGBA = convertToRGBA(this.customColor);
-                const rgbaValue = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;
-                const brightness = (colorRGBA.r * 299 + colorRGBA.g * 587 + colorRGBA.b * 114) / 1000;
-                const foregroundColour = brightness > 133.3505
-                    ? "var(--ic-architectural-black)"
-                    : "var(--ic-architectural-white)";
-                this.el.setAttribute("style", `--chip-custom-color: ${rgbaValue}; --chip-custom-foreground-color: ${foregroundColour};`);
+            const colorRGBA = convertToRGBA(this.customColor);
+            if (colorRGBA) {
+                const { r, g, b, a } = colorRGBA;
+                const foregroundColour = (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? "black" : "white";
+                this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`);
             }
         };
-        this.isHovered = false;
+        this.hovered = false;
         this.visible = true;
         this.appearance = undefined;
         this.customColor = null;
@@ -9809,13 +9762,13 @@ class Chip {
         this.variant = "filled";
     }
     customColorHandler() {
-        if (!this.dismissible && this.customColor !== null) {
+        if (!this.dismissible) {
             this.setChipColour();
         }
     }
     componentWillLoad() {
         removeDisabledFalse$1(this.disabled, this.el);
-        if (!this.dismissible && this.customColor !== null) {
+        if (!this.dismissible) {
             this.setChipColour();
         }
         if (this.appearance === "outline") {
@@ -9823,10 +9776,6 @@ class Chip {
         }
     }
     componentDidLoad() {
-        var _a;
-        this.dismissible &&
-            ((_a = this.el.shadowRoot
-                .querySelector("span.ic-tooltip-label")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true"));
         onComponentRequiredPropUndefined$1([{ prop: this.label, propName: "label" }], "Chip");
     }
     handleClick() {
@@ -9836,24 +9785,21 @@ class Chip {
      * Sets focus on the chip.
      */
     async setFocus() {
-        if (this.el.shadowRoot.querySelector("button")) {
-            this.el.shadowRoot.querySelector("button").focus();
-        }
+        var _a;
+        (_a = this.el.shadowRoot.querySelector("button")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { label, appearance, variant, size, dismissible, visible, disabled, isHovered, } = this;
+        const { label, appearance, variant, size, dismissible, visible, disabled, hovered, } = this;
         return (visible && (hAsync("div", { class: {
-                ["chip"]: true,
+                chip: true,
                 [`${appearance}`]: appearance !== undefined,
                 [`${variant}`]: true,
                 [`${size}`]: true,
-                ["disabled"]: disabled,
-                ["dismissible"]: dismissible,
-                ["hovered"]: isHovered,
-                ["white-background"]: this.variant === "outlined" && !this.transparentBackground,
-            } }, isSlotUsed(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"]: true,
-            }, "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && hAsync("slot", { name: "badge" }))));
+                disabled,
+                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" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -9873,7 +9819,7 @@ class Chip {
             "size": [1],
             "transparentBackground": [4, "transparent-background"],
             "variant": [1],
-            "isHovered": [32],
+            "hovered": [32],
             "visible": [32],
             "setFocus": [64]
         },
@@ -9985,7 +9931,7 @@ class DataRow {
         };
         this.renderCellContent = (cell) => {
             const isValue = cell === "value";
-            return (hAsync("div", { class: cell }, isSlotUsed(this.el, cell) ? (hAsync("slot", { name: cell })) : (hAsync("ic-typography", { variant: isValue
+            return (hAsync("div", { class: cell }, isSlotUsed$1(this.el, cell) ? (hAsync("slot", { name: cell })) : (hAsync("ic-typography", { variant: isValue
                     ? "body"
                     : this.entitySize === "xs"
                         ? "label"
@@ -10031,7 +9977,7 @@ class DataRow {
                 ["small"]: small || size === "small",
                 ["breakpoint-medium"]: entitySize === "m",
                 ["breakpoint-xs"]: entitySize === "xs",
-            }, role: "listitem" }, hAsync("div", { class: "data" }, hAsync("div", { class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (hAsync("div", { class: "end-component" }, hAsync("slot", { name: "end-component" })))), hAsync("div", { class: "divider" })));
+            }, role: "listitem" }, hAsync("div", { class: "data" }, hAsync("div", { class: "text-cells" }, (isSlotUsed$1(el, "label") || label) && renderCellContent("label"), (isSlotUsed$1(el, "value") || value) && renderCellContent("value")), hasEndComponent && (hAsync("div", { class: "end-component" }, hAsync("slot", { name: "end-component" })))), hAsync("div", { class: "divider" })));
     }
     get el() { return getElement(this); }
     static get style() { return icDataRowCss; }
@@ -10064,81 +10010,433 @@ 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))}/*!@.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-container*/[embedded=\"true\"].sc-ic-data-table-h .table-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}/*!@.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}/*!@.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}/*!@.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;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}@media screen and (min-width: 576px){/*!@.column-header-inner-container*/.column-header-inner-container.sc-ic-data-table{display:flex;align-items:center}}";
+// Global ARIA attributes
+const IC_INHERITED_ARIA = [
+    "aria-atomic",
+    "aria-autocomplete",
+    "aria-busy",
+    "aria-controls",
+    "aria-current",
+    "aria-describedby",
+    "aria-description",
+    "aria-details",
+    "aria-disabled",
+    "aria-dropeffect",
+    "aria-errormessage",
+    "aria-expanded",
+    "aria-flowto",
+    "aria-grabbed",
+    "aria-haspopup",
+    "aria-hidden",
+    "aria-invalid",
+    "aria-keyshortcuts",
+    "aria-label",
+    "aria-labelledby",
+    "aria-live",
+    "aria-owns",
+    "aria-relevant",
+    "aria-roledescription",
+];
+
+var IcInformationStatus;
+(function (IcInformationStatus) {
+    IcInformationStatus["Warning"] = "warning";
+    IcInformationStatus["Error"] = "error";
+    IcInformationStatus["Success"] = "success";
+})(IcInformationStatus || (IcInformationStatus = {}));
+var IcThemeForegroundEnum;
+(function (IcThemeForegroundEnum) {
+    IcThemeForegroundEnum["Default"] = "default";
+    IcThemeForegroundEnum["Dark"] = "dark";
+    IcThemeForegroundEnum["Light"] = "light";
+})(IcThemeForegroundEnum || (IcThemeForegroundEnum = {}));
+var IcDateInputMonths;
+(function (IcDateInputMonths) {
+    IcDateInputMonths[IcDateInputMonths["January"] = 0] = "January";
+    IcDateInputMonths[IcDateInputMonths["February"] = 1] = "February";
+    IcDateInputMonths[IcDateInputMonths["March"] = 2] = "March";
+    IcDateInputMonths[IcDateInputMonths["April"] = 3] = "April";
+    IcDateInputMonths[IcDateInputMonths["May"] = 4] = "May";
+    IcDateInputMonths[IcDateInputMonths["June"] = 5] = "June";
+    IcDateInputMonths[IcDateInputMonths["July"] = 6] = "July";
+    IcDateInputMonths[IcDateInputMonths["August"] = 7] = "August";
+    IcDateInputMonths[IcDateInputMonths["September"] = 8] = "September";
+    IcDateInputMonths[IcDateInputMonths["October"] = 9] = "October";
+    IcDateInputMonths[IcDateInputMonths["November"] = 10] = "November";
+    IcDateInputMonths[IcDateInputMonths["December"] = 11] = "December";
+})(IcDateInputMonths || (IcDateInputMonths = {}));
+var IcShortDayNames;
+(function (IcShortDayNames) {
+    IcShortDayNames[IcShortDayNames["Sun"] = 0] = "Sun";
+    IcShortDayNames[IcShortDayNames["Mon"] = 1] = "Mon";
+    IcShortDayNames[IcShortDayNames["Tue"] = 2] = "Tue";
+    IcShortDayNames[IcShortDayNames["Wed"] = 3] = "Wed";
+    IcShortDayNames[IcShortDayNames["Thu"] = 4] = "Thu";
+    IcShortDayNames[IcShortDayNames["Fri"] = 5] = "Fri";
+    IcShortDayNames[IcShortDayNames["Sat"] = 6] = "Sat";
+})(IcShortDayNames || (IcShortDayNames = {}));
+var IcDayNames;
+(function (IcDayNames) {
+    IcDayNames[IcDayNames["Sunday"] = 0] = "Sunday";
+    IcDayNames[IcDayNames["Monday"] = 1] = "Monday";
+    IcDayNames[IcDayNames["Tuesday"] = 2] = "Tuesday";
+    IcDayNames[IcDayNames["Wednesday"] = 3] = "Wednesday";
+    IcDayNames[IcDayNames["Thursday"] = 4] = "Thursday";
+    IcDayNames[IcDayNames["Friday"] = 5] = "Friday";
+    IcDayNames[IcDayNames["Saturday"] = 6] = "Saturday";
+})(IcDayNames || (IcDayNames = {}));
+var IcWeekDays;
+(function (IcWeekDays) {
+    IcWeekDays[IcWeekDays["Sunday"] = 0] = "Sunday";
+    IcWeekDays[IcWeekDays["Monday"] = 1] = "Monday";
+    IcWeekDays[IcWeekDays["Tuesday"] = 2] = "Tuesday";
+    IcWeekDays[IcWeekDays["Wednesday"] = 3] = "Wednesday";
+    IcWeekDays[IcWeekDays["Thursday"] = 4] = "Thursday";
+    IcWeekDays[IcWeekDays["Friday"] = 5] = "Friday";
+    IcWeekDays[IcWeekDays["Saturday"] = 6] = "Saturday";
+})(IcWeekDays || (IcWeekDays = {}));
 
-class DataTable {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.SORT_ICONS = {
-            unsorted: unsortedIcon,
-            ascending: ascendingIcon,
-            descending: descendingIcon,
-        };
-        this.isObject = (value) => typeof value === "object";
-        this.notDefaultDensity = () => this.density !== "default";
-        this.getCellContent = (cell, dataType) => {
-            switch (dataType) {
-                case "element":
-                    return undefined;
-                case "date":
-                    return (cell instanceof Date ? cell : new Date(cell)).toLocaleDateString();
-                default:
-                    return cell;
-            }
-        };
-        this.getCellAlignment = (cell, alignment) => {
-            if (this.isObject(cell) && Object.keys(cell).includes("cellAlignment")) {
-                return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
-            }
-        };
-        this.createCells = (row) => {
-            const rowValues = Object.values(row);
-            const rowKeys = Object.keys(row);
-            let rowAlignment;
-            let rowEmphasis;
-            const headerIndex = rowKeys.indexOf("header");
-            if (headerIndex > -1) {
-                rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
-                rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
+/**
+ * converts an enum of strings into an array of strings
+ */
+const stringEnumToArray = (theEnum) => {
+    const arr = [];
+    Object.values(theEnum).forEach((val) => {
+        if (isNaN(Number(val))) {
+            const str = val;
+            arr.push(str);
+        }
+    });
+    return arr;
+};
+/**
+ * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
+ * to a variable that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (element, attributes = []) => {
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (element.hasAttribute(attr)) {
+            const value = element.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = element.getAttribute(attr);
             }
-            return rowValues.map((cell, index) => {
-                const { columnAlignment, dataType, emphasis } = this.columns[index];
-                const cellValue = (key) => this.getObjectValue(cell, key);
+            element.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+/**
+ * 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
+ * allows it to be picked up inside of forms. It should contain the same
+ * values as the host element.
+ *
+ * @param always Add a hidden input even if the container does not use Shadow
+ * @param container The element where the input will be added
+ * @param name The name of the input
+ * @param value The value of the input
+ * @param disabled If true, the input is disabled
+ */
+const renderHiddenInput = (always, container, name, value, disabled) => {
+    if (name !== undefined && (always || hasShadowDom(container))) {
+        const inputs = container.querySelectorAll("input.ic-input");
+        const inputEls = Array.from(inputs);
+        const filtered = inputEls.filter((el) => container === el.parentElement);
+        let input = filtered[0];
+        if (input === null || input === undefined) {
+            input = container.ownerDocument.createElement("input");
+            input.type = "hidden";
+            input.classList.add("ic-input");
+            container.appendChild(input);
+        }
+        input.disabled = disabled;
+        input.name = name;
+        if (value instanceof Date) {
+            input.value = value ? value.toISOString() : null;
+        }
+        else {
+            input.value = value || "";
+        }
+    }
+};
+const isEmptyString = (value) => value ? value.trim().length === 0 : true;
+const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
+const getSlot = (element, name) => {
+    if (element && element.querySelector) {
+        return element.querySelector(`[slot="${name}"]`);
+    }
+    return null;
+};
+const getSlotContent = (element, name) => {
+    const slot = getSlot(element, name);
+    if (slot) {
+        return getSlotElements(slot);
+    }
+    return null;
+};
+const getSlotElements = (slot) => {
+    const slotContent = slot.firstElementChild;
+    if (slotContent !== null) {
+        const elements = slotContent.assignedElements
+            ? slotContent.assignedElements()
+            : slotContent.childNodes;
+        return elements.length ? elements : null;
+    }
+    else {
+        //check for single element
+        return slot === null ? null : [slot];
+    }
+};
+({
+    XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
+    S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
+    M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
+    L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
+    XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
+    UNDEFINED: 1200,
+});
+const isSlotUsed = (element, slotName) => Array.from(element.children).some((child) => child.getAttribute("slot") === slotName);
+const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
+const getInputHelperTextID = (id) => id + "-helper-text";
+const getInputValidationTextID = (id) => id + "-validation-text";
+const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
+const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouchPoints > 0 : false;
+/**
+ * Extracts the label using the value from an object. Requires the object to have a label and value property.
+ * @param value - value from object
+ * @param options - list of menu items
+ * @returns - label corresponding to value
+ */
+const getLabelFromValue = (value, options, valueField = "value", labelField = "label") => {
+    const ungroupedOptions = [];
+    if (options.length > 0 && options.map) {
+        options.map((option) => {
+            if (option.children) {
+                option.children.map((option) => ungroupedOptions.push(option));
+            }
+            else {
+                ungroupedOptions.push(option);
+            }
+        });
+        const matchingValue = ungroupedOptions.find((option) => option[valueField] === value);
+        if (matchingValue !== undefined)
+            return matchingValue[labelField];
+    }
+    return undefined;
+};
+/**
+ * Filters the options based on the search string.
+ * @param options - array of options
+ * @param includeDescriptions - determines whether option descriptions are included when filtering options
+ * @param searchString - string used to filter the options
+ * @param position - whether the search string matches the start of or anywhere in the options
+ * @returns filtered array of options
+ */
+const getFilteredMenuOptions = (options, includeDescriptions, searchString, position, labelField = "label") => options.filter((option) => {
+    var _a;
+    const label = option[labelField].toLowerCase();
+    const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const lowerSearchString = searchString.toLowerCase();
+    return position === "anywhere"
+        ? includeDescriptions
+            ? label.includes(lowerSearchString) ||
+                (description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
+            : label.includes(lowerSearchString)
+        : includeDescriptions
+            ? label.startsWith(lowerSearchString) ||
+                (description === null || description === void 0 ? void 0 : description.startsWith(lowerSearchString))
+            : label.startsWith(lowerSearchString);
+});
+/**
+ * Gets count of options where only group title "parent" options have been removed.
+ * Disabled options are included in the count.
+ * @param options - array of options
+ * @returns number of options not including group titles
+ */
+const getOptionsWithoutGroupTitlesCount = (options) => {
+    const optionsWithoutGroupTitles = [];
+    if (options.length > 0 && options.map) {
+        options.map((option) => {
+            if (option.children) {
+                option.children.map((option) => optionsWithoutGroupTitles.push(option));
+            }
+            else {
+                optionsWithoutGroupTitles.push(option);
+            }
+        });
+    }
+    return optionsWithoutGroupTitles.length;
+};
+const isNumeric = (value) => {
+    return /^-?\d+$/.test(value);
+};
+const hasValidationStatus = (status, disabled) => {
+    return status !== "" && !disabled;
+};
+const onComponentRequiredPropUndefined = (props, component) => {
+    for (let i = 0; i < props.length; i++) {
+        const { prop, propName } = props[i];
+        if (prop === null || prop === undefined) {
+            console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(propName)}' (react) required`);
+        }
+    }
+};
+const kebabToCamelCase = (kebabCase) => {
+    kebabCase = kebabCase.toLowerCase();
+    const individualWords = kebabCase.split("-");
+    let camelCase = individualWords[0];
+    for (let i = 1; i < individualWords.length; i++) {
+        camelCase +=
+            individualWords[i].substring(0, 1).toUpperCase() +
+                individualWords[i].substring(1);
+    }
+    return camelCase;
+};
+const checkResizeObserver = (callbackFn) => {
+    if (typeof window !== "undefined" &&
+        typeof window.ResizeObserver !== "undefined") {
+        callbackFn();
+    }
+};
+const getForm = (el) => el.closest("FORM");
+const addFormResetListener = (el, callbackFn) => {
+    const form = getForm(el);
+    if (form !== null) {
+        form.addEventListener("reset", callbackFn);
+    }
+};
+const removeFormResetListener = (el, callbackFn) => {
+    const form = getForm(el);
+    if (form !== null) {
+        form.removeEventListener("reset", callbackFn);
+    }
+};
+const removeDisabledFalse = (disabled, element) => {
+    if (!disabled) {
+        element.removeAttribute("disabled");
+    }
+};
+const isMacDevice = () => {
+    return window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
+};
+
+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}}";
+
+/**
+ * @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.
+ * @slot {COLUMN_KEY}-column-icon - The icon slot for a column header.
+ * @slot title-bar - A custom ic-data-table-title-bar can be slotted above the column headers to display additional information about the table.
+ */
+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.SORT_ICONS = {
+            unsorted: unsortedIcon,
+            ascending: ascendingIcon,
+            descending: descendingIcon,
+        };
+        this.hasLoadedForOneSecond = true;
+        this.startLoadingTimer = () => {
+            this.hasLoadedForOneSecond = false;
+            this.timerStarted = Date.now();
+            setTimeout(() => {
+                this.hasLoadedForOneSecond = true;
+                this.timerStarted = null;
+            }, this.minimumLoadingDisplayDuration);
+        };
+        this.isObject = (value) => typeof value === "object";
+        this.notDefaultDensity = () => this.density !== "default";
+        this.getCellContent = (cell, dataType) => {
+            switch (dataType) {
+                case "element":
+                    return undefined;
+                case "date":
+                    return (cell instanceof Date ? cell : new Date(cell)).toLocaleDateString();
+                default:
+                    return cell;
+            }
+        };
+        this.getCellAlignment = (cell, alignment) => {
+            if (this.isObject(cell) && Object.keys(cell).includes("cellAlignment")) {
+                return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
+            }
+        };
+        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.createCells = (row, rowIndex) => {
+            const rowValues = Object.values(row);
+            const rowKeys = Object.keys(row);
+            let rowAlignment;
+            let rowEmphasis;
+            const headerIndex = rowKeys.indexOf("header");
+            if (headerIndex > -1) {
+                rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
+                rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
+            }
+            return rowValues.map((cell, index) => {
+                var _a, _b, _c, _d, _e;
+                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", { innerHTML: dataType === "element" ? cell : null, class: {
+                    } }, cellValue("title"))) : (hAsync("td", { class: {
                         ["table-cell"]: true,
                         [`table-density-${this.density}`]: this.notDefaultDensity(),
-                        [`data-type-${dataType}`]: true,
-                        [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
-                            this.getCellAlignment(cell, "horizontal")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
-                            !!this.getCellAlignment(cell, "horizontal"),
-                        [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+                        [`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")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+                            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("ic-typography", { variant: "body", class: {
+                    } }, 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")) ||
-                            emphasis ||
+                            (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
                             rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                            !!emphasis ||
+                            !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
                             !!rowEmphasis,
                         [`text-${this.density}`]: this.notDefaultDensity(),
-                    } }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (hAsync("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType)))));
+                    } }, 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 = () => {
-            return this.columns.map(({ cellAlignment, colspan, key, title }) => (hAsync("th", { scope: "col", class: {
+            return this.columns.map(({ cellAlignment, colspan, icon, key, title }) => (hAsync("th", { scope: "col", class: {
                     ["column-header"]: true,
-                    [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
                     [`table-density-${this.density}`]: this.notDefaultDensity(),
-                }, colSpan: colspan }, this.sortable ? (hAsync("div", { class: "column-header-inner-container" }, hAsync("ic-typography", { variant: "body", class: {
+                    ["updating-state-headers"]: this.updating && !this.loading,
+                }, colSpan: colspan }, hAsync("div", { class: {
+                    "column-header-inner-container": true,
+                    [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
+                } }, isSlotUsed(this.el, `${key}-column-icon`) ? (hAsync("slot", { name: `${key}-column-icon` })) : (icon &&
+                !icon.hideOnHeader && (hAsync("span", { class: "icon", innerHTML: icon.icon }))), hAsync("ic-typography", { variant: "body", class: {
                     ["column-header-text"]: true,
                     [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title), hAsync("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+                } }, 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: this.SORT_ICONS[this.sortedColumn === key
                     ? this.sortedColumnOrder
@@ -10146,21 +10444,48 @@ class DataTable {
                     ["sort-button"]: true,
                     ["sort-button-unsorted"]: this.sortedColumn !== key ||
                         this.sortedColumnOrder === "unsorted",
-                } }))) : (hAsync("ic-typography", { variant: "body", class: {
-                    ["column-header-text"]: true,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title)))));
+                } }))))));
         };
         this.createRows = () => {
             const data = this.showPagination
                 ? this.data.slice(this.fromRow, this.toRow)
                 : this.data.slice();
+            /**
+             * Ensures that createCells has a value in data to map over to actually render the slot.
+             * Removes the need for the user to add it multiple times.
+             */
+            this.columns.forEach(({ key }) => {
+                data.forEach((row, rowIndex) => {
+                    const cellSlotName = `${key}-${rowIndex}`;
+                    if (isSlotUsed(this.el, cellSlotName)) {
+                        row[key] = getSlotContent(this.el, cellSlotName);
+                    }
+                });
+            });
             return data
                 .sort(!this.sortable ? undefined : this.getSortFunction())
-                .map((row) => (hAsync("tr", { onClick: () => (this.selectedRow = this.selectedRow !== row && row), class: {
-                    ["table-row"]: true,
-                    ["table-row-selected"]: this.selectedRow === row,
-                } }, this.createCells(row))));
+                .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: {
+                        ["table-row"]: true,
+                        ["table-row-selected"]: this.selectedRow === row,
+                    }, style: {
+                        height: findRowHeight
+                            ? `${findRowHeight * this.DENSITY_HEIGHT_MULTIPLIER[this.density]}px`
+                            : null,
+                    }
+                }, this.createCells(row, index)));
+            });
         };
         this.getObjectValue = (cell, key) => {
             return Object.values(cell)[Object.keys(cell).indexOf(key)];
@@ -10238,15 +10563,19 @@ class DataTable {
         this.data = undefined;
         this.density = "default";
         this.embedded = false;
+        this.globalRowHeight = 40;
         this.hideColumnHeaders = false;
+        this.loading = false;
+        this.loadingOptions = undefined;
+        this.minimumLoadingDisplayDuration = 1000;
         this.paginationOptions = {
             itemsPerPage: [
                 { label: "10", value: "10" },
                 { label: "25", value: "25" },
                 { label: "50", value: "50" },
             ],
-            type: "page",
-            control: "simple",
+            rangeLabelType: "page",
+            type: "simple",
             itemsPerPageControl: true,
             goToPageControl: true,
             alignment: "right",
@@ -10259,13 +10588,18 @@ class DataTable {
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
+        this.updating = false;
+        this.updatingOptions = undefined;
+        this.variableRowHeight = undefined;
     }
     componentWillLoad() {
+        var _a;
         this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);
         this.previousRowsPerPage = this.rowsPerPage;
         this.toRow = this.rowsPerPage;
         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 });
     }
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
@@ -10274,6 +10608,10 @@ class DataTable {
             (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
             this.scrollable = true;
         }
+        if (this.loading) {
+            this.startLoadingTimer();
+            this.showLoadingIndicator();
+        }
     }
     handleItemsPerPageChange(ev) {
         this.previousRowsPerPage = this.rowsPerPage;
@@ -10294,23 +10632,73 @@ class DataTable {
             this.previousRowsPerPage = this.rowsPerPage;
         }
     }
+    handleDensityChange(ev) {
+        this.density = ev.detail.value;
+    }
     clickListener(ev) {
         if (ev.target !== this.el)
             this.selectedRow = undefined;
     }
+    loadingHandler(newValue) {
+        if (newValue)
+            this.startLoadingTimer();
+        if (this.loading) {
+            setTimeout(() => {
+                this.showLoadingIndicator();
+            }, 500);
+        }
+    }
+    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
+                ? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
+                    (Date.now() - this.timerStarted))
+                : (this.loading = false);
+        }
+        if (this.updating)
+            this.updating = false;
+    }
+    rowHeightChangeHandler() {
+        this.icRowHeightChange.emit();
+    }
+    /**
+     * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+     */
+    async resetRowHeights() {
+        this.globalRowHeight = 40;
+        this.variableRowHeight = null;
+    }
+    showLoadingIndicator() {
+        this.loadingIndicator.classList.add("show");
+    }
     render() {
-        const { caption, createColumnHeaders, createRows, data, hideColumnHeaders, paginationOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, } = this;
-        return (hAsync("div", { class: "table-container" }, hAsync("div", { class: {
+        const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationOptions, 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: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, hAsync("tr", null, createColumnHeaders()))), (data === null || data === void 0 ? void 0 : data.length) > 0 && hAsync("tbody", null, createRows()))), showPagination && (hAsync("div", { class: "pagination-container" }, hAsync("ic-pagination-bar", { totalItems: data.length, paginationType: paginationOptions.type, paginationControl: paginationOptions.control, showItemsPerPageControl: paginationOptions.itemsPerPageControl, showGoToPageControl: paginationOptions.goToPageControl, itemsPerPageOptions: paginationOptions.itemsPerPage, alignment: paginationOptions.alignment }))), sortable && (hAsync("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            } }, 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) &&
+            !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,
+                loading: true,
+                "show-background": loadingOptions.showBackground,
+            }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })), showPagination && (hAsync("div", { class: "pagination-container" }, hAsync("ic-pagination-bar", { totalItems: data.length, type: paginationOptions.type, rangeLabelType: paginationOptions.rangeLabelType, showItemsPerPageControl: paginationOptions.itemsPerPageControl, showGoToPageControl: paginationOptions.goToPageControl, itemsPerPageOptions: paginationOptions.itemsPerPage, alignment: paginationOptions.alignment }))), sortable && (hAsync("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted"))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "loading": ["loadingHandler"],
+        "data": ["dataHandler"],
+        "globalRowHeight": ["rowHeightChangeHandler"],
+        "variableRowHeight": ["rowHeightChangeHandler"]
+    }; }
     static get style() { return icDataTableCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -10319,15 +10707,22 @@ class DataTable {
             "caption": [1],
             "columns": [16],
             "data": [16],
-            "density": [1],
+            "density": [1025],
             "embedded": [4],
+            "globalRowHeight": [1032, "global-row-height"],
             "hideColumnHeaders": [4, "hide-column-headers"],
+            "loading": [1028],
+            "loadingOptions": [16],
+            "minimumLoadingDisplayDuration": [2, "minimum-loading-display-duration"],
             "paginationOptions": [16],
             "showPagination": [4, "show-pagination"],
             "sortable": [4],
             "sortOptions": [16],
             "stickyColumnHeaders": [4, "sticky-column-headers"],
             "stickyRowHeaders": [4, "sticky-row-headers"],
+            "updating": [4],
+            "updatingOptions": [16],
+            "variableRowHeight": [1040],
             "fromRow": [32],
             "previousRowsPerPage": [32],
             "rowsPerPage": [32],
@@ -10336,71 +10731,80 @@ class DataTable {
             "selectedRow": [32],
             "sortedColumn": [32],
             "sortedColumnOrder": [32],
-            "toRow": [32]
+            "toRow": [32],
+            "resetRowHeights": [64]
         },
-        "$listeners$": [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [8, "click", "clickListener"]],
+        "$listeners$": [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
 
-var IcInformationStatus;
-(function (IcInformationStatus) {
-    IcInformationStatus["Warning"] = "warning";
-    IcInformationStatus["Error"] = "error";
-    IcInformationStatus["Success"] = "success";
-})(IcInformationStatus || (IcInformationStatus = {}));
-var IcThemeForegroundEnum;
-(function (IcThemeForegroundEnum) {
-    IcThemeForegroundEnum["Default"] = "default";
-    IcThemeForegroundEnum["Dark"] = "dark";
-    IcThemeForegroundEnum["Light"] = "light";
-})(IcThemeForegroundEnum || (IcThemeForegroundEnum = {}));
-var IcDateInputMonths;
-(function (IcDateInputMonths) {
-    IcDateInputMonths[IcDateInputMonths["January"] = 0] = "January";
-    IcDateInputMonths[IcDateInputMonths["February"] = 1] = "February";
-    IcDateInputMonths[IcDateInputMonths["March"] = 2] = "March";
-    IcDateInputMonths[IcDateInputMonths["April"] = 3] = "April";
-    IcDateInputMonths[IcDateInputMonths["May"] = 4] = "May";
-    IcDateInputMonths[IcDateInputMonths["June"] = 5] = "June";
-    IcDateInputMonths[IcDateInputMonths["July"] = 6] = "July";
-    IcDateInputMonths[IcDateInputMonths["August"] = 7] = "August";
-    IcDateInputMonths[IcDateInputMonths["September"] = 8] = "September";
-    IcDateInputMonths[IcDateInputMonths["October"] = 9] = "October";
-    IcDateInputMonths[IcDateInputMonths["November"] = 10] = "November";
-    IcDateInputMonths[IcDateInputMonths["December"] = 11] = "December";
-})(IcDateInputMonths || (IcDateInputMonths = {}));
-var IcShortDayNames;
-(function (IcShortDayNames) {
-    IcShortDayNames[IcShortDayNames["Sun"] = 0] = "Sun";
-    IcShortDayNames[IcShortDayNames["Mon"] = 1] = "Mon";
-    IcShortDayNames[IcShortDayNames["Tue"] = 2] = "Tue";
-    IcShortDayNames[IcShortDayNames["Wed"] = 3] = "Wed";
-    IcShortDayNames[IcShortDayNames["Thu"] = 4] = "Thu";
-    IcShortDayNames[IcShortDayNames["Fri"] = 5] = "Fri";
-    IcShortDayNames[IcShortDayNames["Sat"] = 6] = "Sat";
-})(IcShortDayNames || (IcShortDayNames = {}));
-var IcDayNames;
-(function (IcDayNames) {
-    IcDayNames[IcDayNames["Sunday"] = 0] = "Sunday";
-    IcDayNames[IcDayNames["Monday"] = 1] = "Monday";
-    IcDayNames[IcDayNames["Tuesday"] = 2] = "Tuesday";
-    IcDayNames[IcDayNames["Wednesday"] = 3] = "Wednesday";
-    IcDayNames[IcDayNames["Thursday"] = 4] = "Thursday";
-    IcDayNames[IcDayNames["Friday"] = 5] = "Friday";
-    IcDayNames[IcDayNames["Saturday"] = 6] = "Saturday";
-})(IcDayNames || (IcDayNames = {}));
-var IcWeekDays;
-(function (IcWeekDays) {
-    IcWeekDays[IcWeekDays["Sunday"] = 0] = "Sunday";
-    IcWeekDays[IcWeekDays["Monday"] = 1] = "Monday";
-    IcWeekDays[IcWeekDays["Tuesday"] = 2] = "Tuesday";
-    IcWeekDays[IcWeekDays["Wednesday"] = 3] = "Wednesday";
-    IcWeekDays[IcWeekDays["Thursday"] = 4] = "Thursday";
-    IcWeekDays[IcWeekDays["Friday"] = 5] = "Friday";
-    IcWeekDays[IcWeekDays["Saturday"] = 6] = "Saturday";
-})(IcWeekDays || (IcWeekDays = {}));
+const icDataTableTitleBarCss = "/*!@.title-bar-wrapper,\n.header-container,\n.description-actions,\n.action-area,\n.custom-actions-wrapper*/.title-bar-wrapper.sc-ic-data-table-title-bar,.header-container.sc-ic-data-table-title-bar,.description-actions.sc-ic-data-table-title-bar,.action-area.sc-ic-data-table-title-bar,.custom-actions-wrapper.sc-ic-data-table-title-bar{display:flex}/*!@.title-bar-wrapper,\n.action-area,\n.custom-actions-wrapper*/.title-bar-wrapper.sc-ic-data-table-title-bar,.action-area.sc-ic-data-table-title-bar,.custom-actions-wrapper.sc-ic-data-table-title-bar{gap:var(--ic-space-xs)}/*!@.title-bar-wrapper*/.title-bar-wrapper.sc-ic-data-table-title-bar{flex-direction:column;padding:var(--ic-space-sm) var(--ic-space-xs);border-bottom:var(--ic-space-1px) solid var(--ic-architectural-300)}/*!@.full-width*/.full-width.sc-ic-data-table-title-bar{padding:var(--ic-space-sm) 0;border-bottom:none}/*!@ic-typography.heading h3*/ic-typography.heading.sc-ic-data-table-title-bar h3.sc-ic-data-table-title-bar{margin:0}/*!@ic-typography.ic-typography-subtitle-small*/ic-typography.ic-typography-subtitle-small.sc-ic-data-table-title-bar{color:var(--ic-color-tertiary-text)}/*!@ic-typography.ic-typography-h3,\n::slotted([slot=\"header\"])*/ic-typography.ic-typography-h3.sc-ic-data-table-title-bar,.sc-ic-data-table-title-bar-s>[slot=\"header\"]{max-width:50rem}/*!@ic-typography.ic-typography-body,\n::slotted([slot=\"description\"])*/ic-typography.ic-typography-body.sc-ic-data-table-title-bar,.sc-ic-data-table-title-bar-s>[slot=\"description\"]{color:var(--ic-color-secondary-text)}/*!@ic-typography.ic-typography-body,\nic-typography.ic-typography-subtitle-small,\n::slotted([slot=\"description\"])*/ic-typography.ic-typography-body.sc-ic-data-table-title-bar,ic-typography.ic-typography-subtitle-small.sc-ic-data-table-title-bar,.sc-ic-data-table-title-bar-s>[slot=\"description\"]{max-width:40rem}/*!@.density-input*/.density-input.sc-ic-data-table-title-bar{--input-width:7.625rem}@media screen and (max-width: 1200px){/*!@.header-container*/.header-container.sc-ic-data-table-title-bar{flex-direction:column}}@media screen and (min-width: 1201px){/*!@.header-container*/.header-container.sc-ic-data-table-title-bar{gap:var(--ic-space-xs);align-items:baseline}}@media screen and (min-width: 769px){/*!@.description-actions*/.description-actions.sc-ic-data-table-title-bar{justify-content:space-between}}@media screen and (max-width: 768px){/*!@.description-actions*/.description-actions.sc-ic-data-table-title-bar{flex-direction:column;align-items:flex-start;gap:var(--ic-space-xs)}}@media screen and (min-width: 577px){/*!@.action-area*/.action-area.sc-ic-data-table-title-bar{align-items:center}}@media screen and (max-width: 576px){/*!@.action-area*/.action-area.sc-ic-data-table-title-bar{flex-direction:column}}";
+
+const DEFAULT_TITLE_BAR_HEADING = "Title Bar";
+/**
+ * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.
+ * @slot custom-actions - Render additional custom actions to the left of the density select.
+ * @slot heading - The heading to render on the data table title bar.
+ * @slot description - Render an alternative description in the description section.
+ */
+class DataTableTitleBar {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icTableDensityUpdate = createEvent(this, "icTableDensityUpdate", 7);
+        this.initialDensitySelectOption = "default";
+        this.isEmbedded = false;
+        this.changeDensity = (ev) => {
+            this.icTableDensityUpdate.emit({ value: ev.detail.value });
+        };
+        this.description = undefined;
+        this.heading = DEFAULT_TITLE_BAR_HEADING;
+        this.hideDensitySelect = false;
+        this.metadata = undefined;
+    }
+    componentWillLoad() {
+        const parentEl = this.el.parentElement;
+        if (parentEl.tagName === "IC-DATA-TABLE") {
+            const dataTable = parentEl;
+            this.initialDensitySelectOption = dataTable.density;
+            this.isEmbedded = dataTable.embedded;
+            if (this.heading === DEFAULT_TITLE_BAR_HEADING) {
+                this.heading = dataTable.caption;
+            }
+        }
+    }
+    render() {
+        const { changeDensity, description, el, heading, hideDensitySelect, initialDensitySelectOption, isEmbedded, metadata, } = this;
+        const showActionArea = isSlotUsed(el, "primary-action") ||
+            isSlotUsed(el, "custom-actions") ||
+            !hideDensitySelect;
+        const hasDescription = isSlotUsed(el, "description") || description;
+        return (hAsync("div", { class: {
+                "title-bar-wrapper": true,
+                "full-width": isEmbedded,
+            } }, hAsync("div", { class: "header-container" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h3", className: "heading" }, hAsync("h3", null, heading))), metadata && (hAsync("ic-typography", { variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (hAsync("div", { class: "description-actions" }, hAsync("slot", { name: "description" }, description && (hAsync("ic-typography", { variant: "body" }, description))), showActionArea && (hAsync("div", { class: "action-area" }, isSlotUsed(el, "custom-actions") && (hAsync("div", { class: "custom-actions-wrapper" }, hAsync("slot", { name: "custom-actions" }))), !hideDensitySelect && (hAsync("ic-select", { small: true, label: "Change density", class: "density-input", hideLabel: true, options: [
+                { label: "Default", value: "default" },
+                { label: "Dense", value: "dense" },
+                { label: "Spacious", value: "spacious" },
+            ], value: initialDensitySelectOption, onIcChange: changeDensity })), isSlotUsed(el, "primary-action") && (hAsync("slot", { name: "primary-action" }))))))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return icDataTableTitleBarCss; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-data-table-title-bar",
+        "$members$": {
+            "description": [1],
+            "heading": [1],
+            "hideDensitySelect": [4, "hide-density-select"],
+            "metadata": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
 
 const isMonthFirstFormat = (dateString) => {
     const monthFirstFormat = /^(0[1-9]|1[0-2])(\/|-)(0[1-9]|[12][0-9]|3[01])(\/|-)\d{4}$/;
@@ -10450,318 +10854,89 @@ const splitStringDate = (date, dateFormat) => {
         else {
             const newDateStr = dateParts.join("/");
             const validDayFirst = isDayFirstFormat(newDateStr);
-            const validMonthFirst = isMonthFirstFormat(newDateStr);
-            if (validDayFirst && validMonthFirst) {
-                if (dateFormat.charAt(0) === "M") {
-                    newDate = [dateParts[2], dateParts[0], dateParts[1]];
-                }
-                else {
-                    newDate = [dateParts[2], dateParts[1], dateParts[0]];
-                }
-            }
-            else if (validMonthFirst) {
-                newDate = [dateParts[2], dateParts[0], dateParts[1]];
-            }
-            else {
-                newDate = [dateParts[2], dateParts[1], dateParts[0]];
-            }
-        }
-    }
-    return newDate;
-};
-const convertToDoubleDigits = (value) => {
-    if (+value < 10) {
-        return `0${value}`;
-    }
-    return value.toString();
-};
-const getWeekStart = (date, startDay) => {
-    const tmpDate = new Date(date);
-    const day = tmpDate.getDay();
-    const diff = (day < startDay ? 7 : 0) + day - startDay;
-    tmpDate.setDate(tmpDate.getDate() - diff);
-    return tmpDate;
-};
-const getWeekEnd = (date, startDay) => {
-    const d = new Date(date);
-    const day = d.getDay();
-    const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);
-    d.setDate(d.getDate() + diff);
-    return d;
-};
-const getMonthStart = (date) => {
-    return new Date(date.getFullYear(), date.getMonth(), 1);
-};
-const getMonthEnd = (date) => {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
-};
-/**
- * Compare if two dates are equal exactly equal
- */
-const dateMatches = (a, b) => {
-    if (a === null || b === null) {
-        return false;
-    }
-    return (a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
-};
-const clampDate = (date, min, max) => {
-    const time = date.getTime();
-    if (min !== null && time < min.getTime()) {
-        return min;
-    }
-    if (max !== null && time > max.getTime()) {
-        return max;
-    }
-    return date;
-};
-/**
- * Compare if date is within specified range
- */
-const dateInRange = (date, min, max) => {
-    return clampDate(date, min, max) === date;
-};
-const yearInRange = (year, min, max) => {
-    let allowed = true;
-    if (year !== null) {
-        if (min !== null && year < min.getFullYear()) {
-            allowed = false;
-        }
-        if (allowed && max !== null && year > max.getFullYear()) {
-            allowed = false;
-        }
-    }
-    return allowed;
-};
-
-// Global ARIA attributes
-const IC_INHERITED_ARIA = [
-    "aria-atomic",
-    "aria-autocomplete",
-    "aria-busy",
-    "aria-controls",
-    "aria-current",
-    "aria-describedby",
-    "aria-description",
-    "aria-details",
-    "aria-disabled",
-    "aria-dropeffect",
-    "aria-errormessage",
-    "aria-expanded",
-    "aria-flowto",
-    "aria-grabbed",
-    "aria-haspopup",
-    "aria-hidden",
-    "aria-invalid",
-    "aria-keyshortcuts",
-    "aria-label",
-    "aria-labelledby",
-    "aria-live",
-    "aria-owns",
-    "aria-relevant",
-    "aria-roledescription",
-];
-
-/**
- * converts an enum of strings into an array of strings
- */
-const stringEnumToArray = (theEnum) => {
-    const arr = [];
-    Object.values(theEnum).forEach((val) => {
-        if (isNaN(Number(val))) {
-            const str = val;
-            arr.push(str);
-        }
-    });
-    return arr;
-};
-/**
- * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
- * to a variable that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- */
-const inheritAttributes = (element, attributes = []) => {
-    const attributeObject = {};
-    attributes.forEach((attr) => {
-        if (element.hasAttribute(attr)) {
-            const value = element.getAttribute(attr);
-            if (value !== null) {
-                attributeObject[attr] = element.getAttribute(attr);
-            }
-            element.removeAttribute(attr);
-        }
-    });
-    return attributeObject;
-};
-/**
- * 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
- * allows it to be picked up inside of forms. It should contain the same
- * values as the host element.
- *
- * @param always Add a hidden input even if the container does not use Shadow
- * @param container The element where the input will be added
- * @param name The name of the input
- * @param value The value of the input
- * @param disabled If true, the input is disabled
- */
-const renderHiddenInput = (always, container, name, value, disabled) => {
-    if (name !== undefined && (always || hasShadowDom(container))) {
-        const inputs = container.querySelectorAll("input.ic-input");
-        const inputEls = Array.from(inputs);
-        const filtered = inputEls.filter((el) => container === el.parentElement);
-        let input = filtered[0];
-        if (input === null || input === undefined) {
-            input = container.ownerDocument.createElement("input");
-            input.type = "hidden";
-            input.classList.add("ic-input");
-            container.appendChild(input);
-        }
-        input.disabled = disabled;
-        input.name = name;
-        if (value instanceof Date) {
-            input.value = value ? value.toISOString() : null;
-        }
-        else {
-            input.value = value || "";
-        }
-    }
-};
-const isEmptyString = (value) => value ? value.trim().length === 0 : true;
-const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
-({
-    XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
-    S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
-    M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
-    L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
-    XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
-    UNDEFINED: 1200,
-});
-const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
-const getInputHelperTextID = (id) => id + "-helper-text";
-const getInputValidationTextID = (id) => id + "-validation-text";
-const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
-const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouchPoints > 0 : false;
-/**
- * Extracts the label using the value from an object. Requires the object to have a label and value property.
- * @param value - value from object
- * @param options - list of menu items
- * @returns - label corresponding to value
- */
-const getLabelFromValue = (value, options, valueField = "value", labelField = "label") => {
-    const ungroupedOptions = [];
-    if (options.length > 0 && options.map) {
-        options.map((option) => {
-            if (option.children) {
-                option.children.map((option) => ungroupedOptions.push(option));
+            const validMonthFirst = isMonthFirstFormat(newDateStr);
+            if (validDayFirst && validMonthFirst) {
+                if (dateFormat.charAt(0) === "M") {
+                    newDate = [dateParts[2], dateParts[0], dateParts[1]];
+                }
+                else {
+                    newDate = [dateParts[2], dateParts[1], dateParts[0]];
+                }
+            }
+            else if (validMonthFirst) {
+                newDate = [dateParts[2], dateParts[0], dateParts[1]];
             }
             else {
-                ungroupedOptions.push(option);
+                newDate = [dateParts[2], dateParts[1], dateParts[0]];
             }
-        });
-        const matchingValue = ungroupedOptions.find((option) => option[valueField] === value);
-        if (matchingValue !== undefined)
-            return matchingValue[labelField];
+        }
     }
-    return undefined;
+    return newDate;
 };
-/**
- * Filters the options based on the search string.
- * @param options - array of options
- * @param includeDescriptions - determines whether option descriptions are included when filtering options
- * @param searchString - string used to filter the options
- * @param position - whether the search string matches the start of or anywhere in the options
- * @returns filtered array of options
- */
-const getFilteredMenuOptions = (options, includeDescriptions, searchString, position, labelField = "label") => options.filter((option) => {
-    var _a;
-    const label = option[labelField].toLowerCase();
-    const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    const lowerSearchString = searchString.toLowerCase();
-    return position === "anywhere"
-        ? includeDescriptions
-            ? label.includes(lowerSearchString) ||
-                (description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
-            : label.includes(lowerSearchString)
-        : includeDescriptions
-            ? label.startsWith(lowerSearchString) ||
-                (description === null || description === void 0 ? void 0 : description.startsWith(lowerSearchString))
-            : label.startsWith(lowerSearchString);
-});
-/**
- * Gets count of options where only group title "parent" options have been removed.
- * Disabled options are included in the count.
- * @param options - array of options
- * @returns number of options not including group titles
- */
-const getOptionsWithoutGroupTitlesCount = (options) => {
-    const optionsWithoutGroupTitles = [];
-    if (options.length > 0 && options.map) {
-        options.map((option) => {
-            if (option.children) {
-                option.children.map((option) => optionsWithoutGroupTitles.push(option));
-            }
-            else {
-                optionsWithoutGroupTitles.push(option);
-            }
-        });
+const convertToDoubleDigits = (value) => {
+    if (+value < 10) {
+        return `0${value}`;
     }
-    return optionsWithoutGroupTitles.length;
+    return value.toString();
 };
-const isNumeric = (value) => {
-    return /^-?\d+$/.test(value);
+const getWeekStart = (date, startDay) => {
+    const tmpDate = new Date(date);
+    const day = tmpDate.getDay();
+    const diff = (day < startDay ? 7 : 0) + day - startDay;
+    tmpDate.setDate(tmpDate.getDate() - diff);
+    return tmpDate;
 };
-const hasValidationStatus = (status, disabled) => {
-    return status !== "" && !disabled;
+const getWeekEnd = (date, startDay) => {
+    const d = new Date(date);
+    const day = d.getDay();
+    const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);
+    d.setDate(d.getDate() + diff);
+    return d;
 };
-const onComponentRequiredPropUndefined = (props, component) => {
-    for (let i = 0; i < props.length; i++) {
-        const { prop, propName } = props[i];
-        if (prop === null || prop === undefined) {
-            console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(propName)}' (react) required`);
-        }
-    }
+const getMonthStart = (date) => {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
 };
-const kebabToCamelCase = (kebabCase) => {
-    kebabCase = kebabCase.toLowerCase();
-    const individualWords = kebabCase.split("-");
-    let camelCase = individualWords[0];
-    for (let i = 1; i < individualWords.length; i++) {
-        camelCase +=
-            individualWords[i].substring(0, 1).toUpperCase() +
-                individualWords[i].substring(1);
-    }
-    return camelCase;
+const getMonthEnd = (date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 };
-const checkResizeObserver = (callbackFn) => {
-    if (typeof window !== "undefined" &&
-        typeof window.ResizeObserver !== "undefined") {
-        callbackFn();
+/**
+ * Compare if two dates are equal exactly equal
+ */
+const dateMatches = (a, b) => {
+    if (a === null || b === null) {
+        return false;
     }
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
 };
-const getForm = (el) => el.closest("FORM");
-const addFormResetListener = (el, callbackFn) => {
-    const form = getForm(el);
-    if (form !== null) {
-        form.addEventListener("reset", callbackFn);
+const clampDate = (date, min, max) => {
+    const time = date.getTime();
+    if (min !== null && time < min.getTime()) {
+        return min;
     }
-};
-const removeFormResetListener = (el, callbackFn) => {
-    const form = getForm(el);
-    if (form !== null) {
-        form.removeEventListener("reset", callbackFn);
+    if (max !== null && time > max.getTime()) {
+        return max;
     }
+    return date;
 };
-const removeDisabledFalse = (disabled, element) => {
-    if (!disabled) {
-        element.removeAttribute("disabled");
-    }
+/**
+ * Compare if date is within specified range
+ */
+const dateInRange = (date, min, max) => {
+    return clampDate(date, min, max) === date;
 };
-const isMacDevice = () => {
-    return window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
+const yearInRange = (year, min, max) => {
+    let allowed = true;
+    if (year !== null) {
+        if (min !== null && year < min.getFullYear()) {
+            allowed = false;
+        }
+        if (allowed && max !== null && year > max.getFullYear()) {
+            allowed = false;
+        }
+    }
+    return allowed;
 };
 
 var Clear$2 = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -13209,10 +13384,10 @@ class Dialog {
                     [`${size}`]: true,
                     ["disable-height-constraint"]: this.disableHeightConstraint,
                     ["disable-width-constraint"]: this.disableWidthConstraint,
-                }, "aria-labelledby": "dialog-label dialog-heading", "aria-describedby": "dialog-alert dialog-content", ref: (el) => (this.dialogEl = el) }, hAsync("div", { class: "heading-area" }, hAsync("div", { class: "heading-content" }, hAsync("div", { class: "label" }, hAsync("slot", { name: "label" }, hAsync("ic-typography", { variant: "label", id: "dialog-label" }, label))), hAsync("div", { class: "heading" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h4", id: "dialog-heading" }, heading)))), !hideCloseButton && (hAsync("ic-button", { class: "close-icon", variant: "icon", innerHTML: closeIcon, "aria-label": dismissLabel, onClick: this.closeIconClick, "data-gets-focus": destructive || !buttons ? "" : null }))), hAsync("div", { class: "content-area" }, isSlotUsed(this.el, "alert") ? (hAsync("slot", { name: "alert" })) : (status && (hAsync("ic-alert", { variant: status, heading: alertHeading, message: alertMessage, "title-above": true, class: "status-alert", id: "dialog-alert" }))), hAsync("div", { id: "dialog-content" }, hAsync("slot", null))), (buttons || isSlotUsed(this.el, this.DIALOG_CONTROLS)) && (hAsync("div", { class: {
+                }, "aria-labelledby": "dialog-label dialog-heading", "aria-describedby": "dialog-alert dialog-content", ref: (el) => (this.dialogEl = el) }, hAsync("div", { class: "heading-area" }, hAsync("div", { class: "heading-content" }, hAsync("div", { class: "label" }, hAsync("slot", { name: "label" }, hAsync("ic-typography", { variant: "label", id: "dialog-label" }, label))), hAsync("div", { class: "heading" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h4", id: "dialog-heading" }, heading)))), !hideCloseButton && (hAsync("ic-button", { class: "close-icon", variant: "icon", innerHTML: closeIcon, "aria-label": dismissLabel, onClick: this.closeIconClick, "data-gets-focus": destructive || !buttons ? "" : null }))), hAsync("div", { class: "content-area" }, isSlotUsed$1(this.el, "alert") ? (hAsync("slot", { name: "alert" })) : (status && (hAsync("ic-alert", { variant: status, heading: alertHeading, message: alertMessage, "title-above": true, class: "status-alert", id: "dialog-alert" }))), hAsync("div", { id: "dialog-content" }, hAsync("slot", null))), (buttons || isSlotUsed$1(this.el, this.DIALOG_CONTROLS)) && (hAsync("div", { class: {
                     [this.DIALOG_CONTROLS]: true,
                     ["triple-button"]: buttonProps.length === 3,
-                } }, hAsync("slot", { name: this.DIALOG_CONTROLS }, !isSlotUsed(this.el, this.DIALOG_CONTROLS) &&
+                } }, hAsync("slot", { name: this.DIALOG_CONTROLS }, !isSlotUsed$1(this.el, this.DIALOG_CONTROLS) &&
                 buttonProps.map((props, index) => {
                     if (index > 2) {
                         return;
@@ -13457,15 +13632,15 @@ class EmptyState {
         this.subheading = undefined;
     }
     componentDidLoad() {
-        !isSlotUsed(this.el, "heading") &&
+        !isSlotUsed$1(this.el, "heading") &&
             onComponentRequiredPropUndefined$1([{ prop: this.heading, propName: "heading" }], "Empty State");
     }
     render() {
         const { aligned, body, bodyMaxLines, heading, imageSize, subheading } = this;
         return (hAsync(Host, { class: {
                 [`${aligned}`]: true,
-                [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
-            } }, isSlotUsed(this.el, "image") && hAsync("slot", { name: "image" }), hAsync("div", null, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h4" }, heading)), hAsync("slot", { name: "subheading" }, hAsync("ic-typography", { variant: "subtitle-small" }, subheading)), hAsync("slot", { name: "body" }, hAsync("ic-typography", { maxLines: bodyMaxLines }, body))), isSlotUsed(this.el, "actions") && (hAsync("div", { class: "action-area" }, hAsync("slot", { name: "actions" })))));
+                [`image-${imageSize}`]: isSlotUsed$1(this.el, "image"),
+            } }, isSlotUsed$1(this.el, "image") && hAsync("slot", { name: "image" }), hAsync("div", null, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: "h4" }, heading)), hAsync("slot", { name: "subheading" }, hAsync("ic-typography", { variant: "subtitle-small" }, subheading)), hAsync("slot", { name: "body" }, hAsync("ic-typography", { maxLines: bodyMaxLines }, body))), isSlotUsed$1(this.el, "actions") && (hAsync("div", { class: "action-area" }, hAsync("slot", { name: "actions" })))));
     }
     get el() { return getElement(this); }
     static get style() { return icEmptyStateCss; }
@@ -13561,7 +13736,7 @@ class Footer {
                 // Slots will be able to infer their own color
                 [IcThemeForegroundEnum$1.Dark]: foregroundColor === IcThemeForegroundEnum$1.Dark,
                 [IcThemeForegroundEnum$1.Light]: foregroundColor === IcThemeForegroundEnum$1.Light,
-            } }, hAsync("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, description && (hAsync("div", { class: "footer-description" }, hAsync("ic-section-container", { aligned: aligned, fullHeight: true }, hAsync("div", { class: "footer-description-inner" }, hAsync("ic-typography", { variant: "body" }, hAsync("slot", { name: "description" }, description)))))), isSlotUsed(this.el, "link") && (hAsync("div", { class: "footer-links" }, groupLinks && small ? (hAsync("div", { class: "footer-links-inner" }, hAsync("slot", { name: "link" }))) : (hAsync("ic-section-container", { fullHeight: true, aligned: aligned }, hAsync("div", { class: "footer-links-inner" }, hAsync("slot", { name: "link" })))))), hAsync("div", { class: "footer-compliance" }, hAsync("ic-section-container", { aligned: aligned, fullHeight: true }, hAsync("div", { class: "footer-compliance-inner" }, isSlotUsed(this.el, "logo") && (hAsync("div", { class: "footer-logo" }, hAsync("slot", { name: "logo" }))), (isSlotUsed(this.el, "caption") || caption) && (hAsync("div", { class: "footer-caption" }, hAsync("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M
+            } }, hAsync("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, description && (hAsync("div", { class: "footer-description" }, hAsync("ic-section-container", { aligned: aligned, fullHeight: true }, hAsync("div", { class: "footer-description-inner" }, hAsync("ic-typography", { variant: "body" }, hAsync("slot", { name: "description" }, description)))))), isSlotUsed$1(this.el, "link") && (hAsync("div", { class: "footer-links" }, groupLinks && small ? (hAsync("div", { class: "footer-links-inner" }, hAsync("slot", { name: "link" }))) : (hAsync("ic-section-container", { fullHeight: true, aligned: aligned }, hAsync("div", { class: "footer-links-inner" }, hAsync("slot", { name: "link" })))))), hAsync("div", { class: "footer-compliance" }, hAsync("ic-section-container", { aligned: aligned, fullHeight: true }, hAsync("div", { class: "footer-compliance-inner" }, isSlotUsed$1(this.el, "logo") && (hAsync("div", { class: "footer-logo" }, hAsync("slot", { name: "logo" }))), (isSlotUsed$1(this.el, "caption") || caption) && (hAsync("div", { class: "footer-caption" }, hAsync("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M
                 ? "caption"
                 : "body" }, hAsync("slot", { name: "caption" }, caption)))), copyright && (hAsync("div", { class: {
                 ["footer-copyright"]: true,
@@ -13928,7 +14103,7 @@ class HorizontalScroll {
     componentWillLoad() {
         this.itemsContainerEl = this.el.children[0];
         this.itemsContainerEl.addEventListener("scroll", this.scrollHandler);
-        this.items = (getSlotElements(this.itemsContainerEl) ||
+        this.items = (getSlotElements$1(this.itemsContainerEl) ||
             Array.from(this.itemsContainerEl.children));
         this.items.forEach((item) => {
             if (item.addEventListener) {
@@ -14054,7 +14229,7 @@ class InputComponentContainer {
             }, "aria-disabled": disabled && `${disabled}` }, hAsync("div", { class: {
                 "focus-indicator": true,
                 dark: dark || appearance === "dark",
-            } }, isSlotUsed(this.el, "left-icon") && (hAsync("div", { class: {
+            } }, isSlotUsed$1(this.el, "left-icon") && (hAsync("div", { class: {
                 ["icon-container"]: true,
             } }, hAsync("slot", { name: "left-icon" }))), hAsync("slot", null), validationInline &&
             validationStatus === IcInformationStatus$1.Success && (hAsync("span", { class: {
@@ -14222,7 +14397,7 @@ class InputValidation {
     }; }
 }
 
-const icLinkCss = "/*!@html*/html.sc-ic-link{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-link{margin:0}/*!@main*/main.sc-ic-link{display:block}/*!@h1*/h1.sc-ic-link{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-link{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-link{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-link{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-link{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-link,strong.sc-ic-link{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-link,kbd.sc-ic-link,samp.sc-ic-link{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-link{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-link,sup.sc-ic-link{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-link{bottom:-0.25em}/*!@sup*/sup.sc-ic-link{top:-0.5em}/*!@img*/img.sc-ic-link{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-link,input.sc-ic-link,optgroup.sc-ic-link,select.sc-ic-link,textarea.sc-ic-link{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-link,input.sc-ic-link{overflow:visible}/*!@button,\nselect*/button.sc-ic-link,select.sc-ic-link{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-link,[type=\"button\"].sc-ic-link,[type=\"reset\"].sc-ic-link,[type=\"submit\"].sc-ic-link{-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-link::-moz-focus-inner,[type=\"button\"].sc-ic-link::-moz-focus-inner,[type=\"reset\"].sc-ic-link::-moz-focus-inner,[type=\"submit\"].sc-ic-link::-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-link:-moz-focusring,[type=\"button\"].sc-ic-link:-moz-focusring,[type=\"reset\"].sc-ic-link:-moz-focusring,[type=\"submit\"].sc-ic-link:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-link{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-link{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-link{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-link{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-link,[type=\"radio\"].sc-ic-link{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-link::-webkit-inner-spin-button,[type=\"number\"].sc-ic-link::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-link{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-link::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-link::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-link{display:block}/*!@summary*/summary.sc-ic-link{display:list-item}/*!@template*/template.sc-ic-link{display:none}/*!@[hidden]*/[hidden].sc-ic-link{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-link,body.sc-ic-link,div.sc-ic-link,span.sc-ic-link,applet.sc-ic-link,object.sc-ic-link,iframe.sc-ic-link,h1.sc-ic-link,h2.sc-ic-link,h3.sc-ic-link,h4.sc-ic-link,h5.sc-ic-link,h6.sc-ic-link,p.sc-ic-link,blockquote.sc-ic-link,pre.sc-ic-link,a.sc-ic-link,abbr.sc-ic-link,acronym.sc-ic-link,address.sc-ic-link,big.sc-ic-link,cite.sc-ic-link,code.sc-ic-link,del.sc-ic-link,dfn.sc-ic-link,em.sc-ic-link,img.sc-ic-link,ins.sc-ic-link,kbd.sc-ic-link,q.sc-ic-link,s.sc-ic-link,samp.sc-ic-link,small.sc-ic-link,strike.sc-ic-link,strong.sc-ic-link,sub.sc-ic-link,sup.sc-ic-link,tt.sc-ic-link,var.sc-ic-link,b.sc-ic-link,u.sc-ic-link,i.sc-ic-link,center.sc-ic-link,dl.sc-ic-link,dt.sc-ic-link,dd.sc-ic-link,ol.sc-ic-link,ul.sc-ic-link,li.sc-ic-link,fieldset.sc-ic-link,form.sc-ic-link,label.sc-ic-link,legend.sc-ic-link,table.sc-ic-link,caption.sc-ic-link,tbody.sc-ic-link,tfoot.sc-ic-link,thead.sc-ic-link,tr.sc-ic-link,th.sc-ic-link,td.sc-ic-link,article.sc-ic-link,aside.sc-ic-link,canvas.sc-ic-link,details.sc-ic-link,embed.sc-ic-link,figure.sc-ic-link,figcaption.sc-ic-link,footer.sc-ic-link,header.sc-ic-link,hgroup.sc-ic-link,menu.sc-ic-link,nav.sc-ic-link,output.sc-ic-link,ruby.sc-ic-link,section.sc-ic-link,summary.sc-ic-link,time.sc-ic-link,mark.sc-ic-link,audio.sc-ic-link,video.sc-ic-link{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.link) .ic-link,\n:host(.link) ::slotted(a)*/.link.sc-ic-link-h .ic-link.sc-ic-link,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link .sc-ic-link-s>a{color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}/*!@:host(.link.dark) .ic-link.dark,\n:host(.link.dark) ::slotted(a)*/.link.dark.sc-ic-link-h .ic-link.dark.sc-ic-link,.sc-ic-link-h.link.dark.sc-ic-link-s>a,.sc-ic-link-h.link.dark .sc-ic-link-s>a{color:var(--ic-color-primary-text)}/*!@:host(.link.light) .ic-link.light,\n:host(.link.light) ::slotted(a)*/.link.light.sc-ic-link-h .ic-link.light.sc-ic-link,.sc-ic-link-h.link.light.sc-ic-link-s>a,.sc-ic-link-h.link.light .sc-ic-link-s>a{color:var(--ic-color-white-text)}/*!@:host(.link) .ic-link:visited,\n:host(.link) ::slotted(a:visited)*/.link.sc-ic-link-h .ic-link.sc-ic-link:visited,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link.sc-ic-link-s>a:visited,.sc-ic-link-h.link .sc-ic-link-s>a:visited{color:var(--ic-hyperlink-visited)}/*!@:host(.link) .ic-link:hover,\n:host(.link) .ic-link:focus,\n:host(.link) ::slotted(a:hover),\n:host(.link) ::slotted(a:focus)*/.link.sc-ic-link-h .ic-link.sc-ic-link:hover,.link.sc-ic-link-h .ic-link.sc-ic-link:focus,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link.sc-ic-link-s>a:hover,.sc-ic-link-h.link .sc-ic-link-s>a:hover,.sc-ic-link-h.link.sc-ic-link-s>a:focus,.sc-ic-link-h.link .sc-ic-link-s>a:focus{outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-decoration-thickness: 25%){/*!@:host(.link) .ic-link:hover,\n  :host(.link) .ic-link:focus,\n  :host(.link) ::slotted(a:hover),\n  :host(.link) ::slotted(a:focus)*/.link.sc-ic-link-h .ic-link.sc-ic-link:hover,.link.sc-ic-link-h .ic-link.sc-ic-link:focus,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link.sc-ic-link-s>a:hover,.sc-ic-link-h.link .sc-ic-link-s>a:hover,.sc-ic-link-h.link.sc-ic-link-s>a:focus,.sc-ic-link-h.link .sc-ic-link-s>a:focus{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}/*!@:host(.link) .ic-link:active,\n:host(.link) .ic-link:focus:active,\n:host(.link) .ic-link:visited:active,\n:host(.link) ::slotted(a:active),\n:host(.link) ::slotted(a:focus:active),\n:host(.link) ::slotted(a:visited:active)*/.link.sc-ic-link-h .ic-link.sc-ic-link:active,.link.sc-ic-link-h .ic-link.sc-ic-link:focus:active,.link.sc-ic-link-h .ic-link.sc-ic-link:visited:active,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link.sc-ic-link-s>a:active,.sc-ic-link-h.link .sc-ic-link-s>a:active,.sc-ic-link-h.link.sc-ic-link-s>a:focus,.sc-ic-link-h.link.sc-ic-link-s>a:focus:active,.sc-ic-link-h.link .sc-ic-link-s>a:focus:active,.sc-ic-link-h.link.sc-ic-link-s>a:visited,.sc-ic-link-h.link.sc-ic-link-s>a:visited:active,.sc-ic-link-h.link .sc-ic-link-s>a:visited:active{text-decoration:none}/*!@.ic-link-open-in-new-icon*/.ic-link-open-in-new-icon.sc-ic-link{vertical-align:middle;margin-left:var(--ic-space-xxs)}/*!@.ic-link > .ic-link-open-in-new-icon*/.ic-link.sc-ic-link>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-hyperlink)}/*!@.ic-link.dark > .ic-link-open-in-new-icon*/.ic-link.dark.sc-ic-link>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-color-primary-text)}/*!@.ic-link.light > .ic-link-open-in-new-icon*/.ic-link.light.sc-ic-link>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-color-white-text)}/*!@.ic-link-open-in-new-icon > svg*/.ic-link-open-in-new-icon.sc-ic-link>svg.sc-ic-link{width:var(--ic-space-md);height:var(--ic-space-md);fill:currentcolor}/*!@.ic-link:visited > .ic-link-open-in-new-icon*/.ic-link.sc-ic-link:visited>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-hyperlink-visited)}/*!@.ic-link.light:visited > .ic-link-open-in-new-icon*/.ic-link.light.sc-ic-link:visited>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-hyperlink-contrast-visited)}/*!@:host(.breadcrumb-link) .ic-link*/.breadcrumb-link.sc-ic-link-h .ic-link.sc-ic-link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}/*!@:host(.breadcrumb-link) .ic-link ::slotted(.back-icon)*/.sc-ic-link-h.breadcrumb-link .ic-link .sc-ic-link-s>.back-icon{height:var(--ic-space-lg);width:var(--ic-space-lg)}/*!@:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a)*/.breadcrumb-link.current-page.sc-ic-link-h a.sc-ic-link,.sc-ic-link-h.breadcrumb-link.current-page.sc-ic-link-s>a,.sc-ic-link-h.breadcrumb-link.current-page .sc-ic-link-s>a{font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}/*!@:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus)*/.breadcrumb-link.current-page.sc-ic-link-h .ic-link.sc-ic-link,.sc-ic-link-h.breadcrumb-link.current-page.sc-ic-link-s>a,.sc-ic-link-h.breadcrumb-link.current-page.sc-ic-link-s>a:focus,.sc-ic-link-h.breadcrumb-link.current-page .sc-ic-link-s>a:focus{outline:var(--ic-hc-focus-outline);text-decoration:none}/*!@:host(.breadcrumb-link.current-page) .ic-link:visited*/.breadcrumb-link.current-page.sc-ic-link-h .ic-link.sc-ic-link:visited{color:var(--ic-color-primary-text)}";
+const icLinkCss = "/*!@html*/html.sc-ic-link{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-link{margin:0}/*!@main*/main.sc-ic-link{display:block}/*!@h1*/h1.sc-ic-link{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-link{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-link{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-link{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-link{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-link,strong.sc-ic-link{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-link,kbd.sc-ic-link,samp.sc-ic-link{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-link{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-link,sup.sc-ic-link{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-link{bottom:-0.25em}/*!@sup*/sup.sc-ic-link{top:-0.5em}/*!@img*/img.sc-ic-link{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-link,input.sc-ic-link,optgroup.sc-ic-link,select.sc-ic-link,textarea.sc-ic-link{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-link,input.sc-ic-link{overflow:visible}/*!@button,\nselect*/button.sc-ic-link,select.sc-ic-link{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-link,[type=\"button\"].sc-ic-link,[type=\"reset\"].sc-ic-link,[type=\"submit\"].sc-ic-link{-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-link::-moz-focus-inner,[type=\"button\"].sc-ic-link::-moz-focus-inner,[type=\"reset\"].sc-ic-link::-moz-focus-inner,[type=\"submit\"].sc-ic-link::-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-link:-moz-focusring,[type=\"button\"].sc-ic-link:-moz-focusring,[type=\"reset\"].sc-ic-link:-moz-focusring,[type=\"submit\"].sc-ic-link:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-link{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-link{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-link{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-link{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-link,[type=\"radio\"].sc-ic-link{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-link::-webkit-inner-spin-button,[type=\"number\"].sc-ic-link::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-link{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-link::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-link::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-link{display:block}/*!@summary*/summary.sc-ic-link{display:list-item}/*!@template*/template.sc-ic-link{display:none}/*!@[hidden]*/[hidden].sc-ic-link{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-link,body.sc-ic-link,div.sc-ic-link,span.sc-ic-link,applet.sc-ic-link,object.sc-ic-link,iframe.sc-ic-link,h1.sc-ic-link,h2.sc-ic-link,h3.sc-ic-link,h4.sc-ic-link,h5.sc-ic-link,h6.sc-ic-link,p.sc-ic-link,blockquote.sc-ic-link,pre.sc-ic-link,a.sc-ic-link,abbr.sc-ic-link,acronym.sc-ic-link,address.sc-ic-link,big.sc-ic-link,cite.sc-ic-link,code.sc-ic-link,del.sc-ic-link,dfn.sc-ic-link,em.sc-ic-link,img.sc-ic-link,ins.sc-ic-link,kbd.sc-ic-link,q.sc-ic-link,s.sc-ic-link,samp.sc-ic-link,small.sc-ic-link,strike.sc-ic-link,strong.sc-ic-link,sub.sc-ic-link,sup.sc-ic-link,tt.sc-ic-link,var.sc-ic-link,b.sc-ic-link,u.sc-ic-link,i.sc-ic-link,center.sc-ic-link,dl.sc-ic-link,dt.sc-ic-link,dd.sc-ic-link,ol.sc-ic-link,ul.sc-ic-link,li.sc-ic-link,fieldset.sc-ic-link,form.sc-ic-link,label.sc-ic-link,legend.sc-ic-link,table.sc-ic-link,caption.sc-ic-link,tbody.sc-ic-link,tfoot.sc-ic-link,thead.sc-ic-link,tr.sc-ic-link,th.sc-ic-link,td.sc-ic-link,article.sc-ic-link,aside.sc-ic-link,canvas.sc-ic-link,details.sc-ic-link,embed.sc-ic-link,figure.sc-ic-link,figcaption.sc-ic-link,footer.sc-ic-link,header.sc-ic-link,hgroup.sc-ic-link,menu.sc-ic-link,nav.sc-ic-link,output.sc-ic-link,ruby.sc-ic-link,section.sc-ic-link,summary.sc-ic-link,time.sc-ic-link,mark.sc-ic-link,audio.sc-ic-link,video.sc-ic-link{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.link) .ic-link,\n:host(.link) ::slotted(a)*/.link.sc-ic-link-h .ic-link.sc-ic-link,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link .sc-ic-link-s>a{color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}/*!@:host(.link.dark) .ic-link.dark,\n:host(.link.dark) ::slotted(a)*/.link.dark.sc-ic-link-h .ic-link.dark.sc-ic-link,.sc-ic-link-h.link.dark.sc-ic-link-s>a,.sc-ic-link-h.link.dark .sc-ic-link-s>a{color:var(--ic-color-primary-text)}/*!@:host(.link.light) .ic-link.light,\n:host(.link.light) ::slotted(a)*/.link.light.sc-ic-link-h .ic-link.light.sc-ic-link,.sc-ic-link-h.link.light.sc-ic-link-s>a,.sc-ic-link-h.link.light .sc-ic-link-s>a{color:var(--ic-color-white-text)}/*!@:host(.link) .ic-link:visited,\n:host(.link) ::slotted(a:visited)*/.link.sc-ic-link-h .ic-link.sc-ic-link:visited,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link.sc-ic-link-s>a:visited,.sc-ic-link-h.link .sc-ic-link-s>a:visited{color:var(--ic-hyperlink-visited)}/*!@:host(.link) .ic-link:hover,\n:host(.link) .ic-link:focus,\n:host(.link) ::slotted(a:hover),\n:host(.link) ::slotted(a:focus)*/.link.sc-ic-link-h .ic-link.sc-ic-link:hover,.link.sc-ic-link-h .ic-link.sc-ic-link:focus,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link.sc-ic-link-s>a:hover,.sc-ic-link-h.link .sc-ic-link-s>a:hover,.sc-ic-link-h.link.sc-ic-link-s>a:focus,.sc-ic-link-h.link .sc-ic-link-s>a:focus{outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-decoration-thickness: 25%){/*!@:host(.link) .ic-link:hover,\n  :host(.link) .ic-link:focus,\n  :host(.link) ::slotted(a:hover),\n  :host(.link) ::slotted(a:focus)*/.link.sc-ic-link-h .ic-link.sc-ic-link:hover,.link.sc-ic-link-h .ic-link.sc-ic-link:focus,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link.sc-ic-link-s>a:hover,.sc-ic-link-h.link .sc-ic-link-s>a:hover,.sc-ic-link-h.link.sc-ic-link-s>a:focus,.sc-ic-link-h.link .sc-ic-link-s>a:focus{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:10%;border-bottom:0 !important;margin-bottom:0 !important}}/*!@:host(.link) .ic-link:active,\n:host(.link) .ic-link:focus:active,\n:host(.link) .ic-link:visited:active,\n:host(.link) ::slotted(a:active),\n:host(.link) ::slotted(a:focus:active),\n:host(.link) ::slotted(a:visited:active)*/.link.sc-ic-link-h .ic-link.sc-ic-link:active,.link.sc-ic-link-h .ic-link.sc-ic-link:focus:active,.link.sc-ic-link-h .ic-link.sc-ic-link:visited:active,.sc-ic-link-h.link.sc-ic-link-s>a,.sc-ic-link-h.link.sc-ic-link-s>a:active,.sc-ic-link-h.link .sc-ic-link-s>a:active,.sc-ic-link-h.link.sc-ic-link-s>a:focus,.sc-ic-link-h.link.sc-ic-link-s>a:focus:active,.sc-ic-link-h.link .sc-ic-link-s>a:focus:active,.sc-ic-link-h.link.sc-ic-link-s>a:visited,.sc-ic-link-h.link.sc-ic-link-s>a:visited:active,.sc-ic-link-h.link .sc-ic-link-s>a:visited:active{text-decoration:none}/*!@.ic-link-open-in-new-icon*/.ic-link-open-in-new-icon.sc-ic-link{vertical-align:middle;margin-left:var(--ic-space-xxs)}/*!@.ic-link > .ic-link-open-in-new-icon*/.ic-link.sc-ic-link>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-hyperlink)}/*!@.ic-link.dark > .ic-link-open-in-new-icon*/.ic-link.dark.sc-ic-link>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-color-primary-text)}/*!@.ic-link.light > .ic-link-open-in-new-icon*/.ic-link.light.sc-ic-link>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-color-white-text)}/*!@.ic-link-open-in-new-icon > svg*/.ic-link-open-in-new-icon.sc-ic-link>svg.sc-ic-link{width:var(--ic-space-md);height:var(--ic-space-md);fill:currentcolor}/*!@.ic-link:visited > .ic-link-open-in-new-icon*/.ic-link.sc-ic-link:visited>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-hyperlink-visited)}/*!@.ic-link.light:visited > .ic-link-open-in-new-icon*/.ic-link.light.sc-ic-link:visited>.ic-link-open-in-new-icon.sc-ic-link{fill:var(--ic-hyperlink-contrast-visited)}/*!@:host(.breadcrumb-link) .ic-link*/.breadcrumb-link.sc-ic-link-h .ic-link.sc-ic-link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}/*!@:host(.breadcrumb-link) .ic-link ::slotted(.back-icon)*/.sc-ic-link-h.breadcrumb-link .ic-link .sc-ic-link-s>.back-icon{height:var(--ic-space-lg);width:var(--ic-space-lg)}/*!@:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a)*/.breadcrumb-link.current-page.sc-ic-link-h a.sc-ic-link,.sc-ic-link-h.breadcrumb-link.current-page.sc-ic-link-s>a,.sc-ic-link-h.breadcrumb-link.current-page .sc-ic-link-s>a{font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}/*!@:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus)*/.breadcrumb-link.current-page.sc-ic-link-h .ic-link.sc-ic-link,.sc-ic-link-h.breadcrumb-link.current-page.sc-ic-link-s>a,.sc-ic-link-h.breadcrumb-link.current-page.sc-ic-link-s>a:focus,.sc-ic-link-h.breadcrumb-link.current-page .sc-ic-link-s>a:focus{outline:var(--ic-hc-focus-outline);text-decoration:none}/*!@:host(.breadcrumb-link.current-page) .ic-link:visited*/.breadcrumb-link.current-page.sc-ic-link-h .ic-link.sc-ic-link:visited{color:var(--ic-color-primary-text)}";
 
 /**
  * @slot router-item - Handle routing by nesting your routes in this slot.
@@ -16697,7 +16872,7 @@ class Menu$1 {
         this.scrollToSelected = (menu) => {
             const selectedOption = this.selectOnEnter
                 ? this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`)
-                : menu.querySelector(".option[aria-selected]");
+                : menu.querySelector(".option[aria-selected='true']");
             if (selectedOption) {
                 const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;
                 if (elTop > menu.scrollTop + menu.offsetHeight ||
@@ -16759,7 +16934,7 @@ class Menu$1 {
                         option[this.valueField] === optionHighlighted) &&
                     keyboardNav
                     ? "0"
-                    : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": option[this.valueField] === value, "aria-disabled": option.disabled ? "true" : "false", onClick: !option.timedOut && !option.loading && this.handleOptionClick, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, option.timedOut ? (hAsync(Fragment, null, hAsync("div", { class: "loading-error-info" }, hAsync("svg", { class: "error-icon-svg", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, hAsync("title", { id: "error-title" }, "Error"), hAsync("g", { id: "close-octagon" }, hAsync("path", { id: "Vector", d: "M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" }))), hAsync("ic-typography", { variant: "label" }, option[this.labelField])), hAsync("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option))));
+                    : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": `${option[this.valueField] === value}`, "aria-disabled": option.disabled ? "true" : "false", onClick: !option.timedOut && !option.loading && this.handleOptionClick, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, option.timedOut ? (hAsync(Fragment, null, hAsync("div", { class: "loading-error-info" }, hAsync("svg", { class: "error-icon-svg", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, hAsync("title", { id: "error-title" }, "Error"), hAsync("g", { id: "close-octagon" }, hAsync("path", { id: "Vector", d: "M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" }))), hAsync("ic-typography", { variant: "label" }, option[this.labelField])), hAsync("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option))));
         };
         this.focusFromSearchKeypress = false;
         this.initialOptionsListRender = false;
@@ -18826,9 +19001,12 @@ class Menu {
         this.isMultiSelect = false;
         this.isSearchBar = false;
         this.isSearchableSelect = false;
+        this.lastOptionSelected = null; // Index of last option selected
+        this.lastOptionFocused = null; // Index of last option focused
         this.multiOptionClicked = null;
         this.preventClickOpen = false; // Prevents menu re-opening immediately after it is closed on blur when clicking input.
         this.preventMenuFocus = false; // (When multiple) ensures focus moves straight to select all button from menu.
+        this.shiftPressed = false;
         this.ungroupedOptions = [];
         this.handleClearListener = () => {
             this.optionHighlighted = "";
@@ -18948,7 +19126,6 @@ class Menu {
                         }
                         else {
                             this.setInputValue(highlightedOptionIndex);
-                            this.value = options[highlightedOptionIndex][this.valueField];
                         }
                     }
                 }
@@ -18961,16 +19138,38 @@ class Menu {
                 this.handleMenuChange(true);
             }
         };
+        // Check if option is selected based on the index of the option
+        this.isOptionSelected = (index) => {
+            const menuOptions = this.getMenuOptions();
+            return this.value
+                ? this.value.includes(menuOptions[index][this.valueField])
+                : false;
+        };
+        // Deselect currently selected options when shift pressed, but keep certain options selected
+        this.deselectSelectedOptions = (optionsToKeepSelected) => {
+            const menuOptions = this.getMenuOptions();
+            if (this.value) {
+                const selectedOptionIndexes = this.value.map((value) => {
+                    return menuOptions.findIndex((option) => option[this.valueField] === value);
+                });
+                // Call setInputValue (which toggles the selected state) on options that need to be deselected
+                selectedOptionIndexes.forEach((index) => !optionsToKeepSelected.includes(index) && this.setInputValue(index));
+            }
+        };
         // Determines keyboard behaviour when selection is manual (i.e. when you have to press Enter to select an option)
         this.manualSetInputValueKeyboardOpen = (event) => {
             const menuOptions = this.getMenuOptions();
-            this.keyboardNav = false;
-            const highlightedOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.optionHighlighted);
+            // Prevent focus disappearing on currently focused option when Shift / Cmd / Ctrl pressed
+            // (i.e. when user is likely in the middle of executing a keyboard combination to select options)
+            if (!(event.shiftKey || event.metaKey || event.ctrlKey)) {
+                this.keyboardNav = false;
+            }
+            const highlightedOptionIndex = this.getOptionHighlightedIndex();
             const clickedMultiOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.multiOptionClicked);
             const getOptionId = (index) => { var _a; return (_a = Array.from(this.el.querySelectorAll("li"))[index]) === null || _a === void 0 ? void 0 : _a.id; };
             // Space press should be equivalent to Enter when multi-select
             if (event.key === " " && this.isMultiSelect) {
-                this.selectHighlightedOption(event.target, menuOptions, highlightedOptionIndex);
+                this.handleOptionSelect(event, highlightedOptionIndex);
             }
             else {
                 switch (event.key) {
@@ -18983,18 +19182,32 @@ class Menu {
                             this.setHighlightedOption(clickedMultiOptionIndex);
                             this.multiOptionClicked = null;
                         }
-                        else if (highlightedOptionIndex < menuOptions.length - 1) {
-                            this.setHighlightedOption(highlightedOptionIndex + 1);
-                            this.menuOptionId.emit({
-                                optionId: getOptionId(highlightedOptionIndex + 1),
-                            });
-                        }
                         else {
-                            this.setHighlightedOption(0);
-                            this.menuOptionId.emit({
-                                optionId: getOptionId(0),
-                            });
+                            this.handleSingleShiftSelect(event, highlightedOptionIndex, menuOptions);
+                            if (highlightedOptionIndex < menuOptions.length - 1) {
+                                this.setHighlightedOption(highlightedOptionIndex + 1);
+                                this.menuOptionId.emit({
+                                    optionId: getOptionId(highlightedOptionIndex + 1),
+                                });
+                                this.handleSingleShiftSelect(event, highlightedOptionIndex + 1, menuOptions);
+                            }
+                            else {
+                                this.setHighlightedOption(0);
+                                this.menuOptionId.emit({
+                                    optionId: getOptionId(0),
+                                });
+                                this.handleSingleShiftSelect(event, 0, menuOptions);
+                            }
+                            // Deselect currently selected options if arrow was pressed for first time after shift is held
+                            if (this.isMultiSelect && this.shiftPressed) {
+                                this.deselectSelectedOptions([
+                                    highlightedOptionIndex,
+                                    this.getOptionHighlightedIndex(),
+                                ]);
+                                this.shiftPressed = false;
+                            }
                         }
+                        this.lastOptionFocused = this.getOptionHighlightedIndex();
                         this.preventIncorrectTabOrder = false;
                         this.focusFromSearchKeypress = false;
                         break;
@@ -19007,40 +19220,68 @@ class Menu {
                             this.setHighlightedOption(clickedMultiOptionIndex);
                             this.multiOptionClicked = null;
                         }
-                        else if (highlightedOptionIndex <= 0 ||
-                            highlightedOptionIndex > menuOptions.length + 1) {
-                            this.setHighlightedOption(menuOptions.length - 1);
-                            this.menuOptionId.emit({
-                                optionId: getOptionId(menuOptions.length - 1),
-                            });
-                        }
                         else {
-                            this.setHighlightedOption(highlightedOptionIndex - 1);
-                            this.menuOptionId.emit({
-                                optionId: getOptionId(highlightedOptionIndex - 1),
-                            });
+                            this.handleSingleShiftSelect(event, highlightedOptionIndex, menuOptions);
+                            if (highlightedOptionIndex <= 0 ||
+                                highlightedOptionIndex > menuOptions.length + 1) {
+                                this.setHighlightedOption(menuOptions.length - 1);
+                                this.menuOptionId.emit({
+                                    optionId: getOptionId(menuOptions.length - 1),
+                                });
+                                this.handleSingleShiftSelect(event, menuOptions.length - 1, menuOptions);
+                            }
+                            else {
+                                this.setHighlightedOption(highlightedOptionIndex - 1);
+                                this.menuOptionId.emit({
+                                    optionId: getOptionId(highlightedOptionIndex - 1),
+                                });
+                                this.handleSingleShiftSelect(event, highlightedOptionIndex - 1, menuOptions);
+                            }
+                            // Deselect currently selected options if arrow was pressed for first time after shift is held
+                            if (this.isMultiSelect && this.shiftPressed) {
+                                this.deselectSelectedOptions([
+                                    highlightedOptionIndex,
+                                    this.getOptionHighlightedIndex(),
+                                ]);
+                                this.shiftPressed = false;
+                            }
                         }
+                        this.lastOptionFocused = this.getOptionHighlightedIndex();
                         this.preventIncorrectTabOrder = false;
                         this.focusFromSearchKeypress = false;
                         break;
-                    case "Home":
+                    case "Home": {
+                        const startOptionIndex = 0;
                         this.keyboardNav = true;
                         event.preventDefault();
                         this.arrowBehaviour(event);
-                        this.setHighlightedOption(0);
+                        this.setHighlightedOption(startOptionIndex);
                         this.menuOptionId.emit({
-                            optionId: getOptionId(0),
+                            optionId: getOptionId(startOptionIndex),
                         });
+                        if (event.shiftKey && event.ctrlKey) {
+                            this.handleMultipleShiftSelect(startOptionIndex);
+                        }
+                        this.lastOptionFocused = startOptionIndex;
+                        this.lastOptionSelected = startOptionIndex;
                         break;
-                    case "End":
+                    }
+                    case "End": {
+                        const endOptionIndex = menuOptions.length - 1;
                         this.keyboardNav = true;
                         event.preventDefault();
                         this.arrowBehaviour(event);
-                        this.setHighlightedOption(menuOptions.length - 1);
+                        this.setHighlightedOption(endOptionIndex);
                         this.menuOptionId.emit({
-                            optionId: getOptionId(menuOptions.length - 1),
+                            optionId: getOptionId(endOptionIndex),
                         });
+                        if (event.shiftKey && event.ctrlKey) {
+                            this.handleMultipleShiftSelect(endOptionIndex);
+                        }
+                        this.lastOptionFocused = endOptionIndex;
+                        this.lastOptionSelected = endOptionIndex;
                         break;
+                    }
                     case " ":
                         if (this.isSearchBar || this.isSearchableSelect) {
                             break;
@@ -19053,7 +19294,7 @@ class Menu {
                         break;
                     case "Enter":
                         event.preventDefault();
-                        this.selectHighlightedOption(event.target, menuOptions, highlightedOptionIndex);
+                        this.handleOptionSelect(event, highlightedOptionIndex);
                         break;
                     case "Escape":
                         if (this.open) {
@@ -19068,10 +19309,15 @@ class Menu {
                         if ((isMacDevice() && event.metaKey) ||
                             (!isMacDevice() && event.ctrlKey)) {
                             this.emitSelectAll();
+                            this.lastOptionFocused = null;
+                            this.lastOptionSelected = null;
                         }
                         break;
                     case "Shift":
                     case "Tab":
+                        if (event.key === "Shift") {
+                            this.shiftPressed = true;
+                        }
                         if (this.isSearchBar) {
                             this.keyboardNav = true;
                         }
@@ -19137,14 +19383,17 @@ class Menu {
         };
         this.handleOptionClick = (event) => {
             const { value, label } = event.target.dataset;
-            this.menuOptionSelect.emit({ value, label });
-            this.optionHighlighted = undefined;
             if (this.isMultiSelect) {
+                const menuOptions = this.getMenuOptions();
+                const selectedOptionIndex = menuOptions.findIndex((option) => option.value === value);
+                this.handleOptionSelect(event, selectedOptionIndex, true);
                 this.multiOptionClicked = value;
             }
             else {
+                this.menuOptionSelect.emit({ value, label });
                 this.handleMenuChange(false);
             }
+            this.optionHighlighted = undefined;
         };
         this.handleRetry = () => {
             this.retryButtonClicked.emit({ value: this.value });
@@ -19164,12 +19413,16 @@ class Menu {
                     event.relatedTarget === this.selectAllButton)) {
                     this.handleMenuChange(false, this.hasPreviouslyBlurred);
                     this.menu.removeAttribute(this.activeDescendantAttr);
+                    this.lastOptionFocused = null;
+                    this.lastOptionSelected = null;
                 }
             }
             else {
                 this.handleMenuChange(false);
                 this.preventClickOpen = true;
                 this.menu.removeAttribute(this.activeDescendantAttr);
+                this.lastOptionFocused = null;
+                this.lastOptionSelected = null;
             }
             if (!this.isSearchBar)
                 this.hasPreviouslyBlurred = !!event.relatedTarget;
@@ -19193,11 +19446,16 @@ class Menu {
                 this.disabledOptionSelected = false;
                 event.stopImmediatePropagation();
             }
+            if (event.key === "Shift") {
+                this.shiftPressed = false;
+            }
         };
         this.handleSelectAllClick = () => {
             this.keyboardNav = false;
             this.menu.focus();
             this.emitSelectAll();
+            this.lastOptionFocused = null;
+            this.lastOptionSelected = null;
         };
         this.handleSelectAllBlur = (event) => {
             this.el.classList.remove("select-all-focused");
@@ -19207,11 +19465,65 @@ class Menu {
         };
         this.handleSelectAllFocus = () => {
             this.el.classList.add("select-all-focused");
+            this.lastOptionFocused = null;
+            this.lastOptionSelected = null;
         };
         // Fix for Safari - select all button click was causing menu to close
         this.handleSelectAllMouseDown = (event) => {
             event.preventDefault();
         };
+        // When shift key is being used to select contiguous options one by one on a multi-select
+        // I.e. holding shift and pressing up and down arrow keys
+        this.handleSingleShiftSelect = (event, optionToSelectIndex, options) => {
+            if (this.isMultiSelect &&
+                event.shiftKey &&
+                !this.isOptionSelected(optionToSelectIndex)) {
+                this.selectHighlightedOption(event.target, options, optionToSelectIndex);
+                this.lastOptionSelected = optionToSelectIndex;
+            }
+        };
+        // When shift key is being used to select multiple options at once on a multi-select
+        // I.e. holding shift when selecting another option
+        this.handleMultipleShiftSelect = (lastOptionInSelection, useFocusForSelection = false, firstOptionSelected = null) => {
+            this.shiftPressed = false;
+            const firstOptionInSelection = firstOptionSelected === null
+                ? this.getFirstOptionInSelection(useFocusForSelection)
+                : firstOptionSelected;
+            if (firstOptionInSelection !== null) {
+                const optionsToSelect = [];
+                if (firstOptionInSelection < lastOptionInSelection) {
+                    for (let i = firstOptionInSelection; i < lastOptionInSelection + 1; i++) {
+                        optionsToSelect.push(i);
+                    }
+                }
+                else {
+                    for (let i = firstOptionInSelection; i > lastOptionInSelection - 1; i--) {
+                        optionsToSelect.push(i);
+                    }
+                }
+                optionsToSelect.forEach((optionIndex) => !this.isOptionSelected(optionIndex) && this.setInputValue(optionIndex));
+                this.deselectSelectedOptions(optionsToSelect);
+            }
+        };
+        this.handleOptionSelect = (event, optionIndex, useFocusForSelection = false) => {
+            const menuOptions = this.getMenuOptions();
+            const firstOptionInSelection = this.getFirstOptionInSelection(useFocusForSelection);
+            if (event.shiftKey && firstOptionInSelection !== null) {
+                this.handleMultipleShiftSelect(optionIndex, useFocusForSelection, firstOptionInSelection);
+            }
+            else {
+                this.selectHighlightedOption(event.target, menuOptions, optionIndex);
+            }
+            this.lastOptionFocused = optionIndex;
+            this.lastOptionSelected = optionIndex;
+        };
+        this.getFirstOptionInSelection = (useFocusForSelection) => {
+            return useFocusForSelection && this.lastOptionFocused !== null
+                ? this.lastOptionFocused
+                : this.lastOptionSelected !== null
+                    ? this.lastOptionSelected
+                    : null;
+        };
         this.emitSelectAll = () => {
             var _a;
             // Select all if there is either no value or not all options are selected
@@ -19310,6 +19622,10 @@ class Menu {
             }
             return sorted;
         };
+        this.getOptionHighlightedIndex = () => {
+            const menuOptions = this.getMenuOptions();
+            return menuOptions.findIndex((option) => option[this.valueField] === this.optionHighlighted);
+        };
         this.isManualMode = this.activationType === "manual";
         this.scrollToSelected = (menu) => {
             const selectedOption = this.selectOnEnter
@@ -19615,7 +19931,7 @@ class Menu {
             "size": [1],
             "small": [4],
             "options": [16],
-            "value": [1025],
+            "value": [1],
             "valueField": [1, "value-field"],
             "focusFromSearchKeypress": [32],
             "initialOptionsListRender": [32],
@@ -19702,7 +20018,7 @@ class MenuItem {
             if (this.el.classList.contains("ic-popover-submenu-back-button")) {
                 ariaLabel = "Go back to parent menu";
             }
-            const parentEl = getParentElement(this.el);
+            const parentEl = this.el.parentElement;
             if (parentEl.tagName === "IC-MENU-GROUP" &&
                 parentEl.label) {
                 return `${ariaLabel}, ${parentEl.label} menu group`;
@@ -19757,7 +20073,7 @@ class MenuItem {
                 ? "menu"
                 : false, ariaOwnsId: isPropDefined(this.submenuTriggerFor)
                 ? `ic-popover-submenu-${this.submenuTriggerFor}`
-                : false }, hAsync("div", { class: "focus-border" }, isSlotUsed(this.el, "icon") && (hAsync("span", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync(MenuItemInformation, null), this.variant === "toggle" && (hAsync("span", { class: {
+                : 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 })))))));
@@ -19885,7 +20201,7 @@ class NavigationButton {
             fullWidth,
             disableTooltip,
         };
-        return (hAsync(Host, { class: { ["in-side-menu"]: this.mode === "menu" } }, hAsync("ic-button", Object.assign({ class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes), label, hAsync("slot", { slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && variant === "icon" && (hAsync("slot", { name: "badge" })))));
+        return (hAsync(Host, { class: { ["in-side-menu"]: this.mode === "menu" } }, hAsync("ic-button", Object.assign({ class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes), label, hAsync("slot", { slot: "left-icon", name: "icon" }), isSlotUsed$1(this.el, "badge") && variant === "icon" && (hAsync("slot", { name: "badge" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -20246,7 +20562,7 @@ class NavigationItem {
         this.displayDefaultNavigationItem = (href, hreflang, target, rel, referrerpolicy, download, label) => {
             const variant = this.isTopNavChild || this.inTopNavSideMenu ? "body" : "label";
             const ChevronIconComponent = this.expandable && (hAsync("div", { class: { svg: true }, innerHTML: chevronIcon }));
-            const IconComponent = this.el.querySelector('[slot="icon"]') && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }), isSlotUsed(this.el, "badge") && hAsync("slot", { name: "badge" })));
+            const IconComponent = this.el.querySelector('[slot="icon"]') && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" })));
             if (href !== "") {
                 return (hAsync("a", { href: href, target: target, rel: rel, hreflang: hreflang, referrerPolicy: referrerpolicy, download: download !== false ? download : null, class: "link", ref: (el) => (this.itemEl = el), part: "link" }, IconComponent, hAsync("ic-typography", { variant: variant }, label), hAsync("div", { class: "chevron-container" }, ChevronIconComponent), target === "_blank" && (hAsync("span", { class: "open-in-new-icon", innerHTML: OpenInNew }))));
             }
@@ -20467,7 +20783,7 @@ class NavigationMenu {
     }
     componentWillLoad() {
         this.navBarEl = document.querySelector("ic-top-navigation");
-        const navigationEls = getSlotContent(this.el, "navigation");
+        const navigationEls = getSlotContent$1(this.el, "navigation");
         if (navigationEls) {
             this.hasNavigation = true;
             const lastEl = navigationEls[navigationEls.length - 1];
@@ -20479,7 +20795,7 @@ class NavigationMenu {
                 this.navGroupFirst = true;
             }
         }
-        const buttonContent = getSlotContent(this.el, "buttons");
+        const buttonContent = getSlotContent$1(this.el, "buttons");
         if (buttonContent !== null) {
             this.hasButtons = true;
             this.lastTabStop = buttonContent[buttonContent.length - 1];
@@ -20488,7 +20804,7 @@ class NavigationMenu {
             if (this.hasNavigation) {
                 const lastEl = navigationEls[navigationEls.length - 1];
                 //check for slotted content i.e. react router link
-                const slotContent = getSlot(lastEl, "navigation-item");
+                const slotContent = getSlot$1(lastEl, "navigation-item");
                 if (slotContent !== null) {
                     this.lastTabStop = slotContent;
                 }
@@ -20502,8 +20818,8 @@ class NavigationMenu {
         this.focusCloseButton();
     }
     componentWillRender() {
-        this.hasNavigation = isSlotUsed(this.el, "navigation");
-        this.hasButtons = isSlotUsed(this.el, "buttons");
+        this.hasNavigation = isSlotUsed$1(this.el, "navigation");
+        this.hasButtons = isSlotUsed$1(this.el, "buttons");
     }
     navItemClickHandler() {
         this.closeMenu();
@@ -20570,7 +20886,7 @@ class PageHeader {
         registerInstance(this, hostRef);
         this.resizeObserver = null;
         this.resizeObserverCallback = () => {
-            if (this.reverseOrder && isSlotUsed(this.el, "actions")) {
+            if (this.reverseOrder && isSlotUsed$1(this.el, "actions")) {
                 this.applyReverseOrder();
             }
         };
@@ -20652,13 +20968,13 @@ class PageHeader {
                 ["sticky-desktop"]: !sticky && stickyDesktopOnly,
             } }, hAsync("header", { class: {
                 ["border-bottom"]: border,
-                ["tabs"]: isSlotUsed(this.el, "tabs"),
-            } }, hAsync("ic-section-container", { aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (hAsync("div", { class: "breadcrumb-area" }, hAsync("slot", { name: "breadcrumbs" }))), hAsync("div", { class: "main-content" }, hAsync("div", { class: "title-area" }, hAsync("div", { class: "header-content" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: small || size === "small" ? "h4" : "h2", class: "heading" }, hAsync("h2", null, heading))), hAsync("slot", { name: "heading-adornment" })), hAsync("div", null, hAsync("slot", { name: "subheading" }, subheading && (hAsync("ic-typography", { variant: "body", class: {
+                ["tabs"]: isSlotUsed$1(this.el, "tabs"),
+            } }, hAsync("ic-section-container", { aligned: aligned, fullHeight: isSlotUsed$1(this.el, "tabs") }, isSlotUsed$1(this.el, "breadcrumbs") && (hAsync("div", { class: "breadcrumb-area" }, hAsync("slot", { name: "breadcrumbs" }))), hAsync("div", { class: "main-content" }, hAsync("div", { class: "title-area" }, hAsync("div", { class: "header-content" }, hAsync("slot", { name: "heading" }, hAsync("ic-typography", { variant: small || size === "small" ? "h4" : "h2", class: "heading" }, hAsync("h2", null, heading))), hAsync("slot", { name: "heading-adornment" })), hAsync("div", null, hAsync("slot", { name: "subheading" }, subheading && (hAsync("ic-typography", { variant: "body", class: {
                 ["subheading"]: true,
                 ["small"]: small || size === "small",
-            } }, subheading))))), isSlotUsed(this.el, "actions") && (hAsync("div", { class: "action-area" }, hAsync("slot", { name: "actions" }))), isSlotUsed(this.el, "input") && (hAsync("div", { class: "input-area" }, hAsync("slot", { name: "input" })))), (isSlotUsed(this.el, "stepper") ||
-            isSlotUsed(this.el, "tabs")) && (hAsync("div", { class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
-            !isSlotUsed(this.el, "tabs") && hAsync("slot", { name: "stepper" }), isSlotUsed(this.el, "tabs") && (hAsync("nav", { "aria-label": navAriaLabel }, hAsync("ic-horizontal-scroll", null, hAsync("ul", { class: "tabs-slot" }, hAsync("slot", { name: "tabs" })))))))))));
+            } }, subheading))))), isSlotUsed$1(this.el, "actions") && (hAsync("div", { class: "action-area" }, hAsync("slot", { name: "actions" }))), isSlotUsed$1(this.el, "input") && (hAsync("div", { class: "input-area" }, hAsync("slot", { name: "input" })))), (isSlotUsed$1(this.el, "stepper") ||
+            isSlotUsed$1(this.el, "tabs")) && (hAsync("div", { class: "navigation-area" }, isSlotUsed$1(this.el, "stepper") &&
+            !isSlotUsed$1(this.el, "tabs") && hAsync("slot", { name: "stepper" }), isSlotUsed$1(this.el, "tabs") && (hAsync("nav", { "aria-label": navAriaLabel }, hAsync("ic-horizontal-scroll", null, hAsync("ul", { class: "tabs-slot" }, hAsync("slot", { name: "tabs" })))))))))));
     }
     get el() { return getElement(this); }
     static get style() { return icPageHeaderCss; }
@@ -20935,86 +21251,59 @@ class PaginationBar {
         registerInstance(this, hostRef);
         this.icPageChange = createEvent(this, "icPageChange", 7);
         this.icItemsPerPageChange = createEvent(this, "icItemsPerPageChange", 7);
-        this.PAGINATION = "ic-pagination";
-        this.TEXT_FIELD = "ic-text-field";
-        this.TOOLTIP = "ic-tooltip";
         this.PAGE_INPUT_FIELD_ID = "go-to-page-input";
         this.INVALID_PAGE_ERROR = "Please enter a valid page";
         this.NAN_ERROR = "Please enter a number";
         this.resizeObserver = null;
         this.changeItemsPerPage = () => {
-            const select = this.el.shadowRoot.querySelector("ic-select");
-            const value = select.value;
-            this.itemsPerPage = value;
-            this.setNumberPages();
-            this.setUpperBound();
-            const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
-            if (this.currentPage > this.totalPages) {
-                pagination.setCurrentPage(this.totalPages);
-                this.currentPage = this.totalPages;
-            }
-            this.icItemsPerPageChange.emit({ value: Number(this.itemsPerPage) });
-            this.icPageChange.emit({ value: this.currentPage });
+            this.setItemsPerPage(Number(this.pageDropdownEl.value));
         };
         this.changePage = (page) => {
             this.currentPage = page;
-            this.lowerBound =
-                page !== 1 ? (page - 1) * Number(this.itemsPerPage) + 1 : page;
+            this.lowerBound = page !== 1 ? (page - 1) * this.itemsPerPage + 1 : page;
             this.setUpperBound();
         };
         this.goToPage = () => {
-            const input = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+            const input = this.pageInputEl;
             const page = Number(input.value);
-            const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
             if (page <= this.totalPages && page > 0) {
                 this.changePage(page);
-                const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
-                pagination.setCurrentPage(page);
+                this.paginationEl.setCurrentPage(page);
                 this.currentPage = page;
                 input.value = "";
                 this.icPageChange.emit({ value: page });
-                tooltip.displayTooltip(false, false);
+                this.pageInputTooltipEl.displayTooltip(false, false);
                 input.validationStatus = "";
             }
             else {
-                this.inputError = this.INVALID_PAGE_ERROR;
-                input.validationStatus = "error";
-                input.setFocus();
+                this.setInputError(input, this.INVALID_PAGE_ERROR);
             }
         };
         this.handleBlur = () => {
-            var _a, _b;
-            const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.TEXT_FIELD);
-            const tooltip = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.TOOLTIP);
+            const textField = this.pageInputEl;
             if ((Number(textField.value) <= this.totalPages &&
                 Number(textField.value) > 0) ||
                 textField.value === "") {
                 textField.validationStatus = "";
             }
-            tooltip.displayTooltip(false, false);
+            this.pageInputTooltipEl.displayTooltip(false, false);
         };
         this.handleFocus = () => {
-            var _a, _b;
-            const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.TEXT_FIELD);
-            const tooltip = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.TOOLTIP);
-            if (textField.validationStatus === "error") {
-                tooltip.displayTooltip(true, true);
+            if (this.pageInputEl.validationStatus === "error") {
+                this.pageInputTooltipEl.displayTooltip(true, true);
             }
         };
         this.handleInputChange = () => {
-            const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
-            const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+            const textField = this.pageInputEl;
             const inputValue = parseInt(textField.value);
             if (inputValue > this.totalPages || inputValue <= 0) {
-                this.inputError = this.INVALID_PAGE_ERROR;
-                tooltip.displayTooltip(true, true);
-                textField.validationStatus = "error";
-                textField.focus();
+                this.setInputError(textField, this.INVALID_PAGE_ERROR);
+                this.pageInputTooltipEl.displayTooltip(true, true);
             }
         };
         this.handleKeydown = (ev) => {
-            const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
-            const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+            const tooltip = this.pageInputTooltipEl;
+            const textField = this.pageInputEl;
             if (ev.key === "Enter") {
                 if (textField.validationStatus === "error") {
                     tooltip.displayTooltip(true, true);
@@ -21029,23 +21318,20 @@ class PaginationBar {
             }
         };
         this.handleKeyUp = (ev) => {
-            const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
-            const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+            const textField = this.pageInputEl;
             const inputValue = parseInt(textField.value);
             if (Number.isNaN(inputValue) &&
                 ev.key !== "Backspace" &&
                 ev.key !== "Enter" &&
                 ev.key !== "Tab" &&
                 ev.key !== "Shift") {
-                this.inputError = this.NAN_ERROR;
-                tooltip.displayTooltip(true, false);
-                textField.validationStatus = "error";
+                this.setInputError(textField, this.NAN_ERROR, false);
+                this.pageInputTooltipEl.displayTooltip(true, false);
             }
         };
         this.paginationShouldWrap = () => {
-            const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
-            if (this.paginationControl === "simple") {
-                if (pagination.clientHeight > 63) {
+            if (this.type === "simple") {
+                if (this.paginationEl.clientHeight > 63) {
                     this.paginationWrapped = true;
                 }
                 else {
@@ -21067,24 +21353,25 @@ class PaginationBar {
             });
             this.resizeObserver.observe(this.paginationBarEl);
         };
-        this.setDefaultItemsPerPage = () => {
-            this.itemsPerPage = this.itemsPerPageOptions[0].value;
-        };
-        this.setDefaultItemsPerPageOptions = () => {
-            this.itemsPerPageOptions =
-                this.totalItems <= 100
-                    ? [
-                        { label: "10", value: "10" },
-                        { label: "25", value: "25" },
-                        { label: "50", value: "50" },
-                        { label: "All", value: String(this.totalItems) },
-                    ]
-                    : [
-                        { label: "25", value: "25" },
-                        { label: "100", value: "100" },
-                        { label: "1000", value: "1000" },
-                        { label: "All", value: String(this.totalItems) },
-                    ];
+        this.setDisplayedItemsPerPageOptions = () => {
+            if (this.itemsPerPageOptions === undefined ||
+                this.itemsPerPageOptions === null) {
+                this.displayedItemsPerPageOptions =
+                    this.totalItems <= 100
+                        ? [
+                            { label: "10", value: "10" },
+                            { label: "25", value: "25" },
+                            { label: "50", value: "50" },
+                        ]
+                        : [
+                            { label: "25", value: "25" },
+                            { label: "100", value: "100" },
+                            { label: "1000", value: "1000" },
+                        ];
+            }
+            else {
+                this.displayedItemsPerPageOptions = this.itemsPerPageOptions.slice(0, 3);
+            }
         };
         this.setGoToPageInputStyles = () => {
             var _a, _b;
@@ -21097,27 +21384,74 @@ class PaginationBar {
                 }
             }
         };
+        this.setInputError = (el, error, focus = true) => {
+            this.inputError = error;
+            el.validationStatus = "error";
+            if (focus)
+                el.setFocus();
+        };
+        this.setItemsPerPage = (newValue) => {
+            if (this.itemsPerPage !== newValue) {
+                this.itemsPerPage = newValue;
+                this.icItemsPerPageChange.emit({ value: this.itemsPerPage });
+            }
+            this.setNumberPages();
+            this.setUpperBound();
+            if (this.currentPage > this.totalPages) {
+                this.paginationEl.setCurrentPage(this.totalPages);
+                this.currentPage = this.totalPages;
+            }
+            this.icPageChange.emit({ value: this.currentPage });
+        };
         this.setNumberPages = () => {
-            this.totalPages = Math.ceil(this.totalItems / Number(this.itemsPerPage));
+            const numItemsPerPage = this.itemsPerPage;
+            if (this.totalItems <= numItemsPerPage) {
+                this.totalPages = 1;
+            }
+            else {
+                this.totalPages = Math.ceil(this.totalItems / numItemsPerPage);
+            }
+        };
+        this.setPaginationBarContent = () => {
+            this.setDisplayedItemsPerPageOptions();
+            this.trimItemsPerPageOptions();
+            this.updateItemsPerPage();
         };
         this.setUpperBound = () => {
-            this.upperBound = Math.min(this.lowerBound + Number(this.itemsPerPage) - 1, this.totalItems);
+            this.upperBound = Math.min(this.lowerBound + this.itemsPerPage - 1, this.totalItems);
         };
         this.trimItemsPerPageOptions = () => {
-            this.itemsPerPageOptions = this.itemsPerPageOptions.slice(0, 3);
-            this.itemsPerPageOptions.push({
+            this.displayedItemsPerPageOptions.push({
                 label: "All",
                 value: String(this.totalItems),
             });
-            for (let i = 0; i < this.itemsPerPageOptions.length - 1; i++) {
-                if (this.totalItems <= Number(this.itemsPerPageOptions[i].value)) {
-                    this.itemsPerPageOptions.splice(i, this.itemsPerPageOptions.length - (i + 1));
+            for (let i = 0; i < this.displayedItemsPerPageOptions.length - 1; i++) {
+                if (this.totalItems <= Number(this.displayedItemsPerPageOptions[i].value)) {
+                    this.displayedItemsPerPageOptions.splice(i, this.displayedItemsPerPageOptions.length - (i + 1));
                 }
             }
         };
+        this.updateItemsPerPage = () => {
+            let newItemsPerPage = this.itemsPerPage;
+            let updated = false;
+            let lastOptionValue = 0;
+            for (let i = 0; i < this.displayedItemsPerPageOptions.length; i++) {
+                lastOptionValue = Number(this.displayedItemsPerPageOptions[i].value);
+                if (this.itemsPerPage <= lastOptionValue) {
+                    newItemsPerPage = lastOptionValue;
+                    updated = true;
+                    i = this.displayedItemsPerPageOptions.length;
+                }
+            }
+            if (!updated && this.itemsPerPage > lastOptionValue) {
+                newItemsPerPage = lastOptionValue;
+            }
+            this.setItemsPerPage(newItemsPerPage);
+        };
         this.currentPage = 1;
+        this.displayedItemsPerPageOptions = undefined;
         this.inputError = "Please enter a valid page";
-        this.itemsPerPage = undefined;
+        this.itemsPerPage = 0;
         this.lowerBound = 1;
         this.paginationWidth = undefined;
         this.paginationWrapped = false;
@@ -21125,30 +21459,29 @@ class PaginationBar {
         this.upperBound = undefined;
         this.alignment = "right";
         this.appearance = "default";
-        this.itemLabel = "Item";
+        this.rangeItemLabel = "Item";
         this.itemsPerPageOptions = undefined;
-        this.paginationControl = "simple";
-        this.paginationType = "page";
+        this.type = "simple";
+        this.rangeLabelType = "page";
         this.pageLabel = "Page";
         this.showGoToPageControl = false;
-        this.showItemsPerPage = true;
+        this.hideRangeLabel = false;
         this.showItemsPerPageControl = false;
         this.totalItems = undefined;
     }
+    watchItemsPerPageOptionsHandler() {
+        this.setPaginationBarContent();
+    }
+    watchTotalItemsHandler() {
+        this.setPaginationBarContent();
+    }
     disconnectedCallback() {
         if (this.resizeObserver !== null) {
             this.resizeObserver.disconnect();
         }
     }
     componentWillLoad() {
-        if (this.itemsPerPageOptions === undefined ||
-            this.itemsPerPageOptions === null) {
-            this.setDefaultItemsPerPageOptions();
-        }
-        this.trimItemsPerPageOptions();
-        this.setDefaultItemsPerPage();
-        this.setNumberPages();
-        this.setUpperBound();
+        this.setPaginationBarContent();
     }
     componentDidLoad() {
         this.paginationWidth = this.paginationBarEl.clientWidth;
@@ -21161,7 +21494,7 @@ class PaginationBar {
         this.changePage(page);
     }
     render() {
-        const { appearance, alignment, itemsPerPageOptions, PAGE_INPUT_FIELD_ID, paginationControl, paginationType, showItemsPerPage, showItemsPerPageControl, showGoToPageControl, } = this;
+        const { appearance, alignment, displayedItemsPerPageOptions, PAGE_INPUT_FIELD_ID, type, rangeLabelType, hideRangeLabel, showItemsPerPageControl, showGoToPageControl, } = this;
         const focusElFromLabel = (el) => {
             var _a;
             (_a = this.paginationBarEl.querySelector(el)) === null || _a === void 0 ? void 0 : _a.setFocus();
@@ -21169,21 +21502,27 @@ class PaginationBar {
         return (hAsync("div", { class: {
                 ["pagination-bar"]: true,
                 [`pagination-bar-${alignment}`]: true,
-            }, ref: (el) => (this.paginationBarEl = el) }, (showItemsPerPage || showItemsPerPageControl) && (hAsync("div", { class: "item-controls" }, showItemsPerPageControl && (hAsync("div", { class: "items-per-page-holder" }, hAsync("ic-typography", { class: {
+            }, ref: (el) => (this.paginationBarEl = el) }, (!hideRangeLabel || showItemsPerPageControl) && (hAsync("div", { class: "item-controls" }, showItemsPerPageControl && (hAsync("div", { class: "items-per-page-holder" }, hAsync("ic-typography", { class: {
                 [`pagination-text-${appearance}`]: true,
                 ["items-per-page-control-label"]: true,
-            }, variant: "label", onClick: () => focusElFromLabel("ic-select") }, this.itemLabel, "s per ", this.pageLabel.toLowerCase()), hAsync("ic-select", { small: true, label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: itemsPerPageOptions, value: this.itemsPerPage, onIcChange: () => this.changeItemsPerPage() }))), showItemsPerPage && paginationType === "data" ? (hAsync("ic-typography", { class: {
+            }, variant: "label", onClick: () => focusElFromLabel("ic-select") }, this.rangeItemLabel, "s per ", this.pageLabel.toLowerCase()), hAsync("ic-select", { small: true, label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: displayedItemsPerPageOptions, value: this.itemsPerPage.toString(), onIcChange: () => this.changeItemsPerPage(), ref: (el) => (this.pageDropdownEl = el) }))), !hideRangeLabel && rangeLabelType === "data" ? (hAsync("ic-typography", { class: {
                 [`pagination-text-${appearance}`]: true,
                 ["item-pagination-label"]: true,
-            }, variant: "label", "aria-live": "polite" }, this.lowerBound, " - ", this.upperBound, " of ", this.totalItems, " ", this.itemLabel.toLowerCase(), this.totalItems > 1 ? "s" : "")) : (showItemsPerPage && (hAsync("ic-typography", { class: {
+            }, variant: "label", "aria-live": "polite" }, this.upperBound === 0 &&
+            `0 ${this.rangeItemLabel.toLowerCase()}s`, this.upperBound > 0 &&
+            `${this.lowerBound} - ${this.upperBound} of ${this.totalItems} ${this.rangeItemLabel.toLowerCase()}${this.totalItems > 1 ? "s" : ""}`)) : (!hideRangeLabel && (hAsync("ic-typography", { class: {
                 [`pagination-text-${appearance}`]: true,
                 ["page-pagination-label"]: true,
             }, variant: "label", "aria-live": "polite" }, this.pageLabel, " ", this.currentPage, " of ", this.totalPages))))), hAsync("div", { class: {
                 ["pagination-controls"]: true,
                 ["pagination-controls-wrap"]: this.paginationWrapped,
-            } }, hAsync("div", { class: "pagination-holder" }, hAsync("ic-pagination", { appearance: appearance, type: paginationControl, pages: this.totalPages })), showGoToPageControl && (hAsync("div", { class: "go-to-page-holder" }, hAsync("ic-typography", { class: { [`pagination-text-${appearance}`]: true }, variant: "label", onClick: () => focusElFromLabel("ic-text-field") }, "Go to ", this.pageLabel.toLowerCase()), hAsync("ic-tooltip", { label: this.inputError, target: `#${PAGE_INPUT_FIELD_ID}`, disableHover: true, disableClick: true }, hAsync("ic-text-field", { type: "number", size: "small", label: PAGE_INPUT_FIELD_ID, class: PAGE_INPUT_FIELD_ID, id: PAGE_INPUT_FIELD_ID, hideLabel: true, onKeyDown: (ev) => this.handleKeydown(ev), onKeyUp: (ev) => this.handleKeyUp(ev), onInput: () => this.handleInputChange(), max: this.totalPages, min: "1", validationInlineInternal: true, onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus() })), hAsync("ic-button", { appearance: appearance, variant: "secondary", onClick: () => this.goToPage(), size: "small", class: "go-to-page-button" }, "Go"))))));
+            } }, hAsync("div", { class: "pagination-holder" }, hAsync("ic-pagination", { appearance: appearance, type: type, pages: this.totalPages, ref: (el) => (this.paginationEl = el) })), showGoToPageControl && (hAsync("div", { class: "go-to-page-holder" }, hAsync("ic-typography", { class: { [`pagination-text-${appearance}`]: true }, variant: "label", onClick: () => focusElFromLabel("ic-text-field") }, "Go to ", this.pageLabel.toLowerCase()), hAsync("ic-tooltip", { label: this.inputError, target: `#${PAGE_INPUT_FIELD_ID}`, disableHover: true, disableClick: true, ref: (el) => (this.pageInputTooltipEl = el) }, hAsync("ic-text-field", { type: "number", size: "small", label: PAGE_INPUT_FIELD_ID, class: PAGE_INPUT_FIELD_ID, id: PAGE_INPUT_FIELD_ID, hideLabel: true, onKeyDown: (ev) => this.handleKeydown(ev), onKeyUp: (ev) => this.handleKeyUp(ev), onInput: () => this.handleInputChange(), max: this.totalPages, min: "1", validationInlineInternal: true, onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), ref: (el) => (this.pageInputEl = el) })), hAsync("ic-button", { appearance: appearance, variant: "secondary", onClick: () => this.goToPage(), size: "small", class: "go-to-page-button" }, "Go"))))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "itemsPerPageOptions": ["watchItemsPerPageOptionsHandler"],
+        "totalItems": ["watchTotalItemsHandler"]
+    }; }
     static get style() { return icPaginationBarCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -21191,16 +21530,17 @@ class PaginationBar {
         "$members$": {
             "alignment": [1],
             "appearance": [1],
-            "itemLabel": [1, "item-label"],
-            "itemsPerPageOptions": [1040],
-            "paginationControl": [1, "pagination-control"],
-            "paginationType": [1, "pagination-type"],
+            "rangeItemLabel": [1, "range-item-label"],
+            "itemsPerPageOptions": [16],
+            "type": [1],
+            "rangeLabelType": [1, "range-label-type"],
             "pageLabel": [1, "page-label"],
             "showGoToPageControl": [4, "show-go-to-page-control"],
-            "showItemsPerPage": [4, "show-items-per-page"],
+            "hideRangeLabel": [4, "hide-range-label"],
             "showItemsPerPageControl": [4, "show-items-per-page-control"],
             "totalItems": [2, "total-items"],
             "currentPage": [32],
+            "displayedItemsPerPageOptions": [32],
             "inputError": [32],
             "itemsPerPage": [32],
             "lowerBound": [32],
@@ -21215,7 +21555,7 @@ class PaginationBar {
     }; }
 }
 
-const icPaginationItemCss = "/*!@html*/html.sc-ic-pagination-item{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-pagination-item{margin:0}/*!@main*/main.sc-ic-pagination-item{display:block}/*!@h1*/h1.sc-ic-pagination-item{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-pagination-item{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-pagination-item{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-pagination-item{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-pagination-item{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-pagination-item,strong.sc-ic-pagination-item{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-pagination-item,kbd.sc-ic-pagination-item,samp.sc-ic-pagination-item{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-pagination-item{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-pagination-item,sup.sc-ic-pagination-item{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-pagination-item{bottom:-0.25em}/*!@sup*/sup.sc-ic-pagination-item{top:-0.5em}/*!@img*/img.sc-ic-pagination-item{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-pagination-item,input.sc-ic-pagination-item,optgroup.sc-ic-pagination-item,select.sc-ic-pagination-item,textarea.sc-ic-pagination-item{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-pagination-item,input.sc-ic-pagination-item{overflow:visible}/*!@button,\nselect*/button.sc-ic-pagination-item,select.sc-ic-pagination-item{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-pagination-item,[type=\"button\"].sc-ic-pagination-item,[type=\"reset\"].sc-ic-pagination-item,[type=\"submit\"].sc-ic-pagination-item{-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-pagination-item::-moz-focus-inner,[type=\"button\"].sc-ic-pagination-item::-moz-focus-inner,[type=\"reset\"].sc-ic-pagination-item::-moz-focus-inner,[type=\"submit\"].sc-ic-pagination-item::-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-pagination-item:-moz-focusring,[type=\"button\"].sc-ic-pagination-item:-moz-focusring,[type=\"reset\"].sc-ic-pagination-item:-moz-focusring,[type=\"submit\"].sc-ic-pagination-item:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-pagination-item{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-pagination-item{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-pagination-item{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-pagination-item{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-pagination-item,[type=\"radio\"].sc-ic-pagination-item{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-pagination-item::-webkit-inner-spin-button,[type=\"number\"].sc-ic-pagination-item::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-pagination-item{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-pagination-item::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-pagination-item::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-pagination-item{display:block}/*!@summary*/summary.sc-ic-pagination-item{display:list-item}/*!@template*/template.sc-ic-pagination-item{display:none}/*!@[hidden]*/[hidden].sc-ic-pagination-item{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-pagination-item,body.sc-ic-pagination-item,div.sc-ic-pagination-item,span.sc-ic-pagination-item,applet.sc-ic-pagination-item,object.sc-ic-pagination-item,iframe.sc-ic-pagination-item,h1.sc-ic-pagination-item,h2.sc-ic-pagination-item,h3.sc-ic-pagination-item,h4.sc-ic-pagination-item,h5.sc-ic-pagination-item,h6.sc-ic-pagination-item,p.sc-ic-pagination-item,blockquote.sc-ic-pagination-item,pre.sc-ic-pagination-item,a.sc-ic-pagination-item,abbr.sc-ic-pagination-item,acronym.sc-ic-pagination-item,address.sc-ic-pagination-item,big.sc-ic-pagination-item,cite.sc-ic-pagination-item,code.sc-ic-pagination-item,del.sc-ic-pagination-item,dfn.sc-ic-pagination-item,em.sc-ic-pagination-item,img.sc-ic-pagination-item,ins.sc-ic-pagination-item,kbd.sc-ic-pagination-item,q.sc-ic-pagination-item,s.sc-ic-pagination-item,samp.sc-ic-pagination-item,small.sc-ic-pagination-item,strike.sc-ic-pagination-item,strong.sc-ic-pagination-item,sub.sc-ic-pagination-item,sup.sc-ic-pagination-item,tt.sc-ic-pagination-item,var.sc-ic-pagination-item,b.sc-ic-pagination-item,u.sc-ic-pagination-item,i.sc-ic-pagination-item,center.sc-ic-pagination-item,dl.sc-ic-pagination-item,dt.sc-ic-pagination-item,dd.sc-ic-pagination-item,ol.sc-ic-pagination-item,ul.sc-ic-pagination-item,li.sc-ic-pagination-item,fieldset.sc-ic-pagination-item,form.sc-ic-pagination-item,label.sc-ic-pagination-item,legend.sc-ic-pagination-item,table.sc-ic-pagination-item,caption.sc-ic-pagination-item,tbody.sc-ic-pagination-item,tfoot.sc-ic-pagination-item,thead.sc-ic-pagination-item,tr.sc-ic-pagination-item,th.sc-ic-pagination-item,td.sc-ic-pagination-item,article.sc-ic-pagination-item,aside.sc-ic-pagination-item,canvas.sc-ic-pagination-item,details.sc-ic-pagination-item,embed.sc-ic-pagination-item,figure.sc-ic-pagination-item,figcaption.sc-ic-pagination-item,footer.sc-ic-pagination-item,header.sc-ic-pagination-item,hgroup.sc-ic-pagination-item,menu.sc-ic-pagination-item,nav.sc-ic-pagination-item,output.sc-ic-pagination-item,ruby.sc-ic-pagination-item,section.sc-ic-pagination-item,summary.sc-ic-pagination-item,time.sc-ic-pagination-item,mark.sc-ic-pagination-item,audio.sc-ic-pagination-item,video.sc-ic-pagination-item{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@a*/a.sc-ic-pagination-item{text-align:center}/*!@.item-container*/.item-container.sc-ic-pagination-item{display:flex;justify-content:center;align-items:center;width:calc(var(--ic-space-xl) + var(--ic-space-sm));height:var(--ic-space-xl);margin:var(--ic-space-xxs) var(--ic-space-xxxs);cursor:pointer;text-decoration:none}/*!@button*/button.sc-ic-pagination-item{background:none;border:none;outline:inherit;position:relative}/*!@.ellipsis*/.ellipsis.sc-ic-pagination-item{pointer-events:none;color:var(--ic-color-secondary-text)}/*!@.item-container:focus*/.item-container.sc-ic-pagination-item:focus{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}/*!@.page*/.page.sc-ic-pagination-item{color:var(--ic-action-default)}/*!@.simple-current*/.simple-current.sc-ic-pagination-item{width:calc(var(--ic-space-xxl) + var(--ic-space-md));height:var(--ic-space-lg);cursor:default}/*!@.item-container.page:hover:not(.selected):not(:focus)*/.item-container.page.sc-ic-pagination-item:hover:not(.selected):not(:focus){border-radius:var(--ic-border-radius);background-color:var(--ic-action-default-bg-hover)}/*!@.item-container.page:active:not(.selected):not(:focus)*/.item-container.page.sc-ic-pagination-item:active:not(.selected):not(:focus){background-color:var(--ic-action-default-bg-active)}/*!@.selected*/.selected.sc-ic-pagination-item{pointer-events:none;outline:none}/*!@.selected::after*/.selected.sc-ic-pagination-item::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-default)}/*!@.page-selected*/.page-selected.sc-ic-pagination-item{color:var(--ic-color-primary-text)}/*!@.item-container.page.light:hover:not(.selected):not(:focus)*/.item-container.page.light.sc-ic-pagination-item:hover:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-hover)}/*!@.item-container.page.light:active:not(.selected):not(:focus)*/.item-container.page.light.sc-ic-pagination-item:active:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-active)}/*!@ic-typography.light*/ic-typography.light.sc-ic-pagination-item{color:var(--ic-color-white-text)}/*!@.selected.light::after*/.selected.light.sc-ic-pagination-item::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-light)}/*!@.item-container.page.dark:hover:not(.selected):not(:focus)*/.item-container.page.dark.sc-ic-pagination-item:hover:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-hover)}/*!@.item-container.page.dark:active:not(.selected):not(:focus)*/.item-container.page.dark.sc-ic-pagination-item:active:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-active)}/*!@ic-typography.dark*/ic-typography.dark.sc-ic-pagination-item{color:var(--ic-color-primary-text)}/*!@.selected.dark::after*/.selected.dark.sc-ic-pagination-item::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-dark)}/*!@.disabled*/.disabled.sc-ic-pagination-item{color:var(--ic-architectural-200);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (forced-colors: active){/*!@.selected::after*/.selected.sc-ic-pagination-item::after{background-color:Highlight}/*!@.selected.light::after*/.selected.light.sc-ic-pagination-item::after{background-color:Highlight}/*!@.selected.dark::after*/.selected.dark.sc-ic-pagination-item::after{background-color:Highlight}}";
+const icPaginationItemCss = "/*!@html*/html.sc-ic-pagination-item{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-pagination-item{margin:0}/*!@main*/main.sc-ic-pagination-item{display:block}/*!@h1*/h1.sc-ic-pagination-item{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-pagination-item{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-pagination-item{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-pagination-item{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-pagination-item{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-pagination-item,strong.sc-ic-pagination-item{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-pagination-item,kbd.sc-ic-pagination-item,samp.sc-ic-pagination-item{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-pagination-item{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-pagination-item,sup.sc-ic-pagination-item{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-pagination-item{bottom:-0.25em}/*!@sup*/sup.sc-ic-pagination-item{top:-0.5em}/*!@img*/img.sc-ic-pagination-item{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-pagination-item,input.sc-ic-pagination-item,optgroup.sc-ic-pagination-item,select.sc-ic-pagination-item,textarea.sc-ic-pagination-item{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-pagination-item,input.sc-ic-pagination-item{overflow:visible}/*!@button,\nselect*/button.sc-ic-pagination-item,select.sc-ic-pagination-item{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-pagination-item,[type=\"button\"].sc-ic-pagination-item,[type=\"reset\"].sc-ic-pagination-item,[type=\"submit\"].sc-ic-pagination-item{-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-pagination-item::-moz-focus-inner,[type=\"button\"].sc-ic-pagination-item::-moz-focus-inner,[type=\"reset\"].sc-ic-pagination-item::-moz-focus-inner,[type=\"submit\"].sc-ic-pagination-item::-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-pagination-item:-moz-focusring,[type=\"button\"].sc-ic-pagination-item:-moz-focusring,[type=\"reset\"].sc-ic-pagination-item:-moz-focusring,[type=\"submit\"].sc-ic-pagination-item:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-pagination-item{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-pagination-item{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-pagination-item{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-pagination-item{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-pagination-item,[type=\"radio\"].sc-ic-pagination-item{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-pagination-item::-webkit-inner-spin-button,[type=\"number\"].sc-ic-pagination-item::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-pagination-item{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-pagination-item::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-pagination-item::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-pagination-item{display:block}/*!@summary*/summary.sc-ic-pagination-item{display:list-item}/*!@template*/template.sc-ic-pagination-item{display:none}/*!@[hidden]*/[hidden].sc-ic-pagination-item{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-pagination-item,body.sc-ic-pagination-item,div.sc-ic-pagination-item,span.sc-ic-pagination-item,applet.sc-ic-pagination-item,object.sc-ic-pagination-item,iframe.sc-ic-pagination-item,h1.sc-ic-pagination-item,h2.sc-ic-pagination-item,h3.sc-ic-pagination-item,h4.sc-ic-pagination-item,h5.sc-ic-pagination-item,h6.sc-ic-pagination-item,p.sc-ic-pagination-item,blockquote.sc-ic-pagination-item,pre.sc-ic-pagination-item,a.sc-ic-pagination-item,abbr.sc-ic-pagination-item,acronym.sc-ic-pagination-item,address.sc-ic-pagination-item,big.sc-ic-pagination-item,cite.sc-ic-pagination-item,code.sc-ic-pagination-item,del.sc-ic-pagination-item,dfn.sc-ic-pagination-item,em.sc-ic-pagination-item,img.sc-ic-pagination-item,ins.sc-ic-pagination-item,kbd.sc-ic-pagination-item,q.sc-ic-pagination-item,s.sc-ic-pagination-item,samp.sc-ic-pagination-item,small.sc-ic-pagination-item,strike.sc-ic-pagination-item,strong.sc-ic-pagination-item,sub.sc-ic-pagination-item,sup.sc-ic-pagination-item,tt.sc-ic-pagination-item,var.sc-ic-pagination-item,b.sc-ic-pagination-item,u.sc-ic-pagination-item,i.sc-ic-pagination-item,center.sc-ic-pagination-item,dl.sc-ic-pagination-item,dt.sc-ic-pagination-item,dd.sc-ic-pagination-item,ol.sc-ic-pagination-item,ul.sc-ic-pagination-item,li.sc-ic-pagination-item,fieldset.sc-ic-pagination-item,form.sc-ic-pagination-item,label.sc-ic-pagination-item,legend.sc-ic-pagination-item,table.sc-ic-pagination-item,caption.sc-ic-pagination-item,tbody.sc-ic-pagination-item,tfoot.sc-ic-pagination-item,thead.sc-ic-pagination-item,tr.sc-ic-pagination-item,th.sc-ic-pagination-item,td.sc-ic-pagination-item,article.sc-ic-pagination-item,aside.sc-ic-pagination-item,canvas.sc-ic-pagination-item,details.sc-ic-pagination-item,embed.sc-ic-pagination-item,figure.sc-ic-pagination-item,figcaption.sc-ic-pagination-item,footer.sc-ic-pagination-item,header.sc-ic-pagination-item,hgroup.sc-ic-pagination-item,menu.sc-ic-pagination-item,nav.sc-ic-pagination-item,output.sc-ic-pagination-item,ruby.sc-ic-pagination-item,section.sc-ic-pagination-item,summary.sc-ic-pagination-item,time.sc-ic-pagination-item,mark.sc-ic-pagination-item,audio.sc-ic-pagination-item,video.sc-ic-pagination-item{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@a*/a.sc-ic-pagination-item{text-align:center}/*!@.item-container*/.item-container.sc-ic-pagination-item{display:flex;justify-content:center;align-items:center;width:calc(var(--ic-space-xl) + var(--ic-space-sm));height:var(--ic-space-xl);margin:var(--ic-space-xxs) var(--ic-space-xxxs);cursor:pointer;text-decoration:none}/*!@button*/button.sc-ic-pagination-item{background:none;border:none;outline:inherit;position:relative}/*!@.ellipsis*/.ellipsis.sc-ic-pagination-item{pointer-events:none;color:var(--ic-color-secondary-text)}/*!@.item-container:focus*/.item-container.sc-ic-pagination-item:focus{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}/*!@.page*/.page.sc-ic-pagination-item{color:var(--ic-action-default)}/*!@.simple-current*/.simple-current.sc-ic-pagination-item{min-width:calc(var(--ic-space-xxl) + var(--ic-space-md));height:var(--ic-space-lg);cursor:default}/*!@.item-container.page:hover:not(.selected):not(:focus)*/.item-container.page.sc-ic-pagination-item:hover:not(.selected):not(:focus){border-radius:var(--ic-border-radius);background-color:var(--ic-action-default-bg-hover)}/*!@.item-container.page:active:not(.selected):not(:focus)*/.item-container.page.sc-ic-pagination-item:active:not(.selected):not(:focus){background-color:var(--ic-action-default-bg-active)}/*!@.selected*/.selected.sc-ic-pagination-item{pointer-events:none;outline:none}/*!@.selected::after*/.selected.sc-ic-pagination-item::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-default)}/*!@.page-selected*/.page-selected.sc-ic-pagination-item{color:var(--ic-color-primary-text)}/*!@.item-container.page.light:hover:not(.selected):not(:focus)*/.item-container.page.light.sc-ic-pagination-item:hover:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-hover)}/*!@.item-container.page.light:active:not(.selected):not(:focus)*/.item-container.page.light.sc-ic-pagination-item:active:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-active)}/*!@ic-typography.light*/ic-typography.light.sc-ic-pagination-item{color:var(--ic-color-white-text)}/*!@.selected.light::after*/.selected.light.sc-ic-pagination-item::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-light)}/*!@.item-container.page.dark:hover:not(.selected):not(:focus)*/.item-container.page.dark.sc-ic-pagination-item:hover:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-hover)}/*!@.item-container.page.dark:active:not(.selected):not(:focus)*/.item-container.page.dark.sc-ic-pagination-item:active:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-active)}/*!@ic-typography.dark*/ic-typography.dark.sc-ic-pagination-item{color:var(--ic-color-primary-text)}/*!@.selected.dark::after*/.selected.dark.sc-ic-pagination-item::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-dark)}/*!@.disabled*/.disabled.sc-ic-pagination-item{color:var(--ic-architectural-200);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (forced-colors: active){/*!@.selected::after*/.selected.sc-ic-pagination-item::after{background-color:Highlight}/*!@.selected.light::after*/.selected.light.sc-ic-pagination-item::after{background-color:Highlight}/*!@.selected.dark::after*/.selected.dark.sc-ic-pagination-item::after{background-color:Highlight}}";
 
 class PaginationItem {
     constructor(hostRef) {
@@ -21346,7 +21686,7 @@ class PopoverMenu {
                 }
                 else if (el.tagName === "IC-MENU-GROUP") {
                     const groupSlotWrapper = el.shadowRoot.querySelector("ul");
-                    const menuGroupElements = getSlotElements(groupSlotWrapper);
+                    const menuGroupElements = getSlotElements$1(groupSlotWrapper);
                     this.addMenuItems(menuGroupElements);
                 }
             }
@@ -21411,13 +21751,14 @@ class PopoverMenu {
         }
     }
     disconnectedCallback() {
-        if (this.popperInstance !== undefined) {
+        if (this.popperInstance) {
             this.popperInstance.destroy();
+            this.popperInstance = null;
         }
     }
     componentDidLoad() {
         const slotWrapper = this.el.shadowRoot.querySelector("ul.button");
-        const popoverMenuElements = getSlotElements(slotWrapper);
+        const popoverMenuElements = getSlotElements$1(slotWrapper);
         if (popoverMenuElements !== null) {
             this.addMenuItems(popoverMenuElements);
         }
@@ -21623,8 +21964,8 @@ class RadioGroup {
                 this.radioOptions !== undefined &&
                 (this.radioOptions.length > 2 ||
                     (this.radioOptions.length === 2 &&
-                        (isSlotUsed(this.radioOptions[0], "additional-field") ||
-                            isSlotUsed(this.radioOptions[1], "additional-field"))))) {
+                        (isSlotUsed$1(this.radioOptions[0], "additional-field") ||
+                            isSlotUsed$1(this.radioOptions[1], "additional-field"))))) {
                 this.currentOrientation = "vertical";
             }
         };
@@ -21817,7 +22158,7 @@ class RadioOption {
         removeFormResetListener$1(this.el, this.handleFormReset);
     }
     componentWillLoad() {
-        const additionalFieldContent = getSlotContent(this.el, "additional-field");
+        const additionalFieldContent = getSlotContent$1(this.el, "additional-field");
         if (additionalFieldContent !== null) {
             this.hasAdditionalField = true;
             const Element = additionalFieldContent[0];
@@ -22616,7 +22957,8 @@ class Select$1 {
          * Loop through options array and for all options with no value, infer it from the label
          */
         this.setOptionsValuesFromLabels = () => {
-            if (this.options.length > 0 && this.options.map) {
+            var _a;
+            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.options.map) {
                 this.options.map((option) => {
                     if (!option.value) {
                         option.value = option.label;
@@ -23028,11 +23370,12 @@ class Select$1 {
         newValue && this.triggerLoading();
     }
     watchOptionsHandler() {
+        var _a;
         if (!this.hasTimedOut) {
             this.loading = false;
             clearTimeout(this.timeoutTimer);
             if (this.isExternalFiltering()) {
-                if (this.options.length > 0) {
+                if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                     this.setOptionsValuesFromLabels();
                     this.noOptions = null;
                     this.uniqueOptions = this.deduplicateOptions(this.options);
@@ -23057,8 +23400,9 @@ class Select$1 {
             }
         }
         else {
-            if (!this.searchable)
+            if (!this.searchable) {
                 this.options = this.noOptions;
+            }
         }
     }
     debounceChangedHandler(newValue) {
@@ -23082,11 +23426,12 @@ class Select$1 {
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a;
         this.inheritedAttributes = inheritAttributes$1(this.el, MUTABLE_ATTRIBUTES$1);
         removeDisabledFalse$1(this.disabled, this.el);
         this.setOptionsValuesFromLabels();
         addFormResetListener$1(this.el, this.handleFormReset);
-        if (!this.options.length) {
+        if (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.length)) {
             this.initialOptionsEmpty = true;
             this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
             this.uniqueOptions = this.noOptions;
@@ -24216,7 +24561,7 @@ class SideNavigation {
         this.arrangeSlottedNavigationItem = (menuExpanded) => {
             const navItems = this.el.querySelectorAll("ic-navigation-item");
             navItems.forEach((navItem) => {
-                const isNamedSlot = isSlotUsed(navItem, "navigation-item");
+                const isNamedSlot = isSlotUsed$1(navItem, "navigation-item");
                 const isUnnamedSlot = navItem.children[0] && !navItem.children[0].getAttribute("slot");
                 if (isNamedSlot || isUnnamedSlot) {
                     let navItemSlot;
@@ -24435,14 +24780,14 @@ class SideNavigation {
         };
         this.renderTopBar = ({ isSDevice, foregroundColor, menuOpen, href, isAppNameSubtitleVariant, }) => {
             const hasTitle = this.appTitle !== "" && isPropDefined(this.appTitle);
-            const Component = isSlotUsed(this.el, "app-title") ? "div" : "a";
+            const Component = isSlotUsed$1(this.el, "app-title") ? "div" : "a";
             const attrs = Component == "a" && {
                 href: href,
             };
             return (hAsync("div", { class: {
                     "top-bar": true,
                     [this.foregroundColor]: true,
-                } }, isSDevice && (hAsync("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, hAsync("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", appearance: foregroundColor, onClick: this.toggleMenu, ariaOwnsId: "side-navigation", "aria-haspopup": "true", "aria-expanded": "false", ref: (el) => (this.menuButton = el) }, hAsync("span", { class: "mobile-top-bar-menu-icon", slot: "icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), hAsync("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), hAsync("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (hAsync(Component, Object.assign({}, attrs, { class: "title-link" }), hAsync("div", { class: "app-icon-container", "aria-hidden": "true" }, hAsync("slot", { name: "app-icon" })), hAsync("div", { class: "app-title-inner-wrapper" }, isSlotUsed(this.el, "app-title") ? (hAsync("slot", { name: "app-title" })) : (this.renderAppTitle(isAppNameSubtitleVariant))))))));
+                } }, isSDevice && (hAsync("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, hAsync("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", appearance: foregroundColor, onClick: this.toggleMenu, ariaOwnsId: "side-navigation", "aria-haspopup": "true", "aria-expanded": "false", ref: (el) => (this.menuButton = el) }, hAsync("span", { class: "mobile-top-bar-menu-icon", slot: "icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), hAsync("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), hAsync("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed$1(this.el, "app-title")) && (hAsync(Component, Object.assign({}, attrs, { class: "title-link" }), hAsync("div", { class: "app-icon-container", "aria-hidden": "true" }, hAsync("slot", { name: "app-icon" })), hAsync("div", { class: "app-title-inner-wrapper" }, isSlotUsed$1(this.el, "app-title") ? (hAsync("slot", { name: "app-title" })) : (this.renderAppTitle(isAppNameSubtitleVariant))))))));
         };
         this.deviceSize = getCurrentDeviceSize();
         this.deviceSizeAppTitle = DEVICE_SIZES.S;
@@ -24470,7 +24815,7 @@ class SideNavigation {
         if (this.collapsedIconLabels) {
             this.setCollapsedIconLabels();
         }
-        this.hasSecondaryNavigation = isSlotUsed(this.el, "secondary-navigation");
+        this.hasSecondaryNavigation = isSlotUsed$1(this.el, "secondary-navigation");
     }
     componentDidLoad() {
         this.emitSideNavigationExpanded({
@@ -24482,7 +24827,7 @@ class SideNavigation {
         this.arrangeSlottedNavigationItem(this.menuExpanded);
         this.displayTooltipWithExpandedLongLabel(this.menuExpanded);
         this.setExpandedButtonHeight();
-        !isSlotUsed(this.el, "app-title") &&
+        !isSlotUsed$1(this.el, "app-title") &&
             onComponentRequiredPropUndefined$1([{ prop: this.appTitle, propName: "app-title" }], "Side Navigation");
     }
     disconnectedCallback() {
@@ -24518,10 +24863,10 @@ class SideNavigation {
                 [IcThemeForegroundEnum$1.Dark]: foregroundColor === IcThemeForegroundEnum$1.Dark,
                 ["collapsed-labels"]: !isSDevice && !menuExpanded && collapsedIconLabels,
                 ["inline"]: inline,
-            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (hAsync("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "primary-navigation" }))))), hAsync("div", { class: {
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { class: "side-navigation-inner" }, isSlotUsed$1(this.el, "primary-navigation") && (hAsync("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "primary-navigation" }))))), hAsync("div", { class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (hAsync("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "secondary-navigation" })))), hAsync("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && hAsync("ic-divider", null), displayExpandBtn && (hAsync("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), hAsync("div", { class: "app-status-wrapper" }, status !== "" && (hAsync("div", { class: {
+            } }, isSlotUsed$1(this.el, "secondary-navigation") && (hAsync("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, hAsync("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), hAsync("ul", { class: "navigation-list" }, hAsync("slot", { name: "secondary-navigation" })))), hAsync("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && hAsync("ic-divider", null), displayExpandBtn && (hAsync("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), hAsync("div", { class: "app-status-wrapper" }, status !== "" && (hAsync("div", { class: {
                 ["app-status"]: true,
             } }, hAsync("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (hAsync("ic-typography", { variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
@@ -25258,7 +25603,7 @@ class Tab {
                 ["ic-tab-light"]: appearance === IcThemeForegroundEnum$1.Light,
                 ["selected"]: selected,
                 ["disabled"]: disabled,
-            }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.el.querySelector('[slot="icon"]') && hAsync("slot", { name: "icon" }), hAsync("ic-typography", { class: "ic-tab-label", variant: "label" }, hAsync("span", null, hAsync("slot", null))), isSlotUsed(this.el, "badge") && hAsync("slot", { name: "badge" })));
+            }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.el.querySelector('[slot="icon"]') && hAsync("slot", { name: "icon" }), hAsync("ic-typography", { class: "ic-tab-label", variant: "label" }, hAsync("span", null, hAsync("slot", null))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25909,7 +26254,7 @@ class TextField {
                 ["no-resize"]: resize === false || readonly,
                 ["no-left-pad"]: !this.showLeftIcon && readonly,
                 ["readonly"]: readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (hAsync("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (hAsync("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && hAsync("slot", { name: "menu" }), (!isEmptyString$1(validationStatus) ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed$1(this.el, "clear-button") && (hAsync("slot", { name: "clear-button" })), isSlotUsed$1(this.el, "search-submit-button") && (hAsync("slot", { name: "search-submit-button" }))), isSlotUsed$1(this.el, "menu") && hAsync("slot", { name: "menu" }), (!isEmptyString$1(validationStatus) ||
             !isEmptyString$1(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
@@ -26003,21 +26348,19 @@ class Theme {
             }
         };
         this.setThemeColor = () => {
-            if (this.color !== null && convertToRGBA(this.color) !== null) {
-                const colorRGBA = convertToRGBA(this.color);
-                this.setThemeRGBA(colorRGBA);
-            }
-        };
-        this.setThemeRGBA = (colorRGBA) => {
-            if (colorRGBA !== null) {
-                const root = document.documentElement;
-                root.style.setProperty("--ic-theme-primary-r", colorRGBA.r.toString());
-                root.style.setProperty("--ic-theme-primary-g", colorRGBA.g.toString());
-                root.style.setProperty("--ic-theme-primary-b", colorRGBA.b.toString());
-                root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
+            const colorRGBA = convertToRGBA(this.color);
+            if (colorRGBA) {
+                const { r, g, b, a } = colorRGBA;
+                const { style } = document.documentElement;
+                style.setProperty("--ic-theme-primary-r", `${r}`);
+                style.setProperty("--ic-theme-primary-g", `${g}`);
+                style.setProperty("--ic-theme-primary-b", `${b}`);
+                style.setProperty("--ic-theme-primary-a", `${a}`);
                 this.checkThemeColorContrast();
-                const foregroundColor = getThemeForegroundColor();
-                this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
+                this.themeChange.emit({
+                    mode: getThemeForegroundColor(),
+                    color: colorRGBA,
+                });
             }
         };
         this.color = null;
@@ -26086,10 +26429,10 @@ class Toast {
         this.handleLongText(this.heading.length > TOAST_HEADING_CHAR_LIMIT, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) > TOAST_MESSAGE_CHAR_LIMIT);
         if (this.autoDismissTimeout < 5000)
             this.autoDismissTimeout = 5000;
-        if (isSlotUsed(this.el, "action"))
+        if (isSlotUsed$1(this.el, "action"))
             this.dismissMode = "manual";
         this.isManual = this.dismissMode === "manual";
-        if (isSlotUsed(this.el, "neutral-icon"))
+        if (isSlotUsed$1(this.el, "neutral-icon"))
             this.variant = "neutral";
         if (this.variant === "neutral") {
             this.neutralVariantLabel =
@@ -26108,7 +26451,7 @@ class Toast {
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined$1([{ prop: this.heading, propName: "heading" }], "Toast");
-        const actionContent = getSlot(this.el, "action");
+        const actionContent = getSlot$1(this.el, "action");
         const dismissButton = this.el.shadowRoot.querySelector("ic-button");
         if (actionContent)
             this.interactiveElements.push(actionContent);
@@ -26198,8 +26541,8 @@ class Toast {
                 [`divider-${variant}`]: true,
             } }), variant === "neutral" ? (hAsync("slot", { name: "neutral-icon" })) : (hAsync("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), hAsync("div", { class: {
                 ["toast-content"]: true,
-                ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-            } }, hAsync("div", { class: "toast-message" }, hAsync("ic-typography", { variant: "subtitle-large" }, visible && hAsync("h5", null, heading)), message && (hAsync("ic-typography", { variant: "body" }, visible && hAsync("p", null, message)))), isSlotUsed(this.el, "action") && (hAsync("div", { class: "toast-action-container" }, hAsync("slot", { name: "action" })))), !isManual ? (hAsync("ic-loading-indicator", { class: "toast-dismiss-timer", appearance: "light", size: "icon", progress: this.timerProgress })) : (hAsync("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", appearance: IcThemeForegroundEnum$1.Light, "aria-label": dismissButtonAriaLabel })))));
+                ["no-icon"]: variant === "neutral" && !isSlotUsed$1(this.el, "neutral-icon"),
+            } }, hAsync("div", { class: "toast-message" }, hAsync("ic-typography", { variant: "subtitle-large" }, visible && hAsync("h5", null, heading)), message && (hAsync("ic-typography", { variant: "body" }, visible && hAsync("p", null, message)))), isSlotUsed$1(this.el, "action") && (hAsync("div", { class: "toast-action-container" }, hAsync("slot", { name: "action" })))), !isManual ? (hAsync("ic-loading-indicator", { class: "toast-dismiss-timer", appearance: "light", size: "icon", progress: this.timerProgress })) : (hAsync("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", appearance: IcThemeForegroundEnum$1.Light, "aria-label": dismissButtonAriaLabel })))));
     }
     get el() { return getElement(this); }
     static get style() { return icToastCss; }
@@ -26345,7 +26688,7 @@ class ToggleButton {
                 ["icon"]: this.variant === "icon",
                 [`${this.size}`]: true,
                 ["loading"]: this.loading,
-            }, onFocus: this.handleFocus }, hAsync("ic-button", { "aria-pressed": this.toggleChecked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.toggleChecked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, hAsync("slot", null), isSlotUsed(this.el, "icon") && (hAsync("slot", { name: "icon", slot: `${this.iconPlacement ? `${this.iconPlacement}-icon` : "icon"}` })), isSlotUsed(this.el, "badge") && (hAsync("slot", { name: "badge", slot: "badge" })))));
+            }, onFocus: this.handleFocus }, hAsync("ic-button", { "aria-pressed": this.toggleChecked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.toggleChecked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, hAsync("slot", null), isSlotUsed$1(this.el, "icon") && (hAsync("slot", { name: "icon", slot: `${this.iconPlacement ? `${this.iconPlacement}-icon` : "icon"}` })), isSlotUsed$1(this.el, "badge") && (hAsync("slot", { name: "badge", slot: "badge" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -26566,7 +26909,7 @@ class ToggleButtonGroup {
     }; }
 }
 
-const icTooltipCss = "/*!@html*/html.sc-ic-tooltip{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-tooltip{margin:0}/*!@main*/main.sc-ic-tooltip{display:block}/*!@h1*/h1.sc-ic-tooltip{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-tooltip{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-tooltip{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-tooltip{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-tooltip{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-tooltip,strong.sc-ic-tooltip{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-tooltip,kbd.sc-ic-tooltip,samp.sc-ic-tooltip{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-tooltip{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-tooltip,sup.sc-ic-tooltip{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-tooltip{bottom:-0.25em}/*!@sup*/sup.sc-ic-tooltip{top:-0.5em}/*!@img*/img.sc-ic-tooltip{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-tooltip,input.sc-ic-tooltip,optgroup.sc-ic-tooltip,select.sc-ic-tooltip,textarea.sc-ic-tooltip{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-tooltip,input.sc-ic-tooltip{overflow:visible}/*!@button,\nselect*/button.sc-ic-tooltip,select.sc-ic-tooltip{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-tooltip,[type=\"button\"].sc-ic-tooltip,[type=\"reset\"].sc-ic-tooltip,[type=\"submit\"].sc-ic-tooltip{-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-tooltip::-moz-focus-inner,[type=\"button\"].sc-ic-tooltip::-moz-focus-inner,[type=\"reset\"].sc-ic-tooltip::-moz-focus-inner,[type=\"submit\"].sc-ic-tooltip::-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-tooltip:-moz-focusring,[type=\"button\"].sc-ic-tooltip:-moz-focusring,[type=\"reset\"].sc-ic-tooltip:-moz-focusring,[type=\"submit\"].sc-ic-tooltip:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-tooltip{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-tooltip{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-tooltip{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-tooltip{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-tooltip,[type=\"radio\"].sc-ic-tooltip{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-tooltip::-webkit-inner-spin-button,[type=\"number\"].sc-ic-tooltip::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-tooltip{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-tooltip::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-tooltip::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-tooltip{display:block}/*!@summary*/summary.sc-ic-tooltip{display:list-item}/*!@template*/template.sc-ic-tooltip{display:none}/*!@[hidden]*/[hidden].sc-ic-tooltip{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-tooltip,body.sc-ic-tooltip,div.sc-ic-tooltip,span.sc-ic-tooltip,applet.sc-ic-tooltip,object.sc-ic-tooltip,iframe.sc-ic-tooltip,h1.sc-ic-tooltip,h2.sc-ic-tooltip,h3.sc-ic-tooltip,h4.sc-ic-tooltip,h5.sc-ic-tooltip,h6.sc-ic-tooltip,p.sc-ic-tooltip,blockquote.sc-ic-tooltip,pre.sc-ic-tooltip,a.sc-ic-tooltip,abbr.sc-ic-tooltip,acronym.sc-ic-tooltip,address.sc-ic-tooltip,big.sc-ic-tooltip,cite.sc-ic-tooltip,code.sc-ic-tooltip,del.sc-ic-tooltip,dfn.sc-ic-tooltip,em.sc-ic-tooltip,img.sc-ic-tooltip,ins.sc-ic-tooltip,kbd.sc-ic-tooltip,q.sc-ic-tooltip,s.sc-ic-tooltip,samp.sc-ic-tooltip,small.sc-ic-tooltip,strike.sc-ic-tooltip,strong.sc-ic-tooltip,sub.sc-ic-tooltip,sup.sc-ic-tooltip,tt.sc-ic-tooltip,var.sc-ic-tooltip,b.sc-ic-tooltip,u.sc-ic-tooltip,i.sc-ic-tooltip,center.sc-ic-tooltip,dl.sc-ic-tooltip,dt.sc-ic-tooltip,dd.sc-ic-tooltip,ol.sc-ic-tooltip,ul.sc-ic-tooltip,li.sc-ic-tooltip,fieldset.sc-ic-tooltip,form.sc-ic-tooltip,label.sc-ic-tooltip,legend.sc-ic-tooltip,table.sc-ic-tooltip,caption.sc-ic-tooltip,tbody.sc-ic-tooltip,tfoot.sc-ic-tooltip,thead.sc-ic-tooltip,tr.sc-ic-tooltip,th.sc-ic-tooltip,td.sc-ic-tooltip,article.sc-ic-tooltip,aside.sc-ic-tooltip,canvas.sc-ic-tooltip,details.sc-ic-tooltip,embed.sc-ic-tooltip,figure.sc-ic-tooltip,figcaption.sc-ic-tooltip,footer.sc-ic-tooltip,header.sc-ic-tooltip,hgroup.sc-ic-tooltip,menu.sc-ic-tooltip,nav.sc-ic-tooltip,output.sc-ic-tooltip,ruby.sc-ic-tooltip,section.sc-ic-tooltip,summary.sc-ic-tooltip,time.sc-ic-tooltip,mark.sc-ic-tooltip,audio.sc-ic-tooltip,video.sc-ic-tooltip{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.ic-tooltip) .ic-tooltip-container*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip{background-color:var(--ic-architectural-800);color:#ffff;text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-architectural-40);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay)}/*!@:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n  .ic-tooltip-container,\n:host(.tooltip-disabled) .ic-tooltip-container*/.tooltip-navigation-item.sc-ic-tooltip-h:not(.tooltip-navigation-item-side-nav-collapsed) .ic-tooltip-container.sc-ic-tooltip,.tooltip-disabled.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip{display:none !important}/*!@:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n  .ic-tooltip-container[data-show]*/.tooltip-long-label-navigation-item-side-nav-expanded.sc-ic-tooltip-h .ic-tooltip-container[data-show].sc-ic-tooltip{display:block !important}/*!@:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip,.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip::before{position:absolute;background:inherit}/*!@:host(.ic-tooltip) .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}/*!@:host(.ic-tooltip) .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-architectural-40);width:100%;height:100%}/*!@:host(.ic-tooltip) .ic-tooltip-container[data-show]*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-show].sc-ic-tooltip{display:block}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"top\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip{height:var(--ic-space-xxxs)}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"top\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"bottom\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"bottom\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"left\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"left\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"right\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"right\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}/*!@:host(.on-dialog) .ic-tooltip-container*/.on-dialog.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip{transform:translate(\n    var(--tooltip-translate-x),\n    var(--tooltip-translate-y)\n  ) !important}@media screen and (max-width: 576px){/*!@:host(.ic-tooltip) .ic-tooltip-container*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip{max-width:18.875rem}}@media (forced-colors: active){/*!@:host(.ic-tooltip) .ic-tooltip-container,\n  :host(.ic-tooltip) .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip,.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip::before{border:var(--ic-hc-border)}}";
+const icTooltipCss = "/*!@html*/html.sc-ic-tooltip{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-tooltip{margin:0}/*!@main*/main.sc-ic-tooltip{display:block}/*!@h1*/h1.sc-ic-tooltip{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-tooltip{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-tooltip{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-tooltip{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-tooltip{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-tooltip,strong.sc-ic-tooltip{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-tooltip,kbd.sc-ic-tooltip,samp.sc-ic-tooltip{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-tooltip{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-tooltip,sup.sc-ic-tooltip{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-tooltip{bottom:-0.25em}/*!@sup*/sup.sc-ic-tooltip{top:-0.5em}/*!@img*/img.sc-ic-tooltip{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-tooltip,input.sc-ic-tooltip,optgroup.sc-ic-tooltip,select.sc-ic-tooltip,textarea.sc-ic-tooltip{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-tooltip,input.sc-ic-tooltip{overflow:visible}/*!@button,\nselect*/button.sc-ic-tooltip,select.sc-ic-tooltip{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-tooltip,[type=\"button\"].sc-ic-tooltip,[type=\"reset\"].sc-ic-tooltip,[type=\"submit\"].sc-ic-tooltip{-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-tooltip::-moz-focus-inner,[type=\"button\"].sc-ic-tooltip::-moz-focus-inner,[type=\"reset\"].sc-ic-tooltip::-moz-focus-inner,[type=\"submit\"].sc-ic-tooltip::-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-tooltip:-moz-focusring,[type=\"button\"].sc-ic-tooltip:-moz-focusring,[type=\"reset\"].sc-ic-tooltip:-moz-focusring,[type=\"submit\"].sc-ic-tooltip:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-tooltip{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-tooltip{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-tooltip{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-tooltip{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-tooltip,[type=\"radio\"].sc-ic-tooltip{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-tooltip::-webkit-inner-spin-button,[type=\"number\"].sc-ic-tooltip::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-tooltip{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-tooltip::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-tooltip::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-tooltip{display:block}/*!@summary*/summary.sc-ic-tooltip{display:list-item}/*!@template*/template.sc-ic-tooltip{display:none}/*!@[hidden]*/[hidden].sc-ic-tooltip{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-tooltip,body.sc-ic-tooltip,div.sc-ic-tooltip,span.sc-ic-tooltip,applet.sc-ic-tooltip,object.sc-ic-tooltip,iframe.sc-ic-tooltip,h1.sc-ic-tooltip,h2.sc-ic-tooltip,h3.sc-ic-tooltip,h4.sc-ic-tooltip,h5.sc-ic-tooltip,h6.sc-ic-tooltip,p.sc-ic-tooltip,blockquote.sc-ic-tooltip,pre.sc-ic-tooltip,a.sc-ic-tooltip,abbr.sc-ic-tooltip,acronym.sc-ic-tooltip,address.sc-ic-tooltip,big.sc-ic-tooltip,cite.sc-ic-tooltip,code.sc-ic-tooltip,del.sc-ic-tooltip,dfn.sc-ic-tooltip,em.sc-ic-tooltip,img.sc-ic-tooltip,ins.sc-ic-tooltip,kbd.sc-ic-tooltip,q.sc-ic-tooltip,s.sc-ic-tooltip,samp.sc-ic-tooltip,small.sc-ic-tooltip,strike.sc-ic-tooltip,strong.sc-ic-tooltip,sub.sc-ic-tooltip,sup.sc-ic-tooltip,tt.sc-ic-tooltip,var.sc-ic-tooltip,b.sc-ic-tooltip,u.sc-ic-tooltip,i.sc-ic-tooltip,center.sc-ic-tooltip,dl.sc-ic-tooltip,dt.sc-ic-tooltip,dd.sc-ic-tooltip,ol.sc-ic-tooltip,ul.sc-ic-tooltip,li.sc-ic-tooltip,fieldset.sc-ic-tooltip,form.sc-ic-tooltip,label.sc-ic-tooltip,legend.sc-ic-tooltip,table.sc-ic-tooltip,caption.sc-ic-tooltip,tbody.sc-ic-tooltip,tfoot.sc-ic-tooltip,thead.sc-ic-tooltip,tr.sc-ic-tooltip,th.sc-ic-tooltip,td.sc-ic-tooltip,article.sc-ic-tooltip,aside.sc-ic-tooltip,canvas.sc-ic-tooltip,details.sc-ic-tooltip,embed.sc-ic-tooltip,figure.sc-ic-tooltip,figcaption.sc-ic-tooltip,footer.sc-ic-tooltip,header.sc-ic-tooltip,hgroup.sc-ic-tooltip,menu.sc-ic-tooltip,nav.sc-ic-tooltip,output.sc-ic-tooltip,ruby.sc-ic-tooltip,section.sc-ic-tooltip,summary.sc-ic-tooltip,time.sc-ic-tooltip,mark.sc-ic-tooltip,audio.sc-ic-tooltip,video.sc-ic-tooltip{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host(.ic-tooltip)*/.ic-tooltip.sc-ic-tooltip-h{width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content}/*!@:host(.ic-tooltip) .ic-tooltip-container*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip{background-color:var(--ic-architectural-800);color:#ffff;text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-architectural-40);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay)}/*!@:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n  .ic-tooltip-container,\n:host(.tooltip-disabled) .ic-tooltip-container*/.tooltip-navigation-item.sc-ic-tooltip-h:not(.tooltip-navigation-item-side-nav-collapsed) .ic-tooltip-container.sc-ic-tooltip,.tooltip-disabled.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip{display:none !important}/*!@:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n  .ic-tooltip-container[data-show]*/.tooltip-long-label-navigation-item-side-nav-expanded.sc-ic-tooltip-h .ic-tooltip-container[data-show].sc-ic-tooltip{display:block !important}/*!@:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip,.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip::before{position:absolute;background:inherit}/*!@:host(.ic-tooltip) .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}/*!@:host(.ic-tooltip) .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-architectural-40);width:100%;height:100%}/*!@:host(.ic-tooltip) .ic-tooltip-container[data-show]*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-show].sc-ic-tooltip{display:block}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"top\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip{height:var(--ic-space-xxxs)}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"top\"]\n  > .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"top\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"bottom\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n  > .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"bottom\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"left\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"left\"]\n  > .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"left\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"right\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}/*!@:host(.ic-tooltip)\n  .ic-tooltip-container[data-popper-placement^=\"right\"]\n  > .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container[data-popper-placement^=\"right\"].sc-ic-tooltip>.ic-tooltip-arrow.sc-ic-tooltip::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}/*!@:host(.on-dialog) .ic-tooltip-container*/.on-dialog.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip{transform:translate(\n    var(--tooltip-translate-x),\n    var(--tooltip-translate-y)\n  ) !important}@media screen and (max-width: 576px){/*!@:host(.ic-tooltip) .ic-tooltip-container*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip{max-width:18.875rem}}@media (forced-colors: active){/*!@:host(.ic-tooltip) .ic-tooltip-container,\n  :host(.ic-tooltip) .ic-tooltip-arrow::before*/.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-container.sc-ic-tooltip,.ic-tooltip.sc-ic-tooltip-h .ic-tooltip-arrow.sc-ic-tooltip::before{border:var(--ic-hc-border)}}";
 
 class Tooltip {
     constructor(hostRef) {
@@ -26810,7 +27153,7 @@ class TopNavigation {
         this.searchBar = null;
         this.initialiseSearchBar = () => {
             if (this.hasSearchSlotContent) {
-                const slot = getSlot(this.el, "search");
+                const slot = getSlot$1(this.el, "search");
                 if ((slot === null || slot === void 0 ? void 0 : slot.tagName) === "IC-SEARCH-BAR") {
                     this.searchBar = slot;
                 }
@@ -26889,23 +27232,23 @@ class TopNavigation {
         }
     }
     componentWillLoad() {
-        this.hasAppIcon = isSlotUsed(this.el, "app-icon");
-        this.hasNavigation = isSlotUsed(this.el, "navigation");
-        this.hasIconButtons = isSlotUsed(this.el, "buttons");
-        this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+        this.hasAppIcon = isSlotUsed$1(this.el, "app-icon");
+        this.hasNavigation = isSlotUsed$1(this.el, "navigation");
+        this.hasIconButtons = isSlotUsed$1(this.el, "buttons");
+        this.hasSearchSlotContent = isSlotUsed$1(this.el, "search");
         this.deviceSize = getCurrentDeviceSize();
         this.initialiseSearchBar();
     }
     componentDidLoad() {
         checkResizeObserver$1(this.runResizeObserver);
-        !isSlotUsed(this.el, "app-title") &&
+        !isSlotUsed$1(this.el, "app-title") &&
             onComponentRequiredPropUndefined$1([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
     }
     componentWillRender() {
-        this.hasNavigation = isSlotUsed(this.el, "navigation");
-        this.hasSearchSlotContent = isSlotUsed(this.el, "search");
-        this.hasIconButtons = isSlotUsed(this.el, "buttons");
-        this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+        this.hasNavigation = isSlotUsed$1(this.el, "navigation");
+        this.hasSearchSlotContent = isSlotUsed$1(this.el, "search");
+        this.hasIconButtons = isSlotUsed$1(this.el, "buttons");
+        this.hasAppIcon = isSlotUsed$1(this.el, "app-icon");
     }
     navBarMenuCloseHandler() {
         this.showNavMenu(false);
@@ -26967,8 +27310,8 @@ class TopNavigation {
             : "h3";
         const mobileSearchButtonTitle = `${mobileSearchBarVisible ? "Hide" : "Show"} search`;
         const menuSize = deviceSize <= DEVICE_SIZES.S ? "small" : "default";
-        const shortAppTitleSlot = isSlotUsed(el, "short-app-title");
-        const hasAppTitleSlot = isSlotUsed(el, "app-title");
+        const shortAppTitleSlot = isSlotUsed$1(el, "short-app-title");
+        const hasAppTitleSlot = isSlotUsed$1(el, "app-title");
         const Component = hasAppTitleSlot ? "div" : "a";
         const attrs = Component == "a" && {
             href: href,
@@ -27015,7 +27358,7 @@ 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:var(--ic-space-xxs) solid !important;margin-bottom:calc(-1 * var(--ic-space-xxs)) !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-decoration-thickness: 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}}";
+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-decoration-thickness: 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) {
@@ -27176,6 +27519,7 @@ registerComponents([
   DataEntity,
   DataRow,
   DataTable,
+  DataTableTitleBar,
   DateInput,
   DatePicker,
   Dialog,