npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.534 → 3.0.536 - Mend

@cloudscape-design/components-themeable 3.0.534 → 3.0.536

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 (345) hide show

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

@@ -10,14 +10,16 @@
 .root {
   @include styles.default-text-style;
-  width: 100%;
+  inline-size: 100%;
 }
 .tools {
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
-  padding: awsui.$space-scaled-xs 0 awsui.$space-table-header-tools-bottom;
+  padding-block-start: awsui.$space-scaled-xs;
+  padding-block-end: awsui.$space-table-header-tools-bottom;
+  padding-inline: 0;
   &-filtering {
     @supports (flex-basis: fit-content) {
@@ -26,31 +28,31 @@
     @supports not (flex-basis: fit-content) {
       flex: 1 1 auto;
     }
-    max-width: 100%;
-    margin-right: awsui.$space-l;
+    max-inline-size: 100%;
+    margin-inline-end: awsui.$space-l;
   }
   &-align-right {
     display: flex;
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   &-pagination + &-preferences {
-    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     box-sizing: border-box;
-    margin-left: awsui.$space-xs;
-    padding-left: awsui.$space-xs;
+    margin-inline-start: awsui.$space-xs;
+    padding-inline-start: awsui.$space-xs;
   }
   &-small > &-filtering {
-    margin-right: 0;
-    margin-bottom: awsui.$space-scaled-xs;
+    margin-inline-end: 0;
+    margin-block-end: awsui.$space-scaled-xs;
     flex-basis: 100%;
   }
 }
 .table {
-  width: 100%;
+  inline-size: 100%;
   border-spacing: 0;
   position: relative;
   box-sizing: border-box;
@@ -62,7 +64,7 @@
 .wrapper {
   position: relative;
   box-sizing: border-box;
-  width: 100%;
+  inline-size: 100%;
   overflow-x: auto;
   scrollbar-width: none; /* Hide scrollbar in Firefox */
@@ -70,16 +72,15 @@
   &.variant-container {
     & > .table,
     & > .wrapper-content-measure {
-      padding-left: awsui.$space-table-horizontal;
-      padding-right: awsui.$space-table-horizontal;
+      padding-inline: awsui.$space-table-horizontal;
     }
   }
   &.variant-container:not(.has-footer) {
-    padding-bottom: awsui.$space-table-content-bottom;
+    padding-block-end: awsui.$space-table-content-bottom;
   }
   &:not(.has-header) {
-    border-top-right-radius: awsui.$border-radius-container;
-    border-top-left-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-start-start-radius: awsui.$border-radius-container;
   }
   &::-webkit-scrollbar {
     display: none; /* Hide scrollbar in Safari and Chrome */
@@ -92,24 +93,28 @@
 .cell-merged {
   text-align: center;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   &.has-footer {
     /*
     Add a bottom border to the body cell of an empty table as a separator between the
     table and the footer
     */
-    border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   }
   &-content {
     box-sizing: border-box;
-    width: 100%;
-    padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l;
+    inline-size: 100%;
+    padding-block-start: awsui.$space-scaled-m;
+    padding-block-end: awsui.$space-scaled-l;
+    padding-inline: awsui.$space-l;
     /* stylelint-disable plugin/no-unsupported-browser-features */
     @supports (position: sticky) {
       position: sticky;
-      left: 0;
+      inset-inline-start: 0;
       // Offset table paddings to position centered when sticky
-      margin: 0 calc(-2 * #{awsui.$space-table-horizontal});
+      margin-block: 0;
+      margin-inline: calc(-2 * #{awsui.$space-table-horizontal});
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
   }
@@ -130,14 +135,15 @@ filter search icon.
 */
 .selection-control {
   box-sizing: border-box;
-  max-width: awsui.$size-table-selection-horizontal;
-  min-width: awsui.$size-table-selection-horizontal;
+  max-inline-size: awsui.$size-table-selection-horizontal;
+  min-inline-size: awsui.$size-table-selection-horizontal;
   position: relative;
-  width: awsui.$size-table-selection-horizontal;
+  inline-size: awsui.$size-table-selection-horizontal;
   &.selection-control-header {
-    padding: awsui.$space-scaled-xs awsui.$space-scaled-l;
-    border-left: awsui.$border-item-width solid transparent;
+    padding-block: awsui.$space-scaled-xs;
+    padding-inline: awsui.$space-scaled-l;
+    border-inline-start: awsui.$border-item-width solid transparent;
   }
 }
@@ -155,55 +161,54 @@ the default white background of the container component.
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
   box-sizing: border-box;
-  width: 100%;
-  border-radius: 0;
+  inline-size: 100%;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
   background: awsui.$color-background-table-header;
   &.variant-stacked,
   &.variant-container {
     & > .table {
-      padding-left: awsui.$space-table-horizontal;
-      padding-right: awsui.$space-table-horizontal;
+      padding-inline: awsui.$space-table-horizontal;
     }
   }
   &::-webkit-scrollbar {
     display: none; /* Safari and Chrome */
   }
   &.table-has-header {
-    border-top: awsui.$border-divider-list-width solid awsui.$color-border-container-divider;
+    border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-container-divider;
   }
 }
 .header-controls {
-  padding-top: awsui.$space-container-header-top;
-  padding-bottom: awsui.$space-container-header-bottom;
+  padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
   &.variant-full-page {
-    padding-top: 0;
-    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
+    padding-block: 0 calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
   }
   &.variant-stacked,
   &.variant-container {
-    padding-left: calc(awsui.$space-table-horizontal + awsui.$space-table-header-horizontal);
-    padding-right: calc(awsui.$space-table-horizontal + awsui.$space-table-header-horizontal);
+    padding-inline: calc(awsui.$space-table-horizontal + awsui.$space-table-header-horizontal);
   }
   &.variant-embedded,
   &.variant-borderless {
-    padding-left: awsui.$space-table-header-horizontal;
-    padding-right: awsui.$space-table-header-horizontal;
-    padding-top: awsui.$space-table-embedded-header-top;
+    padding-inline: awsui.$space-table-header-horizontal;
+    padding-block-start: awsui.$space-table-embedded-header-top;
   }
 }
 .footer-wrapper {
   &.variant-stacked,
   &.variant-container {
-    padding-left: awsui.$space-table-horizontal;
-    padding-right: awsui.$space-table-horizontal;
+    padding-inline: awsui.$space-table-horizontal;
   }
 }
 .footer {
-  padding: awsui.$space-scaled-s awsui.$space-table-footer-horizontal;
+  padding-block: awsui.$space-scaled-s;
+  padding-inline: awsui.$space-table-footer-horizontal;
   &-with-pagination {
     display: flex;
     flex-direction: row;
@@ -214,7 +219,7 @@ the default white background of the container component.
   }
   &-pagination {
     // Align the footer pagination on the right
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }

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

@@ -16,7 +16,7 @@
 .tabs {
   @include styles.styles-reset;
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 .tabs-content {
@@ -32,12 +32,15 @@
 .tabs-content-wrapper {
   &.with-paddings > .tabs-content {
-    padding: awsui.$space-scaled-m 0;
+    padding-block: awsui.$space-scaled-m;
+    padding-inline: 0;
   }
 }
 .tabs-container-content-wrapper {
   &.with-paddings > .tabs-content {
-    padding: awsui.$space-tabs-content-top awsui.$space-container-horizontal awsui.$space-scaled-l;
+    padding-block-start: awsui.$space-tabs-content-top;
+    padding-block-end: awsui.$space-scaled-l;
+    padding-inline: awsui.$space-container-horizontal;
   }
 }

package/lib/internal/scss/tabs/tab-header-bar.scss CHANGED Viewed

@@ -12,19 +12,23 @@ $separator-color: awsui.$color-border-tabs-divider;
 $label-horizontal-spacing: awsui.$space-l;
 .tabs-header {
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   display: flex;
 }
 .tabs-header-list {
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   display: flex;
   overflow-x: scroll;
   overflow-y: hidden;
   position: relative;
-  width: 100%;
+  inline-size: 100%;
   // do not use pointer-events none because it disables scroll by sliding
   // Hide scrollbar in all browsers
@@ -36,18 +40,20 @@ $label-horizontal-spacing: awsui.$space-l;
 }
 .pagination-button {
-  margin: awsui.$space-scaled-s 0;
-  padding: 0 awsui.$space-xxs;
+  margin-block: awsui.$space-scaled-s;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: awsui.$space-xxs;
   display: flex;
   &-left {
-    border-right: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
+    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
     &-scrollable {
       z-index: 1;
       box-shadow: 5px 0px 4px -3px awsui.$color-border-tabs-shadow, 1px 0px 0px 0px awsui.$color-border-tabs-shadow;
     }
   }
   &-right {
-    border-left: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
+    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
     &-scrollable {
       z-index: 1;
       box-shadow: -5px 0px 4px -3px awsui.$color-border-tabs-shadow, -1px 0px 0px 0 awsui.$color-border-tabs-shadow;
@@ -58,11 +64,12 @@ $label-horizontal-spacing: awsui.$space-l;
 .tabs-tab {
   // Clear list formatting that comes with list item
   list-style: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   flex-shrink: 0;
   display: flex;
-  max-width: calc(90% - #{$label-horizontal-spacing});
+  max-inline-size: calc(90% - #{$label-horizontal-spacing});
   & > button {
     background-color: transparent;
@@ -72,8 +79,9 @@ $label-horizontal-spacing: awsui.$space-l;
 .tabs-tab-label {
   display: flex;
   align-items: center;
-  padding: awsui.$space-scaled-2x-xxs $label-horizontal-spacing;
-  text-align: left;
+  padding-block: awsui.$space-scaled-2x-xxs;
+  padding-inline: $label-horizontal-spacing;
+  text-align: start;
   position: relative;
   @include styles.text-wrapping;
@@ -82,8 +90,8 @@ $label-horizontal-spacing: awsui.$space-l;
 .tabs-tab:not(:last-child) {
   & > a > .tabs-tab-label,
   & > button > .tabs-tab-label {
-    margin-right: calc(-1 * #{awsui.$border-divider-section-width});
-    border-right: awsui.$border-divider-section-width solid $separator-color;
+    margin-inline-end: calc(-1 * #{awsui.$border-divider-section-width});
+    border-inline-end: awsui.$border-divider-section-width solid $separator-color;
   }
 }
@@ -93,16 +101,21 @@ $label-horizontal-spacing: awsui.$space-l;
   align-items: stretch;
   text-decoration: none;
   cursor: pointer;
-  padding: calc(#{awsui.$space-scaled-s} - 1px) 0 awsui.$space-scaled-s 0;
-  margin-top: 1px;
-  border: awsui.$border-divider-section-width solid transparent;
+  padding-block-start: calc(#{awsui.$space-scaled-s} - 1px);
+  padding-block-end: awsui.$space-scaled-s;
+  padding-inline: 0;
+  margin-block-start: 1px;
+  border-block: awsui.$border-divider-section-width solid transparent;
+  border-inline: awsui.$border-divider-section-width solid transparent;
   font-size: awsui.$font-tabs-size;
   line-height: awsui.$font-tabs-line-height;
   font-weight: awsui.$font-wayfinding-link-active-weight;
   color: awsui.$color-text-interactive-default;
   &.refresh {
-    padding: calc(awsui.$space-static-xs - 1px) 0 awsui.$space-static-xs 0;
+    padding-block-start: calc(awsui.$space-static-xs - 1px);
+    padding-block-end: awsui.$space-static-xs;
+    padding-inline: 0;
   }
   &:hover {
@@ -119,26 +132,26 @@ $label-horizontal-spacing: awsui.$space-l;
     @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter);
     & > a > .tabs-tab-label,
     & > button > .tabs-tab-label {
-      border-right-color: transparent;
+      border-inline-end-color: transparent;
     }
   }
 }
 // Remediate focus shadow
 .tabs-tab:first-child {
-  margin-left: 1px;
+  margin-inline-start: 1px;
   & > a > .tabs-tab-label,
   & > button > .tabs-tab-label {
-    padding-left: calc(#{$label-horizontal-spacing} - 1px);
+    padding-inline-start: calc(#{$label-horizontal-spacing} - 1px);
   }
 }
 // Remediate focus shadow
 .tabs-tab:last-child {
-  margin-right: 1px;
+  margin-inline-end: 1px;
   & > a > .tabs-tab-label,
   & > button > .tabs-tab-label {
-    padding-right: calc(#{$label-horizontal-spacing} - 1px);
+    padding-inline-end: calc(#{$label-horizontal-spacing} - 1px);
   }
 }
@@ -157,13 +170,15 @@ $label-horizontal-spacing: awsui.$space-l;
   &:after {
     content: '';
     position: absolute;
-    left: 0;
-    width: 100%;
-    bottom: calc(-1 * #{awsui.$border-divider-section-width});
-    height: awsui.$border-active-width;
-    border-radius: awsui.$border-radius-tabs-focus-ring;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
+    block-size: awsui.$border-active-width;
+    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
     background: awsui.$color-border-tabs-underline;
     opacity: 0;
   }
@@ -184,5 +199,5 @@ $label-horizontal-spacing: awsui.$space-l;
 }
 .tabs-header-with-divider {
-  border-bottom: awsui.$border-divider-section-width solid $separator-color;
+  border-block-end: awsui.$border-divider-section-width solid $separator-color;
 }

package/lib/internal/scss/text-content/styles.scss CHANGED Viewed

@@ -18,8 +18,10 @@
     font-family: inherit;
     font-weight: normal;
     text-decoration: none;
-    margin: 0;
-    padding: awsui.$space-xxs 0;
+    margin-block: 0;
+    margin-inline: 0;
+    padding-block: awsui.$space-xxs;
+    padding-inline: 0;
   }
   h1,
   h2,
@@ -82,8 +84,9 @@
   ul,
   ol {
-    padding-left: awsui.$space-l;
-    margin: awsui.$space-scaled-xs 0;
+    padding-inline-start: awsui.$space-l;
+    margin-block: awsui.$space-scaled-xs;
+    margin-inline: 0;
     list-style-position: outside;
     + ul,
@@ -93,12 +96,13 @@
     > li + ol,
     > li > ul,
     > li > ol {
-      padding-top: awsui.$space-scaled-xxs;
+      padding-block-start: awsui.$space-scaled-xxs;
     }
     > li > ul,
     > li > ol {
-      margin: 0;
+      margin-block: 0;
+      margin-inline: 0;
     }
   }
 }

package/lib/internal/scss/text-filter/styles.scss CHANGED Viewed

@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   // The xs breakpoint, minus the table tools container padding
-  max-width: calc(688px - 2 * #{awsui.$space-l});
+  max-inline-size: calc(688px - 2 * #{awsui.$space-l});
 }
 .input {
@@ -23,5 +23,5 @@
   display: inline-block;
   box-sizing: border-box;
   white-space: nowrap;
-  padding-left: awsui.$space-s;
+  padding-inline-start: awsui.$space-s;
 }

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

@@ -19,15 +19,21 @@
   // Allow multi-line placeholders
   white-space: pre-wrap;
-  padding: styles.$control-padding;
+  padding-block: styles.$control-padding-vertical;
+  padding-inline: styles.$control-padding-horizontal;
   color: awsui.$color-text-body-default;
-  max-width: 100%;
-  width: 100%;
+  max-inline-size: 100%;
+  inline-size: 100%;
   display: block;
   box-sizing: border-box;
   background-color: awsui.$color-background-input-default;
-  border-radius: styles.$control-border-radius;
-  border: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-start-start-radius: styles.$control-border-radius;
+  border-start-end-radius: styles.$control-border-radius;
+  border-end-start-radius: styles.$control-border-radius;
+  border-end-end-radius: styles.$control-border-radius;
+  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
   @include styles.font-body-m;
   &.textarea-readonly {

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

@@ -25,35 +25,44 @@ $gutter: awsui.$space-grid-gutter;
   // IE11 ignores calc functions in flex shorthand declarations
   // https://github.com/philipwalton/flexbugs#flexbug-8
   flex-basis: calc(#{$p} - #{$gutter});
-  max-width: calc(#{$p} - #{$gutter});
+  max-inline-size: calc(#{$p} - #{$gutter});
 }
 .tile-container {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  border: styles.$control-border-width solid awsui.$color-border-input-default;
-  border-radius: awsui.$border-radius-tiles;
+  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-start-start-radius: awsui.$border-radius-tiles;
+  border-start-end-radius: awsui.$border-radius-tiles;
+  border-end-start-radius: awsui.$border-radius-tiles;
+  border-end-end-radius: awsui.$border-radius-tiles;
   background: awsui.$color-background-input-default;
-  padding: awsui.$space-xs awsui.$space-scaled-m;
+  padding-block: awsui.$space-xs;
+  padding-inline: awsui.$space-scaled-m;
   &.refresh {
-    padding: awsui.$space-xs awsui.$space-s;
+    padding-block: awsui.$space-xs;
+    padding-inline: awsui.$space-s;
   }
   &.has-metadata {
-    padding-bottom: awsui.$space-s;
+    padding-block-end: awsui.$space-s;
     &.refresh {
-      padding-bottom: awsui.$space-scaled-s;
+      padding-block-end: awsui.$space-scaled-s;
     }
   }
   &.selected {
-    border: styles.$control-border-width solid awsui.$color-border-item-selected;
+    border-block: styles.$control-border-width solid awsui.$color-border-item-selected;
+    border-inline: styles.$control-border-width solid awsui.$color-border-item-selected;
     background: awsui.$color-background-item-selected;
   }
   &.disabled {
-    border: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
+    border-block: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
+    border-inline: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
     background: awsui.$color-background-tiles-disabled;
   }
@@ -66,11 +75,13 @@ $gutter: awsui.$space-grid-gutter;
 .columns {
   display: flex;
   flex-wrap: wrap;
-  margin: calc(#{$gutter} / -2);
+  margin-block: calc(#{$gutter} / -2);
+  margin-inline: calc(#{$gutter} / -2);
   @each $i, $columns-setting in mixins.$column-breakpoint-spans {
     &.column-#{$i} {
       & > .tile-container {
-        margin: calc(#{$gutter} / 2);
+        margin-block: calc(#{$gutter} / 2);
+        margin-inline: calc(#{$gutter} / 2);
         box-sizing: border-box;
         @include make-column(12);
         &.breakpoint-xs {
@@ -86,10 +97,10 @@ $gutter: awsui.$space-grid-gutter;
 .control {
   flex-grow: 1;
-  margin-bottom: awsui.$space-s;
+  margin-block-end: awsui.$space-s;
   &.no-image {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
@@ -101,7 +112,7 @@ $gutter: awsui.$space-grid-gutter;
   // an item. We do not have control over the img element.
   // stylelint-disable-next-line selector-max-type
   & > img {
-    max-width: 100%;
+    max-inline-size: 100%;
   }
   &.disabled {

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

@@ -28,7 +28,10 @@ $shadow-color: rgba(0, 0, 0, 0.25);
   forced-color-adjust: none;
   @include styles.make-control-size($toggle-height, $toggle-width);
   background: awsui.$color-background-toggle-default;
-  border-radius: 0.8 * styles.$base-size;
+  border-start-start-radius: 0.8 * styles.$base-size;
+  border-start-end-radius: 0.8 * styles.$base-size;
+  border-end-start-radius: 0.8 * styles.$base-size;
+  border-end-end-radius: 0.8 * styles.$base-size;
   &-checked {
     background: awsui.$color-background-control-checked;
   }
@@ -43,14 +46,16 @@ $shadow-color: rgba(0, 0, 0, 0.25);
 .toggle-handle {
   display: block;
   position: absolute;
-  border-radius: 0.6 * styles.$base-size;
+  border-start-start-radius: 0.6 * styles.$base-size;
+  border-start-end-radius: 0.6 * styles.$base-size;
+  border-end-start-radius: 0.6 * styles.$base-size;
+  border-end-end-radius: 0.6 * styles.$base-size;
   background: awsui.$color-foreground-control-default;
   box-shadow: 1px 1px $shadow-color;
-  width: $handle-size;
-  height: $handle-size;
-  top: $handle-offset;
-  left: $handle-offset;
+  inline-size: $handle-size;
+  block-size: $handle-size;
+  inset-block-start: $handle-offset;
+  inset-inline-start: $handle-offset;
   &-checked {
     transform: translateX(0.8 * styles.$base-size);