@cloudscape-design/components 3.0.1389 → 3.0.1391

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 (33) hide show
  1. package/i18n/utils/i18n-formatter.d.ts.map +1 -1
  2. package/i18n/utils/i18n-formatter.js +36 -5
  3. package/i18n/utils/i18n-formatter.js.map +1 -1
  4. package/internal/base-component/styles.scoped.css +1 -1
  5. package/internal/components/radio-button/index.d.ts +4 -0
  6. package/internal/components/radio-button/index.d.ts.map +1 -1
  7. package/internal/components/radio-button/index.js +10 -4
  8. package/internal/components/radio-button/index.js.map +1 -1
  9. package/internal/components/radio-button/styles.css.js +7 -7
  10. package/internal/components/radio-button/styles.scoped.css +40 -33
  11. package/internal/components/radio-button/styles.selectors.js +7 -7
  12. package/internal/environment.js +2 -2
  13. package/internal/environment.json +2 -2
  14. package/internal/generated/theming/index.cjs +2 -0
  15. package/internal/generated/theming/index.d.cts +9 -0
  16. package/internal/generated/theming/index.d.ts +9 -0
  17. package/internal/generated/theming/index.js +2 -0
  18. package/internal/manifest.json +1 -1
  19. package/manifest.json +2 -2
  20. package/package.json +1 -1
  21. package/popover/styles.css.js +58 -58
  22. package/popover/styles.scoped.css +96 -91
  23. package/popover/styles.selectors.js +58 -58
  24. package/radio-button/styles.css.js +1 -1
  25. package/radio-button/styles.scoped.css +34 -1
  26. package/radio-button/styles.selectors.js +1 -1
  27. package/toggle/internal.d.ts +6 -0
  28. package/toggle/internal.d.ts.map +1 -1
  29. package/toggle/internal.js +3 -3
  30. package/toggle/internal.js.map +1 -1
  31. package/toggle/styles.css.js +10 -10
  32. package/toggle/styles.scoped.css +73 -36
  33. package/toggle/styles.selectors.js +10 -10
package/popover/styles.selectors.js CHANGED
@@ -2,63 +2,63 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "arrow": "awsui_arrow_xjuzf_147y2_13",
6
- "arrow-outer": "awsui_arrow-outer_xjuzf_147y2_17",
7
- "arrow-inner": "awsui_arrow-inner_xjuzf_147y2_17",
8
- "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_147y2_59",
9
- "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_147y2_59",
10
- "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_147y2_62",
11
- "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_147y2_62",
12
- "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_147y2_65",
13
- "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_147y2_65",
14
- "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_147y2_65",
15
- "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_147y2_65",
16
- "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_147y2_68",
17
- "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_147y2_68",
18
- "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_147y2_68",
19
- "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_147y2_68",
20
- "arrow-variant-info": "awsui_arrow-variant-info_xjuzf_147y2_72",
21
- "body": "awsui_body_xjuzf_147y2_83",
22
- "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_147y2_119",
23
- "body-variant-chart": "awsui_body-variant-chart_xjuzf_147y2_122",
24
- "has-dismiss": "awsui_has-dismiss_xjuzf_147y2_127",
25
- "dismiss": "awsui_dismiss_xjuzf_147y2_132",
26
- "dismiss-control": "awsui_dismiss-control_xjuzf_147y2_140",
27
- "header-row": "awsui_header-row_xjuzf_147y2_144",
28
- "header": "awsui_header_xjuzf_147y2_144",
29
- "content": "awsui_content_xjuzf_147y2_173",
30
- "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_147y2_182",
31
- "container": "awsui_container_xjuzf_147y2_190",
32
- "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_147y2_201",
33
- "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_147y2_201",
34
- "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_147y2_201",
35
- "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_147y2_206",
36
- "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_147y2_206",
37
- "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_147y2_206",
38
- "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_147y2_211",
39
- "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_147y2_211",
40
- "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_147y2_216",
41
- "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_147y2_216",
42
- "container-body": "awsui_container-body_xjuzf_147y2_222",
43
- "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_147y2_262",
44
- "container-body-size-small": "awsui_container-body-size-small_xjuzf_147y2_267",
45
- "fixed-width": "awsui_fixed-width_xjuzf_147y2_270",
46
- "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_147y2_274",
47
- "container-body-size-large": "awsui_container-body-size-large_xjuzf_147y2_281",
48
- "container-arrow": "awsui_container-arrow_xjuzf_147y2_201",
49
- "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_147y2_331",
50
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_147y2_1",
51
- "refresh": "awsui_refresh_xjuzf_147y2_385",
52
- "root": "awsui_root_xjuzf_147y2_407",
53
- "no-wrap": "awsui_no-wrap_xjuzf_147y2_439",
54
- "trigger-type-text-inline": "awsui_trigger-type-text-inline_xjuzf_147y2_442",
55
- "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_147y2_442",
56
- "trigger-type-text": "awsui_trigger-type-text_xjuzf_147y2_442",
57
- "root-filtering-token": "awsui_root-filtering-token_xjuzf_147y2_464",
58
- "trigger": "awsui_trigger_xjuzf_147y2_442",
59
- "in-inline-token": "awsui_in-inline-token_xjuzf_147y2_506",
60
- "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_147y2_554",
61
- "popover-inline-content": "awsui_popover-inline-content_xjuzf_147y2_558",
62
- "hover-area": "awsui_hover-area_xjuzf_147y2_562"
5
+ "arrow": "awsui_arrow_xjuzf_19x1k_13",
6
+ "arrow-outer": "awsui_arrow-outer_xjuzf_19x1k_17",
7
+ "arrow-inner": "awsui_arrow-inner_xjuzf_19x1k_17",
8
+ "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_19x1k_59",
9
+ "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_19x1k_59",
10
+ "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_19x1k_62",
11
+ "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_19x1k_62",
12
+ "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_19x1k_65",
13
+ "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_19x1k_65",
14
+ "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_19x1k_65",
15
+ "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_19x1k_65",
16
+ "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_19x1k_68",
17
+ "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_19x1k_68",
18
+ "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_19x1k_68",
19
+ "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_19x1k_68",
20
+ "arrow-variant-info": "awsui_arrow-variant-info_xjuzf_19x1k_72",
21
+ "body": "awsui_body_xjuzf_19x1k_83",
22
+ "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_19x1k_119",
23
+ "body-variant-chart": "awsui_body-variant-chart_xjuzf_19x1k_122",
24
+ "has-dismiss": "awsui_has-dismiss_xjuzf_19x1k_127",
25
+ "dismiss": "awsui_dismiss_xjuzf_19x1k_132",
26
+ "dismiss-control": "awsui_dismiss-control_xjuzf_19x1k_140",
27
+ "header-row": "awsui_header-row_xjuzf_19x1k_144",
28
+ "header": "awsui_header_xjuzf_19x1k_144",
29
+ "content": "awsui_content_xjuzf_19x1k_173",
30
+ "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_19x1k_182",
31
+ "container": "awsui_container_xjuzf_19x1k_190",
32
+ "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_19x1k_201",
33
+ "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_19x1k_201",
34
+ "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_19x1k_201",
35
+ "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_19x1k_206",
36
+ "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_19x1k_206",
37
+ "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_19x1k_206",
38
+ "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_19x1k_211",
39
+ "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_19x1k_211",
40
+ "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_19x1k_216",
41
+ "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_19x1k_216",
42
+ "container-body": "awsui_container-body_xjuzf_19x1k_222",
43
+ "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_19x1k_262",
44
+ "container-body-size-small": "awsui_container-body-size-small_xjuzf_19x1k_267",
45
+ "fixed-width": "awsui_fixed-width_xjuzf_19x1k_270",
46
+ "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_19x1k_274",
47
+ "container-body-size-large": "awsui_container-body-size-large_xjuzf_19x1k_281",
48
+ "container-arrow": "awsui_container-arrow_xjuzf_19x1k_201",
49
+ "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_19x1k_331",
50
+ "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_19x1k_1",
51
+ "refresh": "awsui_refresh_xjuzf_19x1k_385",
52
+ "root": "awsui_root_xjuzf_19x1k_412",
53
+ "no-wrap": "awsui_no-wrap_xjuzf_19x1k_444",
54
+ "trigger-type-text-inline": "awsui_trigger-type-text-inline_xjuzf_19x1k_447",
55
+ "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_19x1k_447",
56
+ "trigger-type-text": "awsui_trigger-type-text_xjuzf_19x1k_447",
57
+ "root-filtering-token": "awsui_root-filtering-token_xjuzf_19x1k_469",
58
+ "trigger": "awsui_trigger_xjuzf_19x1k_447",
59
+ "in-inline-token": "awsui_in-inline-token_xjuzf_19x1k_511",
60
+ "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_19x1k_559",
61
+ "popover-inline-content": "awsui_popover-inline-content_xjuzf_19x1k_563",
62
+ "hover-area": "awsui_hover-area_xjuzf_19x1k_567"
63
63
  };
64
64
 
package/radio-button/styles.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "radio-button": "awsui_radio-button_zdbjz_xldf4_9"
4
+ "radio-button": "awsui_radio-button_zdbjz_wx1gq_42"
5
5
  };
6
6
 
package/radio-button/styles.scoped.css CHANGED
@@ -6,7 +6,40 @@
6
6
  /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
7
7
  /* Style used for links in slots/components that are text heavy, to help links stand out among
8
8
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
9
- .awsui_radio-button_zdbjz_xldf4_9:not(#\9) {
9
+ @property --awsui-style-color {
10
+ syntax: "*";
11
+ inherits: false;
12
+ }
13
+ @property --awsui-style-background-color {
14
+ syntax: "*";
15
+ inherits: false;
16
+ }
17
+ @property --awsui-style-border-color {
18
+ syntax: "*";
19
+ inherits: false;
20
+ }
21
+ @property --awsui-style-focus-ring-color {
22
+ syntax: "*";
23
+ inherits: false;
24
+ }
25
+ @property --awsui-style-focus-ring-width {
26
+ syntax: "*";
27
+ inherits: false;
28
+ }
29
+ @property --awsui-style-focus-ring-radius {
30
+ syntax: "*";
31
+ inherits: false;
32
+ }
33
+ @property --awsui-style-focus-ring-gutter-block {
34
+ syntax: "*";
35
+ inherits: false;
36
+ }
37
+ @property --awsui-style-focus-ring-gutter-inline {
38
+ syntax: "*";
39
+ inherits: false;
40
+ }
41
+ /* awsui:style-api-slot name=control tokens=color, background-color, border-color, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline */
42
+ .awsui_radio-button_zdbjz_wx1gq_42:not(#\9) {
10
43
  border-collapse: separate;
11
44
  border-spacing: 0;
12
45
  box-sizing: border-box;
package/radio-button/styles.selectors.js CHANGED
@@ -2,6 +2,6 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "radio-button": "awsui_radio-button_zdbjz_xldf4_9"
5
+ "radio-button": "awsui_radio-button_zdbjz_wx1gq_42"
6
6
  };
7
7
 
package/toggle/internal.d.ts CHANGED
@@ -2,7 +2,13 @@ import React from 'react';
2
2
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
3
3
  import { ToggleProps } from './interfaces';
4
4
  interface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {
5
+ styleClassNames?: StyleClassNames;
5
6
  __injectAnalyticsComponentMetadata?: boolean;
6
7
  }
8
+ interface StyleClassNames {
9
+ control?: string;
10
+ label?: string;
11
+ description?: string;
12
+ }
7
13
  declare const InternalToggle: React.ForwardRefExoticComponent<InternalToggleProps & React.RefAttributes<ToggleProps.Ref>>;
8
14
  export default InternalToggle;
package/toggle/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,cAAc,6FAuGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAGD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,6FA0GnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/toggle/internal.js CHANGED
@@ -11,7 +11,7 @@ import useForwardFocus from '../internal/hooks/forward-focus';
11
11
  import WithNativeAttributes from '../internal/utils/with-native-attributes';
12
12
  import { getAbstractSwitchStyles, getStyledControlStyle } from './style';
13
13
  import styles from './styles.css.js';
14
- const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, nativeInputAttributes, __internalRootRef, style, __injectAnalyticsComponentMetadata, ...rest }, ref) => {
14
+ const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, nativeInputAttributes, __internalRootRef, style, styleClassNames, __injectAnalyticsComponentMetadata, ...rest }, ref) => {
15
15
  const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
16
16
  const baseProps = getBaseProps(rest);
17
17
  const checkboxRef = useRef(null);
@@ -30,11 +30,11 @@ const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, r
30
30
  analyticsMetadata.action = !checked ? 'select' : 'deselect';
31
31
  }
32
32
  useForwardFocus(ref, checkboxRef);
33
- return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], {
33
+ return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.control, styles['toggle-control'], {
34
34
  [styles['toggle-control-checked']]: checked,
35
35
  [styles['toggle-control-disabled']]: disabled,
36
36
  [styles['toggle-control-readonly']]: readOnly,
37
- }), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Toggle", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-disabled": readOnly && !disabled ? 'true' : undefined, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
37
+ }), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, labelClassName: styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.label, description: description, descriptionClassName: styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Toggle", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-disabled": readOnly && !disabled ? 'true' : undefined, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
38
38
  // empty handler to suppress React controllability warning
39
39
  onChange: () => { } })), onClick: () => {
40
40
  var _a;
package/toggle/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataToggleComponent } from './analytics-metadata/interfaces';\nimport { ToggleProps } from './interfaces';\nimport { getAbstractSwitchStyles, getStyledControlStyle } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n (\n {\n controlId,\n checked,\n name,\n disabled,\n readOnly,\n children,\n description,\n ariaLabel,\n ariaControls,\n onFocus,\n onBlur,\n onChange,\n nativeInputAttributes,\n __internalRootRef,\n style,\n __injectAnalyticsComponentMetadata,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataToggleComponent = {\n name: 'awsui.Toggle',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n useForwardFocus(ref, checkboxRef);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(styles['toggle-control'], {\n [styles['toggle-control-checked']]: checked,\n [styles['toggle-control-disabled']]: disabled,\n [styles['toggle-control-readonly']]: readOnly,\n })}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n nativeControl={nativeControlProps => (\n <WithNativeAttributes\n {...nativeControlProps}\n tag=\"input\"\n componentName=\"Toggle\"\n nativeAttributes={nativeInputAttributes}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(onChange, { checked: !checked });\n }}\n styledControl={\n /*Using span, not div for HTML validity*/\n <span\n className={clsx(styles['toggle-handle'], {\n [styles['toggle-handle-checked']]: checked,\n [styles['toggle-handle-disabled']]: disabled,\n [styles['toggle-handle-readonly']]: readOnly,\n })}\n style={getStyledControlStyle(style, checked, disabled, readOnly)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalToggle;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataToggleComponent } from './analytics-metadata/interfaces';\nimport { ToggleProps } from './interfaces';\nimport { getAbstractSwitchStyles, getStyledControlStyle } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {\n styleClassNames?: StyleClassNames;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\n// Style API v2\ninterface StyleClassNames {\n control?: string;\n label?: string;\n description?: string;\n}\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n (\n {\n controlId,\n checked,\n name,\n disabled,\n readOnly,\n children,\n description,\n ariaLabel,\n ariaControls,\n onFocus,\n onBlur,\n onChange,\n nativeInputAttributes,\n __internalRootRef,\n style,\n styleClassNames,\n __injectAnalyticsComponentMetadata,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataToggleComponent = {\n name: 'awsui.Toggle',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n useForwardFocus(ref, checkboxRef);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(styleClassNames?.control, styles['toggle-control'], {\n [styles['toggle-control-checked']]: checked,\n [styles['toggle-control-disabled']]: disabled,\n [styles['toggle-control-readonly']]: readOnly,\n })}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n labelClassName={styleClassNames?.label}\n description={description}\n descriptionClassName={styleClassNames?.description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n nativeControl={nativeControlProps => (\n <WithNativeAttributes\n {...nativeControlProps}\n tag=\"input\"\n componentName=\"Toggle\"\n nativeAttributes={nativeInputAttributes}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(onChange, { checked: !checked });\n }}\n styledControl={\n /*Using span, not div for HTML validity*/\n <span\n className={clsx(styles['toggle-handle'], {\n [styles['toggle-handle-checked']]: checked,\n [styles['toggle-handle-disabled']]: disabled,\n [styles['toggle-handle-readonly']]: readOnly,\n })}\n style={getStyledControlStyle(style, checked, disabled, readOnly)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalToggle;\n"]}
package/toggle/styles.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_4yi2u_4zozx_9",
5
- "outline": "awsui_outline_4yi2u_4zozx_42",
6
- "toggle-control": "awsui_toggle-control_4yi2u_4zozx_65",
7
- "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_4zozx_78",
8
- "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_4zozx_81",
9
- "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_4zozx_87",
10
- "toggle-handle": "awsui_toggle-handle_4yi2u_4zozx_91",
11
- "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_4zozx_116",
12
- "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_4zozx_123",
13
- "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_4zozx_127"
4
+ "root": "awsui_root_4yi2u_1yvqv_40",
5
+ "outline": "awsui_outline_4yi2u_1yvqv_73",
6
+ "toggle-control": "awsui_toggle-control_4yi2u_1yvqv_95",
7
+ "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1yvqv_115",
8
+ "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1yvqv_118",
9
+ "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1yvqv_124",
10
+ "toggle-handle": "awsui_toggle-handle_4yi2u_1yvqv_128",
11
+ "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1yvqv_153",
12
+ "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1yvqv_160",
13
+ "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1yvqv_164"
14
14
  };
15
15
 
package/toggle/styles.scoped.css CHANGED
@@ -6,7 +6,38 @@
6
6
  /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
7
7
  /* Style used for links in slots/components that are text heavy, to help links stand out among
8
8
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
9
- .awsui_root_4yi2u_4zozx_9:not(#\9) {
9
+ @property --awsui-style-color {
10
+ syntax: "*";
11
+ inherits: false;
12
+ }
13
+ @property --awsui-style-background-color {
14
+ syntax: "*";
15
+ inherits: false;
16
+ }
17
+ @property --awsui-style-focus-ring-color {
18
+ syntax: "*";
19
+ inherits: false;
20
+ }
21
+ @property --awsui-style-focus-ring-width {
22
+ syntax: "*";
23
+ inherits: false;
24
+ }
25
+ @property --awsui-style-focus-ring-radius {
26
+ syntax: "*";
27
+ inherits: false;
28
+ }
29
+ @property --awsui-style-focus-ring-gutter-block {
30
+ syntax: "*";
31
+ inherits: false;
32
+ }
33
+ @property --awsui-style-focus-ring-gutter-inline {
34
+ syntax: "*";
35
+ inherits: false;
36
+ }
37
+ /* awsui:style-api-slot name=control tokens=color, background-color, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline */
38
+ /* awsui:style-api-slot name=label tokens=color */
39
+ /* awsui:style-api-slot name=description tokens=color */
40
+ .awsui_root_4yi2u_1yvqv_40:not(#\9) {
10
41
  border-collapse: separate;
11
42
  border-spacing: 0;
12
43
  box-sizing: border-box;
@@ -39,63 +70,69 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
39
70
  display: flex;
40
71
  }
41
72
 
42
- .awsui_outline_4yi2u_4zozx_42:not(#\9) {
43
- --awsui-style-focus-ring-box-shadow-66120l: 0 0 0 var(--awsui-style-focus-ring-border-width-66120l, 2px) var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #006ce0));
73
+ .awsui_outline_4yi2u_1yvqv_73:not(#\9) {
44
74
  position: relative;
45
75
  }
46
- .awsui_outline_4yi2u_4zozx_42:not(#\9) {
76
+ .awsui_outline_4yi2u_1yvqv_73:not(#\9) {
47
77
  outline: 2px dotted transparent;
48
- outline-offset: calc(2px - 1px);
78
+ outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, 2px) - 1px);
49
79
  }
50
- .awsui_outline_4yi2u_4zozx_42:not(#\9)::before {
80
+ .awsui_outline_4yi2u_1yvqv_73:not(#\9)::before {
51
81
  content: " ";
52
82
  display: block;
53
83
  position: absolute;
54
- inset-inline-start: calc(-1 * 2px);
55
- inset-block-start: calc(-1 * 2px);
56
- inline-size: calc(100% + 2px + 2px);
57
- block-size: calc(100% + 2px + 2px);
58
- border-start-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
59
- border-start-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
60
- border-end-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
61
- border-end-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
62
- box-shadow: var(--awsui-style-focus-ring-box-shadow-66120l);
84
+ inset-inline-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-inline, 2px));
85
+ inset-block-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-block, 2px));
86
+ inline-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-inline, 2px) + var(--awsui-internal-style-focus-ring-gutter-inline, 2px));
87
+ block-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-block, 2px) + var(--awsui-internal-style-focus-ring-gutter-block, 2px));
88
+ border-start-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
89
+ border-start-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
90
+ border-end-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
91
+ border-end-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
92
+ box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-style-focus-ring-border-width-66120l, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #006ce0)));
63
93
  }
64
94
 
65
- .awsui_toggle-control_4yi2u_4zozx_65:not(#\9) {
95
+ .awsui_toggle-control_4yi2u_1yvqv_95:not(#\9) {
96
+ --awsui-internal-style-color: var(--awsui-style-color);
97
+ --awsui-internal-style-background-color: var(--awsui-style-background-color);
98
+ --awsui-internal-style-focus-ring-color: var(--awsui-style-focus-ring-color);
99
+ --awsui-internal-style-focus-ring-width: var(--awsui-style-focus-ring-width);
100
+ --awsui-internal-style-focus-ring-radius: var(--awsui-style-focus-ring-radius);
101
+ --awsui-internal-style-focus-ring-gutter-block: var(--awsui-style-focus-ring-gutter-block);
102
+ --awsui-internal-style-focus-ring-gutter-inline: var(--awsui-style-focus-ring-gutter-inline);
66
103
  forced-color-adjust: none;
67
104
  margin-block-start: calc((var(--line-height-body-m-5xw6xo, 20px) - 16px) / 2);
68
105
  min-block-size: 16px;
69
106
  min-inline-size: 24px;
70
107
  block-size: 16px;
71
108
  inline-size: 24px;
72
- background: var(--color-background-toggle-default-quxg9w, #424650);
109
+ background: var(--awsui-internal-style-background-color, var(--color-background-toggle-default-quxg9w, #424650));
73
110
  border-start-start-radius: 8px;
74
111
  border-start-end-radius: 8px;
75
112
  border-end-start-radius: 8px;
76
113
  border-end-end-radius: 8px;
77
114
  }
78
- .awsui_toggle-control-checked_4yi2u_4zozx_78:not(#\9) {
79
- background: var(--color-background-control-checked-ksqwhc, #006ce0);
115
+ .awsui_toggle-control-checked_4yi2u_1yvqv_115:not(#\9) {
116
+ background: var(--awsui-internal-style-background-color, var(--color-background-control-checked-ksqwhc, #006ce0));
80
117
  }
81
- .awsui_toggle-control-disabled_4yi2u_4zozx_81:not(#\9) {
82
- background: var(--color-background-control-disabled-m61b8s, #dedee3);
118
+ .awsui_toggle-control-disabled_4yi2u_1yvqv_118:not(#\9) {
119
+ background: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #dedee3));
83
120
  }
84
- .awsui_toggle-control-disabled_4yi2u_4zozx_81.awsui_toggle-control-checked_4yi2u_4zozx_78:not(#\9) {
85
- background: var(--color-background-toggle-checked-disabled-81loy3, #b8e7ff);
121
+ .awsui_toggle-control-disabled_4yi2u_1yvqv_118.awsui_toggle-control-checked_4yi2u_1yvqv_115:not(#\9) {
122
+ background: var(--awsui-internal-style-background-color, var(--color-background-toggle-checked-disabled-81loy3, #b8e7ff));
86
123
  }
87
- .awsui_toggle-control-readonly_4yi2u_4zozx_87:not(#\9) {
88
- background: var(--color-background-control-disabled-m61b8s, #dedee3);
124
+ .awsui_toggle-control-readonly_4yi2u_1yvqv_124:not(#\9) {
125
+ background: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #dedee3));
89
126
  }
90
127
 
91
- .awsui_toggle-handle_4yi2u_4zozx_91:not(#\9) {
128
+ .awsui_toggle-handle_4yi2u_1yvqv_128:not(#\9) {
92
129
  display: block;
93
130
  position: absolute;
94
131
  border-start-start-radius: 6px;
95
132
  border-start-end-radius: 6px;
96
133
  border-end-start-radius: 6px;
97
134
  border-end-end-radius: 6px;
98
- background: var(--color-foreground-control-default-poakg0, #ffffff);
135
+ background: var(--awsui-internal-style-color, var(--color-foreground-control-default-poakg0, #ffffff));
99
136
  box-shadow: 1px 1px var(--color-shadow-toggle-handle-h7hwyu, rgba(0, 0, 0, 0.25));
100
137
  inline-size: 12px;
101
138
  block-size: 12px;
@@ -104,29 +141,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
104
141
  transition: transform var(--motion-duration-fast-yb0m8k, 90ms) var(--motion-easing-ease-out-quart-k5q7pi, cubic-bezier(0.165, 0.84, 0.44, 1)), background-color var(--motion-duration-fast-yb0m8k, 90ms) var(--motion-easing-ease-out-quart-k5q7pi, cubic-bezier(0.165, 0.84, 0.44, 1));
105
142
  }
106
143
  @media (prefers-reduced-motion: reduce) {
107
- .awsui_toggle-handle_4yi2u_4zozx_91:not(#\9) {
144
+ .awsui_toggle-handle_4yi2u_1yvqv_128:not(#\9) {
108
145
  animation: none;
109
146
  transition: none;
110
147
  }
111
148
  }
112
- .awsui-motion-disabled .awsui_toggle-handle_4yi2u_4zozx_91:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_4zozx_91:not(#\9) {
149
+ .awsui-motion-disabled .awsui_toggle-handle_4yi2u_1yvqv_128:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1yvqv_128:not(#\9) {
113
150
  animation: none;
114
151
  transition: none;
115
152
  }
116
- .awsui_toggle-handle-checked_4yi2u_4zozx_116:not(#\9) {
153
+ .awsui_toggle-handle-checked_4yi2u_1yvqv_153:not(#\9) {
117
154
  transform: translateX(8px);
118
155
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
119
156
  }
120
- .awsui_toggle-handle-checked_4yi2u_4zozx_116:not(#\9):dir(rtl) {
157
+ .awsui_toggle-handle-checked_4yi2u_1yvqv_153:not(#\9):dir(rtl) {
121
158
  transform: translateX(-8px);
122
159
  }
123
- .awsui_toggle-handle-disabled_4yi2u_4zozx_123:not(#\9) {
124
- background: var(--color-foreground-control-disabled-bikivj, #ffffff);
160
+ .awsui_toggle-handle-disabled_4yi2u_1yvqv_160:not(#\9) {
161
+ background: var(--awsui-internal-style-color, var(--color-foreground-control-disabled-bikivj, #ffffff));
125
162
  box-shadow: none;
126
163
  }
127
- .awsui_toggle-handle-readonly_4yi2u_4zozx_127:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_4zozx_123) {
164
+ .awsui_toggle-handle-readonly_4yi2u_1yvqv_164:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1yvqv_160) {
128
165
  box-shadow: none;
129
166
  }
130
- .awsui_toggle-handle-readonly_4yi2u_4zozx_127:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_4zozx_123).awsui_toggle-handle-checked_4yi2u_4zozx_116 {
131
- background: var(--color-foreground-control-read-only-8sqxyy, #656871);
167
+ .awsui_toggle-handle-readonly_4yi2u_1yvqv_164:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1yvqv_160).awsui_toggle-handle-checked_4yi2u_1yvqv_153 {
168
+ background: var(--awsui-internal-style-color, var(--color-foreground-control-read-only-8sqxyy, #656871));
132
169
  }
package/toggle/styles.selectors.js CHANGED
@@ -2,15 +2,15 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_4yi2u_4zozx_9",
6
- "outline": "awsui_outline_4yi2u_4zozx_42",
7
- "toggle-control": "awsui_toggle-control_4yi2u_4zozx_65",
8
- "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_4zozx_78",
9
- "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_4zozx_81",
10
- "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_4zozx_87",
11
- "toggle-handle": "awsui_toggle-handle_4yi2u_4zozx_91",
12
- "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_4zozx_116",
13
- "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_4zozx_123",
14
- "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_4zozx_127"
5
+ "root": "awsui_root_4yi2u_1yvqv_40",
6
+ "outline": "awsui_outline_4yi2u_1yvqv_73",
7
+ "toggle-control": "awsui_toggle-control_4yi2u_1yvqv_95",
8
+ "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1yvqv_115",
9
+ "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1yvqv_118",
10
+ "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1yvqv_124",
11
+ "toggle-handle": "awsui_toggle-handle_4yi2u_1yvqv_128",
12
+ "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1yvqv_153",
13
+ "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1yvqv_160",
14
+ "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1yvqv_164"
15
15
  };
16
16