@cloudscape-design/components-themeable 3.0.1332 → 3.0.1334

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_nlvn3_153:not(#\9) {
+.awsui_icon-shake_1cbgc_rnop3_153:not(#\9) {
   display: inline-block;
-  animation: awsui_awsui-motion-shake-horizontally_1cbgc_nlvn3_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
+  animation: awsui_awsui-motion-shake-horizontally_1cbgc_rnop3_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_1cbgc_nlvn3_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_1cbgc_rnop3_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_nlvn3_153:not(#\9) {
+  .awsui_icon-shake_1cbgc_rnop3_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon-shake_1cbgc_nlvn3_153:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_nlvn3_153:not(#\9) {
+.awsui-motion-disabled .awsui_icon-shake_1cbgc_rnop3_153:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_rnop3_153:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_container-fade-in_1cbgc_nlvn3_181:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_1cbgc_nlvn3_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_rnop3_181:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_1cbgc_rnop3_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_nlvn3_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1cbgc_rnop3_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_nlvn3_181:not(#\9) {
+  .awsui_container-fade-in_1cbgc_rnop3_181:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_container-fade-in_1cbgc_nlvn3_181:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_nlvn3_181:not(#\9) {
+.awsui-motion-disabled .awsui_container-fade-in_1cbgc_rnop3_181:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_rnop3_181:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1cbgc_nlvn3_203:not(#\9) {
+.awsui_root_1cbgc_rnop3_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,143 +209,149 @@ 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_nlvn3_203.awsui_status-error_1cbgc_nlvn3_212:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-error_1cbgc_rnop3_212:not(#\9) {
   color: var(--color-text-status-error-c3at5p, #d13212);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-warning_1cbgc_nlvn3_215:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-warning_1cbgc_rnop3_215:not(#\9) {
   color: var(--color-text-status-warning-08d9ki, #906806);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-success_1cbgc_nlvn3_218:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-success_1cbgc_rnop3_218:not(#\9) {
   color: var(--color-text-status-success-ya1ikb, #1d8102);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-info_1cbgc_nlvn3_221:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-info_1cbgc_rnop3_221:not(#\9) {
   color: var(--color-text-status-info-5vpe5d, #0073bb);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-stopped_1cbgc_nlvn3_224:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-stopped_1cbgc_rnop3_224:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-pending_1cbgc_nlvn3_227:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-pending_1cbgc_rnop3_227:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-in-progress_1cbgc_nlvn3_230:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-in-progress_1cbgc_rnop3_230:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-loading_1cbgc_nlvn3_233:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-loading_1cbgc_rnop3_233:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-not-started_1cbgc_nlvn3_236:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-not-started_1cbgc_rnop3_236:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-red_1cbgc_nlvn3_239:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-log_1cbgc_rnop3_239:not(#\9) {
+  color: var(--color-text-status-inactive-n7p1uq, #687078);
+}
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-red_1cbgc_rnop3_242:not(#\9) {
   color: var(--color-text-status-error-c3at5p, #d13212);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-grey_1cbgc_nlvn3_242:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-grey_1cbgc_rnop3_245:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-blue_1cbgc_nlvn3_245:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-blue_1cbgc_rnop3_248:not(#\9) {
   color: var(--color-text-status-info-5vpe5d, #0073bb);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-green_1cbgc_nlvn3_248:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-green_1cbgc_rnop3_251:not(#\9) {
   color: var(--color-text-status-success-ya1ikb, #1d8102);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-yellow_1cbgc_nlvn3_251:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-yellow_1cbgc_rnop3_254:not(#\9) {
   color: var(--color-text-status-warning-08d9ki, #906806);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-error_1cbgc_nlvn3_212 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-error_1cbgc_rnop3_212 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-error-621sf8, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-warning_1cbgc_nlvn3_215 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-warning_1cbgc_rnop3_215 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-warning-3kccdi, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-success_1cbgc_nlvn3_218 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-success_1cbgc_rnop3_218 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-success-9mizpw, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-info_1cbgc_nlvn3_221 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-info_1cbgc_rnop3_221 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-info-zw9ljm, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-stopped_1cbgc_nlvn3_224 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-stopped_1cbgc_rnop3_224 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
+  background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
+}
+.awsui_root_1cbgc_rnop3_203.awsui_status-pending_1cbgc_rnop3_227 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-pending_1cbgc_nlvn3_227 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-in-progress_1cbgc_rnop3_230 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-in-progress_1cbgc_nlvn3_230 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-loading_1cbgc_rnop3_233 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-loading_1cbgc_nlvn3_233 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-not-started_1cbgc_rnop3_236 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_status-not-started_1cbgc_nlvn3_236 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_status-log_1cbgc_rnop3_239 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-red_1cbgc_nlvn3_239 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-red_1cbgc_rnop3_242 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-error-621sf8, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-grey_1cbgc_nlvn3_242 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-grey_1cbgc_rnop3_245 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-blue_1cbgc_nlvn3_245 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-blue_1cbgc_rnop3_248 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-info-zw9ljm, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-green_1cbgc_nlvn3_248 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-green_1cbgc_rnop3_251 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-success-9mizpw, transparent);
 }
-.awsui_root_1cbgc_nlvn3_203.awsui_color-override-yellow_1cbgc_nlvn3_251 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_root_1cbgc_rnop3_203.awsui_color-override-yellow_1cbgc_rnop3_254 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: var(--color-background-status-indicator-warning-3kccdi, transparent);
 }
 
-.awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui_container_1cbgc_rnop3_181:not(#\9) {
   padding-inline: var(--space-status-indicator-padding-horizontal-hzqgcr, 0px);
   border-start-start-radius: var(--border-radius-status-indicator-1d9bsf, 16px);
   border-start-end-radius: var(--border-radius-status-indicator-1d9bsf, 16px);
   border-end-start-radius: var(--border-radius-status-indicator-1d9bsf, 16px);
   border-end-end-radius: var(--border-radius-status-indicator-1d9bsf, 16px);
 }
-.awsui-one-theme .awsui_root_1cbgc_nlvn3_203.awsui_status-loading_1cbgc_nlvn3_233 > .awsui_container_1cbgc_nlvn3_181:not(#\9) {
+.awsui-one-theme .awsui_root_1cbgc_rnop3_203.awsui_status-loading_1cbgc_rnop3_233 > .awsui_container_1cbgc_rnop3_181:not(#\9) {
   background: transparent;
   align-items: center;
   color: var(--color-text-body-secondary-gaft81, #545b64);
 }
-.awsui_container_1cbgc_nlvn3_181.awsui_display-inline_1cbgc_nlvn3_309:not(#\9) {
+.awsui_container_1cbgc_rnop3_181.awsui_display-inline_1cbgc_rnop3_315:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: inline;
 }
-.awsui_container_1cbgc_nlvn3_181.awsui_display-inline_1cbgc_nlvn3_309 > .awsui_icon_1cbgc_nlvn3_153:not(#\9) {
+.awsui_container_1cbgc_rnop3_181.awsui_display-inline_1cbgc_rnop3_315 > .awsui_icon_1cbgc_rnop3_153:not(#\9) {
   white-space: nowrap;
 }
-.awsui-one-theme .awsui_container_1cbgc_nlvn3_181.awsui_display-inline_1cbgc_nlvn3_309 > .awsui_icon_1cbgc_nlvn3_153:not(#\9) {
+.awsui-one-theme .awsui_container_1cbgc_rnop3_181.awsui_display-inline_1cbgc_rnop3_315 > .awsui_icon_1cbgc_rnop3_153:not(#\9) {
   vertical-align: middle;
 }
-.awsui_container_1cbgc_nlvn3_181.awsui_display-inline-block_1cbgc_nlvn3_320:not(#\9) {
+.awsui_container_1cbgc_rnop3_181.awsui_display-inline-block_1cbgc_rnop3_326:not(#\9) {
   display: inline-block;
   word-wrap: break-word;
   word-break: break-all;
 }
-.awsui-one-theme .awsui_container_1cbgc_nlvn3_181.awsui_display-inline-block_1cbgc_nlvn3_320:not(#\9) {
+.awsui-one-theme .awsui_container_1cbgc_rnop3_181.awsui_display-inline-block_1cbgc_rnop3_326:not(#\9) {
   display: inline-flex;
-  align-items: flex-start;
+  vertical-align: top;
 }
-.awsui_container_1cbgc_nlvn3_181.awsui_display-inline-block_1cbgc_nlvn3_320 > .awsui_icon_1cbgc_nlvn3_153:not(#\9) {
+.awsui_container_1cbgc_rnop3_181.awsui_display-inline-block_1cbgc_rnop3_326 > .awsui_icon_1cbgc_rnop3_153:not(#\9) {
   padding-inline-end: var(--space-xxs-jnczic, 4px);
 }
-.awsui-one-theme .awsui_container_1cbgc_nlvn3_181.awsui_display-inline-block_1cbgc_nlvn3_320 > .awsui_icon_1cbgc_nlvn3_153:not(#\9) {
+.awsui-one-theme .awsui_container_1cbgc_rnop3_181.awsui_display-inline-block_1cbgc_rnop3_326 > .awsui_icon_1cbgc_rnop3_153:not(#\9) {
   display: inline-flex;
   align-items: center;
-  margin-block-start: var(--space-xxxs-3w1kr2, 2px);
+  block-size: var(--line-height-body-m-bedeoh, 22px);
 }
 
-.awsui_overflow-ellipsis_1cbgc_nlvn3_338:not(#\9) {
+.awsui_overflow-ellipsis_1cbgc_rnop3_344:not(#\9) {
   max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: text-bottom;
 }
-.awsui-one-theme .awsui_overflow-ellipsis_1cbgc_nlvn3_338:not(#\9) {
+.awsui-one-theme .awsui_overflow-ellipsis_1cbgc_rnop3_344:not(#\9) {
   text-overflow: unset;
 }
-.awsui-one-theme .awsui_overflow-ellipsis_1cbgc_nlvn3_338 > span:not(#\9):last-child {
+.awsui-one-theme .awsui_overflow-ellipsis_1cbgc_rnop3_344 > span:not(#\9):last-child {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -2,29 +2,30 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "icon-shake": "awsui_icon-shake_1cbgc_nlvn3_153",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_nlvn3_1",
-  "container-fade-in": "awsui_container-fade-in_1cbgc_nlvn3_181",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_nlvn3_1",
-  "root": "awsui_root_1cbgc_nlvn3_203",
-  "status-error": "awsui_status-error_1cbgc_nlvn3_212",
-  "status-warning": "awsui_status-warning_1cbgc_nlvn3_215",
-  "status-success": "awsui_status-success_1cbgc_nlvn3_218",
-  "status-info": "awsui_status-info_1cbgc_nlvn3_221",
-  "status-stopped": "awsui_status-stopped_1cbgc_nlvn3_224",
-  "status-pending": "awsui_status-pending_1cbgc_nlvn3_227",
-  "status-in-progress": "awsui_status-in-progress_1cbgc_nlvn3_230",
-  "status-loading": "awsui_status-loading_1cbgc_nlvn3_233",
-  "status-not-started": "awsui_status-not-started_1cbgc_nlvn3_236",
-  "color-override-red": "awsui_color-override-red_1cbgc_nlvn3_239",
-  "color-override-grey": "awsui_color-override-grey_1cbgc_nlvn3_242",
-  "color-override-blue": "awsui_color-override-blue_1cbgc_nlvn3_245",
-  "color-override-green": "awsui_color-override-green_1cbgc_nlvn3_248",
-  "color-override-yellow": "awsui_color-override-yellow_1cbgc_nlvn3_251",
-  "container": "awsui_container_1cbgc_nlvn3_181",
-  "display-inline": "awsui_display-inline_1cbgc_nlvn3_309",
-  "icon": "awsui_icon_1cbgc_nlvn3_153",
-  "display-inline-block": "awsui_display-inline-block_1cbgc_nlvn3_320",
-  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_nlvn3_338"
+  "icon-shake": "awsui_icon-shake_1cbgc_rnop3_153",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_rnop3_1",
+  "container-fade-in": "awsui_container-fade-in_1cbgc_rnop3_181",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_rnop3_1",
+  "root": "awsui_root_1cbgc_rnop3_203",
+  "status-error": "awsui_status-error_1cbgc_rnop3_212",
+  "status-warning": "awsui_status-warning_1cbgc_rnop3_215",
+  "status-success": "awsui_status-success_1cbgc_rnop3_218",
+  "status-info": "awsui_status-info_1cbgc_rnop3_221",
+  "status-stopped": "awsui_status-stopped_1cbgc_rnop3_224",
+  "status-pending": "awsui_status-pending_1cbgc_rnop3_227",
+  "status-in-progress": "awsui_status-in-progress_1cbgc_rnop3_230",
+  "status-loading": "awsui_status-loading_1cbgc_rnop3_233",
+  "status-not-started": "awsui_status-not-started_1cbgc_rnop3_236",
+  "status-log": "awsui_status-log_1cbgc_rnop3_239",
+  "color-override-red": "awsui_color-override-red_1cbgc_rnop3_242",
+  "color-override-grey": "awsui_color-override-grey_1cbgc_rnop3_245",
+  "color-override-blue": "awsui_color-override-blue_1cbgc_rnop3_248",
+  "color-override-green": "awsui_color-override-green_1cbgc_rnop3_251",
+  "color-override-yellow": "awsui_color-override-yellow_1cbgc_rnop3_254",
+  "container": "awsui_container_1cbgc_rnop3_181",
+  "display-inline": "awsui_display-inline_1cbgc_rnop3_315",
+  "icon": "awsui_icon_1cbgc_rnop3_153",
+  "display-inline-block": "awsui_display-inline-block_1cbgc_rnop3_326",
+  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_rnop3_344"
 };
   

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

@@ -5,10 +5,11 @@ export interface StepsProps extends BaseComponentProps {
      * An array of individual steps
      *
      * Each step definition has the following properties:
-     *  * `status` (string) - Status of the step corresponding to a status indicator.
+     *  * `status` (string) - Status of the step corresponding to a status indicator. The `log` status renders a neutral dot marker.
      *  * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.
      *  * `header` (ReactNode) - Summary corresponding to the step.
      *  * `details` (ReactNode) - (Optional) Additional information corresponding to the step.
+     *  * `annotation` (ReactNode) - (Optional) Content rendered at the start of the step, before the icon. Typically a timestamp in a timeline view.
      */
     steps: ReadonlyArray<StepsProps.Step>;
     /**
@@ -51,12 +52,13 @@ export interface StepsProps extends BaseComponentProps {
     ariaDescribedby?: string;
 }
 export declare namespace StepsProps {
-    type Status = StatusIndicatorProps.Type;
+    type Status = StatusIndicatorProps.Type | 'log';
     interface Step {
         status: Status;
         statusIconAriaLabel?: string;
         header: React.ReactNode;
         details?: React.ReactNode;
+        annotation?: React.ReactNode;
     }
     type Orientation = 'vertical' | 'horizontal';
     type ConnectorLinesVariant = 'visible' | 'none';

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;;;;;;OAQG;IACH,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;OAIG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC,qBAAqB,CAAC;IAClD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,KAAK;QACtC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAE/C,UAAiB,IAAI;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B;IAED,KAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;IAEpD,KAAY,qBAAqB,GAAG,SAAS,GAAG,MAAM,CAAC;CACxD"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;;;;;;;OASG;IACH,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;OAIG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC,qBAAqB,CAAC;IAClD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,KAAK;QACtC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,MAAM,GAAG,oBAAoB,CAAC,IAAI,GAAG,KAAK,CAAC;IAEvD,UAAiB,IAAI;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC9B;IAED,KAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;IAEpD,KAAY,qBAAqB,GAAG,SAAS,GAAG,MAAM,CAAC;CACxD"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { StatusIndicatorProps } from '../status-indicator/interfaces';\nimport { BaseComponentProps } from '../types/base-component';\n\nexport interface StepsProps extends BaseComponentProps {\n  /**\n   * An array of individual steps\n   *\n   * Each step definition has the following properties:\n   *  * `status` (string) - Status of the step corresponding to a status indicator.\n   *  * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.\n   *  * `header` (ReactNode) - Summary corresponding to the step.\n   *  * `details` (ReactNode) - (Optional) Additional information corresponding to the step.\n   */\n  steps: ReadonlyArray<StepsProps.Step>;\n  /**\n   * The visual orientation of the steps (vertical or horizontal).\n   * By default the orientation is vertical.\n   */\n  orientation?: StepsProps.Orientation;\n  /**\n   * Determines whether the connector lines between steps are displayed. The following variants are available:\n   * * `visible` - Shows connector lines between consecutive steps.\n   * * `none` - Hides the connector lines between steps.\n   */\n  connectorLines?: StepsProps.ConnectorLinesVariant;\n  /**\n   * Render a step. This overrides the default icon, header, and details provided by the component.\n   * The function is called for each step and should return an object with the following keys:\n   * * `header` (React.ReactNode) - Summary corresponding to the step.\n   * * `details` (React.ReactNode) - (Optional) Additional information corresponding to the step.\n   * * `icon` (React.ReactNode) - (Optional) Replaces the standard step icon from the status indicator.\n   */\n  renderStep?: (step: StepsProps.Step) => {\n    header: React.ReactNode;\n    details?: React.ReactNode;\n    icon?: React.ReactNode;\n  };\n  /**\n   * Provides an `aria-label` to the progress steps container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n  /**\n   * Sets the `aria-labelledby` property on the progress steps container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Sets the `aria-describedby` property on the progress steps container.\n   */\n  ariaDescribedby?: string;\n}\n\nexport namespace StepsProps {\n  export type Status = StatusIndicatorProps.Type;\n\n  export interface Step {\n    status: Status;\n    statusIconAriaLabel?: string;\n    header: React.ReactNode;\n    details?: React.ReactNode;\n  }\n\n  export type Orientation = 'vertical' | 'horizontal';\n\n  export type ConnectorLinesVariant = 'visible' | 'none';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { StatusIndicatorProps } from '../status-indicator/interfaces';\nimport { BaseComponentProps } from '../types/base-component';\n\nexport interface StepsProps extends BaseComponentProps {\n  /**\n   * An array of individual steps\n   *\n   * Each step definition has the following properties:\n   *  * `status` (string) - Status of the step corresponding to a status indicator. The `log` status renders a neutral dot marker.\n   *  * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.\n   *  * `header` (ReactNode) - Summary corresponding to the step.\n   *  * `details` (ReactNode) - (Optional) Additional information corresponding to the step.\n   *  * `annotation` (ReactNode) - (Optional) Content rendered at the start of the step, before the icon. Typically a timestamp in a timeline view.\n   */\n  steps: ReadonlyArray<StepsProps.Step>;\n  /**\n   * The visual orientation of the steps (vertical or horizontal).\n   * By default the orientation is vertical.\n   */\n  orientation?: StepsProps.Orientation;\n  /**\n   * Determines whether the connector lines between steps are displayed. The following variants are available:\n   * * `visible` - Shows connector lines between consecutive steps.\n   * * `none` - Hides the connector lines between steps.\n   */\n  connectorLines?: StepsProps.ConnectorLinesVariant;\n  /**\n   * Render a step. This overrides the default icon, header, and details provided by the component.\n   * The function is called for each step and should return an object with the following keys:\n   * * `header` (React.ReactNode) - Summary corresponding to the step.\n   * * `details` (React.ReactNode) - (Optional) Additional information corresponding to the step.\n   * * `icon` (React.ReactNode) - (Optional) Replaces the standard step icon from the status indicator.\n   */\n  renderStep?: (step: StepsProps.Step) => {\n    header: React.ReactNode;\n    details?: React.ReactNode;\n    icon?: React.ReactNode;\n  };\n  /**\n   * Provides an `aria-label` to the progress steps container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n  /**\n   * Sets the `aria-labelledby` property on the progress steps container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Sets the `aria-describedby` property on the progress steps container.\n   */\n  ariaDescribedby?: string;\n}\n\nexport namespace StepsProps {\n  export type Status = StatusIndicatorProps.Type | 'log';\n\n  export interface Step {\n    status: Status;\n    statusIconAriaLabel?: string;\n    header: React.ReactNode;\n    details?: React.ReactNode;\n    annotation?: React.ReactNode;\n  }\n\n  export type Orientation = 'vertical' | 'horizontal';\n\n  export type ConnectorLinesVariant = 'visible' | 'none';\n}\n"]}

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,GAAG,aAAa,GAAG,gBAAgB,CAAC,GAC5F,0BAA0B,CAAC;AAkG7B,QAAA,MAAM,aAAa,GAAI,6HAUpB,kBAAkB,gBAsCpB,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,GAAG,aAAa,GAAG,gBAAgB,CAAC,GAC5F,0BAA0B,CAAC;AA8H7B,QAAA,MAAM,aAAa,GAAI,6HAUpB,kBAAkB,gBAwCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -15,47 +15,71 @@ const statusToColor = {
     'in-progress': 'text-status-inactive',
     loading: 'text-status-inactive',
     'not-started': 'text-status-inactive',
+    log: 'text-status-inactive',
+};
+const StepAnnotation = ({ children }) => {
+    if (children === undefined || children === null) {
+        return null;
+    }
+    return React.createElement("div", { className: styles.annotation }, children);
+};
+const StepDetails = ({ children }) => {
+    if (children === undefined || children === null) {
+        return null;
+    }
+    return React.createElement("div", { className: styles.details }, children);
 };
 const CustomStep = ({ step, orientation, renderStep, hideConnectors, }) => {
-    const { status, statusIconAriaLabel } = step;
+    const { status, statusIconAriaLabel, annotation } = step;
     const { header, details, icon } = renderStep(step);
     const iconNode = icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel });
     const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);
     if (orientation === 'horizontal') {
         return (React.createElement("li", { className: styles.container },
-            React.createElement("div", { className: styles.header },
+            React.createElement(StepAnnotation, null, annotation),
+            React.createElement("div", { className: styles['step-layout'] },
                 iconNode,
                 React.createElement("hr", { className: connectorClassName, role: "none" })),
-            React.createElement("div", { className: styles['horizontal-header'] }, header),
-            details && React.createElement("div", { className: styles.details }, details)));
+            React.createElement("div", { className: styles.content },
+                React.createElement("div", { className: styles.header }, header),
+                React.createElement(StepDetails, null, 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.
+    // when the custom header wraps onto multiple lines. `annotation` (for example, a timeline timestamp)
+    // is rendered before the rail.
     return (React.createElement("li", { className: clsx(styles.container, styles['custom-vertical']) },
+        React.createElement(StepAnnotation, null, annotation),
         React.createElement("div", { className: styles.rail },
             iconNode,
             React.createElement("hr", { className: connectorClassName, role: "none" })),
         React.createElement("div", { className: styles.content },
             React.createElement("div", { className: styles.header }, header),
-            details && React.createElement("div", { className: styles.details }, details))));
+            React.createElement(StepDetails, null, details))));
 };
-const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, hideConnectors, }) => {
+const InternalStep = ({ status, statusIconAriaLabel, header, details, annotation, orientation, hideConnectors, }) => {
     const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);
     return (React.createElement("li", { className: styles.container },
-        React.createElement("div", { className: styles.header }, orientation === 'vertical' ? (React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)) : (React.createElement(React.Fragment, null,
+        React.createElement(StepAnnotation, null, annotation),
+        React.createElement("div", { className: styles['step-layout'] }, orientation === 'vertical' ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.header },
+                React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)),
+            React.createElement(StepDetails, null, details),
+            React.createElement("hr", { className: clsx(connectorClassName, styles['connector-continuation']), role: "none" }))) : (React.createElement(React.Fragment, null,
             React.createElement(InternalBox, { color: statusToColor[status] },
                 React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel })),
             React.createElement("hr", { className: connectorClassName, role: "none" })))),
-        orientation === 'vertical' ? (React.createElement("hr", { className: connectorClassName, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] },
-            React.createElement(InternalBox, { color: statusToColor[status] }, header))),
-        details && React.createElement("div", { className: styles.details }, details)));
+        orientation === 'horizontal' && (React.createElement("div", { className: styles.content },
+            React.createElement("div", { className: styles.header },
+                React.createElement(InternalBox, { color: statusToColor[status] }, header)),
+            React.createElement(StepDetails, null, details)))));
 };
 const InternalSteps = ({ steps, orientation, connectorLines, renderStep, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }) => {
     const hideConnectors = connectorLines === 'none';
+    const hasAnnotations = steps.some(step => step.annotation !== undefined && step.annotation !== null);
     return (React.createElement("div", { ...props, className: clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical), ref: __internalRootRef },
-        React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep, hideConnectors: hideConnectors })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, orientation: orientation, hideConnectors: hideConnectors }))))));
+        React.createElement("ol", { className: clsx(styles.list, orientation === 'vertical' && hasAnnotations && styles['with-annotation']), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep, hideConnectors: hideConnectors })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, annotation: step.annotation, orientation: orientation, hideConnectors: hideConnectors }))))));
 };
 export default InternalSteps;
 //# sourceMappingURL=internal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAG1C,OAAO,uBAAuB,EAAE,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG3F,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAKrC,MAAM,aAAa,GAA8C;IAC/D,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,qBAAqB;IAC9B,OAAO,EAAE,qBAAqB;IAC9B,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,sBAAsB;IAC/B,OAAO,EAAE,sBAAsB;IAC/B,aAAa,EAAE,sBAAsB;IACrC,OAAO,EAAE,sBAAsB;IAC/B,aAAa,EAAE,sBAAsB;CACtC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,WAAW,EACX,UAAU,EACV,cAAc,GAMf,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;IAC7C,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,kBAAkB,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,GAAI,CAAC;IACxG,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEhG,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;QACjC,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;gBAC1B,QAAQ;gBACT,4BAAI,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM,GAAG,CAC7C;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,MAAM,CAAO;YAC1D,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACxD,CACN,CAAC;IACJ,CAAC;IAED,+FAA+F;IAC/F,+FAA+F;IAC/F,+FAA+F;IAC/F,oDAAoD;IACpD,OAAO,CACL,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAC9D,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;YACxB,QAAQ;YACT,4BAAI,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM,GAAG,CAC7C;QACN,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO;YAC5C,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACvD,CACH,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,MAAM,EACN,mBAAmB,EACnB,MAAM,EACN,OAAO,EACP,WAAW,EACX,cAAc,GACqE,EAAE,EAAE;IACvF,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAChG,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;QAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAC1B,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,oBAAC,uBAAuB,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,IACtE,MAAM,CACiB,CAC3B,CAAC,CAAC,CAAC,CACF;YACE,oBAAC,WAAW,IAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;gBACvC,oBAAC,kBAAkB,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,GAAI,CAC5D;YACd,4BAAI,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM,GAAG,CAChD,CACJ,CACG;QACL,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,4BAAI,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;YACzC,oBAAC,WAAW,IAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,IAAG,MAAM,CAAe,CAC7D,CACP;QACA,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,WAAW,EACX,cAAc,EACd,UAAU,EACV,SAAS,EACT,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,cAAc,GAAG,cAAc,KAAK,MAAM,CAAC;IACjD,OAAO,CACL,gCACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EACjH,GAAG,EAAE,iBAAiB;QAEtB,4BACE,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,SAAS,qBACJ,cAAc,sBACb,eAAe,IAEhC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACzB,UAAU,CAAC,CAAC,CAAC,CACX,oBAAC,UAAU,IACT,GAAG,EAAE,KAAK,EACV,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,GAC9B,CACH,CACF,CACE,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","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' | 'orientation' | 'connectorLines'> &\n  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  hideConnectors,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n  hideConnectors: boolean;\n}) => {\n  const { status, statusIconAriaLabel } = step;\n  const { header, details, icon } = renderStep(step);\n  const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n\n  if (orientation === 'horizontal') {\n    return (\n      <li className={styles.container}>\n        <div className={styles.header}>\n          {iconNode}\n          <hr className={connectorClassName} 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={connectorClassName} 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  hideConnectors,\n}: StepsProps.Step & { orientation: StepsProps.Orientation; hideConnectors: boolean }) => {\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\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={connectorClassName} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'vertical' ? (\n        <hr className={connectorClassName} 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,\n  connectorLines,\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  const hideConnectors = connectorLines === 'none';\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\n              key={index}\n              orientation={orientation}\n              step={step}\n              renderStep={renderStep}\n              hideConnectors={hideConnectors}\n            />\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              hideConnectors={hideConnectors}\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' | 'orientation' | 'connectorLines'> &\n  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  log: 'text-status-inactive',\n};\n\nconst StepAnnotation = ({ children }: { children: StepsProps.Step['annotation'] }) => {\n  if (children === undefined || children === null) {\n    return null;\n  }\n  return <div className={styles.annotation}>{children}</div>;\n};\n\nconst StepDetails = ({ children }: { children: StepsProps.Step['details'] }) => {\n  if (children === undefined || children === null) {\n    return null;\n  }\n  return <div className={styles.details}>{children}</div>;\n};\n\nconst CustomStep = ({\n  step,\n  orientation,\n  renderStep,\n  hideConnectors,\n}: {\n  step: StepsProps.Step;\n  orientation: StepsProps.Orientation;\n  renderStep: Required<StepsProps>['renderStep'];\n  hideConnectors: boolean;\n}) => {\n  const { status, statusIconAriaLabel, annotation } = step;\n  const { header, details, icon } = renderStep(step);\n  const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n\n  if (orientation === 'horizontal') {\n    return (\n      <li className={styles.container}>\n        <StepAnnotation>{annotation}</StepAnnotation>\n        <div className={styles['step-layout']}>\n          {iconNode}\n          <hr className={connectorClassName} role=\"none\" />\n        </div>\n        <div className={styles.content}>\n          <div className={styles.header}>{header}</div>\n          <StepDetails>{details}</StepDetails>\n        </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. `annotation` (for example, a timeline timestamp)\n  // is rendered before the rail.\n  return (\n    <li className={clsx(styles.container, styles['custom-vertical'])}>\n      <StepAnnotation>{annotation}</StepAnnotation>\n      <div className={styles.rail}>\n        {iconNode}\n        <hr className={connectorClassName} role=\"none\" />\n      </div>\n      <div className={styles.content}>\n        <div className={styles.header}>{header}</div>\n        <StepDetails>{details}</StepDetails>\n      </div>\n    </li>\n  );\n};\n\nconst InternalStep = ({\n  status,\n  statusIconAriaLabel,\n  header,\n  details,\n  annotation,\n  orientation,\n  hideConnectors,\n}: StepsProps.Step & { orientation: StepsProps.Orientation; hideConnectors: boolean }) => {\n  const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n  return (\n    <li className={styles.container}>\n      <StepAnnotation>{annotation}</StepAnnotation>\n      <div className={styles['step-layout']}>\n        {orientation === 'vertical' ? (\n          <>\n            <div className={styles.header}>\n              <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n                {header}\n              </InternalStatusIndicator>\n            </div>\n            <StepDetails>{details}</StepDetails>\n            <hr className={clsx(connectorClassName, styles['connector-continuation'])} role=\"none\" />\n          </>\n        ) : (\n          <>\n            <InternalBox color={statusToColor[status]}>\n              <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n            </InternalBox>\n            <hr className={connectorClassName} role=\"none\" />\n          </>\n        )}\n      </div>\n      {orientation === 'horizontal' && (\n        <div className={styles.content}>\n          <div className={styles.header}>\n            <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n          </div>\n          <StepDetails>{details}</StepDetails>\n        </div>\n      )}\n    </li>\n  );\n};\n\nconst InternalSteps = ({\n  steps,\n  orientation,\n  connectorLines,\n  renderStep,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  __internalRootRef,\n  ...props\n}: InternalStepsProps) => {\n  const hideConnectors = connectorLines === 'none';\n  const hasAnnotations = steps.some(step => step.annotation !== undefined && step.annotation !== null);\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={clsx(styles.list, orientation === 'vertical' && hasAnnotations && styles['with-annotation'])}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n      >\n        {steps.map((step, index) =>\n          renderStep ? (\n            <CustomStep\n              key={index}\n              orientation={orientation}\n              step={step}\n              renderStep={renderStep}\n              hideConnectors={hideConnectors}\n            />\n          ) : (\n            <InternalStep\n              key={index}\n              status={step.status}\n              statusIconAriaLabel={step.statusIconAriaLabel}\n              header={step.header}\n              details={step.details}\n              annotation={step.annotation}\n              orientation={orientation}\n              hideConnectors={hideConnectors}\n            />\n          )\n        )}\n      </ol>\n    </div>\n  );\n};\n\nexport default InternalSteps;\n"]}

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

@@ -1,18 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "connector": "awsui_connector_gxp9y_m67w6_181",
-  "connector-hidden": "awsui_connector-hidden_gxp9y_m67w6_185",
-  "root": "awsui_root_gxp9y_m67w6_189",
-  "list": "awsui_list_gxp9y_m67w6_222",
-  "container": "awsui_container_gxp9y_m67w6_227",
-  "header": "awsui_header_gxp9y_m67w6_232",
-  "details": "awsui_details_gxp9y_m67w6_238",
-  "custom": "awsui_custom_gxp9y_m67w6_259",
-  "horizontal": "awsui_horizontal_gxp9y_m67w6_263",
-  "horizontal-header": "awsui_horizontal-header_gxp9y_m67w6_294",
-  "custom-vertical": "awsui_custom-vertical_gxp9y_m67w6_308",
-  "rail": "awsui_rail_gxp9y_m67w6_308",
-  "content": "awsui_content_gxp9y_m67w6_326"
+  "connector": "awsui_connector_gxp9y_166tz_181",
+  "connector-hidden": "awsui_connector-hidden_gxp9y_166tz_185",
+  "header": "awsui_header_gxp9y_166tz_189",
+  "root": "awsui_root_gxp9y_166tz_193",
+  "list": "awsui_list_gxp9y_166tz_226",
+  "container": "awsui_container_gxp9y_166tz_231",
+  "annotation": "awsui_annotation_gxp9y_166tz_236",
+  "step-layout": "awsui_step-layout_gxp9y_166tz_241",
+  "details": "awsui_details_gxp9y_166tz_247",
+  "custom": "awsui_custom_gxp9y_166tz_253",
+  "horizontal": "awsui_horizontal_gxp9y_166tz_257",
+  "content": "awsui_content_gxp9y_166tz_293",
+  "vertical": "awsui_vertical_gxp9y_166tz_307",
+  "connector-continuation": "awsui_connector-continuation_gxp9y_166tz_321",
+  "custom-vertical": "awsui_custom-vertical_gxp9y_166tz_339",
+  "rail": "awsui_rail_gxp9y_166tz_339",
+  "with-annotation": "awsui_with-annotation_gxp9y_166tz_362"
 };