@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

package/lib/components/AppShell/AppShell.styles.js

@@ -1,6 +1,9 @@
-import styled, { css } from 'styled-components';
-import { darken, getContrast, lighten, transparentize } from 'polished';
+import styled, { createGlobalStyle, css } from 'styled-components';
+import { darken, getContrast, lighten, rem, remToPx, transparentize } from 'polished';
 import { useContext } from 'react';
+import { StyledAlert } from '../Badges/Alert';
+import { ellipsisOverflow } from '../../styles/mixins';
+import { StyledLink } from '../Link/Link';
 import { Count } from '../Badges';
 import { StyledAvatar } from '../Avatar';
 import { StyledIcon } from '../Icon';
@@ -15,13 +18,29 @@ import { StyledTooltip } from '../Tooltip';
 import { StyledProgressBackdrop } from '../Progress';
 import Icon from '../Icon/Icon';
 import { StyledText } from '../Text';
+import Flex from '../Flex';
 import { resizeDrawerMaxWidth } from '../../styles/constants';
+import { tryCatch } from '../../utils';
+import { StyledDrawer } from '../Drawer';
 import AppShellContext from './AppShellContext';
-import { navContrastColors, pxToRem } from './style-utils';
+import { navContrastColors } from './style-utils';
 export const navWidth = '4rem';
 export const navOpenWidth = '18.75rem';
 export const headerHeight = '3rem';
+export const mobileHeaderHeight = '4.5rem';
+export const topNavHeight = '3rem';
 const iconWidth = '1.125rem';
+const iconBoxSize = `calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2)`;
+export const AppShellGlobalStyle = createGlobalStyle `
+  :root,
+  :host {
+    --appshell-top-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-start, 0rem));
+    --appshell-bottom-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-end, 0rem) + ${({ navHeight }) => navHeight});
+    --appshell-hard-bottom-offset: calc(var(--marking-height, 0rem) + var(--safe-area-inset-block-end, 0rem));
+  }
+`;
+export const menuButtonWidth = (theme) => Number.parseInt(theme.base['hit-area']['finger-min'], 10) +
+    Number.parseInt(tryCatch(() => remToPx(1.25), () => '20px'), 10);
 export const StyledAppInfo = styled.a(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const { hoverBg, foreground } = navContrastColors(theme);
@@ -69,11 +88,12 @@ export const StyledAppInfo = styled.a(({ theme }) => {
   `;
 });
 StyledAppInfo.defaultProps = defaultThemeProp;
-export const StyledScrollWrap = styled.div(({ theme }) => {
+export const StyledScrollWrap = styled(Flex)(({ theme }) => {
     return css `
-    flex-grow: 1;
     overflow-x: hidden;
     overflow-y: auto;
+    padding-block-start: calc(0.125 * ${theme.base.spacing});
+
     @media (height <= ${theme.base.breakpoints.sm}) {
       overflow: visible;
       flex-shrink: 0;
@@ -81,15 +101,32 @@ export const StyledScrollWrap = styled.div(({ theme }) => {
   `;
 });
 StyledScrollWrap.defaultProps = defaultThemeProp;
-export const StyledCountIcon = styled(Count)(({ theme: { base: { spacing }, components: { 'app-shell': { nav: { detached } } } } }) => {
-    const insetInlineStartOffsetMultiplier = detached ? 3 : 4;
+export const StyledUtilsSeparator = styled.div(({ theme, navOpen }) => {
     return css `
-    position: absolute;
-    inset-inline-start: calc(${insetInlineStartOffsetMultiplier} * ${spacing});
-    top: calc(0.5 * ${spacing});
-    padding: 0 calc(0.5 * ${spacing});
+    position: sticky;
+    inset-block-end: 0;
+    margin-block-start: auto;
+    margin-inline: var(--nav-padding);
+    border-block-start: 0.0625rem solid ${theme.components['app-shell'].nav['separator-color']};
+
+    @media (height <= ${theme.base.breakpoints.sm}) {
+      position: relative;
+      margin-inline-end: calc(var(--nav-padding) / 2);
+
+      ${navOpen &&
+        css `
+        margin-inline-end: var(--nav-padding);
+      `}
+    }
   `;
 });
+StyledUtilsSeparator.defaultProps = defaultThemeProp;
+export const StyledCountIcon = styled(Count) `
+  position: absolute;
+  /* stylelint-disable-next-line unit-allowed-list */
+  inset-block-start: 0.25lh;
+  inset-inline-start: calc((${navWidth} / 2) - var(--nav-padding));
+`;
 StyledCountIcon.defaultProps = defaultThemeProp;
 export const StyledSingleSelectIconBox = styled.span(({ theme }) => {
     return css `
@@ -101,14 +138,29 @@ export const StyledSingleSelectIconBox = styled.span(({ theme }) => {
 });
 StyledSingleSelectIconBox.defaultProps = defaultThemeProp;
 export const StyledNavListItemExpandCollapse = styled(Icon) ``;
+export const StyledNavListItemGroupIndicator = styled(Icon)(({ theme: { components: { 'app-shell': { nav: { detached } } } } }) => {
+    return css `
+    position: absolute;
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-block-start: calc(${iconWidth} / 8);
+    margin-inline-start: 2.5rem;
+    ${detached &&
+        css `
+      margin-inline-start: calc(${navWidth} / 2 - ${iconWidth} / 6);
+    `}
+  `;
+});
+StyledNavListItemGroupIndicator.defaultProps = defaultThemeProp;
 export const StyledUtilIconCount = styled.span `
   flex-shrink: 0;
 `;
 export const StyledNavItemIconBox = styled.span(({ theme }) => {
     return css `
     flex-shrink: 0;
+
     > ${StyledIcon}, ${StyledUtilIconCount} > ${StyledIcon} {
-      margin-inline: calc((${navWidth} - ${iconWidth} - 2 * var(--nav-padding)) / 2);
+      margin-inline: ${iconBoxSize};
     }
 
     ${StyledAvatar} {
@@ -121,65 +173,80 @@ export const StyledNavItemIconBox = styled.span(({ theme }) => {
   `;
 });
 StyledNavItemIconBox.defaultProps = defaultThemeProp;
-export const StyledAppNav = styled.nav(({ appHeader, showEnv, theme }) => {
-    const { navOpen } = useContext(AppShellContext);
+const StyledAppNav = styled.nav(({ theme }) => {
     const navBg = theme.components['app-shell'].nav.background;
     const navFgColor = theme.components['app-shell'].nav['foreground-color'];
     const foregroundColor = calculateForegroundColor(navBg, navFgColor);
     return css `
-      position: fixed;
-      z-index: calc(${theme.base['z-index'].backdrop} - 2);
-      background: ${navBg};
-      color: ${foregroundColor};
-      max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});
-      width: ${navOpen ? navOpenWidth : navWidth};
-      height: calc(100vh - ${appHeader ? headerHeight : '0rem'});
-      overflow: hidden;
-      white-space: nowrap;
-      transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
-      padding-block-end: ${theme.base.spacing};
-      border-inline-end: ${pxToRem(1)} solid ${transparentize(0.9, '#000')};
-      border-color: ${theme.components['app-shell'].nav['border-color']};
-      ${!showEnv &&
-        css `
-        padding-block-start: ${theme.base.spacing};
-      `}
-      @media (pointer: coarse) {
-        max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
-      }
+    --nav-padding: ${theme.components['app-shell'].nav.detached ? '0.75rem' : '0px'};
+    background: ${navBg};
+    color: ${foregroundColor};
+    overflow: hidden;
+    white-space: nowrap;
+    border-color: ${theme.components['app-shell'].nav['border-color']};
 
-      @media (height <= ${theme.base.breakpoints.sm}) {
-        overflow: auto;
-      }
+    @media (height <= ${theme.base.breakpoints.sm}) {
+      overflow-y: auto;
+      overflow-x: clip;
+    }
+    padding-block-start: ${theme.base.spacing};
 
-      /* App navigation can be focused with shortcut */
-      :focus-visible {
-        box-shadow: ${theme.base.shadow['focus-inset']};
-      }
+    /* App navigation can be focused with shortcut */
+    &:focus-visible {
+      box-shadow: ${theme.base.shadow['focus-inset']};
+    }
 
-      ${theme.base['custom-scrollbar'] &&
+    ${theme.base['custom-scrollbar'] &&
         css `
-        * {
-          scrollbar-width: thin;
-        }
-      `}
-    `;
+      * {
+        scrollbar-width: thin;
+      }
+    `}
+  `;
 });
 StyledAppNav.defaultProps = defaultThemeProp;
+export const StyledSidebarNav = styled(StyledAppNav)(({ withAppHeader, portalAgent, theme }) => {
+    const { rtl } = useDirection();
+    const { navState } = useContext(AppShellContext);
+    return css `
+    position: fixed;
+    z-index: calc(${theme.base['z-index'].backdrop} - 2);
+    max-width: calc(100vw - ${theme.base['hit-area']['mouse-min']});
+    width: calc(
+      ${navState === 'open' || navState === 'opening' ? navOpenWidth : navWidth} +
+        var(--safe-area-inset-inline-start, 0rem)
+    );
+    transition: width ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
+    height: calc(100dvh - ${withAppHeader ? headerHeight : '0rem'});
+    padding-inline-start: var(--safe-area-inset-inline-start, 0);
+    padding-block-end: ${theme.base.spacing};
+
+    @media (pointer: coarse) {
+      max-width: calc(100vw - ${theme.base['hit-area']['finger-min']});
+    }
+
+    ${portalAgent
+        ? css `
+          box-shadow: inset ${rtl ? '0.0625rem' : '-0.0625rem'} 0 0 0
+            ${theme.components['app-shell'].nav['border-color']};
+        `
+        : css `
+          border-inline-end: 0.0625rem solid ${transparentize(0.9, '#000')};
+          border-color: ${theme.components['app-shell'].nav['border-color']};
+        `}
+  `;
+});
+StyledSidebarNav.defaultProps = defaultThemeProp;
 export const StyledCaseClose = styled.button ``;
 export const StyledNavListItemVisualContainer = styled.div(({ theme: { base: { spacing }, components: { 'app-shell': { nav: { detached } } } }, isCurrent, navOpen }) => {
     return css `
       max-width: ${navWidth};
-      padding-block: calc(var(--nav-padding) / 8);
-      padding-inline: var(--nav-padding);
 
-      ${!navOpen &&
-        detached &&
-        css `
-        padding-inline: 0;
-        width: calc(${navWidth} - 2 * var(--nav-padding));
-        margin: auto;
-      `}
+      &:has(${StyledAvatar}) {
+        ${StyledNavListItemGroupIndicator} {
+          display: none;
+        }
+      }
 
       & > ${StyledText} {
         padding-inline: ${isCurrent
@@ -190,19 +257,25 @@ export const StyledNavListItemVisualContainer = styled.div(({ theme: { base: { s
         detached &&
         css `
           padding-inline: 0;
+          max-width: calc(${navWidth} * 0.625);
         `}
       }
     `;
 });
 StyledNavListItemVisualContainer.defaultProps = defaultThemeProp;
 export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, singleSelect }) => {
-    const { base: { 'font-weight': { 'semi-bold': semiBold } }, components: { 'app-shell': { nav: { detached } } } } = theme;
+    const { base: { 'font-weight': { 'semi-bold': semiBold } }, components: { 'app-shell': { nav: { detached, 'item-border-radius': navItemBorderRadius, 'selected-background': navSelectedBackground } } } } = theme;
     const { navOpen } = useContext(AppShellContext);
-    const { foreground } = navContrastColors(theme);
+    const { foreground, nestedList } = navContrastColors(theme);
     const { rtl } = useDirection();
+    const nestedListColor = theme.components['app-shell'].nav['nested-list-background'] === 'auto'
+        ? nestedList
+        : theme.components['app-shell'].nav['nested-list-background'];
     return css `
     display: block;
     position: relative;
+    padding-block: 0;
+    padding-inline: var(--nav-padding);
 
     ${StyledIcon} {
       font-size: 1.25rem;
@@ -230,31 +303,44 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, single
         }
       `}
     }
-    padding: calc(var(--nav-padding) / 8) var(--nav-padding);
-    ${!navOpen &&
-        detached &&
-        css `
-      padding-inline: 0;
-      width: calc(${navWidth} - 2 * var(--nav-padding));
-      margin: auto;
-    `}
+
+    &:first-child ${StyledNavListItemGroupIndicator} {
+      display: none;
+    }
 
     > :first-child {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
-      padding: calc(1.25 * ${theme.base.spacing}) 0;
+      padding-block: ${theme.base.spacing};
+      padding-inline: 0;
       white-space: nowrap;
       color: ${foreground};
       cursor: pointer;
       text-decoration: none;
-      border-block: ${pxToRem(1)} solid transparent;
+      border-block: ${rem(1)} solid transparent;
+
+      ${detached &&
+        css `
+        --item-height: 2.5rem;
+        padding: 0;
+        min-height: var(--item-height);
+        height: auto;
+        border: none;
+        border-radius: ${navItemBorderRadius};
+        transition: border-radius ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+      `}
       ${detached &&
         css `
-        border-radius: ${theme.base['border-radius']};
+        &:not(:only-child):has(+ ul) {
+          background: ${nestedListColor};
+          margin-block-end: 0.0625rem;
+          border-end-start-radius: 0;
+          border-end-end-radius: 0;
+        }
       `}
-      span:not(${StyledCountIcon}) {
+          span:not(${StyledCountIcon}) {
         overflow: hidden;
         text-overflow: ellipsis;
         color: inherit;
@@ -275,8 +361,13 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, single
       }
 
       &:focus {
-        outline: none;
         box-shadow: ${theme.base.shadow['focus-inset']};
+
+        @media (forced-colors: none) {
+          &:not([aria-current='page'], [aria-expanded='false']:has(+ ul [aria-current='page'])) {
+            outline: none;
+          }
+        }
       }
 
       ${StyledNavListItemExpandCollapse} {
@@ -304,24 +395,44 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, single
           margin-inline: calc(${theme.base.spacing} - var(--nav-padding));
         }
       `}
-
       ${StyledSingleSelectIconBox} + span {
         margin-inline-start: ${theme.base.spacing};
       }
     }
 
+    [aria-expanded='true'] {
+      ${StyledNavListItemGroupIndicator} {
+        display: none;
+      }
+    }
+
     [aria-current='page'],
     [aria-expanded='false']:has(+ ul [aria-current='page']) {
       position: relative;
       font-weight: ${semiBold};
-      border-block: ${pxToRem(1)} solid ${theme.components['app-shell'].nav['border-color']};
+      border-block: ${rem(1)} solid ${theme.components['app-shell'].nav['border-color']};
       background: ${transparentize(0.85, foreground)};
+      ${detached &&
+        css `
+        background: ${navSelectedBackground !== 'auto'
+            ? navSelectedBackground
+            : transparentize(0.9, foreground)};
+        outline: 0.0625rem solid;
+
+        &:hover,
+        &:focus {
+          background: ${navSelectedBackground !== 'auto'
+            ? navSelectedBackground
+            : transparentize(0.9, foreground)};
+        }
+      `}
+
       ${!detached &&
         css `
         &::before {
           content: '';
           position: absolute;
-          width: ${pxToRem(4)};
+          width: ${rem(4)};
           inset-inline-start: 0;
           top: 0;
           bottom: 0;
@@ -329,13 +440,30 @@ export const StyledNavListItem = styled.li(({ theme, nestedListCollapsed, single
         }
       `}
     }
+
+    ${StyledNavItemIconBox} {
+      display: flex;
+      justify-content: center;
+      width: calc(${navWidth} - 2 * var(--nav-padding));
+    }
   `;
 });
 StyledNavListItem.defaultProps = defaultThemeProp;
-export const StyledNavList = styled.ul(({ theme: { base: { spacing }, components: { 'app-shell': { nav: { detached } } } } }) => {
+export const StyledNavList = styled.ul(({ theme }) => {
     return css `
-      --nav-padding: ${detached ? spacing : '0px'};
-    `;
+    min-width: ${navWidth};
+
+    & > ${StyledNavListItem} {
+      &:not(:last-child),
+      &:only-child {
+        margin-block-end: calc(${theme.base.spacing} / 2);
+      }
+    }
+
+    & > ${StyledNavListItem}:last-of-type {
+      padding-block-end: calc(${theme.base.spacing} / 2);
+    }
+  `;
 });
 StyledNavList.defaultProps = defaultThemeProp;
 export const StyledNavCasesList = styled.div(({ theme }) => {
@@ -349,35 +477,64 @@ export const StyledNavCasesList = styled.div(({ theme }) => {
 });
 StyledNavCasesList.defaultProps = defaultThemeProp;
 export const StyledNestedNavList = styled(StyledNavList)(({ theme }) => {
-    const { base: { 'border-radius': borderRadius }, components: { 'app-shell': { nav: { detached } } } } = theme;
-    const { nestedList } = navContrastColors(theme);
+    const { base: { 'border-radius': borderRadius, spacing }, components: { 'app-shell': { nav: { detached, 'selected-background': navSelectedBackground } } } } = theme;
+    const { nestedList, foreground } = navContrastColors(theme);
+    const nestedListColor = theme.components['app-shell'].nav['nested-list-background'] === 'auto'
+        ? nestedList
+        : theme.components['app-shell'].nav['nested-list-background'];
+    const resolvedSelectedBg = navSelectedBackground !== 'auto' ? navSelectedBackground : transparentize(0.9, foreground);
     return css `
-    background: ${nestedList};
+    background: ${nestedListColor};
     border-radius: ${detached ? borderRadius : '0px'};
-    padding-block: var(--nav-padding);
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
 
     ${StyledNavListItem} {
+      &:first-child {
+        border-block-start: ${spacing} solid transparent;
+      }
+
+      &:last-child {
+        border-block-end: calc(0.5 * ${spacing}) solid transparent;
+      }
+
+      &:not(:last-child) {
+        margin-block-end: calc(${spacing} / 2);
+      }
+
       > :first-child {
         &:has(${StyledIcon}) {
-          padding-inline-start: calc(
-            ((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2) + ${iconWidth}
-          );
+          padding-inline-start: calc(((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2));
         }
 
         &:not(:has(${StyledIcon})) {
-          padding-inline-start: calc(${navWidth} - 3 * var(--nav-padding));
+          padding-inline-start: calc(
+            ((${navWidth} - (3 * var(--nav-padding)) - ${iconWidth}) / 2) + ${iconBoxSize}
+          );
         }
       }
+
+      ${detached &&
+        css `
+        [aria-current='page'] {
+          background: ${resolvedSelectedBg};
+
+          &:hover,
+          &:focus {
+            background: ${resolvedSelectedBg};
+          }
+        }
+      `}
     }
   `;
 });
 StyledNestedNavList.defaultProps = defaultThemeProp;
-export const StyledCaseTypes = styled.div(props => {
-    const { theme: { base: { animation: { speed, timing: { ease: acceleration } } } } } = props;
+export const StyledCaseTypes = styled.div(({ theme }) => {
+    const { foreground } = navContrastColors(theme);
     return css `
     button {
       ${StyledNavItemIconBox} {
-        transition: transform ${speed} ${acceleration};
+        transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
       }
 
       &[aria-expanded='false'] ${StyledNavItemIconBox} {
@@ -388,12 +545,23 @@ export const StyledCaseTypes = styled.div(props => {
         transform: rotateZ(45deg);
       }
     }
+
+    > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {
+      background: ${theme.components['app-shell'].nav['create-button-background']};
+
+      &:hover,
+      &:focus {
+        background: ${transparentize(0.9, foreground)};
+      }
+    }
   `;
 });
 StyledCaseTypes.defaultProps = defaultThemeProp;
 export const StyledUtils = styled.div(({ theme }) => {
     return css `
-    border-top: 0.0625rem solid ${theme.components['app-shell'].nav['border-color']};
+    ${StyledNavList} {
+      padding-block-start: calc(${theme.base.spacing} / 2);
+    }
 
     ${StyledBareButton} > ${StyledIcon}:first-child, ${StyledBareButton} > ${StyledUtilIconCount} {
       margin: 0 calc((${navWidth} - ${iconWidth}) / 2);
@@ -401,76 +569,232 @@ export const StyledUtils = styled.div(({ theme }) => {
   `;
 });
 StyledUtils.defaultProps = defaultThemeProp;
+export const StyledMobileMoreMenu = styled(StyledAppNav) `
+  width: 100%;
+  height: 100dvh;
+  padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});
+`;
+StyledMobileMoreMenu.defaultProps = defaultThemeProp;
 export const StyledMobileNav = styled.header(({ theme }) => {
+    const { base: { 'hit-area': { 'finger-min': hitAreaFinger }, 'border-radius': borderRadius, 'font-size': fontSize, 'font-scale': fontScale }, components: { button: { 'focus-shadow': focusShadow, 'border-width': borderWidth }, text } } = theme;
     const mobileNavColor = theme.components['app-shell'].nav.background;
     const { foreground } = navContrastColors(theme);
+    const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
-    min-width: 100%;
-    min-height: ${headerHeight};
-    z-index: ${theme.base['z-index'].drawer};
+    z-index: calc(${theme.base['z-index'].drawer} + 1);
     background: ${mobileNavColor};
+    border-radius: calc(2 * ${borderRadius});
     color: ${foreground};
-    padding-inline-start: ${theme.base.spacing};
-
-    @media (pointer: coarse) {
-      padding-inline-start: 0;
+    padding: 0.5rem;
+    position: fixed;
+    inset-block-start: calc(100dvh - var(--appshell-bottom-offset, ${mobileHeaderHeight}));
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    box-shadow: ${theme.base.shadow.low};
+
+    & + ${StyledDrawer}, & + ${StyledDrawer} ${StyledDrawer} {
+      width: 100%;
+      padding-block-start: var(--appshell-top-offset, 0);
+      padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});
     }
 
-    @media (height >= ${theme.base.breakpoints.sm}) {
-      inset-block-start: 0;
-      position: sticky;
+    > div:has(> ${StyledNavList}),
+    > div:has(> ${StyledNavList}) > ${StyledNavList}, > ${StyledNavList} {
+      display: contents;
+
+      ${StyledNavListItem} {
+        padding: 0;
+        margin: 0;
+        font-size: ${fontSizes[text.secondary['font-size']]};
+
+        ${StyledBareButton}, ${StyledLink} {
+          flex-direction: column;
+          justify-content: center;
+          width: ${rem(menuButtonWidth(theme))};
+          height: calc(0.25rem + ${hitAreaFinger});
+          border-radius: calc(2 * ${borderRadius});
+          border: ${borderWidth} solid transparent;
+          padding-block: calc(0.5 * ${theme.base.spacing});
+
+          &::before {
+            width: 0;
+          }
+
+          span:not(${StyledCountIcon}) {
+            width: inherit;
+            text-align: center;
+            padding-inline: calc(0.5 * ${theme.base.spacing});
+          }
+
+          &:enabled:focus,
+          &:not([disabled]):focus {
+            box-shadow: ${focusShadow};
+          }
+
+          ${StyledNavListItemVisualContainer} {
+            padding: 0;
+            margin: 0;
+
+            ${StyledNavItemIconBox} {
+              display: flex;
+            }
+          }
+        }
+      }
     }
   `;
 });
 StyledMobileNav.defaultProps = defaultThemeProp;
+export const StyledMobileMoreMenuButton = styled(Button)(({ theme }) => {
+    const { base: { 'hit-area': { 'finger-min': hitAreaFinger }, 'border-radius': borderRadius, 'font-size': fontSize, 'font-scale': fontScale }, components: { button: { 'border-width': borderWidth }, text } } = theme;
+    const { navOpen } = useContext(AppShellContext);
+    const { foreground } = navContrastColors(theme);
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    return css `
+    flex-direction: column;
+    width: ${rem(menuButtonWidth(theme))};
+    height: calc(0.25rem + ${hitAreaFinger});
+    border-radius: calc(2 * ${borderRadius});
+    font-size: ${fontSizes[text.secondary['font-size']]};
+    padding-block: calc(0.5 * ${theme.base.spacing});
+
+    span {
+      width: inherit;
+      padding-inline: calc(0.5 * ${theme.base.spacing});
+      ${ellipsisOverflow}
+    }
+
+    ${navOpen &&
+        css `
+      &::before {
+        content: '';
+        position: absolute;
+        inset: calc(${borderWidth} * -1);
+        border-radius: inherit;
+        background: ${transparentize(0.85, foreground)};
+      }
+    `}
+
+    ${StyledAlert} {
+      position: absolute;
+      inset-block-start: calc(0.625rem / 2);
+      inset-inline-start: calc(50% + (0.625rem / 2));
+    }
+  `;
+});
+StyledMobileMoreMenuButton.defaultProps = defaultThemeProp;
 export const StyledLoading = styled.div `
   font-size: 2rem;
 `;
-export const StyledAppMain = styled.main(({ appHeader, mobileNav, navOpen, previewActive, headerOffset = 0, theme }) => {
-    const heightOffset = appHeader || mobileNav ? headerHeight : '0rem';
+export const StyledAppMain = styled.main(({ appHeader, previewActive, headerOffset = 0, $navOrientation = 'side-rail', theme }) => {
+    const { navOpen, isMobileNav } = useContext(AppShellContext);
+    const isTopBar = $navOrientation === 'top-bar';
+    let heightOffset = appHeader ? headerHeight : '0rem';
+    if (isMobileNav) {
+        heightOffset = mobileHeaderHeight;
+    }
     const appBackground = theme.base.palette['app-background'];
+    if (isTopBar && !isMobileNav) {
+        const totalChromeHeight = `calc(var(--app-header-height, 0px) + ${topNavHeight})`;
+        return css `
+      --appshell-offset: ${headerOffset}px;
+      /* stylelint-disable-next-line length-zero-no-unit */
+      --appshell-horizontal-offset: 0rem;
+      position: relative;
+      margin-inline-start: 0;
+      min-height: calc(100dvh - ${totalChromeHeight});
+      background: ${appBackground};
+
+      &:focus {
+        outline: none;
+      }
+
+      & > ${StyledProgressBackdrop} {
+        max-height: calc(100dvh - ${totalChromeHeight});
+        max-width: 100vw;
+        inset-block-start: ${totalChromeHeight};
+        inset-inline-start: 0;
+        position: fixed;
+        transition-property: opacity, max-height, inset-block-start;
+        transition-duration: ${theme.base.animation.speed};
+        transition-timing-function: ${theme.base.animation.timing.ease};
+      }
+
+      @media (min-width: ${theme.base.breakpoints.md}) {
+        transition-duration: ${theme.base.animation.speed};
+        transition-timing-function: ${theme.base.animation.timing.ease};
+
+        ${previewActive &&
+            css `
+          transition: none;
+          margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});
+        `}
+      }
+    `;
+    }
     return css `
     --appshell-offset: ${headerOffset}px;
     /* stylelint-disable-next-line length-zero-no-unit */
     --appshell-horizontal-offset: 0rem;
 
     @media (min-width: ${theme.base.breakpoints.sm}) {
-      --appshell-horizontal-offset: ${navOpen ? navOpenWidth : navWidth};
+      --appshell-horizontal-offset: calc(
+        ${navOpen ? navOpenWidth : navWidth} + var(--safe-area-inset-inline-start, 0rem)
+      );
     }
     position: relative;
-    margin-inline-start: ${mobileNav ? 0 : navWidth};
-    min-height: calc(100vh - ${heightOffset});
+    margin-inline-start: ${isMobileNav ? 0 : 'var(--appshell-horizontal-offset, 0)'};
+    min-height: calc(100dvh - ${heightOffset});
     background: ${appBackground};
 
-    :focus {
+    &:focus {
       outline: none;
     }
 
-    ${navOpen &&
-        !mobileNav &&
-        css `
-      margin-inline-start: ${navOpenWidth};
-    `}
-
-    ${!mobileNav &&
-        css `
-      transition: margin-inline-start
-        ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
-    `}
+    ${isMobileNav
+        ? css `
+          min-height: calc(
+            100dvh - var(--appshell-top-offset, 0rem) - var(
+                --appshell-bottom-offset,
+                ${mobileHeaderHeight}
+              )
+          );
+          /* stylelint-disable-next-line length-zero-no-unit */
+          margin-block-start: var(--appshell-top-offset, 0rem);
+
+          &::after {
+            content: '';
+            display: block;
+            height: var(--appshell-bottom-offset, ${mobileHeaderHeight});
+          }
+        `
+        : css `
+          transition: margin-inline-start
+            ${`${theme.base.animation.speed} ${theme.base.animation.timing.ease}`};
+          margin-inline-start: calc(
+            ${navOpen ? navOpenWidth : navWidth} + var(--safe-area-inset-inline-start, 0rem)
+          );
+          padding-inline-end: var(--safe-area-inset-inline-end, 0);
+        `};
 
     & > ${StyledProgressBackdrop} {
-      max-height: calc(100vh - ${heightOffset});
+      max-height: calc(100dvh - ${heightOffset});
       max-width: calc(100vw - ${navOpen ? navOpenWidth : navWidth});
       inset-block-start: ${heightOffset};
-      inset-inline-start: ${navOpen ? navOpenWidth : navWidth};
+      ${!isMobileNav &&
+        css `
+        inset-inline-start: calc(
+          ${navOpen ? navOpenWidth : navWidth} + var(--safe-area-inset-inline-start, 0rem)
+        );
+      `}
       position: fixed;
       transition-property: opacity, max-height, max-width, inset-block-start, inset-inline-start;
       transition-duration: ${theme.base.animation.speed};
       transition-timing-function: ${theme.base.animation.timing.ease};
     }
 
-    @media (min-width: ${theme.base.breakpoints.xl}) {
-      transition: margin-inline-end ${!mobileNav ? ', margin-inline-start' : ''};
+    @media (min-width: ${theme.base.breakpoints.md}) {
+      transition: margin-inline-end ${!isMobileNav ? ', margin-inline-start' : ''};
       transition-duration: ${theme.base.animation.speed};
       transition-timing-function: ${theme.base.animation.timing.ease};
 
@@ -495,10 +819,12 @@ export const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {
     return css `
     background-color: ${bg};
     padding: 0;
+
     header {
       color: ${color};
       border-bottom: none;
     }
+
     ${StyledMenuItem} {
       background-color: ${bg};
       color: ${color};
@@ -513,18 +839,19 @@ export const StyledAppShellTooltip = styled(StyledTooltip)(({ theme }) => {
 });
 StyledAppShellTooltip.defaultProps = defaultThemeProp;
 export const StyledAppShellToggleButton = styled(Button)(({ theme }) => {
-    const navBg = theme.components['app-shell'].nav.background;
-    const navFgColor = theme.components['app-shell'].nav['foreground-color'];
+    const { background: navBg, 'foreground-color': navFgColor, 'expand-button': { background: expandBtnBgToken, 'foreground-color': expandBtnFgToken } } = theme.components['app-shell'].nav;
     const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);
-    let bg = darken(0.2, backgroundColor);
-    if (getContrast(backgroundColor, bg) < 1.3) {
-        bg = lighten(0.2, backgroundColor);
+    let defaultBg = darken(0.2, backgroundColor);
+    if (getContrast(backgroundColor, defaultBg) < 1.3) {
+        defaultBg = lighten(0.2, backgroundColor);
     }
+    const resolvedBg = expandBtnBgToken !== 'auto' ? expandBtnBgToken : defaultBg;
+    const resolvedFg = expandBtnFgToken;
     return css `
-    background: ${bg};
-    color: ${navFgColor};
+    background: ${resolvedBg};
+    color: ${resolvedFg};
     border: none;
-    margin-top: calc(1 * ${theme.base.spacing});
+    margin-block-start: ${theme.base.spacing};
 
     ${StyledIcon} {
       width: 1.25rem;
@@ -539,4 +866,123 @@ export const StyledAppShellToggleButton = styled(Button)(({ theme }) => {
   `;
 });
 StyledAppShellToggleButton.defaultProps = defaultThemeProp;
+export const StyledNavAgentIcon = styled.div `
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-flex;
+  flex-shrink: 0;
+
+  & > svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+StyledNavAgentIcon.defaultProps = defaultThemeProp;
+export const StyledAIAssistant = styled.div(({ theme }) => {
+    const { navOpen } = useContext(AppShellContext);
+    const { rtl } = useDirection();
+    const { detached } = theme.components['app-shell'].nav;
+    const activeBg = theme.components.agent.background;
+    const speed = theme.base.animation.speed;
+    const ease = theme.base.animation.timing.ease;
+    const radius = 'calc(var(--item-height) / 4)';
+    const inwardSide = rtl ? '100%' : '0%';
+    return css `
+    ${detached &&
+        css `
+      ${StyledNavList} {
+        margin-block-start: calc(${theme.base.spacing} / 2);
+      }
+
+      ${StyledNavList} > ${StyledNavListItem}:last-of-type {
+        padding-block-end: 0;
+      }
+
+      ${StyledNavListItem} {
+        > :first-child {
+          transition:
+            border-start-end-radius ${speed} ${ease},
+            border-end-end-radius ${speed} ${ease},
+            background ${speed} ${ease};
+          border-radius: ${radius};
+          outline: none;
+        }
+
+        &:has([aria-current='page']) {
+          z-index: 1;
+          padding-inline-end: 0;
+
+          > :first-child {
+            background: ${activeBg};
+            border-block-color: transparent;
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+
+            &:focus {
+              outline: none;
+              box-shadow:
+                inset ${rtl ? '0.25rem' : '-0.25rem'} 0 0 0 ${activeBg},
+                ${theme.base.shadow['focus-inset']};
+            }
+
+            &::before {
+              content: '';
+              position: absolute;
+              inset-inline-end: 0;
+              bottom: 100%;
+              width: ${radius};
+              height: ${radius};
+              background: ${activeBg};
+              pointer-events: none;
+              -webkit-mask-image: radial-gradient(
+                circle at ${inwardSide} 0%,
+                transparent ${radius},
+                black ${radius}
+              );
+              mask-image: radial-gradient(
+                circle at ${inwardSide} 0%,
+                transparent ${radius},
+                black ${radius}
+              );
+            }
+
+            &::after {
+              content: '';
+              position: absolute;
+              inset-inline-end: 0;
+              top: 100%;
+              width: ${radius};
+              height: ${radius};
+              background: ${activeBg};
+              pointer-events: none;
+              -webkit-mask-image: radial-gradient(
+                circle at ${inwardSide} 100%,
+                transparent ${radius},
+                black ${radius}
+              );
+              mask-image: radial-gradient(
+                circle at ${inwardSide} 100%,
+                transparent ${radius},
+                black ${radius}
+              );
+            }
+          }
+
+          ${!navOpen &&
+            css `
+            > :first-child > span:not(${StyledCountIcon}) {
+              max-width: 0;
+              overflow: hidden;
+            }
+          `}
+        }
+      }
+    `}
+  `;
+});
+StyledAIAssistant.defaultProps = defaultThemeProp;
+export const StyledShareIcon = styled(Icon) `
+  transform: rotate(180deg);
+`;
+StyledShareIcon.defaultProps = defaultThemeProp;
 //# sourceMappingURL=AppShell.styles.js.map