@cloudscape-design/components-themeable 3.0.1261 → 3.0.1263

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "8b4eaf960cf44bc078056a9b4b5471bd16f602ec"
+  "commit": "33f2523c55fe0f0cf46e67e6a21043494f41ac82"
 }

package/lib/internal/scss/cards/styles.scss

@@ -47,11 +47,11 @@
 .selection-control {
   position: absolute;
   box-sizing: border-box;
-  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
+  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal-default}));
   inset-block-start: 0;
   inset-inline-end: 0;
-  padding-block: awsui.$space-card-vertical;
-  padding-inline: awsui.$space-card-horizontal;
+  padding-block: awsui.$space-card-vertical-default;
+  padding-inline: awsui.$space-card-horizontal-default;
 }
 
 .loading,
@@ -87,7 +87,7 @@
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      padding-block-start: styles.$control-padding-vertical;
+      /* used in test-utils */
       &-selectable {
         inline-size: 90%;
       }

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

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

package/lib/internal/scss/{internal/components/card → item-card}/motion.scss

@@ -3,8 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
 
 .root {
   @include styles.with-motion {

package/lib/internal/scss/item-card/styles.scss

@@ -0,0 +1,166 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use './motion';
+
+// Variant configuration maps — adjust values here for easy customization
+$variant-border-radius: (
+  'embedded': awsui.$border-radius-card-embedded,
+  'default': awsui.$border-radius-card-default,
+);
+
+$variant-padding-block: (
+  'embedded': awsui.$space-card-vertical-embedded,
+  'default': awsui.$space-card-vertical-default,
+);
+
+$variant-padding-inline: (
+  'embedded': awsui.$space-card-horizontal-embedded,
+  'default': awsui.$space-card-horizontal-default,
+);
+
+$action-padding-vertical: styles.$control-padding-vertical;
+$action-padding-horizontal: awsui.$space-xxs;
+
+@mixin apply-border-radius($variant: 'default') {
+  $radius: map.get($variant-border-radius, $variant);
+  border-start-start-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+  border-start-end-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+  border-end-start-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+  border-end-end-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius);
+}
+
+.header {
+  &-inner {
+    @include styles.font-heading-s;
+  }
+  &:not(:has(+ .body)) {
+    flex: 1;
+  }
+}
+
+.body {
+  flex: 1;
+}
+
+.footer {
+  &:first-child {
+    margin-block-start: auto;
+  }
+}
+
+.root {
+  @include styles.styles-reset();
+  box-sizing: border-box;
+  position: relative;
+  background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-card);
+  min-inline-size: 0;
+  box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card);
+
+  &:before {
+    @include styles.base-pseudo-element;
+    box-shadow: none;
+    border-color: transparent;
+    border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card)
+      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card);
+    border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card)
+      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card);
+  }
+
+  &::after {
+    @include styles.base-pseudo-element;
+  }
+
+  &:not(.refresh)::before {
+    border-block-start: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-container-top-width)
+      var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-container-top);
+  }
+
+  &.highlighted {
+    background-color: awsui.$color-background-item-selected;
+
+    &:before {
+      border-block: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted;
+      border-inline: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted;
+    }
+  }
+
+  &.variant-embedded,
+  &.variant-default {
+    > .inner-card {
+      display: flex;
+      flex-direction: column;
+      block-size: 100%;
+      inline-size: 100%;
+
+      > .header + .body,
+      > .header + .footer,
+      > .body + .footer {
+        &:not(.no-padding) {
+          padding-block-start: awsui.$space-xxs;
+        }
+      }
+
+      > .header,
+      > .body {
+        &:not(.no-padding):has(+ .body, + .footer) {
+          padding-block-end: awsui.$space-xxs;
+        }
+      }
+    }
+  }
+
+  // Generate variant styles from the configuration maps
+  @each $variant in ('embedded', 'default') {
+    &.variant-#{$variant} {
+      &,
+      &:before,
+      &::after,
+      > .inner-card {
+        @include apply-border-radius($variant);
+      }
+
+      $padding-block: map.get($variant-padding-block, $variant);
+      $padding-inline: map.get($variant-padding-inline, $variant);
+
+      > .inner-card > .header,
+      > .inner-card > .body,
+      > .inner-card > .footer {
+        &:not(.no-padding) {
+          padding-block: $padding-block;
+          padding-inline-start: $padding-inline;
+          &:not(.with-actions) {
+            padding-inline-end: $padding-inline;
+          }
+          &.with-actions {
+            padding-inline-end: calc($padding-inline - $action-padding-horizontal);
+          }
+        }
+      }
+
+      > .inner-card > .header:not(.no-padding).with-actions {
+        padding-block: calc($padding-block - $action-padding-vertical);
+        &:has(+ .body, + .footer) {
+          padding-block-end: awsui.$space-xxs;
+        }
+      }
+    }
+  }
+}
+
+.full-height {
+  block-size: 100%;
+}
+
+.description {
+  color: awsui.$color-text-heading-secondary;
+  @include styles.font-body-s;
+}

package/lib/internal/scss/item-card/test-classes/styles.scss

@@ -0,0 +1,24 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.icon {
+  /* used in test-utils */
+}
+
+.body {
+  /* used in test-utils */
+}
+
+.description {
+  /* used in test-utils */
+}
+
+.header {
+  /* used in test-utils */
+}
+
+.footer {
+  /* 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_1grb4_193",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1grb4_1",
-  "root": "awsui_root_mx3cw_1grb4_215",
-  "hidden": "awsui_hidden_mx3cw_1grb4_250",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_1grb4_299",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_1grb4_311",
-  "header": "awsui_header_mx3cw_1grb4_316",
-  "header-replacement": "awsui_header-replacement_mx3cw_1grb4_317",
-  "action": "awsui_action_mx3cw_1grb4_321",
-  "action-slot": "awsui_action-slot_mx3cw_1grb4_325",
-  "action-button": "awsui_action-button_mx3cw_1grb4_326",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1grb4_330",
-  "text": "awsui_text_mx3cw_1grb4_361",
-  "icon": "awsui_icon_mx3cw_1grb4_368",
-  "message": "awsui_message_mx3cw_1grb4_371",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_1grb4_375",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1grb4_379",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_1grb4_383",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1grb4_387",
-  "content": "awsui_content_mx3cw_1grb4_391",
-  "content-replacement": "awsui_content-replacement_mx3cw_1grb4_392",
-  "dismiss": "awsui_dismiss_mx3cw_1grb4_396",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_1grb4_401",
-  "type-error": "awsui_type-error_mx3cw_1grb4_405",
-  "type-warning": "awsui_type-warning_mx3cw_1grb4_413",
-  "type-success": "awsui_type-success_mx3cw_1grb4_421",
-  "type-info": "awsui_type-info_mx3cw_1grb4_429"
+  "alert": "awsui_alert_mx3cw_14rjb_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_14rjb_1",
+  "root": "awsui_root_mx3cw_14rjb_215",
+  "hidden": "awsui_hidden_mx3cw_14rjb_250",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_14rjb_299",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_14rjb_311",
+  "header": "awsui_header_mx3cw_14rjb_316",
+  "header-replacement": "awsui_header-replacement_mx3cw_14rjb_317",
+  "action": "awsui_action_mx3cw_14rjb_321",
+  "action-slot": "awsui_action-slot_mx3cw_14rjb_325",
+  "action-button": "awsui_action-button_mx3cw_14rjb_326",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_14rjb_330",
+  "text": "awsui_text_mx3cw_14rjb_361",
+  "icon": "awsui_icon_mx3cw_14rjb_368",
+  "message": "awsui_message_mx3cw_14rjb_371",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_14rjb_375",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_14rjb_379",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_14rjb_383",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_14rjb_387",
+  "content": "awsui_content_mx3cw_14rjb_391",
+  "content-replacement": "awsui_content-replacement_mx3cw_14rjb_392",
+  "dismiss": "awsui_dismiss_mx3cw_14rjb_396",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_14rjb_401",
+  "type-error": "awsui_type-error_mx3cw_14rjb_405",
+  "type-warning": "awsui_type-warning_mx3cw_14rjb_413",
+  "type-success": "awsui_type-success_mx3cw_14rjb_421",
+  "type-info": "awsui_type-info_mx3cw_14rjb_429"
 };