@cloudscape-design/components-themeable 3.0.951 → 3.0.953

package/lib/internal/template/button-group/interfaces.d.ts

@@ -38,6 +38,7 @@ export interface ButtonGroupProps extends BaseComponentProps {
      * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.
      * * `text` (string) - The name shown as a tooltip for this button.
      * * `disabled` (optional, boolean) - The disabled state indication for this button.
+     * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.
      * * `loading` (optional, boolean) - The loading state indication for this button.
      * * `loadingText` (optional, string) - The loading text announced to screen readers.
      * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).
@@ -52,6 +53,7 @@ export interface ButtonGroupProps extends BaseComponentProps {
      * * `pressed` (boolean) - The toggle button pressed state.
      * * `text` (string) - The name shown as a tooltip for this button.
      * * `disabled` (optional, boolean) - The disabled state indication for this button.
+     * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.
      * * `loading` (optional, boolean) - The loading state indication for this button.
      * * `loadingText` (optional, string) - The loading text announced to screen readers.
      * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).
@@ -75,6 +77,7 @@ export interface ButtonGroupProps extends BaseComponentProps {
      * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.
      * * `text` (string) - The name of the menu button shown as a tooltip.
      * * `disabled` (optional, boolean) - The disabled state indication for the menu button.
+     * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.
      * * `loading` (optional, boolean) - The loading state indication for the menu button.
      * * `loadingText` (optional, string) - The loading text announced to screen readers.
      * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.
@@ -105,6 +108,7 @@ export declare namespace ButtonGroupProps {
         id: string;
         text: string;
         disabled?: boolean;
+        disabledReason?: string;
         loading?: boolean;
         loadingText?: string;
         iconName?: IconProps.Name;
@@ -119,6 +123,7 @@ export declare namespace ButtonGroupProps {
         text: string;
         pressed: boolean;
         disabled?: boolean;
+        disabledReason?: string;
         loading?: boolean;
         loadingText?: string;
         iconName?: IconProps.Name;
@@ -142,6 +147,7 @@ export declare namespace ButtonGroupProps {
         id: string;
         text: string;
         disabled?: boolean;
+        disabledReason?: string;
         loading?: boolean;
         loadingText?: string;
         items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;

package/lib/internal/template/button-group/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/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 { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n  /**\n   * Adds `aria-label` to the button group toolbar element.\n   * Use this to provide a unique accessible name for each button group on the page.\n   */\n  ariaLabel?: string;\n  /**\n   * Determines the general styling of the button dropdown.\n   * * `icon` for icon buttons.\n   */\n  variant: ButtonGroupProps.Variant;\n  /**\n   * Use this property to determine dropdown placement strategy for all menu dropdown items.\n   *\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  dropdownExpandToViewport?: boolean;\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * ### icon-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   *\n   * ### icon-toggle-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `pressed` (boolean) - The toggle button pressed state.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n   * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n   * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n   *\n   * * ### file-input\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onFilesChange`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `accept` (optional, string) - Specifies the native file input `accept` attribute to describe the allow-list of file types.\n   * * `multiple` (optional, string) - Specifies the native file input `multiple` attribute to allow users entering more than one file.\n   *\n   * ### menu-dropdown\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n   * * `loading` (optional, boolean) - The loading state indication for the menu button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n   *\n   * ### group\n   *\n   * * `text` (string) - The name of the group rendered as ARIA label for this group.\n   * * `items` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n   */\n  items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\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?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  /**\n   * Called when the user uploads files. The event detail object contains the id and files from the file input item.\n   */\n  onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;\n}\n\nexport interface InternalButtonGroupProps\n  extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>,\n    InternalBaseComponentProps {}\n\nexport namespace ButtonGroupProps {\n  export type Variant = 'icon';\n\n  export type ItemOrGroup = Item | Group;\n  export type Item = IconButton | IconToggleButton | IconFileInput | MenuDropdown;\n\n  export interface IconButton {\n    type: 'icon-button';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconAlt?: string;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconToggleButton {\n    type: 'icon-toggle-button';\n    id: string;\n    text: string;\n    pressed: boolean;\n    disabled?: boolean;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    pressedIconName?: IconProps.Name;\n    pressedIconUrl?: string;\n    pressedIconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n    pressedPopoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconFileInput {\n    type: 'icon-file-input';\n    id: string;\n    text: string;\n    accept?: string;\n    multiple?: boolean;\n  }\n\n  export interface MenuDropdown {\n    type: 'menu-dropdown';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    loading?: boolean;\n    loadingText?: string;\n    items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n  }\n\n  export interface Group {\n    type: 'group';\n    text: string;\n    items: ReadonlyArray<ButtonGroupProps.Item>;\n  }\n\n  export interface ItemClickDetails {\n    id: string;\n    pressed?: boolean;\n    checked?: boolean;\n  }\n\n  export interface FilesChangeDetails {\n    id: string;\n    files: File[];\n  }\n\n  export interface Ref {\n    /**\n     * Focuses button group item by id.\n     */\n    focus(itemId: string): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/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 { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n  /**\n   * Adds `aria-label` to the button group toolbar element.\n   * Use this to provide a unique accessible name for each button group on the page.\n   */\n  ariaLabel?: string;\n  /**\n   * Determines the general styling of the button dropdown.\n   * * `icon` for icon buttons.\n   */\n  variant: ButtonGroupProps.Variant;\n  /**\n   * Use this property to determine dropdown placement strategy for all menu dropdown items.\n   *\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  dropdownExpandToViewport?: boolean;\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * ### icon-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   *\n   * ### icon-toggle-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `pressed` (boolean) - The toggle button pressed state.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n   * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n   * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n   *\n   * * ### file-input\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onFilesChange`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `accept` (optional, string) - Specifies the native file input `accept` attribute to describe the allow-list of file types.\n   * * `multiple` (optional, string) - Specifies the native file input `multiple` attribute to allow users entering more than one file.\n   *\n   * ### menu-dropdown\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for the menu button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n   *\n   * ### group\n   *\n   * * `text` (string) - The name of the group rendered as ARIA label for this group.\n   * * `items` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n   */\n  items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\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?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  /**\n   * Called when the user uploads files. The event detail object contains the id and files from the file input item.\n   */\n  onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;\n}\n\nexport interface InternalButtonGroupProps\n  extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>,\n    InternalBaseComponentProps {}\n\nexport namespace ButtonGroupProps {\n  export type Variant = 'icon';\n\n  export type ItemOrGroup = Item | Group;\n  export type Item = IconButton | IconToggleButton | IconFileInput | MenuDropdown;\n\n  export interface IconButton {\n    type: 'icon-button';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconAlt?: string;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconToggleButton {\n    type: 'icon-toggle-button';\n    id: string;\n    text: string;\n    pressed: boolean;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    pressedIconName?: IconProps.Name;\n    pressedIconUrl?: string;\n    pressedIconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n    pressedPopoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconFileInput {\n    type: 'icon-file-input';\n    id: string;\n    text: string;\n    accept?: string;\n    multiple?: boolean;\n  }\n\n  export interface MenuDropdown {\n    type: 'menu-dropdown';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n  }\n\n  export interface Group {\n    type: 'group';\n    text: string;\n    items: ReadonlyArray<ButtonGroupProps.Item>;\n  }\n\n  export interface ItemClickDetails {\n    id: string;\n    pressed?: boolean;\n    checked?: boolean;\n  }\n\n  export interface FilesChangeDetails {\n    id: string;\n    files: File[];\n  }\n\n  export interface Ref {\n    /**\n     * Focuses button group item by id.\n     */\n    focus(itemId: string): void;\n  }\n}\n"]}

package/lib/internal/template/button-group/menu-dropdown-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAuB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,UAAU,qBAAqB;IAC7B,IAAI,EAAE,gBAAgB,CAAC,YAAY,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,uGAkDrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"menu-dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAuB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,UAAU,qBAAqB;IAC7B,IAAI,EAAE,gBAAgB,CAAC,YAAY,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,uGAmDrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/internal/template/button-group/menu-dropdown-item.js

@@ -14,7 +14,7 @@ const MenuDropdownItem = React.forwardRef(({ item, showTooltip, onItemClick, onT
     };
     return (React.createElement(ButtonDropdown, { ref: ref, variant: "icon", items: item.items, onItemClick: onClickHandler, expandToViewport: expandToViewport, ariaLabel: item.text, className: testUtilStyles['button-group-item'], "data-testid": item.id, customTriggerBuilder: ({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement("div", { ref: containerRef },
             !isOpen && showTooltip && !item.disabled && !item.loading && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']), onDismiss: onTooltipDismiss })),
-            React.createElement(InternalButton, { ref: triggerRef, variant: "icon", ariaLabel: ariaLabel, "data-itemid": item.id, ariaExpanded: ariaExpanded, className: clsx(testUtilStyles.item, testUtilsClass), iconName: "ellipsis", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, onClick: onClick, __title: "" }))) }));
+            React.createElement(InternalButton, { ref: triggerRef, variant: "icon", ariaLabel: ariaLabel, "data-itemid": item.id, ariaExpanded: ariaExpanded, className: clsx(testUtilStyles.item, testUtilsClass), iconName: "ellipsis", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, disabledReason: item.disabledReason, onClick: onClick, __title: "" }))) }));
 });
 export default MenuDropdownItem;
 //# sourceMappingURL=menu-dropdown-item.js.map

package/lib/internal/template/button-group/menu-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAyB,EAC7F,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAClG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAC/E,SAAS,EAAE,gBAAgB,GAC3B,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n  item: ButtonGroupProps.MenuDropdown;\n  showTooltip: boolean;\n  onTooltipDismiss: () => void;\n  onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n  (\n    { item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport }: MenuDropdownItemProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n      fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);\n    };\n\n    return (\n      <ButtonDropdown\n        ref={ref}\n        variant=\"icon\"\n        items={item.items}\n        onItemClick={onClickHandler}\n        expandToViewport={expandToViewport}\n        ariaLabel={item.text}\n        className={testUtilStyles['button-group-item']}\n        data-testid={item.id}\n        customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n          <div ref={containerRef}>\n            {!isOpen && showTooltip && !item.disabled && !item.loading && (\n              <Tooltip\n                trackRef={containerRef}\n                trackKey={item.id}\n                value={item.text}\n                className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n                onDismiss={onTooltipDismiss}\n              />\n            )}\n            <InternalButton\n              ref={triggerRef}\n              variant=\"icon\"\n              ariaLabel={ariaLabel}\n              data-itemid={item.id}\n              ariaExpanded={ariaExpanded}\n              className={clsx(testUtilStyles.item, testUtilsClass)}\n              iconName=\"ellipsis\"\n              loading={item.loading}\n              loadingText={item.loadingText}\n              disabled={item.disabled}\n              onClick={onClick}\n              __title=\"\"\n            />\n          </div>\n        )}\n      />\n    );\n  }\n);\n\nexport default MenuDropdownItem;\n"]}
+{"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAyB,EAC7F,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IAClG,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,EAC/E,SAAS,EAAE,gBAAgB,GAC3B,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n  item: ButtonGroupProps.MenuDropdown;\n  showTooltip: boolean;\n  onTooltipDismiss: () => void;\n  onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n  (\n    { item, showTooltip, onItemClick, onTooltipDismiss, expandToViewport }: MenuDropdownItemProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n      fireCancelableEvent(onItemClick, { id: event.detail.id, checked: event.detail.checked }, event);\n    };\n\n    return (\n      <ButtonDropdown\n        ref={ref}\n        variant=\"icon\"\n        items={item.items}\n        onItemClick={onClickHandler}\n        expandToViewport={expandToViewport}\n        ariaLabel={item.text}\n        className={testUtilStyles['button-group-item']}\n        data-testid={item.id}\n        customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n          <div ref={containerRef}>\n            {!isOpen && showTooltip && !item.disabled && !item.loading && (\n              <Tooltip\n                trackRef={containerRef}\n                trackKey={item.id}\n                value={item.text}\n                className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n                onDismiss={onTooltipDismiss}\n              />\n            )}\n            <InternalButton\n              ref={triggerRef}\n              variant=\"icon\"\n              ariaLabel={ariaLabel}\n              data-itemid={item.id}\n              ariaExpanded={ariaExpanded}\n              className={clsx(testUtilStyles.item, testUtilsClass)}\n              iconName=\"ellipsis\"\n              loading={item.loading}\n              loadingText={item.loadingText}\n              disabled={item.disabled}\n              disabledReason={item.disabledReason}\n              onClick={onClick}\n              __title=\"\"\n            />\n          </div>\n        )}\n      />\n    );\n  }\n);\n\nexport default MenuDropdownItem;\n"]}

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -248,6 +248,7 @@
   --color-background-slider-warning-pressed-bnqgti:#906806;
   --color-background-status-error-ljmwh5:#fdf3f1;
   --color-background-status-info-zgt1yi:#f1faff;
+  --color-background-dialog-738f4h:#f1faff;
   --color-background-status-success-igaq7v:#f2f8f0;
   --color-background-status-warning-bqz9of:#fffef0;
   --color-background-table-header-1ikpca:#fafafa;
@@ -268,6 +269,7 @@
   --color-border-button-normal-disabled-pr85vz:#d5dbdb;
   --color-text-button-normal-disabled-09fdau:#879596;
   --color-border-button-normal-hover-eyyshk:#16191f;
+  --color-text-button-icon-disabled-lqnh5i:#879596;
   --color-border-button-primary-disabled-yzfy0b:#d5dbdb;
   --color-text-button-primary-disabled-6emjo4:#879596;
   --color-border-calendar-grid-3f7bvh:#eaeded;
@@ -313,6 +315,7 @@
   --color-border-status-info-7kw04i:#0073bb;
   --color-border-status-success-acmcj0:#1d8102;
   --color-border-status-warning-wkps52:#906806;
+  --color-border-dialog-a8e3bh:#0073bb;
   --color-border-divider-interactive-default-f75ypy:#687078;
   --color-border-tabs-divider-x9swcr:#aab7b8;
   --color-border-tabs-shadow-eb3y7s:#eaeded;
@@ -510,8 +513,11 @@
   --border-link-focus-ring-outline-bptw2p:5px auto Highlight;
   --border-link-focus-ring-shadow-spread-yrkso1:0px;
   --border-width-alert-i75nxu:1px;
+  --border-width-button-2u0zo4:1px;
+  --border-width-dropdown-jbel12:1px;
   --border-width-field-9kmoac:1px;
   --border-width-popover-ymjvav:1px;
+  --border-width-token-k07qn1:1px;
   --motion-duration-extra-slow-f38nn3:270ms;
   --motion-duration-fast-ayppw9:90ms;
   --motion-duration-moderate-pycjrk:135ms;
@@ -889,6 +895,7 @@
     --color-background-slider-warning-pressed-bnqgti:#fbd332;
     --color-background-status-error-ljmwh5:#270a11;
     --color-background-status-info-zgt1yi:#12293b;
+    --color-background-dialog-738f4h:#12293b;
     --color-background-status-success-igaq7v:#172211;
     --color-background-status-warning-bqz9of:#191100;
     --color-background-table-header-1ikpca:#21252c;
@@ -935,6 +942,7 @@
     --color-border-segment-hover-2w1whe:#ffffff;
     --color-border-status-info-7kw04i:#00a1c9;
     --color-border-status-warning-wkps52:#fbd332;
+    --color-border-dialog-a8e3bh:#00a1c9;
     --color-border-tabs-divider-x9swcr:#414750;
     --color-border-tabs-shadow-eb3y7s:rgba(0, 0, 0, 0.3);
     --color-border-tabs-underline-3q3di9:#fafafa;
@@ -1203,6 +1211,7 @@
   --color-background-slider-warning-pressed-bnqgti:#fbd332;
   --color-background-status-error-ljmwh5:#270a11;
   --color-background-status-info-zgt1yi:#12293b;
+  --color-background-dialog-738f4h:#12293b;
   --color-background-status-success-igaq7v:#172211;
   --color-background-status-warning-bqz9of:#191100;
   --color-background-table-header-1ikpca:#21252c;
@@ -1249,6 +1258,7 @@
   --color-border-segment-hover-2w1whe:#ffffff;
   --color-border-status-info-7kw04i:#00a1c9;
   --color-border-status-warning-wkps52:#fbd332;
+  --color-border-dialog-a8e3bh:#00a1c9;
   --color-border-tabs-divider-x9swcr:#414750;
   --color-border-tabs-shadow-eb3y7s:rgba(0, 0, 0, 0.3);
   --color-border-tabs-underline-3q3di9:#fafafa;
@@ -1553,6 +1563,7 @@
   --color-background-slider-warning-pressed-bnqgti:#855900;
   --color-background-status-error-ljmwh5:#fff5f5;
   --color-background-status-info-zgt1yi:#f0fbff;
+  --color-background-dialog-738f4h:#f0fbff;
   --color-background-status-success-igaq7v:#effff1;
   --color-background-table-header-1ikpca:#ffffff;
   --color-background-tiles-disabled-c21opp:#ebebf0;
@@ -1568,6 +1579,7 @@
   --color-border-button-normal-disabled-pr85vz:#b4b4bb;
   --color-text-button-normal-disabled-09fdau:#8c8c94;
   --color-border-button-normal-hover-eyyshk:#002b66;
+  --color-text-button-icon-disabled-lqnh5i:#8c8c94;
   --color-border-button-primary-disabled-yzfy0b:#ebebf0;
   --color-text-button-primary-disabled-6emjo4:#8c8c94;
   --color-border-calendar-grid-3f7bvh:transparent;
@@ -1613,6 +1625,7 @@
   --color-border-status-info-7kw04i:#006ce0;
   --color-border-status-success-acmcj0:#00802f;
   --color-border-status-warning-wkps52:#855900;
+  --color-border-dialog-a8e3bh:#006ce0;
   --color-border-divider-interactive-default-f75ypy:#8c8c94;
   --color-border-tabs-divider-x9swcr:#c6c6cd;
   --color-border-tabs-shadow-eb3y7s:rgba(15, 20, 26, 0.12);
@@ -1776,8 +1789,11 @@
   --border-link-focus-ring-outline-bptw2p:0;
   --border-link-focus-ring-shadow-spread-yrkso1:2px;
   --border-width-alert-i75nxu:2px;
+  --border-width-button-2u0zo4:2px;
+  --border-width-dropdown-jbel12:2px;
   --border-width-field-9kmoac:2px;
   --border-width-popover-ymjvav:2px;
+  --border-width-token-k07qn1:2px;
   --motion-duration-refresh-only-fast-ww2eh4:115ms;
   --motion-duration-refresh-only-medium-kd6k1u:165ms;
   --motion-duration-refresh-only-slow-ov3t11:250ms;
@@ -1923,6 +1939,7 @@
     --color-background-slider-warning-pressed-bnqgti:#fbd332;
     --color-background-status-error-ljmwh5:#1f0000;
     --color-background-status-info-zgt1yi:#001129;
+    --color-background-dialog-738f4h:#001129;
     --color-background-status-success-igaq7v:#001401;
     --color-background-table-header-1ikpca:#161d26;
     --color-background-tiles-disabled-c21opp:#1b232d;
@@ -1971,6 +1988,7 @@
     --color-border-status-info-7kw04i:#42b4ff;
     --color-border-status-success-acmcj0:#2bb534;
     --color-border-status-warning-wkps52:#fbd332;
+    --color-border-dialog-a8e3bh:#42b4ff;
     --color-border-divider-interactive-default-f75ypy:#dedee3;
     --color-border-tabs-divider-x9swcr:#424650;
     --color-border-tabs-shadow-eb3y7s:rgba(15, 20, 26, 1);
@@ -2201,6 +2219,7 @@
   --color-background-slider-error-pressed-9g3bmc:#ff7a7a;
   --color-background-status-error-ljmwh5:#1f0000;
   --color-background-status-info-zgt1yi:#001129;
+  --color-background-dialog-738f4h:#001129;
   --color-background-status-success-igaq7v:#001401;
   --color-background-table-header-1ikpca:#161d26;
   --color-background-tiles-disabled-c21opp:#1b232d;
@@ -2253,6 +2272,7 @@
   --color-border-status-error-5n723o:#ff7a7a;
   --color-border-status-info-7kw04i:#42b4ff;
   --color-border-status-success-acmcj0:#2bb534;
+  --color-border-dialog-a8e3bh:#42b4ff;
   --color-border-divider-interactive-default-f75ypy:#dedee3;
   --color-border-tabs-divider-x9swcr:#424650;
   --color-border-tabs-shadow-eb3y7s:rgba(15, 20, 26, 1);
@@ -2409,6 +2429,7 @@
   --color-background-slider-warning-pressed-bnqgti:#fbd332;
   --color-background-status-error-ljmwh5:#1f0000;
   --color-background-status-info-zgt1yi:#001129;
+  --color-background-dialog-738f4h:#001129;
   --color-background-status-success-igaq7v:#001401;
   --color-background-table-header-1ikpca:#161d26;
   --color-background-tiles-disabled-c21opp:#1b232d;
@@ -2457,6 +2478,7 @@
   --color-border-status-info-7kw04i:#42b4ff;
   --color-border-status-success-acmcj0:#2bb534;
   --color-border-status-warning-wkps52:#fbd332;
+  --color-border-dialog-a8e3bh:#42b4ff;
   --color-border-divider-interactive-default-f75ypy:#dedee3;
   --color-border-tabs-divider-x9swcr:#424650;
   --color-border-tabs-shadow-eb3y7s:rgba(15, 20, 26, 1);
@@ -2614,6 +2636,7 @@
   --color-background-slider-warning-pressed-bnqgti:#fbd332;
   --color-background-status-error-ljmwh5:#1f0000;
   --color-background-status-info-zgt1yi:#001129;
+  --color-background-dialog-738f4h:#001129;
   --color-background-status-success-igaq7v:#001401;
   --color-background-status-warning-bqz9of:#191100;
   --color-background-table-header-1ikpca:#0f141a;
@@ -2663,6 +2686,7 @@
   --color-border-status-info-7kw04i:#42b4ff;
   --color-border-status-success-acmcj0:#2bb534;
   --color-border-status-warning-wkps52:#fbd332;
+  --color-border-dialog-a8e3bh:#42b4ff;
   --color-border-divider-interactive-default-f75ypy:#dedee3;
   --color-border-tabs-divider-x9swcr:#424650;
   --color-border-tabs-shadow-eb3y7s:rgba(15, 20, 26, 1);
@@ -2833,6 +2857,7 @@
   --color-background-slider-warning-pressed-bnqgti:#fbd332;
   --color-background-status-error-ljmwh5:#1f0000;
   --color-background-status-info-zgt1yi:#001129;
+  --color-background-dialog-738f4h:#001129;
   --color-background-status-success-igaq7v:#001401;
   --color-background-status-warning-bqz9of:#191100;
   --color-background-table-header-1ikpca:#0f141a;
@@ -2882,6 +2907,7 @@
   --color-border-status-info-7kw04i:#42b4ff;
   --color-border-status-success-acmcj0:#2bb534;
   --color-border-status-warning-wkps52:#fbd332;
+  --color-border-dialog-a8e3bh:#42b4ff;
   --color-border-divider-interactive-default-f75ypy:#dedee3;
   --color-border-tabs-divider-x9swcr:#424650;
   --color-border-tabs-shadow-eb3y7s:rgba(15, 20, 26, 1);
@@ -3256,6 +3282,7 @@
   --color-background-slider-warning-pressed-bnqgti:#fbd332;
   --color-background-status-error-ljmwh5:#1f0000;
   --color-background-status-info-zgt1yi:#001129;
+  --color-background-dialog-738f4h:#001129;
   --color-background-status-success-igaq7v:#001401;
   --color-background-status-warning-bqz9of:#191100;
   --color-background-table-header-1ikpca:#161d26;
@@ -3305,6 +3332,7 @@
   --color-border-status-info-7kw04i:#42b4ff;
   --color-border-status-success-acmcj0:#2bb534;
   --color-border-status-warning-wkps52:#fbd332;
+  --color-border-dialog-a8e3bh:#42b4ff;
   --color-border-divider-interactive-default-f75ypy:#dedee3;
   --color-border-tabs-divider-x9swcr:#424650;
   --color-border-tabs-shadow-eb3y7s:rgba(15, 20, 26, 1);
@@ -3463,6 +3491,7 @@
   --color-background-slider-warning-pressed-bnqgti:#fbd332;
   --color-background-status-error-ljmwh5:#1f0000;
   --color-background-status-info-zgt1yi:#001129;
+  --color-background-dialog-738f4h:#001129;
   --color-background-status-success-igaq7v:#001401;
   --color-background-status-warning-bqz9of:#191100;
   --color-background-table-header-1ikpca:#161d26;
@@ -3512,6 +3541,7 @@
   --color-border-status-info-7kw04i:#42b4ff;
   --color-border-status-success-acmcj0:#2bb534;
   --color-border-status-warning-wkps52:#fbd332;
+  --color-border-dialog-a8e3bh:#42b4ff;
   --color-border-divider-interactive-default-f75ypy:#dedee3;
   --color-border-tabs-divider-x9swcr:#424650;
   --color-border-tabs-shadow-eb3y7s:rgba(15, 20, 26, 1);

package/lib/internal/template/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (80e41ae2)";
+export var PACKAGE_VERSION = "3.0.0 (3d8e33fb)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (80e41ae2)",
+  "PACKAGE_VERSION": "3.0.0 (3d8e33fb)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/lib/internal/template/internal/generated/styles/tokens.d.ts

@@ -307,6 +307,7 @@ export const colorBackgroundSliderErrorPressed: string;
 export const colorBackgroundSliderWarningPressed: string;
 export const colorBackgroundStatusError: string;
 export const colorBackgroundStatusInfo: string;
+export const colorBackgroundDialog: string;
 export const colorBackgroundStatusSuccess: string;
 export const colorBackgroundStatusWarning: string;
 export const colorBackgroundTableHeader: string;
@@ -327,6 +328,7 @@ export const colorBorderToggleButtonNormalPressed: string;
 export const colorBorderButtonNormalDisabled: string;
 export const colorTextButtonNormalDisabled: string;
 export const colorBorderButtonNormalHover: string;
+export const colorTextButtonIconDisabled: string;
 export const colorBorderButtonPrimaryDisabled: string;
 export const colorTextButtonPrimaryDisabled: string;
 export const colorBorderCalendarGrid: string;
@@ -372,6 +374,7 @@ export const colorBorderStatusError: string;
 export const colorBorderStatusInfo: string;
 export const colorBorderStatusSuccess: string;
 export const colorBorderStatusWarning: string;
+export const colorBorderDialog: string;
 export const colorBorderDividerInteractiveDefault: string;
 export const colorBorderTabsDivider: string;
 export const colorBorderTabsShadow: string;
@@ -576,8 +579,11 @@ export const borderTableStickyWidth: string;
 export const borderLinkFocusRingOutline: string;
 export const borderLinkFocusRingShadowSpread: string;
 export const borderWidthAlert: string;
+export const borderWidthButton: string;
+export const borderWidthDropdown: string;
 export const borderWidthField: string;
 export const borderWidthPopover: string;
+export const borderWidthToken: string;
 export const motionDurationExtraFast: string;
 export const motionDurationExtraSlow: string;
 export const motionDurationFast: string;

package/lib/internal/template/internal/generated/styles/tokens.js

@@ -307,6 +307,7 @@ export var colorBackgroundSliderErrorPressed = "var(--color-background-slider-er
 export var colorBackgroundSliderWarningPressed = "var(--color-background-slider-warning-pressed-pg5aih, #855900)";
 export var colorBackgroundStatusError = "var(--color-background-status-error-5fz45j, #fff5f5)";
 export var colorBackgroundStatusInfo = "var(--color-background-status-info-gflgo4, #f0fbff)";
+export var colorBackgroundDialog = "var(--color-background-dialog-wtz1wl, #f0fbff)";
 export var colorBackgroundStatusSuccess = "var(--color-background-status-success-ua29ej, #effff1)";
 export var colorBackgroundStatusWarning = "var(--color-background-status-warning-03nxlw, #fffef0)";
 export var colorBackgroundTableHeader = "var(--color-background-table-header-inc72b, #ffffff)";
@@ -327,6 +328,7 @@ export var colorBorderToggleButtonNormalPressed = "var(--color-border-toggle-but
 export var colorBorderButtonNormalDisabled = "var(--color-border-button-normal-disabled-caqkhj, #b4b4bb)";
 export var colorTextButtonNormalDisabled = "var(--color-text-button-normal-disabled-0s30to, #8c8c94)";
 export var colorBorderButtonNormalHover = "var(--color-border-button-normal-hover-2d2g0m, #002b66)";
+export var colorTextButtonIconDisabled = "var(--color-text-button-icon-disabled-sa33d0, #8c8c94)";
 export var colorBorderButtonPrimaryDisabled = "var(--color-border-button-primary-disabled-xtv38q, #ebebf0)";
 export var colorTextButtonPrimaryDisabled = "var(--color-text-button-primary-disabled-klolb5, #8c8c94)";
 export var colorBorderCalendarGrid = "var(--color-border-calendar-grid-u86q1u, transparent)";
@@ -372,6 +374,7 @@ export var colorBorderStatusError = "var(--color-border-status-error-adxa56, #db
 export var colorBorderStatusInfo = "var(--color-border-status-info-z6pwqy, #006ce0)";
 export var colorBorderStatusSuccess = "var(--color-border-status-success-4x6srk, #00802f)";
 export var colorBorderStatusWarning = "var(--color-border-status-warning-3feumr, #855900)";
+export var colorBorderDialog = "var(--color-border-dialog-u915ow, #006ce0)";
 export var colorBorderDividerInteractiveDefault = "var(--color-border-divider-interactive-default-0c10au, #8c8c94)";
 export var colorBorderTabsDivider = "var(--color-border-tabs-divider-djfdfj, #c6c6cd)";
 export var colorBorderTabsShadow = "var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12))";
@@ -576,8 +579,11 @@ export var borderTableStickyWidth = "var(--border-table-sticky-width-87kf12, 1px
 export var borderLinkFocusRingOutline = "var(--border-link-focus-ring-outline-kkfop6, 0)";
 export var borderLinkFocusRingShadowSpread = "var(--border-link-focus-ring-shadow-spread-v8hkrl, 2px)";
 export var borderWidthAlert = "var(--border-width-alert-t0f3yn, 2px)";
+export var borderWidthButton = "var(--border-width-button-ru6lbi, 2px)";
+export var borderWidthDropdown = "var(--border-width-dropdown-hh98qt, 2px)";
 export var borderWidthField = "var(--border-width-field-h1g7tw, 2px)";
 export var borderWidthPopover = "var(--border-width-popover-h2a419, 2px)";
+export var borderWidthToken = "var(--border-width-token-zo28pf, 2px)";
 export var motionDurationExtraFast = "var(--motion-duration-extra-fast-3huyux, 45ms)";
 export var motionDurationExtraSlow = "var(--motion-duration-extra-slow-ngjb9g, 270ms)";
 export var motionDurationFast = "var(--motion-duration-fast-sbm3r7, 90ms)";