@cloudscape-design/components-themeable 3.0.1377 → 3.0.1379

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "839ce39b08a54ee2921104cfe5722f48e44dbb3b"
+  "commit": "3ac674ad15b166eec43ec29f82b32b2b8837e02e"
 }

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

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

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

@@ -82,7 +82,7 @@ $editing-cell-padding-block: awsui.$space-scaled-xxxs;
   &-content {
     box-sizing: border-box;
 
-    &:not(.body-cell-wrap) {
+    &.with-paddings:not(.body-cell-wrap) {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -136,8 +136,10 @@ $editing-cell-padding-block: awsui.$space-scaled-xxxs;
       border-inline-start: none;
     }
   }
-  // Guard selected out: a selected first row must keep its (thicker, coloured) selected
-  // top border, which the transparent placeholder would otherwise cover.
+  // First/last-row transparent placeholder. `:not(.body-cell-selected)` keeps a selected row's own border.
+  // Keyed on `.body-cell` with no grid-mode guard, so it is the single source of the placeholder for
+  // every cell — the existing Table's rows and the atomic cells (grid and auto) alike; load-bearing for
+  // grid selection-control centering.
   tr:first-child > &:not(.body-cell-selected) {
     border-block-start: cell-base.$border-placeholder;
   }

package/lib/internal/scss/table/cell-base/_cell-box.scss

@@ -4,23 +4,27 @@
 @use '../../internal/styles/tokens' as awsui;
 
 $cell-vertical-padding: awsui.$space-scaled-xs;
-// Calculate padding to prevent a shift in content after selection due to the difference
-// between selected border widths and normal row divider widths (visual refresh).
+// Extra padding so content doesn't shift on selection (VR: the selected border is wider than the divider).
 $cell-vertical-padding-w-border: calc(
   #{$cell-vertical-padding} + (#{awsui.$border-item-width} - #{awsui.$border-divider-list-width})
 );
 $cell-horizontal-padding: awsui.$space-scaled-l;
 $cell-edge-horizontal-padding: calc(#{awsui.$space-l} - #{awsui.$border-item-width});
 $border-placeholder: awsui.$border-item-width solid transparent;
+// Divider inset from the cell's top/bottom edges. Shared with the existing Table's resizer so the two match.
+$divider-block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
 $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
-// Ensuring enough space for absolute-positioned focus outlines of focus-able cell content elements.
+// Space reserved for focus outlines of focusable cell content.
 $cell-negative-space-vertical: 2px;
 
+// Padding is opt-in: only content carrying `.with-paddings` gets it (stamped unless `disablePaddings`).
+// A control cell omits the class, so no padding/negative-margin applies — nothing to override, at any
+// specificity, even as new edge/state rules are added.
 @mixin cell-padding-inline-start($padding) {
   $max-nesting-levels: 9;
   $offset-padding: calc($padding - 1 * awsui.$border-divider-list-width);
 
-  > .body-cell-content {
+  > .body-cell-content.with-paddings {
     padding-inline-start: $offset-padding;
   }
   > .expandable-toggle-wrapper {
@@ -29,7 +33,7 @@ $cell-negative-space-vertical: 2px;
 
   @for $i from 0 through $max-nesting-levels {
     &.expandable-level-#{$i} {
-      > .body-cell-content {
+      > .body-cell-content.with-paddings {
         padding-inline-start: calc(#{$offset-padding} / 2);
         margin-inline-start: calc(#{$offset-padding} / 2 + #{$i} * #{$cell-offset});
       }
@@ -39,7 +43,7 @@ $cell-negative-space-vertical: 2px;
     }
   }
   &.expandable-level-next {
-    > .body-cell-content {
+    > .body-cell-content.with-paddings {
       padding-inline-start: calc(#{$offset-padding} / 2);
       margin-inline-start: calc(#{$offset-padding} / 2 + #{$max-nesting-levels} * #{$cell-offset});
     }
@@ -49,24 +53,24 @@ $cell-negative-space-vertical: 2px;
   }
 }
 @mixin cell-padding-inline-end($padding) {
-  > .body-cell-content {
+  > .body-cell-content.with-paddings {
     padding-inline-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
   }
 }
 @mixin cell-padding-block($padding) {
-  > .body-cell-content {
+  > .body-cell-content.with-paddings {
     padding-block: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
     margin-block: calc(-1 * #{$cell-negative-space-vertical});
   }
 }
 @mixin cell-padding-block-start($padding) {
-  > .body-cell-content {
+  > .body-cell-content.with-paddings {
     padding-block-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
     margin-block-start: calc(-1 * #{$cell-negative-space-vertical});
   }
 }
 @mixin cell-padding-block-end($padding) {
-  > .body-cell-content {
+  > .body-cell-content.with-paddings {
     padding-block-end: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width} + #{$cell-negative-space-vertical});
     margin-block-end: calc(-1 * #{$cell-negative-space-vertical});
   }

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

@@ -295,7 +295,9 @@ settings icon in the pagination slot.
     @include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
   }
 
-  &:first-child:not(.has-striped-rows):not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(
+  // Opt-in gate: a control header (`disablePaddings`) omits `.with-paddings`, so this high-specificity
+  // <th> offset simply doesn't apply — a low-specificity reset could not override it.
+  &:first-child.with-paddings:not(.has-striped-rows):not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(
       .header-cell-grouped
     ) {
     @include cell-offset(awsui.$space-xxxs);
@@ -306,7 +308,9 @@ settings icon in the pagination slot.
     shaded background makes the child content appear too close
     to the table edge.
   */
-  &:first-child.has-striped-rows:not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(.header-cell-grouped) {
+  &:first-child.with-paddings.has-striped-rows:not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(
+      .header-cell-grouped
+    ) {
     @include cell-offset(awsui.$space-xxs);
   }
 

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

@@ -5,6 +5,7 @@
 
 @use '../../internal/styles/index' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '../cell-base/cell-box' as cell-base;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 //stylelint-disable-next-line selector-combinator-disallowed-list,selector-max-universal
@@ -15,7 +16,7 @@
 
 $handle-width: awsui.$space-xl;
 $active-separator-width: 2px;
-$block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
+$block-gap: cell-base.$divider-block-gap;
 
 .resizer-wrapper {
   inset-block: 0;

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

@@ -0,0 +1,12 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.body {
+  position: relative;
+}
+
+.body-grid {
+  display: block;
+}

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

@@ -0,0 +1,41 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/tokens' as awsui;
+
+.cell {
+  box-sizing: border-box;
+}
+
+// Selection is a background fill plus a layout-neutral `::after` ring: the cell keeps the base
+// `.body-cell` borders/padding, so the row never grows and content never shifts on toggle.
+[data-awsui-selected] > .cell {
+  background-color: awsui.$color-background-item-selected;
+}
+[data-awsui-shaded] > .cell {
+  background-color: awsui.$color-background-cell-shaded;
+}
+
+tr:has(+ [data-awsui-shaded]) > .cell {
+  border-block-end-color: awsui.$color-border-cell-shaded;
+}
+[data-awsui-shaded]:not(:last-child) > .cell {
+  border-block-end-color: awsui.$color-border-cell-shaded;
+}
+
+[data-awsui-selected]:has(+ [data-awsui-selected]) > .cell {
+  border-block-end-color: transparent;
+}
+
+tr:not([data-awsui-selected]):has(+ [data-awsui-selected]) > .cell {
+  border-block-end-color: transparent;
+}
+
+.cell-grid {
+  min-inline-size: 0;
+  align-self: stretch;
+  display: grid;
+  align-items: center;
+}

package/lib/internal/scss/table-head/styles.scss

@@ -0,0 +1,12 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.head {
+  position: relative;
+}
+
+.head-grid {
+  display: block;
+}

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

@@ -0,0 +1,57 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/tokens' as awsui;
+@use '../table/cell-base/cell-box' as cell-base;
+
+.header-cell {
+  box-sizing: border-box;
+}
+
+// Presentation-only divider `::after` (the substrate has no Resizer child); geometry mirrors the existing
+// Table's resizer `.divider` via the shared `$divider-block-gap`.
+.header-cell:not(:last-child):not(.no-divider)::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  min-block-size: awsui.$line-height-heading-xs;
+  max-block-size: calc(100% - #{cell-base.$divider-block-gap});
+  margin-block: auto;
+  border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.header-cell.disable-paddings {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.header-cell-content {
+  padding-block: awsui.$space-scaled-xxs;
+  padding-inline-start: awsui.$space-s;
+  padding-inline-end: awsui.$space-s;
+  line-height: awsui.$line-height-body-m;
+}
+
+.header-cell.disable-paddings > .header-cell-content {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+// VR-gated: the substrate is shared with the existing Table, which still supports non-VR mode.
+.header-cell.is-visual-refresh:first-child > .header-cell-content {
+  padding-inline-start: 0;
+}
+
+// Stretch to the row track, else an empty control header collapses to ~1px, leaving a stray divider stub.
+.header-cell-grid {
+  min-inline-size: 0;
+  align-self: stretch;
+  display: grid;
+  align-items: center;
+}

package/lib/internal/scss/table-root/styles.scss

@@ -0,0 +1,39 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/index' as styles;
+@use '../internal/styles/tokens' as awsui;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+
+.root {
+  @include styles.styles-reset;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  background: awsui.$color-background-container-content;
+}
+
+.body-scroller {
+  overflow-x: auto;
+  @include focus-visible.when-visible {
+    @include styles.container-focus();
+  }
+}
+
+.table {
+  inline-size: 100%;
+  // Separate borders: the collapsed model breaks sticky columns and blurs the selected-row outline corners.
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.table-auto {
+  table-layout: auto;
+}
+
+.table-grid {
+  display: block;
+}

package/lib/internal/scss/table-row/styles.scss

@@ -0,0 +1,47 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/tokens' as awsui;
+
+.row {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.row-grid {
+  display: grid;
+  inline-size: 100%;
+  align-items: center;
+}
+
+// Selection outline drawn as a layout-neutral `::after` on the row. Scoped to the hashed `.row` (not the
+// bare `data-awsui-selected` attribute) so it can't leak onto unrelated consumer elements. In grid mode
+// the abs-pos `::after` is a grid item — its containing block is the column tracks, so `inset:0` hugs the
+// columns (stops at underfill, follows overflow); auto mode falls back to the row box.
+.row[data-awsui-selected]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  grid-column: 1 / -1;
+  grid-row: 1;
+  border-block-start: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
+  border-block-end: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
+  border-inline-start: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
+  border-inline-end: awsui.$border-width-item-selected solid awsui.$color-border-item-selected;
+  border-start-start-radius: awsui.$border-radius-item;
+  border-start-end-radius: awsui.$border-radius-item;
+  border-end-start-radius: awsui.$border-radius-item;
+  border-end-end-radius: awsui.$border-radius-item;
+  pointer-events: none;
+}
+.row[data-awsui-selected]:has(+ .row[data-awsui-selected])::after {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.row[data-awsui-selected] + .row[data-awsui-selected]::after {
+  border-block-start-width: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}