@cloudscape-design/components-themeable 3.0.534 → 3.0.536

package/lib/internal/scss/table/body-cell/styles.scss

@@ -27,10 +27,12 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
 .body-cell {
   box-sizing: border-box;
-  padding: $cell-vertical-padding $cell-horizontal-padding $cell-vertical-padding-w-border;
-  border-top: awsui.$border-divider-list-width solid transparent;
+  padding-block-start: $cell-vertical-padding;
+  padding-block-end: $cell-vertical-padding-w-border;
+  padding-inline: $cell-horizontal-padding;
+  border-block-start: awsui.$border-divider-list-width solid transparent;
   word-wrap: break-word;
-  border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
+  border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   font-weight: inherit;
   text-align: start;
   &:not(.body-cell-wrap) {
@@ -39,17 +41,17 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     text-overflow: ellipsis;
   }
   &:first-child {
-    border-left: $border-placeholder;
+    border-inline-start: $border-placeholder;
   }
   &:last-child {
-    border-right: $border-placeholder;
-    padding-right: $cell-edge-horizontal-padding;
+    border-inline-end: $border-placeholder;
+    padding-inline-end: $cell-edge-horizontal-padding;
   }
   &.is-visual-refresh:first-child {
     &:not(.has-striped-rows) {
-      padding-left: awsui.$space-xxxs;
+      padding-inline-start: awsui.$space-xxxs;
       &:not(.body-cell-edit-active).body-cell-editable:hover {
-        padding-left: calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width});
+        padding-inline-start: calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width});
       }
     }
 
@@ -59,9 +61,9 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       to the table edge.
       */
     &:first-child.has-striped-rows {
-      padding-left: awsui.$space-xxs;
+      padding-inline-start: awsui.$space-xxs;
       &-sticky-cell-pad-left {
-        padding-left: awsui.$space-table-horizontal;
+        padding-inline-start: awsui.$space-table-horizontal;
       }
     }
 
@@ -71,19 +73,19 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       that the placeholder border would consume.
       */
     &:not(.has-selection):not(.body-cell-editable) {
-      border-left: none;
+      border-inline-start: none;
     }
   }
   &:first-child:not(.is-visual-refresh) {
-    padding-left: $cell-edge-horizontal-padding;
+    padding-inline-start: $cell-edge-horizontal-padding;
   }
   &-first-row {
-    border-top: $border-placeholder;
+    border-block-start: $border-placeholder;
   }
   &-last-row:not(.body-cell-selected) {
     &:not(.has-footer) {
       // skip the border for the last row because the container already has a border
-      border-bottom: $border-placeholder;
+      border-block-end: $border-placeholder;
     }
 
     &.has-footer {
@@ -91,7 +93,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       Add a bottom border to the body cells of the last row 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;
     }
   }
   &-shaded {
@@ -99,23 +101,29 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   }
   &-selected {
     background-color: awsui.$color-background-item-selected;
-    border-top: $selected-border;
-    border-bottom: $selected-border;
-    padding-bottom: $cell-vertical-padding;
+    border-block-start: $selected-border;
+    border-block-end: $selected-border;
+    padding-block-end: $cell-vertical-padding;
 
     // Last selected row has a fixed border-bottom width which do not change on selection in visual refresh.
     // Adjust padding-bottom prevents a slight jump in the table height.
     &.body-cell-last-row.is-visual-refresh {
-      padding-bottom: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
+      padding-block-end: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
     }
 
     &:first-child {
-      border-left: $selected-border;
-      border-radius: awsui.$border-radius-item 0 0 awsui.$border-radius-item;
+      border-inline-start: $selected-border;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: 0;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: 0;
     }
     &:last-child {
-      border-right: $selected-border;
-      border-radius: 0 awsui.$border-radius-item awsui.$border-radius-item 0;
+      border-inline-end: $selected-border;
+      border-start-start-radius: 0;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: 0;
+      border-end-end-radius: awsui.$border-radius-item;
     }
   }
 
@@ -124,7 +132,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     background: awsui.$color-background-container-content;
     z-index: 798; // Our sticky elements should have z-index in the range of 800-850, this value needs to be lower
     &-pad-left:not(.has-selection):not(.is-visual-refresh.body-cell:first-child.has-striped-rows) {
-      padding-left: awsui.$space-table-horizontal;
+      padding-inline-start: awsui.$space-table-horizontal;
     }
     &.body-cell-shaded {
       background: awsui.$color-background-cell-shaded;
@@ -163,51 +171,54 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
   // Use padding as a selected border placeholder to make sure rows don't change height on selection (visual refresh)
   &-selected:not(:first-child) {
-    padding-top: $cell-vertical-padding-w-border;
+    padding-block-start: $cell-vertical-padding-w-border;
   }
   &:not(.body-cell-selected).body-cell-next-selected {
-    border-bottom: 0;
-    padding-bottom: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
+    border-block-end: 0;
+    padding-block-end: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
   }
   &-selected.body-cell-prev-selected {
-    padding-top: $cell-vertical-padding-w-border;
-    border-top: $selected-border-placeholder;
+    padding-block-start: $cell-vertical-padding-w-border;
+    border-block-start: $selected-border-placeholder;
   }
   &-selected.body-cell-next-selected {
-    border-bottom-width: awsui.$border-divider-list-width;
+    border-block-end-width: awsui.$border-divider-list-width;
   }
   // Remove border radii for consecutive selected rows (visual refresh)
   &-selected.body-cell-next-selected:first-child {
-    border-bottom-left-radius: 0;
+    border-end-start-radius: 0;
   }
   &-selected.body-cell-next-selected:last-child {
-    border-bottom-right-radius: 0;
+    border-end-end-radius: 0;
   }
   &-selected.body-cell-prev-selected:first-child {
-    border-top-left-radius: 0;
+    border-start-start-radius: 0;
   }
   &-selected.body-cell-prev-selected:last-child {
-    border-top-right-radius: 0;
+    border-start-end-radius: 0;
   }
   // Reset padding for selected rows with no adjacent selected row above it,
   // because rows reuse adjacent selected borders (visual refresh)
   &-selected:not(.body-cell-prev-selected) {
-    padding-top: $cell-vertical-padding;
+    padding-block-start: $cell-vertical-padding;
   }
 
   &-editor {
-    padding: 0 $edit-button-padding-right 0 0;
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: $edit-button-padding-right;
   }
 
   &-success {
-    padding: 0 $success-icon-padding-right 0 0;
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: $success-icon-padding-right;
   }
 
   &-success,
   &-editor {
-    top: 0;
-    right: 0;
-    bottom: 0;
+    inset-block: 0;
+    inset-inline-end: 0;
     position: absolute;
 
     display: flex;
@@ -218,7 +229,8 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     cursor: pointer;
     outline: 0;
     background: 0;
-    border: 0;
+    border-block: 0;
+    border-inline: 0;
 
     color: awsui.$color-text-button-normal-default;
 
@@ -230,13 +242,15 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     }
 
     &-form {
-      margin: calc(-1 * #{awsui.$space-xs}) calc(-1.5 * #{awsui.$space-xs});
+      margin-block: calc(-1 * #{awsui.$space-xs});
+      margin-inline: calc(-1.5 * #{awsui.$space-xs});
+
       .is-visual-refresh.body-cell:first-child.has-striped-rows > & {
-        margin-left: calc(-1 * #{awsui.$space-xxs});
+        margin-inline-start: calc(-1 * #{awsui.$space-xxs});
       }
 
       .is-visual-refresh.body-cell:first-child:not(.has-striped-rows) > & {
-        margin-left: calc(-1 * #{awsui.$space-xxxs});
+        margin-inline-start: calc(-1 * #{awsui.$space-xxxs});
       }
     }
 
@@ -276,7 +290,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
     &:not(.body-cell-edit-active) {
       @mixin focused-editor-styles {
-        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+        padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
         & > .body-cell-editor {
           opacity: 1;
         }
@@ -302,10 +316,10 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
       &:focus-within,
       &.body-cell-edit-disabled-popover {
-        padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+        padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
         &.body-cell-has-success {
           // After a successful edit, we display the success icon next to the edit button and need additional padding to not let the text overflow the success icon.
-          padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
+          padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
         }
         @include focused-editor-styles;
         &.sticky-cell {
@@ -315,35 +329,31 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
 
       &:hover {
         background-color: awsui.$color-background-dropdown-item-hover;
-        border: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
-        left: calc(-1 * #{awsui.$border-divider-list-width});
-        right: calc(-1 * #{awsui.$border-divider-list-width});
-
+        border-block: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
+        border-inline: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
+        inset-inline: calc(-1 * #{awsui.$border-divider-list-width});
         position: relative;
 
         &:first-child {
-          left: 0;
-          right: 0;
+          inset-inline: 0;
         }
 
         & > .body-cell-editor {
-          padding-right: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
+          padding-inline-end: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
         }
         & > .body-cell-success {
           // Update padding to avoid a jumping icon because of the additional borders added when hovering an editable cell.
-          padding-right: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
+          padding-inline-end: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
         }
         &.body-cell-last-row.body-cell-selected,
         &.body-cell-next-selected {
-          padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
-          padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
+          padding-block: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
         }
         &.body-cell-last-row:not(.body-cell-selected) {
-          padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
+          padding-block-start: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
         }
         &.body-cell-first-row:not(.body-cell-selected) {
-          padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
-          padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
+          padding-block: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
         }
         &.sticky-cell {
           position: sticky;
@@ -354,16 +364,16 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   }
   &-editable.is-visual-refresh:not(.body-cell-edit-active):hover {
     &:first-child {
-      border-top-left-radius: awsui.$border-radius-item;
-      border-bottom-left-radius: awsui.$border-radius-item;
+      border-start-start-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
     }
     &:last-child {
-      border-top-right-radius: awsui.$border-radius-item;
-      border-bottom-right-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
     }
     &.body-cell-first-row > .body-cell-success,
     &.body-cell-first-row > .body-cell-editor {
-      padding-top: awsui.$border-divider-list-width;
+      padding-block-start: awsui.$border-divider-list-width;
     }
   }
 }

package/lib/internal/scss/table/header-cell/styles.scss

@@ -9,26 +9,28 @@
 
 .header-cell {
   position: relative;
-  text-align: left;
+  text-align: start;
   box-sizing: border-box;
-  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;
   background: awsui.$color-background-table-header;
   color: awsui.$color-text-column-header;
   font-weight: awsui.$font-weight-heading-s;
   @include styles.font-smoothing;
-  padding: awsui.$space-scaled-xxs awsui.$space-scaled-xs;
+  padding-block: awsui.$space-scaled-xxs;
+  padding-inline: awsui.$space-scaled-xs;
+
   &-sticky {
-    border-bottom: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
+    border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
   }
   &-stuck:not(.header-cell-variant-full-page) {
-    border-bottom-color: transparent;
+    border-block-end-color: transparent;
   }
   &-variant-full-page.header-cell-hidden {
-    border-bottom-color: transparent;
+    border-block-end-color: transparent;
   }
   &:last-child,
   &.header-cell-sortable {
-    padding-right: awsui.$space-xs;
+    padding-inline-end: awsui.$space-xs;
   }
 
   &.sticky-cell {
@@ -36,7 +38,7 @@
     background: awsui.$color-background-table-header;
     z-index: 798; // Lower than the AppLayout's notification slot z-index(799)
     &-pad-left:not(.has-selection) {
-      padding-left: awsui.$space-table-horizontal;
+      padding-inline-start: awsui.$space-table-horizontal;
     }
     &-last-left {
       box-shadow: awsui.$shadow-sticky-column-first;
@@ -59,24 +61,25 @@
 
 .sorting-icon {
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
   transform: translateY(-50%);
-  right: awsui.$space-xxs;
+  inset-inline-end: awsui.$space-xxs;
   color: awsui.$color-text-column-sorting-icon;
 }
 
 .edit-icon {
-  margin-left: awsui.$space-xxs;
-  margin-top: awsui.$space-scaled-xxs;
+  margin-inline-start: awsui.$space-xxs;
+  margin-block-start: awsui.$space-scaled-xxs;
   color: inherit;
 }
 
 .header-cell-content {
   position: relative;
+  padding-block: awsui.$space-scaled-xxs;
+  padding-inline: awsui.$space-s;
 
-  padding: awsui.$space-scaled-xxs awsui.$space-s;
   .header-cell-sortable > & {
-    padding-right: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
+    padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
   }
   &:focus {
     outline: none;
@@ -115,8 +118,7 @@
 .header-cell-text {
   line-height: awsui.$line-height-heading-xs;
 
-  padding-top: calc(#{awsui.$space-xxxs} / 2);
-  padding-bottom: calc(#{awsui.$space-xxxs} / 2);
+  padding-block: calc(#{awsui.$space-xxxs} / 2);
 
   &:not(.header-cell-text-wrap) {
     white-space: nowrap;
@@ -138,15 +140,15 @@ settings icon in the pagination slot.
 */
 .header-cell:not(.is-visual-refresh) {
   &:first-child {
-    padding-left: awsui.$space-xs;
+    padding-inline-start: awsui.$space-xs;
   }
 }
 
 .header-cell.is-visual-refresh {
   &:first-child:not(.has-striped-rows) {
-    padding-left: awsui.$space-xxxs;
+    padding-inline-start: awsui.$space-xxxs;
     &.sticky-cell-pad-left {
-      padding-left: awsui.$space-table-horizontal;
+      padding-inline-start: awsui.$space-table-horizontal;
     }
   }
 
@@ -156,14 +158,14 @@ settings icon in the pagination slot.
   to the table edge.
   */
   &:first-child.has-striped-rows {
-    padding-left: awsui.$space-xxs;
+    padding-inline-start: awsui.$space-xxs;
   }
 
   &:first-child > .header-cell-content {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   &:last-child.header-cell-sortable {
-    padding-right: awsui.$space-xxxs;
+    padding-inline-end: awsui.$space-xxxs;
   }
 }

package/lib/internal/scss/table/resizer/styles.scss

@@ -21,33 +21,34 @@ th:not(:last-child) > .divider {
   position: absolute;
   outline: none;
   pointer-events: none;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  min-height: awsui.$line-height-heading-xs;
-  max-height: calc(100% - #{$gap});
-  margin: auto;
-  border-left: awsui.$border-item-width solid awsui.$color-border-divider-interactive-default;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  min-block-size: awsui.$line-height-heading-xs;
+  max-block-size: calc(100% - #{$gap});
+  margin-block: auto;
+  margin-inline: auto;
+  border-inline-start: awsui.$border-item-width solid awsui.$color-border-divider-interactive-default;
   box-sizing: border-box;
 
   &-disabled {
-    border-left-color: awsui.$color-border-divider-default;
+    border-inline-start-color: awsui.$color-border-divider-default;
   }
   &-active {
-    border-left: $active-separator-width solid awsui.$color-border-divider-active;
+    border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
   }
 }
 
 .resizer {
   @include styles.styles-reset;
-  border: none;
+  border-block: none;
+  border-inline: none;
   background: none;
-  bottom: 0;
+  inset-block: 0;
   cursor: col-resize;
   position: absolute;
-  right: calc(-1 * #{$handle-width} / 2);
-  top: 0;
-  width: $handle-width;
+  inset-inline-end: calc(-1 * #{$handle-width} / 2);
+  inline-size: $handle-width;
   z-index: 10;
   &:focus {
     outline: none;
@@ -58,11 +59,11 @@ th:not(:last-child) > .divider {
     pointer-events: none;
   }
   th:last-child > & {
-    width: calc(#{$handle-width} / 2);
-    right: 0;
+    inline-size: calc(#{$handle-width} / 2);
+    inset-inline-end: 0;
   }
   &:hover + .divider {
-    border-left: $active-separator-width solid awsui.$color-border-divider-active;
+    border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
   }
   // stylelint-disable-next-line selector-combinator-disallowed-list
   body[data-awsui-focus-visible='true'] &.has-focus {
@@ -74,10 +75,9 @@ th:not(:last-child) > .divider {
 .tracker {
   display: none;
   position: absolute;
-  border-left: awsui.$border-divider-list-width dashed awsui.$color-border-divider-active;
-  width: 0;
-  top: 0;
-  bottom: 0;
+  border-inline-start: awsui.$border-divider-list-width dashed awsui.$color-border-divider-active;
+  inline-size: 0;
+  inset-block: 0;
   //stylelint-disable-next-line selector-combinator-disallowed-list
   .resize-active & {
     display: block;

package/lib/internal/scss/table/selection/styles.scss

@@ -15,13 +15,13 @@
   align-items: center;
   justify-content: center;
   position: absolute;
-  padding-bottom: awsui.$space-xxs;
-  height: 100%;
-  top: 0;
-  width: 100%;
-  left: 0;
+  padding-block-end: awsui.$space-xxs;
+  block-size: 100%;
+  inset-block-start: 0;
+  inline-size: 100%;
+  inset-inline-start: 0;
   box-sizing: border-box;
-  border-right: 0.1 * styles.$base-size solid transparent;
+  border-inline-end: 0.1 * styles.$base-size solid transparent;
 }
 
 .stud {

package/lib/internal/scss/table/sticky-scrollbar/styles.scss

@@ -6,16 +6,16 @@
 @use '../../internal/styles' as styles;
 
 .sticky-scrollbar {
-  height: 15px;
+  block-size: 15px;
   position: sticky;
   display: none;
   overflow-x: auto;
   overflow-y: hidden;
-  bottom: 0;
-  width: 100%;
+  inset-block-end: 0;
+  inline-size: 100%;
 
   &-content {
-    height: 15px;
+    block-size: 15px;
   }
   &-visible {
     display: block;
@@ -23,7 +23,7 @@
   &-native-invisible {
     // Native scrollbar does not take space when it is not always invisible
     // For example it is set as "show when scrolling"
-    margin-top: -15px;
+    margin-block-start: -15px;
   }
 
   &-offset {
@@ -33,14 +33,14 @@
     z-index: 799; // Higher than sticky columns (798) and lower than table sticky header (800)
     &:not(.is-visual-refresh) {
       background-color: awsui.$color-background-container-content;
-      height: 15px;
-      margin-top: calc(-1 * awsui.$border-divider-section-width); // -1px to compensate for border width
-      border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+      block-size: 15px;
+      margin-block-start: calc(-1 * awsui.$border-divider-section-width); // -1px to compensate for border width
+      border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     }
 
     &.is-visual-refresh {
       // Needed to avoid sticky scrollbar overlapping with interactive elements in VR compact mode
-      margin-top: -5px;
+      margin-block-start: -5px;
     }
   }
 }