@cloudscape-design/components-themeable 3.0.961 → 3.0.963

package/lib/internal/template/button-dropdown/item-element/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/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 {\n  GeneratedAnalyticsMetadataFragment,\n  getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownClick } from '../analytics-metadata/interfaces';\nimport { InternalCheckboxItem, InternalItem, ItemProps, LinkItem } from '../interfaces';\nimport Tooltip from '../tooltip';\nimport { getMenuItemCheckboxProps, getMenuItemProps } from '../utils/menu-item';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport { getItemTarget } from '../utils/utils';\n\nimport analyticsLabels from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst ItemElement = ({\n  position = '1',\n  item,\n  disabled,\n  onItemActivate,\n  highlighted,\n  highlightItem,\n  showDivider,\n  hasCategoryHeader,\n  isKeyboardHighlighted = false,\n  analyticsMetadataTransformer = (metadata: GeneratedAnalyticsMetadataFragment) => metadata,\n  variant = 'normal',\n  linkStyle,\n}: ItemProps) => {\n  const isLink = isLinkItem(item);\n  const isCheckbox = isCheckboxItem(item);\n  const onClick = (event: React.MouseEvent) => {\n    // Stop propagation to parent node and handle event exclusively in here. This ensures\n    // that no group will interfere with the default behavior of links\n    event.stopPropagation();\n    if (!isLink) {\n      event.preventDefault();\n    }\n    if (!disabled) {\n      onItemActivate(item, event);\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  return (\n    <li\n      className={clsx(styles['item-element'], styles[`variant-${variant}`], {\n        [styles.highlighted]: highlighted,\n        [styles.disabled]: disabled,\n        [styles['has-category-header']]: hasCategoryHeader,\n        [styles['has-checkmark']]: isCheckbox,\n        [styles['show-divider']]: showDivider,\n        [styles['is-focused']]: isKeyboardHighlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      data-description={item.description}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n      {...getAnalyticsMetadataAttribute(\n        disabled\n          ? {}\n          : (analyticsMetadataTransformer!({\n              action: 'click',\n              detail: {\n                position,\n                id: item.id,\n                label: `.${analyticsLabels['menu-item']}`,\n                href: (item as LinkItem).href || '',\n              },\n            }) as GeneratedAnalyticsMetadataButtonDropdownClick)\n      )}\n    >\n      <MenuItem item={item} disabled={disabled} highlighted={highlighted} linkStyle={linkStyle} />\n    </li>\n  );\n};\n\ninterface MenuItemProps {\n  item: InternalItem | InternalCheckboxItem;\n  disabled: boolean;\n  highlighted: boolean;\n  linkStyle?: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted, linkStyle }: MenuItemProps) {\n  const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n  const isCheckbox = isCheckboxItem(item);\n  const isCurrentBreadcrumb = !isCheckbox && item.isCurrentBreadcrumb;\n\n  useEffect(() => {\n    if (highlighted && menuItemRef.current) {\n      menuItemRef.current.focus();\n    }\n  }, [highlighted]);\n\n  const isDisabledWithReason = disabled && item.disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const menuItemProps: React.HTMLAttributes<HTMLSpanElement & HTMLAnchorElement> = {\n    'aria-label': item.ariaLabel,\n    className: clsx(\n      styles['menu-item'],\n      analyticsLabels['menu-item'],\n      linkStyle && styles['link-style'],\n      linkStyle && highlighted && styles['link-style-highlighted'],\n      isCurrentBreadcrumb && styles['current-breadcrumb']\n    ),\n    'aria-current': isCurrentBreadcrumb,\n    lang: item.lang,\n    ref: menuItemRef,\n    // We are using the roving tabindex technique to manage the focus state of the dropdown.\n    // The current element will always have tabindex=0 which means that it can be tabbed to,\n    // while all other items have tabindex=-1 so we can focus them when necessary.\n    tabIndex: highlighted ? 0 : -1,\n    ...(isCheckbox ? getMenuItemCheckboxProps({ disabled, checked: item.checked }) : getMenuItemProps({ disabled })),\n    ...(isDisabledWithReason ? targetProps : {}),\n  };\n\n  const menuItem = isLinkItem(item) ? (\n    <a\n      {...menuItemProps}\n      href={!disabled ? item.href : undefined}\n      target={getItemTarget(item)}\n      rel={item.external ? 'noopener noreferrer' : undefined}\n    >\n      <MenuItemContent item={item} disabled={disabled} />\n    </a>\n  ) : (\n    <span {...menuItemProps}>\n      <MenuItemContent item={item} disabled={disabled} />\n    </span>\n  );\n\n  const { position } = useDropdownContext();\n  const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';\n  return isDisabledWithReason ? (\n    <Tooltip content={item.disabledReason} position={tooltipPosition} className={styles['item-tooltip-wrapper']}>\n      {menuItem}\n      {descriptionEl}\n    </Tooltip>\n  ) : (\n    menuItem\n  );\n}\n\nconst MenuItemContent = ({ item, disabled }: { item: InternalItem | InternalCheckboxItem; disabled: boolean }) => {\n  const hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);\n  const hasExternal = isLinkItem(item) && item.external;\n  const isCheckbox = isCheckboxItem(item);\n  return (\n    <>\n      {isCheckbox && <MenuItemCheckmark checked={item.checked} disabled={disabled} />}\n      {hasIcon && (\n        <MenuItemIcon\n          name={item.iconName}\n          url={item.iconUrl}\n          svg={item.iconSvg}\n          alt={item.iconAlt}\n          badge={item.badge}\n        />\n      )}\n      {item.text}\n      {hasExternal && <ExternalIcon disabled={disabled} ariaLabel={item.externalIconAriaLabel} />}\n    </>\n  );\n};\n\nconst MenuItemIcon = (props: InternalIconProps) => (\n  <span className={styles.icon}>\n    <InternalIcon {...props} />\n  </span>\n);\n\n// Toggle has aria-hidden set because it's just used as a graphical element,\n// a11y attributes for the checkmark are communicated through the role and aria-checked state\n// of the menu element item.\nconst MenuItemCheckmark = ({ disabled, checked }: { disabled: boolean; checked: boolean }) => {\n  const checkmark = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"check\" />;\n  return (\n    <span\n      className={clsx(styles.icon, styles.checkmark, { [styles.disabled]: disabled })}\n      aria-hidden=\"true\"\n      style={{ visibility: checked ? 'visible' : 'hidden' }}\n    >\n      {checkmark}\n    </span>\n  );\n};\n\nconst ExternalIcon = ({ disabled, ariaLabel }: { disabled: boolean; ariaLabel?: string }) => {\n  const icon = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"external\" />;\n  return (\n    <span className={styles['external-icon']} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel}>\n      {icon}\n    </span>\n  );\n};\n\nexport default ItemElement;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/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 {\n  GeneratedAnalyticsMetadataFragment,\n  getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { GeneratedAnalyticsMetadataButtonDropdownClick } from '../analytics-metadata/interfaces';\nimport { InternalCheckboxItem, InternalItem, ItemProps, LinkItem } from '../interfaces';\nimport Tooltip from '../tooltip';\nimport { getMenuItemCheckboxProps, getMenuItemProps } from '../utils/menu-item';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport { getItemTarget } from '../utils/utils';\n\nimport analyticsLabels from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst ItemElement = ({\n  position = '1',\n  item,\n  disabled,\n  onItemActivate,\n  highlighted,\n  highlightItem,\n  showDivider,\n  hasCategoryHeader,\n  isKeyboardHighlighted = false,\n  analyticsMetadataTransformer = (metadata: GeneratedAnalyticsMetadataFragment) => metadata,\n  variant = 'normal',\n  linkStyle,\n}: ItemProps) => {\n  const isLink = isLinkItem(item);\n  const isCheckbox = isCheckboxItem(item);\n  const onClick = (event: React.MouseEvent) => {\n    // Stop propagation to parent node and handle event exclusively in here. This ensures\n    // that no group will interfere with the default behavior of links\n    event.stopPropagation();\n    if (!isLink) {\n      event.preventDefault();\n    }\n    if (!disabled) {\n      onItemActivate(item, event);\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  const isVisualRefresh = useVisualRefresh();\n\n  return (\n    <li\n      className={clsx(styles['item-element'], styles[`variant-${variant}`], {\n        [styles.highlighted]: highlighted,\n        [styles.disabled]: disabled,\n        [styles['has-category-header']]: hasCategoryHeader,\n        [styles['has-checkmark']]: isCheckbox,\n        [styles['show-divider']]: showDivider,\n        [styles['is-focused']]: isKeyboardHighlighted,\n        [styles['visual-refresh']]: isVisualRefresh,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      data-description={item.description}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n      {...getAnalyticsMetadataAttribute(\n        disabled\n          ? {}\n          : (analyticsMetadataTransformer!({\n              action: 'click',\n              detail: {\n                position,\n                id: item.id,\n                label: `.${analyticsLabels['menu-item']}`,\n                href: (item as LinkItem).href || '',\n              },\n            }) as GeneratedAnalyticsMetadataButtonDropdownClick)\n      )}\n    >\n      <MenuItem item={item} disabled={disabled} highlighted={highlighted} linkStyle={linkStyle} />\n    </li>\n  );\n};\n\ninterface MenuItemProps {\n  item: InternalItem | InternalCheckboxItem;\n  disabled: boolean;\n  highlighted: boolean;\n  linkStyle?: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted, linkStyle }: MenuItemProps) {\n  const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n  const isCheckbox = isCheckboxItem(item);\n  const isCurrentBreadcrumb = !isCheckbox && item.isCurrentBreadcrumb;\n\n  useEffect(() => {\n    if (highlighted && menuItemRef.current) {\n      menuItemRef.current.focus();\n    }\n  }, [highlighted]);\n\n  const isDisabledWithReason = disabled && item.disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const menuItemProps: React.HTMLAttributes<HTMLSpanElement & HTMLAnchorElement> = {\n    'aria-label': item.ariaLabel,\n    className: clsx(\n      styles['menu-item'],\n      analyticsLabels['menu-item'],\n      linkStyle && styles['link-style'],\n      linkStyle && highlighted && styles['link-style-highlighted'],\n      isCurrentBreadcrumb && styles['current-breadcrumb']\n    ),\n    'aria-current': isCurrentBreadcrumb,\n    lang: item.lang,\n    ref: menuItemRef,\n    // We are using the roving tabindex technique to manage the focus state of the dropdown.\n    // The current element will always have tabindex=0 which means that it can be tabbed to,\n    // while all other items have tabindex=-1 so we can focus them when necessary.\n    tabIndex: highlighted ? 0 : -1,\n    ...(isCheckbox ? getMenuItemCheckboxProps({ disabled, checked: item.checked }) : getMenuItemProps({ disabled })),\n    ...(isDisabledWithReason ? targetProps : {}),\n  };\n\n  const menuItem = isLinkItem(item) ? (\n    <a\n      {...menuItemProps}\n      href={!disabled ? item.href : undefined}\n      target={getItemTarget(item)}\n      rel={item.external ? 'noopener noreferrer' : undefined}\n    >\n      <MenuItemContent item={item} disabled={disabled} />\n    </a>\n  ) : (\n    <span {...menuItemProps}>\n      <MenuItemContent item={item} disabled={disabled} />\n    </span>\n  );\n\n  const { position } = useDropdownContext();\n  const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';\n  return isDisabledWithReason ? (\n    <Tooltip content={item.disabledReason} position={tooltipPosition} className={styles['item-tooltip-wrapper']}>\n      {menuItem}\n      {descriptionEl}\n    </Tooltip>\n  ) : (\n    menuItem\n  );\n}\n\nconst MenuItemContent = ({ item, disabled }: { item: InternalItem | InternalCheckboxItem; disabled: boolean }) => {\n  const hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);\n  const hasExternal = isLinkItem(item) && item.external;\n  const isCheckbox = isCheckboxItem(item);\n  return (\n    <>\n      {isCheckbox && <MenuItemCheckmark checked={item.checked} disabled={disabled} />}\n      {hasIcon && (\n        <MenuItemIcon\n          name={item.iconName}\n          url={item.iconUrl}\n          svg={item.iconSvg}\n          alt={item.iconAlt}\n          badge={item.badge}\n        />\n      )}\n      {item.text}\n      {hasExternal && <ExternalIcon disabled={disabled} ariaLabel={item.externalIconAriaLabel} />}\n    </>\n  );\n};\n\nconst MenuItemIcon = (props: InternalIconProps) => (\n  <span className={styles.icon}>\n    <InternalIcon {...props} />\n  </span>\n);\n\n// Toggle has aria-hidden set because it's just used as a graphical element,\n// a11y attributes for the checkmark are communicated through the role and aria-checked state\n// of the menu element item.\nconst MenuItemCheckmark = ({ disabled, checked }: { disabled: boolean; checked: boolean }) => {\n  const checkmark = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"check\" />;\n  return (\n    <span\n      className={clsx(styles.icon, styles.checkmark, { [styles.disabled]: disabled })}\n      aria-hidden=\"true\"\n      style={{ visibility: checked ? 'visible' : 'hidden' }}\n    >\n      {checkmark}\n    </span>\n  );\n};\n\nconst ExternalIcon = ({ disabled, ariaLabel }: { disabled: boolean; ariaLabel?: string }) => {\n  const icon = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"external\" />;\n  return (\n    <span className={styles['external-icon']} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel}>\n      {icon}\n    </span>\n  );\n};\n\nexport default ItemElement;\n"]}

package/lib/internal/template/button-dropdown/item-element/styles.css.js

@@ -1,20 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "item-element": "awsui_item-element_93a1u_puqyz_145",
-  "disabled": "awsui_disabled_93a1u_puqyz_157",
-  "show-divider": "awsui_show-divider_93a1u_puqyz_164",
-  "highlighted": "awsui_highlighted_93a1u_puqyz_167",
-  "is-focused": "awsui_is-focused_93a1u_puqyz_182",
-  "menu-item": "awsui_menu-item_93a1u_puqyz_187",
-  "link-style": "awsui_link-style_93a1u_puqyz_199",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_puqyz_235",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_puqyz_243",
-  "has-category-header": "awsui_has-category-header_93a1u_puqyz_249",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_puqyz_249",
-  "has-checkmark": "awsui_has-checkmark_93a1u_puqyz_249",
-  "icon": "awsui_icon_93a1u_puqyz_253",
-  "checkmark": "awsui_checkmark_93a1u_puqyz_257",
-  "external-icon": "awsui_external-icon_93a1u_puqyz_264"
+  "item-element": "awsui_item-element_93a1u_stta8_145",
+  "disabled": "awsui_disabled_93a1u_stta8_157",
+  "show-divider": "awsui_show-divider_93a1u_stta8_164",
+  "highlighted": "awsui_highlighted_93a1u_stta8_167",
+  "is-focused": "awsui_is-focused_93a1u_stta8_182",
+  "visual-refresh": "awsui_visual-refresh_93a1u_stta8_185",
+  "menu-item": "awsui_menu-item_93a1u_stta8_189",
+  "link-style": "awsui_link-style_93a1u_stta8_201",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_stta8_237",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_stta8_245",
+  "has-category-header": "awsui_has-category-header_93a1u_stta8_251",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_stta8_251",
+  "has-checkmark": "awsui_has-checkmark_93a1u_stta8_251",
+  "icon": "awsui_icon_93a1u_stta8_255",
+  "checkmark": "awsui_checkmark_93a1u_stta8_259",
+  "external-icon": "awsui_external-icon_93a1u_stta8_266"
 };
   

package/lib/internal/template/button-dropdown/item-element/styles.scoped.css

@@ -142,65 +142,67 @@
 */
 /* 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_item-element_93a1u_puqyz_145:not(#\9) {
+.awsui_item-element_93a1u_stta8_145:not(#\9) {
   position: relative;
   z-index: 1;
-  border-block: var(--border-item-width-bjacxs, 1px) solid transparent;
-  border-inline: var(--border-item-width-bjacxs, 1px) solid transparent;
+  border-block: var(--border-item-width-acvlhx, 1px) solid transparent;
+  border-inline: var(--border-item-width-acvlhx, 1px) solid transparent;
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
-  color: var(--color-text-dropdown-item-default-o6jy8o, #16191f);
-  margin-block-start: calc(-1 * var(--border-width-field-9kmoac, 1px));
+  color: var(--color-text-dropdown-item-default-q1v4ei, #16191f);
+  margin-block-start: calc(-1 * var(--border-width-dropdown-qic2p4, 1px));
   cursor: pointer;
 }
-.awsui_item-element_93a1u_puqyz_145.awsui_disabled_93a1u_puqyz_157:not(#\9) {
+.awsui_item-element_93a1u_stta8_145.awsui_disabled_93a1u_stta8_157:not(#\9) {
   cursor: default;
-  color: var(--color-text-dropdown-item-disabled-gk1x2u, #aab7b8);
+  color: var(--color-text-dropdown-item-disabled-g8nr7t, #aab7b8);
 }
-.awsui_item-element_93a1u_puqyz_145:not(#\9):first-child {
+.awsui_item-element_93a1u_stta8_145:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_item-element_93a1u_puqyz_145.awsui_show-divider_93a1u_puqyz_164:not(#\9) {
-  border-block-end: var(--border-item-width-bjacxs, 1px) solid var(--color-border-dropdown-group-ze4esa, #eaeded);
+.awsui_item-element_93a1u_stta8_145.awsui_show-divider_93a1u_stta8_164:not(#\9) {
+  border-block-end: var(--border-item-width-acvlhx, 1px) solid var(--color-border-dropdown-group-dxavhr, #eaeded);
 }
-.awsui_item-element_93a1u_puqyz_145.awsui_highlighted_93a1u_puqyz_167:not(#\9) {
-  color: var(--color-text-dropdown-item-highlighted-xxoapj, #16191f);
+.awsui_item-element_93a1u_stta8_145.awsui_highlighted_93a1u_stta8_167:not(#\9) {
+  color: var(--color-text-dropdown-item-highlighted-c6ndhl, #16191f);
   z-index: 2;
-  background-color: var(--color-background-dropdown-item-hover-r5jqv1, #f2f3f3);
-  border-color: var(--color-border-dropdown-item-hover-69t7jr, #879596);
-  border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
+  background-color: var(--color-background-dropdown-item-hover-8liz26, #f2f3f3);
+  border-color: var(--color-border-dropdown-item-hover-4796ds, #879596);
+  border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
+  border-start-end-radius: var(--border-radius-item-xggxkd, 0px);
+  border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
+  border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_item-element_93a1u_puqyz_145.awsui_highlighted_93a1u_puqyz_167.awsui_disabled_93a1u_puqyz_157:not(#\9) {
-  color: var(--color-text-dropdown-item-dimmed-xe0faj, #aab7b8);
-  border-color: var(--color-border-dropdown-item-dimmed-hover-0rwxkv, #879596);
-  background-color: var(--color-background-dropdown-item-dimmed-dtqtu6, transparent);
+.awsui_item-element_93a1u_stta8_145.awsui_highlighted_93a1u_stta8_167.awsui_disabled_93a1u_stta8_157:not(#\9) {
+  color: var(--color-text-dropdown-item-dimmed-7akr3u, #aab7b8);
+  border-color: var(--color-border-dropdown-item-dimmed-hover-twsd8z, #879596);
+  background-color: var(--color-background-dropdown-item-dimmed-2hwvu9, transparent);
 }
-.awsui_item-element_93a1u_puqyz_145.awsui_highlighted_93a1u_puqyz_167.awsui_is-focused_93a1u_puqyz_182:not(#\9) {
-  border-color: var(--color-border-dropdown-item-focused-6wa092, #0073bb);
-  box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-kvz439, 1px) var(--color-border-item-focused-q68bgg, #0073bb);
+.awsui_item-element_93a1u_stta8_145.awsui_highlighted_93a1u_stta8_167.awsui_is-focused_93a1u_stta8_182:not(#\9) {
+  border-color: var(--color-border-dropdown-item-focused-am1kt4, #0073bb);
+}
+.awsui_item-element_93a1u_stta8_145.awsui_highlighted_93a1u_stta8_167.awsui_is-focused_93a1u_stta8_182:not(#\9):not(.awsui_visual-refresh_93a1u_stta8_185) {
+  box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-vx5mpq, #0073bb);
 }
 
-.awsui_menu-item_93a1u_puqyz_187:not(#\9) {
+.awsui_menu-item_93a1u_stta8_189:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
   align-items: flex-start;
-  padding-block: var(--space-xxs-y2432o, 4px);
-  padding-inline: var(--space-l-eenfqd, 20px);
+  padding-block: var(--space-xxs-jnczic, 4px);
+  padding-inline: var(--space-l-3cws6j, 20px);
   color: inherit;
   text-decoration: none;
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9) {
-  padding-block-end: calc(var(--space-xxs-y2432o, 4px) + var(--space-xxxs-gn3248, 2px));
+.awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9) {
+  padding-block-end: calc(var(--space-xxs-jnczic, 4px) + var(--space-xxxs-3w1kr2, 2px));
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
-  color: var(--color-text-link-default-8s05yu, #0073bb);
+  color: var(--color-text-link-default-kjmmv0, #0073bb);
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -208,61 +210,61 @@ 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-kd6k1u, 0ms);
+  transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9) {
+  .awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9) {
+.awsui-motion-disabled .awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):hover {
+.awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9):hover {
   cursor: pointer;
-  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
+  color: var(--color-text-link-hover-05b2tl, #0a4a74);
 }
-.awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):focus {
+.awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9):focus {
   outline: none;
 }
-.awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):active {
-  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
+.awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9):active {
+  color: var(--color-text-link-hover-05b2tl, #0a4a74);
 }
-.awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):active, .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):focus, .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):hover {
+.awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9):active, .awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9):focus, .awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199.awsui_current-breadcrumb_93a1u_puqyz_235: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);
-  color: var(--color-text-breadcrumb-current-e96tx0, #687078);
+.awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201.awsui_current-breadcrumb_93a1u_stta8_237:not(#\9) {
+  font-weight: var(--font-weight-button-hh0ago, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
+  color: var(--color-text-breadcrumb-current-j7hdo7, #687078);
   font-weight: 700;
   text-decoration: none;
 }
-.awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199.awsui_link-style-highlighted_93a1u_puqyz_243:not(#\9) {
-  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
+.awsui_menu-item_93a1u_stta8_189.awsui_link-style_93a1u_stta8_201.awsui_link-style-highlighted_93a1u_stta8_245:not(#\9) {
+  color: var(--color-text-link-hover-05b2tl, #0a4a74);
 }
-.awsui_menu-item_93a1u_puqyz_187:not(#\9):focus {
+.awsui_menu-item_93a1u_stta8_189:not(#\9):focus {
   outline: none;
 }
-.awsui_has-category-header_93a1u_puqyz_249 > .awsui_menu-item_93a1u_puqyz_187:not(#\9), .awsui_has-category-header_93a1u_puqyz_249 > .awsui_item-tooltip-wrapper_93a1u_puqyz_249 > .awsui_menu-item_93a1u_puqyz_187:not(#\9), .awsui_has-category-header_93a1u_puqyz_249:not(#\9):not(.awsui_has-checkmark_93a1u_puqyz_249) > span > .awsui_menu-item_93a1u_puqyz_187 {
-  padding-inline-start: calc(var(--space-xs-6dgkww, 8px) + var(--space-l-eenfqd, 20px));
+.awsui_has-category-header_93a1u_stta8_251 > .awsui_menu-item_93a1u_stta8_189:not(#\9), .awsui_has-category-header_93a1u_stta8_251 > .awsui_item-tooltip-wrapper_93a1u_stta8_251 > .awsui_menu-item_93a1u_stta8_189:not(#\9), .awsui_has-category-header_93a1u_stta8_251:not(#\9):not(.awsui_has-checkmark_93a1u_stta8_251) > span > .awsui_menu-item_93a1u_stta8_189 {
+  padding-inline-start: calc(var(--space-xs-kw7k3v, 8px) + var(--space-l-3cws6j, 20px));
 }
 
-.awsui_icon_93a1u_puqyz_253:not(#\9) {
-  padding-inline-end: var(--space-xxs-y2432o, 4px);
+.awsui_icon_93a1u_stta8_255:not(#\9) {
+  padding-inline-end: var(--space-xxs-jnczic, 4px);
   flex-shrink: 0;
 }
-.awsui_icon_93a1u_puqyz_253.awsui_checkmark_93a1u_puqyz_257:not(#\9) {
-  color: var(--color-text-status-info-1ypqr6, #0073bb);
+.awsui_icon_93a1u_stta8_255.awsui_checkmark_93a1u_stta8_259:not(#\9) {
+  color: var(--color-text-status-info-q591kt, #0073bb);
 }
-.awsui_icon_93a1u_puqyz_253.awsui_disabled_93a1u_puqyz_157:not(#\9) {
-  color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
+.awsui_icon_93a1u_stta8_255.awsui_disabled_93a1u_stta8_157:not(#\9) {
+  color: var(--color-text-interactive-disabled-i9f2yj, #aab7b8);
 }
 
-.awsui_external-icon_93a1u_puqyz_264:not(#\9) {
-  margin-inline-start: var(--space-xxs-y2432o, 4px);
+.awsui_external-icon_93a1u_stta8_266:not(#\9) {
+  margin-inline-start: var(--space-xxs-jnczic, 4px);
 }

package/lib/internal/template/button-dropdown/item-element/styles.selectors.js

@@ -2,20 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "item-element": "awsui_item-element_93a1u_puqyz_145",
-  "disabled": "awsui_disabled_93a1u_puqyz_157",
-  "show-divider": "awsui_show-divider_93a1u_puqyz_164",
-  "highlighted": "awsui_highlighted_93a1u_puqyz_167",
-  "is-focused": "awsui_is-focused_93a1u_puqyz_182",
-  "menu-item": "awsui_menu-item_93a1u_puqyz_187",
-  "link-style": "awsui_link-style_93a1u_puqyz_199",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_puqyz_235",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_puqyz_243",
-  "has-category-header": "awsui_has-category-header_93a1u_puqyz_249",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_puqyz_249",
-  "has-checkmark": "awsui_has-checkmark_93a1u_puqyz_249",
-  "icon": "awsui_icon_93a1u_puqyz_253",
-  "checkmark": "awsui_checkmark_93a1u_puqyz_257",
-  "external-icon": "awsui_external-icon_93a1u_puqyz_264"
+  "item-element": "awsui_item-element_93a1u_stta8_145",
+  "disabled": "awsui_disabled_93a1u_stta8_157",
+  "show-divider": "awsui_show-divider_93a1u_stta8_164",
+  "highlighted": "awsui_highlighted_93a1u_stta8_167",
+  "is-focused": "awsui_is-focused_93a1u_stta8_182",
+  "visual-refresh": "awsui_visual-refresh_93a1u_stta8_185",
+  "menu-item": "awsui_menu-item_93a1u_stta8_189",
+  "link-style": "awsui_link-style_93a1u_stta8_201",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_stta8_237",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_stta8_245",
+  "has-category-header": "awsui_has-category-header_93a1u_stta8_251",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_stta8_251",
+  "has-checkmark": "awsui_has-checkmark_93a1u_stta8_251",
+  "icon": "awsui_icon_93a1u_stta8_255",
+  "checkmark": "awsui_checkmark_93a1u_stta8_259",
+  "external-icon": "awsui_external-icon_93a1u_stta8_266"
 };
   

package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.css.js

@@ -1,10 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14cnr_19hcp_145",
-  "trigger": "awsui_trigger_14cnr_19hcp_179",
-  "dropdown": "awsui_dropdown_14cnr_19hcp_182",
-  "nowrap": "awsui_nowrap_14cnr_19hcp_193",
-  "open": "awsui_open_14cnr_19hcp_196"
+  "root": "awsui_root_14cnr_37aad_145",
+  "trigger": "awsui_trigger_14cnr_37aad_179",
+  "dropdown": "awsui_dropdown_14cnr_37aad_182",
+  "nowrap": "awsui_nowrap_14cnr_37aad_193",
+  "open": "awsui_open_14cnr_37aad_196"
 };
   

package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* 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_root_14cnr_19hcp_145:not(#\9) {
+.awsui_root_14cnr_37aad_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -166,25 +166,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   visibility: visible;
   white-space: normal;
   word-spacing: normal;
-  font-size: var(--font-size-body-m-6wxxs5, 14px);
-  line-height: var(--line-height-body-m-gw0130, 22px);
-  color: var(--color-text-body-default-agk00h, #16191f);
+  font-size: var(--font-size-body-m-vv54cm, 14px);
+  line-height: var(--line-height-body-m-bedeoh, 22px);
+  color: var(--color-text-body-default-1tki40, #16191f);
   font-weight: 400;
-  font-family: var(--font-family-base-pxn2ad, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-family: var(--font-family-base-8x5ngf, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   position: static;
   white-space: inherit;
   display: inline;
 }
-.awsui_root_14cnr_19hcp_145 > .awsui_trigger_14cnr_19hcp_179:not(#\9) {
+.awsui_root_14cnr_37aad_145 > .awsui_trigger_14cnr_37aad_179:not(#\9) {
   display: inline;
 }
-.awsui_root_14cnr_19hcp_145 > .awsui_dropdown_14cnr_19hcp_182:not(#\9) {
+.awsui_root_14cnr_37aad_145 > .awsui_dropdown_14cnr_37aad_182:not(#\9) {
   position: static;
   -webkit-user-select: none;
           user-select: none;
-  background-color: var(--color-background-dropdown-item-default-r1zm6a, #ffffff);
+  background-color: var(--color-background-dropdown-item-default-79esq0, #ffffff);
   outline: none;
   border-block-start: none;
   border-block-end: none;
@@ -192,9 +192,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   flex-direction: column;
   inline-size: 100%;
 }
-.awsui_root_14cnr_19hcp_145 > .awsui_dropdown_14cnr_19hcp_182.awsui_nowrap_14cnr_19hcp_193:not(#\9) {
+.awsui_root_14cnr_37aad_145 > .awsui_dropdown_14cnr_37aad_182.awsui_nowrap_14cnr_37aad_193:not(#\9) {
   white-space: nowrap;
 }
-.awsui_root_14cnr_19hcp_145 > .awsui_dropdown_14cnr_19hcp_182.awsui_open_14cnr_19hcp_196:not(#\9) {
+.awsui_root_14cnr_37aad_145 > .awsui_dropdown_14cnr_37aad_182.awsui_open_14cnr_37aad_196:not(#\9) {
   display: flex;
 }

package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.selectors.js

@@ -2,10 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14cnr_19hcp_145",
-  "trigger": "awsui_trigger_14cnr_19hcp_179",
-  "dropdown": "awsui_dropdown_14cnr_19hcp_182",
-  "nowrap": "awsui_nowrap_14cnr_19hcp_193",
-  "open": "awsui_open_14cnr_19hcp_196"
+  "root": "awsui_root_14cnr_37aad_145",
+  "trigger": "awsui_trigger_14cnr_37aad_179",
+  "dropdown": "awsui_dropdown_14cnr_37aad_182",
+  "nowrap": "awsui_nowrap_14cnr_37aad_193",
+  "open": "awsui_open_14cnr_37aad_196"
 };
   

package/lib/internal/template/button-dropdown/styles.css.js

@@ -1,26 +1,26 @@
 
     import './styles.scoped.css';
     export default {
-  "button-dropdown": "awsui_button-dropdown_sne0l_4w4gz_145",
-  "full-width": "awsui_full-width_sne0l_4w4gz_148",
-  "items-list-container": "awsui_items-list-container_sne0l_4w4gz_153",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_4w4gz_1",
-  "rotate": "awsui_rotate_sne0l_4w4gz_172",
-  "rotate-open": "awsui_rotate-open_sne0l_4w4gz_186",
-  "header": "awsui_header_sne0l_4w4gz_190",
-  "title": "awsui_title_sne0l_4w4gz_201",
-  "description": "awsui_description_sne0l_4w4gz_202",
-  "trigger-button": "awsui_trigger-button_sne0l_4w4gz_206",
-  "loading": "awsui_loading_sne0l_4w4gz_210",
-  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_4w4gz_214",
-  "trigger-item": "awsui_trigger-item_sne0l_4w4gz_217",
-  "has-no-text": "awsui_has-no-text_sne0l_4w4gz_226",
-  "visual-refresh": "awsui_visual-refresh_sne0l_4w4gz_229",
-  "variant-normal": "awsui_variant-normal_sne0l_4w4gz_240",
-  "split-trigger": "awsui_split-trigger_sne0l_4w4gz_214",
-  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_4w4gz_251",
-  "main-action-full-width": "awsui_main-action-full-width_sne0l_4w4gz_255",
-  "main-action-trigger-full-width": "awsui_main-action-trigger-full-width_sne0l_4w4gz_259",
-  "test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_4w4gz_263"
+  "button-dropdown": "awsui_button-dropdown_sne0l_116m2_145",
+  "full-width": "awsui_full-width_sne0l_116m2_148",
+  "items-list-container": "awsui_items-list-container_sne0l_116m2_153",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_116m2_1",
+  "rotate": "awsui_rotate_sne0l_116m2_172",
+  "rotate-open": "awsui_rotate-open_sne0l_116m2_186",
+  "header": "awsui_header_sne0l_116m2_190",
+  "title": "awsui_title_sne0l_116m2_201",
+  "description": "awsui_description_sne0l_116m2_202",
+  "trigger-button": "awsui_trigger-button_sne0l_116m2_206",
+  "loading": "awsui_loading_sne0l_116m2_210",
+  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_116m2_214",
+  "trigger-item": "awsui_trigger-item_sne0l_116m2_217",
+  "has-no-text": "awsui_has-no-text_sne0l_116m2_226",
+  "visual-refresh": "awsui_visual-refresh_sne0l_116m2_229",
+  "variant-normal": "awsui_variant-normal_sne0l_116m2_240",
+  "split-trigger": "awsui_split-trigger_sne0l_116m2_214",
+  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_116m2_251",
+  "main-action-full-width": "awsui_main-action-full-width_sne0l_116m2_255",
+  "main-action-trigger-full-width": "awsui_main-action-trigger-full-width_sne0l_116m2_259",
+  "test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_116m2_263"
 };