@cloudscape-design/components-themeable 3.0.1373 → 3.0.1375

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "3dc4191dc98e9ea97b7a6f9b4f5eadd9fc1961cd"
+  "commit": "b7e52fa64bb81fcfdc59fa3ad40305eceec53383"
 }

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

@@ -208,3 +208,7 @@ $toolbar-height: 42px;
 .block-body-scroll {
   overflow: hidden;
 }
+
+.external-breadcrumbs {
+  display: none;
+}

package/lib/internal/scss/checkbox/styles.scss

@@ -7,10 +7,19 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+@use '../internal/styles/style-api' as style-api;
 
 $checkbox-size: awsui.$size-control;
 
+$control-props: style-api.combine((color, background-color, border-color), style-api.$focus-ring);
+$control-tokens: style-api.resolve($control-props, carrier);
+$label-tokens: style-api.resolve((color), public);
+$description-tokens: style-api.resolve((color), public);
+@include style-api.register($control-tokens, $label-tokens, $description-tokens);
+@include style-api.docs('control', $control-tokens);
+@include style-api.docs('label', $label-tokens);
+@include style-api.docs('description', $description-tokens);
+
 // double selector bumps specificity of this rule above the rule in the abstract switch styles applied to the same element
 .root.root {
   @include styles.styles-reset;
@@ -18,17 +27,33 @@ $checkbox-size: awsui.$size-control;
 }
 
 .checkbox-control {
+  @include style-api.carriers($control-tokens);
   @include styles.make-control-size($checkbox-size);
 }
 
 .outline {
-  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
-
-  @include styles.focus-highlight(
-    $gutter: 2px,
-    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
-    $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+  @include style-api.focus-highlight(
+    $gutter-block: 2px,
+    $gutter-inline: 2px,
+    $radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+    $width: var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width),
+    $color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
   );
 }
+
+// double selectors bump specificity above the abstract switch rules applied to the same elements
+@if style-api.enabled() {
+  .label.label {
+    color: style-api.value($label-tokens, color, awsui.$color-text-form-default);
+    &.label-disabled {
+      color: style-api.value($label-tokens, color, awsui.$color-text-control-disabled);
+    }
+  }
+
+  .description.description {
+    color: style-api.value($description-tokens, color, awsui.$color-text-form-secondary);
+    &.description-disabled {
+      color: style-api.value($description-tokens, color, awsui.$color-text-control-disabled);
+    }
+  }
+}

package/lib/internal/scss/container/styles.scss

@@ -5,6 +5,7 @@
 
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
+@use '../internal/styles/utils' as utils;
 @use './shared' as shared;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
@@ -66,6 +67,15 @@
     border-end-end-radius: 0;
     border-end-start-radius: 0;
   }
+
+  &:focus {
+    outline: none;
+  }
+  // On ::after (not the root's own box-shadow) so it survives a consumer style.root.boxShadow.
+  &.focus-ring:focus::after {
+    @include utils.base-pseudo-element;
+    @include styles.container-focus();
+  }
 }
 
 .with-side-media {

package/lib/internal/scss/dialog/styles.scss

@@ -0,0 +1,101 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+
+$border-radius: awsui.$border-radius-dialog;
+$section-padding-block: awsui.$space-dialog-vertical;
+$section-padding-inline: awsui.$space-dialog-horizontal;
+$action-padding-block: awsui.$space-dialog-action-block;
+$action-padding-inline: awsui.$space-dialog-action-inline;
+$header-gap: awsui.$space-dialog-header-gap;
+$section-gap: awsui.$space-dialog-section-gap;
+
+@mixin apply-border-radius {
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
+}
+
+.root {
+  @include styles.styles-reset;
+  @include styles.text-wrapping;
+  @include apply-border-radius;
+
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  background: awsui.$color-background-dialog-default;
+  box-shadow: awsui.$shadow-dialog;
+
+  &::before {
+    @include styles.base-pseudo-element;
+    @include apply-border-radius;
+
+    border-block: solid awsui.$border-width-dialog awsui.$color-border-dialog-default;
+    border-inline: solid awsui.$border-width-dialog awsui.$color-border-dialog-default;
+    box-shadow: none;
+  }
+}
+
+.header {
+  display: grid;
+  grid-template-areas: 'heading dismiss';
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  column-gap: $header-gap;
+
+  // Compensate for the action controls' internal padding so the heading and
+  // close button align with the other sections.
+  padding-block: calc($section-padding-block - $action-padding-block);
+  padding-inline-start: $section-padding-inline;
+  padding-inline-end: calc($section-padding-inline - $action-padding-inline);
+
+  &.header-with-actions {
+    grid-template-areas: 'heading actions dismiss';
+    grid-template-columns: minmax(0, 1fr) auto auto;
+  }
+}
+
+.header-content {
+  @include styles.font-heading-s;
+
+  grid-area: heading;
+  min-inline-size: 0;
+}
+
+.header-actions {
+  grid-area: actions;
+  display: flex;
+  align-items: center;
+  justify-self: end;
+  column-gap: $header-gap;
+}
+
+.dismiss-button {
+  grid-area: dismiss;
+}
+
+.content,
+.footer {
+  padding-block: $section-padding-block;
+  padding-inline: $section-padding-inline;
+}
+
+.header:has(+ .content, + .footer),
+.content:has(+ .footer) {
+  padding-block-end: $section-gap;
+}
+
+.header + .content,
+.header + .footer,
+.content + .footer {
+  padding-block-start: $section-gap;
+}

package/lib/internal/scss/dialog/test-classes/styles.scss

@@ -0,0 +1,13 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root,
+.header,
+.header-actions,
+.content,
+.footer,
+.dismiss-button {
+  /* used in test-utils */
+}

package/lib/internal/scss/expandable-section/styles.scss

@@ -30,6 +30,12 @@ $icon-offset-container: awsui.$space-xxs;
 // Useful to keep elements correctly aligned.
 $icon-total-space-normal: calc(#{$icon-width-normal} + #{$icon-margin-left} + #{$icon-margin-right-normal});
 $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{$icon-margin-right-medium});
+// In One Theme the container caret is an x-small (12px) icon with no start margin and
+// $icon-margin-right-small as end margin (see .icon-container below), so it occupies less
+// space than the medium caret. Keep in sync with that rule and with the icon size chosen
+// in expandable-section-header.tsx.
+$icon-width-x-small: 12px;
+$icon-total-space-container-one-theme: calc(#{$icon-width-x-small} + #{$icon-margin-right-small});
 
 // Extra inline padding that widens the navigation caret pointer target to 24px (WCAG 2.5.8).
 $nav-caret-pad-normal: calc(24px - #{$icon-width-normal});
@@ -65,6 +71,14 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
   }
 }
 
+// Applied to both the default and custom toggle icons.
+.icon-position {
+  position: relative;
+  @include theming.one-theme-only {
+    inset-block-start: $icon-offset-block;
+  }
+}
+
 .icon-container {
   position: relative;
   margin-inline: calc(#{$icon-margin-left}) calc(#{$icon-margin-right-normal});
@@ -80,9 +94,6 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
     display: inline-flex;
     align-items: flex-start;
     margin-inline: 0 $icon-margin-right-small;
-    > .icon {
-      inset-block-start: $icon-offset-block;
-    }
   }
 }
 
@@ -195,6 +206,9 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
     }
     &:not(.header-deprecated) {
       padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
+      @include theming.one-theme-only {
+        padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-container-one-theme});
+      }
     }
 
     @include focus-visible.when-visible {
@@ -247,6 +261,13 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
 
   &-container-button {
     margin-inline-start: calc(-1 * #{$icon-total-space-medium});
+    // Only when the caret is at the start. The end-icon layout resets this margin
+    // below (.header-button-icon-end) and a theme-scoped rule would outrank that reset.
+    &:not(.header-button-icon-end) {
+      @include theming.one-theme-only {
+        margin-inline-start: calc(-1 * #{$icon-total-space-container-one-theme});
+      }
+    }
   }
 
   &-container {

package/lib/internal/scss/flashbar/collapsible.scss

@@ -8,6 +8,7 @@
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/styles' as styles;
 @use '../internal/styles/typography' as typography;
+@use '../internal/styles/utils/theming' as theming;
 @use './collapsible.motion';
 
 $notification-bar-top-overlap: (
@@ -20,10 +21,7 @@ $notification-bar-collapsed-item-overflow: (
   'x': 10px,
   'y': 8px,
 );
-$notification-bar-border-width: (
-  'classic': 1px,
-  'visual-refresh': 2px,
-);
+$notification-bar-border-width: awsui.$border-width-notification-stack-bar;
 
 .stack {
   $notification-bar-horizontal-margin: 3 * map.get($notification-bar-collapsed-item-overflow, 'x');
@@ -137,18 +135,7 @@ the grid layout will be:
 .stack.collapsible {
   &:not(.expanded) {
     &:not(.short-list) {
-      &:not(.visual-refresh) {
-        @include vertical-spacing(
-          map.get($notification-bar-top-overlap, 'collapsed'),
-          map.get($notification-bar-border-width, 'classic')
-        );
-      }
-      &.visual-refresh {
-        @include vertical-spacing(
-          map.get($notification-bar-top-overlap, 'collapsed'),
-          map.get($notification-bar-border-width, 'visual-refresh')
-        );
-      }
+      @include vertical-spacing(map.get($notification-bar-top-overlap, 'collapsed'), $notification-bar-border-width);
     }
 
     /*
@@ -156,22 +143,12 @@ the grid layout will be:
     missing third item when there are only 2 items in the stack.
      */
     &.short-list {
-      &:not(.visual-refresh) {
-        @include vertical-spacing(
-          map.get($notification-bar-top-overlap, 'collapsed'),
-          map.get($notification-bar-border-width, 'classic'),
-          0px,
-          map.get($notification-bar-collapsed-item-overflow, 'y')
-        );
-      }
-      &.visual-refresh {
-        @include vertical-spacing(
-          map.get($notification-bar-top-overlap, 'collapsed'),
-          map.get($notification-bar-border-width, 'visual-refresh'),
-          0px,
-          map.get($notification-bar-collapsed-item-overflow, 'y')
-        );
-      }
+      @include vertical-spacing(
+        map.get($notification-bar-top-overlap, 'collapsed'),
+        $notification-bar-border-width,
+        0px,
+        map.get($notification-bar-collapsed-item-overflow, 'y')
+      );
     }
   }
 
@@ -183,15 +160,12 @@ the grid layout will be:
        */
       @include vertical-spacing(
         map.get($notification-bar-top-overlap, 'expanded'),
-        map.get($notification-bar-border-width, 'classic'),
+        $notification-bar-border-width,
         awsui.$space-scaled-m
       );
     }
     &.visual-refresh {
-      @include vertical-spacing(
-        map.get($notification-bar-top-overlap, 'expanded'),
-        map.get($notification-bar-border-width, 'visual-refresh')
-      );
+      @include vertical-spacing(map.get($notification-bar-top-overlap, 'expanded'), $notification-bar-border-width);
     }
   }
 }
@@ -206,6 +180,8 @@ the grid layout will be:
   border-end-end-radius: awsui.$border-radius-button;
   border-block-style: solid;
   border-inline-style: solid;
+  border-block-width: $notification-bar-border-width;
+  border-inline-width: $notification-bar-border-width;
   box-shadow: awsui.$shadow-panel-toggle;
   color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-notification-stack-bar);
   cursor: pointer;
@@ -262,27 +238,25 @@ the grid layout will be:
 
   &:hover {
     background: var(#{custom-props.$styleBackgroundHover}, awsui.$color-background-notification-stack-bar-hover);
-    border-color: var(#{custom-props.$styleBorderColorHover}, awsui.$color-background-notification-stack-bar-hover);
+    border-color: var(#{custom-props.$styleBorderColorHover}, awsui.$color-border-notification-stack-bar-hover);
     color: var(#{custom-props.$styleColorHover}, awsui.$color-text-notification-stack-bar);
   }
 
   &:active {
     background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-notification-stack-bar-active);
-    border-color: var(#{custom-props.$styleBorderColorActive}, awsui.$color-background-notification-stack-bar);
+    border-color: var(#{custom-props.$styleBorderColorActive}, awsui.$color-border-notification-stack-bar-active);
     color: var(#{custom-props.$styleColorActive}, awsui.$color-text-notification-stack-bar);
   }
 
   &.visual-refresh {
-    $border-width: map.get($notification-bar-border-width, 'visual-refresh');
-    border-block-width: $border-width;
-    border-inline-width: $border-width;
     padding-inline: awsui.$space-l;
+
+    @include theming.one-theme-only {
+      padding-inline: awsui.$space-s;
+    }
   }
 
   &:not(.visual-refresh) {
-    $border-width: map.get($notification-bar-border-width, 'classic');
-    border-block-width: $border-width;
-    border-inline-width: $border-width;
     padding-inline: awsui.$space-s;
 
     &:focus {
@@ -301,6 +275,9 @@ the grid layout will be:
     border-block: 0;
     border-inline: none;
     padding-block: 0;
+    @include theming.one-theme-only {
+      padding-inline: 0;
+    }
     #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
       var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
       var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-notification-stack-bar-focused);

package/lib/internal/scss/icon/mixins.scss

@@ -20,6 +20,7 @@ $_variant-colors: (
 $_icon-sizes: (
   (
     name: 'x-small',
+    supportedFontSize: awsui.$font-size-body-s,
     size: 12px,
     supportedLineHeight: awsui.$line-height-body-s,
     stroke: awsui.$border-width-icon-x-small,
@@ -27,6 +28,7 @@ $_icon-sizes: (
   ),
   (
     name: 'small',
+    supportedFontSize: awsui.$font-size-body-m,
     size: awsui.$size-icon-normal,
     supportedLineHeight: awsui.$line-height-body-s,
     stroke: awsui.$border-width-icon-small,
@@ -34,6 +36,7 @@ $_icon-sizes: (
   ),
   (
     name: 'normal',
+    supportedFontSize: awsui.$font-size-body-m,
     size: awsui.$size-icon-normal,
     supportedLineHeight: awsui.$line-height-body-m,
     stroke: awsui.$border-width-icon-normal,
@@ -41,6 +44,7 @@ $_icon-sizes: (
   ),
   (
     name: 'medium',
+    supportedFontSize: awsui.$font-size-heading-l,
     size: awsui.$size-icon-medium,
     supportedLineHeight: awsui.$line-height-heading-l,
     stroke: awsui.$border-width-icon-medium,
@@ -48,6 +52,7 @@ $_icon-sizes: (
   ),
   (
     name: 'big',
+    supportedFontSize: awsui.$font-size-heading-xl,
     size: awsui.$size-icon-big,
     supportedLineHeight: awsui.$line-height-heading-xl,
     stroke: awsui.$border-width-icon-big,
@@ -55,6 +60,7 @@ $_icon-sizes: (
   ),
   (
     name: 'large',
+    supportedFontSize: awsui.$font-size-display-l,
     size: awsui.$size-icon-large,
     supportedLineHeight: awsui.$line-height-display-l,
     stroke: awsui.$border-width-icon-large,
@@ -62,6 +68,18 @@ $_icon-sizes: (
   )
 );
 
+// Emits per-size text metrics so a nested `size="inherit"` icon resolves to the wrapper's size.
+// The line height equals the icon size (not the supported line height), so that the nested icon's
+// measured box exactly fits the wrapper's content area.
+@mixin make-icon-size-text-metrics {
+  @each $type in $_icon-sizes {
+    &.size-#{map.get($type, 'name')} {
+      font-size: map.get($type, 'supportedFontSize');
+      line-height: map.get($type, 'size');
+    }
+  }
+}
+
 @mixin make-icon-sizes {
   @each $type in $_icon-sizes {
     $name: map.get($type, 'name');

package/lib/internal/scss/icon/styles.scss

@@ -70,3 +70,12 @@
   inset-block-start: 0px;
   inset-inline-end: -3px;
 }
+
+// Wraps custom icons supplied through IconProvider or the internal override. Generates no box of
+// its own, and provides text metrics so a nested `size="inherit"` icon resolves to the wrapper's
+// size. It carries the same icon and size classes as the wrapper, so custom raw svg nodes receive
+// the regular sizing and stroke styles.
+.icon.custom-icon {
+  display: contents;
+  @include mixins.make-icon-size-text-metrics;
+}

package/lib/internal/scss/internal/components/checkbox-icon/styles.scss

@@ -5,8 +5,11 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
+@use '../../styles/style-api' as style-api;
 @use './motion' as motion;
 
+$_control-tokens: style-api.resolve((color, background-color, border-color), carrier);
+
 .root {
   position: absolute;
   inline-size: 100%;
@@ -15,8 +18,8 @@
   inset-inline-start: 0;
 
   > .styled-box {
-    fill: awsui.$color-background-control-default;
-    stroke: awsui.$color-border-control-default;
+    fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-default);
+    stroke: style-api.value($_control-tokens, border-color, awsui.$color-border-control-default);
     stroke-width: awsui.$border-width-field;
     @include styles.with-motion {
       transition:
@@ -25,25 +28,25 @@
     }
     &-checked,
     &-indeterminate {
-      fill: awsui.$color-background-control-checked;
-      stroke: awsui.$color-border-control-checked;
+      fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-checked);
+      stroke: style-api.value($_control-tokens, border-color, awsui.$color-border-control-checked);
     }
     &-disabled,
     &-readonly {
-      fill: awsui.$color-background-control-disabled;
-      stroke: awsui.$color-border-control-disabled;
+      fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
+      stroke: style-api.value($_control-tokens, border-color, awsui.$color-border-control-disabled);
     }
   }
 
   > .styled-line {
-    stroke: awsui.$color-foreground-control-default;
+    stroke: style-api.value($_control-tokens, color, awsui.$color-foreground-control-default);
     stroke-width: 2;
     fill: none;
     &-disabled {
-      stroke: awsui.$color-foreground-control-disabled;
+      stroke: style-api.value($_control-tokens, color, awsui.$color-foreground-control-disabled);
     }
     &-readonly {
-      stroke: awsui.$color-foreground-control-read-only;
+      stroke: style-api.value($_control-tokens, color, awsui.$color-foreground-control-read-only);
     }
     @include motion.draw-in;
   }

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "3dc4191d";
+    $awsui-commit-hash: "b7e52fa6";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-66120l;
 $minContentWidth: --awsui-min-content-width-66120l;

package/lib/internal/scss/internal/styles/links.scss

@@ -11,16 +11,13 @@
 @use '../generated/custom-css-properties/index.scss' as custom-props;
 @use './style-api' as style-api;
 
-@function _link-color($tokens, $value) {
-  @if not $tokens {
-    @return $value;
-  }
-  @return style-api.value($tokens, color, $value);
-}
-
 // $tokens: optional Style API v2 token map from style-api.resolve.
 @mixin link-variant-style($variant, $tokens: null) {
-  color: _link-color($tokens, var(#{custom-props.$styleColorDefault}, map.get($variant, 'text-color-default')));
+  color: style-api.value(
+    $tokens,
+    color,
+    var(#{custom-props.$styleColorDefault}, map.get($variant, 'text-color-default'))
+  );
   font-weight: map.get($variant, 'font-weight');
   letter-spacing: map.get($variant, 'letter-spacing');
   text-decoration-line: map.get($variant, 'decoration-line');
@@ -33,7 +30,11 @@
 
   &:hover {
     cursor: pointer;
-    color: _link-color($tokens, var(#{custom-props.$styleColorHover}, map.get($variant, 'text-color-hover')));
+    color: style-api.value(
+      $tokens,
+      color,
+      var(#{custom-props.$styleColorHover}, map.get($variant, 'text-color-hover'))
+    );
   }
 
   &:focus {
@@ -41,7 +42,11 @@
   }
 
   &:active {
-    color: _link-color($tokens, var(#{custom-props.$styleColorActive}, map.get($variant, 'text-color-active')));
+    color: style-api.value(
+      $tokens,
+      color,
+      var(#{custom-props.$styleColorActive}, map.get($variant, 'text-color-active'))
+    );
   }
 
   &:active,

package/lib/internal/scss/internal/styles/style-api.scss

@@ -29,9 +29,10 @@ $_focus-ring-carriers: toolkit.resolve($focus-ring, carrier);
 }
 
 // Emits `var(<carrier>, <fallback>)` when enabled, or just `<fallback>` when disabled — so a read
-// leaves no trace in the compiled CSS for gated-off systems.
+// leaves no trace in the compiled CSS for gated-off systems. A null `$tokens` map also yields the
+// fallback: the caller is not in a Style API context.
 @function value($tokens, $token, $fallback) {
-  @if not enabled() {
+  @if not enabled() or not $tokens {
     @return $fallback;
   }
   @return var(#{toolkit.read($tokens, $token)}, #{$fallback});

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

@@ -7,6 +7,7 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../cell-base/cell-box' as cell-base;
+@use '../sticky-columns/sticky-boundary' as sticky-boundary;
 
 $cell-horizontal-padding-w-border: calc(#{cell-base.$cell-edge-horizontal-padding} + #{awsui.$border-item-width});
 $selected-border: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
@@ -247,6 +248,12 @@ $editing-cell-padding-block: awsui.$space-scaled-xxxs;
         clip-path: inset(0 -24px 0 0);
       }
     }
+    &-boundary-inline-start {
+      @include sticky-boundary.sticky-boundary-border('end');
+    }
+    &-boundary-inline-end {
+      @include sticky-boundary.sticky-boundary-border('start', calc(-1 * #{sticky-boundary.$border-width}));
+    }
   }
 
   // Use padding as a selected border placeholder to make sure rows don't change height on selection (visual refresh)

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

@@ -7,6 +7,7 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 @use '../cell-base/cell-box' as cell-base;
+@use '../sticky-columns/sticky-boundary' as sticky-boundary;
 
 @mixin when-focus-visible-or-fake {
   @include focus-visible.when-visible {
@@ -138,6 +139,17 @@
         clip-path: inset(0 -24px 0 0);
       }
     }
+    &-boundary-inline-start {
+      @include sticky-boundary.sticky-boundary-border('end') {
+        // The boundary border replaces the short column divider, same as when the cell is stuck.
+        & > .resize-divider {
+          display: none;
+        }
+      }
+    }
+    &-boundary-inline-end {
+      @include sticky-boundary.sticky-boundary-border('start', calc(-1 * #{sticky-boundary.$border-width}));
+    }
   }
 }