@cloudscape-design/components-themeable 3.0.1311 → 3.0.1312

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
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/visual-refresh/drawers.scss +16 -0
  3. package/lib/internal/scss/app-layout/visual-refresh/navigation.scss +1 -1
  4. package/lib/internal/scss/app-layout/visual-refresh/tools.scss +4 -0
  5. package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss +1 -1
  6. package/lib/internal/scss/app-layout/visual-refresh-toolbar/navigation/styles.scss +1 -1
  7. package/lib/internal/scss/button-dropdown/styles.scss +4 -0
  8. package/lib/internal/scss/expandable-section/styles.scss +17 -0
  9. package/lib/internal/scss/internal/components/button-trigger/styles.scss +7 -0
  10. package/lib/internal/scss/internal/components/drag-handle/styles.scss +5 -1
  11. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  12. package/lib/internal/scss/status-indicator/styles.scss +36 -0
  13. package/lib/internal/scss/table/header-cell/styles.scss +1 -1
  14. package/lib/internal/scss/tree-view/tree-item/styles.scss +10 -0
  15. package/lib/internal/template/app-layout/runtime-drawer/index.js +1 -1
  16. package/lib/internal/template/app-layout/runtime-drawer/index.js.map +1 -1
  17. package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map +1 -1
  18. package/lib/internal/template/app-layout/visual-refresh/drawers.js +3 -0
  19. package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
  20. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +87 -86
  21. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +176 -164
  22. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +87 -86
  23. package/lib/internal/template/app-layout/visual-refresh/tools.d.ts.map +1 -1
  24. package/lib/internal/template/app-layout/visual-refresh/tools.js +2 -0
  25. package/lib/internal/template/app-layout/visual-refresh/tools.js.map +1 -1
  26. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
  27. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +84 -84
  28. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
  29. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
  30. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +6 -6
  31. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
  32. package/lib/internal/template/breadcrumb-group/implementation.d.ts.map +1 -1
  33. package/lib/internal/template/breadcrumb-group/implementation.js +2 -2
  34. package/lib/internal/template/breadcrumb-group/implementation.js.map +1 -1
  35. package/lib/internal/template/breadcrumb-group/item/item.d.ts.map +1 -1
  36. package/lib/internal/template/breadcrumb-group/item/item.js +2 -1
  37. package/lib/internal/template/breadcrumb-group/item/item.js.map +1 -1
  38. package/lib/internal/template/button/internal.d.ts +3 -0
  39. package/lib/internal/template/button/internal.d.ts.map +1 -1
  40. package/lib/internal/template/button/internal.js +2 -2
  41. package/lib/internal/template/button/internal.js.map +1 -1
  42. package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
  43. package/lib/internal/template/button-dropdown/internal.js +4 -3
  44. package/lib/internal/template/button-dropdown/internal.js.map +1 -1
  45. package/lib/internal/template/button-dropdown/styles.css.js +22 -21
  46. package/lib/internal/template/button-dropdown/styles.scoped.css +33 -29
  47. package/lib/internal/template/button-dropdown/styles.selectors.js +22 -21
  48. package/lib/internal/template/button-group/icon-toggle-button-item.js +1 -1
  49. package/lib/internal/template/button-group/icon-toggle-button-item.js.map +1 -1
  50. package/lib/internal/template/dropdown/internal.d.ts.map +1 -1
  51. package/lib/internal/template/dropdown/internal.js +14 -2
  52. package/lib/internal/template/dropdown/internal.js.map +1 -1
  53. package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map +1 -1
  54. package/lib/internal/template/expandable-section/expandable-section-header.js +5 -5
  55. package/lib/internal/template/expandable-section/expandable-section-header.js.map +1 -1
  56. package/lib/internal/template/expandable-section/styles.css.js +36 -35
  57. package/lib/internal/template/expandable-section/styles.scoped.css +81 -66
  58. package/lib/internal/template/expandable-section/styles.selectors.js +36 -35
  59. package/lib/internal/template/icon/generated/icons.d.ts +1 -0
  60. package/lib/internal/template/icon/generated/icons.d.ts.map +1 -1
  61. package/lib/internal/template/icon/generated/icons.js +2 -0
  62. package/lib/internal/template/icon/generated/icons.js.map +1 -1
  63. package/lib/internal/template/icon-provider/interfaces.d.ts +1 -1
  64. package/lib/internal/template/icon-provider/interfaces.d.ts.map +1 -1
  65. package/lib/internal/template/icon-provider/interfaces.js.map +1 -1
  66. package/lib/internal/template/internal/base-component/styles.scoped.css +7 -1
  67. package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
  68. package/lib/internal/template/internal/components/button-trigger/index.js +3 -2
  69. package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
  70. package/lib/internal/template/internal/components/button-trigger/styles.css.js +15 -14
  71. package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +35 -29
  72. package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +15 -14
  73. package/lib/internal/template/internal/components/drag-handle/styles.css.js +14 -14
  74. package/lib/internal/template/internal/components/drag-handle/styles.scoped.css +20 -19
  75. package/lib/internal/template/internal/components/drag-handle/styles.selectors.js +14 -14
  76. package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
  77. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js +6 -3
  78. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map +1 -1
  79. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts +2 -1
  80. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts.map +1 -1
  81. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js +2 -2
  82. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js.map +1 -1
  83. package/lib/internal/template/internal/components/expand-toggle-button/index.js +2 -2
  84. package/lib/internal/template/internal/components/expand-toggle-button/index.js.map +1 -1
  85. package/lib/internal/template/internal/environment.js +2 -2
  86. package/lib/internal/template/internal/environment.json +2 -2
  87. package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
  88. package/lib/internal/template/internal/generated/styles/tokens.js +1 -0
  89. package/lib/internal/template/internal/generated/theming/index.cjs +33 -0
  90. package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +9 -0
  91. package/lib/internal/template/internal/generated/theming/index.d.ts +9 -0
  92. package/lib/internal/template/internal/generated/theming/index.js +33 -0
  93. package/lib/internal/template/internal/hooks/use-mouse-down-target.js +2 -2
  94. package/lib/internal/template/internal/hooks/use-mouse-down-target.js.map +1 -1
  95. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.d.ts.map +1 -1
  96. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.js +4 -2
  97. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.js.map +1 -1
  98. package/lib/internal/template/internal/hooks/use-visual-mode/index.d.ts +1 -0
  99. package/lib/internal/template/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
  100. package/lib/internal/template/internal/hooks/use-visual-mode/index.js +2 -1
  101. package/lib/internal/template/internal/hooks/use-visual-mode/index.js.map +1 -1
  102. package/lib/internal/template/status-indicator/internal.d.ts.map +1 -1
  103. package/lib/internal/template/status-indicator/internal.js +4 -3
  104. package/lib/internal/template/status-indicator/internal.js.map +1 -1
  105. package/lib/internal/template/status-indicator/styles.css.js +25 -24
  106. package/lib/internal/template/status-indicator/styles.scoped.css +75 -40
  107. package/lib/internal/template/status-indicator/styles.selectors.js +25 -24
  108. package/lib/internal/template/table/header-cell/group-header-cell.d.ts.map +1 -1
  109. package/lib/internal/template/table/header-cell/group-header-cell.js +3 -15
  110. package/lib/internal/template/table/header-cell/group-header-cell.js.map +1 -1
  111. package/lib/internal/template/table/header-cell/styles.css.js +33 -33
  112. package/lib/internal/template/table/header-cell/styles.scoped.css +73 -73
  113. package/lib/internal/template/table/header-cell/styles.selectors.js +33 -33
  114. package/lib/internal/template/table/header-cell/th-element.d.ts +6 -5
  115. package/lib/internal/template/table/header-cell/th-element.d.ts.map +1 -1
  116. package/lib/internal/template/table/header-cell/th-element.js +4 -3
  117. package/lib/internal/template/table/header-cell/th-element.js.map +1 -1
  118. package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts +2 -1
  119. package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
  120. package/lib/internal/template/table/sticky-columns/use-sticky-columns.js +31 -7
  121. package/lib/internal/template/table/sticky-columns/use-sticky-columns.js.map +1 -1
  122. package/lib/internal/template/table/thead.d.ts.map +1 -1
  123. package/lib/internal/template/table/thead.js +1 -1
  124. package/lib/internal/template/table/thead.js.map +1 -1
  125. package/lib/internal/template/test-utils/dom/table/index.js +1 -1
  126. package/lib/internal/template/test-utils/dom/table/index.js.map +1 -1
  127. package/lib/internal/template/test-utils/selectors/table/index.js +1 -1
  128. package/lib/internal/template/test-utils/selectors/table/index.js.map +1 -1
  129. package/lib/internal/template/theming/index.d.ts +2 -0
  130. package/lib/internal/template/theming/index.d.ts.map +1 -1
  131. package/lib/internal/template/theming/index.js +55 -0
  132. package/lib/internal/template/theming/index.js.map +1 -1
  133. package/lib/internal/template/tree-view/tree-item/index.d.ts.map +1 -1
  134. package/lib/internal/template/tree-view/tree-item/index.js +2 -1
  135. package/lib/internal/template/tree-view/tree-item/index.js.map +1 -1
  136. package/lib/internal/template/tree-view/tree-item/styles.css.js +10 -9
  137. package/lib/internal/template/tree-view/tree-item/styles.scoped.css +19 -12
  138. package/lib/internal/template/tree-view/tree-item/styles.selectors.js +10 -9
  139. package/package.json +1 -1
package/lib/internal/template/table/header-cell/styles.scoped.css CHANGED
@@ -146,7 +146,7 @@
146
146
  */
147
147
  /* Style used for links in slots/components that are text heavy, to help links stand out among
148
148
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
149
- .awsui_header-cell_1spae_1map5_149:not(#\9) {
149
+ .awsui_header-cell_1spae_1gdol_149:not(#\9) {
150
150
  position: relative;
151
151
  text-align: start;
152
152
  box-sizing: border-box;
@@ -159,14 +159,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
159
159
  padding-block: var(--space-scaled-xxs-jatbiv, 4px);
160
160
  padding-inline: var(--space-scaled-xs-sppte9, 8px);
161
161
  }
162
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149:not(#\9):focus {
162
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149:not(#\9):focus {
163
163
  position: relative;
164
164
  }
165
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149:not(#\9):focus {
165
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149:not(#\9):focus {
166
166
  outline: 2px dotted transparent;
167
167
  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-jatbiv, 4px)) - 1px);
168
168
  }
169
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149:not(#\9):focus::before {
169
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149:not(#\9):focus::before {
170
170
  content: " ";
171
171
  display: block;
172
172
  position: absolute;
@@ -180,14 +180,14 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149:not(#\9):
180
180
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
181
181
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
182
182
  }
183
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_header-cell-fake-focus_1spae_1map5_183:not(#\9) {
183
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_header-cell-fake-focus_1spae_1gdol_183:not(#\9) {
184
184
  position: relative;
185
185
  }
186
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_header-cell-fake-focus_1spae_1map5_183:not(#\9) {
186
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_header-cell-fake-focus_1spae_1gdol_183:not(#\9) {
187
187
  outline: 2px dotted transparent;
188
188
  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-jatbiv, 4px)) - 1px);
189
189
  }
190
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_header-cell-fake-focus_1spae_1map5_183:not(#\9)::before {
190
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_header-cell-fake-focus_1spae_1gdol_183:not(#\9)::before {
191
191
  content: " ";
192
192
  display: block;
193
193
  position: absolute;
@@ -201,29 +201,29 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_hea
201
201
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
202
202
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
203
203
  }
204
- .awsui_header-cell_1spae_1map5_149.awsui_header-cell-group_1spae_1map5_204:not(#\9), .awsui_header-cell_1spae_1map5_149.awsui_header-cell-grouped_1spae_1map5_204:not(#\9), .awsui_header-cell_1spae_1map5_149.awsui_header-cell-spans-rows_1spae_1map5_204:not(#\9) {
204
+ .awsui_header-cell_1spae_1gdol_149.awsui_header-cell-group_1spae_1gdol_204:not(#\9), .awsui_header-cell_1spae_1gdol_149.awsui_header-cell-grouped_1spae_1gdol_204:not(#\9), .awsui_header-cell_1spae_1gdol_149.awsui_header-cell-spans-rows_1spae_1gdol_204:not(#\9) {
205
205
  padding-block: var(--space-xxxs-3w1kr2, 2px);
206
206
  padding-inline: var(--space-scaled-xs-sppte9, 8px);
207
207
  }
208
- .awsui_header-cell-sticky_1spae_1map5_208:not(#\9) {
209
- border-block-end: var(--border-table-sticky-width-o9kqes, 0px) solid var(--color-border-divider-default-ipvpev, #eaeded);
208
+ .awsui_header-cell-sticky_1spae_1gdol_208:not(#\9) {
209
+ border-block-end: var(--border-table-sticky-width-o9kqes, 0px) solid var(--color-border-divider-interactive-default-cyw7tx, #687078);
210
210
  }
211
- .awsui_header-cell-stuck_1spae_1map5_211:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_1map5_211) {
211
+ .awsui_header-cell-stuck_1spae_1gdol_211:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_1gdol_211) {
212
212
  border-block-end-color: transparent;
213
213
  }
214
- .awsui_header-cell-variant-full-page_1spae_1map5_211:not(#\9) {
214
+ .awsui_header-cell-variant-full-page_1spae_1gdol_211:not(#\9) {
215
215
  background: var(--color-background-layout-main-05m5y6, #f2f3f3);
216
216
  }
217
- .awsui_header-cell-variant-full-page_1spae_1map5_211.awsui_header-cell-hidden_1spae_1map5_217:not(#\9) {
217
+ .awsui_header-cell-variant-full-page_1spae_1gdol_211.awsui_header-cell-hidden_1spae_1gdol_217:not(#\9) {
218
218
  border-block-end-color: transparent;
219
219
  }
220
- .awsui_header-cell-variant-embedded_1spae_1map5_220.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):not(:is(.awsui_header-cell-sticky_1spae_1map5_208, .awsui_sticky-cell_1spae_1map5_220)), .awsui_header-cell-variant-borderless_1spae_1map5_220.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):not(:is(.awsui_header-cell-sticky_1spae_1map5_208, .awsui_sticky-cell_1spae_1map5_220)) {
220
+ .awsui_header-cell-variant-embedded_1spae_1gdol_220.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):not(:is(.awsui_header-cell-sticky_1spae_1gdol_208, .awsui_sticky-cell_1spae_1gdol_220)), .awsui_header-cell-variant-borderless_1spae_1gdol_220.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):not(:is(.awsui_header-cell-sticky_1spae_1gdol_208, .awsui_sticky-cell_1spae_1gdol_220)) {
221
221
  background: none;
222
222
  }
223
- .awsui_header-cell_1spae_1map5_149:not(#\9):last-child, .awsui_header-cell_1spae_1map5_149[data-rightmost]:not(#\9), .awsui_header-cell_1spae_1map5_149.awsui_header-cell-sortable_1spae_1map5_223:not(#\9) {
223
+ .awsui_header-cell_1spae_1gdol_149:not(#\9):last-child, .awsui_header-cell_1spae_1gdol_149[data-rightmost]:not(#\9), .awsui_header-cell_1spae_1gdol_149.awsui_header-cell-sortable_1spae_1gdol_223:not(#\9) {
224
224
  padding-inline-end: var(--space-xs-kw7k3v, 8px);
225
225
  }
226
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell_1spae_1map5_220:not(#\9) {
226
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell_1spae_1gdol_220:not(#\9) {
227
227
  position: sticky;
228
228
  background: var(--color-background-table-header-5hauij, #fafafa);
229
229
  z-index: 798;
@@ -232,44 +232,44 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_hea
232
232
  transition-timing-function: var(--motion-easing-sticky-xd5evu, ease-out);
233
233
  }
234
234
  @media (prefers-reduced-motion: reduce) {
235
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell_1spae_1map5_220:not(#\9) {
235
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell_1spae_1gdol_220:not(#\9) {
236
236
  animation: none;
237
237
  transition: none;
238
238
  }
239
239
  }
240
- .awsui-motion-disabled .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell_1spae_1map5_220:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell_1spae_1map5_220:not(#\9) {
240
+ .awsui-motion-disabled .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell_1spae_1gdol_220:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell_1spae_1gdol_220:not(#\9) {
241
241
  animation: none;
242
242
  transition: none;
243
243
  }
244
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell_1spae_1map5_220.awsui_table-variant-full-page_1spae_1map5_244:not(#\9) {
244
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell_1spae_1gdol_220.awsui_table-variant-full-page_1spae_1gdol_244:not(#\9) {
245
245
  background: var(--color-background-layout-main-05m5y6, #f2f3f3);
246
246
  }
247
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell-pad-left_1spae_1map5_247:not(#\9):not(.awsui_has-selection_1spae_1map5_247) {
247
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell-pad-left_1spae_1gdol_247:not(#\9):not(.awsui_has-selection_1spae_1gdol_247) {
248
248
  padding-inline-start: var(--space-table-horizontal-xmv4qa, 0px);
249
249
  }
250
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell-last-inline-start_1spae_1map5_250:not(#\9) {
250
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell-last-inline-start_1spae_1gdol_250:not(#\9) {
251
251
  box-shadow: var(--shadow-sticky-column-first-vya346, 4px 0 8px 0 rgba(0, 28, 36, 0.1));
252
252
  clip-path: inset(0px -24px 0px 0px);
253
253
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
254
254
  }
255
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell-last-inline-start_1spae_1map5_250 > .awsui_resize-divider_1spae_1map5_255:not(#\9) {
255
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell-last-inline-start_1spae_1gdol_250 > .awsui_resize-divider_1spae_1gdol_255:not(#\9) {
256
256
  display: none;
257
257
  }
258
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell-last-inline-start_1spae_1map5_250:not(#\9):dir(rtl) {
258
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell-last-inline-start_1spae_1gdol_250:not(#\9):dir(rtl) {
259
259
  box-shadow: var(--shadow-sticky-column-last-02l85g, -4px 0 8px 0 rgba(0, 28, 36, 0.1));
260
260
  clip-path: inset(0 0 0 -24px);
261
261
  }
262
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell-last-inline-end_1spae_1map5_262:not(#\9) {
262
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell-last-inline-end_1spae_1gdol_262:not(#\9) {
263
263
  box-shadow: var(--shadow-sticky-column-last-02l85g, -4px 0 8px 0 rgba(0, 28, 36, 0.1));
264
264
  clip-path: inset(0 0 0 -24px);
265
265
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
266
266
  }
267
- .awsui_header-cell_1spae_1map5_149.awsui_sticky-cell-last-inline-end_1spae_1map5_262:not(#\9):dir(rtl) {
267
+ .awsui_header-cell_1spae_1gdol_149.awsui_sticky-cell-last-inline-end_1spae_1gdol_262:not(#\9):dir(rtl) {
268
268
  box-shadow: var(--shadow-sticky-column-first-vya346, 4px 0 8px 0 rgba(0, 28, 36, 0.1));
269
269
  clip-path: inset(0 -24px 0 0);
270
270
  }
271
271
 
272
- .awsui_sorting-icon_1spae_1map5_272:not(#\9) {
272
+ .awsui_sorting-icon_1spae_1gdol_272:not(#\9) {
273
273
  position: absolute;
274
274
  inset-block-start: 50%;
275
275
  transform: translateY(-50%);
@@ -277,39 +277,39 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_hea
277
277
  color: var(--color-text-column-sorting-icon-gys874, #687078);
278
278
  }
279
279
 
280
- .awsui_edit-icon_1spae_1map5_280:not(#\9) {
280
+ .awsui_edit-icon_1spae_1gdol_280:not(#\9) {
281
281
  margin-inline-start: var(--space-xxs-jnczic, 4px);
282
282
  margin-block-start: var(--space-scaled-xxs-jatbiv, 4px);
283
283
  color: inherit;
284
284
  }
285
285
 
286
- .awsui_header-cell-content_1spae_1map5_286:not(#\9) {
286
+ .awsui_header-cell-content_1spae_1gdol_286:not(#\9) {
287
287
  position: relative;
288
288
  padding-block: var(--space-scaled-xxs-jatbiv, 4px);
289
289
  padding-inline-end: var(--space-s-4a5hs8, 12px);
290
290
  padding-inline-start: var(--space-s-4a5hs8, 12px);
291
291
  }
292
- .awsui_header-cell-content_1spae_1map5_286.awsui_header-cell-content-expandable_1spae_1map5_292:not(#\9) {
292
+ .awsui_header-cell-content_1spae_1gdol_286.awsui_header-cell-content-expandable_1spae_1gdol_292:not(#\9) {
293
293
  padding-inline-start: calc(var(--space-s-4a5hs8, 12px) + var(--space-m-n2lypl, 16px) + var(--space-xs-kw7k3v, 8px));
294
294
  }
295
- .awsui_header-cell-group_1spae_1map5_204 > .awsui_header-cell-content_1spae_1map5_286:not(#\9), .awsui_header-cell-grouped_1spae_1map5_204 > .awsui_header-cell-content_1spae_1map5_286:not(#\9), .awsui_header-cell-spans-rows_1spae_1map5_204 > .awsui_header-cell-content_1spae_1map5_286:not(#\9) {
295
+ .awsui_header-cell-group_1spae_1gdol_204 > .awsui_header-cell-content_1spae_1gdol_286:not(#\9), .awsui_header-cell-grouped_1spae_1gdol_204 > .awsui_header-cell-content_1spae_1gdol_286:not(#\9), .awsui_header-cell-spans-rows_1spae_1gdol_204 > .awsui_header-cell-content_1spae_1gdol_286:not(#\9) {
296
296
  padding-block: var(--space-xxxs-3w1kr2, 2px);
297
297
  }
298
- .awsui_header-cell-sortable_1spae_1map5_223 > .awsui_header-cell-content_1spae_1map5_286:not(#\9) {
298
+ .awsui_header-cell-sortable_1spae_1gdol_223 > .awsui_header-cell-content_1spae_1gdol_286:not(#\9) {
299
299
  padding-inline-end: calc(var(--space-xl-4dmkh1, 24px) + var(--space-xxs-jnczic, 4px));
300
300
  }
301
- .awsui_header-cell-content_1spae_1map5_286:not(#\9):focus {
301
+ .awsui_header-cell-content_1spae_1gdol_286:not(#\9):focus {
302
302
  outline: none;
303
303
  text-decoration: none;
304
304
  }
305
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1map5_286:not(#\9):focus {
305
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1gdol_286:not(#\9):focus {
306
306
  position: relative;
307
307
  }
308
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1map5_286:not(#\9):focus {
308
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1gdol_286:not(#\9):focus {
309
309
  outline: 2px dotted transparent;
310
310
  outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-0zj6up, 0px)) - 1px);
311
311
  }
312
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1map5_286:not(#\9):focus::before {
312
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1gdol_286:not(#\9):focus::before {
313
313
  content: " ";
314
314
  display: block;
315
315
  position: absolute;
@@ -323,14 +323,14 @@ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1map5_286:n
323
323
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
324
324
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
325
325
  }
326
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1map5_286.awsui_header-cell-fake-focus_1spae_1map5_183:not(#\9) {
326
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1gdol_286.awsui_header-cell-fake-focus_1spae_1gdol_183:not(#\9) {
327
327
  position: relative;
328
328
  }
329
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1map5_286.awsui_header-cell-fake-focus_1spae_1map5_183:not(#\9) {
329
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1gdol_286.awsui_header-cell-fake-focus_1spae_1gdol_183:not(#\9) {
330
330
  outline: 2px dotted transparent;
331
331
  outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-0zj6up, 0px)) - 1px);
332
332
  }
333
- body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1map5_286.awsui_header-cell-fake-focus_1spae_1map5_183:not(#\9)::before {
333
+ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1gdol_286.awsui_header-cell-fake-focus_1spae_1gdol_183:not(#\9)::before {
334
334
  content: " ";
335
335
  display: block;
336
336
  position: absolute;
@@ -344,49 +344,49 @@ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1map5_286.a
344
344
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
345
345
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
346
346
  }
347
- .awsui_header-cell-disabled_1spae_1map5_347.awsui_header-cell-sorted_1spae_1map5_347 > .awsui_header-cell-content_1spae_1map5_286 > .awsui_sorting-icon_1spae_1map5_272:not(#\9) {
347
+ .awsui_header-cell-disabled_1spae_1gdol_347.awsui_header-cell-sorted_1spae_1gdol_347 > .awsui_header-cell-content_1spae_1gdol_286 > .awsui_sorting-icon_1spae_1gdol_272:not(#\9) {
348
348
  color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
349
349
  }
350
350
 
351
- .awsui_header-cell-spans-rows_1spae_1map5_204:not(#\9) {
351
+ .awsui_header-cell-spans-rows_1spae_1gdol_204:not(#\9) {
352
352
  block-size: 100%;
353
353
  vertical-align: bottom;
354
354
  }
355
- .awsui_header-cell-spans-rows_1spae_1map5_204 > .awsui_header-cell-content_1spae_1map5_286:not(#\9) {
355
+ .awsui_header-cell-spans-rows_1spae_1gdol_204 > .awsui_header-cell-content_1spae_1gdol_286:not(#\9) {
356
356
  block-size: 100%;
357
357
  box-sizing: border-box;
358
358
  display: flex;
359
359
  flex-direction: column;
360
360
  justify-content: flex-end;
361
361
  }
362
- .awsui_header-cell-spans-rows_1spae_1map5_204 > .awsui_header-cell-content_1spae_1map5_286 > .awsui_sorting-icon_1spae_1map5_272:not(#\9) {
362
+ .awsui_header-cell-spans-rows_1spae_1gdol_204 > .awsui_header-cell-content_1spae_1gdol_286 > .awsui_sorting-icon_1spae_1gdol_272:not(#\9) {
363
363
  inset-block-start: auto;
364
364
  inset-block-end: var(--space-scaled-xxs-jatbiv, 4px);
365
365
  transform: none;
366
366
  }
367
367
 
368
- .awsui_header-cell-sortable_1spae_1map5_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1map5_347) > .awsui_header-cell-content_1spae_1map5_286 {
368
+ .awsui_header-cell-sortable_1spae_1gdol_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1gdol_347) > .awsui_header-cell-content_1spae_1gdol_286 {
369
369
  cursor: pointer;
370
370
  }
371
- .awsui_header-cell-sortable_1spae_1map5_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1map5_347) > .awsui_header-cell-content_1spae_1map5_286:hover, .awsui_header-cell-sortable_1spae_1map5_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1map5_347).awsui_header-cell-sorted_1spae_1map5_347 > .awsui_header-cell-content_1spae_1map5_286 {
371
+ .awsui_header-cell-sortable_1spae_1gdol_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1gdol_347) > .awsui_header-cell-content_1spae_1gdol_286:hover, .awsui_header-cell-sortable_1spae_1gdol_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1gdol_347).awsui_header-cell-sorted_1spae_1gdol_347 > .awsui_header-cell-content_1spae_1gdol_286 {
372
372
  color: var(--color-text-interactive-active-c44vdq, #16191f);
373
373
  }
374
- .awsui_header-cell-sortable_1spae_1map5_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1map5_347) > .awsui_header-cell-content_1spae_1map5_286:hover > .awsui_sorting-icon_1spae_1map5_272, .awsui_header-cell-sortable_1spae_1map5_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1map5_347).awsui_header-cell-sorted_1spae_1map5_347 > .awsui_header-cell-content_1spae_1map5_286 > .awsui_sorting-icon_1spae_1map5_272 {
374
+ .awsui_header-cell-sortable_1spae_1gdol_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1gdol_347) > .awsui_header-cell-content_1spae_1gdol_286:hover > .awsui_sorting-icon_1spae_1gdol_272, .awsui_header-cell-sortable_1spae_1gdol_223:not(#\9):not(.awsui_header-cell-disabled_1spae_1gdol_347).awsui_header-cell-sorted_1spae_1gdol_347 > .awsui_header-cell-content_1spae_1gdol_286 > .awsui_sorting-icon_1spae_1gdol_272 {
375
375
  color: var(--color-text-interactive-active-c44vdq, #16191f);
376
376
  }
377
377
 
378
- .awsui_header-cell-text_1spae_1map5_378:not(#\9) {
378
+ .awsui_header-cell-text_1spae_1gdol_378:not(#\9) {
379
379
  line-height: var(--line-height-heading-xs-fuzanp, 20px);
380
380
  padding-block: calc(var(--space-xxxs-3w1kr2, 2px) / 2);
381
381
  }
382
- .awsui_header-cell-text_1spae_1map5_378:not(#\9):not(.awsui_header-cell-text-wrap_1spae_1map5_382) {
382
+ .awsui_header-cell-text_1spae_1gdol_378:not(#\9):not(.awsui_header-cell-text-wrap_1spae_1gdol_382) {
383
383
  white-space: nowrap;
384
384
  overflow: hidden;
385
385
  text-overflow: ellipsis;
386
386
  }
387
387
 
388
- .awsui_header-cell-ascending_1spae_1map5_388:not(#\9),
389
- .awsui_header-cell-descending_1spae_1map5_389:not(#\9) {
388
+ .awsui_header-cell-ascending_1spae_1gdol_388:not(#\9),
389
+ .awsui_header-cell-descending_1spae_1gdol_389:not(#\9) {
390
390
  /* used in test-utils */
391
391
  }
392
392
 
@@ -396,28 +396,28 @@ with the left edge of the table as closely as possible. If the
396
396
  last header cell is sortable the sort icon should align with the
397
397
  settings icon in the pagination slot.
398
398
  */
399
- .awsui_header-cell_1spae_1map5_149:not(#\9):not(.awsui_is-visual-refresh_1spae_1map5_220):first-child {
399
+ .awsui_header-cell_1spae_1gdol_149:not(#\9):not(.awsui_is-visual-refresh_1spae_1gdol_220):first-child {
400
400
  padding-inline-start: var(--space-xs-kw7k3v, 8px);
401
401
  }
402
- .awsui_header-cell_1spae_1map5_149:not(#\9):not(.awsui_is-visual-refresh_1spae_1map5_220):first-child.awsui_header-cell-content-expandable_1spae_1map5_292 {
402
+ .awsui_header-cell_1spae_1gdol_149:not(#\9):not(.awsui_is-visual-refresh_1spae_1gdol_220):first-child.awsui_header-cell-content-expandable_1spae_1gdol_292 {
403
403
  padding-inline-start: calc(var(--space-xs-kw7k3v, 8px) + var(--space-m-n2lypl, 16px) + var(--space-xs-kw7k3v, 8px));
404
404
  }
405
405
 
406
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9) {
406
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9) {
407
407
  /*
408
408
  Striped rows requires additional left padding because the
409
409
  shaded background makes the child content appear too close
410
410
  to the table edge.
411
411
  */
412
412
  }
413
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:focus {
413
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:focus {
414
414
  position: relative;
415
415
  }
416
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:focus {
416
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:focus {
417
417
  outline: 2px dotted transparent;
418
418
  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-jatbiv, 4px) + var(--space-scaled-xxs-jatbiv, 4px)) - 1px);
419
419
  }
420
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:focus::before {
420
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:focus::before {
421
421
  content: " ";
422
422
  display: block;
423
423
  position: absolute;
@@ -431,14 +431,14 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-
431
431
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
432
432
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
433
433
  }
434
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1map5_183 {
434
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1gdol_183 {
435
435
  position: relative;
436
436
  }
437
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1map5_183 {
437
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1gdol_183 {
438
438
  outline: 2px dotted transparent;
439
439
  outline-offset: calc(calc(-1 * var(--space-scaled-xxs-jatbiv, 4px) + var(--space-scaled-xxs-jatbiv, 4px)) - 1px);
440
440
  }
441
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1map5_183::before {
441
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child.awsui_header-cell-fake-focus_1spae_1gdol_183::before {
442
442
  content: " ";
443
443
  display: block;
444
444
  position: absolute;
@@ -452,20 +452,20 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-
452
452
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
453
453
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
454
454
  }
455
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1map5_204):not(.awsui_header-cell-group_1spae_1map5_204) > .awsui_header-cell-content_1spae_1map5_286 {
455
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1gdol_204):not(.awsui_header-cell-group_1spae_1gdol_204) > .awsui_header-cell-content_1spae_1gdol_286 {
456
456
  padding-inline-start: 0px;
457
457
  }
458
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1map5_204):not(.awsui_header-cell-group_1spae_1map5_204) > .awsui_header-cell-content_1spae_1map5_286.awsui_header-cell-content-expandable_1spae_1map5_292 {
458
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1gdol_204):not(.awsui_header-cell-group_1spae_1gdol_204) > .awsui_header-cell-content_1spae_1gdol_286.awsui_header-cell-content-expandable_1spae_1gdol_292 {
459
459
  padding-inline-start: calc(0px + var(--space-m-n2lypl, 16px) + var(--space-xs-kw7k3v, 8px));
460
460
  }
461
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1map5_204):not(.awsui_header-cell-group_1spae_1map5_204) > .awsui_header-cell-content_1spae_1map5_286:focus {
461
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1gdol_204):not(.awsui_header-cell-group_1spae_1gdol_204) > .awsui_header-cell-content_1spae_1gdol_286:focus {
462
462
  position: relative;
463
463
  }
464
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1map5_204):not(.awsui_header-cell-group_1spae_1map5_204) > .awsui_header-cell-content_1spae_1map5_286:focus {
464
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1gdol_204):not(.awsui_header-cell-group_1spae_1gdol_204) > .awsui_header-cell-content_1spae_1gdol_286:focus {
465
465
  outline: 2px dotted transparent;
466
466
  outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-0zj6up, 0px) + var(--space-scaled-xxs-jatbiv, 4px)) - 1px);
467
467
  }
468
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1map5_204):not(.awsui_header-cell-group_1spae_1map5_204) > .awsui_header-cell-content_1spae_1map5_286:focus::before {
468
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1gdol_204):not(.awsui_header-cell-group_1spae_1gdol_204) > .awsui_header-cell-content_1spae_1gdol_286:focus::before {
469
469
  content: " ";
470
470
  display: block;
471
471
  position: absolute;
@@ -479,14 +479,14 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-
479
479
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
480
480
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
481
481
  }
482
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1map5_204):not(.awsui_header-cell-group_1spae_1map5_204) > .awsui_header-cell-content_1spae_1map5_286.awsui_header-cell-fake-focus_1spae_1map5_183 {
482
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1gdol_204):not(.awsui_header-cell-group_1spae_1gdol_204) > .awsui_header-cell-content_1spae_1gdol_286.awsui_header-cell-fake-focus_1spae_1gdol_183 {
483
483
  position: relative;
484
484
  }
485
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1map5_204):not(.awsui_header-cell-group_1spae_1map5_204) > .awsui_header-cell-content_1spae_1map5_286.awsui_header-cell-fake-focus_1spae_1map5_183 {
485
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1gdol_204):not(.awsui_header-cell-group_1spae_1gdol_204) > .awsui_header-cell-content_1spae_1gdol_286.awsui_header-cell-fake-focus_1spae_1gdol_183 {
486
486
  outline: 2px dotted transparent;
487
487
  outline-offset: calc(calc(-1 * var(--space-table-header-focus-outline-gutter-0zj6up, 0px) + var(--space-scaled-xxs-jatbiv, 4px)) - 1px);
488
488
  }
489
- body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1map5_204):not(.awsui_header-cell-group_1spae_1map5_204) > .awsui_header-cell-content_1spae_1map5_286.awsui_header-cell-fake-focus_1spae_1map5_183::before {
489
+ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_header-cell-grouped_1spae_1gdol_204):not(.awsui_header-cell-group_1spae_1gdol_204) > .awsui_header-cell-content_1spae_1gdol_286.awsui_header-cell-fake-focus_1spae_1gdol_183::before {
490
490
  content: " ";
491
491
  display: block;
492
492
  position: absolute;
@@ -500,24 +500,24 @@ body[data-awsui-focus-visible=true] .awsui_header-cell_1spae_1map5_149.awsui_is-
500
500
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
501
501
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
502
502
  }
503
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1map5_503):not(.awsui_sticky-cell-pad-inline-start_1spae_1map5_503):not(.awsui_header-cell-group_1spae_1map5_204):not(.awsui_header-cell-grouped_1spae_1map5_204) {
503
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1gdol_503):not(.awsui_sticky-cell-pad-inline-start_1spae_1gdol_503):not(.awsui_header-cell-group_1spae_1gdol_204):not(.awsui_header-cell-grouped_1spae_1gdol_204) {
504
504
  padding-inline-start: var(--space-xxxs-3w1kr2, 2px);
505
505
  }
506
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1map5_503):not(.awsui_sticky-cell-pad-inline-start_1spae_1map5_503):not(.awsui_header-cell-group_1spae_1map5_204):not(.awsui_header-cell-grouped_1spae_1map5_204).awsui_header-cell-content-expandable_1spae_1map5_292 {
506
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1gdol_503):not(.awsui_sticky-cell-pad-inline-start_1spae_1gdol_503):not(.awsui_header-cell-group_1spae_1gdol_204):not(.awsui_header-cell-grouped_1spae_1gdol_204).awsui_header-cell-content-expandable_1spae_1gdol_292 {
507
507
  padding-inline-start: calc(var(--space-xxxs-3w1kr2, 2px) + var(--space-m-n2lypl, 16px) + var(--space-xs-kw7k3v, 8px));
508
508
  }
509
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child.awsui_has-striped-rows_1spae_1map5_503:not(.awsui_sticky-cell-pad-inline-start_1spae_1map5_503):not(.awsui_header-cell-group_1spae_1map5_204):not(.awsui_header-cell-grouped_1spae_1map5_204) {
509
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child.awsui_has-striped-rows_1spae_1gdol_503:not(.awsui_sticky-cell-pad-inline-start_1spae_1gdol_503):not(.awsui_header-cell-group_1spae_1gdol_204):not(.awsui_header-cell-grouped_1spae_1gdol_204) {
510
510
  padding-inline-start: var(--space-xxs-jnczic, 4px);
511
511
  }
512
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):first-child.awsui_has-striped-rows_1spae_1map5_503:not(.awsui_sticky-cell-pad-inline-start_1spae_1map5_503):not(.awsui_header-cell-group_1spae_1map5_204):not(.awsui_header-cell-grouped_1spae_1map5_204).awsui_header-cell-content-expandable_1spae_1map5_292 {
512
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):first-child.awsui_has-striped-rows_1spae_1gdol_503:not(.awsui_sticky-cell-pad-inline-start_1spae_1gdol_503):not(.awsui_header-cell-group_1spae_1gdol_204):not(.awsui_header-cell-grouped_1spae_1gdol_204).awsui_header-cell-content-expandable_1spae_1gdol_292 {
513
513
  padding-inline-start: calc(var(--space-xxs-jnczic, 4px) + var(--space-m-n2lypl, 16px) + var(--space-xs-kw7k3v, 8px));
514
514
  }
515
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220:not(#\9):last-child.awsui_header-cell-sortable_1spae_1map5_223:not(.awsui_header-cell-resizable_1spae_1map5_515), .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220[data-rightmost].awsui_header-cell-sortable_1spae_1map5_223:not(#\9):not(.awsui_header-cell-resizable_1spae_1map5_515) {
515
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220:not(#\9):last-child.awsui_header-cell-sortable_1spae_1gdol_223:not(.awsui_header-cell-resizable_1spae_1gdol_515), .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220[data-rightmost].awsui_header-cell-sortable_1spae_1gdol_223:not(#\9):not(.awsui_header-cell-resizable_1spae_1gdol_515) {
516
516
  padding-inline-end: var(--space-xxxs-3w1kr2, 2px);
517
517
  }
518
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220.awsui_sticky-cell-pad-inline-start_1spae_1map5_503:not(#\9) {
518
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220.awsui_sticky-cell-pad-inline-start_1spae_1gdol_503:not(#\9) {
519
519
  padding-inline-start: var(--space-scaled-l-66n9sr, 20px);
520
520
  }
521
- .awsui_header-cell_1spae_1map5_149.awsui_is-visual-refresh_1spae_1map5_220.awsui_sticky-cell-pad-inline-start_1spae_1map5_503.awsui_header-cell-content-expandable_1spae_1map5_292:not(#\9) {
521
+ .awsui_header-cell_1spae_1gdol_149.awsui_is-visual-refresh_1spae_1gdol_220.awsui_sticky-cell-pad-inline-start_1spae_1gdol_503.awsui_header-cell-content-expandable_1spae_1gdol_292:not(#\9) {
522
522
  padding-inline-start: calc(var(--space-scaled-l-66n9sr, 20px) + var(--space-m-n2lypl, 16px) + var(--space-xs-kw7k3v, 8px));
523
523
  }
package/lib/internal/template/table/header-cell/styles.selectors.js CHANGED
@@ -2,38 +2,38 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "header-cell": "awsui_header-cell_1spae_1map5_149",
6
- "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1map5_183",
7
- "header-cell-group": "awsui_header-cell-group_1spae_1map5_204",
8
- "header-cell-grouped": "awsui_header-cell-grouped_1spae_1map5_204",
9
- "header-cell-spans-rows": "awsui_header-cell-spans-rows_1spae_1map5_204",
10
- "header-cell-sticky": "awsui_header-cell-sticky_1spae_1map5_208",
11
- "header-cell-stuck": "awsui_header-cell-stuck_1spae_1map5_211",
12
- "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1map5_211",
13
- "header-cell-hidden": "awsui_header-cell-hidden_1spae_1map5_217",
14
- "header-cell-variant-embedded": "awsui_header-cell-variant-embedded_1spae_1map5_220",
15
- "is-visual-refresh": "awsui_is-visual-refresh_1spae_1map5_220",
16
- "sticky-cell": "awsui_sticky-cell_1spae_1map5_220",
17
- "header-cell-variant-borderless": "awsui_header-cell-variant-borderless_1spae_1map5_220",
18
- "header-cell-sortable": "awsui_header-cell-sortable_1spae_1map5_223",
19
- "table-variant-full-page": "awsui_table-variant-full-page_1spae_1map5_244",
20
- "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_1map5_247",
21
- "has-selection": "awsui_has-selection_1spae_1map5_247",
22
- "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_1map5_250",
23
- "resize-divider": "awsui_resize-divider_1spae_1map5_255",
24
- "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_1map5_262",
25
- "sorting-icon": "awsui_sorting-icon_1spae_1map5_272",
26
- "edit-icon": "awsui_edit-icon_1spae_1map5_280",
27
- "header-cell-content": "awsui_header-cell-content_1spae_1map5_286",
28
- "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_1map5_292",
29
- "header-cell-disabled": "awsui_header-cell-disabled_1spae_1map5_347",
30
- "header-cell-sorted": "awsui_header-cell-sorted_1spae_1map5_347",
31
- "header-cell-text": "awsui_header-cell-text_1spae_1map5_378",
32
- "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1map5_382",
33
- "header-cell-ascending": "awsui_header-cell-ascending_1spae_1map5_388",
34
- "header-cell-descending": "awsui_header-cell-descending_1spae_1map5_389",
35
- "has-striped-rows": "awsui_has-striped-rows_1spae_1map5_503",
36
- "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_1map5_503",
37
- "header-cell-resizable": "awsui_header-cell-resizable_1spae_1map5_515"
5
+ "header-cell": "awsui_header-cell_1spae_1gdol_149",
6
+ "header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1gdol_183",
7
+ "header-cell-group": "awsui_header-cell-group_1spae_1gdol_204",
8
+ "header-cell-grouped": "awsui_header-cell-grouped_1spae_1gdol_204",
9
+ "header-cell-spans-rows": "awsui_header-cell-spans-rows_1spae_1gdol_204",
10
+ "header-cell-sticky": "awsui_header-cell-sticky_1spae_1gdol_208",
11
+ "header-cell-stuck": "awsui_header-cell-stuck_1spae_1gdol_211",
12
+ "header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1gdol_211",
13
+ "header-cell-hidden": "awsui_header-cell-hidden_1spae_1gdol_217",
14
+ "header-cell-variant-embedded": "awsui_header-cell-variant-embedded_1spae_1gdol_220",
15
+ "is-visual-refresh": "awsui_is-visual-refresh_1spae_1gdol_220",
16
+ "sticky-cell": "awsui_sticky-cell_1spae_1gdol_220",
17
+ "header-cell-variant-borderless": "awsui_header-cell-variant-borderless_1spae_1gdol_220",
18
+ "header-cell-sortable": "awsui_header-cell-sortable_1spae_1gdol_223",
19
+ "table-variant-full-page": "awsui_table-variant-full-page_1spae_1gdol_244",
20
+ "sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_1gdol_247",
21
+ "has-selection": "awsui_has-selection_1spae_1gdol_247",
22
+ "sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_1spae_1gdol_250",
23
+ "resize-divider": "awsui_resize-divider_1spae_1gdol_255",
24
+ "sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_1spae_1gdol_262",
25
+ "sorting-icon": "awsui_sorting-icon_1spae_1gdol_272",
26
+ "edit-icon": "awsui_edit-icon_1spae_1gdol_280",
27
+ "header-cell-content": "awsui_header-cell-content_1spae_1gdol_286",
28
+ "header-cell-content-expandable": "awsui_header-cell-content-expandable_1spae_1gdol_292",
29
+ "header-cell-disabled": "awsui_header-cell-disabled_1spae_1gdol_347",
30
+ "header-cell-sorted": "awsui_header-cell-sorted_1spae_1gdol_347",
31
+ "header-cell-text": "awsui_header-cell-text_1spae_1gdol_378",
32
+ "header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1gdol_382",
33
+ "header-cell-ascending": "awsui_header-cell-ascending_1spae_1gdol_388",
34
+ "header-cell-descending": "awsui_header-cell-descending_1spae_1gdol_389",
35
+ "has-striped-rows": "awsui_has-striped-rows_1spae_1gdol_503",
36
+ "sticky-cell-pad-inline-start": "awsui_sticky-cell-pad-inline-start_1spae_1gdol_503",
37
+ "header-cell-resizable": "awsui_header-cell-resizable_1spae_1gdol_515"
38
38
  };
39
39
 
package/lib/internal/template/table/header-cell/th-element.d.ts CHANGED
@@ -29,10 +29,11 @@ export interface TableThElementProps {
29
29
  scope?: 'col' | 'colgroup';
30
30
  columnGroupId?: string;
31
31
  isLast?: boolean;
32
- /** Additional className to merge (e.g. boundary shadow classes from a secondary sticky subscription). */
33
- className?: string;
34
- /** Additional ref for boundary sticky subscription (imperatively updates shadow classes). */
35
- boundaryRef?: React.RefCallback<HTMLElement>;
32
+ /**
33
+ * For cells that span multiple columns (group headers): the column id of the boundary leaf
34
+ * whose sticky shadow this cell should inherit. The cell's position still comes from `columnId`.
35
+ */
36
+ stickyBoundaryColumnId?: PropertyKey;
36
37
  }
37
- export declare function TableThElement({ resizableStyle, sortingStatus, sortingDisabled, focusedComponent, stuck, sticky, resizable, hidden, stripedRows, isSelection, colIndex, columnId, stickyState, cellRef, tableRole, children, variant, ariaLabel, tableVariant, colSpan, rowSpan, scope, columnGroupId, isLast, className, boundaryRef, ...props }: TableThElementProps): JSX.Element;
38
+ export declare function TableThElement({ resizableStyle, sortingStatus, sortingDisabled, focusedComponent, stuck, sticky, resizable, hidden, stripedRows, isSelection, colIndex, columnId, stickyState, cellRef, tableRole, children, variant, ariaLabel, tableVariant, colSpan, rowSpan, scope, columnGroupId, isLast, stickyBoundaryColumnId, ...props }: TableThElementProps): JSX.Element;
38
39
  //# sourceMappingURL=th-element.d.ts.map
package/lib/internal/template/table/header-cell/th-element.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"th-element.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/th-element.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAuB,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAA8B,SAAS,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,WAAW,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAChD,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yGAAyG;IACzG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;CAC9C;AAED,wBAAgB,cAAc,CAAC,EAC7B,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,OAAO,EACP,OAAO,EACP,KAAK,EACL,aAAa,EACb,MAAM,EACN,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,mBAAmB,eAyDrB"}
1
+ {"version":3,"file":"th-element.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/th-element.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAuB,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAA8B,SAAS,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,WAAW,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAChD,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,WAAW,CAAC;CACtC;AAED,wBAAgB,cAAc,CAAC,EAC7B,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,OAAO,EACP,OAAO,EACP,KAAK,EACL,aAAa,EACb,MAAM,EACN,sBAAsB,EACtB,GAAG,KAAK,EACT,EAAE,mBAAmB,eAyDrB"}
package/lib/internal/template/table/header-cell/th-element.js CHANGED
@@ -11,15 +11,16 @@ import { getTableColHeaderRoleProps } from '../table-role';
11
11
  import { getStickyClassNames } from '../utils';
12
12
  import tableStyles from '../styles.css.js';
13
13
  import styles from './styles.css.js';
14
- export function TableThElement({ resizableStyle, sortingStatus, sortingDisabled, focusedComponent, stuck, sticky, resizable, hidden, stripedRows, isSelection, colIndex, columnId, stickyState, cellRef, tableRole, children, variant, ariaLabel, tableVariant, colSpan, rowSpan, scope, columnGroupId, isLast, className, boundaryRef, ...props }) {
14
+ export function TableThElement({ resizableStyle, sortingStatus, sortingDisabled, focusedComponent, stuck, sticky, resizable, hidden, stripedRows, isSelection, colIndex, columnId, stickyState, cellRef, tableRole, children, variant, ariaLabel, tableVariant, colSpan, rowSpan, scope, columnGroupId, isLast, stickyBoundaryColumnId, ...props }) {
15
15
  const isVisualRefresh = useVisualRefresh();
16
16
  const stickyStyles = useStickyCellStyles({
17
17
  stickyColumns: stickyState,
18
18
  columnId,
19
19
  getClassName: props => getStickyClassNames(styles, props),
20
+ boundaryColumnId: stickyBoundaryColumnId,
20
21
  });
21
22
  const cellRefObject = useRef(null);
22
- const mergedRef = useMergeRefs(stickyStyles.ref, cellRef, cellRefObject, boundaryRef);
23
+ const mergedRef = useMergeRefs(stickyStyles.ref, cellRef, cellRefObject);
23
24
  const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);
24
25
  return (React.createElement("th", { "data-focus-id": `header-${String(columnId)}`, className: clsx(styles['header-cell'], styles[`header-cell-variant-${variant}`], sticky && styles['header-cell-sticky'], resizable && styles['header-cell-resizable'], stuck && styles['header-cell-stuck'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], isSelection && clsx(tableStyles['selection-control'], tableStyles['selection-control-header']), tableVariant && styles[`table-variant-${tableVariant}`], scope === 'colgroup' && styles['header-cell-group'], {
25
26
  [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,
@@ -31,6 +32,6 @@ export function TableThElement({ resizableStyle, sortingStatus, sortingDisabled,
31
32
  [styles['header-cell-hidden']]: hidden,
32
33
  [styles['header-cell-spans-rows']]: (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) > 1,
33
34
  [styles['header-cell-grouped']]: !!columnGroupId,
34
- }, stickyStyles.className, className), colSpan: colSpan, rowSpan: rowSpan, style: { ...resizableStyle, ...stickyStyles.style }, ref: mergedRef, ...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex }), scope: scope !== null && scope !== void 0 ? scope : 'col', tabIndex: cellTabIndex === -1 ? undefined : cellTabIndex, ...copyAnalyticsMetadataAttribute(props), ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), ...(isLast ? { 'data-rightmost': true } : {}), ...(scope !== 'colgroup' ? { 'data-column-index': colIndex + 1 } : {}), ...(columnGroupId ? { 'data-column-group-id': columnGroupId } : {}) }, children));
35
+ }, stickyStyles.className), colSpan: colSpan, rowSpan: rowSpan, style: { ...resizableStyle, ...stickyStyles.style }, ref: mergedRef, ...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex }), scope: scope !== null && scope !== void 0 ? scope : 'col', tabIndex: cellTabIndex === -1 ? undefined : cellTabIndex, ...copyAnalyticsMetadataAttribute(props), ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), ...(isLast ? { 'data-rightmost': true } : {}), ...(scope !== 'colgroup' ? { 'data-column-index': colIndex + 1 } : {}), ...(columnGroupId ? { 'data-column-group-id': columnGroupId } : {}) }, children));
35
36
  }
36
37
  //# sourceMappingURL=th-element.js.map
package/lib/internal/template/table/header-cell/th-element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"th-element.js","sourceRoot":"","sources":["../../../../src/table/header-cell/th-element.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces';\nimport { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';\nimport { getTableColHeaderRoleProps, TableRole } from '../table-role';\nimport { getStickyClassNames } from '../utils';\nimport { SortingStatus } from './utils';\n\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableThElementProps {\n resizableStyle?: ColumnWidthStyle;\n sortingStatus?: SortingStatus;\n sortingDisabled?: boolean;\n focusedComponent?: null | string;\n stuck?: boolean;\n sticky?: boolean;\n resizable?: boolean;\n hidden?: boolean;\n stripedRows?: boolean;\n isSelection?: boolean;\n colIndex: number;\n columnId: PropertyKey;\n stickyState: StickyColumnsModel;\n cellRef?: React.RefCallback<HTMLElement> | null;\n tableRole: TableRole;\n children: React.ReactNode;\n variant: TableProps.Variant;\n tableVariant?: TableProps.Variant;\n ariaLabel?: string;\n colSpan?: number;\n rowSpan?: number;\n scope?: 'col' | 'colgroup';\n columnGroupId?: string;\n isLast?: boolean;\n /** Additional className to merge (e.g. boundary shadow classes from a secondary sticky subscription). */\n className?: string;\n /** Additional ref for boundary sticky subscription (imperatively updates shadow classes). */\n boundaryRef?: React.RefCallback<HTMLElement>;\n}\n\nexport function TableThElement({\n resizableStyle,\n sortingStatus,\n sortingDisabled,\n focusedComponent,\n stuck,\n sticky,\n resizable,\n hidden,\n stripedRows,\n isSelection,\n colIndex,\n columnId,\n stickyState,\n cellRef,\n tableRole,\n children,\n variant,\n ariaLabel,\n tableVariant,\n colSpan,\n rowSpan,\n scope,\n columnGroupId,\n isLast,\n className,\n boundaryRef,\n ...props\n}: TableThElementProps) {\n const isVisualRefresh = useVisualRefresh();\n\n const stickyStyles = useStickyCellStyles({\n stickyColumns: stickyState,\n columnId,\n getClassName: props => getStickyClassNames(styles, props),\n });\n\n const cellRefObject = useRef<HTMLTableCellElement>(null);\n const mergedRef = useMergeRefs(stickyStyles.ref, cellRef, cellRefObject, boundaryRef);\n const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);\n\n return (\n <th\n data-focus-id={`header-${String(columnId)}`}\n className={clsx(\n styles['header-cell'],\n styles[`header-cell-variant-${variant}`],\n sticky && styles['header-cell-sticky'],\n resizable && styles['header-cell-resizable'],\n stuck && styles['header-cell-stuck'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n isSelection && clsx(tableStyles['selection-control'], tableStyles['selection-control-header']),\n tableVariant && styles[`table-variant-${tableVariant}`],\n scope === 'colgroup' && styles['header-cell-group'],\n {\n [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,\n [styles['header-cell-sortable']]: sortingStatus,\n [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',\n [styles['header-cell-disabled']]: sortingDisabled,\n [styles['header-cell-ascending']]: sortingStatus === 'ascending',\n [styles['header-cell-descending']]: sortingStatus === 'descending',\n [styles['header-cell-hidden']]: hidden,\n [styles['header-cell-spans-rows']]: (rowSpan ?? 1) > 1,\n [styles['header-cell-grouped']]: !!columnGroupId,\n },\n stickyStyles.className,\n className\n )}\n colSpan={colSpan}\n rowSpan={rowSpan}\n style={{ ...resizableStyle, ...stickyStyles.style }}\n ref={mergedRef}\n {...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex })}\n scope={scope ?? 'col'}\n tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}\n {...copyAnalyticsMetadataAttribute(props)}\n {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}\n {...(isLast ? { 'data-rightmost': true } : {})}\n {...(scope !== 'colgroup' ? { 'data-column-index': colIndex + 1 } : {})}\n {...(columnGroupId ? { 'data-column-group-id': columnGroupId } : {})}\n >\n {children}\n </th>\n );\n}\n"]}
1
+ {"version":3,"file":"th-element.js","sourceRoot":"","sources":["../../../../src/table/header-cell/th-element.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { ColumnWidthStyle } from '../column-widths-utils';\nimport { TableProps } from '../interfaces';\nimport { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';\nimport { getTableColHeaderRoleProps, TableRole } from '../table-role';\nimport { getStickyClassNames } from '../utils';\nimport { SortingStatus } from './utils';\n\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TableThElementProps {\n resizableStyle?: ColumnWidthStyle;\n sortingStatus?: SortingStatus;\n sortingDisabled?: boolean;\n focusedComponent?: null | string;\n stuck?: boolean;\n sticky?: boolean;\n resizable?: boolean;\n hidden?: boolean;\n stripedRows?: boolean;\n isSelection?: boolean;\n colIndex: number;\n columnId: PropertyKey;\n stickyState: StickyColumnsModel;\n cellRef?: React.RefCallback<HTMLElement> | null;\n tableRole: TableRole;\n children: React.ReactNode;\n variant: TableProps.Variant;\n tableVariant?: TableProps.Variant;\n ariaLabel?: string;\n colSpan?: number;\n rowSpan?: number;\n scope?: 'col' | 'colgroup';\n columnGroupId?: string;\n isLast?: boolean;\n /**\n * For cells that span multiple columns (group headers): the column id of the boundary leaf\n * whose sticky shadow this cell should inherit. The cell's position still comes from `columnId`.\n */\n stickyBoundaryColumnId?: PropertyKey;\n}\n\nexport function TableThElement({\n resizableStyle,\n sortingStatus,\n sortingDisabled,\n focusedComponent,\n stuck,\n sticky,\n resizable,\n hidden,\n stripedRows,\n isSelection,\n colIndex,\n columnId,\n stickyState,\n cellRef,\n tableRole,\n children,\n variant,\n ariaLabel,\n tableVariant,\n colSpan,\n rowSpan,\n scope,\n columnGroupId,\n isLast,\n stickyBoundaryColumnId,\n ...props\n}: TableThElementProps) {\n const isVisualRefresh = useVisualRefresh();\n\n const stickyStyles = useStickyCellStyles({\n stickyColumns: stickyState,\n columnId,\n getClassName: props => getStickyClassNames(styles, props),\n boundaryColumnId: stickyBoundaryColumnId,\n });\n\n const cellRefObject = useRef<HTMLTableCellElement>(null);\n const mergedRef = useMergeRefs(stickyStyles.ref, cellRef, cellRefObject);\n const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);\n\n return (\n <th\n data-focus-id={`header-${String(columnId)}`}\n className={clsx(\n styles['header-cell'],\n styles[`header-cell-variant-${variant}`],\n sticky && styles['header-cell-sticky'],\n resizable && styles['header-cell-resizable'],\n stuck && styles['header-cell-stuck'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n isSelection && clsx(tableStyles['selection-control'], tableStyles['selection-control-header']),\n tableVariant && styles[`table-variant-${tableVariant}`],\n scope === 'colgroup' && styles['header-cell-group'],\n {\n [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,\n [styles['header-cell-sortable']]: sortingStatus,\n [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',\n [styles['header-cell-disabled']]: sortingDisabled,\n [styles['header-cell-ascending']]: sortingStatus === 'ascending',\n [styles['header-cell-descending']]: sortingStatus === 'descending',\n [styles['header-cell-hidden']]: hidden,\n [styles['header-cell-spans-rows']]: (rowSpan ?? 1) > 1,\n [styles['header-cell-grouped']]: !!columnGroupId,\n },\n stickyStyles.className\n )}\n colSpan={colSpan}\n rowSpan={rowSpan}\n style={{ ...resizableStyle, ...stickyStyles.style }}\n ref={mergedRef}\n {...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex })}\n scope={scope ?? 'col'}\n tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}\n {...copyAnalyticsMetadataAttribute(props)}\n {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}\n {...(isLast ? { 'data-rightmost': true } : {})}\n {...(scope !== 'colgroup' ? { 'data-column-index': colIndex + 1 } : {})}\n {...(columnGroupId ? { 'data-column-group-id': columnGroupId } : {})}\n >\n {children}\n </th>\n );\n}\n"]}
package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts CHANGED
@@ -17,12 +17,13 @@ interface UseStickyCellStylesProps {
17
17
  stickyColumns: StickyColumnsModel;
18
18
  columnId: PropertyKey;
19
19
  getClassName: (styles: null | StickyColumnsCellState) => Record<string, boolean>;
20
+ boundaryColumnId?: PropertyKey;
20
21
  }
21
22
  interface StickyCellStyles {
22
23
  ref: React.RefCallback<HTMLElement>;
23
24
  className?: string;
24
25
  style?: React.CSSProperties;
25
26
  }
26
- export declare function useStickyCellStyles({ stickyColumns, columnId, getClassName, }: UseStickyCellStylesProps): StickyCellStyles;
27
+ export declare function useStickyCellStyles({ stickyColumns, columnId, getClassName, boundaryColumnId, }: UseStickyCellStylesProps): StickyCellStyles;
27
28
  export {};
28
29
  //# sourceMappingURL=use-sticky-columns.d.ts.map