@ukic/web-components 2.1.0-beta.9 → 2.3.0

package/dist/esm/ic-side-navigation.entry.js

@@ -1,22 +1,26 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-90721b3c.js';
-import { c as closeIcon } from './close-icon-2f02b42a.js';
-import { c as chevronIcon } from './chevron-icon-98c98242.js';
-import { y as getCssProperty, i as isSlotUsed, D as DEVICE_SIZES, g as getCurrentDeviceSize, k as getThemeForegroundColor, c as checkResizeObserver, a as onComponentRequiredPropUndefined, l as hasClassificationBanner } from './helpers-c332acf8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-fd30b77e.js';
+import { c as closeIcon } from './close-icon-2ce5d375.js';
+import { C as Chevron } from './chevron-icon-7927f709.js';
+import { A as getCssProperty, i as isSlotUsed, D as DEVICE_SIZES, B as isEmptyString, g as getCurrentDeviceSize, l as getThemeForegroundColor, c as checkResizeObserver, a as onComponentRequiredPropUndefined, m as hasClassificationBanner } from './helpers-d7d5bd08.js';
 import { I as IcThemeForegroundEnum } from './types-dd515332.js';
 
-const menuIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+const menuIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path d="M0 0h24v24H0V0z" fill="none" />
   <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
   <title>menu icon</title>
 </svg>
 `;
 
-const icSideNavigationCss = ":host{display:block;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:3.5rem;--sm-side-navigation-collapsed-labels-width:6rem;--sm-side-navigation-expand-transition-duration:var(\n    --ic-transition-duration-slow\n  );--side-navigation-width:20rem;z-index:var(--ic-z-index-side-navigation)}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-theme-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-theme-primary);z-index:var(--ic-z-index-side-navigation)}:host(.inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-theme-primary);display:flex;flex-direction:column;flex:1 1 0;overflow:auto;visibility:hidden}:host(.inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--ic-keyline-lighten);position:sticky;bottom:0;left:0;z-index:2;box-shadow:-0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);background-color:var(--ic-theme-primary);display:flex;flex-direction:column;visibility:hidden}:host(.dark) .bottom-wrapper{border-top:var(--ic-keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-theme-primary);position:fixed;top:0;left:0;right:0;border-bottom:var(--ic-keyline-darken);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.inline) .top-bar{position:absolute}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.top-bar.light{border-bottom:var(--ic-keyline-lighten)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--ic-keyline-darken);padding-left:var(--ic-space-xxs);color:var(--ic-theme-text);align-items:center}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-theme-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}slot[name=\"app-title\"]::slotted(a),slot[name=\"app-icon\"]::slotted(a){color:var(--ic-theme-text);outline:none;text-decoration:none}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-theme-hover)}:host .title-link:active{background-color:var(--ic-theme-active)}: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);background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-theme-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:6.5rem}.app-status-wrapper{position:absolute;right:var(--ic-space-md);top:0;bottom:0;width:auto;display:flex;align-items:center;pointer-events:none}.app-status-wrapper .app-version{max-width:6.25rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-status-wrapper .app-status{border-radius:5rem;background-color:var(--ic-theme-text);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-right:var(--ic-space-xs);max-width:6.25rem}.app-status-wrapper .app-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:6rem}:host(.dark) .app-status-wrapper .app-status{color:var(--ic-color-white-text)}.navigation-landmark-title{position:absolute;width:0.063rem;height:0.063rem;padding:0;margin:-0.063rem;overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:2.75rem;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-theme-hover);--navigation-group-text-hover:var(--ic-theme-text);--navigation-item-child-height:3.5rem;--navigation-item-child-active:var(--ic-action-dark-bg-active);--navigation-item-child-color:var(--ic-theme-text);--navigation-group-expand-toggle-padding:0.25rem}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-height:3.5rem;--navigation-item-width:auto;--navigation-item-justify-content:flex-start}.bottom-side-nav{position:relative;align-content:flex-end;height:var(--sm-side-navigation-top-bar-height)}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{display:none}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 577px){:host{display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.static){position:relative;left:auto;top:auto;bottom:auto}.app-icon-container{padding:var(--ic-space-xxs) 0}.top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.inline) .top-bar{position:sticky}:host(.anchor-right) .top-bar{box-shadow:0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.anchor-right) .bottom-wrapper{box-shadow:0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%)}.side-navigation,.top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}.side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.inline) .side-navigation{position:relative}:host(.anchor-right) .side-navigation{left:auto;right:0}.side-navigation-inner{width:100%;visibility:visible}.bottom-wrapper{visibility:visible}.app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-sm)}.app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}.app-title-wrapper ic-typography{margin:calc(-1 * 0.281rem) 0 calc(-1 * 0.281rem) var(--ic-space-md);font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) ic-typography{position:relative;left:0}:host(.sm-expanded) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded) :is(.side-navigation,.top-bar){left:auto;right:0}.app-status-wrapper,:host(.sm-collapsed) .app-status-wrapper{display:none}:host(.sm-expanded) .app-status-wrapper{display:flex}.bottom-side-nav{justify-items:flex-end;display:flex;flex-direction:column}.bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-theme-text);background-color:transparent;outline:var(--ic-hc-focus-outline);border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}.bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center;display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}.bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-theme-hover)}:host .bottom-side-nav{outline:none}:host .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow)}:host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-item),:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0}:host(.sm-expanded) ::slotted(ic-navigation-item),:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:0.25rem;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels) .side-navigation,:host(.sm-collapsed.collapsed-labels) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:1rem}:host(.collapsed-labels) .bottom-side-nav .menu-expand-button{justify-content:center}:host .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}}@media screen and (min-width: 993px){:host{position:sticky;left:auto;top:0;bottom:0}:host(.sm-expanded){box-shadow:none}}@media (forced-colors: active){.side-navigation,.top-bar{border-right:var(--ic-hc-border)}slot[name=\"app-icon\"]::slotted(svg){fill:currentcolor}}";
+const icSideNavigationCss = ":host{display:block;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:3.5rem;--sm-side-navigation-collapsed-labels-width:6rem;--sm-side-navigation-expand-transition-duration:var(\n    --ic-transition-duration-slow\n  );--side-navigation-width:20rem;--sm-side-navigation-bottom-bar-height:3.5rem;z-index:var(--ic-z-index-side-navigation)}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-theme-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-theme-primary);z-index:var(--ic-z-index-side-navigation)}:host(.inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-theme-primary);display:flex;flex-direction:column;flex:1 1 0;overflow:auto}:host(.inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.xs-menu-close) .side-navigation>*{visibility:hidden}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--ic-keyline-lighten);bottom:0;left:0;z-index:2;box-shadow:-0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);background-color:var(--ic-theme-primary);display:flex;flex-direction:column}:host(.inline) .bottom-wrapper{position:sticky}:host(.dark) .bottom-wrapper{border-top:var(--ic-keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-theme-primary);position:fixed;top:0;left:0;right:0;border-bottom:var(--ic-keyline-darken);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.inline) .top-bar{position:absolute}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.top-bar.light{border-bottom:var(--ic-keyline-lighten)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--ic-keyline-darken);padding-left:var(--ic-space-xxs);color:var(--ic-theme-text);align-items:center}.app-title-wrapper ic-typography h1{margin:0}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-theme-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}slot[name=\"app-title\"]::slotted(a),slot[name=\"app-icon\"]::slotted(a){color:var(--ic-theme-text);outline:none;text-decoration:none}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-theme-hover)}:host .title-link:active{background-color:var(--ic-theme-active)}: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);background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-theme-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:6.5rem}.app-status-wrapper{inset:0 var(--ic-space-sm) 0 3.5rem;width:auto;display:flex;gap:var(--ic-space-xs);padding:var(--ic-space-sm) 0;justify-content:flex-end;align-items:flex-end;pointer-events:none;height:-moz-fit-content;height:fit-content;margin:0 var(--ic-space-xs)}.app-status-wrapper .app-version{display:flex;overflow-wrap:break-word;padding-bottom:var(--ic-space-xxs)}.app-status-wrapper .app-status{display:flex;border-radius:1rem;background-color:var(--ic-theme-text);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);min-width:1rem}.app-status-wrapper .app-status-text{overflow-wrap:break-word}:host(.dark) .app-status-wrapper .app-status{color:var(--ic-color-white-text)}.navigation-landmark-title{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:2.75rem;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-theme-hover);--navigation-group-text-hover:var(--ic-theme-text);--navigation-item-child-height:3.5rem;--navigation-item-child-active:var(--ic-action-dark-bg-active);--navigation-item-child-color:var(--ic-theme-text);--navigation-group-expand-toggle-padding:0.25rem}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-height:3.5rem;--navigation-item-width:auto;--navigation-item-justify-content:flex-start}.bottom-side-nav{position:relative;align-content:flex-end;min-height:var(--sm-side-navigation-top-bar-height)}.bottom-side-nav ic-divider{position:absolute;top:0;width:100%}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{position:absolute;display:none}.menu-visibility-visible{visibility:visible;width:100%}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 577px){:host{display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}.app-icon-container{padding:var(--ic-space-xxs) 0}.top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.inline) .top-bar{position:sticky}:host(.anchor-right) .top-bar{box-shadow:0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.anchor-right) .bottom-wrapper{box-shadow:0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%)}.side-navigation,.top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}.side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.inline) .side-navigation{position:relative}:host(.anchor-right) .side-navigation{left:auto;right:0}.app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-sm)}.app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}.app-title-wrapper ic-typography{margin:calc(-1 * 0.281rem) 0 calc(-1 * 0.281rem) var(--ic-space-md);font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) ic-typography{position:relative;left:0}:host(.sm-expanded) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded) :is(.side-navigation,.top-bar){left:auto;right:0}.app-status-wrapper,:host(.sm-collapsed) .app-status-wrapper{display:none;margin-left:0}:host(.sm-expanded) .app-status-wrapper{display:flex;max-width:16rem;margin-right:calc(var(--ic-space-xxxs) + var(--ic-space-xs))}.bottom-side-nav{justify-items:flex-end;align-items:flex-end;justify-content:flex-end;display:flex}.bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-theme-text);background-color:transparent;outline:var(--ic-hc-focus-outline);border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button{height:100%}.bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center;display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}.bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-theme-hover)}:host .bottom-side-nav{outline:none}:host .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow);align-self:flex-end;margin-bottom:0.875rem}:host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-item),:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0}:host(.sm-expanded) ::slotted(ic-navigation-item),:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:0.25rem;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels) .side-navigation,:host(.sm-collapsed.collapsed-labels) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:1rem}:host(.collapsed-labels) .bottom-side-nav .menu-expand-button{justify-content:center}:host .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}}@media screen and (min-width: 993px){:host{position:sticky;left:auto;top:0;bottom:0}:host(.sm-expanded){box-shadow:none}}@media (forced-colors: active){.side-navigation,.top-bar{border-right:var(--ic-hc-border)}slot[name=\"app-icon\"]::slotted(svg){fill:currentcolor}}";
 
 const SideNavigation = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
+    this.IC_NAVIGATION_ITEM = "ic-navigation-item";
+    this.resizeObserver = null;
+    this.COLLAPSED_ICON_LABELS_END = "collapsed-icon-labels-end";
+    this.COLLAPSED_ICON_LABELS_START = "collapsed-icon-labels-start";
     this.emitSideNavigationExpanded = (objDetails) => {
       const event = new CustomEvent("sideNavExpanded", {
         detail: {
@@ -29,6 +33,7 @@ const SideNavigation = class {
     this.toggleMenu = () => {
       this.menuOpen = !this.menuOpen;
       this.setMobileMenuAriaAttributes(this.menuOpen);
+      this.arrangeSlottedNavigationItem(this.menuOpen);
       this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);
       this.emitSideNavigationExpanded({
         sideNavExpanded: this.menuOpen,
@@ -39,14 +44,15 @@ const SideNavigation = class {
       const sideNav = this.el.shadowRoot.querySelector("#side-navigation");
       const sideNavInner = sideNav.querySelector(".side-navigation-inner");
       const bottomWrapper = sideNav.querySelector(".bottom-wrapper");
+      const menuVisibilityVisible = "menu-visibility-visible";
       if (menuOpen) {
-        bottomWrapper.classList.add("menu-visibility-visible");
-        sideNavInner.classList.add("menu-visibility-visible");
+        bottomWrapper.classList.add(menuVisibilityVisible);
+        sideNavInner.classList.add(menuVisibilityVisible);
       }
       else {
         setTimeout(() => {
-          sideNavInner.classList.remove("menu-visibility-visible");
-          bottomWrapper.classList.remove("menu-visibility-visible");
+          sideNavInner.classList.remove(menuVisibilityVisible);
+          bottomWrapper.classList.remove(menuVisibilityVisible);
         }, this.ANIMATION_DURATION);
       }
     };
@@ -80,13 +86,14 @@ const SideNavigation = class {
       if (this.collapsedIconLabels) {
         this.animateCollapsedIconLabels();
       }
+      this.setExpandedButtonHeight();
       this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });
     };
     /**
      * In order to style nested slotted elements (e.g. using React Router components), this method
      * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not
      * do not take affect.
-     * @param menuExpanded boolean - true or false depending on seide navigation state
+     * @param menuExpanded boolean - true or false depending on side navigation state
      */
     this.arrangeSlottedNavigationItem = (menuExpanded) => {
       const navItems = this.el.querySelectorAll("ic-navigation-item");
@@ -99,7 +106,7 @@ const SideNavigation = class {
           const label = navItem.textContent.trim();
           const icTypography = document.createElement("ic-typography");
           icTypography.classList.add("ic-typography-label", "hydrated", "navigation-item-side-nav-slotted-text");
-          iconWrapper.className = "icon-container";
+          iconWrapper.style.height = "var(--ic-space-lg)";
           iconWrapper.append(icon);
           navItemSlot.textContent = "";
           icTypography.textContent = label;
@@ -128,6 +135,12 @@ const SideNavigation = class {
         icTypography.style.textOverflow = "ellipsis";
       }
     };
+    this.setExpandedButtonHeight = () => {
+      const appStatusWrapper = this.el.shadowRoot.querySelector("#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper");
+      if (appStatusWrapper.offsetHeight !== 0) {
+        this.el.style.setProperty("--sm-side-navigation-bottom-bar-height", `${appStatusWrapper.offsetHeight}px`);
+      }
+    };
     this.styleSlottedIconLabels = (menuExpanded, icTypography) => {
       if (menuExpanded) {
         icTypography.style.opacity = "1";
@@ -142,32 +155,38 @@ const SideNavigation = class {
           "visibility 0s, opacity var(--ic-easing-transition-slow)";
       }
     };
-    this.animateCollapsedIconLabels = () => {
+    this.transitionHandler = (type) => {
       const primaryNavigationWrapper = this.el.shadowRoot.querySelector(".primary-navigation");
       const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");
+      const classToRemove = type === "start"
+        ? this.COLLAPSED_ICON_LABELS_END
+        : this.COLLAPSED_ICON_LABELS_START;
+      const classToAdd = type === "start"
+        ? this.COLLAPSED_ICON_LABELS_START
+        : this.COLLAPSED_ICON_LABELS_END;
       if (primaryNavigationWrapper) {
-        primaryNavigationWrapper.classList.remove("collapsed-icon-labels-end");
-        primaryNavigationWrapper.classList.add("collapsed-icon-labels-start");
+        primaryNavigationWrapper.classList.remove(classToRemove);
+        primaryNavigationWrapper.classList.add(classToAdd);
       }
       if (secondaryNavigationWrapper) {
-        secondaryNavigationWrapper.classList.remove("collapsed-icon-labels-end");
-        secondaryNavigationWrapper.classList.add("collapsed-icon-labels-start");
+        secondaryNavigationWrapper.classList.remove(classToRemove);
+        secondaryNavigationWrapper.classList.add(classToAdd);
       }
-      this.el.addEventListener("transitionend", () => {
-        if (primaryNavigationWrapper) {
-          primaryNavigationWrapper.classList.remove("collapsed-icon-labels-start");
-          primaryNavigationWrapper.classList.add("collapsed-icon-labels-end");
-        }
-        if (secondaryNavigationWrapper) {
-          secondaryNavigationWrapper.classList.remove("collapsed-icon-labels-start");
-          secondaryNavigationWrapper.classList.add("collapsed-icon-labels-end");
-        }
-      });
+    };
+    this.transitionEndHandler = () => {
+      this.transitionHandler("end");
+    };
+    this.animateCollapsedIconLabels = () => {
+      this.transitionHandler("start");
+      this.transitionEndHandler();
+      this.el.addEventListener("transitionend", this.transitionEndHandler);
     };
     this.paddingIconWidth = (navItems) => {
       const navItemLink = (navItems[0].shadowRoot &&
-        navItems[0].shadowRoot.querySelector("ic-tooltip a")) ||
-        navItems[0].querySelector("a");
+        (navItems[0].shadowRoot.querySelector("ic-tooltip a") ||
+          navItems[0].shadowRoot.querySelector("ic-tooltip div"))) ||
+        navItems[0].querySelector("a") ||
+        navItems[0].querySelector("div");
       const navItemSVG = navItems[0].querySelector("svg");
       const navStyles = {
         gap: window.getComputedStyle(navItemLink).gap,
@@ -183,7 +202,7 @@ const SideNavigation = class {
       if (menuExpanded) {
         timer = setTimeout(() => {
           const sideNavWidth = this.el.clientWidth;
-          const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+          const navigationItems = Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));
           const paddingIconDelta = navigationItems.length
             ? this.paddingIconWidth(navigationItems)
             : 0;
@@ -200,7 +219,7 @@ const SideNavigation = class {
       }
       else {
         clearTimeout(timer);
-        const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+        const navigationItems = Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));
         navigationItems.forEach((navigationItem) => {
           navigationItem.setAttribute("display-navigation-tooltip", "false");
         });
@@ -220,50 +239,67 @@ const SideNavigation = class {
     this.setParentPaddingLeft = (value) => {
       this.el.parentElement.style.setProperty("padding-left", value);
     };
-    this.resizeObserver = null;
+    this.renderAppTitle = (isAppNameSubtitleVariant) => {
+      const displayShortAppTitle = this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);
+      return (h("ic-typography", { variant: displayShortAppTitle || isAppNameSubtitleVariant
+          ? "subtitle-small"
+          : "h3", "aria-label": displayShortAppTitle
+          ? `${this.appTitle} (${this.shortAppTitle})`
+          : undefined }, h("h1", null, displayShortAppTitle ? this.shortAppTitle : this.appTitle)));
+    };
     this.resizeObserverCallback = (currSize) => {
-      if (currSize !== this.deviceSize) {
-        this.deviceSize = currSize;
-        if (currSize === DEVICE_SIZES.S) {
-          if (!this.disableAutoParentStyling) {
-            const topBarHeight = this.el.shadowRoot.querySelector(".top-bar").scrollHeight;
-            this.setParentPaddingTop(`${topBarHeight}px`);
-            this.setParentPaddingLeft("0");
-            if (this.inline) {
-              this.el.parentElement.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
-            }
+      this.deviceSize = currSize;
+      if (currSize === DEVICE_SIZES.S) {
+        if (!this.disableAutoParentStyling) {
+          const topBarHeight = this.el.shadowRoot.querySelector(".top-bar").scrollHeight;
+          this.setParentPaddingTop(`${topBarHeight}px`);
+          this.setParentPaddingLeft("0");
+          if (this.inline) {
+            this.el.parentElement.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
           }
-          this.emitSideNavigationExpanded({
-            sideNavExpanded: this.menuExpanded,
-            sideNavMobile: true,
-          });
         }
-        else {
-          if (!this.disableAutoParentStyling) {
-            this.setParentPaddingTop("0");
-            this.el.parentElement.style.setProperty("height", "100%");
-          }
-          this.emitSideNavigationExpanded({
-            sideNavExpanded: this.menuExpanded,
-            sideNavMobile: false,
-          });
+        this.emitSideNavigationExpanded({
+          sideNavExpanded: this.menuExpanded,
+          sideNavMobile: true,
+        });
+      }
+      else {
+        if (!this.disableAutoParentStyling) {
+          this.setParentPaddingTop("0");
+          this.el.parentElement.style.setProperty("height", "100%");
         }
-        if (currSize > DEVICE_SIZES.L) {
-          if (!this.disableAutoParentStyling) {
-            this.setParentPaddingTop("0");
-            this.setParentPaddingLeft("0");
-          }
+        this.emitSideNavigationExpanded({
+          sideNavExpanded: this.menuExpanded,
+          sideNavMobile: false,
+        });
+      }
+      let paddingLeft;
+      if (this.collapsedIconLabels) {
+        paddingLeft = "calc(var(--ic-space-xxl) * 2)";
+      }
+      else {
+        paddingLeft = "calc(var(--ic-space-xxl) + var(--ic-space-xs))";
+      }
+      if (currSize > DEVICE_SIZES.L) {
+        if (!this.disableAutoParentStyling) {
+          this.setParentPaddingTop("0");
+          this.setParentPaddingLeft("0");
         }
-        else if (currSize > DEVICE_SIZES.S &&
-          currSize <= DEVICE_SIZES.L &&
-          !this.static &&
-          !this.disableAutoParentStyling) {
-          if (this.collapsedIconLabels) {
-            this.setParentPaddingLeft("calc(var(--ic-space-xxl) * 2)");
-          }
-          else {
-            this.setParentPaddingLeft("calc(var(--ic-space-xxl) + var(--ic-space-xs))");
-          }
+      }
+      else if (currSize > DEVICE_SIZES.S &&
+        currSize <= DEVICE_SIZES.M &&
+        this.static &&
+        !this.disableAutoParentStyling) {
+        this.setParentPaddingLeft(paddingLeft);
+      }
+      else if (currSize > DEVICE_SIZES.S &&
+        currSize <= DEVICE_SIZES.L &&
+        !this.disableAutoParentStyling) {
+        if (this.static && this.menuExpanded) {
+          this.setParentPaddingLeft("calc(var(--ic-space-xl) * 10)");
+        }
+        else {
+          this.setParentPaddingLeft(paddingLeft);
         }
       }
     };
@@ -276,7 +312,7 @@ const SideNavigation = class {
       this.resizeObserver.observe(document.body, { box: "content-box" });
     };
     this.setCollapsedIconLabels = () => {
-      const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+      const navigationItems = Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));
       navigationItems.forEach((navigationItem) => {
         navigationItem.setAttribute("collapsed-icon-label", "true");
       });
@@ -293,7 +329,7 @@ const SideNavigation = class {
         }
       });
     };
-    this.renderTopBar = ({ isSDevice, foregroundColor, menuOpen, href, isAppNameSubtitleVariant, appTitle, }) => {
+    this.renderTopBar = ({ isSDevice, foregroundColor, menuOpen, href, isAppNameSubtitleVariant, }) => {
       const hasTitle = this.appTitle !== "" && this.appTitle !== undefined;
       const Component = isSlotUsed(this.el, "app-title") ? "div" : "a";
       const attrs = Component == "a" && {
@@ -302,27 +338,24 @@ const SideNavigation = class {
       return (h("div", { class: {
           "top-bar": true,
           [this.foregroundColor]: true,
-        } }, isSDevice && (h("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, h("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", appearance: foregroundColor, onClick: this.toggleMenu, "aria-owns": "side-navigation", "aria-haspopup": "true", "aria-expanded": "false" }, h("span", { class: "mobile-top-bar-menu-icon", slot: "icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), h("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), h("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({}, attrs, { class: "title-link" }), h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" })), h("ic-typography", { variant: isAppNameSubtitleVariant ? "subtitle-small" : "h3" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (appTitle)))))));
+        } }, isSDevice && (h("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, h("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", appearance: foregroundColor, onClick: this.toggleMenu, "aria-owns": "side-navigation", "aria-haspopup": "true", "aria-expanded": "false" }, h("span", { class: "mobile-top-bar-menu-icon", slot: "icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), h("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), h("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({}, attrs, { class: "title-link" }), h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" })), isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.renderAppTitle(isAppNameSubtitleVariant)))))));
     };
+    this.deviceSize = DEVICE_SIZES.XL;
+    this.deviceSizeAppTitle = DEVICE_SIZES.S;
+    this.foregroundColor = getThemeForegroundColor();
+    this.hasSecondaryNavigation = false;
+    this.menuExpanded = false;
+    this.menuOpen = false;
     this.appTitle = undefined;
-    this.status = undefined;
-    this.version = undefined;
+    this.collapsedIconLabels = false;
+    this.disableAutoParentStyling = false;
     this.expanded = false;
     this.href = "/";
-    this.static = false;
-    this.collapsedIconLabels = false;
     this.inline = false;
-    this.disableAutoParentStyling = false;
-    this.foregroundColor = getThemeForegroundColor();
-    this.menuOpen = false;
-    this.menuExpanded = false;
-    this.deviceSize = DEVICE_SIZES.XL;
-    this.deviceSizeAppTitle = DEVICE_SIZES.S;
-    this.hasSecondaryNavigation = false;
-  }
-  themeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.foregroundColor = theme.mode;
+    this.shortAppTitle = "";
+    this.static = false;
+    this.status = undefined;
+    this.version = undefined;
   }
   componentWillLoad() {
     if (this.expanded) {
@@ -342,9 +375,10 @@ const SideNavigation = class {
       sideNavMobile: this.deviceSize === DEVICE_SIZES.S,
     });
     checkResizeObserver(this.runResizeObserver);
-    this.arrangeSlottedNavigationItem();
     this.styleSlottedCollapsedIconLabel();
+    this.arrangeSlottedNavigationItem(this.menuExpanded);
     this.displayTooltipWithExpandedLongLabel(this.menuExpanded);
+    this.setExpandedButtonHeight();
     !isSlotUsed(this.el, "app-title") &&
       onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Side Navigation");
   }
@@ -352,6 +386,11 @@ const SideNavigation = class {
     if (this.resizeObserver !== null) {
       this.resizeObserver.disconnect();
     }
+    this.el.removeEventListener("transitionend", this.transitionEndHandler);
+  }
+  themeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.foregroundColor = theme.mode;
   }
   render() {
     const { appTitle, menuOpen, foregroundColor, menuExpanded, href, status, version, collapsedIconLabels, inline, } = this;
@@ -375,12 +414,11 @@ const SideNavigation = class {
         "sm-expanded": !isSDevice && menuExpanded,
         [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
         ["collapsed-labels"]: !isSDevice && !menuExpanded && collapsedIconLabels,
-        ["static"]: this.static,
         ["inline"]: inline,
       } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { class: "navigation-list" }, h("slot", { name: "primary-navigation" }))))), h("div", { class: {
         ["bottom-wrapper"]: true,
         ["classification-spacing"]: hasClassificationBanner(),
-      } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { class: "navigation-list" }, h("slot", { name: "secondary-navigation" })))), h("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", null), displayExpandBtn && (h("button", { class: "menu-expand-button", innerHTML: chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { class: "app-status-wrapper" }, status !== "" && (h("div", { class: {
+      } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { class: "navigation-list" }, h("slot", { name: "secondary-navigation" })))), h("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", null), displayExpandBtn && (h("button", { class: "menu-expand-button", innerHTML: Chevron, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { class: "app-status-wrapper" }, status !== "" && (h("div", { class: {
         ["app-status"]: true,
       } }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (h("ic-typography", { variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
   }