@cloudscape-design/components 3.0.1191 → 3.0.1193

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/app-layout/classic.js +2 -2
  2. package/app-layout/classic.js.map +1 -1
  3. package/autosuggest/autosuggest-option.d.ts +11 -1
  4. package/autosuggest/autosuggest-option.d.ts.map +1 -1
  5. package/autosuggest/autosuggest-option.js +71 -2
  6. package/autosuggest/autosuggest-option.js.map +1 -1
  7. package/autosuggest/index.d.ts.map +1 -1
  8. package/autosuggest/index.js +2 -2
  9. package/autosuggest/index.js.map +1 -1
  10. package/autosuggest/interfaces.d.ts +63 -1
  11. package/autosuggest/interfaces.d.ts.map +1 -1
  12. package/autosuggest/interfaces.js.map +1 -1
  13. package/autosuggest/internal.d.ts.map +1 -1
  14. package/autosuggest/internal.js +2 -2
  15. package/autosuggest/internal.js.map +1 -1
  16. package/autosuggest/options-controller.js +1 -0
  17. package/autosuggest/options-controller.js.map +1 -1
  18. package/autosuggest/options-list.d.ts +3 -1
  19. package/autosuggest/options-list.d.ts.map +1 -1
  20. package/autosuggest/options-list.js +2 -2
  21. package/autosuggest/options-list.js.map +1 -1
  22. package/autosuggest/plain-list.d.ts +4 -2
  23. package/autosuggest/plain-list.d.ts.map +1 -1
  24. package/autosuggest/plain-list.js +6 -2
  25. package/autosuggest/plain-list.js.map +1 -1
  26. package/autosuggest/utils/parent-props.d.ts +10 -0
  27. package/autosuggest/utils/parent-props.d.ts.map +1 -0
  28. package/autosuggest/utils/parent-props.js +28 -0
  29. package/autosuggest/utils/parent-props.js.map +1 -0
  30. package/autosuggest/virtual-list.d.ts +2 -1
  31. package/autosuggest/virtual-list.d.ts.map +1 -1
  32. package/autosuggest/virtual-list.js +6 -2
  33. package/autosuggest/virtual-list.js.map +1 -1
  34. package/error-boundary/fallback.d.ts +2 -1
  35. package/error-boundary/fallback.d.ts.map +1 -1
  36. package/error-boundary/fallback.js +4 -2
  37. package/error-boundary/fallback.js.map +1 -1
  38. package/error-boundary/interfaces.d.ts +2 -1
  39. package/error-boundary/interfaces.d.ts.map +1 -1
  40. package/error-boundary/interfaces.js.map +1 -1
  41. package/internal/base-component/styles.scoped.css +15 -15
  42. package/internal/environment.js +2 -2
  43. package/internal/environment.json +2 -2
  44. package/internal/generated/styles/tokens.d.ts +0 -2
  45. package/internal/generated/styles/tokens.js +2 -4
  46. package/internal/generated/theming/index.cjs +2 -64
  47. package/internal/generated/theming/index.js +2 -64
  48. package/internal/manifest.json +1 -1
  49. package/package.json +1 -1
  50. package/progress-bar/interfaces.d.ts +1 -1
  51. package/progress-bar/interfaces.js.map +1 -1
  52. package/progress-bar/internal.d.ts.map +1 -1
  53. package/progress-bar/internal.js +1 -1
  54. package/progress-bar/internal.js.map +1 -1
  55. package/progress-bar/styles.css.js +18 -19
  56. package/progress-bar/styles.scoped.css +30 -42
  57. package/progress-bar/styles.selectors.js +18 -19
package/error-boundary/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/error-boundary/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 { ErrorInfo } from 'react';\n\nexport interface ErrorBoundaryProps {\n /**\n * Optional identifier for the error boundary instance.\n *\n * When provided, the identifier is included in the `onError` callback payload.\n * In the rendered output, the boundary wraps its content in a `<div>` with the\n * attribute `data-awsui-boundary-id={errorBoundaryId}` to support debugging.\n */\n errorBoundaryId?: string;\n\n /**\n * Callback invoked when an error is intercepted by the boundary.\n * Use this function to record, log, or report errors (for example, to telemetry or monitoring systems).\n *\n * The callback receives a `detail` object containing:\n * * `error` (Error): The thrown error instance.\n * * `errorInfo` (React.ErrorInfo): Additional metadata captured by React.\n * * `errorBoundaryId` (optional, string): The boundary identifier, if defined.\n */\n onError: (detail: ErrorBoundaryProps.OnErrorDetail) => void;\n\n /**\n * Controls how nested error boundaries behave.\n *\n * Several components—such as app layout, container, and modal include built-in\n * error boundaries. These boundaries activate automatically when they detect\n * an ancestor boundary, inheriting configuration from the closest one.\n *\n * When `suppressNested` is set to `true`, nested built-in error boundaries\n * and nested standalone error boundaries with `suppressible=true` are disabled,\n * so the errors propagate further up and are captured by this error boundary.\n */\n suppressNested?: boolean;\n\n /**\n * When set to `true`, this error boundary can be suppressed by another error\n * boundary with `suppressNested=true`, rendered above in the components tree.\n */\n suppressible?: boolean;\n\n /**\n * Optional custom renderer for the fallback UI displayed when an error occurs.\n *\n * The function receives the default slots derived from i18n configuration:\n * * `header` (ReactNode): The fallback header text.\n * * `description` (ReactNode): The fallback description text.\n * * `action` (ReactNode): The fallback action element (a refresh button by default).\n *\n * Return a React node to fully override the default fallback presentation.\n */\n renderFallback?: (props: ErrorBoundaryProps.FallbackProps) => React.ReactNode;\n\n /**\n * Localized strings and components used in the fallback UI.\n *\n * * `headerText` (string): Header text displayed in the fallback view.\n * * `descriptionText` (string): Description text displayed in the fallback view. Supports embedding inline\n * feedback actions by including `<Feedback>` pseudo-tags when `components.Feedback` is provided.\n * * `refreshActionText` (string): Text for the default refresh action button.\n * * `components.Feedback` (React.ComponentType<I18nFeedbackProps>): A component used to render\n * inline feedback actions within the description text.\n *\n * @i18n\n */\n i18nStrings?: ErrorBoundaryProps.I18nStrings;\n\n /**\n * Child content rendered when no error has been captured.\n */\n children: React.ReactNode;\n}\n\nexport namespace ErrorBoundaryProps {\n export interface FallbackProps {\n header?: React.ReactNode;\n description?: React.ReactNode;\n action?: React.ReactNode;\n }\n\n export interface I18nStrings {\n headerText?: string;\n descriptionText?: string;\n refreshActionText?: string;\n components?: {\n Feedback?: React.ComponentType<I18nFeedbackProps>;\n };\n }\n\n export interface I18nFeedbackProps {\n children: React.ReactNode;\n }\n\n export interface OnErrorDetail {\n error: Error;\n errorInfo: ErrorInfo;\n errorBoundaryId?: string;\n }\n}\n\nexport interface BuiltInErrorBoundaryProps {\n children: React.ReactNode;\n wrapper?: (content: React.ReactNode) => React.ReactNode;\n suppressNested?: boolean;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/error-boundary/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 { ErrorInfo } from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface ErrorBoundaryProps extends BaseComponentProps {\n /**\n * Optional identifier for the error boundary instance.\n *\n * When provided, the identifier is included in the `onError` callback payload.\n * In the rendered output, the boundary wraps its content in a `<div>` with the\n * attribute `data-awsui-boundary-id={errorBoundaryId}` to support debugging.\n */\n errorBoundaryId?: string;\n\n /**\n * Callback invoked when an error is intercepted by the boundary.\n * Use this function to record, log, or report errors (for example, to telemetry or monitoring systems).\n *\n * The callback receives a `detail` object containing:\n * * `error` (Error): The thrown error instance.\n * * `errorInfo` (React.ErrorInfo): Additional metadata captured by React.\n * * `errorBoundaryId` (optional, string): The boundary identifier, if defined.\n */\n onError: (detail: ErrorBoundaryProps.OnErrorDetail) => void;\n\n /**\n * Controls how nested error boundaries behave.\n *\n * Several components—such as app layout, container, and modal include built-in\n * error boundaries. These boundaries activate automatically when they detect\n * an ancestor boundary, inheriting configuration from the closest one.\n *\n * When `suppressNested` is set to `true`, nested built-in error boundaries\n * and nested standalone error boundaries with `suppressible=true` are disabled,\n * so the errors propagate further up and are captured by this error boundary.\n */\n suppressNested?: boolean;\n\n /**\n * When set to `true`, this error boundary can be suppressed by another error\n * boundary with `suppressNested=true`, rendered above in the components tree.\n */\n suppressible?: boolean;\n\n /**\n * Optional custom renderer for the fallback UI displayed when an error occurs.\n *\n * The function receives the default slots derived from i18n configuration:\n * * `header` (ReactNode): The fallback header text.\n * * `description` (ReactNode): The fallback description text.\n * * `action` (ReactNode): The fallback action element (a refresh button by default).\n *\n * Return a React node to fully override the default fallback presentation.\n */\n renderFallback?: (props: ErrorBoundaryProps.FallbackProps) => React.ReactNode;\n\n /**\n * Localized strings and components used in the fallback UI.\n *\n * * `headerText` (string): Header text displayed in the fallback view.\n * * `descriptionText` (string): Description text displayed in the fallback view. Supports embedding inline\n * feedback actions by including `<Feedback>` pseudo-tags when `components.Feedback` is provided.\n * * `refreshActionText` (string): Text for the default refresh action button.\n * * `components.Feedback` (React.ComponentType<I18nFeedbackProps>): A component used to render\n * inline feedback actions within the description text.\n *\n * @i18n\n */\n i18nStrings?: ErrorBoundaryProps.I18nStrings;\n\n /**\n * Child content rendered when no error has been captured.\n */\n children: React.ReactNode;\n}\n\nexport namespace ErrorBoundaryProps {\n export interface FallbackProps {\n header?: React.ReactNode;\n description?: React.ReactNode;\n action?: React.ReactNode;\n }\n\n export interface I18nStrings {\n headerText?: string;\n descriptionText?: string;\n refreshActionText?: string;\n components?: {\n Feedback?: React.ComponentType<I18nFeedbackProps>;\n };\n }\n\n export interface I18nFeedbackProps {\n children: React.ReactNode;\n }\n\n export interface OnErrorDetail {\n error: Error;\n errorInfo: ErrorInfo;\n errorBoundaryId?: string;\n }\n}\n\nexport interface BuiltInErrorBoundaryProps {\n children: React.ReactNode;\n wrapper?: (content: React.ReactNode) => React.ReactNode;\n suppressNested?: boolean;\n}\n"]}
package/internal/base-component/styles.scoped.css CHANGED
@@ -298,10 +298,8 @@ body {
298
298
  --color-background-notification-stack-bar-active-a4h9r8:var(--color-neutral-750-pi9qqd);
299
299
  --color-background-notification-stack-bar-hover-jh82oo:var(--color-neutral-650-miik4f);
300
300
  --color-background-popover-e20fy8:var(--color-white-p1zlvy);
301
- --color-background-progress-bar-value-default-9zs42p:var(--color-primary-600-1lcy1k);
302
- --color-background-progress-bar-value-in-flash-q2h8w5:var(--color-white-p1zlvy);
303
- --color-background-progress-bar-default-4755ec:var(--color-neutral-250-vs1is4);
304
- --color-background-progress-bar-in-flash-f4k60b:var(--color-grey-opaque-25-cjy3al);
301
+ --color-background-progress-bar-value-default-69ydqg:var(--color-primary-600-1lcy1k);
302
+ --color-background-progress-bar-default-j8kyxd:var(--color-neutral-250-vs1is4);
305
303
  --color-background-segment-active-1u2ldl:var(--color-primary-600-1lcy1k);
306
304
  --color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
307
305
  --color-background-segment-disabled-m2a5t7:var(--color-background-button-normal-disabled-hl039l);
@@ -913,8 +911,8 @@ body {
913
911
  --color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-300-5q65ox);
914
912
  --color-background-notification-grey-x3vul6:var(--color-neutral-600-fln1ww);
915
913
  --color-background-popover-e20fy8:var(--color-neutral-800-t7j5ap);
916
- --color-background-progress-bar-value-default-9zs42p:var(--color-primary-400-n8h4bx);
917
- --color-background-progress-bar-default-4755ec:var(--color-neutral-700-qw8ats);
914
+ --color-background-progress-bar-value-default-69ydqg:var(--color-primary-400-n8h4bx);
915
+ --color-background-progress-bar-default-j8kyxd:var(--color-neutral-700-qw8ats);
918
916
  --color-background-segment-active-1u2ldl:var(--color-primary-400-n8h4bx);
919
917
  --color-background-slider-handle-default-lp5ntg:var(--color-primary-400-n8h4bx);
920
918
  --color-background-slider-handle-active-50ubqb:var(--color-primary-300-5q65ox);
@@ -1173,8 +1171,8 @@ body {
1173
1171
  --color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-300-5q65ox);
1174
1172
  --color-background-notification-grey-x3vul6:var(--color-neutral-600-fln1ww);
1175
1173
  --color-background-popover-e20fy8:var(--color-neutral-800-t7j5ap);
1176
- --color-background-progress-bar-value-default-9zs42p:var(--color-primary-400-n8h4bx);
1177
- --color-background-progress-bar-default-4755ec:var(--color-neutral-700-qw8ats);
1174
+ --color-background-progress-bar-value-default-69ydqg:var(--color-primary-400-n8h4bx);
1175
+ --color-background-progress-bar-default-j8kyxd:var(--color-neutral-700-qw8ats);
1178
1176
  --color-background-segment-active-1u2ldl:var(--color-primary-400-n8h4bx);
1179
1177
  --color-background-slider-handle-default-lp5ntg:var(--color-primary-400-n8h4bx);
1180
1178
  --color-background-slider-handle-active-50ubqb:var(--color-primary-300-5q65ox);
@@ -1401,8 +1399,8 @@ body {
1401
1399
  --color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-300-5q65ox);
1402
1400
  --color-background-notification-grey-x3vul6:var(--color-neutral-600-fln1ww);
1403
1401
  --color-background-popover-e20fy8:var(--color-neutral-800-t7j5ap);
1404
- --color-background-progress-bar-value-default-9zs42p:var(--color-primary-400-n8h4bx);
1405
- --color-background-progress-bar-default-4755ec:var(--color-neutral-700-qw8ats);
1402
+ --color-background-progress-bar-value-default-69ydqg:var(--color-primary-400-n8h4bx);
1403
+ --color-background-progress-bar-default-j8kyxd:var(--color-neutral-700-qw8ats);
1406
1404
  --color-background-segment-active-1u2ldl:var(--color-primary-400-n8h4bx);
1407
1405
  --color-background-segment-default-b0r494:var(--color-neutral-950-lxybh8);
1408
1406
  --color-background-segment-disabled-m2a5t7:var(--color-neutral-950-lxybh8);
@@ -1605,6 +1603,8 @@ body {
1605
1603
  --color-background-button-normal-default-7f99mv:transparent;
1606
1604
  --color-background-button-normal-hover-53op9s:rgba(0, 7, 22, 0.15);
1607
1605
  --color-background-inline-code-un8udy:rgba(0, 0, 0, 0.2);
1606
+ --color-background-progress-bar-value-default-69ydqg:var(--color-white-p1zlvy);
1607
+ --color-background-progress-bar-default-j8kyxd:var(--color-grey-opaque-25-cjy3al);
1608
1608
  --color-border-button-normal-active-ru7yhb:var(--color-white-p1zlvy);
1609
1609
  --color-border-button-normal-default-glqfp1:var(--color-neutral-100-gk3lvf);
1610
1610
  --color-border-button-normal-hover-6a2tdq:var(--color-white-p1zlvy);
@@ -1646,8 +1646,8 @@ body {
1646
1646
  --color-background-button-normal-active-5imwxd:rgba(0, 7, 22, 0.1);
1647
1647
  --color-background-button-normal-default-7f99mv:transparent;
1648
1648
  --color-background-button-normal-hover-53op9s:rgba(0, 7, 22, 0.05);
1649
- --color-background-progress-bar-value-in-flash-q2h8w5:var(--color-neutral-950-lxybh8);
1650
- --color-background-progress-bar-in-flash-f4k60b:var(--color-grey-opaque-10-vwfmts);
1649
+ --color-background-progress-bar-value-default-69ydqg:var(--color-neutral-950-lxybh8);
1650
+ --color-background-progress-bar-default-j8kyxd:var(--color-grey-opaque-10-vwfmts);
1651
1651
  --color-border-button-normal-active-ru7yhb:var(--color-text-button-normal-hover-gusgyv);
1652
1652
  --color-border-button-normal-default-glqfp1:var(--color-text-button-normal-default-nzalii);
1653
1653
  --color-border-button-normal-hover-6a2tdq:var(--color-text-button-normal-hover-gusgyv);
@@ -1759,8 +1759,8 @@ body {
1759
1759
  --color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-300-5q65ox);
1760
1760
  --color-background-notification-grey-x3vul6:var(--color-neutral-600-fln1ww);
1761
1761
  --color-background-popover-e20fy8:var(--color-neutral-800-t7j5ap);
1762
- --color-background-progress-bar-value-default-9zs42p:var(--color-primary-400-n8h4bx);
1763
- --color-background-progress-bar-default-4755ec:var(--color-neutral-700-qw8ats);
1762
+ --color-background-progress-bar-value-default-69ydqg:var(--color-primary-400-n8h4bx);
1763
+ --color-background-progress-bar-default-j8kyxd:var(--color-neutral-700-qw8ats);
1764
1764
  --color-background-segment-active-1u2ldl:var(--color-primary-400-n8h4bx);
1765
1765
  --color-background-slider-handle-default-lp5ntg:var(--color-primary-400-n8h4bx);
1766
1766
  --color-background-slider-handle-active-50ubqb:var(--color-primary-300-5q65ox);
@@ -2034,5 +2034,5 @@ body {
2034
2034
  }
2035
2035
  }
2036
2036
  :root {
2037
- --awsui-version-info-cc088a74: true;
2037
+ --awsui-version-info-ed206118: true;
2038
2038
  }
package/internal/environment.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (cc088a74)";
3
- export var GIT_SHA = "cc088a74";
2
+ export var PACKAGE_VERSION = "3.0.0 (ed206118)";
3
+ export var GIT_SHA = "ed206118";
4
4
  export var THEME = "open-source-visual-refresh";
5
5
  export var SYSTEM = "core";
6
6
  export var ALWAYS_VISUAL_REFRESH = true;
package/internal/environment.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (cc088a74)",
4
- "GIT_SHA": "cc088a74",
3
+ "PACKAGE_VERSION": "3.0.0 (ed206118)",
4
+ "GIT_SHA": "ed206118",
5
5
  "THEME": "open-source-visual-refresh",
6
6
  "SYSTEM": "core",
7
7
  "ALWAYS_VISUAL_REFRESH": true
package/internal/generated/styles/tokens.d.ts CHANGED
@@ -341,9 +341,7 @@ export const colorBackgroundNotificationStackBarActive: string;
341
341
  export const colorBackgroundNotificationStackBarHover: string;
342
342
  export const colorBackgroundPopover: string;
343
343
  export const colorBackgroundProgressBarValueDefault: string;
344
- export const colorBackgroundProgressBarValueInFlash: string;
345
344
  export const colorBackgroundProgressBarDefault: string;
346
- export const colorBackgroundProgressBarInFlash: string;
347
345
  export const colorBackgroundSegmentActive: string;
348
346
  export const colorBackgroundSegmentDefault: string;
349
347
  export const colorBackgroundSegmentDisabled: string;
package/internal/generated/styles/tokens.js CHANGED
@@ -340,10 +340,8 @@ export var colorBackgroundNotificationStackBar = "var(--color-background-notific
340
340
  export var colorBackgroundNotificationStackBarActive = "var(--color-background-notification-stack-bar-active-a4h9r8, #232b37)";
341
341
  export var colorBackgroundNotificationStackBarHover = "var(--color-background-notification-stack-bar-hover-jh82oo, #424650)";
342
342
  export var colorBackgroundPopover = "var(--color-background-popover-e20fy8, #ffffff)";
343
- export var colorBackgroundProgressBarValueDefault = "var(--color-background-progress-bar-value-default-9zs42p, #006ce0)";
344
- export var colorBackgroundProgressBarValueInFlash = "var(--color-background-progress-bar-value-in-flash-q2h8w5, #ffffff)";
345
- export var colorBackgroundProgressBarDefault = "var(--color-background-progress-bar-default-4755ec, #ebebf0)";
346
- export var colorBackgroundProgressBarInFlash = "var(--color-background-progress-bar-in-flash-f4k60b, rgba(255, 255, 255, 0.25))";
343
+ export var colorBackgroundProgressBarValueDefault = "var(--color-background-progress-bar-value-default-69ydqg, #006ce0)";
344
+ export var colorBackgroundProgressBarDefault = "var(--color-background-progress-bar-default-j8kyxd, #ebebf0)";
347
345
  export var colorBackgroundSegmentActive = "var(--color-background-segment-active-1u2ldl, #006ce0)";
348
346
  export var colorBackgroundSegmentDefault = "var(--color-background-segment-default-b0r494, #ffffff)";
349
347
  export var colorBackgroundSegmentDisabled = "var(--color-background-segment-disabled-m2a5t7, #ffffff)";
package/internal/generated/theming/index.cjs CHANGED
@@ -1411,18 +1411,10 @@ module.exports.preset = {
1411
1411
  "light": "{colorPrimary600}",
1412
1412
  "dark": "{colorPrimary400}"
1413
1413
  },
1414
- "colorBackgroundProgressBarValueInFlash": {
1415
- "light": "{colorWhite}",
1416
- "dark": "{colorWhite}"
1417
- },
1418
1414
  "colorBackgroundProgressBarDefault": {
1419
1415
  "light": "{colorNeutral250}",
1420
1416
  "dark": "{colorNeutral700}"
1421
1417
  },
1422
- "colorBackgroundProgressBarInFlash": {
1423
- "light": "{colorGreyOpaque25}",
1424
- "dark": "{colorGreyOpaque25}"
1425
- },
1426
1418
  "colorBackgroundSegmentActive": {
1427
1419
  "light": "{colorPrimary600}",
1428
1420
  "dark": "{colorPrimary400}"
@@ -3728,18 +3720,10 @@ module.exports.preset = {
3728
3720
  "light": "{colorPrimary400}",
3729
3721
  "dark": "{colorPrimary400}"
3730
3722
  },
3731
- "colorBackgroundProgressBarValueInFlash": {
3732
- "light": "{colorWhite}",
3733
- "dark": "{colorWhite}"
3734
- },
3735
3723
  "colorBackgroundProgressBarDefault": {
3736
3724
  "light": "{colorNeutral700}",
3737
3725
  "dark": "{colorNeutral700}"
3738
3726
  },
3739
- "colorBackgroundProgressBarInFlash": {
3740
- "light": "{colorGreyOpaque25}",
3741
- "dark": "{colorGreyOpaque25}"
3742
- },
3743
3727
  "colorBackgroundSegmentActive": {
3744
3728
  "light": "{colorPrimary400}",
3745
3729
  "dark": "{colorPrimary400}"
@@ -5053,18 +5037,10 @@ module.exports.preset = {
5053
5037
  "light": "{colorPrimary400}",
5054
5038
  "dark": "{colorPrimary400}"
5055
5039
  },
5056
- "colorBackgroundProgressBarValueInFlash": {
5057
- "light": "{colorWhite}",
5058
- "dark": "{colorWhite}"
5059
- },
5060
5040
  "colorBackgroundProgressBarDefault": {
5061
5041
  "light": "{colorNeutral700}",
5062
5042
  "dark": "{colorNeutral700}"
5063
5043
  },
5064
- "colorBackgroundProgressBarInFlash": {
5065
- "light": "{colorGreyOpaque25}",
5066
- "dark": "{colorGreyOpaque25}"
5067
- },
5068
5044
  "colorBackgroundSegmentActive": {
5069
5045
  "light": "{colorPrimary400}",
5070
5046
  "dark": "{colorPrimary400}"
@@ -6311,18 +6287,10 @@ module.exports.preset = {
6311
6287
  "dark": "{colorNeutral800}"
6312
6288
  },
6313
6289
  "colorBackgroundProgressBarValueDefault": {
6314
- "light": "{colorPrimary600}",
6315
- "dark": "{colorPrimary400}"
6316
- },
6317
- "colorBackgroundProgressBarValueInFlash": {
6318
6290
  "light": "{colorWhite}",
6319
6291
  "dark": "{colorWhite}"
6320
6292
  },
6321
6293
  "colorBackgroundProgressBarDefault": {
6322
- "light": "{colorNeutral250}",
6323
- "dark": "{colorNeutral700}"
6324
- },
6325
- "colorBackgroundProgressBarInFlash": {
6326
6294
  "light": "{colorGreyOpaque25}",
6327
6295
  "dark": "{colorGreyOpaque25}"
6328
6296
  },
@@ -7457,18 +7425,10 @@ module.exports.preset = {
7457
7425
  "dark": "{colorNeutral800}"
7458
7426
  },
7459
7427
  "colorBackgroundProgressBarValueDefault": {
7460
- "light": "{colorPrimary600}",
7461
- "dark": "{colorPrimary400}"
7462
- },
7463
- "colorBackgroundProgressBarValueInFlash": {
7464
7428
  "light": "{colorNeutral950}",
7465
7429
  "dark": "{colorNeutral950}"
7466
7430
  },
7467
7431
  "colorBackgroundProgressBarDefault": {
7468
- "light": "{colorNeutral250}",
7469
- "dark": "{colorNeutral700}"
7470
- },
7471
- "colorBackgroundProgressBarInFlash": {
7472
7432
  "light": "{colorGreyOpaque10}",
7473
7433
  "dark": "{colorGreyOpaque10}"
7474
7434
  },
@@ -8606,18 +8566,10 @@ module.exports.preset = {
8606
8566
  "light": "{colorPrimary600}",
8607
8567
  "dark": "{colorPrimary400}"
8608
8568
  },
8609
- "colorBackgroundProgressBarValueInFlash": {
8610
- "light": "{colorWhite}",
8611
- "dark": "{colorWhite}"
8612
- },
8613
8569
  "colorBackgroundProgressBarDefault": {
8614
8570
  "light": "{colorNeutral250}",
8615
8571
  "dark": "{colorNeutral700}"
8616
8572
  },
8617
- "colorBackgroundProgressBarInFlash": {
8618
- "light": "{colorGreyOpaque25}",
8619
- "dark": "{colorGreyOpaque25}"
8620
- },
8621
8573
  "colorBackgroundSegmentActive": {
8622
8574
  "light": "{colorPrimary600}",
8623
8575
  "dark": "{colorPrimary400}"
@@ -9754,18 +9706,10 @@ module.exports.preset = {
9754
9706
  "light": "{colorPrimary400}",
9755
9707
  "dark": "{colorPrimary400}"
9756
9708
  },
9757
- "colorBackgroundProgressBarValueInFlash": {
9758
- "light": "{colorWhite}",
9759
- "dark": "{colorWhite}"
9760
- },
9761
9709
  "colorBackgroundProgressBarDefault": {
9762
9710
  "light": "{colorNeutral700}",
9763
9711
  "dark": "{colorNeutral700}"
9764
9712
  },
9765
- "colorBackgroundProgressBarInFlash": {
9766
- "light": "{colorGreyOpaque25}",
9767
- "dark": "{colorGreyOpaque25}"
9768
- },
9769
9713
  "colorBackgroundSegmentActive": {
9770
9714
  "light": "{colorPrimary400}",
9771
9715
  "dark": "{colorPrimary400}"
@@ -10963,9 +10907,7 @@ module.exports.preset = {
10963
10907
  "colorBackgroundNotificationStackBarHover": "color",
10964
10908
  "colorBackgroundPopover": "color",
10965
10909
  "colorBackgroundProgressBarValueDefault": "color",
10966
- "colorBackgroundProgressBarValueInFlash": "color",
10967
10910
  "colorBackgroundProgressBarDefault": "color",
10968
- "colorBackgroundProgressBarInFlash": "color",
10969
10911
  "colorBackgroundSegmentActive": "color",
10970
10912
  "colorBackgroundSegmentDefault": "color",
10971
10913
  "colorBackgroundSegmentDisabled": "color",
@@ -12599,9 +12541,7 @@ module.exports.preset = {
12599
12541
  "colorBackgroundNotificationStackBarHover": "color-background-notification-stack-bar-hover",
12600
12542
  "colorBackgroundPopover": "color-background-popover",
12601
12543
  "colorBackgroundProgressBarValueDefault": "color-background-progress-bar-value-default",
12602
- "colorBackgroundProgressBarValueInFlash": "color-background-progress-bar-value-in-flash",
12603
12544
  "colorBackgroundProgressBarDefault": "color-background-progress-bar-default",
12604
- "colorBackgroundProgressBarInFlash": "color-background-progress-bar-in-flash",
12605
12545
  "colorBackgroundSegmentActive": "color-background-segment-active",
12606
12546
  "colorBackgroundSegmentDefault": "color-background-segment-default",
12607
12547
  "colorBackgroundSegmentDisabled": "color-background-segment-disabled",
@@ -13419,10 +13359,8 @@ module.exports.preset = {
13419
13359
  "colorBackgroundNotificationStackBarActive": "--color-background-notification-stack-bar-active-a4h9r8",
13420
13360
  "colorBackgroundNotificationStackBarHover": "--color-background-notification-stack-bar-hover-jh82oo",
13421
13361
  "colorBackgroundPopover": "--color-background-popover-e20fy8",
13422
- "colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-9zs42p",
13423
- "colorBackgroundProgressBarValueInFlash": "--color-background-progress-bar-value-in-flash-q2h8w5",
13424
- "colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-4755ec",
13425
- "colorBackgroundProgressBarInFlash": "--color-background-progress-bar-in-flash-f4k60b",
13362
+ "colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-69ydqg",
13363
+ "colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-j8kyxd",
13426
13364
  "colorBackgroundSegmentActive": "--color-background-segment-active-1u2ldl",
13427
13365
  "colorBackgroundSegmentDefault": "--color-background-segment-default-b0r494",
13428
13366
  "colorBackgroundSegmentDisabled": "--color-background-segment-disabled-m2a5t7",
package/internal/generated/theming/index.js CHANGED
@@ -1411,18 +1411,10 @@ export var preset = {
1411
1411
  "light": "{colorPrimary600}",
1412
1412
  "dark": "{colorPrimary400}"
1413
1413
  },
1414
- "colorBackgroundProgressBarValueInFlash": {
1415
- "light": "{colorWhite}",
1416
- "dark": "{colorWhite}"
1417
- },
1418
1414
  "colorBackgroundProgressBarDefault": {
1419
1415
  "light": "{colorNeutral250}",
1420
1416
  "dark": "{colorNeutral700}"
1421
1417
  },
1422
- "colorBackgroundProgressBarInFlash": {
1423
- "light": "{colorGreyOpaque25}",
1424
- "dark": "{colorGreyOpaque25}"
1425
- },
1426
1418
  "colorBackgroundSegmentActive": {
1427
1419
  "light": "{colorPrimary600}",
1428
1420
  "dark": "{colorPrimary400}"
@@ -3728,18 +3720,10 @@ export var preset = {
3728
3720
  "light": "{colorPrimary400}",
3729
3721
  "dark": "{colorPrimary400}"
3730
3722
  },
3731
- "colorBackgroundProgressBarValueInFlash": {
3732
- "light": "{colorWhite}",
3733
- "dark": "{colorWhite}"
3734
- },
3735
3723
  "colorBackgroundProgressBarDefault": {
3736
3724
  "light": "{colorNeutral700}",
3737
3725
  "dark": "{colorNeutral700}"
3738
3726
  },
3739
- "colorBackgroundProgressBarInFlash": {
3740
- "light": "{colorGreyOpaque25}",
3741
- "dark": "{colorGreyOpaque25}"
3742
- },
3743
3727
  "colorBackgroundSegmentActive": {
3744
3728
  "light": "{colorPrimary400}",
3745
3729
  "dark": "{colorPrimary400}"
@@ -5053,18 +5037,10 @@ export var preset = {
5053
5037
  "light": "{colorPrimary400}",
5054
5038
  "dark": "{colorPrimary400}"
5055
5039
  },
5056
- "colorBackgroundProgressBarValueInFlash": {
5057
- "light": "{colorWhite}",
5058
- "dark": "{colorWhite}"
5059
- },
5060
5040
  "colorBackgroundProgressBarDefault": {
5061
5041
  "light": "{colorNeutral700}",
5062
5042
  "dark": "{colorNeutral700}"
5063
5043
  },
5064
- "colorBackgroundProgressBarInFlash": {
5065
- "light": "{colorGreyOpaque25}",
5066
- "dark": "{colorGreyOpaque25}"
5067
- },
5068
5044
  "colorBackgroundSegmentActive": {
5069
5045
  "light": "{colorPrimary400}",
5070
5046
  "dark": "{colorPrimary400}"
@@ -6311,18 +6287,10 @@ export var preset = {
6311
6287
  "dark": "{colorNeutral800}"
6312
6288
  },
6313
6289
  "colorBackgroundProgressBarValueDefault": {
6314
- "light": "{colorPrimary600}",
6315
- "dark": "{colorPrimary400}"
6316
- },
6317
- "colorBackgroundProgressBarValueInFlash": {
6318
6290
  "light": "{colorWhite}",
6319
6291
  "dark": "{colorWhite}"
6320
6292
  },
6321
6293
  "colorBackgroundProgressBarDefault": {
6322
- "light": "{colorNeutral250}",
6323
- "dark": "{colorNeutral700}"
6324
- },
6325
- "colorBackgroundProgressBarInFlash": {
6326
6294
  "light": "{colorGreyOpaque25}",
6327
6295
  "dark": "{colorGreyOpaque25}"
6328
6296
  },
@@ -7457,18 +7425,10 @@ export var preset = {
7457
7425
  "dark": "{colorNeutral800}"
7458
7426
  },
7459
7427
  "colorBackgroundProgressBarValueDefault": {
7460
- "light": "{colorPrimary600}",
7461
- "dark": "{colorPrimary400}"
7462
- },
7463
- "colorBackgroundProgressBarValueInFlash": {
7464
7428
  "light": "{colorNeutral950}",
7465
7429
  "dark": "{colorNeutral950}"
7466
7430
  },
7467
7431
  "colorBackgroundProgressBarDefault": {
7468
- "light": "{colorNeutral250}",
7469
- "dark": "{colorNeutral700}"
7470
- },
7471
- "colorBackgroundProgressBarInFlash": {
7472
7432
  "light": "{colorGreyOpaque10}",
7473
7433
  "dark": "{colorGreyOpaque10}"
7474
7434
  },
@@ -8606,18 +8566,10 @@ export var preset = {
8606
8566
  "light": "{colorPrimary600}",
8607
8567
  "dark": "{colorPrimary400}"
8608
8568
  },
8609
- "colorBackgroundProgressBarValueInFlash": {
8610
- "light": "{colorWhite}",
8611
- "dark": "{colorWhite}"
8612
- },
8613
8569
  "colorBackgroundProgressBarDefault": {
8614
8570
  "light": "{colorNeutral250}",
8615
8571
  "dark": "{colorNeutral700}"
8616
8572
  },
8617
- "colorBackgroundProgressBarInFlash": {
8618
- "light": "{colorGreyOpaque25}",
8619
- "dark": "{colorGreyOpaque25}"
8620
- },
8621
8573
  "colorBackgroundSegmentActive": {
8622
8574
  "light": "{colorPrimary600}",
8623
8575
  "dark": "{colorPrimary400}"
@@ -9754,18 +9706,10 @@ export var preset = {
9754
9706
  "light": "{colorPrimary400}",
9755
9707
  "dark": "{colorPrimary400}"
9756
9708
  },
9757
- "colorBackgroundProgressBarValueInFlash": {
9758
- "light": "{colorWhite}",
9759
- "dark": "{colorWhite}"
9760
- },
9761
9709
  "colorBackgroundProgressBarDefault": {
9762
9710
  "light": "{colorNeutral700}",
9763
9711
  "dark": "{colorNeutral700}"
9764
9712
  },
9765
- "colorBackgroundProgressBarInFlash": {
9766
- "light": "{colorGreyOpaque25}",
9767
- "dark": "{colorGreyOpaque25}"
9768
- },
9769
9713
  "colorBackgroundSegmentActive": {
9770
9714
  "light": "{colorPrimary400}",
9771
9715
  "dark": "{colorPrimary400}"
@@ -10963,9 +10907,7 @@ export var preset = {
10963
10907
  "colorBackgroundNotificationStackBarHover": "color",
10964
10908
  "colorBackgroundPopover": "color",
10965
10909
  "colorBackgroundProgressBarValueDefault": "color",
10966
- "colorBackgroundProgressBarValueInFlash": "color",
10967
10910
  "colorBackgroundProgressBarDefault": "color",
10968
- "colorBackgroundProgressBarInFlash": "color",
10969
10911
  "colorBackgroundSegmentActive": "color",
10970
10912
  "colorBackgroundSegmentDefault": "color",
10971
10913
  "colorBackgroundSegmentDisabled": "color",
@@ -12599,9 +12541,7 @@ export var preset = {
12599
12541
  "colorBackgroundNotificationStackBarHover": "color-background-notification-stack-bar-hover",
12600
12542
  "colorBackgroundPopover": "color-background-popover",
12601
12543
  "colorBackgroundProgressBarValueDefault": "color-background-progress-bar-value-default",
12602
- "colorBackgroundProgressBarValueInFlash": "color-background-progress-bar-value-in-flash",
12603
12544
  "colorBackgroundProgressBarDefault": "color-background-progress-bar-default",
12604
- "colorBackgroundProgressBarInFlash": "color-background-progress-bar-in-flash",
12605
12545
  "colorBackgroundSegmentActive": "color-background-segment-active",
12606
12546
  "colorBackgroundSegmentDefault": "color-background-segment-default",
12607
12547
  "colorBackgroundSegmentDisabled": "color-background-segment-disabled",
@@ -13419,10 +13359,8 @@ export var preset = {
13419
13359
  "colorBackgroundNotificationStackBarActive": "--color-background-notification-stack-bar-active-a4h9r8",
13420
13360
  "colorBackgroundNotificationStackBarHover": "--color-background-notification-stack-bar-hover-jh82oo",
13421
13361
  "colorBackgroundPopover": "--color-background-popover-e20fy8",
13422
- "colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-9zs42p",
13423
- "colorBackgroundProgressBarValueInFlash": "--color-background-progress-bar-value-in-flash-q2h8w5",
13424
- "colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-4755ec",
13425
- "colorBackgroundProgressBarInFlash": "--color-background-progress-bar-in-flash-f4k60b",
13362
+ "colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-69ydqg",
13363
+ "colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-j8kyxd",
13426
13364
  "colorBackgroundSegmentActive": "--color-background-segment-active-1u2ldl",
13427
13365
  "colorBackgroundSegmentDefault": "--color-background-segment-default-b0r494",
13428
13366
  "colorBackgroundSegmentDisabled": "--color-background-segment-disabled-m2a5t7",
package/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "cc088a74f3406352745b8270046b98cb0282d38f"
2
+ "commit": "ed206118e11bd3d641deb2325b1b4cd5be2874df"
3
3
  }
package/package.json CHANGED
@@ -159,7 +159,7 @@
159
159
  "./internal/base-component/index.js",
160
160
  "./internal/base-component/styles.css.js"
161
161
  ],
162
- "version": "3.0.1191",
162
+ "version": "3.0.1193",
163
163
  "repository": {
164
164
  "type": "git",
165
165
  "url": "https://github.com/cloudscape-design/components.git"
package/progress-bar/interfaces.d.ts CHANGED
@@ -16,7 +16,7 @@ export interface ProgressBarProps extends BaseComponentProps {
16
16
  /**
17
17
  * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:
18
18
  *
19
- * - `"flash"` - Use this variatn when using the progress bar within a flash component.
19
+ * - `"flash"` - Use this variant when using the progress bar within a flash component.
20
20
  * Note that the result button isn't displayed when using this variant.
21
21
  * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.
22
22
  * - `"key-value"` - Use this variant when using the progress bar within the key-value pairs pattern.
package/progress-bar/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n /**\n * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n */\n value?: number;\n\n /**\n * Specifies the status of the progress bar. You can set it to one of the following:\n *\n * - `\"in-progress\"` - Displays a progress bar.\n * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n * `resultText`, and a result button.\n */\n status?: ProgressBarProps.Status;\n\n /**\n * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n *\n * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n * Note that the result button isn't displayed when using this variant.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n * - `\"standalone\"` Use in all other cases. This is the default value.\n */\n variant?: ProgressBarProps.Variant;\n\n /**\n * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n * If `resultButtonText` is empty, the result button isn't displayed.\n *\n * Note: If you use the `flash` variant, the result button isn't displayed.\n * Add a button using the `action` property of the flashbar item instead.\n */\n resultButtonText?: string;\n\n /**\n * Adds an `aria-label` to the progress bar.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the progress bar.\n */\n ariaLabelledby?: string;\n\n /**\n * Adds `aria-describedby` to the progress bar.\n */\n ariaDescribedby?: string;\n\n /**\n * Short description of the operation that appears at the top of the component.\n *\n * Make sure that you always provide a label for accessibility.\n */\n label?: React.ReactNode;\n\n /**\n * More detailed information about the operation that appears below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Information that's displayed below the progress bar or status text.\n */\n additionalInfo?: React.ReactNode;\n\n /**\n * Content that's displayed when `status` is set to `error` or `success`.\n */\n resultText?: React.ReactNode;\n\n /**\n * Called when the user clicks the result state button.\n *\n * Note: If you are using the `flash` variant, the result button isn't displayed.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n */\n onResultButtonClick?: NonCancelableEventHandler;\n\n /**\n * @awsuiSystem core\n */\n style?: ProgressBarProps.Style;\n}\n\nexport namespace ProgressBarProps {\n export type Status = 'in-progress' | 'success' | 'error';\n export type Variant = 'standalone' | 'flash' | 'key-value';\n\n export interface Style {\n progressBar?: {\n backgroundColor?: string;\n borderRadius?: string;\n height?: string;\n };\n progressValue?: {\n backgroundColor?: string;\n };\n progressPercentage?: {\n color?: string;\n fontSize?: string;\n fontWeight?: string;\n };\n }\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n /**\n * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n */\n value?: number;\n\n /**\n * Specifies the status of the progress bar. You can set it to one of the following:\n *\n * - `\"in-progress\"` - Displays a progress bar.\n * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n * `resultText`, and a result button.\n */\n status?: ProgressBarProps.Status;\n\n /**\n * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n *\n * - `\"flash\"` - Use this variant when using the progress bar within a flash component.\n * Note that the result button isn't displayed when using this variant.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n * - `\"standalone\"` Use in all other cases. This is the default value.\n */\n variant?: ProgressBarProps.Variant;\n\n /**\n * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n * If `resultButtonText` is empty, the result button isn't displayed.\n *\n * Note: If you use the `flash` variant, the result button isn't displayed.\n * Add a button using the `action` property of the flashbar item instead.\n */\n resultButtonText?: string;\n\n /**\n * Adds an `aria-label` to the progress bar.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the progress bar.\n */\n ariaLabelledby?: string;\n\n /**\n * Adds `aria-describedby` to the progress bar.\n */\n ariaDescribedby?: string;\n\n /**\n * Short description of the operation that appears at the top of the component.\n *\n * Make sure that you always provide a label for accessibility.\n */\n label?: React.ReactNode;\n\n /**\n * More detailed information about the operation that appears below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Information that's displayed below the progress bar or status text.\n */\n additionalInfo?: React.ReactNode;\n\n /**\n * Content that's displayed when `status` is set to `error` or `success`.\n */\n resultText?: React.ReactNode;\n\n /**\n * Called when the user clicks the result state button.\n *\n * Note: If you are using the `flash` variant, the result button isn't displayed.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n */\n onResultButtonClick?: NonCancelableEventHandler;\n\n /**\n * @awsuiSystem core\n */\n style?: ProgressBarProps.Style;\n}\n\nexport namespace ProgressBarProps {\n export type Status = 'in-progress' | 'success' | 'error';\n export type Variant = 'standalone' | 'flash' | 'key-value';\n\n export interface Style {\n progressBar?: {\n backgroundColor?: string;\n borderRadius?: string;\n height?: string;\n };\n progressValue?: {\n backgroundColor?: string;\n };\n progressPercentage?: {\n color?: string;\n fontSize?: string;\n fontWeight?: string;\n };\n }\n}\n"]}
package/progress-bar/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,GAAI,yEAAyE,aAAa,gBAuC9G,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAAoC,cAAc,gBAM3E,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,8DAA8D,gBAAgB,gBAqBzG,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,GAAI,yEAAyE,aAAa,gBAmC9G,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAAoC,cAAc,gBAM3E,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,8DAA8D,gBAAgB,gBAqBzG,CAAC"}
package/progress-bar/internal.js CHANGED
@@ -18,7 +18,7 @@ export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDesc
18
18
  const progressValueStyles = getProgressValueStyles(style);
19
19
  const progressPercentageStyles = getProgressPercentageStyles(style);
20
20
  return (React.createElement("div", { className: styles['progress-container'] },
21
- React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby, style: {
21
+ React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby, style: {
22
22
  ...(progressBarStyles || {}),
23
23
  ...(progressValueStyles || {}),
24
24
  } }),
package/progress-bar/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';\n\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n value: number;\n isInFlash: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n style?: ProgressBarProps.Style;\n}\n\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => {\n const roundedValue = Math.round(value);\n const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n const progressBarStyles = getProgressStyles(style);\n const progressValueStyles = getProgressValueStyles(style);\n const progressPercentageStyles = getProgressPercentageStyles(style);\n\n return (\n <div className={styles['progress-container']}>\n <progress\n className={clsx(\n styles.progress,\n progressValue >= MAX_VALUE && styles.complete,\n isInFlash && styles['progress-in-flash']\n )}\n max={MAX_VALUE}\n value={progressValue}\n aria-label={ariaLabel}\n // Ensures aria-label takes precedence over aria-labelledby\n aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n aria-describedby={ariaDescribedby}\n style={{\n ...(progressBarStyles || {}),\n ...(progressValueStyles || {}),\n }}\n />\n <span aria-hidden=\"true\" className={styles['percentage-container']}>\n <InternalBox\n className={styles.percentage}\n variant=\"small\"\n color={isInFlash ? 'inherit' : undefined}\n nativeAttributes={progressPercentageStyles ? { style: progressPercentageStyles } : undefined}\n >\n {`${progressValue}%`}\n </InternalBox>\n </span>\n </div>\n );\n};\n\ninterface SmallTextProps {\n color?: BoxProps.Color;\n id?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n return (\n <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color} id={id}>\n {children}\n </InternalBox>\n );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n return (\n <div className={styles['result-button']}>\n <InternalButton formAction=\"none\" onClick={onClick}>\n {children}\n </InternalButton>\n </div>\n );\n};\n\ninterface ResultStateProps {\n isInFlash: boolean;\n resultText: React.ReactNode;\n resultButtonText?: string;\n status: ProgressBarProps.Status;\n onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n const hasResultButton = !!resultButtonText;\n\n if (isInFlash) {\n return (\n <div className={styles[`result-container-${status}`]}>\n <span className={styles['result-text']}>{resultText}</span>\n </div>\n );\n }\n\n return (\n <div className={styles[`result-container-${status}`]}>\n <span className={clsx(hasResultButton && styles['with-result-button'])}>\n <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n <span className={styles['result-text']}>{resultText}</span>\n </InternalStatusIndicator>\n </span>\n {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';\n\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n value: number;\n isInFlash: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n style?: ProgressBarProps.Style;\n}\n\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => {\n const roundedValue = Math.round(value);\n const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n const progressBarStyles = getProgressStyles(style);\n const progressValueStyles = getProgressValueStyles(style);\n const progressPercentageStyles = getProgressPercentageStyles(style);\n\n return (\n <div className={styles['progress-container']}>\n <progress\n className={clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete)}\n max={MAX_VALUE}\n value={progressValue}\n aria-label={ariaLabel}\n // Ensures aria-label takes precedence over aria-labelledby\n aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n aria-describedby={ariaDescribedby}\n style={{\n ...(progressBarStyles || {}),\n ...(progressValueStyles || {}),\n }}\n />\n <span aria-hidden=\"true\" className={styles['percentage-container']}>\n <InternalBox\n className={styles.percentage}\n variant=\"small\"\n color={isInFlash ? 'inherit' : undefined}\n nativeAttributes={progressPercentageStyles ? { style: progressPercentageStyles } : undefined}\n >\n {`${progressValue}%`}\n </InternalBox>\n </span>\n </div>\n );\n};\n\ninterface SmallTextProps {\n color?: BoxProps.Color;\n id?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n return (\n <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color} id={id}>\n {children}\n </InternalBox>\n );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n return (\n <div className={styles['result-button']}>\n <InternalButton formAction=\"none\" onClick={onClick}>\n {children}\n </InternalButton>\n </div>\n );\n};\n\ninterface ResultStateProps {\n isInFlash: boolean;\n resultText: React.ReactNode;\n resultButtonText?: string;\n status: ProgressBarProps.Status;\n onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n const hasResultButton = !!resultButtonText;\n\n if (isInFlash) {\n return (\n <div className={styles[`result-container-${status}`]}>\n <span className={styles['result-text']}>{resultText}</span>\n </div>\n );\n }\n\n return (\n <div className={styles[`result-container-${status}`]}>\n <span className={clsx(hasResultButton && styles['with-result-button'])}>\n <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n <span className={styles['result-text']}>{resultText}</span>\n </InternalStatusIndicator>\n </span>\n {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n </div>\n );\n};\n"]}