@cloudscape-design/components-themeable 3.0.1285 → 3.0.1287

package/lib/internal/template/button-dropdown/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ReactNode } from 'react';\n\nimport { GeneratedAnalyticsMetadataFragment } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { ExpandToViewport } from '../dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewport {\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * The following properties are supported across all types:\n   *\n   * - `type` (string) - The type of the item. Can be `action`, `group`, `checkbox`. Defaults to `action` if `items` undefined and `group` otherwise.\n   * - `id` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.\n   * - `text` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.\n   * - `lang` (string) - (Optional) The language of the item, provided as a BCP 47 language tag.\n   * - `disabled` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible.\n   * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context.\n   * - `description` (string) - additional data that will be passed to a `data-description` attribute. **Deprecated**, has no effect.\n   * - `ariaLabel` (string) - (Optional) - ARIA label of the item element.\n   * - `dataAttributes` (Record<string, string>) - (Optional) Custom data attributes for the item element. Attribute names are automatically prefixed with \"data-\". The \"testid\" key is reserved.\n   *\n   * ### action\n   *\n   * - `href` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.\n   * - `download` (boolean | string) - (Optional) Indicates that the link should be downloaded when clicked. Only works when `href` is also provided. If set to `true`, the browser will use the filename from the URL. If set to a string, that string will be used as the suggested filename.\n   * - `external` (boolean) - Marks a menu item as external by adding an icon after the menu item text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n   * - `externalIconAriaLabel` (string) - Adds an `aria-label` to the external icon.\n   * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n   * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * - `secondaryText` (string) - (Optional) Further information about the action that appears below the label.\n   * - `labelTag` (string) - (Optional) - A label tag that provides additional guidance, shown next to the label.\n   *\n   * ### checkbox\n   *\n   * When `type` is set to \"checkbox\", the values set to `href`, `external` and `externalIconAriaLabel` will be ignored.\n   *\n   * - `checked` (boolean) - Controls the state of the checkbox item.\n   * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n   * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * - `secondaryText` (string) - (Optional) Further information about the action that appears below the label.\n   * - `labelTag` (string) - (Optional) - A label tag that provides additional guidance, shown next to the label.\n   *\n   * ### group\n   *\n   * - `items` (ReadonlyArray<Item>) - an array of item objects. Items will be rendered as nested menu items but only for the first nesting level, multi-nesting is not supported.\n   * An item which belongs to nested group has the following properties: `id`, `text`, `disabled`, and `description`.\n   *\n   */\n  items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n\n  /**\n   * Specifies a render function to render custom options in the dropdown menu.\n   *\n   * The item inside the props has a different shape depending on its type:\n   *\n   *\n   * ### action\n   *\n   * - `type` ('action') - The item type.\n   * - `index` (number) - The item's position relative to its parent.\n   * - `option` (Item) - The original item configuration.\n   * - `highlighted` (boolean) - Whether the item is currently highlighted.\n   * - `disabled` (boolean) - Whether the item is disabled.\n   * - `parent` (GroupRenderItem | null) - The parent group item, if any.\n   *\n   * ### checkbox\n   *\n   * - `type` ('checkbox') - The item type.\n   * - `index` (number) - The item's position relative to its parent.\n   * - `option` (CheckboxItem) - The original item configuration.\n   * - `disabled` (boolean) - Whether the item is disabled.\n   * - `highlighted` (boolean) - Whether the item is currently highlighted.\n   * - `checked` (boolean) - Controls the state of the checkbox item.\n   * - `parent` (GroupRenderItem | null) - The parent group item, if any.\n   *\n   * ### group\n   *\n   * - `type` ('group') - The item type.\n   * - `index` (number) - The item's position in the list.\n   * - `option` (ItemGroup) - The original item configuration.\n   * - `disabled` (boolean) - Whether the item is disabled.\n   * - `highlighted` (boolean) - Whether the item is currently highlighted.\n   * - `expanded` (boolean) - Whether the group is expanded.\n   * - `expandDirection` ('vertical' | 'horizontal') - The direction in which the group expands.\n   *\n   * When providing a custom `renderItem` implementation, it fully replaces the default visual rendering and content for that item.\n   * The component still manages focus, keyboard interactions, and selection state, but it no longer applies its default item layout or typography.\n   *\n   * When returning `null`, the default styling will be applied.\n   *\n   * @awsuiSystem core\n   */\n  renderItem?: ButtonDropdownProps.ItemRenderer;\n\n  /**\n   * Determines whether the button dropdown is disabled. Users cannot interact with the control if it's disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the button dropdown is disabled (only when `disabled` is `true`).\n   * If provided, the disabled button becomes focusable.\n   */\n  disabledReason?: string;\n  /**\n   * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n   * It prevents clicks.\n   */\n  loading?: boolean;\n  /**\n   * Specifies the text that screen reader announces when the button dropdown is in a loading state.\n   */\n  loadingText?: string;\n  /** Determines the general styling of the button dropdown.\n   * * `primary` for primary buttons\n   * * `normal` for secondary buttons\n   * * `icon` for icon buttons\n   * * `inline-icon` for icon buttons with no outer padding\n   */\n  variant?: ButtonDropdownProps.Variant;\n  /**\n   * Controls expandability of the item groups.\n   */\n  expandableGroups?: boolean;\n  /**\n   * Adds `aria-label` to the button dropdown trigger.\n   * Use this to provide an accessible name for buttons that don't have visible text.\n   */\n  ariaLabel?: string;\n  /**\n   * Text displayed in the button dropdown trigger.\n   * @displayname text\n   */\n  children?: React.ReactNode;\n  /**\n   * Called when the user clicks on an item, and the item is not disabled.  The event detail object contains the id of the clicked item.\n   */\n  onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  /**\n   * Called when the user clicks on an item with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the item has an `href` set.\n   */\n  onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  /**\n   * A standalone action that is shown prior to the dropdown trigger.\n   * Use it with \"primary\" and \"normal\" variant only.\n   *\n   * Main action properties:\n   * * `text` (string) - Specifies the text shown in the main action.\n   * * `external` (boolean) - Marks the main action as external by adding an icon after the text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n   * * `externalIconAriaLabel` (string) - Adds an ARIA label to the external icon.\n   *\n   * The main action also supports the following properties of the [button](/components/button/?tabId=api) component:\n   * `ariaLabel`, `disabled`, `loading`, `loadingText`, `href`, `target`, `rel`, `download`, `iconAlt`, `iconName`, `iconUrl`, `iconSvg`, `onClick`, `onFollow`.\n   */\n  mainAction?: ButtonDropdownProps.MainAction;\n\n  /**\n   * Sets the button width to be 100% of the parent container width. Button content is centered.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Attributes to add to the native `button` element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeTriggerAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;\n\n  /**\n   * Attributes to add to the native element of the `mainAction`.\n   *\n   * Specify either `button` for a standard main action, or `anchor` if `html` is set.\n   *\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeMainActionAttributes?: {\n    button?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;\n    anchor?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;\n  };\n}\n\nexport namespace ButtonDropdownProps {\n  export type Variant = 'normal' | 'primary' | 'icon' | 'inline-icon';\n  export type ItemType = 'action' | 'group';\n\n  export interface ActionRenderItem {\n    type: 'action';\n    index: number;\n    option: Item;\n    highlighted: boolean;\n    disabled: boolean;\n    parent: GroupRenderItem | null;\n  }\n  export interface CheckboxRenderItem {\n    type: 'checkbox';\n    index: number;\n    option: CheckboxItem;\n    disabled: boolean;\n    highlighted: boolean;\n    checked: boolean;\n    parent: GroupRenderItem | null;\n  }\n  export interface GroupRenderItem {\n    type: 'group';\n    index: number;\n    option: ItemGroup;\n    disabled: boolean;\n    highlighted: boolean;\n    expanded: boolean;\n    expandDirection: 'vertical' | 'horizontal';\n  }\n\n  export type RenderItem = ActionRenderItem | CheckboxRenderItem | GroupRenderItem;\n  export type ItemRenderer = (props: { item: ButtonDropdownProps.RenderItem }) => ReactNode | null;\n\n  export interface MainAction {\n    text?: string;\n    ariaLabel?: string;\n    onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n    onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    href?: string;\n    target?: string;\n    rel?: string;\n    download?: boolean | string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n  }\n\n  export interface Item {\n    itemType?: ItemType;\n    id: string;\n    text: string;\n    secondaryText?: string;\n    ariaLabel?: string;\n    lang?: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    /**\n     * @deprecated Has no effect.\n     */\n    description?: string;\n    href?: string;\n    download?: boolean | string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    labelTag?: string;\n    dataAttributes?: Record<string, string>;\n  }\n\n  export interface CheckboxItem\n    extends Omit<ButtonDropdownProps.Item, 'href' | 'download' | 'external' | 'externalIconAriaLabel' | 'itemType'> {\n    itemType: 'checkbox';\n    checked: boolean;\n  }\n\n  export interface ItemGroup extends Omit<Item, 'id' | 'text' | 'itemType' | 'secondaryText' | 'labelTag'> {\n    itemType?: 'group';\n    id?: string;\n    text?: string;\n    items: Items;\n  }\n\n  export type ItemOrGroup = Item | CheckboxItem | ItemGroup;\n\n  export type Items = ReadonlyArray<ItemOrGroup>;\n\n  export interface ItemClickDetails extends BaseNavigationDetail {\n    id: string;\n    checked?: boolean;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the underlying native button. If a main action is defined this will focus that button.\n     */\n    focus(options?: FocusOptions): void;\n    /**\n     * Focuses the underlying native button for the dropdown.\n     */\n    focusDropdownTrigger(options?: FocusOptions): void;\n  }\n}\n\nexport interface ButtonDropdownSettings {\n  // this means whether action is required to make group expand\n  hasExpandableGroups: boolean;\n  // on smaller screens expandable groups are integrated into parent dropdown\n  // this changes keyboard navigation, highlight and activation behavior for parent dropdown\n  isInRestrictedView?: boolean;\n}\n\nexport interface HighlightProps {\n  targetItem: ButtonDropdownProps.ItemOrGroup | null;\n  isHighlighted: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n  isKeyboardHighlight: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n  isExpanded: (group: ButtonDropdownProps.ItemGroup) => boolean;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n}\n\nexport type GroupToggle = (item: ButtonDropdownProps.ItemGroup, event: React.SyntheticEvent) => void;\nexport type ItemActivate = (\n  item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem,\n  event: React.MouseEvent | React.KeyboardEvent\n) => void;\n\nexport interface CategoryProps extends HighlightProps {\n  index?: number;\n  item: ButtonDropdownProps.ItemGroup;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  disabled: boolean;\n  lastInDropdown: boolean;\n  expandToViewport?: boolean;\n  variant?: ItemListProps['variant'];\n  position?: string;\n  renderItem?: ButtonDropdownProps.ItemRenderer;\n}\n\nexport interface ItemListProps extends HighlightProps {\n  items: ButtonDropdownProps.Items;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  categoryDisabled?: boolean;\n  hasExpandableGroups?: boolean;\n  hasCategoryHeader?: boolean;\n  lastInDropdown: boolean;\n  expandToViewport?: boolean;\n  variant?: InternalButtonDropdownProps['variant'];\n  position?: string;\n  analyticsMetadataTransformer?: InternalButtonDropdownProps['analyticsMetadataTransformer'];\n  linkStyle?: boolean;\n  renderItem?: ButtonDropdownProps.ItemRenderer;\n  parentProps?: ButtonDropdownProps.GroupRenderItem;\n}\n\nexport interface LinkItem extends ButtonDropdownProps.Item {\n  href: string;\n}\n\nexport interface ItemProps {\n  index?: number;\n  item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem | LinkItem;\n  disabled: boolean;\n  highlighted: boolean;\n  onItemActivate: ItemActivate;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n  showDivider: boolean;\n  hasCategoryHeader: boolean;\n  isKeyboardHighlighted?: boolean;\n  variant?: ItemListProps['variant'];\n  position?: string;\n  analyticsMetadataTransformer?: InternalButtonDropdownProps['analyticsMetadataTransformer'];\n  linkStyle?: boolean;\n  renderItem?: ButtonDropdownProps.ItemRenderer;\n  parentProps?: ButtonDropdownProps.GroupRenderItem;\n}\n\nexport interface InternalItem extends ButtonDropdownProps.Item {\n  badge?: boolean;\n  /**\n   * Used in breadcrumb-group: indicates that this breadcrumb item is the current page\n   */\n  isCurrentBreadcrumb?: boolean;\n}\n\nexport interface InternalCheckboxItem extends ButtonDropdownProps.CheckboxItem {\n  badge?: boolean;\n}\n\ninterface InternalItemGroup extends Omit<ButtonDropdownProps.ItemGroup, 'items'> {\n  items: InternalItems;\n}\n\ntype InternalItems = ReadonlyArray<InternalItemOrGroup>;\n\nexport type InternalItemOrGroup = InternalItem | InternalCheckboxItem | InternalItemGroup;\n\nexport interface InternalButtonDropdownProps\n  extends Omit<ButtonDropdownProps, 'variant' | 'items'>,\n    InternalBaseComponentProps {\n  customTriggerBuilder?: (props: CustomTriggerProps) => React.ReactNode;\n  variant?: ButtonDropdownProps['variant'] | 'navigation';\n  items: ReadonlyArray<InternalItemOrGroup>;\n\n  /**\n   * Optional text that is displayed as the title at the top of the dropdown.\n   */\n  title?: string;\n\n  /**\n   * Optional text that is displayed underneath the title at the top of the dropdown.\n   */\n  description?: string;\n\n  /**\n   * Only show main action button as a regular, non-split button.\n   * That is needed so that button dropdown test utils wrapper can still be used.\n   */\n  showMainActionOnly?: boolean;\n\n  /**\n   * Determines that the dropdown should preferably be aligned to the center of the trigger\n   * instead of dropping left or right.\n   */\n  preferCenter?: boolean;\n\n  /**\n   * Determines whether simple items should be displayed with the link styles.\n   * Used in Breadcrumb group component for collapsed breadcrumbs\n   */\n  linkStyle?: boolean;\n\n  /**\n   * Determines whether the dropdown should take up the full available width.\n   * Used in Breadcrumb group component for collapsed breadcrumbs\n   */\n  fullWidth?: boolean;\n\n  analyticsMetadataTransformer?: (input: GeneratedAnalyticsMetadataFragment) => GeneratedAnalyticsMetadataFragment;\n\n  /**\n   * Position of the button dropdown inside a list of elements, for example a button group\n   */\n  position?: string;\n}\n\nexport interface CustomTriggerProps {\n  triggerRef: React.Ref<HTMLElement>;\n  testUtilsClass: string;\n  ariaLabel: string | undefined;\n  disabled: boolean;\n  disabledReason?: string;\n  isOpen: boolean;\n  onClick: () => void;\n  ariaExpanded: boolean;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ReactNode } from 'react';\n\nimport { GeneratedAnalyticsMetadataFragment } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { ExpandToViewport } from '../dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewport {\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * The following properties are supported across all types:\n   *\n   * - `type` (string) - The type of the item. Can be `action`, `group`, `checkbox`. Defaults to `action` if `items` undefined and `group` otherwise.\n   * - `id` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.\n   * - `text` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.\n   * - `lang` (string) - (Optional) The language of the item, provided as a BCP 47 language tag.\n   * - `disabled` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible.\n   * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context.\n   * - `description` (string) - additional data that will be passed to a `data-description` attribute. **Deprecated**, has no effect.\n   * - `ariaLabel` (string) - (Optional) - ARIA label of the item element.\n   * - `dataAttributes` (Record<string, string>) - (Optional) Custom data attributes for the item element. Attribute names are automatically prefixed with \"data-\". The \"testid\" key is reserved.\n   *\n   * ### action\n   *\n   * - `href` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.\n   * - `download` (boolean | string) - (Optional) Indicates that the link should be downloaded when clicked. Only works when `href` is also provided. If set to `true`, the browser will use the filename from the URL. If set to a string, that string will be used as the suggested filename.\n   * - `external` (boolean) - Marks a menu item as external by adding an icon after the menu item text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n   * - `externalIconAriaLabel` (string) - Adds an `aria-label` to the external icon.\n   * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n   * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * - `secondaryText` (string) - (Optional) Further information about the action that appears below the label.\n   * - `labelTag` (string) - (Optional) - A label tag that provides additional guidance, shown next to the label.\n   *\n   * ### checkbox\n   *\n   * When `type` is set to \"checkbox\", the values set to `href`, `external` and `externalIconAriaLabel` will be ignored.\n   *\n   * - `checked` (boolean) - Controls the state of the checkbox item.\n   * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`.\n   * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * - `secondaryText` (string) - (Optional) Further information about the action that appears below the label.\n   * - `labelTag` (string) - (Optional) - A label tag that provides additional guidance, shown next to the label.\n   *\n   * ### group\n   *\n   * - `items` (ReadonlyArray<Item>) - an array of item objects. Items will be rendered as nested menu items but only for the first nesting level, multi-nesting is not supported.\n   * An item which belongs to nested group has the following properties: `id`, `text`, `disabled`, and `description`.\n   *\n   */\n  items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n\n  /**\n   * Specifies a render function to render custom options in the dropdown menu.\n   *\n   * The item inside the props has a different shape depending on its type:\n   *\n   *\n   * ### action\n   *\n   * - `type` ('action') - The item type.\n   * - `index` (number) - The item's position relative to its parent.\n   * - `option` (Item) - The original item configuration.\n   * - `highlighted` (boolean) - Whether the item is currently highlighted.\n   * - `disabled` (boolean) - Whether the item is disabled.\n   * - `parent` (GroupRenderItem | null) - The parent group item, if any.\n   *\n   * ### checkbox\n   *\n   * - `type` ('checkbox') - The item type.\n   * - `index` (number) - The item's position relative to its parent.\n   * - `option` (CheckboxItem) - The original item configuration.\n   * - `disabled` (boolean) - Whether the item is disabled.\n   * - `highlighted` (boolean) - Whether the item is currently highlighted.\n   * - `checked` (boolean) - Controls the state of the checkbox item.\n   * - `parent` (GroupRenderItem | null) - The parent group item, if any.\n   *\n   * ### group\n   *\n   * - `type` ('group') - The item type.\n   * - `index` (number) - The item's position in the list.\n   * - `option` (ItemGroup) - The original item configuration.\n   * - `disabled` (boolean) - Whether the item is disabled.\n   * - `highlighted` (boolean) - Whether the item is currently highlighted.\n   * - `expanded` (boolean) - Whether the group is expanded.\n   * - `expandDirection` ('vertical' | 'horizontal') - The direction in which the group expands.\n   *\n   * When providing a custom `renderItem` implementation, it fully replaces the default visual rendering and content for that item.\n   * The component still manages focus, keyboard interactions, and selection state, but it no longer applies its default item layout or typography.\n   *\n   * When returning `null`, the default styling will be applied.\n   */\n  renderItem?: ButtonDropdownProps.ItemRenderer;\n\n  /**\n   * Determines whether the button dropdown is disabled. Users cannot interact with the control if it's disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Provides a reason why the button dropdown is disabled (only when `disabled` is `true`).\n   * If provided, the disabled button becomes focusable.\n   */\n  disabledReason?: string;\n  /**\n   * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n   * It prevents clicks.\n   */\n  loading?: boolean;\n  /**\n   * Specifies the text that screen reader announces when the button dropdown is in a loading state.\n   */\n  loadingText?: string;\n  /** Determines the general styling of the button dropdown.\n   * * `primary` for primary buttons\n   * * `normal` for secondary buttons\n   * * `icon` for icon buttons\n   * * `inline-icon` for icon buttons with no outer padding\n   */\n  variant?: ButtonDropdownProps.Variant;\n  /**\n   * Controls expandability of the item groups.\n   */\n  expandableGroups?: boolean;\n  /**\n   * Adds `aria-label` to the button dropdown trigger.\n   * Use this to provide an accessible name for buttons that don't have visible text.\n   */\n  ariaLabel?: string;\n  /**\n   * Text displayed in the button dropdown trigger.\n   * @displayname text\n   */\n  children?: React.ReactNode;\n  /**\n   * Called when the user clicks on an item, and the item is not disabled.  The event detail object contains the id of the clicked item.\n   */\n  onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  /**\n   * Called when the user clicks on an item with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the item has an `href` set.\n   */\n  onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  /**\n   * A standalone action that is shown prior to the dropdown trigger.\n   * Use it with \"primary\" and \"normal\" variant only.\n   *\n   * Main action properties:\n   * * `text` (string) - Specifies the text shown in the main action.\n   * * `external` (boolean) - Marks the main action as external by adding an icon after the text. The link will open in a new tab when clicked. Note that this only works when `href` is also provided.\n   * * `externalIconAriaLabel` (string) - Adds an ARIA label to the external icon.\n   *\n   * The main action also supports the following properties of the [button](/components/button/?tabId=api) component:\n   * `ariaLabel`, `disabled`, `loading`, `loadingText`, `href`, `target`, `rel`, `download`, `iconAlt`, `iconName`, `iconUrl`, `iconSvg`, `onClick`, `onFollow`.\n   */\n  mainAction?: ButtonDropdownProps.MainAction;\n\n  /**\n   * Sets the button width to be 100% of the parent container width. Button content is centered.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Attributes to add to the native `button` element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeTriggerAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;\n\n  /**\n   * Attributes to add to the native element of the `mainAction`.\n   *\n   * Specify either `button` for a standard main action, or `anchor` if `html` is set.\n   *\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeMainActionAttributes?: {\n    button?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;\n    anchor?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;\n  };\n}\n\nexport namespace ButtonDropdownProps {\n  export type Variant = 'normal' | 'primary' | 'icon' | 'inline-icon';\n  export type ItemType = 'action' | 'group';\n\n  export interface ActionRenderItem {\n    type: 'action';\n    index: number;\n    option: Item;\n    highlighted: boolean;\n    disabled: boolean;\n    parent: GroupRenderItem | null;\n  }\n  export interface CheckboxRenderItem {\n    type: 'checkbox';\n    index: number;\n    option: CheckboxItem;\n    disabled: boolean;\n    highlighted: boolean;\n    checked: boolean;\n    parent: GroupRenderItem | null;\n  }\n  export interface GroupRenderItem {\n    type: 'group';\n    index: number;\n    option: ItemGroup;\n    disabled: boolean;\n    highlighted: boolean;\n    expanded: boolean;\n    expandDirection: 'vertical' | 'horizontal';\n  }\n\n  export type RenderItem = ActionRenderItem | CheckboxRenderItem | GroupRenderItem;\n  export type ItemRenderer = (props: { item: ButtonDropdownProps.RenderItem }) => ReactNode | null;\n\n  export interface MainAction {\n    text?: string;\n    ariaLabel?: string;\n    onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n    onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    href?: string;\n    target?: string;\n    rel?: string;\n    download?: boolean | string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n  }\n\n  export interface Item {\n    itemType?: ItemType;\n    id: string;\n    text: string;\n    secondaryText?: string;\n    ariaLabel?: string;\n    lang?: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    /**\n     * @deprecated Has no effect.\n     */\n    description?: string;\n    href?: string;\n    download?: boolean | string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    labelTag?: string;\n    dataAttributes?: Record<string, string>;\n  }\n\n  export interface CheckboxItem\n    extends Omit<ButtonDropdownProps.Item, 'href' | 'download' | 'external' | 'externalIconAriaLabel' | 'itemType'> {\n    itemType: 'checkbox';\n    checked: boolean;\n  }\n\n  export interface ItemGroup extends Omit<Item, 'id' | 'text' | 'itemType' | 'secondaryText' | 'labelTag'> {\n    itemType?: 'group';\n    id?: string;\n    text?: string;\n    items: Items;\n  }\n\n  export type ItemOrGroup = Item | CheckboxItem | ItemGroup;\n\n  export type Items = ReadonlyArray<ItemOrGroup>;\n\n  export interface ItemClickDetails extends BaseNavigationDetail {\n    id: string;\n    checked?: boolean;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the underlying native button. If a main action is defined this will focus that button.\n     */\n    focus(options?: FocusOptions): void;\n    /**\n     * Focuses the underlying native button for the dropdown.\n     */\n    focusDropdownTrigger(options?: FocusOptions): void;\n  }\n}\n\nexport interface ButtonDropdownSettings {\n  // this means whether action is required to make group expand\n  hasExpandableGroups: boolean;\n  // on smaller screens expandable groups are integrated into parent dropdown\n  // this changes keyboard navigation, highlight and activation behavior for parent dropdown\n  isInRestrictedView?: boolean;\n}\n\nexport interface HighlightProps {\n  targetItem: ButtonDropdownProps.ItemOrGroup | null;\n  isHighlighted: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n  isKeyboardHighlight: (item: ButtonDropdownProps.ItemOrGroup) => boolean;\n  isExpanded: (group: ButtonDropdownProps.ItemGroup) => boolean;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n}\n\nexport type GroupToggle = (item: ButtonDropdownProps.ItemGroup, event: React.SyntheticEvent) => void;\nexport type ItemActivate = (\n  item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem,\n  event: React.MouseEvent | React.KeyboardEvent\n) => void;\n\nexport interface CategoryProps extends HighlightProps {\n  index?: number;\n  item: ButtonDropdownProps.ItemGroup;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  disabled: boolean;\n  lastInDropdown: boolean;\n  expandToViewport?: boolean;\n  variant?: ItemListProps['variant'];\n  position?: string;\n  renderItem?: ButtonDropdownProps.ItemRenderer;\n}\n\nexport interface ItemListProps extends HighlightProps {\n  items: ButtonDropdownProps.Items;\n  onGroupToggle: GroupToggle;\n  onItemActivate: ItemActivate;\n  categoryDisabled?: boolean;\n  hasExpandableGroups?: boolean;\n  hasCategoryHeader?: boolean;\n  lastInDropdown: boolean;\n  expandToViewport?: boolean;\n  variant?: InternalButtonDropdownProps['variant'];\n  position?: string;\n  analyticsMetadataTransformer?: InternalButtonDropdownProps['analyticsMetadataTransformer'];\n  linkStyle?: boolean;\n  renderItem?: ButtonDropdownProps.ItemRenderer;\n  parentProps?: ButtonDropdownProps.GroupRenderItem;\n}\n\nexport interface LinkItem extends ButtonDropdownProps.Item {\n  href: string;\n}\n\nexport interface ItemProps {\n  index?: number;\n  item: ButtonDropdownProps.Item | ButtonDropdownProps.CheckboxItem | LinkItem;\n  disabled: boolean;\n  highlighted: boolean;\n  onItemActivate: ItemActivate;\n  highlightItem: (item: ButtonDropdownProps.ItemOrGroup) => void;\n  showDivider: boolean;\n  hasCategoryHeader: boolean;\n  isKeyboardHighlighted?: boolean;\n  variant?: ItemListProps['variant'];\n  position?: string;\n  analyticsMetadataTransformer?: InternalButtonDropdownProps['analyticsMetadataTransformer'];\n  linkStyle?: boolean;\n  renderItem?: ButtonDropdownProps.ItemRenderer;\n  parentProps?: ButtonDropdownProps.GroupRenderItem;\n}\n\nexport interface InternalItem extends ButtonDropdownProps.Item {\n  badge?: boolean;\n  /**\n   * Used in breadcrumb-group: indicates that this breadcrumb item is the current page\n   */\n  isCurrentBreadcrumb?: boolean;\n}\n\nexport interface InternalCheckboxItem extends ButtonDropdownProps.CheckboxItem {\n  badge?: boolean;\n}\n\ninterface InternalItemGroup extends Omit<ButtonDropdownProps.ItemGroup, 'items'> {\n  items: InternalItems;\n}\n\ntype InternalItems = ReadonlyArray<InternalItemOrGroup>;\n\nexport type InternalItemOrGroup = InternalItem | InternalCheckboxItem | InternalItemGroup;\n\nexport interface InternalButtonDropdownProps\n  extends Omit<ButtonDropdownProps, 'variant' | 'items'>,\n    InternalBaseComponentProps {\n  customTriggerBuilder?: (props: CustomTriggerProps) => React.ReactNode;\n  variant?: ButtonDropdownProps['variant'] | 'navigation';\n  items: ReadonlyArray<InternalItemOrGroup>;\n\n  /**\n   * Optional text that is displayed as the title at the top of the dropdown.\n   */\n  title?: string;\n\n  /**\n   * Optional text that is displayed underneath the title at the top of the dropdown.\n   */\n  description?: string;\n\n  /**\n   * Only show main action button as a regular, non-split button.\n   * That is needed so that button dropdown test utils wrapper can still be used.\n   */\n  showMainActionOnly?: boolean;\n\n  /**\n   * Determines that the dropdown should preferably be aligned to the center of the trigger\n   * instead of dropping left or right.\n   */\n  preferCenter?: boolean;\n\n  /**\n   * Determines whether simple items should be displayed with the link styles.\n   * Used in Breadcrumb group component for collapsed breadcrumbs\n   */\n  linkStyle?: boolean;\n\n  /**\n   * Determines whether the dropdown should take up the full available width.\n   * Used in Breadcrumb group component for collapsed breadcrumbs\n   */\n  fullWidth?: boolean;\n\n  analyticsMetadataTransformer?: (input: GeneratedAnalyticsMetadataFragment) => GeneratedAnalyticsMetadataFragment;\n\n  /**\n   * Position of the button dropdown inside a list of elements, for example a button group\n   */\n  position?: string;\n}\n\nexport interface CustomTriggerProps {\n  triggerRef: React.Ref<HTMLElement>;\n  testUtilsClass: string;\n  ariaLabel: string | undefined;\n  disabled: boolean;\n  disabledReason?: string;\n  isOpen: boolean;\n  onClick: () => void;\n  ariaExpanded: boolean;\n}\n"]}

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

@@ -1,26 +1,26 @@
 
     import './styles.scoped.css';
     export default {
-  "item-element": "awsui_item-element_93a1u_1o2ka_145",
-  "no-content-styling": "awsui_no-content-styling_93a1u_1o2ka_157",
-  "disabled": "awsui_disabled_93a1u_1o2ka_162",
-  "show-divider": "awsui_show-divider_93a1u_1o2ka_169",
-  "highlighted": "awsui_highlighted_93a1u_1o2ka_172",
-  "is-focused": "awsui_is-focused_93a1u_1o2ka_187",
-  "visual-refresh": "awsui_visual-refresh_93a1u_1o2ka_190",
-  "menu-item": "awsui_menu-item_93a1u_1o2ka_194",
-  "link-style": "awsui_link-style_93a1u_1o2ka_211",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_1o2ka_247",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_1o2ka_255",
-  "has-category-header": "awsui_has-category-header_93a1u_1o2ka_261",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1o2ka_261",
-  "has-checkmark": "awsui_has-checkmark_93a1u_1o2ka_261",
-  "icon": "awsui_icon_93a1u_1o2ka_268",
-  "checkmark": "awsui_checkmark_93a1u_1o2ka_272",
-  "external-icon": "awsui_external-icon_93a1u_1o2ka_279",
-  "content-wrapper": "awsui_content-wrapper_93a1u_1o2ka_283",
-  "main-row": "awsui_main-row_93a1u_1o2ka_289",
-  "label-tag": "awsui_label-tag_93a1u_1o2ka_296",
-  "secondary-text": "awsui_secondary-text_93a1u_1o2ka_303"
+  "item-element": "awsui_item-element_93a1u_5qto2_145",
+  "no-content-styling": "awsui_no-content-styling_93a1u_5qto2_157",
+  "disabled": "awsui_disabled_93a1u_5qto2_162",
+  "show-divider": "awsui_show-divider_93a1u_5qto2_169",
+  "highlighted": "awsui_highlighted_93a1u_5qto2_172",
+  "is-focused": "awsui_is-focused_93a1u_5qto2_187",
+  "visual-refresh": "awsui_visual-refresh_93a1u_5qto2_190",
+  "menu-item": "awsui_menu-item_93a1u_5qto2_194",
+  "link-style": "awsui_link-style_93a1u_5qto2_211",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_5qto2_247",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_5qto2_255",
+  "has-category-header": "awsui_has-category-header_93a1u_5qto2_261",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_5qto2_261",
+  "has-checkmark": "awsui_has-checkmark_93a1u_5qto2_261",
+  "icon": "awsui_icon_93a1u_5qto2_268",
+  "checkmark": "awsui_checkmark_93a1u_5qto2_272",
+  "external-icon": "awsui_external-icon_93a1u_5qto2_279",
+  "content-wrapper": "awsui_content-wrapper_93a1u_5qto2_283",
+  "main-row": "awsui_main-row_93a1u_5qto2_289",
+  "label-tag": "awsui_label-tag_93a1u_5qto2_296",
+  "secondary-text": "awsui_secondary-text_93a1u_5qto2_303"
 };
   

package/lib/internal/template/button-dropdown/item-element/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_item-element_93a1u_1o2ka_145:not(#\9) {
+.awsui_item-element_93a1u_5qto2_145:not(#\9) {
   position: relative;
   z-index: 1;
   border-block: var(--border-item-width-acvlhx, 1px) solid transparent;
@@ -154,22 +154,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(-1 * var(--border-width-dropdown-qic2p4, 1px));
   cursor: pointer;
 }
-.awsui_item-element_93a1u_1o2ka_145.awsui_no-content-styling_93a1u_1o2ka_157:not(#\9) {
+.awsui_item-element_93a1u_5qto2_145.awsui_no-content-styling_93a1u_5qto2_157:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   color: var(--color-text-dropdown-item-default-a6mvc9, #16191f);
 }
-.awsui_item-element_93a1u_1o2ka_145.awsui_disabled_93a1u_1o2ka_162:not(#\9) {
+.awsui_item-element_93a1u_5qto2_145.awsui_disabled_93a1u_5qto2_162:not(#\9) {
   cursor: default;
   color: var(--color-text-dropdown-item-disabled-oysy8n, #aab7b8);
 }
-.awsui_item-element_93a1u_1o2ka_145:not(#\9):first-child {
+.awsui_item-element_93a1u_5qto2_145:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_item-element_93a1u_1o2ka_145.awsui_show-divider_93a1u_1o2ka_169:not(#\9) {
+.awsui_item-element_93a1u_5qto2_145.awsui_show-divider_93a1u_5qto2_169:not(#\9) {
   border-block-end: var(--border-item-width-acvlhx, 1px) solid var(--color-border-dropdown-group-dg9zg5, #eaeded);
 }
-.awsui_item-element_93a1u_1o2ka_145.awsui_highlighted_93a1u_1o2ka_172:not(#\9) {
+.awsui_item-element_93a1u_5qto2_145.awsui_highlighted_93a1u_5qto2_172:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-bchk26, #16191f);
   z-index: 2;
   background-color: var(--color-background-dropdown-item-hover-353r6f, #f2f3f3);
@@ -179,37 +179,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_item-element_93a1u_1o2ka_145.awsui_highlighted_93a1u_1o2ka_172.awsui_disabled_93a1u_1o2ka_162:not(#\9) {
+.awsui_item-element_93a1u_5qto2_145.awsui_highlighted_93a1u_5qto2_172.awsui_disabled_93a1u_5qto2_162:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-0xf8v3, #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_1o2ka_145.awsui_highlighted_93a1u_1o2ka_172.awsui_is-focused_93a1u_1o2ka_187:not(#\9) {
+.awsui_item-element_93a1u_5qto2_145.awsui_highlighted_93a1u_5qto2_172.awsui_is-focused_93a1u_5qto2_187:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-xty1zx, #0073bb);
 }
-.awsui_item-element_93a1u_1o2ka_145.awsui_highlighted_93a1u_1o2ka_172.awsui_is-focused_93a1u_1o2ka_187:not(#\9):not(.awsui_visual-refresh_93a1u_1o2ka_190) {
+.awsui_item-element_93a1u_5qto2_145.awsui_highlighted_93a1u_5qto2_172.awsui_is-focused_93a1u_5qto2_187:not(#\9):not(.awsui_visual-refresh_93a1u_5qto2_190) {
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
 
-.awsui_menu-item_93a1u_1o2ka_194:not(#\9) {
+.awsui_menu-item_93a1u_5qto2_194:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
   align-items: flex-start;
-  padding-block: var(--space-xxs-jnczic, 4px);
-  padding-inline: var(--space-l-3cws6j, 20px);
+  padding-block: var(--space-option-padding-vertical-uomfe1, 4px);
+  padding-inline: var(--space-option-padding-horizontal-kfszlb, 20px);
   color: inherit;
   text-decoration: none;
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_menu-item_93a1u_1o2ka_194.awsui_no-content-styling_93a1u_1o2ka_157:not(#\9) {
+.awsui_menu-item_93a1u_5qto2_194.awsui_no-content-styling_93a1u_5qto2_157:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   color: var(--color-text-dropdown-item-default-a6mvc9, #16191f);
 }
-.awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9) {
-  padding-block-end: calc(var(--space-xxs-jnczic, 4px) + var(--space-xxxs-3w1kr2, 2px));
+.awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9) {
+  padding-block-end: calc(var(--space-option-padding-vertical-uomfe1, 4px) + var(--space-xxxs-3w1kr2, 2px));
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
   color: var(--awsui-style-color-default-6b9ypa, var(--color-text-link-default-z7zuy8, #0073bb));
@@ -223,30 +223,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9) {
+  .awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9) {
+.awsui-motion-disabled .awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9):hover {
+.awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9):hover {
   cursor: pointer;
   color: var(--awsui-style-color-hover-6b9ypa, var(--color-text-link-hover-pqxtsy, #0a4a74));
 }
-.awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9):focus {
+.awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9):focus {
   outline: none;
 }
-.awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9):active {
+.awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9):active {
   color: var(--awsui-style-color-active-6b9ypa, var(--color-text-link-hover-pqxtsy, #0a4a74));
 }
-.awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9):active, .awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9):focus, .awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211:not(#\9):hover {
+.awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9):active, .awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9):focus, .awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211.awsui_current-breadcrumb_93a1u_1o2ka_247:not(#\9) {
+.awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211.awsui_current-breadcrumb_93a1u_5qto2_247: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);
@@ -254,63 +254,63 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: 700;
   text-decoration: none;
 }
-.awsui_menu-item_93a1u_1o2ka_194.awsui_link-style_93a1u_1o2ka_211.awsui_link-style-highlighted_93a1u_1o2ka_255:not(#\9) {
+.awsui_menu-item_93a1u_5qto2_194.awsui_link-style_93a1u_5qto2_211.awsui_link-style-highlighted_93a1u_5qto2_255:not(#\9) {
   color: var(--color-text-link-hover-pqxtsy, #0a4a74);
 }
-.awsui_menu-item_93a1u_1o2ka_194:not(#\9):focus {
+.awsui_menu-item_93a1u_5qto2_194:not(#\9):focus {
   outline: none;
 }
-.awsui_has-category-header_93a1u_1o2ka_261 > .awsui_menu-item_93a1u_1o2ka_194:not(#\9), .awsui_has-category-header_93a1u_1o2ka_261 > .awsui_item-tooltip-wrapper_93a1u_1o2ka_261 > .awsui_menu-item_93a1u_1o2ka_194:not(#\9), .awsui_has-category-header_93a1u_1o2ka_261:not(#\9):not(.awsui_has-checkmark_93a1u_1o2ka_261) > span > .awsui_menu-item_93a1u_1o2ka_194 {
-  padding-inline-start: calc(var(--space-xs-kw7k3v, 8px) + var(--space-l-3cws6j, 20px));
+.awsui_has-category-header_93a1u_5qto2_261 > .awsui_menu-item_93a1u_5qto2_194:not(#\9), .awsui_has-category-header_93a1u_5qto2_261 > .awsui_item-tooltip-wrapper_93a1u_5qto2_261 > .awsui_menu-item_93a1u_5qto2_194:not(#\9), .awsui_has-category-header_93a1u_5qto2_261:not(#\9):not(.awsui_has-checkmark_93a1u_5qto2_261) > span > .awsui_menu-item_93a1u_5qto2_194 {
+  padding-inline-start: calc(var(--space-xs-kw7k3v, 8px) + var(--space-option-padding-horizontal-kfszlb, 20px));
 }
-.awsui_has-category-header_93a1u_1o2ka_261 > .awsui_menu-item_93a1u_1o2ka_194.awsui_no-content-styling_93a1u_1o2ka_157:not(#\9), .awsui_has-category-header_93a1u_1o2ka_261 > .awsui_item-tooltip-wrapper_93a1u_1o2ka_261 > .awsui_menu-item_93a1u_1o2ka_194.awsui_no-content-styling_93a1u_1o2ka_157:not(#\9), .awsui_has-category-header_93a1u_1o2ka_261:not(#\9):not(.awsui_has-checkmark_93a1u_1o2ka_261) > span > .awsui_menu-item_93a1u_1o2ka_194.awsui_no-content-styling_93a1u_1o2ka_157 {
+.awsui_has-category-header_93a1u_5qto2_261 > .awsui_menu-item_93a1u_5qto2_194.awsui_no-content-styling_93a1u_5qto2_157:not(#\9), .awsui_has-category-header_93a1u_5qto2_261 > .awsui_item-tooltip-wrapper_93a1u_5qto2_261 > .awsui_menu-item_93a1u_5qto2_194.awsui_no-content-styling_93a1u_5qto2_157:not(#\9), .awsui_has-category-header_93a1u_5qto2_261:not(#\9):not(.awsui_has-checkmark_93a1u_5qto2_261) > span > .awsui_menu-item_93a1u_5qto2_194.awsui_no-content-styling_93a1u_5qto2_157 {
   padding-inline-start: 0;
 }
 
-.awsui_icon_93a1u_1o2ka_268:not(#\9) {
+.awsui_icon_93a1u_5qto2_268:not(#\9) {
   padding-inline-end: var(--space-xxs-jnczic, 4px);
   flex-shrink: 0;
 }
-.awsui_icon_93a1u_1o2ka_268.awsui_checkmark_93a1u_1o2ka_272:not(#\9) {
+.awsui_icon_93a1u_5qto2_268.awsui_checkmark_93a1u_5qto2_272:not(#\9) {
   color: var(--color-item-selected-2dv7ug, #0073bb);
 }
-.awsui_icon_93a1u_1o2ka_268.awsui_disabled_93a1u_1o2ka_162:not(#\9) {
+.awsui_icon_93a1u_5qto2_268.awsui_disabled_93a1u_5qto2_162:not(#\9) {
   color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
 }
 
-.awsui_external-icon_93a1u_1o2ka_279:not(#\9) {
+.awsui_external-icon_93a1u_5qto2_279:not(#\9) {
   margin-inline-start: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_content-wrapper_93a1u_1o2ka_283:not(#\9) {
+.awsui_content-wrapper_93a1u_5qto2_283:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 
-.awsui_main-row_93a1u_1o2ka_289:not(#\9) {
+.awsui_main-row_93a1u_5qto2_289:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--space-s-4a5hs8, 12px);
 }
 
-.awsui_label-tag_93a1u_1o2ka_296:not(#\9) {
+.awsui_label-tag_93a1u_5qto2_296:not(#\9) {
   color: var(--color-text-body-default-5qid0u, #16191f);
 }
-.awsui_label-tag_93a1u_1o2ka_296.awsui_disabled_93a1u_1o2ka_162:not(#\9) {
+.awsui_label-tag_93a1u_5qto2_296.awsui_disabled_93a1u_5qto2_162:not(#\9) {
   color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
 }
 
-.awsui_secondary-text_93a1u_1o2ka_303:not(#\9) {
+.awsui_secondary-text_93a1u_5qto2_303:not(#\9) {
   font-size: var(--font-size-body-s-psgqn2, 12px);
   line-height: var(--line-height-body-s-otgtsr, 16px);
   letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
   color: var(--color-text-dropdown-item-secondary-fi0yxi, #687078);
 }
-.awsui_secondary-text_93a1u_1o2ka_303.awsui_highlighted_93a1u_1o2ka_172:not(#\9) {
+.awsui_secondary-text_93a1u_5qto2_303.awsui_highlighted_93a1u_5qto2_172:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-bchk26, #16191f);
 }
-.awsui_secondary-text_93a1u_1o2ka_303.awsui_disabled_93a1u_1o2ka_162:not(#\9) {
+.awsui_secondary-text_93a1u_5qto2_303.awsui_disabled_93a1u_5qto2_162:not(#\9) {
   color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
 }

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

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "item-element": "awsui_item-element_93a1u_1o2ka_145",
-  "no-content-styling": "awsui_no-content-styling_93a1u_1o2ka_157",
-  "disabled": "awsui_disabled_93a1u_1o2ka_162",
-  "show-divider": "awsui_show-divider_93a1u_1o2ka_169",
-  "highlighted": "awsui_highlighted_93a1u_1o2ka_172",
-  "is-focused": "awsui_is-focused_93a1u_1o2ka_187",
-  "visual-refresh": "awsui_visual-refresh_93a1u_1o2ka_190",
-  "menu-item": "awsui_menu-item_93a1u_1o2ka_194",
-  "link-style": "awsui_link-style_93a1u_1o2ka_211",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_1o2ka_247",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_1o2ka_255",
-  "has-category-header": "awsui_has-category-header_93a1u_1o2ka_261",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1o2ka_261",
-  "has-checkmark": "awsui_has-checkmark_93a1u_1o2ka_261",
-  "icon": "awsui_icon_93a1u_1o2ka_268",
-  "checkmark": "awsui_checkmark_93a1u_1o2ka_272",
-  "external-icon": "awsui_external-icon_93a1u_1o2ka_279",
-  "content-wrapper": "awsui_content-wrapper_93a1u_1o2ka_283",
-  "main-row": "awsui_main-row_93a1u_1o2ka_289",
-  "label-tag": "awsui_label-tag_93a1u_1o2ka_296",
-  "secondary-text": "awsui_secondary-text_93a1u_1o2ka_303"
+  "item-element": "awsui_item-element_93a1u_5qto2_145",
+  "no-content-styling": "awsui_no-content-styling_93a1u_5qto2_157",
+  "disabled": "awsui_disabled_93a1u_5qto2_162",
+  "show-divider": "awsui_show-divider_93a1u_5qto2_169",
+  "highlighted": "awsui_highlighted_93a1u_5qto2_172",
+  "is-focused": "awsui_is-focused_93a1u_5qto2_187",
+  "visual-refresh": "awsui_visual-refresh_93a1u_5qto2_190",
+  "menu-item": "awsui_menu-item_93a1u_5qto2_194",
+  "link-style": "awsui_link-style_93a1u_5qto2_211",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_5qto2_247",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_5qto2_255",
+  "has-category-header": "awsui_has-category-header_93a1u_5qto2_261",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_5qto2_261",
+  "has-checkmark": "awsui_has-checkmark_93a1u_5qto2_261",
+  "icon": "awsui_icon_93a1u_5qto2_268",
+  "checkmark": "awsui_checkmark_93a1u_5qto2_272",
+  "external-icon": "awsui_external-icon_93a1u_5qto2_279",
+  "content-wrapper": "awsui_content-wrapper_93a1u_5qto2_283",
+  "main-row": "awsui_main-row_93a1u_5qto2_289",
+  "label-tag": "awsui_label-tag_93a1u_5qto2_296",
+  "secondary-text": "awsui_secondary-text_93a1u_5qto2_303"
 };
   

package/lib/internal/template/drawer/interfaces.d.ts

@@ -46,11 +46,10 @@ export interface NextDrawerProps extends DrawerProps {
     /**
      * Specifies the CSS positioning mode of the drawer, and supports the following options:
      * * `static` (default) - The drawer is positioned in the normal document flow.
-     * * `sticky` - The drawer sticks to its nearest scrolling ancestor. Only meaningful with `placement="top"` or `placement="bottom"`. Using `sticky` with `placement="start"` or `placement="end"` falls back to `static`.
+     * * `sticky` - The drawer sticks to its nearest scrolling ancestor. Only meaningful with `placement="top"` or `placement="bottom"`.
+     * Using `sticky` with `placement="start"` or `placement="end"` falls back to `static`.
      * * `absolute` - The drawer is positioned relative to its nearest positioned ancestor.
      * * `fixed` - The drawer is positioned relative to the viewport.
-     *
-     * @awsuiSystem core
      */
     position?: NextDrawerProps.Position;
     /**
@@ -59,8 +58,6 @@ export interface NextDrawerProps extends DrawerProps {
      * * `end` - (default) Anchored to the inline-end edge.
      * * `top` - Anchored to the top edge.
      * * `bottom` - Anchored to the bottom edge.
-     *
-     * @awsuiSystem core
      */
     placement?: NextDrawerProps.Placement;
     /**
@@ -71,8 +68,6 @@ export interface NextDrawerProps extends DrawerProps {
      * * `end` - Distance from the inline-end edge. Not applicable when `placement` is `"start"`.
      * * `top` - Distance from the top edge. Not applicable when `placement` is `"bottom"`.
      * * `bottom` - Distance from the bottom edge. Not applicable when `placement` is `"top"`.
-     *
-     * @awsuiSystem core
      */
     offset?: NextDrawerProps.Offset;
     /**
@@ -81,8 +76,6 @@ export interface NextDrawerProps extends DrawerProps {
      * * Supported properties:
      * * `top` - Distance from the top of the scrolling container.
      * * `bottom` - Distance from the bottom of the scrolling container.
-     *
-     * @awsuiSystem core
      */
     stickyOffset?: NextDrawerProps.StickyOffset;
     /**
@@ -90,8 +83,6 @@ export interface NextDrawerProps extends DrawerProps {
      * overlaps other positioned elements on the page.
      *
      * Applicable when using `position="sticky"`, `position="absolute"`, or `position="fixed"`.
-     *
-     * @awsuiSystem core
      */
     zIndex?: number;
 }

package/lib/internal/template/drawer/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,WAAW;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB;CACF;AAGD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC;IAEpC;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC;IAEhC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC;IAE5C;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IAElE,KAAY,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE3D,UAAiB,MAAM;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;IAED,UAAiB,YAAY;QAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,WAAW;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB;CACF;AAGD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC;IAEpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC;IAEhC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC;IAE5C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IAElE,KAAY,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAE3D,UAAiB,MAAM;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;IAED,UAAiB,YAAY;QAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;CACF"}

package/lib/internal/template/drawer/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface DrawerProps extends BaseComponentProps {\n  /**\n   * Header of the drawer.\n   *\n   * It should contain the only `h2` used in the drawer.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the drawer.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Renders the drawer in a loading state. We recommend that you also set a `i18nStrings.loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the drawer content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `loadingText` - The text that's displayed when the drawer is in a loading state.\n   * @i18n\n   */\n  i18nStrings?: DrawerProps.I18nStrings;\n\n  /**\n   * Actions for the header. Available only if you specify the `header` property.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Sticky footer content that remains visible at the bottom during scroll.\n   *\n   * Automatically becomes non-sticky when scrollable content area is too small\n   * to ensure content remains accessible (not covered by the footer).\n   */\n  footer?: React.ReactNode;\n}\n\nexport namespace DrawerProps {\n  export interface I18nStrings {\n    loadingText?: string;\n  }\n}\n\n// Props for a future release\nexport interface NextDrawerProps extends DrawerProps {\n  /**\n   * Specifies the CSS positioning mode of the drawer, and supports the following options:\n   * * `static` (default) - The drawer is positioned in the normal document flow.\n   * * `sticky` - The drawer sticks to its nearest scrolling ancestor. Only meaningful with `placement=\"top\"` or `placement=\"bottom\"`. Using `sticky` with `placement=\"start\"` or `placement=\"end\"` falls back to `static`.\n   * * `absolute` - The drawer is positioned relative to its nearest positioned ancestor.\n   * * `fixed` - The drawer is positioned relative to the viewport.\n   *\n   * @awsuiSystem core\n   */\n  position?: NextDrawerProps.Position;\n\n  /**\n   * Specifies which edge of its container the drawer is anchored to, and supports these options:\n   * * `start` - Anchored to the inline-start edge.\n   * * `end` - (default) Anchored to the inline-end edge.\n   * * `top` - Anchored to the top edge.\n   * * `bottom` - Anchored to the bottom edge.\n   *\n   * @awsuiSystem core\n   */\n  placement?: NextDrawerProps.Placement;\n\n  /**\n   * Specifies the distance in pixels between the drawer and the edges of its container.\n   * Applicable when using `position=\"absolute\"` or `position=\"fixed\"`.\n   * Supported properties:\n   * * `start` - Distance from the inline-start edge. Not applicable when `placement` is `\"end\"`.\n   * * `end` - Distance from the inline-end edge. Not applicable when `placement` is `\"start\"`.\n   * * `top` - Distance from the top edge. Not applicable when `placement` is `\"bottom\"`.\n   * * `bottom` - Distance from the bottom edge. Not applicable when `placement` is `\"top\"`.\n   *\n   * @awsuiSystem core\n   */\n  offset?: NextDrawerProps.Offset;\n\n  /**\n   * Specifies the distance in pixels from the top or bottom edge of the scrolling container\n   * at which the drawer sticks. Applicable only when using `position=\"sticky\"` with `placement=\"top\"` or `placement=\"bottom\"`.\n   * * Supported properties:\n   * * `top` - Distance from the top of the scrolling container.\n   * * `bottom` - Distance from the bottom of the scrolling container.\n   *\n   * @awsuiSystem core\n   */\n  stickyOffset?: NextDrawerProps.StickyOffset;\n\n  /**\n   * Sets the CSS `z-index` of the drawer. Use this to control stacking order when the drawer\n   * overlaps other positioned elements on the page.\n   *\n   * Applicable when using `position=\"sticky\"`, `position=\"absolute\"`, or `position=\"fixed\"`.\n   *\n   * @awsuiSystem core\n   */\n  zIndex?: number;\n}\n\nexport namespace NextDrawerProps {\n  export type Position = 'static' | 'sticky' | 'absolute' | 'fixed';\n\n  export type Placement = 'start' | 'end' | 'top' | 'bottom';\n\n  export interface Offset {\n    start?: number;\n    end?: number;\n    top?: number;\n    bottom?: number;\n  }\n\n  export interface StickyOffset {\n    top?: number;\n    bottom?: number;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface DrawerProps extends BaseComponentProps {\n  /**\n   * Header of the drawer.\n   *\n   * It should contain the only `h2` used in the drawer.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the drawer.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Renders the drawer in a loading state. We recommend that you also set a `i18nStrings.loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the drawer content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `loadingText` - The text that's displayed when the drawer is in a loading state.\n   * @i18n\n   */\n  i18nStrings?: DrawerProps.I18nStrings;\n\n  /**\n   * Actions for the header. Available only if you specify the `header` property.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Sticky footer content that remains visible at the bottom during scroll.\n   *\n   * Automatically becomes non-sticky when scrollable content area is too small\n   * to ensure content remains accessible (not covered by the footer).\n   */\n  footer?: React.ReactNode;\n}\n\nexport namespace DrawerProps {\n  export interface I18nStrings {\n    loadingText?: string;\n  }\n}\n\n// Props for a future release\nexport interface NextDrawerProps extends DrawerProps {\n  /**\n   * Specifies the CSS positioning mode of the drawer, and supports the following options:\n   * * `static` (default) - The drawer is positioned in the normal document flow.\n   * * `sticky` - The drawer sticks to its nearest scrolling ancestor. Only meaningful with `placement=\"top\"` or `placement=\"bottom\"`.\n   * Using `sticky` with `placement=\"start\"` or `placement=\"end\"` falls back to `static`.\n   * * `absolute` - The drawer is positioned relative to its nearest positioned ancestor.\n   * * `fixed` - The drawer is positioned relative to the viewport.\n   */\n  position?: NextDrawerProps.Position;\n\n  /**\n   * Specifies which edge of its container the drawer is anchored to, and supports these options:\n   * * `start` - Anchored to the inline-start edge.\n   * * `end` - (default) Anchored to the inline-end edge.\n   * * `top` - Anchored to the top edge.\n   * * `bottom` - Anchored to the bottom edge.\n   */\n  placement?: NextDrawerProps.Placement;\n\n  /**\n   * Specifies the distance in pixels between the drawer and the edges of its container.\n   * Applicable when using `position=\"absolute\"` or `position=\"fixed\"`.\n   * Supported properties:\n   * * `start` - Distance from the inline-start edge. Not applicable when `placement` is `\"end\"`.\n   * * `end` - Distance from the inline-end edge. Not applicable when `placement` is `\"start\"`.\n   * * `top` - Distance from the top edge. Not applicable when `placement` is `\"bottom\"`.\n   * * `bottom` - Distance from the bottom edge. Not applicable when `placement` is `\"top\"`.\n   */\n  offset?: NextDrawerProps.Offset;\n\n  /**\n   * Specifies the distance in pixels from the top or bottom edge of the scrolling container\n   * at which the drawer sticks. Applicable only when using `position=\"sticky\"` with `placement=\"top\"` or `placement=\"bottom\"`.\n   * * Supported properties:\n   * * `top` - Distance from the top of the scrolling container.\n   * * `bottom` - Distance from the bottom of the scrolling container.\n   */\n  stickyOffset?: NextDrawerProps.StickyOffset;\n\n  /**\n   * Sets the CSS `z-index` of the drawer. Use this to control stacking order when the drawer\n   * overlaps other positioned elements on the page.\n   *\n   * Applicable when using `position=\"sticky\"`, `position=\"absolute\"`, or `position=\"fixed\"`.\n   */\n  zIndex?: number;\n}\n\nexport namespace NextDrawerProps {\n  export type Position = 'static' | 'sticky' | 'absolute' | 'fixed';\n\n  export type Placement = 'start' | 'end' | 'top' | 'bottom';\n\n  export interface Offset {\n    start?: number;\n    end?: number;\n    top?: number;\n    bottom?: number;\n  }\n\n  export interface StickyOffset {\n    top?: number;\n    bottom?: number;\n  }\n}\n"]}

package/lib/internal/template/file-token-group/styles.css.js

@@ -1,28 +1,28 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_39ths_dhl4w_209",
-  "file-loading-overlay": "awsui_file-loading-overlay_39ths_dhl4w_241",
-  "file-loading-overlay-single-row": "awsui_file-loading-overlay-single-row_39ths_dhl4w_246",
-  "file-name-container": "awsui_file-name-container_39ths_dhl4w_250",
-  "file-option-name": "awsui_file-option-name_39ths_dhl4w_280",
-  "file-option-size": "awsui_file-option-size_39ths_dhl4w_281",
-  "file-option-last-modified": "awsui_file-option-last-modified_39ths_dhl4w_282",
-  "file-option": "awsui_file-option_39ths_dhl4w_280",
-  "file-option-thumbnail": "awsui_file-option-thumbnail_39ths_dhl4w_295",
-  "file-option-thumbnail-image": "awsui_file-option-thumbnail-image_39ths_dhl4w_299",
-  "file-option-metadata": "awsui_file-option-metadata_39ths_dhl4w_312",
-  "with-image": "awsui_with-image_39ths_dhl4w_315",
-  "single-row-loading": "awsui_single-row-loading_39ths_dhl4w_318",
-  "token": "awsui_token_39ths_dhl4w_322",
-  "token-grid": "awsui_token-grid_39ths_dhl4w_329",
-  "token-contains-image": "awsui_token-contains-image_39ths_dhl4w_338",
-  "token-box": "awsui_token-box_39ths_dhl4w_342",
-  "horizontal": "awsui_horizontal_39ths_dhl4w_361",
-  "error": "awsui_error_39ths_dhl4w_369",
-  "dismiss-button": "awsui_dismiss-button_39ths_dhl4w_373",
-  "warning": "awsui_warning_39ths_dhl4w_379",
-  "read-only": "awsui_read-only_39ths_dhl4w_389",
-  "loading": "awsui_loading_39ths_dhl4w_402"
+  "root": "awsui_root_39ths_1nma6_209",
+  "file-loading-overlay": "awsui_file-loading-overlay_39ths_1nma6_241",
+  "file-loading-overlay-single-row": "awsui_file-loading-overlay-single-row_39ths_1nma6_246",
+  "file-name-container": "awsui_file-name-container_39ths_1nma6_250",
+  "file-option-name": "awsui_file-option-name_39ths_1nma6_280",
+  "file-option-size": "awsui_file-option-size_39ths_1nma6_281",
+  "file-option-last-modified": "awsui_file-option-last-modified_39ths_1nma6_282",
+  "file-option": "awsui_file-option_39ths_1nma6_280",
+  "file-option-thumbnail": "awsui_file-option-thumbnail_39ths_1nma6_295",
+  "file-option-thumbnail-image": "awsui_file-option-thumbnail-image_39ths_1nma6_299",
+  "file-option-metadata": "awsui_file-option-metadata_39ths_1nma6_312",
+  "with-image": "awsui_with-image_39ths_1nma6_315",
+  "single-row-loading": "awsui_single-row-loading_39ths_1nma6_318",
+  "token": "awsui_token_39ths_1nma6_322",
+  "token-grid": "awsui_token-grid_39ths_1nma6_329",
+  "token-contains-image": "awsui_token-contains-image_39ths_1nma6_338",
+  "token-box": "awsui_token-box_39ths_1nma6_342",
+  "horizontal": "awsui_horizontal_39ths_1nma6_361",
+  "error": "awsui_error_39ths_1nma6_369",
+  "dismiss-button": "awsui_dismiss-button_39ths_1nma6_373",
+  "warning": "awsui_warning_39ths_1nma6_379",
+  "read-only": "awsui_read-only_39ths_1nma6_389",
+  "loading": "awsui_loading_39ths_1nma6_402"
 };