@cloudscape-design/components 3.0.1203 → 3.0.1205

package/internal/components/drag-handle-wrapper/styles.scoped.css

@@ -150,27 +150,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@keyframes awsui_drag-handle-entry_155yk_1k5bo_1 {
+@keyframes awsui_drag-handle-entry_155yk_f1agp_1 {
   from {
-    transform: translate(var(--awsui-drag-handle-animation-inline-offset-4hh3rt), var(--awsui-drag-handle-animation-block-offset-4hh3rt));
+    transform: translate(var(--awsui-drag-handle-animation-inline-offset-c5ek4l), var(--awsui-drag-handle-animation-block-offset-c5ek4l));
   }
   to {
     transform: translate(0, 0);
   }
 }
-@keyframes awsui_drag-handle-exit_155yk_1k5bo_1 {
+@keyframes awsui_drag-handle-exit_155yk_f1agp_1 {
   from {
     transform: translate(0, 0);
   }
   to {
-    transform: translate(var(--awsui-drag-handle-animation-inline-offset-4hh3rt), var(--awsui-drag-handle-animation-block-offset-4hh3rt));
+    transform: translate(var(--awsui-drag-handle-animation-inline-offset-c5ek4l), var(--awsui-drag-handle-animation-block-offset-c5ek4l));
   }
 }
-.awsui_direction-button-wrapper_155yk_1k5bo_169:not(#\9) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: 0;
-  --awsui-drag-handle-animation-block-offset-4hh3rt: 0;
+.awsui_direction-button-wrapper_155yk_f1agp_169:not(#\9) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: 0;
+  --awsui-drag-handle-animation-block-offset-c5ek4l: 0;
 }
-@keyframes awsui_awsui-motion-fade-in_155yk_1k5bo_1 {
+@keyframes awsui_awsui-motion-fade-in_155yk_f1agp_1 {
   from {
     opacity: 0.2;
   }
@@ -178,7 +178,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 1;
   }
 }
-@keyframes awsui_awsui-motion-fade-out-0_155yk_1k5bo_1 {
+@keyframes awsui_awsui-motion-fade-out-0_155yk_f1agp_1 {
   from {
     opacity: 1;
   }
@@ -186,81 +186,81 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 0;
   }
 }
-.awsui_direction-button-wrapper-motion-enter_155yk_1k5bo_189:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_1k5bo_189:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_1k5bo_189:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_1k5bo_189:not(#\9) {
+.awsui_direction-button-wrapper-motion-enter_155yk_f1agp_189:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_f1agp_189:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_f1agp_189:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_f1agp_189:not(#\9) {
   pointer-events: none;
 }
-.awsui_direction-button-wrapper-motion-entering_155yk_1k5bo_189:not(#\9) {
-  animation: awsui_drag-handle-entry_155yk_1k5bo_1 var(--motion-duration-complex-tbdo30, 250ms) var(--motion-easing-responsive-hjj3ai, cubic-bezier(0, 0, 0, 1)), awsui_awsui-motion-fade-in_155yk_1k5bo_1 var(--motion-duration-complex-tbdo30, 250ms) var(--motion-easing-responsive-hjj3ai, cubic-bezier(0, 0, 0, 1));
+.awsui_direction-button-wrapper-motion-entering_155yk_f1agp_189:not(#\9) {
+  animation: awsui_drag-handle-entry_155yk_f1agp_1 var(--motion-duration-complex-tbdo30, 250ms) var(--motion-easing-responsive-hjj3ai, cubic-bezier(0, 0, 0, 1)), awsui_awsui-motion-fade-in_155yk_f1agp_1 var(--motion-duration-complex-tbdo30, 250ms) var(--motion-easing-responsive-hjj3ai, cubic-bezier(0, 0, 0, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-entering_155yk_1k5bo_189:not(#\9) {
+  .awsui_direction-button-wrapper-motion-entering_155yk_f1agp_189:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_1k5bo_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_1k5bo_189:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_f1agp_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_f1agp_189:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_direction-button-wrapper-motion-exiting_155yk_1k5bo_189:not(#\9) {
-  animation: awsui_drag-handle-exit_155yk_1k5bo_1 var(--motion-duration-complex-tbdo30, 250ms) var(--motion-easing-responsive-hjj3ai, cubic-bezier(0, 0, 0, 1)) forwards, awsui_awsui-motion-fade-out-0_155yk_1k5bo_1 var(--motion-duration-complex-tbdo30, 250ms) var(--motion-easing-responsive-hjj3ai, cubic-bezier(0, 0, 0, 1)) forwards;
+.awsui_direction-button-wrapper-motion-exiting_155yk_f1agp_189:not(#\9) {
+  animation: awsui_drag-handle-exit_155yk_f1agp_1 var(--motion-duration-complex-tbdo30, 250ms) var(--motion-easing-responsive-hjj3ai, cubic-bezier(0, 0, 0, 1)) forwards, awsui_awsui-motion-fade-out-0_155yk_f1agp_1 var(--motion-duration-complex-tbdo30, 250ms) var(--motion-easing-responsive-hjj3ai, cubic-bezier(0, 0, 0, 1)) forwards;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-exiting_155yk_1k5bo_189:not(#\9) {
+  .awsui_direction-button-wrapper-motion-exiting_155yk_f1agp_189:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_1k5bo_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_1k5bo_189:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_f1agp_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_f1agp_189:not(#\9) {
   animation: none;
   transition: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper_155yk_1k5bo_169:not(#\9) {
+  .awsui_direction-button-wrapper_155yk_f1agp_169:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_1k5bo_169:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_1k5bo_169:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_f1agp_169:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_f1agp_169:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_direction-button-wrapper-block-start_155yk_1k5bo_229:not(#\9) {
-  --awsui-drag-handle-animation-block-offset-4hh3rt: 20px;
+.awsui_direction-button-wrapper-block-start_155yk_f1agp_229:not(#\9) {
+  --awsui-drag-handle-animation-block-offset-c5ek4l: 20px;
 }
 
-.awsui_direction-button-wrapper-block-end_155yk_1k5bo_233:not(#\9) {
-  --awsui-drag-handle-animation-block-offset-4hh3rt: -20px;
+.awsui_direction-button-wrapper-block-end_155yk_f1agp_233:not(#\9) {
+  --awsui-drag-handle-animation-block-offset-c5ek4l: -20px;
 }
 
-.awsui_direction-button-wrapper-inline-start_155yk_1k5bo_237:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_f1agp_237:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_direction-button-wrapper-inline-start_155yk_1k5bo_237:not(#\9):dir(ltr) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: 20px;
+.awsui_direction-button-wrapper-inline-start_155yk_f1agp_237:not(#\9):dir(ltr) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: 20px;
 }
-.awsui_direction-button-wrapper-inline-start_155yk_1k5bo_237:not(#\9):dir(rtl) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: -20px;
+.awsui_direction-button-wrapper-inline-start_155yk_f1agp_237:not(#\9):dir(rtl) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: -20px;
 }
 
-.awsui_direction-button-wrapper-inline-end_155yk_1k5bo_248:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_f1agp_248:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_direction-button-wrapper-inline-end_155yk_1k5bo_248:not(#\9):dir(ltr) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: -20px;
+.awsui_direction-button-wrapper-inline-end_155yk_f1agp_248:not(#\9):dir(ltr) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: -20px;
 }
-.awsui_direction-button-wrapper-inline-end_155yk_1k5bo_248:not(#\9):dir(rtl) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: 20px;
+.awsui_direction-button-wrapper-inline-end_155yk_f1agp_248:not(#\9):dir(rtl) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: 20px;
 }
 
-.awsui_contents_155yk_1k5bo_259:not(#\9) {
+.awsui_contents_155yk_f1agp_259:not(#\9) {
   display: contents;
 }
 
-.awsui_portal-overlay_155yk_1k5bo_263:not(#\9) {
+.awsui_portal-overlay_155yk_f1agp_263:not(#\9) {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -268,20 +268,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 7000;
 }
 
-.awsui_portal-overlay-disabled_155yk_1k5bo_271:not(#\9) {
+.awsui_portal-overlay-disabled_155yk_f1agp_271:not(#\9) {
   display: none;
 }
 
-.awsui_portal-overlay-contents_155yk_1k5bo_275:not(#\9) {
+.awsui_portal-overlay-contents_155yk_f1agp_275:not(#\9) {
   pointer-events: auto;
 }
 
-.awsui_drag-handle_155yk_1k5bo_279:not(#\9) {
+.awsui_drag-handle_155yk_f1agp_279:not(#\9) {
   position: relative;
   display: inline-flex;
 }
 
-.awsui_direction-button-wrapper_155yk_1k5bo_169:not(#\9) {
+.awsui_direction-button-wrapper_155yk_f1agp_169:not(#\9) {
   position: absolute;
   block-size: var(--space-static-xl-4tedi6, 24px);
   inline-size: var(--space-static-xl-4tedi6, 24px);
@@ -289,67 +289,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: var(--space-static-xxs-ns94dp, 4px);
 }
 
-.awsui_direction-button-wrapper-hidden_155yk_1k5bo_292:not(#\9) {
+.awsui_direction-button-wrapper-hidden_155yk_f1agp_292:not(#\9) {
   display: none;
 }
 
-.awsui_direction-button-wrapper-block-start_155yk_1k5bo_229:not(#\9) {
+.awsui_direction-button-wrapper-block-start_155yk_f1agp_229:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-block-end_155yk_1k5bo_233:not(#\9) {
+.awsui_direction-button-wrapper-block-end_155yk_f1agp_233:not(#\9) {
   inset-block-end: calc(-1 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-inline-start_155yk_1k5bo_237:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_f1agp_237:not(#\9) {
   inset-inline-start: calc(-1 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-inline-end_155yk_1k5bo_248:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_f1agp_248:not(#\9) {
   inset-inline-end: calc(-1 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-forced_155yk_1k5bo_316:not(#\9) {
+.awsui_direction-button-wrapper-forced_155yk_f1agp_316:not(#\9) {
   inset-inline-start: calc(50% - (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-forced-top-0_155yk_1k5bo_320:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-0_155yk_f1agp_320:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-top-1_155yk_1k5bo_324:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-1_155yk_f1agp_324:not(#\9) {
   inset-block-start: calc(-2 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-top-2_155yk_1k5bo_328:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-2_155yk_f1agp_328:not(#\9) {
   inset-block-start: calc(-3 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-top-3_155yk_1k5bo_332:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-3_155yk_f1agp_332:not(#\9) {
   inset-block-start: calc(-4 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-bottom-0_155yk_1k5bo_336:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-0_155yk_f1agp_336:not(#\9) {
   inset-block-start: calc(1 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-bottom-1_155yk_1k5bo_340:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-1_155yk_f1agp_340:not(#\9) {
   inset-block-start: calc(2 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-bottom-2_155yk_1k5bo_344:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-2_155yk_f1agp_344:not(#\9) {
   inset-block-start: calc(3 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-bottom-3_155yk_1k5bo_348:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-3_155yk_f1agp_348:not(#\9) {
   inset-block-start: calc(4 * (var(--space-static-xl-4tedi6, 24px) + 2 * var(--space-static-xxs-ns94dp, 4px)));
 }
 
-.awsui_direction-button_155yk_1k5bo_169:not(#\9) {
+.awsui_direction-button_155yk_f1agp_169:not(#\9) {
   position: absolute;
   border-width: 0;
   cursor: pointer;
@@ -368,14 +368,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-direction-button-default-p88lvb, #ffffff);
   box-shadow: var(--shadow-dropdown-isf0w4, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
 }
-.awsui_direction-button_155yk_1k5bo_169:not(#\9):not(.awsui_direction-button-disabled_155yk_1k5bo_371):hover {
+.awsui_direction-button_155yk_f1agp_169:not(#\9):not(.awsui_direction-button-disabled_155yk_f1agp_371):hover {
   background-color: var(--color-background-direction-button-hover-74n5o1, #333843);
 }
-.awsui_direction-button_155yk_1k5bo_169:not(#\9):not(.awsui_direction-button-disabled_155yk_1k5bo_371):active {
+.awsui_direction-button_155yk_f1agp_169:not(#\9):not(.awsui_direction-button-disabled_155yk_f1agp_371):active {
   background-color: var(--color-background-direction-button-active-lvo0dy, #232b37);
 }
 
-.awsui_direction-button-disabled_155yk_1k5bo_371:not(#\9) {
+.awsui_direction-button-disabled_155yk_f1agp_371:not(#\9) {
   cursor: default;
   background-color: var(--color-background-direction-button-disabled-s9x4zq, #ebebf0);
   color: var(--color-text-direction-button-disabled-2jds36, #b4b4bb);

package/internal/components/drag-handle-wrapper/styles.selectors.js

@@ -2,35 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_1k5bo_169",
-  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_1k5bo_189",
-  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_1k5bo_189",
-  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_1k5bo_189",
-  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_1k5bo_189",
-  "drag-handle-entry": "awsui_drag-handle-entry_155yk_1k5bo_1",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_1k5bo_1",
-  "drag-handle-exit": "awsui_drag-handle-exit_155yk_1k5bo_1",
-  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_1k5bo_1",
-  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_1k5bo_229",
-  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_1k5bo_233",
-  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_1k5bo_237",
-  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_1k5bo_248",
-  "contents": "awsui_contents_155yk_1k5bo_259",
-  "portal-overlay": "awsui_portal-overlay_155yk_1k5bo_263",
-  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_1k5bo_271",
-  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_1k5bo_275",
-  "drag-handle": "awsui_drag-handle_155yk_1k5bo_279",
-  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_1k5bo_292",
-  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_1k5bo_316",
-  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_1k5bo_320",
-  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_1k5bo_324",
-  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_1k5bo_328",
-  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_1k5bo_332",
-  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_1k5bo_336",
-  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_1k5bo_340",
-  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_1k5bo_344",
-  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_1k5bo_348",
-  "direction-button": "awsui_direction-button_155yk_1k5bo_169",
-  "direction-button-disabled": "awsui_direction-button-disabled_155yk_1k5bo_371"
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_f1agp_169",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_f1agp_189",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_f1agp_189",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_f1agp_189",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_f1agp_189",
+  "drag-handle-entry": "awsui_drag-handle-entry_155yk_f1agp_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_f1agp_1",
+  "drag-handle-exit": "awsui_drag-handle-exit_155yk_f1agp_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_f1agp_1",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_f1agp_229",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_f1agp_233",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_f1agp_237",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_f1agp_248",
+  "contents": "awsui_contents_155yk_f1agp_259",
+  "portal-overlay": "awsui_portal-overlay_155yk_f1agp_263",
+  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_f1agp_271",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_f1agp_275",
+  "drag-handle": "awsui_drag-handle_155yk_f1agp_279",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_f1agp_292",
+  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_f1agp_316",
+  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_f1agp_320",
+  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_f1agp_324",
+  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_f1agp_328",
+  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_f1agp_332",
+  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_f1agp_336",
+  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_f1agp_340",
+  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_f1agp_344",
+  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_f1agp_348",
+  "direction-button": "awsui_direction-button_155yk_f1agp_169",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_f1agp_371"
 };
   

package/internal/components/dropdown/dropdown-fit-handler.d.ts

@@ -1,5 +1,6 @@
 import { BoundingBox } from '../../utils/scrollable-containers';
 import { LogicalDOMRect } from './dropdown-position';
+import { DropdownWidthConstraint } from './interfaces';
 export interface DropdownPosition {
   blockSize: string;
   inlineSize: string;
@@ -11,21 +12,20 @@ export interface InteriorDropdownPosition extends DropdownPosition {
   insetBlockEnd: string;
   insetBlockStart: string;
 }
-export declare const defaultMaxDropdownWidth: number;
-export declare const hasEnoughSpaceToStretchBeyondTriggerWidth: ({
+export declare const hasEnoughSpaceForFlexibleWidth: ({
   triggerElement,
   dropdownElement,
-  desiredMinWidth,
+  minWidthConstraint,
+  maxWidthConstraint,
   expandToViewport,
-  stretchWidth,
   stretchHeight,
   isMobile
 }: {
   triggerElement: HTMLElement;
   dropdownElement: HTMLElement;
-  desiredMinWidth?: number;
+  minWidthConstraint?: DropdownWidthConstraint;
+  maxWidthConstraint?: DropdownWidthConstraint;
   expandToViewport: boolean;
-  stretchWidth: boolean;
   stretchHeight: boolean;
   isMobile: boolean;
 }) => boolean;
@@ -33,21 +33,21 @@ export declare const getDropdownPosition: ({
   triggerElement,
   dropdownElement,
   overflowParents,
-  minWidth: desiredMinWidth,
+  minWidth: minWidthConstraint,
+  maxWidth: maxWidthConstraint,
   preferCenter,
-  stretchWidth,
+  matchTriggerWidth,
   stretchHeight,
-  isMobile,
-  stretchBeyondTriggerWidth
+  isMobile
 }: {
   triggerElement: HTMLElement;
   dropdownElement: HTMLElement;
   overflowParents: ReadonlyArray<BoundingBox>;
-  minWidth?: number;
+  minWidth?: DropdownWidthConstraint;
+  maxWidth?: DropdownWidthConstraint;
   preferCenter?: boolean;
-  stretchWidth?: boolean;
+  matchTriggerWidth?: boolean;
   stretchHeight?: boolean;
   isMobile?: boolean;
-  stretchBeyondTriggerWidth?: boolean;
 }) => DropdownPosition;
-export declare const calculatePosition: (dropdownElement: HTMLDivElement, triggerElement: HTMLDivElement, verticalContainerElement: HTMLDivElement, interior: boolean, expandToViewport: boolean, preferCenter: boolean, stretchWidth: boolean, stretchHeight: boolean, isMobile: boolean, minWidth?: number, stretchBeyondTriggerWidth?: boolean) => [DropdownPosition, LogicalDOMRect];
+export declare const calculatePosition: (dropdownElement: HTMLDivElement, triggerElement: HTMLDivElement, verticalContainerElement: HTMLDivElement, interior: boolean, expandToViewport: boolean, preferCenter: boolean, matchTriggerWidth: boolean, stretchHeight: boolean, isMobile: boolean, minWidth?: DropdownWidthConstraint, maxWidth?: DropdownWidthConstraint) => [DropdownPosition, LogicalDOMRect];

package/internal/components/dropdown/dropdown-fit-handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-fit-handler.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-fit-handler.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAmD,MAAM,mCAAmC,CAAC;AACjH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AACD,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAkBD,eAAO,MAAM,uBAAuB,QAA4B,CAAC;AAyIjE,eAAO,MAAM,yCAAyC,GAAI,gHAQvD;IACD,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,WAAW,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB,YAqBA,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,kKAUjC;IACD,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,WAAW,CAAC;IAC7B,eAAe,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,KAAG,gBA0DH,CAAC;AAkDF,eAAO,MAAM,iBAAiB,GAC5B,iBAAiB,cAAc,EAC/B,gBAAgB,cAAc,EAC9B,0BAA0B,cAAc,EACxC,UAAU,OAAO,EACjB,kBAAkB,OAAO,EACzB,cAAc,OAAO,EACrB,cAAc,OAAO,EACrB,eAAe,OAAO,EACtB,UAAU,OAAO,EACjB,WAAW,MAAM,EACjB,4BAA4B,OAAO,KAClC,CAAC,gBAAgB,EAAE,cAAc,CAkCnC,CAAC"}
+{"version":3,"file":"dropdown-fit-handler.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/dropdown-fit-handler.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAmD,MAAM,mCAAmC,CAAC;AACjH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAcvD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AACD,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAkKD,eAAO,MAAM,8BAA8B,GAAI,yHAQ5C;IACD,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,WAAW,CAAC;IAC7B,kBAAkB,CAAC,EAAE,uBAAuB,CAAC;IAC7C,kBAAkB,CAAC,EAAE,uBAAuB,CAAC;IAC7C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB,YAoBA,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,6KAUjC;IACD,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,WAAW,CAAC;IAC7B,eAAe,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,KAAG,gBA0DH,CAAC;AAkDF,eAAO,MAAM,iBAAiB,GAC5B,iBAAiB,cAAc,EAC/B,gBAAgB,cAAc,EAC9B,0BAA0B,cAAc,EACxC,UAAU,OAAO,EACjB,kBAAkB,OAAO,EACzB,cAAc,OAAO,EACrB,mBAAmB,OAAO,EAC1B,eAAe,OAAO,EACtB,UAAU,OAAO,EACjB,WAAW,uBAAuB,EAClC,WAAW,uBAAuB,KACjC,CAAC,gBAAgB,EAAE,cAAc,CAkCnC,CAAC"}

package/internal/components/dropdown/dropdown-fit-handler.js

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
-import { getBreakpointValue } from '../../breakpoints';
 import { getOverflowParentDimensions, getOverflowParents } from '../../utils/scrollable-containers';
 import styles from './styles.css.js';
 const AVAILABLE_SPACE_RESERVE_DEFAULT = 50;
@@ -19,9 +18,6 @@ const getClosestParentDimensions = (element) => {
     });
     return parents.shift();
 };
-// By default, most dropdowns should expand their content as necessary, but to a maximum of 465px (the XXS breakpoint).
-// This value was determined by UX but may be subject to change in the future, depending on the feedback.
-export const defaultMaxDropdownWidth = getBreakpointValue('xxs');
 const getAvailableSpace = ({ trigger, overflowParents, stretchWidth = false, stretchHeight = false, isMobile, }) => {
     const availableSpaceReserveVertical = stretchHeight
         ? 0
@@ -88,20 +84,24 @@ const getInteriorAvailableSpace = ({ trigger, overflowParents, isMobile, }) => {
         inlineEnd: Number.MAX_VALUE,
     });
 };
-const getWidths = ({ triggerElement, dropdownElement, desiredMinWidth, stretchBeyondTriggerWidth = false, }) => {
-    // Determine the width of the trigger
+const resolveWidthConstraint = (constraint, triggerWidth, fallback) => {
+    if (constraint === 'trigger') {
+        return triggerWidth;
+    }
+    if (typeof constraint === 'number') {
+        return constraint;
+    }
+    return fallback;
+};
+const getWidths = ({ triggerElement, dropdownElement, minWidthConstraint, maxWidthConstraint, }) => {
     const { inlineSize: triggerInlineSize } = getLogicalBoundingClientRect(triggerElement);
-    // Minimum width is determined by either an explicit number (desiredMinWidth) or the trigger width
-    const minWidth = desiredMinWidth ? Math.min(triggerInlineSize, desiredMinWidth) : triggerInlineSize;
-    // If stretchBeyondTriggerWidth is true, the maximum width is the XS breakpoint (465px) or the trigger width (if bigger).
-    const maxWidth = stretchBeyondTriggerWidth ? Math.max(defaultMaxDropdownWidth, triggerInlineSize) : Number.MAX_VALUE;
-    // Determine the actual dropdown width, the size that it "wants" to be
     const { inlineSize: requiredWidth } = getLogicalBoundingClientRect(dropdownElement);
-    // Try to achieve the required/desired width within the given parameters
+    const minWidth = resolveWidthConstraint(minWidthConstraint, triggerInlineSize, 0);
+    const maxWidth = resolveWidthConstraint(maxWidthConstraint, triggerInlineSize, Number.MAX_VALUE);
     const idealWidth = Math.min(Math.max(requiredWidth, minWidth), maxWidth);
     return { idealWidth, minWidth, triggerInlineSize };
 };
-export const hasEnoughSpaceToStretchBeyondTriggerWidth = ({ triggerElement, dropdownElement, desiredMinWidth, expandToViewport, stretchWidth, stretchHeight, isMobile, }) => {
+export const hasEnoughSpaceForFlexibleWidth = ({ triggerElement, dropdownElement, minWidthConstraint, maxWidthConstraint, expandToViewport, stretchHeight, isMobile, }) => {
     const overflowParents = getOverflowParentDimensions({
         element: dropdownElement,
         excludeClosestParent: false,
@@ -111,32 +111,31 @@ export const hasEnoughSpaceToStretchBeyondTriggerWidth = ({ triggerElement, drop
     const { idealWidth } = getWidths({
         triggerElement: triggerElement,
         dropdownElement,
-        desiredMinWidth,
-        stretchBeyondTriggerWidth: true,
+        minWidthConstraint,
+        maxWidthConstraint,
     });
     const availableSpace = getAvailableSpace({
         trigger: triggerElement,
         overflowParents,
-        stretchWidth,
         stretchHeight,
         isMobile,
     });
     return idealWidth <= availableSpace.inlineStart || idealWidth <= availableSpace.inlineEnd;
 };
-export const getDropdownPosition = ({ triggerElement, dropdownElement, overflowParents, minWidth: desiredMinWidth, preferCenter = false, stretchWidth = false, stretchHeight = false, isMobile = false, stretchBeyondTriggerWidth = false, }) => {
+export const getDropdownPosition = ({ triggerElement, dropdownElement, overflowParents, minWidth: minWidthConstraint, maxWidth: maxWidthConstraint, preferCenter = false, matchTriggerWidth = false, stretchHeight = false, isMobile = false, }) => {
     // Determine the space available around the dropdown that it can grow in
     const availableSpace = getAvailableSpace({
         trigger: triggerElement,
         overflowParents,
-        stretchWidth,
+        stretchWidth: matchTriggerWidth,
         stretchHeight,
         isMobile,
     });
     const { idealWidth, minWidth, triggerInlineSize } = getWidths({
         triggerElement,
         dropdownElement,
-        desiredMinWidth,
-        stretchBeyondTriggerWidth,
+        minWidthConstraint,
+        maxWidthConstraint,
     });
     let dropInlineStart;
     let insetInlineStart = null;
@@ -209,7 +208,7 @@ const getInteriorDropdownPosition = (trigger, dropdown, overflowParents, isMobil
         insetInlineStart: `${insetInlineStart}px`,
     };
 };
-export const calculatePosition = (dropdownElement, triggerElement, verticalContainerElement, interior, expandToViewport, preferCenter, stretchWidth, stretchHeight, isMobile, minWidth, stretchBeyondTriggerWidth) => {
+export const calculatePosition = (dropdownElement, triggerElement, verticalContainerElement, interior, expandToViewport, preferCenter, matchTriggerWidth, stretchHeight, isMobile, minWidth, maxWidth) => {
     // cleaning previously assigned values,
     // so that they are not reused in case of screen resize and similar events
     verticalContainerElement.style.maxBlockSize = '';
@@ -233,11 +232,11 @@ export const calculatePosition = (dropdownElement, triggerElement, verticalConta
             dropdownElement,
             overflowParents,
             minWidth,
+            maxWidth,
             preferCenter,
-            stretchWidth,
+            matchTriggerWidth,
             stretchHeight,
             isMobile,
-            stretchBeyondTriggerWidth,
         });
     const triggerBox = getLogicalBoundingClientRect(triggerElement);
     return [position, triggerBox];