npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1211 → 3.0.1213 - Mend

@cloudscape-design/components-themeable 3.0.1211 → 3.0.1213

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 (74) hide show

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

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
@@ -16,6 +16,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { useFunnelChangeEvent } from './analytics';
 import WizardForm, { STEP_NAME_SELECTOR } from './wizard-form';
 import WizardNavigation from './wizard-navigation';
+import WizardStepNavigationExpandable from './wizard-step-navigation-expandable';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 export default function InternalWizard({ steps, activeStepIndex: controlledActiveStepIndex, submitButtonText, isLoadingNextStep = false, allowSkipTo = false, customPrimaryActions, secondaryActions, onCancel, onSubmit, onNavigate, __internalRootRef, __injectAnalyticsComponentMetadata = false, ...rest }) {
@@ -35,6 +36,7 @@ export default function InternalWizard({ steps, activeStepIndex: controlledActiv
     farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);
     const isVisualRefresh = useVisualRefresh();
     const isLastStep = actualActiveStepIndex >= steps.length - 1;
+    const [isStepNavigationExpanded, setIsStepNavigationExpanded] = useState(false);
     const navigationEvent = (requestedStepIndex, reason) => {
         if (funnelInteractionId) {
             const stepName = getTextFromSelector(STEP_NAME_SELECTOR);
@@ -106,7 +108,9 @@ export default function InternalWizard({ steps, activeStepIndex: controlledActiv
             : {}) },
         React.createElement("div", { className: clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
             React.createElement(WizardNavigation, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo: allowSkipTo, hidden: smallContainer, i18nStrings: i18nStrings, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps }),
+            smallContainer && (React.createElement("div", { className: styles['collapsed-steps'] },
+                React.createElement(WizardStepNavigationExpandable, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo: allowSkipTo, i18nStrings: i18nStrings, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps, expanded: isStepNavigationExpanded, onExpandChange: setIsStepNavigationExpanded }))),
             React.createElement("div", { className: clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
-                React.createElement(WizardForm, { steps: steps, showCollapsedSteps: smallContainer, i18nStrings: i18nStrings, submitButtonText: submitButtonText, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo: allowSkipTo, customPrimaryActions: customPrimaryActions, secondaryActions: secondaryActions, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onSkipToClick: onSkipToClick, onPrimaryClick: onPrimaryClick })))));
+                React.createElement(WizardForm, { steps: steps, i18nStrings: i18nStrings, submitButtonText: submitButtonText, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo: allowSkipTo, customPrimaryActions: customPrimaryActions, secondaryActions: secondaryActions, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onSkipToClick: onSkipToClick, onPrimaryClick: onPrimaryClick })))));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/wizard/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/wizard/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FUNNEL_KEY,\n FUNNEL_KEY_FUNNEL_NAME,\n FUNNEL_KEY_STEP_NAME,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useFunnelChangeEvent } from './analytics';\nimport { GeneratedAnalyticsMetadataWizardComponent } from './analytics-metadata/interfaces';\nimport { WizardProps } from './interfaces';\nimport WizardForm, { STEP_NAME_SELECTOR } from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalWizardProps = WizardProps &\n InternalBaseComponentProps & {\n __injectAnalyticsComponentMetadata?: boolean;\n };\n\nexport default function InternalWizard({\n steps,\n activeStepIndex: controlledActiveStepIndex,\n submitButtonText,\n isLoadingNextStep = false,\n allowSkipTo = false,\n customPrimaryActions,\n secondaryActions,\n onCancel,\n onSubmit,\n onNavigate,\n __internalRootRef,\n __injectAnalyticsComponentMetadata = false,\n ...rest\n}: InternalWizardProps) {\n const baseProps = getBaseProps(rest);\n\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n\n const smallContainer = breakpoint === 'default';\n\n const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n componentName: 'Wizard',\n controlledProp: 'activeStepIndex',\n changeHandler: 'onNavigate',\n });\n const { funnelIdentifier, funnelInteractionId, funnelSubmit, funnelCancel, funnelProps, funnelNextOrSubmitAttempt } =\n useFunnel();\n const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n const isVisualRefresh = useVisualRefresh();\n const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n if (funnelInteractionId) {\n const stepName = getTextFromSelector(STEP_NAME_SELECTOR);\n\n FunnelMetrics.funnelStepNavigation({\n navigationType: reason,\n funnelInteractionId,\n stepNumber: actualActiveStepIndex + 1,\n stepName,\n stepNameSelector: STEP_NAME_SELECTOR,\n destinationStepNumber: requestedStepIndex + 1,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n setActiveStepIndex(requestedStepIndex);\n fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n };\n const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n const onCancelClick = () => {\n funnelCancel();\n fireNonCancelableEvent(onCancel);\n };\n const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n const onPrimaryClick = () => {\n funnelNextOrSubmitAttempt();\n\n if (isLastStep) {\n funnelSubmit();\n fireNonCancelableEvent(onSubmit);\n } else {\n navigationEvent(actualActiveStepIndex + 1, 'next');\n }\n };\n\n useFunnelChangeEvent(funnelInteractionId, funnelIdentifier, steps);\n\n const i18n = useInternalI18n('wizard');\n const skipToButtonLabel = i18n(\n 'i18nStrings.skipToButtonLabel',\n rest.i18nStrings?.skipToButtonLabel,\n format => task => format({ task__title: task.title })\n );\n\n const i18nStrings: WizardProps.I18nStrings = {\n ...rest.i18nStrings,\n skipToButtonLabel,\n stepNumberLabel: i18n(\n 'i18nStrings.stepNumberLabel',\n rest.i18nStrings?.stepNumberLabel,\n format => stepNumber => format({ stepNumber })\n ),\n collapsedStepsLabel: i18n(\n 'i18nStrings.collapsedStepsLabel',\n rest.i18nStrings?.collapsedStepsLabel,\n format => (stepNumber, stepsCount) => format({ stepNumber, stepsCount })\n ),\n navigationAriaLabel: i18n('i18nStrings.navigationAriaLabel', rest.i18nStrings?.navigationAriaLabel),\n cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings?.cancelButton),\n previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings?.previousButton),\n nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings?.nextButton),\n optional: i18n('i18nStrings.optional', rest.i18nStrings?.optional),\n };\n\n if (activeStepIndex && activeStepIndex >= steps.length) {\n warnOnce(\n 'Wizard',\n `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n steps.length\n } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n );\n }\n\n if (allowSkipTo && !skipToButtonLabel) {\n warnOnce(\n 'Wizard',\n `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n );\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataWizardComponent = {\n name: 'awsui.Wizard',\n label: {\n root: 'body',\n selector: `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_FUNNEL_NAME}\"]`,\n },\n properties: {\n stepsCount: `${(steps \|\| []).length}`,\n activeStepIndex: `${activeStepIndex}`,\n activeStepLabel: `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_STEP_NAME}\"]`,\n ...(rest.analyticsMetadata \|\| {}),\n },\n };\n\n return (\n <div\n {...baseProps}\n {...funnelProps}\n ref={ref}\n className={clsx(styles.root, analyticsSelectors.root, baseProps.className)}\n {...(__injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })\n : {})}\n >\n <div\n className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardNavigation\n activeStepIndex={actualActiveStepIndex}\n farthestStepIndex={farthestStepIndex.current}\n allowSkipTo={allowSkipTo}\n hidden={smallContainer}\n i18nStrings={i18nStrings}\n isLoadingNextStep={isLoadingNextStep}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n steps={steps}\n />\n <div\n className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardForm\n steps={steps}\n showCollapsedSteps={smallContainer}\n i18nStrings={i18nStrings}\n submitButtonText={submitButtonText}\n activeStepIndex={actualActiveStepIndex}\n isPrimaryLoading={isLoadingNextStep}\n allowSkipTo={allowSkipTo}\n customPrimaryActions={customPrimaryActions}\n secondaryActions={secondaryActions}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onSkipToClick={onSkipToClick}\n onPrimaryClick={onPrimaryClick}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/wizard/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, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FUNNEL_KEY,\n FUNNEL_KEY_FUNNEL_NAME,\n FUNNEL_KEY_STEP_NAME,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useFunnelChangeEvent } from './analytics';\nimport { GeneratedAnalyticsMetadataWizardComponent } from './analytics-metadata/interfaces';\nimport { WizardProps } from './interfaces';\nimport WizardForm, { STEP_NAME_SELECTOR } from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\nimport WizardStepNavigationExpandable from './wizard-step-navigation-expandable';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalWizardProps = WizardProps &\n InternalBaseComponentProps & {\n __injectAnalyticsComponentMetadata?: boolean;\n };\n\nexport default function InternalWizard({\n steps,\n activeStepIndex: controlledActiveStepIndex,\n submitButtonText,\n isLoadingNextStep = false,\n allowSkipTo = false,\n customPrimaryActions,\n secondaryActions,\n onCancel,\n onSubmit,\n onNavigate,\n __internalRootRef,\n __injectAnalyticsComponentMetadata = false,\n ...rest\n}: InternalWizardProps) {\n const baseProps = getBaseProps(rest);\n\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n const smallContainer = breakpoint === 'default';\n\n const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n componentName: 'Wizard',\n controlledProp: 'activeStepIndex',\n changeHandler: 'onNavigate',\n });\n const { funnelIdentifier, funnelInteractionId, funnelSubmit, funnelCancel, funnelProps, funnelNextOrSubmitAttempt } =\n useFunnel();\n const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n const isVisualRefresh = useVisualRefresh();\n const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n const [isStepNavigationExpanded, setIsStepNavigationExpanded] = useState(false);\n\n const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n if (funnelInteractionId) {\n const stepName = getTextFromSelector(STEP_NAME_SELECTOR);\n\n FunnelMetrics.funnelStepNavigation({\n navigationType: reason,\n funnelInteractionId,\n stepNumber: actualActiveStepIndex + 1,\n stepName,\n stepNameSelector: STEP_NAME_SELECTOR,\n destinationStepNumber: requestedStepIndex + 1,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n setActiveStepIndex(requestedStepIndex);\n fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n };\n const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n const onCancelClick = () => {\n funnelCancel();\n fireNonCancelableEvent(onCancel);\n };\n const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n const onPrimaryClick = () => {\n funnelNextOrSubmitAttempt();\n\n if (isLastStep) {\n funnelSubmit();\n fireNonCancelableEvent(onSubmit);\n } else {\n navigationEvent(actualActiveStepIndex + 1, 'next');\n }\n };\n\n useFunnelChangeEvent(funnelInteractionId, funnelIdentifier, steps);\n\n const i18n = useInternalI18n('wizard');\n const skipToButtonLabel = i18n(\n 'i18nStrings.skipToButtonLabel',\n rest.i18nStrings?.skipToButtonLabel,\n format => task => format({ task__title: task.title })\n );\n\n const i18nStrings: WizardProps.I18nStrings = {\n ...rest.i18nStrings,\n skipToButtonLabel,\n stepNumberLabel: i18n(\n 'i18nStrings.stepNumberLabel',\n rest.i18nStrings?.stepNumberLabel,\n format => stepNumber => format({ stepNumber })\n ),\n collapsedStepsLabel: i18n(\n 'i18nStrings.collapsedStepsLabel',\n rest.i18nStrings?.collapsedStepsLabel,\n format => (stepNumber, stepsCount) => format({ stepNumber, stepsCount })\n ),\n navigationAriaLabel: i18n('i18nStrings.navigationAriaLabel', rest.i18nStrings?.navigationAriaLabel),\n cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings?.cancelButton),\n previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings?.previousButton),\n nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings?.nextButton),\n optional: i18n('i18nStrings.optional', rest.i18nStrings?.optional),\n };\n\n if (activeStepIndex && activeStepIndex >= steps.length) {\n warnOnce(\n 'Wizard',\n `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n steps.length\n } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n );\n }\n\n if (allowSkipTo && !skipToButtonLabel) {\n warnOnce(\n 'Wizard',\n `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n );\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataWizardComponent = {\n name: 'awsui.Wizard',\n label: {\n root: 'body',\n selector: `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_FUNNEL_NAME}\"]`,\n },\n properties: {\n stepsCount: `${(steps \|\| []).length}`,\n activeStepIndex: `${activeStepIndex}`,\n activeStepLabel: `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_STEP_NAME}\"]`,\n ...(rest.analyticsMetadata \|\| {}),\n },\n };\n\n return (\n <div\n {...baseProps}\n {...funnelProps}\n ref={ref}\n className={clsx(styles.root, analyticsSelectors.root, baseProps.className)}\n {...(__injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })\n : {})}\n >\n <div\n className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardNavigation\n activeStepIndex={actualActiveStepIndex}\n farthestStepIndex={farthestStepIndex.current}\n allowSkipTo={allowSkipTo}\n hidden={smallContainer}\n i18nStrings={i18nStrings}\n isLoadingNextStep={isLoadingNextStep}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n steps={steps}\n />\n {smallContainer && (\n <div className={styles['collapsed-steps']}>\n <WizardStepNavigationExpandable\n activeStepIndex={actualActiveStepIndex}\n farthestStepIndex={farthestStepIndex.current}\n allowSkipTo={allowSkipTo}\n i18nStrings={i18nStrings}\n isLoadingNextStep={isLoadingNextStep}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n steps={steps}\n expanded={isStepNavigationExpanded}\n onExpandChange={setIsStepNavigationExpanded}\n />\n </div>\n )}\n <div\n className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardForm\n steps={steps}\n i18nStrings={i18nStrings}\n submitButtonText={submitButtonText}\n activeStepIndex={actualActiveStepIndex}\n isPrimaryLoading={isLoadingNextStep}\n allowSkipTo={allowSkipTo}\n customPrimaryActions={customPrimaryActions}\n secondaryActions={secondaryActions}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onSkipToClick={onSkipToClick}\n onPrimaryClick={onPrimaryClick}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}

package/lib/internal/template/wizard/styles.css.js CHANGED Viewed

@@ -1,35 +1,35 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1xupv_1vmie_145",
-  "wizard": "awsui_wizard_1xupv_1vmie_177",
-  "refresh": "awsui_refresh_1xupv_1vmie_177",
-  "small-container": "awsui_small-container_1xupv_1vmie_184",
-  "navigation": "awsui_navigation_1xupv_1vmie_193",
-  "number": "awsui_number_1xupv_1vmie_226",
-  "circle": "awsui_circle_1xupv_1vmie_242",
-  "title": "awsui_title_1xupv_1vmie_253",
-  "active": "awsui_active_1xupv_1vmie_284",
-  "disabled": "awsui_disabled_1xupv_1vmie_295",
-  "enabled": "awsui_enabled_1xupv_1vmie_305",
-  "form": "awsui_form_1xupv_1vmie_349",
-  "form-header": "awsui_form-header_1xupv_1vmie_354",
-  "form-header-content": "awsui_form-header-content_1xupv_1vmie_369",
-  "form-component": "awsui_form-component_1xupv_1vmie_373",
-  "hidden": "awsui_hidden_1xupv_1vmie_387",
-  "collapsed-steps": "awsui_collapsed-steps_1xupv_1vmie_391",
-  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1vmie_396",
-  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1vmie_400",
-  "form-header-component": "awsui_form-header-component_1xupv_1vmie_400",
-  "navigation-link": "awsui_navigation-link_1xupv_1vmie_416",
-  "navigation-link-item": "awsui_navigation-link-item_1xupv_1vmie_417",
-  "navigation-link-label": "awsui_navigation-link-label_1xupv_1vmie_418",
-  "navigation-link-active": "awsui_navigation-link-active_1xupv_1vmie_422",
-  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1vmie_427",
-  "cancel-button": "awsui_cancel-button_1xupv_1vmie_431",
-  "previous-button": "awsui_previous-button_1xupv_1vmie_432",
-  "primary-button": "awsui_primary-button_1xupv_1vmie_433",
-  "skip-to-button": "awsui_skip-to-button_1xupv_1vmie_434",
-  "action-buttons": "awsui_action-buttons_1xupv_1vmie_438"
+  "root": "awsui_root_1xupv_1rebv_145",
+  "wizard": "awsui_wizard_1xupv_1rebv_177",
+  "refresh": "awsui_refresh_1xupv_1rebv_177",
+  "small-container": "awsui_small-container_1xupv_1rebv_184",
+  "navigation": "awsui_navigation_1xupv_1rebv_198",
+  "number": "awsui_number_1xupv_1rebv_231",
+  "circle": "awsui_circle_1xupv_1rebv_247",
+  "title": "awsui_title_1xupv_1rebv_258",
+  "active": "awsui_active_1xupv_1rebv_289",
+  "disabled": "awsui_disabled_1xupv_1rebv_300",
+  "enabled": "awsui_enabled_1xupv_1rebv_310",
+  "form": "awsui_form_1xupv_1rebv_354",
+  "form-header": "awsui_form-header_1xupv_1rebv_359",
+  "form-header-content": "awsui_form-header-content_1xupv_1rebv_374",
+  "form-component": "awsui_form-component_1xupv_1rebv_378",
+  "hidden": "awsui_hidden_1xupv_1rebv_394",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_1rebv_398",
+  "collapsed-steps-navigation": "awsui_collapsed-steps-navigation_1xupv_1rebv_404",
+  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1rebv_413",
+  "form-header-component": "awsui_form-header-component_1xupv_1rebv_413",
+  "navigation-link": "awsui_navigation-link_1xupv_1rebv_429",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_1rebv_430",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_1rebv_431",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_1rebv_435",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1rebv_440",
+  "cancel-button": "awsui_cancel-button_1xupv_1rebv_444",
+  "previous-button": "awsui_previous-button_1xupv_1rebv_445",
+  "primary-button": "awsui_primary-button_1xupv_1rebv_446",
+  "skip-to-button": "awsui_skip-to-button_1xupv_1rebv_447",
+  "action-buttons": "awsui_action-buttons_1xupv_1rebv_451"
 };

package/lib/internal/template/wizard/styles.scoped.css CHANGED Viewed

@@ -142,7 +142,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_1xupv_1vmie_145:not(#\9) {
+.awsui_root_1xupv_1rebv_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -174,30 +174,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
-.awsui_wizard_1xupv_1vmie_177.awsui_refresh_1xupv_1vmie_177:not(#\9) {
+.awsui_wizard_1xupv_1rebv_177.awsui_refresh_1xupv_1rebv_177:not(#\9) {
   column-gap: var(--space-xl-4dmkh1, 24px);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: auto 1fr;
   row-gap: var(--space-scaled-xxs-jatbiv, 4px);
 }
-.awsui_wizard_1xupv_1vmie_177.awsui_refresh_1xupv_1vmie_177.awsui_small-container_1xupv_1vmie_184:not(#\9) {
+.awsui_wizard_1xupv_1rebv_177.awsui_refresh_1xupv_1rebv_177.awsui_small-container_1xupv_1rebv_184:not(#\9) {
   grid-template-columns: minmax(0, 1fr) 0;
-  row-gap: var(--space-scaled-l-66n9sr, 20px);
+  grid-template-rows: auto auto 1fr;
+  row-gap: var(--space-scaled-xxs-jatbiv, 4px);
 }
-.awsui_wizard_1xupv_1vmie_177:not(#\9):not(.awsui_refresh_1xupv_1vmie_177) {
+.awsui_wizard_1xupv_1rebv_177:not(#\9):not(.awsui_refresh_1xupv_1rebv_177) {
   display: flex;
 }
+.awsui_wizard_1xupv_1rebv_177:not(#\9):not(.awsui_refresh_1xupv_1rebv_177).awsui_small-container_1xupv_1rebv_184 {
+  flex-direction: column;
+  gap: var(--space-s-4a5hs8, 12px);
+}
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177:not(#\9) {
   grid-column: 1;
   grid-row: 1/span 2;
   padding-block-start: calc(var(--space-xs-kw7k3v, 8px) + var(--space-scaled-xxs-jatbiv, 4px));
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177:not(#\9) {
   position: relative;
   margin-block: 0;
   margin-inline: 0;
@@ -207,7 +212,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 260px;
   box-sizing: border-box;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li:not(#\9) {
   display: grid;
   column-gap: var(--space-xs-kw7k3v, 8px);
   grid-template-columns: var(--space-l-3cws6j, 20px) 1fr;
@@ -215,7 +220,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: 0;
   padding-inline: 0;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li > hr:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li > hr:not(#\9) {
   background-color: var(--color-border-divider-default-ipvpev, #eaeded);
   border-block: 0;
   border-inline: 0;
@@ -223,13 +228,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
   inline-size: var(--space-xxxs-3w1kr2, 2px);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li > .awsui_number_1xupv_1vmie_226:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li > .awsui_number_1xupv_1rebv_231:not(#\9) {
   color: var(--color-text-small-m20sr1, #687078);
   font-size: var(--font-size-body-s-psgqn2, 12px);
   grid-column: 2;
   grid-row: 1;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li > a:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li > a:not(#\9) {
   align-items: start;
   column-gap: var(--space-xs-kw7k3v, 8px);
   cursor: pointer;
@@ -239,7 +244,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-row: 2;
   grid-template-columns: var(--space-l-3cws6j, 20px) 1fr;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li > a > .awsui_circle_1xupv_1vmie_242:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li > a > .awsui_circle_1xupv_1rebv_247:not(#\9) {
   border-start-start-radius: 100%;
   border-start-end-radius: 100%;
   border-end-start-radius: 100%;
@@ -250,12 +255,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: 6px;
   inline-size: 10px;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li > a > .awsui_title_1xupv_1vmie_253:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li > a > .awsui_title_1xupv_1rebv_258:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   grid-column: 2;
 }
-body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li > a:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li > a:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-c5423y, 5px auto Highlight);
   outline-offset: 2px;
@@ -266,58 +271,58 @@ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_1vmie_193.awsui_refr
   border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-woh62o, 0px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li:not(#\9):first-child > hr {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li:not(#\9):first-child > hr {
   grid-row: 2/span 2;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li:not(#\9):not(:first-child) > .awsui_number_1xupv_1vmie_226 {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li:not(#\9):not(:first-child) > .awsui_number_1xupv_1rebv_231 {
   margin-block-start: var(--space-m-n2lypl, 16px);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li:not(#\9):last-child > hr {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li:not(#\9):last-child > hr {
   grid-row: 1;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li:not(#\9):only-of-type > hr {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li:not(#\9):only-of-type > hr {
   display: none;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li:not(#\9):not(:first-child):not(:last-child) > hr {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li:not(#\9):not(:first-child):not(:last-child) > hr {
   grid-row: 1/span 3;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_active_1xupv_1vmie_284 > a:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_active_1xupv_1rebv_289 > a:not(#\9) {
   cursor: text;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_active_1xupv_1vmie_284 > a > .awsui_circle_1xupv_1vmie_242:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_active_1xupv_1rebv_289 > a > .awsui_circle_1xupv_1rebv_247:not(#\9) {
   background-color: var(--color-background-control-checked-se0x0e, #0073bb);
   box-shadow: 0 0 0 3px var(--color-background-container-content-aemn43, #ffffff), 0 0 0 5px var(--color-background-control-checked-se0x0e, #0073bb), 0 0 0 7px var(--color-background-container-content-aemn43, #ffffff);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_active_1xupv_1vmie_284 > a > .awsui_title_1xupv_1vmie_253:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_active_1xupv_1rebv_289 > a > .awsui_title_1xupv_1rebv_258:not(#\9) {
   color: var(--color-background-control-checked-se0x0e, #0073bb);
   font-weight: 700;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_disabled_1xupv_1vmie_295 > a:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_disabled_1xupv_1rebv_300 > a:not(#\9) {
   cursor: text;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_disabled_1xupv_1vmie_295 > a > .awsui_circle_1xupv_1vmie_242:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_disabled_1xupv_1rebv_300 > a > .awsui_circle_1xupv_1rebv_247:not(#\9) {
   background-color: var(--color-background-container-content-aemn43, #ffffff);
   box-shadow: 0 0 0 2px var(--color-text-interactive-disabled-xwt2jl, #aab7b8), 0 0 0 4px var(--color-background-container-content-aemn43, #ffffff);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_disabled_1xupv_1vmie_295 > a > .awsui_title_1xupv_1vmie_253:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_disabled_1xupv_1rebv_300 > a > .awsui_title_1xupv_1rebv_258:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_enabled_1xupv_1vmie_305 > a > .awsui_circle_1xupv_1vmie_242:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_enabled_1xupv_1rebv_310 > a > .awsui_circle_1xupv_1rebv_247:not(#\9) {
   background-color: var(--color-text-interactive-default-qwoe3g, #545b64);
   box-shadow: 0 0 0 2px var(--color-text-interactive-default-qwoe3g, #545b64), 0 0 0 4px var(--color-background-container-content-aemn43, #ffffff);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_enabled_1xupv_1vmie_305 > a > .awsui_title_1xupv_1vmie_253:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_enabled_1xupv_1rebv_310 > a > .awsui_title_1xupv_1rebv_258:not(#\9) {
   color: var(--color-text-interactive-default-qwoe3g, #545b64);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_enabled_1xupv_1vmie_305 > a:not(#\9):hover > .awsui_circle_1xupv_1vmie_242 {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_enabled_1xupv_1rebv_310 > a:not(#\9):hover > .awsui_circle_1xupv_1rebv_247 {
   background-color: var(--color-background-control-checked-se0x0e, #0073bb);
   box-shadow: 0 0 0 2px var(--color-background-control-checked-se0x0e, #0073bb), 0 0 0 4px var(--color-background-container-content-aemn43, #ffffff);
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_refresh_1xupv_1vmie_177 > ul.awsui_refresh_1xupv_1vmie_177 > li.awsui_enabled_1xupv_1vmie_305 > a:not(#\9):hover > .awsui_title_1xupv_1vmie_253 {
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177 > ul.awsui_refresh_1xupv_1rebv_177 > li.awsui_enabled_1xupv_1rebv_310 > a:not(#\9):hover > .awsui_title_1xupv_1rebv_258 {
   color: var(--color-background-control-checked-se0x0e, #0073bb);
 }
-.awsui_navigation_1xupv_1vmie_193:not(#\9):not(.awsui_refresh_1xupv_1vmie_177) {
+.awsui_navigation_1xupv_1rebv_198:not(#\9):not(.awsui_refresh_1xupv_1rebv_177) {
   color: var(--color-text-disabled-bhrk1i, #aab7b8);
   display: inline-block;
   margin-inline-end: calc(2 * var(--space-xxxl-qhelse, 40px));
@@ -327,80 +332,88 @@ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_1vmie_193.awsui_refr
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_navigation_1xupv_1vmie_193:not(#\9):not(.awsui_refresh_1xupv_1vmie_177) > ul:not(.awsui_refresh_1xupv_1vmie_177) {
+.awsui_navigation_1xupv_1rebv_198:not(#\9):not(.awsui_refresh_1xupv_1rebv_177) > ul:not(.awsui_refresh_1xupv_1rebv_177) {
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
   margin-block: 0;
   margin-inline: 0;
 }
-.awsui_navigation_1xupv_1vmie_193:not(#\9):not(.awsui_refresh_1xupv_1vmie_177) > ul:not(.awsui_refresh_1xupv_1vmie_177) > li {
+.awsui_navigation_1xupv_1rebv_198:not(#\9):not(.awsui_refresh_1xupv_1rebv_177) > ul:not(.awsui_refresh_1xupv_1rebv_177) > li {
   min-inline-size: 0;
   word-break: break-word;
   padding-block: 0 var(--space-scaled-m-sw9kcx, 16px);
 }
-.awsui_navigation_1xupv_1vmie_193:not(#\9):not(.awsui_refresh_1xupv_1vmie_177) > ul:not(.awsui_refresh_1xupv_1vmie_177) > li:not(:first-child) {
+.awsui_navigation_1xupv_1rebv_198:not(#\9):not(.awsui_refresh_1xupv_1rebv_177) > ul:not(.awsui_refresh_1xupv_1rebv_177) > li:not(:first-child) {
   margin-block-start: var(--space-scaled-m-sw9kcx, 16px);
 }
-.awsui_navigation_1xupv_1vmie_193:not(#\9):not(.awsui_refresh_1xupv_1vmie_177) > ul:not(.awsui_refresh_1xupv_1vmie_177) > li:not(:last-child) {
+.awsui_navigation_1xupv_1rebv_198:not(#\9):not(.awsui_refresh_1xupv_1rebv_177) > ul:not(.awsui_refresh_1xupv_1rebv_177) > li:not(:last-child) {
   border-block-end: var(--border-divider-list-width-8ggz94, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
 }
-.awsui_form_1xupv_1vmie_349:not(#\9):not(.awsui_refresh_1xupv_1vmie_177) {
+.awsui_form_1xupv_1rebv_354:not(#\9):not(.awsui_refresh_1xupv_1rebv_177) {
   min-inline-size: 0;
   word-break: break-word;
   inline-size: 100%;
 }
-.awsui_form_1xupv_1vmie_349:not(#\9):not(.awsui_refresh_1xupv_1vmie_177) > .awsui_form-header_1xupv_1vmie_354 {
+.awsui_form_1xupv_1rebv_354:not(#\9):not(.awsui_refresh_1xupv_1rebv_177) > .awsui_form-header_1xupv_1rebv_359 {
   position: relative;
   margin-block-end: var(--space-scaled-m-sw9kcx, 16px);
 }
-.awsui_form_1xupv_1vmie_349.awsui_refresh_1xupv_1vmie_177:not(#\9) {
+.awsui_form_1xupv_1rebv_354.awsui_refresh_1xupv_1rebv_177:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: contents;
 }
-.awsui_form_1xupv_1vmie_349.awsui_refresh_1xupv_1vmie_177 > .awsui_form-header_1xupv_1vmie_354:not(#\9) {
+.awsui_form_1xupv_1rebv_354.awsui_refresh_1xupv_1rebv_177 > .awsui_form-header_1xupv_1rebv_359:not(#\9) {
   grid-column: 2;
   grid-row: 1;
   color: var(--color-text-body-default-5qid0u, #16191f);
 }
-.awsui_form_1xupv_1vmie_349.awsui_refresh_1xupv_1vmie_177 > .awsui_form-header_1xupv_1vmie_354 > .awsui_form-header-content_1xupv_1vmie_369:not(#\9) {
+.awsui_form_1xupv_1rebv_354.awsui_refresh_1xupv_1rebv_177 > .awsui_form-header_1xupv_1rebv_359 > .awsui_form-header-content_1xupv_1rebv_374:not(#\9) {
   padding-block-start: calc(var(--space-xl-4dmkh1, 24px) + var(--space-scaled-xxxs-prgw5k, 2px));
   padding-block-end: var(--space-scaled-s-gjhvjd, 12px);
 }
-.awsui_form_1xupv_1vmie_349.awsui_refresh_1xupv_1vmie_177 > .awsui_form-component_1xupv_1vmie_373:not(#\9) {
+.awsui_form_1xupv_1rebv_354.awsui_refresh_1xupv_1rebv_177 > .awsui_form-component_1xupv_1rebv_378:not(#\9) {
   grid-column: 2;
   grid-row: 2;
 }
-.awsui_form_1xupv_1vmie_349.awsui_refresh_1xupv_1vmie_177.awsui_small-container_1xupv_1vmie_184 > .awsui_form-header_1xupv_1vmie_354:not(#\9) {
+.awsui_form_1xupv_1rebv_354.awsui_refresh_1xupv_1rebv_177.awsui_small-container_1xupv_1rebv_184 > .awsui_form-header_1xupv_1rebv_359:not(#\9) {
   grid-column: 1/span 2;
+  grid-row: 2;
 }
-.awsui_form_1xupv_1vmie_349.awsui_refresh_1xupv_1vmie_177.awsui_small-container_1xupv_1vmie_184 > .awsui_form-header_1xupv_1vmie_354 > .awsui_form-header-content_1xupv_1vmie_369:not(#\9) {
+.awsui_form_1xupv_1rebv_354.awsui_refresh_1xupv_1rebv_177.awsui_small-container_1xupv_1rebv_184 > .awsui_form-header_1xupv_1rebv_359 > .awsui_form-header-content_1xupv_1rebv_374:not(#\9) {
   padding-block-start: 0;
 }
-.awsui_form_1xupv_1vmie_349.awsui_refresh_1xupv_1vmie_177.awsui_small-container_1xupv_1vmie_184 > .awsui_form-component_1xupv_1vmie_373:not(#\9) {
+.awsui_form_1xupv_1rebv_354.awsui_refresh_1xupv_1rebv_177.awsui_small-container_1xupv_1rebv_184 > .awsui_form-component_1xupv_1rebv_378:not(#\9) {
   grid-column: 1/span 2;
+  grid-row: 3;
 }
-.awsui_navigation_1xupv_1vmie_193.awsui_hidden_1xupv_1vmie_387:not(#\9) {
+.awsui_navigation_1xupv_1rebv_198.awsui_hidden_1xupv_1rebv_394:not(#\9) {
   display: none;
 }
-.awsui_collapsed-steps_1xupv_1vmie_391:not(#\9) {
-  color: var(--color-text-heading-secondary-26seqv, #545b64);
-  font-weight: 700;
-  padding-block-start: var(--space-scaled-xxs-jatbiv, 4px);
+.awsui_collapsed-steps_1xupv_1rebv_398:not(#\9) {
+  grid-column: 1/span 2;
+  grid-row: 1;
 }
-.awsui_collapsed-steps-hidden_1xupv_1vmie_396:not(#\9) {
-  display: none;
+/* Override fixed sidebar width for expandable navigation */
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177.awsui_collapsed-steps-navigation_1xupv_1rebv_404:not(#\9) {
+  grid-column: unset;
+  grid-row: unset;
+  padding-block-start: 0;
+}
+.awsui_navigation_1xupv_1rebv_198.awsui_refresh_1xupv_1rebv_177.awsui_collapsed-steps-navigation_1xupv_1rebv_404 > ul.awsui_refresh_1xupv_1rebv_177:not(#\9) {
+  inline-size: 100%;
 }
-.awsui_form-header-component-wrapper_1xupv_1vmie_400:not(#\9) {
+.awsui_form-header-component-wrapper_1xupv_1rebv_413:not(#\9) {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_1vmie_400:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_1rebv_413:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-c5423y, 5px auto Highlight);
   outline-offset: 2px;
@@ -412,30 +425,30 @@ body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_1
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-woh62o, 0px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_form-header-component_1xupv_1vmie_400:not(#\9),
-.awsui_navigation-link_1xupv_1vmie_416:not(#\9),
-.awsui_navigation-link-item_1xupv_1vmie_417:not(#\9),
-.awsui_navigation-link-label_1xupv_1vmie_418:not(#\9) {
+.awsui_form-header-component_1xupv_1rebv_413:not(#\9),
+.awsui_navigation-link_1xupv_1rebv_429:not(#\9),
+.awsui_navigation-link-item_1xupv_1rebv_430:not(#\9),
+.awsui_navigation-link-label_1xupv_1rebv_431:not(#\9) {
   /* used in test-utils */
 }
-.awsui_navigation-link-active_1xupv_1vmie_422:not(#\9) {
+.awsui_navigation-link-active_1xupv_1rebv_435:not(#\9) {
   font-weight: 700;
   color: var(--color-text-body-default-5qid0u, #16191f);
 }
-.awsui_navigation-link-disabled_1xupv_1vmie_427:not(#\9) {
+.awsui_navigation-link-disabled_1xupv_1rebv_440:not(#\9) {
   color: var(--color-text-status-inactive-n7p1uq, #687078);
 }
-.awsui_cancel-button_1xupv_1vmie_431:not(#\9),
-.awsui_previous-button_1xupv_1vmie_432:not(#\9),
-.awsui_primary-button_1xupv_1vmie_433:not(#\9),
-.awsui_skip-to-button_1xupv_1vmie_434:not(#\9) {
+.awsui_cancel-button_1xupv_1rebv_444:not(#\9),
+.awsui_previous-button_1xupv_1rebv_445:not(#\9),
+.awsui_primary-button_1xupv_1rebv_446:not(#\9),
+.awsui_skip-to-button_1xupv_1rebv_447:not(#\9) {
   /* used in test-utils */
 }
-.awsui_action-buttons_1xupv_1vmie_438:not(#\9) {
+.awsui_action-buttons_1xupv_1rebv_451:not(#\9) {
   display: flex;
   justify-content: flex-end;
 }

package/lib/internal/template/wizard/styles.selectors.js CHANGED Viewed

@@ -2,35 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1xupv_1vmie_145",
-  "wizard": "awsui_wizard_1xupv_1vmie_177",
-  "refresh": "awsui_refresh_1xupv_1vmie_177",
-  "small-container": "awsui_small-container_1xupv_1vmie_184",
-  "navigation": "awsui_navigation_1xupv_1vmie_193",
-  "number": "awsui_number_1xupv_1vmie_226",
-  "circle": "awsui_circle_1xupv_1vmie_242",
-  "title": "awsui_title_1xupv_1vmie_253",
-  "active": "awsui_active_1xupv_1vmie_284",
-  "disabled": "awsui_disabled_1xupv_1vmie_295",
-  "enabled": "awsui_enabled_1xupv_1vmie_305",
-  "form": "awsui_form_1xupv_1vmie_349",
-  "form-header": "awsui_form-header_1xupv_1vmie_354",
-  "form-header-content": "awsui_form-header-content_1xupv_1vmie_369",
-  "form-component": "awsui_form-component_1xupv_1vmie_373",
-  "hidden": "awsui_hidden_1xupv_1vmie_387",
-  "collapsed-steps": "awsui_collapsed-steps_1xupv_1vmie_391",
-  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1vmie_396",
-  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1vmie_400",
-  "form-header-component": "awsui_form-header-component_1xupv_1vmie_400",
-  "navigation-link": "awsui_navigation-link_1xupv_1vmie_416",
-  "navigation-link-item": "awsui_navigation-link-item_1xupv_1vmie_417",
-  "navigation-link-label": "awsui_navigation-link-label_1xupv_1vmie_418",
-  "navigation-link-active": "awsui_navigation-link-active_1xupv_1vmie_422",
-  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1vmie_427",
-  "cancel-button": "awsui_cancel-button_1xupv_1vmie_431",
-  "previous-button": "awsui_previous-button_1xupv_1vmie_432",
-  "primary-button": "awsui_primary-button_1xupv_1vmie_433",
-  "skip-to-button": "awsui_skip-to-button_1xupv_1vmie_434",
-  "action-buttons": "awsui_action-buttons_1xupv_1vmie_438"
+  "root": "awsui_root_1xupv_1rebv_145",
+  "wizard": "awsui_wizard_1xupv_1rebv_177",
+  "refresh": "awsui_refresh_1xupv_1rebv_177",
+  "small-container": "awsui_small-container_1xupv_1rebv_184",
+  "navigation": "awsui_navigation_1xupv_1rebv_198",
+  "number": "awsui_number_1xupv_1rebv_231",
+  "circle": "awsui_circle_1xupv_1rebv_247",
+  "title": "awsui_title_1xupv_1rebv_258",
+  "active": "awsui_active_1xupv_1rebv_289",
+  "disabled": "awsui_disabled_1xupv_1rebv_300",
+  "enabled": "awsui_enabled_1xupv_1rebv_310",
+  "form": "awsui_form_1xupv_1rebv_354",
+  "form-header": "awsui_form-header_1xupv_1rebv_359",
+  "form-header-content": "awsui_form-header-content_1xupv_1rebv_374",
+  "form-component": "awsui_form-component_1xupv_1rebv_378",
+  "hidden": "awsui_hidden_1xupv_1rebv_394",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_1rebv_398",
+  "collapsed-steps-navigation": "awsui_collapsed-steps-navigation_1xupv_1rebv_404",
+  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1rebv_413",
+  "form-header-component": "awsui_form-header-component_1xupv_1rebv_413",
+  "navigation-link": "awsui_navigation-link_1xupv_1rebv_429",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_1rebv_430",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_1rebv_431",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_1rebv_435",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1rebv_440",
+  "cancel-button": "awsui_cancel-button_1xupv_1rebv_444",
+  "previous-button": "awsui_previous-button_1xupv_1rebv_445",
+  "primary-button": "awsui_primary-button_1xupv_1rebv_446",
+  "skip-to-button": "awsui_skip-to-button_1xupv_1rebv_447",
+  "action-buttons": "awsui_action-buttons_1xupv_1rebv_451"
 };

package/lib/internal/template/wizard/wizard-form.d.ts CHANGED Viewed

@@ -4,7 +4,6 @@ import { WizardProps } from './interfaces';
 interface WizardFormProps extends InternalBaseComponentProps {
     steps: ReadonlyArray<WizardProps.Step>;
     activeStepIndex: number;
-    showCollapsedSteps: boolean;
     i18nStrings: WizardProps.I18nStrings;
     submitButtonText?: string;
     isPrimaryLoading: boolean;

package/lib/internal/template/wizard/wizard-form.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wizard-form.d.ts","sourceRoot":"","sources":["../../../src/wizard/wizard-form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8C,MAAM,OAAO,CAAC;~~AAmBnE~~,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,UAAU,eAAgB,SAAQ,0BAA0B;IAC1D,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,~~kBAAkB,EAAE,OAAO,CAAC;IAC5B,~~WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,8CAAwD,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,KAAK,EAAE,eAAe,eAsBrE"}
1	+ {"version":3,"file":"wizard-form.d.ts","sourceRoot":"","sources":["../../../src/wizard/wizard-form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAkBnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,UAAU,eAAgB,SAAQ,0BAA0B;IAC1D,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,8CAAwD,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,KAAK,EAAE,eAAe,eAsBrE"}