npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.470 → 3.0.471 - Mend

@cloudscape-design/components-themeable 3.0.470 → 3.0.471

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

Files changed (138) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "5ed251fb7b63ba519cea92994b2cbf0e1c79872f"
+  "commit": "8400936648a425c75b87853ab546b2cf4435752e"
 }

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

@@ -12,8 +12,12 @@
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  border-radius: awsui.$border-radius-badge;
-  padding: 0 awsui.$space-xs;
+  border-start-start-radius: awsui.$border-radius-badge;
+  border-start-end-radius: awsui.$border-radius-badge;
+  border-end-start-radius: awsui.$border-radius-badge;
+  border-end-end-radius: awsui.$border-radius-badge;
+  padding-block: 0;
+  padding-inline: awsui.$space-xs;
   color: awsui.$color-text-notification-default;
   &.badge-color-grey {

package/lib/internal/scss/box/base-styles.scss CHANGED Viewed

@@ -129,9 +129,11 @@ $font-styles: (
 }
 @mixin headings-paragraphs-extra-defaults {
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
   text-decoration: none;
-  padding: awsui.$space-xxs 0;
+  padding-block: awsui.$space-xxs;
+  padding-inline: 0;
 }
 @mixin code-extra-defaults {

package/lib/internal/scss/box/layout.scss CHANGED Viewed

@@ -24,9 +24,11 @@
   }
 }
+/* stylelint-disable csstools/use-logical */
 .f-left {
   float: left;
 }
 .f-right {
   float: right;
 }
+/* stylelint-enable csstools/use-logical */

package/lib/internal/scss/box/text.scss CHANGED Viewed

@@ -41,7 +41,7 @@
     &.key-label-variant {
       @include styles.font-label;
       color: awsui.$color-text-label;
-      margin-bottom: awsui.$space-key-value-gap;
+      margin-block-end: awsui.$space-key-value-gap;
     }
     &.value-large-variant {
       @include styles.font-display-l;
@@ -90,10 +90,10 @@
 }
 .t-left {
-  text-align: left;
+  text-align: start;
 }
 .t-right {
-  text-align: right;
+  text-align: end;
 }
 .t-center {
   text-align: center;

package/lib/internal/scss/breadcrumb-group/item/styles.scss CHANGED Viewed

@@ -15,7 +15,8 @@
   display: flex;
   > .icon {
-    margin: 0 awsui.$space-xs;
+    margin-block: 0;
+    margin-inline: awsui.$space-xs;
     color: awsui.$color-text-breadcrumb-icon;
   }
@@ -40,7 +41,7 @@
   }
 }
 .compressed {
-  min-width: 0;
+  min-inline-size: 0;
   overflow: hidden;
   > .text {
     overflow: hidden;

package/lib/internal/scss/breadcrumb-group/styles.scss CHANGED Viewed

@@ -8,8 +8,10 @@
 .breadcrumb-group {
   @include styles.styles-reset;
-  margin: 0;
-  padding: awsui.$space-xxs 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: awsui.$space-xxs;
+  padding-inline: 0;
   > .item {
     @include styles.styles-reset;
@@ -19,24 +21,29 @@
   > .breadcrumb-group-list {
     display: flex;
     align-items: center;
-    padding: 0;
-    margin: 0;
+    padding-block: 0;
+    padding-inline: 0;
+    margin-block: 0;
+    margin-inline: 0;
     list-style: none;
-    width: 100%;
+    inline-size: 100%;
     flex-wrap: wrap;
     > .item,
     > .ellipsis {
       display: inline-block;
-      padding: 0;
-      margin: 0;
+      padding-block: 0;
+      padding-inline: 0;
+      margin-block: 0;
+      margin-inline: 0;
     }
     > .ellipsis {
       display: none;
       > .icon {
-        margin: 0 styles.$base-size;
+        margin-block: 0;
+        margin-inline: styles.$base-size;
         color: awsui.$color-text-breadcrumb-icon;
       }
     }
@@ -54,7 +61,7 @@
         flex-shrink: 0;
       }
       > .item {
-        min-width: 0;
+        min-inline-size: 0;
         &:not(:first-child):not(:last-child) {
           display: none;
         }

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

@@ -8,19 +8,20 @@
 .header {
   position: relative;
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
   color: awsui.$color-text-dropdown-group-label;
-  border: awsui.$border-divider-list-width solid transparent;
+  border-block: awsui.$border-divider-list-width solid transparent;
+  border-inline: awsui.$border-divider-list-width solid transparent;
   // remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
-  border-left: 0;
-  border-right: 0;
+  border-inline-width: 0;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
   // to compensate for the loss of padding due to the removal of the left and right borders
   // and differences in default divider + selected border widths (visual refresh)
-  padding: styles.$option-padding-with-border-placeholder-vertical
-    calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
+  padding-block: styles.$option-padding-with-border-placeholder-vertical;
+  padding-inline: calc(#{awsui.$space-button-horizontal} + #{awsui.$border-item-width});
   z-index: 1;
   &.disabled {
@@ -29,8 +30,8 @@
   }
   &.expandable-header {
-    border-top-color: awsui.$color-border-dropdown-group;
-    border-bottom-color: awsui.$color-border-dropdown-group;
+    border-block-start-color: awsui.$color-border-dropdown-group;
+    border-block-end-color: awsui.$color-border-dropdown-group;
     cursor: pointer;
     &.disabled {
       cursor: default;
@@ -39,16 +40,22 @@
       outline: none;
     }
     &.rolled-down {
-      border-bottom-color: transparent;
+      border-block-end-color: transparent;
     }
     &.highlighted {
       background-color: awsui.$color-background-dropdown-item-hover;
       color: awsui.$color-text-dropdown-item-highlighted;
       // reset padding when adding border back in
-      padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
-      border: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-radius-item;
+      padding-block: styles.$option-padding-vertical;
+      padding-inline: awsui.$space-button-horizontal;
+      border-block: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
+      border-inline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       z-index: 2;
       &.disabled {
         background-color: awsui.$color-background-dropdown-item-dimmed;
         border-color: awsui.$color-border-dropdown-item-dimmed-hover;
@@ -61,14 +68,12 @@
     }
     &.variant-navigation {
-      padding-top: awsui.$space-xs;
-      padding-bottom: awsui.$space-xs;
+      padding-block: awsui.$space-xs;
       &.highlighted {
         border-color: transparent;
-        border-top-color: awsui.$color-border-dropdown-group;
-        border-bottom-color: awsui.$color-border-dropdown-group;
+        border-block-start-color: awsui.$color-border-dropdown-group;
+        border-block-end-color: awsui.$color-border-dropdown-group;
         background-color: transparent;
         color: awsui.$color-text-accent;
       }
@@ -78,33 +83,34 @@
 .category {
   list-style: none;
-  margin-top: calc(-1 * #{awsui.$border-divider-list-width});
-  padding: 0;
+  margin-block-start: calc(-1 * #{awsui.$border-divider-list-width});
+  padding-block: 0;
+  padding-inline: 0;
   &:first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
   &.expandable {
-    border-top: 0;
+    border-block-start: 0;
   }
   &:last-child {
-    border-bottom: none;
+    border-block-end: none;
   }
   &.variant-navigation {
-    padding-top: awsui.$space-xxs;
+    padding-block-start: awsui.$space-xxs;
     &.expandable {
-      padding-top: 0;
+      padding-block-start: 0;
     }
   }
 }
 .expand-icon {
   position: relative;
-  left: awsui.$space-s;
-  width: awsui.$space-m;
+  inset-inline-start: awsui.$space-s;
+  inline-size: awsui.$space-m;
   display: inline-block;
   &-up {
@@ -120,7 +126,10 @@
 }
 .items-list-container {
-  padding: 0;
-  margin: -1px 0 0 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block-start: -1px;
+  margin-block-end: 0;
+  margin-inline: 0;
   overflow-y: auto;
 }

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

@@ -9,11 +9,13 @@
 .item-element {
   position: relative;
   z-index: 1;
-  border: awsui.$border-item-width solid transparent;
+  border-block: awsui.$border-item-width solid transparent;
+  border-inline: awsui.$border-item-width solid transparent;
   list-style: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   color: awsui.$color-text-dropdown-item-default;
-  margin-top: calc(-1 * #{styles.$control-border-width});
+  margin-block-start: calc(-1 * #{styles.$control-border-width});
   cursor: pointer;
   &.disabled {
@@ -21,10 +23,10 @@
     color: awsui.$color-text-dropdown-item-disabled;
   }
   &:first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
   &.last {
-    border-bottom: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
+    border-block-end: awsui.$border-item-width solid awsui.$color-border-dropdown-group;
   }
   &.highlighted {
     color: awsui.$color-text-dropdown-item-highlighted;
@@ -36,7 +38,10 @@
     &.variant-primary {
       background-color: awsui.$color-background-dropdown-item-hover;
       border-color: awsui.$color-border-dropdown-item-hover;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       &.disabled {
         color: awsui.$color-text-dropdown-item-dimmed;
@@ -58,18 +63,17 @@
     // Additional spacing for groups of items
     &.first:not(.has-category-header) {
-      padding-top: styles.$option-padding-vertical;
+      padding-block-start: styles.$option-padding-vertical;
     }
     &.last {
-      padding-bottom: styles.$option-padding-vertical;
+      padding-block-end: styles.$option-padding-vertical;
     }
     &.first.last {
-      padding-bottom: styles.$option-padding-vertical;
-      padding-top: styles.$option-padding-vertical;
+      padding-block: styles.$option-padding-vertical;
     }
     // Additional spacing for the very last item in the list
     &.last:last-child {
-      padding-bottom: styles.$option-padding-vertical;
+      padding-block-end: styles.$option-padding-vertical;
     }
   }
 }
@@ -78,7 +82,8 @@
   @include styles.text-wrapping;
   display: flex;
   align-items: flex-start;
-  padding: styles.$option-padding-vertical awsui.$space-button-horizontal;
+  padding-block: styles.$option-padding-vertical;
+  padding-inline: awsui.$space-button-horizontal;
   color: inherit;
   text-decoration: none;
@@ -89,15 +94,15 @@
   /* stylelint-disable-next-line selector-max-type */
   .has-category-header > &,
   .has-category-header > span > & {
-    padding-left: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
+    padding-inline-start: calc(#{awsui.$space-s} + #{awsui.$space-button-horizontal});
   }
 }
 .icon {
-  padding-right: awsui.$space-xs;
+  padding-inline-end: awsui.$space-xs;
   flex-shrink: 0;
 }
 .external-icon {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }

package/lib/internal/scss/button-dropdown/mobile-expandable-group/styles.scss CHANGED Viewed

@@ -20,12 +20,12 @@
     user-select: none;
     background-color: awsui.$color-background-dropdown-item-default;
     outline: none;
-    border-top: none;
-    border-bottom: none;
+    border-block-start: none;
+    border-block-end: none;
     display: flex;
     flex-direction: column;
-    width: 100%;
+    inline-size: 100%;
     &.nowrap {
       white-space: nowrap;

package/lib/internal/scss/button-dropdown/styles.scss CHANGED Viewed

@@ -13,8 +13,10 @@ $dropdown-trigger-icon-offset: 2px;
 }
 .items-list-container {
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
   @include styles.with-motion {
     animation: awsui-motion-fade-in-0 500ms awsui.$motion-easing-show-quick;
@@ -40,9 +42,11 @@ $dropdown-trigger-icon-offset: 2px;
   display: flex;
   flex-direction: column;
   list-style: none;
-  padding: awsui.$space-s awsui.$space-l;
-  border: styles.$control-border-width solid transparent;
-  border-bottom: styles.$control-border-width solid awsui.$color-border-dropdown-group;
+  padding-block: awsui.$space-s;
+  padding-inline: awsui.$space-l;
+  border-block-start: styles.$control-border-width solid transparent;
+  border-block-end: styles.$control-border-width solid awsui.$color-border-dropdown-group;
+  border-inline: styles.$control-border-width solid transparent;
 }
 .title,
@@ -61,24 +65,23 @@ $dropdown-trigger-icon-offset: 2px;
   & > .trigger-item:not(:last-child) {
     & > .trigger-button {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      padding-right: awsui.$space-m;
-      margin-right: awsui.$space-xxxs;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      padding-inline-end: awsui.$space-m;
+      margin-inline-end: awsui.$space-xxxs;
     }
   }
   & > .trigger-item:not(:first-child) {
     & > .trigger-button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      padding-left: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
-      padding-right: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      padding-inline: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
     }
     &.visual-refresh {
       & > .trigger-button {
-        padding-right: calc(#{awsui.$space-s} - #{$dropdown-trigger-icon-offset});
+        padding-inline-end: calc(#{awsui.$space-s} - #{$dropdown-trigger-icon-offset});
       }
     }
   }

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

@@ -18,11 +18,12 @@
 .calendar {
   display: block;
   // IE11 does not calculate the height correctly when in nested flex containers (@see https://github.com/philipwalton/flexbugs#flexbug-3)
-  width: awsui.$size-calendar-grid-width;
+  inline-size: awsui.$size-calendar-grid-width;
   overflow: auto;
   &-inner {
-    margin: awsui.$space-xs;
+    margin-block: awsui.$space-xs;
+    margin-inline: awsui.$space-xs;
   }
   &-header {
@@ -35,7 +36,8 @@
     @include styles.font-body-m;
     font-weight: typographyConstants.$font-weight-bold;
     color: calendar.$header-color;
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
   }
   &-next-month-btn {
@@ -47,39 +49,45 @@
   }
   &-grid {
-    width: 100%;
+    inline-size: 100%;
     border-spacing: 0;
   }
   &-grid-cell {
-    width: calc(100% / 7);
+    inline-size: calc(100% / 7);
     word-break: break-word;
     text-align: center;
     font-weight: unset;
   }
   &-day-header {
-    padding: awsui.$space-s 0 awsui.$space-xxs;
+    padding-block-start: awsui.$space-s;
+    padding-block-end: awsui.$space-xxs;
+    padding-inline: 0;
     color: calendar.$grid-day-name-color;
     @include styles.font-body-s;
   }
   &-day {
-    border-bottom: calendar.$grid-border;
-    border-right: calendar.$grid-border;
-    padding: awsui.$space-xxs 0;
+    border-block-end: calendar.$grid-border;
+    border-inline-end: calendar.$grid-border;
+    padding-block: awsui.$space-xxs;
+    padding-inline: 0;
     color: calendar.$grid-disabled-day-color;
     position: relative;
     &:first-child {
-      border-left: calendar.$grid-border;
+      border-inline-start: calendar.$grid-border;
     }
     &-enabled {
       cursor: pointer;
       color: calendar.$grid-nonmonth-day-color;
       &::after {
-        border-radius: awsui.$border-radius-item;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
       &.calendar-day-current-month {
         color: calendar.$grid-day-color;
@@ -88,7 +96,8 @@
           background-color: calendar.$grid-hover-background-color;
           &:not(.calendar-day-selected) {
             &::after {
-              border: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+              border-block: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+              border-inline: awsui.$border-item-width solid calendar.$grid-hover-border-color;
             }
           }
         }
@@ -97,7 +106,10 @@
     &-today {
       background-color: calendar.$grid-today-background-color;
-      border-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
       font-weight: styles.$font-weight-bold;
     }
@@ -105,10 +117,10 @@
       content: '';
       position: absolute;
       z-index: 1;
-      top: calc(-1 * #{awsui.$border-item-width});
-      left: -1px;
-      bottom: -1px;
-      right: calc(-1 * #{awsui.$border-item-width});
+      inset-block-start: calc(-1 * #{awsui.$border-item-width});
+      inset-block-end: -1px;
+      inset-inline-start: -1px;
+      inset-inline-end: calc(-1 * #{awsui.$border-item-width});
       background-color: transparent;
     }
     > .day-inner {
@@ -148,8 +160,12 @@
       }
       &::after {
         background-color: calendar.$grid-selected-background-color;
-        border: awsui.$border-item-width solid calendar.$grid-selected-border-color;
-        border-radius: awsui.$border-radius-item;
+        border-block: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+        border-inline: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+        border-start-start-radius: awsui.$border-radius-item;
+        border-start-end-radius: awsui.$border-radius-item;
+        border-end-start-radius: awsui.$border-radius-item;
+        border-end-end-radius: awsui.$border-radius-item;
       }
       > .day-inner {
         z-index: 2;
@@ -162,7 +178,7 @@
   &-week {
     &:first-child {
       > .calendar-day {
-        border-top: calendar.$grid-border;
+        border-block-start: calendar.$grid-border;
       }
     }
   }