@cloudscape-design/components-themeable 3.0.1128 → 3.0.1130

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "191a662b65e959b58aeb249b8f15b8dd4e730a81"
+  "commit": "f44f577a80c4e032cf4e4fc68a9f9f3fea0bb43b"
 }

package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss

@@ -50,7 +50,7 @@ $ai-drawer-heider-height: 41px;
   }
 
   @include desktop-only {
-    &:not(.legacy):not(.ai-drawer) {
+    &:not(.legacy):not(.ai-drawer):not(.bottom-drawer) {
       border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
     }
   }

package/lib/internal/scss/input/styles.scss

@@ -5,8 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/styles/foundation' as foundation;
-@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 @mixin placeholder {
   &::-webkit-input-placeholder {
@@ -35,70 +33,35 @@
   @include styles.styles-reset;
   padding-block: styles.$control-padding-vertical;
   padding-inline: styles.$control-padding-horizontal;
-  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default);
+  color: awsui.$color-text-body-default;
   inline-size: 100%;
   cursor: text;
   box-sizing: border-box;
-  background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
+  background-color: awsui.$color-background-input-default;
   border-start-start-radius: styles.$control-border-radius;
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
-
-  border-block: awsui.$border-width-field solid
-    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
-  border-inline: awsui.$border-width-field solid
-    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
-
-  box-shadow: var(#{custom-props.$styleBoxShadowDefault});
-
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
   @include styles.font-body-m;
   block-size: awsui.$size-vertical-input;
 
   &.input-readonly {
-    @include styles.form-readonly-element(
-      $background-color: var(
-          #{custom-props.$styleBackgroundReadonly},
-          var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
-        ),
-      $border-color: var(
-          #{custom-props.$styleBorderColorReadonly},
-          var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
-        )
-    );
-    color: var(
-      #{custom-props.$styleColorReadonly},
-      var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default)
-    );
-    box-shadow: var(#{custom-props.$styleBoxShadowReadonly});
+    @include styles.form-readonly-element;
   }
 
   @include placeholder {
-    @include styles.form-placeholder(
-      $color: var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder),
-      $font-size: var(#{custom-props.$stylePlaceholderFontSize}),
-      $font-style: var(#{custom-props.$stylePlaceholderFontStyle}, italic),
-      $font-weight: var(#{custom-props.$stylePlaceholderFontWeight})
-    );
+    @include styles.form-placeholder;
   }
 
   &:focus {
-    @include styles.form-focus-element(
-      $border-color: var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused),
-      $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
-    );
-    color: var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default);
-    background-color: var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default);
+    @include styles.form-focus-element;
   }
 
   &:disabled {
-    @include styles.form-disabled-element(
-      $background-color: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled),
-      $border-color: var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled),
-      $color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled),
-      $cursor: default
-    );
-    box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
+    @include styles.form-disabled-element;
+    cursor: default;
     @include placeholder {
       @include styles.form-placeholder-disabled;
     }
@@ -109,22 +72,6 @@
     box-shadow: none;
   }
 
-  &:hover:not(:focus):not(:disabled):not(.input-readonly) {
-    border-color: var(
-      #{custom-props.$styleBorderColorHover},
-      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
-    );
-    color: var(
-      #{custom-props.$styleColorHover},
-      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
-    );
-    background-color: var(
-      #{custom-props.$styleBackgroundHover},
-      var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
-    );
-    box-shadow: var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault});
-  }
-
   &.input-invalid {
     @include styles.form-invalid-control();
     &.input-has-icon-left {

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,103 +1,91 @@
 
     // Build environment
-    $awsui-commit-hash: "191a662b";
+    $awsui-commit-hash: "f44f577a";
     // Manually managed CSS-variables
-    $maxContentWidth: --awsui-max-content-width-b75yp7;
-$minContentWidth: --awsui-min-content-width-b75yp7;
-$breadcrumbsGap: --awsui-breadcrumbs-gap-b75yp7;
-$contentGapLeft: --awsui-content-gap-left-b75yp7;
-$contentGapRight: --awsui-content-gap-right-b75yp7;
-$contentHeight: --awsui-content-height-b75yp7;
-$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-b75yp7;
-$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-b75yp7;
-$contentLayoutMainGap: --awsui-content-layout-main-gap-b75yp7;
-$defaultMaxContentWidth: --awsui-default-max-content-width-b75yp7;
-$defaultMinContentWidth: --awsui-default-min-content-width-b75yp7;
-$drawerSize: --awsui-drawer-size-b75yp7;
-$drawerMinSize: --awsui-drawer-min-size-b75yp7;
-$bottomDrawerSize: --awsui-bottom-drawer-size-b75yp7;
-$footerHeight: --awsui-footer-height-b75yp7;
-$headerGap: --awsui-header-gap-b75yp7;
-$headerHeight: --awsui-header-height-b75yp7;
-$layoutWidth: --awsui-layout-width-b75yp7;
-$mainGap: --awsui-main-gap-b75yp7;
-$mainOffsetLeft: --awsui-main-offset-left-b75yp7;
-$mainTemplateRows: --awsui-main-template-rows-b75yp7;
-$mobileBarHeight: --awsui-mobile-bar-height-b75yp7;
-$notificationsHeight: --awsui-notifications-height-b75yp7;
-$offsetTop: --awsui-offset-top-b75yp7;
-$overlapHeight: --awsui-overlap-height-b75yp7;
-$navigationWidth: --awsui-navigation-width-b75yp7;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-b75yp7;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-b75yp7;
-$splitPanelHeight: --awsui-split-panel-height-b75yp7;
-$splitPanelMinWidth: --awsui-split-panel-min-width-b75yp7;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-b75yp7;
-$toolsMaxWidth: --awsui-tools-max-width-b75yp7;
-$toolsWidth: --awsui-tools-width-b75yp7;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-b75yp7;
-$contentScrollMargin: --awsui-content-scroll-margin-b75yp7;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-b75yp7;
-$flashbarStackIndex: --awsui-flashbar-stack-index-b75yp7;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-b75yp7;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-b75yp7;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-b75yp7;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-b75yp7;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-b75yp7;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-b75yp7;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-b75yp7;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-b75yp7;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-b75yp7;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-b75yp7;
-$sliderLabelCount: --awsui-slider-label-count-b75yp7;
-$sliderTickCount: --awsui-slider-tick-count-b75yp7;
-$sliderReferenceColumn: --awsui-slider-reference-column-b75yp7;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-b75yp7;
-$sliderMaxStart: --awsui-slider-max-start-b75yp7;
-$sliderMinEnd: --awsui-slider-min-end-b75yp7;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-b75yp7;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-b75yp7;
-$togglesLeftWidth: --awsui-toggles-left-width-b75yp7;
-$togglesRightWidth: --awsui-toggles-right-width-b75yp7;
-$promptInputMaxRows: --awsui-prompt-input-max-rows-b75yp7;
-$promptInputScrollHeight: --awsui-prompt-input-scroll-height-b75yp7;
-$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-b75yp7;
-$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-b75yp7;
-$styleBackgroundActive: --awsui-style-background-active-b75yp7;
-$styleBackgroundDefault: --awsui-style-background-default-b75yp7;
-$styleBackgroundDisabled: --awsui-style-background-disabled-b75yp7;
-$styleBackgroundHover: --awsui-style-background-hover-b75yp7;
-$styleBorderColorActive: --awsui-style-border-color-active-b75yp7;
-$styleBorderColorDefault: --awsui-style-border-color-default-b75yp7;
-$styleBorderColorDisabled: --awsui-style-border-color-disabled-b75yp7;
-$styleBorderColorHover: --awsui-style-border-color-hover-b75yp7;
-$styleColorActive: --awsui-style-color-active-b75yp7;
-$styleColorDefault: --awsui-style-color-default-b75yp7;
-$styleColorDisabled: --awsui-style-color-disabled-b75yp7;
-$styleColorHover: --awsui-style-color-hover-b75yp7;
-$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-b75yp7;
-$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-b75yp7;
-$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-b75yp7;
-$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-b75yp7;
-$styleBoxShadowActive: --awsui-style-box-shadow-active-b75yp7;
-$styleBoxShadowDefault: --awsui-style-box-shadow-default-b75yp7;
-$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-b75yp7;
-$styleBoxShadowHover: --awsui-style-box-shadow-hover-b75yp7;
-$styleBackgroundReadonly: --awsui-style-background-readonly-b75yp7;
-$styleBorderColorReadonly: --awsui-style-border-color-readonly-b75yp7;
-$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-b75yp7;
-$styleColorReadonly: --awsui-style-color-readonly-b75yp7;
-$styleBackgroundFocus: --awsui-style-background-focus-b75yp7;
-$styleBorderColorFocus: --awsui-style-border-color-focus-b75yp7;
-$styleBoxShadowFocus: --awsui-style-box-shadow-focus-b75yp7;
-$styleColorFocus: --awsui-style-color-focus-b75yp7;
-$stylePlaceholderColor: --awsui-style-placeholder-color-b75yp7;
-$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-b75yp7;
-$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-b75yp7;
-$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-b75yp7;
-$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-b75yp7;
-$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-b75yp7;
-$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-b75yp7;
-$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-b75yp7;
-$alertIconColor: --awsui-alert-icon-color-b75yp7;
+    $maxContentWidth: --awsui-max-content-width-lqnbqg;
+$minContentWidth: --awsui-min-content-width-lqnbqg;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-lqnbqg;
+$contentGapLeft: --awsui-content-gap-left-lqnbqg;
+$contentGapRight: --awsui-content-gap-right-lqnbqg;
+$contentHeight: --awsui-content-height-lqnbqg;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-lqnbqg;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-lqnbqg;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-lqnbqg;
+$defaultMaxContentWidth: --awsui-default-max-content-width-lqnbqg;
+$defaultMinContentWidth: --awsui-default-min-content-width-lqnbqg;
+$drawerSize: --awsui-drawer-size-lqnbqg;
+$drawerMinSize: --awsui-drawer-min-size-lqnbqg;
+$bottomDrawerSize: --awsui-bottom-drawer-size-lqnbqg;
+$footerHeight: --awsui-footer-height-lqnbqg;
+$headerGap: --awsui-header-gap-lqnbqg;
+$headerHeight: --awsui-header-height-lqnbqg;
+$layoutWidth: --awsui-layout-width-lqnbqg;
+$mainGap: --awsui-main-gap-lqnbqg;
+$mainOffsetLeft: --awsui-main-offset-left-lqnbqg;
+$mainTemplateRows: --awsui-main-template-rows-lqnbqg;
+$mobileBarHeight: --awsui-mobile-bar-height-lqnbqg;
+$notificationsHeight: --awsui-notifications-height-lqnbqg;
+$offsetTop: --awsui-offset-top-lqnbqg;
+$overlapHeight: --awsui-overlap-height-lqnbqg;
+$navigationWidth: --awsui-navigation-width-lqnbqg;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-lqnbqg;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-lqnbqg;
+$splitPanelHeight: --awsui-split-panel-height-lqnbqg;
+$splitPanelMinWidth: --awsui-split-panel-min-width-lqnbqg;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-lqnbqg;
+$toolsMaxWidth: --awsui-tools-max-width-lqnbqg;
+$toolsWidth: --awsui-tools-width-lqnbqg;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-lqnbqg;
+$contentScrollMargin: --awsui-content-scroll-margin-lqnbqg;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-lqnbqg;
+$flashbarStackIndex: --awsui-flashbar-stack-index-lqnbqg;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-lqnbqg;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-lqnbqg;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-lqnbqg;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-lqnbqg;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-lqnbqg;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-lqnbqg;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-lqnbqg;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-lqnbqg;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-lqnbqg;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-lqnbqg;
+$sliderLabelCount: --awsui-slider-label-count-lqnbqg;
+$sliderTickCount: --awsui-slider-tick-count-lqnbqg;
+$sliderReferenceColumn: --awsui-slider-reference-column-lqnbqg;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-lqnbqg;
+$sliderMaxStart: --awsui-slider-max-start-lqnbqg;
+$sliderMinEnd: --awsui-slider-min-end-lqnbqg;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-lqnbqg;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-lqnbqg;
+$togglesLeftWidth: --awsui-toggles-left-width-lqnbqg;
+$togglesRightWidth: --awsui-toggles-right-width-lqnbqg;
+$promptInputMaxRows: --awsui-prompt-input-max-rows-lqnbqg;
+$promptInputScrollHeight: --awsui-prompt-input-scroll-height-lqnbqg;
+$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-lqnbqg;
+$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-lqnbqg;
+$styleBackgroundActive: --awsui-style-background-active-lqnbqg;
+$styleBackgroundDefault: --awsui-style-background-default-lqnbqg;
+$styleBackgroundDisabled: --awsui-style-background-disabled-lqnbqg;
+$styleBackgroundHover: --awsui-style-background-hover-lqnbqg;
+$styleBorderColorActive: --awsui-style-border-color-active-lqnbqg;
+$styleBorderColorDefault: --awsui-style-border-color-default-lqnbqg;
+$styleBorderColorDisabled: --awsui-style-border-color-disabled-lqnbqg;
+$styleBorderColorHover: --awsui-style-border-color-hover-lqnbqg;
+$styleColorActive: --awsui-style-color-active-lqnbqg;
+$styleColorDefault: --awsui-style-color-default-lqnbqg;
+$styleColorDisabled: --awsui-style-color-disabled-lqnbqg;
+$styleColorHover: --awsui-style-color-hover-lqnbqg;
+$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-lqnbqg;
+$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-lqnbqg;
+$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-lqnbqg;
+$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-lqnbqg;
+$styleBoxShadowActive: --awsui-style-box-shadow-active-lqnbqg;
+$styleBoxShadowDefault: --awsui-style-box-shadow-default-lqnbqg;
+$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-lqnbqg;
+$styleBoxShadowHover: --awsui-style-box-shadow-hover-lqnbqg;
+$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-lqnbqg;
+$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-lqnbqg;
+$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-lqnbqg;
+$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-lqnbqg;
+$alertIconColor: --awsui-alert-icon-color-lqnbqg;
     

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

@@ -113,36 +113,27 @@
 
 // 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
-) {
+@mixin form-focus-element($border-radius: constants.$control-border-radius) {
   // Using a special transparent outline only visible in Windows High Contrast Mode.
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border-block: awsui.$border-width-field solid $border-color;
-  border-inline: awsui.$border-width-field solid $border-color;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-focused;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-focused;
   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;
+  box-shadow: foundation.$box-shadow-focused-light;
 }
 
-@mixin form-disabled-element(
-  $background-color: awsui.$color-background-input-disabled,
-  $border-color: awsui.$color-border-input-disabled,
-  $color: awsui.$color-text-input-disabled,
-  $cursor: auto
-) {
-  background-color: $background-color;
-  border-block: awsui.$border-width-field solid $border-color;
-  border-inline: awsui.$border-width-field solid $border-color;
-  color: $color;
-  cursor: $cursor;
+@mixin form-disabled-element {
+  background-color: awsui.$color-background-input-disabled;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  color: awsui.$color-text-input-disabled;
+  cursor: auto;
 }
 
 @mixin button-trigger-disabled-element {
@@ -153,13 +144,10 @@
   cursor: auto;
 }
 
-@mixin form-readonly-element(
-  $background-color: awsui.$color-background-input-default,
-  $border-color: awsui.$color-border-input-disabled
-) {
-  background-color: $background-color;
-  border-block: awsui.$border-width-field solid $border-color;
-  border-inline: awsui.$border-width-field solid $border-color;
+@mixin form-readonly-element {
+  background-color: awsui.$color-background-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
 }
 
 @mixin button-trigger-readonly-element {
@@ -168,24 +156,13 @@
   border-inline: awsui.$border-width-token solid awsui.$color-border-input-disabled;
 }
 
-@mixin form-placeholder(
-  $color: awsui.$color-text-input-placeholder,
-  $font-size: null,
-  $font-style: italic,
-  $font-weight: null
-) {
-  color: $color;
-  @if $font-size {
-    font-size: $font-size;
-  }
-  font-style: $font-style;
-  @if $font-weight {
-    font-weight: $font-weight;
-  }
+@mixin form-placeholder {
+  color: awsui.$color-text-input-placeholder;
+  font-style: italic;
 }
 
-@mixin form-placeholder-disabled($color: awsui.$color-text-input-placeholder-disabled) {
-  color: $color;
+@mixin form-placeholder-disabled {
+  color: awsui.$color-text-input-placeholder-disabled;
 }
 
 @mixin form-control-description {

package/lib/internal/scss/steps/styles.scss

@@ -8,6 +8,7 @@
 
 .root {
   @include styles.styles-reset;
+  @include styles.text-wrapping;
 
   > .list {
     list-style: none;
@@ -20,6 +21,8 @@
       grid-template-rows: minmax(awsui.$space-static-l, auto);
 
       > .header {
+        display: flex;
+        gap: awsui.$space-xxs;
         grid-row: 1;
         grid-column: 1 / span 2;
       }
@@ -49,5 +52,65 @@
     > :last-of-type > .connector {
       display: none;
     }
+
+    &.custom > .details {
+      // Remove built-in margins for custom rendering for maximum flexibility
+      margin-block-end: 0;
+    }
+  }
+}
+
+.horizontal {
+  > .list {
+    display: grid;
+    align-items: flex-start;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    grid-auto-flow: column;
+
+    > .container {
+      display: grid;
+      grid-template-columns: awsui.$space-static-l 1fr;
+      grid-template-rows: minmax(awsui.$space-static-l, auto);
+      align-items: center;
+
+      > .header {
+        display: flex;
+        grid-row: 1;
+        grid-column: 1 / span 2;
+        align-items: center;
+
+        > .connector {
+          display: block;
+          flex: 1;
+          background-color: awsui.$color-border-divider-default;
+          margin-block: 0;
+          border-block: 0;
+          border-inline: 0;
+          min-block-size: 0;
+          inset-inline-end: 0;
+
+          block-size: awsui.$border-divider-list-width;
+          inline-size: auto;
+          min-inline-size: awsui.$space-static-xs;
+          margin-inline-end: awsui.$space-static-xxs;
+        }
+      }
+
+      > .horizontal-header {
+        grid-row: 2;
+        grid-column: 1 / span 3;
+      }
+
+      > .details {
+        grid-row: 3;
+        grid-column: 1 / span 3;
+      }
+    }
+
+    > .container:last-child {
+      > .header > .connector {
+        display: none;
+      }
+    }
   }
 }

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

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_1bu84_193",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1bu84_1",
-  "root": "awsui_root_mx3cw_1bu84_215",
-  "hidden": "awsui_hidden_mx3cw_1bu84_250",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_1bu84_299",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_1bu84_311",
-  "header": "awsui_header_mx3cw_1bu84_316",
-  "header-replacement": "awsui_header-replacement_mx3cw_1bu84_317",
-  "action": "awsui_action_mx3cw_1bu84_321",
-  "action-slot": "awsui_action-slot_mx3cw_1bu84_325",
-  "action-button": "awsui_action-button_mx3cw_1bu84_326",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1bu84_330",
-  "text": "awsui_text_mx3cw_1bu84_361",
-  "icon": "awsui_icon_mx3cw_1bu84_368",
-  "message": "awsui_message_mx3cw_1bu84_371",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_1bu84_375",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1bu84_379",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_1bu84_383",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1bu84_387",
-  "content": "awsui_content_mx3cw_1bu84_391",
-  "content-replacement": "awsui_content-replacement_mx3cw_1bu84_392",
-  "dismiss": "awsui_dismiss_mx3cw_1bu84_396",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_1bu84_401",
-  "type-error": "awsui_type-error_mx3cw_1bu84_405",
-  "type-warning": "awsui_type-warning_mx3cw_1bu84_413",
-  "type-success": "awsui_type-success_mx3cw_1bu84_421",
-  "type-info": "awsui_type-info_mx3cw_1bu84_429"
+  "alert": "awsui_alert_mx3cw_1yivi_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1yivi_1",
+  "root": "awsui_root_mx3cw_1yivi_215",
+  "hidden": "awsui_hidden_mx3cw_1yivi_250",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_1yivi_299",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_1yivi_311",
+  "header": "awsui_header_mx3cw_1yivi_316",
+  "header-replacement": "awsui_header-replacement_mx3cw_1yivi_317",
+  "action": "awsui_action_mx3cw_1yivi_321",
+  "action-slot": "awsui_action-slot_mx3cw_1yivi_325",
+  "action-button": "awsui_action-button_mx3cw_1yivi_326",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1yivi_330",
+  "text": "awsui_text_mx3cw_1yivi_361",
+  "icon": "awsui_icon_mx3cw_1yivi_368",
+  "message": "awsui_message_mx3cw_1yivi_371",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_1yivi_375",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1yivi_379",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_1yivi_383",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1yivi_387",
+  "content": "awsui_content_mx3cw_1yivi_391",
+  "content-replacement": "awsui_content-replacement_mx3cw_1yivi_392",
+  "dismiss": "awsui_dismiss_mx3cw_1yivi_396",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_1yivi_401",
+  "type-error": "awsui_type-error_mx3cw_1yivi_405",
+  "type-warning": "awsui_type-warning_mx3cw_1yivi_413",
+  "type-success": "awsui_type-success_mx3cw_1yivi_421",
+  "type-info": "awsui_type-info_mx3cw_1yivi_429"
 };