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

package/lib/components/AppShell/AppTopNav.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTopNav.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.styles.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,YAAY,uNAkBvB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAE/B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAG5B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAE/B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;;cAAkC,OAAO;mKA6BpE,CAAC;AAIH,eAAO,MAAM,sBAAsB;;0KAyBjC,CAAC;AAIH,eAAO,MAAM,sBAAsB,+NAiBjC,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAiCjC,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAOlC,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;cAlJ4B,OAAO;mBAsJrE,CAAC"}

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

@@ -0,0 +1,184 @@
+import styled, { css } from 'styled-components';
+import { transparentize } from 'polished';
+import { defaultThemeProp } from '../../theme';
+import { calculateFontSize } from '../../styles';
+import BareButton, { StyledBareButton } from '../Button/BareButton';
+import Flex from '../Flex';
+import { StyledNavList, StyledNavListItem, StyledNavItemIconBox, StyledCaseTypes, headerHeight, topNavHeight } from './AppShell.styles';
+import { navContrastColors } from './style-utils';
+export const StyledTopNav = styled.nav(({ theme }) => {
+    const { backgroundColor, foreground, border } = navContrastColors(theme);
+    const zBackdrop = theme.base['z-index'].backdrop;
+    return css `
+    position: sticky;
+    inset-block-start: ${headerHeight};
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: ${topNavHeight};
+    z-index: calc(${zBackdrop} - 3);
+    display: flex;
+    align-items: center;
+    gap: ${theme.base.spacing};
+    padding-inline: calc(${theme.base.spacing} * 2);
+    background: ${backgroundColor};
+    color: ${foreground};
+    border-block-end: 0.0625rem solid ${border ?? transparentize(0.8, foreground)};
+  `;
+});
+StyledTopNav.defaultProps = defaultThemeProp;
+export const StyledTopNavSection = styled(Flex) `
+  overflow: hidden;
+`;
+StyledTopNavSection.defaultProps = defaultThemeProp;
+export const StyledTopNavList = styled(Flex) `
+  overflow: hidden;
+  position: relative;
+`;
+StyledTopNavList.defaultProps = defaultThemeProp;
+export const StyledTopNavUtilBar = styled(Flex) `
+  margin-inline-start: auto;
+`;
+StyledTopNavUtilBar.defaultProps = defaultThemeProp;
+export const StyledTopNavItem = styled(BareButton)(({ theme, $active }) => {
+    const { foreground } = navContrastColors(theme);
+    const hoverBg = transparentize(0.9, foreground);
+    const activeBg = transparentize(0.85, foreground);
+    return css `
+    background: ${$active ? activeBg : 'transparent'};
+    display: inline-flex;
+    align-items: center;
+    min-height: ${theme.base['hit-area'].mouse};
+    gap: ${theme.base.spacing};
+    padding: 0 calc(${theme.base.spacing} * 1.5);
+    border-radius: ${theme.components['app-shell'].nav['item-border-radius']};
+    font: inherit;
+    white-space: nowrap;
+    text-decoration: none;
+
+    & + & {
+      margin-inline-start: 0;
+    }
+
+    &:hover {
+      background: ${hoverBg};
+    }
+
+    &:focus-visible {
+      background: ${hoverBg};
+      box-shadow: ${theme.base.shadow['focus-inset']};
+    }
+  `;
+});
+StyledTopNavItem.defaultProps = defaultThemeProp;
+export const StyledTopNavUtilButton = styled(BareButton)(({ theme }) => {
+    const { foreground } = navContrastColors(theme);
+    const hoverBg = transparentize(0.9, foreground);
+    return css `
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: ${theme.base['hit-area'].mouse};
+    height: ${theme.base['hit-area'].mouse};
+    border-radius: ${theme.base['border-radius']};
+
+    & + & {
+      margin-inline-start: 0;
+    }
+
+    &:hover {
+      background: ${hoverBg};
+    }
+
+    &:focus-visible {
+      background: ${hoverBg};
+      box-shadow: ${theme.base.shadow['focus-inset']};
+    }
+  `;
+});
+StyledTopNavUtilButton.defaultProps = defaultThemeProp;
+export const StyledTopNavCountBadge = styled.span(({ theme }) => {
+    const { urgent } = navContrastColors(theme);
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    position: absolute;
+    inset-block-start: 0.125rem;
+    inset-inline-end: 0.125rem;
+    background: ${urgent};
+    color: ${theme.base.palette['primary-background']};
+    border-radius: calc(9999 * ${theme.base['border-radius']});
+    min-width: 1rem;
+    height: 1rem;
+    padding-inline: calc(${theme.base.spacing} / 2);
+    font-size: ${fontSize.xxs};
+    line-height: 1rem;
+    text-align: center;
+  `;
+});
+StyledTopNavCountBadge.defaultProps = defaultThemeProp;
+/**
+ * Hosts the side-rail `CaseTypes` component inline in the top bar.
+ * - Strips side-rail width/margin constraints so the button sits inline.
+ * - Hides the "Create" text label visually (kept in aria-label for a11y).
+ * - Makes the button square so it aligns with the nav item hit area.
+ */
+export const StyledTopNavCreateArea = styled(Flex)(({ theme }) => {
+    const hitArea = theme.base['hit-area'].mouse;
+    const borderRadius = theme.base['border-radius'];
+    return css `
+    ${StyledNavList} {
+      min-width: unset;
+    }
+
+    ${StyledNavListItem} {
+      padding-block-end: 0 !important;
+
+      &:not(:last-child),
+      &:only-child {
+        margin-block-end: 0 !important;
+      }
+    }
+
+    /* Make the top-level create button square and icon-only */
+    ${StyledCaseTypes} > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {
+      width: ${hitArea};
+      height: ${hitArea};
+      min-height: ${hitArea};
+      padding: 0;
+      justify-content: center;
+      border-radius: ${borderRadius};
+
+      /* Hide the "Create" text label visually; aria-label on the button covers a11y.
+         Target all spans except the icon box so SVG icon remains visible. */
+      span:not(${StyledNavItemIconBox}) {
+        display: none;
+      }
+    }
+  `;
+});
+StyledTopNavCreateArea.defaultProps = defaultThemeProp;
+/**
+ * Invisible container used as the hidden measurement row in AppTopNav.
+ * Always rendered at absolute position so useTopNavOverflow can measure all
+ * link widths at full size before deciding which ones are visible.
+ */
+export const StyledTopNavMeasureRow = styled(Flex) `
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+`;
+StyledTopNavMeasureRow.defaultProps = defaultThemeProp;
+/**
+ * Always rendered at absolute position so the hook can measure the More button
+ * width before deciding how many links fit.
+ */
+export const StyledTopNavItemHidden = styled(StyledTopNavItem) `
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+`;
+StyledTopNavItemHidden.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppTopNav.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppTopNav.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Flex from '../Flex';\n\nimport {\n  StyledNavList,\n  StyledNavListItem,\n  StyledNavItemIconBox,\n  StyledCaseTypes,\n  headerHeight,\n  topNavHeight\n} from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledTopNav = styled.nav(({ theme }) => {\n  const { backgroundColor, foreground, border } = navContrastColors(theme);\n  const zBackdrop = theme.base['z-index'].backdrop;\n  return css`\n    position: sticky;\n    inset-block-start: ${headerHeight};\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    height: ${topNavHeight};\n    z-index: calc(${zBackdrop} - 3);\n    display: flex;\n    align-items: center;\n    gap: ${theme.base.spacing};\n    padding-inline: calc(${theme.base.spacing} * 2);\n    background: ${backgroundColor};\n    color: ${foreground};\n    border-block-end: 0.0625rem solid ${border ?? transparentize(0.8, foreground)};\n  `;\n});\n\nStyledTopNav.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavSection = styled(Flex)`\n  overflow: hidden;\n`;\n\nStyledTopNavSection.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavList = styled(Flex)`\n  overflow: hidden;\n  position: relative;\n`;\n\nStyledTopNavList.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavUtilBar = styled(Flex)`\n  margin-inline-start: auto;\n`;\n\nStyledTopNavUtilBar.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavItem = styled(BareButton)<{ $active?: boolean }>(({ theme, $active }) => {\n  const { foreground } = navContrastColors(theme);\n  const hoverBg = transparentize(0.9, foreground);\n  const activeBg = transparentize(0.85, foreground);\n  return css`\n    background: ${$active ? activeBg : 'transparent'};\n    display: inline-flex;\n    align-items: center;\n    min-height: ${theme.base['hit-area'].mouse};\n    gap: ${theme.base.spacing};\n    padding: 0 calc(${theme.base.spacing} * 1.5);\n    border-radius: ${theme.components['app-shell'].nav['item-border-radius']};\n    font: inherit;\n    white-space: nowrap;\n    text-decoration: none;\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:hover {\n      background: ${hoverBg};\n    }\n\n    &:focus-visible {\n      background: ${hoverBg};\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledTopNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavUtilButton = styled(BareButton)(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n  const hoverBg = transparentize(0.9, foreground);\n  return css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: ${theme.base['hit-area'].mouse};\n    height: ${theme.base['hit-area'].mouse};\n    border-radius: ${theme.base['border-radius']};\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:hover {\n      background: ${hoverBg};\n    }\n\n    &:focus-visible {\n      background: ${hoverBg};\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledTopNavUtilButton.defaultProps = defaultThemeProp;\n\nexport const StyledTopNavCountBadge = styled.span(({ theme }) => {\n  const { urgent } = navContrastColors(theme);\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    position: absolute;\n    inset-block-start: 0.125rem;\n    inset-inline-end: 0.125rem;\n    background: ${urgent};\n    color: ${theme.base.palette['primary-background']};\n    border-radius: calc(9999 * ${theme.base['border-radius']});\n    min-width: 1rem;\n    height: 1rem;\n    padding-inline: calc(${theme.base.spacing} / 2);\n    font-size: ${fontSize.xxs};\n    line-height: 1rem;\n    text-align: center;\n  `;\n});\n\nStyledTopNavCountBadge.defaultProps = defaultThemeProp;\n\n/**\n * Hosts the side-rail `CaseTypes` component inline in the top bar.\n * - Strips side-rail width/margin constraints so the button sits inline.\n * - Hides the \"Create\" text label visually (kept in aria-label for a11y).\n * - Makes the button square so it aligns with the nav item hit area.\n */\nexport const StyledTopNavCreateArea = styled(Flex)(({ theme }) => {\n  const hitArea = theme.base['hit-area'].mouse;\n  const borderRadius = theme.base['border-radius'];\n  return css`\n    ${StyledNavList} {\n      min-width: unset;\n    }\n\n    ${StyledNavListItem} {\n      padding-block-end: 0 !important;\n\n      &:not(:last-child),\n      &:only-child {\n        margin-block-end: 0 !important;\n      }\n    }\n\n    /* Make the top-level create button square and icon-only */\n    ${StyledCaseTypes} > ${StyledNavList} > ${StyledNavListItem} > ${StyledBareButton} {\n      width: ${hitArea};\n      height: ${hitArea};\n      min-height: ${hitArea};\n      padding: 0;\n      justify-content: center;\n      border-radius: ${borderRadius};\n\n      /* Hide the \"Create\" text label visually; aria-label on the button covers a11y.\n         Target all spans except the icon box so SVG icon remains visible. */\n      span:not(${StyledNavItemIconBox}) {\n        display: none;\n      }\n    }\n  `;\n});\n\nStyledTopNavCreateArea.defaultProps = defaultThemeProp;\n\n/**\n * Invisible container used as the hidden measurement row in AppTopNav.\n * Always rendered at absolute position so useTopNavOverflow can measure all\n * link widths at full size before deciding which ones are visible.\n */\nexport const StyledTopNavMeasureRow = styled(Flex)`\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  white-space: nowrap;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n`;\n\nStyledTopNavMeasureRow.defaultProps = defaultThemeProp;\n\n/**\n * Always rendered at absolute position so the hook can measure the More button\n * width before deciding how many links fit.\n */\nexport const StyledTopNavItemHidden = styled(StyledTopNavItem)`\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n`;\n\nStyledTopNavItemHidden.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/AppTopNav.types.d.ts

@@ -0,0 +1,16 @@
+import type { AppShellProps, UtilItemProps } from './AppShell.types';
+export interface AppTopNavProps {
+    /** Not currently used by top-bar rendering; reserved for future nav theming. */
+    appInfo?: AppShellProps['appInfo'];
+    links?: AppShellProps['links'];
+    caseTypes?: AppShellProps['caseTypes'];
+    cases?: AppShellProps['cases'];
+    agent?: AppShellProps['agent'];
+    utils?: AppShellProps['utils'];
+    searchInput?: AppShellProps['searchInput'];
+    searchPage?: AppShellProps['searchPage'];
+    searchLabel?: string;
+    /** Called when a utility item with a drawerView is activated. */
+    onUtilItemClick?: (item: UtilItemProps) => void;
+}
+//# sourceMappingURL=AppTopNav.types.d.ts.map

package/lib/components/AppShell/AppTopNav.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTopNav.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAErE,MAAM,WAAW,cAAc;IAC7B,gFAAgF;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CACjD"}

package/lib/components/AppShell/AppTopNav.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AppTopNav.types.js.map

package/lib/components/AppShell/AppTopNav.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTopNav.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppTopNav.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AppShellProps, UtilItemProps } from './AppShell.types';\n\nexport interface AppTopNavProps {\n  /** Not currently used by top-bar rendering; reserved for future nav theming. */\n  appInfo?: AppShellProps['appInfo'];\n  links?: AppShellProps['links'];\n  caseTypes?: AppShellProps['caseTypes'];\n  cases?: AppShellProps['cases'];\n  agent?: AppShellProps['agent'];\n  utils?: AppShellProps['utils'];\n  searchInput?: AppShellProps['searchInput'];\n  searchPage?: AppShellProps['searchPage'];\n  searchLabel?: string;\n  /** Called when a utility item with a drawerView is activated. */\n  onUtilItemClick?: (item: UtilItemProps) => void;\n}\n"]}

package/lib/components/AppShell/Drawer.d.ts

@@ -6,7 +6,8 @@ interface DrawerViewProps {
     onDrawerClose?: () => void;
     drawerOpen: boolean;
     setDrawerOpen: (open: boolean) => void;
+    topOffset: string;
 }
-declare const _default: ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }: DrawerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen, topOffset }: DrawerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 //# sourceMappingURL=Drawer.d.ts.map

package/lib/components/AppShell/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiCvC,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;yBAEe,6EAOb,eAAe;AAPlB,wBA6FE"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiCvC,UAAU,eAAe;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,MAAM,CAAC;CACnB;yBAEe,wFAQb,eAAe;AARlB,wBAyGE"}

package/lib/components/AppShell/Drawer.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useLayoutEffect, useRef } from 'react';
-import BareButton from '../Button/BareButton';
 import Drawer from '../Drawer';
 import Flex from '../Flex';
 import Icon, { registerIcon } from '../Icon';
 import * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';
 import Text from '../Text';
 import { useConsolidatedRef, useDirection, useElement, useEscape, useFocusTrap, useI18n, useTheme, useUID } from '../../hooks';
-import Configuration from '../Configuration/Configuration';
 import { getActiveElement } from '../../utils';
 import { isSolidColor } from '../../styles';
+import Button from '../Button';
+import Configuration from '../Configuration';
 import AppShellContext from './AppShellContext';
-import { StyledDrawerWrapper, StyledDrawerBackButton, StyledDrawerHeading, StyledDrawerListContainer } from './Drawer.styles';
+import { StyledDrawerWrapper, StyledDrawerHeading, StyledDrawerListContainer, StyledTopNavDrawerOffset } from './Drawer.styles';
 import { navContrastColors } from './style-utils';
 registerIcon(arrowLeftIcon);
-export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen }) => {
+export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setDrawerOpen, topOffset }) => {
     const t = useI18n();
     const theme = useTheme();
     const { focusedImperatively } = useContext(AppShellContext);
@@ -44,15 +44,16 @@ export default ({ content, header, onDrawerOpen, onDrawerClose, drawerOpen, setD
     useLayoutEffect(() => {
         returnFocusRef.current = getActiveElement() ?? undefined;
     }, []);
-    return (_jsx(Configuration, { theme: navTheme, portalTarget: drawerEl ?? undefined, children: _jsxs(Drawer, { role: 'dialog', "aria-labelledby": headerId, as: StyledDrawerWrapper, position: 'fixed', placement: start, open: drawerOpen, nullWhenClosed: true, onAfterOpen: () => {
-                if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {
-                    focusedImperatively.current = true;
-                    backButtonRef.current.focus();
-                }
-                onDrawerOpen?.();
-            }, onAfterClose: () => {
-                onDrawerClose?.();
-                returnFocusRef.current?.focus();
-            }, onOuterClick: () => setDrawerOpen(false), ref: drawerRef, children: [_jsxs(Flex, { as: StyledDrawerHeading, role: 'none', container: { alignItems: 'center' }, children: [_jsx(BareButton, { as: StyledDrawerBackButton, ref: backButtonRef, onClick: () => setDrawerOpen(false), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: `arrow-${start}` }) }), _jsx(Text, { variant: 'h2', id: headerId, children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, "aria-labelledby": headerId, children: content })] }) }));
+    const drawerContent = (_jsxs(Drawer, { role: 'dialog', "aria-labelledby": headerId, as: StyledDrawerWrapper, position: 'fixed', topOffset: topOffset, placement: start, open: drawerOpen, nullWhenClosed: true, onAfterOpen: () => {
+            if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {
+                focusedImperatively.current = true;
+                backButtonRef.current.focus();
+            }
+            onDrawerOpen?.();
+        }, onAfterClose: () => {
+            onDrawerClose?.();
+            returnFocusRef.current?.focus();
+        }, onOuterClick: () => setDrawerOpen(false), ref: drawerRef, children: [_jsxs(Flex, { as: StyledDrawerHeading, role: 'none', container: { alignItems: 'center' }, children: [_jsx(Button, { ref: backButtonRef, icon: true, variant: 'simple', onClick: () => setDrawerOpen(false), label: t('close'), "aria-label": t('close_noun', [header]), children: _jsx(Icon, { name: `arrow-${start}` }) }), _jsx(Text, { variant: 'h2', id: headerId, children: header })] }), _jsx(Flex, { as: StyledDrawerListContainer, container: { direction: 'column' }, "aria-labelledby": headerId, children: content })] }));
+    return (_jsx(Configuration, { theme: navTheme, portalTarget: drawerEl ?? undefined, children: topOffset ? (_jsx(StyledTopNavDrawerOffset, { "$topOffset": topOffset, children: drawerContent })) : (drawerContent) }));
 };
 //# sourceMappingURL=Drawer.js.map

package/lib/components/AppShell/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useLayoutEffect, useRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport {\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useTheme,\n  useUID\n} from '../../hooks';\nimport Configuration from '../Configuration/Configuration';\nimport { getActiveElement } from '../../utils';\nimport { isSolidColor } from '../../styles';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerBackButton,\n  StyledDrawerHeading,\n  StyledDrawerListContainer\n} from './Drawer.styles';\nimport { navContrastColors } from './style-utils';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n}\n\nexport default ({\n  content,\n  header,\n  onDrawerOpen,\n  onDrawerClose,\n  drawerOpen,\n  setDrawerOpen\n}: DrawerViewProps) => {\n  const t = useI18n();\n  const theme = useTheme();\n  const { focusedImperatively } = useContext(AppShellContext);\n  const { start } = useDirection();\n  const returnFocusRef = useRef<HTMLElement>();\n  const [drawerEl, setDrawerEl] = useElement<HTMLDivElement>();\n  const drawerRef = useConsolidatedRef(setDrawerEl);\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const headerId = useUID();\n\n  useEscape(\n    () => {\n      setDrawerOpen(false);\n    },\n    drawerEl,\n    [drawerEl]\n  );\n\n  useFocusTrap(drawerRef);\n\n  const { foreground, interactive, urgent } = navContrastColors(theme);\n  const navBg = theme.components['app-shell'].nav.background;\n  const navTheme = {\n    base: {\n      palette: {\n        'primary-background': isSolidColor(navBg) ? navBg : 'transparent',\n        'foreground-color': foreground,\n        interactive,\n        urgent\n      }\n    }\n  };\n\n  // Using layout effect to capture the focused element prior to drawer elements taking focus.\n  useLayoutEffect(() => {\n    returnFocusRef.current = (getActiveElement() as HTMLElement) ?? undefined;\n  }, []);\n\n  return (\n    <Configuration theme={navTheme} portalTarget={drawerEl ?? undefined}>\n      <Drawer\n        role='dialog'\n        aria-labelledby={headerId}\n        as={StyledDrawerWrapper}\n        position='fixed'\n        placement={start}\n        open={drawerOpen}\n        nullWhenClosed\n        onAfterOpen={() => {\n          if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {\n            focusedImperatively.current = true;\n            backButtonRef.current.focus();\n          }\n          onDrawerOpen?.();\n        }}\n        onAfterClose={() => {\n          onDrawerClose?.();\n          returnFocusRef.current?.focus();\n        }}\n        onOuterClick={() => setDrawerOpen(false)}\n        ref={drawerRef}\n      >\n        <Flex as={StyledDrawerHeading} role='none' container={{ alignItems: 'center' }}>\n          <BareButton\n            as={StyledDrawerBackButton}\n            ref={backButtonRef}\n            onClick={() => setDrawerOpen(false)}\n            aria-label={t('close_noun', [header])}\n          >\n            <Icon name={`arrow-${start}`} />\n          </BareButton>\n          <Text variant='h2' id={headerId}>\n            {header}\n          </Text>\n        </Flex>\n        <Flex\n          as={StyledDrawerListContainer}\n          container={{ direction: 'column' }}\n          aria-labelledby={headerId}\n        >\n          {content}\n        </Flex>\n      </Drawer>\n    </Configuration>\n  );\n};\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useLayoutEffect, useRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowLeftIcon from '../Icon/icons/arrow-left.icon';\nimport Text from '../Text';\nimport {\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useTheme,\n  useUID\n} from '../../hooks';\nimport { getActiveElement } from '../../utils';\nimport { isSolidColor } from '../../styles';\nimport Button from '../Button';\nimport Configuration from '../Configuration';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  StyledDrawerWrapper,\n  StyledDrawerHeading,\n  StyledDrawerListContainer,\n  StyledTopNavDrawerOffset\n} from './Drawer.styles';\nimport { navContrastColors } from './style-utils';\n\nregisterIcon(arrowLeftIcon);\n\ninterface DrawerViewProps {\n  content: ReactNode;\n  header: string;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n  topOffset: string;\n}\n\nexport default ({\n  content,\n  header,\n  onDrawerOpen,\n  onDrawerClose,\n  drawerOpen,\n  setDrawerOpen,\n  topOffset\n}: DrawerViewProps) => {\n  const t = useI18n();\n  const theme = useTheme();\n  const { focusedImperatively } = useContext(AppShellContext);\n  const { start } = useDirection();\n  const returnFocusRef = useRef<HTMLElement>();\n  const [drawerEl, setDrawerEl] = useElement<HTMLDivElement>();\n  const drawerRef = useConsolidatedRef(setDrawerEl);\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n  const headerId = useUID();\n\n  useEscape(\n    () => {\n      setDrawerOpen(false);\n    },\n    drawerEl,\n    [drawerEl]\n  );\n\n  useFocusTrap(drawerRef);\n\n  const { foreground, interactive, urgent } = navContrastColors(theme);\n  const navBg = theme.components['app-shell'].nav.background;\n  const navTheme = {\n    base: {\n      palette: {\n        'primary-background': isSolidColor(navBg) ? navBg : 'transparent',\n        'foreground-color': foreground,\n        interactive,\n        urgent\n      }\n    }\n  };\n\n  // Using layout effect to capture the focused element prior to drawer elements taking focus.\n  useLayoutEffect(() => {\n    returnFocusRef.current = (getActiveElement() as HTMLElement) ?? undefined;\n  }, []);\n\n  const drawerContent = (\n    <Drawer\n      role='dialog'\n      aria-labelledby={headerId}\n      as={StyledDrawerWrapper}\n      position='fixed'\n      topOffset={topOffset}\n      placement={start}\n      open={drawerOpen}\n      nullWhenClosed\n      onAfterOpen={() => {\n        if (backButtonRef.current && !drawerRef.current?.contains(getActiveElement())) {\n          focusedImperatively.current = true;\n          backButtonRef.current.focus();\n        }\n        onDrawerOpen?.();\n      }}\n      onAfterClose={() => {\n        onDrawerClose?.();\n        returnFocusRef.current?.focus();\n      }}\n      onOuterClick={() => setDrawerOpen(false)}\n      ref={drawerRef}\n    >\n      <Flex as={StyledDrawerHeading} role='none' container={{ alignItems: 'center' }}>\n        <Button\n          ref={backButtonRef}\n          icon\n          variant='simple'\n          onClick={() => setDrawerOpen(false)}\n          label={t('close')}\n          aria-label={t('close_noun', [header])}\n        >\n          <Icon name={`arrow-${start}`} />\n        </Button>\n        <Text variant='h2' id={headerId}>\n          {header}\n        </Text>\n      </Flex>\n      <Flex\n        as={StyledDrawerListContainer}\n        container={{ direction: 'column' }}\n        aria-labelledby={headerId}\n      >\n        {content}\n      </Flex>\n    </Drawer>\n  );\n\n  return (\n    <Configuration theme={navTheme} portalTarget={drawerEl ?? undefined}>\n      {topOffset ? (\n        <StyledTopNavDrawerOffset $topOffset={topOffset}>{drawerContent}</StyledTopNavDrawerOffset>\n      ) : (\n        drawerContent\n      )}\n    </Configuration>\n  );\n};\n"]}

package/lib/components/AppShell/Drawer.styles.d.ts

@@ -1,14 +1,25 @@
 import type { DrawerProps } from '../Drawer';
-export declare const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DrawerProps, never>;
-export declare const StyledDrawerHeading: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerBackButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
+export declare const StyledDrawerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DrawerProps & {
+    topOffset: string;
+}>> & string;
+/**
+ * Fixed-position container that offsets the drawer below the top chrome
+ * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
+ * The inner Drawer uses position='absolute' relative to this container.
+ * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit
+ * rounding issues and ensuring the drawer always fills the available height.
+ */
+export declare const StyledTopNavDrawerOffset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $topOffset: string;
+}>> & string;
+export declare const StyledDrawerHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const StyledDrawerList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
     displayPins: boolean;
-}, never>;
-export declare const StyledDrawerMetaList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const EmptyDrawerVisual: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerListHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerViewAll: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerListSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDrawerListContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+}>> & string;
+export declare const StyledDrawerMetaList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const EmptyDrawerVisual: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledDrawerListHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledDrawerViewAll: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const StyledDrawerListSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledDrawerListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 //# sourceMappingURL=Drawer.styles.d.ts.map

package/lib/components/AppShell/Drawer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB,kHAwB9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,4GAsB9B,CAAC;AAIH,eAAO,MAAM,sBAAsB,4GAqBjC,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;SAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,uGAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAOpC,CAAC"}
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQ7C,eAAO,MAAM,mBAAmB;eAAyC,MAAM;YA6B9E,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB;gBAA4B,MAAM;YAStE,CAAC;AAIF,eAAO,MAAM,mBAAmB,uNAsB9B,CAAC;AAIH,eAAO,MAAM,gBAAgB;iBAA4B,OAAO;YAE9D,CAAC;AAIH,eAAO,MAAM,oBAAoB,iOAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAK5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAWlC,CAAC;AAIH,eAAO,MAAM,mBAAmB,yOAiB9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,6NAOlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAMpC,CAAC"}

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

@@ -1,30 +1,50 @@
 import styled, { css } from 'styled-components';
+import { rem } from 'polished';
 import { calculateFontSize } from '../../styles';
 import { defaultThemeProp } from '../../theme';
 import { StyledMetaListItem } from '../MetaList/MetaList';
 import { StyledLabel } from '../Label';
 import { StyledForm } from '../MultiStepForm/MultiStepForm';
 import { navOpenWidth } from './AppShell.styles';
-import { navContrastColors, pxToRem } from './style-utils';
-export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
+import { navContrastColors } from './style-utils';
+export const StyledDrawerWrapper = styled.div(({ theme, open, topOffset }) => {
     const { components: { 'app-shell': { nav: { background: navBg } } } } = theme;
     const { foreground, border: borderColor } = navContrastColors(theme);
     return css `
-    background: ${navBg};
-    width: ${navOpenWidth};
-    height: 100%;
-    color: ${foreground};
-    opacity: ${open ? 1 : 0};
-    border-inline-end: ${pxToRem(1)} solid ${borderColor};
+      display: flex;
+      flex-direction: column;
+      background: ${navBg};
+      width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));
+      height: unset;
+      inset-block: ${topOffset} 0;
+      color: ${foreground};
+      opacity: ${open ? 1 : 0};
+      border-inline-end: ${rem(1)} solid ${borderColor};
 
-    ${StyledForm},
-    ${StyledLabel},
+      ${StyledForm},
+      ${StyledLabel},
     ${StyledMetaListItem} {
-      color: ${foreground};
-    }
-  `;
+        color: ${foreground};
+      }
+    `;
 });
 StyledDrawerWrapper.defaultProps = defaultThemeProp;
+/**
+ * Fixed-position container that offsets the drawer below the top chrome
+ * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.
+ * The inner Drawer uses position='absolute' relative to this container.
+ * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit
+ * rounding issues and ensuring the drawer always fills the available height.
+ */
+export const StyledTopNavDrawerOffset = styled.div(({ $topOffset, theme }) => css `
+    position: fixed;
+    inset-block-start: ${$topOffset};
+    inset-inline-start: 0;
+    inset-block-end: 0;
+    width: ${navOpenWidth};
+    z-index: ${theme.base['z-index'].drawer};
+  `);
+StyledTopNavDrawerOffset.defaultProps = defaultThemeProp;
 export const StyledDrawerHeading = styled.header(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const { foreground } = navContrastColors(theme);
@@ -48,28 +68,6 @@ export const StyledDrawerHeading = styled.header(({ theme }) => {
   `;
 });
 StyledDrawerHeading.defaultProps = defaultThemeProp;
-export const StyledDrawerBackButton = styled.button(({ theme }) => {
-    const { hoverBg, foreground } = navContrastColors(theme);
-    return css `
-    height: ${theme.base['hit-area']['mouse-min']};
-    width: ${theme.base['hit-area']['mouse-min']};
-    border-radius: calc(
-      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}
-    );
-
-    &:hover,
-    &:focus {
-      color: ${foreground};
-      background-color: ${hoverBg};
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: ${theme.base.shadow['focus-inset']};
-    }
-  `;
-});
-StyledDrawerBackButton.defaultProps = defaultThemeProp;
 export const StyledDrawerList = styled.ul(() => {
     return css ``;
 });
@@ -121,15 +119,14 @@ export const StyledDrawerListSection = styled.div(({ theme }) => {
     return css `
     border-top: 0.0625rem solid ${borderColor};
     min-height: max(20%, 8rem);
-    overflow-y: auto;
   `;
 });
 StyledDrawerListSection.defaultProps = defaultThemeProp;
-export const StyledDrawerListContainer = styled.div(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+export const StyledDrawerListContainer = styled.div(() => {
     return css `
-    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});
-    overflow: auto;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
   `;
 });
 StyledDrawerListContainer.defaultProps = defaultThemeProp;

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  const {\n    components: {\n      'app-shell': {\n        nav: { background: navBg }\n      }\n    }\n  } = theme;\n  const { foreground, border: borderColor } = navContrastColors(theme);\n\n  return css`\n    background: ${navBg};\n    width: ${navOpenWidth};\n    height: 100%;\n    color: ${foreground};\n    opacity: ${open ? 1 : 0};\n    border-inline-end: ${pxToRem(1)} solid ${borderColor};\n\n    ${StyledForm},\n    ${StyledLabel},\n    ${StyledMetaListItem} {\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    h2 {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin: 0 auto;\n      position: relative;\n      left: -0.7rem;\n    }\n\n    svg {\n      font-size: ${fontSize.xxl};\n      cursor: pointer;\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerBackButton = styled.button(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    border-radius: calc(\n      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}\n    );\n\n    &:hover,\n    &:focus {\n      color: ${foreground};\n      background-color: ${hoverBg};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerBackButton.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n  return css`\n    width: calc(4 * ${theme.base.spacing});\n    height: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${hoverBg};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  const { foreground, nestedListHeader } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: ${foreground};\n    background: ${nestedListHeader};\n    text-align: center;\n    margin-top: 0.0625rem;\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n    overflow: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rem } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps & { topOffset: string }>(\n  ({ theme, open, topOffset }) => {\n    const {\n      components: {\n        'app-shell': {\n          nav: { background: navBg }\n        }\n      }\n    } = theme;\n    const { foreground, border: borderColor } = navContrastColors(theme);\n\n    return css`\n      display: flex;\n      flex-direction: column;\n      background: ${navBg};\n      width: calc(${navOpenWidth} + var(--safe-area-inset-inline-start, 0rem));\n      height: unset;\n      inset-block: ${topOffset} 0;\n      color: ${foreground};\n      opacity: ${open ? 1 : 0};\n      border-inline-end: ${rem(1)} solid ${borderColor};\n\n      ${StyledForm},\n      ${StyledLabel},\n    ${StyledMetaListItem} {\n        color: ${foreground};\n      }\n    `;\n  }\n);\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\n/**\n * Fixed-position container that offsets the drawer below the top chrome\n * (AppShell header + top nav bar) so the drawer doesn't overlap the navigation.\n * The inner Drawer uses position='absolute' relative to this container.\n * Uses inset-block-end: 0 to pin to the viewport bottom, avoiding dvh unit\n * rounding issues and ensuring the drawer always fills the available height.\n */\nexport const StyledTopNavDrawerOffset = styled.div<{ $topOffset: string }>(\n  ({ $topOffset, theme }) => css`\n    position: fixed;\n    inset-block-start: ${$topOffset};\n    inset-inline-start: 0;\n    inset-block-end: 0;\n    width: ${navOpenWidth};\n    z-index: ${theme.base['z-index'].drawer};\n  `\n);\n\nStyledTopNavDrawerOffset.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    h2 {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin: 0 auto;\n      position: relative;\n      left: -0.7rem;\n    }\n\n    svg {\n      font-size: ${fontSize.xxl};\n      cursor: pointer;\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n  return css`\n    width: calc(4 * ${theme.base.spacing});\n    height: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${hoverBg};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  const { foreground, nestedListHeader } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: ${foreground};\n    background: ${nestedListHeader};\n    text-align: center;\n    margin-top: 0.0625rem;\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(() => {\n  return css`\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/NavigationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AA2B5E,OAAO,KAAK,EACV,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA2F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CAqKnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA4DpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AA2B5E,OAAO,KAAK,EACV,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA4F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CA2KnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CAkEpC,CAAC;AAEF,eAAe,cAAc,CAAC"}