@cloudscape-design/components-themeable 3.0.28 → 3.0.31

package/lib/internal/scss/app-layout/visual-refresh/app-bar.scss

@@ -13,7 +13,7 @@ section.appbar {
   display: grid;
   grid-column: 3;
   grid-row: 2;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto minmax(0, 1fr) auto;
 
   > .appbar-nav {
     grid-column: 1;

package/lib/internal/scss/button-dropdown/category-elements/styles.scss

@@ -55,6 +55,10 @@ $option-padding-horizontal: awsui.$space-l;
         border-color: awsui.$color-border-dropdown-item-dimmed-hover;
         color: awsui.$color-text-dropdown-item-dimmed;
       }
+      &.is-focused {
+        border-color: awsui.$color-border-item-focused;
+        box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
+      }
     }
 
     &.variant-navigation {

package/lib/internal/scss/button-dropdown/item-element/styles.scss

@@ -42,6 +42,11 @@
         border-color: awsui.$color-border-dropdown-item-dimmed-hover;
         background-color: awsui.$color-background-dropdown-item-dimmed;
       }
+
+      &.is-focused {
+        border-color: awsui.$color-border-item-focused;
+        box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
+      }
     }
   }
 

package/lib/internal/scss/checkbox/styles.scss

@@ -22,7 +22,7 @@ div.root {
 .input {
   @include focus-visible.when-visible {
     /* stylelint-disable-next-line selector-max-type -- Can't access the outline class from focus-visible */
-    & + div {
+    & + span {
       @include styles.focus-highlight(2px);
     }
   }

package/lib/internal/scss/internal/components/abstract-switch/styles.scss

@@ -6,6 +6,13 @@
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
 
+.content,
+.description,
+.label,
+.outline {
+  display: block;
+}
+
 .wrapper {
   @include styles.text-wrapping;
   display: flex;

package/lib/internal/scss/internal/components/selectable-item/styles.scss

@@ -64,9 +64,7 @@
   }
 
   &.selected {
-    z-index: 3;
     background-color: awsui.$color-background-dropdown-item-selected;
-    border-color: awsui.$color-border-dropdown-item-selected;
     // smooth adjacent selected borders to avoid bubble effect (visual refresh)
     &.next-item-selected {
       border-bottom-left-radius: 0;
@@ -79,8 +77,9 @@
     border-top-right-radius: 0;
   }
 
-  &.highlighted.selected.is-keyboard {
-    box-shadow: inset 0 0 0 1px awsui.$color-border-item-focused;
+  &.highlighted.is-keyboard {
+    border-color: awsui.$color-border-item-focused;
+    box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
   }
 
   &.parent {

package/lib/internal/scss/internal/styles/utils/theming.scss

@@ -2,9 +2,6 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-
-@use 'awsui:environment' as environment;
-
 @mixin dark-mode-only($selector: '') {
   /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
   :global(#{$selector}.awsui-polaris-dark-mode) &,

package/lib/internal/scss/popover/body.scss

@@ -44,6 +44,10 @@
 
 .body-size-large {
   max-width: 480px;
+  @media (max-width: 480px) {
+    // On viewports smaller than 480px, we default to the body-size-medium width
+    max-width: 310px;
+  }
   &.fixed-width {
     width: 480px;
   }

package/lib/internal/scss/radio-group/styles.scss

@@ -33,7 +33,7 @@ $radio-size: awsui.$size-control;
 .input {
   @include focus-visible.when-visible {
     /* stylelint-disable-next-line selector-max-type, @cloudscape-design/no-implicit-descendant */
-    & + div {
+    & + span {
       @include styles.focus-highlight(2px, awsui.$border-radius-control-circular-focus-ring);
     }
   }

package/lib/internal/scss/select/parts/styles.scss

@@ -49,3 +49,8 @@ $checkbox-size: awsui.$size-control;
 .list-bottom {
   /* used in unit-tests */
 }
+
+.selected-icon {
+  padding-left: awsui.$space-scaled-s;
+  color: awsui.$color-border-item-focused;
+}

package/lib/internal/scss/toggle/styles.scss

@@ -21,7 +21,7 @@ $shadow-color: rgba(0, 0, 0, 0.25);
 .input {
   @include focus-visible.when-visible {
     /* stylelint-disable-next-line selector-max-type, @cloudscape-design/no-implicit-descendant */
-    & + div {
+    & + span {
       @include styles.focus-highlight(2px);
     }
   }
@@ -43,6 +43,7 @@ $shadow-color: rgba(0, 0, 0, 0.25);
 }
 
 .toggle-handle {
+  display: block;
   position: absolute;
 
   border-radius: 0.6 * styles.$base-size;

package/lib/internal/template/app-layout/visual-refresh/styles.css.js

@@ -1,64 +1,64 @@
 
     import './styles.scoped.css';
     export default {
-  "appbar": "awsui_appbar_hyvsj_homer_93",
-  "appbar-nav": "awsui_appbar-nav_hyvsj_homer_117",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_homer_121",
-  "appbar-tools": "awsui_appbar-tools_hyvsj_homer_125",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_homer_160",
-  "has-notifications-content": "awsui_has-notifications-content_hyvsj_homer_167",
-  "has-header": "awsui_has-header_hyvsj_homer_173",
-  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_homer_173",
-  "content-type-wizard": "awsui_content-type-wizard_hyvsj_homer_174",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_homer_177",
-  "content-type-table": "awsui_content-type-table_hyvsj_homer_178",
-  "background": "awsui_background_hyvsj_homer_213",
-  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_homer_216",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_homer_228",
-  "overlap": "awsui_overlap_hyvsj_homer_234",
-  "content": "awsui_content_hyvsj_homer_174",
-  "layout": "awsui_layout_hyvsj_homer_322",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_homer_404",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_homer_431",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_homer_434",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_homer_438",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_homer_452",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_homer_452",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_homer_464",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_homer_467",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_homer_482",
-  "container": "awsui_container_hyvsj_homer_490",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_homer_507",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_homer_512",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_homer_515",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_homer_515",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_homer_515",
-  "content-type-default": "awsui_content-type-default_hyvsj_homer_535",
-  "content-type-form": "awsui_content-type-form_hyvsj_homer_535",
-  "unfocusable": "awsui_unfocusable_hyvsj_homer_576",
-  "navigation-container": "awsui_navigation-container_hyvsj_homer_584",
-  "show-navigation": "awsui_show-navigation_hyvsj_homer_608",
-  "animating": "awsui_animating_hyvsj_homer_630",
-  "showButtons": "awsui_showButtons_hyvsj_homer_1",
-  "navigation": "awsui_navigation_hyvsj_homer_584",
-  "openNavigation": "awsui_openNavigation_hyvsj_homer_1",
-  "animated-content": "awsui_animated-content_hyvsj_homer_690",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_homer_699",
-  "notifications": "awsui_notifications_hyvsj_homer_216",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_homer_766",
-  "position-bottom": "awsui_position-bottom_hyvsj_homer_801",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_homer_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_homer_830",
-  "position-side": "awsui_position-side_hyvsj_homer_857",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_homer_1",
-  "tools-container": "awsui_tools-container_hyvsj_homer_894",
-  "tools": "awsui_tools_hyvsj_homer_894",
-  "openTools": "awsui_openTools_hyvsj_homer_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_homer_977",
-  "hide-tools": "awsui_hide-tools_hyvsj_homer_987",
-  "show-tools": "awsui_show-tools_hyvsj_homer_999",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_homer_977",
-  "trigger": "awsui_trigger_hyvsj_homer_1056",
-  "selected": "awsui_selected_hyvsj_homer_1094"
+  "appbar": "awsui_appbar_hyvsj_3w97z_93",
+  "appbar-nav": "awsui_appbar-nav_hyvsj_3w97z_117",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_3w97z_121",
+  "appbar-tools": "awsui_appbar-tools_hyvsj_3w97z_125",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_3w97z_160",
+  "has-notifications-content": "awsui_has-notifications-content_hyvsj_3w97z_167",
+  "has-header": "awsui_has-header_hyvsj_3w97z_173",
+  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_3w97z_173",
+  "content-type-wizard": "awsui_content-type-wizard_hyvsj_3w97z_174",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_3w97z_177",
+  "content-type-table": "awsui_content-type-table_hyvsj_3w97z_178",
+  "background": "awsui_background_hyvsj_3w97z_213",
+  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_3w97z_216",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_3w97z_228",
+  "overlap": "awsui_overlap_hyvsj_3w97z_234",
+  "content": "awsui_content_hyvsj_3w97z_174",
+  "layout": "awsui_layout_hyvsj_3w97z_322",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_3w97z_404",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_3w97z_431",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_3w97z_434",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_3w97z_438",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_3w97z_452",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_3w97z_452",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_3w97z_464",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_3w97z_467",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_3w97z_482",
+  "container": "awsui_container_hyvsj_3w97z_490",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_3w97z_507",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_3w97z_512",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_3w97z_515",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_3w97z_515",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_3w97z_515",
+  "content-type-default": "awsui_content-type-default_hyvsj_3w97z_535",
+  "content-type-form": "awsui_content-type-form_hyvsj_3w97z_535",
+  "unfocusable": "awsui_unfocusable_hyvsj_3w97z_576",
+  "navigation-container": "awsui_navigation-container_hyvsj_3w97z_584",
+  "show-navigation": "awsui_show-navigation_hyvsj_3w97z_608",
+  "animating": "awsui_animating_hyvsj_3w97z_630",
+  "showButtons": "awsui_showButtons_hyvsj_3w97z_1",
+  "navigation": "awsui_navigation_hyvsj_3w97z_584",
+  "openNavigation": "awsui_openNavigation_hyvsj_3w97z_1",
+  "animated-content": "awsui_animated-content_hyvsj_3w97z_690",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_3w97z_699",
+  "notifications": "awsui_notifications_hyvsj_3w97z_216",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_3w97z_766",
+  "position-bottom": "awsui_position-bottom_hyvsj_3w97z_801",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_3w97z_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_3w97z_830",
+  "position-side": "awsui_position-side_hyvsj_3w97z_857",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_3w97z_1",
+  "tools-container": "awsui_tools-container_hyvsj_3w97z_894",
+  "tools": "awsui_tools_hyvsj_3w97z_894",
+  "openTools": "awsui_openTools_hyvsj_3w97z_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_3w97z_977",
+  "hide-tools": "awsui_hide-tools_hyvsj_3w97z_987",
+  "show-tools": "awsui_show-tools_hyvsj_3w97z_999",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_3w97z_977",
+  "trigger": "awsui_trigger_hyvsj_3w97z_1056",
+  "selected": "awsui_selected_hyvsj_3w97z_1094"
 };