npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.533 → 3.0.535 - Mend

@cloudscape-design/components-themeable 3.0.533 → 3.0.535

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;
     }
   }
 }