@ukic/web-components 3.0.0-alpha.5 → 3.0.0-alpha.6

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { i as isSlotUsed, N as getSlot, m as getCurrentDeviceSize, D as DEVICE_SIZES, k as getThemeForegroundColor, h as onComponentPropUndefinedChange, c as checkResizeObserver, o as onComponentRequiredPropUndefined, e as IcThemeForegroundEnum, T as isEmptyString, l as isPropDefined } from './helpers.js';
+import { i as isSlotUsed, N as getSlot, m as getCurrentDeviceSize, D as DEVICE_SIZES, k as getBrandForegroundAppearance, h as onComponentPropUndefinedChange, c as checkResizeObserver, o as onComponentRequiredPropUndefined, e as IcBrandForegroundEnum, T as isEmptyString, l as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$8 } from './ic-button2.js';
 import { d as defineCustomElement$7 } from './ic-horizontal-scroll2.js';
 import { d as defineCustomElement$6 } from './ic-loading-indicator2.js';
@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './ic-section-container2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icTopNavigationCss = "/*! 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;color:var(--ic-top-navigation-text);width:100%;position:relative;--ic-typography-color:var(--ic-top-navigation-text);--ic-button-secondary-text-monochrome:var(--ic-theme-text);--ic-button-secondary-border-monochrome:var(--ic-theme-text)}:host(.dark){color:var(--ic-color-text-primary-light);--ic-typography-color:var(--ic-color-text-primary-light);--ic-top-navigation-logo:var(--ic-color-icon-neutral);--ic-top-navigation-icon:var(--ic-color-icon-neutral);--ic-top-navigation-theme:var(--ic-color-icon-neutral);--ic-top-navigation-status-tag:var(--ic-color-background-primary-dark);--ic-top-navigation-status-tag-text:var(--ic-color-brand-text);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-darken-10);--navigation-link-colour:var(--ic-color-text-primary-light)}:host ::slotted(ic-navigation-item){--navigation-link-colour:var(--ic-top-navigation-text)}:host(.dark) ::slotted(ic-navigation-button){--ic-button-icon-monochrome:var(--ic-color-text-primary-light)}::slotted(ic-navigation-button){--ic-button-icon-monochrome:white}:host .top-navigation{background-color:var(--ic-top-navigation-background);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-top-navigation-icon-and-label);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-top-navigation-title-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-top-navigation-title-pressed)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-space-1px) solid var(--ic-top-navigation-keyline);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-border-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag);color:var(--ic-top-navigation-status-tag-text);--ic-typography-color:var(--ic-top-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag-secondary);color:var(--ic-top-navigation-status-tag);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name=\"app-icon\"]::slotted(*){fill:var(--ic-top-navigation-logo);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-top-navigation-icon)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.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}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}:host(.mobile-mode) .app-status,:host(.mobile-mode) .app-version{display:none}:host(.mobile-mode) .title-link{margin-right:var(--ic-space-xs)}:host(.mobile-mode) .search-menu-container{max-width:10rem}:host(.mobile-mode) .search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-border-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(*){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-border-hc)}.app-status,.app-version{border:var(--ic-border-hc)}slot[name=\"app-icon\"]::slotted(*){fill:currentcolor}}";
+const icTopNavigationCss = "/*! 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;color:var(--ic-top-navigation-text);width:100%;position:relative;--ic-typography-color:var(--ic-top-navigation-text);--ic-button-secondary-text-monochrome:var(--ic-brand-text-color);--ic-button-secondary-border-monochrome:var(--ic-brand-text-color)}:host(.dark){color:var(--ic-color-text-primary-light);--ic-typography-color:var(--ic-color-text-primary-light);--ic-top-navigation-logo:var(--ic-color-icon-neutral);--ic-top-navigation-icon:var(--ic-color-icon-neutral);--ic-top-navigation-theme:var(--ic-color-icon-neutral);--ic-top-navigation-status-tag:var(--ic-color-background-primary-dark);--ic-top-navigation-status-tag-text:var(--ic-color-brand-text);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-darken-10);--navigation-link-colour:var(--ic-color-text-primary-light)}:host ::slotted(ic-navigation-item){--navigation-link-colour:var(--ic-top-navigation-text)}:host(.dark) ::slotted(ic-navigation-button){--ic-button-icon-monochrome:var(--ic-color-text-primary-light)}::slotted(ic-navigation-button){--ic-button-icon-monochrome:white}:host .top-navigation{background-color:var(--ic-top-navigation-background);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-top-navigation-icon-and-label);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-top-navigation-title-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-top-navigation-title-pressed)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-space-1px) solid var(--ic-top-navigation-keyline);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-border-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag);color:var(--ic-top-navigation-status-tag-text);--ic-typography-color:var(--ic-top-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag-secondary);color:var(--ic-top-navigation-status-tag);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name=\"app-icon\"]::slotted(*){fill:var(--ic-top-navigation-logo);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-top-navigation-icon)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.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}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}:host(.mobile-mode) .app-status,:host(.mobile-mode) .app-version{display:none}:host(.mobile-mode) .title-link{margin-right:var(--ic-space-xs)}:host(.mobile-mode) .search-menu-container{max-width:10rem}:host(.mobile-mode) .search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-border-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(*){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-border-hc)}.app-status,.app-version{border:var(--ic-border-hc)}slot[name=\"app-icon\"]::slotted(*){fill:currentcolor}}";
 
 const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation extends HTMLElement {
     constructor() {
@@ -83,7 +83,7 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation exten
             this.resizeObserver.observe(this.el);
         };
         this.deviceSize = DEVICE_SIZES.XL;
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
         this.hasFullWidthSearchBar = false;
         this.mobileSearchBarVisible = false;
         this.mobileSearchHiddenOnBlur = false;
@@ -138,7 +138,7 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation exten
     searchValueChangeHandler({ detail }) {
         this.searchValue = detail.value;
     }
-    themeChangeHandler({ detail }) {
+    brandChangeHandler({ detail }) {
         this.foregroundColor = detail.mode;
     }
     toggleSearchBar() {
@@ -184,11 +184,15 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation exten
         return (h(Host, { class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
-                [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
+                [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
                 [`ic-theme-${theme}`]: theme !== "inherit",
             } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: contentAligned, "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ class: "title-link" }, attrs), hasAppIcon && (h("div", { class: "app-icon-container" }, h("slot", { name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor == "light" ? "dark" : "light", onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", theme: foregroundColor == "light" ? "light" : "dark", variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { monochrome: true, appearance: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor == IcBrandForegroundEnum.Light
+                ? IcBrandForegroundEnum.Dark
+                : IcBrandForegroundEnum.Light, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", theme: foregroundColor == IcBrandForegroundEnum.Light
+                ? IcBrandForegroundEnum.Dark
+                : IcBrandForegroundEnum.Light, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { monochrome: true, appearance: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
                 ["inline"]: inline,
             } }, hasIconButtons && (h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" }))), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
     }
@@ -215,7 +219,7 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation exten
         "navMenuVisible": [32],
         "searchButtonClick": [32],
         "searchValue": [32]
-    }, [[0, "icNavigationMenuClose", "navBarMenuCloseHandler"], [0, "icSearchBarBlur", "searchInputBlurHandler"], [0, "icChange", "searchValueChangeHandler"], [4, "themeChange", "themeChangeHandler"]], {
+    }, [[0, "icNavigationMenuClose", "navBarMenuCloseHandler"], [0, "icSearchBarBlur", "searchInputBlurHandler"], [0, "icChange", "searchValueChangeHandler"], [4, "brandChange", "brandChangeHandler"]], {
         "appTitle": ["watchPropHandler"]
     }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"ic-top-navigation.js","mappings":"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","names":[],"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  color: var(--ic-top-navigation-text);\n  width: 100%;\n  position: relative;\n\n  --ic-typography-color: var(--ic-top-navigation-text);\n\n  --ic-button-secondary-text-monochrome: var(--ic-theme-text);\n  --ic-button-secondary-border-monochrome: var(--ic-theme-text);\n}\n\n:host(.dark) {\n  color: var(--ic-color-text-primary-light);\n  --ic-typography-color: var(--ic-color-text-primary-light);\n  --ic-top-navigation-logo: var(--ic-color-icon-neutral);\n  --ic-top-navigation-icon: var(--ic-color-icon-neutral);\n  --ic-top-navigation-theme: var(--ic-color-icon-neutral);\n  --ic-top-navigation-status-tag: var(--ic-color-background-primary-dark);\n  --ic-top-navigation-status-tag-text: var(--ic-color-brand-text);\n  --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);\n  --navigation-link-colour: var(--ic-color-text-primary-light);\n}\n\n:host ::slotted(ic-navigation-item) {\n  --navigation-link-colour: var(--ic-top-navigation-text);\n}\n\n:host(.dark) ::slotted(ic-navigation-button) {\n  --ic-button-icon-monochrome: var(--ic-color-text-primary-light);\n}\n\n::slotted(ic-navigation-button) {\n  --ic-button-icon-monochrome: white;\n}\n\n:host .top-navigation {\n  background-color: var(--ic-top-navigation-background);\n  height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n  width: 100%;\n}\n\n:host .title-link {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n  color: var(--ic-top-navigation-icon-and-label);\n  text-decoration: none;\n  outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n  background-color: var(--ic-top-navigation-title-hover);\n}\n\n:host .title-link:active:not(:focus) {\n  background-color: var(--ic-top-navigation-title-pressed);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n  font-weight: 600;\n}\n\n:host .nav-panel-container {\n  border-top: var(--ic-space-1px) solid var(--ic-top-navigation-keyline);\n  padding: 0 var(--ic-space-lg);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n  display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n  border-top: var(--ic-border-keyline-darken);\n}\n\n.top-panel-container {\n  display: flex;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n  margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n  display: flex;\n  padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n  display: flex;\n  margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n  display: flex;\n}\n\n.title-wrap {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n  hyphens: auto;\n}\n\n:host .app-status {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-top-navigation-status-tag);\n  color: var(--ic-top-navigation-status-tag-text);\n  --ic-typography-color: var(--ic-top-navigation-status-tag-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\n:host .app-version {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-top-navigation-status-tag-secondary);\n  color: var(--ic-top-navigation-status-tag);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-left: var(--ic-space-xs);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted(*) {\n  fill: var(--ic-top-navigation-logo);\n  width: 2em;\n  height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n  fill: var(--ic-top-navigation-icon);\n}\n\n.search-menu-container {\n  justify-content: right;\n  display: flex;\n  align-items: center;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.search-actions-container {\n  display: flex;\n}\n\n.menu-buttons-slot {\n  display: flex;\n  flex-direction: column;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n  display: none;\n}\n\n:host ic-section-container {\n  padding-bottom: 0 !important;\n  padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n  .app-details-container {\n    margin-right: var(--ic-space-lg);\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding: 0 var(--ic-space-md);\n  }\n}\n\n/** Mobile styling **/\n:host(.mobile-mode) .app-status,\n:host(.mobile-mode) .app-version {\n  display: none;\n}\n\n:host(.mobile-mode) .title-link {\n  margin-right: var(--ic-space-xs);\n}\n\n:host(.mobile-mode) .search-menu-container {\n  max-width: 10rem;\n}\n\n:host(.mobile-mode) .search-bar-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-top: var(--ic-border-keyline-darken);\n  height: 4rem;\n  padding-left: var(--ic-space-md);\n  padding-right: var(--ic-space-md);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n  :host .title-link {\n    margin-right: var(--ic-space-xxxs);\n    word-break: break-word;\n    hyphens: none;\n  }\n\n  .top-panel-container {\n    min-height: 2.5rem;\n  }\n\n  .search-bar-container {\n    margin-top: 0;\n    height: 3.5rem;\n    padding-left: var(--ic-space-xs);\n    padding-right: var(--ic-space-xs);\n  }\n\n  .menu-button-container {\n    margin-left: var(--ic-space-sm);\n  }\n\n  slot[name=\"app-icon\"]::slotted(*) {\n    width: 1.5em;\n    height: 1.5em;\n  }\n\n  slot[name=\"toggle-icon\"] svg {\n    width: 1.5em;\n    height: 1.5em;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .top-navigation {\n    border-bottom: var(--ic-border-hc);\n  }\n\n  .app-status,\n  .app-version {\n    border: var(--ic-border-hc);\n  }\n\n  slot[name=\"app-icon\"]::slotted(*) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcTheme,\n  IcDeviceSizes,\n  IcValueEventDetail,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * 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.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once Gatsby hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value as string;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value as string;\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n  };\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.icTopNavResized.emit({\n        size: currSize,\n      });\n      if (this.searchBar && document.activeElement === this.searchBar) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n      theme,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"medium\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"medium\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon-tertiary\"\n                          monochrome\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          theme={foregroundColor == \"light\" ? \"dark\" : \"light\"}\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              theme={\n                                foregroundColor == \"light\" ? \"light\" : \"dark\"\n                              }\n                              variant=\"secondary\"\n                              monochrome\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"left-icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll\n                      monochrome\n                      appearance={foregroundColor}\n                    >\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-top-navigation.js","mappings":"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","names":[],"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  color: var(--ic-top-navigation-text);\n  width: 100%;\n  position: relative;\n\n  --ic-typography-color: var(--ic-top-navigation-text);\n\n  --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n  --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n}\n\n:host(.dark) {\n  color: var(--ic-color-text-primary-light);\n  --ic-typography-color: var(--ic-color-text-primary-light);\n  --ic-top-navigation-logo: var(--ic-color-icon-neutral);\n  --ic-top-navigation-icon: var(--ic-color-icon-neutral);\n  --ic-top-navigation-theme: var(--ic-color-icon-neutral);\n  --ic-top-navigation-status-tag: var(--ic-color-background-primary-dark);\n  --ic-top-navigation-status-tag-text: var(--ic-color-brand-text);\n  --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);\n  --navigation-link-colour: var(--ic-color-text-primary-light);\n}\n\n:host ::slotted(ic-navigation-item) {\n  --navigation-link-colour: var(--ic-top-navigation-text);\n}\n\n:host(.dark) ::slotted(ic-navigation-button) {\n  --ic-button-icon-monochrome: var(--ic-color-text-primary-light);\n}\n\n::slotted(ic-navigation-button) {\n  --ic-button-icon-monochrome: white;\n}\n\n:host .top-navigation {\n  background-color: var(--ic-top-navigation-background);\n  height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n  width: 100%;\n}\n\n:host .title-link {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n  color: var(--ic-top-navigation-icon-and-label);\n  text-decoration: none;\n  outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n  background-color: var(--ic-top-navigation-title-hover);\n}\n\n:host .title-link:active:not(:focus) {\n  background-color: var(--ic-top-navigation-title-pressed);\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n  font-weight: 600;\n}\n\n:host .nav-panel-container {\n  border-top: var(--ic-space-1px) solid var(--ic-top-navigation-keyline);\n  padding: 0 var(--ic-space-lg);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n  display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n  border-top: var(--ic-border-keyline-darken);\n}\n\n.top-panel-container {\n  display: flex;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n  margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n  display: flex;\n  padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n  display: flex;\n  margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n  display: flex;\n}\n\n.title-wrap {\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n  hyphens: auto;\n}\n\n:host .app-status {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-top-navigation-status-tag);\n  color: var(--ic-top-navigation-status-tag-text);\n  --ic-typography-color: var(--ic-top-navigation-status-tag-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\n:host .app-version {\n  border-radius: var(--ic-space-md);\n  background-color: var(--ic-top-navigation-status-tag-secondary);\n  color: var(--ic-top-navigation-status-tag);\n  padding: var(--ic-space-xxs) var(--ic-space-sm);\n  margin-left: var(--ic-space-xs);\n  flex: 1 1 0;\n  max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted(*) {\n  fill: var(--ic-top-navigation-logo);\n  width: 2em;\n  height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n  fill: var(--ic-top-navigation-icon);\n}\n\n.search-menu-container {\n  justify-content: right;\n  display: flex;\n  align-items: center;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.search-actions-container {\n  display: flex;\n}\n\n.menu-buttons-slot {\n  display: flex;\n  flex-direction: column;\n}\n\n.navigation-landmark-text {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n  display: none;\n}\n\n:host ic-section-container {\n  padding-bottom: 0 !important;\n  padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n  .app-details-container {\n    margin-right: var(--ic-space-lg);\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding: 0 var(--ic-space-md);\n  }\n}\n\n/** Mobile styling **/\n:host(.mobile-mode) .app-status,\n:host(.mobile-mode) .app-version {\n  display: none;\n}\n\n:host(.mobile-mode) .title-link {\n  margin-right: var(--ic-space-xs);\n}\n\n:host(.mobile-mode) .search-menu-container {\n  max-width: 10rem;\n}\n\n:host(.mobile-mode) .search-bar-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-top: var(--ic-border-keyline-darken);\n  height: 4rem;\n  padding-left: var(--ic-space-md);\n  padding-right: var(--ic-space-md);\n  margin-left: calc(-1 * var(--section-container-margin));\n  margin-right: calc(-1 * var(--section-container-margin));\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n  :host .title-link {\n    margin-right: var(--ic-space-xxxs);\n    word-break: break-word;\n    hyphens: none;\n  }\n\n  .top-panel-container {\n    min-height: 2.5rem;\n  }\n\n  .search-bar-container {\n    margin-top: 0;\n    height: 3.5rem;\n    padding-left: var(--ic-space-xs);\n    padding-right: var(--ic-space-xs);\n  }\n\n  .menu-button-container {\n    margin-left: var(--ic-space-sm);\n  }\n\n  slot[name=\"app-icon\"]::slotted(*) {\n    width: 1.5em;\n    height: 1.5em;\n  }\n\n  slot[name=\"toggle-icon\"] svg {\n    width: 1.5em;\n    height: 1.5em;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .top-navigation {\n    border-bottom: var(--ic-border-hc);\n  }\n\n  .app-status,\n  .app-version {\n    border: var(--ic-border-hc);\n  }\n\n  slot[name=\"app-icon\"]::slotted(*) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  IcTypographyVariants,\n  IcAlignment,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcBrand,\n  IcDeviceSizes,\n  IcValueEventDetail,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  getBrandForegroundAppearance,\n  getSlot,\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n  tag: \"ic-top-navigation\",\n  styleUrl: \"ic-top-navigation.css\",\n  shadow: true,\n})\nexport class TopNavigation {\n  private hasAppIcon: boolean = false;\n  private hasIconButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private hasSearchSlotContent: boolean = false;\n  private mobileSearchButtonEl: HTMLIcButtonElement;\n  private resizeObserver: ResizeObserver = null;\n  private searchBar: HTMLIcSearchBarElement = null;\n\n  @Element() el: HTMLIcTopNavigationElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n  @State() hasFullWidthSearchBar: boolean = false;\n  @State() mobileSearchBarVisible: boolean = false;\n  @State() mobileSearchHiddenOnBlur: boolean = false;\n  @State() navMenuVisible: boolean = false;\n  @State() searchButtonClick: boolean = false;\n  @State() searchValue: string = \"\";\n\n  /**\n   * The alignment of the top navigation content.\n   */\n  @Prop() contentAligned: IcAlignment = \"full-width\";\n  /**\n   * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n   * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n   */\n  @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n  /**\n   *  The URL to navigate to when the app title is clicked.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * The status info to be displayed.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * 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.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The version info to be displayed.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  @Watch(\"appTitle\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    //this watch can be removed once Gatsby hydration issue is resolved\n    onComponentPropUndefinedChange(\n      oldValue,\n      newValue,\n      this.initialiseSearchBar\n    );\n  }\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n  /**\n   * @internal - Emitted when the menu is opened.\n   */\n  @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n  /**\n   * Emitted when the top navigation is resized.\n   */\n  @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.checkSlots();\n    this.deviceSize = getCurrentDeviceSize();\n    this.initialiseSearchBar();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Top Navigation\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.checkSlots();\n  }\n\n  @Listen(\"icNavigationMenuClose\", {})\n  navBarMenuCloseHandler(): void {\n    this.showNavMenu(false);\n    this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n  }\n\n  @Listen(\"icSearchBarBlur\", {})\n  searchInputBlurHandler({\n    detail,\n  }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n    if (detail !== null) {\n      if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n        //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n        this.toggleSearchBar();\n      }\n      this.searchValue = detail.value as string;\n    }\n  }\n\n  @Listen(\"icChange\", {})\n  searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n    this.searchValue = detail.value as string;\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n    this.foregroundColor = detail.mode;\n  }\n\n  private checkSlots = () => {\n    this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n    this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n  };\n\n  private initialiseSearchBar = () => {\n    if (this.hasSearchSlotContent) {\n      const slot = getSlot(this.el, \"search\");\n      if (slot?.tagName === \"IC-SEARCH-BAR\") {\n        this.searchBar = slot as HTMLIcSearchBarElement;\n      } else if (slot?.tagName === \"FORM\") {\n        this.searchBar = slot.querySelector(\"ic-search-bar\");\n      }\n\n      if (this.searchBar !== null) {\n        this.searchBar.hideLabel = true;\n      }\n    }\n  };\n\n  private toggleSearchBar(): void {\n    this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n    if (this.searchBar !== null) {\n      this.mobileSearchButtonEl.setAttribute(\n        \"aria-label\",\n        `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n      );\n      this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n      this.searchBar.fullWidth = this.mobileSearchBarVisible;\n      if (this.mobileSearchBarVisible) {\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  }\n\n  private menuButtonClick = () => {\n    this.showNavMenu(true);\n  };\n\n  private showNavMenu(show: boolean): void {\n    this.navMenuVisible = show;\n    (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n    document.body.style.height = show ? \"100%\" : \"auto\";\n    document.body.style.overflow = show ? \"hidden\" : \"auto\";\n  }\n\n  private searchButtonMouseDownHandler = () => {\n    this.searchButtonClick = true;\n  };\n\n  private searchButtonClickHandler = () => {\n    this.toggleSearchBar();\n    this.searchButtonClick = false;\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n      if (currSize > this.customMobileBreakpoint) {\n        this.showNavMenu(false);\n        if (this.mobileSearchBarVisible) {\n          this.toggleSearchBar();\n        }\n      }\n      this.icTopNavResized.emit({\n        size: currSize,\n      });\n      if (this.searchBar && document.activeElement === this.searchBar) {\n        this.searchBar.setAttribute(\"hidden\", \"true\");\n        //remove attribute again as this trigger a redraw & applies css\n        this.searchBar.removeAttribute(\"hidden\");\n        setTimeout(() => {\n          this.searchBar.focus();\n        }, 100);\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const {\n      appTitle,\n      contentAligned,\n      customMobileBreakpoint,\n      deviceSize,\n      el,\n      foregroundColor,\n      hasAppIcon,\n      hasFullWidthSearchBar,\n      hasIconButtons,\n      hasNavigation,\n      hasSearchSlotContent,\n      href,\n      inline,\n      menuButtonClick,\n      mobileSearchBarVisible,\n      navMenuVisible,\n      searchButtonClickHandler,\n      searchButtonMouseDownHandler,\n      shortAppTitle,\n      status,\n      version,\n      theme,\n    } = this;\n\n    const hasStatus = status !== \"\";\n    const hasVersion = version !== \"\";\n    const hasMenuContent =\n      hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n    const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"medium\" : \"large\";\n    const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n    const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n    const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n      ? deviceSize <= DEVICE_SIZES.S\n        ? \"subtitle-small\"\n        : \"h4\"\n      : \"h3\";\n\n    const mobileSearchButtonTitle = `${\n      mobileSearchBarVisible ? \"Hide\" : \"Show\"\n    } search`;\n    const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"medium\";\n\n    const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n    const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n    const Component = hasAppTitleSlot ? \"div\" : \"a\";\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <Host\n        class={{\n          \"fullwidth-searchbar\": hasFullWidthSearchBar,\n          \"mobile-mode\": overMobileBreakpoint,\n          [IcBrandForegroundEnum.Dark]:\n            foregroundColor === IcBrandForegroundEnum.Dark,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"top-navigation\">\n          <ic-section-container aligned={contentAligned} full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {(hasTitle || hasAppTitleSlot) && (\n                    <Component class=\"title-link\" {...attrs}>\n                      {hasAppIcon && (\n                        <div class=\"app-icon-container\">\n                          <slot name=\"app-icon\" />\n                        </div>\n                      )}\n                      {deviceSize <= DEVICE_SIZES.S &&\n                      (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n                        <ic-typography\n                          variant=\"subtitle-small\"\n                          aria-label={\n                            (!hasAppTitleSlot || !shortAppTitleSlot) &&\n                            `${appTitle} (${shortAppTitle})`\n                          }\n                        >\n                          <h1>\n                            {shortAppTitleSlot ? (\n                              <slot name=\"short-app-title\"></slot>\n                            ) : (\n                              shortAppTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      ) : (\n                        <ic-typography variant={appTitleVariant}>\n                          <h1 class=\"title-wrap\">\n                            {hasAppTitleSlot ? (\n                              <slot name=\"app-title\"></slot>\n                            ) : (\n                              appTitle\n                            )}\n                          </h1>\n                        </ic-typography>\n                      )}\n                    </Component>\n                  )}\n                  {hasStatus && (\n                    <div class=\"app-status\">\n                      <ic-typography\n                        aria-label=\"app tag\"\n                        variant=\"label-uppercase\"\n                        class=\"app-status-text\"\n                      >\n                        {status}\n                      </ic-typography>\n                    </div>\n                  )}\n                  {hasVersion && (\n                    <div class=\"app-version\">\n                      <ic-typography\n                        variant=\"label\"\n                        class=\"app-version-text\"\n                        aria-label=\"app version\"\n                      >\n                        {version}\n                      </ic-typography>\n                    </div>\n                  )}\n                </div>\n\n                {(hasSearchSlotContent || hasMenuContent) && (\n                  <div class=\"search-menu-container\">\n                    <div class=\"search-actions-container\">\n                      {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n                      {hasSearchSlotContent && overMobileBreakpoint && (\n                        <ic-button\n                          id=\"search-toggle-button\"\n                          ref={(el) => (this.mobileSearchButtonEl = el)}\n                          onMouseDown={searchButtonMouseDownHandler}\n                          variant=\"icon-tertiary\"\n                          monochrome\n                          size={searchButtonSize}\n                          aria-label={mobileSearchButtonTitle}\n                          theme={\n                            foregroundColor == IcBrandForegroundEnum.Light\n                              ? IcBrandForegroundEnum.Dark\n                              : IcBrandForegroundEnum.Light\n                          }\n                          onClick={searchButtonClickHandler}\n                        >\n                          <slot name=\"toggle-icon\">\n                            <svg\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 24 24\"\n                              fill=\"#ffffff\"\n                            >\n                              <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                              <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n                            </svg>\n                          </slot>\n                        </ic-button>\n                      )}\n\n                      {hasIconButtons && !overMobileBreakpoint && (\n                        <div class=\"icon-buttons-container\">\n                          <slot name=\"buttons\"></slot>\n                        </div>\n                      )}\n                      {hasMenuContent && overMobileBreakpoint && (\n                        <div class=\"menu-button-container\">\n                          <span\n                            id=\"navigation-landmark-button-text\"\n                            class=\"navigation-landmark-button-text\"\n                            aria-hidden=\"true\"\n                          >\n                            Main navigation button\n                          </span>\n                          <nav\n                            aria-labelledby=\"navigation-landmark-button-text\"\n                            aria-hidden={`${navMenuVisible}`}\n                          >\n                            <ic-button\n                              id=\"menu-button\"\n                              theme={\n                                foregroundColor == IcBrandForegroundEnum.Light\n                                  ? IcBrandForegroundEnum.Dark\n                                  : IcBrandForegroundEnum.Light\n                              }\n                              variant=\"secondary\"\n                              monochrome\n                              aria-expanded=\"false\"\n                              aria-haspopup=\"true\"\n                              aria-label={`Open ${\n                                hasNavigation ? \"navigation\" : \"app\"\n                              } menu`}\n                              size={menuSize}\n                              onClick={menuButtonClick}\n                            >\n                              Menu\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\n                                fill=\"#ffffff\"\n                                slot=\"left-icon\"\n                              >\n                                <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n                              </svg>\n                            </ic-button>\n                          </nav>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {mobileSearchBarVisible && (\n                <div class=\"search-bar-container\">\n                  <slot name=\"search\"></slot>\n                </div>\n              )}\n\n              {hasNavigation && !overMobileBreakpoint && (\n                <div class=\"navigation-tabs\">\n                  <span\n                    id=\"navigation-landmark-text\"\n                    class=\"navigation-landmark-text\"\n                    aria-hidden=\"true\"\n                  >\n                    Main pages\n                  </span>\n                  <nav\n                    aria-labelledby=\"navigation-landmark-text\"\n                    class=\"nav-panel-container\"\n                  >\n                    <ic-horizontal-scroll\n                      monochrome\n                      appearance={foregroundColor}\n                    >\n                      <ul class=\"navigation-item-list\" tabindex=\"-1\">\n                        <slot name=\"navigation\"></slot>\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                </div>\n              )}\n            </header>\n          </ic-section-container>\n        </div>\n        {navMenuVisible && (\n          <ic-navigation-menu\n            version={version}\n            status={status}\n            class={{\n              [\"inline\"]: inline,\n            }}\n          >\n            {hasIconButtons && (\n              <div class=\"menu-buttons-slot\" slot=\"buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            )}\n            <ul slot=\"navigation\">\n              <slot name=\"navigation\"></slot>\n            </ul>\n          </ic-navigation-menu>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/core/core.css

@@ -449,7 +449,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-color-text-disabled-light
   );--ic-toggle-button-selected-icon-disabled-monochrome:var(
     --ic-color-icon-disabled-mid
-  );--ic-top-navigation-background:var(--ic-theme-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover);--ic-top-navigation-icon-hover-background:var(--ic-action-default-bg-hover);--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed);--ic-top-navigation-icon-pressed-background:var(
+  );--ic-top-navigation-background:var(--ic-brand-color-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover);--ic-top-navigation-icon-hover-background:var(--ic-action-default-bg-hover);--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed);--ic-top-navigation-icon-pressed-background:var(
     --ic-action-default-bg-pressed
   );--ic-top-navigation-nav-group-link:var(--ic-color-hyperlink-default);--ic-top-navigation-nav-item:var(--ic-color-text-primary);--ic-top-navigation-nav-item-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-nav-group-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-nav-item-pressed:var(--ic-action-dark-bg-pressed);--ic-top-navigation-nav-group-pressed:var(--ic-action-dark-bg-pressed);--ic-top-navigation-nav-item-banner:var(--ic-action-default);--ic-top-navigation-nav-group-chevron:var(--ic-color-icon-neutral);--ic-top-navigation-link:var(--ic-color-brand-text);--ic-top-navigation-status-tag:var(--ic-color-background-primary);--ic-top-navigation-status-tag-text:var(--ic-color-text-primary);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-lighten-20);--ic-top-navigation-logo:var(--ic-color-icon-brand);--ic-top-navigation-icon:var(--ic-color-icon-brand);--ic-top-navigation-theme:var(--ic-color-icon-brand);--ic-top-navigation-disabled:var(--ic-color-text-disabled-default);--ic-top-navigation-enabled:var(--ic-color-brand-text);--ic-top-navigation-menu-background:var(--ic-color-background-secondary);--ic-top-navigation-menu-border:var(--ic-color-border-neutral-default);--ic-top-navigation-selected:var(--ic-color-icon-brand);--ic-top-navigation-search-placeholder-text:var(
     --ic-atoms-input-text-field-content-placeholder
@@ -601,7 +601,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
       --ic-atoms-option-bar-background-dark
     );--ic-atoms-option-bar-divider:var(--ic-atoms-option-bar-divider-dark);--ic-atoms-status-icon-success:var(--ic-atoms-status-icon-success-dark);--ic-atoms-status-icon-warning:var(--ic-atoms-status-icon-warning-dark);--ic-atoms-status-icon-error:var(--ic-atoms-status-icon-error-dark);--ic-atoms-status-icon-neutral:var(--ic-atoms-status-icon-neutral-dark);--ic-atoms-status-icon-info:var(--ic-atoms-status-icon-info-dark);--ic-atoms-dropdown-list-border:var(--ic-atoms-dropdown-list-border-dark);--ic-atoms-input-divider:var(--ic-atoms-input-divider-dark);--ic-atoms-input-autocomplete-field-border:var(
       --ic-atoms-input-autocomplete-field-border-dark
-    );--ic-typography-color:var(--ic-color-text-primary);--ic-accordion-heading-text:var(--ic-color-text-primary);--ic-accordion-group-title-text:var(--ic-color-text-primary);--ic-accordion-heading-text-disabled:var(--ic-color-text-tertiary-light);--ic-accordion-body-text:var(--ic-color-text-primary);--ic-accordion-icon:var(--ic-color-icon-inverted);--ic-accordion-icon-disabled:var(--ic-color-icon-disabled);--ic-accordion-background-hover:var(--ic-action-light-bg-hover);--ic-accordion-background-pressed:var(--ic-action-light-bg-pressed);--ic-accordion-divider:var(--ic-atoms-option-bar-divider);--ic-accordion-chevron:var(--ic-color-icon-inverted);--ic-accordion-chevron-disabled:var(--ic-color-icon-disabled);--ic-alert-background-success:var(--ic-status-success-dark);--ic-alert-background-error:var(--ic-red-1700);--ic-alert-background-warning:var(--ic-yellow-1700);--ic-alert-background-info:var(--ic-blue-1700);--ic-alert-background-neutral:var(--ic-architectural-850);--ic-alert-status-type-success:var(--ic-status-success-contrast);--ic-alert-status-type-error:var(--ic-status-error-contrast);--ic-alert-status-type-warning:var(--ic-status-warning-contrast);--ic-alert-status-type-info:var(--ic-status-info-contrast);--ic-alert-status-type-neutral:var(--ic-status-unknown-contrast);--ic-alert-title:var(--ic-color-text-primary);--ic-alert-description:var(--ic-color-text-primary);--ic-alert-icon-success:var(--ic-status-success-contrast);--ic-alert-icon-error:var(--ic-status-error-contrast);--ic-alert-icon-warning:var(--ic-status-warning-contrast);--ic-alert-icon-info:var(--ic-status-info-contrast);--ic-alert-icon-neutral:var(--ic-status-unknown-contrast);--ic-alert-icon-dismissible:var(--ic-atoms-input-clear-button);--ic-alert-border-success:var(--ic-status-success-contrast);--ic-alert-border-error:var(--ic-status-error-contrast);--ic-alert-border-warning:var(--ic-status-warning-contrast);--ic-alert-border-info:var(--ic-status-info-contrast);--ic-alert-border-neutral:var(--ic-status-unknown-contrast);--ic-badge-text:var(--ic-color-text-inverse);--ic-badge-icon:var(--ic-color-icon-inverted);--ic-badge-warning-text:var(--ic-color-text-inverse);--ic-badge-warning-icon:var(--ic-color-icon-neutral);--ic-badge-text-monochrome:var(--ic-color-text-primary);--ic-badge-icon-monochrome:var(--ic-color-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-color-background-neutral-light);--ic-badge-dark:var(--ic-color-background-primary-light);--ic-breadcrumb-icon-chevron:var(--ic-color-icon-grey-default);--ic-breadcrumb-icon:var(--ic-color-icon-action-default-dark);--ic-breadcrumb-icon-monochrome:var(--ic-color-icon-inverted);--ic-breadcrumb-text:var(--ic-color-text-primary);--ic-breadcrumb-text-monochrome:var(--ic-color-text-primary);--ic-button-primary-background:var(--ic-color-background-active);--ic-button-primary-background-hover:var(
+    );--ic-typography-color:var(--ic-color-text-primary);--ic-accordion-heading-text:var(--ic-color-text-primary);--ic-accordion-group-title-text:var(--ic-color-text-primary);--ic-accordion-heading-text-disabled:var(--ic-color-text-tertiary-light);--ic-accordion-body-text:var(--ic-color-text-primary);--ic-accordion-icon:var(--ic-color-icon-inverted);--ic-accordion-icon-disabled:var(--ic-color-icon-disabled);--ic-accordion-background-hover:var(--ic-action-light-bg-hover);--ic-accordion-background-pressed:var(--ic-action-light-bg-pressed);--ic-accordion-divider:var(--ic-atoms-option-bar-divider);--ic-accordion-chevron:var(--ic-color-icon-inverted);--ic-accordion-chevron-disabled:var(--ic-color-icon-disabled);--ic-alert-background-success:var(--ic-status-success-dark);--ic-alert-background-error:var(--ic-red-1700);--ic-alert-background-warning:var(--ic-yellow-1700);--ic-alert-background-info:var(--ic-blue-1700);--ic-alert-background-neutral:var(--ic-architectural-850);--ic-alert-status-type-success:var(--ic-status-success-contrast);--ic-alert-status-type-error:var(--ic-status-error-contrast);--ic-alert-status-type-warning:var(--ic-status-warning-contrast);--ic-alert-status-type-info:var(--ic-status-info-contrast);--ic-alert-status-type-neutral:var(--ic-status-unknown-contrast);--ic-alert-title:var(--ic-color-text-primary);--ic-alert-description:var(--ic-color-text-primary);--ic-alert-icon-success:var(--ic-status-success-contrast);--ic-alert-icon-error:var(--ic-status-error-contrast);--ic-alert-icon-warning:var(--ic-status-warning-contrast);--ic-alert-icon-info:var(--ic-status-info-contrast);--ic-alert-icon-neutral:var(--ic-status-unknown-contrast);--ic-alert-icon-dismissible:var(--ic-atoms-input-clear-button);--ic-alert-border-success:var(--ic-status-success-contrast);--ic-alert-border-error:var(--ic-status-error-contrast);--ic-alert-border-warning:var(--ic-status-warning-contrast);--ic-alert-border-info:var(--ic-status-info-contrast);--ic-alert-border-neutral:var(--ic-status-unknown-contrast);--ic-badge-text:var(--ic-color-text-inverse);--ic-badge-icon:var(--ic-color-icon-neutral);--ic-badge-warning-text:var(--ic-color-text-inverse);--ic-badge-warning-icon:var(--ic-color-icon-neutral);--ic-badge-text-monochrome:var(--ic-color-text-primary);--ic-badge-icon-monochrome:var(--ic-color-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-color-background-neutral-light);--ic-badge-dark:var(--ic-color-background-primary-light);--ic-breadcrumb-icon-chevron:var(--ic-color-icon-grey-default);--ic-breadcrumb-icon:var(--ic-color-icon-action-default-dark);--ic-breadcrumb-icon-monochrome:var(--ic-color-icon-inverted);--ic-breadcrumb-text:var(--ic-color-text-primary);--ic-breadcrumb-text-monochrome:var(--ic-color-text-primary);--ic-button-primary-background:var(--ic-color-background-active);--ic-button-primary-background-hover:var(
       --ic-color-background-active-hover-dark
     );--ic-button-primary-background-pressed:var(
       --ic-color-background-active-pressed-dark
@@ -941,7 +941,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
       --ic-color-text-disabled-light
     );--ic-toggle-button-selected-icon-disabled-monochrome:var(
       --ic-color-icon-disabled-mid
-    );--ic-top-navigation-background:var(--ic-theme-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover-dark);--ic-top-navigation-icon-hover-background:var(
+    );--ic-top-navigation-background:var(--ic-brand-color-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover-dark);--ic-top-navigation-icon-hover-background:var(
       --ic-action-default-bg-hover
     );--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed-dark);--ic-top-navigation-icon-pressed-background:var(
       --ic-action-default-bg-pressed
@@ -1089,7 +1089,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-atoms-group-label-background-dark
   );--ic-atoms-list-item-background:var(--ic-atoms-list-item-background-dark);--ic-atoms-loading-text:var(--ic-atoms-loading-text-dark);--ic-atoms-loading-error-text:var(--ic-atoms-loading-error-text-dark);--ic-atoms-loading-error-icon:var(--ic-atoms-loading-error-icon-dark);--ic-atoms-list-item-text:var(--ic-atoms-list-item-text-dark);--ic-atoms-list-item-divider:var(--ic-atoms-list-item-divider-dark);--ic-atoms-option-bar-text:var(--ic-atoms-option-bar-text-dark);--ic-atoms-option-bar-background:var(--ic-atoms-option-bar-background-dark);--ic-atoms-option-bar-divider:var(--ic-atoms-option-bar-divider-dark);--ic-atoms-status-icon-success:var(--ic-atoms-status-icon-success-dark);--ic-atoms-status-icon-warning:var(--ic-atoms-status-icon-warning-dark);--ic-atoms-status-icon-error:var(--ic-atoms-status-icon-error-dark);--ic-atoms-status-icon-neutral:var(--ic-atoms-status-icon-neutral-dark);--ic-atoms-status-icon-info:var(--ic-atoms-status-icon-info-dark);--ic-atoms-dropdown-list-border:var(--ic-atoms-dropdown-list-border-dark);--ic-atoms-input-divider:var(--ic-atoms-input-divider-dark);--ic-atoms-input-autocomplete-field-border:var(
     --ic-atoms-input-autocomplete-field-border-dark
-  );--ic-typography-color:var(--ic-color-text-primary);--ic-accordion-heading-text:var(--ic-color-text-primary);--ic-accordion-group-title-text:var(--ic-color-text-primary);--ic-accordion-heading-text-disabled:var(--ic-color-text-tertiary-light);--ic-accordion-body-text:var(--ic-color-text-primary);--ic-accordion-icon:var(--ic-color-icon-inverted);--ic-accordion-icon-disabled:var(--ic-color-icon-disabled);--ic-accordion-background-hover:var(--ic-action-light-bg-hover);--ic-accordion-background-pressed:var(--ic-action-light-bg-pressed);--ic-accordion-divider:var(--ic-atoms-option-bar-divider);--ic-accordion-chevron:var(--ic-color-icon-inverted);--ic-accordion-chevron-disabled:var(--ic-color-icon-disabled);--ic-alert-background-success:var(--ic-status-success-dark);--ic-alert-background-error:var(--ic-red-1700);--ic-alert-background-warning:var(--ic-yellow-1700);--ic-alert-background-info:var(--ic-blue-1700);--ic-alert-background-neutral:var(--ic-architectural-850);--ic-alert-status-type-success:var(--ic-status-success-contrast);--ic-alert-status-type-error:var(--ic-status-error-contrast);--ic-alert-status-type-warning:var(--ic-status-warning-contrast);--ic-alert-status-type-info:var(--ic-status-info-contrast);--ic-alert-status-type-neutral:var(--ic-status-unknown-contrast);--ic-alert-title:var(--ic-color-text-primary);--ic-alert-description:var(--ic-color-text-primary);--ic-alert-icon-success:var(--ic-status-success-contrast);--ic-alert-icon-error:var(--ic-status-error-contrast);--ic-alert-icon-warning:var(--ic-status-warning-contrast);--ic-alert-icon-info:var(--ic-status-info-contrast);--ic-alert-icon-neutral:var(--ic-status-unknown-contrast);--ic-alert-icon-dismissible:var(--ic-atoms-input-clear-button);--ic-alert-border-success:var(--ic-status-success-contrast);--ic-alert-border-error:var(--ic-status-error-contrast);--ic-alert-border-warning:var(--ic-status-warning-contrast);--ic-alert-border-info:var(--ic-status-info-contrast);--ic-alert-border-neutral:var(--ic-status-unknown-contrast);--ic-badge-text:var(--ic-color-text-inverse);--ic-badge-icon:var(--ic-color-icon-inverted);--ic-badge-warning-text:var(--ic-color-text-inverse);--ic-badge-warning-icon:var(--ic-color-icon-neutral);--ic-badge-text-monochrome:var(--ic-color-text-primary);--ic-badge-icon-monochrome:var(--ic-color-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-color-background-neutral-light);--ic-badge-dark:var(--ic-color-background-primary-light);--ic-breadcrumb-icon-chevron:var(--ic-color-icon-grey-default);--ic-breadcrumb-icon:var(--ic-color-icon-action-default-dark);--ic-breadcrumb-icon-monochrome:var(--ic-color-icon-inverted);--ic-breadcrumb-text:var(--ic-color-text-primary);--ic-breadcrumb-text-monochrome:var(--ic-color-text-primary);--ic-button-primary-background:var(--ic-color-background-active);--ic-button-primary-background-hover:var(
+  );--ic-typography-color:var(--ic-color-text-primary);--ic-accordion-heading-text:var(--ic-color-text-primary);--ic-accordion-group-title-text:var(--ic-color-text-primary);--ic-accordion-heading-text-disabled:var(--ic-color-text-tertiary-light);--ic-accordion-body-text:var(--ic-color-text-primary);--ic-accordion-icon:var(--ic-color-icon-inverted);--ic-accordion-icon-disabled:var(--ic-color-icon-disabled);--ic-accordion-background-hover:var(--ic-action-light-bg-hover);--ic-accordion-background-pressed:var(--ic-action-light-bg-pressed);--ic-accordion-divider:var(--ic-atoms-option-bar-divider);--ic-accordion-chevron:var(--ic-color-icon-inverted);--ic-accordion-chevron-disabled:var(--ic-color-icon-disabled);--ic-alert-background-success:var(--ic-status-success-dark);--ic-alert-background-error:var(--ic-red-1700);--ic-alert-background-warning:var(--ic-yellow-1700);--ic-alert-background-info:var(--ic-blue-1700);--ic-alert-background-neutral:var(--ic-architectural-850);--ic-alert-status-type-success:var(--ic-status-success-contrast);--ic-alert-status-type-error:var(--ic-status-error-contrast);--ic-alert-status-type-warning:var(--ic-status-warning-contrast);--ic-alert-status-type-info:var(--ic-status-info-contrast);--ic-alert-status-type-neutral:var(--ic-status-unknown-contrast);--ic-alert-title:var(--ic-color-text-primary);--ic-alert-description:var(--ic-color-text-primary);--ic-alert-icon-success:var(--ic-status-success-contrast);--ic-alert-icon-error:var(--ic-status-error-contrast);--ic-alert-icon-warning:var(--ic-status-warning-contrast);--ic-alert-icon-info:var(--ic-status-info-contrast);--ic-alert-icon-neutral:var(--ic-status-unknown-contrast);--ic-alert-icon-dismissible:var(--ic-atoms-input-clear-button);--ic-alert-border-success:var(--ic-status-success-contrast);--ic-alert-border-error:var(--ic-status-error-contrast);--ic-alert-border-warning:var(--ic-status-warning-contrast);--ic-alert-border-info:var(--ic-status-info-contrast);--ic-alert-border-neutral:var(--ic-status-unknown-contrast);--ic-badge-text:var(--ic-color-text-inverse);--ic-badge-icon:var(--ic-color-icon-neutral);--ic-badge-warning-text:var(--ic-color-text-inverse);--ic-badge-warning-icon:var(--ic-color-icon-neutral);--ic-badge-text-monochrome:var(--ic-color-text-primary);--ic-badge-icon-monochrome:var(--ic-color-icon-inverted);--ic-badge-success:var(--ic-status-success-contrast);--ic-badge-warning:var(--ic-status-warning-contrast);--ic-badge-error:var(--ic-status-error-contrast);--ic-badge-info:var(--ic-status-info-light);--ic-badge-light:var(--ic-color-background-neutral-light);--ic-badge-dark:var(--ic-color-background-primary-light);--ic-breadcrumb-icon-chevron:var(--ic-color-icon-grey-default);--ic-breadcrumb-icon:var(--ic-color-icon-action-default-dark);--ic-breadcrumb-icon-monochrome:var(--ic-color-icon-inverted);--ic-breadcrumb-text:var(--ic-color-text-primary);--ic-breadcrumb-text-monochrome:var(--ic-color-text-primary);--ic-button-primary-background:var(--ic-color-background-active);--ic-button-primary-background-hover:var(
     --ic-color-background-active-hover-dark
   );--ic-button-primary-background-pressed:var(
     --ic-color-background-active-pressed-dark
@@ -1365,11 +1365,11 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
     --ic-color-text-disabled-light
   );--ic-toggle-button-selected-icon-disabled-monochrome:var(
     --ic-color-icon-disabled-mid
-  );--ic-top-navigation-background:var(--ic-theme-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover-dark);--ic-top-navigation-icon-hover-background:var(--ic-action-default-bg-hover);--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed-dark);--ic-top-navigation-icon-pressed-background:var(
+  );--ic-top-navigation-background:var(--ic-brand-color-primary);--ic-top-navigation-keyline:var(--ic-color-keyline-lighten);--ic-top-navigation-icon-and-label:var(--ic-color-brand-text);--ic-top-navigation-text:var(--ic-color-brand-text);--ic-top-navigation-title-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-icon-active:var(--ic-color-icon-action-default);--ic-top-navigation-icon-hover:var(--ic-color-icon-action-hover-dark);--ic-top-navigation-icon-hover-background:var(--ic-action-default-bg-hover);--ic-top-navigation-icon-pressed:var(--ic-color-icon-action-pressed-dark);--ic-top-navigation-icon-pressed-background:var(
     --ic-action-default-bg-pressed
   );--ic-top-navigation-nav-group-link:var(--ic-color-hyperlink-default);--ic-top-navigation-nav-item:var(--ic-color-text-primary);--ic-top-navigation-nav-item-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-nav-group-hover:var(--ic-action-light-bg-hover);--ic-top-navigation-nav-item-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-nav-group-pressed:var(--ic-action-light-bg-pressed);--ic-top-navigation-nav-item-banner:var(--ic-action-default);--ic-top-navigation-nav-group-chevron:var(--ic-color-icon-brand);--ic-top-navigation-link:var(--ic-color-brand-text);--ic-top-navigation-status-tag:var(--ic-color-background-primary-light);--ic-top-navigation-status-tag-text:var(--ic-color-text-inverse);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-lighten-20);--ic-top-navigation-logo:var(--ic-color-icon-brand);--ic-top-navigation-icon:var(--ic-color-icon-brand);--ic-top-navigation-theme:var(--ic-color-icon-brand);--ic-top-navigation-disabled:var(--ic-color-text-disabled-dark);--ic-top-navigation-enabled:var(--ic-color-brand-text);--ic-top-navigation-menu-background:var(--ic-color-background-primary);--ic-top-navigation-menu-border:var(--ic-color-border-neutral-default);--ic-top-navigation-selected:var(--ic-color-icon-brand);--ic-top-navigation-search-placeholder-text:var(
     --ic-atoms-input-text-field-content-placeholder
-  );--ic-tree-view-text:var(--ic-color-text-primary);--ic-tree-view-background:var(--ic-color-background-primary);--ic-tree-view-text-disabled:var(--ic-color-text-disabled-dark);--ic-tree-view-icon-disabled:var(--ic-color-icon-pressed);--ic-tree-view-icon:var(--ic-color-icon-inverted);--ic-tree-view-dropdown-arrow:var(--ic-color-icon-action-default);--ic-tree-view-dropdown-arrow-disabled:var(--ic-color-icon-disabled);--ic-tree-view-divider:var(--ic-state-layer-neutral-light);--ic-tree-view-hover:var(--ic-action-light-bg-hover);--ic-tree-view-pressed:var(--ic-action-light-bg-pressed);--ic-tree-view-selected:var(--ic-action-dark-selected)}:root{--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-750:#3b3e45;--ic-architectural-800:#2c2f34;--ic-architectural-850:#232629;--ic-architectural-900:#17191c;--ic-architectural-950:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-architectural-700-state-layer-10:rgb(65 70 77 / 10%);--ic-architectural-700-state-layer-20:rgb(65 70 77 / 20%);--ic-architectural-700-state-layer-24:rgb(65 70 77 / 24%);--ic-architectural-700-state-layer-34:rgb(65 70 77 / 34%);--ic-architectural-white-state-layer-10:rgb(255 255 255 / 10%);--ic-architectural-white-state-layer-20:rgb(255 255 255 / 20%);--ic-architectural-white-state-layer-24:rgb(255 255 255 / 24%);--ic-architectural-white-state-layer-25:rgb(255 255 255 / 25%);--ic-architectural-white-state-layer-30:rgb(255 255 255 / 30%);--ic-architectural-white-state-layer-34:rgb(255 255 255 / 34%);--ic-architectural-white-state-layer-40:rgb(255 255 255 / 40%);--ic-architectural-white-state-layer-50:rgb(255 255 255 / 50%);--ic-architectural-black-state-layer-10:rgb(0 0 0 / 10%);--ic-architectural-black-state-layer-20:rgb(0 0 0 / 20%);--ic-architectural-black-state-layer-25:rgb(0 0 0 / 25%);--ic-architectural-black-state-layer-30:rgb(0 0 0 / 30%);--ic-architectural-black-state-layer-40:rgb(0 0 0 / 40%);--ic-architectural-black-state-layer-50:rgb(0 0 0 / 50%);--ic-blue-0:#e1f0fc;--ic-blue-50:#c3e1f9;--ic-blue-100:#98c9f5;--ic-blue-200:#77b4f0;--ic-blue-300:#5da0ea;--ic-blue-400:#488fe3;--ic-blue-500:#377fdb;--ic-blue-600:#2a71d2;--ic-blue-700:#2064c8;--ic-blue-800:#1759bc;--ic-blue-900:#124db3;--ic-blue-1000:#0e43a8;--ic-blue-1100:#0b399c;--ic-blue-1200:#09308e;--ic-blue-1300:#07277e;--ic-blue-1400:#1b3c79;--ic-blue-1500:#122e63;--ic-blue-1600:#041144;--ic-blue-1700:#020b2e;--ic-blue-800-state-layer-10:rgb(23 89 188 / 10%);--ic-blue-800-state-layer-20:rgb(23 89 188 / 20%);--ic-blue-800-state-layer-24:rgb(23 89 188 / 24%);--ic-blue-800-state-layer-30:rgb(23 89 188 / 30%);--ic-blue-800-state-layer-34:rgb(23 89 188 / 34%);--ic-blue-800-state-layer-50:rgb(23 89 188 / 50%);--ic-red-0:#ffe4e3;--ic-red-50:#fec9c8;--ic-red-100:#fca19e;--ic-red-200:#f9837d;--ic-red-300:#f66d63;--ic-red-400:#f15b4e;--ic-red-500:#ec4e3d;--ic-red-600:#e54330;--ic-red-700:#dd3b25;--ic-red-800:#d4351c;--ic-red-900:#c92c16;--ic-red-1000:#bc2411;--ic-red-1100:#ad1e0e;--ic-red-1300:#8b1209;--ic-red-1500:#610a05;--ic-red-1700:#330403;--ic-green-0:#e8fef3;--ic-green-50:#d1fde7;--ic-green-100:#b2fad6;--ic-green-200:#97f6c8;--ic-green-300:#81f2bb;--ic-green-400:#6dedaf;--ic-green-500:#5ce7a3;--ic-green-600:#4cdf98;--ic-green-700:#3ed78d;--ic-green-800:#31cd83;--ic-green-900:#26c278;--ic-green-1000:#1bb56c;--ic-green-1100:#12a661;--ic-green-1200:#0b9655;--ic-green-1300:#058449;--ic-green-1400:#00703c;--ic-green-1600:#0e462b;--ic-green-1700:#0e3020;--ic-yellow-0:#fffbd8;--ic-yellow-50:#fff7b0;--ic-yellow-100:#ffed83;--ic-yellow-200:#ffe058;--ic-yellow-300:#ffd12e;--ic-yellow-400:#ffc107;--ic-yellow-500:#f8ae10;--ic-yellow-600:#f09d19;--ic-yellow-700:#e78f22;--ic-yellow-800:#dc832a;--ic-yellow-900:#d07932;--ic-yellow-1000:#c26f38;--ic-yellow-1100:#b3673c;--ic-yellow-1200:#a25e3f;--ic-yellow-1300:#8f553e;--ic-yellow-1400:#7a4c3c;--ic-yellow-1700:#342521;--ic-purple-0:#f9f2ff;--ic-purple-50:#efdbff;--ic-purple-100:#e4c5ff;--ic-purple-200:#d5a2fe;--ic-purple-300:#c988fd;--ic-purple-400:#bf74fc;--ic-purple-500:#b764fb;--ic-purple-600:#b057f9;--ic-purple-700:#ab4df7;--ic-purple-800:#a645f5;--ic-purple-900:#a13ef2;--ic-purple-1000:#9c38ee;--ic-purple-1100:#9733e8;--ic-purple-1200:#902fe0;--ic-purple-1300:#882ad5;--ic-purple-1400:#7c25c2;--ic-purple-1800:#350f54;--ic-light-blue-0:#f7faff;--ic-light-blue-100:#e3ecfd;--ic-light-blue-600:#769ee7;--ic-light-blue-1000:#3d6abe;--ic-light-blue-1400:#1b3c79;--ic-dark-blue-0:#eff3fa;--ic-dark-blue-20:#cdd5e3;--ic-dark-blue-40:#abb6ce;--ic-dark-blue-60:#8997b7;--ic-dark-blue-80:#6678a0;--ic-dark-blue-100:#445a8b;--ic-dark-blue-500:#192b50;--ic-dark-blue-700:#0c213a;--ic-dark-blue-800:#0e1c30;--ic-dark-blue-900:#0a1321;--ic-color-classification-blue:#2b71c7;--ic-color-classification-yellow:#f39c2c;--ic-color-classification-red:#a00;--ic-color-classification-grey:#616161;--ic-classification-not-set:var(--ic-color-classification-grey);--ic-classification-official:var(--ic-color-classification-blue);--ic-classification-official-sensitive:var(--ic-color-classification-blue);--ic-classification-secret:var(--ic-color-classification-yellow);--ic-classification-top-secret:var(--ic-color-classification-red);--ic-brand-blue-primary:#1b3c79;--ic-brand-darken-20:var(--ic-architectural-black-state-layer-20);--ic-brand-darken-30:var(--ic-architectural-black-state-layer-30);--ic-brand-darken-40:var(--ic-architectural-black-state-layer-40);--ic-brand-lighten-20:var(--ic-architectural-white-state-layer-20);--ic-brand-lighten-40:var(--ic-architectural-white-state-layer-40);--ic-color-link-default:#1759bc;--ic-color-link-hover:#7c2855;--ic-color-link-visited:#330072;--ic-color-link-visited-contrast:#b0b0b0;--ic-color-hyperlink-default-light:var(--ic-blue-800);--ic-color-hyperlink-default-dark:var(--ic-blue-300);--ic-color-hyperlink-visited-light:var(--ic-color-link-visited);--ic-color-hyperlink-visited-dark:var(--ic-purple-300);--ic-color-hyperlink-visited-monochrome-light:var(
+  );--ic-tree-view-text:var(--ic-color-text-primary);--ic-tree-view-background:var(--ic-color-background-primary);--ic-tree-view-text-disabled:var(--ic-color-text-disabled-dark);--ic-tree-view-icon-disabled:var(--ic-color-icon-pressed);--ic-tree-view-icon:var(--ic-color-icon-inverted);--ic-tree-view-dropdown-arrow:var(--ic-color-icon-action-default);--ic-tree-view-dropdown-arrow-disabled:var(--ic-color-icon-disabled);--ic-tree-view-divider:var(--ic-state-layer-neutral-light);--ic-tree-view-hover:var(--ic-action-light-bg-hover);--ic-tree-view-pressed:var(--ic-action-light-bg-pressed);--ic-tree-view-selected:var(--ic-action-dark-selected)}:root{--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-750:#3b3e45;--ic-architectural-800:#2c2f34;--ic-architectural-850:#232629;--ic-architectural-900:#17191c;--ic-architectural-950:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-architectural-700-state-layer-10:rgb(65 70 77 / 10%);--ic-architectural-700-state-layer-20:rgb(65 70 77 / 20%);--ic-architectural-700-state-layer-24:rgb(65 70 77 / 24%);--ic-architectural-700-state-layer-34:rgb(65 70 77 / 34%);--ic-architectural-white-state-layer-10:rgb(255 255 255 / 10%);--ic-architectural-white-state-layer-20:rgb(255 255 255 / 20%);--ic-architectural-white-state-layer-24:rgb(255 255 255 / 24%);--ic-architectural-white-state-layer-25:rgb(255 255 255 / 25%);--ic-architectural-white-state-layer-30:rgb(255 255 255 / 30%);--ic-architectural-white-state-layer-34:rgb(255 255 255 / 34%);--ic-architectural-white-state-layer-40:rgb(255 255 255 / 40%);--ic-architectural-white-state-layer-50:rgb(255 255 255 / 50%);--ic-architectural-black-state-layer-10:rgb(0 0 0 / 10%);--ic-architectural-black-state-layer-20:rgb(0 0 0 / 20%);--ic-architectural-black-state-layer-25:rgb(0 0 0 / 25%);--ic-architectural-black-state-layer-30:rgb(0 0 0 / 30%);--ic-architectural-black-state-layer-40:rgb(0 0 0 / 40%);--ic-architectural-black-state-layer-50:rgb(0 0 0 / 50%);--ic-blue-0:#e1f0fc;--ic-blue-50:#c3e1f9;--ic-blue-100:#98c9f5;--ic-blue-200:#77b4f0;--ic-blue-300:#5da0ea;--ic-blue-400:#488fe3;--ic-blue-500:#377fdb;--ic-blue-600:#2a71d2;--ic-blue-700:#2064c8;--ic-blue-800:#1759bc;--ic-blue-900:#124db3;--ic-blue-1000:#0e43a8;--ic-blue-1100:#0b399c;--ic-blue-1200:#09308e;--ic-blue-1300:#07277e;--ic-blue-1400:#1b3c79;--ic-blue-1500:#122e63;--ic-blue-1600:#041144;--ic-blue-1700:#020b2e;--ic-blue-800-state-layer-10:rgb(23 89 188 / 10%);--ic-blue-800-state-layer-20:rgb(23 89 188 / 20%);--ic-blue-800-state-layer-24:rgb(23 89 188 / 24%);--ic-blue-800-state-layer-30:rgb(23 89 188 / 30%);--ic-blue-800-state-layer-34:rgb(23 89 188 / 34%);--ic-blue-800-state-layer-50:rgb(23 89 188 / 50%);--ic-red-0:#ffe4e3;--ic-red-50:#fec9c8;--ic-red-100:#fca19e;--ic-red-200:#f9837d;--ic-red-300:#f66d63;--ic-red-400:#f15b4e;--ic-red-500:#ec4e3d;--ic-red-600:#e54330;--ic-red-700:#dd3b25;--ic-red-800:#d4351c;--ic-red-900:#c92c16;--ic-red-1000:#bc2411;--ic-red-1100:#ad1e0e;--ic-red-1300:#8b1209;--ic-red-1500:#610a05;--ic-red-1700:#330403;--ic-green-0:#e8fef3;--ic-green-50:#d1fde7;--ic-green-100:#b2fad6;--ic-green-200:#97f6c8;--ic-green-300:#81f2bb;--ic-green-400:#6dedaf;--ic-green-500:#5ce7a3;--ic-green-600:#4cdf98;--ic-green-700:#3ed78d;--ic-green-800:#31cd83;--ic-green-900:#26c278;--ic-green-1000:#1bb56c;--ic-green-1100:#12a661;--ic-green-1200:#0b9655;--ic-green-1300:#058449;--ic-green-1400:#00703c;--ic-green-1600:#0e462b;--ic-green-1700:#0e3020;--ic-yellow-0:#fffbd8;--ic-yellow-50:#fff7b0;--ic-yellow-100:#ffed83;--ic-yellow-200:#ffe058;--ic-yellow-300:#ffd12e;--ic-yellow-400:#ffc107;--ic-yellow-500:#f8ae10;--ic-yellow-600:#f09d19;--ic-yellow-700:#e78f22;--ic-yellow-800:#dc832a;--ic-yellow-900:#d07932;--ic-yellow-1000:#c26f38;--ic-yellow-1100:#b3673c;--ic-yellow-1200:#a25e3f;--ic-yellow-1300:#8f553e;--ic-yellow-1400:#7a4c3c;--ic-yellow-1700:#342521;--ic-purple-0:#f9f2ff;--ic-purple-50:#efdbff;--ic-purple-100:#e4c5ff;--ic-purple-200:#d5a2fe;--ic-purple-300:#c988fd;--ic-purple-400:#bf74fc;--ic-purple-500:#b764fb;--ic-purple-600:#b057f9;--ic-purple-700:#ab4df7;--ic-purple-800:#a645f5;--ic-purple-900:#a13ef2;--ic-purple-1000:#9c38ee;--ic-purple-1100:#9733e8;--ic-purple-1200:#902fe0;--ic-purple-1300:#882ad5;--ic-purple-1400:#7c25c2;--ic-purple-1800:#350f54;--ic-light-blue-0:#f7faff;--ic-light-blue-100:#e3ecfd;--ic-light-blue-600:#769ee7;--ic-light-blue-1000:#3d6abe;--ic-light-blue-1400:#1b3c79;--ic-dark-blue-0:#eff3fa;--ic-dark-blue-20:#cdd5e3;--ic-dark-blue-40:#abb6ce;--ic-dark-blue-60:#8997b7;--ic-dark-blue-80:#6678a0;--ic-dark-blue-100:#445a8b;--ic-dark-blue-500:#192b50;--ic-dark-blue-700:#0c213a;--ic-dark-blue-800:#0e1c30;--ic-dark-blue-900:#0a1321;--ic-color-classification-blue:#2b71c7;--ic-color-classification-yellow:#f39c2c;--ic-color-classification-red:#a00;--ic-color-classification-grey:#616161;--ic-classification-not-set:var(--ic-color-classification-grey);--ic-classification-official:var(--ic-color-classification-blue);--ic-classification-official-sensitive:var(--ic-color-classification-blue);--ic-classification-secret:var(--ic-color-classification-yellow);--ic-classification-top-secret:var(--ic-color-classification-red);--ic-color-link-default:#1759bc;--ic-color-link-hover:#7c2855;--ic-color-link-visited:#330072;--ic-color-link-visited-contrast:#b0b0b0;--ic-color-hyperlink-default-light:var(--ic-blue-800);--ic-color-hyperlink-default-dark:var(--ic-blue-300);--ic-color-hyperlink-visited-light:var(--ic-color-link-visited);--ic-color-hyperlink-visited-dark:var(--ic-purple-300);--ic-color-hyperlink-visited-monochrome-light:var(
     --ic-color-text-secondary-light
   );--ic-color-hyperlink-visited-monochrome-dark:var(
     --ic-color-link-visited-contrast
@@ -1395,51 +1395,71 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-text-primary)}a
   );--ic-status-error-pressed:rgb(
     calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
       calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
-  );--ic-status-info-default:var(--ic-blue-900);--ic-status-info-light:var(--ic-blue-0);--ic-status-info-dark:var(--ic-blue-1600);--ic-status-info-contrast:var(--ic-blue-400);--ic-status-anomalous-default:var(--ic-purple-1400);--ic-status-anomalous-light:var(--ic-purple-50);--ic-status-anomalous-dark:var(--ic-purple-1800);--ic-status-anomalous-contrast:var(--ic-purple-400);--ic-status-unknown-default:var(--ic-architectural-500);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-color-brand-text:var(--ic-architectural-white);--ic-color-text-primary-light:var(--ic-architectural-950);--ic-color-text-primary-dark:var(--ic-architectural-white);--ic-color-text-secondary-light:var(--ic-architectural-700);--ic-color-text-secondary-dark:var(--ic-architectural-100);--ic-color-text-tertiary-light:var(--ic-architectural-500);--ic-color-text-tertiary-dark:var(--ic-architectural-200);--ic-color-text-inverse-light:var(--ic-color-text-primary-dark);--ic-color-text-inverse-dark:var(--ic-color-text-primary-light);--ic-color-text-inverted:var(--ic-architectural-white);--ic-color-text-disabled-default:var(--ic-architectural-300);--ic-color-text-disabled-light:var(--ic-architectural-200);--ic-color-text-disabled-dark:var(--ic-architectural-600);--ic-color-text-inactive:var(--ic-architectural-400);--ic-color-text-action:var(--ic-blue-800);--ic-color-text-action-dark:var(--ic-blue-400);--ic-color-text-action-hover:var(--ic-blue-1100);--ic-color-text-action-hover-dark:var(--ic-blue-200);--ic-color-text-action-pressed:var(--ic-blue-1300);--ic-color-text-action-pressed-dark:var(--ic-blue-100);--ic-color-text-error-light:var(--ic-red-300);--ic-color-text-error-dark:var(--ic-red-800);--ic-color-background-primary-light:var(--ic-architectural-white);--ic-color-background-primary-dark:var(--ic-architectural-800);--ic-color-background-secondary-light:var(--ic-architectural-20);--ic-color-background-secondary-40:var(--ic-architectural-40);--ic-color-background-secondary-dark:var(--ic-architectural-700);--ic-color-background-neutral-light:var(--ic-architectural-800);--ic-color-background-neutral-dark:var(--ic-architectural-950);--ic-color-background-active-light:var(--ic-blue-800);--ic-color-background-active-dark:var(--ic-blue-400);--ic-color-background-hover-default:var(--ic-blue-1100);--ic-color-background-hover-light:var(--ic-architectural-200);--ic-color-background-hover-dark:var(--ic-architectural-800);--ic-color-background-active-hover-light:var(--ic-blue-1100);--ic-color-background-active-hover-dark:var(--ic-blue-200);--ic-color-background-pressed-default:var(--ic-blue-1300);--ic-color-background-pressed-light:var(--ic-architectural-300);--ic-color-background-pressed-dark:var(--ic-architectural-700);--ic-color-background-active-pressed-light:var(--ic-blue-1300);--ic-color-background-active-pressed-dark:var(--ic-blue-600);--ic-color-background-disabled-default:var(--ic-architectural-200);--ic-color-background-disabled-light:var(--ic-architectural-80);--ic-color-background-disabled-dark:var(--ic-architectural-300);--ic-color-background-disabled-mid:var(--ic-architectural-400);--ic-color-background-disabled-darkest:var(--ic-architectural-600);--ic-color-background-selected:var(--ic-architectural-white);--ic-color-background-clear-icon-hover:var(--ic-architectural-100);--ic-color-background-success-light:var(--ic-green-1400);--ic-color-background-success-dark:var(--ic-green-300);--ic-color-background-warning-light:var(--ic-yellow-400);--ic-color-background-warning-dark:var(--ic-yellow-300);--ic-color-background-destructive-light:var(--ic-red-800);--ic-color-background-destructive-dark:var(--ic-red-300);--ic-color-background-destructive-hover-light:var(--ic-red-1100);--ic-color-background-destructive-hover-dark:var(--ic-red-400);--ic-color-background-destructive-pressed-light:var(--ic-red-1300);--ic-color-background-destructive-pressed-dark:var(--ic-red-700);--ic-color-background-solid:var(--ic-architectural-white);--ic-color-background-solid-disabled:var(--ic-architectural-100);--ic-color-background-solid-hover:var(--ic-blue-50);--ic-color-background-solid-pressed:var(--ic-blue-100);--ic-color-background-solid-mono:var(--ic-architectural-black);--ic-color-background-solid-mono-disabled:var(--ic-architectural-100);--ic-color-background-solid-mono-hover:var(--ic-architectural-800);--ic-color-background-solid-mono-pressed:var(--ic-architectural-600);--ic-color-border-neutral-default:var(--ic-architectural-300);--ic-color-border-neutral-black:var(--ic-architectural-black);--ic-color-border-neutral-white:var(--ic-architectural-white);--ic-color-border-neutral-grey-light:var(--ic-architectural-40);--ic-color-border-neutral-grey-dark:var(--ic-architectural-400);--ic-color-border-neutral-pressed-default:var(--ic-architectural-600);--ic-color-border-neutral-pressed-light:var(--ic-architectural-200);--ic-color-border-neutral-pressed-dark:var(--ic-architectural-700);--ic-color-border-neutral-hover-default:var(--ic-architectural-500);--ic-color-border-neutral-hover-light:var(--ic-architectural-200);--ic-color-border-neutral-hover-dark:var(--ic-architectural-800);--ic-color-border-neutral-disabled-light:var(--ic-architectural-200);--ic-color-border-neutral-disabled-dark:var(--ic-architectural-600);--ic-color-border-success-light:var(--ic-green-1400);--ic-color-border-success-dark:var(--ic-green-300);--ic-color-border-success-hover-light:var(--ic-green-1600);--ic-color-border-success-hover-dark:var(--ic-green-400);--ic-color-border-success-pressed-light:var(--ic-green-1700);--ic-color-border-success-pressed-dark:var(--ic-green-600);--ic-color-border-warning-light:var(--ic-yellow-900);--ic-color-border-warning-dark:var(--ic-yellow-300);--ic-color-border-warning-hover-light:var(--ic-yellow-1100);--ic-color-border-warning-hover-dark:var(--ic-yellow-400);--ic-color-border-warning-pressed-light:var(--ic-yellow-1300);--ic-color-border-warning-pressed-dark:var(--ic-yellow-500);--ic-color-border-error-light:var(--ic-red-800);--ic-color-border-error-dark:var(--ic-red-300);--ic-color-border-error-hover-light:var(--ic-red-1100);--ic-color-border-error-hover-dark:var(--ic-red-400);--ic-color-border-error-pressed-light:var(--ic-red-1300);--ic-color-border-error-pressed-dark:var(--ic-red-700);--ic-color-border-action-light:var(--ic-blue-800);--ic-color-border-action-dark:var(--ic-blue-400);--ic-color-border-action-hover-light:var(--ic-blue-1100);--ic-color-border-action-hover-dark:var(--ic-blue-200);--ic-color-border-action-pressed-light:var(--ic-blue-1300);--ic-color-border-action-pressed-dark:var(--ic-blue-100);--ic-action-default-light:var(--ic-blue-800);--ic-action-default-dark:var(--ic-blue-400);--ic-action-default-hover-light:var(--ic-blue-1100);--ic-action-default-hover-dark:var(--ic-blue-200);--ic-action-default-pressed-light:var(--ic-blue-1300);--ic-action-default-pressed-dark:var(--ic-blue-100);--ic-action-default-selected-light:var(--ic-blue-800-state-layer-10);--ic-action-default-selected-dark:var(--ic-blue-900);--ic-action-default-disabled:var(--ic-blue-50);--ic-action-default-active-alpha:var(--ic-blue-800-state-layer-50);--ic-action-default-bg-hover:var(--ic-blue-800-state-layer-10);--ic-action-default-bg-hover-24:var(--ic-blue-800-state-layer-24);--ic-action-default-bg-pressed-30:var(--ic-blue-800-state-layer-30);--ic-action-default-bg-pressed-hover-34:var(--ic-blue-800-state-layer-34);--ic-action-default-bg-pressed:var(--ic-blue-800-state-layer-20);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-pressed-no-alpha:#d0def2;--ic-action-destructive-light:var(--ic-red-800);--ic-action-destructive-dark:var(--ic-red-300);--ic-action-destructive-hover-light:var(--ic-red-1100);--ic-action-destructive-hover-dark:var(--ic-red-400);--ic-action-destructive-pressed-light:var(--ic-red-1300);--ic-action-destructive-pressed-dark:var(--ic-red-700);--ic-action-light:var(--ic-architectural-white);--ic-action-light-hover:var(--ic-architectural-200);--ic-action-light-pressed:var(--ic-architectural-300);--ic-action-light-bg-hover:var(--ic-state-layer-lighten-10);--ic-action-light-bg-hover-24:var(--ic-architectural-white-state-layer-24);--ic-action-light-bg-pressed:var(--ic-state-layer-lighten-20);--ic-action-light-bg-pressed-34:var(--ic-architectural-white-state-layer-34);--ic-action-light-selected:var(--ic-blue-800-state-layer-10);--ic-action-dark:var(--ic-architectural-950);--ic-action-dark-hover:var(--ic-architectural-800);--ic-action-dark-pressed:var(--ic-architectural-700);--ic-action-dark-bg-hover:var(--ic-architectural-700-state-layer-10);--ic-action-dark-bg-pressed:var(--ic-architectural-700-state-layer-20);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-action-dark-selected:var(--ic-blue-900);--ic-action-neutral-light:var(--ic-architectural-100);--ic-action-neutral-dark:var(--ic-architectural-800);--ic-theme-blue-primary-r:27;--ic-theme-blue-primary-g:60;--ic-theme-blue-primary-b:121;--ic-theme-blue-primary-a:1;--ic-theme-lighten-20:rgb(255 255 255 / 20%);--ic-theme-lighten-40:rgb(255 255 255 / 40%);--ic-theme-primary-r:var(--ic-theme-blue-primary-r);--ic-theme-primary-g:var(--ic-theme-blue-primary-g);--ic-theme-primary-b:var(--ic-theme-blue-primary-b);--ic-theme-primary-a:var(--ic-theme-blue-primary-a);--ic-theme-primary:rgb(
-    var(--ic-theme-primary-r) var(--ic-theme-primary-g)
-      var(--ic-theme-primary-b) / var(--ic-theme-primary-a)
-  );--ic-theme-secondary:rgb(
-    calc(var(--ic-theme-primary-r) * 0.8) calc(var(--ic-theme-primary-g) * 0.8)
-      calc(var(--ic-theme-primary-b) * 0.8) / var(--ic-theme-primary-a)
-  );--ic-theme-tertiary:rgb(
-    calc(var(--ic-theme-primary-r) * 0.6) calc(var(--ic-theme-primary-g) * 0.6)
-      calc(var(--ic-theme-primary-b) * 0.6) / var(--ic-theme-primary-a)
-  );--ic-theme-secondary-light:rgb(
-    calc(var(--ic-theme-primary-r) + ((255 - var(--ic-theme-primary-r)) * 0.2))
+  );--ic-status-info-default:var(--ic-blue-900);--ic-status-info-light:var(--ic-blue-0);--ic-status-info-dark:var(--ic-blue-1600);--ic-status-info-contrast:var(--ic-blue-400);--ic-status-anomalous-default:var(--ic-purple-1400);--ic-status-anomalous-light:var(--ic-purple-50);--ic-status-anomalous-dark:var(--ic-purple-1800);--ic-status-anomalous-contrast:var(--ic-purple-400);--ic-status-unknown-default:var(--ic-architectural-500);--ic-status-unknown-mid:var(--ic-architectural-700);--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-unknown-outlined:var(--ic-architectural-200);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-color-brand-text:var(--ic-architectural-white);--ic-color-text-primary-light:var(--ic-architectural-950);--ic-color-text-primary-dark:var(--ic-architectural-white);--ic-color-text-secondary-light:var(--ic-architectural-700);--ic-color-text-secondary-dark:var(--ic-architectural-100);--ic-color-text-tertiary-light:var(--ic-architectural-500);--ic-color-text-tertiary-dark:var(--ic-architectural-200);--ic-color-text-inverse-light:var(--ic-color-text-primary-dark);--ic-color-text-inverse-dark:var(--ic-color-text-primary-light);--ic-color-text-inverted:var(--ic-architectural-white);--ic-color-text-disabled-default:var(--ic-architectural-300);--ic-color-text-disabled-light:var(--ic-architectural-200);--ic-color-text-disabled-dark:var(--ic-architectural-600);--ic-color-text-inactive:var(--ic-architectural-400);--ic-color-text-action:var(--ic-blue-800);--ic-color-text-action-dark:var(--ic-blue-400);--ic-color-text-action-hover:var(--ic-blue-1100);--ic-color-text-action-hover-dark:var(--ic-blue-200);--ic-color-text-action-pressed:var(--ic-blue-1300);--ic-color-text-action-pressed-dark:var(--ic-blue-100);--ic-color-text-error-light:var(--ic-red-300);--ic-color-text-error-dark:var(--ic-red-800);--ic-color-background-primary-light:var(--ic-architectural-white);--ic-color-background-primary-dark:var(--ic-architectural-800);--ic-color-background-secondary-light:var(--ic-architectural-20);--ic-color-background-secondary-40:var(--ic-architectural-40);--ic-color-background-secondary-dark:var(--ic-architectural-700);--ic-color-background-neutral-light:var(--ic-architectural-800);--ic-color-background-neutral-dark:var(--ic-architectural-950);--ic-color-background-active-light:var(--ic-blue-800);--ic-color-background-active-dark:var(--ic-blue-400);--ic-color-background-hover-default:var(--ic-blue-1100);--ic-color-background-hover-light:var(--ic-architectural-200);--ic-color-background-hover-dark:var(--ic-architectural-800);--ic-color-background-active-hover-light:var(--ic-blue-1100);--ic-color-background-active-hover-dark:var(--ic-blue-200);--ic-color-background-pressed-default:var(--ic-blue-1300);--ic-color-background-pressed-light:var(--ic-architectural-300);--ic-color-background-pressed-dark:var(--ic-architectural-700);--ic-color-background-active-pressed-light:var(--ic-blue-1300);--ic-color-background-active-pressed-dark:var(--ic-blue-600);--ic-color-background-disabled-default:var(--ic-architectural-200);--ic-color-background-disabled-light:var(--ic-architectural-80);--ic-color-background-disabled-dark:var(--ic-architectural-300);--ic-color-background-disabled-mid:var(--ic-architectural-400);--ic-color-background-disabled-darkest:var(--ic-architectural-600);--ic-color-background-selected:var(--ic-architectural-white);--ic-color-background-clear-icon-hover:var(--ic-architectural-100);--ic-color-background-success-light:var(--ic-green-1400);--ic-color-background-success-dark:var(--ic-green-300);--ic-color-background-warning-light:var(--ic-yellow-400);--ic-color-background-warning-dark:var(--ic-yellow-300);--ic-color-background-destructive-light:var(--ic-red-800);--ic-color-background-destructive-dark:var(--ic-red-300);--ic-color-background-destructive-hover-light:var(--ic-red-1100);--ic-color-background-destructive-hover-dark:var(--ic-red-400);--ic-color-background-destructive-pressed-light:var(--ic-red-1300);--ic-color-background-destructive-pressed-dark:var(--ic-red-700);--ic-color-background-solid:var(--ic-architectural-white);--ic-color-background-solid-disabled:var(--ic-architectural-100);--ic-color-background-solid-hover:var(--ic-blue-50);--ic-color-background-solid-pressed:var(--ic-blue-100);--ic-color-background-solid-mono:var(--ic-architectural-black);--ic-color-background-solid-mono-disabled:var(--ic-architectural-100);--ic-color-background-solid-mono-hover:var(--ic-architectural-800);--ic-color-background-solid-mono-pressed:var(--ic-architectural-600);--ic-color-border-neutral-default:var(--ic-architectural-300);--ic-color-border-neutral-black:var(--ic-architectural-black);--ic-color-border-neutral-white:var(--ic-architectural-white);--ic-color-border-neutral-grey-light:var(--ic-architectural-40);--ic-color-border-neutral-grey-dark:var(--ic-architectural-400);--ic-color-border-neutral-pressed-default:var(--ic-architectural-600);--ic-color-border-neutral-pressed-light:var(--ic-architectural-200);--ic-color-border-neutral-pressed-dark:var(--ic-architectural-700);--ic-color-border-neutral-hover-default:var(--ic-architectural-500);--ic-color-border-neutral-hover-light:var(--ic-architectural-200);--ic-color-border-neutral-hover-dark:var(--ic-architectural-800);--ic-color-border-neutral-disabled-light:var(--ic-architectural-200);--ic-color-border-neutral-disabled-dark:var(--ic-architectural-600);--ic-color-border-success-light:var(--ic-green-1400);--ic-color-border-success-dark:var(--ic-green-300);--ic-color-border-success-hover-light:var(--ic-green-1600);--ic-color-border-success-hover-dark:var(--ic-green-400);--ic-color-border-success-pressed-light:var(--ic-green-1700);--ic-color-border-success-pressed-dark:var(--ic-green-600);--ic-color-border-warning-light:var(--ic-yellow-900);--ic-color-border-warning-dark:var(--ic-yellow-300);--ic-color-border-warning-hover-light:var(--ic-yellow-1100);--ic-color-border-warning-hover-dark:var(--ic-yellow-400);--ic-color-border-warning-pressed-light:var(--ic-yellow-1300);--ic-color-border-warning-pressed-dark:var(--ic-yellow-500);--ic-color-border-error-light:var(--ic-red-800);--ic-color-border-error-dark:var(--ic-red-300);--ic-color-border-error-hover-light:var(--ic-red-1100);--ic-color-border-error-hover-dark:var(--ic-red-400);--ic-color-border-error-pressed-light:var(--ic-red-1300);--ic-color-border-error-pressed-dark:var(--ic-red-700);--ic-color-border-action-light:var(--ic-blue-800);--ic-color-border-action-dark:var(--ic-blue-400);--ic-color-border-action-hover-light:var(--ic-blue-1100);--ic-color-border-action-hover-dark:var(--ic-blue-200);--ic-color-border-action-pressed-light:var(--ic-blue-1300);--ic-color-border-action-pressed-dark:var(--ic-blue-100);--ic-action-default-light:var(--ic-blue-800);--ic-action-default-dark:var(--ic-blue-400);--ic-action-default-hover-light:var(--ic-blue-1100);--ic-action-default-hover-dark:var(--ic-blue-200);--ic-action-default-pressed-light:var(--ic-blue-1300);--ic-action-default-pressed-dark:var(--ic-blue-100);--ic-action-default-selected-light:var(--ic-blue-800-state-layer-10);--ic-action-default-selected-dark:var(--ic-blue-900);--ic-action-default-disabled:var(--ic-blue-50);--ic-action-default-active-alpha:var(--ic-blue-800-state-layer-50);--ic-action-default-bg-hover:var(--ic-blue-800-state-layer-10);--ic-action-default-bg-hover-24:var(--ic-blue-800-state-layer-24);--ic-action-default-bg-pressed-30:var(--ic-blue-800-state-layer-30);--ic-action-default-bg-pressed-hover-34:var(--ic-blue-800-state-layer-34);--ic-action-default-bg-pressed:var(--ic-blue-800-state-layer-20);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-pressed-no-alpha:#d0def2;--ic-action-destructive-light:var(--ic-red-800);--ic-action-destructive-dark:var(--ic-red-300);--ic-action-destructive-hover-light:var(--ic-red-1100);--ic-action-destructive-hover-dark:var(--ic-red-400);--ic-action-destructive-pressed-light:var(--ic-red-1300);--ic-action-destructive-pressed-dark:var(--ic-red-700);--ic-action-light:var(--ic-architectural-white);--ic-action-light-hover:var(--ic-architectural-200);--ic-action-light-pressed:var(--ic-architectural-300);--ic-action-light-bg-hover:var(--ic-state-layer-lighten-10);--ic-action-light-bg-hover-24:var(--ic-architectural-white-state-layer-24);--ic-action-light-bg-pressed:var(--ic-state-layer-lighten-20);--ic-action-light-bg-pressed-34:var(--ic-architectural-white-state-layer-34);--ic-action-light-selected:var(--ic-blue-800-state-layer-10);--ic-action-dark:var(--ic-architectural-950);--ic-action-dark-hover:var(--ic-architectural-800);--ic-action-dark-pressed:var(--ic-architectural-700);--ic-action-dark-bg-hover:var(--ic-architectural-700-state-layer-10);--ic-action-dark-bg-pressed:var(--ic-architectural-700-state-layer-20);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-action-dark-selected:var(--ic-blue-900);--ic-action-neutral-light:var(--ic-architectural-100);--ic-action-neutral-dark:var(--ic-architectural-800);--ic-brand-blue-primary:#1b3c79;--ic-brand-blue-primary-r:27;--ic-brand-blue-primary-g:60;--ic-brand-blue-primary-b:121;--ic-brand-blue-primary-a:1;--ic-brand-darken-20:var(--ic-architectural-black-state-layer-20);--ic-brand-darken-30:var(--ic-architectural-black-state-layer-30);--ic-brand-darken-40:var(--ic-architectural-black-state-layer-40);--ic-brand-lighten-20:var(--ic-architectural-white-state-layer-20);--ic-brand-lighten-40:var(--ic-architectural-white-state-layer-40);--ic-brand-color-primary-r:var(--ic-brand-blue-primary-r);--ic-brand-color-primary-g:var(--ic-brand-blue-primary-g);--ic-brand-color-primary-b:var(--ic-brand-blue-primary-b);--ic-brand-color-primary-a:var(--ic-brand-blue-primary-a);--ic-brand-color-primary:rgb(
+    var(--ic-brand-color-primary-r) var(--ic-brand-color-primary-g)
+      var(--ic-brand-color-primary-b) / var(--ic-brand-color-primary-a)
+  );--ic-brand-color-secondary:rgb(
+    calc(var(--ic-brand-color-primary-r) * 0.8)
+      calc(var(--ic-brand-color-primary-g) * 0.8)
+      calc(var(--ic-brand-color-primary-b) * 0.8) /
+      var(--ic-brand-color-primary-a)
+  );--ic-brand-color-tertiary:rgb(
+    calc(var(--ic-brand-color-primary-r) * 0.6)
+      calc(var(--ic-brand-color-primary-g) * 0.6)
+      calc(var(--ic-brand-color-primary-b) * 0.6) /
+      var(--ic-brand-color-primary-a)
+  );--ic-brand-color-secondary-light:rgb(
+    calc(
+        var(--ic-brand-color-primary-r) +
+          ((255 - var(--ic-brand-color-primary-r)) * 0.2)
+      )
       calc(
-        var(--ic-theme-primary-g) + ((255 - var(--ic-theme-primary-g)) * 0.2)
+        var(--ic-brand-color-primary-g) +
+          ((255 - var(--ic-brand-color-primary-g)) * 0.2)
       )
       calc(
-        var(--ic-theme-primary-b) + ((255 - var(--ic-theme-primary-b)) * 0.2)
-      ) / var(--ic-theme-primary-a)
-  );--ic-theme-tertiary-light:rgb(
-    calc(var(--ic-theme-primary-r) + ((255 - var(--ic-theme-primary-r)) * 0.4))
+        var(--ic-brand-color-primary-b) +
+          ((255 - var(--ic-brand-color-primary-b)) * 0.2)
+      ) / var(--ic-brand-color-primary-a)
+  );--ic-brand-color-tertiary-light:rgb(
+    calc(
+        var(--ic-brand-color-primary-r) +
+          ((255 - var(--ic-brand-color-primary-r)) * 0.4)
+      )
       calc(
-        var(--ic-theme-primary-g) + ((255 - var(--ic-theme-primary-g)) * 0.4)
+        var(--ic-brand-color-primary-g) +
+          ((255 - var(--ic-brand-color-primary-g)) * 0.4)
       )
       calc(
-        var(--ic-theme-primary-b) + ((255 - var(--ic-theme-primary-b)) * 0.4)
-      ) / var(--ic-theme-primary-a)
-  );--ic-theme-dark-mode-threshold:133.3505;--ic-theme-primary-r-calc:calc(var(--ic-theme-primary-r) * 299);--ic-theme-primary-g-calc:calc(var(--ic-theme-primary-g) * 587);--ic-theme-primary-b-calc:calc(var(--ic-theme-primary-b) * 114);--ic-theme-primary-sum-calc:calc(
-    var(--ic-theme-primary-r-calc) + var(--ic-theme-primary-g-calc) +
-      var(--ic-theme-primary-b-calc)
-  );--ic-theme-primary-divide-calc:calc(var(--ic-theme-primary-sum-calc) / 1000);--ic-theme-primary-subtract-calc:calc(
-    var(--ic-theme-primary-divide-calc) - var(--ic-theme-dark-mode-threshold)
-  );--ic-theme-primary-calc:calc(var(--ic-theme-primary-subtract-calc) * -10000);--ic-theme-calc:max(0, var(--ic-theme-primary-calc));--ic-theme-text:rgb(
-    min(255, calc(var(--ic-theme-calc) + 11))
-      min(255, calc(var(--ic-theme-calc) + 12))
-      min(255, calc(var(--ic-theme-calc) + 12)) / var(--ic-theme-primary-a)
-  );--ic-theme-hover:rgb(
-    min(255, calc(var(--ic-theme-calc) + 65))
-      min(255, calc(var(--ic-theme-calc) + 70))
-      min(255, calc(var(--ic-theme-calc) + 77)) / 10%
-  );--ic-theme-active:rgb(
-    min(255, calc(var(--ic-theme-calc) + 65))
-      min(255, calc(var(--ic-theme-calc) + 70))
-      min(255, calc(var(--ic-theme-calc) + 77)) / 20%
+        var(--ic-brand-color-primary-b) +
+          ((255 - var(--ic-brand-color-primary-b)) * 0.4)
+      ) / var(--ic-brand-color-primary-a)
+  );--ic-brand-dark-mode-threshold:133.3505;--ic-brand-color-primary-r-calc:calc(var(--ic-brand-color-primary-r) * 299);--ic-brand-color-primary-g-calc:calc(var(--ic-brand-color-primary-g) * 587);--ic-brand-color-primary-b-calc:calc(var(--ic-brand-color-primary-b) * 114);--ic-brand-color-primary-sum-calc:calc(
+    var(--ic-brand-color-primary-r-calc) + var(--ic-brand-color-primary-g-calc) +
+      var(--ic-brand-color-primary-b-calc)
+  );--ic-brand-color-primary-divide-calc:calc(
+    var(--ic-brand-color-primary-sum-calc) / 1000
+  );--ic-brand-color-primary-subtract-calc:calc(
+    var(--ic-brand-color-primary-divide-calc) -
+      var(--ic-brand-dark-mode-threshold)
+  );--ic-brand-color-primary-calc:calc(
+    var(--ic-brand-color-primary-subtract-calc) * -10000
+  );--ic-brand-calc:max(0, var(--ic-brand-color-primary-calc));--ic-brand-text-color:rgb(
+    min(255, calc(var(--ic-brand-calc) + 11))
+      min(255, calc(var(--ic-brand-calc) + 12))
+      min(255, calc(var(--ic-brand-calc) + 12)) /
+      var(--ic-brand-color-primary-a)
+  );--ic-brand-hover:rgb(
+    min(255, calc(var(--ic-brand-calc) + 65))
+      min(255, calc(var(--ic-brand-calc) + 70))
+      min(255, calc(var(--ic-brand-calc) + 77)) / 10%
+  );--ic-brand-active:rgb(
+    min(255, calc(var(--ic-brand-calc) + 65))
+      min(255, calc(var(--ic-brand-calc) + 70))
+      min(255, calc(var(--ic-brand-calc) + 77)) / 20%
   );--ic-table-row-selected:#c7d7ef;--ic-color-icon-brand:var(--ic-architectural-white);--ic-color-icon-neutral:var(--ic-architectural-950);--ic-color-icon-inverted:var(--ic-architectural-white);--ic-color-icon-hover-light:var(--ic-architectural-200);--ic-color-icon-hover-dark:var(--ic-architectural-800);--ic-color-icon-pressed-light:var(--ic-architectural-300);--ic-color-icon-pressed-dark:var(--ic-architectural-700);--ic-color-icon-disabled-mid:var(--ic-architectural-200);--ic-color-icon-disabled-light:var(--ic-architectural-300);--ic-color-icon-disabled-dark:var(--ic-architectural-500);--ic-color-icon-grey-default:var(--ic-architectural-400);--ic-color-icon-grey-lighter:var(--ic-architectural-100);--ic-color-icon-grey-light:var(--ic-architectural-200);--ic-color-icon-grey-dark:var(--ic-architectural-500);--ic-color-icon-grey-darker:var(--ic-architectural-700);--ic-color-icon-action-default-light:var(--ic-blue-800);--ic-color-icon-action-default-dark:var(--ic-blue-400);--ic-color-icon-action-hover:var(--ic-blue-1100);--ic-color-icon-action-hover-dark:var(--ic-blue-200);--ic-color-icon-action-pressed:var(--ic-blue-1300);--ic-color-icon-action-pressed-dark:var(--ic-blue-100);--ic-color-icon-error-light:var(--ic-red-300);--ic-color-icon-error-dark:var(--ic-red-800);--ic-color-icon-action-dark:var(--ic-architectural-white);--ic-state-layer-primary:var(--ic-brand-blue-primary);--ic-state-layer-secondary-default:var(--ic-blue-50);--ic-state-layer-secondary-light:var(--ic-blue-0);--ic-state-layer-secondary-dark:var(--ic-blue-100);--ic-state-layer-neutral-default:var(--ic-architectural-200);--ic-state-layer-neutral-light:var(--ic-architectural-100);--ic-state-layer-neutral-dark:var(--ic-architectural-400);--ic-state-layer-neutral-darker:var(--ic-architectural-600);--ic-state-layer-darken-10:var(--ic-architectural-black-state-layer-10);--ic-state-layer-darken-20:var(--ic-architectural-black-state-layer-20);--ic-state-layer-darken-25:var(--ic-architectural-black-state-layer-25);--ic-state-layer-darken-30:var(--ic-architectural-black-state-layer-30);--ic-state-layer-darken-40:var(--ic-architectural-black-state-layer-40);--ic-state-layer-darken-50:var(--ic-architectural-black-state-layer-50);--ic-state-layer-lighten-10:var(--ic-architectural-white-state-layer-10);--ic-state-layer-lighten-20:var(--ic-architectural-white-state-layer-20);--ic-state-layer-lighten-25:var(--ic-architectural-white-state-layer-25);--ic-state-layer-lighten-40:var(--ic-architectural-white-state-layer-40);--ic-state-layer-lighten-50:var(--ic-architectural-white-state-layer-50);--ic-surface-brand:var(--ic-architectural-white);--ic-surface-primary:var(--ic-architectural-white);--ic-surface-secondary:var(--ic-architectural-white);--ic-surface-inverted:var(--ic-architectural-white);--ic-surface-disabled:var(--ic-architectural-white);--ic-classification-banner-text:var(--ic-color-text-primary-light);--ic-classification-banner-text-inverted:var(--ic-color-text-inverse-light);--ic-classification-banner-not-set:var(--ic-classification-not-set);--ic-classification-banner-official:var(--ic-classification-official);--ic-classification-banner-official-sensitive:var(
     --ic-classification-official
-  );--ic-classification-banner-secret:var(--ic-classification-secret);--ic-classification-banner-top-secret:var(--ic-classification-top-secret);--ic-footer-background:var(--ic-theme-secondary);--ic-footer-text:var(--ic-color-brand-text);--ic-footer-link:var(--ic-color-hyperlink-brand);--ic-footer-icon:var(--ic-color-icon-brand);--ic-footer-chevron-icon:var(--ic-color-icon-brand);--ic-footer-logo:var(--ic-color-icon-brand);--ic-footer-bottom-background:var(--ic-theme-tertiary);--ic-footer-keyline:var(--ic-color-keyline-lighten);--ic-footer-hover:var(--ic-action-light-bg-hover);--ic-footer-pressed:var(--ic-action-light-bg-pressed);--ic-hero-background:var(--ic-theme-tertiary);--ic-hero-heading:var(--ic-color-brand-text);--ic-hero-secondary-heading:var(--ic-color-brand-text);--ic-hero-body:var(--ic-color-brand-text);--ic-hero-keyline:var(--ic-color-keyline-lighten);--ic-side-navigation-background:var(--ic-theme-primary);--ic-side-navigation-icon:var(--ic-color-icon-brand);--ic-side-navigation-icon-disabled:var(--ic-color-icon-grey-light);--ic-side-navigation-status-tag-text:var(--ic-color-text-primary-light);--ic-side-navigation-logo:var(--ic-color-icon-brand);--ic-side-navigation-keyline:var(--ic-state-layer-lighten-20);--ic-side-navigation-icon-and-label:var(--ic-color-brand-text);--ic-side-navigation-theme:var(--ic-color-background-primary-light);--ic-side-navigation-hover:var(--ic-theme-hover);--ic-side-navigation-pressed:var(--ic-theme-active);--ic-side-navigation-icon-label:var(--ic-color-icon-brand);--ic-side-navigation-text:var(--ic-theme-text);--ic-side-navigation-status-tag:var(--ic-color-background-primary-light);--ic-side-navigation-focussed:var(--ic-color-background-primary-light);--ic-side-navigation-focussed-text:var(--ic-color-text-primary-light);--ic-side-navigation-focussed-icon:var(--ic-color-text-primary-light);--ic-side-navigation-selection-indicator:var(--ic-color-icon-brand);--ic-side-navigation-selection-indicator-disabled:var(
+  );--ic-classification-banner-secret:var(--ic-classification-secret);--ic-classification-banner-top-secret:var(--ic-classification-top-secret);--ic-footer-background:var(--ic-brand-color-secondary);--ic-footer-text:var(--ic-color-brand-text);--ic-footer-link:var(--ic-color-hyperlink-brand);--ic-footer-icon:var(--ic-color-icon-brand);--ic-footer-chevron-icon:var(--ic-color-icon-brand);--ic-footer-logo:var(--ic-color-icon-brand);--ic-footer-bottom-background:var(--ic-brand-color-tertiary);--ic-footer-keyline:var(--ic-color-keyline-lighten);--ic-footer-hover:var(--ic-action-light-bg-hover);--ic-footer-pressed:var(--ic-action-light-bg-pressed);--ic-hero-background:var(--ic-brand-color-tertiary);--ic-hero-heading:var(--ic-color-brand-text);--ic-hero-secondary-heading:var(--ic-color-brand-text);--ic-hero-body:var(--ic-color-brand-text);--ic-hero-keyline:var(--ic-color-keyline-lighten);--ic-side-navigation-background:var(--ic-brand-color-primary);--ic-side-navigation-icon:var(--ic-color-icon-brand);--ic-side-navigation-icon-disabled:var(--ic-color-icon-grey-light);--ic-side-navigation-status-tag-text:var(--ic-color-text-primary-light);--ic-side-navigation-logo:var(--ic-color-icon-brand);--ic-side-navigation-keyline:var(--ic-state-layer-lighten-20);--ic-side-navigation-icon-and-label:var(--ic-color-brand-text);--ic-side-navigation-theme:var(--ic-color-background-primary-light);--ic-side-navigation-hover:var(--ic-brand-hover);--ic-side-navigation-pressed:var(--ic-brand-active);--ic-side-navigation-icon-label:var(--ic-color-icon-brand);--ic-side-navigation-text:var(--ic-brand-text-color);--ic-side-navigation-status-tag:var(--ic-color-background-primary-light);--ic-side-navigation-focussed:var(--ic-color-background-primary-light);--ic-side-navigation-focussed-text:var(--ic-color-text-primary-light);--ic-side-navigation-focussed-icon:var(--ic-color-text-primary-light);--ic-side-navigation-selection-indicator:var(--ic-color-icon-brand);--ic-side-navigation-selection-indicator-disabled:var(
     --ic-color-icon-disabled-light
   );--ic-toast-background:var(--ic-color-background-primary-dark);--ic-toast-status-success:var(--ic-status-success-contrast);--ic-toast-status-error:var(--ic-status-error-contrast);--ic-toast-status-warning:var(--ic-status-warning-contrast);--ic-toast-status-info:var(--ic-status-info-contrast);--ic-toast-status-neutral:var(--ic-status-unknown-contrast);--ic-toast-icon-success:var(--ic-status-success-contrast);--ic-toast-icon-error:var(--ic-status-error-contrast);--ic-toast-icon-warning:var(--ic-status-warning-contrast);--ic-toast-icon-info:var(--ic-status-info-contrast);--ic-toast-icon-neutral:var(--ic-status-unknown-contrast);--ic-toast-title:var(--ic-color-text-inverse-light);--ic-toast-description:var(--ic-color-text-inverse-light);--ic-toast-dismiss-button:var(--ic-color-icon-inverted);--ic-atoms-input-field-background-light:var(
     --ic-color-background-primary-light