npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1315 → 3.0.1317 - Mend

@cloudscape-design/components-themeable 3.0.1315 → 3.0.1317

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

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

@@ -299,9 +299,11 @@
     --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);
+    --color-background-backdrop-9eeuoh:var(--color-grey-opaque-90-fueme4);
+    --color-background-drawer-backdrop-if96qn:var(--color-background-backdrop-9eeuoh);
     --color-background-layout-mobile-panel-20j5lz:var(--color-background-layout-panel-content-9tbx75);
     --color-background-layout-panel-3rw39t:var(--color-background-container-content-aemn43);
     --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
@@ -313,7 +315,7 @@
     --color-background-layout-toggle-selected-active-wfv72o:var(--color-primary-600-be1v6a);
     --color-background-layout-toggle-selected-default-o4my1h:var(--color-primary-600-be1v6a);
     --color-background-layout-toggle-selected-hover-yuaxel:var(--color-primary-700-xkgxe3);
-    --color-background-modal-overlay-i6vork:var(--color-grey-opaque-90-fueme4);
+    --color-background-modal-overlay-i6vork:var(--color-background-backdrop-9eeuoh);
     --color-background-notification-blue-jgc5fr:var(--color-info-600-ieuf7e);
     --color-background-notification-green-7yuv70:var(--color-success-600-ma9qew);
     --color-background-notification-grey-yzex9c:var(--color-neutral-650-92yp10);
@@ -382,6 +384,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 +776,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 +847,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);
@@ -1051,12 +1057,11 @@
       --color-background-input-disabled-4vlau3:var(--color-neutral-700-heh17v);
       --color-background-item-selected-v20q4r:var(--color-primary-1000-gaqvjz);
       --color-background-layout-main-05m5y6:var(--color-neutral-950-qehfms);
-      --color-background-drawer-backdrop-if96qn:var(--color-grey-opaque-80-1l8ptn);
+      --color-background-backdrop-9eeuoh:var(--color-grey-opaque-80-1l8ptn);
       --color-background-layout-panel-hover-5jdzo1:var(--color-neutral-700-heh17v);
       --color-background-layout-toggle-selected-active-wfv72o:var(--color-primary-400-i8y8uk);
       --color-background-layout-toggle-selected-default-o4my1h:var(--color-primary-300-jwvz31);
       --color-background-layout-toggle-selected-hover-yuaxel:var(--color-primary-300-jwvz31);
-      --color-background-modal-overlay-i6vork:var(--color-grey-opaque-80-1l8ptn);
       --color-background-notification-grey-yzex9c:var(--color-neutral-600-boivn8);
       --color-background-popover-8fgrfw:var(--color-neutral-800-u27ub9);
       --color-background-progress-bar-value-default-1bekh3:var(--color-primary-400-i8y8uk);
@@ -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);
@@ -1345,12 +1351,11 @@
     --color-background-input-disabled-4vlau3:var(--color-neutral-700-heh17v);
     --color-background-item-selected-v20q4r:var(--color-primary-1000-gaqvjz);
     --color-background-layout-main-05m5y6:var(--color-neutral-950-qehfms);
-    --color-background-drawer-backdrop-if96qn:var(--color-grey-opaque-80-1l8ptn);
+    --color-background-backdrop-9eeuoh:var(--color-grey-opaque-80-1l8ptn);
     --color-background-layout-panel-hover-5jdzo1:var(--color-neutral-700-heh17v);
     --color-background-layout-toggle-selected-active-wfv72o:var(--color-primary-400-i8y8uk);
     --color-background-layout-toggle-selected-default-o4my1h:var(--color-primary-300-jwvz31);
     --color-background-layout-toggle-selected-hover-yuaxel:var(--color-primary-300-jwvz31);
-    --color-background-modal-overlay-i6vork:var(--color-grey-opaque-80-1l8ptn);
     --color-background-notification-grey-yzex9c:var(--color-neutral-600-boivn8);
     --color-background-popover-8fgrfw:var(--color-neutral-800-u27ub9);
     --color-background-progress-bar-value-default-1bekh3:var(--color-primary-400-i8y8uk);
@@ -1492,10 +1497,12 @@
     --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
     --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
     --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
+    --color-background-drawer-backdrop-if96qn:var(--color-background-backdrop-9eeuoh);
     --color-background-layout-mobile-panel-20j5lz:var(--color-background-layout-panel-content-9tbx75);
     --color-background-layout-panel-3rw39t:var(--color-background-container-content-aemn43);
     --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
     --color-background-layout-toolbar-oyny45:var(--color-background-layout-panel-content-9tbx75);
+    --color-background-modal-overlay-i6vork:var(--color-background-backdrop-9eeuoh);
     --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
     --color-background-segment-disabled-etp65k:var(--color-background-button-normal-disabled-rd09ns);
     --color-background-segment-hover-bakufl:var(--color-background-button-normal-hover-r7x40d);
@@ -1520,6 +1527,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);
@@ -1810,12 +1818,11 @@
     --color-background-container-header-b8qo49:var(--color-white-jf0w15);
     --color-background-home-header-4rk3o3:var(--color-neutral-950-qehfms);
     --color-background-layout-main-05m5y6:var(--color-white-jf0w15);
-    --color-background-drawer-backdrop-if96qn:var(--color-grey-opaque-70-ueherc);
+    --color-background-backdrop-9eeuoh:var(--color-grey-opaque-70-ueherc);
     --color-background-layout-mobile-panel-20j5lz:var(--color-neutral-950-qehfms);
     --color-background-layout-toggle-active-ovmpb9:var(--color-neutral-650-92yp10);
     --color-background-layout-toggle-default-q2nv0b:var(--color-neutral-650-92yp10);
     --color-background-layout-toggle-hover-t77zty:var(--color-neutral-600-boivn8);
-    --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
     --color-background-chat-bubble-incoming-m85frs:var(--color-neutral-150-8fqber);
     --color-border-button-normal-active-soiq8b:var(--color-primary-900-fp8i41);
     --color-border-button-normal-default-5aez2l:var(--color-primary-600-be1v6a);
@@ -2076,10 +2083,12 @@
     --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
     --color-background-input-disabled-4vlau3:var(--color-neutral-250-hdfqdx);
     --color-background-item-selected-v20q4r:var(--color-primary-50-k00bx1);
+    --color-background-drawer-backdrop-if96qn:var(--color-background-backdrop-9eeuoh);
     --color-background-layout-panel-hover-5jdzo1:var(--color-neutral-250-hdfqdx);
     --color-background-layout-toggle-selected-active-wfv72o:var(--color-primary-600-be1v6a);
     --color-background-layout-toggle-selected-default-o4my1h:var(--color-primary-600-be1v6a);
     --color-background-layout-toggle-selected-hover-yuaxel:var(--color-primary-700-xkgxe3);
+    --color-background-modal-overlay-i6vork:var(--color-background-backdrop-9eeuoh);
     --color-background-notification-blue-jgc5fr:var(--color-info-600-ieuf7e);
     --color-background-notification-green-7yuv70:var(--color-success-600-ma9qew);
     --color-background-notification-grey-yzex9c:var(--color-neutral-650-92yp10);
@@ -2124,6 +2133,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);
@@ -2494,10 +2504,9 @@
     --color-background-dropdown-item-hover-353r6f:var(--color-neutral-900-o3oyxe);
     --color-background-input-disabled-4vlau3:var(--color-neutral-800-u27ub9);
     --color-background-layout-main-05m5y6:var(--color-neutral-850-m3u7h5);
-    --color-background-drawer-backdrop-if96qn:var(--color-grey-opaque-70-ueherc);
+    --color-background-backdrop-9eeuoh:var(--color-grey-opaque-70-ueherc);
     --color-background-layout-mobile-panel-20j5lz:var(--color-neutral-950-qehfms);
     --color-background-layout-toggle-selected-default-o4my1h:var(--color-primary-400-i8y8uk);
-    --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
     --color-background-tiles-disabled-t4fvzv:var(--color-neutral-800-u27ub9);
     --color-background-toggle-checked-disabled-i9a3za:var(--color-primary-900-fp8i41);
     --color-border-button-normal-active-soiq8b:var(--color-primary-300-jwvz31);
@@ -2575,9 +2584,11 @@
     --color-background-card-39vmsz:var(--color-background-container-content-aemn43);
     --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
     --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
+    --color-background-drawer-backdrop-if96qn:var(--color-background-backdrop-9eeuoh);
     --color-background-layout-panel-3rw39t:var(--color-background-container-content-aemn43);
     --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
     --color-background-layout-toolbar-oyny45:var(--color-background-layout-panel-content-9tbx75);
+    --color-background-modal-overlay-i6vork:var(--color-background-backdrop-9eeuoh);
     --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
     --color-background-segment-disabled-etp65k:var(--color-background-button-normal-disabled-rd09ns);
     --color-background-segment-wrapper-8sntqj:var(--color-background-container-content-aemn43);
@@ -2589,6 +2600,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);
@@ -2779,11 +2791,12 @@
     --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
     --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
     --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
-    --color-background-drawer-backdrop-if96qn:var(--color-grey-opaque-70-ueherc);
+    --color-background-backdrop-9eeuoh:var(--color-grey-opaque-70-ueherc);
+    --color-background-drawer-backdrop-if96qn:var(--color-background-backdrop-9eeuoh);
     --color-background-layout-panel-3rw39t:var(--color-background-container-content-aemn43);
     --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
     --color-background-layout-toolbar-oyny45:var(--color-background-layout-panel-content-9tbx75);
-    --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
+    --color-background-modal-overlay-i6vork:var(--color-background-backdrop-9eeuoh);
     --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
     --color-background-segment-disabled-etp65k:var(--color-background-button-normal-disabled-rd09ns);
     --color-background-segment-hover-bakufl:var(--color-background-button-normal-hover-r7x40d);
@@ -2808,6 +2821,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);
@@ -3066,11 +3080,12 @@
     --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
     --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
     --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
-    --color-background-drawer-backdrop-if96qn:var(--color-grey-opaque-70-ueherc);
+    --color-background-backdrop-9eeuoh:var(--color-grey-opaque-70-ueherc);
+    --color-background-drawer-backdrop-if96qn:var(--color-background-backdrop-9eeuoh);
     --color-background-layout-panel-3rw39t:var(--color-background-container-content-aemn43);
     --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
     --color-background-layout-toolbar-oyny45:var(--color-background-layout-panel-content-9tbx75);
-    --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
+    --color-background-modal-overlay-i6vork:var(--color-background-backdrop-9eeuoh);
     --color-background-segment-hover-bakufl:var(--color-background-button-normal-hover-r7x40d);
     --color-background-slider-range-default-ckhqiz:var(--color-background-slider-handle-default-pb538l);
     --color-background-slider-range-active-n1ml5a:var(--color-background-slider-handle-active-9ejayt);
@@ -3091,6 +3106,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);
@@ -3592,11 +3608,12 @@
     --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
     --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
     --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
-    --color-background-drawer-backdrop-if96qn:var(--color-grey-opaque-70-ueherc);
+    --color-background-backdrop-9eeuoh:var(--color-grey-opaque-70-ueherc);
+    --color-background-drawer-backdrop-if96qn:var(--color-background-backdrop-9eeuoh);
     --color-background-layout-panel-3rw39t:var(--color-background-container-content-aemn43);
     --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
     --color-background-layout-toolbar-oyny45:var(--color-background-layout-panel-content-9tbx75);
-    --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
+    --color-background-modal-overlay-i6vork:var(--color-background-backdrop-9eeuoh);
     --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
     --color-background-segment-disabled-etp65k:var(--color-background-button-normal-disabled-rd09ns);
     --color-background-segment-hover-bakufl:var(--color-background-button-normal-hover-r7x40d);
@@ -3621,6 +3638,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 +3865,5 @@
   }
 }
 :root {
-  --awsui-version-info-528ed620: true;
+  --awsui-version-info-b33ca59d: true;
 }

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -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 (b33ca59d)";
+export var GIT_SHA = "b33ca59d";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

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

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

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

@@ -336,8 +336,10 @@ 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 colorBackgroundBackdrop: string;
 export const colorBackgroundDrawerBackdrop: string;
 export const colorBackgroundLayoutMobilePanel: string;
 export const colorBackgroundLayoutPanel: string;
@@ -419,6 +421,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 +822,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 +893,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 CHANGED Viewed

@@ -336,8 +336,10 @@ 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 colorBackgroundBackdrop = "var(--color-background-backdrop-33f45f, rgba(35, 43, 55, 0.7))";
 export var colorBackgroundDrawerBackdrop = "var(--color-background-drawer-backdrop-ducxi3, rgba(35, 43, 55, 0.7))";
 export var colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel-ed0ava, #0f141a)";
 export var colorBackgroundLayoutPanel = "var(--color-background-layout-panel-jv6exs, #ffffff)";
@@ -419,6 +421,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 +822,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 +893,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)";