@cloudscape-design/components-themeable 3.0.1303 → 3.0.1305

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "bc6c9867e7e3bce040ba4a3a659640c3b328eead"
+  "commit": "beb6f0a4f68cd22b7eb6ef05c67cc21efba8b976"
 }

package/lib/internal/scss/expandable-section/styles.scss

@@ -48,9 +48,11 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
 .icon-container {
   position: relative;
+  min-inline-size: $icon-width-normal;
   margin-inline: calc(#{$icon-margin-left}) calc(#{$icon-margin-right-normal});
   // For vertical alignment of text in side navigation items
   &-container {
+    min-inline-size: $icon-width-medium;
     margin-inline-end: $icon-margin-right-medium;
   }
 }

package/lib/internal/scss/icon/mixins.scss

@@ -6,6 +6,7 @@
 @use 'sass:map';
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties' as custom-props;
 
 $_variant-colors: (
   'normal': currentColor,
@@ -19,6 +20,13 @@ $_variant-colors: (
 );
 
 $_icon-sizes: (
+  (
+    name: 'x-small',
+    size: awsui.$size-icon-x-small,
+    supportedLineHeight: awsui.$line-height-body-s,
+    stroke: awsui.$border-width-icon-x-small,
+    scaleFactor: 0.75,
+  ),
   (
     name: 'small',
     size: awsui.$size-icon-normal,
@@ -66,25 +74,29 @@ $_icon-sizes: (
     $padding: calc((#{$supportedLineHeight} - #{$size}) / 2);
 
     &.size-#{$name} {
-      inline-size: $size;
+      inline-size: var(#{custom-props.$iconSizeOverride}, #{$size});
+      block-size: max(#{$size}, var(#{custom-props.$iconSizeOverride}, #{$size}));
       box-sizing: border-box;
       &-mapped-height {
-        block-size: $supportedLineHeight;
+        block-size: max($supportedLineHeight, var(#{custom-props.$iconSizeOverride}, $size));
         padding-block: $padding;
         padding-inline: 0;
       }
 
       > svg,
       > img {
-        inline-size: $size;
-        block-size: $size;
+        inline-size: var(#{custom-props.$iconSizeOverride}, #{$size});
+        block-size: max(#{$size}, var(#{custom-props.$iconSizeOverride}, #{$size}));
         vertical-align: top;
       }
 
       > svg {
         &,
         * {
-          stroke-width: calc(#{$stroke} / #{$scaleFactor});
+          stroke-width: var(
+            #{custom-props.$iconStrokeWidthOverride},
+            calc(#{$stroke} / #{$scaleFactor} * var(#{custom-props.$iconStrokeScale}, 1))
+          );
         }
       }
     }

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

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

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

@@ -29,6 +29,18 @@ $_color-overrides: (
   'yellow': awsui.$color-text-status-warning,
 );
 
+$_status-backgrounds: (
+  'error': awsui.$color-background-status-indicator-error,
+  'warning': awsui.$color-background-status-indicator-warning,
+  'success': awsui.$color-background-status-indicator-success,
+  'info': awsui.$color-background-status-indicator-info,
+  'stopped': awsui.$color-background-status-indicator-neutral,
+  'pending': awsui.$color-background-status-indicator-neutral,
+  'in-progress': awsui.$color-background-status-indicator-neutral,
+  'loading': awsui.$color-background-status-indicator-neutral,
+  'not-started': awsui.$color-background-status-indicator-neutral,
+);
+
 .root {
   @include styles.default-text-style;
   @each $status in map.keys($_status-colors) {
@@ -41,9 +53,19 @@ $_color-overrides: (
       color: #{map.get($_color-overrides, $color)};
     }
   }
+  @each $status in map.keys($_status-backgrounds) {
+    &.status-#{$status} > .container {
+      background: #{map.get($_status-backgrounds, $status)};
+    }
+  }
 }
 
 .container {
+  padding-inline: awsui.$space-status-indicator-padding-horizontal;
+  border-start-start-radius: awsui.$border-radius-status-indicator;
+  border-start-end-radius: awsui.$border-radius-status-indicator;
+  border-end-start-radius: awsui.$border-radius-status-indicator;
+  border-end-end-radius: awsui.$border-radius-status-indicator;
   &.display-inline {
     @include styles.text-wrapping;
     display: inline;

package/lib/internal/scss/truncated-text/styles.scss

@@ -0,0 +1,26 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/foundation' as foundation;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+
+.root {
+  @include styles.text-overflow-ellipsis;
+
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+
+  &:focus {
+    outline: none;
+  }
+  @include focus-visible.when-visible {
+    // Since this component is commonly used in scenarios where the content can be truncated,
+    // let's play it safe by pulling in the outline.
+    @include styles.focus-highlight(calc(-1 * #{foundation.$box-shadow-focused-width}));
+  }
+}

package/lib/internal/scss/truncated-text/test-classes/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root {
+  /* used in test-utils */
+}

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

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_a3sen_193",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_a3sen_1",
-  "root": "awsui_root_mx3cw_a3sen_215",
-  "hidden": "awsui_hidden_mx3cw_a3sen_250",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_a3sen_301",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_a3sen_313",
-  "header": "awsui_header_mx3cw_a3sen_318",
-  "header-replacement": "awsui_header-replacement_mx3cw_a3sen_319",
-  "action": "awsui_action_mx3cw_a3sen_323",
-  "action-slot": "awsui_action-slot_mx3cw_a3sen_327",
-  "action-button": "awsui_action-button_mx3cw_a3sen_328",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_a3sen_332",
-  "text": "awsui_text_mx3cw_a3sen_363",
-  "icon": "awsui_icon_mx3cw_a3sen_370",
-  "message": "awsui_message_mx3cw_a3sen_373",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_a3sen_377",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_a3sen_381",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_a3sen_385",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_a3sen_389",
-  "content": "awsui_content_mx3cw_a3sen_393",
-  "content-replacement": "awsui_content-replacement_mx3cw_a3sen_394",
-  "dismiss": "awsui_dismiss_mx3cw_a3sen_398",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_a3sen_403",
-  "type-error": "awsui_type-error_mx3cw_a3sen_407",
-  "type-warning": "awsui_type-warning_mx3cw_a3sen_415",
-  "type-success": "awsui_type-success_mx3cw_a3sen_423",
-  "type-info": "awsui_type-info_mx3cw_a3sen_431"
+  "alert": "awsui_alert_mx3cw_tzyp2_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_tzyp2_1",
+  "root": "awsui_root_mx3cw_tzyp2_215",
+  "hidden": "awsui_hidden_mx3cw_tzyp2_250",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_tzyp2_301",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_tzyp2_313",
+  "header": "awsui_header_mx3cw_tzyp2_318",
+  "header-replacement": "awsui_header-replacement_mx3cw_tzyp2_319",
+  "action": "awsui_action_mx3cw_tzyp2_323",
+  "action-slot": "awsui_action-slot_mx3cw_tzyp2_327",
+  "action-button": "awsui_action-button_mx3cw_tzyp2_328",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_tzyp2_332",
+  "text": "awsui_text_mx3cw_tzyp2_363",
+  "icon": "awsui_icon_mx3cw_tzyp2_370",
+  "message": "awsui_message_mx3cw_tzyp2_373",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_tzyp2_377",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_tzyp2_381",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_tzyp2_385",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_tzyp2_389",
+  "content": "awsui_content_mx3cw_tzyp2_393",
+  "content-replacement": "awsui_content-replacement_mx3cw_tzyp2_394",
+  "dismiss": "awsui_dismiss_mx3cw_tzyp2_398",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_tzyp2_403",
+  "type-error": "awsui_type-error_mx3cw_tzyp2_407",
+  "type-warning": "awsui_type-warning_mx3cw_tzyp2_415",
+  "type-success": "awsui_type-success_mx3cw_tzyp2_423",
+  "type-info": "awsui_type-info_mx3cw_tzyp2_431"
 };