@cloudscape-design/components-themeable 3.0.853 → 3.0.855

package/lib/internal/template/top-navigation/parts/overflow-menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport { isLinkItem } from '../../../button-dropdown/utils/utils';\nimport InternalIcon from '../../../icon/internal';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id';\nimport { LinkProps } from '../../../link/interfaces';\nimport { TopNavigationProps } from '../../interfaces';\nimport { useNavigate } from './router';\n\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  context?: 'dropdown-menu';\n  children?: React.ReactNode;\n  testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n  return (\n    <>\n      {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n      <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external' | 'target' | 'rel'> {}\n\nconst LinkItem = forwardRef(\n  (\n    { children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }: LinkItemProps,\n    ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n  ) => {\n    const anchorTarget = target ?? (external ? '_blank' : undefined);\n    const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n    const role = !href ? 'button' : undefined;\n\n    return (\n      <a\n        ref={ref}\n        onClick={onClick}\n        className={clsx(\n          styles['overflow-menu-control'],\n          styles['overflow-menu-control-link'],\n          context && styles[`overflow-menu-control-${context}`]\n        )}\n        role={role}\n        tabIndex={0}\n        href={href}\n        target={anchorTarget}\n        rel={anchorRel}\n        {...(testId ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </a>\n    );\n  }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n  onClick?: (event: React.MouseEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n  (\n    { children, startIcon, endIcon, onClick, testId }: ButtonItemProps & { testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={styles['overflow-menu-control']}\n        onClick={onClick}\n        {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </button>\n    );\n  }\n);\n\nconst NavigationItem = forwardRef(\n  (\n    {\n      startIcon,\n      children,\n      index,\n      testId,\n      ...definition\n    }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const navigate = useNavigate();\n    return (\n      <ButtonItem\n        ref={ref}\n        startIcon={startIcon}\n        endIcon={<InternalIcon name=\"angle-right\" />}\n        testId={testId}\n        onClick={() =>\n          navigate('dropdown-menu', {\n            definition,\n            headerText: definition.text || definition.title,\n            headerSecondaryText: definition.description,\n            utilityIndex: index,\n          })\n        }\n      >\n        {children}\n      </ButtonItem>\n    );\n  }\n);\n\nconst ExpandableItem: React.FC<\n  ButtonItemProps &\n    ButtonDropdownProps.ItemGroup & { onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n  const [expanded, setExpanded] = useState(false);\n  const headerId = useUniqueId('overflow-menu-item');\n\n  return (\n    <>\n      <button\n        className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n        onClick={() => setExpanded(value => !value)}\n        aria-expanded={expanded}\n      >\n        <ListItem\n          endIcon={\n            <span className={clsx(styles.icon, expanded && styles.expanded)}>\n              <InternalIcon name=\"caret-up-filled\" />\n            </span>\n          }\n        >\n          <span id={headerId}>{children}</span>\n        </ListItem>\n      </button>\n      {expanded && (\n        <ul\n          className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n          aria-labelledby={headerId}\n        >\n          {definition.items.map((item, index) => {\n            const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n            return (\n              <li\n                key={index}\n                className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n              >\n                {dropdownComponentFactory(item, isGroup, onItemClick)}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </>\n  );\n};\n\nfunction utilityComponentFactory(\n  utility: TopNavigationProps.Utility & { onClose?: () => void },\n  index: number,\n  ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n  const label = utility.text || utility.title;\n  const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n  );\n\n  switch (utility.type) {\n    case 'button': {\n      const handleClick = (event: React.MouseEvent) => {\n        if (Boolean(utility.href) && isPlainLeftClick(event)) {\n          fireCancelableEvent(utility.onFollow, { href: utility.href, target: utility.target }, event);\n        }\n\n        fireCancelableEvent(utility.onClick, {}, event);\n        utility.onClose?.();\n      };\n\n      const content = (\n        <>\n          {label}\n          {utility.external && (\n            <>\n              {' '}\n              <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n                <InternalIcon name=\"external\" size=\"normal\" />\n              </span>\n            </>\n          )}\n        </>\n      );\n\n      if (!utility.href) {\n        return (\n          <ButtonItem ref={ref} startIcon={startIcon} onClick={handleClick} testId={`__${index}`}>\n            {content}\n          </ButtonItem>\n        );\n      }\n\n      return (\n        <LinkItem\n          ref={ref}\n          startIcon={startIcon}\n          href={utility.href}\n          external={utility.external}\n          target={utility.target}\n          rel={utility.rel}\n          testId={`__${index}`}\n          onClick={handleClick}\n        >\n          {content}\n        </LinkItem>\n      );\n    }\n    case 'menu-dropdown': {\n      return (\n        <NavigationItem\n          ref={ref}\n          startIcon={startIcon}\n          index={index}\n          {...(utility as TopNavigationProps.MenuDropdownUtility)}\n          testId={`__${index}`}\n        >\n          {label}\n        </NavigationItem>\n      );\n    }\n  }\n}\n\nfunction dropdownComponentFactory(\n  item: ButtonDropdownProps.ItemOrGroup,\n  expandable: boolean,\n  onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void\n) {\n  const label = item.text;\n  const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n  const isLink = isLinkItem(item);\n  const startIcon = hasIcon && (\n    <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n  );\n\n  if (expandable) {\n    return (\n      <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n        {label}\n      </ExpandableItem>\n    );\n  }\n\n  return (\n    <LinkItem\n      startIcon={startIcon}\n      href={isLink ? item.href : undefined}\n      external={isLink ? item.external : undefined}\n      context=\"dropdown-menu\"\n      testId={item.id}\n      onClick={event => onItemClick(event, item as ButtonDropdownProps.Item)}\n    >\n      {label}\n      {isLink && item.external && (\n        <>\n          {' '}\n          <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n            <InternalIcon name=\"external\" size=\"normal\" />\n          </span>\n        </>\n      )}\n    </LinkItem>\n  );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number; onClose?: () => void };\n\nexport const UtilityMenuItem = forwardRef(\n  ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n    return (\n      <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n        {utilityComponentFactory(props, index, ref)}\n      </li>\n    );\n  }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {\n  onClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void;\n};\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n  const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n  return (\n    <li\n      className={clsx(\n        styles[`overflow-menu-list-item`],\n        styles[`overflow-menu-list-item-submenu`],\n        expandable && styles[`overflow-menu-list-item-expandable`]\n      )}\n    >\n      {dropdownComponentFactory(props, expandable, props.onClick)}\n    </li>\n  );\n};\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport { isLinkItem } from '../../../button-dropdown/utils/utils';\nimport InternalIcon from '../../../icon/internal';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id';\nimport { spinWhenOpen } from '../../../internal/styles/motion/utils';\nimport { LinkProps } from '../../../link/interfaces';\nimport { TopNavigationProps } from '../../interfaces';\nimport { useNavigate } from './router';\n\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  context?: 'dropdown-menu';\n  children?: React.ReactNode;\n  testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n  return (\n    <>\n      {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n      <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external' | 'target' | 'rel'> {}\n\nconst LinkItem = forwardRef(\n  (\n    { children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }: LinkItemProps,\n    ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n  ) => {\n    const anchorTarget = target ?? (external ? '_blank' : undefined);\n    const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n    const role = !href ? 'button' : undefined;\n\n    return (\n      <a\n        ref={ref}\n        onClick={onClick}\n        className={clsx(\n          styles['overflow-menu-control'],\n          styles['overflow-menu-control-link'],\n          context && styles[`overflow-menu-control-${context}`]\n        )}\n        role={role}\n        tabIndex={0}\n        href={href}\n        target={anchorTarget}\n        rel={anchorRel}\n        {...(testId ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </a>\n    );\n  }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n  onClick?: (event: React.MouseEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n  (\n    { children, startIcon, endIcon, onClick, testId }: ButtonItemProps & { testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={styles['overflow-menu-control']}\n        onClick={onClick}\n        {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </button>\n    );\n  }\n);\n\nconst NavigationItem = forwardRef(\n  (\n    {\n      startIcon,\n      children,\n      index,\n      testId,\n      ...definition\n    }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const navigate = useNavigate();\n    return (\n      <ButtonItem\n        ref={ref}\n        startIcon={startIcon}\n        endIcon={<InternalIcon name=\"angle-right\" />}\n        testId={testId}\n        onClick={() =>\n          navigate('dropdown-menu', {\n            definition,\n            headerText: definition.text || definition.title,\n            headerSecondaryText: definition.description,\n            utilityIndex: index,\n          })\n        }\n      >\n        {children}\n      </ButtonItem>\n    );\n  }\n);\n\nconst ExpandableItem: React.FC<\n  ButtonItemProps &\n    ButtonDropdownProps.ItemGroup & { onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n  const [expanded, setExpanded] = useState(false);\n  const headerId = useUniqueId('overflow-menu-item');\n\n  return (\n    <>\n      <button\n        className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n        onClick={() => setExpanded(value => !value)}\n        aria-expanded={expanded}\n      >\n        <ListItem\n          endIcon={\n            <span className={spinWhenOpen(styles, 'icon', expanded)}>\n              <InternalIcon name=\"caret-down-filled\" />\n            </span>\n          }\n        >\n          <span id={headerId}>{children}</span>\n        </ListItem>\n      </button>\n      {expanded && (\n        <ul\n          className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n          aria-labelledby={headerId}\n        >\n          {definition.items.map((item, index) => {\n            const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n            return (\n              <li\n                key={index}\n                className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n              >\n                {dropdownComponentFactory(item, isGroup, onItemClick)}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </>\n  );\n};\n\nfunction utilityComponentFactory(\n  utility: TopNavigationProps.Utility & { onClose?: () => void },\n  index: number,\n  ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n  const label = utility.text || utility.title;\n  const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n  );\n\n  switch (utility.type) {\n    case 'button': {\n      const handleClick = (event: React.MouseEvent) => {\n        if (Boolean(utility.href) && isPlainLeftClick(event)) {\n          fireCancelableEvent(utility.onFollow, { href: utility.href, target: utility.target }, event);\n        }\n\n        fireCancelableEvent(utility.onClick, {}, event);\n        utility.onClose?.();\n      };\n\n      const content = (\n        <>\n          {label}\n          {utility.external && (\n            <>\n              {' '}\n              <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n                <InternalIcon name=\"external\" size=\"normal\" />\n              </span>\n            </>\n          )}\n        </>\n      );\n\n      if (!utility.href) {\n        return (\n          <ButtonItem ref={ref} startIcon={startIcon} onClick={handleClick} testId={`__${index}`}>\n            {content}\n          </ButtonItem>\n        );\n      }\n\n      return (\n        <LinkItem\n          ref={ref}\n          startIcon={startIcon}\n          href={utility.href}\n          external={utility.external}\n          target={utility.target}\n          rel={utility.rel}\n          testId={`__${index}`}\n          onClick={handleClick}\n        >\n          {content}\n        </LinkItem>\n      );\n    }\n    case 'menu-dropdown': {\n      return (\n        <NavigationItem\n          ref={ref}\n          startIcon={startIcon}\n          index={index}\n          {...(utility as TopNavigationProps.MenuDropdownUtility)}\n          testId={`__${index}`}\n        >\n          {label}\n        </NavigationItem>\n      );\n    }\n  }\n}\n\nfunction dropdownComponentFactory(\n  item: ButtonDropdownProps.ItemOrGroup,\n  expandable: boolean,\n  onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void\n) {\n  const label = item.text;\n  const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n  const isLink = isLinkItem(item);\n  const startIcon = hasIcon && (\n    <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n  );\n\n  if (expandable) {\n    return (\n      <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n        {label}\n      </ExpandableItem>\n    );\n  }\n\n  return (\n    <LinkItem\n      startIcon={startIcon}\n      href={isLink ? item.href : undefined}\n      external={isLink ? item.external : undefined}\n      context=\"dropdown-menu\"\n      testId={item.id}\n      onClick={event => onItemClick(event, item as ButtonDropdownProps.Item)}\n    >\n      {label}\n      {isLink && item.external && (\n        <>\n          {' '}\n          <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n            <InternalIcon name=\"external\" size=\"normal\" />\n          </span>\n        </>\n      )}\n    </LinkItem>\n  );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number; onClose?: () => void };\n\nexport const UtilityMenuItem = forwardRef(\n  ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n    return (\n      <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n        {utilityComponentFactory(props, index, ref)}\n      </li>\n    );\n  }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {\n  onClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void;\n};\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n  const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n  return (\n    <li\n      className={clsx(\n        styles[`overflow-menu-list-item`],\n        styles[`overflow-menu-list-item-submenu`],\n        expandable && styles[`overflow-menu-list-item-expandable`]\n      )}\n    >\n      {dropdownComponentFactory(props, expandable, props.onClick)}\n    </li>\n  );\n};\n"]}

package/lib/internal/template/top-navigation/styles.css.js

@@ -1,52 +1,52 @@
 
     import './styles.scoped.css';
     export default {
-  "icon": "awsui_icon_k5dlb_bzi9v_149",
-  "top-navigation": "awsui_top-navigation_k5dlb_bzi9v_163",
-  "padding-box": "awsui_padding-box_k5dlb_bzi9v_195",
-  "medium": "awsui_medium_k5dlb_bzi9v_205",
-  "narrow": "awsui_narrow_k5dlb_bzi9v_205",
-  "virtual": "awsui_virtual_k5dlb_bzi9v_216",
-  "hidden": "awsui_hidden_k5dlb_bzi9v_220",
-  "\t": "awsui_\t_k5dlb_bzi9v_1",
-  "identity": "awsui_identity_k5dlb_bzi9v_232",
-  "identity-link": "awsui_identity-link_k5dlb_bzi9v_235",
-  "no-logo": "awsui_no-logo_k5dlb_bzi9v_255",
-  "logo": "awsui_logo_k5dlb_bzi9v_259",
-  "title": "awsui_title_k5dlb_bzi9v_271",
-  "inputs": "awsui_inputs_k5dlb_bzi9v_286",
-  "search": "awsui_search_k5dlb_bzi9v_294",
-  "search-expanded": "awsui_search-expanded_k5dlb_bzi9v_298",
-  "utilities": "awsui_utilities_k5dlb_bzi9v_302",
-  "utility-wrapper": "awsui_utility-wrapper_k5dlb_bzi9v_313",
-  "utility-type-button-link": "awsui_utility-type-button-link_k5dlb_bzi9v_334",
-  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_k5dlb_bzi9v_339",
-  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_k5dlb_bzi9v_348",
-  "utility-link-icon": "awsui_utility-link-icon_k5dlb_bzi9v_356",
-  "utility-button-external-icon": "awsui_utility-button-external-icon_k5dlb_bzi9v_360",
-  "offset-right-none": "awsui_offset-right-none_k5dlb_bzi9v_364",
-  "offset-right-l": "awsui_offset-right-l_k5dlb_bzi9v_368",
-  "offset-right-xxl": "awsui_offset-right-xxl_k5dlb_bzi9v_372",
-  "overflow-menu-drawer": "awsui_overflow-menu-drawer_k5dlb_bzi9v_377",
-  "overflow-menu": "awsui_overflow-menu_k5dlb_bzi9v_377",
-  "overflow-menu-header": "awsui_overflow-menu-header_k5dlb_bzi9v_418",
-  "overflow-menu-header-text": "awsui_overflow-menu-header-text_k5dlb_bzi9v_426",
-  "overflow-menu-header-text--secondary": "awsui_overflow-menu-header-text--secondary_k5dlb_bzi9v_438",
-  "overflow-menu-header-text--title": "awsui_overflow-menu-header-text--title_k5dlb_bzi9v_444",
-  "overflow-menu-back-button": "awsui_overflow-menu-back-button_k5dlb_bzi9v_448",
-  "overflow-menu-dismiss-button": "awsui_overflow-menu-dismiss-button_k5dlb_bzi9v_452",
-  "overflow-menu-control": "awsui_overflow-menu-control_k5dlb_bzi9v_456",
-  "overflow-menu-list-item-utility": "awsui_overflow-menu-list-item-utility_k5dlb_bzi9v_494",
-  "overflow-menu-control-link": "awsui_overflow-menu-control-link_k5dlb_bzi9v_502",
-  "overflow-menu-control-expandable-menu-trigger": "awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_bzi9v_505",
-  "overflow-menu-list": "awsui_overflow-menu-list_k5dlb_bzi9v_494",
-  "overflow-menu-list-submenu": "awsui_overflow-menu-list-submenu_k5dlb_bzi9v_541",
-  "overflow-menu-list-item": "awsui_overflow-menu-list-item_k5dlb_bzi9v_494",
-  "overflow-menu-list-item-icon": "awsui_overflow-menu-list-item-icon_k5dlb_bzi9v_550",
-  "overflow-menu-list-item-text": "awsui_overflow-menu-list-item-text_k5dlb_bzi9v_553",
-  "overflow-menu-list-item-submenu": "awsui_overflow-menu-list-item-submenu_k5dlb_bzi9v_562",
-  "overflow-menu-list-item-dropdown-menu": "awsui_overflow-menu-list-item-dropdown-menu_k5dlb_bzi9v_568",
-  "overflow-menu-list-item-expandable": "awsui_overflow-menu-list-item-expandable_k5dlb_bzi9v_572",
-  "expanded": "awsui_expanded_k5dlb_bzi9v_580"
+  "top-navigation": "awsui_top-navigation_k5dlb_xlf2u_145",
+  "padding-box": "awsui_padding-box_k5dlb_xlf2u_177",
+  "medium": "awsui_medium_k5dlb_xlf2u_187",
+  "narrow": "awsui_narrow_k5dlb_xlf2u_187",
+  "virtual": "awsui_virtual_k5dlb_xlf2u_198",
+  "hidden": "awsui_hidden_k5dlb_xlf2u_202",
+  "\t": "awsui_\t_k5dlb_xlf2u_1",
+  "identity": "awsui_identity_k5dlb_xlf2u_214",
+  "identity-link": "awsui_identity-link_k5dlb_xlf2u_217",
+  "no-logo": "awsui_no-logo_k5dlb_xlf2u_237",
+  "logo": "awsui_logo_k5dlb_xlf2u_241",
+  "title": "awsui_title_k5dlb_xlf2u_253",
+  "inputs": "awsui_inputs_k5dlb_xlf2u_268",
+  "search": "awsui_search_k5dlb_xlf2u_276",
+  "search-expanded": "awsui_search-expanded_k5dlb_xlf2u_280",
+  "utilities": "awsui_utilities_k5dlb_xlf2u_284",
+  "utility-wrapper": "awsui_utility-wrapper_k5dlb_xlf2u_295",
+  "utility-type-button-link": "awsui_utility-type-button-link_k5dlb_xlf2u_316",
+  "utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_k5dlb_xlf2u_321",
+  "utility-type-button-primary-button": "awsui_utility-type-button-primary-button_k5dlb_xlf2u_330",
+  "utility-link-icon": "awsui_utility-link-icon_k5dlb_xlf2u_338",
+  "utility-button-external-icon": "awsui_utility-button-external-icon_k5dlb_xlf2u_342",
+  "offset-right-none": "awsui_offset-right-none_k5dlb_xlf2u_346",
+  "offset-right-l": "awsui_offset-right-l_k5dlb_xlf2u_350",
+  "offset-right-xxl": "awsui_offset-right-xxl_k5dlb_xlf2u_354",
+  "overflow-menu-drawer": "awsui_overflow-menu-drawer_k5dlb_xlf2u_359",
+  "overflow-menu": "awsui_overflow-menu_k5dlb_xlf2u_359",
+  "overflow-menu-header": "awsui_overflow-menu-header_k5dlb_xlf2u_400",
+  "overflow-menu-header-text": "awsui_overflow-menu-header-text_k5dlb_xlf2u_408",
+  "overflow-menu-header-text--secondary": "awsui_overflow-menu-header-text--secondary_k5dlb_xlf2u_420",
+  "overflow-menu-header-text--title": "awsui_overflow-menu-header-text--title_k5dlb_xlf2u_426",
+  "overflow-menu-back-button": "awsui_overflow-menu-back-button_k5dlb_xlf2u_430",
+  "overflow-menu-dismiss-button": "awsui_overflow-menu-dismiss-button_k5dlb_xlf2u_434",
+  "overflow-menu-control": "awsui_overflow-menu-control_k5dlb_xlf2u_438",
+  "overflow-menu-list-item-utility": "awsui_overflow-menu-list-item-utility_k5dlb_xlf2u_476",
+  "overflow-menu-control-link": "awsui_overflow-menu-control-link_k5dlb_xlf2u_484",
+  "overflow-menu-control-expandable-menu-trigger": "awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_xlf2u_487",
+  "overflow-menu-list": "awsui_overflow-menu-list_k5dlb_xlf2u_476",
+  "overflow-menu-list-submenu": "awsui_overflow-menu-list-submenu_k5dlb_xlf2u_523",
+  "overflow-menu-list-item": "awsui_overflow-menu-list-item_k5dlb_xlf2u_476",
+  "overflow-menu-list-item-icon": "awsui_overflow-menu-list-item-icon_k5dlb_xlf2u_532",
+  "overflow-menu-list-item-text": "awsui_overflow-menu-list-item-text_k5dlb_xlf2u_535",
+  "overflow-menu-list-item-submenu": "awsui_overflow-menu-list-item-submenu_k5dlb_xlf2u_544",
+  "overflow-menu-list-item-dropdown-menu": "awsui_overflow-menu-list-item-dropdown-menu_k5dlb_xlf2u_550",
+  "overflow-menu-list-item-expandable": "awsui_overflow-menu-list-item-expandable_k5dlb_xlf2u_554",
+  "icon": "awsui_icon_k5dlb_xlf2u_559",
+  "icon-open": "awsui_icon-open_k5dlb_xlf2u_573"
 };
   

package/lib/internal/template/top-navigation/styles.scoped.css

@@ -136,31 +136,13 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* 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 */
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_icon_k5dlb_bzi9v_149:not(#\9) {
-  transition: transform var(--motion-duration-rotate-90-bpnkq9, 135ms) var(--motion-easing-rotate-90-c61wiy, cubic-bezier(0.165, 0.84, 0.44, 1));
-}
-@media (prefers-reduced-motion: reduce) {
-  .awsui_icon_k5dlb_bzi9v_149:not(#\9) {
-    animation: none;
-    transition: none;
-  }
-}
-.awsui-motion-disabled .awsui_icon_k5dlb_bzi9v_149:not(#\9), .awsui-mode-entering .awsui_icon_k5dlb_bzi9v_149:not(#\9) {
-  animation: none;
-  transition: none;
-}
-
-.awsui_top-navigation_k5dlb_bzi9v_163:not(#\9) {
+/* 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_top-navigation_k5dlb_xlf2u_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -193,7 +175,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   background: var(--color-background-container-content-myy7cn, #ffffff);
 }
-.awsui_top-navigation_k5dlb_bzi9v_163 > .awsui_padding-box_k5dlb_bzi9v_195:not(#\9) {
+.awsui_top-navigation_k5dlb_xlf2u_145 > .awsui_padding-box_k5dlb_xlf2u_177:not(#\9) {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -203,22 +185,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: calc(var(--space-xxxl-vkrt7p, 40px) + var(--space-scaled-m-3uxq9h, 16px));
   padding-inline-start: var(--space-xxl-thzxkv, 32px);
 }
-.awsui_top-navigation_k5dlb_bzi9v_163.awsui_medium_k5dlb_bzi9v_205 > .awsui_padding-box_k5dlb_bzi9v_195:not(#\9), .awsui_top-navigation_k5dlb_bzi9v_163.awsui_narrow_k5dlb_bzi9v_205 > .awsui_padding-box_k5dlb_bzi9v_195:not(#\9) {
+.awsui_top-navigation_k5dlb_xlf2u_145.awsui_medium_k5dlb_xlf2u_187 > .awsui_padding-box_k5dlb_xlf2u_177:not(#\9), .awsui_top-navigation_k5dlb_xlf2u_145.awsui_narrow_k5dlb_xlf2u_187 > .awsui_padding-box_k5dlb_xlf2u_177:not(#\9) {
   padding-inline-start: var(--space-l-eenfqd, 20px);
 }
-.awsui_top-navigation_k5dlb_bzi9v_163.awsui_medium_k5dlb_bzi9v_205 > .awsui_padding-box_k5dlb_bzi9v_195:not(#\9) {
+.awsui_top-navigation_k5dlb_xlf2u_145.awsui_medium_k5dlb_xlf2u_187 > .awsui_padding-box_k5dlb_xlf2u_177:not(#\9) {
   block-size: calc(var(--space-xxxl-vkrt7p, 40px) + var(--space-scaled-xs-t3am3w, 8px));
   padding-inline-end: 0;
 }
-.awsui_top-navigation_k5dlb_bzi9v_163.awsui_narrow_k5dlb_bzi9v_205 > .awsui_padding-box_k5dlb_bzi9v_195:not(#\9) {
+.awsui_top-navigation_k5dlb_xlf2u_145.awsui_narrow_k5dlb_xlf2u_187 > .awsui_padding-box_k5dlb_xlf2u_177:not(#\9) {
   block-size: var(--space-xxxl-vkrt7p, 40px);
 }
 
-.awsui_virtual_k5dlb_bzi9v_216:not(#\9) {
+.awsui_virtual_k5dlb_xlf2u_198:not(#\9) {
   inline-size: 9000px;
 }
 
-.awsui_hidden_k5dlb_bzi9v_220:not(#\9) {
+.awsui_hidden_k5dlb_xlf2u_202:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;
@@ -226,23 +208,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_hidden_k5dlb_bzi9v_220 *:not(#\9):not(#awsui_\9 _k5dlb_bzi9v_1) {
+.awsui_hidden_k5dlb_xlf2u_202 *:not(#\9):not(#awsui_\9 _k5dlb_xlf2u_1) {
   visibility: hidden;
 }
 
-.awsui_identity_k5dlb_bzi9v_232:not(#\9) {
+.awsui_identity_k5dlb_xlf2u_214:not(#\9) {
   min-inline-size: 0;
 }
-.awsui_identity_k5dlb_bzi9v_232 > .awsui_identity-link_k5dlb_bzi9v_235:not(#\9) {
+.awsui_identity_k5dlb_xlf2u_214 > .awsui_identity-link_k5dlb_xlf2u_217:not(#\9) {
   display: flex;
   align-items: center;
   text-decoration: none;
   color: var(--color-text-top-navigation-title-e4w0av, #16191f);
 }
-.awsui_identity_k5dlb_bzi9v_232 > .awsui_identity-link_k5dlb_bzi9v_235:not(#\9):hover {
+.awsui_identity_k5dlb_xlf2u_214 > .awsui_identity-link_k5dlb_xlf2u_217:not(#\9):hover {
   color: var(--color-text-accent-b3retj, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_identity-link_k5dlb_bzi9v_235:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_xlf2u_214 > .awsui_identity-link_k5dlb_xlf2u_217:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-bptw2p, 5px auto Highlight);
   outline-offset: 2px;
@@ -253,11 +235,11 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   border-end-end-radius: var(--border-radius-control-default-focus-ring-vy2hlh, 2px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-yrkso1, 0px) var(--color-border-item-focused-q68bgg, #0073bb);
 }
-.awsui_identity_k5dlb_bzi9v_232.awsui_no-logo_k5dlb_bzi9v_255:not(#\9) {
+.awsui_identity_k5dlb_xlf2u_214.awsui_no-logo_k5dlb_xlf2u_237:not(#\9) {
   min-inline-size: 100px;
 }
 
-.awsui_logo_k5dlb_bzi9v_259:not(#\9) {
+.awsui_logo_k5dlb_xlf2u_241:not(#\9) {
   display: block;
   max-block-size: var(--space-xxl-thzxkv, 32px);
   margin-inline-end: var(--space-s-vmutj3, 12px);
@@ -265,11 +247,11 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   flex-shrink: 0;
   min-inline-size: 10px;
 }
-.awsui_logo_k5dlb_bzi9v_259.awsui_narrow_k5dlb_bzi9v_205:not(#\9) {
+.awsui_logo_k5dlb_xlf2u_241.awsui_narrow_k5dlb_xlf2u_187:not(#\9) {
   max-block-size: var(--space-xl-vss8pc, 24px);
 }
 
-.awsui_title_k5dlb_bzi9v_271:not(#\9) {
+.awsui_title_k5dlb_xlf2u_253:not(#\9) {
   font-size: var(--font-size-heading-m-abxcoe, 18px);
   line-height: var(--line-height-heading-m-v86qsm, 22px);
   letter-spacing: var(--letter-spacing-heading-m-790tuq, normal);
@@ -280,11 +262,11 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.awsui_no-logo_k5dlb_bzi9v_255 > .awsui_identity-link_k5dlb_bzi9v_235 > .awsui_title_k5dlb_bzi9v_271:not(#\9) {
+.awsui_no-logo_k5dlb_xlf2u_237 > .awsui_identity-link_k5dlb_xlf2u_217 > .awsui_title_k5dlb_xlf2u_253:not(#\9) {
   font-weight: 700;
 }
 
-.awsui_inputs_k5dlb_bzi9v_286:not(#\9) {
+.awsui_inputs_k5dlb_xlf2u_268:not(#\9) {
   display: flex;
   flex: 1;
   padding-block: 0;
@@ -292,26 +274,26 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   justify-content: center;
 }
 
-.awsui_search_k5dlb_bzi9v_294:not(#\9) {
+.awsui_search_k5dlb_xlf2u_276:not(#\9) {
   inline-size: 100%;
   max-inline-size: 340px;
 }
-.awsui_search-expanded_k5dlb_bzi9v_298:not(#\9) {
+.awsui_search-expanded_k5dlb_xlf2u_280:not(#\9) {
   max-inline-size: none;
 }
 
-.awsui_utilities_k5dlb_bzi9v_302:not(#\9) {
+.awsui_utilities_k5dlb_xlf2u_284:not(#\9) {
   display: flex;
   flex-shrink: 0;
   flex-direction: row;
   align-items: stretch;
   block-size: 100%;
 }
-.awsui_medium_k5dlb_bzi9v_205 > .awsui_padding-box_k5dlb_bzi9v_195 > .awsui_utilities_k5dlb_bzi9v_302:not(#\9), .awsui_narrow_k5dlb_bzi9v_205 > .awsui_padding-box_k5dlb_bzi9v_195 > .awsui_utilities_k5dlb_bzi9v_302:not(#\9) {
+.awsui_medium_k5dlb_xlf2u_187 > .awsui_padding-box_k5dlb_xlf2u_177 > .awsui_utilities_k5dlb_xlf2u_284:not(#\9), .awsui_narrow_k5dlb_xlf2u_187 > .awsui_padding-box_k5dlb_xlf2u_177 > .awsui_utilities_k5dlb_xlf2u_284:not(#\9) {
   padding-inline-start: 0;
 }
 
-.awsui_utility-wrapper_k5dlb_bzi9v_313:not(#\9) {
+.awsui_utility-wrapper_k5dlb_xlf2u_295:not(#\9) {
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -319,7 +301,7 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   padding-block: 0;
   padding-inline: var(--space-m-u91ipm, 16px);
 }
-.awsui_utility-wrapper_k5dlb_bzi9v_313:not(#\9)::after {
+.awsui_utility-wrapper_k5dlb_xlf2u_295:not(#\9)::after {
   display: block;
   position: absolute;
   content: "";
@@ -328,61 +310,61 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   inset-block: var(--space-s-vmutj3, 12px);
   background: var(--color-border-divider-default-u5ytia, #eaeded);
 }
-.awsui_utility-wrapper_k5dlb_bzi9v_313:not(#\9):last-of-type::after {
+.awsui_utility-wrapper_k5dlb_xlf2u_295:not(#\9):last-of-type::after {
   display: none;
 }
 
-.awsui_utility-type-button-link_k5dlb_bzi9v_334:not(#\9) {
+.awsui_utility-type-button-link_k5dlb_xlf2u_316:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-eenfqd, 20px);
 }
 
-.awsui_utility-type-menu-dropdown_k5dlb_bzi9v_339:not(#\9) {
+.awsui_utility-type-menu-dropdown_k5dlb_xlf2u_321:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-s-vmutj3, 12px);
   align-items: stretch;
 }
-.awsui_utility-type-menu-dropdown_k5dlb_bzi9v_339:not(#\9):not(.awsui_narrow_k5dlb_bzi9v_205):last-of-type, .awsui_utility-type-menu-dropdown_k5dlb_bzi9v_339:not(#\9):not(.awsui_medium_k5dlb_bzi9v_205):last-of-type {
+.awsui_utility-type-menu-dropdown_k5dlb_xlf2u_321:not(#\9):not(.awsui_narrow_k5dlb_xlf2u_187):last-of-type, .awsui_utility-type-menu-dropdown_k5dlb_xlf2u_321:not(#\9):not(.awsui_medium_k5dlb_xlf2u_187):last-of-type {
   padding-inline-end: 0;
 }
 
-.awsui_utility-type-button-primary-button_k5dlb_bzi9v_348:not(#\9) {
+.awsui_utility-type-button-primary-button_k5dlb_xlf2u_330:not(#\9) {
   inset-inline-start: -1px;
   border-inline-start: 1px solid var(--color-background-container-content-myy7cn, #ffffff);
 }
-.awsui_utility-type-button-primary-button_k5dlb_bzi9v_348:not(#\9)::after {
+.awsui_utility-type-button-primary-button_k5dlb_xlf2u_330:not(#\9)::after {
   display: none;
 }
 
-.awsui_utility-link-icon_k5dlb_bzi9v_356:not(#\9) {
+.awsui_utility-link-icon_k5dlb_xlf2u_338:not(#\9) {
   margin-inline-start: var(--space-xxs-y2432o, 4px);
 }
 
-.awsui_utility-button-external-icon_k5dlb_bzi9v_360:not(#\9) {
+.awsui_utility-button-external-icon_k5dlb_xlf2u_342:not(#\9) {
   display: inline-block;
 }
 
-.awsui_offset-right-none_k5dlb_bzi9v_364:not(#\9) {
+.awsui_offset-right-none_k5dlb_xlf2u_346:not(#\9) {
   margin-inline-end: 0;
 }
 
-.awsui_offset-right-l_k5dlb_bzi9v_368:not(#\9) {
+.awsui_offset-right-l_k5dlb_xlf2u_350:not(#\9) {
   margin-inline-end: var(--space-xxs-y2432o, 4px);
 }
 
-.awsui_offset-right-xxl_k5dlb_bzi9v_372:not(#\9) {
+.awsui_offset-right-xxl_k5dlb_xlf2u_354:not(#\9) {
   margin-inline-end: var(--space-m-u91ipm, 16px);
 }
 
 /* Overflow Menu */
-.awsui_overflow-menu-drawer_k5dlb_bzi9v_377:not(#\9) {
+.awsui_overflow-menu-drawer_k5dlb_xlf2u_359:not(#\9) {
   position: fixed;
   block-size: 100%;
   inline-size: 100%;
   z-index: 1001;
 }
 
-.awsui_overflow-menu_k5dlb_bzi9v_377:not(#\9) {
+.awsui_overflow-menu_k5dlb_xlf2u_359:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -417,7 +399,7 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   block-size: 100%;
 }
 
-.awsui_overflow-menu-header_k5dlb_bzi9v_418:not(#\9) {
+.awsui_overflow-menu-header_k5dlb_xlf2u_400:not(#\9) {
   display: flex;
   align-items: center;
   min-block-size: var(--font-panel-header-line-height-av95ns, 22px);
@@ -425,7 +407,7 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   padding-inline: var(--space-scaled-m-3uxq9h, 16px);
   border-block-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-default-u5ytia, #eaeded);
 }
-.awsui_overflow-menu-header-text_k5dlb_bzi9v_426:not(#\9) {
+.awsui_overflow-menu-header-text_k5dlb_xlf2u_408:not(#\9) {
   font-size: var(--font-panel-header-size-197c0y, 18px);
   line-height: var(--font-panel-header-line-height-av95ns, 22px);
   font-weight: var(--font-weight-heading-l-ypbqtk, 700);
@@ -437,25 +419,25 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   margin-inline: 0;
   text-align: center;
 }
-.awsui_overflow-menu-header-text--secondary_k5dlb_bzi9v_438:not(#\9) {
+.awsui_overflow-menu-header-text--secondary_k5dlb_xlf2u_420:not(#\9) {
   font-size: var(--font-header-h2-description-size-jr9dz3, 12px);
   line-height: var(--font-header-h2-description-line-height-mth7kd, 16px);
   font-weight: 400;
 }
 
-.awsui_overflow-menu-header-text--title_k5dlb_bzi9v_444:not(#\9) {
+.awsui_overflow-menu-header-text--title_k5dlb_xlf2u_426:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_overflow-menu-back-button_k5dlb_bzi9v_448:not(#\9) {
+.awsui_overflow-menu-back-button_k5dlb_xlf2u_430:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_overflow-menu-dismiss-button_k5dlb_bzi9v_452:not(#\9) {
+.awsui_overflow-menu-dismiss-button_k5dlb_xlf2u_434:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_overflow-menu-control_k5dlb_bzi9v_456:not(#\9) {
+.awsui_overflow-menu-control_k5dlb_xlf2u_438:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -494,32 +476,32 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_bzi9v_232 > .awsui_ide
   border-block: none;
   border-inline: none;
 }
-.awsui_overflow-menu-list-item-utility_k5dlb_bzi9v_494 > .awsui_overflow-menu-control_k5dlb_bzi9v_456:not(#\9) {
+.awsui_overflow-menu-list-item-utility_k5dlb_xlf2u_476 > .awsui_overflow-menu-control_k5dlb_xlf2u_438:not(#\9) {
   padding-block: var(--space-scaled-m-3uxq9h, 16px);
   padding-inline: var(--space-scaled-m-3uxq9h, 16px);
 }
-.awsui_overflow-menu-control_k5dlb_bzi9v_456:not(#\9):hover {
+.awsui_overflow-menu-control_k5dlb_xlf2u_438:not(#\9):hover {
   color: var(--color-text-accent-b3retj, #0073bb);
   cursor: pointer;
 }
-.awsui_overflow-menu-control-link_k5dlb_bzi9v_502:not(#\9) {
+.awsui_overflow-menu-control-link_k5dlb_xlf2u_484:not(#\9) {
   text-decoration: none;
 }
-.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_bzi9v_505:not(#\9) {
+.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_xlf2u_487:not(#\9) {
   color: var(--color-text-dropdown-group-label-h1uzwg, #545b64);
   font-weight: bold;
 }
-.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_bzi9v_505:not(#\9):hover {
+.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_xlf2u_487:not(#\9):hover {
   color: var(--color-text-accent-b3retj, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_bzi9v_456:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_xlf2u_438:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_bzi9v_456:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_xlf2u_438:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-button-focus-outline-gutter-90p0io, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_bzi9v_456:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_xlf2u_438:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -534,52 +516,63 @@ body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_bzi9v_456
   box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
 }
 
-.awsui_overflow-menu-list_k5dlb_bzi9v_494:not(#\9) {
+.awsui_overflow-menu-list_k5dlb_xlf2u_476:not(#\9) {
   list-style: none;
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
   padding-inline: 0;
 }
-.awsui_overflow-menu-list-submenu_k5dlb_bzi9v_541:not(#\9) {
+.awsui_overflow-menu-list-submenu_k5dlb_xlf2u_523:not(#\9) {
   margin-block: var(--space-scaled-xxs-krq5fq, 4px);
   margin-inline: 0;
 }
 
-.awsui_overflow-menu-list-item_k5dlb_bzi9v_494:not(#\9) {
+.awsui_overflow-menu-list-item_k5dlb_xlf2u_476:not(#\9) {
   box-sizing: border-box;
   letter-spacing: var(--font-button-letter-spacing-47n0nr, 0.25px);
 }
-.awsui_overflow-menu-list-item-icon_k5dlb_bzi9v_550:not(#\9) {
+.awsui_overflow-menu-list-item-icon_k5dlb_xlf2u_532:not(#\9) {
   margin-inline-end: var(--space-xxs-y2432o, 4px);
 }
-.awsui_overflow-menu-list-item-text_k5dlb_bzi9v_553:not(#\9) {
+.awsui_overflow-menu-list-item-text_k5dlb_xlf2u_535:not(#\9) {
   flex: 1;
 }
-.awsui_overflow-menu-list-item-utility_k5dlb_bzi9v_494:not(#\9) {
+.awsui_overflow-menu-list-item-utility_k5dlb_xlf2u_476:not(#\9) {
   font-weight: var(--font-weight-button-rw26ot, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
   border-block-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-default-u5ytia, #eaeded);
 }
-.awsui_overflow-menu-list-item-submenu_k5dlb_bzi9v_562:not(#\9) {
+.awsui_overflow-menu-list-item-submenu_k5dlb_xlf2u_544:not(#\9) {
   border-block-start: var(--border-divider-section-width-iueskx, 1px) solid transparent;
   border-block-end: var(--border-divider-section-width-iueskx, 1px) solid transparent;
   padding-block: var(--space-scaled-xxs-krq5fq, 4px);
   padding-inline: var(--space-scaled-l-7e51pg, 20px);
 }
-.awsui_overflow-menu-list-item-dropdown-menu_k5dlb_bzi9v_568:not(#\9) {
+.awsui_overflow-menu-list-item-dropdown-menu_k5dlb_xlf2u_550:not(#\9) {
   padding-block: var(--space-scaled-xxs-krq5fq, 4px);
   padding-inline: var(--space-scaled-s-8j7izy, 12px);
 }
-.awsui_overflow-menu-list-item-expandable_k5dlb_bzi9v_572:not(#\9) {
+.awsui_overflow-menu-list-item-expandable_k5dlb_xlf2u_554:not(#\9) {
   border-block-start-color: var(--color-border-divider-default-u5ytia, #eaeded);
   border-block-end-color: var(--color-border-divider-default-u5ytia, #eaeded);
 }
 
-.awsui_icon_k5dlb_bzi9v_149:not(#\9) {
-  transform: rotate(-180deg);
-}
-.awsui_icon_k5dlb_bzi9v_149.awsui_expanded_k5dlb_bzi9v_580:not(#\9) {
+.awsui_icon_k5dlb_xlf2u_559:not(#\9) {
   transform: rotate(0deg);
+  transition: transform var(--motion-duration-rotate-180-llqolb, 135ms) var(--motion-easing-rotate-180-wt4cje, cubic-bezier(0.165, 0.84, 0.44, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_icon_k5dlb_xlf2u_559:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_icon_k5dlb_xlf2u_559:not(#\9), .awsui-mode-entering .awsui_icon_k5dlb_xlf2u_559:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_icon-open_k5dlb_xlf2u_573:not(#\9) {
+  transform: rotate(-180deg);
 }