@cloudscape-design/components-themeable 3.0.1341 → 3.0.1342

package/lib/internal/template/internal/components/cartesian-chart/styles.css.js

@@ -1,33 +1,33 @@
 
     import './styles.scoped.css';
     export default {
-  "axis": "awsui_axis_f0fot_auv8k_145",
-  "vertical-marker": "awsui_vertical-marker_f0fot_auv8k_146",
-  "axis--emphasized": "awsui_axis--emphasized_f0fot_auv8k_151",
-  "axis-label": "awsui_axis-label_f0fot_auv8k_155",
-  "axis-label--x": "awsui_axis-label--x_f0fot_auv8k_160",
-  "axis-label--y": "awsui_axis-label--y_f0fot_auv8k_161",
-  "grid": "awsui_grid_f0fot_auv8k_165",
-  "ticks__line": "awsui_ticks__line_f0fot_auv8k_170",
-  "ticks__text": "awsui_ticks__text_f0fot_auv8k_175",
-  "ticks--y": "awsui_ticks--y_f0fot_auv8k_180",
-  "ticks--x": "awsui_ticks--x_f0fot_auv8k_181",
-  "ticks--bottom": "awsui_ticks--bottom_f0fot_auv8k_185",
-  "labels-inline-start": "awsui_labels-inline-start_f0fot_auv8k_190",
-  "ticks": "awsui_ticks_f0fot_auv8k_170",
-  "labels-inline-start__label": "awsui_labels-inline-start__label_f0fot_auv8k_205",
-  "labels-inline-start--hidden": "awsui_labels-inline-start--hidden_f0fot_auv8k_209",
-  "labels-block-end": "awsui_labels-block-end_f0fot_auv8k_217",
-  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_auv8k_228",
-  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_auv8k_234",
-  "focus-outline": "awsui_focus-outline_f0fot_auv8k_239",
-  "chart-container": "awsui_chart-container_f0fot_auv8k_247",
-  "fit-height": "awsui_fit-height_f0fot_auv8k_252",
-  "chart-container-outer": "awsui_chart-container-outer_f0fot_auv8k_257",
-  "has-filters": "awsui_has-filters_f0fot_auv8k_263",
-  "chart-container-inner": "awsui_chart-container-inner_f0fot_auv8k_267",
-  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_auv8k_274",
-  "chart-container-plot": "awsui_chart-container-plot_f0fot_auv8k_274",
-  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_auv8k_286"
+  "axis": "awsui_axis_f0fot_1lqm2_145",
+  "vertical-marker": "awsui_vertical-marker_f0fot_1lqm2_146",
+  "axis--emphasized": "awsui_axis--emphasized_f0fot_1lqm2_151",
+  "axis-label": "awsui_axis-label_f0fot_1lqm2_155",
+  "axis-label--x": "awsui_axis-label--x_f0fot_1lqm2_160",
+  "axis-label--y": "awsui_axis-label--y_f0fot_1lqm2_161",
+  "grid": "awsui_grid_f0fot_1lqm2_165",
+  "ticks__line": "awsui_ticks__line_f0fot_1lqm2_170",
+  "ticks__text": "awsui_ticks__text_f0fot_1lqm2_175",
+  "ticks--y": "awsui_ticks--y_f0fot_1lqm2_180",
+  "ticks--x": "awsui_ticks--x_f0fot_1lqm2_181",
+  "ticks--bottom": "awsui_ticks--bottom_f0fot_1lqm2_185",
+  "labels-inline-start": "awsui_labels-inline-start_f0fot_1lqm2_190",
+  "ticks": "awsui_ticks_f0fot_1lqm2_170",
+  "labels-inline-start__label": "awsui_labels-inline-start__label_f0fot_1lqm2_205",
+  "labels-inline-start--hidden": "awsui_labels-inline-start--hidden_f0fot_1lqm2_209",
+  "labels-block-end": "awsui_labels-block-end_f0fot_1lqm2_217",
+  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_1lqm2_228",
+  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_1lqm2_234",
+  "focus-outline": "awsui_focus-outline_f0fot_1lqm2_239",
+  "chart-container": "awsui_chart-container_f0fot_1lqm2_247",
+  "fit-height": "awsui_fit-height_f0fot_1lqm2_252",
+  "chart-container-outer": "awsui_chart-container-outer_f0fot_1lqm2_257",
+  "has-filters": "awsui_has-filters_f0fot_1lqm2_263",
+  "chart-container-inner": "awsui_chart-container-inner_f0fot_1lqm2_267",
+  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_1lqm2_274",
+  "chart-container-plot": "awsui_chart-container-plot_f0fot_1lqm2_274",
+  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_1lqm2_286"
 };
   

package/lib/internal/template/internal/components/cartesian-chart/styles.scoped.css

@@ -142,101 +142,101 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_axis_f0fot_auv8k_145:not(#\9),
-.awsui_vertical-marker_f0fot_auv8k_146:not(#\9) {
-  stroke: var(--color-charts-line-axis-itbyj0, #d5dbdb);
+.awsui_axis_f0fot_1lqm2_145:not(#\9),
+.awsui_vertical-marker_f0fot_1lqm2_146:not(#\9) {
+  stroke: var(--color-charts-line-axis-y1rkac, #d5dbdb);
   stroke-width: 1px;
 }
 
-.awsui_axis--emphasized_f0fot_auv8k_151:not(#\9) {
+.awsui_axis--emphasized_f0fot_1lqm2_151:not(#\9) {
   stroke-width: 2px;
 }
 
-.awsui_axis-label_f0fot_auv8k_155:not(#\9) {
+.awsui_axis-label_f0fot_1lqm2_155:not(#\9) {
   font-weight: var(--font-weight-bold-xpar9m, 700);
   fill: var(--color-text-body-default-5qid0u, #16191f);
 }
 
-.awsui_axis-label--x_f0fot_auv8k_160:not(#\9),
-.awsui_axis-label--y_f0fot_auv8k_161:not(#\9) {
+.awsui_axis-label--x_f0fot_1lqm2_160:not(#\9),
+.awsui_axis-label--y_f0fot_1lqm2_161:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_grid_f0fot_auv8k_165:not(#\9) {
-  stroke: var(--color-charts-line-grid-6wlgqa, #d5dbdb);
+.awsui_grid_f0fot_1lqm2_165:not(#\9) {
+  stroke: var(--color-charts-line-grid-hezpxm, #d5dbdb);
   stroke-width: 1px;
 }
 
-.awsui_ticks__line_f0fot_auv8k_170:not(#\9) {
-  stroke: var(--color-charts-line-tick-36hawu, #d5dbdb);
+.awsui_ticks__line_f0fot_1lqm2_170:not(#\9) {
+  stroke: var(--color-charts-line-tick-kkhxmn, #d5dbdb);
   stroke-width: 1px;
 }
 
-.awsui_ticks__text_f0fot_auv8k_175:not(#\9) {
+.awsui_ticks__text_f0fot_1lqm2_175:not(#\9) {
   font-size: var(--font-chart-detail-size-gadmd0, 14px);
   fill: var(--color-text-body-secondary-gaft81, #545b64);
 }
 
-.awsui_ticks--y_f0fot_auv8k_180:not(#\9),
-.awsui_ticks--x_f0fot_auv8k_181:not(#\9) {
+.awsui_ticks--y_f0fot_1lqm2_180:not(#\9),
+.awsui_ticks--x_f0fot_1lqm2_181:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_ticks--bottom_f0fot_auv8k_185 > .awsui_ticks__text_f0fot_auv8k_175:not(#\9) {
+.awsui_ticks--bottom_f0fot_1lqm2_185 > .awsui_ticks__text_f0fot_1lqm2_175:not(#\9) {
   text-anchor: middle;
   dominant-baseline: hanging;
 }
 
-.awsui_labels-inline-start_f0fot_auv8k_190 > .awsui_ticks_f0fot_auv8k_170 > .awsui_ticks__text_f0fot_auv8k_175:not(#\9) {
+.awsui_labels-inline-start_f0fot_1lqm2_190 > .awsui_ticks_f0fot_1lqm2_170 > .awsui_ticks__text_f0fot_1lqm2_175:not(#\9) {
   text-anchor: end;
   dominant-baseline: central;
 }
 
-.awsui_labels-inline-start_f0fot_auv8k_190:not(#\9) {
+.awsui_labels-inline-start_f0fot_1lqm2_190:not(#\9) {
   position: relative;
   margin-inline-end: 12px;
 }
-.awsui_labels-inline-start_f0fot_auv8k_190 > .awsui_axis-label_f0fot_auv8k_155:not(#\9) {
+.awsui_labels-inline-start_f0fot_1lqm2_190 > .awsui_axis-label_f0fot_1lqm2_155:not(#\9) {
   position: absolute;
   visibility: visible;
   white-space: nowrap;
 }
 
-.awsui_labels-inline-start__label_f0fot_auv8k_205:not(#\9) {
+.awsui_labels-inline-start__label_f0fot_1lqm2_205:not(#\9) {
   position: absolute;
 }
 
-.awsui_labels-inline-start--hidden_f0fot_auv8k_209:not(#\9) {
+.awsui_labels-inline-start--hidden_f0fot_1lqm2_209:not(#\9) {
   visibility: hidden;
 }
-.awsui_labels-inline-start--hidden_f0fot_auv8k_209 > .awsui_labels-inline-start__label_f0fot_auv8k_205:not(#\9) {
+.awsui_labels-inline-start--hidden_f0fot_1lqm2_209 > .awsui_labels-inline-start__label_f0fot_1lqm2_205:not(#\9) {
   position: relative;
   white-space: nowrap;
 }
 
-.awsui_labels-block-end_f0fot_auv8k_217:not(#\9) {
+.awsui_labels-block-end_f0fot_1lqm2_217:not(#\9) {
   position: relative;
   display: block;
   inline-size: 100%;
   overflow: visible;
 }
 
-.awsui_vertical-marker_f0fot_auv8k_146:not(#\9) {
+.awsui_vertical-marker_f0fot_1lqm2_146:not(#\9) {
   pointer-events: none;
 }
 
-.awsui_vertical-marker-circle_f0fot_auv8k_228:not(#\9) {
+.awsui_vertical-marker-circle_f0fot_1lqm2_228:not(#\9) {
   fill: var(--color-background-container-content-aemn43, #ffffff);
   pointer-events: none;
   stroke-width: var(--border-line-chart-width-vyj7eu, 2px);
 }
 
-.awsui_vertical-marker-circle-active_f0fot_auv8k_234:not(#\9) {
+.awsui_vertical-marker-circle-active_f0fot_1lqm2_234:not(#\9) {
   cursor: pointer;
   stroke-width: var(--border-line-chart-width-vyj7eu, 2px);
 }
 
-.awsui_focus-outline_f0fot_auv8k_239:not(#\9) {
+.awsui_focus-outline_f0fot_1lqm2_239:not(#\9) {
   outline: none;
   pointer-events: none;
   fill: none;
@@ -244,45 +244,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   stroke-width: 2px;
 }
 
-.awsui_chart-container_f0fot_auv8k_247:not(#\9) {
+.awsui_chart-container_f0fot_1lqm2_247:not(#\9) {
   display: flex;
   inline-size: 100%;
   flex-direction: column;
 }
-.awsui_chart-container_f0fot_auv8k_247.awsui_fit-height_f0fot_auv8k_252:not(#\9) {
+.awsui_chart-container_f0fot_1lqm2_247.awsui_fit-height_f0fot_1lqm2_252:not(#\9) {
   block-size: 100%;
   min-block-size: inherit;
 }
 
-.awsui_chart-container-outer_f0fot_auv8k_257:not(#\9) {
+.awsui_chart-container-outer_f0fot_1lqm2_257:not(#\9) {
   display: flex;
 }
-.awsui_chart-container-outer_f0fot_auv8k_257.awsui_fit-height_f0fot_auv8k_252:not(#\9) {
+.awsui_chart-container-outer_f0fot_1lqm2_257.awsui_fit-height_f0fot_1lqm2_252:not(#\9) {
   flex: 1;
 }
-.awsui_chart-container-outer_f0fot_auv8k_257.awsui_fit-height_f0fot_auv8k_252:not(#\9):not(.awsui_axis-label_f0fot_auv8k_155 + .awsui_chart-container-outer_f0fot_auv8k_257.awsui_fit-height_f0fot_auv8k_252, .awsui_chart-container-outer_f0fot_auv8k_257.awsui_fit-height_f0fot_auv8k_252.awsui_has-filters_f0fot_auv8k_263) {
+.awsui_chart-container-outer_f0fot_1lqm2_257.awsui_fit-height_f0fot_1lqm2_252:not(#\9):not(.awsui_axis-label_f0fot_1lqm2_155 + .awsui_chart-container-outer_f0fot_1lqm2_257.awsui_fit-height_f0fot_1lqm2_252, .awsui_chart-container-outer_f0fot_1lqm2_257.awsui_fit-height_f0fot_1lqm2_252.awsui_has-filters_f0fot_1lqm2_263) {
   margin-block-start: calc(0.5 * var(--font-chart-detail-size-gadmd0, 14px));
 }
 
-.awsui_chart-container-inner_f0fot_auv8k_267:not(#\9) {
+.awsui_chart-container-inner_f0fot_1lqm2_267:not(#\9) {
   position: relative;
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
 
-.awsui_chart-container-plot-wrapper_f0fot_auv8k_274.awsui_fit-height_f0fot_auv8k_252:not(#\9) {
+.awsui_chart-container-plot-wrapper_f0fot_1lqm2_274.awsui_fit-height_f0fot_1lqm2_252:not(#\9) {
   display: block;
   position: relative;
   flex: 1;
 }
 
-.awsui_chart-container-plot_f0fot_auv8k_274.awsui_fit-height_f0fot_auv8k_252:not(#\9) {
+.awsui_chart-container-plot_f0fot_1lqm2_274.awsui_fit-height_f0fot_1lqm2_252:not(#\9) {
   display: block;
   position: absolute;
   inset: 0;
 }
 
-.awsui_chart-container-bottom-labels_f0fot_auv8k_286.awsui_fit-height_f0fot_auv8k_252:not(#\9) {
+.awsui_chart-container-bottom-labels_f0fot_1lqm2_286.awsui_fit-height_f0fot_1lqm2_252:not(#\9) {
   display: block;
 }

package/lib/internal/template/internal/components/cartesian-chart/styles.selectors.js

@@ -2,33 +2,33 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "axis": "awsui_axis_f0fot_auv8k_145",
-  "vertical-marker": "awsui_vertical-marker_f0fot_auv8k_146",
-  "axis--emphasized": "awsui_axis--emphasized_f0fot_auv8k_151",
-  "axis-label": "awsui_axis-label_f0fot_auv8k_155",
-  "axis-label--x": "awsui_axis-label--x_f0fot_auv8k_160",
-  "axis-label--y": "awsui_axis-label--y_f0fot_auv8k_161",
-  "grid": "awsui_grid_f0fot_auv8k_165",
-  "ticks__line": "awsui_ticks__line_f0fot_auv8k_170",
-  "ticks__text": "awsui_ticks__text_f0fot_auv8k_175",
-  "ticks--y": "awsui_ticks--y_f0fot_auv8k_180",
-  "ticks--x": "awsui_ticks--x_f0fot_auv8k_181",
-  "ticks--bottom": "awsui_ticks--bottom_f0fot_auv8k_185",
-  "labels-inline-start": "awsui_labels-inline-start_f0fot_auv8k_190",
-  "ticks": "awsui_ticks_f0fot_auv8k_170",
-  "labels-inline-start__label": "awsui_labels-inline-start__label_f0fot_auv8k_205",
-  "labels-inline-start--hidden": "awsui_labels-inline-start--hidden_f0fot_auv8k_209",
-  "labels-block-end": "awsui_labels-block-end_f0fot_auv8k_217",
-  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_auv8k_228",
-  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_auv8k_234",
-  "focus-outline": "awsui_focus-outline_f0fot_auv8k_239",
-  "chart-container": "awsui_chart-container_f0fot_auv8k_247",
-  "fit-height": "awsui_fit-height_f0fot_auv8k_252",
-  "chart-container-outer": "awsui_chart-container-outer_f0fot_auv8k_257",
-  "has-filters": "awsui_has-filters_f0fot_auv8k_263",
-  "chart-container-inner": "awsui_chart-container-inner_f0fot_auv8k_267",
-  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_auv8k_274",
-  "chart-container-plot": "awsui_chart-container-plot_f0fot_auv8k_274",
-  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_auv8k_286"
+  "axis": "awsui_axis_f0fot_1lqm2_145",
+  "vertical-marker": "awsui_vertical-marker_f0fot_1lqm2_146",
+  "axis--emphasized": "awsui_axis--emphasized_f0fot_1lqm2_151",
+  "axis-label": "awsui_axis-label_f0fot_1lqm2_155",
+  "axis-label--x": "awsui_axis-label--x_f0fot_1lqm2_160",
+  "axis-label--y": "awsui_axis-label--y_f0fot_1lqm2_161",
+  "grid": "awsui_grid_f0fot_1lqm2_165",
+  "ticks__line": "awsui_ticks__line_f0fot_1lqm2_170",
+  "ticks__text": "awsui_ticks__text_f0fot_1lqm2_175",
+  "ticks--y": "awsui_ticks--y_f0fot_1lqm2_180",
+  "ticks--x": "awsui_ticks--x_f0fot_1lqm2_181",
+  "ticks--bottom": "awsui_ticks--bottom_f0fot_1lqm2_185",
+  "labels-inline-start": "awsui_labels-inline-start_f0fot_1lqm2_190",
+  "ticks": "awsui_ticks_f0fot_1lqm2_170",
+  "labels-inline-start__label": "awsui_labels-inline-start__label_f0fot_1lqm2_205",
+  "labels-inline-start--hidden": "awsui_labels-inline-start--hidden_f0fot_1lqm2_209",
+  "labels-block-end": "awsui_labels-block-end_f0fot_1lqm2_217",
+  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_1lqm2_228",
+  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_1lqm2_234",
+  "focus-outline": "awsui_focus-outline_f0fot_1lqm2_239",
+  "chart-container": "awsui_chart-container_f0fot_1lqm2_247",
+  "fit-height": "awsui_fit-height_f0fot_1lqm2_252",
+  "chart-container-outer": "awsui_chart-container-outer_f0fot_1lqm2_257",
+  "has-filters": "awsui_has-filters_f0fot_1lqm2_263",
+  "chart-container-inner": "awsui_chart-container-inner_f0fot_1lqm2_267",
+  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_1lqm2_274",
+  "chart-container-plot": "awsui_chart-container-plot_f0fot_1lqm2_274",
+  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_1lqm2_286"
 };
   

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

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (6db99848)";
-export var GIT_SHA = "6db99848";
+export var PACKAGE_VERSION = "3.0.0 (2041ec8f)";
+export var GIT_SHA = "2041ec8f";
 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 (6db99848)",
-  "GIT_SHA": "6db99848",
+  "PACKAGE_VERSION": "3.0.0 (2041ec8f)",
+  "GIT_SHA": "2041ec8f",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false,

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

@@ -437,6 +437,7 @@ export const colorBackgroundInputDisabled: string;
 export const colorBackgroundItemSelected: string;
 export const colorBackgroundSideNavigationItemActive: string;
 export const colorBackgroundSideNavigationItemActiveCollapsed: string;
+export const colorBackgroundSideNavigationItemIconHover: string;
 export const colorBackgroundLayoutMain: string;
 export const colorBackgroundLayoutAiDrawer: string;
 export const colorBackgroundDrawer: string;

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

@@ -437,6 +437,7 @@ export var colorBackgroundInputDisabled = "var(--color-background-input-disabled
 export var colorBackgroundItemSelected = "var(--color-background-item-selected-9gppru, #f0fbff)";
 export var colorBackgroundSideNavigationItemActive = "var(--color-background-side-navigation-item-active-adfprg, transparent)";
 export var colorBackgroundSideNavigationItemActiveCollapsed = "var(--color-background-side-navigation-item-active-collapsed-ceubmy, #006ce0)";
+export var colorBackgroundSideNavigationItemIconHover = "var(--color-background-side-navigation-item-icon-hover-ul9ia1, #f0fbff)";
 export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwcb, #ffffff)";
 export var colorBackgroundLayoutAiDrawer = "var(--color-background-layout-ai-drawer-b4mvv3, #161d26)";
 export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";

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

@@ -1795,6 +1795,10 @@ module.exports.preset = {
         "light": "{colorBackgroundControlChecked}",
         "dark": "{colorBackgroundControlChecked}"
       },
+      "colorBackgroundSideNavigationItemIconHover": {
+        "light": "{colorPrimary50}",
+        "dark": "{colorNeutral700}"
+      },
       "colorBackgroundLayoutMain": {
         "light": "{colorWhite}",
         "dark": "{colorNeutral850}"
@@ -4799,6 +4803,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -6615,6 +6623,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -8359,6 +8371,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -9949,6 +9965,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -11539,6 +11559,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -13131,6 +13155,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -14932,6 +14960,7 @@ module.exports.preset = {
       "colorBackgroundItemSelected": "color",
       "colorBackgroundSideNavigationItemActive": "color",
       "colorBackgroundSideNavigationItemActiveCollapsed": "color",
+      "colorBackgroundSideNavigationItemIconHover": "color",
       "colorBackgroundLayoutMain": "color",
       "colorBackgroundLayoutAiDrawer": "color",
       "colorBackgroundDrawer": "color",
@@ -17215,6 +17244,7 @@ module.exports.preset = {
     "colorBackgroundItemSelected": "color-background-item-selected",
     "colorBackgroundSideNavigationItemActive": "color-background-side-navigation-item-active",
     "colorBackgroundSideNavigationItemActiveCollapsed": "color-background-side-navigation-item-active-collapsed",
+    "colorBackgroundSideNavigationItemIconHover": "color-background-side-navigation-item-icon-hover",
     "colorBackgroundLayoutMain": "color-background-layout-main",
     "colorBackgroundLayoutAiDrawer": "color-background-layout-ai-drawer",
     "colorBackgroundDrawer": "color-background-drawer",
@@ -18337,6 +18367,7 @@ module.exports.preset = {
     "colorBackgroundItemSelected": "--color-background-item-selected-9gppru",
     "colorBackgroundSideNavigationItemActive": "--color-background-side-navigation-item-active-adfprg",
     "colorBackgroundSideNavigationItemActiveCollapsed": "--color-background-side-navigation-item-active-collapsed-ceubmy",
+    "colorBackgroundSideNavigationItemIconHover": "--color-background-side-navigation-item-icon-hover-ul9ia1",
     "colorBackgroundLayoutMain": "--color-background-layout-main-5ilwcb",
     "colorBackgroundLayoutAiDrawer": "--color-background-layout-ai-drawer-b4mvv3",
     "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",

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

@@ -1795,6 +1795,10 @@ export var preset = {
         "light": "{colorBackgroundControlChecked}",
         "dark": "{colorBackgroundControlChecked}"
       },
+      "colorBackgroundSideNavigationItemIconHover": {
+        "light": "{colorPrimary50}",
+        "dark": "{colorNeutral700}"
+      },
       "colorBackgroundLayoutMain": {
         "light": "{colorWhite}",
         "dark": "{colorNeutral850}"
@@ -4799,6 +4803,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -6615,6 +6623,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -8359,6 +8371,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -9949,6 +9965,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -11539,6 +11559,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -13131,6 +13155,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -14932,6 +14960,7 @@ export var preset = {
       "colorBackgroundItemSelected": "color",
       "colorBackgroundSideNavigationItemActive": "color",
       "colorBackgroundSideNavigationItemActiveCollapsed": "color",
+      "colorBackgroundSideNavigationItemIconHover": "color",
       "colorBackgroundLayoutMain": "color",
       "colorBackgroundLayoutAiDrawer": "color",
       "colorBackgroundDrawer": "color",
@@ -17215,6 +17244,7 @@ export var preset = {
     "colorBackgroundItemSelected": "color-background-item-selected",
     "colorBackgroundSideNavigationItemActive": "color-background-side-navigation-item-active",
     "colorBackgroundSideNavigationItemActiveCollapsed": "color-background-side-navigation-item-active-collapsed",
+    "colorBackgroundSideNavigationItemIconHover": "color-background-side-navigation-item-icon-hover",
     "colorBackgroundLayoutMain": "color-background-layout-main",
     "colorBackgroundLayoutAiDrawer": "color-background-layout-ai-drawer",
     "colorBackgroundDrawer": "color-background-drawer",
@@ -18337,6 +18367,7 @@ export var preset = {
     "colorBackgroundItemSelected": "--color-background-item-selected-9gppru",
     "colorBackgroundSideNavigationItemActive": "--color-background-side-navigation-item-active-adfprg",
     "colorBackgroundSideNavigationItemActiveCollapsed": "--color-background-side-navigation-item-active-collapsed-ceubmy",
+    "colorBackgroundSideNavigationItemIconHover": "--color-background-side-navigation-item-icon-hover-ul9ia1",
     "colorBackgroundLayoutMain": "--color-background-layout-main-5ilwcb",
     "colorBackgroundLayoutAiDrawer": "--color-background-layout-ai-drawer-b4mvv3",
     "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",

package/lib/internal/template/multiselect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FAkEhB,CAAC;AAGF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FAsEhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/lib/internal/template/multiselect/index.js

@@ -20,10 +20,14 @@ const Multiselect = React.forwardRef(({ options = [], filteringType = 'none', st
             virtualScroll: restProps.virtualScroll,
             readOnly: restProps.readOnly,
             enableSelectAll: restProps.enableSelectAll,
+            dropdownRole: restProps.dropdownRole,
         },
         metadata: {
             hasInlineLabel: Boolean(restProps.inlineLabelText),
             hasDisabledReasons: options.some(option => Boolean(option.disabledReason)),
+            hasDropdownHeader: Boolean(restProps.renderDropdownHeader),
+            hasDropdownFooter: Boolean(restProps.renderDropdownFooter),
+            hasDropdownAriaDescribedby: Boolean(restProps.dropdownAriaDescribedby),
         },
     });
     const componentAnalyticsMetadata = {

package/lib/internal/template/multiselect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAE7C,OAAO,+BAA+B,MAAM,wEAAwE,CAAC;AAIrH,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,OAAO,GAAG,EAAE,EACZ,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,UAAU,EACvB,eAAe,GAAG,EAAE,EACpB,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,KAAK,EAClB,YAAY,EACZ,GAAG,SAAS,EACK,EACnB,GAAoC,EACpC,EAAE;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,YAAY,EAAE,SAAS,CAAC,YAAY;YACpC,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,aAAa;YACb,UAAU;YACV,QAAQ;YACR,UAAU,EAAE,SAAS,CAAC,UAAU;YAChC,aAAa,EAAE,SAAS,CAAC,aAAa;YACtC,QAAQ,EAAE,SAAS,CAAC,QAAQ;YAC5B,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C;QACD,QAAQ,EAAE;YACR,cAAc,EAAE,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC;YAClD,kBAAkB,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SAC3E;KACF,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAAmD;QACjF,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,IAAI,+BAA+B,CAAC,gBAAgB,CAAC,EAAE;QAC9D,UAAU,EAAE;YACV,QAAQ,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,QAAQ,EAAE;YACnC,oBAAoB,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE;YACjD,qBAAqB,EAAE,eAAe;iBACnC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC;iBAC5C,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;YACnC,eAAe,EAAE,eAAe;iBAC7B,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC;gBAC7C,uFAAuF;gBACvF,2BAA2B;iBAC1B,GAAG,CAAC,MAAM,CAAC,EAAE,WAAC,OAAA,GAAG,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,KAAK,EAAE,CAAA,EAAA,CAAC;SACpD;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,mBAAmB,IAClB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,KAClB,SAAS,KACT,kBAAkB,EACtB,GAAG,EAAE,GAAG,KACJ,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,GAC5E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataMultiselectComponent } from './analytics-metadata/interfaces';\nimport { MultiselectProps } from './interfaces';\nimport InternalMultiselect from './internal';\n\nimport buttonTriggerAnalyticsSelectors from '../internal/components/button-trigger/analytics-metadata/styles.css.js';\n\nexport { MultiselectProps };\n\nconst Multiselect = React.forwardRef(\n  (\n    {\n      options = [],\n      filteringType = 'none',\n      statusType = 'finished',\n      selectedOptions = [],\n      keepOpen = true,\n      hideTokens = false,\n      renderOption,\n      ...restProps\n    }: MultiselectProps,\n    ref: React.Ref<MultiselectProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('Multiselect', {\n      props: {\n        inlineTokens: restProps.inlineTokens,\n        autoFocus: restProps.autoFocus,\n        expandToViewport: restProps.expandToViewport,\n        filteringType,\n        hideTokens,\n        keepOpen,\n        tokenLimit: restProps.tokenLimit,\n        virtualScroll: restProps.virtualScroll,\n        readOnly: restProps.readOnly,\n        enableSelectAll: restProps.enableSelectAll,\n      },\n      metadata: {\n        hasInlineLabel: Boolean(restProps.inlineLabelText),\n        hasDisabledReasons: options.some(option => Boolean(option.disabledReason)),\n      },\n    });\n\n    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataMultiselectComponent = {\n      name: 'awsui.Multiselect',\n      label: `.${buttonTriggerAnalyticsSelectors['button-trigger']}`,\n      properties: {\n        disabled: `${!!restProps.disabled}`,\n        selectedOptionsCount: `${selectedOptions.length}`,\n        selectedOptionsValues: selectedOptions\n          .filter(option => option.value !== undefined)\n          .map(option => `${option.value}`),\n        selectedOptions: selectedOptions\n          .filter(option => option.value !== undefined)\n          // fallback on value when label's undefined because in the dropdown if there's no label\n          // the value will be shown.\n          .map(option => `${option.label ?? option.value}`),\n      },\n    };\n\n    return (\n      <InternalMultiselect\n        renderOption={renderOption}\n        options={options}\n        filteringType={filteringType}\n        statusType={statusType}\n        selectedOptions={selectedOptions}\n        keepOpen={keepOpen}\n        hideTokens={hideTokens}\n        {...restProps}\n        {...baseComponentProps}\n        ref={ref}\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n      />\n    );\n  }\n);\n\napplyDisplayName(Multiselect, 'Multiselect');\nexport default Multiselect;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataMultiselectComponent } from './analytics-metadata/interfaces';\nimport { MultiselectProps } from './interfaces';\nimport InternalMultiselect from './internal';\n\nimport buttonTriggerAnalyticsSelectors from '../internal/components/button-trigger/analytics-metadata/styles.css.js';\n\nexport { MultiselectProps };\n\nconst Multiselect = React.forwardRef(\n  (\n    {\n      options = [],\n      filteringType = 'none',\n      statusType = 'finished',\n      selectedOptions = [],\n      keepOpen = true,\n      hideTokens = false,\n      renderOption,\n      ...restProps\n    }: MultiselectProps,\n    ref: React.Ref<MultiselectProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('Multiselect', {\n      props: {\n        inlineTokens: restProps.inlineTokens,\n        autoFocus: restProps.autoFocus,\n        expandToViewport: restProps.expandToViewport,\n        filteringType,\n        hideTokens,\n        keepOpen,\n        tokenLimit: restProps.tokenLimit,\n        virtualScroll: restProps.virtualScroll,\n        readOnly: restProps.readOnly,\n        enableSelectAll: restProps.enableSelectAll,\n        dropdownRole: restProps.dropdownRole,\n      },\n      metadata: {\n        hasInlineLabel: Boolean(restProps.inlineLabelText),\n        hasDisabledReasons: options.some(option => Boolean(option.disabledReason)),\n        hasDropdownHeader: Boolean(restProps.renderDropdownHeader),\n        hasDropdownFooter: Boolean(restProps.renderDropdownFooter),\n        hasDropdownAriaDescribedby: Boolean(restProps.dropdownAriaDescribedby),\n      },\n    });\n\n    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataMultiselectComponent = {\n      name: 'awsui.Multiselect',\n      label: `.${buttonTriggerAnalyticsSelectors['button-trigger']}`,\n      properties: {\n        disabled: `${!!restProps.disabled}`,\n        selectedOptionsCount: `${selectedOptions.length}`,\n        selectedOptionsValues: selectedOptions\n          .filter(option => option.value !== undefined)\n          .map(option => `${option.value}`),\n        selectedOptions: selectedOptions\n          .filter(option => option.value !== undefined)\n          // fallback on value when label's undefined because in the dropdown if there's no label\n          // the value will be shown.\n          .map(option => `${option.label ?? option.value}`),\n      },\n    };\n\n    return (\n      <InternalMultiselect\n        renderOption={renderOption}\n        options={options}\n        filteringType={filteringType}\n        statusType={statusType}\n        selectedOptions={selectedOptions}\n        keepOpen={keepOpen}\n        hideTokens={hideTokens}\n        {...restProps}\n        {...baseComponentProps}\n        ref={ref}\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n      />\n    );\n  }\n);\n\napplyDisplayName(Multiselect, 'Multiselect');\nexport default Multiselect;\n"]}

package/lib/internal/template/multiselect/interfaces.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { OptionsLoadItemsDetail } from '../dropdown/interfaces';
-import { BaseSelectProps } from '../select/interfaces';
+import { BaseSelectProps, SelectProps } from '../select/interfaces';
 import { NonCancelableEventHandler } from '../types/events';
 import { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../types/option';
 export interface MultiselectProps extends BaseSelectProps {
@@ -78,6 +78,13 @@ export declare namespace MultiselectProps {
     type Option = OptionDefinition;
     type OptionGroup = OptionGroupDefinition;
     type Options = ReadonlyArray<Option | OptionGroup>;
+    /**
+     * The argument passed to the dropdown render functions (`renderDropdownHeader`
+     * and `renderDropdownFooter`).
+     */
+    type DropdownContentProps = SelectProps.DropdownContentProps;
+    type DropdownRole = SelectProps.DropdownRole;
+    type DropdownContentRenderer = SelectProps.DropdownContentRenderer;
     interface LoadItemsDetail extends OptionsLoadItemsDetail {
     }
     interface MultiselectOptionItem {