@cloudscape-design/components-themeable 3.0.1063 → 3.0.1065

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

@@ -8,6 +8,11 @@ export interface ToggleProps extends BaseCheckboxProps {
      */
     children?: React.ReactNode;
     onChange?: NonCancelableEventHandler<ToggleProps.ChangeDetail>;
+    /**
+     * Specifies an object of selectors and properties that are used to apply custom styles.
+     * @awsuiSystem core
+     */
+    style?: ToggleProps.Style;
 }
 export declare namespace ToggleProps {
     interface Ref {
@@ -19,5 +24,36 @@ export declare namespace ToggleProps {
     interface ChangeDetail {
         checked: boolean;
     }
+    interface Style {
+        input: {
+            background?: {
+                checked?: string;
+                default?: string;
+                disabled?: string;
+                readOnly?: string;
+            };
+            handle?: {
+                background?: {
+                    checked?: string;
+                    default?: string;
+                    disabled?: string;
+                    readOnly?: string;
+                };
+            };
+            focusRing?: {
+                borderColor?: string;
+                borderRadius?: string;
+                borderWidth?: string;
+            };
+        };
+        label?: {
+            color?: {
+                checked?: string;
+                default?: string;
+                disabled?: string;
+                readOnly?: string;
+            };
+        };
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/toggle/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAM3B,QAAQ,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;CAChE;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,OAAO,EAAE,OAAO,CAAC;KAClB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/toggle/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAM3B,QAAQ,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/D;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC;CAC3B;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,OAAO,EAAE,OAAO,CAAC;KAClB;IAED,UAAiB,KAAK;QACpB,KAAK,EAAE;YACL,UAAU,CAAC,EAAE;gBACX,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,UAAU,CAAC,EAAE;oBACX,OAAO,CAAC,EAAE,MAAM,CAAC;oBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;oBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;oBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;iBACnB,CAAC;aACH,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;QACF,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;KACH;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/toggle/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseCheckboxProps } from '../checkbox/base-checkbox';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ToggleProps extends BaseCheckboxProps {\n  /**\n   * The control's label that's displayed next to the toggle. Clicking this will invoke a state change.\n   * @displayname label\n   */\n  children?: React.ReactNode;\n\n  /*\n   * Called when the user changes their selection.\n   * The event `detail` contains the current value for the `checked` property.\n   */\n  onChange?: NonCancelableEventHandler<ToggleProps.ChangeDetail>;\n}\n\nexport namespace ToggleProps {\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n\n  export interface ChangeDetail {\n    checked: boolean;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/toggle/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseCheckboxProps } from '../checkbox/base-checkbox';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ToggleProps extends BaseCheckboxProps {\n  /**\n   * The control's label that's displayed next to the toggle. Clicking this will invoke a state change.\n   * @displayname label\n   */\n  children?: React.ReactNode;\n\n  /*\n   * Called when the user changes their selection.\n   * The event `detail` contains the current value for the `checked` property.\n   */\n  onChange?: NonCancelableEventHandler<ToggleProps.ChangeDetail>;\n\n  /**\n   * Specifies an object of selectors and properties that are used to apply custom styles.\n   * @awsuiSystem core\n   */\n  style?: ToggleProps.Style;\n}\n\nexport namespace ToggleProps {\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n\n  export interface ChangeDetail {\n    checked: boolean;\n  }\n\n  export interface Style {\n    input: {\n      background?: {\n        checked?: string;\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n      handle?: {\n        background?: {\n          checked?: string;\n          default?: string;\n          disabled?: string;\n          readOnly?: string;\n        };\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    label?: {\n      color?: {\n        checked?: string;\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n    };\n  }\n}\n"]}

package/lib/internal/template/toggle/internal.d.ts.map

@@ -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;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,cAAc,6FAgGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"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;AAElF,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,6FAmGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/internal/template/toggle/internal.js

@@ -9,9 +9,10 @@ import AbstractSwitch from '../internal/components/abstract-switch';
 import { useFormFieldContext } from '../internal/context/form-field-context';
 import { fireNonCancelableEvent } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
+import { getAbstractSwitchStyles, getStyledControlStyle } from './style';
 import styles from './styles.css.js';
 const InternalToggle = React.forwardRef((_a, ref) => {
-    var { controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null, __injectAnalyticsComponentMetadata } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "readOnly", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef", "__injectAnalyticsComponentMetadata"]);
+    var { controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, style, __internalRootRef = null, __injectAnalyticsComponentMetadata } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "readOnly", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "style", "__internalRootRef", "__injectAnalyticsComponentMetadata"]);
     const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
     const baseProps = getBaseProps(rest);
     const checkboxRef = useRef(null);
@@ -46,7 +47,7 @@ const InternalToggle = React.forwardRef((_a, ref) => {
                 [styles['toggle-handle-checked']]: checked,
                 [styles['toggle-handle-disabled']]: disabled,
                 [styles['toggle-handle-readonly']]: readOnly,
-            }) }), __internalRootRef: __internalRootRef }, getAnalyticsMetadataAttribute(analyticsMetadata))));
+            }), style: getStyledControlStyle(style, checked, disabled, readOnly) }), style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: __internalRootRef }, getAnalyticsMetadataAttribute(analyticsMetadata))));
 });
 export default InternalToggle;
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/toggle/internal.js.map

@@ -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 { GeneratedAnalyticsMetadataToggleComponent } from './analytics-metadata/interfaces';\nimport { ToggleProps } from './interfaces';\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      __internalRootRef = null,\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          <input\n            {...nativeControlProps}\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          />\n        }\n        __internalRootRef={__internalRootRef}\n        {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n      />\n    );\n  }\n);\n\nexport default InternalToggle;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAEL,6BAA6B,GAC9B,MAAM,kEAAkE,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAI9D,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEzE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAiBC,EACD,GAAG,EACH,EAAE;QAnBF,EACE,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,iBAAiB,GAAG,IAAI,EACxB,kCAAkC,OAEnC,EADI,IAAI,cAhBT,qNAiBC,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEnD,MAAM,iBAAiB,GAAuC,EAAE,CAAC;IACjE,MAAM,0BAA0B,GAA8C;QAC5E,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;QACvB,UAAU,EAAE;YACV,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE;SACxB;KACF,CAAC;IAEF,IAAI,kCAAkC,EAAE;QACtC,iBAAiB,CAAC,SAAS,GAAG,0BAA0B,CAAC;KAC1D;IAED,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE;QAC1B,iBAAiB,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;KAC7D;IACD,eAAe,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAElC,OAAO,CACL,oBAAC,cAAc,oBACT,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;YAC/C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,OAAO;YAC3C,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,QAAQ;YAC7C,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,QAAQ;SAC9C,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,IAAI,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,kBAAkB,CAAC,EAAE,CAAC,CACnC,+CACM,kBAAkB,IACtB,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,mBACK,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACzD,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAC9C,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,MAAM,CAAC;YAC5C,0DAA0D;YAC1D,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,IAClB,CACH,EACD,OAAO,EAAE,GAAG,EAAE;;YACZ,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,sBAAsB,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;QAC1D,CAAC,EACD,aAAa;QACX,yCAAyC;QACzC,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE;gBACvC,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,OAAO;gBAC1C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,QAAQ;gBAC5C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,QAAQ;aAC7C,CAAC,EACF,KAAK,EAAE,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,GAChE,EAEJ,KAAK,EAAE,uBAAuB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAClE,iBAAiB,EAAE,iBAAiB,IAChC,6BAA6B,CAAC,iBAAiB,CAAC,EACpD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","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 { 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      style,\n      __internalRootRef = null,\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          <input\n            {...nativeControlProps}\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/lib/internal/template/toggle/style.d.ts

@@ -0,0 +1,4 @@
+import { ToggleProps } from './interfaces';
+export declare function getAbstractSwitchStyles(style: ToggleProps.Style | undefined, checked: boolean | undefined, disabled: boolean | undefined, readOnly: boolean | undefined): {};
+export declare function getStyledControlStyle(style: ToggleProps.Style | undefined, checked: boolean | undefined, disabled: boolean | undefined, readOnly: boolean | undefined): {};
+//# sourceMappingURL=style.d.ts.map

package/lib/internal/template/toggle/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/toggle/style.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,WAAW,CAAC,KAAK,GAAG,SAAS,EACpC,OAAO,EAAE,OAAO,GAAG,SAAS,EAC5B,QAAQ,EAAE,OAAO,GAAG,SAAS,EAC7B,QAAQ,EAAE,OAAO,GAAG,SAAS,MAwB9B;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,WAAW,CAAC,KAAK,GAAG,SAAS,EACpC,OAAO,EAAE,OAAO,GAAG,SAAS,EAC5B,QAAQ,EAAE,OAAO,GAAG,SAAS,EAC7B,QAAQ,EAAE,OAAO,GAAG,SAAS,MAa9B"}

package/lib/internal/template/toggle/style.js

@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import { getComputedAbstractSwitchState } from '../internal/utils/style';
+export function getAbstractSwitchStyles(style, checked, disabled, readOnly) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    let properties = {};
+    if (SYSTEM === 'core' && ((style === null || style === void 0 ? void 0 : style.input) || (style === null || style === void 0 ? void 0 : style.label))) {
+        const computedState = getComputedAbstractSwitchState(checked, disabled, readOnly, false);
+        properties = {
+            control: {
+                background: ((_a = style === null || style === void 0 ? void 0 : style.input) === null || _a === void 0 ? void 0 : _a.background) && style.input.background[computedState],
+            },
+            label: {
+                color: ((_b = style === null || style === void 0 ? void 0 : style.label) === null || _b === void 0 ? void 0 : _b.color) && style.label.color[computedState],
+            },
+            focusRing: {
+                borderColor: (_d = (_c = style === null || style === void 0 ? void 0 : style.input) === null || _c === void 0 ? void 0 : _c.focusRing) === null || _d === void 0 ? void 0 : _d.borderColor,
+                borderRadius: (_f = (_e = style === null || style === void 0 ? void 0 : style.input) === null || _e === void 0 ? void 0 : _e.focusRing) === null || _f === void 0 ? void 0 : _f.borderRadius,
+                borderWidth: (_h = (_g = style === null || style === void 0 ? void 0 : style.input) === null || _g === void 0 ? void 0 : _g.focusRing) === null || _h === void 0 ? void 0 : _h.borderWidth,
+            },
+        };
+    }
+    return properties;
+}
+export function getStyledControlStyle(style, checked, disabled, readOnly) {
+    var _a, _b;
+    let properties = {};
+    if (SYSTEM === 'core' && ((_b = (_a = style === null || style === void 0 ? void 0 : style.input) === null || _a === void 0 ? void 0 : _a.handle) === null || _b === void 0 ? void 0 : _b.background)) {
+        const computedState = getComputedAbstractSwitchState(checked, disabled, readOnly, undefined);
+        properties = {
+            background: style.input.handle.background[computedState],
+        };
+    }
+    return properties;
+}
+//# sourceMappingURL=style.js.map

package/lib/internal/template/toggle/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/toggle/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC;AAGzE,MAAM,UAAU,uBAAuB,CACrC,KAAoC,EACpC,OAA4B,EAC5B,QAA6B,EAC7B,QAA6B;;IAE7B,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA,CAAC,EAAE;QACvD,MAAM,aAAa,GAAG,8BAA8B,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAEzF,UAAU,GAAG;YACX,OAAO,EAAE;gBACP,UAAU,EACR,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,UAAU,KAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,aAAoD,CAAC;aAC3G;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,KAAK,KAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,aAA+C,CAAC;aACjG;YACD,SAAS,EAAE;gBACT,WAAW,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,0CAAE,WAAW;gBACjD,YAAY,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,0CAAE,YAAY;gBACnD,WAAW,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,0CAAE,WAAW;aAClD;SACF,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,KAAoC,EACpC,OAA4B,EAC5B,QAA6B,EAC7B,QAA6B;;IAE7B,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,KAAK,MAAM,KAAI,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,MAAM,0CAAE,UAAU,CAAA,EAAE;QACzD,MAAM,aAAa,GAAG,8BAA8B,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;QAE7F,UAAU,GAAG;YACX,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,aAA2D,CAAC;SACvG,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport { getComputedAbstractSwitchState } from '../internal/utils/style';\nimport { ToggleProps } from './interfaces';\n\nexport function getAbstractSwitchStyles(\n  style: ToggleProps.Style | undefined,\n  checked: boolean | undefined,\n  disabled: boolean | undefined,\n  readOnly: boolean | undefined\n) {\n  let properties = {};\n\n  if (SYSTEM === 'core' && (style?.input || style?.label)) {\n    const computedState = getComputedAbstractSwitchState(checked, disabled, readOnly, false);\n\n    properties = {\n      control: {\n        background:\n          style?.input?.background && style.input.background[computedState as keyof typeof style.input.background],\n      },\n      label: {\n        color: style?.label?.color && style.label.color[computedState as keyof typeof style.label.color],\n      },\n      focusRing: {\n        borderColor: style?.input?.focusRing?.borderColor,\n        borderRadius: style?.input?.focusRing?.borderRadius,\n        borderWidth: style?.input?.focusRing?.borderWidth,\n      },\n    };\n  }\n\n  return properties;\n}\n\nexport function getStyledControlStyle(\n  style: ToggleProps.Style | undefined,\n  checked: boolean | undefined,\n  disabled: boolean | undefined,\n  readOnly: boolean | undefined\n) {\n  let properties = {};\n\n  if (SYSTEM === 'core' && style?.input?.handle?.background) {\n    const computedState = getComputedAbstractSwitchState(checked, disabled, readOnly, undefined);\n\n    properties = {\n      background: style.input.handle.background[computedState as keyof typeof style.input.handle.background],\n    };\n  }\n\n  return properties;\n}\n"]}

package/lib/internal/template/toggle/styles.css.js

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_4yi2u_1b1r7_145",
-  "outline": "awsui_outline_4yi2u_1b1r7_178",
-  "toggle-control": "awsui_toggle-control_4yi2u_1b1r7_200",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1b1r7_213",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1b1r7_216",
-  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1b1r7_222",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_1b1r7_226",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1b1r7_251",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1b1r7_258",
-  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1b1r7_262"
+  "root": "awsui_root_4yi2u_1g46u_145",
+  "outline": "awsui_outline_4yi2u_1g46u_178",
+  "toggle-control": "awsui_toggle-control_4yi2u_1g46u_201",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1g46u_214",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1g46u_217",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1g46u_223",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_1g46u_227",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1g46u_252",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1g46u_259",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1g46u_263"
 };
   

package/lib/internal/template/toggle/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_4yi2u_1b1r7_145:not(#\9) {
+.awsui_root_4yi2u_1g46u_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -175,14 +175,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_outline_4yi2u_1b1r7_178:not(#\9) {
+.awsui_outline_4yi2u_1g46u_178:not(#\9) {
+  --awsui-style-focus-ring-box-shadow-kcc2gu: 0 0 0 var(--awsui-style-focus-ring-border-width-kcc2gu, 2px) var(--awsui-style-focus-ring-border-color-kcc2gu, var(--color-border-item-focused-r5f6xl, #0073bb));
   position: relative;
 }
-.awsui_outline_4yi2u_1b1r7_178:not(#\9) {
+.awsui_outline_4yi2u_1g46u_178:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_outline_4yi2u_1b1r7_178:not(#\9)::before {
+.awsui_outline_4yi2u_1g46u_178:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -190,14 +191,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: calc(-1 * 2px);
   inline-size: calc(100% + 2px + 2px);
   block-size: calc(100% + 2px + 2px);
-  border-start-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-kcc2gu);
 }
 
-.awsui_toggle-control_4yi2u_1b1r7_200:not(#\9) {
+.awsui_toggle-control_4yi2u_1g46u_201:not(#\9) {
   forced-color-adjust: none;
   margin-block-start: calc((var(--line-height-body-m-bedeoh, 22px) - 16px) / 2);
   min-block-size: 16px;
@@ -210,20 +211,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: 8px;
   border-end-end-radius: 8px;
 }
-.awsui_toggle-control-checked_4yi2u_1b1r7_213:not(#\9) {
+.awsui_toggle-control-checked_4yi2u_1g46u_214:not(#\9) {
   background: var(--color-background-control-checked-se0x0e, #0073bb);
 }
-.awsui_toggle-control-disabled_4yi2u_1b1r7_216:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_1g46u_217:not(#\9) {
   background: var(--color-background-control-disabled-2ixett, #d5dbdb);
 }
-.awsui_toggle-control-disabled_4yi2u_1b1r7_216.awsui_toggle-control-checked_4yi2u_1b1r7_213:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_1g46u_217.awsui_toggle-control-checked_4yi2u_1g46u_214:not(#\9) {
   background: var(--color-background-toggle-checked-disabled-i9a3za, #99cbe4);
 }
-.awsui_toggle-control-readonly_4yi2u_1b1r7_222:not(#\9) {
+.awsui_toggle-control-readonly_4yi2u_1g46u_223:not(#\9) {
   background: var(--color-background-control-disabled-2ixett, #d5dbdb);
 }
 
-.awsui_toggle-handle_4yi2u_1b1r7_226:not(#\9) {
+.awsui_toggle-handle_4yi2u_1g46u_227:not(#\9) {
   display: block;
   position: absolute;
   border-start-start-radius: 6px;
@@ -239,29 +240,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition: transform var(--motion-duration-fast-okdxjh, 90ms) var(--motion-easing-ease-out-quart-x9fbvw, cubic-bezier(0.165, 0.84, 0.44, 1)), background-color var(--motion-duration-fast-okdxjh, 90ms) var(--motion-easing-ease-out-quart-x9fbvw, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_toggle-handle_4yi2u_1b1r7_226:not(#\9) {
+  .awsui_toggle-handle_4yi2u_1g46u_227:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_toggle-handle_4yi2u_1b1r7_226:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1b1r7_226:not(#\9) {
+.awsui-motion-disabled .awsui_toggle-handle_4yi2u_1g46u_227:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1g46u_227:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_toggle-handle-checked_4yi2u_1b1r7_251:not(#\9) {
+.awsui_toggle-handle-checked_4yi2u_1g46u_252:not(#\9) {
   transform: translateX(8px);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_toggle-handle-checked_4yi2u_1b1r7_251:not(#\9):dir(rtl) {
+.awsui_toggle-handle-checked_4yi2u_1g46u_252:not(#\9):dir(rtl) {
   transform: translateX(-8px);
 }
-.awsui_toggle-handle-disabled_4yi2u_1b1r7_258:not(#\9) {
+.awsui_toggle-handle-disabled_4yi2u_1g46u_259:not(#\9) {
   background: var(--color-foreground-control-disabled-kj751b, #ffffff);
   box-shadow: none;
 }
-.awsui_toggle-handle-readonly_4yi2u_1b1r7_262:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1b1r7_258) {
+.awsui_toggle-handle-readonly_4yi2u_1g46u_263:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1g46u_259) {
   box-shadow: none;
 }
-.awsui_toggle-handle-readonly_4yi2u_1b1r7_262:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1b1r7_258).awsui_toggle-handle-checked_4yi2u_1b1r7_251 {
+.awsui_toggle-handle-readonly_4yi2u_1g46u_263:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1g46u_259).awsui_toggle-handle-checked_4yi2u_1g46u_252 {
   background: var(--color-foreground-control-read-only-cgy3yn, #687078);
 }

package/lib/internal/template/toggle/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_4yi2u_1b1r7_145",
-  "outline": "awsui_outline_4yi2u_1b1r7_178",
-  "toggle-control": "awsui_toggle-control_4yi2u_1b1r7_200",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1b1r7_213",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1b1r7_216",
-  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1b1r7_222",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_1b1r7_226",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1b1r7_251",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1b1r7_258",
-  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1b1r7_262"
+  "root": "awsui_root_4yi2u_1g46u_145",
+  "outline": "awsui_outline_4yi2u_1g46u_178",
+  "toggle-control": "awsui_toggle-control_4yi2u_1g46u_201",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1g46u_214",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1g46u_217",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1g46u_223",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_1g46u_227",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1g46u_252",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1g46u_259",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1g46u_263"
 };
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.1063",
+  "version": "3.0.1065",
   "files": [
     "lib"
   ],