@cloudscape-design/components-themeable 3.0.1381 → 3.0.1383

package/lib/internal/scss/internal/styles/forms/mixins.scss

@@ -117,7 +117,6 @@
 // Use for form input elements, excluding buttons
 // or for elements that have a light border and light background
 @mixin form-focus-element(
-  $border-radius: constants.$control-border-radius,
   $border-color: awsui.$color-border-input-focused,
   $box-shadow: foundation.$box-shadow-focused-light
 ) {
@@ -127,10 +126,6 @@
 
   border-block: awsui.$border-width-field solid $border-color;
   border-inline: awsui.$border-width-field solid $border-color;
-  border-start-start-radius: $border-radius;
-  border-start-end-radius: $border-radius;
-  border-end-start-radius: $border-radius;
-  border-end-end-radius: $border-radius;
 
   box-shadow: $box-shadow;
 }
@@ -239,10 +234,13 @@
 }
 
 @mixin container-style {
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
-  border-end-start-radius: awsui.$border-radius-container;
-  border-end-end-radius: awsui.$border-radius-container;
+  // Custom radius from the container style API if set, otherwise the token. Stacked
+  // containers still flatten adjacent corners because those rules set a literal 0.
+  $radius: var(#{custom-props.$containerStyleBorderRadius}, #{awsui.$border-radius-container});
+  border-start-start-radius: $radius;
+  border-start-end-radius: $radius;
+  border-end-start-radius: $radius;
+  border-end-end-radius: $radius;
   box-sizing: border-box;
 
   &.refresh {
@@ -255,19 +253,19 @@
     // Reset border color to prevent it from flashing black during card selection animation
     border-color: transparent;
     border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
+    border-start-start-radius: $radius;
+    border-start-end-radius: $radius;
+    border-end-start-radius: $radius;
+    border-end-end-radius: $radius;
     z-index: 1;
   }
 
   &:not(.refresh)::after {
     @include utils.base-pseudo-element;
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
+    border-start-start-radius: $radius;
+    border-start-end-radius: $radius;
+    border-end-start-radius: $radius;
+    border-end-end-radius: $radius;
     box-shadow: awsui.$shadow-container;
   }
 }
@@ -362,3 +360,31 @@ $inline-label-border-radius: 2px;
     awsui.$color-background-input-disabled
   );
 }
+
+@mixin grouped-control {
+  $radius: constants.$control-border-radius;
+  &.grouped-first {
+    border-start-start-radius: $radius;
+    border-end-start-radius: $radius;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  &.grouped-middle {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  &.grouped-last {
+    border-start-end-radius: $radius;
+    border-end-end-radius: $radius;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  &.grouped-only {
+    border-start-start-radius: $radius;
+    border-start-end-radius: $radius;
+    border-end-start-radius: $radius;
+    border-end-end-radius: $radius;
+  }
+}

package/lib/internal/scss/popover/motion.scss

@@ -3,6 +3,34 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as tokens;
+@use '../internal/styles/utils/theming' as theming;
+
+// Scopes @content to themes that opted in to $expressive-motion-themes in theming.scss.
+@mixin popover-expressive-with-motion {
+  @media (prefers-reduced-motion: no-preference) {
+    @include theming.expressive-motion-only(':not(.awsui-motion-disabled):not(.awsui-mode-entering)') {
+      @content;
+    }
+  }
+}
+
+$settle-travel: 8px;
+
+@mixin settle-keyframes($name, $from) {
+  @keyframes #{$name} {
+    from {
+      opacity: 0;
+      transform: $from;
+    }
+    60% {
+      opacity: 1;
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}
 
 .container {
   @include styles.with-motion {
@@ -16,4 +44,45 @@
       @include styles.animation-fade-in;
     }
   }
+
+  // The popover travels out from its trigger as it appears.
+  @include popover-expressive-with-motion {
+    animation: awsui-popover-settle-down 250ms cubic-bezier(0.3, 0, 0.2, 1);
+  }
+
+  &:has(.container-arrow-position-top-left, .container-arrow-position-top-center, .container-arrow-position-top-right) {
+    @include popover-expressive-with-motion {
+      animation-name: awsui-popover-settle-up;
+    }
+  }
+
+  // Keyframes translate physically, so the horizontal ones swap in RTL.
+  &:has(.container-arrow-position-right-top, .container-arrow-position-right-bottom) {
+    @include popover-expressive-with-motion {
+      animation-name: awsui-popover-settle-end;
+    }
+    @include styles.with-direction('rtl') {
+      @include popover-expressive-with-motion {
+        animation-name: awsui-popover-settle-start;
+      }
+    }
+  }
+
+  &:has(.container-arrow-position-left-top, .container-arrow-position-left-bottom) {
+    @include popover-expressive-with-motion {
+      animation-name: awsui-popover-settle-start;
+    }
+    @include styles.with-direction('rtl') {
+      @include popover-expressive-with-motion {
+        animation-name: awsui-popover-settle-end;
+      }
+    }
+  }
+}
+
+@if theming.has-expressive-motion() {
+  @include settle-keyframes(awsui-popover-settle-down, translateY(-$settle-travel));
+  @include settle-keyframes(awsui-popover-settle-up, translateY($settle-travel));
+  @include settle-keyframes(awsui-popover-settle-end, translateX(-$settle-travel));
+  @include settle-keyframes(awsui-popover-settle-start, translateX($settle-travel));
 }

package/lib/internal/scss/radio-button/styles.scss

@@ -4,6 +4,13 @@
 */
 
 @use '../internal/styles' as styles;
+@use '../internal/styles/style-api' as style-api;
+
+// The control slot is painted by the shared internal radio button, which reads the same token map.
+$control-props: style-api.combine((color, background-color, border-color), style-api.$focus-ring);
+$control-tokens: style-api.resolve($control-props, carrier);
+@include style-api.register($control-tokens);
+@include style-api.docs('control', $control-tokens);
 
 .radio-button {
   @include styles.styles-reset;

package/lib/internal/scss/segmented-control/styles.scss

@@ -43,16 +43,31 @@
     gap: calc(#{seg.$segment-gap} * 2 - #{seg.$segment-divider-width});
   }
 
-  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    display: none;
+  &:not(.grouped),
+  &.grouped-only {
+    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+      display: none;
+    }
+  }
+}
+
+.grouped {
+  @include styles.grouped-control;
+
+  &.grouped-middle,
+  &.grouped-last {
+    border-inline-start: none;
   }
 }
 
 .select {
   display: none;
 
-  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    display: block;
+  &:not(.grouped),
+  &.grouped-only {
+    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+      display: block;
+    }
   }
 }
 

package/lib/internal/scss/side-navigation/styles.scss

@@ -333,8 +333,20 @@ $content-exit-clip-delay: $content-exit-duration;
   box-sizing: content-box;
 }
 
+// Icon layout: drop the navigation header's 1px alignment border so the icon lines up with plain links.
+// (The icon-less layout compensates for it via $expandable-icon-negative-margin.)
+.expandable-link-group--expand-icon-end > div:first-child {
+  border-inline-start-width: 0;
+}
+
+// Collapsed: shrink the header wrapper to the icon square.
+.expandable-link-group--collapsed > div:first-child {
+  padding-inline: 0;
+  margin-inline: 0;
+}
+
 // Targets the ExpandableSection header wrapper (first child div of the component root).
-.expandable-link-group--active > div:first-child {
+.expandable-link-group--active:not(.expandable-link-group--collapsed) > div:first-child {
   background-color: awsui.$color-background-side-navigation-item-active;
 }
 
@@ -371,11 +383,6 @@ $content-exit-clip-delay: $content-exit-duration;
         padding-block $content-exit-motion;
     }
   }
-
-  > :first-child {
-    padding-inline: 0;
-    margin-inline: 0;
-  }
 }
 
 .section {

package/lib/internal/template/alert/styles.css.js

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_18uda_13",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_18uda_1",
-  "root": "awsui_root_mx3cw_18uda_84",
-  "hidden": "awsui_hidden_mx3cw_18uda_119",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_18uda_182",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_18uda_194",
-  "header": "awsui_header_mx3cw_18uda_199",
-  "header-replacement": "awsui_header-replacement_mx3cw_18uda_200",
-  "action": "awsui_action_mx3cw_18uda_204",
-  "action-slot": "awsui_action-slot_mx3cw_18uda_208",
-  "action-button": "awsui_action-button_mx3cw_18uda_209",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_18uda_213",
-  "icon": "awsui_icon_mx3cw_18uda_245",
-  "text": "awsui_text_mx3cw_18uda_249",
-  "message": "awsui_message_mx3cw_18uda_259",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_18uda_263",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_18uda_267",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_18uda_271",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_18uda_275",
-  "content": "awsui_content_mx3cw_18uda_279",
-  "content-replacement": "awsui_content-replacement_mx3cw_18uda_280",
-  "dismiss": "awsui_dismiss_mx3cw_18uda_284",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_18uda_290",
-  "type-error": "awsui_type-error_mx3cw_18uda_294",
-  "type-warning": "awsui_type-warning_mx3cw_18uda_302",
-  "type-success": "awsui_type-success_mx3cw_18uda_310",
-  "type-info": "awsui_type-info_mx3cw_18uda_318"
+  "alert": "awsui_alert_mx3cw_184ir_13",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_184ir_1",
+  "root": "awsui_root_mx3cw_184ir_84",
+  "hidden": "awsui_hidden_mx3cw_184ir_119",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_184ir_182",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_184ir_194",
+  "header": "awsui_header_mx3cw_184ir_199",
+  "header-replacement": "awsui_header-replacement_mx3cw_184ir_200",
+  "action": "awsui_action_mx3cw_184ir_204",
+  "action-slot": "awsui_action-slot_mx3cw_184ir_208",
+  "action-button": "awsui_action-button_mx3cw_184ir_209",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_184ir_213",
+  "icon": "awsui_icon_mx3cw_184ir_245",
+  "text": "awsui_text_mx3cw_184ir_249",
+  "message": "awsui_message_mx3cw_184ir_259",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_184ir_263",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_184ir_267",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_184ir_271",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_184ir_275",
+  "content": "awsui_content_mx3cw_184ir_279",
+  "content-replacement": "awsui_content-replacement_mx3cw_184ir_280",
+  "dismiss": "awsui_dismiss_mx3cw_184ir_284",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_184ir_290",
+  "type-error": "awsui_type-error_mx3cw_184ir_294",
+  "type-warning": "awsui_type-warning_mx3cw_184ir_302",
+  "type-success": "awsui_type-success_mx3cw_184ir_310",
+  "type-info": "awsui_type-info_mx3cw_184ir_318"
 };
   

package/lib/internal/template/alert/styles.scoped.css

@@ -10,10 +10,10 @@ 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
 */
-.awsui_alert_mx3cw_18uda_13:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_mx3cw_18uda_1 var(--motion-duration-show-paced-i87eux, 180ms) var(--motion-easing-show-paced-r4ee22, ease-out);
+.awsui_alert_mx3cw_184ir_13:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_mx3cw_184ir_1 var(--motion-duration-show-paced-i87eux, 180ms) var(--motion-easing-show-paced-r4ee22, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_mx3cw_18uda_1 {
+@keyframes awsui_awsui-motion-fade-in_mx3cw_184ir_1 {
   from {
     opacity: 0.2;
   }
@@ -22,12 +22,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_alert_mx3cw_18uda_13:not(#\9) {
+  .awsui_alert_mx3cw_184ir_13:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_alert_mx3cw_18uda_13:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_18uda_13:not(#\9) {
+.awsui-motion-disabled .awsui_alert_mx3cw_184ir_13:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_184ir_13:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -81,7 +81,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inherits: false;
 }
 /* awsui:style-api-slot name=root tokens=color, background-color, border-color, border-width, border-radius, padding-block, padding-inline, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline */
-.awsui_root_mx3cw_18uda_84:not(#\9) {
+.awsui_root_mx3cw_184ir_84:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -116,11 +116,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: hidden;
   display: block;
 }
-.awsui_root_mx3cw_18uda_84.awsui_hidden_mx3cw_18uda_119:not(#\9) {
+.awsui_root_mx3cw_184ir_84.awsui_hidden_mx3cw_184ir_119:not(#\9) {
   display: none;
 }
 
-.awsui_alert_mx3cw_18uda_13:not(#\9) {
+.awsui_alert_mx3cw_184ir_13:not(#\9) {
   --awsui-internal-style-color: var(--awsui-style-color);
   --awsui-internal-style-background-color: var(--awsui-style-background-color);
   --awsui-internal-style-border-color: var(--awsui-style-border-color);
@@ -179,7 +179,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--awsui-internal-style-background-color, var(--color-background-container-content-mjfil9, #ffffff));
 }
 
-.awsui_alert-wrapper_mx3cw_18uda_182:not(#\9) {
+.awsui_alert-wrapper_mx3cw_184ir_182:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: row;
@@ -187,46 +187,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   column-gap: var(--space-alert-action-left-6trzof, 20px);
 }
 
-.awsui_hidden_mx3cw_18uda_119:not(#\9) {
+.awsui_hidden_mx3cw_184ir_119:not(#\9) {
   display: none;
 }
 
-.awsui_initial-hidden_mx3cw_18uda_194:not(#\9) {
+.awsui_initial-hidden_mx3cw_184ir_194:not(#\9) {
   overflow: hidden;
   block-size: 0;
 }
 
-.awsui_header_mx3cw_18uda_199:not(#\9),
-.awsui_header-replacement_mx3cw_18uda_200:not(#\9) {
+.awsui_header_mx3cw_184ir_199:not(#\9),
+.awsui_header-replacement_mx3cw_184ir_200:not(#\9) {
   font-weight: var(--font-weight-alert-header-ym3e4s, 700);
 }
 
-.awsui_action_mx3cw_18uda_204:not(#\9) {
+.awsui_action_mx3cw_184ir_204:not(#\9) {
   white-space: nowrap;
 }
 
-.awsui_action-slot_mx3cw_18uda_208:not(#\9),
-.awsui_action-button_mx3cw_18uda_209:not(#\9) {
+.awsui_action-slot_mx3cw_184ir_208:not(#\9),
+.awsui_action-button_mx3cw_184ir_209:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_alert-focus-wrapper_mx3cw_18uda_213:not(#\9) {
+.awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9) {
   flex: 1;
   min-inline-size: 70%;
   display: grid;
   grid-template-columns: min-content auto;
 }
-.awsui_alert-focus-wrapper_mx3cw_18uda_213:not(#\9):focus {
+.awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_18uda_213:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_18uda_213:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, var(--space-button-focus-outline-gutter-dzjnny, 3px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_18uda_213:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -234,91 +234,91 @@ body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_18uda_213:n
   inset-block-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-block, var(--space-button-focus-outline-gutter-dzjnny, 3px)));
   inline-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-inline, var(--space-button-focus-outline-gutter-dzjnny, 3px)) + var(--awsui-internal-style-focus-ring-gutter-inline, var(--space-button-focus-outline-gutter-dzjnny, 3px)));
   block-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-block, var(--space-button-focus-outline-gutter-dzjnny, 3px)) + var(--awsui-internal-style-focus-ring-gutter-block, var(--space-button-focus-outline-gutter-dzjnny, 3px)));
-  border-start-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
-  border-start-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
-  border-end-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
-  border-end-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
-  box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-alert-focus-ring-border-width-66120l, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-alert-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #0073bb)));
+  border-start-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-ka4djm, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
+  border-start-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-ka4djm, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
+  border-end-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-ka4djm, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
+  border-end-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-alert-focus-ring-border-radius-ka4djm, var(--border-radius-control-default-focus-ring-akwhsf, 2px)));
+  box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-alert-focus-ring-border-width-ka4djm, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-alert-focus-ring-border-color-ka4djm, var(--color-border-item-focused-sewkzn, #0073bb)));
 }
 
 /* awsui:style-api-slot name=icon tokens=color */
-.awsui_icon_mx3cw_18uda_245:not(#\9) {
+.awsui_icon_mx3cw_184ir_245:not(#\9) {
   --awsui-internal-style-color: var(--awsui-style-color);
 }
 
-.awsui_text_mx3cw_18uda_249:not(#\9) {
+.awsui_text_mx3cw_184ir_249:not(#\9) {
   min-inline-size: 0;
   padding-block: var(--border-width-button-lffd4t, 1px);
   padding-inline: 0;
   margin-block: var(--space-scaled-xxs-j00t0m, 4px);
   margin-inline: var(--space-xxs-3o1yoq, 4px);
 }
-.awsui_text_mx3cw_18uda_249.awsui_icon_mx3cw_18uda_245:not(#\9) {
+.awsui_text_mx3cw_184ir_249.awsui_icon_mx3cw_184ir_245:not(#\9) {
   margin-inline-start: 0;
 }
-.awsui_text_mx3cw_18uda_249.awsui_message_mx3cw_18uda_259:not(#\9) {
+.awsui_text_mx3cw_184ir_249.awsui_message_mx3cw_184ir_259:not(#\9) {
   margin-inline-end: var(--space-alert-message-right-3i2sx2, 0px);
 }
 
-.awsui_action-wrapped_mx3cw_18uda_263:not(#\9) {
+.awsui_action-wrapped_mx3cw_184ir_263:not(#\9) {
   margin-block-end: var(--space-xxs-3o1yoq, 4px);
 }
 
-.awsui_icon-size-medium_mx3cw_18uda_267 > .awsui_alert-wrapper_mx3cw_18uda_182 > .awsui_action-wrapped_mx3cw_18uda_263:not(#\9) {
+.awsui_icon-size-medium_mx3cw_184ir_267 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_action-wrapped_mx3cw_184ir_263:not(#\9) {
   margin-inline-start: calc(var(--size-icon-medium-0cbske, 16px) + var(--space-xs-m9b7jf, 8px));
 }
 
-.awsui_icon-size-big_mx3cw_18uda_271 > .awsui_alert-wrapper_mx3cw_18uda_182 > .awsui_action-wrapped_mx3cw_18uda_263:not(#\9) {
+.awsui_icon-size-big_mx3cw_184ir_271 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_action-wrapped_mx3cw_184ir_263:not(#\9) {
   margin-inline-start: calc(var(--size-icon-big-z6z1yl, 32px) + var(--space-xs-m9b7jf, 8px));
 }
 
-.awsui_icon-size-normal_mx3cw_18uda_275 > .awsui_alert-wrapper_mx3cw_18uda_182 > .awsui_action-wrapped_mx3cw_18uda_263:not(#\9) {
+.awsui_icon-size-normal_mx3cw_184ir_275 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_action-wrapped_mx3cw_184ir_263:not(#\9) {
   margin-inline-start: calc(var(--size-icon-normal-311gry, 16px) + var(--space-xs-m9b7jf, 8px));
 }
 
-.awsui_content_mx3cw_18uda_279:not(#\9),
-.awsui_content-replacement_mx3cw_18uda_280:not(#\9) {
+.awsui_content_mx3cw_184ir_279:not(#\9),
+.awsui_content-replacement_mx3cw_184ir_280:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_dismiss_mx3cw_18uda_284:not(#\9) {
+.awsui_dismiss_mx3cw_184ir_284:not(#\9) {
   margin-inline-end: calc(-1 * var(--space-xxs-3o1yoq, 4px));
   margin-inline-start: var(--space-s-kll7oj, 12px);
 }
 
 /* awsui:style-api-slot name=dismissButton component=button slot=root */
-.awsui_dismiss-button_mx3cw_18uda_290:not(#\9) {
+.awsui_dismiss-button_mx3cw_184ir_290:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_type-error_mx3cw_18uda_294:not(#\9) {
+.awsui_type-error_mx3cw_184ir_294:not(#\9) {
   border-color: var(--awsui-internal-style-border-color, var(--color-border-status-error-nczvil, #d13212));
   background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-error-dpj69i, #fdf3f1));
 }
-.awsui_type-error_mx3cw_18uda_294 > .awsui_alert-wrapper_mx3cw_18uda_182 > .awsui_alert-focus-wrapper_mx3cw_18uda_213 > .awsui_icon_mx3cw_18uda_245:not(#\9) {
-  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-66120l, var(--color-text-alert-icon-error-6ivbnd, #d13212)));
+.awsui_type-error_mx3cw_184ir_294 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_alert-focus-wrapper_mx3cw_184ir_213 > .awsui_icon_mx3cw_184ir_245:not(#\9) {
+  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-ka4djm, var(--color-text-alert-icon-error-6ivbnd, #d13212)));
 }
 
-.awsui_type-warning_mx3cw_18uda_302:not(#\9) {
+.awsui_type-warning_mx3cw_184ir_302:not(#\9) {
   border-color: var(--awsui-internal-style-border-color, var(--color-border-status-warning-zj1tu9, #906806));
   background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-warning-021z3n, #fffef0));
 }
-.awsui_type-warning_mx3cw_18uda_302 > .awsui_alert-wrapper_mx3cw_18uda_182 > .awsui_alert-focus-wrapper_mx3cw_18uda_213 > .awsui_icon_mx3cw_18uda_245:not(#\9) {
-  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-66120l, var(--color-text-alert-icon-warning-lan9qr, #906806)));
+.awsui_type-warning_mx3cw_184ir_302 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_alert-focus-wrapper_mx3cw_184ir_213 > .awsui_icon_mx3cw_184ir_245:not(#\9) {
+  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-ka4djm, var(--color-text-alert-icon-warning-lan9qr, #906806)));
 }
 
-.awsui_type-success_mx3cw_18uda_310:not(#\9) {
+.awsui_type-success_mx3cw_184ir_310:not(#\9) {
   border-color: var(--awsui-internal-style-border-color, var(--color-border-status-success-zsy8d6, #1d8102));
   background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-success-9dyn87, #f2f8f0));
 }
-.awsui_type-success_mx3cw_18uda_310 > .awsui_alert-wrapper_mx3cw_18uda_182 > .awsui_alert-focus-wrapper_mx3cw_18uda_213 > .awsui_icon_mx3cw_18uda_245:not(#\9) {
-  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-66120l, var(--color-text-alert-icon-success-1ldpm2, #1d8102)));
+.awsui_type-success_mx3cw_184ir_310 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_alert-focus-wrapper_mx3cw_184ir_213 > .awsui_icon_mx3cw_184ir_245:not(#\9) {
+  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-ka4djm, var(--color-text-alert-icon-success-1ldpm2, #1d8102)));
 }
 
-.awsui_type-info_mx3cw_18uda_318:not(#\9) {
+.awsui_type-info_mx3cw_184ir_318:not(#\9) {
   border-color: var(--awsui-internal-style-border-color, var(--color-border-status-info-e5c14y, #0073bb));
   background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-info-lqhdg0, #f1faff));
 }
-.awsui_type-info_mx3cw_18uda_318 > .awsui_alert-wrapper_mx3cw_18uda_182 > .awsui_alert-focus-wrapper_mx3cw_18uda_213 > .awsui_icon_mx3cw_18uda_245:not(#\9) {
-  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-66120l, var(--color-text-alert-icon-info-ud5q0o, #0073bb)));
+.awsui_type-info_mx3cw_184ir_318 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_alert-focus-wrapper_mx3cw_184ir_213 > .awsui_icon_mx3cw_184ir_245:not(#\9) {
+  color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-ka4djm, var(--color-text-alert-icon-info-ud5q0o, #0073bb)));
 }

package/lib/internal/template/alert/styles.selectors.js

@@ -2,32 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "alert": "awsui_alert_mx3cw_18uda_13",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_18uda_1",
-  "root": "awsui_root_mx3cw_18uda_84",
-  "hidden": "awsui_hidden_mx3cw_18uda_119",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_18uda_182",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_18uda_194",
-  "header": "awsui_header_mx3cw_18uda_199",
-  "header-replacement": "awsui_header-replacement_mx3cw_18uda_200",
-  "action": "awsui_action_mx3cw_18uda_204",
-  "action-slot": "awsui_action-slot_mx3cw_18uda_208",
-  "action-button": "awsui_action-button_mx3cw_18uda_209",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_18uda_213",
-  "icon": "awsui_icon_mx3cw_18uda_245",
-  "text": "awsui_text_mx3cw_18uda_249",
-  "message": "awsui_message_mx3cw_18uda_259",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_18uda_263",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_18uda_267",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_18uda_271",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_18uda_275",
-  "content": "awsui_content_mx3cw_18uda_279",
-  "content-replacement": "awsui_content-replacement_mx3cw_18uda_280",
-  "dismiss": "awsui_dismiss_mx3cw_18uda_284",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_18uda_290",
-  "type-error": "awsui_type-error_mx3cw_18uda_294",
-  "type-warning": "awsui_type-warning_mx3cw_18uda_302",
-  "type-success": "awsui_type-success_mx3cw_18uda_310",
-  "type-info": "awsui_type-info_mx3cw_18uda_318"
+  "alert": "awsui_alert_mx3cw_184ir_13",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_184ir_1",
+  "root": "awsui_root_mx3cw_184ir_84",
+  "hidden": "awsui_hidden_mx3cw_184ir_119",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_184ir_182",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_184ir_194",
+  "header": "awsui_header_mx3cw_184ir_199",
+  "header-replacement": "awsui_header-replacement_mx3cw_184ir_200",
+  "action": "awsui_action_mx3cw_184ir_204",
+  "action-slot": "awsui_action-slot_mx3cw_184ir_208",
+  "action-button": "awsui_action-button_mx3cw_184ir_209",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_184ir_213",
+  "icon": "awsui_icon_mx3cw_184ir_245",
+  "text": "awsui_text_mx3cw_184ir_249",
+  "message": "awsui_message_mx3cw_184ir_259",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_184ir_263",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_184ir_267",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_184ir_271",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_184ir_275",
+  "content": "awsui_content_mx3cw_184ir_279",
+  "content-replacement": "awsui_content-replacement_mx3cw_184ir_280",
+  "dismiss": "awsui_dismiss_mx3cw_184ir_284",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_184ir_290",
+  "type-error": "awsui_type-error_mx3cw_184ir_294",
+  "type-warning": "awsui_type-warning_mx3cw_184ir_302",
+  "type-success": "awsui_type-success_mx3cw_184ir_310",
+  "type-info": "awsui_type-info_mx3cw_184ir_318"
 };