@cloudscape-design/components-themeable 3.0.1312 → 3.0.1314

package/lib/internal/template/status-indicator/styles.scoped.css

@@ -150,11 +150,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_icon-shake_1cbgc_13oha_153:not(#\9) {
+.awsui_icon-shake_1cbgc_1r1c9_153:not(#\9) {
   display: inline-block;
-  animation: awsui_awsui-motion-shake-horizontally_1cbgc_13oha_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
+  animation: awsui_awsui-motion-shake-horizontally_1cbgc_1r1c9_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_1cbgc_13oha_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_1cbgc_1r1c9_1 {
   0% {
     transform: translateX(-5px);
     animation-timing-function: linear;
@@ -168,20 +168,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon-shake_1cbgc_13oha_153:not(#\9) {
+  .awsui_icon-shake_1cbgc_1r1c9_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon-shake_1cbgc_13oha_153:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_13oha_153:not(#\9) {
+.awsui-motion-disabled .awsui_icon-shake_1cbgc_1r1c9_153:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_1r1c9_153:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_container-fade-in_1cbgc_13oha_181:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_1cbgc_13oha_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms) var(--motion-easing-refresh-only-a-8gio5w, cubic-bezier(0, 0, 0, 1));
+.awsui_container-fade-in_1cbgc_1r1c9_181:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_1cbgc_1r1c9_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms) var(--motion-easing-refresh-only-a-8gio5w, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in-0_1cbgc_13oha_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1cbgc_1r1c9_1 {
   from {
     opacity: 0;
   }
@@ -190,17 +190,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_container-fade-in_1cbgc_13oha_181:not(#\9) {
+  .awsui_container-fade-in_1cbgc_1r1c9_181:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_container-fade-in_1cbgc_13oha_181:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_13oha_181:not(#\9) {
+.awsui-motion-disabled .awsui_container-fade-in_1cbgc_1r1c9_181:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_1r1c9_181:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1cbgc_13oha_203:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   color: var(--color-text-body-default-5qid0u, #16191f);
@@ -209,138 +209,143 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-error_1cbgc_13oha_212:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-error_1cbgc_1r1c9_212:not(#\9) {
   color: var(--color-text-status-error-aknuvu, #d13212);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-warning_1cbgc_13oha_215:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-warning_1cbgc_1r1c9_215:not(#\9) {
   color: var(--color-text-status-warning-9b45qh, #906806);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-success_1cbgc_13oha_218:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-success_1cbgc_1r1c9_218:not(#\9) {
   color: var(--color-text-status-success-yodf3z, #1d8102);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-info_1cbgc_13oha_221:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-info_1cbgc_1r1c9_221:not(#\9) {
   color: var(--color-text-status-info-xt2ka7, #0073bb);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-stopped_1cbgc_13oha_224:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-stopped_1cbgc_1r1c9_224:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-pending_1cbgc_13oha_227:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-pending_1cbgc_1r1c9_227:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-in-progress_1cbgc_13oha_230:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-in-progress_1cbgc_1r1c9_230:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-loading_1cbgc_13oha_233:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-loading_1cbgc_1r1c9_233:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-not-started_1cbgc_13oha_236:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-not-started_1cbgc_1r1c9_236:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-red_1cbgc_13oha_239:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-red_1cbgc_1r1c9_239:not(#\9) {
   color: var(--color-text-status-error-aknuvu, #d13212);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-grey_1cbgc_13oha_242:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-grey_1cbgc_1r1c9_242:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-blue_1cbgc_13oha_245:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-blue_1cbgc_1r1c9_245:not(#\9) {
   color: var(--color-text-status-info-xt2ka7, #0073bb);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-green_1cbgc_13oha_248:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-green_1cbgc_1r1c9_248:not(#\9) {
   color: var(--color-text-status-success-yodf3z, #1d8102);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-yellow_1cbgc_13oha_251:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-yellow_1cbgc_1r1c9_251:not(#\9) {
   color: var(--color-text-status-warning-9b45qh, #906806);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-error_1cbgc_13oha_212 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-error_1cbgc_1r1c9_212 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-error-621sf8, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-warning_1cbgc_13oha_215 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-warning_1cbgc_1r1c9_215 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-warning-3kccdi, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-success_1cbgc_13oha_218 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-success_1cbgc_1r1c9_218 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-success-9mizpw, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-info_1cbgc_13oha_221 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-info_1cbgc_1r1c9_221 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-info-zw9ljm, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-stopped_1cbgc_13oha_224 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-stopped_1cbgc_1r1c9_224 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-pending_1cbgc_13oha_227 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-pending_1cbgc_1r1c9_227 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-in-progress_1cbgc_13oha_230 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-in-progress_1cbgc_1r1c9_230 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-loading_1cbgc_13oha_233 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-loading_1cbgc_1r1c9_233 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_status-not-started_1cbgc_13oha_236 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_status-not-started_1cbgc_1r1c9_236 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-red_1cbgc_13oha_239 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-red_1cbgc_1r1c9_239 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-error-621sf8, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-grey_1cbgc_13oha_242 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-grey_1cbgc_1r1c9_242 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-blue_1cbgc_13oha_245 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-blue_1cbgc_1r1c9_245 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-info-zw9ljm, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-green_1cbgc_13oha_248 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-green_1cbgc_1r1c9_248 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-success-9mizpw, transparent);
 }
-.awsui_root_1cbgc_13oha_203.awsui_color-override-yellow_1cbgc_13oha_251 > .awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_root_1cbgc_1r1c9_203.awsui_color-override-yellow_1cbgc_1r1c9_251 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
   background: var(--color-background-status-indicator-warning-3kccdi, transparent);
 }
 
-.awsui_container_1cbgc_13oha_181:not(#\9) {
+.awsui_container_1cbgc_1r1c9_181:not(#\9) {
   padding-inline: var(--space-status-indicator-padding-horizontal-hzqgcr, 0px);
   border-start-start-radius: var(--border-radius-status-indicator-42rwc5, 16px);
   border-start-end-radius: var(--border-radius-status-indicator-42rwc5, 16px);
   border-end-start-radius: var(--border-radius-status-indicator-42rwc5, 16px);
   border-end-end-radius: var(--border-radius-status-indicator-42rwc5, 16px);
 }
-.awsui_container_1cbgc_13oha_181.awsui_display-inline_1cbgc_13oha_304:not(#\9) {
+.awsui-one-theme .awsui_root_1cbgc_1r1c9_203.awsui_status-loading_1cbgc_1r1c9_233 > .awsui_container_1cbgc_1r1c9_181:not(#\9) {
+  background: transparent;
+  align-items: center;
+  color: var(--color-text-body-secondary-gaft81, #545b64);
+}
+.awsui_container_1cbgc_1r1c9_181.awsui_display-inline_1cbgc_1r1c9_309:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: inline;
 }
-.awsui_container_1cbgc_13oha_181.awsui_display-inline_1cbgc_13oha_304 > .awsui_icon_1cbgc_13oha_153:not(#\9) {
+.awsui_container_1cbgc_1r1c9_181.awsui_display-inline_1cbgc_1r1c9_309 > .awsui_icon_1cbgc_1r1c9_153:not(#\9) {
   white-space: nowrap;
 }
-.awsui_container_1cbgc_13oha_181.awsui_display-inline_1cbgc_13oha_304 > .awsui_icon_1cbgc_13oha_153.awsui_one-theme_1cbgc_13oha_312:not(#\9) {
+.awsui-one-theme .awsui_container_1cbgc_1r1c9_181.awsui_display-inline_1cbgc_1r1c9_309 > .awsui_icon_1cbgc_1r1c9_153:not(#\9) {
   vertical-align: middle;
 }
-.awsui_container_1cbgc_13oha_181.awsui_display-inline-block_1cbgc_13oha_315:not(#\9) {
+.awsui_container_1cbgc_1r1c9_181.awsui_display-inline-block_1cbgc_1r1c9_320:not(#\9) {
   display: inline-block;
   word-wrap: break-word;
   word-break: break-all;
 }
-.awsui_container_1cbgc_13oha_181.awsui_display-inline-block_1cbgc_13oha_315.awsui_one-theme_1cbgc_13oha_312:not(#\9) {
+.awsui-one-theme .awsui_container_1cbgc_1r1c9_181.awsui_display-inline-block_1cbgc_1r1c9_320:not(#\9) {
   display: inline-flex;
   align-items: flex-start;
 }
-.awsui_container_1cbgc_13oha_181.awsui_display-inline-block_1cbgc_13oha_315 > .awsui_icon_1cbgc_13oha_153:not(#\9) {
+.awsui_container_1cbgc_1r1c9_181.awsui_display-inline-block_1cbgc_1r1c9_320 > .awsui_icon_1cbgc_1r1c9_153:not(#\9) {
   padding-inline-end: var(--space-xxs-jnczic, 4px);
 }
-.awsui_container_1cbgc_13oha_181.awsui_display-inline-block_1cbgc_13oha_315 > .awsui_icon_1cbgc_13oha_153.awsui_one-theme_1cbgc_13oha_312:not(#\9) {
+.awsui-one-theme .awsui_container_1cbgc_1r1c9_181.awsui_display-inline-block_1cbgc_1r1c9_320 > .awsui_icon_1cbgc_1r1c9_153:not(#\9) {
   display: inline-flex;
   align-items: center;
   margin-block-start: var(--space-xxxs-3w1kr2, 2px);
 }
 
-.awsui_overflow-ellipsis_1cbgc_13oha_333:not(#\9) {
+.awsui_overflow-ellipsis_1cbgc_1r1c9_338:not(#\9) {
   max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: text-bottom;
 }
-.awsui_overflow-ellipsis_1cbgc_13oha_333.awsui_one-theme_1cbgc_13oha_312:not(#\9) {
+.awsui-one-theme .awsui_overflow-ellipsis_1cbgc_1r1c9_338:not(#\9) {
   text-overflow: unset;
 }
-.awsui_overflow-ellipsis_1cbgc_13oha_333.awsui_one-theme_1cbgc_13oha_312 > span:not(#\9):last-child {
+.awsui-one-theme .awsui_overflow-ellipsis_1cbgc_1r1c9_338 > span:not(#\9):last-child {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/lib/internal/template/status-indicator/styles.selectors.js

@@ -2,30 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "icon-shake": "awsui_icon-shake_1cbgc_13oha_153",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_13oha_1",
-  "container-fade-in": "awsui_container-fade-in_1cbgc_13oha_181",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_13oha_1",
-  "root": "awsui_root_1cbgc_13oha_203",
-  "status-error": "awsui_status-error_1cbgc_13oha_212",
-  "status-warning": "awsui_status-warning_1cbgc_13oha_215",
-  "status-success": "awsui_status-success_1cbgc_13oha_218",
-  "status-info": "awsui_status-info_1cbgc_13oha_221",
-  "status-stopped": "awsui_status-stopped_1cbgc_13oha_224",
-  "status-pending": "awsui_status-pending_1cbgc_13oha_227",
-  "status-in-progress": "awsui_status-in-progress_1cbgc_13oha_230",
-  "status-loading": "awsui_status-loading_1cbgc_13oha_233",
-  "status-not-started": "awsui_status-not-started_1cbgc_13oha_236",
-  "color-override-red": "awsui_color-override-red_1cbgc_13oha_239",
-  "color-override-grey": "awsui_color-override-grey_1cbgc_13oha_242",
-  "color-override-blue": "awsui_color-override-blue_1cbgc_13oha_245",
-  "color-override-green": "awsui_color-override-green_1cbgc_13oha_248",
-  "color-override-yellow": "awsui_color-override-yellow_1cbgc_13oha_251",
-  "container": "awsui_container_1cbgc_13oha_181",
-  "display-inline": "awsui_display-inline_1cbgc_13oha_304",
-  "icon": "awsui_icon_1cbgc_13oha_153",
-  "one-theme": "awsui_one-theme_1cbgc_13oha_312",
-  "display-inline-block": "awsui_display-inline-block_1cbgc_13oha_315",
-  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_13oha_333"
+  "icon-shake": "awsui_icon-shake_1cbgc_1r1c9_153",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_1r1c9_1",
+  "container-fade-in": "awsui_container-fade-in_1cbgc_1r1c9_181",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_1r1c9_1",
+  "root": "awsui_root_1cbgc_1r1c9_203",
+  "status-error": "awsui_status-error_1cbgc_1r1c9_212",
+  "status-warning": "awsui_status-warning_1cbgc_1r1c9_215",
+  "status-success": "awsui_status-success_1cbgc_1r1c9_218",
+  "status-info": "awsui_status-info_1cbgc_1r1c9_221",
+  "status-stopped": "awsui_status-stopped_1cbgc_1r1c9_224",
+  "status-pending": "awsui_status-pending_1cbgc_1r1c9_227",
+  "status-in-progress": "awsui_status-in-progress_1cbgc_1r1c9_230",
+  "status-loading": "awsui_status-loading_1cbgc_1r1c9_233",
+  "status-not-started": "awsui_status-not-started_1cbgc_1r1c9_236",
+  "color-override-red": "awsui_color-override-red_1cbgc_1r1c9_239",
+  "color-override-grey": "awsui_color-override-grey_1cbgc_1r1c9_242",
+  "color-override-blue": "awsui_color-override-blue_1cbgc_1r1c9_245",
+  "color-override-green": "awsui_color-override-green_1cbgc_1r1c9_248",
+  "color-override-yellow": "awsui_color-override-yellow_1cbgc_1r1c9_251",
+  "container": "awsui_container_1cbgc_1r1c9_181",
+  "display-inline": "awsui_display-inline_1cbgc_1r1c9_309",
+  "icon": "awsui_icon_1cbgc_1r1c9_153",
+  "display-inline-block": "awsui_display-inline-block_1cbgc_1r1c9_320",
+  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_1r1c9_338"
 };
   

package/lib/internal/template/steps/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,0BAA0B,CAAC;AA4EzF,QAAA,MAAM,aAAa,GAAI,6GASpB,kBAAkB,gBA8BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,0BAA0B,CAAC;AA6FzF,QAAA,MAAM,aAAa,GAAI,6GASpB,kBAAkB,gBA8BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/internal/template/steps/internal.js

@@ -19,12 +19,26 @@ const statusToColor = {
 const CustomStep = ({ step, orientation, renderStep, }) => {
     const { status, statusIconAriaLabel } = step;
     const { header, details, icon } = renderStep(step);
-    return (React.createElement("li", { className: styles.container },
-        React.createElement("div", { className: styles.header },
-            icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel }),
-            orientation === 'vertical' ? header : React.createElement("hr", { className: styles.connector, role: "none" })),
-        orientation === 'vertical' ? (React.createElement("hr", { className: styles.connector, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] }, header)),
-        details && React.createElement("div", { className: styles.details }, details)));
+    const iconNode = icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel });
+    if (orientation === 'horizontal') {
+        return (React.createElement("li", { className: styles.container },
+            React.createElement("div", { className: styles.header },
+                iconNode,
+                React.createElement("hr", { className: styles.connector, role: "none" })),
+            React.createElement("div", { className: styles['horizontal-header'] }, header),
+            details && React.createElement("div", { className: styles.details }, details)));
+    }
+    // Vertical orientation: render the icon and the connector together in a column-1 "rail" so the
+    // connector starts directly beneath the icon and stretches the full height of the step. Unlike
+    // placing the header in the same row as the icon, this keeps the vertical line continuous even
+    // when the custom header wraps onto multiple lines.
+    return (React.createElement("li", { className: clsx(styles.container, styles['custom-vertical']) },
+        React.createElement("div", { className: styles.rail },
+            iconNode,
+            React.createElement("hr", { className: styles.connector, role: "none" })),
+        React.createElement("div", { className: styles.content },
+            React.createElement("div", { className: styles.header }, header),
+            details && React.createElement("div", { className: styles.details }, details))));
 };
 const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, }) => {
     return (React.createElement("li", { className: styles.container },

package/lib/internal/template/steps/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.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 from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n  error: 'text-status-error',\n  warning: 'text-status-warning',\n  success: 'text-status-success',\n  info: 'text-status-info',\n  stopped: 'text-status-inactive',\n  pending: 'text-status-inactive',\n  'in-progress': 'text-status-inactive',\n  loading: 'text-status-inactive',\n  'not-started': 'text-status-inactive',\n};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n}) => {\n  const { status, statusIconAriaLabel } = step;\n  const { header, details, icon } = renderStep(step);\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        {icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />}\n        {orientation === 'vertical' ? header : <hr className={styles.connector} role=\"none\" />}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={styles.connector} role=\"none\" />\n      ) : (\n        <div className={styles['horizontal-header']}>{header}</div>\n      )}\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  orientation,\n}: StepsProps.Step & { orientation: StepsProps.Orientation }) => {\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        {orientation === 'vertical' ? (\n          <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n            {header}\n          </InternalStatusIndicator>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={styles.connector} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={styles.connector} role=\"none\" />\n      ) : (\n        <div className={styles['horizontal-header']}>\n          <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n        </div>\n      )}\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation = 'vertical',\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  return (\n    <div\n      {...props}\n      className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n      ref={__internalRootRef}\n    >\n      <ol\n        className={styles.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep key={index} orientation={orientation} step={step} renderStep={renderStep} />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              orientation={orientation}\n            />\n          )\n        )}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.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 from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n  error: 'text-status-error',\n  warning: 'text-status-warning',\n  success: 'text-status-success',\n  info: 'text-status-info',\n  stopped: 'text-status-inactive',\n  pending: 'text-status-inactive',\n  'in-progress': 'text-status-inactive',\n  loading: 'text-status-inactive',\n  'not-started': 'text-status-inactive',\n};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n}) => {\n  const { status, statusIconAriaLabel } = step;\n  const { header, details, icon } = renderStep(step);\n  const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n\n  if (orientation === 'horizontal') {\n    return (\n      <li className={styles.container}>\n        <div className={styles.header}>\n          {iconNode}\n          <hr className={styles.connector} role=\"none\" />\n        </div>\n        <div className={styles['horizontal-header']}>{header}</div>\n        {details && <div className={styles.details}>{details}</div>}\n      </li>\n    );\n  }\n\n  // Vertical orientation: render the icon and the connector together in a column-1 \"rail\" so the\n  // connector starts directly beneath the icon and stretches the full height of the step. Unlike\n  // placing the header in the same row as the icon, this keeps the vertical line continuous even\n  // when the custom header wraps onto multiple lines.\n  return (\n    <li className={clsx(styles.container, styles['custom-vertical'])}>\n      <div className={styles.rail}>\n        {iconNode}\n        <hr className={styles.connector} role=\"none\" />\n      </div>\n      <div className={styles.content}>\n        <div className={styles.header}>{header}</div>\n        {details && <div className={styles.details}>{details}</div>}\n      </div>\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  orientation,\n}: StepsProps.Step & { orientation: StepsProps.Orientation }) => {\n  return (\n    <li className={styles.container}>\n      <div className={styles.header}>\n        {orientation === 'vertical' ? (\n          <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n            {header}\n          </InternalStatusIndicator>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={styles.connector} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={styles.connector} role=\"none\" />\n      ) : (\n        <div className={styles['horizontal-header']}>\n          <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n        </div>\n      )}\n      {details && <div className={styles.details}>{details}</div>}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation = 'vertical',\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  return (\n    <div\n      {...props}\n      className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n      ref={__internalRootRef}\n    >\n      <ol\n        className={styles.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep key={index} orientation={orientation} step={step} renderStep={renderStep} />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              orientation={orientation}\n            />\n          )\n        )}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}

package/lib/internal/template/steps/styles.css.js

@@ -1,14 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_gxp9y_13ibf_181",
-  "list": "awsui_list_gxp9y_13ibf_214",
-  "container": "awsui_container_gxp9y_13ibf_219",
-  "header": "awsui_header_gxp9y_13ibf_224",
-  "details": "awsui_details_gxp9y_13ibf_230",
-  "connector": "awsui_connector_gxp9y_13ibf_236",
-  "custom": "awsui_custom_gxp9y_13ibf_252",
-  "horizontal": "awsui_horizontal_gxp9y_13ibf_256",
-  "horizontal-header": "awsui_horizontal-header_gxp9y_13ibf_288"
+  "root": "awsui_root_gxp9y_12uqv_181",
+  "list": "awsui_list_gxp9y_12uqv_214",
+  "container": "awsui_container_gxp9y_12uqv_219",
+  "header": "awsui_header_gxp9y_12uqv_224",
+  "details": "awsui_details_gxp9y_12uqv_230",
+  "connector": "awsui_connector_gxp9y_12uqv_236",
+  "custom": "awsui_custom_gxp9y_12uqv_252",
+  "horizontal": "awsui_horizontal_gxp9y_12uqv_256",
+  "horizontal-header": "awsui_horizontal-header_gxp9y_12uqv_288",
+  "custom-vertical": "awsui_custom-vertical_gxp9y_12uqv_302",
+  "rail": "awsui_rail_gxp9y_12uqv_302",
+  "content": "awsui_content_gxp9y_12uqv_321"
 };
   

package/lib/internal/template/steps/styles.scoped.css

@@ -178,7 +178,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_gxp9y_13ibf_181:not(#\9) {
+.awsui_root_gxp9y_12uqv_181:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -211,29 +211,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-inline-size: 0;
   word-break: break-word;
 }
-.awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214:not(#\9) {
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
   margin-block: 0;
 }
-.awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219:not(#\9) {
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219:not(#\9) {
   display: grid;
   grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
   grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
 }
-.awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_header_gxp9y_13ibf_224:not(#\9) {
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_header_gxp9y_12uqv_224:not(#\9) {
   display: flex;
   gap: var(--space-xxs-jnczic, 4px);
   grid-row: 1;
   grid-column: 1/span 2;
 }
-.awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_details_gxp9y_13ibf_230:not(#\9) {
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_details_gxp9y_12uqv_230:not(#\9) {
   align-items: center;
   grid-row: 2;
   grid-column: 2;
   margin-block-end: var(--space-static-xs-4gq40t, 8px);
 }
-.awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_connector_gxp9y_13ibf_236:not(#\9) {
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_connector_gxp9y_12uqv_236:not(#\9) {
   grid-row: 2;
   grid-column: 1;
   background-color: var(--color-border-divider-default-ipvpev, #eaeded);
@@ -246,32 +246,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
   inset-inline-end: var(--space-static-xxxs-zckw10, 2px);
 }
-.awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > :not(#\9):last-of-type > .awsui_connector_gxp9y_13ibf_236 {
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > :not(#\9):last-of-type > .awsui_connector_gxp9y_12uqv_236 {
   display: none;
 }
-.awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214.awsui_custom_gxp9y_13ibf_252 > .awsui_details_gxp9y_13ibf_230:not(#\9) {
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214.awsui_custom_gxp9y_12uqv_252 > .awsui_details_gxp9y_12uqv_230:not(#\9) {
   margin-block-end: 0;
 }
 
-.awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214:not(#\9) {
+.awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214:not(#\9) {
   display: grid;
   align-items: flex-start;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   grid-auto-flow: column;
 }
-.awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219:not(#\9) {
+.awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219:not(#\9) {
   display: grid;
   grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
   grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
   align-items: center;
 }
-.awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_header_gxp9y_13ibf_224:not(#\9) {
+.awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_header_gxp9y_12uqv_224:not(#\9) {
   display: flex;
   grid-row: 1;
   grid-column: 1/span 2;
   align-items: center;
 }
-.awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_header_gxp9y_13ibf_224 > .awsui_connector_gxp9y_13ibf_236:not(#\9) {
+.awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_header_gxp9y_12uqv_224 > .awsui_connector_gxp9y_12uqv_236:not(#\9) {
   display: block;
   flex: 1;
   background-color: var(--color-border-divider-default-ipvpev, #eaeded);
@@ -285,16 +285,44 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   min-inline-size: var(--space-static-xs-4gq40t, 8px);
   margin-inline-end: var(--space-static-xxs-0cgyf1, 4px);
 }
-.awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_horizontal-header_gxp9y_13ibf_288:not(#\9) {
+.awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_horizontal-header_gxp9y_12uqv_288:not(#\9) {
   grid-row: 2;
   grid-column: 1/span 3;
   padding-inline-end: var(--space-xs-kw7k3v, 8px);
 }
-.awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_details_gxp9y_13ibf_230:not(#\9) {
+.awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_details_gxp9y_12uqv_230:not(#\9) {
   grid-row: 3;
   grid-column: 1/span 3;
   padding-inline-end: var(--space-xs-kw7k3v, 8px);
 }
-.awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219:not(#\9):last-child > .awsui_header_gxp9y_13ibf_224 > .awsui_connector_gxp9y_13ibf_236 {
+.awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219:not(#\9):last-child > .awsui_header_gxp9y_12uqv_224 > .awsui_connector_gxp9y_12uqv_236 {
+  display: none;
+}
+
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219.awsui_custom-vertical_gxp9y_12uqv_302 > .awsui_rail_gxp9y_12uqv_302:not(#\9) {
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219.awsui_custom-vertical_gxp9y_12uqv_302 > .awsui_rail_gxp9y_12uqv_302 > .awsui_connector_gxp9y_12uqv_236:not(#\9) {
+  grid-row: auto;
+  grid-column: auto;
+  flex: 1 1 auto;
+  background-color: var(--color-border-divider-default-ipvpev, #eaeded);
+  border-block: 0;
+  border-inline: 0;
+  inline-size: var(--border-divider-list-width-8ggz94, 1px);
+  block-size: auto;
+  min-block-size: var(--space-static-xs-4gq40t, 8px);
+  inset-inline-end: 0;
+  margin-block: var(--space-static-xxs-0cgyf1, 4px) 0;
+}
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219.awsui_custom-vertical_gxp9y_12uqv_302 > .awsui_content_gxp9y_12uqv_321:not(#\9) {
+  grid-column: 2;
+  min-inline-size: 0;
+}
+
+.awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219.awsui_custom-vertical_gxp9y_12uqv_302:not(#\9):last-of-type > .awsui_rail_gxp9y_12uqv_302 > .awsui_connector_gxp9y_12uqv_236 {
   display: none;
 }

package/lib/internal/template/steps/styles.selectors.js

@@ -2,14 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_gxp9y_13ibf_181",
-  "list": "awsui_list_gxp9y_13ibf_214",
-  "container": "awsui_container_gxp9y_13ibf_219",
-  "header": "awsui_header_gxp9y_13ibf_224",
-  "details": "awsui_details_gxp9y_13ibf_230",
-  "connector": "awsui_connector_gxp9y_13ibf_236",
-  "custom": "awsui_custom_gxp9y_13ibf_252",
-  "horizontal": "awsui_horizontal_gxp9y_13ibf_256",
-  "horizontal-header": "awsui_horizontal-header_gxp9y_13ibf_288"
+  "root": "awsui_root_gxp9y_12uqv_181",
+  "list": "awsui_list_gxp9y_12uqv_214",
+  "container": "awsui_container_gxp9y_12uqv_219",
+  "header": "awsui_header_gxp9y_12uqv_224",
+  "details": "awsui_details_gxp9y_12uqv_230",
+  "connector": "awsui_connector_gxp9y_12uqv_236",
+  "custom": "awsui_custom_gxp9y_12uqv_252",
+  "horizontal": "awsui_horizontal_gxp9y_12uqv_256",
+  "horizontal-header": "awsui_horizontal-header_gxp9y_12uqv_288",
+  "custom-vertical": "awsui_custom-vertical_gxp9y_12uqv_302",
+  "rail": "awsui_rail_gxp9y_12uqv_302",
+  "content": "awsui_content_gxp9y_12uqv_321"
 };
   

package/lib/internal/template/table/header-cell/group-header-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"group-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/group-header-cell.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrD,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;IACpE,KAAK,EAAE,UAAU,CAAC,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,cAAc,EAAE,WAAW,EAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,sBAAsB,CAAC,EAAE,WAAW,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,MAAM,EACN,SAAS,GACV,EAAE,yBAAyB,eAsE3B"}
+{"version":3,"file":"group-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/group-header-cell.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrD,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;IACpE,KAAK,EAAE,UAAU,CAAC,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,cAAc,EAAE,WAAW,EAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,sBAAsB,CAAC,EAAE,WAAW,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,MAAM,EACN,SAAS,GACV,EAAE,yBAAyB,eAuE3B"}

package/lib/internal/template/table/header-cell/group-header-cell.js

@@ -27,6 +27,6 @@ export function TableGroupHeaderCell({ group, colspan, rowspan, colIndex, groupI
                 [styles['header-cell-fake-focus']]: focusedComponent === `group-header-${groupId}`,
             }), "aria-label": (_a = group.ariaLabel) === null || _a === void 0 ? void 0 : _a.call(group, { sorted: false, descending: false, disabled: true }), tabIndex: clickableHeaderTabIndex },
             React.createElement("div", { className: clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId }, group.header)),
-        resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-group-${groupId}`, showFocusRing: focusedComponent === `resize-group-${groupId}`, onWidthUpdate: newWidth => updateGroupWidth(groupId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: groupMinWidth, roleDescription: resizerRoleDescription, tooltipText: resizerTooltipText, isBorderless: variant === 'full-page' || variant === 'embedded' || variant === 'borderless', isLast: isLast, dividerPosition: columnGroupId ? 'full' : 'bottom' })) : (React.createElement(Divider, { position: columnGroupId ? 'full' : 'bottom' }))));
+        resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-group-${groupId}`, showFocusRing: focusedComponent === `resize-group-${groupId}`, onWidthUpdate: newWidth => updateGroupWidth(groupId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: groupMinWidth, roleDescription: resizerRoleDescription, tooltipText: resizerTooltipText, isBorderless: variant === 'full-page' || variant === 'embedded' || variant === 'borderless', isLast: isLast, isGrouped: true, dividerPosition: columnGroupId ? 'full' : 'bottom' })) : (React.createElement(Divider, { position: columnGroupId ? 'full' : 'bottom', isGrouped: true }))));
 }
 //# sourceMappingURL=group-header-cell.js.map