npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1312 → 3.0.1313 - Mend

@cloudscape-design/components-themeable 3.0.1312 → 3.0.1313

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/lib/internal/template/internal/utils/throttle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"throttle.js","sourceRoot":"","sources":["../../../../src/internal/utils/throttle.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAYtC,MAAM,UAAU,QAAQ,CACtB,IAAO,EACP,KAAa,EACb,EAAE,QAAQ,GAAG,IAAI,KAAsB,EAAE;IAEzC,IAAI,OAAO,GAAoC,IAAI,CAAC;IACpD,IAAI,cAAc,GAAkB,IAAI,CAAC;IACzC,IAAI,OAAO,GAAkB,IAAI,CAAC;IAElC,qDAAqD;IACrD,SAAS,WAAW;QAClB,IAAI,OAAO,KAAK,IAAI,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;YAChD,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAC9B,MAAM,YAAY,GAAG,UAAU,GAAG,cAAc,IAAI,KAAK,CAAC;QAE1D,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YACvC,cAAc,GAAG,UAAU,CAAC;YAC5B,OAAO,GAAG,IAAI,CAAC;YACf,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;aAAM,IAAI,QAAQ,EAAE,CAAC;YACpB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,SAAS,UAAU;QACjB,IAAI,OAAO,EAAE,CAAC;YACZ,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;IAC/C,CAAC;IAED,kDAAkD;IAClD,SAAS,SAAS,CAAY,GAAG,IAAS;QACxC,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;YAC5B,cAAc,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YAC/B,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,kEAAkE;IAClE,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,EAAE,CAAC;YACZ,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,GAAG,IAAI,CAAC;QACf,~~cAAc,GAAG,IAAI,CAAC;QACtB,~~OAAO,GAAG,IAAI,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ThrottleOptions {\n leading?: boolean;\n trailing?: boolean;\n}\n\nexport interface ThrottledFunction<F extends (...args: any) => any> {\n (...args: Parameters<F>): void;\n cancel(): void;\n}\n\nexport function throttle<F extends (...args: any) => any>(\n func: F,\n delay: number,\n { trailing = true }: ThrottleOptions = {}\n): ThrottledFunction<F> {\n let pending: null \| { this: any; args: any } = null;\n let lastInvokeTime: null \| number = null;\n let timerId: null \| number = null;\n\n // Runs on every animation frame until timer stopped.\n function pendingFunc() {\n if (pending === null \|\| lastInvokeTime === null) {\n return;\n }\n\n const invokeTime = Date.now();\n const shouldInvoke = invokeTime - lastInvokeTime >= delay;\n\n if (shouldInvoke) {\n func.apply(pending.this, pending.args);\n lastInvokeTime = invokeTime;\n pending = null;\n timerId = null;\n } else if (trailing) {\n startTimer();\n }\n }\n\n function startTimer() {\n if (timerId) {\n cancelAnimationFrame(timerId);\n }\n timerId = requestAnimationFrame(pendingFunc);\n }\n\n // Decorated client function with delay mechanism.\n function throttled(this: any, ...args: any) {\n if (lastInvokeTime === null) {\n lastInvokeTime = Date.now();\n func.apply(this, args);\n } else {\n pending = { this: this, args };\n startTimer();\n }\n }\n\n // Prevents delayed function from execution when no longer needed.\n throttled.cancel = () => {\n if (timerId) {\n cancelAnimationFrame(timerId);\n }\n pending = null;\n ~~lastInvokeTime = null;\n~~ timerId = null;\n };\n\n return throttled;\n}\n"]}
1	+ {"version":3,"file":"throttle.js","sourceRoot":"","sources":["../../../../src/internal/utils/throttle.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAYtC,MAAM,UAAU,QAAQ,CACtB,IAAO,EACP,KAAa,EACb,EAAE,QAAQ,GAAG,IAAI,KAAsB,EAAE;IAEzC,IAAI,OAAO,GAAoC,IAAI,CAAC;IACpD,IAAI,cAAc,GAAkB,IAAI,CAAC;IACzC,IAAI,OAAO,GAAkB,IAAI,CAAC;IAElC,qDAAqD;IACrD,SAAS,WAAW;QAClB,IAAI,OAAO,KAAK,IAAI,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;YAChD,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAC9B,MAAM,YAAY,GAAG,UAAU,GAAG,cAAc,IAAI,KAAK,CAAC;QAE1D,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YACvC,cAAc,GAAG,UAAU,CAAC;YAC5B,OAAO,GAAG,IAAI,CAAC;YACf,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;aAAM,IAAI,QAAQ,EAAE,CAAC;YACpB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,SAAS,UAAU;QACjB,IAAI,OAAO,EAAE,CAAC;YACZ,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;IAC/C,CAAC;IAED,kDAAkD;IAClD,SAAS,SAAS,CAAY,GAAG,IAAS;QACxC,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;YAC5B,cAAc,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YAC/B,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,kEAAkE;IAClE,wEAAwE;IACxE,6EAA6E;IAC7E,yEAAyE;IACzE,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,EAAE,CAAC;YACZ,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,GAAG,IAAI,CAAC;QACf,OAAO,GAAG,IAAI,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ThrottleOptions {\n leading?: boolean;\n trailing?: boolean;\n}\n\nexport interface ThrottledFunction<F extends (...args: any) => any> {\n (...args: Parameters<F>): void;\n cancel(): void;\n}\n\nexport function throttle<F extends (...args: any) => any>(\n func: F,\n delay: number,\n { trailing = true }: ThrottleOptions = {}\n): ThrottledFunction<F> {\n let pending: null \| { this: any; args: any } = null;\n let lastInvokeTime: null \| number = null;\n let timerId: null \| number = null;\n\n // Runs on every animation frame until timer stopped.\n function pendingFunc() {\n if (pending === null \|\| lastInvokeTime === null) {\n return;\n }\n\n const invokeTime = Date.now();\n const shouldInvoke = invokeTime - lastInvokeTime >= delay;\n\n if (shouldInvoke) {\n func.apply(pending.this, pending.args);\n lastInvokeTime = invokeTime;\n pending = null;\n timerId = null;\n } else if (trailing) {\n startTimer();\n }\n }\n\n function startTimer() {\n if (timerId) {\n cancelAnimationFrame(timerId);\n }\n timerId = requestAnimationFrame(pendingFunc);\n }\n\n // Decorated client function with delay mechanism.\n function throttled(this: any, ...args: any) {\n if (lastInvokeTime === null) {\n lastInvokeTime = Date.now();\n func.apply(this, args);\n } else {\n pending = { this: this, args };\n startTimer();\n }\n }\n\n // Prevents delayed function from execution when no longer needed.\n // Note: only the pending trailing invocation is cancelled. The throttle\n // window (`lastInvokeTime`) is preserved so subsequent calls keep respecting\n // the configured delay rather than firing immediately as a leading call.\n throttled.cancel = () => {\n if (timerId) {\n cancelAnimationFrame(timerId);\n }\n pending = null;\n timerId = null;\n };\n\n return throttled;\n}\n"]}

package/lib/internal/template/progress-bar/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,~~eAgGlB~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,eAiGlB"}

package/lib/internal/template/progress-bar/index.js CHANGED Viewed

@@ -31,6 +31,7 @@ export default function ProgressBar({ value = 0, status = 'in-progress', variant
     }, ASSERTION_FREQUENCY, []);
     useEffect(() => {
         throttledAssertion(value);
+        return () => throttledAssertion.cancel();
     }, [throttledAssertion, value]);
     if (isInFlash && resultButtonText) {
         warnOnce('ProgressBar', 'The `resultButtonText` is ignored if you set `variant="flash"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.');

package/lib/internal/template/progress-bar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEtF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,mBAAmB,GAAG,IAAI,CAAC,CAAC,gDAAgD;AAIlF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,aAAa,EACtB,OAAO,GAAG,YAAY,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,KAAK,EACL,GAAG,IAAI,EACU;IACjB,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,aAAa,EAAE;QAC5D,KAAK,EAAE,EAAE,OAAO,EAAE;KACnB,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,aAAa,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAEzD,MAAM,OAAO,GAAG,GAAG,aAAa,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAG,OAAO,KAAK,OAAO,CAAC;IACtC,MAAM,iBAAiB,GAAG,MAAM,KAAK,aAAa,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,0BAA0B,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,WAAW,CAAC,8BAA8B,CAAC,CAAC;IAErE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzD,MAAM,kBAAkB,GAAG,mBAAmB,CAC5C,CAAC,KAAgC,EAAE,EAAE;QACnC,iBAAiB,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;IACjC,CAAC,EACD,mBAAmB,EACnB,EAAE,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC,KAAK,CAAC,CAAC;~~IAC5B~~,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhC,IAAI,SAAS,IAAI,gBAAgB,EAAE,CAAC;QAClC,QAAQ,CACN,aAAa,EACb,oPAAoP,CACrP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,gCACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,EAC7E,GAAG,EAAE,iBAAiB;QAEtB,6BAAK,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS;YAC/D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,SAAS,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,IAC/E,KAAK,CACF;YACL,WAAW,IAAI,CACd,oBAAC,SAAS,IAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,EAAE,aAAa,IACnE,WAAW,CACF,CACb;YACD,iCACG,iBAAiB,CAAC,CAAC,CAAC,CACnB;gBACE,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,EACpD,eAAe,EAAE,WAAW,CAC1B,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACvC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC7C,eAAe,CAChB,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GACZ;gBACF,oBAAC,kBAAkB,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC;oBACtD,KAAK;oBACL,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;oBACnB,cAAc,CACI,CACpB,CACJ,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,IAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC;gBACxD,oBAAC,WAAW,IACV,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wBACZ,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;oBAC9C,CAAC,GACD,CACiB,CACtB,CACG,CACF;QACL,cAAc,IAAI,CACjB,oBAAC,SAAS,IACR,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,EAAE,EAAE,gBAAgB,IAEnB,cAAc,CACL,CACb,CACG,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { useEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useThrottleCallback } from '../internal/hooks/use-throttle-callback';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalLiveRegion from '../live-region/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { Progress, ResultState, SmallText } from './internal';\n\nimport styles from './styles.css.js';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n value = 0,\n status = 'in-progress',\n variant = 'standalone',\n resultButtonText,\n label,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n description,\n additionalInfo,\n resultText,\n onResultButtonClick,\n style,\n ...rest\n}: ProgressBarProps) {\n const { __internalRootRef } = useBaseComponent('ProgressBar', {\n props: { variant },\n });\n const baseProps = getBaseProps(rest);\n const generatedName = useUniqueId('awsui-progress-bar-');\n\n const labelId = `${generatedName}-label`;\n const isInFlash = variant === 'flash';\n const isInProgressState = status === 'in-progress';\n\n const descriptionId = useUniqueId('progressbar-description-');\n const additionalInfoId = useUniqueId('progressbar-additional-info-');\n\n const [announcedValue, setAnnouncedValue] = useState('');\n const throttledAssertion = useThrottleCallback(\n (value: ProgressBarProps['value']) => {\n setAnnouncedValue(`${value}%`);\n },\n ASSERTION_FREQUENCY,\n []\n );\n\n useEffect(() => {\n throttledAssertion(value);\n }, [throttledAssertion, value]);\n\n if (isInFlash && resultButtonText) {\n warnOnce(\n 'ProgressBar',\n 'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n );\n }\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n ref={__internalRootRef}\n >\n <div className={isInFlash ? styles['flash-container'] : undefined}>\n <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n {label}\n </div>\n {description && (\n <SmallText color={isInFlash ? 'inherit' : undefined} id={descriptionId}>\n {description}\n </SmallText>\n )}\n <div>\n {isInProgressState ? (\n <>\n <Progress\n value={value}\n ariaLabel={ariaLabel}\n ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n ariaDescribedby={joinStrings(\n description ? descriptionId : undefined,\n additionalInfo ? additionalInfoId : undefined,\n ariaDescribedby\n )}\n isInFlash={isInFlash}\n style={style}\n />\n <InternalLiveRegion hidden={true} tagName=\"span\" delay={0}>\n {label}\n {label ? ': ' : null}\n {announcedValue}\n </InternalLiveRegion>\n </>\n ) : (\n <InternalLiveRegion hidden={false} tagName=\"span\" delay={0}>\n <ResultState\n resultText={resultText}\n isInFlash={isInFlash}\n resultButtonText={resultButtonText}\n status={status}\n onClick={() => {\n fireNonCancelableEvent(onResultButtonClick);\n }}\n />\n </InternalLiveRegion>\n )}\n </div>\n </div>\n {additionalInfo && (\n <SmallText\n className={styles['additional-info']}\n color={isInFlash ? 'inherit' : undefined}\n id={additionalInfoId}\n >\n {additionalInfo}\n </SmallText>\n )}\n </div>\n );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.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\n'use client';\nimport React, { useEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useThrottleCallback } from '../internal/hooks/use-throttle-callback';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalLiveRegion from '../live-region/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { Progress, ResultState, SmallText } from './internal';\n\nimport styles from './styles.css.js';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n value = 0,\n status = 'in-progress',\n variant = 'standalone',\n resultButtonText,\n label,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n description,\n additionalInfo,\n resultText,\n onResultButtonClick,\n style,\n ...rest\n}: ProgressBarProps) {\n const { __internalRootRef } = useBaseComponent('ProgressBar', {\n props: { variant },\n });\n const baseProps = getBaseProps(rest);\n const generatedName = useUniqueId('awsui-progress-bar-');\n\n const labelId = `${generatedName}-label`;\n const isInFlash = variant === 'flash';\n const isInProgressState = status === 'in-progress';\n\n const descriptionId = useUniqueId('progressbar-description-');\n const additionalInfoId = useUniqueId('progressbar-additional-info-');\n\n const [announcedValue, setAnnouncedValue] = useState('');\n const throttledAssertion = useThrottleCallback(\n (value: ProgressBarProps['value']) => {\n setAnnouncedValue(`${value}%`);\n },\n ASSERTION_FREQUENCY,\n []\n );\n\n useEffect(() => {\n throttledAssertion(value);\n return () => throttledAssertion.cancel();\n }, [throttledAssertion, value]);\n\n if (isInFlash && resultButtonText) {\n warnOnce(\n 'ProgressBar',\n 'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n );\n }\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n ref={__internalRootRef}\n >\n <div className={isInFlash ? styles['flash-container'] : undefined}>\n <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n {label}\n </div>\n {description && (\n <SmallText color={isInFlash ? 'inherit' : undefined} id={descriptionId}>\n {description}\n </SmallText>\n )}\n <div>\n {isInProgressState ? (\n <>\n <Progress\n value={value}\n ariaLabel={ariaLabel}\n ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n ariaDescribedby={joinStrings(\n description ? descriptionId : undefined,\n additionalInfo ? additionalInfoId : undefined,\n ariaDescribedby\n )}\n isInFlash={isInFlash}\n style={style}\n />\n <InternalLiveRegion hidden={true} tagName=\"span\" delay={0}>\n {label}\n {label ? ': ' : null}\n {announcedValue}\n </InternalLiveRegion>\n </>\n ) : (\n <InternalLiveRegion hidden={false} tagName=\"span\" delay={0}>\n <ResultState\n resultText={resultText}\n isInFlash={isInFlash}\n resultButtonText={resultButtonText}\n status={status}\n onClick={() => {\n fireNonCancelableEvent(onResultButtonClick);\n }}\n />\n </InternalLiveRegion>\n )}\n </div>\n </div>\n {additionalInfo && (\n <SmallText\n className={styles['additional-info']}\n color={isInFlash ? 'inherit' : undefined}\n id={additionalInfoId}\n >\n {additionalInfo}\n </SmallText>\n )}\n </div>\n );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}

package/lib/internal/template/segmented-control/styles.css.js CHANGED Viewed

@@ -1,21 +1,21 @@
     import './styles.scoped.css';
     export default {
-  "segment": "awsui_segment_8cbea_o8jty_161",
-  "refresh": "awsui_refresh_8cbea_o8jty_188",
-  "disabled": "awsui_disabled_8cbea_o8jty_194",
-  "selected": "awsui_selected_8cbea_o8jty_251",
-  "icon": "awsui_icon_8cbea_o8jty_261",
-  "with-text": "awsui_with-text_8cbea_o8jty_265",
-  "with-no-text": "awsui_with-no-text_8cbea_o8jty_271",
-  "root": "awsui_root_8cbea_o8jty_276",
-  "segment-part": "awsui_segment-part_8cbea_o8jty_308",
-  "select": "awsui_select_8cbea_o8jty_251",
-  "segment-count-2": "awsui_segment-count-2_8cbea_o8jty_343",
-  "segment-count-3": "awsui_segment-count-3_8cbea_o8jty_347",
-  "segment-count-4": "awsui_segment-count-4_8cbea_o8jty_351",
-  "segment-count-5": "awsui_segment-count-5_8cbea_o8jty_355",
-  "segment-count-6": "awsui_segment-count-6_8cbea_o8jty_359",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_o8jty_363"
+  "segment": "awsui_segment_8cbea_1cdc3_161",
+  "refresh": "awsui_refresh_8cbea_1cdc3_188",
+  "disabled": "awsui_disabled_8cbea_1cdc3_194",
+  "selected": "awsui_selected_8cbea_1cdc3_251",
+  "icon": "awsui_icon_8cbea_1cdc3_261",
+  "with-text": "awsui_with-text_8cbea_1cdc3_265",
+  "with-no-text": "awsui_with-no-text_8cbea_1cdc3_271",
+  "root": "awsui_root_8cbea_1cdc3_276",
+  "segment-part": "awsui_segment-part_8cbea_1cdc3_308",
+  "select": "awsui_select_8cbea_1cdc3_251",
+  "segment-count-2": "awsui_segment-count-2_8cbea_1cdc3_343",
+  "segment-count-3": "awsui_segment-count-3_8cbea_1cdc3_347",
+  "segment-count-4": "awsui_segment-count-4_8cbea_1cdc3_351",
+  "segment-count-5": "awsui_segment-count-5_8cbea_1cdc3_355",
+  "segment-count-6": "awsui_segment-count-6_8cbea_1cdc3_359",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1cdc3_363"
 };

package/lib/internal/template/segmented-control/styles.scoped.css CHANGED Viewed

@@ -158,7 +158,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_segment_8cbea_o8jty_161:not(#\9) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   word-wrap: break-word;
@@ -185,24 +185,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block: none;
   --awsui-style-focus-ring-box-shadow-6b9ypa: 0 0 0 var(--awsui-style-focus-ring-border-width-6b9ypa, 2px) var(--awsui-style-focus-ring-border-color-6b9ypa, var(--color-border-item-focused-r5f6xl, #0073bb));
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):not(.awsui_refresh_8cbea_o8jty_188) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):not(.awsui_refresh_8cbea_1cdc3_188) {
   block-size: calc(100% - var(--space-static-xxs-0cgyf1, 4px) - 2 * var(--border-width-field-9k1tdz, 1px));
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):focus {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):focus {
   outline: none;
 }
-.awsui_segment_8cbea_o8jty_161.awsui_disabled_8cbea_o8jty_194:not(#\9) {
+.awsui_segment_8cbea_1cdc3_161.awsui_disabled_8cbea_1cdc3_194:not(#\9) {
   background: var(--awsui-style-background-disabled-6b9ypa, var(--color-background-segment-disabled-etp65k, #ffffff));
   color: var(--awsui-style-color-disabled-6b9ypa, var(--color-text-interactive-disabled-xwt2jl, #aab7b8));
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_o8jty_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1cdc3_161:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_o8jty_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1cdc3_161:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_o8jty_161:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1cdc3_161:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -217,7 +217,7 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_o8jty_161:not(#\9):focu
   box-shadow: var(--awsui-style-focus-ring-box-shadow-6b9ypa);
   z-index: 1;
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):not(:last-child)::after {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):not(:last-child)::after {
   content: "";
   position: absolute;
   inset-inline-end: calc(-1 * (var(--space-static-xxs-0cgyf1, 4px) + 1px));
@@ -227,53 +227,53 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_o8jty_161:not(#\9):focu
   background: var(--color-border-input-default-txli8y, #687078);
   z-index: 1;
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):not(.awsui_refresh_8cbea_o8jty_188):not(:last-child)::after {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):not(.awsui_refresh_8cbea_1cdc3_188):not(:last-child)::after {
   inset-inline-end: calc(-1 * var(--space-static-xxs-0cgyf1, 4px));
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):nth-child(1) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):nth-child(1) {
   grid-column: 1;
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):nth-child(2) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):nth-child(2) {
   grid-column: 2;
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):nth-child(3) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):nth-child(3) {
   grid-column: 3;
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):nth-child(4) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):nth-child(4) {
   grid-column: 4;
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):nth-child(5) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):nth-child(5) {
   grid-column: 5;
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):nth-child(6) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):nth-child(6) {
   grid-column: 6;
 }
-.awsui_segment_8cbea_o8jty_161.awsui_selected_8cbea_o8jty_251:not(#\9) {
+.awsui_segment_8cbea_1cdc3_161.awsui_selected_8cbea_1cdc3_251:not(#\9) {
   background: var(--awsui-style-background-active-6b9ypa, var(--color-background-segment-active-pvua4h, #0073bb));
   color: var(--awsui-style-color-active-6b9ypa, var(--color-text-segment-active-q50mlg, #ffffff));
 }
-.awsui_segment_8cbea_o8jty_161:not(#\9):hover:not(.awsui_selected_8cbea_o8jty_251):not(.awsui_disabled_8cbea_o8jty_194):not(:focus) {
+.awsui_segment_8cbea_1cdc3_161:not(#\9):hover:not(.awsui_selected_8cbea_1cdc3_251):not(.awsui_disabled_8cbea_1cdc3_194):not(:focus) {
   background: var(--awsui-style-background-hover-6b9ypa, var(--color-background-segment-hover-bakufl, #fafafa));
   color: var(--awsui-style-color-hover-6b9ypa, var(--color-text-segment-hover-33xnva, #16191f));
   cursor: pointer;
 }
-.awsui_icon_8cbea_o8jty_261:not(#\9) {
+.awsui_icon_8cbea_1cdc3_261:not(#\9) {
   /* used in test-utils */
 }
-.awsui_with-text_8cbea_o8jty_265:not(#\9) {
+.awsui_with-text_8cbea_1cdc3_265:not(#\9) {
   position: relative;
   inset-inline-start: calc(-1 * var(--space-xxs-jnczic, 4px));
   margin-inline-end: var(--space-xxs-jnczic, 4px);
 }
-.awsui_with-no-text_8cbea_o8jty_271:not(#\9) {
+.awsui_with-no-text_8cbea_1cdc3_271:not(#\9) {
   margin-inline: auto;
   inset-inline: 0;
 }
-.awsui_root_8cbea_o8jty_276:not(#\9) {
+.awsui_root_8cbea_1cdc3_276:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -305,10 +305,10 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_o8jty_161:not(#\9):focu
   -moz-osx-font-smoothing: auto;
 }
-.awsui_segment-part_8cbea_o8jty_308:not(#\9) {
+.awsui_segment-part_8cbea_1cdc3_308:not(#\9) {
   display: inline-grid;
-  border-inline: solid var(--border-width-field-9k1tdz, 1px) var(--color-border-input-default-txli8y, #687078);
-  border-block: solid var(--border-width-field-9k1tdz, 1px) var(--color-border-input-default-txli8y, #687078);
+  border-inline: solid var(--border-width-field-9k1tdz, 1px) var(--color-border-segment-wrapper-7vfuf7, #687078);
+  border-block: solid var(--border-width-field-9k1tdz, 1px) var(--color-border-segment-wrapper-7vfuf7, #687078);
   border-start-start-radius: var(--border-radius-button-vm1lh4, 2px);
   border-start-end-radius: var(--border-radius-button-vm1lh4, 2px);
   border-end-start-radius: var(--border-radius-button-vm1lh4, 2px);
@@ -320,46 +320,46 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_o8jty_161:not(#\9):focu
   padding-inline: calc(var(--space-static-xxs-0cgyf1, 4px) - var(--border-width-field-9k1tdz, 1px));
   gap: calc(var(--space-static-xxs-0cgyf1, 4px) * 2 + 1px);
 }
-.awsui_segment-part_8cbea_o8jty_308:not(#\9):not(.awsui_refresh_8cbea_o8jty_188) {
+.awsui_segment-part_8cbea_1cdc3_308:not(#\9):not(.awsui_refresh_8cbea_1cdc3_188) {
   padding-inline: calc(var(--space-static-xxxs-zckw10, 2px) + var(--border-width-field-9k1tdz, 1px));
   padding-block: 0;
   gap: calc(var(--space-static-xxs-0cgyf1, 4px) * 2 - 1px);
 }
 @media (max-width: 688px) {
-  .awsui_segment-part_8cbea_o8jty_308:not(#\9) {
+  .awsui_segment-part_8cbea_1cdc3_308:not(#\9) {
     display: none;
   }
 }
-.awsui_select_8cbea_o8jty_251:not(#\9) {
+.awsui_select_8cbea_1cdc3_251:not(#\9) {
   display: none;
 }
 @media (max-width: 688px) {
-  .awsui_select_8cbea_o8jty_251:not(#\9) {
+  .awsui_select_8cbea_1cdc3_251:not(#\9) {
     display: block;
   }
 }
-.awsui_segment-count-2_8cbea_o8jty_343:not(#\9) {
+.awsui_segment-count-2_8cbea_1cdc3_343:not(#\9) {
   grid-template-columns: repeat(2, auto);
 }
-.awsui_segment-count-3_8cbea_o8jty_347:not(#\9) {
+.awsui_segment-count-3_8cbea_1cdc3_347:not(#\9) {
   grid-template-columns: repeat(3, auto);
 }
-.awsui_segment-count-4_8cbea_o8jty_351:not(#\9) {
+.awsui_segment-count-4_8cbea_1cdc3_351:not(#\9) {
   grid-template-columns: repeat(4, auto);
 }
-.awsui_segment-count-5_8cbea_o8jty_355:not(#\9) {
+.awsui_segment-count-5_8cbea_1cdc3_355:not(#\9) {
   grid-template-columns: repeat(5, auto);
 }
-.awsui_segment-count-6_8cbea_o8jty_359:not(#\9) {
+.awsui_segment-count-6_8cbea_1cdc3_359:not(#\9) {
   grid-template-columns: repeat(6, auto);
 }
-.awsui_disabled-reason-tooltip_8cbea_o8jty_363:not(#\9) {
+.awsui_disabled-reason-tooltip_8cbea_1cdc3_363:not(#\9) {
   /* used in test-utils or tests */
 }

package/lib/internal/template/segmented-control/styles.selectors.js CHANGED Viewed

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment": "awsui_segment_8cbea_o8jty_161",
-  "refresh": "awsui_refresh_8cbea_o8jty_188",
-  "disabled": "awsui_disabled_8cbea_o8jty_194",
-  "selected": "awsui_selected_8cbea_o8jty_251",
-  "icon": "awsui_icon_8cbea_o8jty_261",
-  "with-text": "awsui_with-text_8cbea_o8jty_265",
-  "with-no-text": "awsui_with-no-text_8cbea_o8jty_271",
-  "root": "awsui_root_8cbea_o8jty_276",
-  "segment-part": "awsui_segment-part_8cbea_o8jty_308",
-  "select": "awsui_select_8cbea_o8jty_251",
-  "segment-count-2": "awsui_segment-count-2_8cbea_o8jty_343",
-  "segment-count-3": "awsui_segment-count-3_8cbea_o8jty_347",
-  "segment-count-4": "awsui_segment-count-4_8cbea_o8jty_351",
-  "segment-count-5": "awsui_segment-count-5_8cbea_o8jty_355",
-  "segment-count-6": "awsui_segment-count-6_8cbea_o8jty_359",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_o8jty_363"
+  "segment": "awsui_segment_8cbea_1cdc3_161",
+  "refresh": "awsui_refresh_8cbea_1cdc3_188",
+  "disabled": "awsui_disabled_8cbea_1cdc3_194",
+  "selected": "awsui_selected_8cbea_1cdc3_251",
+  "icon": "awsui_icon_8cbea_1cdc3_261",
+  "with-text": "awsui_with-text_8cbea_1cdc3_265",
+  "with-no-text": "awsui_with-no-text_8cbea_1cdc3_271",
+  "root": "awsui_root_8cbea_1cdc3_276",
+  "segment-part": "awsui_segment-part_8cbea_1cdc3_308",
+  "select": "awsui_select_8cbea_1cdc3_251",
+  "segment-count-2": "awsui_segment-count-2_8cbea_1cdc3_343",
+  "segment-count-3": "awsui_segment-count-3_8cbea_1cdc3_347",
+  "segment-count-4": "awsui_segment-count-4_8cbea_1cdc3_351",
+  "segment-count-5": "awsui_segment-count-5_8cbea_1cdc3_355",
+  "segment-count-6": "awsui_segment-count-6_8cbea_1cdc3_359",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1cdc3_363"
 };

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

	@@ -1 +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"}
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;AA6FzF,QAAA,MAAM,aAAa,GAAI,6GASpB,kBAAkB,gBA8BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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;AAIrC,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,GAKX,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,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;~~QAC7B~~,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;~~YAC1B~~,~~IAAI~~,~~CAAC~~,~~CAAC~~,CAAC,IAAI,~~CAAC~~,CAAC,CAAC,~~oBAAC~~,~~kBAAkB~~,~~IAAC~~,IAAI,~~EAAE~~,~~MAAM~~,EAAE,~~aAAa~~,~~EAAE~~,~~mBAAmB~~,~~GAAI;YACtF~~,~~WAAW~~,~~KAAK~~,~~UAAU~~,~~CAAC~~,CAAC,CAAC,~~MAAM~~,~~CAAC~~,~~CAAC~~,~~CAAC,~~4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,~~IAAI~~,~~EAAC~~,~~MAAM~~,~~GAAG~~,~~CAClF~~;~~QACL~~,~~WAAW~~,~~KAAK~~,~~UAAU~~,~~CAAC~~,CAAC,~~CAAC~~,~~CAC5B~~,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,~~CAChD~~,~~CAAC~~,~~CAAC~~,CAAC,~~CACF~~,6BAAK,SAAS,EAAE,MAAM,CAAC,~~mBAAmB~~,~~CAAC,~~IAAG,MAAM,CAAO~~,CAC5D~~;~~QACA~~,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,~~CACxD~~,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,MAAM,EACN,mBAAmB,EACnB,MAAM,EACN,OAAO,EACP,WAAW,GAC+C,EAAE,EAAE;IAC9D,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,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,CAC9C,CACJ,CACG;QACL,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,CAChD,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,GAAG,UAAU,EACxB,UAAU,EACV,SAAS,EACT,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,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,IAAC,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,GAAI,CACzF,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,GACxB,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'> & 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"]}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"
 };