npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1331 → 3.0.1333 - Mend

@cloudscape-design/components-themeable 3.0.1331 → 3.0.1333

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (224) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "fcf95ed76c7260846f3bb09da02414f4f8f649dc"
+  "commit": "0404a6355e2e8056d2df2fc4096395b0d1588e1b"
 }

package/lib/internal/scss/app-layout/constants.scss CHANGED Viewed

@@ -35,4 +35,8 @@ $toolbar-z-index: 1000;
 // Shared toolbar drawer component values
 $toolbar-vertical-panel-icon-offset: 14px;
+// Default collapsed navigation rail width
+$navigation-collapsed-width-default: 54px;
+$ai-drawer-background: #161d26;
 $ai-drawer-background: awsui.$color-background-layout-ai-drawer;

package/lib/internal/scss/app-layout/visual-refresh-toolbar/navigation/styles.scss CHANGED Viewed

@@ -8,6 +8,14 @@
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../../constants.scss' as constants;
+$collapsed-width: var(#{custom-props.$navigationCollapsedWidth}, constants.$navigation-collapsed-width-default);
+.hide-navigation {
+  position: absolute;
+  inset-inline-end: awsui.$space-m;
+  inset-block-start: constants.$toolbar-vertical-panel-icon-offset;
+}
 // This wrapper clips the actual navigation content during the enter animation.
 .navigation-container {
   position: sticky;
@@ -20,13 +28,6 @@
   display: flex;
   flex-direction: column;
-  // All content is hidden by the overflow-x property
-  &:not(.is-navigation-open) {
-    inline-size: 0px;
-    // We need to hide the closed panel to make containing focusable elements not focusable anymore.
-    display: none;
-  }
   & > .navigation {
     flex-grow: 1;
     block-size: 100%;
@@ -39,15 +40,44 @@
     position: relative;
   }
+  // Closed panel: collapsed to zero width and removed from the layout so its
+  // focusable children are no longer reachable. The .is-navigation-collapsed
+  // rule below overrides this to render the icon rail instead.
+  &:not(.is-navigation-open) {
+    inline-size: 0px;
+    display: none;
+  }
+  // Closed but showing the collapsed icon rail. This class is only ever set while
+  // the panel is closed, so it always overrides the rule above (equal specificity,
+  // later in source order).
+  &.is-navigation-collapsed {
+    display: flex;
+    align-items: center;
+    inline-size: $collapsed-width;
+    & > .navigation {
+      inline-size: $collapsed-width;
+      overflow-x: hidden;
+    }
+    // In the rail, replace the top-right close button with a centered expand toggle.
+    & > .navigation > .hide-navigation {
+      display: none;
+      &.expand-navigation-toggle {
+        display: flex;
+        position: static;
+        align-items: center;
+        justify-content: center;
+        padding-block: awsui.$space-s;
+      }
+    }
+  }
   // The Navigation drawer will take up the entire viewport on mobile
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     #{custom-props.$navigationWidth}: 100vw;
     z-index: constants.$drawer-z-index-mobile;
   }
 }
-.hide-navigation {
-  position: absolute;
-  inset-inline-end: awsui.$space-m;
-  inset-block-start: constants.$toolbar-vertical-panel-icon-offset;
-}

package/lib/internal/scss/app-layout/visual-refresh-toolbar/skeleton/styles.scss CHANGED Viewed

@@ -146,12 +146,18 @@
   @include desktop-only {
     grid-area: navigation;
     inline-size: var(#{custom-props.$navigationWidth});
-    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+    border-inline-end: awsui.$border-width-layout-side-navigation solid awsui.$color-border-layout-side-navigation;
   }
   @include mobile-only {
     z-index: constants.$drawer-z-index-mobile;
   }
+  &.navigation-collapsed {
+    @include desktop-only {
+      inline-size: var(#{custom-props.$navigationCollapsedWidth}, constants.$navigation-collapsed-width-default);
+    }
+  }
 }
 .tools {

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

@@ -143,7 +143,7 @@ $toolbar-height: 42px;
     > .universal-toolbar-nav {
       grid-column: 2;
-      padding-inline-start: awsui.$space-m;
+      padding-inline-start: awsui.$space-s;
       padding-inline-end: awsui.$space-static-xxs;
     }
@@ -171,7 +171,7 @@ $toolbar-height: 42px;
 .drawers-mobile-triggers-container {
   @include styles.styles-reset;
   background-color: transparent;
-  padding-inline: awsui.$space-m;
+  padding-inline: awsui.$space-s;
   box-sizing: border-box;
   overflow-y: hidden;
   overflow-x: hidden;

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

@@ -1,177 +1,178 @@
     // Build environment
-    $awsui-commit-hash: "fcf95ed7";
+    $awsui-commit-hash: "0404a635";
     // Manually managed CSS-variables
-    $maxContentWidth: --awsui-max-content-width-z17rmd;
-$minContentWidth: --awsui-min-content-width-z17rmd;
-$breadcrumbsGap: --awsui-breadcrumbs-gap-z17rmd;
-$contentGapLeft: --awsui-content-gap-left-z17rmd;
-$contentGapRight: --awsui-content-gap-right-z17rmd;
-$contentHeight: --awsui-content-height-z17rmd;
-$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-z17rmd;
-$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-z17rmd;
-$contentLayoutMainGap: --awsui-content-layout-main-gap-z17rmd;
-$defaultMaxContentWidth: --awsui-default-max-content-width-z17rmd;
-$defaultMinContentWidth: --awsui-default-min-content-width-z17rmd;
-$drawerSize: --awsui-drawer-size-z17rmd;
-$drawerMinSize: --awsui-drawer-min-size-z17rmd;
-$bottomDrawerSize: --awsui-bottom-drawer-size-z17rmd;
-$footerHeight: --awsui-footer-height-z17rmd;
-$headerGap: --awsui-header-gap-z17rmd;
-$headerHeight: --awsui-header-height-z17rmd;
-$layoutWidth: --awsui-layout-width-z17rmd;
-$mainGap: --awsui-main-gap-z17rmd;
-$mainOffsetLeft: --awsui-main-offset-left-z17rmd;
-$mainTemplateRows: --awsui-main-template-rows-z17rmd;
-$mobileBarHeight: --awsui-mobile-bar-height-z17rmd;
-$notificationsHeight: --awsui-notifications-height-z17rmd;
-$offsetTop: --awsui-offset-top-z17rmd;
-$overlapHeight: --awsui-overlap-height-z17rmd;
-$navigationWidth: --awsui-navigation-width-z17rmd;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-z17rmd;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-z17rmd;
-$splitPanelHeight: --awsui-split-panel-height-z17rmd;
-$splitPanelMinWidth: --awsui-split-panel-min-width-z17rmd;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-z17rmd;
-$toolsMaxWidth: --awsui-tools-max-width-z17rmd;
-$toolsWidth: --awsui-tools-width-z17rmd;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-z17rmd;
-$contentScrollMargin: --awsui-content-scroll-margin-z17rmd;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-z17rmd;
-$flashbarStackIndex: --awsui-flashbar-stack-index-z17rmd;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-z17rmd;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-z17rmd;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-z17rmd;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-z17rmd;
-$dropdownDefaultMinWidth: --awsui-dropdown-default-min-width-z17rmd;
-$dropdownContentBorderColor: --awsui-dropdown-content-border-color-z17rmd;
-$dropdownContentBorderWidth: --awsui-dropdown-content-border-width-z17rmd;
-$dropdownContentBorderRadius: --awsui-dropdown-content-border-radius-z17rmd;
-$modalCustomWidth: --awsui-modal-custom-width-z17rmd;
-$modalCustomHeight: --awsui-modal-custom-height-z17rmd;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-z17rmd;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-z17rmd;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-z17rmd;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-z17rmd;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-z17rmd;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-z17rmd;
-$sliderLabelCount: --awsui-slider-label-count-z17rmd;
-$sliderTickCount: --awsui-slider-tick-count-z17rmd;
-$sliderReferenceColumn: --awsui-slider-reference-column-z17rmd;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-z17rmd;
-$sliderMaxStart: --awsui-slider-max-start-z17rmd;
-$sliderMinEnd: --awsui-slider-min-end-z17rmd;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-z17rmd;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-z17rmd;
-$togglesLeftWidth: --awsui-toggles-left-width-z17rmd;
-$togglesRightWidth: --awsui-toggles-right-width-z17rmd;
-$promptInputMaxRows: --awsui-prompt-input-max-rows-z17rmd;
-$promptInputScrollHeight: --awsui-prompt-input-scroll-height-z17rmd;
-$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-z17rmd;
-$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-z17rmd;
-$styleBackgroundActive: --awsui-style-background-active-z17rmd;
-$styleBackgroundDefault: --awsui-style-background-default-z17rmd;
-$styleBackgroundDisabled: --awsui-style-background-disabled-z17rmd;
-$styleBackgroundHover: --awsui-style-background-hover-z17rmd;
-$styleBorderColorActive: --awsui-style-border-color-active-z17rmd;
-$styleBorderColorDefault: --awsui-style-border-color-default-z17rmd;
-$styleBorderColorDisabled: --awsui-style-border-color-disabled-z17rmd;
-$styleBorderColorHover: --awsui-style-border-color-hover-z17rmd;
-$styleColorActive: --awsui-style-color-active-z17rmd;
-$styleColorDefault: --awsui-style-color-default-z17rmd;
-$styleColorDisabled: --awsui-style-color-disabled-z17rmd;
-$styleColorHover: --awsui-style-color-hover-z17rmd;
-$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-z17rmd;
-$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-z17rmd;
-$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-z17rmd;
-$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-z17rmd;
-$styleBoxShadowActive: --awsui-style-box-shadow-active-z17rmd;
-$styleBoxShadowDefault: --awsui-style-box-shadow-default-z17rmd;
-$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-z17rmd;
-$styleBoxShadowHover: --awsui-style-box-shadow-hover-z17rmd;
-$styleBackgroundReadonly: --awsui-style-background-readonly-z17rmd;
-$styleBorderColorReadonly: --awsui-style-border-color-readonly-z17rmd;
-$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-z17rmd;
-$styleColorReadonly: --awsui-style-color-readonly-z17rmd;
-$styleBackgroundFocus: --awsui-style-background-focus-z17rmd;
-$styleBorderColorFocus: --awsui-style-border-color-focus-z17rmd;
-$styleBoxShadowFocus: --awsui-style-box-shadow-focus-z17rmd;
-$styleColorFocus: --awsui-style-color-focus-z17rmd;
-$stylePlaceholderColor: --awsui-style-placeholder-color-z17rmd;
-$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-z17rmd;
-$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-z17rmd;
-$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-z17rmd;
-$styleTabsActiveIndicatorColor: --awsui-style-tabs-active-indicator-color-z17rmd;
-$styleTabsActiveIndicatorWidth: --awsui-style-tabs-active-indicator-width-z17rmd;
-$styleTabsActiveIndicatorBorderRadius: --awsui-style-tabs-active-indicator-border-radius-z17rmd;
-$styleTabsSeparatorColor: --awsui-style-tabs-separator-color-z17rmd;
-$styleTabsSeparatorWidth: --awsui-style-tabs-separator-width-z17rmd;
-$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-z17rmd;
-$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-z17rmd;
-$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-z17rmd;
-$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-z17rmd;
-$alertIconColor: --awsui-alert-icon-color-z17rmd;
-$promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-z17rmd;
-$promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-z17rmd;
-$promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-z17rmd;
-$promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-z17rmd;
-$promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-z17rmd;
-$promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-z17rmd;
-$promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-z17rmd;
-$promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-z17rmd;
-$promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-z17rmd;
-$promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-z17rmd;
-$promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-z17rmd;
-$promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-z17rmd;
-$promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-z17rmd;
-$promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-z17rmd;
-$promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-z17rmd;
-$promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-z17rmd;
-$promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-z17rmd;
-$promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-z17rmd;
-$promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-z17rmd;
-$promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-z17rmd;
-$promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-z17rmd;
-$promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-z17rmd;
-$promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-z17rmd;
-$promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-z17rmd;
-$promptInputMenuStyleBackgroundColor: --awsui-prompt-input-menu-style-background-color-z17rmd;
-$promptInputMenuStyleBorderColor: --awsui-prompt-input-menu-style-border-color-z17rmd;
-$promptInputMenuStyleBorderRadius: --awsui-prompt-input-menu-style-border-radius-z17rmd;
-$promptInputMenuStyleBorderWidth: --awsui-prompt-input-menu-style-border-width-z17rmd;
-$optionBackgroundDefault: --awsui-option-background-default-z17rmd;
-$optionBackgroundHighlighted: --awsui-option-background-highlighted-z17rmd;
-$optionBackgroundSelected: --awsui-option-background-selected-z17rmd;
-$optionColorDefault: --awsui-option-color-default-z17rmd;
-$optionColorHighlighted: --awsui-option-color-highlighted-z17rmd;
-$optionColorDisabled: --awsui-option-color-disabled-z17rmd;
-$optionGroupLabelColor: --awsui-option-group-label-color-z17rmd;
-$optionFilterMatchBackground: --awsui-option-filter-match-background-z17rmd;
-$optionFilterMatchColor: --awsui-option-filter-match-color-z17rmd;
-$progressBarBackgroundColor: --awsui-progress-bar-background-color-z17rmd;
-$progressBarBorderRadius: --awsui-progress-bar-border-radius-z17rmd;
-$progressBarHeight: --awsui-progress-bar-height-z17rmd;
-$progressValueBackgroundColor: --awsui-progress-value-background-color-z17rmd;
-$styleSliderTrackBackgroundColor: --awsui-style-slider-track-background-color-z17rmd;
-$styleSliderRangeBackgroundDefault: --awsui-style-slider-range-background-default-z17rmd;
-$styleSliderRangeBackgroundActive: --awsui-style-slider-range-background-active-z17rmd;
-$styleSliderHandleBackgroundDefault: --awsui-style-slider-handle-background-default-z17rmd;
-$styleSliderHandleBackgroundHover: --awsui-style-slider-handle-background-hover-z17rmd;
-$styleSliderHandleBackgroundActive: --awsui-style-slider-handle-background-active-z17rmd;
-$styleSliderHandleBorderRadius: --awsui-style-slider-handle-border-radius-z17rmd;
-$tokenStyleBackgroundDefault: --awsui-token-style-background-default-z17rmd;
-$tokenStyleBackgroundDisabled: --awsui-token-style-background-disabled-z17rmd;
-$tokenStyleBackgroundReadOnly: --awsui-token-style-background-read-only-z17rmd;
-$tokenStyleBorderColorDefault: --awsui-token-style-border-color-default-z17rmd;
-$tokenStyleBorderColorDisabled: --awsui-token-style-border-color-disabled-z17rmd;
-$tokenStyleBorderColorReadOnly: --awsui-token-style-border-color-read-only-z17rmd;
-$tokenStyleDismissColorDefault: --awsui-token-style-dismiss-color-default-z17rmd;
-$tokenStyleDismissColorDisabled: --awsui-token-style-dismiss-color-disabled-z17rmd;
-$tokenStyleDismissColorHover: --awsui-token-style-dismiss-color-hover-z17rmd;
-$tokenStyleDismissColorReadOnly: --awsui-token-style-dismiss-color-read-only-z17rmd;
-$styleItemCardBackgroundDefault: --awsui-style-item-card-background-default-z17rmd;
-$styleItemCardBorderColorDefault: --awsui-style-item-card-border-color-default-z17rmd;
-$styleItemCardBorderRadius: --awsui-style-item-card-border-radius-z17rmd;
-$styleItemCardBorderWidthDefault: --awsui-style-item-card-border-width-default-z17rmd;
-$styleItemCardBoxShadowDefault: --awsui-style-item-card-box-shadow-default-z17rmd;
+    $maxContentWidth: --awsui-max-content-width-esndbs;
+$minContentWidth: --awsui-min-content-width-esndbs;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-esndbs;
+$contentGapLeft: --awsui-content-gap-left-esndbs;
+$contentGapRight: --awsui-content-gap-right-esndbs;
+$contentHeight: --awsui-content-height-esndbs;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-esndbs;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-esndbs;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-esndbs;
+$defaultMaxContentWidth: --awsui-default-max-content-width-esndbs;
+$defaultMinContentWidth: --awsui-default-min-content-width-esndbs;
+$drawerSize: --awsui-drawer-size-esndbs;
+$drawerMinSize: --awsui-drawer-min-size-esndbs;
+$bottomDrawerSize: --awsui-bottom-drawer-size-esndbs;
+$footerHeight: --awsui-footer-height-esndbs;
+$headerGap: --awsui-header-gap-esndbs;
+$headerHeight: --awsui-header-height-esndbs;
+$layoutWidth: --awsui-layout-width-esndbs;
+$mainGap: --awsui-main-gap-esndbs;
+$mainOffsetLeft: --awsui-main-offset-left-esndbs;
+$mainTemplateRows: --awsui-main-template-rows-esndbs;
+$mobileBarHeight: --awsui-mobile-bar-height-esndbs;
+$notificationsHeight: --awsui-notifications-height-esndbs;
+$offsetTop: --awsui-offset-top-esndbs;
+$overlapHeight: --awsui-overlap-height-esndbs;
+$navigationWidth: --awsui-navigation-width-esndbs;
+$navigationCollapsedWidth: --awsui-navigation-collapsed-width-esndbs;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-esndbs;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-esndbs;
+$splitPanelHeight: --awsui-split-panel-height-esndbs;
+$splitPanelMinWidth: --awsui-split-panel-min-width-esndbs;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-esndbs;
+$toolsMaxWidth: --awsui-tools-max-width-esndbs;
+$toolsWidth: --awsui-tools-width-esndbs;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-esndbs;
+$contentScrollMargin: --awsui-content-scroll-margin-esndbs;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-esndbs;
+$flashbarStackIndex: --awsui-flashbar-stack-index-esndbs;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-esndbs;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-esndbs;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-esndbs;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-esndbs;
+$dropdownDefaultMinWidth: --awsui-dropdown-default-min-width-esndbs;
+$dropdownContentBorderColor: --awsui-dropdown-content-border-color-esndbs;
+$dropdownContentBorderWidth: --awsui-dropdown-content-border-width-esndbs;
+$dropdownContentBorderRadius: --awsui-dropdown-content-border-radius-esndbs;
+$modalCustomWidth: --awsui-modal-custom-width-esndbs;
+$modalCustomHeight: --awsui-modal-custom-height-esndbs;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-esndbs;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-esndbs;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-esndbs;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-esndbs;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-esndbs;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-esndbs;
+$sliderLabelCount: --awsui-slider-label-count-esndbs;
+$sliderTickCount: --awsui-slider-tick-count-esndbs;
+$sliderReferenceColumn: --awsui-slider-reference-column-esndbs;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-esndbs;
+$sliderMaxStart: --awsui-slider-max-start-esndbs;
+$sliderMinEnd: --awsui-slider-min-end-esndbs;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-esndbs;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-esndbs;
+$togglesLeftWidth: --awsui-toggles-left-width-esndbs;
+$togglesRightWidth: --awsui-toggles-right-width-esndbs;
+$promptInputMaxRows: --awsui-prompt-input-max-rows-esndbs;
+$promptInputScrollHeight: --awsui-prompt-input-scroll-height-esndbs;
+$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-esndbs;
+$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-esndbs;
+$styleBackgroundActive: --awsui-style-background-active-esndbs;
+$styleBackgroundDefault: --awsui-style-background-default-esndbs;
+$styleBackgroundDisabled: --awsui-style-background-disabled-esndbs;
+$styleBackgroundHover: --awsui-style-background-hover-esndbs;
+$styleBorderColorActive: --awsui-style-border-color-active-esndbs;
+$styleBorderColorDefault: --awsui-style-border-color-default-esndbs;
+$styleBorderColorDisabled: --awsui-style-border-color-disabled-esndbs;
+$styleBorderColorHover: --awsui-style-border-color-hover-esndbs;
+$styleColorActive: --awsui-style-color-active-esndbs;
+$styleColorDefault: --awsui-style-color-default-esndbs;
+$styleColorDisabled: --awsui-style-color-disabled-esndbs;
+$styleColorHover: --awsui-style-color-hover-esndbs;
+$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-esndbs;
+$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-esndbs;
+$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-esndbs;
+$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-esndbs;
+$styleBoxShadowActive: --awsui-style-box-shadow-active-esndbs;
+$styleBoxShadowDefault: --awsui-style-box-shadow-default-esndbs;
+$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-esndbs;
+$styleBoxShadowHover: --awsui-style-box-shadow-hover-esndbs;
+$styleBackgroundReadonly: --awsui-style-background-readonly-esndbs;
+$styleBorderColorReadonly: --awsui-style-border-color-readonly-esndbs;
+$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-esndbs;
+$styleColorReadonly: --awsui-style-color-readonly-esndbs;
+$styleBackgroundFocus: --awsui-style-background-focus-esndbs;
+$styleBorderColorFocus: --awsui-style-border-color-focus-esndbs;
+$styleBoxShadowFocus: --awsui-style-box-shadow-focus-esndbs;
+$styleColorFocus: --awsui-style-color-focus-esndbs;
+$stylePlaceholderColor: --awsui-style-placeholder-color-esndbs;
+$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-esndbs;
+$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-esndbs;
+$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-esndbs;
+$styleTabsActiveIndicatorColor: --awsui-style-tabs-active-indicator-color-esndbs;
+$styleTabsActiveIndicatorWidth: --awsui-style-tabs-active-indicator-width-esndbs;
+$styleTabsActiveIndicatorBorderRadius: --awsui-style-tabs-active-indicator-border-radius-esndbs;
+$styleTabsSeparatorColor: --awsui-style-tabs-separator-color-esndbs;
+$styleTabsSeparatorWidth: --awsui-style-tabs-separator-width-esndbs;
+$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-esndbs;
+$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-esndbs;
+$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-esndbs;
+$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-esndbs;
+$alertIconColor: --awsui-alert-icon-color-esndbs;
+$promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-esndbs;
+$promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-esndbs;
+$promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-esndbs;
+$promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-esndbs;
+$promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-esndbs;
+$promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-esndbs;
+$promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-esndbs;
+$promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-esndbs;
+$promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-esndbs;
+$promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-esndbs;
+$promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-esndbs;
+$promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-esndbs;
+$promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-esndbs;
+$promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-esndbs;
+$promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-esndbs;
+$promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-esndbs;
+$promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-esndbs;
+$promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-esndbs;
+$promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-esndbs;
+$promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-esndbs;
+$promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-esndbs;
+$promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-esndbs;
+$promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-esndbs;
+$promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-esndbs;
+$promptInputMenuStyleBackgroundColor: --awsui-prompt-input-menu-style-background-color-esndbs;
+$promptInputMenuStyleBorderColor: --awsui-prompt-input-menu-style-border-color-esndbs;
+$promptInputMenuStyleBorderRadius: --awsui-prompt-input-menu-style-border-radius-esndbs;
+$promptInputMenuStyleBorderWidth: --awsui-prompt-input-menu-style-border-width-esndbs;
+$optionBackgroundDefault: --awsui-option-background-default-esndbs;
+$optionBackgroundHighlighted: --awsui-option-background-highlighted-esndbs;
+$optionBackgroundSelected: --awsui-option-background-selected-esndbs;
+$optionColorDefault: --awsui-option-color-default-esndbs;
+$optionColorHighlighted: --awsui-option-color-highlighted-esndbs;
+$optionColorDisabled: --awsui-option-color-disabled-esndbs;
+$optionGroupLabelColor: --awsui-option-group-label-color-esndbs;
+$optionFilterMatchBackground: --awsui-option-filter-match-background-esndbs;
+$optionFilterMatchColor: --awsui-option-filter-match-color-esndbs;
+$progressBarBackgroundColor: --awsui-progress-bar-background-color-esndbs;
+$progressBarBorderRadius: --awsui-progress-bar-border-radius-esndbs;
+$progressBarHeight: --awsui-progress-bar-height-esndbs;
+$progressValueBackgroundColor: --awsui-progress-value-background-color-esndbs;
+$styleSliderTrackBackgroundColor: --awsui-style-slider-track-background-color-esndbs;
+$styleSliderRangeBackgroundDefault: --awsui-style-slider-range-background-default-esndbs;
+$styleSliderRangeBackgroundActive: --awsui-style-slider-range-background-active-esndbs;
+$styleSliderHandleBackgroundDefault: --awsui-style-slider-handle-background-default-esndbs;
+$styleSliderHandleBackgroundHover: --awsui-style-slider-handle-background-hover-esndbs;
+$styleSliderHandleBackgroundActive: --awsui-style-slider-handle-background-active-esndbs;
+$styleSliderHandleBorderRadius: --awsui-style-slider-handle-border-radius-esndbs;
+$tokenStyleBackgroundDefault: --awsui-token-style-background-default-esndbs;
+$tokenStyleBackgroundDisabled: --awsui-token-style-background-disabled-esndbs;
+$tokenStyleBackgroundReadOnly: --awsui-token-style-background-read-only-esndbs;
+$tokenStyleBorderColorDefault: --awsui-token-style-border-color-default-esndbs;
+$tokenStyleBorderColorDisabled: --awsui-token-style-border-color-disabled-esndbs;
+$tokenStyleBorderColorReadOnly: --awsui-token-style-border-color-read-only-esndbs;
+$tokenStyleDismissColorDefault: --awsui-token-style-dismiss-color-default-esndbs;
+$tokenStyleDismissColorDisabled: --awsui-token-style-dismiss-color-disabled-esndbs;
+$tokenStyleDismissColorHover: --awsui-token-style-dismiss-color-hover-esndbs;
+$tokenStyleDismissColorReadOnly: --awsui-token-style-dismiss-color-read-only-esndbs;
+$styleItemCardBackgroundDefault: --awsui-style-item-card-background-default-esndbs;
+$styleItemCardBorderColorDefault: --awsui-style-item-card-border-color-default-esndbs;
+$styleItemCardBorderRadius: --awsui-style-item-card-border-radius-esndbs;
+$styleItemCardBorderWidthDefault: --awsui-style-item-card-border-width-default-esndbs;
+$styleItemCardBoxShadowDefault: --awsui-style-item-card-box-shadow-default-esndbs;

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

@@ -45,13 +45,6 @@ $expandable-icon-negative-margin: awsui.$space-l;
   padding-inline-start: awsui.$space-panel-nav-left;
   // Additional xl space to prevent text from overlapping the close button.
   padding-inline-end: calc(#{awsui.$space-scaled-xxl} + #{awsui.$space-xl});
-  &--collapsed {
-    padding-inline: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 }
 .header-link {
@@ -95,6 +88,10 @@ $expandable-icon-negative-margin: awsui.$space-l;
 .items-control,
 .list-container {
   margin-block-start: calc(#{awsui.$space-panel-content-top} - #{$item-padding-block});
+  .root--collapsed > & {
+    margin-block-start: awsui.$space-xs;
+  }
   // Toolbar removes margin and item padding for whatever comes first after the header
   .with-toolbar > .divider-header + & {
     margin-block-start: calc(-1 * #{$item-padding-block});

package/lib/internal/scss/status-indicator/styles.scss CHANGED Viewed

@@ -20,6 +20,7 @@ $_status-colors: (
   'in-progress': awsui.$color-text-status-inactive,
   'loading': awsui.$color-text-status-inactive,
   'not-started': awsui.$color-text-status-inactive,
+  'log': awsui.$color-text-status-inactive,
 );
 $_color-overrides: (
@@ -40,6 +41,7 @@ $_status-backgrounds: (
   'in-progress': awsui.$color-background-status-indicator-neutral,
   'loading': awsui.$color-background-status-indicator-neutral,
   'not-started': awsui.$color-background-status-indicator-neutral,
+  'log': awsui.$color-background-status-indicator-neutral,
 );
 $_background-overrides: (
@@ -106,7 +108,7 @@ $_background-overrides: (
     word-break: break-all;
     @include theming.one-theme-only {
       display: inline-flex;
-      align-items: flex-start;
+      vertical-align: top;
     }
     > .icon {
@@ -115,7 +117,7 @@ $_background-overrides: (
       @include theming.one-theme-only {
         display: inline-flex;
         align-items: center;
-        margin-block-start: awsui.$space-xxxs;
+        block-size: awsui.$line-height-body-m;
       }
     }
   }

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

@@ -6,6 +6,13 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
+.connector {
+  background-color: awsui.$color-border-divider-default;
+}
+.connector.connector-hidden {
+  background-color: transparent;
+}
 .root {
   @include styles.styles-reset;
   @include styles.text-wrapping;
@@ -37,7 +44,6 @@
       > .connector {
         grid-row: 2;
         grid-column: 1;
-        background-color: awsui.$color-border-divider-default;
         margin-block: 0;
         border-block: 0;
         border-inline: 0;
@@ -82,7 +88,6 @@
         > .connector {
           display: block;
           flex: 1;
-          background-color: awsui.$color-border-divider-default;
           margin-block: 0;
           border-block: 0;
           border-inline: 0;
@@ -134,7 +139,6 @@
       grid-row: auto;
       grid-column: auto;
       flex: 1 1 auto;
-      background-color: awsui.$color-border-divider-default;
       border-block: 0;
       border-inline: 0;
       inline-size: awsui.$border-divider-list-width;