@cloudscape-design/components 3.0.116 → 3.0.118

package/wizard/index.js

@@ -1,7 +1,7 @@
 import { __assign, __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
 import { fireNonCancelableEvent } from '../internal/events';
@@ -15,20 +15,6 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-var scrollToTop = function (ref) {
-    var _a;
-    var overflowRegex = /(auto|scroll)/;
-    var parent = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-    while (parent && !overflowRegex.test(getComputedStyle(parent).overflow)) {
-        parent = parent.parentElement;
-    }
-    if (parent) {
-        parent.scrollTop = 0;
-    }
-    else {
-        window.scrollTo(window.pageXOffset, 0);
-    }
-};
 export default function Wizard(_a) {
     var steps = _a.steps, controlledActiveStepIndex = _a.activeStepIndex, i18nStrings = _a.i18nStrings, _b = _a.isLoadingNextStep, isLoadingNextStep = _b === void 0 ? false : _b, _c = _a.allowSkipTo, allowSkipTo = _c === void 0 ? false : _c, secondaryActions = _a.secondaryActions, onCancel = _a.onCancel, onSubmit = _a.onSubmit, onNavigate = _a.onNavigate, rest = __rest(_a, ["steps", "activeStepIndex", "i18nStrings", "isLoadingNextStep", "allowSkipTo", "secondaryActions", "onCancel", "onSubmit", "onNavigate"]);
     var __internalRootRef = useBaseComponent('Wizard').__internalRootRef;
@@ -44,10 +30,6 @@ export default function Wizard(_a) {
     var actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;
     var farthestStepIndex = useRef(actualActiveStepIndex);
     farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);
-    var internalRef = useRef(null);
-    useEffect(function () {
-        scrollToTop(internalRef);
-    }, [actualActiveStepIndex]);
     var isVisualRefresh = useVisualRefresh();
     var isLastStep = actualActiveStepIndex >= steps.length - 1;
     var navigationEvent = function (requestedStepIndex, reason) {
@@ -68,7 +50,7 @@ export default function Wizard(_a) {
         warnOnce('Wizard', "You have set `allowSkipTo` but you have not provided `i18nStrings.skipToButtonLabel`. The skip-to button will not be rendered.");
     }
     return (React.createElement("div", __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), ref: ref }),
-        React.createElement("div", { className: clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']), ref: internalRef },
+        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, isVisualRefresh: isVisualRefresh, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps }),
             React.createElement("div", { className: clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
                 isVisualRefresh && React.createElement("div", { className: clsx(styles.background, 'awsui-context-content-header') }),

package/wizard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/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\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '../internal/logging';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport { WizardProps };\n\nconst scrollToTop = (ref: React.RefObject<HTMLDivElement>) => {\n  const overflowRegex = /(auto|scroll)/;\n  let parent = ref?.current?.parentElement;\n  while (parent && !overflowRegex.test(getComputedStyle(parent).overflow)) {\n    parent = parent.parentElement;\n  }\n  if (parent) {\n    parent.scrollTop = 0;\n  } else {\n    window.scrollTo(window.pageXOffset, 0);\n  }\n};\n\nexport default function Wizard({\n  steps,\n  activeStepIndex: controlledActiveStepIndex,\n  i18nStrings,\n  isLoadingNextStep = false,\n  allowSkipTo = false,\n  secondaryActions,\n  onCancel,\n  onSubmit,\n  onNavigate,\n  ...rest\n}: WizardProps) {\n  const { __internalRootRef } = useBaseComponent('Wizard');\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 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 internalRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    scrollToTop(internalRef);\n  }, [actualActiveStepIndex]);\n\n  const isVisualRefresh = useVisualRefresh();\n  const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n  const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\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 = () => fireNonCancelableEvent(onCancel);\n  const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n  const onPrimaryClick = isLastStep\n    ? () => fireNonCancelableEvent(onSubmit)\n    : () => navigationEvent(actualActiveStepIndex + 1, 'next');\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 && !i18nStrings.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  return (\n    <div {...baseProps} className={clsx(styles.root, baseProps.className)} ref={ref}>\n      <div\n        className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        ref={internalRef}\n      >\n        <WizardNavigation\n          activeStepIndex={actualActiveStepIndex}\n          farthestStepIndex={farthestStepIndex.current}\n          allowSkipTo={allowSkipTo}\n          hidden={smallContainer}\n          i18nStrings={i18nStrings}\n          isVisualRefresh={isVisualRefresh}\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          {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n\n          <WizardForm\n            steps={steps}\n            isVisualRefresh={isVisualRefresh}\n            showCollapsedSteps={smallContainer}\n            i18nStrings={i18nStrings}\n            activeStepIndex={actualActiveStepIndex}\n            isPrimaryLoading={isLoadingNextStep}\n            allowSkipTo={allowSkipTo}\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\napplyDisplayName(Wizard, 'Wizard');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/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\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '../internal/logging';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport { WizardProps };\n\nexport default function Wizard({\n  steps,\n  activeStepIndex: controlledActiveStepIndex,\n  i18nStrings,\n  isLoadingNextStep = false,\n  allowSkipTo = false,\n  secondaryActions,\n  onCancel,\n  onSubmit,\n  onNavigate,\n  ...rest\n}: WizardProps) {\n  const { __internalRootRef } = useBaseComponent('Wizard');\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 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    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 = () => fireNonCancelableEvent(onCancel);\n  const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n  const onPrimaryClick = isLastStep\n    ? () => fireNonCancelableEvent(onSubmit)\n    : () => navigationEvent(actualActiveStepIndex + 1, 'next');\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 && !i18nStrings.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  return (\n    <div {...baseProps} className={clsx(styles.root, baseProps.className)} ref={ref}>\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          isVisualRefresh={isVisualRefresh}\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          {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n\n          <WizardForm\n            steps={steps}\n            isVisualRefresh={isVisualRefresh}\n            showCollapsedSteps={smallContainer}\n            i18nStrings={i18nStrings}\n            activeStepIndex={actualActiveStepIndex}\n            isPrimaryLoading={isLoadingNextStep}\n            allowSkipTo={allowSkipTo}\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\napplyDisplayName(Wizard, 'Wizard');\n"]}

package/wizard/styles.css.js

@@ -1,36 +1,37 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1xupv_1vqk5_94",
-  "wizard": "awsui_wizard_1xupv_1vqk5_105",
-  "refresh": "awsui_refresh_1xupv_1vqk5_105",
-  "small-container": "awsui_small-container_1xupv_1vqk5_112",
-  "navigation": "awsui_navigation_1xupv_1vqk5_120",
-  "number": "awsui_number_1xupv_1vqk5_148",
-  "circle": "awsui_circle_1xupv_1vqk5_164",
-  "title": "awsui_title_1xupv_1vqk5_172",
-  "active": "awsui_active_1xupv_1vqk5_201",
-  "disabled": "awsui_disabled_1xupv_1vqk5_212",
-  "enabled": "awsui_enabled_1xupv_1vqk5_222",
-  "form": "awsui_form_1xupv_1vqk5_261",
-  "form-header": "awsui_form-header_1xupv_1vqk5_267",
-  "background": "awsui_background_1xupv_1vqk5_278",
-  "form-header-content": "awsui_form-header-content_1xupv_1vqk5_288",
-  "form-component": "awsui_form-component_1xupv_1vqk5_292",
-  "hidden": "awsui_hidden_1xupv_1vqk5_306",
-  "collapsed-steps": "awsui_collapsed-steps_1xupv_1vqk5_310",
-  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_1vqk5_315",
-  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1vqk5_318",
-  "form-header-component": "awsui_form-header-component_1xupv_1vqk5_322",
-  "navigation-link": "awsui_navigation-link_1xupv_1vqk5_323",
-  "navigation-link-item": "awsui_navigation-link-item_1xupv_1vqk5_324",
-  "navigation-link-label": "awsui_navigation-link-label_1xupv_1vqk5_325",
-  "navigation-link-active": "awsui_navigation-link-active_1xupv_1vqk5_329",
-  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1vqk5_334",
-  "cancel-button": "awsui_cancel-button_1xupv_1vqk5_338",
-  "previous-button": "awsui_previous-button_1xupv_1vqk5_339",
-  "primary-button": "awsui_primary-button_1xupv_1vqk5_340",
-  "skip-to-button": "awsui_skip-to-button_1xupv_1vqk5_341",
-  "action-buttons": "awsui_action-buttons_1xupv_1vqk5_345"
+  "root": "awsui_root_1xupv_1l2g1_94",
+  "wizard": "awsui_wizard_1xupv_1l2g1_105",
+  "refresh": "awsui_refresh_1xupv_1l2g1_105",
+  "small-container": "awsui_small-container_1xupv_1l2g1_112",
+  "navigation": "awsui_navigation_1xupv_1l2g1_120",
+  "number": "awsui_number_1xupv_1l2g1_148",
+  "circle": "awsui_circle_1xupv_1l2g1_164",
+  "title": "awsui_title_1xupv_1l2g1_172",
+  "active": "awsui_active_1xupv_1l2g1_201",
+  "disabled": "awsui_disabled_1xupv_1l2g1_212",
+  "enabled": "awsui_enabled_1xupv_1l2g1_222",
+  "form": "awsui_form_1xupv_1l2g1_261",
+  "form-header": "awsui_form-header_1xupv_1l2g1_267",
+  "background": "awsui_background_1xupv_1l2g1_278",
+  "form-header-content": "awsui_form-header-content_1xupv_1l2g1_288",
+  "form-component": "awsui_form-component_1xupv_1l2g1_292",
+  "hidden": "awsui_hidden_1xupv_1l2g1_306",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_1l2g1_310",
+  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_1l2g1_315",
+  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1l2g1_318",
+  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1l2g1_322",
+  "form-header-component": "awsui_form-header-component_1xupv_1l2g1_322",
+  "navigation-link": "awsui_navigation-link_1xupv_1l2g1_335",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_1l2g1_336",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_1l2g1_337",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_1l2g1_341",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1l2g1_346",
+  "cancel-button": "awsui_cancel-button_1xupv_1l2g1_350",
+  "previous-button": "awsui_previous-button_1xupv_1l2g1_351",
+  "primary-button": "awsui_primary-button_1xupv_1l2g1_352",
+  "skip-to-button": "awsui_skip-to-button_1xupv_1l2g1_353",
+  "action-buttons": "awsui_action-buttons_1xupv_1l2g1_357"
 };
   

package/wizard/styles.scoped.css

@@ -91,7 +91,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable selector-max-universal, selector-max-type */
-.awsui_root_1xupv_1vqk5_94:not(#\9) {
+.awsui_root_1xupv_1l2g1_94:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -128,28 +128,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
 }
 
-.awsui_wizard_1xupv_1vqk5_105.awsui_refresh_1xupv_1vqk5_105:not(#\9) {
+.awsui_wizard_1xupv_1l2g1_105.awsui_refresh_1xupv_1l2g1_105:not(#\9) {
   column-gap: var(--space-xl-a39hup, 24px);
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: auto 1fr;
   row-gap: var(--space-scaled-xl-w2t504, 24px);
 }
-.awsui_wizard_1xupv_1vqk5_105.awsui_refresh_1xupv_1vqk5_105.awsui_small-container_1xupv_1vqk5_112:not(#\9) {
+.awsui_wizard_1xupv_1l2g1_105.awsui_refresh_1xupv_1l2g1_105.awsui_small-container_1xupv_1l2g1_112:not(#\9) {
   row-gap: var(--space-scaled-l-t03y3z, 20px);
 }
 
-.awsui_wizard_1xupv_1vqk5_105:not(#\9):not(.awsui_refresh_1xupv_1vqk5_105) {
+.awsui_wizard_1xupv_1l2g1_105:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) {
   display: flex;
 }
 
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105:not(#\9) {
   grid-column: 1;
   grid-row: 1/span 2;
   padding-top: var(--space-scaled-xxs-95dhkm, 4px);
   z-index: 1;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul:not(#\9) {
   background: var(--color-background-container-content-i8i4a0, #ffffff);
   border-radius: var(--border-radius-container-gh9ysk, 16px);
   box-shadow: var(--shadow-container-7nblnj, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
@@ -158,26 +158,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 280px;
   box-sizing: border-box;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9) {
   display: grid;
   column-gap: var(--space-s-hv8c1d, 12px);
   grid-template-columns: var(--space-l-4vl6xu, 20px) 1fr;
   grid-template-rows: repeat(2, auto);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li > hr:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > hr:not(#\9) {
   background-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
   border: 0;
   grid-column: 1;
   height: 100%;
   width: var(--space-xxxs-k2w98v, 2px);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li > .awsui_number_1xupv_1vqk5_148:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > .awsui_number_1xupv_1l2g1_148:not(#\9) {
   color: var(--color-text-small-le1y42, #5f6b7a);
   font-size: var(--font-body-s-size-ukw2p9, 12px);
   grid-column: 2;
   grid-row: 1;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li > a:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > a:not(#\9) {
   align-items: start;
   column-gap: var(--space-s-hv8c1d, 12px);
   cursor: pointer;
@@ -187,7 +187,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-row: 2;
   grid-template-columns: var(--space-l-4vl6xu, 20px) 1fr;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li > a > .awsui_circle_1xupv_1vqk5_164:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > a > .awsui_circle_1xupv_1l2g1_164:not(#\9) {
   border-radius: 100%;
   grid-column: 1;
   height: 10px;
@@ -195,13 +195,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-top: 6px;
   width: 10px;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li > a > .awsui_title_1xupv_1vqk5_172:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > a > .awsui_title_1xupv_1l2g1_172:not(#\9) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
   grid-column: 2;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li > a[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li > a[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-k2wccv, 0);
   outline-offset: 2px;
@@ -209,58 +209,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-nv4ahb, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li:not(#\9):first-child > hr {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):first-child > hr {
   grid-row: 2/span 2;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_1vqk5_148 {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_1l2g1_148 {
   margin-top: var(--space-scaled-xl-w2t504, 24px);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li:not(#\9):last-child > hr {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):last-child > hr {
   grid-row: 1;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li:not(#\9):only-of-type > hr {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):only-of-type > hr {
   display: none;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li:not(#\9):not(:first-child):not(:last-child) > hr {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li:not(#\9):not(:first-child):not(:last-child) > hr {
   grid-row: 1/span 3;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_active_1xupv_1vqk5_201 > a:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_active_1xupv_1l2g1_201 > a:not(#\9) {
   cursor: text;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_active_1xupv_1vqk5_201 > a > .awsui_circle_1xupv_1vqk5_164:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_active_1xupv_1l2g1_201 > a > .awsui_circle_1xupv_1l2g1_164:not(#\9) {
   background-color: var(--color-background-control-checked-9admlu, #0972d3);
   box-shadow: 0 0 0 3px var(--color-background-container-content-i8i4a0, #ffffff), 0 0 0 5px var(--color-background-control-checked-9admlu, #0972d3), 0 0 0 7px var(--color-background-container-content-i8i4a0, #ffffff);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_active_1xupv_1vqk5_201 > a > .awsui_title_1xupv_1vqk5_172:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_active_1xupv_1l2g1_201 > a > .awsui_title_1xupv_1l2g1_172:not(#\9) {
   color: var(--color-background-control-checked-9admlu, #0972d3);
   font-weight: 700;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_disabled_1xupv_1vqk5_212 > a:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_disabled_1xupv_1l2g1_212 > a:not(#\9) {
   cursor: text;
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_disabled_1xupv_1vqk5_212 > a > .awsui_circle_1xupv_1vqk5_164:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_disabled_1xupv_1l2g1_212 > a > .awsui_circle_1xupv_1l2g1_164:not(#\9) {
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
   box-shadow: 0 0 0 2px var(--color-text-interactive-disabled-3pbb07, #9ba7b6), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_disabled_1xupv_1vqk5_212 > a > .awsui_title_1xupv_1vqk5_172:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_disabled_1xupv_1l2g1_212 > a > .awsui_title_1xupv_1l2g1_172:not(#\9) {
   color: var(--color-text-status-inactive-5ei55p, #5f6b7a);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_enabled_1xupv_1vqk5_222 > a > .awsui_circle_1xupv_1vqk5_164:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_enabled_1xupv_1l2g1_222 > a > .awsui_circle_1xupv_1l2g1_164:not(#\9) {
   background-color: var(--color-text-interactive-default-eg5fsa, #414d5c);
   box-shadow: 0 0 0 2px var(--color-text-interactive-default-eg5fsa, #414d5c), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_enabled_1xupv_1vqk5_222 > a > .awsui_title_1xupv_1vqk5_172:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_enabled_1xupv_1l2g1_222 > a > .awsui_title_1xupv_1l2g1_172:not(#\9) {
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_enabled_1xupv_1vqk5_222 > a:not(#\9):hover > .awsui_circle_1xupv_1vqk5_164 {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_enabled_1xupv_1l2g1_222 > a:not(#\9):hover > .awsui_circle_1xupv_1l2g1_164 {
   background-color: var(--color-background-control-checked-9admlu, #0972d3);
   box-shadow: 0 0 0 2px var(--color-background-control-checked-9admlu, #0972d3), 0 0 0 4px var(--color-background-container-content-i8i4a0, #ffffff);
 }
-.awsui_navigation_1xupv_1vqk5_120.awsui_refresh_1xupv_1vqk5_105 > ul > li.awsui_enabled_1xupv_1vqk5_222 > a:not(#\9):hover > .awsui_title_1xupv_1vqk5_172 {
+.awsui_navigation_1xupv_1l2g1_120.awsui_refresh_1xupv_1l2g1_105 > ul > li.awsui_enabled_1xupv_1l2g1_222 > a:not(#\9):hover > .awsui_title_1xupv_1l2g1_172 {
   color: var(--color-background-control-checked-9admlu, #0972d3);
 }
 
-.awsui_navigation_1xupv_1vqk5_120:not(#\9):not(.awsui_refresh_1xupv_1vqk5_105) {
+.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) {
   color: var(--color-text-disabled-a2nkh4, #9ba7b6);
   display: inline-block;
   margin-right: calc(2 * var(--space-xxxl-bo9z7f, 40px));
@@ -268,107 +268,119 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-top: var(--space-xxs-ynfts5, 4px);
   width: 200px;
 }
-.awsui_navigation_1xupv_1vqk5_120:not(#\9):not(.awsui_refresh_1xupv_1vqk5_105) > ul {
+.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }
-.awsui_navigation_1xupv_1vqk5_120:not(#\9):not(.awsui_refresh_1xupv_1vqk5_105) > ul > li {
+.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > ul > li {
   padding-bottom: var(--space-scaled-m-pv0fmt, 16px);
   padding-top: 0;
 }
-.awsui_navigation_1xupv_1vqk5_120:not(#\9):not(.awsui_refresh_1xupv_1vqk5_105) > ul > li:not(:first-child) {
+.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > ul > li:not(:first-child) {
   margin-top: var(--space-scaled-m-pv0fmt, 16px);
 }
-.awsui_navigation_1xupv_1vqk5_120:not(#\9):not(.awsui_refresh_1xupv_1vqk5_105) > ul > li:not(:last-child) {
+.awsui_navigation_1xupv_1l2g1_120:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > ul > li:not(:last-child) {
   border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-layout-wf5alz, #d1d5db);
 }
 
-.awsui_form_1xupv_1vqk5_261:not(#\9):not(.awsui_refresh_1xupv_1vqk5_105) {
+.awsui_form_1xupv_1l2g1_261:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
   width: 100%;
 }
-.awsui_form_1xupv_1vqk5_261:not(#\9):not(.awsui_refresh_1xupv_1vqk5_105) > .awsui_form-header_1xupv_1vqk5_267 {
+.awsui_form_1xupv_1l2g1_261:not(#\9):not(.awsui_refresh_1xupv_1l2g1_105) > .awsui_form-header_1xupv_1l2g1_267 {
   position: relative;
   margin-bottom: var(--space-scaled-m-pv0fmt, 16px);
 }
 
-.awsui_form_1xupv_1vqk5_261.awsui_refresh_1xupv_1vqk5_105:not(#\9) {
+.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105:not(#\9) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
   display: contents;
 }
-.awsui_form_1xupv_1vqk5_261.awsui_refresh_1xupv_1vqk5_105 > .awsui_background_1xupv_1vqk5_278:not(#\9) {
+.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105 > .awsui_background_1xupv_1l2g1_278:not(#\9) {
   background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
   grid-column: 1/span 2;
   grid-row: 1;
 }
-.awsui_form_1xupv_1vqk5_261.awsui_refresh_1xupv_1vqk5_105 > .awsui_form-header_1xupv_1vqk5_267:not(#\9) {
+.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105 > .awsui_form-header_1xupv_1l2g1_267:not(#\9) {
   background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
   grid-column: 2;
   grid-row: 1;
 }
-.awsui_form_1xupv_1vqk5_261.awsui_refresh_1xupv_1vqk5_105 > .awsui_form-header_1xupv_1vqk5_267 > .awsui_form-header-content_1xupv_1vqk5_288:not(#\9) {
+.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105 > .awsui_form-header_1xupv_1l2g1_267 > .awsui_form-header-content_1xupv_1l2g1_288:not(#\9) {
   padding-top: var(--space-scaled-xl-w2t504, 24px);
   padding-bottom: var(--space-scaled-xl-w2t504, 24px);
 }
-.awsui_form_1xupv_1vqk5_261.awsui_refresh_1xupv_1vqk5_105 > .awsui_form-component_1xupv_1vqk5_292:not(#\9) {
+.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105 > .awsui_form-component_1xupv_1l2g1_292:not(#\9) {
   grid-column: 2;
   grid-row: 2;
 }
-.awsui_form_1xupv_1vqk5_261.awsui_refresh_1xupv_1vqk5_105.awsui_small-container_1xupv_1vqk5_112 > .awsui_form-header_1xupv_1vqk5_267:not(#\9) {
+.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105.awsui_small-container_1xupv_1l2g1_112 > .awsui_form-header_1xupv_1l2g1_267:not(#\9) {
   grid-column: 1/span 2;
 }
-.awsui_form_1xupv_1vqk5_261.awsui_refresh_1xupv_1vqk5_105.awsui_small-container_1xupv_1vqk5_112 > .awsui_form-header_1xupv_1vqk5_267 > .awsui_form-header-content_1xupv_1vqk5_288:not(#\9) {
+.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105.awsui_small-container_1xupv_1l2g1_112 > .awsui_form-header_1xupv_1l2g1_267 > .awsui_form-header-content_1xupv_1l2g1_288:not(#\9) {
   padding-top: 0;
 }
-.awsui_form_1xupv_1vqk5_261.awsui_refresh_1xupv_1vqk5_105.awsui_small-container_1xupv_1vqk5_112 > .awsui_form-component_1xupv_1vqk5_292:not(#\9) {
+.awsui_form_1xupv_1l2g1_261.awsui_refresh_1xupv_1l2g1_105.awsui_small-container_1xupv_1l2g1_112 > .awsui_form-component_1xupv_1l2g1_292:not(#\9) {
   grid-column: 1/span 2;
 }
 
-.awsui_navigation_1xupv_1vqk5_120.awsui_hidden_1xupv_1vqk5_306:not(#\9) {
+.awsui_navigation_1xupv_1l2g1_120.awsui_hidden_1xupv_1l2g1_306:not(#\9) {
   display: none;
 }
 
-.awsui_collapsed-steps_1xupv_1vqk5_310:not(#\9) {
+.awsui_collapsed-steps_1xupv_1l2g1_310:not(#\9) {
   color: var(--color-text-heading-secondary-corkaj, #414d5c);
   font-weight: 700;
   padding-top: var(--space-scaled-xxs-95dhkm, 4px);
 }
-.awsui_collapsed-steps-extra-padding_1xupv_1vqk5_315:not(#\9) {
+.awsui_collapsed-steps-extra-padding_1xupv_1l2g1_315:not(#\9) {
   padding-top: var(--space-scaled-l-t03y3z, 20px);
 }
-.awsui_collapsed-steps-hidden_1xupv_1vqk5_318:not(#\9) {
+.awsui_collapsed-steps-hidden_1xupv_1l2g1_318:not(#\9) {
   display: none;
 }
 
-.awsui_form-header-component_1xupv_1vqk5_322:not(#\9),
-.awsui_navigation-link_1xupv_1vqk5_323:not(#\9),
-.awsui_navigation-link-item_1xupv_1vqk5_324:not(#\9),
-.awsui_navigation-link-label_1xupv_1vqk5_325:not(#\9) {
+.awsui_form-header-component-wrapper_1xupv_1l2g1_322:not(#\9) {
+  outline: none;
+}
+.awsui_form-header-component-wrapper_1xupv_1l2g1_322[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-k2wccv, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-ap3b6s, #0972d3);
+  border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-nv4ahb, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+
+.awsui_form-header-component_1xupv_1l2g1_322:not(#\9),
+.awsui_navigation-link_1xupv_1l2g1_335:not(#\9),
+.awsui_navigation-link-item_1xupv_1l2g1_336:not(#\9),
+.awsui_navigation-link-label_1xupv_1l2g1_337:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-link-active_1xupv_1vqk5_329:not(#\9) {
+.awsui_navigation-link-active_1xupv_1l2g1_341:not(#\9) {
   font-weight: 700;
   color: var(--color-text-body-default-ajf1h5, #000716);
 }
 
-.awsui_navigation-link-disabled_1xupv_1vqk5_334:not(#\9) {
+.awsui_navigation-link-disabled_1xupv_1l2g1_346:not(#\9) {
   color: var(--color-text-status-inactive-5ei55p, #5f6b7a);
 }
 
-.awsui_cancel-button_1xupv_1vqk5_338:not(#\9),
-.awsui_previous-button_1xupv_1vqk5_339:not(#\9),
-.awsui_primary-button_1xupv_1vqk5_340:not(#\9),
-.awsui_skip-to-button_1xupv_1vqk5_341:not(#\9) {
+.awsui_cancel-button_1xupv_1l2g1_350:not(#\9),
+.awsui_previous-button_1xupv_1l2g1_351:not(#\9),
+.awsui_primary-button_1xupv_1l2g1_352:not(#\9),
+.awsui_skip-to-button_1xupv_1l2g1_353:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_action-buttons_1xupv_1vqk5_345:not(#\9) {
+.awsui_action-buttons_1xupv_1l2g1_357:not(#\9) {
   display: flex;
   justify-content: flex-end;
 }

package/wizard/styles.selectors.js

@@ -2,36 +2,37 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1xupv_1vqk5_94",
-  "wizard": "awsui_wizard_1xupv_1vqk5_105",
-  "refresh": "awsui_refresh_1xupv_1vqk5_105",
-  "small-container": "awsui_small-container_1xupv_1vqk5_112",
-  "navigation": "awsui_navigation_1xupv_1vqk5_120",
-  "number": "awsui_number_1xupv_1vqk5_148",
-  "circle": "awsui_circle_1xupv_1vqk5_164",
-  "title": "awsui_title_1xupv_1vqk5_172",
-  "active": "awsui_active_1xupv_1vqk5_201",
-  "disabled": "awsui_disabled_1xupv_1vqk5_212",
-  "enabled": "awsui_enabled_1xupv_1vqk5_222",
-  "form": "awsui_form_1xupv_1vqk5_261",
-  "form-header": "awsui_form-header_1xupv_1vqk5_267",
-  "background": "awsui_background_1xupv_1vqk5_278",
-  "form-header-content": "awsui_form-header-content_1xupv_1vqk5_288",
-  "form-component": "awsui_form-component_1xupv_1vqk5_292",
-  "hidden": "awsui_hidden_1xupv_1vqk5_306",
-  "collapsed-steps": "awsui_collapsed-steps_1xupv_1vqk5_310",
-  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_1vqk5_315",
-  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1vqk5_318",
-  "form-header-component": "awsui_form-header-component_1xupv_1vqk5_322",
-  "navigation-link": "awsui_navigation-link_1xupv_1vqk5_323",
-  "navigation-link-item": "awsui_navigation-link-item_1xupv_1vqk5_324",
-  "navigation-link-label": "awsui_navigation-link-label_1xupv_1vqk5_325",
-  "navigation-link-active": "awsui_navigation-link-active_1xupv_1vqk5_329",
-  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1vqk5_334",
-  "cancel-button": "awsui_cancel-button_1xupv_1vqk5_338",
-  "previous-button": "awsui_previous-button_1xupv_1vqk5_339",
-  "primary-button": "awsui_primary-button_1xupv_1vqk5_340",
-  "skip-to-button": "awsui_skip-to-button_1xupv_1vqk5_341",
-  "action-buttons": "awsui_action-buttons_1xupv_1vqk5_345"
+  "root": "awsui_root_1xupv_1l2g1_94",
+  "wizard": "awsui_wizard_1xupv_1l2g1_105",
+  "refresh": "awsui_refresh_1xupv_1l2g1_105",
+  "small-container": "awsui_small-container_1xupv_1l2g1_112",
+  "navigation": "awsui_navigation_1xupv_1l2g1_120",
+  "number": "awsui_number_1xupv_1l2g1_148",
+  "circle": "awsui_circle_1xupv_1l2g1_164",
+  "title": "awsui_title_1xupv_1l2g1_172",
+  "active": "awsui_active_1xupv_1l2g1_201",
+  "disabled": "awsui_disabled_1xupv_1l2g1_212",
+  "enabled": "awsui_enabled_1xupv_1l2g1_222",
+  "form": "awsui_form_1xupv_1l2g1_261",
+  "form-header": "awsui_form-header_1xupv_1l2g1_267",
+  "background": "awsui_background_1xupv_1l2g1_278",
+  "form-header-content": "awsui_form-header-content_1xupv_1l2g1_288",
+  "form-component": "awsui_form-component_1xupv_1l2g1_292",
+  "hidden": "awsui_hidden_1xupv_1l2g1_306",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_1l2g1_310",
+  "collapsed-steps-extra-padding": "awsui_collapsed-steps-extra-padding_1xupv_1l2g1_315",
+  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1l2g1_318",
+  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1l2g1_322",
+  "form-header-component": "awsui_form-header-component_1xupv_1l2g1_322",
+  "navigation-link": "awsui_navigation-link_1xupv_1l2g1_335",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_1l2g1_336",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_1l2g1_337",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_1l2g1_341",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1l2g1_346",
+  "cancel-button": "awsui_cancel-button_1xupv_1l2g1_350",
+  "previous-button": "awsui_previous-button_1xupv_1l2g1_351",
+  "primary-button": "awsui_primary-button_1xupv_1l2g1_352",
+  "skip-to-button": "awsui_skip-to-button_1xupv_1l2g1_353",
+  "action-buttons": "awsui_action-buttons_1xupv_1l2g1_357"
 };
   

package/wizard/wizard-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wizard-form.d.ts","sourceRoot":"","sources":["../../../src/wizard/wizard-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,UAAU,eAAe;IACvB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,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,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,aAAa,GACd,EAAE,eAAe,eAsDjB"}
+{"version":3,"file":"wizard-form.d.ts","sourceRoot":"","sources":["../../../src/wizard/wizard-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,UAAU,eAAe;IACvB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,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,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,aAAa,GACd,EAAE,eAAe,eAiEjB"}

package/wizard/wizard-form.js

@@ -1,6 +1,7 @@
+import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import InternalForm from '../form/internal';
 import InternalHeader from '../header/internal';
@@ -8,12 +9,22 @@ import { useMobile } from '../internal/hooks/use-mobile';
 import WizardActions from './wizard-actions';
 import WizardFormHeader from './wizard-form-header';
 import styles from './styles.css.js';
+import useFocusVisible from '../internal/hooks/focus-visible';
+import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
 export default function WizardForm(_a) {
     var steps = _a.steps, activeStepIndex = _a.activeStepIndex, isVisualRefresh = _a.isVisualRefresh, showCollapsedSteps = _a.showCollapsedSteps, i18nStrings = _a.i18nStrings, isPrimaryLoading = _a.isPrimaryLoading, allowSkipTo = _a.allowSkipTo, secondaryActions = _a.secondaryActions, onCancelClick = _a.onCancelClick, onPreviousClick = _a.onPreviousClick, onPrimaryClick = _a.onPrimaryClick, onSkipToClick = _a.onSkipToClick;
     var _b = steps[activeStepIndex] || {}, title = _b.title, info = _b.info, description = _b.description, content = _b.content, errorText = _b.errorText, isOptional = _b.isOptional;
     var isLastStep = activeStepIndex >= steps.length - 1;
     var skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);
     var isMobile = useMobile();
+    var stepHeaderRef = useRef(null);
+    useEffectOnUpdate(function () {
+        var _a;
+        if (stepHeaderRef && stepHeaderRef.current) {
+            (_a = stepHeaderRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [activeStepIndex]);
+    var focusVisible = useFocusVisible();
     var showSkipTo = allowSkipTo && skipToTargetIndex !== -1;
     var skipToButtonText = skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel
         ? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1)
@@ -22,8 +33,9 @@ export default function WizardForm(_a) {
         React.createElement(WizardFormHeader, { isMobile: isMobile || showCollapsedSteps, isVisualRefresh: isVisualRefresh },
             React.createElement("div", { className: clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'], isVisualRefresh && isMobile && styles['collapsed-steps-extra-padding']) }, i18nStrings.collapsedStepsLabel(activeStepIndex + 1, steps.length)),
             React.createElement(InternalHeader, { className: styles['form-header-component'], variant: "h1", description: description, info: info },
-                title,
-                isOptional && React.createElement("i", null, " - ".concat(i18nStrings.optional)))),
+                React.createElement("span", __assign({ className: styles['form-header-component-wrapper'], tabIndex: -1, ref: stepHeaderRef }, focusVisible),
+                    title,
+                    isOptional && React.createElement("i", null, " - ".concat(i18nStrings.optional))))),
         React.createElement(InternalForm, { className: clsx(styles['form-component']), actions: React.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? i18nStrings.submitButton : i18nStrings.nextButton, previousButtonText: i18nStrings.previousButton, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onPrimaryClick: onPrimaryClick, onSkipToClick: function () { return onSkipToClick(skipToTargetIndex); }, showPrevious: activeStepIndex !== 0, isPrimaryLoading: isPrimaryLoading, showSkipTo: showSkipTo, skipToButtonText: skipToButtonText }), secondaryActions: secondaryActions, errorText: errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, content)));
 }
 function findSkipToTargetIndex(steps, activeStepIndex) {