@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.14

package/hydrate/index.mjs

@@ -3476,21 +3476,21 @@ const getOptionsWithoutGroupTitlesCount = (options) => {
     return optionsWithoutGroupTitles.length;
 };
 const deviceSizeMatches$1 = (size) => window.matchMedia(`(max-width: ${size}px)`).matches;
-const getCurrentDeviceSize = () => {
-    if (deviceSizeMatches$1(DEVICE_SIZES.S)) {
-        return DEVICE_SIZES.S;
+const getCurrentDeviceSize$1 = () => {
+    if (deviceSizeMatches$1(DEVICE_SIZES$1.S)) {
+        return DEVICE_SIZES$1.S;
     }
-    if (deviceSizeMatches$1(DEVICE_SIZES.M)) {
-        return DEVICE_SIZES.M;
+    if (deviceSizeMatches$1(DEVICE_SIZES$1.M)) {
+        return DEVICE_SIZES$1.M;
     }
-    if (deviceSizeMatches$1(DEVICE_SIZES.L)) {
-        return DEVICE_SIZES.L;
+    if (deviceSizeMatches$1(DEVICE_SIZES$1.L)) {
+        return DEVICE_SIZES$1.L;
     }
-    if (deviceSizeMatches$1(DEVICE_SIZES.XL)) {
-        return DEVICE_SIZES.XL;
+    if (deviceSizeMatches$1(DEVICE_SIZES$1.XL)) {
+        return DEVICE_SIZES$1.XL;
     }
     //fallback needed as all of above get initialised to 0 in jest tests
-    return DEVICE_SIZES.UNDEFINED;
+    return DEVICE_SIZES$1.UNDEFINED;
 };
 const getCssProperty$1 = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
 /**
@@ -3564,7 +3564,7 @@ const getNavItemParentDetails = ({ parentElement, }) => {
     }
     return navType;
 };
-const DEVICE_SIZES = {
+const DEVICE_SIZES$1 = {
     XS: Number(getCssProperty$1("--ic-breakpoint-xs").replace("px", "")), // 0
     S: Number(getCssProperty$1("--ic-breakpoint-sm").replace("px", "")), // 576
     M: Number(getCssProperty$1("--ic-breakpoint-md").replace("px", "")), // 768
@@ -4613,7 +4613,7 @@ class BreadcrumbGroup {
         this.IC_BREADCRUMB = "ic-breadcrumb";
         this.resizeObserver = null;
         this.SHOW_BACK_ICON = "show-back-icon";
-        this.deviceSize = DEVICE_SIZES.XL;
+        this.deviceSize = DEVICE_SIZES$1.XL;
         this.expandedBreadcrumbs = false;
         /**
          * If `true`, display only a single breadcrumb for the parent page with a back icon.
@@ -4766,7 +4766,7 @@ class BreadcrumbGroup {
         this.resizeObserverCallback = (currSize) => {
             if (currSize !== this.deviceSize) {
                 this.deviceSize = currSize;
-                if (this.deviceSize <= DEVICE_SIZES.S) {
+                if (this.deviceSize <= DEVICE_SIZES$1.S) {
                     this.el.setAttribute("back-breadcrumb-only", "true");
                     if (this.collapsed) {
                         this.setLastParentCollapsedBackBreadcrumb();
@@ -4794,7 +4794,7 @@ class BreadcrumbGroup {
         };
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
-                const currSize = getCurrentDeviceSize();
+                const currSize = getCurrentDeviceSize$1();
                 this.resizeObserverCallback(currSize);
             });
             this.resizeObserver.observe(this.el);
@@ -4823,7 +4823,7 @@ class BreadcrumbGroup {
             checkResizeObserver$1(this.runResizeObserver);
         }
         if (this.collapsed && allBreadcrumbs.length > 2) {
-            if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
+            if (getCurrentDeviceSize$1() === DEVICE_SIZES$1.S) {
                 this.setLastParentCollapsedBackBreadcrumb();
             }
             else {
@@ -4873,10 +4873,10 @@ var arrowDropdown$1 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="non
     <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
 </svg>`;
 
-const icButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;position:relative;--icon-width:100%;--icon-height:100%}.button,::slotted(a){font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}:host(.with-badge) .button{border-radius:0.2188rem}.button:hover,::slotted(a:hover){cursor:pointer}.button:focus,::slotted(a:focus){box-shadow:var(--ic-border-focus)}.button:focus-visible,::slotted(a:focus-visible){outline:var(--ic-hc-focus-outline)}:host(.ic-button-disabled),:host(.ic-button-disabled) .button,:host(.ic-button-disabled) ::slotted(a),:host(.ic-button-loading),:host(.ic-button-loading) .button{pointer-events:none}:host(.top-icon) .button{flex-direction:column;--height:fit-content}:host(.top-icon) .button .icon-container{margin-right:0}:host(.ic-button-variant-primary) .button,:host(.ic-button-variant-icon-primary) .button{color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background)}:host(.ic-button-variant-primary) ::slotted(a),:host(.ic-button-variant-icon-primary) ::slotted(a){color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background) !important}:host(.ic-button-variant-primary) .button:hover,:host(.ic-button-variant-icon-primary) .button:hover{background-color:var(--ic-button-primary-background-hover)}:host(.ic-button-variant-primary) ::slotted(a:hover),:host(.ic-button-variant-icon-primary) ::slotted(a:hover){background-color:var(--ic-button-primary-background-hover) !important}:host(.ic-button-variant-primary.ic-button-loading) .button,:host(.ic-button-variant-primary) .button:active,:host(.ic-button-variant-icon-primary.ic-button-loading) .button,:host(.ic-button-variant-icon-primary) .button:active{color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background-pressed);--button-loading-inner-color:var(--ic-button-primary-text);--button-loading-outer-color:var(--ic-button-primary-background-pressed)}:host(.ic-button-variant-primary) ::slotted(a:active),:host(.ic-button-variant-icon-primary) ::slotted(a:active){background-color:var(--ic-button-primary-background-pressed) !important}:host(.ic-button-variant-primary.ic-button-disabled) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled) .button{background:var(--ic-button-primary-background-disabled);color:var(--ic-button-primary-text-disabled)}:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a){background:var(--ic-button-primary-background-disabled) !important;color:var(--ic-button-primary-text-disabled) !important}:host(.ic-button-variant-primary.monochrome) .button,:host(.ic-button-variant-icon-primary.monochrome) .button{color:var(--ic-button-primary-text-monochrome);background-color:var(--ic-button-primary-background-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a){background-color:var(--ic-button-primary-background-monochrome) !important}:host(.ic-button-variant-primary.monochrome) .button:hover,:host(.ic-button-variant-icon-primary.monochrome) .button:hover{background-color:var(--ic-button-primary-background-hover-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-primary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-primary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-primary.monochrome) .button:active,:host(.ic-button-variant-icon-primary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-primary.monochrome) .button:active{background-color:var(--ic-button-primary-background-pressed-monochrome);--button-loading-inner-color:var(--ic-button-primary-text-monochrome);--button-loading-outer-color:var(--ic-button-primary-background-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-primary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-primary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) .button{background-color:var(--ic-button-primary-background-disabled-monochrome);color:var(--ic-button-primary-text-disabled-monochrome)}:host(.ic-button-variant-primary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) ::slotted(a){background-color:var(\n    --ic-button-primary-background-disabled-monochrome\n  ) !important}:host(.ic-button-variant-secondary) .button,:host(.ic-button-variant-icon-secondary) .button{border:var(--ic-border-width) solid var(--ic-button-secondary-border);color:var(--ic-button-secondary-text)}:host(.ic-button-variant-secondary) ::slotted(a),:host(.ic-button-variant-icon-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--ic-button-secondary-border) !important;color:var(--ic-button-secondary-text) !important}:host(.ic-button-variant-secondary) .button:hover,:host(.ic-button-variant-icon-secondary) .button:hover{background-color:var(--ic-button-secondary-background-hover-active);border-color:var(--ic-button-secondary-border-hover);color:var(--ic-button-secondary-text-hover-active)}:host(.ic-button-variant-secondary) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-hover-active\n  ) !important}:host(.ic-button-variant-secondary) .button:active,:host(.ic-button-variant-icon-secondary) .button:active{border-color:var(--ic-button-secondary-border-pressed);background-color:var(--ic-button-secondary-background-pressed-active);color:var(--ic-button-secondary-text-pressed-active)}:host(.ic-button-variant-secondary) ::slotted(a:active),:host(.ic-button-variant-icon-secondary) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-pressed-active\n  ) !important}:host(.ic-button-variant-secondary.ic-button-loading) .button,:host(.ic-button-variant-icon-secondary.ic-button-loading) .button{border-color:var(--ic-button-secondary-border-pressed);background-color:var(\n    --loading-button-background,\n    var(--ic-button-secondary-background-pressed-active)\n  ) !important;color:var(--ic-button-secondary-text-pressed-active);--button-loading-inner-color:var(--ic-button-secondary-text-pressed-active);--button-loading-outer-color:var(--ic-button-secondary-background-pressed)}:host(.ic-button-variant-secondary.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button{border-color:var(--ic-button-secondary-border-disabled);color:var(--ic-button-secondary-text-disabled);background:none}:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a){background:none !important}:host(.ic-button-variant-secondary.background) .button,:host(.ic-button-variant-icon-secondary.background) .button{background-color:var(--ic-button-secondary-background-non-transparent)}:host(.ic-button-variant-secondary.background) ::slotted(a),:host(.ic-button-variant-icon-secondary.background) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent\n  ) !important}:host(.ic-button-variant-secondary.background.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-disabled\n  )}:host(.ic-button-variant-secondary.background.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-disabled\n  ) !important}:host(.ic-button-variant-secondary.background) .button:hover,:host(.ic-button-variant-icon-secondary.background) .button:hover{background-color:var(--ic-button-secondary-background-non-transparent-hover)}:host(.ic-button-variant-secondary.background) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.background) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-non-transparent-hover\n  ) !important}:host(.ic-button-variant-secondary.background) .button:active,:host(.ic-button-variant-icon-secondary.background) .button:active{background-color:var(\n    --ic-button-secondary-background-non-transparent-active\n  )}:host(.ic-button-variant-secondary.background) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.background) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-non-transparent-active\n  ) !important}:host(.ic-button-variant-secondary.monochrome) .button,:host(.ic-button-variant-icon-secondary.monochrome) .button{background-color:none;border:var(--ic-border-width) solid\n    var(--ic-button-secondary-border-monochrome);color:var(--ic-button-secondary-text-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a){background-color:none !important}:host(.ic-button-variant-secondary.monochrome) .button:hover,:host(.ic-button-variant-icon-secondary.monochrome) .button:hover{background-color:var(--ic-button-secondary-background-hover-monochrome);border-color:var(--ic-button-secondary-border-hover-monochrome);color:var(--ic-button-secondary-text-hover-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-secondary.monochrome) .button:active,:host(.ic-button-variant-icon-secondary.monochrome) .button:active{background-color:var(--ic-button-secondary-background-pressed-monochrome);border-color:var(--ic-button-secondary-border-pressed-monochrome);color:var(--ic-button-secondary-text-pressed-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-secondary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-secondary.ic-button-loading.monochrome) .button{background-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important;border-color:var(--ic-button-secondary-border-pressed-monochrome);color:var(--ic-button-secondary-text-pressed-monochrome);--button-loading-inner-color:var(\n    --ic-button-secondary-text-pressed-monochrome\n  );--button-loading-outer-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  )}:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) .button{background:none;border-color:var(--ic-button-secondary-border-disabled-monochrome);color:var(--ic-button-secondary-text-disabled-monochrome)}:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) ::slotted(a){background:none !important}:host(.ic-button-variant-secondary.background.monochrome) .button,:host(.ic-button-variant-icon-secondary.background.monochrome) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome\n  );color:var(--ic-button-primary-text)}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-disabled\n  );color:var(--ic-button-secondary-text-disabled-monochrome)}:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-disabled\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome) .button:hover,:host(.ic-button-variant-icon-secondary.background.monochrome) .button:hover{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  )}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome) .button:active,:host(.ic-button-variant-icon-secondary.background.monochrome) .button:active{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  )}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  ) !important}:host(.ic-button-variant-tertiary) .button,:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-tertiary) ::slotted(a),:host(.ic-button-variant-icon-tertiary) ::slotted(a){color:var(--ic-button-tertiary-text-active)}:host(.ic-button-variant-tertiary) .button:hover,:host(.ic-button-variant-icon-tertiary) .button:hover{background-color:var(--ic-button-tertiary-background-hover-active);color:var(--ic-button-tertiary-text-hover-active)}:host(.ic-button-variant-tertiary) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover){background-color:var(\n    --ic-button-tertiary-background-hover-active\n  ) !important}:host(.ic-button-variant-tertiary) .button:active,:host(.ic-button-variant-tertiary.ic-button-loading) .button,:host(.ic-button-variant-icon-tertiary) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button{background-color:var(--ic-button-tertiary-background-pressed-active);color:var(--ic-button-tertiary-text-pressed-active);--button-loading-inner-color:var(--ic-button-tertiary-text-pressed-active);--button-loading-outer-color:var(--ic-button-tertiary-background-pressed)}:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary) ::slotted(a:active){background-color:var(\n    --ic-button-tertiary-background-pressed-active\n  ) !important}:host(.ic-button-variant-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button{color:var(--ic-button-tertiary-text-disabled);background:none}:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a){background:none !important}:host(.ic-button-variant-tertiary.monochrome) .button,:host(.ic-button-variant-tertiary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-tertiary.monochrome) .button,:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a){color:var(--ic-button-tertiary-text-monochrome)}:host(.ic-button-variant-tertiary.monochrome) .button:hover,:host(.ic-button-variant-icon-tertiary.monochrome) .button:hover{background-color:var(--ic-button-tertiary-background-hover-monochrome);color:var(--ic-button-tertiary-text-hover-monochrome)}:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-tertiary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-tertiary.monochrome) .button:active,:host(.ic-button-variant-tertiary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-tertiary.monochrome) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-loading.monochrome) .button{background-color:var(--ic-button-tertiary-background-pressed-monochrome);color:var(--ic-button-tertiary-text-pressed-monochrome);--button-loading-inner-color:var(\n    --ic-button-tertiary-text-pressed-monochrome\n  );--button-loading-outer-color:var(\n    --ic-button-tertiary-background-pressed-monochrome\n  )}:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-tertiary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) .button{color:var(--ic-button-tertiary-text-disabled-monochrome);background:none}:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) ::slotted(a){background:none !important}:host(.ic-button-variant-destructive) .button,:host(.ic-button-variant-icon-destructive) .button{color:var(--ic-button-destructive-text);background-color:var(--ic-button-destructive-background);text-transform:uppercase}:host(.ic-button-variant-destructive) ::slotted(a),:host(.ic-button-variant-icon-destructive) ::slotted(a){color:var(--ic-button-destructive-text) !important;background-color:var(--ic-button-destructive-background) !important;text-transform:uppercase !important}:host(.ic-button-variant-destructive) .button:hover,:host(.ic-button-variant-icon-destructive) .button:hover{background-color:var(--ic-button-destructive-background-hover)}:host(.ic-button-variant-destructive) ::slotted(a:hover),:host(.ic-button-variant-icon-destructive) ::slotted(a:hover){background-color:var(--ic-button-destructive-background-hover) !important}:host(.ic-button-variant-destructive) .button:active,:host(.ic-button-variant-destructive.ic-button-loading) .button,:host(.ic-button-variant-icon-destructive.ic-button-loading) .button{color:var(--ic-button-primary-text);background-color:var(--ic-button-destructive-background-pressed);--button-loading-inner-color:var(--ic-button-primary-text);--button-loading-outer-color:var(--ic-button-destructive-background-pressed)}:host(.ic-button-variant-destructive) ::slotted(a:active),:host(.ic-button-variant-icon-destructive) ::slotted(a:active){background-color:var(--ic-button-destructive-background-pressed) !important}:host(.ic-button-variant-destructive.ic-button-disabled) .button,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button{background-color:var(--ic-button-destructive-background-disabled);color:var(--ic-button-destructive-text-disabled)}:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a){background-color:var(--ic-button-destructive-background-disabled) !important}:host(.ic-button-variant-icon) .button{color:var(--ic-button-icon-color);background-color:var(--ic-button-icon-color-background);min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) ::slotted(a){color:var(--ic-button-icon-color);background-color:var(--ic-button-icon-color-background) !important;min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon) .button:hover{color:var(--ic-button-icon-color-hover);background-color:var(--ic-button-icon-color-background-hover)}:host(.ic-button-variant-icon) ::slotted(a:hover){color:var(--ic-button-icon-color-hover);background-color:var(--ic-button-icon-color-background-hover) !important}:host(.ic-button-variant-icon) .button:active:not(:focus),:host(.ic-button-variant-icon.ic-button-loading) .button{color:var(--ic-button-icon-color-active);background-color:var(--ic-button-icon-color-background-acti)}:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)){color:var(--ic-button-icon-color-active);background-color:var(--ic-button-icon-color-background-acti) !important}:host(.ic-button-variant-icon.ic-button-disabled) .button{color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none !important}:host(.ic-button-variant-icon-primary) .button,:host(.ic-button-variant-icon-primary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-primary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon.monochrome) ::slotted(a),:host(.ic-button-variant-icon.monochrome) ::slotted(svg){color:var(--ic-button-icon-monochrome)}:host(.ic-button-variant-icon-secondary) .button,:host(.ic-button-variant-icon-secondary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-secondary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-icon-tertiary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-tertiary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-destructive) .button,:host(.ic-button-variant-icon-destructive) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-destructive) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-size-medium) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.ic-button-size-medium) ::slotted(a){height:var(--height, 2.5rem) !important;padding:var(--ic-space-xs) var(--ic-space-md) !important}:host(.ic-button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.ic-button-size-small) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:var(--ic-space-xxs) var(--ic-space-md) !important}:host(.ic-button-size-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}:host(.ic-button-size-large) ::slotted(a){height:var(--height, var(--ic-space-xxl)) !important;padding:var(--ic-space-sm) var(--ic-space-md) !important}:host(.ic-button-size-medium.ic-button-variant-icon) .button,:host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;width:var(--ic-space-xl) !important;padding:0.375rem !important}:host(.ic-button-size-small.ic-button-variant-icon) .button,:host(.ic-button-size-small.ic-button-variant-icon-primary) .button,:host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-lg)) !important;width:var(--ic-space-lg) !important;padding:var(--ic-space-xxs) !important}:host(.ic-button-size-large.ic-button-variant-icon) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) .button,:host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){height:var(--height, 2.5rem) !important;width:2.5rem !important;padding:var(--ic-space-xs) !important}:host(.ic-button-full-width),:host(.ic-button-full-width) .button{width:100%}:host(.ic-button-full-width) ::slotted(a){width:100% !important}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--inner-color:var(--button-loading-inner-color);--outer-color:var(--button-loading-outer-color), transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}div.right-icon{margin-right:auto;margin-left:var(--ic-space-xs)}:host(.ic-button-full-width) .right-icon{margin-right:var(--ic-space-xs)}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.ic-button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem;color:var(--ic-atoms-input-search-button)}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem;color:var(--ic-atoms-input-search-button)}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button) .button:not(:active):focus ::slotted(svg){color:var(--ic-button-primary-text)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.ic-button-variant-icon) .button,:host(.ic-button-variant-icon) ::slotted(a){background-color:inherit;min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button,:host(.button-variant-icon) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs)}:host(.button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button:hover,:host(.button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon) ::slotted(a:active:not(:focus)),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.dismiss-icon) .button,:host(.clear-button) .button,:host(.dismiss-icon) ::slotted(a),:host(.clear-button) ::slotted(a){background-color:inherit;color:var(--ic-atoms-input-clear-button)}:host(.dismiss-icon) .button:hover,:host(.clear-button) .button:hover,:host(.dismiss-icon) ::slotted(a:hover),:host(.clear-button) ::slotted(a:hover){color:var(--ic-atoms-input-clear-button)}:host(.dismiss-icon),:host(.clear-button){color:var(--ic-atoms-input-clear-button);margin:0 var(--ic-space-xxs)}:host(.dismiss-icon) .button:focus,:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),:host(.clear-button) .button:not(:active):focus ::slotted(svg){background-color:var(--ic-atoms-input-clear-button-focus-inner);color:var(--ic-button-primary-text);}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem;color:var(--ic-top-navigation-icon-active)}:host(.popout-menu-button) .button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}:host .arrow-dropdown{margin-top:auto}:host .dropdown-expanded{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}:host(.dropdown-no-icon) .button{padding-right:var(--ic-space-xs)}slot[name=\"router-item\"]::slotted(a){pointer-events:all}::slotted(a){font-size:0.875rem !important;border:none !important;vertical-align:middle !important}:host(#menu-button.ic-theme-light){--ic-button-secondary-background-hover-monochrome:var(\n    --ic-action-dark-bg-hover\n  );--ic-button-secondary-background-pressed-monochrome:var(\n    --ic-action-dark-bg-pressed\n  );--ic-button-secondary-text-hover-monochrome:var(--ic-action-dark-hover);--ic-button-secondary-text-pressed-monochrome:var(--ic-action-dark-pressed);--ic-button-secondary-border-hover-monochrome:var(\n    --ic-color-border-neutral-hover-dark\n  );--ic-button-secondary-border-pressed-monochrome:var(\n    --ic-color-border-neutral-pressed-dark\n  )}:host(#menu-button.ic-theme-dark){--ic-button-secondary-background-hover-monochrome:var(\n    --ic-action-light-bg-hover\n  );--ic-button-secondary-background-pressed-monochrome:var(\n    --ic-action-light-bg-pressed\n  );--ic-button-secondary-text-hover-monochrome:var(--ic-action-light-hover);--ic-button-secondary-text-pressed-monochrome:var(--ic-action-light-pressed);--ic-button-secondary-border-hover-monochrome:var(\n    --ic-color-border-neutral-hover-light\n  );--ic-button-secondary-border-pressed-monochrome:var(\n    --ic-color-border-neutral-default\n  )}@media (forced-colors: active){.button,::slotted(a){border:0.125rem solid transparent !important}.search-submit-button ::slotted(a),.ic-button-variant-icon ::slotted(a),.clear-button ::slotted(a),.search-submit-button ::slotted(svg),.ic-button-variant-icon ::slotted(svg),.clear-button ::slotted(svg){color:HighlightText}:host(.ic-button-variant-icon.monochrome) ::slotted(a),:host(.ic-button-variant-icon.monochrome) ::slotted(svg){color:white}:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),:host(.clear-button) .button:not(:active):focus ::slotted(svg){color:white !important;background-color:inherit}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}";
+const icButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;position:relative;--icon-width:100%;--icon-height:100%}.button,::slotted(a){font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}:host(.with-badge) .button{border-radius:0.2188rem}.button:hover,::slotted(a:hover){cursor:pointer}.button:focus,::slotted(a:focus){box-shadow:var(--ic-border-focus)}.button:focus-visible,::slotted(a:focus-visible){outline:var(--ic-hc-focus-outline)}:host(.ic-button-disabled),:host(.ic-button-disabled) .button,:host(.ic-button-disabled) ::slotted(a),:host(.ic-button-loading),:host(.ic-button-loading) .button{pointer-events:none}:host(.top-icon) .button{flex-direction:column;--height:fit-content}:host(.top-icon) .button .icon-container{margin-right:0}:host(.ic-button-variant-primary) .button,:host(.ic-button-variant-icon-primary) .button{color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background)}:host(.ic-button-variant-primary) ::slotted(a),:host(.ic-button-variant-icon-primary) ::slotted(a){--ic-typography-color:var(--ic-button-primary-text);color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background) !important}:host(.ic-button-variant-primary) .button:hover,:host(.ic-button-variant-icon-primary) .button:hover{background-color:var(--ic-button-primary-background-hover)}:host(.ic-button-variant-primary) ::slotted(a:hover),:host(.ic-button-variant-icon-primary) ::slotted(a:hover){background-color:var(--ic-button-primary-background-hover) !important}:host(.ic-button-variant-primary.ic-button-loading) .button,:host(.ic-button-variant-primary) .button:active,:host(.ic-button-variant-icon-primary.ic-button-loading) .button,:host(.ic-button-variant-icon-primary) .button:active{color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background-pressed);--button-loading-inner-color:var(--ic-button-primary-text);--button-loading-outer-color:var(--ic-button-primary-background-pressed)}:host(.ic-button-variant-primary) ::slotted(a:active),:host(.ic-button-variant-icon-primary) ::slotted(a:active){background-color:var(--ic-button-primary-background-pressed) !important}:host(.ic-button-variant-primary.ic-button-disabled) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled) .button{background:var(--ic-button-primary-background-disabled);color:var(--ic-button-primary-text-disabled)}:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a){background:var(--ic-button-primary-background-disabled) !important;--ic-typography-color:var(--ic-button-primary-text-disabled) !important;color:var(--ic-button-primary-text-disabled) !important}:host(.ic-button-variant-primary.monochrome) .button,:host(.ic-button-variant-icon-primary.monochrome) .button{color:var(--ic-button-primary-text-monochrome);background-color:var(--ic-button-primary-background-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a){background-color:var(--ic-button-primary-background-monochrome) !important}:host(.ic-button-variant-primary.monochrome) .button:hover,:host(.ic-button-variant-icon-primary.monochrome) .button:hover{background-color:var(--ic-button-primary-background-hover-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-primary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-primary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-primary.monochrome) .button:active,:host(.ic-button-variant-icon-primary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-primary.monochrome) .button:active{background-color:var(--ic-button-primary-background-pressed-monochrome);--button-loading-inner-color:var(--ic-button-primary-text-monochrome);--button-loading-outer-color:var(--ic-button-primary-background-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-primary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-primary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) .button{background-color:var(--ic-button-primary-background-disabled-monochrome);color:var(--ic-button-primary-text-disabled-monochrome)}:host(.ic-button-variant-primary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) ::slotted(a){background-color:var(\n    --ic-button-primary-background-disabled-monochrome\n  ) !important}:host(.ic-button-variant-secondary) .button,:host(.ic-button-variant-icon-secondary) .button{border:var(--ic-border-width) solid var(--ic-button-secondary-border);color:var(--ic-button-secondary-text)}:host(.ic-button-variant-secondary) ::slotted(a),:host(.ic-button-variant-icon-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--ic-button-secondary-border) !important;color:var(--ic-button-secondary-text) !important;--ic-typography-color:var(--ic-button-secondary-text) !important}:host(.ic-button-variant-secondary) .button:hover,:host(.ic-button-variant-icon-secondary) .button:hover{background-color:var(--ic-button-secondary-background-hover-active);border-color:var(--ic-button-secondary-border-hover);color:var(--ic-button-secondary-text-hover-active)}:host(.ic-button-variant-secondary) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-hover-active\n  ) !important}:host(.ic-button-variant-secondary) .button:active,:host(.ic-button-variant-icon-secondary) .button:active{border-color:var(--ic-button-secondary-border-pressed);background-color:var(--ic-button-secondary-background-pressed-active);color:var(--ic-button-secondary-text-pressed-active)}:host(.ic-button-variant-secondary) ::slotted(a:active),:host(.ic-button-variant-icon-secondary) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-pressed-active\n  ) !important}:host(.ic-button-variant-secondary.ic-button-loading) .button,:host(.ic-button-variant-icon-secondary.ic-button-loading) .button{border-color:var(--ic-button-secondary-border-pressed);background-color:var(\n    --loading-button-background,\n    var(--ic-button-secondary-background-pressed-active)\n  ) !important;color:var(--ic-button-secondary-text-pressed-active);--button-loading-inner-color:var(--ic-button-secondary-text-pressed-active);--button-loading-outer-color:var(--ic-button-secondary-background-pressed)}:host(.ic-button-variant-secondary.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button{border-color:var(--ic-button-secondary-border-disabled);color:var(--ic-button-secondary-text-disabled);background:none}:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a){background:none !important}:host(.ic-button-variant-secondary.background) .button,:host(.ic-button-variant-icon-secondary.background) .button{background-color:var(--ic-button-secondary-background-non-transparent)}:host(.ic-button-variant-secondary.background) ::slotted(a),:host(.ic-button-variant-icon-secondary.background) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent\n  ) !important}:host(.ic-button-variant-secondary.background.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-disabled\n  )}:host(.ic-button-variant-secondary.background.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-disabled\n  ) !important}:host(.ic-button-variant-secondary.background) .button:hover,:host(.ic-button-variant-icon-secondary.background) .button:hover{background-color:var(--ic-button-secondary-background-non-transparent-hover)}:host(.ic-button-variant-secondary.background) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.background) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-non-transparent-hover\n  ) !important}:host(.ic-button-variant-secondary.background) .button:active,:host(.ic-button-variant-icon-secondary.background) .button:active{background-color:var(\n    --ic-button-secondary-background-non-transparent-active\n  )}:host(.ic-button-variant-secondary.background) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.background) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-non-transparent-active\n  ) !important}:host(.ic-button-variant-secondary.monochrome) .button,:host(.ic-button-variant-icon-secondary.monochrome) .button{background-color:none;border:var(--ic-border-width) solid\n    var(--ic-button-secondary-border-monochrome);color:var(--ic-button-secondary-text-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a){background-color:none !important}:host(.ic-button-variant-secondary.monochrome) .button:hover,:host(.ic-button-variant-icon-secondary.monochrome) .button:hover{background-color:var(--ic-button-secondary-background-hover-monochrome);border-color:var(--ic-button-secondary-border-hover-monochrome);color:var(--ic-button-secondary-text-hover-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-secondary.monochrome) .button:active,:host(.ic-button-variant-icon-secondary.monochrome) .button:active{background-color:var(--ic-button-secondary-background-pressed-monochrome);border-color:var(--ic-button-secondary-border-pressed-monochrome);color:var(--ic-button-secondary-text-pressed-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-secondary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-secondary.ic-button-loading.monochrome) .button{background-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important;border-color:var(--ic-button-secondary-border-pressed-monochrome);color:var(--ic-button-secondary-text-pressed-monochrome);--button-loading-inner-color:var(\n    --ic-button-secondary-text-pressed-monochrome\n  );--button-loading-outer-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  )}:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) .button{background:none;border-color:var(--ic-button-secondary-border-disabled-monochrome);color:var(--ic-button-secondary-text-disabled-monochrome)}:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) ::slotted(a){background:none !important}:host(.ic-button-variant-secondary.background.monochrome) .button,:host(.ic-button-variant-icon-secondary.background.monochrome) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome\n  );color:var(--ic-button-primary-text)}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-disabled\n  );color:var(--ic-button-secondary-text-disabled-monochrome)}:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-disabled\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome) .button:hover,:host(.ic-button-variant-icon-secondary.background.monochrome) .button:hover{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  )}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome) .button:active,:host(.ic-button-variant-icon-secondary.background.monochrome) .button:active{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  )}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  ) !important}:host(.ic-button-variant-tertiary) .button,:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-tertiary) ::slotted(a),:host(.ic-button-variant-icon-tertiary) ::slotted(a){color:var(--ic-button-tertiary-text-active);--ic-typography-color:var(--ic-button-tertiary-text-active)}:host(.ic-button-variant-tertiary) .button:hover,:host(.ic-button-variant-icon-tertiary) .button:hover{background-color:var(--ic-button-tertiary-background-hover-active);color:var(--ic-button-tertiary-text-hover-active)}:host(.ic-button-variant-tertiary) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover){background-color:var(\n    --ic-button-tertiary-background-hover-active\n  ) !important}:host(.ic-button-variant-tertiary) .button:active,:host(.ic-button-variant-tertiary.ic-button-loading) .button,:host(.ic-button-variant-icon-tertiary) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button{background-color:var(--ic-button-tertiary-background-pressed-active);color:var(--ic-button-tertiary-text-pressed-active);--button-loading-inner-color:var(--ic-button-tertiary-text-pressed-active);--button-loading-outer-color:var(--ic-button-tertiary-background-pressed)}:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary) ::slotted(a:active){background-color:var(\n    --ic-button-tertiary-background-pressed-active\n  ) !important}:host(.ic-button-variant-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button{color:var(--ic-button-tertiary-text-disabled);background:none}:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a){background:none !important}:host(.ic-button-variant-tertiary.monochrome) .button,:host(.ic-button-variant-tertiary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-tertiary.monochrome) .button,:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a){color:var(--ic-button-tertiary-text-monochrome);--ic-typography-color:var(--ic-button-tertiary-text-monochrome)}:host(.ic-button-variant-tertiary.monochrome) .button:hover,:host(.ic-button-variant-icon-tertiary.monochrome) .button:hover{background-color:var(--ic-button-tertiary-background-hover-monochrome);color:var(--ic-button-tertiary-text-hover-monochrome)}:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-tertiary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-tertiary.monochrome) .button:active,:host(.ic-button-variant-tertiary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-tertiary.monochrome) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-loading.monochrome) .button{background-color:var(--ic-button-tertiary-background-pressed-monochrome);color:var(--ic-button-tertiary-text-pressed-monochrome);--button-loading-inner-color:var(\n    --ic-button-tertiary-text-pressed-monochrome\n  );--button-loading-outer-color:var(\n    --ic-button-tertiary-background-pressed-monochrome\n  )}:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-tertiary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) .button{color:var(--ic-button-tertiary-text-disabled-monochrome);background:none}:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) ::slotted(a){background:none !important}:host(.ic-button-variant-destructive) .button,:host(.ic-button-variant-icon-destructive) .button{color:var(--ic-button-destructive-text);background-color:var(--ic-button-destructive-background);text-transform:uppercase}:host(.ic-button-variant-destructive) ::slotted(a),:host(.ic-button-variant-icon-destructive) ::slotted(a){color:var(--ic-button-destructive-text) !important;--ic-typography-color:var(--ic-button-destructive-text) !important;background-color:var(--ic-button-destructive-background) !important;text-transform:uppercase !important}:host(.ic-button-variant-destructive) .button:hover,:host(.ic-button-variant-icon-destructive) .button:hover{background-color:var(--ic-button-destructive-background-hover)}:host(.ic-button-variant-destructive) ::slotted(a:hover),:host(.ic-button-variant-icon-destructive) ::slotted(a:hover){background-color:var(--ic-button-destructive-background-hover) !important}:host(.ic-button-variant-destructive) .button:active,:host(.ic-button-variant-destructive.ic-button-loading) .button,:host(.ic-button-variant-icon-destructive.ic-button-loading) .button{color:var(--ic-button-primary-text);background-color:var(--ic-button-destructive-background-pressed);--button-loading-inner-color:var(--ic-button-primary-text);--button-loading-outer-color:var(--ic-button-destructive-background-pressed)}:host(.ic-button-variant-destructive) ::slotted(a:active),:host(.ic-button-variant-icon-destructive) ::slotted(a:active){background-color:var(--ic-button-destructive-background-pressed) !important}:host(.ic-button-variant-destructive.ic-button-disabled) .button,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button{background-color:var(--ic-button-destructive-background-disabled);color:var(--ic-button-destructive-text-disabled)}:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a){background-color:var(--ic-button-destructive-background-disabled) !important}:host(.ic-button-variant-icon) .button{color:var(--ic-button-icon-color);background-color:var(--ic-button-icon-color-background);min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) ::slotted(a){color:var(--ic-button-icon-color);background-color:var(--ic-button-icon-color-background) !important;min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon) .button:hover{color:var(--ic-button-icon-color-hover);background-color:var(--ic-button-icon-color-background-hover)}:host(.ic-button-variant-icon) ::slotted(a:hover){color:var(--ic-button-icon-color-hover);background-color:var(--ic-button-icon-color-background-hover) !important}:host(.ic-button-variant-icon) .button:active:not(:focus),:host(.ic-button-variant-icon.ic-button-loading) .button{color:var(--ic-button-icon-color-active);background-color:var(--ic-button-icon-color-background-acti)}:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)){color:var(--ic-button-icon-color-active);background-color:var(--ic-button-icon-color-background-acti) !important}:host(.ic-button-variant-icon.ic-button-disabled) .button{color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none !important}:host(.ic-button-variant-icon-primary) .button,:host(.ic-button-variant-icon-primary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-primary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon.monochrome) ::slotted(a),:host(.ic-button-variant-icon.monochrome) ::slotted(svg){color:var(--ic-button-icon-monochrome)}:host(.ic-button-variant-icon-secondary) .button,:host(.ic-button-variant-icon-secondary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-secondary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-icon-tertiary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-tertiary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-destructive) .button,:host(.ic-button-variant-icon-destructive) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-destructive) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-size-medium) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.ic-button-size-medium) ::slotted(a){height:var(--height, 2.5rem) !important;padding:var(--ic-space-xs) var(--ic-space-md) !important}:host(.ic-button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.ic-button-size-small) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:var(--ic-space-xxs) var(--ic-space-md) !important}:host(.ic-button-size-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}:host(.ic-button-size-large) ::slotted(a){height:var(--height, var(--ic-space-xxl)) !important;padding:var(--ic-space-sm) var(--ic-space-md) !important}:host(.ic-button-size-medium.ic-button-variant-icon) .button,:host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;width:var(--ic-space-xl) !important;padding:0.375rem !important}:host(.ic-button-size-small.ic-button-variant-icon) .button,:host(.ic-button-size-small.ic-button-variant-icon-primary) .button,:host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-lg)) !important;width:var(--ic-space-lg) !important;padding:var(--ic-space-xxs) !important}:host(.ic-button-size-large.ic-button-variant-icon) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) .button,:host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){height:var(--height, 2.5rem) !important;width:2.5rem !important;padding:var(--ic-space-xs) !important}:host(.ic-button-full-width),:host(.ic-button-full-width) .button{width:100%}:host(.ic-button-full-width) ::slotted(a){width:100% !important}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--inner-color:var(--button-loading-inner-color);--outer-color:var(--button-loading-outer-color), transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}div.right-icon{margin-right:auto;margin-left:var(--ic-space-xs)}:host(.ic-button-full-width) .right-icon{margin-right:var(--ic-space-xs)}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.ic-button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem;color:var(--ic-atoms-input-search-button)}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem;color:var(--ic-atoms-input-search-button)}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button) .button:not(:active):focus ::slotted(svg){color:var(--ic-button-primary-text)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.ic-button-variant-icon) .button,:host(.ic-button-variant-icon) ::slotted(a){background-color:inherit;min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button,:host(.button-variant-icon) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs)}:host(.button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button:hover,:host(.button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon) ::slotted(a:active:not(:focus)),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.dismiss-icon) .button,:host(.clear-button) .button,:host(.dismiss-icon) ::slotted(a),:host(.clear-button) ::slotted(a){background-color:inherit;color:var(--ic-atoms-input-clear-button)}:host(.dismiss-icon) .button:hover,:host(.clear-button) .button:hover,:host(.dismiss-icon) ::slotted(a:hover),:host(.clear-button) ::slotted(a:hover){color:var(--ic-atoms-input-clear-button)}:host(.dismiss-icon),:host(.clear-button){color:var(--ic-atoms-input-clear-button);margin:0 var(--ic-space-xxs)}:host(.dismiss-icon) .button:focus,:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),:host(.clear-button) .button:not(:active):focus ::slotted(svg){background-color:var(--ic-atoms-input-clear-button-focus-inner);color:var(--ic-button-primary-text);}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem;color:var(--ic-top-navigation-icon-active)}:host(.popout-menu-button) .button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}:host .arrow-dropdown{margin-top:auto}:host .dropdown-expanded{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}:host(.dropdown-no-icon) .button{padding-right:var(--ic-space-xs)}slot[name=\"router-item\"]::slotted(a){pointer-events:all}::slotted(a){font-size:0.875rem !important;border:none !important;vertical-align:middle !important}:host(#menu-button.ic-theme-light){--ic-button-secondary-background-hover-monochrome:var(\n    --ic-action-dark-bg-hover\n  );--ic-button-secondary-background-pressed-monochrome:var(\n    --ic-action-dark-bg-pressed\n  );--ic-button-secondary-text-hover-monochrome:var(--ic-action-dark-hover);--ic-button-secondary-text-pressed-monochrome:var(--ic-action-dark-pressed);--ic-button-secondary-border-hover-monochrome:var(\n    --ic-color-border-neutral-hover-dark\n  );--ic-button-secondary-border-pressed-monochrome:var(\n    --ic-color-border-neutral-pressed-dark\n  )}:host(#menu-button.ic-theme-dark){--ic-button-secondary-background-hover-monochrome:var(\n    --ic-action-light-bg-hover\n  );--ic-button-secondary-background-pressed-monochrome:var(\n    --ic-action-light-bg-pressed\n  );--ic-button-secondary-text-hover-monochrome:var(--ic-action-light-hover);--ic-button-secondary-text-pressed-monochrome:var(--ic-action-light-pressed);--ic-button-secondary-border-hover-monochrome:var(\n    --ic-color-border-neutral-hover-light\n  );--ic-button-secondary-border-pressed-monochrome:var(\n    --ic-color-border-neutral-default\n  )}@media (forced-colors: active){.button,::slotted(a){border:0.125rem solid transparent !important}.search-submit-button ::slotted(a),.ic-button-variant-icon ::slotted(a),.clear-button ::slotted(a),.search-submit-button ::slotted(svg),.ic-button-variant-icon ::slotted(svg),.clear-button ::slotted(svg){color:HighlightText}:host(.ic-button-variant-icon.monochrome) ::slotted(a),:host(.ic-button-variant-icon.monochrome) ::slotted(svg){color:white}:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),:host(.clear-button) .button:not(:active):focus ::slotted(svg){color:white !important;background-color:inherit}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}";
 var IcButtonStyle0 = icButtonCss;
 
-var __rest = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s)
         if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -5038,6 +5038,63 @@ class Button {
             var _a;
             return (_a = this.variant) === null || _a === void 0 ? void 0 : _a.startsWith("icon");
         };
+        this.arrangeRouterItem = () => {
+            var _a, _b, _c, _d;
+            const setStyles = (element, styles) => {
+                Object.entries(styles).forEach(([key, value]) => {
+                    element.style.setProperty(key, value);
+                });
+            };
+            const iconWrapper = document.createElement("div");
+            const icon = (_a = this.routerSlot) === null || _a === void 0 ? void 0 : _a.querySelector("svg");
+            const badge = (_b = this.routerSlot) === null || _b === void 0 ? void 0 : _b.querySelector("ic-badge");
+            const label = (_d = (_c = this.routerSlot) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.trim();
+            const icTypography = document.createElement("ic-typography");
+            setStyles(icTypography, {
+                "font-family": "var(--ic-font-body-family)",
+                "font-size": "0.875rem",
+                "font-weight": "600",
+            });
+            setStyles(this.routerSlot, {
+                gap: "0",
+            });
+            if (icon) {
+                setStyles(icon, {
+                    fill: "currentcolor",
+                });
+                icon.getAttribute("slot") === "left-icon" &&
+                    setStyles(iconWrapper, {
+                        "margin-right": "var(--ic-space-xs)",
+                    });
+                icon.getAttribute("slot") === "right-icon" &&
+                    setStyles(iconWrapper, {
+                        "margin-left": "var(--ic-space-xs)",
+                    });
+                if (icon.getAttribute("slot") === "top-icon") {
+                    setStyles(this.routerSlot, {
+                        display: "flex",
+                        "flex-direction": "column",
+                        "--height": "fit-content",
+                    });
+                }
+                iconWrapper.append(icon);
+            }
+            badge && iconWrapper.append(badge);
+            if (label) {
+                icTypography.textContent = label;
+            }
+            if (this.routerSlot) {
+                this.routerSlot.textContent = "";
+                if (icon && icon.getAttribute("slot") === "right-icon") {
+                    this.routerSlot.append(icTypography);
+                    this.routerSlot.append(iconWrapper);
+                }
+                else {
+                    this.routerSlot.append(iconWrapper);
+                    this.routerSlot.append(icTypography);
+                }
+            }
+        };
     }
     watchDisabledHandler() {
         removeDisabledFalse$1(this.disabled, this.el);
@@ -5059,7 +5116,7 @@ class Button {
     }
     componentWillLoad() {
         var _a;
-        const _b = inheritAttributes(this.el, [...IC_INHERITED_ARIA, "title"]), { title, "aria-label": ariaLabel } = _b, restInheritedAttributes = __rest(_b, ["title", "aria-label"]);
+        const _b = inheritAttributes(this.el, [...IC_INHERITED_ARIA, "title"]), { title, "aria-label": ariaLabel } = _b, restInheritedAttributes = __rest$1(_b, ["title", "aria-label"]);
         this.title = title;
         this.ariaLabel = ariaLabel;
         this.inheritedAttributes = restInheritedAttributes;
@@ -5094,6 +5151,7 @@ class Button {
             this.hostMutationObserver.observe(this.el, {
                 attributes: true,
             });
+            this.hasRouterSlot() && this.arrangeRouterItem();
         }
     }
     componentWillRender() {
@@ -5448,6 +5506,22 @@ const isEmptyString = (value) => value ? value.trim().length === 0 : true;
 // A helper function that checks if a prop has been defined
 const isPropDefined = (prop) => prop !== undefined ? prop : null;
 const deviceSizeMatches = (size) => window.matchMedia(`(max-width: ${size}px)`).matches;
+const getCurrentDeviceSize = () => {
+    if (deviceSizeMatches(DEVICE_SIZES.S)) {
+        return DEVICE_SIZES.S;
+    }
+    if (deviceSizeMatches(DEVICE_SIZES.M)) {
+        return DEVICE_SIZES.M;
+    }
+    if (deviceSizeMatches(DEVICE_SIZES.L)) {
+        return DEVICE_SIZES.L;
+    }
+    if (deviceSizeMatches(DEVICE_SIZES.XL)) {
+        return DEVICE_SIZES.XL;
+    }
+    //fallback needed as all of above get initialised to 0 in jest tests
+    return DEVICE_SIZES.UNDEFINED;
+};
 const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
 const getSlotElements = (slot) => {
     const slotContent = slot.firstElementChild;
@@ -5462,14 +5536,14 @@ const getSlotElements = (slot) => {
         return slot === null ? null : [slot];
     }
 };
-({
+const DEVICE_SIZES = {
     XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")), // 0
     S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")), // 576
     M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")), // 768
     L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")), // 992
     XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")), // 1200
     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";
@@ -6488,7 +6562,7 @@ class DataRow {
         registerInstance(this, hostRef);
         this.hasEndComponent = false;
         this.resizeObserver = null;
-        this.deviceSize = DEVICE_SIZES.XL;
+        this.deviceSize = DEVICE_SIZES$1.XL;
         /**
          * The size of the data row component.
          */
@@ -6517,7 +6591,7 @@ class DataRow {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
-        this.deviceSize = getCurrentDeviceSize();
+        this.deviceSize = getCurrentDeviceSize$1();
         this.hasEndComponent = slotHasContent(this.el, "end-component");
         this.checkLabelAbove();
     }
@@ -6533,9 +6607,9 @@ class DataRow {
             const rowSize = (row === null || row === void 0 ? void 0 : row.clientWidth) + 46;
             if (rowSize) {
                 this.listSize =
-                    rowSize < DEVICE_SIZES.S
+                    rowSize < DEVICE_SIZES$1.S
                         ? "xs"
-                        : rowSize < DEVICE_SIZES.M
+                        : rowSize < DEVICE_SIZES$1.M
                             ? "m"
                             : "xl";
             }
@@ -6585,7 +6659,7 @@ 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{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.truncation-show-hide{display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container: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{border:var(--ic-space-1px) solid var(--ic-data-table-border)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{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{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-data-table-cell-background-selected) !important}.table-row:hover{background-color:var(--ic-data-table-cell-background-hover) !important}.table-row-selected:hover{background-color:var(\n    --ic-data-table-cell-background-selected-hover\n  ) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;align-items:flex-start}.cell-alignment-middle{vertical-align:middle;align-items:center}.cell-alignment-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n    var(--ic-data-table-pagination-bar-keyline)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow);z-index:calc(var(--ic-z-index-dialog) - 1);background-color:var(--ic-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg){fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.column-header-alignment-center>.cell-text-wrapper,.row-header-alignment-right>ic-typography,.row-header-alignment-right>.cell-text-wrapper,.cell-alignment-center>ic-typography,.cell-alignment-center>.cell-text-wrapper{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}.action-element{display:flex;justify-content:right}.cell-grid-wrapper{display:grid;grid-template-columns:auto auto}.loading-overlay{visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--ic-data-table-loading-indicator-overlay-background);z-index:calc(var(--ic-z-index-dialog) - 2);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading-overlay.show{visibility:visible;opacity:0.6}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){.loading-overlay{transition:none}}.cell-text-wrapper{overflow:hidden}.cell-text-wrapper>ic-typography{margin-left:2px}.cell-text-no-wrap{word-wrap:initial}.cell-container-with-description{display:flex;flex-direction:row}.cell-description{display:flex;flex-direction:row;margin-top:var(--ic-space-xxs);word-break:break-all}.cell-description-text{color:var(--ic-color-secondary-text)}.cell-description-icon{padding-right:var(--ic-space-xs)}.cell-description-icon>svg{height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs));display:flex}@media (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}@media (max-width: 577px){.cell-icon{flex-wrap:wrap}.cell-description-icon{padding-right:0}}@media (forced-colors: active){.icon,::slotted(svg),.cell-description-icon>svg{fill:currentcolor}.sort-button svg{color:currentcolor}.table-row-selected{background-color:Highlight !important}}";
+const icDataTableCss = ":host{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.truncation-show-hide{display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container: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{border:var(--ic-space-1px) solid var(--ic-data-table-border)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{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{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-data-table-cell-background-selected) !important}.table-row:hover{background-color:var(--ic-data-table-cell-background-hover) !important}.table-row-selected:hover{background-color:var(\n    --ic-data-table-cell-background-selected-hover\n  ) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;align-items:flex-start}.cell-alignment-middle{vertical-align:middle;align-items:center}.cell-alignment-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n    var(--ic-data-table-pagination-bar-keyline)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow);z-index:calc(var(--ic-z-index-dialog) - 1);background-color:var(--ic-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg),.cell-description-icon>svg{fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.column-header-alignment-center>.cell-text-wrapper,.row-header-alignment-right>ic-typography,.row-header-alignment-right>.cell-text-wrapper,.cell-alignment-center>ic-typography,.cell-alignment-center>.cell-text-wrapper{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}.action-element{display:flex;justify-content:right}.cell-grid-wrapper{display:grid;grid-template-columns:auto auto}.loading-overlay{visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--ic-data-table-loading-indicator-overlay-background);z-index:calc(var(--ic-z-index-dialog) - 2);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading-overlay.show{visibility:visible;opacity:0.6}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){.loading-overlay{transition:none}}.cell-text-wrapper{overflow:hidden}.cell-text-wrapper>ic-typography{margin-left:2px}.cell-text-no-wrap{word-wrap:initial}.cell-container-with-description{display:flex;flex-direction:row}.cell-description{display:flex;flex-direction:row;margin-top:var(--ic-space-xxs);word-break:break-all}.cell-description-text{color:var(--ic-data-table-cell-description-text)}.cell-description-icon{padding-right:var(--ic-space-xs)}.cell-description-icon>svg{height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs));display:flex}@media (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}@media (max-width: 577px){.cell-icon{flex-wrap:wrap}.cell-description-icon{padding-right:0}}@media (forced-colors: active){.icon,::slotted(svg),.cell-description-icon>svg{fill:currentcolor}.sort-button svg{color:currentcolor}.table-row-selected{background-color:Highlight !important}}";
 var IcDataTableStyle0 = icDataTableCss;
 
 /**
@@ -8182,20 +8256,25 @@ class DateInput {
         this.KEYBOARD_EVENT_OBJECT_STRING = "[object KeyboardEvent]";
         this.MAX_DAY = 31;
         this.MAX_MONTH = 12;
-        this.previousEmittedDate = undefined;
         this.previousSelectedDate = null;
         this.selectedDate = null;
-        this.day = "";
-        this.month = "";
-        this.year = "";
+        this.externalSetDate = false;
+        this.clearInput = false;
         this.calendarFocused = false;
         this.clearButtonFocused = false;
         this.removeLabelledBy = false;
+        this.day = "";
+        this.month = "";
+        this.year = "";
         /**
          * The format in which the date will be displayed.
          */
         // eslint-disable-next-line sonarjs/no-duplicate-string
         this.dateFormat = "DD/MM/YYYY";
+        /**
+         * If `true`, every individual input field completed will emit an icChange event.
+         */
+        this.emitDatePartChange = false;
         /**
          * If `true`, the disabled state will be set.
          */
@@ -8582,9 +8661,12 @@ class DateInput {
         };
         this.setDate = (date) => {
             if (date === null || date === "" || date === undefined) {
-                this.day = null;
-                this.month = null;
-                this.year = null;
+                if (this.day)
+                    this.day = null;
+                if (this.month)
+                    this.month = null;
+                if (this.year)
+                    this.year = null;
                 this.inputsInOrder.forEach((input) => {
                     input.classList.remove(this.FIT_TO_VALUE);
                     this.setPreventInput(input, false);
@@ -8607,9 +8689,11 @@ class DateInput {
                 }
                 else if (typeof date === "string") {
                     const defaultDateArray = splitStringDate(date, this.dateFormat);
+                    this.selectedDate = new Date(Number(defaultDateArray[0]), Number(defaultDateArray[1]) - 1, Number(defaultDateArray[2]));
                     this.year = defaultDateArray[0];
                     this.month = defaultDateArray[1];
                     this.day = defaultDateArray[2];
+                    this.setValueAndEmitChange(this.selectedDate);
                 }
             }
             this.setValidationMessage();
@@ -9004,11 +9088,13 @@ class DateInput {
             }
         };
         this.handleClear = () => {
+            this.clearInput = true;
             this.inputsInOrder.forEach((input) => {
                 input.classList.remove(this.FIT_TO_VALUE);
                 this.setInputValue(input, true);
                 this.setPreventInput(input, false);
             });
+            this.clearInput = false;
             this.isDateSetFromKeyboardEvent = false;
             this.setValidationMessage();
             this.handleDateChange(true);
@@ -9048,13 +9134,31 @@ class DateInput {
             this.removeLabelledBy = true;
         };
         this.emitIcChange = (d) => {
-            if (!(d === null && this.previousEmittedDate === null) &&
-                !dateMatches(d, this.previousEmittedDate)) {
-                this.previousEmittedDate = d;
-                this.icChange.emit({ value: d });
+            this.selectedDate = d;
+            if (!dateMatches(this.selectedDate, d) ||
+                this.day !== null ||
+                this.month !== null ||
+                this.year !== null) {
+                this.icChange.emit({
+                    value: d,
+                    dateObject: {
+                        day: this.day === "" ? null : this.day,
+                        month: this.month === "" ? null : this.month,
+                        year: this.year === "" ? null : this.year,
+                    },
+                });
             }
         };
     }
+    watchInputHandler() {
+        if (this.emitDatePartChange &&
+            !this.externalSetDate &&
+            !this.clearInput &&
+            !(this.day && this.month && this.year) &&
+            this.selectedDate === null) {
+            this.emitIcChange(this.selectedDate);
+        }
+    }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
@@ -9108,11 +9212,8 @@ class DateInput {
         this.watchMinHandler();
         this.watchMaxHandler();
         if (this.value) {
+            this.externalSetDate = true;
             this.setDate(this.value);
-            this.previousEmittedDate = this.selectedDate;
-        }
-        else {
-            this.previousEmittedDate = null;
         }
         this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
         this.assistiveHintId = `${this.inputId}-assistive-hint`;
@@ -9181,7 +9282,10 @@ class DateInput {
      * @internal Used to enable other components to invoke an IcChange event from the input.
      */
     async triggerIcChange(d) {
+        this.externalSetDate = true;
+        this.setDate(d);
         this.emitIcChange(d);
+        this.externalSetDate = false;
     }
     removeAriaLabelledBy() {
         this.inputCompContainerEl.removeAttribute(this.ARIA_LABELLED_BY);
@@ -9298,19 +9402,22 @@ class DateInput {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (hAsync(Host, { key: '08b8f65934b55fd86e9abe2fad8f232af68b3754', class: {
+        return (hAsync(Host, { key: 'a37b652ab1896d583a970f2fe3f23480fe923406', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-date-input-disabled`]: disabled,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { key: '285bb0e746630a08c3e4e29bc8a24f5d97b4b4e5', disabled: disabled }, !(hideLabel && hideHelperText) && (hAsync("ic-input-label", { key: 'f1facdecd84445133a67c87a2d6e5ba4dfbfbceb', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), hAsync("span", { key: '25ae3fae1dc4f2862ec14e348138adfadf0dc3c7', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), hAsync("span", { key: 'd3c34084b3b846795063f799720b7d918f10f5a9', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { key: '37ecdc3ee7ced98dac405591cb106e1a03add976', id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("ic-input-component-container", { key: 'cfcfae24a49a49e0f2a878a7c024818e1cce125a', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, hAsync("div", { key: '4d090542f2fb72fae8cda326af45278552707cd6', class: "input-container" }, hAsync("div", { key: '4eef737c2a8d25353a41ea31b2e8bc21ec55ff9a', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), hAsync("div", { key: 'bc1cb74a96f75b4018f2e39f8712a870f5f4bf6e', class: "action-buttons" }, showClearButton && (hAsync("ic-button", { key: 'e58854f9e3b74a7f46a253a8421c8c9775047069', id: "clear-button", "aria-label": "Clear input", class: {
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { key: '41c1cd439879613d8920593309e19c050e5d451e', disabled: disabled }, !(hideLabel && hideHelperText) && (hAsync("ic-input-label", { key: 'a598faa23eda4cf283cd5e542008aad20150736e', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), hAsync("span", { key: '71265eb5808610652efe874a2ad9828c970a9176', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), hAsync("span", { key: '67121b1b28fa69acd5c143d8dacb9c634db15f05', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { key: '2af3f97d24ed25ba868b08d13b4467075b350a36', id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("ic-input-component-container", { key: 'c7c455f3f16458f6a56e604e8f8499834f277933', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, hAsync("div", { key: 'ccf2a9ca8154cdc108fdbbe4a8b1cf2fd6fb5070', class: "input-container" }, hAsync("div", { key: 'c044b44ee99dcf32722bdbfa481c8464a9a4d7bb', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), hAsync("div", { key: '30818ad45a24cdca204f8b629f064840420afb44', class: "action-buttons" }, showClearButton && (hAsync("ic-button", { key: '99a6a5b62893e56cf5d3a4f6645ce2aa1b77e538', id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
                     isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: Clear$1, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (hAsync("div", { key: 'd7e3f4e87e69d949a1c9e56230ae78b22dfd23f8', class: "show-calendar-button-wrapper" }, hAsync("div", { key: '21bcae037bcb6d81bd89ba1eb51f279f048fa2df', class: { divider: true, [size]: true } }), hAsync("ic-button", { key: '3bad8c476367e3aac94092078fe9d8aa52f396ff', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), hAsync("span", { key: 'c11a9f0fc1eae4efc3a3a29ebdd1eb65a6de7630', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, hAsync("span", { key: '2930c304db0ad50b6991454d9375fdc2e1a4547a', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (hAsync("ic-input-validation", { key: '5fc1473b568a1f82c3c1ee9f73e20a19f7c28d85', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
+            }, disabled: this.disabled, innerHTML: Clear$1, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (hAsync("div", { key: '77a0ba0e9dfa3b99a97252178e42f49261619503', class: "show-calendar-button-wrapper" }, hAsync("div", { key: '70408bceb4963e3ba54fe5630ba95905d15be0a6', class: { divider: true, [size]: true } }), hAsync("ic-button", { key: 'f38c632d59fe23bfda2f20a8a9646028ac40f99b', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), hAsync("span", { key: '614cc74c88f8d83e04ec9bde0d984567c536d65c', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, hAsync("span", { key: 'f1dea32613b9f162808ffef69baa6231c86998d3', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (hAsync("ic-input-validation", { key: '802cdf9f7bc52c9164137059b46f5c1dfcbcdb80', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "day": ["watchInputHandler"],
+        "month": ["watchInputHandler"],
+        "year": ["watchInputHandler"],
         "disabled": ["watchDisabledHandler"],
         "disableFuture": ["watchDisableFutureHandler"],
         "disablePast": ["watchDisablePastHandler"],
@@ -9324,6 +9431,7 @@ class DateInput {
         "$tagName$": "ic-date-input",
         "$members$": {
             "dateFormat": [1, "date-format"],
+            "emitDatePartChange": [4, "emit-date-part-change"],
             "disabled": [4],
             "disableDays": [1040],
             "disableDaysMessage": [1, "disable-days-message"],
@@ -9348,15 +9456,15 @@ class DateInput {
             "value": [1025],
             "validationStatus": [1025, "validation-status"],
             "validationText": [1, "validation-text"],
-            "day": [32],
             "invalidDateText": [32],
             "maxDate": [32],
             "minDate": [32],
-            "month": [32],
-            "year": [32],
             "calendarFocused": [32],
             "clearButtonFocused": [32],
             "removeLabelledBy": [32],
+            "day": [32],
+            "month": [32],
+            "year": [32],
             "getDate": [64],
             "setCalendarFocus": [64],
             "setDisableDays": [64],
@@ -9528,6 +9636,10 @@ class DatePicker {
          * If `true`, the disabled state will be set.
          */
         this.disabled = false;
+        /**
+         *  If `true`, every individual input field completed will emit an icChange event.
+         */
+        this.emitDatePartChange = false;
         /**
          * The days of the week to disable.
          */
@@ -10234,6 +10346,7 @@ class DatePicker {
                 showClearButton: true,
                 showCalendarButton: true,
                 value: this.value,
+                emitDatePartChange: this.emitDatePartChange,
             };
             if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
                 inputProps.dateFormat = this.dateFormat;
@@ -10456,30 +10569,30 @@ class DatePicker {
             yesterday.setDate(minDate.getDate() - 1);
             minDay = yesterday;
         }
-        return (hAsync(Host, { key: '59530924b1c1a8701fe9d568dda744acbb9f9429', onKeyDown: this.keyDownHandler, class: {
+        return (hAsync(Host, { key: '5e9ccc7a11ec9af59b92c82a57220d2331487ae3', onKeyDown: this.keyDownHandler, class: {
                 [`ic-date-picker-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, hAsync("div", { key: '02b510a9196a1c64ac5805bacda63070486a88a6', class: "date-input-container" }, hAsync("ic-date-input", Object.assign({ key: '85985258b70c8eef02db8ec330d144aef0c07c00', ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (hAsync("div", { key: '0c0de6d01a028c5c6bd0bf0e60313055ad69c4fb' }, hAsync("span", { key: '3710d052f35c166c73ae17a4bff3866ae31988d2', id: "dialog-description", class: "sr-only" }, dialogDescription), hAsync("div", { key: '38cc8d6f732d6290a8a489e6b4f283ad5f8546b1', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+            } }, hAsync("div", { key: '4a955bd86f7d40729b9e06a951b74f1ac8e6537d', class: "date-input-container" }, hAsync("ic-date-input", Object.assign({ key: 'dfad29fcd55af0bd223043829bf9ba0a50a13c83', ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (hAsync("div", { key: '54b425398ff5d01f48579295f11afe134dd4754d' }, hAsync("span", { key: '7dd1c85c21aa42e4e349ed3b5c49e30d8079b805', id: "dialog-description", class: "sr-only" }, dialogDescription), hAsync("div", { key: '60277961fe96cd039c2896667c540799da9ee791', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
                 "calendar-container": true,
                 above: this.showPickerAbove,
-            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, hAsync("span", { key: 'de970be8432eb42903d10c751dd7f5693032433b', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("div", { key: '1f61a0183d227713f12202a7eacc9eee8e696376', class: {
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, hAsync("span", { key: '13e933dec8f72ad6b3c321e2d20068e44676d526', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("div", { key: 'ef5b6ecc2837afa98e54b3d1f3f7c35b9d76cbe8', class: {
                 "month-year-nav-container": true,
-            } }, hAsync("div", { key: '5aa91f8d46ea2fb6781880dbed605827e676f8b1', class: "month-year-nav" }, this.previousMonthButton(), hAsync("span", { key: 'ad9538194a76899bd59f46ed9b115e95c44435f0', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), hAsync("ic-button", { key: '6d75e6cad6a70036350579d02b610233f9471149', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), hAsync("div", { key: '122524d109dbb355bbf7aa78ba505edcad8a0614', class: "month-year-nav" }, this.previousYearButton(), hAsync("span", { key: 'bd65e30ab89c47e85fbce0ab74d8252fb1a0055b', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), hAsync("ic-button", { key: 'd7f1ba0cf97bfe1483357de887730c63f4d0b3f0', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (hAsync("div", { key: 'cb82883365a79cd430017f7fcb761e8ba2573c32', class: {
+            } }, hAsync("div", { key: '4d0758186767ffc0a53bbd98546c71d6f3ae68e1', class: "month-year-nav" }, this.previousMonthButton(), hAsync("span", { key: '87a8892fcc48cbdd31e71e98677afb4a65b4509a', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), hAsync("ic-button", { key: '54562344011fdc11a801ed4ab3bf0f9d1cbb0720', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), hAsync("div", { key: 'cd717c2e91642b10bef03f749c839caaeb90c5d4', class: "month-year-nav" }, this.previousYearButton(), hAsync("span", { key: '41b425d37f008489a105a540ab0e05460e10c322', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), hAsync("ic-button", { key: '06c7108cddf69046a6c2b5ac6226dff3ff3ff5c3', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (hAsync("div", { key: '280daa0c705cdd4016b461aef7e8d781e79a99b4', class: {
                 calendar: true,
                 hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, hAsync("div", { key: '7ec2ee64c0ed75bf2a7f2a6e860d56a05583bf40', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
+            }, onKeyDown: this.handleCalendarKeyDown }, hAsync("div", { key: 'fb5ca495827648da54f931081d7ada104813d6d6', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
             const header = size === "small" ? dayName.charAt(0) : dayName;
             return (hAsync("div", { class: "calendar-day-header" }, hAsync("ic-typography", { variant: "caption" }, header)));
-        })), hAsync("div", { key: 'dbc8e69226b9ed38bf51f05f44f688be5720a2ac', class: "calendar-days-container" }, this.currMonthView.map((day) => (hAsync(DayButton, { day: day, disableDay: this.disableDays.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })))))), hAsync("div", { key: 'ae8bc96be8bd8a97ddb952afb04a383b69b88653', class: {
+        })), hAsync("div", { key: 'cb969df058c5c9992eea64185219c12dd4f63f16', class: "calendar-days-container" }, this.currMonthView.map((day) => (hAsync(DayButton, { day: day, disableDay: this.disableDays.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })))))), hAsync("div", { key: '6878f71a8e9849309935aed5f3ace0ea0528a5b9', class: {
                 "month-picker-container": true,
                 hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (hAsync(MonthPicker, { key: 'f6227d14a2d4db07a8fe16cb531a573d125d715b', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), hAsync("div", { key: '5eb0c8a44ee68394f453e0f5240f0647c85fdd5f', class: {
+            } }, monthPickerVisible && (hAsync(MonthPicker, { key: '3adce24e8a23ce361de3f6e377eadcea09ba9407', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), hAsync("div", { key: 'c645f72d43f2ca109ee37f182d1e8d3ee54e8b91', class: {
                 "year-picker-container": true,
                 hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (hAsync(YearPicker, { key: 'df83d40f781654acc445af4ca93e56eb4507fe9c', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), hAsync("div", { key: 'ef1d29f341f868d5a35f31595cabbb2aac97fc76', class: {
+            } }, yearPickerVisible && (hAsync(YearPicker, { key: '3e3022a85c04a79e59f141e2e11b969712e40ca9', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), hAsync("div", { key: '6cbaef27a87bb48333241842a2654facb90578a6', class: {
                 "bottom-buttons": true,
                 "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (hAsync("ic-button", { key: '596dc8d6aa888c4a300276eb1e18f6ca4284dec6', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (hAsync("ic-button", { key: '8cce911a05aa3d009da3a9fe863939604bbe126a', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
+            } }, showPickerTodayButton && (hAsync("ic-button", { key: 'efdb2b56aa7b886c3bb90379a553d86143a5479a', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (hAsync("ic-button", { key: 'd54bb6a21e9cf1164d09c27a01d1b334a52eb433', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
                 this.value === null ||
                 this.value === undefined }, "Clear"))))))));
     }
@@ -10507,6 +10620,7 @@ class DatePicker {
         "$members$": {
             "dateFormat": [1, "date-format"],
             "disabled": [4],
+            "emitDatePartChange": [4, "emit-date-part-change"],
             "disableDays": [16],
             "disableDaysMessage": [1, "disable-days-message"],
             "disableFuture": [4, "disable-future"],
@@ -11176,7 +11290,7 @@ class Footer {
         this.runResizeObserver = () => {
             if (this.footerEl) {
                 this.resizeObserver = new ResizeObserver(() => {
-                    const currSize = getCurrentDeviceSize();
+                    const currSize = getCurrentDeviceSize$1();
                     this.resizeObserverCallback(currSize);
                 });
                 this.resizeObserver.observe(this.footerEl);
@@ -11191,7 +11305,7 @@ class Footer {
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
-        this.deviceSize = getCurrentDeviceSize();
+        this.deviceSize = getCurrentDeviceSize$1();
     }
     componentDidLoad() {
         checkResizeObserver$1(this.runResizeObserver);
@@ -11268,7 +11382,7 @@ var IcFooterLinkStyle0 = icFooterLinkCss;
 class FooterLink {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.deviceSize = DEVICE_SIZES.XL;
+        this.deviceSize = DEVICE_SIZES$1.XL;
         this.footerConfig = { small: false, grouped: false };
         this.foregroundColor = getBrandForegroundAppearance();
         /**
@@ -11342,7 +11456,7 @@ class FooterLinkGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.expanded = false;
-        this.deviceSize = DEVICE_SIZES.XL;
+        this.deviceSize = DEVICE_SIZES$1.XL;
         this.dropdownIconStyle = getBrandForegroundAppearance();
         this.small = false;
         this.handleKeydown = (event) => {
@@ -15171,7 +15285,7 @@ class MenuGroup {
     }; }
 }
 
-const icMenuItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}li{list-style:none;padding:0}:host ::part(button){color:var(--ic-popover-menu-item-check);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.ic-menu-item-disabled) ::part(button){color:var(--ic-popover-menu-item-check-disabled) !important;--ic-typography-color:var(--ic-popover-menu-item-check-disabled) !important;pointer-events:none}:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host([variant=\"destructive\"]) ::part(button){color:var(--ic-popover-menu-destructive-item-icon);--ic-typography-color:var(--ic-popover-menu-destructive-item-label)}:host ::part(button):hover{background-color:var(--ic-popover-background-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-popover-menu-item-icon-focused);--ic-typography-color:purple;background-color:var(--ic-popover-background-focus);box-shadow:none}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{color:var(--ic-popover-menu-item-icon-disabled) !important;--ic-typography-color:orange !important}:host([variant=\"destructive\"]) ::part(button):focus-visible,:host([variant=\"destructive\"]) ::part(button):focus{background-color:var(--ic-popover-destructive-background-focus)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-focused)}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:var(--ic-popover-menu-border)}:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-item-label) !important;--ic-typography-color:var(--ic-popover-menu-item-label) !important}:host([variant=\"destructive\"]) ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-destructive-item-label) !important;--ic-typography-color:var(\n    --ic-popover-menu-destructive-item-label\n  ) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}.shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut);display:flex;flex:min-content}:host([variant=\"destructive\"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{--ic-typography-color:var(--ic-popover-menu-item-label)}ic-button:active .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}ic-button:active .shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut)}:host([variant=\"destructive\"]) ic-button:active .menu-item-label{--ic-typography-color:var(\n    --ic-popover-menu-destructive-item-label\n  ) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.ic-menu-item-disabled) .menu-item-info,:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:GrayText !important}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{outline-color:GrayText !important}}";
+const icMenuItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}li{list-style:none;padding:0}:host ::part(button){color:var(--ic-popover-menu-item-check);--ic-typography-color:var(--ic-popover-menu-item-check);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.ic-menu-item-disabled) ::part(button){color:var(--ic-popover-menu-item-check-disabled) !important;--ic-typography-color:var(--ic-popover-menu-item-check-disabled) !important;pointer-events:none}:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host([variant=\"destructive\"]) ::part(button){color:var(--ic-popover-menu-destructive-item-icon);--ic-typography-color:var(--ic-popover-menu-destructive-item-label)}:host ::part(button):hover{background-color:var(--ic-popover-background-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-popover-menu-item-icon-focused);--ic-typography-color:purple;background-color:var(--ic-popover-background-focus);box-shadow:none}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{color:var(--ic-popover-menu-item-icon-disabled) !important;--ic-typography-color:orange !important}:host([variant=\"destructive\"]) ::part(button):focus-visible,:host([variant=\"destructive\"]) ::part(button):focus{background-color:var(--ic-popover-destructive-background-focus)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-focused)}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:var(--ic-popover-menu-border)}:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-item-label) !important;--ic-typography-color:var(--ic-popover-menu-item-label) !important}:host([variant=\"destructive\"]) ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-destructive-item-label) !important;--ic-typography-color:var(\n    --ic-popover-menu-destructive-item-label\n  ) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}.shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut);display:flex;flex:min-content}:host([variant=\"destructive\"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{--ic-typography-color:var(--ic-popover-menu-item-label)}ic-button:active .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}ic-button:active .shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut)}:host([variant=\"destructive\"]) ic-button:active .menu-item-label{--ic-typography-color:var(\n    --ic-popover-menu-destructive-item-label\n  ) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.ic-menu-item-disabled) .menu-item-info,:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:GrayText !important}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{outline-color:GrayText !important}}";
 var IcMenuItemStyle0 = icMenuItemCss;
 
 /**
@@ -15443,13 +15557,14 @@ class NavigationGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.navigationGroupOpened = createEvent(this, "navigationGroupOpened", 7);
+        this.navigationGroupExpanded = createEvent(this, "navigationGroupExpanded", 7);
         this.allGroupedNavigationItems = [];
         this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;
         this.IC_NAVIGATION_ITEM = "ic-navigation-item";
         this.mouseGate = false;
         this.nodeName = "IC-NAVIGATION-GROUP";
         this.GROUPED_LINKS_WRAPPER_CLASS = ".grouped-links-wrapper";
-        this.deviceSize = DEVICE_SIZES.XL;
+        this.deviceSize = DEVICE_SIZES$1.XL;
         this.dropdownOpen = false;
         this.expanded = true;
         this.focusStyle = getBrandForegroundAppearance();
@@ -15498,7 +15613,7 @@ class NavigationGroup {
                 this.deviceSize = size;
                 this.inTopNavSideMenu =
                     size <=
-                        (((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.customMobileBreakpoint) || DEVICE_SIZES.L);
+                        (((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.customMobileBreakpoint) || DEVICE_SIZES$1.L);
             }
         };
         this.setGroupedNavItemTabIndex = (tabIndexValue) => {
@@ -15666,7 +15781,7 @@ class NavigationGroup {
     }
     componentWillLoad() {
         var _a, _b;
-        this.deviceSize = getCurrentDeviceSize();
+        this.deviceSize = getCurrentDeviceSize$1();
         const { navType, parent } = getNavItemParentDetails(this.el);
         this.navigationType = navType;
         this.parentEl = parent;
@@ -15712,6 +15827,8 @@ class NavigationGroup {
     }
     toggleDropdown() {
         this.dropdownOpen = !this.dropdownOpen;
+        this.inTopNavSideMenu &&
+            this.navigationGroupExpanded.emit({ expanded: this.dropdownOpen });
     }
     showDropdown() {
         if (!this.dropdownOpen) {
@@ -15732,13 +15849,13 @@ class NavigationGroup {
     }
     render() {
         const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;
-        return (hAsync(Host, { key: 'd2dca685d7a98166838f646a06b12d0f29c63874', class: {
+        return (hAsync(Host, { key: '642acbeff8a4ff9569bd49e84a3437fea5805101', class: {
                 ["in-side-menu"]: inTopNavSideMenu,
                 "ic-navigation-group-expanded": this.expanded,
                 "ic-navigation-group-collapsed": !this.expanded,
                 ["ic-navigation-group-side-nav"]: this.navigationType === "side",
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            }, role: "listitem" }, hAsync("button", { key: 'bf8357c5bc6324a69330e1ead95e36acb130a7d9', onMouseEnter: !inTopNavSideMenu && this.navigationType === "top"
+            }, role: "listitem" }, hAsync("button", { key: 'c6d9e31b96f715579af6cfffcb9e5dbf4b676745', onMouseEnter: !inTopNavSideMenu && this.navigationType === "top"
                 ? this.handleMouseEnter
                 : undefined, onMouseLeave: this.navigationType === "top" ? this.handleMouseLeave : undefined, tabindex: inTopNavSideMenu && !expandable ? "-1" : "0", onBlur: this.handleBlur, onClick: expandable ? this.handleClick : undefined, onKeyDown: this.handleKeydown, class: {
                 ["navigation-group"]: true,
@@ -15747,7 +15864,7 @@ class NavigationGroup {
                 ["navigation-group-side-menu-collapsed"]: inTopNavSideMenu && !!expandable && !dropdownOpen,
                 ["navigation-group-side-menu-expanded"]: inTopNavSideMenu && !!expandable && dropdownOpen,
                 ["selected"]: dropdownOpen && !inTopNavSideMenu,
-            }, ref: (el) => (this.groupEl = el), "aria-expanded": `${dropdownOpen || this.expanded}`, "aria-haspopup": `${!inTopNavSideMenu && this.navigationType === "top"}` }, hAsync("ic-typography", { key: '47326c810d96a81521003d0a4c865eb94b1a2d0c', variant: this.navigationType === "side" ? "caption" : "label" }, label), this.navigationType === "side" && expandable && (hAsync("div", { key: '847e7a598e215c4199f0fce73626deda6804b509', class: {
+            }, ref: (el) => (this.groupEl = el), "aria-expanded": `${dropdownOpen || this.expanded}`, "aria-haspopup": `${!inTopNavSideMenu && this.navigationType === "top"}` }, hAsync("ic-typography", { key: '4eedda13cf661fd31a272abbf549751146f2da2d', variant: this.navigationType === "side" ? "caption" : "label" }, label), this.navigationType === "side" && expandable && (hAsync("div", { key: 'ce67b3b8aeb81de3630b3b635a88d93509496290', class: {
                 "chevron-toggle-icon-wrapper": true,
                 "chevron-toggle-icon-closed": this.expanded,
             }, innerHTML: chevronIcon }))), this.renderNavigationItems()));
@@ -15794,7 +15911,7 @@ class NavigationItem {
         this.hostMutationObserver = null;
         this.ANIMATION_DURATION = parseInt(getCssProperty$1("--ic-transition-duration-slow")) || 0;
         this.ARIA_LABEL_STRING = "aria-label";
-        this.deviceSize = DEVICE_SIZES.XL;
+        this.deviceSize = DEVICE_SIZES$1.XL;
         this.focusStyle = getBrandForegroundAppearance();
         this.inTopNavSideMenu = false;
         this.isSideNavMobile = false;
@@ -15845,7 +15962,7 @@ class NavigationItem {
                 this.deviceSize = size;
                 this.inTopNavSideMenu =
                     size <=
-                        (((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.customMobileBreakpoint) || DEVICE_SIZES.L);
+                        (((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.customMobileBreakpoint) || DEVICE_SIZES$1.L);
             }
         };
         this.sideNavExpandHandler = ({ detail, }) => {
@@ -15930,7 +16047,7 @@ class NavigationItem {
         const { navType, parent } = getNavItemParentDetails(this.el);
         this.navigationType = navType;
         this.parentEl = parent;
-        this.deviceSize = getCurrentDeviceSize();
+        this.deviceSize = getCurrentDeviceSize$1();
         this.sideNavExpanded =
             ((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.classList.contains("sm-expanded")) ||
                 ((_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.classList.contains("xs-menu-open")) ||
@@ -16042,6 +16159,8 @@ class NavigationItem {
 const icNavigationMenuCss = ":host{display:block;position:fixed;top:0;left:0;width:100%;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-navigation-menu)}.popout-modal{position:absolute;inset:0}.popout-menu{position:fixed;top:0;right:0;width:16rem;bottom:0;background-color:var(--ic-top-navigation-menu-background);color:var(--ic-top-navigation-nav-item);--ic-typography-color:var(--ic-top-navigation-nav-item);box-shadow:var(--ic-elevation-overlay);overflow-y:auto;overflow-x:hidden}:host(.inline) .popout-menu{position:absolute}.menu-close-button-container{position:relative;left:11.875rem;padding:var(--ic-space-md) 0}.nav-group-first{padding-bottom:0}.menu-buttons-container{padding:var(--ic-space-sm) 0;border-bottom:var(--ic-border-width) solid var(--ic-architectural-200)}.menu-buttons-container-nav-item-above{margin-top:var(--ic-space-md);border-top:var(--ic-border-width) solid var(--ic-architectural-200)}.menu-status-version-container{display:flex;flex-wrap:wrap;gap:var(--ic-space-xs);padding:var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl)}.status-version-no-buttons{border-top:var(--ic-space-1px) solid var(--ic-architectural-200)}.menu-status{background-color:var(--ic-status-tag-neutral);--ic-typography-color:var(--ic-status-tag-text);border-radius:var(--ic-space-md);width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-version{border-radius:var(--ic-space-md);background-color:var(--ic-status-tag-outlined-background-neutral);--ic-typography-color:var(--ic-color-text-primary-light);padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-status-text,.menu-version-text{overflow-wrap:break-word}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}";
 var IcNavigationMenuStyle0 = icNavigationMenuCss;
 
+const NAV_GROUP_TAG = "IC-NAVIGATION-GROUP";
+const NAV_ITEM_TAG = "IC-NAVIGATION-ITEM";
 /**
  * @slot navigation - Content will be rendered at top of panel.
  * @slot buttons - Content will be rendered above version info and below navigation.
@@ -16067,6 +16186,21 @@ class NavigationMenu {
          * The version info to display.
          */
         this.version = "";
+        this.setLastTabStop = (lastNavGroupExpanded) => {
+            let lastEl = this.navigationEls[this.navigationEls.length - 1];
+            if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {
+                const childNavItems = lastEl.children;
+                lastEl = childNavItems[childNavItems.length - 1];
+            }
+            if (lastEl.tagName === NAV_ITEM_TAG) {
+                //check for slotted content i.e. react router link
+                const slotContent = getSlot(lastEl, "navigation-item");
+                if (slotContent !== null) {
+                    lastEl = slotContent;
+                }
+            }
+            this.lastTabStop = lastEl;
+        };
         this.closeMenu = () => {
             this.icNavigationMenuClose.emit();
         };
@@ -16079,8 +16213,8 @@ class NavigationMenu {
             if (this.lastTabStop !== null) {
                 switch (this.lastTabStop.tagName) {
                     case "IC-NAVIGATION-BUTTON":
-                    case "IC-NAVIGATION-ITEM":
-                    case "IC-NAVIGATION-GROUP":
+                    case NAV_ITEM_TAG:
+                    case NAV_GROUP_TAG:
                         focusEl = this.lastTabStop;
                         focusEl.focus();
                         break;
@@ -16093,15 +16227,20 @@ class NavigationMenu {
     }
     componentWillLoad() {
         this.navBarEl = document.querySelector("ic-top-navigation");
-        const navigationEls = getSlotContent(this.el, "navigation");
-        if (navigationEls) {
+        this.navigationEls = getSlotContent(this.el, "navigation");
+        if (this.navigationEls) {
             this.hasNavigation = true;
-            const lastEl = navigationEls[navigationEls.length - 1];
-            if (lastEl.tagName === "IC-NAVIGATION-ITEM") {
+            const lastEl = this.navigationEls[this.navigationEls.length - 1];
+            if (lastEl.tagName === NAV_ITEM_TAG) {
                 this.navItemAboveButtons = true;
             }
-            const firstEl = navigationEls[0];
-            if (firstEl.tagName === "IC-NAVIGATION-GROUP") {
+            else if (lastEl.tagName === NAV_GROUP_TAG) {
+                lastEl.addEventListener("navigationGroupExpanded", ((event) => {
+                    this.setLastTabStop(event.detail.expanded);
+                }));
+            }
+            const firstEl = this.navigationEls[0];
+            if (firstEl.tagName === NAV_GROUP_TAG) {
                 this.navGroupFirst = true;
             }
         }
@@ -16111,16 +16250,8 @@ class NavigationMenu {
             this.lastTabStop = buttonContent[buttonContent.length - 1];
         }
         else {
-            if (this.hasNavigation && navigationEls) {
-                const lastEl = navigationEls[navigationEls.length - 1];
-                //check for slotted content i.e. react router link
-                const slotContent = getSlot(lastEl, "navigation-item");
-                if (slotContent !== null) {
-                    this.lastTabStop = slotContent;
-                }
-                else {
-                    this.lastTabStop = lastEl;
-                }
+            if (this.hasNavigation && this.navigationEls) {
+                this.setLastTabStop(false);
             }
         }
     }
@@ -16153,16 +16284,16 @@ class NavigationMenu {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'e9ecbbb6dd588afa6020ebdc5fd4b9f3b9d6d17d', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, hAsync("div", { key: 'a11a0b572d3134f644b81a65b2183f3831cf7eef', class: "popout-modal", onClick: this.closeMenu }), hAsync("div", { key: 'ff9724d8a0b3bf3071d9cfc9b44bcbbe1a63592e', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, hAsync("span", { key: '59a95028fc7047fbc0b25a8bf1c8b702758ff0c7', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), hAsync("nav", { key: '925162fcf3432baaabfac61766b0833a65ff7413', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, hAsync("div", { key: '4c8aefb471b0f993ec4789662adae82798cfe364', class: {
+        return (hAsync(Host, { key: 'ac20556d28ccb50fa78fdb0a14e6096e1793d808', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, hAsync("div", { key: 'e429e9f4554ee2f40aa8b4e44c2cb3bc4dbb448e', class: "popout-modal", onClick: this.closeMenu }), hAsync("div", { key: '9fb05be7a68bea1bc06cca1034f0ae77dd09797e', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, hAsync("span", { key: 'e0ac3dfe4995af4270ab21f5f559ef86e9eae2de', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), hAsync("nav", { key: '3d1b37adb6d60d486f97eddf28324f69049924a3', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, hAsync("div", { key: '45b00dbad25c373903c39d5cfca30717fa865150', class: {
                 ["menu-close-button-container"]: true,
                 ["nav-group-first"]: this.navGroupFirst,
-            } }, hAsync("ic-button", { key: '5f51478c203469b9dd182c2b53f5f47de12d7cf3', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, hAsync("svg", { key: 'a27d75cdc971183b31193d2e8b5476f4fc4af2fc', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '9df95971b7e3d2ddc31c7e6c610a33087da046fe', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && hAsync("slot", { key: 'c5ea5be8dff71b36b4933f899877370ba2c93709', name: "navigation" })), this.hasButtons && (hAsync("div", { key: 'e620a0c3deb6adf1f892fda537b759757bf84d42', class: {
+            } }, hAsync("ic-button", { key: '4da3bf37bc5a3ee5622e05053828dd0991445084', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, hAsync("svg", { key: 'cb90b4946f8f649ceb98915ff2a57f234b5f8ed4', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'a49a4b42ddf2c9060070cd93eaba2a55c3e474cb', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && hAsync("slot", { key: '78878e2499e04a899f93bbe4b9a6a2a9aff080ab', name: "navigation" })), this.hasButtons && (hAsync("div", { key: 'cb8eb1bf24e483d5ad4aad20dadb926e106eb2c2', class: {
                 ["menu-buttons-container"]: true,
                 ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
-            } }, hAsync("slot", { key: 'd5050cea88cc2a0e9ceebcf7c299d2cfba25d30b', name: "buttons" }))), (this.status !== "" || this.version !== "") && (hAsync("div", { key: '26bb00f5b7a9b926be7c20d6855874997595a395', class: {
+            } }, hAsync("slot", { key: '1d36a228ba3a62686f9939df9c8dd6e29289ebb8', name: "buttons" }))), (this.status !== "" || this.version !== "") && (hAsync("div", { key: 'c4b0d0c4140644eea60d24eac6bd845c21965969', class: {
                 ["menu-status-version-container"]: true,
                 ["status-version-no-buttons"]: !this.hasButtons,
-            } }, this.status !== "" && (hAsync("div", { key: '44f8e916cb8cda5d2708c94f4a682f8617b09a03', class: "menu-status" }, hAsync("ic-typography", { key: 'eed2bd09e04fc12e76505b50da937bbd9eaed88d', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (hAsync("div", { key: '53cd05a0b7f707e37840ffa6c5f97ede69f3a2eb', class: "menu-version" }, hAsync("ic-typography", { key: '3821ec288d9553aa73ad8ee23fd968121eab643d', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
+            } }, this.status !== "" && (hAsync("div", { key: '02add8908b41c544f2d01f0c780812d06ea749a9', class: "menu-status" }, hAsync("ic-typography", { key: '11311c3647663e911e45bd8de112f6e0ca895b11', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (hAsync("div", { key: 'c65a3bcac0289629f181fac381693ea648811312', class: "menu-version" }, hAsync("ic-typography", { key: '4de53de27365201c2cff5500c0b0d17da4628faa', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
     }
     get el() { return getElement(this); }
     static get style() { return IcNavigationMenuStyle0; }
@@ -16198,7 +16329,7 @@ class PageHeader {
         registerInstance(this, hostRef);
         this.resizeObserver = null;
         this.areButtonsReversed = false;
-        this.deviceSize = DEVICE_SIZES.XL;
+        this.deviceSize = DEVICE_SIZES$1.XL;
         /**
          * The alignment of the page header.
          */
@@ -16240,7 +16371,7 @@ class PageHeader {
         };
         this.applyReverseOrder = () => {
             var _a;
-            const currSize = getCurrentDeviceSize();
+            const currSize = getCurrentDeviceSize$1();
             if (currSize !== this.deviceSize) {
                 this.deviceSize = currSize;
             }
@@ -16268,11 +16399,11 @@ class PageHeader {
                 });
                 this.areButtonsReversed = !this.areButtonsReversed;
             };
-            if ((this.deviceSize > DEVICE_SIZES.S &&
+            if ((this.deviceSize > DEVICE_SIZES$1.S &&
                 actionAreaHeight <= max &&
                 !this.areButtonsReversed) ||
-                (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||
-                    this.deviceSize <= DEVICE_SIZES.S) &&
+                (((this.deviceSize > DEVICE_SIZES$1.S && actionAreaHeight > max) ||
+                    this.deviceSize <= DEVICE_SIZES$1.S) &&
                     this.areButtonsReversed)) {
                 appendActionContent();
             }
@@ -17287,6 +17418,7 @@ class PopoverMenu {
             this.el.getAttribute(this.ARIA_LABEL) === null) {
             console.error(`No aria-label specified for popover menu component - aria-label required`);
         }
+        this.watchOpenHandler();
     }
     componentWillRender() {
         this.anchorEl = this.findAnchorEl(this.anchor);
@@ -17386,17 +17518,17 @@ class PopoverMenu {
         }
     }
     render() {
-        return (hAsync(Host, { key: '0d600ea25ae46dca927e100d1c0f321afff64b01', class: {
+        return (hAsync(Host, { key: '22d7146fb66905fd58370ecdb03dcbe750d5c287', class: {
                 ["ic-popover-menu-open"]: !!this.open,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, hAsync("div", { key: 'c94ec7dcd89b7a9bcfed03d5def6cf1be0243d50', id: this.parentPopover === undefined
+            } }, hAsync("div", { key: '63efc4505ce4a676839c259b174604c79b0e7781', id: this.parentPopover === undefined
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            } }, hAsync("span", { key: 'a01071126c2bbd39f26e837988efabdd07fd3da8', class: {
+            } }, hAsync("span", { key: '14860cdc189b85398dd92dce52907869d8223598', class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined$1(this.submenuId) && (hAsync("span", { key: 'c5f225a965cb77832d77ad895e6feb070f61fc33' }, hAsync("span", { key: '1d5e3ff2f1c52e10bc8646ba04858be20b40c8c2', role: "menu" }, hAsync("ic-menu-item", { key: '4b3f0324f21ed33b24df68cb72ea16d5704b97b4', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, hAsync("svg", { key: 'cb9d8fdcef344a5d8659516de8baac5856b776bf', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, hAsync("path", { key: '1d79d4c02b06b5651878ebf11d4a6d6428a6f45e', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), hAsync("ic-typography", { key: '594d0374d03ec7764afe48b2e8d5959f39eb761d', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), hAsync("ul", { key: '7fa43dcda50ed5740f3922955e26c08946377f2e', class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, hAsync("slot", { key: '25da236864fe2afd3f94fe53a41b180566490e1f' }))))));
+            } }, isPropDefined$1(this.submenuId) && (hAsync("span", { key: '8e7a29c0d1159c156313247279c9b4bfb3e6ada4' }, hAsync("span", { key: 'c2f9aa89fb51c822714ba71d078add0f55e529b1', role: "menu" }, hAsync("ic-menu-item", { key: '619dc3d8ba9dd9d479623d67fad0e3bc0d45f113', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, hAsync("svg", { key: '61974e7d25308ab26ee4759243ba2f577f0e7ca8', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, hAsync("path", { key: '11e3b1b7496c19deeb22af35d4033e33d9c71b15', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), hAsync("ic-typography", { key: '4f55d2cdc04fdc15157a76176339d8cb6548b3f2', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), hAsync("ul", { key: 'ad2855ce0d5366fdf3a9ecaff58fba23edaee6f9', class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, hAsync("slot", { key: '1f8122018db85fc386bc24fdb710de976d967240' }))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -18565,7 +18697,7 @@ var Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w
 </svg>
 `;
 
-const icSelectCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:relative;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--menu-max-height:100px;--border-color:var(--ic-select-field-border);--border-color-hover:var(--ic-select-field-border-hover);--border-color-pressed:var(--ic-select-field-border-pressed);--border-color-disabled:var(--ic-select-field-border-disabled);--border-color-error:var(--ic-select-field-border-error);--border-color-error-hover:var(--ic-select-field-border-error-hover);--border-color-error-pressed:var(--ic-select-field-border-error-pressed);--border-color-success:var(--ic-select-field-border-success);--border-color-success-hover:var(--ic-select-field-border-success-hover);--border-color-success-pressed:var(--ic-select-field-border-success-pressed);--border-color-warning:var(--ic-select-field-border-warning);--border-color-warning-hover:var(--ic-select-field-border-warning-hover);--border-color-warning-pressed:var(--ic-select-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-select-field-labe);--ic-input-label-helper-text-color:var(\n    --ic-select-input-field-label-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-select-state-text);--ic-input-validation-error:var(--ic-select-state-icon-error);--ic-input-validation-warning-icon-color:var(--ic-select-state-icon-warning);--ic-input-validation-success-icon-color:var(--ic-select-state-icon-success);--menu-item-text-color:var(--ic-select-list-option-text);--menu-bg-color:var(--ic-select-list-option-background);--menu-border-color:var(--ic-select-dropdown-list-border)}:host(.ic-select-disabled){--ic-input-label-text-color:var(--ic-select-field-label-disabled);--ic-input-label-helper-text-color:var(\n    --ic-select-input-field-label-subtitle-disabled\n  )}:host(.ic-select-full-width){width:100%}ic-input-component-container.menu-open{--border-color:var(--ic-select-field-border-pressed)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-select-field-background);color:var(--ic-select-content-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:var(--ic-select-mobile-dropdown-icon);caret-color:var(--ic-select-input-field-text-cursor)}select option,.select-option-selected{color:var(--ic-select-list-option-text)}select:disabled{color:var(--ic-select-content-text-disabled);background-image:var(--ic-select-mobile-dropdown-icon-disabled)}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none;background-color:var(--ic-select-field-background);color:var(--ic-select-content-text)}.select-input:focus{outline:none}.select-input[disabled]{pointer-events:none}:host(.ic-select-searchable) .select-input{cursor:auto}.select-input.with-clear-button{padding-right:0}.value-text{max-width:calc(100% - (var(--ic-space-lg) + var(--ic-space-xxs)));box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:0 !important}.value-text.with-clear-button{padding-right:calc(var(--ic-space-xl) + var(--ic-space-xs))}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xxs);color:var(--ic-select-expand-icon-color)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-select-disabled) .expand-icon,:host(.ic-select-disabled) .expand-icon>svg>path{color:var(--ic-select-disabled-expand-icon-color)}:host(.ic-select-searchable) .expand-icon{padding-left:0;height:2.25rem}:host(.ic-select-searchable) .expand-icon>svg{height:2.25rem;padding:0 calc(var(--ic-space-xxxs) + var(--ic-space-xxs)) 0\n    var(--ic-space-xxs)}:host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-select-expand-icon-color)}.expand-icon-open,:host(.ic-select-searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.ic-select-disabled) .value-text,.placeholder{color:var(--ic-select-content-placeholder-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;align-items:center}.divider{width:var(--ic-space-1px);background-color:var(--ic-select-content-divider);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.ic-select-small) .divider{height:var(--ic-space-md)}:host(.ic-select-large) .divider{height:var(--ic-space-xl)}.clear-button{color:var(--ic-select-clear-button);position:absolute;right:calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-color-focus-inner);box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button.searchable{position:static}.searchable-select-results-status,.multi-select-selected-count{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}::slotted([slot=\"icon\"]){fill:var(--ic-select-content-placeholder-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-select-content-text)}.readonly ::slotted([slot=\"icon\"]){padding:0.375rem;margin-bottom:0.75rem}@media (forced-colors: active){.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
+const icSelectCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:relative;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--menu-max-height:100px;--border-color:var(--ic-select-field-border);--border-color-hover:var(--ic-select-field-border-hover);--border-color-pressed:var(--ic-select-field-border-pressed);--border-color-disabled:var(--ic-select-field-border-disabled);--border-color-error:var(--ic-select-field-border-error);--border-color-error-hover:var(--ic-select-field-border-error-hover);--border-color-error-pressed:var(--ic-select-field-border-error-pressed);--border-color-success:var(--ic-select-field-border-success);--border-color-success-hover:var(--ic-select-field-border-success-hover);--border-color-success-pressed:var(--ic-select-field-border-success-pressed);--border-color-warning:var(--ic-select-field-border-warning);--border-color-warning-hover:var(--ic-select-field-border-warning-hover);--border-color-warning-pressed:var(--ic-select-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-select-field-labe);--ic-input-label-helper-text-color:var(\n    --ic-select-input-field-label-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-select-state-text);--ic-input-validation-error:var(--ic-select-state-icon-error);--ic-input-validation-warning-icon-color:var(--ic-select-state-icon-warning);--ic-input-validation-success-icon-color:var(--ic-select-state-icon-success);--menu-item-text-color:var(--ic-select-list-option-text);--menu-bg-color:var(--ic-select-list-option-background);--menu-border-color:var(--ic-select-dropdown-list-border)}:host(.ic-select-disabled){--ic-input-label-text-color:var(--ic-select-field-label-disabled);--ic-input-label-helper-text-color:var(\n    --ic-select-input-field-label-subtitle-disabled\n  )}:host(.ic-select-full-width){width:100%}ic-input-component-container.menu-open{--border-color:var(--ic-select-field-border-pressed)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-select-field-background);color:var(--ic-select-content-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:var(--ic-select-mobile-dropdown-icon);caret-color:var(--ic-select-input-field-text-cursor)}select option,.select-option-selected{color:var(--ic-select-list-option-text)}select:disabled{color:var(--ic-select-content-text-disabled);background-image:var(--ic-select-mobile-dropdown-icon-disabled)}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none;background-color:var(--ic-select-field-background);color:var(--ic-select-content-text)}.select-input:focus{outline:none}.select-input[disabled]{pointer-events:none}:host(.ic-select-searchable) .select-input{cursor:auto}.select-input.with-clear-button{padding-right:0}.value-text{max-width:calc(100% - (var(--ic-space-lg) + var(--ic-space-xxs)));box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:0 !important}.value-text.with-clear-button{padding-right:calc(var(--ic-space-xl) + var(--ic-space-xs))}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xxs);color:var(--ic-select-expand-icon-color)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-select-disabled) .expand-icon,:host(.ic-select-disabled) .expand-icon>svg>path{color:var(--ic-select-disabled-expand-icon-color)}:host(.ic-select-searchable) .expand-icon{padding-left:0;height:2.25rem}:host(.ic-select-searchable) .expand-icon>svg{height:2.25rem;padding:0 calc(var(--ic-space-xxxs) + var(--ic-space-xxs)) 0\n    var(--ic-space-xxs)}:host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-select-expand-icon-color)}.expand-icon-open,:host(.ic-select-searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.ic-select-disabled) .value-text,:host(.ic-select-disabled) .select-input,.placeholder{color:var(--ic-select-content-placeholder-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;align-items:center}.divider{width:var(--ic-space-1px);background-color:var(--ic-select-content-divider);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.ic-select-small) .divider{height:var(--ic-space-md)}:host(.ic-select-large) .divider{height:var(--ic-space-xl)}.clear-button{color:var(--ic-select-clear-button);position:absolute;right:calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-color-focus-inner);box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button.searchable{position:static}.searchable-select-results-status,.multi-select-selected-count{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}::slotted([slot=\"icon\"]){fill:var(--ic-select-content-placeholder-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-select-content-text)}.readonly ::slotted([slot=\"icon\"]){padding:0.375rem;margin-bottom:0.75rem}@media (forced-colors: active){.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
 var IcSelectStyle0 = icSelectCss;
 
 let inputIds$2 = 0;
@@ -19420,16 +19552,20 @@ class Select {
         const valueLabelString = multiple
             ? this.getMultipleOptionsString(currValue)
             : this.getLabelFromValue(currValue);
-        return (hAsync(Host, { key: 'a08c97d65908130dc6b5de05218ae287550c48ac', class: {
+        const isClearable = !disabled &&
+            (searchable
+                ? this.searchableSelectInputValue
+                : currValue && showClearButton);
+        return (hAsync(Host, { key: 'b648c4ce0e6857a7d3cb8ee576227a76502238c2', class: {
                 "ic-select-disabled": !!disabled,
                 "ic-select-searchable": !!searchable,
                 [`ic-select-${size}`]: size !== "medium",
                 "ic-select-full-width": !!fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onBlur: this.onBlur }, hAsync("ic-input-container", { key: '93a38861621dd8f17daebf50ff7ef3d78992375f', readonly: readonly }, !hideLabel && (hAsync("ic-input-label", { key: '5804f9f6d7441274c0a3d2e879a31bd818d41d95', for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), hAsync("ic-input-component-container", { key: '6c108a21fcbfcda9d080fbed1a4b936140106904', ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (hAsync("span", { key: '94abd85030247c8d578167e9c822607017e41de1', slot: "left-icon", class: {
+            }, onBlur: this.onBlur }, hAsync("ic-input-container", { key: '2297242b13d87560ea0b3cdcd3dcef6d0fc82d8a', readonly: readonly }, !hideLabel && (hAsync("ic-input-label", { key: '65dc301bdd942344c0926f902add9da46dea58b9', for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), hAsync("ic-input-component-container", { key: 'b05b9bea3da1eec103e0a192f71123b5c4ecab4e', ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (hAsync("span", { key: 'a5c509b3c5ae8d0b4e7aadcbbe1dd24a1a35e6d2', slot: "left-icon", class: {
                 ["readonly"]: !!readonly,
                 ["has-value"]: !!this.value,
-            } }, hAsync("slot", { key: '54a0758173e4c5c40895cccdb894e1757b7623ec', name: "icon" }))), readonly ? (hAsync("ic-typography", null, hAsync("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (hAsync("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), hAsync("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
+            } }, hAsync("slot", { key: '0fb4fdcb39c9d5d8bd7b53011132d30060ea4f69', name: "icon" }))), readonly ? (hAsync("ic-typography", null, hAsync("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (hAsync("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), hAsync("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
             if (option.children) {
                 return (hAsync("optgroup", { label: option.label }, option.children.map((option) => (hAsync("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
             }
@@ -19439,8 +19575,7 @@ class Select {
         }))) : searchable ? (hAsync("div", { class: "searchable-select-container" }, hAsync("input", { class: {
                 "select-input": true,
                 "with-clear-button": !!this.searchableSelectInputValue,
-            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${this.open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue || undefined, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), this.searchableSelectInputValue &&
-            (showClearButton || searchable) && (hAsync("div", { class: "clear-button-container" }, hAsync("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
+            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${this.open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue || undefined, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), isClearable && (hAsync("div", { class: "clear-button-container" }, hAsync("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
                 ? "Clear input"
                 : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), hAsync("div", { class: "divider" }))), hAsync("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
@@ -19449,14 +19584,14 @@ class Select {
                 ? `${optionsSelectedCount}, ${valueLabelString}`
                 : valueLabelString) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, hAsync("ic-typography", { variant: "body", class: {
                 "value-text": true,
-                "with-clear-button": !!currValue && !!showClearButton,
+                "with-clear-button": !!isClearable,
                 placeholder: multiple
                     ? !this.value || this.value.length < 1
                     : !this.getLabelFromValue(currValue),
-            } }, valueLabelString || placeholder), hAsync("div", { class: "select-input-end" }, currValue && showClearButton && (hAsync("div", { class: "divider" })), hAsync("span", { class: {
+            } }, valueLabelString || placeholder), hAsync("div", { class: "select-input-end" }, isClearable && hAsync("div", { class: "divider" }), hAsync("span", { class: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (hAsync("ic-menu", { key: '7b42c8ca273832353725cf7b67a7ccb737ba8839', class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (hAsync("ic-menu", { key: 'b44ead58c89e05ff0bfcdeda827b4b436dd05f1c', class: {
                 "no-results": this.loading ||
                     this.hasTimedOut ||
                     (this.noOptions !== null &&
@@ -19466,7 +19601,7 @@ class Select {
                 ? this.searchableSelectElement
                 : this.customSelectElement), inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || multiple || this.selectOnEnter
                 ? "manual"
-                : "automatic", closeOnSelect: !multiple })), this.multiple && (hAsync("div", { key: '987a7413ebb847face31c4b6f056dca55f60f4df', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), hasValidationStatus(this.validationStatus, !!this.disabled) && (hAsync("ic-input-validation", { key: '236971ab6ec4b3bacce2c0f199870db2d560aa70', class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText || "", for: this.inputId })))));
+                : "automatic", closeOnSelect: !multiple })), this.multiple && (hAsync("div", { key: '178feb2274a4942b173858f35b98f2e64031d419', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), hasValidationStatus(this.validationStatus, !!this.disabled) && (hAsync("ic-input-validation", { key: '65c7647103b74749c240af0cfdee7c5e2afdeca0', class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText || "", for: this.inputId })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -19560,8 +19695,8 @@ class SideNavigation {
         this.resizeObserver = null;
         this.COLLAPSED_ICON_LABELS_END = "collapsed-icon-labels-end";
         this.COLLAPSED_ICON_LABELS_START = "collapsed-icon-labels-start";
-        this.deviceSize = getCurrentDeviceSize();
-        this.deviceSizeAppTitle = DEVICE_SIZES.S;
+        this.deviceSize = getCurrentDeviceSize$1();
+        this.deviceSizeAppTitle = DEVICE_SIZES$1.S;
         this.foregroundColor = getBrandForegroundAppearance();
         this.hasSecondaryNavigation = false;
         this.menuExpanded = false;
@@ -19648,7 +19783,7 @@ class SideNavigation {
         };
         this.toggleMenuExpanded = (expanded) => {
             var _a, _b, _c, _d;
-            if (this.deviceSize > DEVICE_SIZES.S) {
+            if (this.deviceSize > DEVICE_SIZES$1.S) {
                 this.menuExpanded = expanded;
             }
             if (this.menuExpanded) {
@@ -19694,11 +19829,14 @@ class SideNavigation {
                     }
                     const iconWrapper = document.createElement("div");
                     const icon = navItemSlot === null || navItemSlot === void 0 ? void 0 : navItemSlot.querySelector("svg");
+                    const badge = navItemSlot === null || navItemSlot === void 0 ? void 0 : navItemSlot.querySelector("ic-badge");
                     const label = (_a = navItem.textContent) === null || _a === void 0 ? void 0 : _a.trim();
                     const icTypography = document.createElement("ic-typography");
                     icTypography.classList.add("ic-typography-label", "hydrated", "navigation-item-side-nav-slotted-text");
+                    iconWrapper.style.position = "relative";
                     iconWrapper.style.height = "var(--ic-space-lg)";
                     icon && iconWrapper.append(icon);
+                    badge && iconWrapper.append(badge);
                     if (label) {
                         icTypography.textContent = label;
                     }
@@ -19843,7 +19981,7 @@ class SideNavigation {
             (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("padding-left", value);
         };
         this.renderAppTitle = (isAppNameSubtitleVariant) => {
-            const displayShortAppTitle = this.deviceSize <= DEVICE_SIZES.S && !isEmptyString$1(this.shortAppTitle);
+            const displayShortAppTitle = this.deviceSize <= DEVICE_SIZES$1.S && !isEmptyString$1(this.shortAppTitle);
             return (hAsync("ic-typography", { variant: displayShortAppTitle || isAppNameSubtitleVariant
                     ? "subtitle-small"
                     : "h3", "aria-label": displayShortAppTitle
@@ -19853,7 +19991,7 @@ class SideNavigation {
         this.resizeObserverCallback = (currSize) => {
             var _a, _b, _c, _d;
             this.deviceSize = currSize;
-            const isSmallAndDisableTopBar = currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;
+            const isSmallAndDisableTopBar = currSize === DEVICE_SIZES$1.S && !this.disableTopBarBehaviour;
             if (!this.disableAutoParentStyling) {
                 const topBarHeight = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".top-bar")) === null || _b === void 0 ? void 0 : _b.scrollHeight;
                 this.setParentPaddingTop(isSmallAndDisableTopBar ? `${topBarHeight}px` : "0");
@@ -19868,17 +20006,17 @@ class SideNavigation {
             }
             if (!this.disableAutoParentStyling) {
                 const paddingLeft = `calc(var(--ic-space-xxl) ${this.collapsedIconLabels ? "* 2" : "+ var(--ic-space-xs)"})`;
-                if (currSize > DEVICE_SIZES.L) {
+                if (currSize > DEVICE_SIZES$1.L) {
                     this.setParentPaddingTop("0");
                     this.setParentPaddingLeft("0");
                 }
-                else if ((currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&
-                    currSize <= DEVICE_SIZES.M &&
+                else if ((currSize > DEVICE_SIZES$1.S || this.disableTopBarBehaviour) &&
+                    currSize <= DEVICE_SIZES$1.M &&
                     this.static) {
                     this.setParentPaddingLeft(paddingLeft);
                 }
-                else if ((currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&
-                    currSize <= DEVICE_SIZES.L) {
+                else if ((currSize > DEVICE_SIZES$1.S || this.disableTopBarBehaviour) &&
+                    currSize <= DEVICE_SIZES$1.L) {
                     this.setParentPaddingLeft(this.static && this.menuExpanded
                         ? "calc(var(--ic-space-xl) * 10)"
                         : paddingLeft);
@@ -19887,7 +20025,7 @@ class SideNavigation {
         };
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
-                const currSize = getCurrentDeviceSize();
+                const currSize = getCurrentDeviceSize$1();
                 this.deviceSizeAppTitle = currSize;
                 this.resizeObserverCallback(currSize);
             });
@@ -19938,7 +20076,7 @@ class SideNavigation {
     componentDidLoad() {
         this.emitSideNavigationExpanded({
             sideNavExpanded: this.menuExpanded,
-            sideNavMobile: this.deviceSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour,
+            sideNavMobile: this.deviceSize === DEVICE_SIZES$1.S && !this.disableTopBarBehaviour,
         });
         checkResizeObserver$1(this.runResizeObserver);
         this.styleSlottedCollapsedIconLabel();
@@ -19960,10 +20098,10 @@ class SideNavigation {
     }
     render() {
         const { appTitle, menuOpen, foregroundColor, menuExpanded, href, status, version, collapsedIconLabels, inline, } = this;
-        const isSDevice = !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;
-        const isMdDevice = this.deviceSize === DEVICE_SIZES.M;
-        const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;
-        const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;
+        const isSDevice = !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES$1.S;
+        const isMdDevice = this.deviceSize === DEVICE_SIZES$1.M;
+        const isLgDevice = this.deviceSize >= DEVICE_SIZES$1.L;
+        const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES$1.S;
         const displayExpandBtn = isMdDevice || this.disableTopBarBehaviour || (isLgDevice && !this.static);
         const topBarProps = {
             isSDevice,
@@ -19973,21 +20111,21 @@ class SideNavigation {
             isAppNameSubtitleVariant,
             appTitle: appTitle || "",
         };
-        return (hAsync(Host, { key: 'c8a0d9085354c61747396cd721c9f3b4b07c6620', class: {
+        return (hAsync(Host, { key: 'da621f79cc6d0e721b46d89689623ab603869c5c', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
                 "sm-expanded": !isSDevice && menuExpanded,
-                "side-display": this.deviceSize > DEVICE_SIZES.S || !!this.disableTopBarBehaviour,
+                "side-display": this.deviceSize > DEVICE_SIZES$1.S || !!this.disableTopBarBehaviour,
                 [`ic-side-navigation-${IcBrandForegroundEnum$1.Dark}`]: foregroundColor === IcBrandForegroundEnum$1.Dark,
                 ["collapsed-labels"]: !isSDevice && !menuExpanded && !!collapsedIconLabels,
                 ["ic-side-navigation-inline"]: !!inline,
-            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { key: '61bf137082753ff275d530c92a3b5e2baa77dfc8', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { key: '968cce83f46508eef2f1d36cbcdf71b999ae8d01', class: "side-navigation-inner" }, isSlotUsed$1(this.el, "primary-navigation") && (hAsync("nav", { key: '0d6011c95720e19bb9257857a0c8d5fc8582586e', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, hAsync("span", { key: 'fd20471ab31baffaaa45ab9d4b601a5b93861211', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), hAsync("ul", { key: '443bdddf3f7e67f465e8ab713129c62e933218dc', class: "navigation-list" }, hAsync("slot", { key: 'ef84cdd387fcc0d08c99b3348b12a5d75dc8cbb5', name: "primary-navigation" }))))), hAsync("div", { key: '214e3aedbf7490f07d479ded04b4948a32b8762a', class: {
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { key: 'e1a1746cf0b72f95df40c4de8c5b24142e42958c', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), hAsync("div", { key: 'fb4d44f6de1f637c1f913c7bc1979d261b138961', class: "side-navigation-inner" }, isSlotUsed$1(this.el, "primary-navigation") && (hAsync("nav", { key: 'd242bf8b7266a913ddf15cd6d3c710b67998478b', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, hAsync("span", { key: '5496dfe55e4ea5b5a86ff9cbf49d3a1948580c38', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), hAsync("ul", { key: '5c963c5a63930a85c8d56a8acf9f402b11cb5717', class: "navigation-list" }, hAsync("slot", { key: '6e9893f2302d72b8a8dd8c91efc69324e28b7845', name: "primary-navigation" }))))), hAsync("div", { key: '3a5a9c6510d4e70389ff271e089d46732b7ff35a', class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed$1(this.el, "secondary-navigation") && (hAsync("nav", { key: '049842dcc0a218e346cb5801451539238026bd1e', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, hAsync("span", { key: '43a512817c2f6ebe62a6619e321dd09f30bd1892', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), hAsync("ul", { key: '8559c056204586c0565b90e73cb6dc364f50a673', class: "navigation-list" }, hAsync("slot", { key: '2efcf26eb30b17f011cc5abc8e530e14f07a3e18', name: "secondary-navigation" })))), hAsync("div", { key: 'd517c80b9c1d2e5d1a2d55c9d646fcdc618193b9', class: "bottom-side-nav" }, this.hasSecondaryNavigation && hAsync("ic-divider", { key: '13c8a9d4ec0dea727e559257836201af55198741' }), displayExpandBtn && (hAsync("button", { key: '5740a000e2274d8dd37d859818489eba0c81c04e', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), hAsync("div", { key: '5d2117c9116ec48ede52c2afd331cd28fc499627', class: "app-status-wrapper" }, status !== "" && (hAsync("div", { key: '7e02d31bb85fb286161a38fce68cda91461110fa', class: {
+            } }, isSlotUsed$1(this.el, "secondary-navigation") && (hAsync("nav", { key: 'a325206b9aaab5d2c68e0854b6d88f6c0754a2f7', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, hAsync("span", { key: 'cce653a875b1768a5c5960d2c86a55e42e104456', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), hAsync("ul", { key: 'd61e1b6969d597bdb48ba59be75e50f95c3327e9', class: "navigation-list" }, hAsync("slot", { key: '75d0ddba3f9b6663f0888e579d60dfdf77455944', name: "secondary-navigation" })))), hAsync("div", { key: 'a5e646f3027491a5e3288bafb03a49699ad7fe16', class: "bottom-side-nav" }, this.hasSecondaryNavigation && hAsync("ic-divider", { key: '709a1cd78355adb93d7d5e0636252ba8b53cc3dc' }), displayExpandBtn && (hAsync("button", { key: '2f61bbc7a06cbd5f1d90a126507a6fce4d329545', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), hAsync("div", { key: '8c21e3ecb652850205f4fbe785be95acd7d8120b', class: "app-status-wrapper" }, status !== "" && (hAsync("div", { key: '96b2fe13baecbb436c6f90d69bc1eba2447ef37d', class: {
                 ["app-status"]: true,
-            } }, hAsync("ic-typography", { key: '396a93337b049b5055d8ee6c71bbc5b523185ef2', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (hAsync("ic-typography", { key: 'addaab0b5c057e975cf4e186fdaf92ca6650a5b2', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+            } }, hAsync("ic-typography", { key: '017292fb3f29859ee96b6af1f12e787a95300a3d', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (hAsync("ic-typography", { key: 'ded1fc5cf16022ec9c2eea424910cbc0c88132a8', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20071,26 +20209,26 @@ class Skeleton {
     }; }
 }
 
-const icSkipLinkCss = "ic-link{position:absolute;left:-9999px}ic-link:focus{z-index:var(--ic-z-index-skip-link);left:var(--ic-space-sm);padding:var(--ic-space-sm);box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}.display-top:focus{top:var(--ic-space-sm)}.full-width:focus{display:flex;justify-content:center;right:var(--ic-space-sm)}.show-background{background:var(--ic-skip-link-background)}";
+const icSkipLinkCss = ":host{display:block}ic-link{position:absolute;left:-9999px}ic-link:focus{z-index:var(--ic-z-index-skip-link);left:var(--ic-space-sm);padding:var(--ic-space-sm);box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);width:-moz-fit-content;width:fit-content}.display-top:focus{top:var(--ic-skip-link-position-top, var(--ic-space-sm))}.inline:focus{position:static;display:inline-block;margin:var(--ic-space-xs) 0}.full-width:focus{display:flex;right:var(--ic-space-sm);width:auto}.inline.full-width:focus{justify-content:start}.show-background{background:var(--ic-skip-link-background)}";
 var IcSkipLinkStyle0 = icSkipLinkCss;
 
 class SkipLink {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
-         * If `true`, the link will fill the width of the page.
+         * If `true`, the skip link will fill the width of the page.
          */
         this.fullWidth = false;
         /**
-         * If `true`, the link will appear inline with surrounding page content when focused.
+         * If `true`, the skip link will appear inline with surrounding page content when focused.
          */
         this.inline = false;
         /**
-         * The label displayed when the link is focused.
+         * The label displayed when the skip link is focused.
          */
         this.label = "Skip to main content";
         /**
-         * If `true`, the link will display as black in the light theme, and white in the dark theme.
+         * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
          */
         this.monochrome = false;
         /**
@@ -20104,13 +20242,14 @@ class SkipLink {
     }
     render() {
         const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
-        return (hAsync(Host, { key: '4baf3d6889dd78858a743a8f67196b6f491a05ad', class: {
+        return (hAsync(Host, { key: 'ed2c4e6527f04dbf634a971c0f8e5ebc6655f27e', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, hAsync("ic-link", { key: '77b4fb3b7edb92f9438394640fc0815af8b69b4b', class: {
+            } }, hAsync("ic-link", { key: 'f72fcc3cdff5e39b0ed5ca843feed93241ff5603', class: {
                 "display-top": !inline,
-                "full-width": fullWidth,
+                "full-width": !!fullWidth,
                 "show-background": !transparentBackground,
-            }, href: target, monochrome: monochrome, theme: theme }, label)));
+                inline: !!inline,
+            }, href: `#${target}`, monochrome: monochrome, theme: theme }, label)));
     }
     get el() { return getElement(this); }
     static get style() { return IcSkipLinkStyle0; }
@@ -20132,7 +20271,7 @@ class SkipLink {
     }; }
 }
 
-const icStatusTagCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.tag{padding:var(--ic-space-xxs) var(--ic-space-sm);font-size:0.875rem;border-radius:var(--ic-space-md);display:inline-block;min-width:2.5rem;text-align:center;--ic-typography-color:var(--ic-status-tag-text)}.small{padding:var(--ic-space-xxxs) var(--ic-space-sm);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.large{padding:var(--ic-space-xs) var(--ic-space-sm);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.filled-neutral{background-color:var(--ic-status-tag-neutral)}.filled-success{background-color:var(--ic-status-tag-success)}.filled-warning{background-color:var(--ic-status-tag-warning);--ic-typography-color:var(--ic-status-tag-text-inverted)}.filled-danger{background-color:var(--ic-status-tag-error)}.outlined{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n    calc(var(--ic-space-sm) - var(--ic-space-1px))}.outlined.small{padding:var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px))}.outlined.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))\n    calc(var(--ic-space-sm) - var(--ic-space-1px))}.outlined-neutral{background-color:var(--ic-status-tag-outlined-background-neutral);border:var(--ic-border-width) solid var(--ic-status-tag-outlined-neutral);--ic-typography-color:var(--ic-status-tag-text-inverted)}.outlined-success{background-color:var(--ic-status-tag-outlined-background-success);border:var(--ic-border-width) solid var(--ic-status-tag-outlined-success);--ic-typography-color:var(--ic-status-tag-text-inverted)}.outlined-warning{background-color:var(--ic-status-tag-outlined-background-warning);border:var(--ic-border-width) solid var(--ic-status-tag-outlined-warning);--ic-typography-color:var(--ic-status-tag-text-inverted)}.outlined-danger{background-color:var(--ic-status-tag-outlined-background-error);border:var(--ic-border-width) solid var(--ic-status-tag-outlined-error);--ic-typography-color:var(--ic-status-tag-text-inverted)}@media (forced-colors: active){.tag{border:var(--ic-border-hc);-ms-high-contrast-adjust:none;forced-color-adjust:none}}";
+const icStatusTagCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.tag{padding:var(--ic-space-xxs) var(--ic-space-sm);font-size:0.875rem;border-radius:var(--ic-space-md);display:inline-block;min-width:2.5rem;text-align:center;--ic-typography-color:var(--ic-status-tag-text)}.small{padding:var(--ic-space-xxxs) var(--ic-space-sm);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.large{padding:var(--ic-space-xs) var(--ic-space-sm);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.filled-neutral{background-color:var(--ic-status-tag-neutral)}.filled-success{background-color:var(--ic-status-tag-success)}.filled-warning{background-color:var(--ic-status-tag-warning);--ic-typography-color:var(--ic-status-tag-filled-warning-text)}.filled-danger{background-color:var(--ic-status-tag-error)}.outlined{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n    calc(var(--ic-space-sm) - var(--ic-space-1px))}.outlined.small{padding:var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px))}.outlined.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))\n    calc(var(--ic-space-sm) - var(--ic-space-1px))}.outlined-neutral{background-color:var(--ic-status-tag-outlined-background-neutral);border:var(--ic-border-width) solid var(--ic-status-tag-outlined-neutral);--ic-typography-color:var(--ic-status-tag-text-inverted)}.outlined-success{background-color:var(--ic-status-tag-outlined-background-success);border:var(--ic-border-width) solid var(--ic-status-tag-outlined-success);--ic-typography-color:var(--ic-status-tag-text-inverted)}.outlined-warning{background-color:var(--ic-status-tag-outlined-background-warning);border:var(--ic-border-width) solid var(--ic-status-tag-outlined-warning);--ic-typography-color:var(--ic-status-tag-text-inverted)}.outlined-danger{background-color:var(--ic-status-tag-outlined-background-error);border:var(--ic-border-width) solid var(--ic-status-tag-outlined-error);--ic-typography-color:var(--ic-status-tag-text-inverted)}@media (forced-colors: active){.tag{border:var(--ic-border-hc);-ms-high-contrast-adjust:none;forced-color-adjust:none}}";
 var IcStatusTagStyle0 = icStatusTagCss;
 
 class StatusTag {
@@ -20199,7 +20338,7 @@ var warningIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" x
 <path d="M7.99935 4.32666L13.0193 13H2.97935L7.99935 4.32666ZM7.99935 1.66666L0.666016 14.3333H15.3327L7.99935 1.66666ZM8.66602 11H7.33268V12.3333H8.66602V11ZM8.66602 6.99999H7.33268V9.66666H8.66602V6.99999Z" fill="currentColor"/>
 </svg>`;
 
-const icStepCss = ":host{display:flex;flex:auto;--ic-typography-color:currentcolor}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.heading,.subheading,.step-status,.next-step{white-space:pre-line}.next-step{color:var(--ic-stepper-compact-step-next-text)}.visually-hidden{position:absolute;left:-625rem;top:auto;width:1px;height:1px;overflow:hidden}:host(.ic-step-compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-step-indicator-status-current);--compact-step-outer-color:var(--ic-step-indicator-status-remaining);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.ic-step-compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.ic-step-compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host ic-loading-indicator::part(ic-loading-container){border-radius:50%}:host() ic-loading-indicator::part(ic-loading-container){background-color:var(--ic-step-indicator-background)}:host(.ic-step-compact) .heading-area{display:flex;flex-direction:column;width:14.25rem}:host(.ic-step-compact) .heading{color:var(--ic-stepper-compact-step-title)}:host(.ic-step-compact) .disabled .heading{color:var(--ic-stepper-compact-step-title)}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-stepper-compact-step-requirement-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-stepper-compact-step-completed-text)}.compact-step-disabled :is(.heading,.step-status){color:var(--ic-stepper-compact-step-requirement-text-disabled)}.step-num{color:var(--ic-stepper-compact-step-stage-text);white-space:nowrap}:host(.ic-step-compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.ic-step-compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-step-default) .step{flex-direction:column}:host(.ic-step-default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.ic-step-default) .step-icon{border-radius:50%}:host(.ic-step-default) .step-icon{background-color:var(--ic-step-number-inactive)}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--ic-step-number-text-inactive)}:host(.ic-step-default) .current{color:var(--ic-status-info-default)}:host(.ic-step-default.ic-step-light) .current,:host(.ic-step-default.ic-step-light) .current .heading-area{color:var(--ic-status-info-contrast)}:host(.ic-step-default) .heading-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.ic-step-light) .heading-area{color:var(--ic-architectural-200)}:host(.ic-step-compact.ic-step-light) .heading-area{color:var(--ic-architectural-white)}:host(.ic-step-default) .heading,.subheading{width:-moz-fit-content;width:fit-content}.heading{color:var(--ic-step-title)}.current .heading{color:var(--ic-step-title-current)}.completed .heading{color:var(--ic-step-title-success)}.disabled .heading{color:var(--ic-step-title-disabled)}.subheading{color:var(--ic-step-title-status-text-inactive)}.current .subheading{color:var(--ic-step-title-status-text-current)}.disabled .subheading{color:var(--ic-step-title-status-text-disabled)}:host(.ic-step-default) .completed{color:var(--ic-status-success-default)}:host(.ic-step-default.ic-step-light) .completed,:host(.ic-step-default.ic-step-light) .completed .heading-area{color:var(--ic-status-success-contrast)}.active .step-icon-inner{box-shadow:inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem}:host(.ic-step-light) .active .step-icon-inner{color:var(--ic-architectural-white)}.current .step-icon-inner{background-color:var(--ic-step-number-background-active);color:var(--ic-step-number-text)}.disabled{color:var(--ic-architectural-200)}:host(.ic-step-default.ic-step-light) .disabled,:host(.ic-step-default.ic-step-light) .disabled .heading-area{color:var(--ic-architectural-400)}.disabled .step-icon-inner{border:var(--ic-border-width) dashed var(--ic-step-number-disabled);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs));color:var(--ic-step-number-text-disabled)}.disabled .step-icon{background-color:transparent !important}.completed .step-icon-inner{background:var(--ic-step-number-background-success);box-shadow:inset var(--ic-step-number-background-success) 0 0 0\n    var(--ic-space-xxxs);border-radius:100%}:host(.ic-step-default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));background-color:var(--ic-step-number-current-outer-fill);}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-stepper-connector-remaining-status);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-stepper-connector-disabled);border-radius:0}.completed .step-connect{background-color:var(--ic-stepper-connector-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-stepper-connector-current-status)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-step-number-icon-success)}@media (forced-colors: active){.compact-step-disabled :is(.heading,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-border-hc)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.ic-step-default) .current .step-icon{padding:0;border:none}.disabled,.disabled .heading-area,.disabled .step-icon-inner,.disabled .heading{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
+const icStepCss = ":host{display:flex;flex:auto;--ic-typography-color:currentcolor}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.heading,.subheading,.step-status,.next-step{white-space:pre-line}.next-step{color:var(--ic-stepper-compact-step-next-text)}.visually-hidden{position:absolute;left:-625rem;top:auto;width:1px;height:1px;overflow:hidden}:host(.ic-step-compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-step-indicator-status-current);--compact-step-outer-color:var(--ic-step-indicator-status-remaining);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.ic-step-compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.ic-step-compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host ic-loading-indicator::part(ic-loading-container){border-radius:50%}:host() ic-loading-indicator::part(ic-loading-container){background-color:var(--ic-step-indicator-background)}:host(.ic-step-compact) .heading-area{display:flex;flex-direction:column;width:14.25rem}:host(.ic-step-compact) .heading{color:var(--ic-stepper-compact-step-title)}:host(.ic-step-compact) .disabled .heading{color:var(--ic-stepper-compact-step-title-disabled)}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-stepper-compact-step-requirement-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-stepper-compact-step-completed-text)}.compact-step-disabled :is(.heading,.step-status){color:var(--ic-stepper-compact-step-requirement-text-disabled)}.step-num{color:var(--ic-stepper-compact-step-stage-text);white-space:nowrap}:host(.ic-step-compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.ic-step-compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-step-default) .step{flex-direction:column}:host(.ic-step-default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.ic-step-default) .step-icon{border-radius:50%}:host(.ic-step-default) .step-icon{background-color:var(--ic-step-number-inactive)}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%;color:var(--ic-step-number-text-inactive)}:host(.ic-step-default) .current{color:var(--ic-status-info-default)}:host(.ic-step-default.ic-step-light) .current,:host(.ic-step-default.ic-step-light) .current .heading-area{color:var(--ic-status-info-contrast)}:host(.ic-step-default) .heading-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.ic-step-light) .heading-area{color:var(--ic-architectural-200)}:host(.ic-step-compact.ic-step-light) .heading-area{color:var(--ic-architectural-white)}:host(.ic-step-default) .heading,.subheading{width:-moz-fit-content;width:fit-content}.heading{color:var(--ic-step-title)}.current .heading{color:var(--ic-step-title-current)}.completed .heading{color:var(--ic-step-title-success)}.disabled .heading{color:var(--ic-step-title-disabled)}.subheading{color:var(--ic-step-title-status-text-inactive)}.current .subheading{color:var(--ic-step-title-status-text-current)}.disabled .subheading{color:var(--ic-step-title-status-text-disabled)}:host(.ic-step-default) .completed{color:var(--ic-status-success-default)}:host(.ic-step-default.ic-step-light) .completed,:host(.ic-step-default.ic-step-light) .completed .heading-area{color:var(--ic-status-success-contrast)}.active .step-icon-inner{box-shadow:inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem}:host(.ic-step-light) .active .step-icon-inner{color:var(--ic-architectural-white)}.current .step-icon-inner{background-color:var(--ic-step-number-background-active);color:var(--ic-step-number-text-current)}.disabled{color:var(--ic-architectural-200)}:host(.ic-step-default.ic-step-light) .disabled,:host(.ic-step-default.ic-step-light) .disabled .heading-area{color:var(--ic-architectural-400)}.disabled .step-icon-inner{border:var(--ic-border-width) dashed var(--ic-step-number-disabled);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs));color:var(--ic-step-number-text-disabled)}.disabled .step-icon{background-color:transparent !important}.completed .step-icon-inner{background:var(--ic-step-number-background-success);box-shadow:inset var(--ic-step-number-background-success) 0 0 0\n    var(--ic-space-xxxs);border-radius:100%}:host(.ic-step-default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));background-color:var(--ic-step-number-current-outer-fill);}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-stepper-connector-remaining-status);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-stepper-connector-disabled);border-radius:0}.completed .step-connect{background-color:var(--ic-stepper-connector-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-stepper-connector-current-status)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-step-number-icon-success)}@media (forced-colors: active){.compact-step-disabled :is(.heading,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-border-hc)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.ic-step-default) .current .step-icon{padding:0;border:none}.disabled,.disabled .heading-area,.disabled .step-icon-inner,.disabled .heading{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
 var IcStepStyle0 = icStepCss;
 
 class Step {
@@ -20265,21 +20404,22 @@ class Step {
             statusIcon = (hAsync("span", { key: '37abea1127139c235751e0e5fa159c0123e26045', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (hAsync("div", { key: '0a05a9b7ae4878fb3b9be55a8f4f948fe4a27536', class: {
+        const compactStep = (hAsync("div", { key: 'b085f35dc01eaca3182762eaa6b985fcdbcc36f6', class: {
                 ["step"]: true,
                 ["current"]: !!this.current,
                 [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
-            } }, hAsync("ic-loading-indicator", { key: '87ae2770c142889bf7565ead6cf7322df9d2d76d', class: {
+                ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
+            } }, hAsync("ic-loading-indicator", { key: '76d67bd6140d55727e79410263986a6a8b7e8f39', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": this.type === "disabled" ||
                     this.compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), hAsync("div", { key: '84896f3f22cb2ea8fe8794be14b70341d8e23367', class: "heading-area" }, hAsync("ic-typography", { key: 'd62bf42956fcf9ed02747d0a9cf34c0461a26b62', variant: "h4", class: "heading" }, this.heading), hAsync("div", { key: 'b8e96361666f06ac48635cc88cdaf0b127059ed2', class: "info-line" }, hAsync("ic-typography", { key: 'bebffda119401ad7441f247c915b7d535a7be967', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, hAsync("span", { key: 'd06f2369b86d90f4e8f97a6487235a084289705c', class: "visually-hidden" }, " steps")), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), hAsync("div", { key: 'e1a0ab7ef462c6f9db62d1d5cc21518230c31531', class: "heading-area" }, hAsync("ic-typography", { key: 'cebf670137674ac37747fea2e320d36a465cac42', variant: "h4", class: "heading" }, this.heading), hAsync("div", { key: 'c9a9a5ae0bef717bbdb1cd690596dac06b6a73e2', class: "info-line" }, hAsync("ic-typography", { key: '311760b3af071f4d9864954fb727a9c9b1c7c00d', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, hAsync("span", { key: '87135f130983c602f8909da57c12c2ae02d3655d', class: "visually-hidden" }, " steps")), (this.subheading ||
             this.type === "completed" ||
             this.type === "disabled" ||
             (this.variant === "compact" &&
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
-            !!this.status) && (hAsync("div", { key: '767ada3bd54f2ace302dc35bade3820b303beaeb', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (hAsync("ic-typography", { key: 'd32d553cbc9ed7626bd31f66376f40fc3bd5cafc', variant: "caption" }, this.subheading !== null && isPropDefined$1(this.subheading)
+            !!this.status) && (hAsync("div", { key: '0a5a230fd701a8a589dc774d7d5a11ab4a8f22ec', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (hAsync("ic-typography", { key: '60f32a581e356b2b86616c0a4d6895e2a765e661', variant: "caption" }, this.subheading !== null && isPropDefined$1(this.subheading)
             ? this.subheading
             : this.type === "disabled" ||
                 (this.variant === "compact" &&
@@ -20292,26 +20432,26 @@ class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (this.type !== "completed") {
-            icon = (hAsync("ic-typography", { key: '460d428fc84a424c2deb2bd19673bac9838fc83c', variant: "subtitle-small" }, hAsync("span", { key: '2f9976552109cb2369374d045da5695d0cca48a9', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (hAsync("ic-typography", { key: '316ca02b237660b9ce7dfc2cfa7ee7a9a405850f', variant: "subtitle-small" }, hAsync("span", { key: '28c285e0de19f766bde7540a84a7b6f92f2722f6', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (hAsync("div", { key: '6e6d3994d3b43e7aa1b516ffb8fada92af8df313', class: "step-icon-inner", "aria-hidden": "true" }, hAsync("span", { key: 'b45fb9429fcdf1158944f8e3f0912b5d586f879f', class: "check-icon", innerHTML: checkIcon })));
+            icon = (hAsync("div", { key: '8a57441521368e3e48abda6607fa7ed834b76539', class: "step-icon-inner", "aria-hidden": "true" }, hAsync("span", { key: '244a4c8979621768867cb1b876ad41c96368f048', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.type === "current" && (hAsync("div", { key: 'df1360298cadc4fe9fcc0b2962505ca31f77fdd2', class: "step-connect-inner" }));
-        const finalStep = !this.lastStep && (hAsync("div", { key: '946927672f4115daf7ef35bb577f12ae1e8de66f', class: {
+        const partialBar = this.type === "current" && (hAsync("div", { key: 'e0e0134d5e347c12d2db12c7a7c1fd2f796e680a', class: "step-connect-inner" }));
+        const finalStep = !this.lastStep && (hAsync("div", { key: '87b3f5541a9fa51784d054ab418ffd270aa5d131', class: {
                 ["step-connect"]: true,
                 ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
-        const defaultStep = (hAsync("div", { key: '637edc67a54d7edab0bbf31c7e86e623f78f9966', class: {
+        const defaultStep = (hAsync("div", { key: '942e50008de22ed3bf9cfc6f5878fe20780224d4', class: {
                 ["step"]: true,
                 [`${this.type}`]: true,
-            } }, hAsync("div", { key: '961519160c7998023c7646cb0c52036951aa6316', class: "step-top" }, hAsync("div", { key: '2764963722ae57aad38766d26a5fd13e179aac61', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (hAsync("div", { key: '6ebf91f7c29e29593d9fbaf78c0aa7db7dbb142e', class: "heading-area" }, this.heading && (hAsync("ic-typography", { key: 'd299782ac1b0ae99f4f3a95dc478a49f27327b75', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (hAsync("ic-typography", { key: '9c20efcfae784881552c48f9a4cd779c24126ae6', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined$1(this.subheading)
+            } }, hAsync("div", { key: 'ea7466090610c4ca42426a95c5b5eea07c0a3e20', class: "step-top" }, hAsync("div", { key: '8e7a36165cdb25aa4939e7dad24211b6f42deb9b', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (hAsync("div", { key: 'd6e7a5a41587217e8e29390f7fdccc06c2c772d8', class: "heading-area" }, this.heading && (hAsync("ic-typography", { key: '235524fbe7fc0dd3991dfef222bdf29dfe80bedc', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (hAsync("ic-typography", { key: '2d29260629ca84280981ceedc7196fd0be347c3b', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined$1(this.subheading)
             ? this.subheading
             : stepStatus))))));
-        return (hAsync(Host, { key: 'c12621f9fa0f127a55e2c72b6f9ff34a6a6be5a9', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
+        return (hAsync(Host, { key: 'c8b18833e54cb4cf0eac30b3f3b487a53ef9392f', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
                 ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
                 [`ic-step-${this.variant}`]: true,
@@ -21950,13 +22090,13 @@ class Toast {
     }
     render() {
         const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
-        return (hAsync(Host, { key: '1b2fa0d83f73637acb0a841a766fbf3dfaaef093', class: { ["ic-toast-hidden"]: !visible }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, hAsync("div", { key: '79f9dcb0d96b66e6ee3ca1efc475fcdf11eb3501', class: "container" }, variant && visible && (hAsync("div", { key: '5942e5d3bbf0eb6bb3f86c91f9e845a711d6fd23', class: "toast-icon-container" }, hAsync("div", { key: 'a043c4d4fde7528a189833aa54e79457b033d70a', class: {
+        return (hAsync(Host, { key: 'fa6a7d6728859eb5b7269aa107c1245f95e8c070', class: { ["ic-toast-hidden"]: !visible }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, hAsync("div", { key: 'bd9d63cf3aa162336af8c98c7b5ef0eef9727a05', class: "container" }, variant && visible && (hAsync("div", { key: 'ab69806c35fc984bf2bccdb45f2568dd7e43b45c', class: "toast-icon-container" }, hAsync("div", { key: 'f69c093a9d15bcf6592c39736657ea7d921b436b', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), variant === "neutral" ? (hAsync("slot", { name: "neutral-icon" })) : (hAsync("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), hAsync("div", { key: '9e45301a32b8050c10774ce191201093f029a0ff', class: {
+            } }), variant === "neutral" ? (hAsync("slot", { name: "neutral-icon" })) : (hAsync("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), hAsync("div", { key: '58c6b130bf233edf14a9306eded733671a9bcc7a', class: {
                 ["toast-content"]: true,
                 ["no-icon"]: variant === "neutral" && !isSlotUsed$1(this.el, "neutral-icon"),
-            } }, hAsync("div", { key: 'c710dfa0f7a59bf990c6d655f6d62eab413613cb', class: "toast-text" }, hAsync("ic-typography", { key: '16a3f0902c5571b861c1eae5ea1e4baa0baf2789', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? hAsync("h5", null, heading) : hAsync("p", null, heading))), message && (hAsync("ic-typography", { key: '4bdc76c3159b50ef16633a72a02ae731620eb2a4', variant: "body", class: "toast-message" }, visible && hAsync("p", { key: '0ebd814f2723eaa2a48175f8fb2b406b8ef30612' }, message)))), isSlotUsed$1(this.el, "action") && (hAsync("div", { key: '25251e47cf802b98e82639ff9cdde60a721f197b', class: "toast-action-container" }, hAsync("slot", { key: '3873850f02a05064b979f8203a54d66e9aeb9a43', name: "action" })))), !isManual ? (hAsync("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (hAsync("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", "aria-label": dismissButtonAriaLabel })))));
+            } }, hAsync("div", { key: 'a99ef4a5497b62d3724f1c3001b592bee3b7c76f', class: "toast-text" }, hAsync("ic-typography", { key: '08ff7bf5c471121d854cdc34d78ff42194c6a50d', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? hAsync("h5", null, heading) : hAsync("p", null, heading))), message && (hAsync("ic-typography", { key: '905b01333ed90c57a3e538b1fb9f10df970f1331', variant: "body", class: "toast-message" }, visible && hAsync("p", { key: 'a54c00d59185300ec781bbc4d2cf8f19aaa695a9' }, message)))), isSlotUsed$1(this.el, "action") && (hAsync("div", { key: '56a80eeb87e7c886cb4dd31ec059020ff1ba820b', class: "toast-action-container" }, hAsync("slot", { key: '4e09a9eaf12503e0bd377e112617e8390b1eac5e', name: "action" })))), !isManual ? (hAsync("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (hAsync("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", "aria-label": dismissButtonAriaLabel })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22782,7 +22922,7 @@ class TopNavigation {
         this.hasSearchSlotContent = false;
         this.resizeObserver = null;
         this.searchBar = null;
-        this.deviceSize = DEVICE_SIZES.XL;
+        this.deviceSize = DEVICE_SIZES$1.XL;
         this.foregroundColor = getBrandForegroundAppearance();
         this.hasFullWidthSearchBar = false;
         this.mobileSearchBarVisible = false;
@@ -22798,7 +22938,7 @@ class TopNavigation {
          * Can set a custom breakpoint for the top navigation to switch to mobile mode.
          * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
          */
-        this.customMobileBreakpoint = DEVICE_SIZES.L;
+        this.customMobileBreakpoint = DEVICE_SIZES$1.L;
         /**
          *  The URL to navigate to when the app title is clicked.
          */
@@ -22878,7 +23018,7 @@ class TopNavigation {
         };
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
-                this.resizeObserverCallback(getCurrentDeviceSize());
+                this.resizeObserverCallback(getCurrentDeviceSize$1());
             });
             this.resizeObserver.observe(this.el);
         };
@@ -22894,7 +23034,7 @@ class TopNavigation {
     }
     componentWillLoad() {
         this.checkSlots();
-        this.deviceSize = getCurrentDeviceSize();
+        this.deviceSize = getCurrentDeviceSize$1();
         this.initialiseSearchBar();
     }
     componentDidLoad() {
@@ -22951,16 +23091,16 @@ class TopNavigation {
         const hasStatus = status !== "";
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
-        const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "medium" : "large";
+        const searchButtonSize = deviceSize <= DEVICE_SIZES$1.S ? "medium" : "large";
         const hasTitle = appTitle !== "" && isPropDefined$1(appTitle);
         const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;
         const appTitleVariant = overMobileBreakpoint
-            ? deviceSize <= DEVICE_SIZES.S
+            ? deviceSize <= DEVICE_SIZES$1.S
                 ? "subtitle-small"
                 : "h4"
             : "h3";
         const mobileSearchButtonTitle = `${mobileSearchBarVisible ? "Hide" : "Show"} search`;
-        const menuSize = deviceSize <= DEVICE_SIZES.S ? "small" : "medium";
+        const menuSize = deviceSize <= DEVICE_SIZES$1.S ? "small" : "medium";
         const shortAppTitleSlot = isSlotUsed$1(el, "short-app-title");
         const hasAppTitleSlot = isSlotUsed$1(el, "app-title");
         const Component = hasAppTitleSlot ? "div" : "a";
@@ -22972,7 +23112,7 @@ class TopNavigation {
                 "mobile-mode": overMobileBreakpoint,
                 [IcBrandForegroundEnum$1.Dark]: foregroundColor === IcBrandForegroundEnum$1.Dark,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, hAsync("div", { key: '3447c99cc05b7203ea80d0651f1ac066122697e1', class: "top-navigation" }, hAsync("ic-section-container", { key: '563a2b3fc3c7d456fee7261c2d5645948301e953', aligned: contentAligned, "full-height": true }, hAsync("header", { key: '61d58c8a68ff59cfa1b5cf75daef6c62b2b4692a', role: "banner" }, hAsync("div", { key: '17108bd26152301bf07afe95a061debb23184e8b', class: "top-panel-container" }, hAsync("div", { key: '86fe01bd6227bc0a1e1633cab7d6cff654e2a808', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (hAsync(Component, Object.assign({ key: 'c6f2a1ed6ce7b7813f12352401c89852d6646327', class: "title-link" }, attrs), hasAppIcon && (hAsync("div", { key: 'c5a2e2961b16b5f5dc6e918ba6f758e7bce09cd7', class: "app-icon-container" }, hAsync("slot", { key: '9b6d5636aa1f474bac2add8948bcd598f3d5c231', name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
+            } }, hAsync("div", { key: '3447c99cc05b7203ea80d0651f1ac066122697e1', class: "top-navigation" }, hAsync("ic-section-container", { key: '563a2b3fc3c7d456fee7261c2d5645948301e953', aligned: contentAligned, "full-height": true }, hAsync("header", { key: '61d58c8a68ff59cfa1b5cf75daef6c62b2b4692a', role: "banner" }, hAsync("div", { key: '17108bd26152301bf07afe95a061debb23184e8b', class: "top-panel-container" }, hAsync("div", { key: '86fe01bd6227bc0a1e1633cab7d6cff654e2a808', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (hAsync(Component, Object.assign({ key: 'c6f2a1ed6ce7b7813f12352401c89852d6646327', class: "title-link" }, attrs), hasAppIcon && (hAsync("div", { key: 'c5a2e2961b16b5f5dc6e918ba6f758e7bce09cd7', class: "app-icon-container" }, hAsync("slot", { key: '9b6d5636aa1f474bac2add8948bcd598f3d5c231', name: "app-icon" }))), deviceSize <= DEVICE_SIZES$1.S &&
             (!isEmptyString$1(shortAppTitle) || shortAppTitleSlot) ? (hAsync("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
                 `${appTitle} (${shortAppTitle})` }, hAsync("h1", null, shortAppTitleSlot ? (hAsync("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (hAsync("ic-typography", { variant: appTitleVariant }, hAsync("h1", { class: "title-wrap" }, hasAppTitleSlot ? (hAsync("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (hAsync("div", { key: 'f4365e21d3de5cc7c0f7c6f62a64c3fa0a7415bb', class: "app-status" }, hAsync("ic-typography", { key: '9d03f72e0533c1d721142cba78ba216c9abf61c5', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (hAsync("div", { key: '318b6cf7cd4359429a6d698d40e3b99f46ac67e0', class: "app-version" }, hAsync("ic-typography", { key: '67cc4163765fb967729ba4fa03e857c1b0cc96e3', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (hAsync("div", { key: '0f8ce1b2c3a0cf3f3bbbe2d0285324935e5b1676', class: "search-menu-container" }, hAsync("div", { key: 'a4033e992457aa434c705d0e35d24c9efb291195', class: "search-actions-container" }, !overMobileBreakpoint && hAsync("slot", { key: 'd9347964c2972b338c4e09833ab94f820d8b49c8', name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (hAsync("ic-button", { key: '2a3abd194a9b28efc44cf5a41151693eb718010e', id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor == IcBrandForegroundEnum$1.Light
                 ? IcBrandForegroundEnum$1.Dark
@@ -23037,6 +23177,7 @@ class TreeItem {
         this.hostMutationObserver = null;
         this.TOOLTIP = "ic-tooltip";
         this.TREE_ITEM_LABEL_CLASS_SELECTOR = ".tree-item-label";
+        this.TREE_ITEM_CONTENT_CLASS_SELECTOR = ".tree-item-content";
         /**
          * If `true`, the tree item appears in the disabled state.
          */
@@ -23089,7 +23230,10 @@ class TreeItem {
         this.setTreeItemPadding = () => {
             let level = 1;
             let parentElement = this.el.parentElement;
-            const treeItemContent = this.el.shadowRoot.querySelector(".tree-item-content");
+            const treeItemContent = this.el.shadowRoot.querySelector(this.TREE_ITEM_CONTENT_CLASS_SELECTOR);
+            if (!parentElement) {
+                return;
+            }
             const isSiblingOfParent = Array.from(parentElement.children)
                 .map((sibling) => {
                 if (sibling !== this.el &&
@@ -23144,7 +23288,7 @@ class TreeItem {
                 contentHeight = typographyEl.scrollHeight;
             }
             const tooltipAlreadyExists = !!(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP));
-            const treeContent = treeItem.shadowRoot.querySelector(".tree-item-content") || slottedContent;
+            const treeContent = treeItem.shadowRoot.querySelector(this.TREE_ITEM_CONTENT_CLASS_SELECTOR) || slottedContent;
             if (contentHeight > (treeContent === null || treeContent === void 0 ? void 0 : treeContent.clientHeight) && !tooltipAlreadyExists) {
                 const tooltipEl = document.createElement("ic-tooltip");
                 tooltipEl.setAttribute("target", this.el.id);
@@ -23164,6 +23308,17 @@ class TreeItem {
                 tooltipEl.appendChild(typographyEl);
             }
         };
+        this.removeTreeItemTruncation = (treeItem) => {
+            const slottedContent = treeItem.querySelector("[slot='router-item']");
+            const typographyEl = treeItem.shadowRoot.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR) ||
+                slottedContent.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR);
+            const tooltipEl = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
+            const treeContent = treeItem.shadowRoot.querySelector(this.TREE_ITEM_CONTENT_CLASS_SELECTOR) || slottedContent;
+            if (tooltipEl) {
+                typographyEl.classList.remove("ic-text-overflow");
+                treeContent.replaceChild(treeContent === slottedContent ? typographyEl.firstChild : typographyEl, tooltipEl);
+            }
+        };
         this.handleDisplayTooltip = (display) => {
             const typographyEl = this.el.shadowRoot.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR) ||
                 this.el.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR);
@@ -23202,17 +23357,23 @@ class TreeItem {
         });
     }
     componentDidRender() {
-        this.truncateTreeItem && this.truncateTreeItemLabel(this.el);
+        this.truncateTreeItem
+            ? this.truncateTreeItemLabel(this.el)
+            : this.removeTreeItemTruncation(this.el);
         if (this.expanded) {
             this.childTreeItems.forEach((child) => {
-                child.truncateTreeItem && this.truncateTreeItemLabel(child);
+                child.truncateTreeItem
+                    ? this.truncateTreeItemLabel(child)
+                    : this.removeTreeItemTruncation(child);
             });
         }
     }
     componentDidUpdate() {
         if (this.hasParentExpanded) {
             this.childTreeItems.forEach((child) => {
-                child.truncateTreeItem && this.truncateTreeItemLabel(child);
+                child.truncateTreeItem
+                    ? this.truncateTreeItemLabel(child)
+                    : this.removeTreeItemTruncation(child);
             });
             this.hasParentExpanded = false;
         }
@@ -23285,7 +23446,7 @@ class TreeItem {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '312b704891f928f7a28bb20454273d4c81441b79', class: {
+        return (hAsync(Host, { key: 'f2aeb4f24ff2fce08bfd3b33343e89ae84b97168', class: {
                 "ic-tree-item-disabled": disabled,
                 "ic-tree-item-selected": !disabled && selected,
                 [`ic-tree-item-${size}`]: size !== "medium",
@@ -23297,7 +23458,7 @@ class TreeItem {
             }, tabIndex: disabled ? -1 : 0, onClick: this.handleTreeItemClicked, ref: (el) => (this.treeItemElement = el), "aria-disabled": disabled ? "true" : "false", "aria-live": "polite" }, attrs, { onFocus: () => this.handleDisplayTooltip(true), onBlur: () => this.handleDisplayTooltip(false) }), this.isParent && (hAsync("span", { class: {
                 ["arrow-dropdown"]: true,
                 ["tree-item-expanded"]: expanded,
-            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? hAsync("slot", { name: "label" }) : label))), expanded && (hAsync("div", { key: 'e271e9994463efe26909698eef4c7c8ca1c2481e', "aria-hidden": `${!expanded}` }, hAsync("slot", { key: '0d2b06d7c730bd8ff8fc1a754b89244e9ae98dc7' })))));
+            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? hAsync("slot", { name: "label" }) : label))), expanded && (hAsync("div", { key: '35b46ae7d8d4f541219bf6a73e49158d14cb8763', "aria-hidden": `${!expanded}` }, hAsync("slot", { key: '9af9035ab4014f2e9bd509eab38f08b0a55a475f' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23317,6 +23478,7 @@ class TreeItem {
             "hreflang": [1],
             "isParent": [1028, "is-parent"],
             "label": [1],
+            "previousTruncateTreeItem": [4, "previous-truncate-tree-item"],
             "referrerpolicy": [1],
             "rel": [1],
             "selected": [1028],
@@ -23337,6 +23499,18 @@ class TreeItem {
 const icTreeViewCss = ":host{display:block;width:var(--tree-view-width, 100%);background-color:var(--ic-tree-view-background)}:host .heading-area-container{border-bottom:var(--ic-space-1px) solid var(--ic-tree-view-divider);display:flex;align-items:center;min-height:calc(\n    var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px)\n  );padding:0 var(--ic-space-xs);--ic-typography-color:var(--ic-tree-view-text)}:host(.ic-tree-view-small) .heading-area-container{min-height:calc(var(--ic-space-xl) - var(--ic-space-1px))}:host(.ic-tree-view-large) .heading-area-container{min-height:calc(var(--ic-space-xxl) - var(--ic-space-1px))}:host(.ic-tree-view-truncate) .heading-area-container{height:calc(var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px))}:host(.ic-tree-view-truncate.ic-tree-view-small) .heading-area-container{height:calc(var(--ic-space-xl) - var(--ic-space-1px))}:host(.ic-tree-view-truncate.ic-tree-view-large) .heading-area-container{height:calc(var(--ic-space-xxl) - var(--ic-space-1px))}.icon-container{width:var(--ic-space-lg);min-width:var(--ic-space-lg);height:var(--ic-space-lg);margin:0 var(--ic-space-xs) 0 0}:host(.ic-tree-view-small) .icon-container{margin:0 var(--ic-space-xxs) 0 0}.ic-text-overflow{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ic-tooltip-overflow{overflow:hidden}.tree-view-header.with-padding{padding-right:var(--ic-space-xs)}.tree-items-container-hidden{visibility:hidden}::slotted([slot=\"icon\"]){fill:var(--ic-tree-view-icon)}@media (forced-colors: active){::slotted([slot=\"icon\"]){fill:currentcolor}}";
 var IcTreeViewStyle0 = icTreeViewCss;
 
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 let treeViewIds = 0;
 /**
  * @slot heading - Content is set as the tree view heading.
@@ -23349,6 +23523,9 @@ class TreeView {
         this.treeItemTag = "IC-TREE-ITEM";
         this.hostMutationObserver = null;
         this.isLoaded = false;
+        this.resizeObserver = null;
+        this.TOOLTIP = "ic-tooltip";
+        this.smallDevice = false;
         /**
          * If `true`, tree items will have inset focus.
          */
@@ -23365,14 +23542,32 @@ class TreeView {
          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         this.theme = "inherit";
+        /**
+         * The content within the tree view tree items. This will take precedence over slotted content.
+         * */
+        this.treeItemData = [];
         /**
          * If `true`, the tree view heading will be truncated instead of text wrapping.
+         * When used on small devices, this prop will be overridden and headings will be set to text-wrap.
          */
         this.truncateHeading = false;
         /**
          * If `true`, tree items will be truncated, unless they are individually overridden.
+         * When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.
          */
         this.truncateTreeItems = false;
+        this.runResizeObserver = () => {
+            this.resizeObserver = new ResizeObserver(() => {
+                const isSmallDevice = getCurrentDeviceSize() <= DEVICE_SIZES.S;
+                if (this.smallDevice !== isSmallDevice)
+                    this.smallDevice = isSmallDevice;
+            });
+            this.resizeObserver.observe(document.body);
+        };
+        this.removeTruncation = () => {
+            this.truncateHeading = undefined;
+            this.truncateTreeItems = undefined;
+        };
         this.handleKeyDown = (event) => {
             var _a;
             const focussedChild = this.treeItems.indexOf(this.treeItems.filter((el) => el === document.activeElement)[0]);
@@ -23461,7 +23656,7 @@ class TreeView {
         };
         this.truncateTreeViewHeading = () => {
             const typographyEl = this.el.shadowRoot.querySelector(".tree-view-header");
-            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest("ic-tooltip");
+            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
             const headingContainer = this.el.shadowRoot.querySelector(".heading-area-container");
             if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (headingContainer === null || headingContainer === void 0 ? void 0 : headingContainer.clientHeight)) {
                 typographyEl.classList.add("ic-text-overflow");
@@ -23476,6 +23671,16 @@ class TreeView {
                 }
             }
         };
+        this.removeHeadingTruncation = () => {
+            const typographyEl = this.el.shadowRoot.querySelector(".tree-view-header");
+            const tooltipEl = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
+            if (tooltipEl) {
+                typographyEl.classList.remove("ic-text-overflow");
+                this.el.shadowRoot
+                    .querySelector(".heading-area-container")
+                    .replaceChild(typographyEl, tooltipEl);
+            }
+        };
         this.isHeadingDefined = () => isPropDefined(this.heading) && this.heading !== null;
         this.hasHeadingAreaContent = () => {
             return (isSlotUsed(this.el, "heading") ||
@@ -23483,6 +23688,17 @@ class TreeView {
                 isSlotUsed(this.el, "icon"));
         };
     }
+    watchSmallDeviceHandler() {
+        if (this.smallDevice) {
+            this.previousTruncateHeading = this.truncateHeading;
+            this.previousTruncateTreeItems = this.truncateTreeItems;
+            this.removeTruncation();
+        }
+        else {
+            this.truncateHeading = this.previousTruncateHeading;
+            this.truncateTreeItems = this.previousTruncateTreeItems;
+        }
+    }
     watchFocusInsetHandler() {
         this.treeItems.forEach((treeItem) => {
             treeItem.focusInset = this.focusInset;
@@ -23498,27 +23714,44 @@ class TreeView {
             treeItem.theme = this.theme;
         });
     }
+    watchTreeItemOptionsHandler() {
+        this.setTreeItems();
+    }
     watchTruncateTreeItemsHandler() {
         this.treeItems.forEach((treeItem) => {
-            if (treeItem.truncateTreeItem === undefined) {
+            if (this.smallDevice) {
+                treeItem.previousTruncateTreeItem = treeItem.truncateTreeItem;
                 treeItem.truncateTreeItem = this.truncateTreeItems;
             }
+            else {
+                treeItem.truncateTreeItem = treeItem.previousTruncateTreeItem;
+            }
         });
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a, _b, _c;
         (_a = this.el) === null || _a === void 0 ? void 0 : _a.removeEventListener("slotchange", this.setTreeItems);
         (_b = this.hostMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
     }
     componentWillLoad() {
         this.setTreeItems();
+        this.previousTruncateHeading = this.truncateHeading;
+        this.previousTruncateTreeItems = this.truncateTreeItems;
+        checkResizeObserver(this.runResizeObserver);
         this.watchSizeHandler();
         this.watchFocusInsetHandler();
         this.watchThemeHandler();
-        this.watchTruncateTreeItemsHandler();
+        this.treeItems.forEach((treeItem) => {
+            if (treeItem.truncateTreeItem === undefined) {
+                treeItem.truncateTreeItem = this.truncateTreeItems;
+            }
+        });
     }
     componentDidRender() {
-        this.truncateHeading && this.truncateTreeViewHeading();
+        this.truncateHeading
+            ? this.truncateTreeViewHeading()
+            : this.removeHeadingTruncation();
     }
     componentDidLoad() {
         this.addSlotChangeListener();
@@ -23537,33 +23770,63 @@ class TreeView {
     }
     getAllTreeItems(element) {
         const treeItems = [];
-        const collectTreeItems = (el) => {
+        const collectTreeItemsFromSlottedContent = (el) => {
             Array.from(el.children).forEach((child) => {
                 if (child.tagName === this.treeItemTag) {
                     treeItems.push(child);
                 }
-                collectTreeItems(child);
+                collectTreeItemsFromSlottedContent(child);
+            });
+        };
+        const collectTreeItemsFromData = (items, parentElement) => {
+            Array.from(parentElement.children).forEach((child) => {
+                if (child.tagName === this.treeItemTag) {
+                    parentElement.removeChild(child);
+                }
+            });
+            items.forEach((item) => {
+                const treeItem = document.createElement(this.treeItemTag);
+                const { children, icon } = item, props = __rest(item, ["children", "icon"]);
+                Object.assign(treeItem, props);
+                if (icon) {
+                    const iconSlot = document.createElement("div");
+                    iconSlot.setAttribute("slot", "icon");
+                    iconSlot.innerHTML = icon;
+                    treeItem.appendChild(iconSlot);
+                }
+                parentElement.appendChild(treeItem);
+                treeItems.push(treeItem);
+                if (children && children.length > 0) {
+                    collectTreeItemsFromData(children, treeItem);
+                }
             });
         };
-        collectTreeItems(element);
+        if (this.treeItemData.length > 0) {
+            collectTreeItemsFromData(this.treeItemData, element);
+        }
+        else {
+            collectTreeItemsFromSlottedContent(element);
+        }
         return treeItems;
     }
     render() {
         const { heading, isLoaded, size, theme, truncateHeading } = this;
-        return (hAsync(Host, { key: 'e0979a6b323b02bc65afceea69ee953527d269f1', "context-id": this.treeViewId, class: {
+        return (hAsync(Host, { key: '43c3dd9cb9f888c4033088087fdce4829559f03f', "context-id": this.treeViewId, class: {
                 [`ic-tree-view-${size}`]: size !== "medium",
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tree-view-truncate": truncateHeading,
-            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (hAsync("div", { key: 'b72efd1f1be26cd539fac41f436deda54eb4b6ed', class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (hAsync("div", { key: 'e3d21bac85aa59bd1adabd18c20a9c7afd20ccb4', class: "icon-container" }, hAsync("slot", { key: '972af4222049f8b197832a42f3620f43544215d1', name: "icon" }))), hAsync("ic-typography", { key: '905866b6d0606c26b6910c9b725f0ff66948f069', variant: "subtitle-large", class: {
+            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (hAsync("div", { key: '759c1432800d9dd26b1d9ce720c9626e41408f2f', class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (hAsync("div", { key: '3c239ffde40795dcf3f47b12c5649906a6198970', class: "icon-container" }, hAsync("slot", { key: 'e86df51c31b2b0deea7c484bceacec0f593db42c', name: "icon" }))), hAsync("ic-typography", { key: 'a54ae6d1eb99029f5dda14f0118519aed971b6d1', variant: "subtitle-large", class: {
                 "tree-view-header": true,
                 "with-padding": this.truncateHeading && !isLoaded,
-            } }, isSlotUsed(this.el, "heading") ? (hAsync("slot", { name: "heading" })) : (heading)))), hAsync("slot", { key: '4d4337a008d71ca0be19f05510539480eb7de290' })));
+            } }, isSlotUsed(this.el, "heading") ? (hAsync("slot", { name: "heading" })) : (heading)))), hAsync("slot", { key: '154c96cfb4a0c93da02b53308fe6b8871ec4144b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "smallDevice": ["watchSmallDeviceHandler"],
         "focusInset": ["watchFocusInsetHandler"],
         "size": ["watchSizeHandler"],
         "theme": ["watchThemeHandler"],
+        "treeItemData": ["watchTreeItemOptionsHandler"],
         "truncateTreeItems": ["watchTruncateTreeItemsHandler"]
     }; }
     static get style() { return IcTreeViewStyle0; }
@@ -23575,8 +23838,10 @@ class TreeView {
             "heading": [1],
             "size": [1],
             "theme": [1],
-            "truncateHeading": [4, "truncate-heading"],
-            "truncateTreeItems": [4, "truncate-tree-items"],
+            "treeItemData": [16],
+            "truncateHeading": [1028, "truncate-heading"],
+            "truncateTreeItems": [1028, "truncate-tree-items"],
+            "smallDevice": [32],
             "treeItems": [32]
         },
         "$listeners$": [[0, "icTreeItemSelected", "handleTreeItemSelected"]],