@cloudscape-design/components-themeable 3.0.1210 → 3.0.1212

package/lib/internal/template/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_f48s3_1 {
+@keyframes awsui_drag-handle-entry_155yk_ea0dq_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_f48s3_1 {
+@keyframes awsui_drag-handle-exit_155yk_ea0dq_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_f48s3_169:not(#\9) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: 0;
-  --awsui-drag-handle-animation-block-offset-4hh3rt: 0;
+.awsui_direction-button-wrapper_155yk_ea0dq_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_f48s3_1 {
+@keyframes awsui_awsui-motion-fade-in_155yk_ea0dq_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_f48s3_1 {
+@keyframes awsui_awsui-motion-fade-out-0_155yk_ea0dq_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_f48s3_189:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_f48s3_189:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_f48s3_189:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_f48s3_189:not(#\9) {
+.awsui_direction-button-wrapper-motion-enter_155yk_ea0dq_189:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_ea0dq_189:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_ea0dq_189:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_ea0dq_189:not(#\9) {
   pointer-events: none;
 }
-.awsui_direction-button-wrapper-motion-entering_155yk_f48s3_189:not(#\9) {
-  animation: awsui_drag-handle-entry_155yk_f48s3_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out), awsui_awsui-motion-fade-in_155yk_f48s3_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out);
+.awsui_direction-button-wrapper-motion-entering_155yk_ea0dq_189:not(#\9) {
+  animation: awsui_drag-handle-entry_155yk_ea0dq_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out), awsui_awsui-motion-fade-in_155yk_ea0dq_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-entering_155yk_f48s3_189:not(#\9) {
+  .awsui_direction-button-wrapper-motion-entering_155yk_ea0dq_189:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_f48s3_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_f48s3_189:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_ea0dq_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_ea0dq_189:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_direction-button-wrapper-motion-exiting_155yk_f48s3_189:not(#\9) {
-  animation: awsui_drag-handle-exit_155yk_f48s3_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out) forwards, awsui_awsui-motion-fade-out-0_155yk_f48s3_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out) forwards;
+.awsui_direction-button-wrapper-motion-exiting_155yk_ea0dq_189:not(#\9) {
+  animation: awsui_drag-handle-exit_155yk_ea0dq_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out) forwards, awsui_awsui-motion-fade-out-0_155yk_ea0dq_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out) forwards;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-exiting_155yk_f48s3_189:not(#\9) {
+  .awsui_direction-button-wrapper-motion-exiting_155yk_ea0dq_189:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_f48s3_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_f48s3_189:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_ea0dq_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_ea0dq_189:not(#\9) {
   animation: none;
   transition: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper_155yk_f48s3_169:not(#\9) {
+  .awsui_direction-button-wrapper_155yk_ea0dq_169:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_f48s3_169:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_f48s3_169:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_ea0dq_169:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_ea0dq_169:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_direction-button-wrapper-block-start_155yk_f48s3_229:not(#\9) {
-  --awsui-drag-handle-animation-block-offset-4hh3rt: 20px;
+.awsui_direction-button-wrapper-block-start_155yk_ea0dq_229:not(#\9) {
+  --awsui-drag-handle-animation-block-offset-c5ek4l: 20px;
 }
 
-.awsui_direction-button-wrapper-block-end_155yk_f48s3_233:not(#\9) {
-  --awsui-drag-handle-animation-block-offset-4hh3rt: -20px;
+.awsui_direction-button-wrapper-block-end_155yk_ea0dq_233:not(#\9) {
+  --awsui-drag-handle-animation-block-offset-c5ek4l: -20px;
 }
 
-.awsui_direction-button-wrapper-inline-start_155yk_f48s3_237:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_ea0dq_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_f48s3_237:not(#\9):dir(ltr) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: 20px;
+.awsui_direction-button-wrapper-inline-start_155yk_ea0dq_237:not(#\9):dir(ltr) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: 20px;
 }
-.awsui_direction-button-wrapper-inline-start_155yk_f48s3_237:not(#\9):dir(rtl) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: -20px;
+.awsui_direction-button-wrapper-inline-start_155yk_ea0dq_237:not(#\9):dir(rtl) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: -20px;
 }
 
-.awsui_direction-button-wrapper-inline-end_155yk_f48s3_248:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_ea0dq_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_f48s3_248:not(#\9):dir(ltr) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: -20px;
+.awsui_direction-button-wrapper-inline-end_155yk_ea0dq_248:not(#\9):dir(ltr) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: -20px;
 }
-.awsui_direction-button-wrapper-inline-end_155yk_f48s3_248:not(#\9):dir(rtl) {
-  --awsui-drag-handle-animation-inline-offset-4hh3rt: 20px;
+.awsui_direction-button-wrapper-inline-end_155yk_ea0dq_248:not(#\9):dir(rtl) {
+  --awsui-drag-handle-animation-inline-offset-c5ek4l: 20px;
 }
 
-.awsui_contents_155yk_f48s3_259:not(#\9) {
+.awsui_contents_155yk_ea0dq_259:not(#\9) {
   display: contents;
 }
 
-.awsui_portal-overlay_155yk_f48s3_263:not(#\9) {
+.awsui_portal-overlay_155yk_ea0dq_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_f48s3_271:not(#\9) {
+.awsui_portal-overlay-disabled_155yk_ea0dq_271:not(#\9) {
   display: none;
 }
 
-.awsui_portal-overlay-contents_155yk_f48s3_275:not(#\9) {
+.awsui_portal-overlay-contents_155yk_ea0dq_275:not(#\9) {
   pointer-events: auto;
 }
 
-.awsui_drag-handle_155yk_f48s3_279:not(#\9) {
+.awsui_drag-handle_155yk_ea0dq_279:not(#\9) {
   position: relative;
   display: inline-flex;
 }
 
-.awsui_direction-button-wrapper_155yk_f48s3_169:not(#\9) {
+.awsui_direction-button-wrapper_155yk_ea0dq_169:not(#\9) {
   position: absolute;
   block-size: var(--space-static-xl-pek4x1, 24px);
   inline-size: var(--space-static-xl-pek4x1, 24px);
@@ -289,67 +289,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: var(--space-static-xxs-0cgyf1, 4px);
 }
 
-.awsui_direction-button-wrapper-hidden_155yk_f48s3_292:not(#\9) {
+.awsui_direction-button-wrapper-hidden_155yk_ea0dq_292:not(#\9) {
   display: none;
 }
 
-.awsui_direction-button-wrapper-block-start_155yk_f48s3_229:not(#\9) {
+.awsui_direction-button-wrapper-block-start_155yk_ea0dq_229:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-block-end_155yk_f48s3_233:not(#\9) {
+.awsui_direction-button-wrapper-block-end_155yk_ea0dq_233:not(#\9) {
   inset-block-end: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-inline-start_155yk_f48s3_237:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_ea0dq_237:not(#\9) {
   inset-inline-start: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-inline-end_155yk_f48s3_248:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_ea0dq_248:not(#\9) {
   inset-inline-end: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-forced_155yk_f48s3_316:not(#\9) {
+.awsui_direction-button-wrapper-forced_155yk_ea0dq_316:not(#\9) {
   inset-inline-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-forced-top-0_155yk_f48s3_320:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-0_155yk_ea0dq_320:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-top-1_155yk_f48s3_324:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-1_155yk_ea0dq_324:not(#\9) {
   inset-block-start: calc(-2 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-top-2_155yk_f48s3_328:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-2_155yk_ea0dq_328:not(#\9) {
   inset-block-start: calc(-3 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-top-3_155yk_f48s3_332:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-3_155yk_ea0dq_332:not(#\9) {
   inset-block-start: calc(-4 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-bottom-0_155yk_f48s3_336:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-0_155yk_ea0dq_336:not(#\9) {
   inset-block-start: calc(1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-bottom-1_155yk_f48s3_340:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-1_155yk_ea0dq_340:not(#\9) {
   inset-block-start: calc(2 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-bottom-2_155yk_f48s3_344:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-2_155yk_ea0dq_344:not(#\9) {
   inset-block-start: calc(3 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
 }
 
-.awsui_direction-button-wrapper-forced-bottom-3_155yk_f48s3_348:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-3_155yk_ea0dq_348:not(#\9) {
   inset-block-start: calc(4 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
 }
 
-.awsui_direction-button_155yk_f48s3_169:not(#\9) {
+.awsui_direction-button_155yk_ea0dq_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-dkices, #ffffff);
   box-shadow: var(--shadow-dropdown-skxpuu, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_direction-button_155yk_f48s3_169:not(#\9):not(.awsui_direction-button-disabled_155yk_f48s3_371):hover {
+.awsui_direction-button_155yk_ea0dq_169:not(#\9):not(.awsui_direction-button-disabled_155yk_ea0dq_371):hover {
   background-color: var(--color-background-direction-button-hover-v5bxfc, #414750);
 }
-.awsui_direction-button_155yk_f48s3_169:not(#\9):not(.awsui_direction-button-disabled_155yk_f48s3_371):active {
+.awsui_direction-button_155yk_ea0dq_169:not(#\9):not(.awsui_direction-button-disabled_155yk_ea0dq_371):active {
   background-color: var(--color-background-direction-button-active-wn6s2j, #2a2e33);
 }
 
-.awsui_direction-button-disabled_155yk_f48s3_371:not(#\9) {
+.awsui_direction-button-disabled_155yk_ea0dq_371:not(#\9) {
   cursor: default;
   background-color: var(--color-background-direction-button-disabled-rcznmi, #eaeded);
   color: var(--color-text-direction-button-disabled-596cgx, #aab7b8);

package/lib/internal/template/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_f48s3_169",
-  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_f48s3_189",
-  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_f48s3_189",
-  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_f48s3_189",
-  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_f48s3_189",
-  "drag-handle-entry": "awsui_drag-handle-entry_155yk_f48s3_1",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_f48s3_1",
-  "drag-handle-exit": "awsui_drag-handle-exit_155yk_f48s3_1",
-  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_f48s3_1",
-  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_f48s3_229",
-  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_f48s3_233",
-  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_f48s3_237",
-  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_f48s3_248",
-  "contents": "awsui_contents_155yk_f48s3_259",
-  "portal-overlay": "awsui_portal-overlay_155yk_f48s3_263",
-  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_f48s3_271",
-  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_f48s3_275",
-  "drag-handle": "awsui_drag-handle_155yk_f48s3_279",
-  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_f48s3_292",
-  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_f48s3_316",
-  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_f48s3_320",
-  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_f48s3_324",
-  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_f48s3_328",
-  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_f48s3_332",
-  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_f48s3_336",
-  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_f48s3_340",
-  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_f48s3_344",
-  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_f48s3_348",
-  "direction-button": "awsui_direction-button_155yk_f48s3_169",
-  "direction-button-disabled": "awsui_direction-button-disabled_155yk_f48s3_371"
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_ea0dq_169",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_ea0dq_189",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_ea0dq_189",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_ea0dq_189",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_ea0dq_189",
+  "drag-handle-entry": "awsui_drag-handle-entry_155yk_ea0dq_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_ea0dq_1",
+  "drag-handle-exit": "awsui_drag-handle-exit_155yk_ea0dq_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_ea0dq_1",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_ea0dq_229",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_ea0dq_233",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_ea0dq_237",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_ea0dq_248",
+  "contents": "awsui_contents_155yk_ea0dq_259",
+  "portal-overlay": "awsui_portal-overlay_155yk_ea0dq_263",
+  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_ea0dq_271",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_ea0dq_275",
+  "drag-handle": "awsui_drag-handle_155yk_ea0dq_279",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_ea0dq_292",
+  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_ea0dq_316",
+  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_ea0dq_320",
+  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_ea0dq_324",
+  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_ea0dq_328",
+  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_ea0dq_332",
+  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_ea0dq_336",
+  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_ea0dq_340",
+  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_ea0dq_344",
+  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_ea0dq_348",
+  "direction-button": "awsui_direction-button_155yk_ea0dq_169",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_ea0dq_371"
 };
   

package/lib/internal/template/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,26 +12,25 @@ export interface InteriorDropdownPosition extends DropdownPosition {
     insetBlockEnd: string;
     insetBlockStart: string;
 }
-export declare const defaultMaxDropdownWidth: number;
-export declare const hasEnoughSpaceToStretchBeyondTriggerWidth: ({ triggerElement, dropdownElement, desiredMinWidth, expandToViewport, stretchWidth, stretchHeight, isMobile, }: {
+export declare const hasEnoughSpaceForFlexibleWidth: ({ triggerElement, dropdownElement, minWidthConstraint, maxWidthConstraint, expandToViewport, stretchHeight, isMobile, }: {
     triggerElement: HTMLElement;
     dropdownElement: HTMLElement;
-    desiredMinWidth?: number;
+    minWidthConstraint?: DropdownWidthConstraint;
+    maxWidthConstraint?: DropdownWidthConstraint;
     expandToViewport: boolean;
-    stretchWidth: boolean;
     stretchHeight: boolean;
     isMobile: boolean;
 }) => boolean;
-export declare const getDropdownPosition: ({ triggerElement, dropdownElement, overflowParents, minWidth: desiredMinWidth, preferCenter, stretchWidth, stretchHeight, isMobile, stretchBeyondTriggerWidth, }: {
+export declare const getDropdownPosition: ({ triggerElement, dropdownElement, overflowParents, minWidth: minWidthConstraint, maxWidth: maxWidthConstraint, preferCenter, matchTriggerWidth, stretchHeight, 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];
 //# sourceMappingURL=dropdown-fit-handler.d.ts.map

package/lib/internal/template/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/lib/internal/template/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];