@cloudscape-design/components 3.0.651 → 3.0.653

package/table/header-cell/styles.scoped.css

@@ -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_1y1td_97:not(#\9) {
+.awsui_header-cell_1spae_ga51i_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-7597g1, 4px);
   padding-inline: var(--space-scaled-xs-26e2du, 8px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1y1td_97:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1y1td_97:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-scaled-xxs-7597g1, 4px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1y1td_97:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
   inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
   inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
-  inline-size: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
-  block-size: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1y1td_97.awsui_header-cell-fake-focus_1spae_1y1td_131:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_header-cell-fake-focus_1spae_ga51i_131:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1y1td_97.awsui_header-cell-fake-focus_1spae_1y1td_131:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_header-cell-fake-focus_1spae_ga51i_131:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-scaled-xxs-7597g1, 4px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1y1td_97.awsui_header-cell-fake-focus_1spae_1y1td_131:not(#\9)::before {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_header-cell-fake-focus_1spae_ga51i_131:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
   inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
   inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
-  inline-size: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
-  block-size: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_header-cell-sticky_1spae_1y1td_152:not(#\9) {
+.awsui_header-cell-sticky_1spae_ga51i_152:not(#\9) {
   border-block-end: var(--border-table-sticky-width-87kf12, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_header-cell-stuck_1spae_1y1td_155:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_1y1td_155) {
+.awsui_header-cell-stuck_1spae_ga51i_155:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_ga51i_155) {
   border-block-end-color: transparent;
 }
-.awsui_header-cell-variant-full-page_1spae_1y1td_155.awsui_header-cell-hidden_1spae_1y1td_158:not(#\9) {
+.awsui_header-cell-variant-full-page_1spae_ga51i_155.awsui_header-cell-hidden_1spae_ga51i_158:not(#\9) {
   border-block-end-color: transparent;
 }
-.awsui_header-cell_1spae_1y1td_97:not(#\9):last-child, .awsui_header-cell_1spae_1y1td_97.awsui_header-cell-sortable_1spae_1y1td_161:not(#\9) {
+.awsui_header-cell_1spae_ga51i_97:not(#\9):last-child, .awsui_header-cell_1spae_ga51i_97.awsui_header-cell-sortable_1spae_ga51i_161:not(#\9) {
   padding-inline-end: var(--space-xs-zb16t3, 8px);
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell_1spae_1y1td_164:not(#\9) {
+.awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell_1spae_ga51i_164:not(#\9) {
   position: sticky;
   background: var(--color-background-table-header-82ew8p, #ffffff);
   z-index: 798;
@@ -169,42 +169,42 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1y1td_97.awsui_head
   transition-duration: var(--motion-duration-transition-show-quick-osg026, 90ms);
   transition-timing-function: var(--motion-easing-sticky-56u8cd, cubic-bezier(1, 0, 0.83, 1));
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell-pad-left_1spae_1y1td_172:not(#\9):not(.awsui_has-selection_1spae_1y1td_172) {
+.awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell-pad-left_1spae_ga51i_172:not(#\9):not(.awsui_has-selection_1spae_ga51i_172) {
   padding-inline-start: var(--space-table-horizontal-8davlm, 20px);
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell-last-inline-start_1spae_1y1td_175:not(#\9) {
+.awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell-last-inline-start_1spae_ga51i_175:not(#\9) {
   box-shadow: var(--shadow-sticky-column-first-039dqs, 4px 0px 8px 1px rgba(0, 7, 22, 0.1));
   clip-path: inset(0px -24px 0px 0px);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell-last-inline-start_1spae_1y1td_175 > .awsui_resize-divider_1spae_1y1td_180:not(#\9) {
+.awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell-last-inline-start_1spae_ga51i_175 > .awsui_resize-divider_1spae_ga51i_180:not(#\9) {
   display: none;
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell-last-inline-start_1spae_1y1td_175:not(#\9):dir(rtl) {
+.awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell-last-inline-start_1spae_ga51i_175:not(#\9):dir(rtl) {
   box-shadow: var(--shadow-sticky-column-last-n170vw, -4px 0 8px 1px rgba(0, 28, 36, 0.1));
   clip-path: inset(0 0 0 -24px);
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell-last-inline-end_1spae_1y1td_187:not(#\9) {
+.awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell-last-inline-end_1spae_ga51i_187:not(#\9) {
   box-shadow: var(--shadow-sticky-column-last-n170vw, -4px 0 8px 1px 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_1y1td_97.awsui_sticky-cell-last-inline-end_1spae_1y1td_187:not(#\9):dir(rtl) {
+.awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell-last-inline-end_1spae_ga51i_187:not(#\9):dir(rtl) {
   box-shadow: var(--shadow-sticky-column-first-039dqs, 4px 0px 8px 1px rgba(0, 7, 22, 0.1));
   clip-path: inset(0 -24px 0 0);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell_1spae_1y1td_164:not(#\9) {
+  .awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell_1spae_ga51i_164:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell_1spae_1y1td_164:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_1y1td_97.awsui_sticky-cell_1spae_1y1td_164:not(#\9) {
+.awsui-motion-disabled .awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell_1spae_ga51i_164:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_ga51i_97.awsui_sticky-cell_1spae_ga51i_164:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_sorting-icon_1spae_1y1td_207:not(#\9) {
+.awsui_sorting-icon_1spae_ga51i_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_1y1td_97.awsui_head
   color: var(--color-text-column-sorting-icon-8or30j, #414d5c);
 }
 
-.awsui_edit-icon_1spae_1y1td_215:not(#\9) {
+.awsui_edit-icon_1spae_ga51i_215:not(#\9) {
   margin-inline-start: var(--space-xxs-p8yyaw, 4px);
   margin-block-start: var(--space-scaled-xxs-7597g1, 4px);
   color: inherit;
 }
 
-.awsui_header-cell-content_1spae_1y1td_221:not(#\9) {
+.awsui_header-cell-content_1spae_ga51i_221:not(#\9) {
   position: relative;
   padding-block: var(--space-scaled-xxs-7597g1, 4px);
   padding-inline-start: var(--space-s-34lx8l, 12px);
   padding-inline-end: var(--space-s-34lx8l, 12px);
 }
-.awsui_header-cell-content_1spae_1y1td_221.awsui_header-cell-content-expandable_1spae_1y1td_227:not(#\9) {
+.awsui_header-cell-content_1spae_ga51i_221.awsui_header-cell-content-expandable_1spae_ga51i_227:not(#\9) {
   padding-inline-start: calc(var(--space-s-34lx8l, 12px) + var(--space-m-udix3p, 16px) + var(--space-xs-zb16t3, 8px));
 }
-.awsui_header-cell-sortable_1spae_1y1td_161 > .awsui_header-cell-content_1spae_1y1td_221:not(#\9) {
+.awsui_header-cell-sortable_1spae_ga51i_161 > .awsui_header-cell-content_1spae_ga51i_221:not(#\9) {
   padding-inline-end: calc(var(--space-xl-lmui9r, 24px) + var(--space-xxs-p8yyaw, 4px));
 }
-.awsui_header-cell-content_1spae_1y1td_221:not(#\9):focus {
+.awsui_header-cell-content_1spae_ga51i_221:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1y1td_221:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_ga51i_221:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1y1td_221:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_ga51i_221:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1y1td_221:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_ga51i_221:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
   inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
   inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
-  inline-size: calc(100% + 2 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
-  block-size: calc(100% + 2 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1y1td_221.awsui_header-cell-fake-focus_1spae_1y1td_131:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_ga51i_221.awsui_header-cell-fake-focus_1spae_ga51i_131:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1y1td_221.awsui_header-cell-fake-focus_1spae_1y1td_131:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_ga51i_221.awsui_header-cell-fake-focus_1spae_ga51i_131:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1y1td_221.awsui_header-cell-fake-focus_1spae_1y1td_131:not(#\9)::before {
+body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_ga51i_221.awsui_header-cell-fake-focus_1spae_ga51i_131:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
   inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
   inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
-  inline-size: calc(100% + 2 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
-  block-size: calc(100% + 2 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
   border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_header-cell-disabled_1spae_1y1td_279.awsui_header-cell-sorted_1spae_1y1td_279 > .awsui_header-cell-content_1spae_1y1td_221 > .awsui_sorting-icon_1spae_1y1td_207:not(#\9) {
+.awsui_header-cell-disabled_1spae_ga51i_279.awsui_header-cell-sorted_1spae_ga51i_279 > .awsui_header-cell-content_1spae_ga51i_221 > .awsui_sorting-icon_1spae_ga51i_207:not(#\9) {
   color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
 }
 
-.awsui_header-cell-sortable_1spae_1y1td_161:not(#\9):not(.awsui_header-cell-disabled_1spae_1y1td_279) > .awsui_header-cell-content_1spae_1y1td_221 {
+.awsui_header-cell-sortable_1spae_ga51i_161:not(#\9):not(.awsui_header-cell-disabled_1spae_ga51i_279) > .awsui_header-cell-content_1spae_ga51i_221 {
   cursor: pointer;
 }
-.awsui_header-cell-sortable_1spae_1y1td_161:not(#\9):not(.awsui_header-cell-disabled_1spae_1y1td_279) > .awsui_header-cell-content_1spae_1y1td_221:hover, .awsui_header-cell-sortable_1spae_1y1td_161:not(#\9):not(.awsui_header-cell-disabled_1spae_1y1td_279).awsui_header-cell-sorted_1spae_1y1td_279 > .awsui_header-cell-content_1spae_1y1td_221 {
+.awsui_header-cell-sortable_1spae_ga51i_161:not(#\9):not(.awsui_header-cell-disabled_1spae_ga51i_279) > .awsui_header-cell-content_1spae_ga51i_221:hover, .awsui_header-cell-sortable_1spae_ga51i_161:not(#\9):not(.awsui_header-cell-disabled_1spae_ga51i_279).awsui_header-cell-sorted_1spae_ga51i_279 > .awsui_header-cell-content_1spae_ga51i_221 {
   color: var(--color-text-interactive-active-ox3ozh, #000716);
 }
-.awsui_header-cell-sortable_1spae_1y1td_161:not(#\9):not(.awsui_header-cell-disabled_1spae_1y1td_279) > .awsui_header-cell-content_1spae_1y1td_221:hover > .awsui_sorting-icon_1spae_1y1td_207, .awsui_header-cell-sortable_1spae_1y1td_161:not(#\9):not(.awsui_header-cell-disabled_1spae_1y1td_279).awsui_header-cell-sorted_1spae_1y1td_279 > .awsui_header-cell-content_1spae_1y1td_221 > .awsui_sorting-icon_1spae_1y1td_207 {
+.awsui_header-cell-sortable_1spae_ga51i_161:not(#\9):not(.awsui_header-cell-disabled_1spae_ga51i_279) > .awsui_header-cell-content_1spae_ga51i_221:hover > .awsui_sorting-icon_1spae_ga51i_207, .awsui_header-cell-sortable_1spae_ga51i_161:not(#\9):not(.awsui_header-cell-disabled_1spae_ga51i_279).awsui_header-cell-sorted_1spae_ga51i_279 > .awsui_header-cell-content_1spae_ga51i_221 > .awsui_sorting-icon_1spae_ga51i_207 {
   color: var(--color-text-interactive-active-ox3ozh, #000716);
 }
 
-.awsui_header-cell-text_1spae_1y1td_293:not(#\9) {
+.awsui_header-cell-text_1spae_ga51i_293:not(#\9) {
   line-height: var(--line-height-heading-xs-aeleja, 18px);
   padding-block: calc(var(--space-xxxs-zbmxqb, 2px) / 2);
 }
-.awsui_header-cell-text_1spae_1y1td_293:not(#\9):not(.awsui_header-cell-text-wrap_1spae_1y1td_297) {
+.awsui_header-cell-text_1spae_ga51i_293:not(#\9):not(.awsui_header-cell-text-wrap_1spae_ga51i_297) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.awsui_header-cell-ascending_1spae_1y1td_303:not(#\9),
-.awsui_header-cell-descending_1spae_1y1td_304:not(#\9) {
+.awsui_header-cell-ascending_1spae_ga51i_303:not(#\9),
+.awsui_header-cell-descending_1spae_ga51i_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_1y1td_97:not(#\9):not(.awsui_is-visual-refresh_1spae_1y1td_314):first-child {
+.awsui_header-cell_1spae_ga51i_97:not(#\9):not(.awsui_is-visual-refresh_1spae_ga51i_314):first-child {
   padding-inline-start: var(--space-xs-zb16t3, 8px);
 }
-.awsui_header-cell_1spae_1y1td_97:not(#\9):not(.awsui_is-visual-refresh_1spae_1y1td_314):first-child.awsui_header-cell-content-expandable_1spae_1y1td_227 {
+.awsui_header-cell_1spae_ga51i_97:not(#\9):not(.awsui_is-visual-refresh_1spae_ga51i_314):first-child.awsui_header-cell-content-expandable_1spae_ga51i_227 {
   padding-inline-start: calc(var(--space-xs-zb16t3, 8px) + var(--space-m-udix3p, 16px) + var(--space-xs-zb16t3, 8px));
 }
 
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9) {
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_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_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1y1td_328) {
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child:focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxs-7597g1, 4px)) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxs-7597g1, 4px)));
+  inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_ga51i_131 {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_ga51i_131 {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxs-7597g1, 4px)) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_ga51i_131::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxs-7597g1, 4px)));
+  inset-block-start: calc(-1 * calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  inline-size: calc(100% + calc(-1 * var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  block-size: calc(100% + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-scaled-xxs-7597g1, 4px)));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
+}
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child > .awsui_header-cell-content_1spae_ga51i_221 {
+  padding-inline-start: 0px;
+}
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child > .awsui_header-cell-content_1spae_ga51i_221.awsui_header-cell-content-expandable_1spae_ga51i_227 {
+  padding-inline-start: calc(0px + var(--space-m-udix3p, 16px) + var(--space-xs-zb16t3, 8px));
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child > .awsui_header-cell-content_1spae_ga51i_221:focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child > .awsui_header-cell-content_1spae_ga51i_221:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px) + var(--space-scaled-xxs-7597g1, 4px)) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child > .awsui_header-cell-content_1spae_ga51i_221:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px) + var(--space-scaled-xxs-7597g1, 4px)));
+  inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px) + var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child > .awsui_header-cell-content_1spae_ga51i_221.awsui_header-cell-fake-focus_1spae_ga51i_131 {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child > .awsui_header-cell-content_1spae_ga51i_221.awsui_header-cell-fake-focus_1spae_ga51i_131 {
+  outline: 2px dotted transparent;
+  outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px) + var(--space-scaled-xxs-7597g1, 4px)) - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child > .awsui_header-cell-content_1spae_ga51i_221.awsui_header-cell-fake-focus_1spae_ga51i_131::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px) + var(--space-scaled-xxs-7597g1, 4px)));
+  inset-block-start: calc(-1 * calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  inline-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px) + var(--space-scaled-xxs-7597g1, 4px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  block-size: calc(100% + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)) + calc(-1 * var(--space-table-header-focus-outline-gutter-7js4en, 0px)));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
+}
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_ga51i_418) {
   padding-inline-start: var(--space-xxxs-zbmxqb, 2px);
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1y1td_328).awsui_header-cell-content-expandable_1spae_1y1td_227 {
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_ga51i_418).awsui_header-cell-content-expandable_1spae_ga51i_227 {
   padding-inline-start: calc(var(--space-xxxs-zbmxqb, 2px) + var(--space-m-udix3p, 16px) + var(--space-xs-zb16t3, 8px));
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1y1td_328).awsui_sticky-cell-pad-inline-start_1spae_1y1td_334 {
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_ga51i_418).awsui_sticky-cell-pad-inline-start_1spae_ga51i_424 {
   padding-inline-start: var(--space-table-horizontal-8davlm, 20px);
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1y1td_328).awsui_sticky-cell-pad-inline-start_1spae_1y1td_334.awsui_header-cell-content-expandable_1spae_1y1td_227 {
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_ga51i_418).awsui_sticky-cell-pad-inline-start_1spae_ga51i_424.awsui_header-cell-content-expandable_1spae_ga51i_227 {
   padding-inline-start: calc(var(--space-table-horizontal-8davlm, 20px) + var(--space-m-udix3p, 16px) + var(--space-xs-zb16t3, 8px));
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):first-child.awsui_has-striped-rows_1spae_1y1td_328 {
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child.awsui_has-striped-rows_1spae_ga51i_418 {
   padding-inline-start: var(--space-xxs-p8yyaw, 4px);
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):first-child.awsui_has-striped-rows_1spae_1y1td_328.awsui_header-cell-content-expandable_1spae_1y1td_227 {
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):first-child.awsui_has-striped-rows_1spae_ga51i_418.awsui_header-cell-content-expandable_1spae_ga51i_227 {
   padding-inline-start: calc(var(--space-xxs-p8yyaw, 4px) + var(--space-m-udix3p, 16px) + var(--space-xs-zb16t3, 8px));
 }
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):first-child > .awsui_header-cell-content_1spae_1y1td_221 {
-  padding-inline-start: 0px;
-}
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):first-child > .awsui_header-cell-content_1spae_1y1td_221.awsui_header-cell-content-expandable_1spae_1y1td_227 {
-  padding-inline-start: calc(0px + var(--space-m-udix3p, 16px) + var(--space-xs-zb16t3, 8px));
-}
-.awsui_header-cell_1spae_1y1td_97.awsui_is-visual-refresh_1spae_1y1td_314:not(#\9):last-child.awsui_header-cell-sortable_1spae_1y1td_161 {
+.awsui_header-cell_1spae_ga51i_97.awsui_is-visual-refresh_1spae_ga51i_314:not(#\9):last-child.awsui_header-cell-sortable_1spae_ga51i_161 {
   padding-inline-end: var(--space-xxxs-zbmxqb, 2px);
 }

package/table/header-cell/styles.selectors.js

@@ -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_1y1td_97",
-  "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1y1td_131",
-  "header-cell-sticky": "awsui_header-cell-sticky_1spae_1y1td_152",
-  "header-cell-stuck": "awsui_header-cell-stuck_1spae_1y1td_155",
-  "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1y1td_155",
-  "header-cell-hidden": "awsui_header-cell-hidden_1spae_1y1td_158",
-  "header-cell-sortable": "awsui_header-cell-sortable_1spae_1y1td_161",
-  "sticky-cell": "awsui_sticky-cell_1spae_1y1td_164",
-  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_1y1td_172",
-  "has-selection": "awsui_has-selection_1spae_1y1td_172",
-  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_1y1td_175",
-  "resize-divider": "awsui_resize-divider_1spae_1y1td_180",
-  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_1y1td_187",
-  "sorting-icon": "awsui_sorting-icon_1spae_1y1td_207",
-  "edit-icon": "awsui_edit-icon_1spae_1y1td_215",
-  "header-cell-content": "awsui_header-cell-content_1spae_1y1td_221",
-  "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_1y1td_227",
-  "header-cell-disabled": "awsui_header-cell-disabled_1spae_1y1td_279",
-  "header-cell-sorted": "awsui_header-cell-sorted_1spae_1y1td_279",
-  "header-cell-text": "awsui_header-cell-text_1spae_1y1td_293",
-  "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1y1td_297",
-  "header-cell-ascending": "awsui_header-cell-ascending_1spae_1y1td_303",
-  "header-cell-descending": "awsui_header-cell-descending_1spae_1y1td_304",
-  "is-visual-refresh": "awsui_is-visual-refresh_1spae_1y1td_314",
-  "has-striped-rows": "awsui_has-striped-rows_1spae_1y1td_328",
-  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_1y1td_334"
+  "header-cell": "awsui_header-cell_1spae_ga51i_97",
+  "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_ga51i_131",
+  "header-cell-sticky": "awsui_header-cell-sticky_1spae_ga51i_152",
+  "header-cell-stuck": "awsui_header-cell-stuck_1spae_ga51i_155",
+  "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_ga51i_155",
+  "header-cell-hidden": "awsui_header-cell-hidden_1spae_ga51i_158",
+  "header-cell-sortable": "awsui_header-cell-sortable_1spae_ga51i_161",
+  "sticky-cell": "awsui_sticky-cell_1spae_ga51i_164",
+  "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_ga51i_172",
+  "has-selection": "awsui_has-selection_1spae_ga51i_172",
+  "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_ga51i_175",
+  "resize-divider": "awsui_resize-divider_1spae_ga51i_180",
+  "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_ga51i_187",
+  "sorting-icon": "awsui_sorting-icon_1spae_ga51i_207",
+  "edit-icon": "awsui_edit-icon_1spae_ga51i_215",
+  "header-cell-content": "awsui_header-cell-content_1spae_ga51i_221",
+  "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_ga51i_227",
+  "header-cell-disabled": "awsui_header-cell-disabled_1spae_ga51i_279",
+  "header-cell-sorted": "awsui_header-cell-sorted_1spae_ga51i_279",
+  "header-cell-text": "awsui_header-cell-text_1spae_ga51i_293",
+  "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_ga51i_297",
+  "header-cell-ascending": "awsui_header-cell-ascending_1spae_ga51i_303",
+  "header-cell-descending": "awsui_header-cell-descending_1spae_ga51i_304",
+  "is-visual-refresh": "awsui_is-visual-refresh_1spae_ga51i_314",
+  "has-striped-rows": "awsui_has-striped-rows_1spae_ga51i_418",
+  "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_ga51i_424"
 };
   

package/table/internal.d.ts.map

@@ -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"}
+{"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/table/internal.js

@@ -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,