@cloudscape-design/components-themeable 3.0.1127 → 3.0.1128

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css

@@ -150,7 +150,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_navigation-container_2p2ab_10cja_153:not(#\9) {
+.awsui_navigation-container_2p2ab_1oh1y_153:not(#\9) {
   position: sticky;
   z-index: 830;
   background-color: var(--color-background-container-content-aemn43, #ffffff);
@@ -161,27 +161,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   flex-direction: column;
 }
-.awsui_navigation-container_2p2ab_10cja_153:not(#\9):not(.awsui_is-navigation-open_2p2ab_10cja_164) {
+.awsui_navigation-container_2p2ab_1oh1y_153:not(#\9):not(.awsui_is-navigation-open_2p2ab_1oh1y_164) {
   inline-size: 0px;
   display: none;
 }
-.awsui_navigation-container_2p2ab_10cja_153 > .awsui_navigation_2p2ab_10cja_153:not(#\9) {
+.awsui_navigation-container_2p2ab_1oh1y_153 > .awsui_navigation_2p2ab_1oh1y_153:not(#\9) {
   flex-grow: 1;
   block-size: 100%;
   overflow-y: auto;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
-  inline-size: var(--awsui-navigation-width-lqnbqg);
+  inline-size: var(--awsui-navigation-width-b75yp7);
   position: relative;
 }
 @media (max-width: 688px) {
-  .awsui_navigation-container_2p2ab_10cja_153:not(#\9) {
-    --awsui-navigation-width-lqnbqg: 100vw;
+  .awsui_navigation-container_2p2ab_1oh1y_153:not(#\9) {
+    --awsui-navigation-width-b75yp7: 100vw;
     z-index: 1001;
   }
 }
 
-.awsui_hide-navigation_2p2ab_10cja_184:not(#\9) {
+.awsui_hide-navigation_2p2ab_1oh1y_184:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-m-n2lypl, 16px);
   inset-block-start: 14px;

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js

@@ -2,9 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "navigation-container": "awsui_navigation-container_2p2ab_10cja_153",
-  "is-navigation-open": "awsui_is-navigation-open_2p2ab_10cja_164",
-  "navigation": "awsui_navigation_2p2ab_10cja_153",
-  "hide-navigation": "awsui_hide-navigation_2p2ab_10cja_184"
+  "navigation-container": "awsui_navigation-container_2p2ab_1oh1y_153",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_1oh1y_164",
+  "navigation": "awsui_navigation_2p2ab_1oh1y_153",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_1oh1y_184"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAO9E,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAqB,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,sBAAsB,CAAC;IACvC,cAAc,EAAE,qBAAqB,CAAC;IACtC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,uBAAuB,EAAE,uBAAuB,CAAC;CAClD;AAUD,eAAO,MAAM,cAAc,2FAMxB,mBAAmB,gBAoDrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAQ9E,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAqB,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,sBAAsB,CAAC;IACvC,cAAc,EAAE,qBAAqB,CAAC;IACtC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,uBAAuB,EAAE,uBAAuB,CAAC;CAClD;AAUD,eAAO,MAAM,cAAc,2FAMxB,mBAAmB,gBAsDrB,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js

@@ -6,6 +6,7 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
 import VisualContext from '../../../internal/components/visual-context';
 import customCssProps from '../../../internal/generated/custom-css-properties';
 import { AppLayoutAfterMainSlot, AppLayoutBeforeMainSlot, AppLayoutBottomContentSlot, AppLayoutTopContentSlot, } from '../internal';
+import { isWidgetReady } from '../state/invariants';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 const componentAnalyticsMetadata = {
@@ -24,8 +25,9 @@ export const SkeletonLayout = ({ registered, appLayoutProps, appLayoutState, too
         appLayoutState,
     };
     const { wrapperElAttributes, mainElAttributes, contentWrapperElAttributes, contentHeaderElAttributes, contentElAttributes, } = skeletonSlotsAttributes;
+    const isWidgetLoaded = isWidgetReady(appLayoutState);
     return (React.createElement(VisualContext, { contextName: "app-layout-toolbar" },
-        React.createElement("div", Object.assign({}, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }), { ref: appLayoutState.rootRef, "data-awsui-app-layout-widget-loaded": false }, wrapperElAttributes, { className: (_a = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.className) !== null && _a !== void 0 ? _a : clsx(styles.root, testutilStyles.root), style: (_b = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.style) !== null && _b !== void 0 ? _b : {
+        React.createElement("div", Object.assign({}, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }), { ref: appLayoutState.rootRef, "data-awsui-app-layout-widget-loaded": isWidgetLoaded }, wrapperElAttributes, { className: (_a = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.className) !== null && _a !== void 0 ? _a : clsx(styles.root, testutilStyles.root), style: (_b = wrapperElAttributes === null || wrapperElAttributes === void 0 ? void 0 : wrapperElAttributes.style) !== null && _b !== void 0 ? _b : {
                 blockSize: `calc(100vh - ${appLayoutProps.placement.insetBlockStart + appLayoutProps.placement.insetBlockEnd}px)`,
                 [customCssProps.navigationWidth]: `${navigationWidth}px`,
             } }),

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAGjH,OAAO,aAAa,MAAM,6CAA6C,CAAC;AACxE,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,aAAa,CAAC;AAIrB,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,0BAA0B,GAAwD;IACtF,IAAI,EAAE,wBAAwB;IAC9B,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,MAAM;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAY,EACZ,uBAAuB,GACH,EAAE,EAAE;;IACxB,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;IACnE,MAAM,WAAW,GAAsB;QACrC,YAAY;QACZ,cAAc;QACd,cAAc;KACf,CAAC;IACF,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,0BAA0B,EAC1B,yBAAyB,EACzB,mBAAmB,GACpB,GAAG,uBAAuB,CAAC;IAE5B,OAAO,CACL,oBAAC,aAAa,IAAC,WAAW,EAAC,oBAAoB;QAC7C,6CACM,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,IAC5E,GAAG,EAAE,cAAc,CAAC,OAAoC,yCACnB,KAAK,IACtC,mBAAmB,IACvB,SAAS,EAAE,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,mCAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,EACnF,KAAK,EACH,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,KAAK,mCAAI;gBAC5B,SAAS,EAAE,gBAAgB,cAAc,CAAC,SAAS,CAAC,eAAe,GAAG,cAAc,CAAC,SAAS,CAAC,aAAa,KAAK;gBACjH,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,IAAI;aACzD;YAGH,oBAAC,uBAAuB,oBAAK,WAAW,EAAI;YAC5C,8CAAU,gBAAgB,IAAE,SAAS,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,SAAS,mCAAI,MAAM,CAAC,eAAe,CAAC;gBAC3F,oBAAC,uBAAuB,oBAAK,WAAW,EAAI;gBAC5C,6CACM,0BAA0B,IAC9B,SAAS,EACP,MAAA,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,SAAS,mCACrC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,cAAc,CAAC,sBAAsB,EAAE,CAAC;oBAGhG,aAAa,IAAI,6CAAS,yBAAyB,GAAG,aAAa,CAAO;oBAE3E,6CAAS,mBAAmB,IAAE,SAAS,EAAE,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,mCAAI,cAAc,CAAC,OAAO,KAC9F,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CACxB,CACF;gBACN,oBAAC,0BAA0B,oBAAK,WAAW,EAAI,CAC1C;YACP,oBAAC,sBAAsB,oBAAK,WAAW,EAAI,CACvC,CACQ,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';\nimport {\n  AppLayoutAfterMainSlot,\n  AppLayoutBeforeMainSlot,\n  AppLayoutBottomContentSlot,\n  AppLayoutTopContentSlot,\n} from '../internal';\nimport { ToolbarProps } from '../toolbar';\nimport { SkeletonPartProps, SkeletonSlotsAttributes } from './interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface SkeletonLayoutProps {\n  registered: boolean;\n  appLayoutProps: AppLayoutInternalProps;\n  appLayoutState: AppLayoutPendingState;\n  toolbarProps: ToolbarProps | null;\n  skeletonSlotsAttributes: SkeletonSlotsAttributes;\n}\n\nconst componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {\n  name: 'awsui.AppLayoutToolbar',\n  label: {\n    selector: 'h1',\n    root: 'body',\n  },\n};\n\nexport const SkeletonLayout = ({\n  registered,\n  appLayoutProps,\n  appLayoutState,\n  toolbarProps,\n  skeletonSlotsAttributes,\n}: SkeletonLayoutProps) => {\n  const { contentHeader, content, navigationWidth } = appLayoutProps;\n  const mergedProps: SkeletonPartProps = {\n    toolbarProps,\n    appLayoutProps,\n    appLayoutState,\n  };\n  const {\n    wrapperElAttributes,\n    mainElAttributes,\n    contentWrapperElAttributes,\n    contentHeaderElAttributes,\n    contentElAttributes,\n  } = skeletonSlotsAttributes;\n\n  return (\n    <VisualContext contextName=\"app-layout-toolbar\">\n      <div\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n        ref={appLayoutState.rootRef as React.Ref<HTMLDivElement>}\n        data-awsui-app-layout-widget-loaded={false}\n        {...wrapperElAttributes}\n        className={wrapperElAttributes?.className ?? clsx(styles.root, testutilStyles.root)}\n        style={\n          wrapperElAttributes?.style ?? {\n            blockSize: `calc(100vh - ${appLayoutProps.placement.insetBlockStart + appLayoutProps.placement.insetBlockEnd}px)`,\n            [customCssProps.navigationWidth]: `${navigationWidth}px`,\n          }\n        }\n      >\n        <AppLayoutBeforeMainSlot {...mergedProps} />\n        <main {...mainElAttributes} className={mainElAttributes?.className ?? styles['main-landmark']}>\n          <AppLayoutTopContentSlot {...mergedProps} />\n          <div\n            {...contentWrapperElAttributes}\n            className={\n              contentWrapperElAttributes?.className ??\n              clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings })\n            }\n          >\n            {contentHeader && <div {...contentHeaderElAttributes}>{contentHeader}</div>}\n            {/*delay rendering the content until registration of this instance is complete*/}\n            <div {...contentElAttributes} className={contentElAttributes?.className ?? testutilStyles.content}>\n              {registered ? content : null}\n            </div>\n          </div>\n          <AppLayoutBottomContentSlot {...mergedProps} />\n        </main>\n        <AppLayoutAfterMainSlot {...mergedProps} />\n      </div>\n    </VisualContext>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAGjH,OAAO,aAAa,MAAM,6CAA6C,CAAC;AACxE,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,0BAA0B,GAAwD;IACtF,IAAI,EAAE,wBAAwB;IAC9B,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,MAAM;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAY,EACZ,uBAAuB,GACH,EAAE,EAAE;;IACxB,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;IACnE,MAAM,WAAW,GAAsB;QACrC,YAAY;QACZ,cAAc;QACd,cAAc;KACf,CAAC;IACF,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,0BAA0B,EAC1B,yBAAyB,EACzB,mBAAmB,GACpB,GAAG,uBAAuB,CAAC;IAE5B,MAAM,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,aAAa,IAAC,WAAW,EAAC,oBAAoB;QAC7C,6CACM,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,IAC5E,GAAG,EAAE,cAAc,CAAC,OAAoC,yCACnB,cAAc,IAC/C,mBAAmB,IACvB,SAAS,EAAE,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,mCAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,EACnF,KAAK,EACH,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,KAAK,mCAAI;gBAC5B,SAAS,EAAE,gBAAgB,cAAc,CAAC,SAAS,CAAC,eAAe,GAAG,cAAc,CAAC,SAAS,CAAC,aAAa,KAAK;gBACjH,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,GAAG,eAAe,IAAI;aACzD;YAGH,oBAAC,uBAAuB,oBAAK,WAAW,EAAI;YAC5C,8CAAU,gBAAgB,IAAE,SAAS,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,SAAS,mCAAI,MAAM,CAAC,eAAe,CAAC;gBAC3F,oBAAC,uBAAuB,oBAAK,WAAW,EAAI;gBAC5C,6CACM,0BAA0B,IAC9B,SAAS,EACP,MAAA,0BAA0B,aAA1B,0BAA0B,uBAA1B,0BAA0B,CAAE,SAAS,mCACrC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,cAAc,CAAC,sBAAsB,EAAE,CAAC;oBAGhG,aAAa,IAAI,6CAAS,yBAAyB,GAAG,aAAa,CAAO;oBAE3E,6CAAS,mBAAmB,IAAE,SAAS,EAAE,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,SAAS,mCAAI,cAAc,CAAC,OAAO,KAC9F,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CACxB,CACF;gBACN,oBAAC,0BAA0B,oBAAK,WAAW,EAAI,CAC1C;YACP,oBAAC,sBAAsB,oBAAK,WAAW,EAAI,CACvC,CACQ,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport VisualContext from '../../../internal/components/visual-context';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';\nimport {\n  AppLayoutAfterMainSlot,\n  AppLayoutBeforeMainSlot,\n  AppLayoutBottomContentSlot,\n  AppLayoutTopContentSlot,\n} from '../internal';\nimport { isWidgetReady } from '../state/invariants';\nimport { ToolbarProps } from '../toolbar';\nimport { SkeletonPartProps, SkeletonSlotsAttributes } from './interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface SkeletonLayoutProps {\n  registered: boolean;\n  appLayoutProps: AppLayoutInternalProps;\n  appLayoutState: AppLayoutPendingState;\n  toolbarProps: ToolbarProps | null;\n  skeletonSlotsAttributes: SkeletonSlotsAttributes;\n}\n\nconst componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {\n  name: 'awsui.AppLayoutToolbar',\n  label: {\n    selector: 'h1',\n    root: 'body',\n  },\n};\n\nexport const SkeletonLayout = ({\n  registered,\n  appLayoutProps,\n  appLayoutState,\n  toolbarProps,\n  skeletonSlotsAttributes,\n}: SkeletonLayoutProps) => {\n  const { contentHeader, content, navigationWidth } = appLayoutProps;\n  const mergedProps: SkeletonPartProps = {\n    toolbarProps,\n    appLayoutProps,\n    appLayoutState,\n  };\n  const {\n    wrapperElAttributes,\n    mainElAttributes,\n    contentWrapperElAttributes,\n    contentHeaderElAttributes,\n    contentElAttributes,\n  } = skeletonSlotsAttributes;\n\n  const isWidgetLoaded = isWidgetReady(appLayoutState);\n\n  return (\n    <VisualContext contextName=\"app-layout-toolbar\">\n      <div\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n        ref={appLayoutState.rootRef as React.Ref<HTMLDivElement>}\n        data-awsui-app-layout-widget-loaded={isWidgetLoaded}\n        {...wrapperElAttributes}\n        className={wrapperElAttributes?.className ?? clsx(styles.root, testutilStyles.root)}\n        style={\n          wrapperElAttributes?.style ?? {\n            blockSize: `calc(100vh - ${appLayoutProps.placement.insetBlockStart + appLayoutProps.placement.insetBlockEnd}px)`,\n            [customCssProps.navigationWidth]: `${navigationWidth}px`,\n          }\n        }\n      >\n        <AppLayoutBeforeMainSlot {...mergedProps} />\n        <main {...mainElAttributes} className={mainElAttributes?.className ?? styles['main-landmark']}>\n          <AppLayoutTopContentSlot {...mergedProps} />\n          <div\n            {...contentWrapperElAttributes}\n            className={\n              contentWrapperElAttributes?.className ??\n              clsx(styles.main, { [styles['main-disable-paddings']]: appLayoutProps.disableContentPaddings })\n            }\n          >\n            {contentHeader && <div {...contentHeaderElAttributes}>{contentHeader}</div>}\n            {/*delay rendering the content until registration of this instance is complete*/}\n            <div {...contentElAttributes} className={contentElAttributes?.className ?? testutilStyles.content}>\n              {registered ? content : null}\n            </div>\n          </div>\n          <AppLayoutBottomContentSlot {...mergedProps} />\n        </main>\n        <AppLayoutAfterMainSlot {...mergedProps} />\n      </div>\n    </VisualContext>\n  );\n};\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-parts.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yCAAyC,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,mCAAmC,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAKjD;;GAEG;AAEH,eAAO,MAAM,sBAAsB,uFAalC,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,eAAe,yGAS3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,+GAEjC,CAAC"}
+{"version":3,"file":"skeleton-parts.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yCAAyC,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,mCAAmC,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMjD;;GAEG;AAEH,eAAO,MAAM,sBAAsB,uFASlC,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,eAAe,yGAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,+GAEjC,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.js

@@ -1,21 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { BreadcrumbsSlot, NotificationsSlot, ToolbarSlot } from './slots';
+import { NotificationsSlot } from './slots';
+import { ToolbarSkeletonStructure } from './toolbar-container';
 import styles from './styles.css.js';
 /**
  * New widgetized parts
  */
 export const BeforeMainSlotSkeleton = React.forwardRef(({ toolbarProps, appLayoutProps }, ref) => {
     return (React.createElement(React.Fragment, null,
-        !!toolbarProps && (React.createElement(ToolbarSlot, { ref: ref },
-            React.createElement(BreadcrumbsSlot, { ownBreadcrumbs: appLayoutProps.breadcrumbs }))),
+        !!toolbarProps && React.createElement(ToolbarSkeletonStructure, { ref: ref, ownBreadcrumbs: appLayoutProps.breadcrumbs }),
         (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.navigationOpen) && React.createElement("div", { className: styles.navigation })));
 });
 /**
  * Legacy parts
  */
-export const ToolbarSkeleton = React.forwardRef(({ appLayoutInternals }, ref) => (React.createElement(ToolbarSlot, { ref: ref },
-    React.createElement(BreadcrumbsSlot, { ownBreadcrumbs: appLayoutInternals.breadcrumbs, discoveredBreadcrumbs: appLayoutInternals.discoveredBreadcrumbs }))));
+export const ToolbarSkeleton = React.forwardRef(({ appLayoutInternals }, ref) => (React.createElement(ToolbarSkeletonStructure, { ref: ref, ownBreadcrumbs: appLayoutInternals.breadcrumbs, discoveredBreadcrumbs: appLayoutInternals.discoveredBreadcrumbs })));
 export const NotificationsSkeleton = React.forwardRef((props, ref) => React.createElement(NotificationsSlot, { ref: ref }));
 //# sourceMappingURL=skeleton-parts.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-parts.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;GAEG;AAEH,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,UAAU,CACpD,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,EAAE;IACxC,OAAO,CACL;QACG,CAAC,CAAC,YAAY,IAAI,CACjB,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG;YACnB,oBAAC,eAAe,IAAC,cAAc,EAAE,cAAc,CAAC,WAAW,GAAI,CACnD,CACf;QACA,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,cAAc,KAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI,CACrE,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CAAC,EAAE,kBAAkB,EAAuC,EAAE,GAAG,EAAE,EAAE,CAAC,CACpE,oBAAC,WAAW,IAAC,GAAG,EAAE,GAAG;IACnB,oBAAC,eAAe,IACd,cAAc,EAAE,kBAAkB,CAAC,WAAW,EAC9C,qBAAqB,EAAE,kBAAkB,CAAC,qBAAqB,GAC/D,CACU,CACf,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CACnD,CAAC,KAAgD,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,GAAI,CAC3F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { AppLayoutNotificationsImplementationProps } from '../notifications';\nimport { AppLayoutToolbarImplementationProps } from '../toolbar';\nimport { SkeletonPartProps } from './interfaces';\nimport { BreadcrumbsSlot, NotificationsSlot, ToolbarSlot } from './slots';\n\nimport styles from './styles.css.js';\n\n/**\n * New widgetized parts\n */\n\nexport const BeforeMainSlotSkeleton = React.forwardRef<HTMLElement, SkeletonPartProps>(\n  ({ toolbarProps, appLayoutProps }, ref) => {\n    return (\n      <>\n        {!!toolbarProps && (\n          <ToolbarSlot ref={ref}>\n            <BreadcrumbsSlot ownBreadcrumbs={appLayoutProps.breadcrumbs} />\n          </ToolbarSlot>\n        )}\n        {toolbarProps?.navigationOpen && <div className={styles.navigation} />}\n      </>\n    );\n  }\n);\n\n/**\n * Legacy parts\n */\n\nexport const ToolbarSkeleton = React.forwardRef<HTMLElement, AppLayoutToolbarImplementationProps>(\n  ({ appLayoutInternals }: AppLayoutToolbarImplementationProps, ref) => (\n    <ToolbarSlot ref={ref}>\n      <BreadcrumbsSlot\n        ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n        discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n      />\n    </ToolbarSlot>\n  )\n);\n\nexport const NotificationsSkeleton = React.forwardRef<HTMLElement, AppLayoutNotificationsImplementationProps>(\n  (props: AppLayoutNotificationsImplementationProps, ref) => <NotificationsSlot ref={ref} />\n);\n"]}
+{"version":3,"file":"skeleton-parts.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;GAEG;AAEH,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,UAAU,CACpD,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,EAAE;IACxC,OAAO,CACL;QACG,CAAC,CAAC,YAAY,IAAI,oBAAC,wBAAwB,IAAC,GAAG,EAAE,GAAG,EAAE,cAAc,EAAE,cAAc,CAAC,WAAW,GAAI;QACpG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,cAAc,KAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI,CACrE,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CAAC,EAAE,kBAAkB,EAAuC,EAAE,GAAG,EAAE,EAAE,CAAC,CACpE,oBAAC,wBAAwB,IACvB,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,kBAAkB,CAAC,WAAW,EAC9C,qBAAqB,EAAE,kBAAkB,CAAC,qBAAqB,GAC/D,CACH,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CACnD,CAAC,KAAgD,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,GAAI,CAC3F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { AppLayoutNotificationsImplementationProps } from '../notifications';\nimport { AppLayoutToolbarImplementationProps } from '../toolbar';\nimport { SkeletonPartProps } from './interfaces';\nimport { NotificationsSlot } from './slots';\nimport { ToolbarSkeletonStructure } from './toolbar-container';\n\nimport styles from './styles.css.js';\n\n/**\n * New widgetized parts\n */\n\nexport const BeforeMainSlotSkeleton = React.forwardRef<HTMLElement, SkeletonPartProps>(\n  ({ toolbarProps, appLayoutProps }, ref) => {\n    return (\n      <>\n        {!!toolbarProps && <ToolbarSkeletonStructure ref={ref} ownBreadcrumbs={appLayoutProps.breadcrumbs} />}\n        {toolbarProps?.navigationOpen && <div className={styles.navigation} />}\n      </>\n    );\n  }\n);\n\n/**\n * Legacy parts\n */\n\nexport const ToolbarSkeleton = React.forwardRef<HTMLElement, AppLayoutToolbarImplementationProps>(\n  ({ appLayoutInternals }: AppLayoutToolbarImplementationProps, ref) => (\n    <ToolbarSkeletonStructure\n      ref={ref}\n      ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n      discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n    />\n  )\n);\n\nexport const NotificationsSkeleton = React.forwardRef<HTMLElement, AppLayoutNotificationsImplementationProps>(\n  (props: AppLayoutNotificationsImplementationProps, ref) => <NotificationsSlot ref={ref} />\n);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAK5E,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,sFAItB,CAAC;AAEH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,4FAM7B,CAAC;AAEF,UAAU,oBAAoB;IAC5B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,qBAAqB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACrD;AAED,wBAAgB,eAAe,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAE,EAAE,oBAAoB,eAe9F"}
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAK5E,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,sFAWtB,CAAC;AAEH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,4FAM7B,CAAC;AAEF,UAAU,oBAAoB;IAC5B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,qBAAqB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACrD;AAID,wBAAgB,eAAe,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAE,EAAE,oBAAoB,eAiB9F"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.js

@@ -5,12 +5,17 @@ import clsx from 'clsx';
 import { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';
 import { BreadcrumbsSlotContext } from '../contexts';
 import styles from './styles.css.js';
-export const ToolbarSlot = React.forwardRef(({ className, style, children }, ref) => (React.createElement("section", { ref: ref, className: clsx(styles['toolbar-container'], className), style: style }, children)));
+export const ToolbarSlot = React.forwardRef(({ className, style, children }, ref) => {
+    var _a;
+    return (React.createElement("section", { ref: ref, className: clsx(styles['toolbar-container'], className), style: Object.assign({ insetBlockStart: (_a = style === null || style === void 0 ? void 0 : style.insetBlockStart) !== null && _a !== void 0 ? _a : 0 }, style) }, children));
+});
 export const NotificationsSlot = React.forwardRef(({ className, style, children }, ref) => (React.createElement("div", { ref: ref, className: clsx(styles['notifications-container'], className), style: style }, children)));
+const breadcrumbsSlotContextValue = { isInToolbar: true };
 export function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }) {
-    return (React.createElement(BreadcrumbsSlotContext.Provider, { value: { isInToolbar: true } },
+    const isSSR = typeof window === 'undefined';
+    return (React.createElement(BreadcrumbsSlotContext.Provider, { value: breadcrumbsSlotContextValue },
         React.createElement("div", { className: styles['breadcrumbs-own'] }, ownBreadcrumbs),
-        discoveredBreadcrumbs && (React.createElement("div", { className: styles['breadcrumbs-discovered'] },
+        discoveredBreadcrumbs && !isSSR && (React.createElement("div", { className: styles['breadcrumbs-discovered'] },
             React.createElement(BreadcrumbGroupImplementation, Object.assign({}, discoveredBreadcrumbs, { "data-awsui-discovered-breadcrumbs": true, __injectAnalyticsComponentMetadata: true }))))));
 }
 //# sourceMappingURL=slots.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.js.map

@@ -1 +1 @@
-{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,0CAA0C,CAAC;AAEzF,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClH,iCAAS,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACvG,QAAQ,CACD,CACX,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvC,6BAAK,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACzG,QAAQ,CACL,CACP,CACF,CAAC;AAOF,MAAM,UAAU,eAAe,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAwB;IAC7F,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;QAC3D,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,cAAc,CAAO;QAChE,qBAAqB,IAAI,CACxB,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;YAC9C,oBAAC,6BAA6B,oBACxB,qBAAqB,yCACU,IAAI,EACvC,kCAAkC,EAAE,IAAI,IACxC,CACE,CACP,CAC+B,CACnC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';\nimport { BreadcrumbsSlotContext } from '../contexts';\n\nimport styles from './styles.css.js';\n\ninterface ToolbarSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const ToolbarSlot = React.forwardRef<HTMLElement, ToolbarSlotProps>(({ className, style, children }, ref) => (\n  <section ref={ref as React.Ref<any>} className={clsx(styles['toolbar-container'], className)} style={style}>\n    {children}\n  </section>\n));\n\ninterface NotificationsSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const NotificationsSlot = React.forwardRef<HTMLElement, NotificationsSlotProps>(\n  ({ className, style, children }, ref) => (\n    <div ref={ref as React.Ref<any>} className={clsx(styles['notifications-container'], className)} style={style}>\n      {children}\n    </div>\n  )\n);\n\ninterface BreadcrumbsSlotProps {\n  ownBreadcrumbs: React.ReactNode;\n  discoveredBreadcrumbs?: BreadcrumbGroupProps | null;\n}\n\nexport function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps) {\n  return (\n    <BreadcrumbsSlotContext.Provider value={{ isInToolbar: true }}>\n      <div className={styles['breadcrumbs-own']}>{ownBreadcrumbs}</div>\n      {discoveredBreadcrumbs && (\n        <div className={styles['breadcrumbs-discovered']}>\n          <BreadcrumbGroupImplementation\n            {...discoveredBreadcrumbs}\n            data-awsui-discovered-breadcrumbs={true}\n            __injectAnalyticsComponentMetadata={true}\n          />\n        </div>\n      )}\n    </BreadcrumbsSlotContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,0CAA0C,CAAC;AAEzF,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;;IAAC,OAAA,CAClH,iCACE,GAAG,EAAE,GAAqB,EAC1B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC,EACvD,KAAK,kBACH,eAAe,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,mCAAI,CAAC,IACzC,KAAK,KAGT,QAAQ,CACD,CACX,CAAA;CAAA,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvC,6BAAK,GAAG,EAAE,GAAqB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACzG,QAAQ,CACL,CACP,CACF,CAAC;AAOF,MAAM,2BAA2B,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AAE1D,MAAM,UAAU,eAAe,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAwB;IAC7F,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;IAE5C,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,2BAA2B;QACjE,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,cAAc,CAAO;QAChE,qBAAqB,IAAI,CAAC,KAAK,IAAI,CAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;YAC9C,oBAAC,6BAA6B,oBACxB,qBAAqB,yCACU,IAAI,EACvC,kCAAkC,EAAE,IAAI,IACxC,CACE,CACP,CAC+B,CACnC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';\nimport { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';\nimport { BreadcrumbsSlotContext } from '../contexts';\n\nimport styles from './styles.css.js';\n\ninterface ToolbarSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const ToolbarSlot = React.forwardRef<HTMLElement, ToolbarSlotProps>(({ className, style, children }, ref) => (\n  <section\n    ref={ref as React.Ref<any>}\n    className={clsx(styles['toolbar-container'], className)}\n    style={{\n      insetBlockStart: style?.insetBlockStart ?? 0,\n      ...style,\n    }}\n  >\n    {children}\n  </section>\n));\n\ninterface NotificationsSlotProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const NotificationsSlot = React.forwardRef<HTMLElement, NotificationsSlotProps>(\n  ({ className, style, children }, ref) => (\n    <div ref={ref as React.Ref<any>} className={clsx(styles['notifications-container'], className)} style={style}>\n      {children}\n    </div>\n  )\n);\n\ninterface BreadcrumbsSlotProps {\n  ownBreadcrumbs: React.ReactNode;\n  discoveredBreadcrumbs?: BreadcrumbGroupProps | null;\n}\n\nconst breadcrumbsSlotContextValue = { isInToolbar: true };\n\nexport function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps) {\n  const isSSR = typeof window === 'undefined';\n\n  return (\n    <BreadcrumbsSlotContext.Provider value={breadcrumbsSlotContextValue}>\n      <div className={styles['breadcrumbs-own']}>{ownBreadcrumbs}</div>\n      {discoveredBreadcrumbs && !isSSR && (\n        <div className={styles['breadcrumbs-discovered']}>\n          <BreadcrumbGroupImplementation\n            {...discoveredBreadcrumbs}\n            data-awsui-discovered-breadcrumbs={true}\n            __injectAnalyticsComponentMetadata={true}\n          />\n        </div>\n      )}\n    </BreadcrumbsSlotContext.Provider>\n  );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_rt0is_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_rt0is_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_rt0is_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_rt0is_217",
-  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_rt0is_220",
-  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_rt0is_223",
-  "ai-drawer": "awsui_ai-drawer_7nfqu_rt0is_220",
-  "navigation": "awsui_navigation_7nfqu_rt0is_230",
-  "tools": "awsui_tools_7nfqu_rt0is_231",
-  "global-tools": "awsui_global-tools_7nfqu_rt0is_232",
-  "bottom-tool": "awsui_bottom-tool_7nfqu_rt0is_233",
-  "tools-open": "awsui_tools-open_7nfqu_rt0is_290",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_rt0is_304",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_rt0is_311",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_rt0is_324",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_rt0is_334",
-  "notifications-container": "awsui_notifications-container_7nfqu_rt0is_341",
-  "notifications-background": "awsui_notifications-background_7nfqu_rt0is_345",
-  "main-landmark": "awsui_main-landmark_7nfqu_rt0is_356",
-  "main": "awsui_main_7nfqu_rt0is_356",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_rt0is_365",
-  "content-header": "awsui_content-header_7nfqu_rt0is_375",
-  "content": "awsui_content_7nfqu_rt0is_375",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_rt0is_385",
-  "hidden": "awsui_hidden_7nfqu_rt0is_390",
-  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_rt0is_394",
-  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_rt0is_394"
+  "root": "awsui_root_7nfqu_yk78c_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_yk78c_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_yk78c_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_yk78c_217",
+  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_yk78c_220",
+  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_yk78c_223",
+  "ai-drawer": "awsui_ai-drawer_7nfqu_yk78c_220",
+  "navigation": "awsui_navigation_7nfqu_yk78c_230",
+  "tools": "awsui_tools_7nfqu_yk78c_231",
+  "global-tools": "awsui_global-tools_7nfqu_yk78c_232",
+  "bottom-tool": "awsui_bottom-tool_7nfqu_yk78c_233",
+  "tools-open": "awsui_tools-open_7nfqu_yk78c_290",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_yk78c_304",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_yk78c_311",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_yk78c_324",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_yk78c_334",
+  "notifications-container": "awsui_notifications-container_7nfqu_yk78c_341",
+  "notifications-background": "awsui_notifications-background_7nfqu_yk78c_345",
+  "main-landmark": "awsui_main-landmark_7nfqu_yk78c_356",
+  "main": "awsui_main_7nfqu_yk78c_356",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_yk78c_365",
+  "content-header": "awsui_content-header_7nfqu_yk78c_375",
+  "content": "awsui_content_7nfqu_yk78c_375",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_yk78c_385",
+  "hidden": "awsui_hidden_7nfqu_yk78c_390",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_yk78c_394",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_yk78c_394"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css

@@ -150,7 +150,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_7nfqu_rt0is_153:not(#\9) {
+.awsui_root_7nfqu_yk78c_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -182,72 +182,72 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   color: var(--color-text-body-default-5qid0u, #16191f);
   background-color: var(--color-background-layout-main-05m5y6, #f2f3f3);
-  --awsui-max-content-width-lqnbqg: 100%;
+  --awsui-max-content-width-b75yp7: 100%;
   display: grid;
   grid-template-areas: "toolbar    toolbar     toolbar" ".       notifications  ." ".           main       .";
   grid-template-columns: var(--space-layout-content-horizontal-q3zhej, 40px) minmax(0, 1fr) var(--space-layout-content-horizontal-q3zhej, 40px);
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_rt0is_153:not(#\9) {
+  .awsui_root_7nfqu_yk78c_153:not(#\9) {
     grid-template-areas: "ai-drawer toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar" "ai-drawer navigation .         notifications    .         sideSplitPanel  tools    global-tools" "ai-drawer navigation .             main         .         sideSplitPanel  tools    global-tools" "ai-drawer bottom-tool bottom-tool bottom-tool  bottom-tool  bottom-tool bottom-tool global-tools";
-    grid-template-columns: min-content min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-lqnbqg)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
+    grid-template-columns: min-content min-content minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) minmax(0, var(--awsui-max-content-width-b75yp7)) minmax(var(--space-layout-content-horizontal-q3zhej, 40px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content min-content;
   }
-  .awsui_root_7nfqu_rt0is_153.awsui_has-adaptive-widths-default_7nfqu_rt0is_197:not(#\9) {
-    --awsui-max-content-width-lqnbqg: 1620px;
+  .awsui_root_7nfqu_yk78c_153.awsui_has-adaptive-widths-default_7nfqu_yk78c_197:not(#\9) {
+    --awsui-max-content-width-b75yp7: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_rt0is_153.awsui_has-adaptive-widths-dashboard_7nfqu_rt0is_202:not(#\9) {
-    --awsui-max-content-width-lqnbqg: 1280px;
+  .awsui_root_7nfqu_yk78c_153.awsui_has-adaptive-widths-dashboard_7nfqu_yk78c_202:not(#\9) {
+    --awsui-max-content-width-b75yp7: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_rt0is_153.awsui_has-adaptive-widths-dashboard_7nfqu_rt0is_202:not(#\9) {
-    --awsui-max-content-width-lqnbqg: 1620px;
+  .awsui_root_7nfqu_yk78c_153.awsui_has-adaptive-widths-dashboard_7nfqu_yk78c_202:not(#\9) {
+    --awsui-max-content-width-b75yp7: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_rt0is_153.awsui_has-adaptive-widths-dashboard_7nfqu_rt0is_202:not(#\9) {
-    --awsui-max-content-width-lqnbqg: 2160px;
+  .awsui_root_7nfqu_yk78c_153.awsui_has-adaptive-widths-dashboard_7nfqu_yk78c_202:not(#\9) {
+    --awsui-max-content-width-b75yp7: 2160px;
   }
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_rt0is_153.awsui_drawer-expanded-mode_7nfqu_rt0is_217:not(#\9) {
+  .awsui_root_7nfqu_yk78c_153.awsui_drawer-expanded-mode_7nfqu_yk78c_217:not(#\9) {
     grid-template-columns: 0 0 0 0 0 0 0 auto;
   }
-  .awsui_root_7nfqu_rt0is_153.awsui_drawer-expanded-mode_7nfqu_rt0is_217.awsui_ai-drawer-expanded-mode_7nfqu_rt0is_220:not(#\9) {
+  .awsui_root_7nfqu_yk78c_153.awsui_drawer-expanded-mode_7nfqu_yk78c_217.awsui_ai-drawer-expanded-mode_7nfqu_yk78c_220:not(#\9) {
     grid-template-columns: auto 0 0 0 0 0 0 0;
   }
-  .awsui_root_7nfqu_rt0is_153.awsui_drawer-expanded-mode_7nfqu_rt0is_217.awsui_bottom-drawer-expanded-mode_7nfqu_rt0is_223:not(#\9) {
+  .awsui_root_7nfqu_yk78c_153.awsui_drawer-expanded-mode_7nfqu_yk78c_217.awsui_bottom-drawer-expanded-mode_7nfqu_yk78c_223:not(#\9) {
     grid-template-rows: auto;
     grid-template-columns: 0 0 0 0 0 auto 0 0;
   }
 }
 
-.awsui_ai-drawer_7nfqu_rt0is_220:not(#\9),
-.awsui_navigation_7nfqu_rt0is_230:not(#\9),
-.awsui_tools_7nfqu_rt0is_231:not(#\9),
-.awsui_global-tools_7nfqu_rt0is_232:not(#\9),
-.awsui_bottom-tool_7nfqu_rt0is_233:not(#\9) {
+.awsui_ai-drawer_7nfqu_yk78c_220:not(#\9),
+.awsui_navigation_7nfqu_yk78c_230:not(#\9),
+.awsui_tools_7nfqu_yk78c_231:not(#\9),
+.awsui_global-tools_7nfqu_yk78c_232:not(#\9),
+.awsui_bottom-tool_7nfqu_yk78c_233:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-aemn43, #ffffff);
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_ai-drawer_7nfqu_rt0is_220:not(#\9),
-  .awsui_navigation_7nfqu_rt0is_230:not(#\9),
-  .awsui_tools_7nfqu_rt0is_231:not(#\9),
-  .awsui_global-tools_7nfqu_rt0is_232:not(#\9),
-  .awsui_bottom-tool_7nfqu_rt0is_233:not(#\9) {
+  .awsui_ai-drawer_7nfqu_yk78c_220:not(#\9),
+  .awsui_navigation_7nfqu_yk78c_230:not(#\9),
+  .awsui_tools_7nfqu_yk78c_231:not(#\9),
+  .awsui_global-tools_7nfqu_yk78c_232:not(#\9),
+  .awsui_bottom-tool_7nfqu_yk78c_233:not(#\9) {
     inline-size: 100%;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_bottom-tool_7nfqu_rt0is_233:not(#\9) {
+  .awsui_bottom-tool_7nfqu_yk78c_233:not(#\9) {
     grid-area: bottom-tool;
     position: sticky;
     inset-block-end: 0;
@@ -257,43 +257,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_ai-drawer_7nfqu_rt0is_220:not(#\9) {
+  .awsui_ai-drawer_7nfqu_yk78c_220:not(#\9) {
     grid-area: ai-drawer;
     position: sticky;
   }
 }
 
-.awsui_navigation_7nfqu_rt0is_230:not(#\9) {
+.awsui_navigation_7nfqu_yk78c_230:not(#\9) {
   z-index: 830;
 }
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_rt0is_230:not(#\9) {
+  .awsui_navigation_7nfqu_yk78c_230:not(#\9) {
     grid-area: navigation;
-    inline-size: var(--awsui-navigation-width-lqnbqg);
+    inline-size: var(--awsui-navigation-width-b75yp7);
     border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_rt0is_230:not(#\9) {
+  .awsui_navigation_7nfqu_yk78c_230:not(#\9) {
     z-index: 1001;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_rt0is_231:not(#\9) {
+  .awsui_tools_7nfqu_yk78c_231:not(#\9) {
     grid-area: tools;
     /* stylelint-disable plugin/no-unsupported-browser-features */
   }
-  .awsui_tools_7nfqu_rt0is_231:not(#\9):not(:has(> [data-testid])) {
-    inline-size: var(--awsui-tools-width-lqnbqg);
+  .awsui_tools_7nfqu_yk78c_231:not(#\9):not(:has(> [data-testid])) {
+    inline-size: var(--awsui-tools-width-b75yp7);
   }
-  .awsui_tools_7nfqu_rt0is_231:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_rt0is_290 {
+  .awsui_tools_7nfqu_yk78c_231:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_yk78c_290 {
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_global-tools_7nfqu_rt0is_232:not(#\9) {
+  .awsui_global-tools_7nfqu_yk78c_232:not(#\9) {
     display: flex;
     grid-area: global-tools;
     justify-content: flex-end;
@@ -301,14 +301,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_rt0is_304:not(#\9) {
+  .awsui_split-panel-side_7nfqu_yk78c_304:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
     opacity: 1;
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_rt0is_311:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_yk78c_311:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -316,81 +316,81 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-bottom_7nfqu_rt0is_311:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_yk78c_311:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_panel-hidden_7nfqu_rt0is_324:not(#\9) {
+.awsui_panel-hidden_7nfqu_yk78c_324:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_rt0is_324.awsui_navigation_7nfqu_rt0is_230:not(#\9), .awsui_panel-hidden_7nfqu_rt0is_324.awsui_tools_7nfqu_rt0is_231:not(#\9), .awsui_panel-hidden_7nfqu_rt0is_324.awsui_global-tools_7nfqu_rt0is_232:not(#\9) {
+.awsui_panel-hidden_7nfqu_yk78c_324.awsui_navigation_7nfqu_yk78c_230:not(#\9), .awsui_panel-hidden_7nfqu_yk78c_324.awsui_tools_7nfqu_yk78c_231:not(#\9), .awsui_panel-hidden_7nfqu_yk78c_324.awsui_global-tools_7nfqu_yk78c_232:not(#\9) {
   inline-size: 0px;
 }
 
-.awsui_toolbar-container_7nfqu_rt0is_334:not(#\9) {
+.awsui_toolbar-container_7nfqu_yk78c_334:not(#\9) {
   grid-area: toolbar;
   block-size: 42px;
   border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-layout-ovzonx, #d5dbdb);
   box-sizing: border-box;
 }
 
-.awsui_notifications-container_7nfqu_rt0is_341:not(#\9) {
+.awsui_notifications-container_7nfqu_yk78c_341:not(#\9) {
   grid-area: notifications;
 }
 
-.awsui_notifications-background_7nfqu_rt0is_345:not(#\9) {
+.awsui_notifications-background_7nfqu_yk78c_345:not(#\9) {
   background: var(--color-background-layout-main-05m5y6, #f2f3f3);
   grid-area: notifications;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_notifications-background_7nfqu_rt0is_345:not(#\9) {
+  .awsui_notifications-background_7nfqu_yk78c_345:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_main-landmark_7nfqu_rt0is_356:not(#\9) {
+.awsui_main-landmark_7nfqu_yk78c_356:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_rt0is_356:not(#\9) {
+.awsui_main_7nfqu_yk78c_356:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-gjhvjd, 12px);
   margin-block-end: var(--space-layout-content-bottom-iu1izz, 20px);
 }
-.awsui_main-disable-paddings_7nfqu_rt0is_365:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_yk78c_365:not(#\9) {
   margin-block: 0;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_rt0is_365:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_yk78c_365:not(#\9) {
     grid-column: 3/6;
   }
 }
 
-.awsui_content-header_7nfqu_rt0is_375:not(#\9) {
+.awsui_content-header_7nfqu_yk78c_375:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-hjkugf, 16px);
 }
 
-.awsui_content_7nfqu_rt0is_375:not(#\9) {
+.awsui_content_7nfqu_yk78c_375:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_rt0is_385 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_yk78c_385 *:not(#\9) {
     visibility: hidden;
   }
 }
 
-.awsui_hidden_7nfqu_rt0is_390:not(#\9) {
+.awsui_hidden_7nfqu_yk78c_390:not(#\9) {
   display: none;
 }
 
-.awsui_breadcrumbs-own_7nfqu_rt0is_394:not(#\9):not(:empty) + .awsui_breadcrumbs-discovered_7nfqu_rt0is_394 {
+.awsui_breadcrumbs-own_7nfqu_yk78c_394:not(#\9):not(:empty) + .awsui_breadcrumbs-discovered_7nfqu_yk78c_394 {
   display: none;
 }

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js

@@ -2,32 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_rt0is_153",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_rt0is_197",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_rt0is_202",
-  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_rt0is_217",
-  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_rt0is_220",
-  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_rt0is_223",
-  "ai-drawer": "awsui_ai-drawer_7nfqu_rt0is_220",
-  "navigation": "awsui_navigation_7nfqu_rt0is_230",
-  "tools": "awsui_tools_7nfqu_rt0is_231",
-  "global-tools": "awsui_global-tools_7nfqu_rt0is_232",
-  "bottom-tool": "awsui_bottom-tool_7nfqu_rt0is_233",
-  "tools-open": "awsui_tools-open_7nfqu_rt0is_290",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_rt0is_304",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_rt0is_311",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_rt0is_324",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_rt0is_334",
-  "notifications-container": "awsui_notifications-container_7nfqu_rt0is_341",
-  "notifications-background": "awsui_notifications-background_7nfqu_rt0is_345",
-  "main-landmark": "awsui_main-landmark_7nfqu_rt0is_356",
-  "main": "awsui_main_7nfqu_rt0is_356",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_rt0is_365",
-  "content-header": "awsui_content-header_7nfqu_rt0is_375",
-  "content": "awsui_content_7nfqu_rt0is_375",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_rt0is_385",
-  "hidden": "awsui_hidden_7nfqu_rt0is_390",
-  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_rt0is_394",
-  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_rt0is_394"
+  "root": "awsui_root_7nfqu_yk78c_153",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_yk78c_197",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_yk78c_202",
+  "drawer-expanded-mode": "awsui_drawer-expanded-mode_7nfqu_yk78c_217",
+  "ai-drawer-expanded-mode": "awsui_ai-drawer-expanded-mode_7nfqu_yk78c_220",
+  "bottom-drawer-expanded-mode": "awsui_bottom-drawer-expanded-mode_7nfqu_yk78c_223",
+  "ai-drawer": "awsui_ai-drawer_7nfqu_yk78c_220",
+  "navigation": "awsui_navigation_7nfqu_yk78c_230",
+  "tools": "awsui_tools_7nfqu_yk78c_231",
+  "global-tools": "awsui_global-tools_7nfqu_yk78c_232",
+  "bottom-tool": "awsui_bottom-tool_7nfqu_yk78c_233",
+  "tools-open": "awsui_tools-open_7nfqu_yk78c_290",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_yk78c_304",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_yk78c_311",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_yk78c_324",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_yk78c_334",
+  "notifications-container": "awsui_notifications-container_7nfqu_yk78c_341",
+  "notifications-background": "awsui_notifications-background_7nfqu_yk78c_345",
+  "main-landmark": "awsui_main-landmark_7nfqu_yk78c_356",
+  "main": "awsui_main_7nfqu_yk78c_356",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_yk78c_365",
+  "content-header": "awsui_content-header_7nfqu_yk78c_375",
+  "content": "awsui_content_7nfqu_yk78c_375",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_yk78c_385",
+  "hidden": "awsui_hidden_7nfqu_yk78c_390",
+  "breadcrumbs-own": "awsui_breadcrumbs-own_7nfqu_yk78c_394",
+  "breadcrumbs-discovered": "awsui_breadcrumbs-discovered_7nfqu_yk78c_394"
 };