@cloudscape-design/components-themeable 3.0.1315 → 3.0.1316

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -299,6 +299,7 @@
     --color-background-input-default-1z2buq:var(--color-white-jf0w15);
     --color-background-input-disabled-4vlau3:var(--color-neutral-250-hdfqdx);
     --color-background-item-selected-v20q4r:var(--color-primary-50-k00bx1);
+    --color-background-side-navigation-item-active-jencj9:transparent;
     --color-background-layout-main-05m5y6:var(--color-neutral-200-z3mmn9);
     --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
     --color-background-drawer-backdrop-if96qn:var(--color-grey-opaque-90-fueme4);
@@ -382,6 +383,7 @@
     --color-border-button-primary-hover-g5jizy:var(--color-background-button-primary-hover-o7mzaq);
     --color-text-button-primary-disabled-xs2e2t:var(--color-neutral-500-h8gwav);
     --color-item-selected-2dv7ug:var(--color-primary-600-be1v6a);
+    --color-text-side-navigation-item-active-7en75b:var(--color-text-accent-rvq171);
     --color-border-calendar-grid-zrkvhb:var(--color-border-dropdown-item-default-uslwbi);
     --color-border-calendar-grid-selected-focus-ring-nzjlw6:var(--color-border-item-focused-r5f6xl);
     --color-border-cell-shaded-yvj0a8:var(--color-neutral-300-y8n3aq);
@@ -773,6 +775,7 @@
     --size-table-selection-horizontal-udsu00:54px;
     --size-vertical-input-8gzd1t:32px;
     --size-vertical-panel-icon-offset-1tiizm:15px;
+    --size-side-navigation-item-height-nnzau5:28px;
     --space-alert-action-left-ii45xs:var(--space-l-3cws6j);
     --space-alert-horizontal-vvafy5:var(--space-l-3cws6j);
     --space-alert-message-right-ipx6aa:0px;
@@ -843,6 +846,8 @@
     --space-table-header-tools-full-page-bottom-1o73je:4px;
     --space-table-horizontal-xmv4qa:0px;
     --space-tree-view-indentation-y9tsj1:var(--space-xl-4dmkh1);
+    --space-side-navigation-item-gap-3y4bd2:0px;
+    --space-side-navigation-item-collapsed-gap-bmqsk4:var(--space-xs-kw7k3v);
     --space-tile-gutter-2ulgjh:var(--space-xl-4dmkh1);
     --space-action-card-horizontal-default-3e7yy4:var(--space-card-horizontal-default-7lut73);
     --space-action-card-horizontal-embedded-4io5oz:var(--space-card-horizontal-embedded-z4gdo8);
@@ -1200,6 +1205,7 @@
   .awsui-compact-mode:not(#\9) {
     --size-vertical-input-8gzd1t:28px;
     --size-vertical-panel-icon-offset-1tiizm:13px;
+    --size-side-navigation-item-height-nnzau5:24px;
     --space-field-vertical-dgs6s0:2px;
     --space-card-horizontal-embedded-z4gdo8:10px;
     --space-card-vertical-embedded-u2cdf0:var(--space-xs-kw7k3v);
@@ -1520,6 +1526,7 @@
     --color-border-button-primary-active-59dqcy:var(--color-background-button-primary-active-78nndc);
     --color-border-button-primary-default-gqc01m:var(--color-background-button-primary-default-3w82vy);
     --color-border-button-primary-hover-g5jizy:var(--color-background-button-primary-hover-o7mzaq);
+    --color-text-side-navigation-item-active-7en75b:var(--color-text-accent-rvq171);
     --color-border-calendar-grid-selected-focus-ring-nzjlw6:var(--color-border-item-focused-r5f6xl);
     --color-border-card-gkbfc5:var(--color-border-divider-default-ipvpev);
     --color-border-card-highlighted-nrm9ba:var(--color-border-item-selected-vq6ddf);
@@ -2124,6 +2131,7 @@
     --color-border-button-primary-hover-g5jizy:var(--color-background-button-primary-hover-o7mzaq);
     --color-text-button-primary-disabled-xs2e2t:var(--color-neutral-500-h8gwav);
     --color-item-selected-2dv7ug:var(--color-primary-600-be1v6a);
+    --color-text-side-navigation-item-active-7en75b:var(--color-text-accent-rvq171);
     --color-border-cell-shaded-yvj0a8:var(--color-neutral-300-y8n3aq);
     --color-border-code-editor-ace-active-line-light-theme-394jyv:var(--color-neutral-300-y8n3aq);
     --color-border-code-editor-ace-active-line-dark-theme-vv9lm5:var(--color-neutral-600-boivn8);
@@ -2589,6 +2597,7 @@
     --color-border-button-primary-active-59dqcy:var(--color-background-button-primary-active-78nndc);
     --color-border-button-primary-default-gqc01m:var(--color-background-button-primary-default-3w82vy);
     --color-border-button-primary-hover-g5jizy:var(--color-background-button-primary-hover-o7mzaq);
+    --color-text-side-navigation-item-active-7en75b:var(--color-text-accent-rvq171);
     --color-border-card-gkbfc5:var(--color-border-divider-default-ipvpev);
     --color-border-card-highlighted-nrm9ba:var(--color-border-item-selected-vq6ddf);
     --color-border-item-card-8nbcyp:var(--color-border-card-gkbfc5);
@@ -2808,6 +2817,7 @@
     --color-border-button-primary-default-gqc01m:var(--color-background-button-primary-default-3w82vy);
     --color-border-button-primary-disabled-xk738n:var(--color-background-button-primary-disabled-1tc1nl);
     --color-border-button-primary-hover-g5jizy:var(--color-background-button-primary-hover-o7mzaq);
+    --color-text-side-navigation-item-active-7en75b:var(--color-text-accent-rvq171);
     --color-border-code-editor-pane-item-hover-0632gv:var(--color-border-dropdown-item-hover-vony6u);
     --color-border-card-gkbfc5:var(--color-border-divider-default-ipvpev);
     --color-border-card-highlighted-nrm9ba:var(--color-border-item-selected-vq6ddf);
@@ -3091,6 +3101,7 @@
     --color-border-button-primary-default-gqc01m:var(--color-background-button-primary-default-3w82vy);
     --color-border-button-primary-disabled-xk738n:var(--color-background-button-primary-disabled-1tc1nl);
     --color-border-button-primary-hover-g5jizy:var(--color-background-button-primary-hover-o7mzaq);
+    --color-text-side-navigation-item-active-7en75b:var(--color-text-accent-rvq171);
     --color-border-code-editor-pane-item-hover-0632gv:var(--color-border-dropdown-item-hover-vony6u);
     --color-border-card-gkbfc5:var(--color-border-divider-default-ipvpev);
     --color-border-card-highlighted-nrm9ba:var(--color-border-item-selected-vq6ddf);
@@ -3621,6 +3632,7 @@
     --color-border-button-primary-default-gqc01m:var(--color-background-button-primary-default-3w82vy);
     --color-border-button-primary-disabled-xk738n:var(--color-background-button-primary-disabled-1tc1nl);
     --color-border-button-primary-hover-g5jizy:var(--color-background-button-primary-hover-o7mzaq);
+    --color-text-side-navigation-item-active-7en75b:var(--color-text-accent-rvq171);
     --color-border-code-editor-pane-item-hover-0632gv:var(--color-border-dropdown-item-hover-vony6u);
     --color-border-card-gkbfc5:var(--color-border-divider-default-ipvpev);
     --color-border-card-highlighted-nrm9ba:var(--color-border-item-selected-vq6ddf);
@@ -3847,5 +3859,5 @@
   }
 }
 :root {
-  --awsui-version-info-528ed620: true;
+  --awsui-version-info-d326da3c: true;
 }

package/lib/internal/template/internal/breakpoints.d.ts

@@ -7,6 +7,6 @@ export declare function matchBreakpointMapping<T>(subset: Partial<Record<Breakpo
 /**
  * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.
  */
-export declare function getMatchingBreakpoint<T extends readonly Breakpoint[]>(width: number, breakpointFilter?: T): T[number] | 'default';
+export declare function getMatchingBreakpoint<T extends readonly Breakpoint[]>(width: number, breakpointFilter?: T, previousBreakpoint?: Breakpoint | null): T[number] | 'default';
 export declare function getBreakpointValue(breakpoint: Breakpoint): number;
 //# sourceMappingURL=breakpoints.d.ts.map

package/lib/internal/template/internal/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/internal/breakpoints.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAY3E,eAAO,MAAM,gBAAgB,QAAsD,CAAC;AAIpF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,GAAG,IAAI,CAS9G;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,SAAS,UAAU,EAAE,EACnE,KAAK,EAAE,MAAM,EACb,gBAAgB,CAAC,EAAE,CAAC,GACnB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAOvB;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEjE"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/internal/breakpoints.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAY3E,eAAO,MAAM,gBAAgB,QAAsD,CAAC;AAIpF;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,CAAC,GAAG,IAAI,CAS9G;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,SAAS,UAAU,EAAE,EACnE,KAAK,EAAE,MAAM,EACb,gBAAgB,CAAC,EAAE,CAAC,EACpB,kBAAkB,CAAC,EAAE,UAAU,GAAG,IAAI,GACrC,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CA6BvB;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEjE"}

package/lib/internal/template/internal/breakpoints.js

@@ -1,3 +1,6 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { browserScrollbarSize } from './utils/browser-scrollbar-size';
 const BREAKPOINT_MAPPING = [
     ['xl', 1840],
     ['l', 1320],
@@ -25,9 +28,28 @@ export function matchBreakpointMapping(subset, actual) {
 /**
  * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.
  */
-export function getMatchingBreakpoint(width, breakpointFilter) {
-    for (const [breakpoint, breakpointWidth] of BREAKPOINT_MAPPING) {
-        if (width > breakpointWidth && (!breakpointFilter || breakpointFilter.indexOf(breakpoint) !== -1)) {
+export function getMatchingBreakpoint(width, breakpointFilter, previousBreakpoint) {
+    // When a JS-resolved breakpoint sits within a scrollbar-width of a boundary, switching the layout
+    // can grow/shrink the page enough to toggle the viewport scrollbar, which in turn changes the
+    // measured width and flips the breakpoint back — an infinite layout loop (see AWSUI-62065).
+    const breakpointSwitchOffset = browserScrollbarSize().width;
+    const previousBreakpointIndex = previousBreakpoint === undefined || previousBreakpoint === null
+        ? -1
+        : BREAKPOINTS_DESCENDING.indexOf(previousBreakpoint);
+    for (let i = 0; i < BREAKPOINT_MAPPING.length; i++) {
+        const [breakpoint, breakpointWidth] = BREAKPOINT_MAPPING[i];
+        if (breakpointFilter && breakpointFilter.indexOf(breakpoint) === -1) {
+            continue;
+        }
+        // Based on breakpointSwitchOffset, we either shrink or grow the breakpoint value we match against
+        // depending on whether the previous breakpoint was above or below the matched one. This enables the
+        // "sticky" behavior that makes the user have to resize the element further into a breakpoint boundary
+        // to actually switch the breakpoint.
+        let stickyBreakpointWidth = breakpointWidth;
+        if (previousBreakpointIndex !== -1) {
+            stickyBreakpointWidth += previousBreakpointIndex <= i ? -breakpointSwitchOffset : breakpointSwitchOffset;
+        }
+        if (width > stickyBreakpointWidth) {
             return breakpoint;
         }
     }

package/lib/internal/template/internal/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/internal/breakpoints.ts"],"names":[],"mappings":"AAIA,MAAM,kBAAkB,GAA2B;IACjD,CAAC,IAAI,EAAE,IAAI,CAAC;IACZ,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,GAAG,CAAC;IACV,CAAC,IAAI,EAAE,GAAG,CAAC;IACX,CAAC,KAAK,EAAE,GAAG,CAAC;IACZ,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpF,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAI,MAAsC,EAAE,MAAkB;IAClG,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,KAAK,MAAM,CAAC,UAAU,CAAC,IAAI,qBAAqB,EAAE,CAAC;QACjD,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,eAAe,CAAC;QACzB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CACnC,KAAa,EACb,gBAAoB;IAEpB,KAAK,MAAM,CAAC,UAAU,EAAE,eAAe,CAAC,IAAI,kBAAkB,EAAE,CAAC;QAC/D,IAAI,KAAK,GAAG,eAAe,IAAI,CAAC,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YAClG,OAAO,UAAU,CAAC;QACpB,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAsB;IACvD,OAAO,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC;AACjE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport type Breakpoint = 'default' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst BREAKPOINT_MAPPING: [Breakpoint, number][] = [\n  ['xl', 1840],\n  ['l', 1320],\n  ['m', 1120],\n  ['s', 912],\n  ['xs', 688],\n  ['xxs', 465],\n  ['default', -1],\n];\n\nexport const mobileBreakpoint = BREAKPOINT_MAPPING.filter(b => b[0] === 'xs')[0][1];\n\nconst BREAKPOINTS_DESCENDING = BREAKPOINT_MAPPING.map(([bp]) => bp);\n\n/**\n * Take a breakpoint mapping and return the breakpoint value that most closely matches the actual breakpoint.\n */\nexport function matchBreakpointMapping<T>(subset: Partial<Record<Breakpoint, T>>, actual: Breakpoint): T | null {\n  const qualifyingBreakpoints = BREAKPOINT_MAPPING.slice(BREAKPOINTS_DESCENDING.indexOf(actual));\n  for (const [breakpoint] of qualifyingBreakpoints) {\n    const breakpointValue = subset[breakpoint];\n    if (breakpointValue !== undefined) {\n      return breakpointValue;\n    }\n  }\n  return null;\n}\n\n/**\n * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.\n */\nexport function getMatchingBreakpoint<T extends readonly Breakpoint[]>(\n  width: number,\n  breakpointFilter?: T\n): T[number] | 'default' {\n  for (const [breakpoint, breakpointWidth] of BREAKPOINT_MAPPING) {\n    if (width > breakpointWidth && (!breakpointFilter || breakpointFilter.indexOf(breakpoint) !== -1)) {\n      return breakpoint;\n    }\n  }\n  return 'default';\n}\n\nexport function getBreakpointValue(breakpoint: Breakpoint): number {\n  return BREAKPOINT_MAPPING.find(bp => bp[0] === breakpoint)![1];\n}\n"]}
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/internal/breakpoints.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAItE,MAAM,kBAAkB,GAA2B;IACjD,CAAC,IAAI,EAAE,IAAI,CAAC;IACZ,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,IAAI,CAAC;IACX,CAAC,GAAG,EAAE,GAAG,CAAC;IACV,CAAC,IAAI,EAAE,GAAG,CAAC;IACX,CAAC,KAAK,EAAE,GAAG,CAAC;IACZ,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpF,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAI,MAAsC,EAAE,MAAkB;IAClG,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,KAAK,MAAM,CAAC,UAAU,CAAC,IAAI,qBAAqB,EAAE,CAAC;QACjD,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,eAAe,CAAC;QACzB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CACnC,KAAa,EACb,gBAAoB,EACpB,kBAAsC;IAEtC,kGAAkG;IAClG,8FAA8F;IAC9F,4FAA4F;IAC5F,MAAM,sBAAsB,GAAG,oBAAoB,EAAE,CAAC,KAAK,CAAC;IAE5D,MAAM,uBAAuB,GAC3B,kBAAkB,KAAK,SAAS,IAAI,kBAAkB,KAAK,IAAI;QAC7D,CAAC,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAEzD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACnD,MAAM,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAC5D,IAAI,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YACpE,SAAS;QACX,CAAC;QACD,kGAAkG;QAClG,oGAAoG;QACpG,sGAAsG;QACtG,qCAAqC;QACrC,IAAI,qBAAqB,GAAG,eAAe,CAAC;QAC5C,IAAI,uBAAuB,KAAK,CAAC,CAAC,EAAE,CAAC;YACnC,qBAAqB,IAAI,uBAAuB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC;QAC3G,CAAC;QACD,IAAI,KAAK,GAAG,qBAAqB,EAAE,CAAC;YAClC,OAAO,UAAU,CAAC;QACpB,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAsB;IACvD,OAAO,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC;AACjE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { browserScrollbarSize } from './utils/browser-scrollbar-size';\n\nexport type Breakpoint = 'default' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst BREAKPOINT_MAPPING: [Breakpoint, number][] = [\n  ['xl', 1840],\n  ['l', 1320],\n  ['m', 1120],\n  ['s', 912],\n  ['xs', 688],\n  ['xxs', 465],\n  ['default', -1],\n];\n\nexport const mobileBreakpoint = BREAKPOINT_MAPPING.filter(b => b[0] === 'xs')[0][1];\n\nconst BREAKPOINTS_DESCENDING = BREAKPOINT_MAPPING.map(([bp]) => bp);\n\n/**\n * Take a breakpoint mapping and return the breakpoint value that most closely matches the actual breakpoint.\n */\nexport function matchBreakpointMapping<T>(subset: Partial<Record<Breakpoint, T>>, actual: Breakpoint): T | null {\n  const qualifyingBreakpoints = BREAKPOINT_MAPPING.slice(BREAKPOINTS_DESCENDING.indexOf(actual));\n  for (const [breakpoint] of qualifyingBreakpoints) {\n    const breakpointValue = subset[breakpoint];\n    if (breakpointValue !== undefined) {\n      return breakpointValue;\n    }\n  }\n  return null;\n}\n\n/**\n * Get the named breakpoint for a provided width, optionally filtering to a subset of breakpoints.\n */\nexport function getMatchingBreakpoint<T extends readonly Breakpoint[]>(\n  width: number,\n  breakpointFilter?: T,\n  previousBreakpoint?: Breakpoint | null\n): T[number] | 'default' {\n  // When a JS-resolved breakpoint sits within a scrollbar-width of a boundary, switching the layout\n  // can grow/shrink the page enough to toggle the viewport scrollbar, which in turn changes the\n  // measured width and flips the breakpoint back — an infinite layout loop (see AWSUI-62065).\n  const breakpointSwitchOffset = browserScrollbarSize().width;\n\n  const previousBreakpointIndex =\n    previousBreakpoint === undefined || previousBreakpoint === null\n      ? -1\n      : BREAKPOINTS_DESCENDING.indexOf(previousBreakpoint);\n\n  for (let i = 0; i < BREAKPOINT_MAPPING.length; i++) {\n    const [breakpoint, breakpointWidth] = BREAKPOINT_MAPPING[i];\n    if (breakpointFilter && breakpointFilter.indexOf(breakpoint) === -1) {\n      continue;\n    }\n    // Based on breakpointSwitchOffset, we either shrink or grow the breakpoint value we match against\n    // depending on whether the previous breakpoint was above or below the matched one. This enables the\n    // \"sticky\" behavior that makes the user have to resize the element further into a breakpoint boundary\n    // to actually switch the breakpoint.\n    let stickyBreakpointWidth = breakpointWidth;\n    if (previousBreakpointIndex !== -1) {\n      stickyBreakpointWidth += previousBreakpointIndex <= i ? -breakpointSwitchOffset : breakpointSwitchOffset;\n    }\n    if (width > stickyBreakpointWidth) {\n      return breakpoint;\n    }\n  }\n  return 'default';\n}\n\nexport function getBreakpointValue(breakpoint: Breakpoint): number {\n  return BREAKPOINT_MAPPING.find(bp => bp[0] === breakpoint)![1];\n}\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (528ed620)";
-export var GIT_SHA = "528ed620";
+export var PACKAGE_VERSION = "3.0.0 (d326da3c)";
+export var GIT_SHA = "d326da3c";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (528ed620)",
-  "GIT_SHA": "528ed620",
+  "PACKAGE_VERSION": "3.0.0 (d326da3c)",
+  "GIT_SHA": "d326da3c",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false,

package/lib/internal/template/internal/generated/styles/tokens.d.ts

@@ -336,6 +336,7 @@ export const colorBackgroundInlineCode: string;
 export const colorBackgroundInputDefault: string;
 export const colorBackgroundInputDisabled: string;
 export const colorBackgroundItemSelected: string;
+export const colorBackgroundSideNavigationItemActive: string;
 export const colorBackgroundLayoutMain: string;
 export const colorBackgroundDrawer: string;
 export const colorBackgroundDrawerBackdrop: string;
@@ -419,6 +420,7 @@ export const colorBorderButtonPrimaryDisabled: string;
 export const colorBorderButtonPrimaryHover: string;
 export const colorTextButtonPrimaryDisabled: string;
 export const colorItemSelected: string;
+export const colorTextSideNavigationItemActive: string;
 export const colorBorderCalendarGrid: string;
 export const colorBorderCalendarGridSelectedFocusRing: string;
 export const colorBorderCellShaded: string;
@@ -819,6 +821,7 @@ export const sizeIconNormal: string;
 export const sizeTableSelectionHorizontal: string;
 export const sizeVerticalInput: string;
 export const sizeVerticalPanelIconOffset: string;
+export const sizeSideNavigationItemHeight: string;
 export const spaceAlertActionLeft: string;
 export const spaceAlertHorizontal: string;
 export const spaceAlertMessageRight: string;
@@ -889,6 +892,8 @@ export const spaceTableHeaderToolsBottom: string;
 export const spaceTableHeaderToolsFullPageBottom: string;
 export const spaceTableHorizontal: string;
 export const spaceTreeViewIndentation: string;
+export const spaceSideNavigationItemGap: string;
+export const spaceSideNavigationItemCollapsedGap: string;
 export const spaceTileGutter: string;
 export const spaceActionCardHorizontalDefault: string;
 export const spaceActionCardHorizontalEmbedded: string;

package/lib/internal/template/internal/generated/styles/tokens.js

@@ -336,6 +336,7 @@ export var colorBackgroundInlineCode = "var(--color-background-inline-code-un8ud
 export var colorBackgroundInputDefault = "var(--color-background-input-default-ifz5bb, #ffffff)";
 export var colorBackgroundInputDisabled = "var(--color-background-input-disabled-dihaja, #ebebf0)";
 export var colorBackgroundItemSelected = "var(--color-background-item-selected-9gppru, #f0fbff)";
+export var colorBackgroundSideNavigationItemActive = "var(--color-background-side-navigation-item-active-adfprg, transparent)";
 export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwcb, #ffffff)";
 export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";
 export var colorBackgroundDrawerBackdrop = "var(--color-background-drawer-backdrop-ducxi3, rgba(35, 43, 55, 0.7))";
@@ -419,6 +420,7 @@ export var colorBorderButtonPrimaryDisabled = "var(--color-border-button-primary
 export var colorBorderButtonPrimaryHover = "var(--color-border-button-primary-hover-rktx0f, #002b66)";
 export var colorTextButtonPrimaryDisabled = "var(--color-text-button-primary-disabled-q79gms, #8c8c94)";
 export var colorItemSelected = "var(--color-item-selected-72rnwy, #006ce0)";
+export var colorTextSideNavigationItemActive = "var(--color-text-side-navigation-item-active-w3c4dj, #006ce0)";
 export var colorBorderCalendarGrid = "var(--color-border-calendar-grid-67r4w4, transparent)";
 export var colorBorderCalendarGridSelectedFocusRing = "var(--color-border-calendar-grid-selected-focus-ring-jk1fb0, #f9f9fa)";
 export var colorBorderCellShaded = "var(--color-border-cell-shaded-0ipazf, #dedee3)";
@@ -819,6 +821,7 @@ export var sizeIconNormal = "var(--size-icon-normal-levt08, 16px)";
 export var sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal-qqiajd, 40px)";
 export var sizeVerticalInput = "var(--size-vertical-input-p1d7xx, 32px)";
 export var sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset-z959cw, 15px)";
+export var sizeSideNavigationItemHeight = "var(--size-side-navigation-item-height-lokap3, 28px)";
 export var spaceAlertActionLeft = "var(--space-alert-action-left-4s8zo5, 12px)";
 export var spaceAlertHorizontal = "var(--space-alert-horizontal-ul364s, 16px)";
 export var spaceAlertMessageRight = "var(--space-alert-message-right-mrjbnn, 4px)";
@@ -889,6 +892,8 @@ export var spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom-
 export var spaceTableHeaderToolsFullPageBottom = "var(--space-table-header-tools-full-page-bottom-9m47g6, 4px)";
 export var spaceTableHorizontal = "var(--space-table-horizontal-suurzj, 20px)";
 export var spaceTreeViewIndentation = "var(--space-tree-view-indentation-xh9kis, 24px)";
+export var spaceSideNavigationItemGap = "var(--space-side-navigation-item-gap-5vlwdw, 0px)";
+export var spaceSideNavigationItemCollapsedGap = "var(--space-side-navigation-item-collapsed-gap-d9lti2, 8px)";
 export var spaceTileGutter = "var(--space-tile-gutter-bi2bdv, 24px)";
 export var spaceActionCardHorizontalDefault = "var(--space-action-card-horizontal-default-su1e86, 20px)";
 export var spaceActionCardHorizontalEmbedded = "var(--space-action-card-horizontal-embedded-pb8pj4, 12px)";

package/lib/internal/template/internal/generated/theming/index.cjs

@@ -1391,6 +1391,10 @@ module.exports.preset = {
         "light": "{colorPrimary50}",
         "dark": "{colorPrimary1000}"
       },
+      "colorBackgroundSideNavigationItemActive": {
+        "light": "transparent",
+        "dark": "transparent"
+      },
       "colorBackgroundLayoutMain": {
         "light": "{colorWhite}",
         "dark": "{colorNeutral850}"
@@ -1723,6 +1727,10 @@ module.exports.preset = {
         "light": "{colorPrimary600}",
         "dark": "{colorPrimary400}"
       },
+      "colorTextSideNavigationItemActive": {
+        "light": "{colorTextAccent}",
+        "dark": "{colorTextAccent}"
+      },
       "colorBorderCalendarGrid": {
         "light": "transparent",
         "dark": "transparent"
@@ -2900,6 +2908,10 @@ module.exports.preset = {
         "comfortable": "15px",
         "compact": "13px"
       },
+      "sizeSideNavigationItemHeight": {
+        "comfortable": "28px",
+        "compact": "24px"
+      },
       "spaceAlertActionLeft": {
         "comfortable": "{spaceS}",
         "compact": "{spaceS}"
@@ -3180,6 +3192,14 @@ module.exports.preset = {
         "comfortable": "{spaceXl}",
         "compact": "{spaceXl}"
       },
+      "spaceSideNavigationItemGap": {
+        "comfortable": "0px",
+        "compact": "0px"
+      },
+      "spaceSideNavigationItemCollapsedGap": {
+        "comfortable": "{spaceXs}",
+        "compact": "{spaceXs}"
+      },
       "spaceTileGutter": {
         "comfortable": "{spaceXl}",
         "compact": "{spaceM}"
@@ -3734,6 +3754,14 @@ module.exports.preset = {
             "comfortable": "{spaceXl}",
             "compact": "{spaceXl}"
           },
+          "spaceSideNavigationItemGap": {
+            "comfortable": "0px",
+            "compact": "0px"
+          },
+          "spaceSideNavigationItemCollapsedGap": {
+            "comfortable": "{spaceXs}",
+            "compact": "{spaceXs}"
+          },
           "spaceTileGutter": {
             "comfortable": "{spaceXl}",
             "compact": "{spaceM}"
@@ -4168,6 +4196,10 @@ module.exports.preset = {
             "light": "{colorPrimary1000}",
             "dark": "{colorPrimary1000}"
           },
+          "colorBackgroundSideNavigationItemActive": {
+            "light": "transparent",
+            "dark": "transparent"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -4500,6 +4532,10 @@ module.exports.preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
+          "colorTextSideNavigationItemActive": {
+            "light": "{colorTextAccent}",
+            "dark": "{colorTextAccent}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -5777,6 +5813,10 @@ module.exports.preset = {
             "light": "{colorPrimary1000}",
             "dark": "{colorPrimary1000}"
           },
+          "colorBackgroundSideNavigationItemActive": {
+            "light": "transparent",
+            "dark": "transparent"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -6109,6 +6149,10 @@ module.exports.preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
+          "colorTextSideNavigationItemActive": {
+            "light": "{colorTextAccent}",
+            "dark": "{colorTextAccent}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -7314,6 +7358,10 @@ module.exports.preset = {
             "light": "{colorPrimary50}",
             "dark": "{colorPrimary1000}"
           },
+          "colorBackgroundSideNavigationItemActive": {
+            "light": "transparent",
+            "dark": "transparent"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -7646,6 +7694,10 @@ module.exports.preset = {
             "light": "{colorPrimary600}",
             "dark": "{colorPrimary400}"
           },
+          "colorTextSideNavigationItemActive": {
+            "light": "{colorTextAccent}",
+            "dark": "{colorTextAccent}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -8716,6 +8768,10 @@ module.exports.preset = {
             "light": "{colorPrimary50}",
             "dark": "{colorPrimary1000}"
           },
+          "colorBackgroundSideNavigationItemActive": {
+            "light": "transparent",
+            "dark": "transparent"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -9048,6 +9104,10 @@ module.exports.preset = {
             "light": "{colorPrimary600}",
             "dark": "{colorPrimary400}"
           },
+          "colorTextSideNavigationItemActive": {
+            "light": "{colorTextAccent}",
+            "dark": "{colorTextAccent}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -10118,6 +10178,10 @@ module.exports.preset = {
             "light": "{colorPrimary50}",
             "dark": "{colorPrimary1000}"
           },
+          "colorBackgroundSideNavigationItemActive": {
+            "light": "transparent",
+            "dark": "transparent"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -10450,6 +10514,10 @@ module.exports.preset = {
             "light": "{colorPrimary600}",
             "dark": "{colorPrimary400}"
           },
+          "colorTextSideNavigationItemActive": {
+            "light": "{colorTextAccent}",
+            "dark": "{colorTextAccent}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -11522,6 +11590,10 @@ module.exports.preset = {
             "light": "{colorPrimary1000}",
             "dark": "{colorPrimary1000}"
           },
+          "colorBackgroundSideNavigationItemActive": {
+            "light": "transparent",
+            "dark": "transparent"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -11854,6 +11926,10 @@ module.exports.preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
+          "colorTextSideNavigationItemActive": {
+            "light": "{colorTextAccent}",
+            "dark": "{colorTextAccent}"
+          },
           "colorBorderCalendarGrid": {
             "light": "transparent",
             "dark": "transparent"
@@ -13042,6 +13118,7 @@ module.exports.preset = {
       "colorBackgroundInputDefault": "color",
       "colorBackgroundInputDisabled": "color",
       "colorBackgroundItemSelected": "color",
+      "colorBackgroundSideNavigationItemActive": "color",
       "colorBackgroundLayoutMain": "color",
       "colorBackgroundDrawer": "color",
       "colorBackgroundDrawerBackdrop": "color",
@@ -13125,6 +13202,7 @@ module.exports.preset = {
       "colorBorderButtonPrimaryHover": "color",
       "colorTextButtonPrimaryDisabled": "color",
       "colorItemSelected": "color",
+      "colorTextSideNavigationItemActive": "color",
       "colorBorderCalendarGrid": "color",
       "colorBorderCalendarGridSelectedFocusRing": "color",
       "colorBorderCellShaded": "color",
@@ -13384,6 +13462,7 @@ module.exports.preset = {
       "sizeTableSelectionHorizontal": "density",
       "sizeVerticalInput": "density",
       "sizeVerticalPanelIconOffset": "density",
+      "sizeSideNavigationItemHeight": "density",
       "spaceAlertActionLeft": "density",
       "spaceAlertHorizontal": "density",
       "spaceAlertMessageRight": "density",
@@ -13454,6 +13533,8 @@ module.exports.preset = {
       "spaceTableHeaderToolsFullPageBottom": "density",
       "spaceTableHorizontal": "density",
       "spaceTreeViewIndentation": "density",
+      "spaceSideNavigationItemGap": "density",
+      "spaceSideNavigationItemCollapsedGap": "density",
       "spaceTileGutter": "density",
       "spaceActionCardHorizontalDefault": "density",
       "spaceActionCardHorizontalEmbedded": "density",
@@ -13854,6 +13935,7 @@ module.exports.preset = {
     "colorBackgroundInputDefault",
     "colorBackgroundInputDisabled",
     "colorBackgroundItemSelected",
+    "colorBackgroundSideNavigationItemActive",
     "colorBackgroundLayoutMain",
     "colorBackgroundLayoutPanel",
     "colorBackgroundLayoutToolbar",
@@ -13914,6 +13996,7 @@ module.exports.preset = {
     "colorBorderButtonPrimaryHover",
     "colorTextButtonPrimaryDisabled",
     "colorItemSelected",
+    "colorTextSideNavigationItemActive",
     "colorBorderCard",
     "colorBorderContainerTop",
     "colorBorderControlDefault",
@@ -14143,6 +14226,7 @@ module.exports.preset = {
     "borderWidthPopover",
     "borderWidthToken",
     "sizeVerticalInput",
+    "sizeSideNavigationItemHeight",
     "spaceAlertVertical",
     "spaceButtonHorizontal",
     "spaceButtonVertical",
@@ -14153,6 +14237,7 @@ module.exports.preset = {
     "spaceCardVerticalDefault",
     "spaceCardVerticalEmbedded",
     "spaceTabsVertical",
+    "spaceSideNavigationItemGap",
     "spaceActionCardHorizontalDefault",
     "spaceActionCardHorizontalEmbedded",
     "spaceActionCardVerticalDefault",
@@ -14367,6 +14452,7 @@ module.exports.preset = {
     "colorBackgroundInputDefault",
     "colorBackgroundInputDisabled",
     "colorBackgroundItemSelected",
+    "colorBackgroundSideNavigationItemActive",
     "colorBackgroundLayoutMain",
     "colorBackgroundLayoutPanel",
     "colorBackgroundLayoutToolbar",
@@ -14426,6 +14512,7 @@ module.exports.preset = {
     "colorBorderButtonPrimaryHover",
     "colorTextButtonPrimaryDisabled",
     "colorItemSelected",
+    "colorTextSideNavigationItemActive",
     "colorBorderCard",
     "colorBorderContainerTop",
     "colorBorderControlDefault",
@@ -14653,6 +14740,7 @@ module.exports.preset = {
     "motionKeyframesStatusIconError",
     "motionKeyframesScalePopup",
     "sizeVerticalInput",
+    "sizeSideNavigationItemHeight",
     "spaceAlertVertical",
     "spaceButtonHorizontal",
     "spaceButtonVertical",
@@ -14666,6 +14754,7 @@ module.exports.preset = {
     "spaceFieldHorizontal",
     "spaceTabsVertical",
     "spaceTreeViewIndentation",
+    "spaceSideNavigationItemGap",
     "spaceActionCardHorizontalDefault",
     "spaceActionCardHorizontalEmbedded",
     "spaceActionCardVerticalDefault",
@@ -15032,6 +15121,7 @@ module.exports.preset = {
     "colorBackgroundInputDefault": "color-background-input-default",
     "colorBackgroundInputDisabled": "color-background-input-disabled",
     "colorBackgroundItemSelected": "color-background-item-selected",
+    "colorBackgroundSideNavigationItemActive": "color-background-side-navigation-item-active",
     "colorBackgroundLayoutMain": "color-background-layout-main",
     "colorBackgroundDrawer": "color-background-drawer",
     "colorBackgroundDrawerBackdrop": "color-background-drawer-backdrop",
@@ -15115,6 +15205,7 @@ module.exports.preset = {
     "colorBorderButtonPrimaryHover": "color-border-button-primary-hover",
     "colorTextButtonPrimaryDisabled": "color-text-button-primary-disabled",
     "colorItemSelected": "color-item-selected",
+    "colorTextSideNavigationItemActive": "color-text-side-navigation-item-active",
     "colorBorderCalendarGrid": "color-border-calendar-grid",
     "colorBorderCalendarGridSelectedFocusRing": "color-border-calendar-grid-selected-focus-ring",
     "colorBorderCellShaded": "color-border-cell-shaded",
@@ -15515,6 +15606,7 @@ module.exports.preset = {
     "sizeTableSelectionHorizontal": "size-table-selection-horizontal",
     "sizeVerticalInput": "size-vertical-input",
     "sizeVerticalPanelIconOffset": "size-vertical-panel-icon-offset",
+    "sizeSideNavigationItemHeight": "size-side-navigation-item-height",
     "spaceAlertActionLeft": "space-alert-action-left",
     "spaceAlertHorizontal": "space-alert-horizontal",
     "spaceAlertMessageRight": "space-alert-message-right",
@@ -15585,6 +15677,8 @@ module.exports.preset = {
     "spaceTableHeaderToolsFullPageBottom": "space-table-header-tools-full-page-bottom",
     "spaceTableHorizontal": "space-table-horizontal",
     "spaceTreeViewIndentation": "space-tree-view-indentation",
+    "spaceSideNavigationItemGap": "space-side-navigation-item-gap",
+    "spaceSideNavigationItemCollapsedGap": "space-side-navigation-item-collapsed-gap",
     "spaceTileGutter": "space-tile-gutter",
     "spaceActionCardHorizontalDefault": "space-action-card-horizontal-default",
     "spaceActionCardHorizontalEmbedded": "space-action-card-horizontal-embedded",
@@ -15992,6 +16086,7 @@ module.exports.preset = {
     "colorBackgroundInputDefault": "--color-background-input-default-ifz5bb",
     "colorBackgroundInputDisabled": "--color-background-input-disabled-dihaja",
     "colorBackgroundItemSelected": "--color-background-item-selected-9gppru",
+    "colorBackgroundSideNavigationItemActive": "--color-background-side-navigation-item-active-adfprg",
     "colorBackgroundLayoutMain": "--color-background-layout-main-5ilwcb",
     "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",
     "colorBackgroundDrawerBackdrop": "--color-background-drawer-backdrop-ducxi3",
@@ -16075,6 +16170,7 @@ module.exports.preset = {
     "colorBorderButtonPrimaryHover": "--color-border-button-primary-hover-rktx0f",
     "colorTextButtonPrimaryDisabled": "--color-text-button-primary-disabled-q79gms",
     "colorItemSelected": "--color-item-selected-72rnwy",
+    "colorTextSideNavigationItemActive": "--color-text-side-navigation-item-active-w3c4dj",
     "colorBorderCalendarGrid": "--color-border-calendar-grid-67r4w4",
     "colorBorderCalendarGridSelectedFocusRing": "--color-border-calendar-grid-selected-focus-ring-jk1fb0",
     "colorBorderCellShaded": "--color-border-cell-shaded-0ipazf",
@@ -16475,6 +16571,7 @@ module.exports.preset = {
     "sizeTableSelectionHorizontal": "--size-table-selection-horizontal-qqiajd",
     "sizeVerticalInput": "--size-vertical-input-p1d7xx",
     "sizeVerticalPanelIconOffset": "--size-vertical-panel-icon-offset-z959cw",
+    "sizeSideNavigationItemHeight": "--size-side-navigation-item-height-lokap3",
     "spaceAlertActionLeft": "--space-alert-action-left-4s8zo5",
     "spaceAlertHorizontal": "--space-alert-horizontal-ul364s",
     "spaceAlertMessageRight": "--space-alert-message-right-mrjbnn",
@@ -16545,6 +16642,8 @@ module.exports.preset = {
     "spaceTableHeaderToolsFullPageBottom": "--space-table-header-tools-full-page-bottom-9m47g6",
     "spaceTableHorizontal": "--space-table-horizontal-suurzj",
     "spaceTreeViewIndentation": "--space-tree-view-indentation-xh9kis",
+    "spaceSideNavigationItemGap": "--space-side-navigation-item-gap-5vlwdw",
+    "spaceSideNavigationItemCollapsedGap": "--space-side-navigation-item-collapsed-gap-d9lti2",
     "spaceTileGutter": "--space-tile-gutter-bi2bdv",
     "spaceActionCardHorizontalDefault": "--space-action-card-horizontal-default-su1e86",
     "spaceActionCardHorizontalEmbedded": "--space-action-card-horizontal-embedded-pb8pj4",