@cloudscape-design/components-themeable 3.0.1381 → 3.0.1383

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "818f03b7d0b724a127f867eea3baf00ec85440f4"
+  "commit": "3bc1f014bf14ee2c1f230a5b2adf595a7a52aab3"
 }

package/lib/internal/scss/container/styles.scss

@@ -138,8 +138,9 @@
 
 .header {
   background-color: awsui.$color-background-container-header;
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
+  $border-radius: var(#{custom-props.$containerStyleBorderRadius}, #{awsui.$border-radius-container});
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
   &.header-full-page {
     background-color: awsui.$color-background-layout-main;
   }
@@ -206,8 +207,8 @@
   }
 
   &.with-hidden-content {
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: $border-radius;
+    border-end-end-radius: $border-radius;
   }
 
   &-variant-cards {

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

@@ -382,10 +382,13 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
     // manages its own inline overflow (e.g. a table) would stretch the box out of the container.
     min-inline-size: 0;
     opacity: 0;
+    transform: translateY(-4px);
 
-    // HIDE (collapsed state): quick opacity collapse, no delay.
+    // HIDE (collapsed state): quick opacity collapse and slide back up, no delay.
     @include styles.with-motion {
-      transition: opacity $reveal-exit-motion;
+      transition:
+        opacity $reveal-exit-motion,
+        transform $reveal-exit-motion;
     }
   }
 }
@@ -394,11 +397,14 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
   /* this comment keeps the class in the style sheet */
   @include theming.one-theme-only {
     opacity: 1;
+    transform: translateY(0);
 
-    // SHOW (expanded state): opacity fades in AFTER height has partially
-    // opened, creating a perceptible fade in the revealed space.
+    // SHOW (expanded state): opacity fades in and content slides down into place AFTER
+    // height has partially opened, creating a perceptible reveal in the opened space.
     @include styles.with-motion {
-      transition: opacity $reveal-enter-delayed-motion;
+      transition:
+        opacity $reveal-enter-delayed-motion,
+        transform $reveal-enter-delayed-motion;
     }
   }
 }
@@ -407,6 +413,9 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
   /* this comment keeps the class in the style sheet */
   @include theming.one-theme-only {
     overflow-y: visible;
+    // Keeping translateY(0) here would leave this box as a stacking context, so a dropdown
+    // opened from the content would paint underneath whatever follows the section.
+    transform: none;
   }
 }
 

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

@@ -198,6 +198,10 @@
   }
 }
 
+.grouped {
+  @include styles.grouped-control;
+}
+
 .input-container {
   display: flex;
   position: relative;

package/lib/internal/scss/internal/components/button-trigger/styles.scss

@@ -159,4 +159,8 @@ $icon-offset: awsui.$space-xxxs;
     // Remove default paddings and just rely on center alignment of the content
     padding-block: 0;
   }
+
+  &.grouped {
+    @include styles.grouped-control;
+  }
 }

package/lib/internal/scss/internal/components/control-group/styles.scss

@@ -0,0 +1,36 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../styles' as styles;
+@use '../../styles/tokens' as awsui;
+
+.root {
+  @include styles.styles-reset;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  // Align controls along their bottom edge so their field boxes line up
+  // even when one control is taller than another.
+  align-items: flex-end;
+}
+
+.control {
+  // Let slots shrink below their content so a narrow group compresses, not overflows.
+  min-inline-size: 0;
+  // Establish a stacking context per slot so a control's internal z-indexes stay
+  // contained within its own slot and cannot paint over adjacent controls.
+  isolation: isolate;
+  // Raise the focused control's slot above its neighbors so its focus ring is
+  // painted over the adjacent control's seam border.
+  &:focus-within {
+    z-index: 1;
+  }
+  // Overlap each non-first slot onto its predecessor by one border width,
+  // so the two adjacent borders coincide into a single seam.
+  &.control-middle,
+  &.control-last {
+    margin-inline-start: calc(-1 * #{awsui.$border-width-field});
+  }
+}

package/lib/internal/scss/internal/components/radio-button/motion.scss

@@ -0,0 +1,34 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+@use '../../styles/utils/theming' as theming;
+
+// Scopes @content to themes that opted in to $expressive-motion-themes in theming.scss.
+@mixin radio-expressive-with-motion {
+  @media (prefers-reduced-motion: no-preference) {
+    @include theming.expressive-motion-only(':not(.awsui-motion-disabled):not(.awsui-mode-entering)') {
+      @content;
+    }
+  }
+}
+
+// Include inside the fill circle rule. Grows the ring inward by widening its
+// stroke from a thin line to the resting width.
+@mixin select {
+  &.styled-circle-checked[data-awsui-motion-ready] {
+    @include radio-expressive-with-motion {
+      animation: awsui-radio-select 250ms cubic-bezier(0.2, 0, 0, 1);
+    }
+
+    @if theming.has-expressive-motion() {
+      @keyframes awsui-radio-select {
+        from {
+          stroke-width: 6px;
+        }
+        to {
+          stroke-width: 30px;
+        }
+      }
+    }
+  }
+}

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

@@ -7,38 +7,42 @@
 @use '../../styles/tokens' as awsui;
 @use '../../styles/foundation' as foundation;
 @use '../../generated/custom-css-properties/index.scss' as custom-props;
+@use '../../styles/style-api' as style-api;
+@use './motion' as motion;
 
 $radio-size: awsui.$size-control;
 
+$_control-props: style-api.combine((color, background-color, border-color), style-api.$focus-ring);
+$_control-tokens: style-api.resolve($_control-props, carrier);
+
 .radio-control {
+  @include style-api.carriers($_control-tokens);
   @include styles.make-control-size($radio-size);
 }
 
 .outline {
-  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
-
-  @include styles.focus-highlight(
-    $gutter: 2px,
-    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
-    $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+  @include style-api.focus-highlight(
+    $gutter-block: 2px,
+    $gutter-inline: 2px,
+    $radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
+    $width: var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width),
+    $color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
   );
 }
 
 .styled-circle-border {
-  stroke: awsui.$color-border-control-default;
-  fill: awsui.$color-background-control-default;
+  stroke: style-api.value($_control-tokens, border-color, awsui.$color-border-control-default);
+  fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-default);
   &.styled-circle-disabled,
   &.styled-circle-readonly {
-    fill: awsui.$color-background-control-disabled;
-    stroke: awsui.$color-background-control-disabled;
+    fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
+    stroke: style-api.value($_control-tokens, border-color, awsui.$color-background-control-disabled);
   }
 }
 
 .styled-circle-fill {
-  stroke: awsui.$color-background-control-checked;
-  fill: awsui.$color-foreground-control-default;
+  stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-checked);
+  fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-default);
   opacity: 0;
   @include styles.with-motion {
     transition: opacity awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
@@ -47,11 +51,12 @@ $radio-size: awsui.$size-control;
     opacity: 1;
   }
   &.styled-circle-disabled {
-    fill: awsui.$color-foreground-control-disabled;
-    stroke: awsui.$color-background-control-disabled;
+    fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-disabled);
+    stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
   }
   &.styled-circle-readonly {
-    fill: awsui.$color-foreground-control-read-only;
-    stroke: awsui.$color-background-control-disabled;
+    fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-read-only);
+    stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
   }
+  @include motion.select;
 }

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

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