@cloudscape-design/components-themeable 3.0.1374 → 3.0.1375

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQ9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;IAEjE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,qBAA6B,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAiB,EACjB,sBAA8B,EAC9B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAwIxB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAQrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQ9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;IAEjE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,0BAA0B,mGActC,CAAC;AAEF,QAAA,MAAM,iBAAiB,mGAkMrB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/lib/internal/template/container/internal.js

@@ -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, { useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
@@ -12,25 +12,53 @@ import { ContainerHeaderContextProvider } from '../internal/context/container-he
 import { useModalContext } from '../internal/context/modal-context';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
 import { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';
 import { StickyHeaderContext, useStickyHeader } from './use-sticky-header';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 import testStyles from './test-classes/styles.css.js';
-export function InternalContainerAsSubstep(props) {
+export const InternalContainerAsSubstep = React.forwardRef((props, ref) => {
     const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
     const modalContext = useModalContext();
-    return (React.createElement(InternalContainer, { ...props, __subStepRef: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? { current: null } : subStepRef, __funnelSubStepProps: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? {} : funnelSubStepProps }));
-}
-export default function InternalContainer({ header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef, __contentKey, ...restProps }) {
+    return (React.createElement(InternalContainer, { ...props, ref: ref, __subStepRef: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? { current: null } : subStepRef, __funnelSubStepProps: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? {} : funnelSubStepProps }));
+});
+const InternalContainer = React.forwardRef(function InternalContainer({ header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef, __contentKey, ...restProps }, ref) {
     var _a;
     const isMobile = useMobile();
     const isRefresh = useVisualRefresh();
     const baseProps = getBaseProps(restProps);
     const rootRef = useRef(null);
     const headerRef = useRef(null);
+    const [showFocusRing, setShowFocusRing] = useState(false);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            if (rootRef.current) {
+                rootRef.current.tabIndex = -1;
+                rootRef.current.setAttribute('role', 'group');
+                if (header) {
+                    rootRef.current.setAttribute('aria-labelledby', headerId);
+                }
+                setShowFocusRing(true);
+                // focus()'s implicit scroll is a no-op when the container is already focused (repeated jump).
+                rootRef.current.focus({ preventScroll: true });
+                scrollElementIntoView(rootRef.current);
+            }
+        },
+    }));
+    const onRootBlur = (event) => {
+        const funnelOnBlur = __funnelSubStepProps === null || __funnelSubStepProps === void 0 ? void 0 : __funnelSubStepProps.onBlur;
+        funnelOnBlur === null || funnelOnBlur === void 0 ? void 0 : funnelOnBlur(event);
+        if (event.target === rootRef.current) {
+            rootRef.current.removeAttribute('tabindex');
+            rootRef.current.removeAttribute('role');
+            rootRef.current.removeAttribute('aria-labelledby');
+            setShowFocusRing(false);
+        }
+    };
     const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableStickyMobile, __fullPage && isRefresh && !isMobile);
     const contentId = useUniqueId();
+    const headerId = useUniqueId('container-header-');
     const hasDynamicHeight = isRefresh && variant === 'full-page';
     const mergedRef = useMergeRefs(rootRef, __internalRootRef);
     const headerMergedRef = useMergeRefs(headerRef, __headerRef);
@@ -39,7 +67,7 @@ export default function InternalContainer({ header, footer, children, variant =
     const shouldHaveStickyStyles = isSticky && !isMobile;
     const hasMedia = !!(media === null || media === void 0 ? void 0 : media.content);
     const mediaPosition = (_a = media === null || media === void 0 ? void 0 : media.position) !== null && _a !== void 0 ? _a : 'top';
-    return (React.createElement("div", { ...baseProps, ...__funnelSubStepProps, className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']], isRefresh && styles.refresh), ref: mergedRef, ...getAnalyticsLabelAttribute(`.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`), style: getRootStyles(style) },
+    return (React.createElement("div", { ...baseProps, ...__funnelSubStepProps, className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']], showFocusRing && styles['focus-ring'], isRefresh && styles.refresh), ref: mergedRef, onBlur: onRootBlur, ...getAnalyticsLabelAttribute(`.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`), style: getRootStyles(style) },
         hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top'
                 ? { ...getMediaStyles(mediaPosition, style), height: (media === null || media === void 0 ? void 0 : media.height) || '' }
                 : { ...getMediaStyles(mediaPosition, style), width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
@@ -47,7 +75,7 @@ export default function InternalContainer({ header, footer, children, variant =
             React.createElement(BuiltInErrorBoundary, { wrapper: content => React.createElement(InternalBox, { padding: "m" }, content) },
                 header && (React.createElement(ContainerHeaderContextProvider, null,
                     React.createElement(StickyHeaderContext.Provider, { value: { isStuck, isStuckAtBottom } },
-                        React.createElement("div", { className: clsx(isRefresh && styles.refresh, styles.header, analyticsSelectors.header, styles[`header-variant-${variant}`], {
+                        React.createElement("div", { id: headerId, className: clsx(isRefresh && styles.refresh, styles.header, analyticsSelectors.header, styles[`header-variant-${variant}`], {
                                 [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
                                 [styles['header-sticky-enabled']]: isSticky,
                                 [styles['header-dynamic-height']]: hasDynamicHeight,
@@ -72,5 +100,6 @@ export default function InternalContainer({ header, footer, children, variant =
                         [styles['with-divider']]: !__disableFooterDivider,
                         [styles['with-paddings']]: !disableFooterPaddings,
                     }), style: getFooterStyles(style) }, footer))))));
-}
+});
+export default InternalContainer;
 //# sourceMappingURL=internal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/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\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { ContainerProps } from './interfaces';\nimport { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  disableFooterPaddings?: boolean;\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __fullPage?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n\n  /**\n   * React key attached to the content wrapper. It is used to force content re-mount but not container re-mount, which\n   * is necessary for components that use container as a root node internally so that their test-utils wrapper is not detached.\n   */\n  __contentKey?: string;\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const modalContext = useModalContext();\n\n  return (\n    <InternalContainer\n      {...props}\n      __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n      __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n    />\n  );\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  disableFooterPaddings = false,\n  fitHeight,\n  media,\n  style,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef,\n  __disableFooterDivider = false,\n  __hiddenContent = false,\n  __headerRef,\n  __fullPage = false,\n  __disableStickyMobile = true,\n  __funnelSubStepProps,\n  __subStepRef,\n  __contentKey,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\n  const isRefresh = useVisualRefresh();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile,\n    __fullPage && isRefresh && !isMobile\n  );\n  const contentId = useUniqueId();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  const hasMedia = !!media?.content;\n  const mediaPosition = media?.position ?? 'top';\n\n  return (\n    <div\n      {...baseProps}\n      {...__funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n        shouldHaveStickyStyles && [styles['sticky-enabled']],\n        shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']],\n        isRefresh && styles.refresh\n      )}\n      ref={mergedRef}\n      {...getAnalyticsLabelAttribute(\n        `.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`\n      )}\n      style={getRootStyles(style)}\n    >\n      {hasMedia && (\n        <div\n          className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n          style={\n            mediaPosition === 'top'\n              ? { ...getMediaStyles(mediaPosition, style), height: media?.height || '' }\n              : { ...getMediaStyles(mediaPosition, style), width: media?.width || '' }\n          }\n        >\n          {media.content}\n        </div>\n      )}\n      <div\n        id={contentId}\n        ref={__subStepRef}\n        key={__contentKey}\n        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n      >\n        {/* We use a wrapper around the boundary to preserve container's paddings. */}\n        <BuiltInErrorBoundary wrapper={content => <InternalBox padding=\"m\">{content}</InternalBox>}>\n          {header && (\n            <ContainerHeaderContextProvider>\n              <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>\n                <div\n                  className={clsx(\n                    isRefresh && styles.refresh,\n                    styles.header,\n                    analyticsSelectors.header,\n                    styles[`header-variant-${variant}`],\n                    {\n                      [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n                      [styles['header-sticky-enabled']]: isSticky,\n                      [styles['header-dynamic-height']]: hasDynamicHeight,\n                      [styles['header-stuck']]: isStuck,\n                      [styles['with-paddings']]: !disableHeaderPaddings,\n                      [styles['with-hidden-content']]: !children || __hiddenContent,\n                      [styles['header-with-media']]: hasMedia,\n                      [styles['header-full-page']]: __fullPage && isRefresh,\n                    }\n                  )}\n                  ref={headerMergedRef}\n                  style={{\n                    ...stickyStyles.style,\n                    ...getHeaderStyles(style),\n                  }}\n                >\n                  {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n                  {header}\n                </div>\n              </StickyHeaderContext.Provider>\n            </ContainerHeaderContextProvider>\n          )}\n          <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>\n            <div\n              className={clsx(styles['content-inner'], testStyles['content-inner'], {\n                [styles['with-paddings']]: !disableContentPaddings,\n                [styles['with-header']]: !!header,\n              })}\n              style={getContentStyles(style)}\n            >\n              {/* We use a wrapper around the boundary to preserve paddings in case they were disabled by the consumer.\n              That is needed because the consumer-defined paddings that normally come with the content can no longer\n              apply since the content failed to render. */}\n              <BuiltInErrorBoundary\n                wrapper={content => (\n                  <InternalBox padding={disableContentPaddings ? 'm' : undefined}>{content}</InternalBox>\n                )}\n              >\n                {children}\n              </BuiltInErrorBoundary>\n            </div>\n          </div>\n          {footer && (\n            <div\n              className={clsx(styles.footer, {\n                [styles['with-divider']]: !__disableFooterDivider,\n                [styles['with-paddings']]: !disableFooterPaddings,\n              })}\n              style={getFooterStyles(style)}\n            >\n              {footer}\n            </div>\n          )}\n        </BuiltInErrorBoundary>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/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\n\nimport React, { useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { ContainerProps } from './interfaces';\nimport { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  disableFooterPaddings?: boolean;\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __fullPage?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n\n  /**\n   * React key attached to the content wrapper. It is used to force content re-mount but not container re-mount, which\n   * is necessary for components that use container as a root node internally so that their test-utils wrapper is not detached.\n   */\n  __contentKey?: string;\n}\n\nexport const InternalContainerAsSubstep = React.forwardRef(\n  (props: InternalContainerProps, ref: React.Ref<ContainerProps.Ref>) => {\n    const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n    const modalContext = useModalContext();\n\n    return (\n      <InternalContainer\n        {...props}\n        ref={ref}\n        __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n        __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n      />\n    );\n  }\n);\n\nconst InternalContainer = React.forwardRef(function InternalContainer(\n  {\n    header,\n    footer,\n    children,\n    variant = 'default',\n    disableHeaderPaddings = false,\n    disableContentPaddings = false,\n    disableFooterPaddings = false,\n    fitHeight,\n    media,\n    style,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __stickyHeader = false,\n    __internalRootRef,\n    __disableFooterDivider = false,\n    __hiddenContent = false,\n    __headerRef,\n    __fullPage = false,\n    __disableStickyMobile = true,\n    __funnelSubStepProps,\n    __subStepRef,\n    __contentKey,\n    ...restProps\n  }: InternalContainerProps,\n  ref: React.Ref<ContainerProps.Ref>\n) {\n  const isMobile = useMobile();\n  const isRefresh = useVisualRefresh();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const [showFocusRing, setShowFocusRing] = useState(false);\n  useImperativeHandle(ref, () => ({\n    focus: () => {\n      if (rootRef.current) {\n        rootRef.current.tabIndex = -1;\n        rootRef.current.setAttribute('role', 'group');\n        if (header) {\n          rootRef.current.setAttribute('aria-labelledby', headerId);\n        }\n        setShowFocusRing(true);\n        // focus()'s implicit scroll is a no-op when the container is already focused (repeated jump).\n        rootRef.current.focus({ preventScroll: true });\n        scrollElementIntoView(rootRef.current);\n      }\n    },\n  }));\n  const onRootBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n    const funnelOnBlur = __funnelSubStepProps?.onBlur as React.FocusEventHandler<HTMLDivElement> | undefined;\n    funnelOnBlur?.(event);\n    if (event.target === rootRef.current) {\n      rootRef.current.removeAttribute('tabindex');\n      rootRef.current.removeAttribute('role');\n      rootRef.current.removeAttribute('aria-labelledby');\n      setShowFocusRing(false);\n    }\n  };\n  const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile,\n    __fullPage && isRefresh && !isMobile\n  );\n  const contentId = useUniqueId();\n  const headerId = useUniqueId('container-header-');\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  const hasMedia = !!media?.content;\n  const mediaPosition = media?.position ?? 'top';\n\n  return (\n    <div\n      {...baseProps}\n      {...__funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n        shouldHaveStickyStyles && [styles['sticky-enabled']],\n        shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']],\n        showFocusRing && styles['focus-ring'],\n        isRefresh && styles.refresh\n      )}\n      ref={mergedRef}\n      onBlur={onRootBlur}\n      {...getAnalyticsLabelAttribute(\n        `.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`\n      )}\n      style={getRootStyles(style)}\n    >\n      {hasMedia && (\n        <div\n          className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n          style={\n            mediaPosition === 'top'\n              ? { ...getMediaStyles(mediaPosition, style), height: media?.height || '' }\n              : { ...getMediaStyles(mediaPosition, style), width: media?.width || '' }\n          }\n        >\n          {media.content}\n        </div>\n      )}\n      <div\n        id={contentId}\n        ref={__subStepRef}\n        key={__contentKey}\n        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n      >\n        {/* We use a wrapper around the boundary to preserve container's paddings. */}\n        <BuiltInErrorBoundary wrapper={content => <InternalBox padding=\"m\">{content}</InternalBox>}>\n          {header && (\n            <ContainerHeaderContextProvider>\n              <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>\n                <div\n                  id={headerId}\n                  className={clsx(\n                    isRefresh && styles.refresh,\n                    styles.header,\n                    analyticsSelectors.header,\n                    styles[`header-variant-${variant}`],\n                    {\n                      [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n                      [styles['header-sticky-enabled']]: isSticky,\n                      [styles['header-dynamic-height']]: hasDynamicHeight,\n                      [styles['header-stuck']]: isStuck,\n                      [styles['with-paddings']]: !disableHeaderPaddings,\n                      [styles['with-hidden-content']]: !children || __hiddenContent,\n                      [styles['header-with-media']]: hasMedia,\n                      [styles['header-full-page']]: __fullPage && isRefresh,\n                    }\n                  )}\n                  ref={headerMergedRef}\n                  style={{\n                    ...stickyStyles.style,\n                    ...getHeaderStyles(style),\n                  }}\n                >\n                  {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n                  {header}\n                </div>\n              </StickyHeaderContext.Provider>\n            </ContainerHeaderContextProvider>\n          )}\n          <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>\n            <div\n              className={clsx(styles['content-inner'], testStyles['content-inner'], {\n                [styles['with-paddings']]: !disableContentPaddings,\n                [styles['with-header']]: !!header,\n              })}\n              style={getContentStyles(style)}\n            >\n              {/* We use a wrapper around the boundary to preserve paddings in case they were disabled by the consumer.\n              That is needed because the consumer-defined paddings that normally come with the content can no longer\n              apply since the content failed to render. */}\n              <BuiltInErrorBoundary\n                wrapper={content => (\n                  <InternalBox padding={disableContentPaddings ? 'm' : undefined}>{content}</InternalBox>\n                )}\n              >\n                {children}\n              </BuiltInErrorBoundary>\n            </div>\n          </div>\n          {footer && (\n            <div\n              className={clsx(styles.footer, {\n                [styles['with-divider']]: !__disableFooterDivider,\n                [styles['with-paddings']]: !disableFooterPaddings,\n              })}\n              style={getFooterStyles(style)}\n            >\n              {footer}\n            </div>\n          )}\n        </BuiltInErrorBoundary>\n      </div>\n    </div>\n  );\n});\n\nexport default InternalContainer;\n"]}

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

@@ -1,38 +1,39 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_1me67_13",
-  "fit-height": "awsui_fit-height_14iqq_1me67_46",
-  "with-side-media": "awsui_with-side-media_14iqq_1me67_51",
-  "variant-default": "awsui_variant-default_14iqq_1me67_54",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1me67_54",
-  "refresh": "awsui_refresh_14iqq_1me67_63",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_1me67_113",
-  "with-stuck-sticky-header-at-bottom": "awsui_with-stuck-sticky-header-at-bottom_14iqq_1me67_119",
-  "with-top-media": "awsui_with-top-media_14iqq_1me67_129",
-  "content-wrapper": "awsui_content-wrapper_14iqq_1me67_134",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1me67_139",
-  "media": "awsui_media_14iqq_1me67_146",
-  "media-top": "awsui_media-top_14iqq_1me67_164",
-  "media-side": "awsui_media-side_14iqq_1me67_169",
-  "header": "awsui_header_14iqq_1me67_175",
-  "header-full-page": "awsui_header-full-page_14iqq_1me67_180",
-  "header-variant-embedded": "awsui_header-variant-embedded_14iqq_1me67_183",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1me67_183",
-  "header-with-media": "awsui_header-with-media_14iqq_1me67_186",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1me67_192",
-  "header-stuck": "awsui_header-stuck_14iqq_1me67_202",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1me67_212",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1me67_215",
-  "with-paddings": "awsui_with-paddings_14iqq_1me67_221",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_1me67_230",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1me67_288",
-  "header-cover": "awsui_header-cover_14iqq_1me67_291",
-  "content": "awsui_content_14iqq_1me67_134",
-  "content-fit-height": "awsui_content-fit-height_14iqq_1me67_319",
-  "content-inner": "awsui_content-inner_14iqq_1me67_325",
-  "with-header": "awsui_with-header_14iqq_1me67_332",
-  "footer": "awsui_footer_14iqq_1me67_336",
-  "with-divider": "awsui_with-divider_14iqq_1me67_340"
+  "root": "awsui_root_14iqq_w40we_13",
+  "fit-height": "awsui_fit-height_14iqq_w40we_46",
+  "with-side-media": "awsui_with-side-media_14iqq_w40we_51",
+  "variant-default": "awsui_variant-default_14iqq_w40we_54",
+  "variant-stacked": "awsui_variant-stacked_14iqq_w40we_54",
+  "refresh": "awsui_refresh_14iqq_w40we_63",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_w40we_113",
+  "with-stuck-sticky-header-at-bottom": "awsui_with-stuck-sticky-header-at-bottom_14iqq_w40we_119",
+  "focus-ring": "awsui_focus-ring_14iqq_w40we_126",
+  "with-top-media": "awsui_with-top-media_14iqq_w40we_150",
+  "content-wrapper": "awsui_content-wrapper_14iqq_w40we_155",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_w40we_160",
+  "media": "awsui_media_14iqq_w40we_167",
+  "media-top": "awsui_media-top_14iqq_w40we_185",
+  "media-side": "awsui_media-side_14iqq_w40we_190",
+  "header": "awsui_header_14iqq_w40we_196",
+  "header-full-page": "awsui_header-full-page_14iqq_w40we_201",
+  "header-variant-embedded": "awsui_header-variant-embedded_14iqq_w40we_204",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_w40we_204",
+  "header-with-media": "awsui_header-with-media_14iqq_w40we_207",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_w40we_213",
+  "header-stuck": "awsui_header-stuck_14iqq_w40we_223",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_w40we_233",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_w40we_236",
+  "with-paddings": "awsui_with-paddings_14iqq_w40we_242",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_w40we_251",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_w40we_309",
+  "header-cover": "awsui_header-cover_14iqq_w40we_312",
+  "content": "awsui_content_14iqq_w40we_155",
+  "content-fit-height": "awsui_content-fit-height_14iqq_w40we_340",
+  "content-inner": "awsui_content-inner_14iqq_w40we_346",
+  "with-header": "awsui_with-header_14iqq_w40we_353",
+  "footer": "awsui_footer_14iqq_w40we_357",
+  "with-divider": "awsui_with-divider_14iqq_w40we_361"
 };
   

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

@@ -10,7 +10,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_14iqq_1me67_13:not(#\9) {
+.awsui_root_14iqq_w40we_13:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -43,15 +43,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_1me67_13.awsui_fit-height_14iqq_1me67_46:not(#\9) {
+.awsui_root_14iqq_w40we_13.awsui_fit-height_14iqq_w40we_46:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
-.awsui_root_14iqq_1me67_13.awsui_fit-height_14iqq_1me67_46.awsui_with-side-media_14iqq_1me67_51:not(#\9) {
+.awsui_root_14iqq_w40we_13.awsui_fit-height_14iqq_w40we_46.awsui_with-side-media_14iqq_w40we_51:not(#\9) {
   flex-direction: row;
 }
-.awsui_root_14iqq_1me67_13.awsui_variant-default_14iqq_1me67_54:not(#\9), .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9) {
+.awsui_root_14iqq_w40we_13.awsui_variant-default_14iqq_w40we_54:not(#\9), .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9) {
   background-color: var(--color-background-container-content-mjfil9, #ffffff);
   --awsui-inline-label-background-color-66120l: var(--color-background-container-content-mjfil9, #ffffff);
   border-start-start-radius: var(--border-radius-container-33hhdh, 0px);
@@ -60,11 +60,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
   box-sizing: border-box;
 }
-.awsui_root_14iqq_1me67_13.awsui_variant-default_14iqq_1me67_54.awsui_refresh_14iqq_1me67_63:not(#\9), .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54.awsui_refresh_14iqq_1me67_63:not(#\9) {
+.awsui_root_14iqq_w40we_13.awsui_variant-default_14iqq_w40we_54.awsui_refresh_14iqq_w40we_63:not(#\9), .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54.awsui_refresh_14iqq_w40we_63:not(#\9) {
   border-block: solid var(--border-divider-section-width-dlkb8v, 1px) var(--color-border-divider-default-diwd4w, #eaeded);
   border-inline: solid var(--border-divider-section-width-dlkb8v, 1px) var(--color-border-divider-default-diwd4w, #eaeded);
 }
-.awsui_root_14iqq_1me67_13.awsui_variant-default_14iqq_1me67_54:not(#\9):not(.awsui_refresh_14iqq_1me67_63)::before, .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9):not(.awsui_refresh_14iqq_1me67_63)::before {
+.awsui_root_14iqq_w40we_13.awsui_variant-default_14iqq_w40we_54:not(#\9):not(.awsui_refresh_14iqq_w40we_63)::before, .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9):not(.awsui_refresh_14iqq_w40we_63)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -82,7 +82,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
   z-index: 1;
 }
-.awsui_root_14iqq_1me67_13.awsui_variant-default_14iqq_1me67_54:not(#\9):not(.awsui_refresh_14iqq_1me67_63)::after, .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9):not(.awsui_refresh_14iqq_1me67_63)::after {
+.awsui_root_14iqq_w40we_13.awsui_variant-default_14iqq_w40we_54:not(#\9):not(.awsui_refresh_14iqq_w40we_63)::after, .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9):not(.awsui_refresh_14iqq_w40we_63)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -98,151 +98,172 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
   box-shadow: var(--shadow-container-quglkl, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9):not(:last-child), .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9):not(:last-child), .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9):not(:last-child)::before, .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9):not(:last-child)::after {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   border-block-end-width: 0;
 }
-.awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54 + .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9), .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54 + .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9)::before, .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54 + .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9)::after {
+.awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54 + .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9), .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54 + .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9)::before, .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54 + .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9)::after {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54 + .awsui_root_14iqq_1me67_13.awsui_variant-stacked_14iqq_1me67_54:not(#\9):not(.awsui_refresh_14iqq_1me67_63)::before {
+.awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54 + .awsui_root_14iqq_w40we_13.awsui_variant-stacked_14iqq_w40we_54:not(#\9):not(.awsui_refresh_14iqq_w40we_63)::before {
   border-block-start: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-diwd4w, #eaeded);
 }
-.awsui_root_14iqq_1me67_13.awsui_sticky-enabled_14iqq_1me67_113:not(#\9):not(.awsui_refresh_14iqq_1me67_63)::before {
+.awsui_root_14iqq_w40we_13.awsui_sticky-enabled_14iqq_w40we_113:not(#\9):not(.awsui_refresh_14iqq_w40we_63)::before {
   inset-block-start: calc(-1 * var(--border-container-top-width-6p1io9, 1px));
 }
-.awsui_root_14iqq_1me67_13.awsui_sticky-enabled_14iqq_1me67_113:not(#\9):not(.awsui_refresh_14iqq_1me67_63).awsui_variant-stacked_14iqq_1me67_54::before {
+.awsui_root_14iqq_w40we_13.awsui_sticky-enabled_14iqq_w40we_113:not(#\9):not(.awsui_refresh_14iqq_w40we_63).awsui_variant-stacked_14iqq_w40we_54::before {
   inset-block-start: calc(-1 * var(--border-divider-section-width-dlkb8v, 1px));
 }
-.awsui_root_14iqq_1me67_13.awsui_with-stuck-sticky-header-at-bottom_14iqq_1me67_119:not(#\9) {
+.awsui_root_14iqq_w40we_13.awsui_with-stuck-sticky-header-at-bottom_14iqq_w40we_119:not(#\9) {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
 }
+.awsui_root_14iqq_w40we_13:not(#\9):focus {
+  outline: none;
+}
+.awsui_root_14iqq_w40we_13.awsui_focus-ring_14iqq_w40we_126:not(#\9):focus::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0px;
+  inset-block-start: 0px;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  background: transparent;
+  box-sizing: border-box;
+  outline: 2px dotted transparent;
+  outline-offset: 2px;
+  border-start-start-radius: var(--border-radius-container-33hhdh, 0px);
+  border-start-end-radius: var(--border-radius-container-33hhdh, 0px);
+  border-end-start-radius: var(--border-radius-container-33hhdh, 0px);
+  border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-sewkzn, #0073bb);
+}
 
-.awsui_with-side-media_14iqq_1me67_51:not(#\9) {
+.awsui_with-side-media_14iqq_w40we_51:not(#\9) {
   display: flex;
   flex-direction: row;
 }
 
-.awsui_with-top-media_14iqq_1me67_129:not(#\9) {
+.awsui_with-top-media_14iqq_w40we_150:not(#\9) {
   display: flex;
   flex-direction: column;
 }
 
-.awsui_content-wrapper_14iqq_1me67_134:not(#\9) {
+.awsui_content-wrapper_14iqq_w40we_155:not(#\9) {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
-.awsui_content-wrapper-fit-height_14iqq_1me67_139:not(#\9) {
+.awsui_content-wrapper-fit-height_14iqq_w40we_160:not(#\9) {
   block-size: 100%;
   overflow: hidden;
   border-end-start-radius: var(--border-radius-container-33hhdh, 0px);
   border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
 }
 
-.awsui_media_14iqq_1me67_146:not(#\9) {
+.awsui_media_14iqq_w40we_167:not(#\9) {
   overflow: hidden;
   flex-shrink: 0;
 }
-.awsui_media_14iqq_1me67_146 img:not(#\9),
-.awsui_media_14iqq_1me67_146 video:not(#\9),
-.awsui_media_14iqq_1me67_146 picture:not(#\9) {
+.awsui_media_14iqq_w40we_167 img:not(#\9),
+.awsui_media_14iqq_w40we_167 video:not(#\9),
+.awsui_media_14iqq_w40we_167 picture:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.awsui_media_14iqq_1me67_146 iframe:not(#\9) {
+.awsui_media_14iqq_w40we_167 iframe:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   border-block: 0;
   border-inline: 0;
 }
-.awsui_media-top_14iqq_1me67_164:not(#\9) {
+.awsui_media-top_14iqq_w40we_185:not(#\9) {
   max-block-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-33hhdh, 0px) - 1px);
   border-start-end-radius: calc(var(--border-radius-container-33hhdh, 0px) - 1px);
 }
-.awsui_media-side_14iqq_1me67_169:not(#\9) {
+.awsui_media-side_14iqq_w40we_190:not(#\9) {
   max-inline-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-33hhdh, 0px) - 1px);
   border-end-start-radius: calc(var(--border-radius-container-33hhdh, 0px) - 1px);
 }
 
-.awsui_header_14iqq_1me67_175:not(#\9) {
+.awsui_header_14iqq_w40we_196:not(#\9) {
   background-color: var(--color-background-container-header-irktp5, #fafafa);
   border-start-start-radius: var(--border-radius-container-33hhdh, 0px);
   border-start-end-radius: var(--border-radius-container-33hhdh, 0px);
 }
-.awsui_header_14iqq_1me67_175.awsui_header-full-page_14iqq_1me67_180:not(#\9) {
+.awsui_header_14iqq_w40we_196.awsui_header-full-page_14iqq_w40we_201:not(#\9) {
   background-color: var(--color-background-layout-main-y4565g, #f2f3f3);
 }
-.awsui_header-variant-embedded_14iqq_1me67_183.awsui_refresh_14iqq_1me67_63:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1me67_183) {
+.awsui_header-variant-embedded_14iqq_w40we_204.awsui_refresh_14iqq_w40we_63:not(#\9):not(.awsui_header-sticky-enabled_14iqq_w40we_204) {
   background-color: transparent;
 }
-.awsui_header_14iqq_1me67_175.awsui_header-with-media_14iqq_1me67_186:not(#\9) {
+.awsui_header_14iqq_w40we_196.awsui_header-with-media_14iqq_w40we_207:not(#\9) {
   background: none;
 }
-.awsui_header_14iqq_1me67_175.awsui_header-with-media_14iqq_1me67_186:not(#\9):not(:empty) {
+.awsui_header_14iqq_w40we_196.awsui_header-with-media_14iqq_w40we_207:not(#\9):not(:empty) {
   border-block-end: none;
 }
-.awsui_header-sticky-disabled_14iqq_1me67_192:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_w40we_213:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_1me67_183:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_w40we_204:not(#\9) {
   inset-block-start: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_1me67_202:not(#\9) {
+.awsui_header-stuck_14iqq_w40we_223:not(#\9) {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-.awsui_header-stuck_14iqq_1me67_202:not(#\9)::before {
+.awsui_header-stuck_14iqq_w40we_223:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
 }
-.awsui_header-stuck_14iqq_1me67_202:not(#\9):not(.awsui_header-variant-cards_14iqq_1me67_212) {
+.awsui_header-stuck_14iqq_w40we_223:not(#\9):not(.awsui_header-variant-cards_14iqq_w40we_233) {
   box-shadow: var(--shadow-sticky-embedded-5m1s1m, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
 }
-.awsui_header-dynamic-height_14iqq_1me67_215.awsui_header-stuck_14iqq_1me67_202:not(#\9) {
+.awsui_header-dynamic-height_14iqq_w40we_236.awsui_header-stuck_14iqq_w40we_223:not(#\9) {
   margin-block-end: calc(var(--line-height-heading-xl-pi61pg, 36px) - var(--line-height-heading-l-zmt48b, 22px));
 }
-.awsui_header_14iqq_1me67_175:not(#\9):not(:empty) {
+.awsui_header_14iqq_w40we_196:not(#\9):not(:empty) {
   border-block-end: var(--border-container-sticky-width-ns9pe4, 1px) solid var(--color-border-container-divider-rkhoab, #eaeded);
 }
-.awsui_header_14iqq_1me67_175.awsui_with-paddings_14iqq_1me67_221:not(#\9) {
+.awsui_header_14iqq_w40we_196.awsui_with-paddings_14iqq_w40we_242:not(#\9) {
   padding-block-start: var(--space-container-header-top-3txhx4, 12px);
   padding-block-end: var(--space-container-header-bottom-9elagw, 12px);
   padding-inline: var(--space-container-horizontal-quy5ai, 20px);
 }
-.awsui_header_14iqq_1me67_175.awsui_with-paddings_14iqq_1me67_221.awsui_header-variant-cards_14iqq_1me67_212:not(#\9) {
+.awsui_header_14iqq_w40we_196.awsui_with-paddings_14iqq_w40we_242.awsui_header-variant-cards_14iqq_w40we_233:not(#\9) {
   padding-block: var(--space-container-header-top-3txhx4, 12px);
   padding-inline: var(--space-container-horizontal-quy5ai, 20px);
 }
-.awsui_header_14iqq_1me67_175.awsui_with-hidden-content_14iqq_1me67_230:not(#\9) {
+.awsui_header_14iqq_w40we_196.awsui_with-hidden-content_14iqq_w40we_251:not(#\9) {
   border-end-start-radius: var(--border-radius-container-33hhdh, 0px);
   border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
 }
-.awsui_header-variant-cards_14iqq_1me67_212:not(#\9) {
+.awsui_header-variant-cards_14iqq_w40we_233:not(#\9) {
   border-start-start-radius: var(--border-radius-container-33hhdh, 0px);
   border-start-end-radius: var(--border-radius-container-33hhdh, 0px);
   border-end-start-radius: var(--border-radius-container-33hhdh, 0px);
   border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
   box-sizing: border-box;
 }
-.awsui_header-variant-cards_14iqq_1me67_212.awsui_refresh_14iqq_1me67_63:not(#\9) {
+.awsui_header-variant-cards_14iqq_w40we_233.awsui_refresh_14iqq_w40we_63:not(#\9) {
   border-block: solid var(--border-divider-section-width-dlkb8v, 1px) var(--color-border-divider-default-diwd4w, #eaeded);
   border-inline: solid var(--border-divider-section-width-dlkb8v, 1px) var(--color-border-divider-default-diwd4w, #eaeded);
 }
-.awsui_header-variant-cards_14iqq_1me67_212:not(#\9):not(.awsui_refresh_14iqq_1me67_63)::before {
+.awsui_header-variant-cards_14iqq_w40we_233:not(#\9):not(.awsui_refresh_14iqq_w40we_63)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -260,7 +281,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
   z-index: 1;
 }
-.awsui_header-variant-cards_14iqq_1me67_212:not(#\9):not(.awsui_refresh_14iqq_1me67_63)::after {
+.awsui_header-variant-cards_14iqq_w40we_233:not(#\9):not(.awsui_refresh_14iqq_w40we_63)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -276,26 +297,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-33hhdh, 0px);
   box-shadow: var(--shadow-container-quglkl, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_header-variant-cards_14iqq_1me67_212:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1me67_183) {
+.awsui_header-variant-cards_14iqq_w40we_233:not(#\9):not(.awsui_header-sticky-enabled_14iqq_w40we_204) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_1me67_212.awsui_header-stuck_14iqq_1me67_202:not(#\9)::after, .awsui_header-variant-cards_14iqq_1me67_212.awsui_header-stuck_14iqq_1me67_202:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_w40we_233.awsui_header-stuck_14iqq_w40we_223:not(#\9)::after, .awsui_header-variant-cards_14iqq_w40we_233.awsui_header-stuck_14iqq_w40we_223:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_1me67_288.awsui_header-stuck_14iqq_1me67_202:not(#\9) {
+.awsui_header-variant-full-page_14iqq_w40we_309.awsui_header-stuck_14iqq_w40we_223:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_1me67_288.awsui_header-stuck_14iqq_1me67_202 > .awsui_header-cover_14iqq_1me67_291:not(#\9) {
+.awsui_header-variant-full-page_14iqq_w40we_309.awsui_header-stuck_14iqq_w40we_223 > .awsui_header-cover_14iqq_w40we_312:not(#\9) {
   background-color: var(--color-background-layout-main-y4565g, #f2f3f3);
   inline-size: 100%;
   position: absolute;
   block-size: var(--space-scaled-s-2crg2b, 12px);
   inset-block-start: calc(-1 * var(--space-scaled-s-2crg2b, 12px));
 }
-.awsui_header-variant-full-page_14iqq_1me67_288.awsui_header-stuck_14iqq_1me67_202:not(#\9)::before {
+.awsui_header-variant-full-page_14iqq_w40we_309.awsui_header-stuck_14iqq_w40we_223:not(#\9)::before {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -305,7 +326,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: 0;
   border-block-end: solid var(--border-divider-section-width-dlkb8v, 1px) var(--color-border-divider-default-diwd4w, #eaeded);
 }
-.awsui_header-variant-full-page_14iqq_1me67_288.awsui_header-stuck_14iqq_1me67_202:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_w40we_309.awsui_header-stuck_14iqq_w40we_223:not(#\9)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -313,30 +334,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
 }
 
-.awsui_content_14iqq_1me67_134:not(#\9) {
+.awsui_content_14iqq_w40we_155:not(#\9) {
   flex: 1;
 }
-.awsui_content-fit-height_14iqq_1me67_319:not(#\9) {
+.awsui_content-fit-height_14iqq_w40we_340:not(#\9) {
   overflow: auto;
   display: flex;
   flex-direction: column;
 }
 
-.awsui_content-inner_14iqq_1me67_325:not(#\9) {
+.awsui_content-inner_14iqq_w40we_346:not(#\9) {
   flex: 1;
 }
-.awsui_content-inner_14iqq_1me67_325.awsui_with-paddings_14iqq_1me67_221:not(#\9) {
+.awsui_content-inner_14iqq_w40we_346.awsui_with-paddings_14iqq_w40we_242:not(#\9) {
   padding-block: var(--space-scaled-l-33ruz6, 20px);
   padding-inline: var(--space-container-horizontal-quy5ai, 20px);
 }
-.awsui_content-inner_14iqq_1me67_325.awsui_with-paddings_14iqq_1me67_221.awsui_with-header_14iqq_1me67_332:not(#\9) {
+.awsui_content-inner_14iqq_w40we_346.awsui_with-paddings_14iqq_w40we_242.awsui_with-header_14iqq_w40we_353:not(#\9) {
   padding-block-start: var(--space-container-content-top-ryubqz, 16px);
 }
 
-.awsui_footer_14iqq_1me67_336.awsui_with-paddings_14iqq_1me67_221:not(#\9) {
+.awsui_footer_14iqq_w40we_357.awsui_with-paddings_14iqq_w40we_242:not(#\9) {
   padding-block: var(--space-scaled-s-2crg2b, 12px);
   padding-inline: var(--space-container-horizontal-quy5ai, 20px);
 }
-.awsui_footer_14iqq_1me67_336.awsui_with-divider_14iqq_1me67_340:not(#\9) {
+.awsui_footer_14iqq_w40we_357.awsui_with-divider_14iqq_w40we_361:not(#\9) {
   border-block-start: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-diwd4w, #eaeded);
 }