@cloudscape-design/components-themeable 3.0.666 → 3.0.667

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "ffcd64525db108e362e034c407cf0b52b56a7fa1"
+  "commit": "c54515793103c374eb72cf76a52a618e262c960a"
 }

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

@@ -13,6 +13,6 @@ div.background {
     background-color: awsui.$color-background-layout-main;
     color: awsui.$color-text-body-default;
     grid-column: 1 / span 5;
-    grid-row: 1 / 10;
+    grid-row: 1 / 9;
   }
 }

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

@@ -11,7 +11,7 @@
   background-color: transparent;
   display: flex;
   grid-column: 5;
-  grid-row: 1 / span 10;
+  grid-row: 1 / span 9;
   block-size: var(#{custom-props.$contentHeight});
   pointer-events: none;
   position: sticky;

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

@@ -38,7 +38,6 @@ explicitly set in script.
   #{custom-props.$maxContentWidth}: 0px;
   #{custom-props.$minContentWidth}: 280px;
   #{custom-props.$mobileBarHeight}: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
-  #{custom-props.$notificationsGap}: 0px;
   #{custom-props.$notificationsHeight}: 0px;
   #{custom-props.$offsetTop}: var(#{custom-props.$headerHeight});
   #{custom-props.$overlapHeight}: #{awsui.$space-dark-header-overlap-distance};
@@ -49,7 +48,6 @@ explicitly set in script.
   display: grid;
   grid-template-areas:
     '. . mobileToolbar . .'
-    '. . notificationsGap . .'
     '. . notifications . .'
     '. . breadcrumbsGap . .'
     '. . breadcrumbs . .'
@@ -66,7 +64,6 @@ explicitly set in script.
     min-content;
   grid-template-rows:
     auto // mobileToolbar template area
-    var(#{custom-props.$notificationsGap})
     auto // notifications template area
     var(#{custom-props.$breadcrumbsGap})
     auto // breadcrumbs template area

package/lib/internal/scss/app-layout/visual-refresh/navigation.scss

@@ -10,7 +10,7 @@
 .navigation-container {
   display: flex;
   grid-column: 1;
-  grid-row: 1 / span 10;
+  grid-row: 1 / span 9;
   block-size: var(#{custom-props.$contentHeight});
   position: sticky;
   inset-block-start: var(#{custom-props.$offsetTop});

package/lib/internal/scss/app-layout/visual-refresh/split-panel.scss

@@ -22,7 +22,7 @@ section.split-panel-bottom {
   inset-block-end: var(#{custom-props.$footerHeight});
   display: none;
   grid-column: 1 / 6;
-  grid-row: 10;
+  grid-row: 9;
   block-size: auto;
   overflow-y: hidden;
 

package/lib/internal/scss/app-layout/visual-refresh/tools.scss

@@ -24,7 +24,7 @@ viewport size and state of the Tools drawer.
   );
   display: flex;
   grid-column: 5;
-  grid-row: 1 / span 10;
+  grid-row: 1 / span 9;
   block-size: var(#{custom-props.$contentHeight});
   max-inline-size: var(#{custom-props.$toolsMaxWidth});
   position: sticky;

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,58 +1,57 @@
 
-    $maxContentWidth: --awsui-max-content-width-7t5ed6;
-$minContentWidth: --awsui-min-content-width-7t5ed6;
-$breadcrumbsGap: --awsui-breadcrumbs-gap-7t5ed6;
-$contentGapLeft: --awsui-content-gap-left-7t5ed6;
-$contentGapRight: --awsui-content-gap-right-7t5ed6;
-$contentHeight: --awsui-content-height-7t5ed6;
-$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-7t5ed6;
-$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-7t5ed6;
-$contentLayoutMainGap: --awsui-content-layout-main-gap-7t5ed6;
-$defaultMaxContentWidth: --awsui-default-max-content-width-7t5ed6;
-$defaultMinContentWidth: --awsui-default-min-content-width-7t5ed6;
-$drawerSize: --awsui-drawer-size-7t5ed6;
-$footerHeight: --awsui-footer-height-7t5ed6;
-$headerGap: --awsui-header-gap-7t5ed6;
-$headerHeight: --awsui-header-height-7t5ed6;
-$layoutWidth: --awsui-layout-width-7t5ed6;
-$mainGap: --awsui-main-gap-7t5ed6;
-$mainOffsetLeft: --awsui-main-offset-left-7t5ed6;
-$mainTemplateRows: --awsui-main-template-rows-7t5ed6;
-$mobileBarHeight: --awsui-mobile-bar-height-7t5ed6;
-$notificationsGap: --awsui-notifications-gap-7t5ed6;
-$notificationsHeight: --awsui-notifications-height-7t5ed6;
-$offsetTop: --awsui-offset-top-7t5ed6;
-$overlapHeight: --awsui-overlap-height-7t5ed6;
-$navigationWidth: --awsui-navigation-width-7t5ed6;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-7t5ed6;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-7t5ed6;
-$splitPanelHeight: --awsui-split-panel-height-7t5ed6;
-$splitPanelMinWidth: --awsui-split-panel-min-width-7t5ed6;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-7t5ed6;
-$toolsMaxWidth: --awsui-tools-max-width-7t5ed6;
-$toolsWidth: --awsui-tools-width-7t5ed6;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-7t5ed6;
-$contentScrollMargin: --awsui-content-scroll-margin-7t5ed6;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-7t5ed6;
-$flashbarStackIndex: --awsui-flashbar-stack-index-7t5ed6;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-7t5ed6;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-7t5ed6;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-7t5ed6;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-7t5ed6;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-7t5ed6;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-7t5ed6;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-7t5ed6;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-7t5ed6;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-7t5ed6;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-7t5ed6;
-$sliderLabelCount: --awsui-slider-label-count-7t5ed6;
-$sliderTickCount: --awsui-slider-tick-count-7t5ed6;
-$sliderReferenceColumn: --awsui-slider-reference-column-7t5ed6;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-7t5ed6;
-$sliderMaxStart: --awsui-slider-max-start-7t5ed6;
-$sliderMinEnd: --awsui-slider-min-end-7t5ed6;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-7t5ed6;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-7t5ed6;
-$togglesLeftWidth: --awsui-toggles-left-width-7t5ed6;
-$togglesRightWidth: --awsui-toggles-right-width-7t5ed6;
+    $maxContentWidth: --awsui-max-content-width-9rhwr5;
+$minContentWidth: --awsui-min-content-width-9rhwr5;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-9rhwr5;
+$contentGapLeft: --awsui-content-gap-left-9rhwr5;
+$contentGapRight: --awsui-content-gap-right-9rhwr5;
+$contentHeight: --awsui-content-height-9rhwr5;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-9rhwr5;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-9rhwr5;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-9rhwr5;
+$defaultMaxContentWidth: --awsui-default-max-content-width-9rhwr5;
+$defaultMinContentWidth: --awsui-default-min-content-width-9rhwr5;
+$drawerSize: --awsui-drawer-size-9rhwr5;
+$footerHeight: --awsui-footer-height-9rhwr5;
+$headerGap: --awsui-header-gap-9rhwr5;
+$headerHeight: --awsui-header-height-9rhwr5;
+$layoutWidth: --awsui-layout-width-9rhwr5;
+$mainGap: --awsui-main-gap-9rhwr5;
+$mainOffsetLeft: --awsui-main-offset-left-9rhwr5;
+$mainTemplateRows: --awsui-main-template-rows-9rhwr5;
+$mobileBarHeight: --awsui-mobile-bar-height-9rhwr5;
+$notificationsHeight: --awsui-notifications-height-9rhwr5;
+$offsetTop: --awsui-offset-top-9rhwr5;
+$overlapHeight: --awsui-overlap-height-9rhwr5;
+$navigationWidth: --awsui-navigation-width-9rhwr5;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-9rhwr5;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-9rhwr5;
+$splitPanelHeight: --awsui-split-panel-height-9rhwr5;
+$splitPanelMinWidth: --awsui-split-panel-min-width-9rhwr5;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-9rhwr5;
+$toolsMaxWidth: --awsui-tools-max-width-9rhwr5;
+$toolsWidth: --awsui-tools-width-9rhwr5;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-9rhwr5;
+$contentScrollMargin: --awsui-content-scroll-margin-9rhwr5;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-9rhwr5;
+$flashbarStackIndex: --awsui-flashbar-stack-index-9rhwr5;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-9rhwr5;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-9rhwr5;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-9rhwr5;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-9rhwr5;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-9rhwr5;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-9rhwr5;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-9rhwr5;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-9rhwr5;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-9rhwr5;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-9rhwr5;
+$sliderLabelCount: --awsui-slider-label-count-9rhwr5;
+$sliderTickCount: --awsui-slider-tick-count-9rhwr5;
+$sliderReferenceColumn: --awsui-slider-reference-column-9rhwr5;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-9rhwr5;
+$sliderMaxStart: --awsui-slider-max-start-9rhwr5;
+$sliderMinEnd: --awsui-slider-min-end-9rhwr5;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-9rhwr5;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-9rhwr5;
+$togglesLeftWidth: --awsui-toggles-left-width-9rhwr5;
+$togglesRightWidth: --awsui-toggles-right-width-9rhwr5;
     

package/lib/internal/scss/internal/styles/forms/mixins.scss

@@ -51,6 +51,19 @@
     $gutter-vertical: map.get($gutter, 'vertical');
     $gutter-horizontal: map.get($gutter, 'horizontal');
   }
+  $gutter-top: $gutter-vertical;
+  $gutter-bottom: $gutter-vertical;
+  @if type-of($gutter-vertical) == 'map' {
+    $gutter-top: map.get($gutter-vertical, 'top');
+    $gutter-bottom: map.get($gutter-vertical, 'bottom');
+  }
+  $gutter-left: $gutter-horizontal;
+  $gutter-right: $gutter-horizontal;
+  @if type-of($gutter-horizontal) == 'map' {
+    $gutter-left: map.get($gutter-horizontal, 'left');
+    $gutter-right: map.get($gutter-horizontal, 'right');
+  }
+
   position: relative;
   // Add a special outline for Window High Contrast Mode.
   // This mode will remove all box shadows from the side and can only use outline
@@ -59,7 +72,7 @@
   // are transparent.
   & {
     outline: 2px dotted transparent;
-    outline-offset: calc(#{$gutter-horizontal} - 1px);
+    outline-offset: calc(#{$gutter-left} - 1px);
   }
 
   // Regular rounded outline for all other browsers and modes
@@ -67,10 +80,10 @@
     content: ' ';
     display: block;
     position: absolute;
-    inset-inline-start: calc(-1 * #{$gutter-horizontal});
-    inset-block-start: calc(-1 * #{$gutter-vertical});
-    inline-size: calc(100% + 2 * #{$gutter-horizontal});
-    block-size: calc(100% + 2 * #{$gutter-vertical});
+    inset-inline-start: calc(-1 * #{$gutter-left});
+    inset-block-start: calc(-1 * #{$gutter-top});
+    inline-size: calc(100% + #{$gutter-left} + #{$gutter-right});
+    block-size: calc(100% + #{$gutter-top} + #{$gutter-bottom});
     border-start-start-radius: $border-radius;
     border-start-end-radius: $border-radius;
     border-end-start-radius: $border-radius;

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

@@ -26,9 +26,24 @@ $edit-button-padding-right: calc(
 ); // Cell vertical padding + xxs space that would normally come from the button.
 $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
 $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+$cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
 
 @mixin cell-focus-outline {
   @include styles.focus-highlight(calc(-1 * #{awsui.$space-scaled-xxs}));
+
+  // Give extra space on the left (inline start) to compensate for missing body cell padding.
+  &.is-visual-refresh:first-child {
+    @include styles.focus-highlight(
+      (
+        'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
+        'horizontal': (
+          'left': calc(1 * #{awsui.$space-scaled-xxs}),
+          'right': calc(-1 * #{awsui.$space-scaled-xxs}),
+        ),
+      )
+    );
+  }
+
   // @mixin focus-highlight sets cell's position to "relative".
   // Reinforcing sticky position for it to take precedence.
   &.sticky-cell {
@@ -41,27 +56,50 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
   inset-block: 0;
   display: flex;
   align-items: center;
-  margin-inline-start: calc(-1 * (#{awsui.$space-m} + #{awsui.$space-xs}));
+  margin-inline-start: calc(-1 * #{$cell-offset});
 }
 
-@mixin cell-offset($padding) {
-  padding-inline-start: $padding;
+@mixin cell-padding-inline-start($padding) {
+  > .body-cell-content {
+    padding-inline-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+  }
 
   @for $i from 0 through 9 {
-    &.expandable-level-#{$i} {
-      padding-inline-start: calc($padding + $i * (#{awsui.$space-m} + #{awsui.$space-xs}));
+    &.expandable-level-#{$i} > .body-cell-content {
+      padding-inline-start: calc($padding + $i * $cell-offset - 1 * awsui.$border-divider-list-width);
     }
   }
-  &.expandable-level-next {
-    padding-inline-start: calc($padding + 9 * (#{awsui.$space-m} + #{awsui.$space-xs}));
+  &.expandable-level-next > .body-cell-content {
+    padding-inline-start: calc(#{$padding} + 9 * #{$cell-offset} - 1 * #{awsui.$border-divider-list-width});
+  }
+}
+@mixin cell-padding-inline-end($padding) {
+  > .body-cell-content {
+    padding-inline-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+  }
+}
+@mixin cell-padding-block($padding) {
+  > .body-cell-content {
+    padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+  }
+}
+@mixin cell-padding-block-start($padding) {
+  > .body-cell-content {
+    padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+  }
+}
+@mixin cell-padding-block-end($padding) {
+  > .body-cell-content {
+    padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
   }
 }
 
 .body-cell {
   box-sizing: border-box;
-  padding-block-start: $cell-vertical-padding;
-  padding-block-end: $cell-vertical-padding-w-border;
-  padding-inline-end: $cell-horizontal-padding;
+  @include cell-padding-inline-start($cell-horizontal-padding);
+  @include cell-padding-block-start($cell-vertical-padding);
+  @include cell-padding-block-end($cell-vertical-padding-w-border);
+  @include cell-padding-inline-end($cell-horizontal-padding);
   border-block-start: awsui.$border-divider-list-width solid transparent;
   word-wrap: break-word;
   border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
@@ -70,9 +108,9 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
   text-align: start;
 
   &-content {
-    /* used for testing */
+    box-sizing: border-box;
   }
-  &:not(.body-cell-wrap) {
+  &:not(.body-cell-wrap) > .body-cell-content {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -82,13 +120,13 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
   }
   &:last-child {
     border-inline-end: $border-placeholder;
-    padding-inline-end: $cell-edge-horizontal-padding;
+    @include cell-padding-inline-end($cell-edge-horizontal-padding);
   }
   &.is-visual-refresh:first-child {
     &:not(.has-striped-rows) {
-      @include cell-offset(awsui.$space-xxxs);
+      @include cell-padding-inline-start(awsui.$space-xxxs);
       &:not(.body-cell-edit-active).body-cell-interactive.body-cell-editable:hover {
-        @include cell-offset(calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width}));
+        @include cell-padding-inline-start(calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width}));
       }
     }
 
@@ -98,9 +136,9 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
       to the table edge.
       */
     &:first-child.has-striped-rows {
-      @include cell-offset(awsui.$space-xxs);
+      @include cell-padding-inline-start(awsui.$space-xxs);
       &-sticky-cell-pad-inline-start {
-        @include cell-offset(awsui.$space-table-horizontal);
+        @include cell-padding-inline-start(awsui.$space-table-horizontal);
       }
     }
 
@@ -112,9 +150,16 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
     &:not(.has-selection):not(.body-cell-editable) {
       border-inline-start: none;
     }
+
+    // Give extra space on the edge to allow slight content overflow.
+    // That is to prevent focus outline on cell content from being cut out.
+    > .body-cell-content {
+      padding-inline-start: awsui.$border-divider-list-width;
+      margin-inline-start: calc(-1 * #{awsui.$border-divider-list-width});
+    }
   }
   &:first-child:not(.is-visual-refresh) {
-    @include cell-offset($cell-edge-horizontal-padding);
+    @include cell-padding-inline-start($cell-edge-horizontal-padding);
   }
   &-first-row {
     border-block-start: $border-placeholder;
@@ -140,12 +185,12 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
     background-color: awsui.$color-background-item-selected;
     border-block-start: $selected-border;
     border-block-end: $selected-border;
-    padding-block-end: $cell-vertical-padding;
+    @include cell-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-block-end: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
+      @include cell-padding-block-end(calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width}));
     }
 
     &:first-child {
@@ -169,7 +214,7 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
     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) {
-      @include cell-offset(awsui.$space-table-horizontal);
+      @include cell-padding-inline-start(awsui.$space-table-horizontal);
     }
     &.body-cell-shaded {
       background: awsui.$color-background-cell-shaded;
@@ -225,14 +270,14 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
 
   // Use padding as a selected border placeholder to make sure rows don't change height on selection (visual refresh)
   &-selected:not(:first-child) {
-    padding-block-start: $cell-vertical-padding-w-border;
+    @include cell-padding-block-start($cell-vertical-padding-w-border);
   }
   &:not(.body-cell-selected).body-cell-next-selected {
     border-block-end: 0;
-    padding-block-end: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
+    @include cell-padding-block-end(calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width}));
   }
   &-selected.body-cell-prev-selected {
-    padding-block-start: $cell-vertical-padding-w-border;
+    @include cell-padding-block-start($cell-vertical-padding-w-border);
     border-block-start: $selected-border-placeholder;
   }
   &-selected.body-cell-next-selected {
@@ -254,7 +299,7 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
   // 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-block-start: $cell-vertical-padding;
+    @include cell-padding-block-start($cell-vertical-padding);
   }
 
   &-editor-wrapper {
@@ -349,7 +394,9 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
     }
 
     &.body-cell-edit-active {
-      overflow: visible;
+      > .body-cell-content {
+        overflow: visible;
+      }
       &.sticky-cell {
         position: sticky;
       }
@@ -361,12 +408,12 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
 
         // Include interactive padding even when a cell is not hovered to prevent jittering when resizableColumns=false.
         &:not(.resizable-columns) {
-          padding-inline-end: $interactive-column-padding-inline-end;
+          @include cell-padding-inline-end($interactive-column-padding-inline-end);
         }
       }
 
       @mixin focused-editor-styles {
-        padding-inline-end: $interactive-column-padding-inline-end;
+        @include cell-padding-inline-end($interactive-column-padding-inline-end);
         & > .body-cell-editor-wrapper,
         & > .expandable-cell-content > .body-cell-editor-wrapper {
           opacity: 1;
@@ -401,7 +448,9 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
       &.body-cell-edit-disabled-popover {
         &.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-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
+          @include cell-padding-inline-end(
+            calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing})
+          );
         }
         @include focused-editor-styles;
         &.sticky-cell {
@@ -422,21 +471,27 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
 
         & > .body-cell-editor-wrapper,
         & > .expandable-cell-content > .body-cell-editor-wrapper {
-          padding-inline-end: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
+          @include cell-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-inline-end: calc(#{$success-icon-padding-right} - (2 * #{awsui.$border-divider-list-width}));
+          @include cell-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-block: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
+          @include cell-padding-block(calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2)));
         }
         &.body-cell-last-row:not(.body-cell-selected) {
-          padding-block-start: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
+          @include cell-padding-block-start(
+            calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}))
+          );
         }
         &.body-cell-first-row:not(.body-cell-selected) {
-          padding-block: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
+          @include cell-padding-block(calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width})));
         }
         &.sticky-cell {
           position: sticky;
@@ -457,10 +512,9 @@ $interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{aws
     &.body-cell-first-row > .body-cell-success,
     &.body-cell-first-row > .body-cell-editor-wrapper,
     &.body-cell-first-row > .expandable-cell-content > .body-cell-editor-wrapper {
-      padding-block-start: awsui.$border-divider-list-width;
+      @include cell-padding-block-start(awsui.$border-divider-list-width);
     }
   }
-  @include cell-offset($cell-horizontal-padding);
 
   @include focus-visible.when-visible {
     @include cell-focus-outline;

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

@@ -23,6 +23,21 @@
   }
 }
 
+@mixin header-cell-focus-outline-first($gutter) {
+  @include when-focus-visible-or-fake {
+    // Give extra space on the left (inline start) to compensate for missing header cell padding.
+    @include styles.focus-highlight(
+      (
+        'vertical': calc(-1 * #{$gutter}),
+        'horizontal': (
+          'left': calc(-1 * #{$gutter} + #{awsui.$space-scaled-xxs}),
+          'right': calc(-1 * #{$gutter}),
+        ),
+      )
+    );
+  }
+}
+
 @mixin cell-offset($padding) {
   padding-inline-start: $padding;
 
@@ -176,6 +191,14 @@ settings icon in the pagination slot.
 }
 
 .header-cell.is-visual-refresh {
+  &:first-child {
+    @include header-cell-focus-outline-first(awsui.$space-scaled-xxs);
+  }
+  &:first-child > .header-cell-content {
+    @include cell-offset(0px);
+    @include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
+  }
+
   &:first-child:not(.has-striped-rows) {
     @include cell-offset(awsui.$space-xxxs);
     &.sticky-cell-pad-inline-start {
@@ -192,10 +215,6 @@ settings icon in the pagination slot.
     @include cell-offset(awsui.$space-xxs);
   }
 
-  &:first-child > .header-cell-content {
-    @include cell-offset(0px);
-  }
-
   &:last-child.header-cell-sortable {
     padding-inline-end: awsui.$space-xxxs;
   }

package/lib/internal/template/alert/styles.css.js

@@ -1,30 +1,30 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_1pqlj_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1pqlj_1",
-  "root": "awsui_root_mx3cw_1pqlj_123",
-  "hidden": "awsui_hidden_mx3cw_1pqlj_161",
-  "with-dismiss": "awsui_with-dismiss_mx3cw_1pqlj_211",
-  "with-action": "awsui_with-action_mx3cw_1pqlj_211",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_1pqlj_217",
-  "header": "awsui_header_mx3cw_1pqlj_224",
-  "action": "awsui_action_mx3cw_1pqlj_228",
-  "action-slot": "awsui_action-slot_mx3cw_1pqlj_233",
-  "action-button": "awsui_action-button_mx3cw_1pqlj_234",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1pqlj_238",
-  "text": "awsui_text_mx3cw_1pqlj_267",
-  "icon": "awsui_icon_mx3cw_1pqlj_274",
-  "message": "awsui_message_mx3cw_1pqlj_277",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1pqlj_285",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_1pqlj_288",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1pqlj_291",
-  "content": "awsui_content_mx3cw_1pqlj_295",
-  "dismiss": "awsui_dismiss_mx3cw_1pqlj_299",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_1pqlj_304",
-  "type-error": "awsui_type-error_mx3cw_1pqlj_308",
-  "type-warning": "awsui_type-warning_mx3cw_1pqlj_316",
-  "type-success": "awsui_type-success_mx3cw_1pqlj_324",
-  "type-info": "awsui_type-info_mx3cw_1pqlj_332"
+  "alert": "awsui_alert_mx3cw_t3zgh_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_t3zgh_1",
+  "root": "awsui_root_mx3cw_t3zgh_123",
+  "hidden": "awsui_hidden_mx3cw_t3zgh_161",
+  "with-dismiss": "awsui_with-dismiss_mx3cw_t3zgh_211",
+  "with-action": "awsui_with-action_mx3cw_t3zgh_211",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_t3zgh_217",
+  "header": "awsui_header_mx3cw_t3zgh_224",
+  "action": "awsui_action_mx3cw_t3zgh_228",
+  "action-slot": "awsui_action-slot_mx3cw_t3zgh_233",
+  "action-button": "awsui_action-button_mx3cw_t3zgh_234",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_t3zgh_238",
+  "text": "awsui_text_mx3cw_t3zgh_267",
+  "icon": "awsui_icon_mx3cw_t3zgh_274",
+  "message": "awsui_message_mx3cw_t3zgh_277",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_t3zgh_285",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_t3zgh_288",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_t3zgh_291",
+  "content": "awsui_content_mx3cw_t3zgh_295",
+  "dismiss": "awsui_dismiss_mx3cw_t3zgh_299",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_t3zgh_304",
+  "type-error": "awsui_type-error_mx3cw_t3zgh_308",
+  "type-warning": "awsui_type-warning_mx3cw_t3zgh_316",
+  "type-success": "awsui_type-success_mx3cw_t3zgh_324",
+  "type-info": "awsui_type-info_mx3cw_t3zgh_332"
 };