npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.666 → 3.0.668 - Mend

@cloudscape-design/components-themeable 3.0.666 → 3.0.668

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

package/lib/internal/template/table/header-cell/styles.scoped.css CHANGED Viewed

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_header-cell_1spae_16m8c_97:not(#\9) {
+.awsui_header-cell_1spae_19nip_97:not(#\9) {
   position: relative;
   text-align: start;
   box-sizing: border-box;
@@ -107,61 +107,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-scaled-xxs-t7ij38, 4px);
   padding-inline: var(--space-scaled-xs-x91h81, 8px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_16m8c_97:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_16m8c_97:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_16m8c_97:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
   inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
   inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
-  inline-size: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
-  block-size: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_16m8c_97.awsui_header-cell-fake-focus_1spae_16m8c_131:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_header-cell-fake-focus_1spae_19nip_131:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_16m8c_97.awsui_header-cell-fake-focus_1spae_16m8c_131:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_header-cell-fake-focus_1spae_19nip_131:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_16m8c_97.awsui_header-cell-fake-focus_1spae_16m8c_131:not(#\9)::before {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_header-cell-fake-focus_1spae_19nip_131:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
   inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
   inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
-  inline-size: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
-  block-size: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_header-cell-sticky_1spae_16m8c_152:not(#\9) {
+.awsui_header-cell-sticky_1spae_19nip_152:not(#\9) {
   border-block-end: var(--border-table-sticky-width-mb7esq, 0px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
-.awsui_header-cell-stuck_1spae_16m8c_155:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_16m8c_155) {
+.awsui_header-cell-stuck_1spae_19nip_155:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_19nip_155) {
   border-block-end-color: transparent;
 }
-.awsui_header-cell-variant-full-page_1spae_16m8c_155.awsui_header-cell-hidden_1spae_16m8c_158:not(#\9) {
+.awsui_header-cell-variant-full-page_1spae_19nip_155.awsui_header-cell-hidden_1spae_19nip_158:not(#\9) {
   border-block-end-color: transparent;
 }
-.awsui_header-cell_1spae_16m8c_97:not(#\9):last-child, .awsui_header-cell_1spae_16m8c_97.awsui_header-cell-sortable_1spae_16m8c_161:not(#\9) {
+.awsui_header-cell_1spae_19nip_97:not(#\9):last-child, .awsui_header-cell_1spae_19nip_97.awsui_header-cell-sortable_1spae_19nip_161:not(#\9) {
   padding-inline-end: var(--space-xs-xf5ch3, 8px);
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell_1spae_16m8c_164:not(#\9) {
+.awsui_header-cell_1spae_19nip_97.awsui_sticky-cell_1spae_19nip_164:not(#\9) {
   position: sticky;
   background: var(--color-background-table-header-ly5ewp, #fafafa);
   z-index: 798;
@@ -169,42 +169,42 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_16m8c_97.awsui_head
   transition-duration: var(--motion-duration-transition-show-quick-dzfata, 90ms);
   transition-timing-function: var(--motion-easing-sticky-xk36yb, ease-out);
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell-pad-left_1spae_16m8c_172:not(#\9):not(.awsui_has-selection_1spae_16m8c_172) {
+.awsui_header-cell_1spae_19nip_97.awsui_sticky-cell-pad-left_1spae_19nip_172:not(#\9):not(.awsui_has-selection_1spae_19nip_172) {
   padding-inline-start: var(--space-table-horizontal-ciak0s, 0px);
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell-last-inline-start_1spae_16m8c_175:not(#\9) {
+.awsui_header-cell_1spae_19nip_97.awsui_sticky-cell-last-inline-start_1spae_19nip_175:not(#\9) {
   box-shadow: var(--shadow-sticky-column-first-kcqiid, 4px 0 8px 0 rgba(0, 28, 36, 0.1));
   clip-path: inset(0px -24px 0px 0px);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell-last-inline-start_1spae_16m8c_175 > .awsui_resize-divider_1spae_16m8c_180:not(#\9) {
+.awsui_header-cell_1spae_19nip_97.awsui_sticky-cell-last-inline-start_1spae_19nip_175 > .awsui_resize-divider_1spae_19nip_180:not(#\9) {
   display: none;
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell-last-inline-start_1spae_16m8c_175:not(#\9):dir(rtl) {
+.awsui_header-cell_1spae_19nip_97.awsui_sticky-cell-last-inline-start_1spae_19nip_175:not(#\9):dir(rtl) {
   box-shadow: var(--shadow-sticky-column-last-pn4nzt, -4px 0 8px 0 rgba(0, 28, 36, 0.1));
   clip-path: inset(0 0 0 -24px);
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell-last-inline-end_1spae_16m8c_187:not(#\9) {
+.awsui_header-cell_1spae_19nip_97.awsui_sticky-cell-last-inline-end_1spae_19nip_187:not(#\9) {
   box-shadow: var(--shadow-sticky-column-last-pn4nzt, -4px 0 8px 0 rgba(0, 28, 36, 0.1));
   clip-path: inset(0 0 0 -24px);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell-last-inline-end_1spae_16m8c_187:not(#\9):dir(rtl) {
+.awsui_header-cell_1spae_19nip_97.awsui_sticky-cell-last-inline-end_1spae_19nip_187:not(#\9):dir(rtl) {
   box-shadow: var(--shadow-sticky-column-first-kcqiid, 4px 0 8px 0 rgba(0, 28, 36, 0.1));
   clip-path: inset(0 -24px 0 0);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell_1spae_16m8c_164:not(#\9) {
+  .awsui_header-cell_1spae_19nip_97.awsui_sticky-cell_1spae_19nip_164:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell_1spae_16m8c_164:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_16m8c_97.awsui_sticky-cell_1spae_16m8c_164:not(#\9) {
+.awsui-motion-disabled .awsui_header-cell_1spae_19nip_97.awsui_sticky-cell_1spae_19nip_164:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_19nip_97.awsui_sticky-cell_1spae_19nip_164:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_sorting-icon_1spae_16m8c_207:not(#\9) {
+.awsui_sorting-icon_1spae_19nip_207:not(#\9) {
   position: absolute;
   inset-block-start: 50%;
   transform: translateY(-50%);
@@ -212,96 +212,96 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_16m8c_97.awsui_head
   color: var(--color-text-column-sorting-icon-btnn2y, #687078);
 }
-.awsui_edit-icon_1spae_16m8c_215:not(#\9) {
+.awsui_edit-icon_1spae_19nip_215:not(#\9) {
   margin-inline-start: var(--space-xxs-9rrxti, 4px);
   margin-block-start: var(--space-scaled-xxs-t7ij38, 4px);
   color: inherit;
 }
-.awsui_header-cell-content_1spae_16m8c_221:not(#\9) {
+.awsui_header-cell-content_1spae_19nip_221:not(#\9) {
   position: relative;
   padding-block: var(--space-scaled-xxs-t7ij38, 4px);
   padding-inline-start: var(--space-s-2025hl, 12px);
   padding-inline-end: var(--space-s-2025hl, 12px);
 }
-.awsui_header-cell-content_1spae_16m8c_221.awsui_header-cell-content-expandable_1spae_16m8c_227:not(#\9) {
+.awsui_header-cell-content_1spae_19nip_221.awsui_header-cell-content-expandable_1spae_19nip_227:not(#\9) {
   padding-inline-start: calc(var(--space-s-2025hl, 12px) + var(--space-m-kpg8id, 16px) + var(--space-xs-xf5ch3, 8px));
 }
-.awsui_header-cell-sortable_1spae_16m8c_161 > .awsui_header-cell-content_1spae_16m8c_221:not(#\9) {
+.awsui_header-cell-sortable_1spae_19nip_161 > .awsui_header-cell-content_1spae_19nip_221:not(#\9) {
   padding-inline-end: calc(var(--space-xl-5fdwzu, 24px) + var(--space-xxs-9rrxti, 4px));
 }
-.awsui_header-cell-content_1spae_16m8c_221:not(#\9):focus {
+.awsui_header-cell-content_1spae_19nip_221:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_16m8c_221:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_19nip_221:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_16m8c_221:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_19nip_221:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_16m8c_221:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_19nip_221:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
   inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
   inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
-  inline-size: calc(100% + 2 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
-  block-size: calc(100% + 2 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_16m8c_221.awsui_header-cell-fake-focus_1spae_16m8c_131:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_19nip_221.awsui_header-cell-fake-focus_1spae_19nip_131:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_16m8c_221.awsui_header-cell-fake-focus_1spae_16m8c_131:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_19nip_221.awsui_header-cell-fake-focus_1spae_19nip_131:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_16m8c_221.awsui_header-cell-fake-focus_1spae_16m8c_131:not(#\9)::before {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_19nip_221.awsui_header-cell-fake-focus_1spae_19nip_131:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
   inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
   inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
-  inline-size: calc(100% + 2 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
-  block-size: calc(100% + 2 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_header-cell-disabled_1spae_16m8c_279.awsui_header-cell-sorted_1spae_16m8c_279 > .awsui_header-cell-content_1spae_16m8c_221 > .awsui_sorting-icon_1spae_16m8c_207:not(#\9) {
+.awsui_header-cell-disabled_1spae_19nip_279.awsui_header-cell-sorted_1spae_19nip_279 > .awsui_header-cell-content_1spae_19nip_221 > .awsui_sorting-icon_1spae_19nip_207:not(#\9) {
   color: var(--color-text-interactive-disabled-e23z4j, #aab7b8);
 }
-.awsui_header-cell-sortable_1spae_16m8c_161:not(#\9):not(.awsui_header-cell-disabled_1spae_16m8c_279) > .awsui_header-cell-content_1spae_16m8c_221 {
+.awsui_header-cell-sortable_1spae_19nip_161:not(#\9):not(.awsui_header-cell-disabled_1spae_19nip_279) > .awsui_header-cell-content_1spae_19nip_221 {
   cursor: pointer;
 }
-.awsui_header-cell-sortable_1spae_16m8c_161:not(#\9):not(.awsui_header-cell-disabled_1spae_16m8c_279) > .awsui_header-cell-content_1spae_16m8c_221:hover, .awsui_header-cell-sortable_1spae_16m8c_161:not(#\9):not(.awsui_header-cell-disabled_1spae_16m8c_279).awsui_header-cell-sorted_1spae_16m8c_279 > .awsui_header-cell-content_1spae_16m8c_221 {
+.awsui_header-cell-sortable_1spae_19nip_161:not(#\9):not(.awsui_header-cell-disabled_1spae_19nip_279) > .awsui_header-cell-content_1spae_19nip_221:hover, .awsui_header-cell-sortable_1spae_19nip_161:not(#\9):not(.awsui_header-cell-disabled_1spae_19nip_279).awsui_header-cell-sorted_1spae_19nip_279 > .awsui_header-cell-content_1spae_19nip_221 {
   color: var(--color-text-interactive-active-jrhxoe, #16191f);
 }
-.awsui_header-cell-sortable_1spae_16m8c_161:not(#\9):not(.awsui_header-cell-disabled_1spae_16m8c_279) > .awsui_header-cell-content_1spae_16m8c_221:hover > .awsui_sorting-icon_1spae_16m8c_207, .awsui_header-cell-sortable_1spae_16m8c_161:not(#\9):not(.awsui_header-cell-disabled_1spae_16m8c_279).awsui_header-cell-sorted_1spae_16m8c_279 > .awsui_header-cell-content_1spae_16m8c_221 > .awsui_sorting-icon_1spae_16m8c_207 {
+.awsui_header-cell-sortable_1spae_19nip_161:not(#\9):not(.awsui_header-cell-disabled_1spae_19nip_279) > .awsui_header-cell-content_1spae_19nip_221:hover > .awsui_sorting-icon_1spae_19nip_207, .awsui_header-cell-sortable_1spae_19nip_161:not(#\9):not(.awsui_header-cell-disabled_1spae_19nip_279).awsui_header-cell-sorted_1spae_19nip_279 > .awsui_header-cell-content_1spae_19nip_221 > .awsui_sorting-icon_1spae_19nip_207 {
   color: var(--color-text-interactive-active-jrhxoe, #16191f);
 }
-.awsui_header-cell-text_1spae_16m8c_293:not(#\9) {
+.awsui_header-cell-text_1spae_19nip_293:not(#\9) {
   line-height: var(--line-height-heading-xs-jsenn1, 20px);
   padding-block: calc(var(--space-xxxs-z28114, 2px) / 2);
 }
-.awsui_header-cell-text_1spae_16m8c_293:not(#\9):not(.awsui_header-cell-text-wrap_1spae_16m8c_297) {
+.awsui_header-cell-text_1spae_19nip_293:not(#\9):not(.awsui_header-cell-text-wrap_1spae_19nip_297) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.awsui_header-cell-ascending_1spae_16m8c_303:not(#\9),
-.awsui_header-cell-descending_1spae_16m8c_304:not(#\9) {
+.awsui_header-cell-ascending_1spae_19nip_303:not(#\9),
+.awsui_header-cell-descending_1spae_19nip_304:not(#\9) {
   /* used in test-utils */
 }
@@ -311,44 +311,128 @@ with the left edge of the table as closely as possible. If the
 last header cell is sortable the sort icon should align with the
 settings icon in the pagination slot.
 */
-.awsui_header-cell_1spae_16m8c_97:not(#\9):not(.awsui_is-visual-refresh_1spae_16m8c_314):first-child {
+.awsui_header-cell_1spae_19nip_97:not(#\9):not(.awsui_is-visual-refresh_1spae_19nip_314):first-child {
   padding-inline-start: var(--space-xs-xf5ch3, 8px);
 }
-.awsui_header-cell_1spae_16m8c_97:not(#\9):not(.awsui_is-visual-refresh_1spae_16m8c_314):first-child.awsui_header-cell-content-expandable_1spae_16m8c_227 {
+.awsui_header-cell_1spae_19nip_97:not(#\9):not(.awsui_is-visual-refresh_1spae_19nip_314):first-child.awsui_header-cell-content-expandable_1spae_19nip_227 {
   padding-inline-start: calc(var(--space-xs-xf5ch3, 8px) + var(--space-m-kpg8id, 16px) + var(--space-xs-xf5ch3, 8px));
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9) {
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9) {
   /*
   Striped rows requires additional left padding because the
   shaded background makes the child content appear too close
   to the table edge.
   */
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_16m8c_328) {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child:focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t7ij38, 4px) + var(--space-scaled-xxs-t7ij38, 4px)) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px) + var(--space-scaled-xxs-t7ij38, 4px)));
+  inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px) + var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_19nip_131 {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_19nip_131 {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-t7ij38, 4px) + var(--space-scaled-xxs-t7ij38, 4px)) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_19nip_131::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px) + var(--space-scaled-xxs-t7ij38, 4px)));
+  inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px) + var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-scaled-xxs-t7ij38, 4px)));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
+}
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child > .awsui_header-cell-content_1spae_19nip_221 {
+  padding-inline-start: 0px;
+}
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child > .awsui_header-cell-content_1spae_19nip_221.awsui_header-cell-content-expandable_1spae_19nip_227 {
+  padding-inline-start: calc(0px + var(--space-m-kpg8id, 16px) + var(--space-xs-xf5ch3, 8px));
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child > .awsui_header-cell-content_1spae_19nip_221:focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child > .awsui_header-cell-content_1spae_19nip_221:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px) + var(--space-scaled-xxs-t7ij38, 4px)) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child > .awsui_header-cell-content_1spae_19nip_221:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px) + var(--space-scaled-xxs-t7ij38, 4px)));
+  inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px) + var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child > .awsui_header-cell-content_1spae_19nip_221.awsui_header-cell-fake-focus_1spae_19nip_131 {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child > .awsui_header-cell-content_1spae_19nip_221.awsui_header-cell-fake-focus_1spae_19nip_131 {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px) + var(--space-scaled-xxs-t7ij38, 4px)) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child > .awsui_header-cell-content_1spae_19nip_221.awsui_header-cell-fake-focus_1spae_19nip_131::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px) + var(--space-scaled-xxs-t7ij38, 4px)));
+  inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px) + var(--space-scaled-xxs-t7ij38, 4px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-czfdw1, 0px)));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
+}
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_19nip_418) {
   padding-inline-start: var(--space-xxxs-z28114, 2px);
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_16m8c_328).awsui_header-cell-content-expandable_1spae_16m8c_227 {
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_19nip_418).awsui_header-cell-content-expandable_1spae_19nip_227 {
   padding-inline-start: calc(var(--space-xxxs-z28114, 2px) + var(--space-m-kpg8id, 16px) + var(--space-xs-xf5ch3, 8px));
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_16m8c_328).awsui_sticky-cell-pad-inline-start_1spae_16m8c_334 {
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_19nip_418).awsui_sticky-cell-pad-inline-start_1spae_19nip_424 {
   padding-inline-start: var(--space-table-horizontal-ciak0s, 0px);
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_16m8c_328).awsui_sticky-cell-pad-inline-start_1spae_16m8c_334.awsui_header-cell-content-expandable_1spae_16m8c_227 {
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_19nip_418).awsui_sticky-cell-pad-inline-start_1spae_19nip_424.awsui_header-cell-content-expandable_1spae_19nip_227 {
   padding-inline-start: calc(var(--space-table-horizontal-ciak0s, 0px) + var(--space-m-kpg8id, 16px) + var(--space-xs-xf5ch3, 8px));
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):first-child.awsui_has-striped-rows_1spae_16m8c_328 {
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child.awsui_has-striped-rows_1spae_19nip_418 {
   padding-inline-start: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):first-child.awsui_has-striped-rows_1spae_16m8c_328.awsui_header-cell-content-expandable_1spae_16m8c_227 {
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):first-child.awsui_has-striped-rows_1spae_19nip_418.awsui_header-cell-content-expandable_1spae_19nip_227 {
   padding-inline-start: calc(var(--space-xxs-9rrxti, 4px) + var(--space-m-kpg8id, 16px) + var(--space-xs-xf5ch3, 8px));
 }
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):first-child > .awsui_header-cell-content_1spae_16m8c_221 {
-  padding-inline-start: 0px;
-}
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):first-child > .awsui_header-cell-content_1spae_16m8c_221.awsui_header-cell-content-expandable_1spae_16m8c_227 {
-  padding-inline-start: calc(0px + var(--space-m-kpg8id, 16px) + var(--space-xs-xf5ch3, 8px));
-}
-.awsui_header-cell_1spae_16m8c_97.awsui_is-visual-refresh_1spae_16m8c_314:not(#\9):last-child.awsui_header-cell-sortable_1spae_16m8c_161 {
+.awsui_header-cell_1spae_19nip_97.awsui_is-visual-refresh_1spae_19nip_314:not(#\9):last-child.awsui_header-cell-sortable_1spae_19nip_161 {
   padding-inline-end: var(--space-xxxs-z28114, 2px);
 }

package/lib/internal/template/table/header-cell/styles.selectors.js CHANGED Viewed

@@ -2,31 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "header-cell": "awsui_header-cell_1spae_16m8c_97",
-  "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_16m8c_131",
-  "header-cell-sticky": "awsui_header-cell-sticky_1spae_16m8c_152",
-  "header-cell-stuck": "awsui_header-cell-stuck_1spae_16m8c_155",
-  "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_16m8c_155",
-  "header-cell-hidden": "awsui_header-cell-hidden_1spae_16m8c_158",
-  "header-cell-sortable": "awsui_header-cell-sortable_1spae_16m8c_161",
-  "sticky-cell": "awsui_sticky-cell_1spae_16m8c_164",
-  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_16m8c_172",
-  "has-selection": "awsui_has-selection_1spae_16m8c_172",
-  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_16m8c_175",
-  "resize-divider": "awsui_resize-divider_1spae_16m8c_180",
-  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_16m8c_187",
-  "sorting-icon": "awsui_sorting-icon_1spae_16m8c_207",
-  "edit-icon": "awsui_edit-icon_1spae_16m8c_215",
-  "header-cell-content": "awsui_header-cell-content_1spae_16m8c_221",
-  "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_16m8c_227",
-  "header-cell-disabled": "awsui_header-cell-disabled_1spae_16m8c_279",
-  "header-cell-sorted": "awsui_header-cell-sorted_1spae_16m8c_279",
-  "header-cell-text": "awsui_header-cell-text_1spae_16m8c_293",
-  "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_16m8c_297",
-  "header-cell-ascending": "awsui_header-cell-ascending_1spae_16m8c_303",
-  "header-cell-descending": "awsui_header-cell-descending_1spae_16m8c_304",
-  "is-visual-refresh": "awsui_is-visual-refresh_1spae_16m8c_314",
-  "has-striped-rows": "awsui_has-striped-rows_1spae_16m8c_328",
-  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_16m8c_334"
+  "header-cell": "awsui_header-cell_1spae_19nip_97",
+  "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_19nip_131",
+  "header-cell-sticky": "awsui_header-cell-sticky_1spae_19nip_152",
+  "header-cell-stuck": "awsui_header-cell-stuck_1spae_19nip_155",
+  "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_19nip_155",
+  "header-cell-hidden": "awsui_header-cell-hidden_1spae_19nip_158",
+  "header-cell-sortable": "awsui_header-cell-sortable_1spae_19nip_161",
+  "sticky-cell": "awsui_sticky-cell_1spae_19nip_164",
+  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_19nip_172",
+  "has-selection": "awsui_has-selection_1spae_19nip_172",
+  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_19nip_175",
+  "resize-divider": "awsui_resize-divider_1spae_19nip_180",
+  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_19nip_187",
+  "sorting-icon": "awsui_sorting-icon_1spae_19nip_207",
+  "edit-icon": "awsui_edit-icon_1spae_19nip_215",
+  "header-cell-content": "awsui_header-cell-content_1spae_19nip_221",
+  "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_19nip_227",
+  "header-cell-disabled": "awsui_header-cell-disabled_1spae_19nip_279",
+  "header-cell-sorted": "awsui_header-cell-sorted_1spae_19nip_279",
+  "header-cell-text": "awsui_header-cell-text_1spae_19nip_293",
+  "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_19nip_297",
+  "header-cell-ascending": "awsui_header-cell-ascending_1spae_19nip_303",
+  "header-cell-descending": "awsui_header-cell-descending_1spae_19nip_304",
+  "is-visual-refresh": "awsui_is-visual-refresh_1spae_19nip_314",
+  "has-striped-rows": "awsui_has-striped-rows_1spae_19nip_418",
+  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_19nip_424"
 };

package/lib/internal/template/table/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/table/internal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAwB,MAAM,cAAc,CAAC;AA4DzE,eAAO,MAAM,sBAAsB,qBAWX,CAAC;AAEzB,QAAA,MAAM,aAAa,~~qBAwjBK~~,CAAC;AAEzB,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/table/internal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAwB,MAAM,cAAc,CAAC;AA4DzE,eAAO,MAAM,sBAAsB,qBAWX,CAAC;AAEzB,QAAA,MAAM,aAAa,qBA0jBK,CAAC;AAEzB,eAAe,aAAa,CAAC"}

package/lib/internal/template/table/internal.js CHANGED Viewed

@@ -149,6 +149,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
     const hasFooter = !!footer || hasFooterPagination;
     const headerIdRef = useRef(undefined);
     const isLabelledByHeader = !(ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tableLabel) && !!header;
+    const ariaLabelledby = isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined;
     const setHeaderRef = useCallback((id) => {
         headerIdRef.current = id;
     }, []);
@@ -214,6 +215,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
         tableRole,
         isScrollable: !!(tableWidth && containerWidth && tableWidth > containerWidth),
         ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tableLabel,
+        ariaLabelledby,
     });
     const getMouseDownTarget = useMouseDownTarget();
     useTableFocusNavigation({
@@ -258,7 +260,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
                             totalItemsCount,
                             totalColumnsCount: totalColumnsCount,
                             ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tableLabel,
-                            ariaLabelledBy: isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined,
+                            ariaLabelledby,
                         })),
                             React.createElement(Thead, Object.assign({ ref: theadRef, hidden: stickyHeader, onFocusedComponentChange: focusId => { var _a; return (_a = stickyHeaderRef.current) === null || _a === void 0 ? void 0 : _a.setFocus(focusId); } }, theadProps)),
                             React.createElement("tbody", null, loading || allItems.length === 0 ? (React.createElement("tr", null,