npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.475 → 3.0.477 - Mend

@cloudscape-design/components-themeable 3.0.475 → 3.0.477

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

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "57b626d25e0a4689aece37ed694c319e8b804609"
+  "commit": "b5ca2a63a0b044b4e85b83b4a009ab1f559b90e0"
 }

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

@@ -25,13 +25,9 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
+  border-radius: awsui.$border-radius-alert;
   border: awsui.$border-field-width solid;
-  border-start-start-radius: awsui.$border-radius-alert;
-  border-start-end-radius: awsui.$border-radius-alert;
-  border-end-start-radius: awsui.$border-radius-alert;
-  border-end-end-radius: awsui.$border-radius-alert;
-  padding-block: awsui.$space-alert-vertical;
-  padding-inline: awsui.$space-alert-horizontal;
+  padding: awsui.$space-alert-vertical awsui.$space-alert-horizontal;
   background-color: awsui.$color-background-container-content;
   &.with-dismiss,
@@ -56,7 +52,7 @@
 .action {
   white-space: nowrap;
-  margin-inline-start: awsui.$space-alert-action-left;
+  margin-left: awsui.$space-alert-action-left;
 }
 .action-slot,
@@ -77,17 +73,14 @@
 }
 .text {
-  min-inline-size: 0;
-  // To account for vertical misalignment due to button borders
-  padding-block: awsui.$border-field-width;
-  padding-inline: 0;
-  margin-block: awsui.$space-scaled-xxs;
-  margin-inline: awsui.$space-xxs;
+  min-width: 0;
+  padding: awsui.$border-field-width 0; // To account for vertical misalignment due to button borders
+  margin: awsui.$space-scaled-xxs awsui.$space-xxs;
   &.icon {
-    margin-inline-start: 0;
+    margin-left: 0;
   }
   &.message {
-    margin-inline-end: awsui.$space-alert-message-right;
+    margin-right: awsui.$space-alert-message-right;
   }
 }
@@ -95,18 +88,18 @@
   // Below the breakpoint, arrange actions below the content
   > .action {
     grid-row: 2;
-    margin-block-end: awsui.$space-xxs;
+    margin-bottom: awsui.$space-xxs;
   }
   // Indent actions according to the size of the alert icon
   &.icon-size-medium > .action {
-    margin-inline-start: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
+    margin-left: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
   }
   &.icon-size-big > .action {
-    margin-inline-start: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
+    margin-left: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
   }
   &.icon-size-normal > .action {
-    margin-inline-start: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
+    margin-left: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
   }
 }
@@ -115,8 +108,8 @@
 }
 .dismiss {
-  margin-inline-end: calc(-1 * #{awsui.$space-xxs});
-  margin-inline-start: awsui.$space-s;
+  margin-right: calc(-1 * #{awsui.$space-xxs});
+  margin-left: awsui.$space-s;
 }
 .dismiss-button {

package/lib/internal/scss/anchor-navigation/styles.scss CHANGED Viewed

@@ -16,25 +16,20 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 .anchor-list {
   list-style: none;
-  margin-block: 0;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
+  margin: 0;
+  padding: 0;
   position: relative;
   text-indent: 0;
   &::before {
     content: '';
     background-color: awsui.$color-border-divider-default;
-    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;
-    inset-block-end: $guide-line-offset;
+    border-radius: awsui.$border-radius-tabs-focus-ring;
+    bottom: $guide-line-offset;
     pointer-events: none;
     position: absolute;
-    inset-block-start: $guide-line-offset;
-    inline-size: $guide-line-width;
+    top: $guide-line-offset;
+    width: $guide-line-width;
   }
 }
@@ -47,8 +42,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
   color: awsui.$color-text-body-secondary;
   font-weight: styles.$font-weight-normal;
-  margin-block: awsui.$space-scaled-xxs;
-  margin-inline: 0;
+  margin: awsui.$space-scaled-xxs 0;
   &--active {
     position: relative;
@@ -56,15 +50,12 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
     &::before {
       content: '';
       background-color: awsui.$color-text-accent;
-      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;
-      inset-block-end: $guide-line-offset;
+      border-radius: awsui.$border-radius-tabs-focus-ring;
+      bottom: $guide-line-offset;
       pointer-events: none;
       position: absolute;
-      inset-block-start: $guide-line-offset;
-      inline-size: $guide-line-width;
+      top: $guide-line-offset;
+      width: $guide-line-width;
     }
   }
 }
@@ -113,7 +104,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 }
 .anchor-link-info {
-  margin-inline-start: awsui.$space-xs;
+  margin-left: awsui.$space-xs;
   @include styles.font-body-s;
   @include styles.font-smoothing;
   font-weight: awsui.$font-button-weight;

package/lib/internal/scss/annotation-context/annotation/arrow.scss CHANGED Viewed

@@ -26,33 +26,31 @@
   $arrow-width: 2 * styles.$base-size;
   $arrow-height: $arrow-width * 0.5;
-  inline-size: $arrow-width;
-  block-size: $arrow-height;
+  width: $arrow-width;
+  height: $arrow-height;
   &-outer,
   &-inner {
     position: absolute;
     overflow: hidden;
-    inline-size: $arrow-width;
-    block-size: $arrow-height;
+    width: $arrow-width;
+    height: $arrow-height;
-    inset-block-start: 0;
-    inset-inline-start: 0;
+    top: 0;
+    left: 0;
     &::after {
       content: '';
       box-sizing: border-box;
       display: inline-block;
       position: absolute;
-      border-start-start-radius: 2px;
-      border-start-end-radius: 0;
-      border-end-start-radius: 0;
-      border-end-end-radius: 0;
-      inset-block-end: 0;
-      inset-inline-start: 0;
-      inline-size: $arrow-edge-length;
-      block-size: $arrow-edge-length;
+      border-radius: 2px 0 0 0;
+      bottom: 0;
+      left: 0;
+      width: $arrow-edge-length;
+      height: $arrow-edge-length;
       transform: rotate(45deg);
       transform-origin: 0 100%;
     }
@@ -65,13 +63,10 @@
   }
   &-inner {
-    inset-block-start: 2px;
+    top: 2px;
     &::after {
-      border-start-start-radius: 1px;
-      border-start-end-radius: 0;
-      border-end-start-radius: 0;
-      border-end-end-radius: 0;
+      border-radius: 1px 0 0 0;
       background-color: awsui.$color-background-status-info;
     }
   }

package/lib/internal/scss/annotation-context/annotation/styles.scss CHANGED Viewed

@@ -22,7 +22,7 @@
 .description {
   overflow: hidden;
-  margin-block-start: awsui.$space-xxs;
+  margin-top: awsui.$space-xxs;
 }
 .actionBar {
@@ -33,25 +33,24 @@
 }
 .stepCounter {
-  margin-inline-end: 2 * styles.$base-size;
+  margin-right: 2 * styles.$base-size;
 }
 .divider {
-  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 .hotspot {
   @include styles.styles-reset;
   background: transparent;
   border: none;
-  padding-block: 0;
-  padding-inline: 0;
+  padding: 0;
   cursor: pointer;
   scroll-margin: var(#{custom-props.$contentScrollMargin}, 40px 0 0 0);
   // These dimensions match the dimensions of the contained SVG icon.
-  inline-size: 16px;
-  block-size: 16px;
+  width: 16px;
+  height: 16px;
   &:focus {
     outline: none;

package/lib/internal/scss/app-layout/constants.scss CHANGED Viewed

@@ -8,8 +8,9 @@
 // Toggle should have 40px width, whereas button is 26px wide.
 // 40 - 26 = 14px in total or 7px on each side
-$toggle-padding-horizontal: 0.7 * styles.$base-size;
-$toggle-padding-vertical: awsui.$space-xxs;
+$_toggle-padding-horizontal: 0.7 * styles.$base-size;
+$_toggle-padding-vertical: awsui.$space-xxs;
+$toggle-padding: $_toggle-padding-vertical $_toggle-padding-horizontal;
 $sidebar-size-closed: 4 * styles.$base-size;

package/lib/internal/scss/app-layout/content-wrapper/styles.scss CHANGED Viewed

@@ -8,20 +8,20 @@
 @use '../constants' as constants;
 .content-wrapper {
-  padding-inline-start: awsui.$space-layout-content-horizontal;
-  padding-inline-end: awsui.$space-layout-content-horizontal;
+  padding-left: awsui.$space-layout-content-horizontal;
+  padding-right: awsui.$space-layout-content-horizontal;
   &-mobile {
-    padding-inline-start: awsui.$space-l;
-    padding-inline-end: awsui.$space-l;
+    padding-left: awsui.$space-l;
+    padding-right: awsui.$space-l;
   }
 }
 .content-type-dashboard {
-  margin-inline-start: auto;
-  margin-inline-end: auto;
+  margin-left: auto;
+  margin-right: auto;
   @each $breakpoint, $width in constants.$dashboard-content-widths {
     @include styles.media-breakpoint-up($breakpoint) {
-      max-inline-size: $width;
+      max-width: $width;
     }
   }
 }

package/lib/internal/scss/app-layout/drawer/styles.scss CHANGED Viewed

@@ -14,8 +14,7 @@ $drawer-z-index-mobile: 1001;
 .toggle {
   box-sizing: border-box;
-  padding-block: constants.$toggle-padding-vertical;
-  padding-inline: constants.$toggle-padding-horizontal;
+  padding: constants.$toggle-padding;
 }
 .drawer-triggers {
@@ -31,7 +30,7 @@ $drawer-z-index-mobile: 1001;
     z-index: $drawer-z-index;
   }
   &-closed {
-    min-inline-size: constants.$sidebar-size-closed;
+    min-width: constants.$sidebar-size-closed;
     &.drawer-mobile {
       display: none;
     }
@@ -43,10 +42,13 @@ $drawer-z-index-mobile: 1001;
   background-color: awsui.$color-background-layout-panel-content;
   .drawer-mobile > & {
     z-index: $drawer-z-index-mobile;
-    inset: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
   .drawer-closed > & {
-    inline-size: constants.$sidebar-size-closed;
+    width: constants.$sidebar-size-closed;
     &.drawer-content-clickable {
       cursor: pointer;
       color: awsui.$color-text-interactive-default;
@@ -60,7 +62,7 @@ $drawer-z-index-mobile: 1001;
   }
   > .drawer-resize-content {
     overflow: auto;
-    block-size: 100%;
+    height: 100%;
     position: relative;
   }
 }
@@ -73,12 +75,11 @@ $drawer-z-index-mobile: 1001;
 }
 .drawer-trigger {
-  padding-block: constants.$toggle-padding-vertical;
-  padding-inline: constants.$toggle-padding-horizontal;
+  padding: constants.$toggle-padding;
   cursor: pointer;
   color: awsui.$color-text-interactive-default;
   &:not(:first-child) {
-    border-block-start: 1px solid awsui.$color-border-layout;
+    border-top: 1px solid awsui.$color-border-layout;
   }
   &:hover {
     color: awsui.$color-text-layout-toggle-hover;

package/lib/internal/scss/app-layout/mobile-toolbar/styles.scss CHANGED Viewed

@@ -17,34 +17,33 @@
   align-items: center;
   flex-shrink: 0;
   z-index: 1000;
-  inline-size: 100%;
+  width: 100%;
   box-sizing: border-box;
   background-color: awsui.$color-background-layout-mobile-panel;
   box-shadow: awsui.$shadow-panel;
-  block-size: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
+  height: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
 }
 .mobile-bar-breadcrumbs {
-  min-inline-size: 0;
+  min-width: 0;
   flex: 1;
-  margin-inline-start: awsui.$space-m;
-  margin-inline-end: awsui.$space-m;
+  margin-left: awsui.$space-m;
+  margin-right: awsui.$space-m;
 }
 .mobile-toggle {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
-  padding-block: constants.$toggle-padding-vertical;
-  padding-inline: constants.$toggle-padding-horizontal;
-  inline-size: constants.$sidebar-size-closed;
+  padding: constants.$toggle-padding;
+  width: constants.$sidebar-size-closed;
   color: awsui.$color-text-interactive-default;
   &-type-navigation {
-    border-inline-end: 1px solid awsui.$color-border-layout;
+    border-right: 1px solid awsui.$color-border-layout;
   }
   &-type-tools,
   &-type-drawer {
-    border-inline-start: 1px solid awsui.$color-border-layout;
+    border-left: 1px solid awsui.$color-border-layout;
   }
   &:hover {
     background: awsui.$color-background-layout-panel-hover;

package/lib/internal/scss/app-layout/notifications/styles.scss CHANGED Viewed

@@ -17,7 +17,7 @@
 }
 .notifications-sticky {
-  inset-block-start: 0;
+  top: 0;
   position: sticky;
   #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
 }

package/lib/internal/scss/app-layout/split-panel/styles.scss CHANGED Viewed

@@ -5,7 +5,7 @@
 @use '../constants' as constants;
 .drawer-displayed {
-  min-inline-size: constants.$sidebar-size-closed;
+  min-width: constants.$sidebar-size-closed;
 }
 .drawer-content {

package/lib/internal/scss/app-layout/styles.scss CHANGED Viewed

@@ -58,7 +58,7 @@
 .layout-main {
   flex: 1;
-  min-inline-size: 0;
+  min-width: 0;
   background-color: awsui.$color-background-layout-main;
   position: relative;
   &-scrollable {
@@ -73,24 +73,24 @@
 }
 .breadcrumbs-desktop {
-  padding-block-start: awsui.$space-scaled-m;
-  padding-block-end: awsui.$space-scaled-s;
+  padding-top: awsui.$space-scaled-m;
+  padding-bottom: awsui.$space-scaled-s;
 }
 .content-header-wrapper {
-  padding-block-end: awsui.$space-content-header-padding-bottom;
+  padding-bottom: awsui.$space-content-header-padding-bottom;
 }
 .content-wrapper {
-  padding-block-end: awsui.$space-layout-content-bottom;
+  padding-bottom: awsui.$space-layout-content-bottom;
 }
 .content-overlapped {
-  margin-block-start: calc(-1 * #{awsui.$space-dark-header-overlap-distance});
+  margin-top: calc(-1 * #{awsui.$space-dark-header-overlap-distance});
 }
 .content-extra-top-padding {
   // extra top padding when there are no breadcrumbs above,
   // applied to content or content header, whatever comes first
-  padding-block-start: awsui.$space-scaled-m;
+  padding-top: awsui.$space-scaled-m;
 }

package/lib/internal/scss/app-layout/toggles/styles.scss CHANGED Viewed

@@ -13,8 +13,7 @@
   // resemble button styles with an extra 1px offset for non-existing here border width
   $padding-vertical: calc(#{awsui.$space-scaled-xxs} + 1px);
   $padding-horizontal: calc(#{awsui.$space-xxs} + 1px);
-  padding-block: $padding-vertical;
-  padding-inline: $padding-horizontal;
+  padding: $padding-vertical $padding-horizontal;
   background: transparent;
   color: currentColor;
   &:focus {
@@ -29,7 +28,7 @@
 .close-button {
   position: absolute;
   outline: none;
-  inset-inline-end: awsui.$space-m;
-  inset-block-start: awsui.$size-vertical-panel-icon-offset;
+  right: awsui.$space-m;
+  top: awsui.$size-vertical-panel-icon-offset;
   z-index: 1;
 }

package/lib/internal/scss/app-layout/visual-refresh/background.scss CHANGED Viewed

@@ -21,15 +21,15 @@ div.background {
     grid-column: 1 / span 5;
     grid-row: 1 / 10;
     position: sticky;
-    inset-block-start: var(#{custom-props.$headerHeight});
+    top: var(#{custom-props.$headerHeight});
     z-index: 799;
     &:not(.has-sticky-notifications) {
-      block-size: calc(#{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight}));
+      height: calc(#{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight}));
     }
     &.has-sticky-notifications {
-      block-size: calc(
+      height: calc(
         var(#{custom-props.$notificationsGap}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight})
       );
     }

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss CHANGED Viewed

@@ -12,10 +12,10 @@
   display: flex;
   grid-column: 5;
   grid-row: 1 / span 10;
-  block-size: var(#{custom-props.$contentHeight});
+  height: var(#{custom-props.$contentHeight});
   pointer-events: none;
   position: sticky;
-  inset-block-start: var(#{custom-props.$offsetTop});
+  top: var(#{custom-props.$offsetTop});
   z-index: 830;
   &.has-open-drawer {
@@ -25,7 +25,7 @@
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     /* stylelint-disable scss/operator-no-newline-after */
-    max-inline-size: calc(
+    max-width: calc(
       var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) -
         var(#{custom-props.$defaultMinContentWidth}) - var(#{custom-props.$contentGapRight})
     );
@@ -34,7 +34,7 @@
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     position: fixed;
-    inset-inline-end: 0;
+    right: 0;
     z-index: 1001;
     /*
@@ -45,7 +45,7 @@
     relative to the body.
     */
     &.disable-body-scroll {
-      inset-block-start: var(#{custom-props.$headerHeight});
+      top: var(#{custom-props.$headerHeight});
     }
   }
 }
@@ -54,14 +54,14 @@
   @include styles.styles-reset;
   background-color: transparent;
   box-sizing: border-box;
-  block-size: 100%;
+  height: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   &:not(.has-multiple-triggers).has-open-drawer {
-    inline-size: 0;
+    width: 0;
   }
   &.has-multiple-triggers.has-open-drawer {
@@ -69,7 +69,7 @@
   }
   &:not(.has-multiple-triggers):not(.has-open-drawer) {
-    inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+    width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
   }
 }
@@ -82,8 +82,8 @@
   display: flex;
   flex-direction: column;
   gap: awsui.$space-xs;
-  padding-block-start: awsui.$space-scaled-s;
-  inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+  padding-top: awsui.$space-scaled-s;
+  width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
   &:not(.has-multiple-triggers).has-open-drawer {
     opacity: 0;
@@ -94,8 +94,7 @@
   }
   > .drawers-trigger-overflow {
-    padding-block: 0;
-    padding-inline: 1px;
+    padding: 0 1px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -104,7 +103,7 @@
 .drawers-trigger {
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    inline-size: constants.$sidebar-size-closed;
+    width: constants.$sidebar-size-closed;
     display: flex;
     justify-content: center;
   }
@@ -118,7 +117,7 @@
   grid-template-columns: awsui.$space-m 1fr;
   flex-shrink: 0;
-  block-size: 100%;
+  height: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -129,7 +128,7 @@
   > .drawer-content-container {
     grid-column: 1 / span 2;
     grid-row: 1;
-    inline-size: var(#{custom-props.$drawerSize});
+    width: var(#{custom-props.$drawerSize});
     display: grid;
     grid-template-columns: awsui.$space-m 1fr auto awsui.$space-m;
     grid-template-rows: awsui.$size-vertical-panel-icon-offset auto 1fr;
@@ -152,20 +151,20 @@
   > .drawer-slider {
     grid-column: 1;
     grid-row: 1;
-    block-size: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
   }
   &:not(.is-drawer-open) {
     opacity: 0;
-    inline-size: 0;
+    width: 0;
   }
   &.is-drawer-open {
-    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     opacity: 1;
-    inline-size: var(#{custom-props.$drawerSize});
+    width: var(#{custom-props.$drawerSize});
   }
   @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
@@ -177,7 +176,7 @@
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     &.is-drawer-open {
       #{custom-props.$drawerSize}: 100vw;
-      inline-size: 100vw;
+      width: 100vw;
     }
   }
 }

package/lib/internal/scss/app-layout/visual-refresh/layout.scss CHANGED Viewed

@@ -76,7 +76,7 @@ explicitly set in script.
     var(#{custom-props.$mainGap})
     var(#{custom-props.$overlapHeight}) // main template area with overlap
     var(#{custom-props.$mainTemplateRows}); // main template area
-  min-block-size: var(#{custom-props.$contentHeight});
+  min-height: var(#{custom-props.$contentHeight});
   position: relative;
   /*
@@ -302,7 +302,7 @@ notifications top margin and some additional vertical space for aesthetics.
 .layout.disable-body-scroll {
   #{custom-props.$mainTemplateRows}: 1fr auto;
   #{custom-props.$offsetTop}: 0px;
-  block-size: var(#{custom-props.$contentHeight});
+  height: var(#{custom-props.$contentHeight});
   overflow-y: scroll;
   &.has-split-panel.split-panel-position-bottom {