@cloudscape-design/components-themeable 3.0.1326 → 3.0.1327

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 (106) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/action-card/styles.scss +4 -2
  3. package/lib/internal/scss/box/styles.scss +1 -0
  4. package/lib/internal/scss/box/visual-accent.scss +117 -0
  5. package/lib/internal/scss/button-dropdown/styles.scss +6 -0
  6. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  7. package/lib/internal/template/action-card/interfaces.d.ts +40 -1
  8. package/lib/internal/template/action-card/interfaces.d.ts.map +1 -1
  9. package/lib/internal/template/action-card/interfaces.js.map +1 -1
  10. package/lib/internal/template/action-card/internal.d.ts.map +1 -1
  11. package/lib/internal/template/action-card/internal.js +32 -9
  12. package/lib/internal/template/action-card/internal.js.map +1 -1
  13. package/lib/internal/template/action-card/styles.css.js +17 -17
  14. package/lib/internal/template/action-card/styles.scoped.css +96 -92
  15. package/lib/internal/template/action-card/styles.selectors.js +17 -17
  16. package/lib/internal/template/box/interfaces.d.ts +59 -0
  17. package/lib/internal/template/box/interfaces.d.ts.map +1 -1
  18. package/lib/internal/template/box/interfaces.js.map +1 -1
  19. package/lib/internal/template/box/internal.d.ts +1 -1
  20. package/lib/internal/template/box/internal.d.ts.map +1 -1
  21. package/lib/internal/template/box/internal.js +4 -2
  22. package/lib/internal/template/box/internal.js.map +1 -1
  23. package/lib/internal/template/box/styles.css.js +224 -193
  24. package/lib/internal/template/box/styles.scoped.css +424 -238
  25. package/lib/internal/template/box/styles.selectors.js +224 -193
  26. package/lib/internal/template/button-dropdown/category-elements/category-element.d.ts +1 -1
  27. package/lib/internal/template/button-dropdown/category-elements/category-element.d.ts.map +1 -1
  28. package/lib/internal/template/button-dropdown/category-elements/category-element.js +3 -3
  29. package/lib/internal/template/button-dropdown/category-elements/category-element.js.map +1 -1
  30. package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts +1 -1
  31. package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts.map +1 -1
  32. package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js +22 -12
  33. package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
  34. package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts +1 -1
  35. package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map +1 -1
  36. package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js +12 -10
  37. package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
  38. package/lib/internal/template/button-dropdown/filter.d.ts +8 -0
  39. package/lib/internal/template/button-dropdown/filter.d.ts.map +1 -0
  40. package/lib/internal/template/button-dropdown/filter.js +18 -0
  41. package/lib/internal/template/button-dropdown/filter.js.map +1 -0
  42. package/lib/internal/template/button-dropdown/index.d.ts.map +1 -1
  43. package/lib/internal/template/button-dropdown/index.js +3 -3
  44. package/lib/internal/template/button-dropdown/index.js.map +1 -1
  45. package/lib/internal/template/button-dropdown/interfaces.d.ts +41 -0
  46. package/lib/internal/template/button-dropdown/interfaces.d.ts.map +1 -1
  47. package/lib/internal/template/button-dropdown/interfaces.js.map +1 -1
  48. package/lib/internal/template/button-dropdown/internal-interfaces.d.ts +12 -0
  49. package/lib/internal/template/button-dropdown/internal-interfaces.d.ts.map +1 -1
  50. package/lib/internal/template/button-dropdown/internal-interfaces.js.map +1 -1
  51. package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
  52. package/lib/internal/template/button-dropdown/internal.js +46 -7
  53. package/lib/internal/template/button-dropdown/internal.js.map +1 -1
  54. package/lib/internal/template/button-dropdown/item-element/index.d.ts +1 -1
  55. package/lib/internal/template/button-dropdown/item-element/index.d.ts.map +1 -1
  56. package/lib/internal/template/button-dropdown/item-element/index.js +35 -16
  57. package/lib/internal/template/button-dropdown/item-element/index.js.map +1 -1
  58. package/lib/internal/template/button-dropdown/items-list.d.ts +1 -1
  59. package/lib/internal/template/button-dropdown/items-list.d.ts.map +1 -1
  60. package/lib/internal/template/button-dropdown/items-list.js +4 -4
  61. package/lib/internal/template/button-dropdown/items-list.js.map +1 -1
  62. package/lib/internal/template/button-dropdown/styles.css.js +23 -22
  63. package/lib/internal/template/button-dropdown/styles.scoped.css +38 -32
  64. package/lib/internal/template/button-dropdown/styles.selectors.js +23 -22
  65. package/lib/internal/template/button-dropdown/tooltip.d.ts +2 -1
  66. package/lib/internal/template/button-dropdown/tooltip.d.ts.map +1 -1
  67. package/lib/internal/template/button-dropdown/tooltip.js +22 -14
  68. package/lib/internal/template/button-dropdown/tooltip.js.map +1 -1
  69. package/lib/internal/template/button-dropdown/utils/filter-items.d.ts +4 -0
  70. package/lib/internal/template/button-dropdown/utils/filter-items.d.ts.map +1 -0
  71. package/lib/internal/template/button-dropdown/utils/filter-items.js +55 -0
  72. package/lib/internal/template/button-dropdown/utils/filter-items.js.map +1 -0
  73. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.d.ts +7 -1
  74. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.d.ts.map +1 -1
  75. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.js +77 -13
  76. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.js.map +1 -1
  77. package/lib/internal/template/error-boundary/internal.d.ts.map +1 -1
  78. package/lib/internal/template/error-boundary/internal.js +1 -0
  79. package/lib/internal/template/error-boundary/internal.js.map +1 -1
  80. package/lib/internal/template/internal/base-component/index.js +3 -3
  81. package/lib/internal/template/internal/base-component/index.js.map +1 -1
  82. package/lib/internal/template/internal/base-component/styles.scoped.css +17 -1
  83. package/lib/internal/template/internal/environment.js +2 -2
  84. package/lib/internal/template/internal/environment.json +2 -2
  85. package/lib/internal/template/internal/generated/styles/tokens.d.ts +132 -0
  86. package/lib/internal/template/internal/generated/styles/tokens.js +132 -0
  87. package/lib/internal/template/internal/generated/theming/index.cjs +1884 -0
  88. package/lib/internal/template/internal/generated/theming/index.js +1884 -0
  89. package/lib/internal/template/item-card/internal.js +1 -1
  90. package/lib/internal/template/item-card/internal.js.map +1 -1
  91. package/lib/internal/template/multiselect/embedded.d.ts +2 -2
  92. package/lib/internal/template/multiselect/internal.d.ts +1 -1
  93. package/lib/internal/template/select/parts/filter.d.ts +1 -1
  94. package/lib/internal/template/table/index.d.ts.map +1 -1
  95. package/lib/internal/template/table/index.js +5 -3
  96. package/lib/internal/template/table/index.js.map +1 -1
  97. package/lib/internal/template/test-utils/dom/action-card/index.d.ts +4 -2
  98. package/lib/internal/template/test-utils/dom/action-card/index.js +5 -3
  99. package/lib/internal/template/test-utils/dom/action-card/index.js.map +1 -1
  100. package/lib/internal/template/test-utils/dom/button-dropdown/index.d.ts +16 -0
  101. package/lib/internal/template/test-utils/dom/button-dropdown/index.js +24 -0
  102. package/lib/internal/template/test-utils/dom/button-dropdown/index.js.map +1 -1
  103. package/lib/internal/template/test-utils/selectors/button-dropdown/index.d.ts +16 -0
  104. package/lib/internal/template/test-utils/selectors/button-dropdown/index.js +24 -0
  105. package/lib/internal/template/test-utils/selectors/button-dropdown/index.js.map +1 -1
  106. package/package.json +1 -1
package/lib/internal/template/action-card/styles.scoped.css CHANGED
@@ -158,55 +158,55 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
158
158
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
159
159
  SPDX-License-Identifier: Apache-2.0
160
160
  */
161
- .awsui_root_16248_1xlcm_161:not(#\9) {
161
+ .awsui_root_16248_11dsh_161:not(#\9) {
162
162
  transition-property: background-color;
163
163
  transition-duration: var(--motion-duration-transition-show-paced-0w35xp, 180ms);
164
164
  transition-timing-function: var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
165
165
  }
166
166
  @media (prefers-reduced-motion: reduce) {
167
- .awsui_root_16248_1xlcm_161:not(#\9) {
167
+ .awsui_root_16248_11dsh_161:not(#\9) {
168
168
  animation: none;
169
169
  transition: none;
170
170
  }
171
171
  }
172
- .awsui-motion-disabled .awsui_root_16248_1xlcm_161:not(#\9), .awsui-mode-entering .awsui_root_16248_1xlcm_161:not(#\9) {
172
+ .awsui-motion-disabled .awsui_root_16248_11dsh_161:not(#\9), .awsui-mode-entering .awsui_root_16248_11dsh_161:not(#\9) {
173
173
  animation: none;
174
174
  transition: none;
175
175
  }
176
176
 
177
- .awsui_root_16248_1xlcm_161:not(#\9)::after {
177
+ .awsui_root_16248_11dsh_161:not(#\9)::after {
178
178
  transition-property: border-top-color, border-right-color, border-bottom-color, border-left-color;
179
179
  transition-duration: var(--motion-duration-transition-show-paced-0w35xp, 180ms);
180
180
  transition-timing-function: var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
181
181
  }
182
182
  @media (prefers-reduced-motion: reduce) {
183
- .awsui_root_16248_1xlcm_161:not(#\9)::after {
183
+ .awsui_root_16248_11dsh_161:not(#\9)::after {
184
184
  animation: none;
185
185
  transition: none;
186
186
  }
187
187
  }
188
- .awsui-motion-disabled .awsui_root_16248_1xlcm_161:not(#\9)::after, .awsui-mode-entering .awsui_root_16248_1xlcm_161:not(#\9)::after {
188
+ .awsui-motion-disabled .awsui_root_16248_11dsh_161:not(#\9)::after, .awsui-mode-entering .awsui_root_16248_11dsh_161:not(#\9)::after {
189
189
  animation: none;
190
190
  transition: none;
191
191
  }
192
192
 
193
- .awsui_icon_16248_1xlcm_193:not(#\9) {
193
+ .awsui_icon_16248_11dsh_193:not(#\9) {
194
194
  transition-property: color;
195
195
  transition-duration: var(--motion-duration-transition-show-paced-0w35xp, 180ms);
196
196
  transition-timing-function: var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
197
197
  }
198
198
  @media (prefers-reduced-motion: reduce) {
199
- .awsui_icon_16248_1xlcm_193:not(#\9) {
199
+ .awsui_icon_16248_11dsh_193:not(#\9) {
200
200
  animation: none;
201
201
  transition: none;
202
202
  }
203
203
  }
204
- .awsui-motion-disabled .awsui_icon_16248_1xlcm_193:not(#\9), .awsui-mode-entering .awsui_icon_16248_1xlcm_193:not(#\9) {
204
+ .awsui-motion-disabled .awsui_icon_16248_11dsh_193:not(#\9), .awsui-mode-entering .awsui_icon_16248_11dsh_193:not(#\9) {
205
205
  animation: none;
206
206
  transition: none;
207
207
  }
208
208
 
209
- .awsui_header-inner_16248_1xlcm_209:not(#\9) {
209
+ .awsui_header-inner_16248_11dsh_209:not(#\9) {
210
210
  font-family: var(--font-family-heading-gnchto, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
211
211
  font-size: var(--font-size-heading-s-yde02v, 16px);
212
212
  line-height: var(--line-height-heading-s-j2axh8, 20px);
@@ -215,125 +215,125 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
215
215
  -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
216
216
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
217
217
  }
218
- .awsui_header-inner_16248_1xlcm_209.awsui_disabled_16248_1xlcm_218:not(#\9) {
218
+ .awsui_header-inner_16248_11dsh_209.awsui_disabled_16248_11dsh_218:not(#\9) {
219
219
  color: var(--color-text-action-card-disabled-3cdrhk, #879596);
220
220
  }
221
- .awsui-one-theme .awsui_header-inner_16248_1xlcm_209:not(#\9) {
221
+ .awsui-one-theme .awsui_header-inner_16248_11dsh_209:not(#\9) {
222
222
  color: var(--color-text-heading-default-wlau07, #16191f);
223
223
  }
224
- .awsui_header_16248_1xlcm_209:not(#\9):not(:has(+ .awsui_body_16248_1xlcm_224)) {
224
+ .awsui_header_16248_11dsh_209:not(#\9):not(:has(+ .awsui_body_16248_11dsh_224)) {
225
225
  flex: 1;
226
226
  }
227
227
 
228
- .awsui_header-row_16248_1xlcm_228:not(#\9) {
228
+ .awsui_header-row_16248_11dsh_228:not(#\9) {
229
229
  display: flex;
230
230
  align-items: flex-start;
231
231
  }
232
- .awsui_header-row_16248_1xlcm_228 > .awsui_header_16248_1xlcm_209:not(#\9) {
232
+ .awsui_header-row_16248_11dsh_228 > .awsui_header_16248_11dsh_209:not(#\9) {
233
233
  flex: 1;
234
234
  min-inline-size: 0;
235
235
  }
236
236
 
237
- .awsui_body_16248_1xlcm_224:not(#\9) {
237
+ .awsui_body_16248_11dsh_224:not(#\9) {
238
238
  flex: 1;
239
239
  }
240
240
 
241
- .awsui_description_16248_1xlcm_241:not(#\9) {
241
+ .awsui_description_16248_11dsh_241:not(#\9) {
242
242
  font-size: var(--font-size-body-s-psgqn2, 12px);
243
243
  line-height: var(--line-height-body-s-otgtsr, 16px);
244
244
  letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
245
245
  color: var(--color-text-body-secondary-gaft81, #545b64);
246
246
  }
247
- .awsui_description_16248_1xlcm_241.awsui_has-header_16248_1xlcm_247:not(#\9) {
247
+ .awsui_description_16248_11dsh_241.awsui_has-header_16248_11dsh_247:not(#\9) {
248
248
  padding-block-start: var(--space-action-card-description-padding-top-h441rh, 4px);
249
249
  }
250
- .awsui_description_16248_1xlcm_241.awsui_disabled_16248_1xlcm_218:not(#\9) {
250
+ .awsui_description_16248_11dsh_241.awsui_disabled_16248_11dsh_218:not(#\9) {
251
251
  color: var(--color-text-action-card-disabled-3cdrhk, #879596);
252
252
  }
253
253
 
254
- .awsui_icon_16248_1xlcm_193:not(#\9) {
254
+ .awsui_icon_16248_11dsh_193:not(#\9) {
255
255
  flex-shrink: 0;
256
256
  display: flex;
257
257
  color: var(--color-icon-action-card-default-g1tv20, #0073bb);
258
258
  pointer-events: none;
259
259
  }
260
260
 
261
- .awsui_header-button_16248_1xlcm_261:not(#\9),
262
- .awsui_overlay-button_16248_1xlcm_262:not(#\9) {
261
+ .awsui_header-button_16248_11dsh_261:not(#\9),
262
+ .awsui_overlay-button_16248_11dsh_262:not(#\9) {
263
263
  all: unset;
264
264
  cursor: pointer;
265
265
  }
266
- .awsui_header-button_16248_1xlcm_261.awsui_disabled_16248_1xlcm_218:not(#\9),
267
- .awsui_overlay-button_16248_1xlcm_262.awsui_disabled_16248_1xlcm_218:not(#\9) {
266
+ .awsui_header-button_16248_11dsh_261.awsui_disabled_16248_11dsh_218:not(#\9),
267
+ .awsui_overlay-button_16248_11dsh_262.awsui_disabled_16248_11dsh_218:not(#\9) {
268
268
  cursor: default;
269
269
  }
270
270
 
271
- .awsui_header-button_16248_1xlcm_261:not(#\9) {
271
+ .awsui_header-button_16248_11dsh_261:not(#\9) {
272
272
  color: inherit;
273
273
  font: inherit;
274
274
  }
275
- .awsui_header-button_16248_1xlcm_261:not(#\9)::after {
275
+ .awsui_header-button_16248_11dsh_261:not(#\9)::after {
276
276
  content: "";
277
277
  position: absolute;
278
278
  inset: 0;
279
279
  z-index: 1;
280
280
  }
281
- .awsui_header-button_16248_1xlcm_261.awsui_variant-embedded_16248_1xlcm_281:not(#\9)::after {
281
+ .awsui_header-button_16248_11dsh_261.awsui_variant-embedded_16248_11dsh_281:not(#\9)::after {
282
282
  border-start-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
283
283
  border-start-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
284
284
  border-end-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
285
285
  border-end-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
286
286
  }
287
- .awsui_header-button_16248_1xlcm_261.awsui_variant-embedded_16248_1xlcm_281.awsui_disabled_16248_1xlcm_218:not(#\9)::after {
287
+ .awsui_header-button_16248_11dsh_261.awsui_variant-embedded_16248_11dsh_281.awsui_disabled_16248_11dsh_218:not(#\9)::after {
288
288
  border-start-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
289
289
  border-start-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
290
290
  border-end-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
291
291
  border-end-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
292
292
  }
293
- .awsui_header-button_16248_1xlcm_261.awsui_variant-default_16248_1xlcm_293:not(#\9)::after {
293
+ .awsui_header-button_16248_11dsh_261.awsui_variant-default_16248_11dsh_293:not(#\9)::after {
294
294
  border-start-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
295
295
  border-start-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
296
296
  border-end-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
297
297
  border-end-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
298
298
  }
299
- .awsui_header-button_16248_1xlcm_261.awsui_variant-default_16248_1xlcm_293.awsui_disabled_16248_1xlcm_218:not(#\9)::after {
299
+ .awsui_header-button_16248_11dsh_261.awsui_variant-default_16248_11dsh_293.awsui_disabled_16248_11dsh_218:not(#\9)::after {
300
300
  border-start-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
301
301
  border-start-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
302
302
  border-end-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
303
303
  border-end-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
304
304
  }
305
305
 
306
- .awsui_overlay-button_16248_1xlcm_262:not(#\9) {
306
+ .awsui_overlay-button_16248_11dsh_262:not(#\9) {
307
307
  position: absolute;
308
308
  inset: 0;
309
309
  opacity: 0;
310
310
  }
311
- .awsui_overlay-button_16248_1xlcm_262.awsui_variant-embedded_16248_1xlcm_281:not(#\9) {
311
+ .awsui_overlay-button_16248_11dsh_262.awsui_variant-embedded_16248_11dsh_281:not(#\9) {
312
312
  border-start-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
313
313
  border-start-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
314
314
  border-end-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
315
315
  border-end-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
316
316
  }
317
- .awsui_overlay-button_16248_1xlcm_262.awsui_variant-embedded_16248_1xlcm_281.awsui_disabled_16248_1xlcm_218:not(#\9) {
317
+ .awsui_overlay-button_16248_11dsh_262.awsui_variant-embedded_16248_11dsh_281.awsui_disabled_16248_11dsh_218:not(#\9) {
318
318
  border-start-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
319
319
  border-start-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
320
320
  border-end-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
321
321
  border-end-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
322
322
  }
323
- .awsui_overlay-button_16248_1xlcm_262.awsui_variant-default_16248_1xlcm_293:not(#\9) {
323
+ .awsui_overlay-button_16248_11dsh_262.awsui_variant-default_16248_11dsh_293:not(#\9) {
324
324
  border-start-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
325
325
  border-start-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
326
326
  border-end-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
327
327
  border-end-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
328
328
  }
329
- .awsui_overlay-button_16248_1xlcm_262.awsui_variant-default_16248_1xlcm_293.awsui_disabled_16248_1xlcm_218:not(#\9) {
329
+ .awsui_overlay-button_16248_11dsh_262.awsui_variant-default_16248_11dsh_293.awsui_disabled_16248_11dsh_218:not(#\9) {
330
330
  border-start-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
331
331
  border-start-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
332
332
  border-end-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
333
333
  border-end-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
334
334
  }
335
335
 
336
- .awsui_root_16248_1xlcm_161:not(#\9) {
336
+ .awsui_root_16248_11dsh_161:not(#\9) {
337
337
  border-collapse: separate;
338
338
  border-spacing: 0;
339
339
  box-sizing: border-box;
@@ -377,7 +377,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
377
377
  border-block: none;
378
378
  border-inline: none;
379
379
  }
380
- .awsui_root_16248_1xlcm_161:not(#\9):after {
380
+ .awsui_root_16248_11dsh_161:not(#\9):after {
381
381
  content: "";
382
382
  position: absolute;
383
383
  inset-inline-start: 0px;
@@ -391,115 +391,119 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
391
391
  border-block: solid var(--border-width-action-card-default-hax7i5, 1px) var(--color-border-action-card-default-2dmq3y, #0073bb);
392
392
  border-inline: solid var(--border-width-action-card-default-hax7i5, 1px) var(--color-border-action-card-default-2dmq3y, #0073bb);
393
393
  }
394
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394:not(#\9), .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394:not(#\9) {
394
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394:not(#\9), .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394:not(#\9) {
395
395
  display: flex;
396
396
  flex-direction: column;
397
397
  block-size: 100%;
398
398
  inline-size: 100%;
399
399
  min-inline-size: 0;
400
400
  }
401
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header_16248_1xlcm_209 + .awsui_body_16248_1xlcm_224:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
402
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 + .awsui_body_16248_1xlcm_224:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
403
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header_16248_1xlcm_209 + .awsui_body_16248_1xlcm_224:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
404
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 + .awsui_body_16248_1xlcm_224:not(#\9):not(.awsui_no-padding_16248_1xlcm_401) {
401
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394 > .awsui_header_16248_11dsh_209 + .awsui_body_16248_11dsh_224:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
402
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 + .awsui_body_16248_11dsh_224:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
403
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394 > .awsui_header_16248_11dsh_209 + .awsui_body_16248_11dsh_224:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
404
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 + .awsui_body_16248_11dsh_224:not(#\9):not(.awsui_no-padding_16248_11dsh_401) {
405
405
  padding-block-start: var(--space-xxs-jnczic, 4px);
406
406
  }
407
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401):has(+ .awsui_body_16248_1xlcm_224), .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401):has(+ .awsui_body_16248_1xlcm_224) {
407
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401):has(+ .awsui_body_16248_11dsh_224), .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401):has(+ .awsui_body_16248_11dsh_224) {
408
408
  padding-block-end: var(--space-xxs-jnczic, 4px);
409
409
  }
410
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228:not(#\9):has(+ .awsui_body_16248_1xlcm_224) > .awsui_header_16248_1xlcm_209:not(.awsui_no-padding_16248_1xlcm_401), .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228:not(#\9):has(+ .awsui_body_16248_1xlcm_224) > .awsui_header_16248_1xlcm_209:not(.awsui_no-padding_16248_1xlcm_401) {
410
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228:not(#\9):has(+ .awsui_body_16248_11dsh_224) > .awsui_header_16248_11dsh_209:not(.awsui_no-padding_16248_11dsh_401), .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228:not(#\9):has(+ .awsui_body_16248_11dsh_224) > .awsui_header_16248_11dsh_209:not(.awsui_no-padding_16248_11dsh_401) {
411
411
  padding-block-end: var(--space-xxs-jnczic, 4px);
412
412
  }
413
- .awsui_root_16248_1xlcm_161.awsui_icon-vertical-align-center_16248_1xlcm_412 > .awsui_icon_16248_1xlcm_193:not(#\9) {
413
+ .awsui_root_16248_11dsh_161.awsui_icon-vertical-align-center_16248_11dsh_412 > .awsui_icon_16248_11dsh_193:not(#\9) {
414
414
  align-self: center;
415
415
  }
416
- .awsui_root_16248_1xlcm_161.awsui_disabled_16248_1xlcm_218:not(#\9) {
416
+ .awsui_root_16248_11dsh_161.awsui_disabled_16248_11dsh_218:not(#\9) {
417
417
  cursor: default;
418
418
  background-color: var(--color-background-action-card-disabled-f0sl41, #eaeded);
419
419
  box-shadow: none;
420
420
  color: var(--color-text-action-card-disabled-3cdrhk, #879596);
421
421
  }
422
- .awsui_root_16248_1xlcm_161.awsui_disabled_16248_1xlcm_218.awsui_variant-embedded_16248_1xlcm_281:not(#\9), .awsui_root_16248_1xlcm_161.awsui_disabled_16248_1xlcm_218.awsui_variant-embedded_16248_1xlcm_281:not(#\9):after {
422
+ .awsui_root_16248_11dsh_161.awsui_disabled_16248_11dsh_218.awsui_variant-embedded_16248_11dsh_281:not(#\9), .awsui_root_16248_11dsh_161.awsui_disabled_16248_11dsh_218.awsui_variant-embedded_16248_11dsh_281:not(#\9):after {
423
423
  border-start-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
424
424
  border-start-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
425
425
  border-end-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
426
426
  border-end-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
427
427
  }
428
- .awsui_root_16248_1xlcm_161.awsui_disabled_16248_1xlcm_218.awsui_variant-default_16248_1xlcm_293:not(#\9), .awsui_root_16248_1xlcm_161.awsui_disabled_16248_1xlcm_218.awsui_variant-default_16248_1xlcm_293:not(#\9):after {
428
+ .awsui_root_16248_11dsh_161.awsui_disabled_16248_11dsh_218.awsui_variant-default_16248_11dsh_293:not(#\9), .awsui_root_16248_11dsh_161.awsui_disabled_16248_11dsh_218.awsui_variant-default_16248_11dsh_293:not(#\9):after {
429
429
  border-start-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
430
430
  border-start-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
431
431
  border-end-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
432
432
  border-end-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
433
433
  }
434
- .awsui_root_16248_1xlcm_161.awsui_disabled_16248_1xlcm_218:not(#\9):after {
434
+ .awsui_root_16248_11dsh_161.awsui_disabled_16248_11dsh_218:not(#\9):after {
435
435
  border-color: var(--color-border-action-card-disabled-h2y1a9, #aab7b8);
436
436
  border-block-width: var(--border-width-action-card-disabled-8qg2x7, 1px);
437
437
  border-inline-width: var(--border-width-action-card-disabled-8qg2x7, 1px);
438
438
  }
439
- .awsui_root_16248_1xlcm_161.awsui_disabled_16248_1xlcm_218 > .awsui_icon_16248_1xlcm_193:not(#\9),
440
- .awsui_root_16248_1xlcm_161.awsui_disabled_16248_1xlcm_218 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_icon_16248_1xlcm_193:not(#\9) {
439
+ .awsui_root_16248_11dsh_161.awsui_disabled_16248_11dsh_218 > .awsui_icon_16248_11dsh_193:not(#\9),
440
+ .awsui_root_16248_11dsh_161.awsui_disabled_16248_11dsh_218 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193:not(#\9) {
441
441
  color: var(--color-icon-action-card-disabled-pby6he, #aab7b8);
442
442
  }
443
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:hover) {
443
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:hover), .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:hover) {
444
444
  background-color: var(--color-background-action-card-hover-8rdi4s, #f1faff);
445
445
  box-shadow: none;
446
446
  color: inherit;
447
447
  }
448
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:hover).awsui_variant-embedded_16248_1xlcm_281, .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:hover).awsui_variant-embedded_16248_1xlcm_281:after {
448
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:hover).awsui_variant-embedded_16248_11dsh_281, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:hover).awsui_variant-embedded_16248_11dsh_281:after, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:hover).awsui_variant-embedded_16248_11dsh_281, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:hover).awsui_variant-embedded_16248_11dsh_281:after {
449
449
  border-start-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
450
450
  border-start-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
451
451
  border-end-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
452
452
  border-end-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
453
453
  }
454
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:hover).awsui_variant-default_16248_1xlcm_293, .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:hover).awsui_variant-default_16248_1xlcm_293:after {
454
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:hover).awsui_variant-default_16248_11dsh_293, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:hover).awsui_variant-default_16248_11dsh_293:after, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:hover).awsui_variant-default_16248_11dsh_293, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:hover).awsui_variant-default_16248_11dsh_293:after {
455
455
  border-start-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
456
456
  border-start-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
457
457
  border-end-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
458
458
  border-end-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
459
459
  }
460
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:hover):after {
460
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:hover):after, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:hover):after {
461
461
  border-color: var(--color-border-action-card-hover-9lo4jj, #002b66);
462
462
  border-block-width: var(--border-width-action-card-hover-v5f1fk, 1px);
463
463
  border-inline-width: var(--border-width-action-card-hover-v5f1fk, 1px);
464
464
  }
465
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:hover) > .awsui_icon_16248_1xlcm_193,
466
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:hover) > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_icon_16248_1xlcm_193 {
465
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:hover) > .awsui_icon_16248_11dsh_193,
466
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:hover) > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193,
467
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:hover) > .awsui_icon_16248_11dsh_193,
468
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:hover) > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193 {
467
469
  color: var(--color-icon-action-card-hover-6f6epc, #002b66);
468
470
  }
469
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:active) {
471
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:active), .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:active) {
470
472
  background-color: var(--color-background-action-card-active-h39036, #d1f1ff);
471
473
  box-shadow: none;
472
474
  color: inherit;
473
475
  }
474
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:active).awsui_variant-embedded_16248_1xlcm_281, .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:active).awsui_variant-embedded_16248_1xlcm_281:after {
476
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:active).awsui_variant-embedded_16248_11dsh_281, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:active).awsui_variant-embedded_16248_11dsh_281:after, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:active).awsui_variant-embedded_16248_11dsh_281, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:active).awsui_variant-embedded_16248_11dsh_281:after {
475
477
  border-start-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
476
478
  border-start-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
477
479
  border-end-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
478
480
  border-end-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
479
481
  }
480
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:active).awsui_variant-default_16248_1xlcm_293, .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:active).awsui_variant-default_16248_1xlcm_293:after {
482
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:active).awsui_variant-default_16248_11dsh_293, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:active).awsui_variant-default_16248_11dsh_293:after, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:active).awsui_variant-default_16248_11dsh_293, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:active).awsui_variant-default_16248_11dsh_293:after {
481
483
  border-start-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
482
484
  border-start-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
483
485
  border-end-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
484
486
  border-end-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
485
487
  }
486
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:active):after {
488
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:active):after, .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:active):after {
487
489
  border-color: var(--color-border-action-card-active-9ka8fd, #002b66);
488
490
  border-block-width: var(--border-width-action-card-active-qw9sq5, 1px);
489
491
  border-inline-width: var(--border-width-action-card-active-qw9sq5, 1px);
490
492
  }
491
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:active) > .awsui_icon_16248_1xlcm_193,
492
- .awsui_root_16248_1xlcm_161:not(#\9):not(.awsui_disabled_16248_1xlcm_218):has(button:active) > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_icon_16248_1xlcm_193 {
493
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:active) > .awsui_icon_16248_11dsh_193,
494
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_header-button_16248_11dsh_261:active) > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193,
495
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:active) > .awsui_icon_16248_11dsh_193,
496
+ .awsui_root_16248_11dsh_161:not(#\9):not(.awsui_disabled_16248_11dsh_218):has(.awsui_overlay-button_16248_11dsh_262:active) > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193 {
493
497
  color: var(--color-icon-action-card-active-lvras4, #002b66);
494
498
  }
495
- .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_header-button_16248_1xlcm_261:focus-visible), .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_overlay-button_16248_1xlcm_262:focus-visible) {
499
+ .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_header-button_16248_11dsh_261:focus-visible), .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_overlay-button_16248_11dsh_262:focus-visible) {
496
500
  position: relative;
497
501
  }
498
- .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_header-button_16248_1xlcm_261:focus-visible), .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_overlay-button_16248_1xlcm_262:focus-visible) {
502
+ .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_header-button_16248_11dsh_261:focus-visible), .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_overlay-button_16248_11dsh_262:focus-visible) {
499
503
  outline: 2px dotted transparent;
500
504
  outline-offset: calc(2px - 1px);
501
505
  }
502
- .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_header-button_16248_1xlcm_261:focus-visible)::before, .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_overlay-button_16248_1xlcm_262:focus-visible)::before {
506
+ .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_header-button_16248_11dsh_261:focus-visible)::before, .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_overlay-button_16248_11dsh_262:focus-visible)::before {
503
507
  content: " ";
504
508
  display: block;
505
509
  position: absolute;
@@ -513,71 +517,71 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
513
517
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
514
518
  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
515
519
  }
516
- .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_header-button_16248_1xlcm_261:focus-visible).awsui_variant-embedded_16248_1xlcm_281::before, .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_overlay-button_16248_1xlcm_262:focus-visible).awsui_variant-embedded_16248_1xlcm_281::before {
520
+ .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_header-button_16248_11dsh_261:focus-visible).awsui_variant-embedded_16248_11dsh_281::before, .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_overlay-button_16248_11dsh_262:focus-visible).awsui_variant-embedded_16248_11dsh_281::before {
517
521
  border-start-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
518
522
  border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
519
523
  border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
520
524
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
521
525
  }
522
- .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_header-button_16248_1xlcm_261:focus-visible).awsui_variant-default_16248_1xlcm_293::before, .awsui_root_16248_1xlcm_161:not(#\9):has(.awsui_overlay-button_16248_1xlcm_262:focus-visible).awsui_variant-default_16248_1xlcm_293::before {
526
+ .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_header-button_16248_11dsh_261:focus-visible).awsui_variant-default_16248_11dsh_293::before, .awsui_root_16248_11dsh_161:not(#\9):has(.awsui_overlay-button_16248_11dsh_262:focus-visible).awsui_variant-default_16248_11dsh_293::before {
523
527
  border-start-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
524
528
  border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
525
529
  border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
526
530
  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
527
531
  }
528
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281:not(#\9), .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281:not(#\9):after {
532
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281:not(#\9), .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281:not(#\9):after {
529
533
  border-start-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
530
534
  border-start-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
531
535
  border-end-start-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
532
536
  border-end-end-radius: var(--border-radius-action-card-embedded-yc37lz, 2px);
533
537
  }
534
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
535
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394 > .awsui_body_16248_1xlcm_224:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
536
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401) {
538
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
539
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394 > .awsui_body_16248_11dsh_224:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
540
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401) {
537
541
  padding-block: var(--space-action-card-vertical-embedded-9czgs4, 10px);
538
542
  padding-inline: var(--space-action-card-horizontal-embedded-4io5oz, 12px);
539
543
  }
540
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_icon_16248_1xlcm_193:not(#\9),
541
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_icon_16248_1xlcm_193:not(#\9) {
544
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_icon_16248_11dsh_193:not(#\9),
545
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193:not(#\9) {
542
546
  padding-block-start: var(--space-action-card-vertical-embedded-9czgs4, 10px);
543
547
  }
544
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281 > .awsui_icon_16248_1xlcm_193:not(#\9) {
548
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281 > .awsui_icon_16248_11dsh_193:not(#\9) {
545
549
  padding-block-end: var(--space-action-card-vertical-embedded-9czgs4, 10px);
546
550
  }
547
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281.awsui_icon-align-end_16248_1xlcm_546 > .awsui_icon_16248_1xlcm_193:not(#\9),
548
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281.awsui_icon-align-end_16248_1xlcm_546 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_icon_16248_1xlcm_193:not(#\9) {
551
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281.awsui_icon-align-end_16248_11dsh_548 > .awsui_icon_16248_11dsh_193:not(#\9),
552
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281.awsui_icon-align-end_16248_11dsh_548 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193:not(#\9) {
549
553
  padding-inline-end: var(--space-action-card-horizontal-embedded-4io5oz, 12px);
550
554
  }
551
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281.awsui_icon-align-end_16248_1xlcm_546 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
552
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281.awsui_icon-align-end_16248_1xlcm_546 > .awsui_inner-card_16248_1xlcm_394 > .awsui_body_16248_1xlcm_224:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
553
- .awsui_root_16248_1xlcm_161.awsui_variant-embedded_16248_1xlcm_281.awsui_icon-align-end_16248_1xlcm_546 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401) {
555
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281.awsui_icon-align-end_16248_11dsh_548 > .awsui_inner-card_16248_11dsh_394 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
556
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281.awsui_icon-align-end_16248_11dsh_548 > .awsui_inner-card_16248_11dsh_394 > .awsui_body_16248_11dsh_224:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
557
+ .awsui_root_16248_11dsh_161.awsui_variant-embedded_16248_11dsh_281.awsui_icon-align-end_16248_11dsh_548 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401) {
554
558
  padding-inline-end: var(--space-xs-kw7k3v, 8px);
555
559
  }
556
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293:not(#\9), .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293:not(#\9):after {
560
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293:not(#\9), .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293:not(#\9):after {
557
561
  border-start-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
558
562
  border-start-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
559
563
  border-end-start-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
560
564
  border-end-end-radius: var(--border-radius-action-card-default-lfmdfw, 0px);
561
565
  }
562
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
563
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394 > .awsui_body_16248_1xlcm_224:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
564
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401) {
566
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
567
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394 > .awsui_body_16248_11dsh_224:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
568
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401) {
565
569
  padding-block: var(--space-action-card-vertical-default-ootu94, 20px);
566
570
  padding-inline: var(--space-action-card-horizontal-default-3e7yy4, 20px);
567
571
  }
568
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_icon_16248_1xlcm_193:not(#\9),
569
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_icon_16248_1xlcm_193:not(#\9) {
572
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_icon_16248_11dsh_193:not(#\9),
573
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193:not(#\9) {
570
574
  padding-block-start: var(--space-action-card-vertical-default-ootu94, 20px);
571
575
  }
572
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293 > .awsui_icon_16248_1xlcm_193:not(#\9) {
576
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293 > .awsui_icon_16248_11dsh_193:not(#\9) {
573
577
  padding-block-end: var(--space-action-card-vertical-default-ootu94, 20px);
574
578
  }
575
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293.awsui_icon-align-end_16248_1xlcm_546 > .awsui_icon_16248_1xlcm_193:not(#\9),
576
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293.awsui_icon-align-end_16248_1xlcm_546 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_icon_16248_1xlcm_193:not(#\9) {
579
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293.awsui_icon-align-end_16248_11dsh_548 > .awsui_icon_16248_11dsh_193:not(#\9),
580
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293.awsui_icon-align-end_16248_11dsh_548 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_icon_16248_11dsh_193:not(#\9) {
577
581
  padding-inline-end: var(--space-action-card-horizontal-default-3e7yy4, 20px);
578
582
  }
579
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293.awsui_icon-align-end_16248_1xlcm_546 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
580
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293.awsui_icon-align-end_16248_1xlcm_546 > .awsui_inner-card_16248_1xlcm_394 > .awsui_body_16248_1xlcm_224:not(#\9):not(.awsui_no-padding_16248_1xlcm_401),
581
- .awsui_root_16248_1xlcm_161.awsui_variant-default_16248_1xlcm_293.awsui_icon-align-end_16248_1xlcm_546 > .awsui_inner-card_16248_1xlcm_394 > .awsui_header-row_16248_1xlcm_228 > .awsui_header_16248_1xlcm_209:not(#\9):not(.awsui_no-padding_16248_1xlcm_401) {
583
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293.awsui_icon-align-end_16248_11dsh_548 > .awsui_inner-card_16248_11dsh_394 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
584
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293.awsui_icon-align-end_16248_11dsh_548 > .awsui_inner-card_16248_11dsh_394 > .awsui_body_16248_11dsh_224:not(#\9):not(.awsui_no-padding_16248_11dsh_401),
585
+ .awsui_root_16248_11dsh_161.awsui_variant-default_16248_11dsh_293.awsui_icon-align-end_16248_11dsh_548 > .awsui_inner-card_16248_11dsh_394 > .awsui_header-row_16248_11dsh_228 > .awsui_header_16248_11dsh_209:not(#\9):not(.awsui_no-padding_16248_11dsh_401) {
582
586
  padding-inline-end: var(--space-xs-kw7k3v, 8px);
583
587
  }
package/lib/internal/template/action-card/styles.selectors.js CHANGED
@@ -2,22 +2,22 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_16248_1xlcm_161",
6
- "icon": "awsui_icon_16248_1xlcm_193",
7
- "header-inner": "awsui_header-inner_16248_1xlcm_209",
8
- "disabled": "awsui_disabled_16248_1xlcm_218",
9
- "header": "awsui_header_16248_1xlcm_209",
10
- "body": "awsui_body_16248_1xlcm_224",
11
- "header-row": "awsui_header-row_16248_1xlcm_228",
12
- "description": "awsui_description_16248_1xlcm_241",
13
- "has-header": "awsui_has-header_16248_1xlcm_247",
14
- "header-button": "awsui_header-button_16248_1xlcm_261",
15
- "overlay-button": "awsui_overlay-button_16248_1xlcm_262",
16
- "variant-embedded": "awsui_variant-embedded_16248_1xlcm_281",
17
- "variant-default": "awsui_variant-default_16248_1xlcm_293",
18
- "inner-card": "awsui_inner-card_16248_1xlcm_394",
19
- "no-padding": "awsui_no-padding_16248_1xlcm_401",
20
- "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_1xlcm_412",
21
- "icon-align-end": "awsui_icon-align-end_16248_1xlcm_546"
5
+ "root": "awsui_root_16248_11dsh_161",
6
+ "icon": "awsui_icon_16248_11dsh_193",
7
+ "header-inner": "awsui_header-inner_16248_11dsh_209",
8
+ "disabled": "awsui_disabled_16248_11dsh_218",
9
+ "header": "awsui_header_16248_11dsh_209",
10
+ "body": "awsui_body_16248_11dsh_224",
11
+ "header-row": "awsui_header-row_16248_11dsh_228",
12
+ "description": "awsui_description_16248_11dsh_241",
13
+ "has-header": "awsui_has-header_16248_11dsh_247",
14
+ "header-button": "awsui_header-button_16248_11dsh_261",
15
+ "overlay-button": "awsui_overlay-button_16248_11dsh_262",
16
+ "variant-embedded": "awsui_variant-embedded_16248_11dsh_281",
17
+ "variant-default": "awsui_variant-default_16248_11dsh_293",
18
+ "inner-card": "awsui_inner-card_16248_11dsh_394",
19
+ "no-padding": "awsui_no-padding_16248_11dsh_401",
20
+ "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_11dsh_412",
21
+ "icon-align-end": "awsui_icon-align-end_16248_11dsh_548"
22
22
  };
23
23
 
package/lib/internal/template/box/interfaces.d.ts CHANGED
@@ -20,6 +20,29 @@ export interface BoxProps extends BaseComponentProps {
20
20
  * Override the HTML tag by using property `tagOverride`.
21
21
  */
22
22
  variant?: BoxProps.Variant;
23
+ /**
24
+ * Renders the box as a visual accent wrapper to emphasize its content.
25
+ *
26
+ * Setting this property activates the accent styling: a coordinated background and content
27
+ * color combination that works in both light and dark modes. A `variant` is not required to
28
+ * activate the accent. The accent styling is applied on top of the element determined by
29
+ * `variant` (or `tagOverride`), so the rendered HTML tag is unaffected.
30
+ *
31
+ * The object accepts the following fields:
32
+ * - `color` (required) — the coordinated background and foreground color pair. The foreground
33
+ * color is applied as the wrapper's CSS `color`, so it only affects content that inherits
34
+ * the current color (for example an `Icon`, or a nested `Box` with `color="inherit"`).
35
+ * Content that sets its own color is not overridden.
36
+ * - `aspectRatio` — `auto` (default) lets the wrapper's width follow its content;
37
+ * `equal` forces equal width and height, suitable for wrapping icons.
38
+ * - `borderRadius` — the corner rounding applied to the wrapper, using a t-shirt size keyword
39
+ * from the Box spacing scale (`xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`), or
40
+ * `full` for fully rounded corners. When not set, the wrapper has no border radius. Set it to
41
+ * `full` together with `aspectRatio: 'equal'` to render a circle.
42
+ *
43
+ * Composes with existing Box props such as `padding` and `margin`.
44
+ */
45
+ visualAccent?: BoxProps.VisualAccent;
23
46
  /**
24
47
  * Overrides the default HTML tag provided by the variant.
25
48
  */
@@ -133,6 +156,42 @@ export interface BoxProps extends BaseComponentProps {
133
156
  }
134
157
  export declare namespace BoxProps {
135
158
  type Variant = 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'small' | 'code' | 'pre' | 'samp' | 'awsui-key-label' | 'awsui-gen-ai-label' | 'awsui-value-large' | 'awsui-inline-code';
159
+ interface VisualAccent {
160
+ /**
161
+ * The coordinated background and foreground color pair applied to the accent wrapper.
162
+ * Each color works in both light and dark modes.
163
+ *
164
+ * The background color is applied directly to the wrapper. The foreground color is applied
165
+ * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the
166
+ * current color, such as an `Icon` or a nested `Box` with `color="inherit"`. Content that
167
+ * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that
168
+ * color and is not recolored by the accent.
169
+ */
170
+ color: BoxProps.VisualAccent.Color;
171
+ /**
172
+ * Controls the aspect ratio of the accent wrapper.
173
+ *
174
+ * - `auto` (default) — the wrapper's width follows its content.
175
+ * - `equal` — the wrapper has equal width and height, suitable for wrapping icons.
176
+ *
177
+ * Combine `aspectRatio: 'equal'` with `borderRadius: 'full'` to render a circle.
178
+ */
179
+ aspectRatio?: BoxProps.VisualAccent.AspectRatio;
180
+ /**
181
+ * The corner rounding applied to the accent wrapper. When not set, the wrapper has no
182
+ * border radius.
183
+ *
184
+ * Use one of the curated t-shirt size keywords, which map to the same spacing scale used by
185
+ * `padding` and `margin`: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, or `xxxl`. Use
186
+ * `full` for fully rounded corners; combine it with `aspectRatio: 'equal'` to render a circle.
187
+ */
188
+ borderRadius?: BoxProps.VisualAccent.BorderRadius;
189
+ }
190
+ namespace VisualAccent {
191
+ type Color = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey' | 'teal' | 'cyan' | 'blue' | 'violet' | 'fuchsia' | 'magenta' | 'pink' | 'rose' | 'amber';
192
+ type AspectRatio = 'auto' | 'equal';
193
+ type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';
194
+ }
136
195
  type Display = 'block' | 'inline' | 'inline-block' | 'none';
137
196
  type TextAlign = 'left' | 'center' | 'right';
138
197
  type Float = 'left' | 'right';