@cloudscape-design/components-themeable 3.0.744 → 3.0.746

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n  ariaLabels?: AppLayoutProps.Labels;\n  // navigation\n  hasNavigation?: boolean;\n  navigationOpen?: boolean;\n  onNavigationToggle?: (open: boolean) => void;\n  navigationFocusRef?: React.Ref<Focusable>;\n\n  // breadcrumbs\n  hasBreadcrumbsPortal?: boolean;\n\n  // split panel\n  hasSplitPanel?: boolean;\n  splitPanelToggleProps?: SplitPanelToggleProps;\n  splitPanelFocusRef?: React.Ref<Focusable>;\n  onSplitPanelToggle?: () => void;\n\n  // drawers\n  activeDrawerId?: string | null;\n  drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusRef?: React.Ref<Focusable>;\n  onActiveDrawerChange?: (drawerId: string | null) => void;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n  return {\n    ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n    activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n    drawers: toolbarProps.drawers ?? legacyProps.drawers,\n    drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n    onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n    hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n    navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n    navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n    onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n    hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n    splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n    splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n      ...legacyProps.splitPanelToggleConfig,\n      active: legacyProps.splitPanelOpen,\n      controlId: legacyProps.splitPanelControlId,\n      position: legacyProps.splitPanelPosition,\n    },\n    onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n  };\n}\n\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\n  // the value could be undefined if this component is loaded as a widget by a different app layout version\n  // not testable in a single-version setup\n  toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n  const {\n    breadcrumbs,\n    discoveredBreadcrumbs,\n    verticalOffsets,\n    isMobile,\n    toolbarState,\n    setToolbarState,\n    setToolbarHeight,\n  } = appLayoutInternals;\n  const {\n    ariaLabels,\n    activeDrawerId,\n    drawers,\n    drawersFocusRef,\n    onActiveDrawerChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n  } = convertLegacyProps(toolbarProps, appLayoutInternals);\n  // TODO: expose configuration property\n  const pinnedToolbar = true;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setToolbarHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    let lastScrollY = window.scrollY;\n\n    /* istanbul ignore next not testable in JSDOM */\n    const updateScrollDirection = () => {\n      if (pinnedToolbar) {\n        setToolbarState('show');\n        return;\n      }\n      const scrollY = window.scrollY;\n      // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n      const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n      // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n      if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n        setToolbarState(direction);\n      }\n      lastScrollY = scrollY > 0 ? scrollY : 0;\n    };\n\n    window.addEventListener('scroll', updateScrollDirection);\n    return () => {\n      window.removeEventListener('scroll', updateScrollDirection);\n    };\n  }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n        [testutilStyles['mobile-bar']]: isMobile,\n        [styles['toolbar-hidden']]: toolbarHidden,\n      })}\n      style={{\n        insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {hasNavigation && !navigationOpen && (\n          <nav className={clsx(styles['universal-toolbar-nav'], testutilStyles['drawer-closed'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => onNavigationToggle?.(true)}\n              ref={navigationFocusRef}\n              selected={navigationOpen}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            {breadcrumbs}\n            {discoveredBreadcrumbs && (\n              <InternalBreadcrumbGroup {...discoveredBreadcrumbs} __injectAnalyticsComponentMetadata={true} />\n            )}\n          </div>\n        )}\n        {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <span className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n            />\n          </span>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { Focusable } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n  ariaLabels?: AppLayoutProps.Labels;\n  // navigation\n  hasNavigation?: boolean;\n  navigationOpen?: boolean;\n  onNavigationToggle?: (open: boolean) => void;\n  navigationFocusRef?: React.Ref<Focusable>;\n\n  // breadcrumbs\n  hasBreadcrumbsPortal?: boolean;\n\n  // split panel\n  hasSplitPanel?: boolean;\n  splitPanelToggleProps?: SplitPanelToggleProps;\n  splitPanelFocusRef?: React.Ref<Focusable>;\n  onSplitPanelToggle?: () => void;\n\n  // drawers\n  activeDrawerId?: string | null;\n  drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusRef?: React.Ref<Focusable>;\n  onActiveDrawerChange?: (drawerId: string | null) => void;\n}\n\ninterface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n  return {\n    ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n    activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n    drawers: toolbarProps.drawers ?? legacyProps.drawers,\n    drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n    onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n    hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n    navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n    navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n    onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n    hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n    splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n    splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n      ...legacyProps.splitPanelToggleConfig,\n      active: legacyProps.splitPanelOpen,\n      controlId: legacyProps.splitPanelControlId,\n      position: legacyProps.splitPanelPosition,\n    },\n    onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n  };\n}\n\nexport function AppLayoutToolbarImplementation({\n  appLayoutInternals,\n  // the value could be undefined if this component is loaded as a widget by a different app layout version\n  // not testable in a single-version setup\n  toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n  const {\n    breadcrumbs,\n    discoveredBreadcrumbs,\n    verticalOffsets,\n    isMobile,\n    toolbarState,\n    setToolbarState,\n    setToolbarHeight,\n  } = appLayoutInternals;\n  const {\n    ariaLabels,\n    activeDrawerId,\n    drawers,\n    drawersFocusRef,\n    onActiveDrawerChange,\n    hasNavigation,\n    navigationOpen,\n    navigationFocusRef,\n    onNavigationToggle,\n    hasSplitPanel,\n    splitPanelFocusRef,\n    splitPanelToggleProps,\n    onSplitPanelToggle,\n  } = convertLegacyProps(toolbarProps, appLayoutInternals);\n  // TODO: expose configuration property\n  const pinnedToolbar = true;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setToolbarHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    let lastScrollY = window.scrollY;\n\n    /* istanbul ignore next not testable in JSDOM */\n    const updateScrollDirection = () => {\n      if (pinnedToolbar) {\n        setToolbarState('show');\n        return;\n      }\n      const scrollY = window.scrollY;\n      // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n      const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n      // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n      if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n        setToolbarState(direction);\n      }\n      lastScrollY = scrollY > 0 ? scrollY : 0;\n    };\n\n    window.addEventListener('scroll', updateScrollDirection);\n    return () => {\n      window.removeEventListener('scroll', updateScrollDirection);\n    };\n  }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n  return (\n    <ToolbarSlot\n      ref={ref}\n      className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {\n        [testutilStyles['mobile-bar']]: isMobile,\n        [styles['toolbar-hidden']]: toolbarHidden,\n      })}\n      style={{\n        insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {hasNavigation && (\n          <nav className={clsx(styles['universal-toolbar-nav'], testutilStyles['drawer-closed'])}>\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => onNavigationToggle?.(!navigationOpen)}\n              ref={navigationFocusRef}\n              selected={navigationOpen}\n            />\n          </nav>\n        )}\n        {(breadcrumbs || discoveredBreadcrumbs) && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n            {breadcrumbs}\n            {discoveredBreadcrumbs && (\n              <InternalBreadcrumbGroup {...discoveredBreadcrumbs} __injectAnalyticsComponentMetadata={true} />\n            )}\n          </div>\n        )}\n        {((drawers && drawers.length > 0) || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n          <span className={clsx(styles['universal-toolbar-drawers'])}>\n            <DrawerTriggers\n              ariaLabels={ariaLabels}\n              activeDrawerId={activeDrawerId ?? null}\n              drawers={drawers ?? []}\n              drawersFocusRef={drawersFocusRef}\n              onActiveDrawerChange={onActiveDrawerChange}\n              splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n              splitPanelFocusRef={splitPanelFocusRef}\n              onSplitPanelToggle={onSplitPanelToggle}\n            />\n          </span>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}

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

@@ -1,18 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_ahjq7_141",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_ahjq7_163",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_ahjq7_166",
-  "toolbar-container": "awsui_toolbar-container_1kzri_ahjq7_169",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_ahjq7_178",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_ahjq7_182",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_ahjq7_187",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_ahjq7_195",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_ahjq7_196",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_ahjq7_242",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_1kzri_ahjq7_250",
-  "has-open-drawer": "awsui_has-open-drawer_1kzri_ahjq7_250",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_ahjq7_242"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_15dk3_141",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_15dk3_162",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_15dk3_165",
+  "toolbar-container": "awsui_toolbar-container_1kzri_15dk3_168",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_15dk3_177",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_15dk3_181",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_15dk3_186",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_15dk3_194",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_15dk3_195",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_15dk3_241",
+  "group-divider": "awsui_group-divider_1kzri_15dk3_250",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_15dk3_241"
 };
   

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

@@ -138,35 +138,34 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among 
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_universal-toolbar_1kzri_ahjq7_141:not(#\9) {
+.awsui_universal-toolbar_1kzri_15dk3_141:not(#\9) {
   background-color: var(--color-background-layout-panel-content-ml98gw, #ffffff);
-  border-block-end: 1px solid var(--color-border-divider-panel-bottom-sc2k0v, rgba(0, 28, 36, 0.15));
   box-sizing: border-box;
   padding-block: 0;
   padding-inline: var(--space-m-kpg8id, 16px);
   padding-inline-end: 0;
   position: sticky;
   z-index: 840;
-  transition: ease var(--motion-duration-refresh-only-slow-zaoigb, 250ms);
+  transition: ease var(--motion-duration-refresh-only-slow-u2wsjk, 0ms);
   transition-property: inset-block-start, opacity;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_universal-toolbar_1kzri_ahjq7_141:not(#\9) {
+  .awsui_universal-toolbar_1kzri_15dk3_141:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_universal-toolbar_1kzri_ahjq7_141:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_ahjq7_141:not(#\9) {
+.awsui-motion-disabled .awsui_universal-toolbar_1kzri_15dk3_141:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_15dk3_141:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_universal-toolbar_1kzri_ahjq7_141.awsui_disable-body-scroll_1kzri_ahjq7_163:not(#\9) {
+.awsui_universal-toolbar_1kzri_15dk3_141.awsui_disable-body-scroll_1kzri_15dk3_162:not(#\9) {
   inset-block-start: 0px;
 }
-.awsui_universal-toolbar_1kzri_ahjq7_141.awsui_toolbar-hidden_1kzri_ahjq7_166:not(#\9) {
+.awsui_universal-toolbar_1kzri_15dk3_141.awsui_toolbar-hidden_1kzri_15dk3_165:not(#\9) {
   opacity: 0;
 }
-.awsui_universal-toolbar_1kzri_ahjq7_141 > .awsui_toolbar-container_1kzri_ahjq7_169:not(#\9) {
+.awsui_universal-toolbar_1kzri_15dk3_141 > .awsui_toolbar-container_1kzri_15dk3_168:not(#\9) {
   block-size: 48px;
   align-items: center;
   display: grid;
@@ -175,16 +174,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-columns: min-content auto minmax(140px, 1fr);
   grid-template-rows: 1fr;
 }
-.awsui_universal-toolbar_1kzri_ahjq7_141 > .awsui_toolbar-container_1kzri_ahjq7_169 > .awsui_universal-toolbar-nav_1kzri_ahjq7_178:not(#\9) {
+.awsui_universal-toolbar_1kzri_15dk3_141 > .awsui_toolbar-container_1kzri_15dk3_168 > .awsui_universal-toolbar-nav_1kzri_15dk3_177:not(#\9) {
   grid-column: 1;
   padding-inline-end: var(--space-static-xxs-z6w5bq, 4px);
 }
-.awsui_universal-toolbar_1kzri_ahjq7_141 > .awsui_toolbar-container_1kzri_ahjq7_169 > .awsui_universal-toolbar-breadcrumbs_1kzri_ahjq7_182:not(#\9) {
+.awsui_universal-toolbar_1kzri_15dk3_141 > .awsui_toolbar-container_1kzri_15dk3_168 > .awsui_universal-toolbar-breadcrumbs_1kzri_15dk3_181:not(#\9) {
   grid-column: 2;
   background-color: transparent;
   flex: 1 0;
 }
-.awsui_universal-toolbar_1kzri_ahjq7_141 > .awsui_toolbar-container_1kzri_ahjq7_169 > .awsui_universal-toolbar-drawers_1kzri_ahjq7_187:not(#\9) {
+.awsui_universal-toolbar_1kzri_15dk3_141 > .awsui_toolbar-container_1kzri_15dk3_168 > .awsui_universal-toolbar-drawers_1kzri_15dk3_186:not(#\9) {
   grid-column: 3;
   column-gap: var(--space-static-xs-fdj8ix, 8px);
   display: flex;
@@ -192,8 +191,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
 }
 
-.awsui_drawers-desktop-triggers-container_1kzri_ahjq7_195:not(#\9),
-.awsui_drawers-mobile-triggers-container_1kzri_ahjq7_196:not(#\9) {
+.awsui_drawers-desktop-triggers-container_1kzri_15dk3_194:not(#\9),
+.awsui_drawers-mobile-triggers-container_1kzri_15dk3_195:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -240,7 +239,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: 100%;
 }
 
-.awsui_drawers-trigger-content_1kzri_ahjq7_242:not(#\9) {
+.awsui_drawers-trigger-content_1kzri_15dk3_241:not(#\9) {
   block-size: 100%;
   align-items: center;
   display: flex;
@@ -248,15 +247,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   gap: var(--space-xs-xf5ch3, 8px);
   justify-content: flex-end;
 }
-.awsui_drawers-trigger-content_1kzri_ahjq7_242:not(#\9):not(.awsui_has-multiple-triggers_1kzri_ahjq7_250).awsui_has-open-drawer_1kzri_ahjq7_250 {
-  opacity: 0;
-}
-.awsui_drawers-trigger-content_1kzri_ahjq7_242:not(#\9):not(.awsui_has-multiple-triggers_1kzri_ahjq7_250):not(.awsui_has-open-drawer_1kzri_ahjq7_250) {
-  opacity: 1;
+
+.awsui_group-divider_1kzri_15dk3_250:not(#\9) {
+  border-inline-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-layout-hnd6e7, #d5dbdb);
+  block-size: 60%;
 }
 
 @media (max-width: 688px) {
-  .awsui_drawers-trigger_1kzri_ahjq7_242:not(#\9) {
+  .awsui_drawers-trigger_1kzri_15dk3_241:not(#\9) {
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -2,18 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "universal-toolbar": "awsui_universal-toolbar_1kzri_ahjq7_141",
-  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_ahjq7_163",
-  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_ahjq7_166",
-  "toolbar-container": "awsui_toolbar-container_1kzri_ahjq7_169",
-  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_ahjq7_178",
-  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_ahjq7_182",
-  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_ahjq7_187",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_ahjq7_195",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_ahjq7_196",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_ahjq7_242",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_1kzri_ahjq7_250",
-  "has-open-drawer": "awsui_has-open-drawer_1kzri_ahjq7_250",
-  "drawers-trigger": "awsui_drawers-trigger_1kzri_ahjq7_242"
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_15dk3_141",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_15dk3_162",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_15dk3_165",
+  "toolbar-container": "awsui_toolbar-container_1kzri_15dk3_168",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_15dk3_177",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_15dk3_181",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_15dk3_186",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_15dk3_194",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1kzri_15dk3_195",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_15dk3_241",
+  "group-divider": "awsui_group-divider_1kzri_15dk3_250",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_15dk3_241"
 };
   

package/lib/internal/template/attribute-editor/styles.css.js

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "empty-appear": "awsui_empty-appear_n4qlp_c4v60_149",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_c4v60_1",
-  "root": "awsui_root_n4qlp_c4v60_171",
-  "empty": "awsui_empty_n4qlp_c4v60_149",
-  "row": "awsui_row_n4qlp_c4v60_213",
-  "row-control": "awsui_row-control_n4qlp_c4v60_217",
-  "field": "awsui_field_n4qlp_c4v60_221",
-  "add-button": "awsui_add-button_n4qlp_c4v60_225",
-  "remove-button": "awsui_remove-button_n4qlp_c4v60_229",
-  "button-container-haslabel": "awsui_button-container-haslabel_n4qlp_c4v60_233",
-  "button-container-nolabel": "awsui_button-container-nolabel_n4qlp_c4v60_237",
-  "divider": "awsui_divider_n4qlp_c4v60_241",
-  "additional-info": "awsui_additional-info_n4qlp_c4v60_245",
-  "right-align": "awsui_right-align_n4qlp_c4v60_291"
+  "empty-appear": "awsui_empty-appear_n4qlp_ndady_149",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_ndady_1",
+  "root": "awsui_root_n4qlp_ndady_171",
+  "empty": "awsui_empty_n4qlp_ndady_149",
+  "row": "awsui_row_n4qlp_ndady_213",
+  "row-control": "awsui_row-control_n4qlp_ndady_217",
+  "field": "awsui_field_n4qlp_ndady_221",
+  "add-button": "awsui_add-button_n4qlp_ndady_225",
+  "remove-button": "awsui_remove-button_n4qlp_ndady_229",
+  "button-container-haslabel": "awsui_button-container-haslabel_n4qlp_ndady_233",
+  "button-container-nolabel": "awsui_button-container-nolabel_n4qlp_ndady_237",
+  "divider": "awsui_divider_n4qlp_ndady_241",
+  "additional-info": "awsui_additional-info_n4qlp_ndady_245",
+  "right-align": "awsui_right-align_n4qlp_ndady_291"
 };
   

package/lib/internal/template/attribute-editor/styles.scoped.css

@@ -146,10 +146,10 @@ 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_empty-appear_n4qlp_c4v60_149:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_n4qlp_c4v60_1 var(--motion-duration-transition-show-paced-wrsk0l, 180ms) var(--motion-easing-transition-show-paced-o52el4, ease-out);
+.awsui_empty-appear_n4qlp_ndady_149:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_n4qlp_ndady_1 var(--motion-duration-transition-show-paced-wrsk0l, 180ms) var(--motion-easing-transition-show-paced-o52el4, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_n4qlp_c4v60_1 {
+@keyframes awsui_awsui-motion-fade-in_n4qlp_ndady_1 {
   from {
     opacity: 0.2;
   }
@@ -158,17 +158,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_empty-appear_n4qlp_c4v60_149:not(#\9) {
+  .awsui_empty-appear_n4qlp_ndady_149:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_empty-appear_n4qlp_c4v60_149:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_c4v60_149:not(#\9) {
+.awsui-motion-disabled .awsui_empty-appear_n4qlp_ndady_149:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_ndady_149:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_n4qlp_c4v60_171:not(#\9) {
+.awsui_root_n4qlp_ndady_171:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -205,45 +205,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_empty_n4qlp_c4v60_149:not(#\9) {
+.awsui_empty_n4qlp_ndady_149:not(#\9) {
   font-size: var(--font-size-body-m-pa3mqb, 14px);
   line-height: var(--line-height-body-m-2zx78l, 22px);
   color: var(--color-text-empty-jskpnv, #687078);
 }
 
-.awsui_row_n4qlp_c4v60_213:not(#\9) {
+.awsui_row_n4qlp_ndady_213:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_row-control_n4qlp_c4v60_217:not(#\9) {
+.awsui_row-control_n4qlp_ndady_217:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_field_n4qlp_c4v60_221:not(#\9) {
+.awsui_field_n4qlp_ndady_221:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_add-button_n4qlp_c4v60_225:not(#\9) {
+.awsui_add-button_n4qlp_ndady_225:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_remove-button_n4qlp_c4v60_229:not(#\9) {
+.awsui_remove-button_n4qlp_ndady_229:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_button-container-haslabel_n4qlp_c4v60_233:not(#\9) {
+.awsui_button-container-haslabel_n4qlp_ndady_233:not(#\9) {
   padding-block-start: calc(var(--space-xxs-9rrxti, 4px) + var(--line-height-body-m-2zx78l, 22px));
 }
 
-.awsui_button-container-nolabel_n4qlp_c4v60_237:not(#\9) {
+.awsui_button-container-nolabel_n4qlp_ndady_237:not(#\9) {
   padding-block-start: var(--space-xxs-9rrxti, 4px);
 }
 
-.awsui_divider_n4qlp_c4v60_241:not(#\9) {
+.awsui_divider_n4qlp_ndady_241:not(#\9) {
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
 
-.awsui_additional-info_n4qlp_c4v60_245:not(#\9) {
+.awsui_additional-info_n4qlp_ndady_245:not(#\9) {
   color: var(--color-text-form-secondary-rh78tu, #687078);
   font-size: var(--font-size-body-s-533prh, 12px);
   line-height: var(--line-height-body-s-n0pazd, 16px);
@@ -253,7 +253,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-xxs-9rrxti, 4px);
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9) {
+.awsui_additional-info_n4qlp_ndady_245 > a:not(#\9) {
   color: var(--color-text-link-default-hop3gv, #0073bb);
   font-weight: inherit;
   letter-spacing: normal;
@@ -262,36 +262,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-property: color, -webkit-text-decoration;
   transition-property: color, text-decoration;
   transition-property: color, text-decoration, -webkit-text-decoration;
-  transition-duration: var(--motion-duration-refresh-only-medium-0rwzu1, 165ms);
+  transition-duration: var(--motion-duration-refresh-only-medium-i6gkfs, 0ms);
   text-underline-offset: 0.3em;
   text-decoration-thickness: 1px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9) {
+  .awsui_additional-info_n4qlp_ndady_245 > a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9) {
+.awsui-motion-disabled .awsui_additional-info_n4qlp_ndady_245 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_ndady_245 > a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9):hover {
+.awsui_additional-info_n4qlp_ndady_245 > a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9):focus {
+.awsui_additional-info_n4qlp_ndady_245 > a:not(#\9):focus {
   outline: none;
 }
-.awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9):active {
+.awsui_additional-info_n4qlp_ndady_245 > a:not(#\9):active {
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9):active, .awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9):focus, .awsui_additional-info_n4qlp_c4v60_245 > a:not(#\9):hover {
+.awsui_additional-info_n4qlp_ndady_245 > a:not(#\9):active, .awsui_additional-info_n4qlp_ndady_245 > a:not(#\9):focus, .awsui_additional-info_n4qlp_ndady_245 > a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
 
-.awsui_right-align_n4qlp_c4v60_291:not(#\9) {
+.awsui_right-align_n4qlp_ndady_291:not(#\9) {
   display: flex;
   justify-content: flex-end;
 }

package/lib/internal/template/attribute-editor/styles.selectors.js

@@ -2,19 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "empty-appear": "awsui_empty-appear_n4qlp_c4v60_149",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_c4v60_1",
-  "root": "awsui_root_n4qlp_c4v60_171",
-  "empty": "awsui_empty_n4qlp_c4v60_149",
-  "row": "awsui_row_n4qlp_c4v60_213",
-  "row-control": "awsui_row-control_n4qlp_c4v60_217",
-  "field": "awsui_field_n4qlp_c4v60_221",
-  "add-button": "awsui_add-button_n4qlp_c4v60_225",
-  "remove-button": "awsui_remove-button_n4qlp_c4v60_229",
-  "button-container-haslabel": "awsui_button-container-haslabel_n4qlp_c4v60_233",
-  "button-container-nolabel": "awsui_button-container-nolabel_n4qlp_c4v60_237",
-  "divider": "awsui_divider_n4qlp_c4v60_241",
-  "additional-info": "awsui_additional-info_n4qlp_c4v60_245",
-  "right-align": "awsui_right-align_n4qlp_c4v60_291"
+  "empty-appear": "awsui_empty-appear_n4qlp_ndady_149",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_ndady_1",
+  "root": "awsui_root_n4qlp_ndady_171",
+  "empty": "awsui_empty_n4qlp_ndady_149",
+  "row": "awsui_row_n4qlp_ndady_213",
+  "row-control": "awsui_row-control_n4qlp_ndady_217",
+  "field": "awsui_field_n4qlp_ndady_221",
+  "add-button": "awsui_add-button_n4qlp_ndady_225",
+  "remove-button": "awsui_remove-button_n4qlp_ndady_229",
+  "button-container-haslabel": "awsui_button-container-haslabel_n4qlp_ndady_233",
+  "button-container-nolabel": "awsui_button-container-nolabel_n4qlp_ndady_237",
+  "divider": "awsui_divider_n4qlp_ndady_241",
+  "additional-info": "awsui_additional-info_n4qlp_ndady_245",
+  "right-align": "awsui_right-align_n4qlp_ndady_291"
 };
   

package/lib/internal/template/breadcrumb-group/item/styles.css.js

@@ -1,14 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "link": "awsui_link_1kosq_1w8a2_141",
-  "breadcrumb": "awsui_breadcrumb_1kosq_1w8a2_145",
-  "icon": "awsui_icon_1kosq_1w8a2_148",
-  "anchor": "awsui_anchor_1kosq_1w8a2_153",
-  "last": "awsui_last_1kosq_1w8a2_199",
-  "compressed": "awsui_compressed_1kosq_1w8a2_209",
-  "text": "awsui_text_1kosq_1w8a2_213",
-  "virtual-item": "awsui_virtual-item_1kosq_1w8a2_220",
-  "text-hidden": "awsui_text-hidden_1kosq_1w8a2_227"
+  "link": "awsui_link_1kosq_3tu5n_141",
+  "breadcrumb": "awsui_breadcrumb_1kosq_3tu5n_145",
+  "icon": "awsui_icon_1kosq_3tu5n_148",
+  "anchor": "awsui_anchor_1kosq_3tu5n_153",
+  "last": "awsui_last_1kosq_3tu5n_199",
+  "compressed": "awsui_compressed_1kosq_3tu5n_209",
+  "text": "awsui_text_1kosq_3tu5n_213",
+  "virtual-item": "awsui_virtual-item_1kosq_3tu5n_220",
+  "text-hidden": "awsui_text-hidden_1kosq_3tu5n_227"
 };
   

package/lib/internal/template/breadcrumb-group/item/styles.scoped.css

@@ -138,19 +138,19 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among 
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_link_1kosq_1w8a2_141:not(#\9):after {
+.awsui_link_1kosq_3tu5n_141:not(#\9):after {
   display: none;
 }
 
-.awsui_breadcrumb_1kosq_1w8a2_145:not(#\9) {
+.awsui_breadcrumb_1kosq_3tu5n_145:not(#\9) {
   display: flex;
 }
-.awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_icon_1kosq_1w8a2_148:not(#\9) {
+.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_icon_1kosq_3tu5n_148:not(#\9) {
   margin-block: 0;
   margin-inline: var(--space-xs-xf5ch3, 8px);
   color: var(--color-text-breadcrumb-icon-egad48, #687078);
 }
-.awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9) {
+.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9) {
   color: var(--color-text-link-default-hop3gv, #0073bb);
   font-weight: inherit;
   letter-spacing: normal;
@@ -159,35 +159,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-property: color, -webkit-text-decoration;
   transition-property: color, text-decoration;
   transition-property: color, text-decoration, -webkit-text-decoration;
-  transition-duration: var(--motion-duration-refresh-only-medium-0rwzu1, 165ms);
+  transition-duration: var(--motion-duration-refresh-only-medium-i6gkfs, 0ms);
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9) {
+  .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9) {
+.awsui-motion-disabled .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9):hover {
+.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9):focus {
+.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):focus {
   outline: none;
 }
-.awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9):active {
+.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):active {
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9):active, .awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9):focus, .awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9):hover {
+.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):active, .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):focus, .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_anchor_1kosq_1w8a2_153:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-gygm43, 5px auto Highlight);
   outline-offset: 2px;
@@ -198,34 +198,34 @@ body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_1w8a2_145 > .awsui_a
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-efbp5h, 0px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_breadcrumb_1kosq_1w8a2_145.awsui_last_1kosq_1w8a2_199 > .awsui_icon_1kosq_1w8a2_148:not(#\9) {
+.awsui_breadcrumb_1kosq_3tu5n_145.awsui_last_1kosq_3tu5n_199 > .awsui_icon_1kosq_3tu5n_148:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb_1kosq_1w8a2_145.awsui_last_1kosq_1w8a2_199 > .awsui_anchor_1kosq_1w8a2_153:not(#\9) {
+.awsui_breadcrumb_1kosq_3tu5n_145.awsui_last_1kosq_3tu5n_199 > .awsui_anchor_1kosq_3tu5n_153:not(#\9) {
   color: var(--color-text-breadcrumb-current-pm5uhh, #687078);
   font-weight: 700;
   text-decoration: none;
   cursor: default;
 }
 
-.awsui_compressed_1kosq_1w8a2_209:not(#\9) {
+.awsui_compressed_1kosq_3tu5n_209:not(#\9) {
   min-inline-size: 0;
   overflow: hidden;
 }
-.awsui_compressed_1kosq_1w8a2_209 > .awsui_text_1kosq_1w8a2_213:not(#\9) {
+.awsui_compressed_1kosq_3tu5n_209 > .awsui_text_1kosq_3tu5n_213:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
 }
 
-.awsui_virtual-item_1kosq_1w8a2_220:not(#\9) {
+.awsui_virtual-item_1kosq_3tu5n_220:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;
   visibility: hidden;
 }
 
-.awsui_text-hidden_1kosq_1w8a2_227:not(#\9) {
+.awsui_text-hidden_1kosq_3tu5n_227:not(#\9) {
   display: none;
 }

package/lib/internal/template/breadcrumb-group/item/styles.selectors.js

@@ -2,14 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "link": "awsui_link_1kosq_1w8a2_141",
-  "breadcrumb": "awsui_breadcrumb_1kosq_1w8a2_145",
-  "icon": "awsui_icon_1kosq_1w8a2_148",
-  "anchor": "awsui_anchor_1kosq_1w8a2_153",
-  "last": "awsui_last_1kosq_1w8a2_199",
-  "compressed": "awsui_compressed_1kosq_1w8a2_209",
-  "text": "awsui_text_1kosq_1w8a2_213",
-  "virtual-item": "awsui_virtual-item_1kosq_1w8a2_220",
-  "text-hidden": "awsui_text-hidden_1kosq_1w8a2_227"
+  "link": "awsui_link_1kosq_3tu5n_141",
+  "breadcrumb": "awsui_breadcrumb_1kosq_3tu5n_145",
+  "icon": "awsui_icon_1kosq_3tu5n_148",
+  "anchor": "awsui_anchor_1kosq_3tu5n_153",
+  "last": "awsui_last_1kosq_3tu5n_199",
+  "compressed": "awsui_compressed_1kosq_3tu5n_209",
+  "text": "awsui_text_1kosq_3tu5n_213",
+  "virtual-item": "awsui_virtual-item_1kosq_3tu5n_220",
+  "text-hidden": "awsui_text-hidden_1kosq_3tu5n_227"
 };