@cloudscape-design/components-themeable 3.0.1385 → 3.0.1387

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

@@ -2,35 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "column-layout": "awsui_column-layout_vj6p7_g358p_17",
-  "grid": "awsui_grid_vj6p7_g358p_49",
-  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_g358p_55",
-  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_g358p_59",
-  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_g358p_67",
-  "grid-columns-1": "awsui_grid-columns-1_vj6p7_g358p_70",
-  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_g358p_70",
-  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_g358p_73",
-  "grid-columns-2": "awsui_grid-columns-2_vj6p7_g358p_76",
-  "grid-columns-3": "awsui_grid-columns-3_vj6p7_g358p_82",
-  "grid-columns-4": "awsui_grid-columns-4_vj6p7_g358p_88",
-  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_g358p_104",
-  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_g358p_137",
-  "root": "awsui_root_vj6p7_g358p_187",
-  "tile-container": "awsui_tile-container_vj6p7_g358p_222",
-  "refresh": "awsui_refresh_vj6p7_g358p_247",
-  "selected": "awsui_selected_vj6p7_g358p_251",
-  "disabled": "awsui_disabled_vj6p7_g358p_251",
-  "readonly": "awsui_readonly_vj6p7_g358p_251",
-  "has-metadata": "awsui_has-metadata_vj6p7_g358p_254",
-  "columns": "awsui_columns_vj6p7_g358p_276",
-  "column-1": "awsui_column-1_vj6p7_g358p_283",
-  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_g358p_290",
-  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_g358p_294",
-  "column-2": "awsui_column-2_vj6p7_g358p_298",
-  "column-3": "awsui_column-3_vj6p7_g358p_313",
-  "column-4": "awsui_column-4_vj6p7_g358p_328",
-  "control": "awsui_control_vj6p7_g358p_344",
-  "no-image": "awsui_no-image_vj6p7_g358p_348",
-  "image": "awsui_image_vj6p7_g358p_352"
+  "column-layout": "awsui_column-layout_vj6p7_1kvr6_17",
+  "grid": "awsui_grid_vj6p7_1kvr6_49",
+  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_1kvr6_55",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_1kvr6_59",
+  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_1kvr6_67",
+  "grid-columns-1": "awsui_grid-columns-1_vj6p7_1kvr6_70",
+  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70",
+  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_1kvr6_73",
+  "grid-columns-2": "awsui_grid-columns-2_vj6p7_1kvr6_76",
+  "grid-columns-3": "awsui_grid-columns-3_vj6p7_1kvr6_82",
+  "grid-columns-4": "awsui_grid-columns-4_vj6p7_1kvr6_88",
+  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_1kvr6_104",
+  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_1kvr6_137",
+  "root": "awsui_root_vj6p7_1kvr6_187",
+  "tile-container": "awsui_tile-container_vj6p7_1kvr6_222",
+  "refresh": "awsui_refresh_vj6p7_1kvr6_247",
+  "selected": "awsui_selected_vj6p7_1kvr6_251",
+  "disabled": "awsui_disabled_vj6p7_1kvr6_251",
+  "readonly": "awsui_readonly_vj6p7_1kvr6_251",
+  "has-metadata": "awsui_has-metadata_vj6p7_1kvr6_254",
+  "columns": "awsui_columns_vj6p7_1kvr6_276",
+  "column-1": "awsui_column-1_vj6p7_1kvr6_283",
+  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_1kvr6_289",
+  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_1kvr6_293",
+  "column-2": "awsui_column-2_vj6p7_1kvr6_297",
+  "column-3": "awsui_column-3_vj6p7_1kvr6_311",
+  "column-4": "awsui_column-4_vj6p7_1kvr6_325",
+  "control": "awsui_control_vj6p7_1kvr6_340",
+  "no-image": "awsui_no-image_vj6p7_1kvr6_344",
+  "image": "awsui_image_vj6p7_1kvr6_348"
 };
   

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;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"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,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,6FAkHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import clsx from 'clsx';
 import { getAnalyticsMetadataAttribute, } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { getBaseProps } from '../internal/base-component';
@@ -15,6 +15,12 @@ const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, r
     const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
     const baseProps = getBaseProps(rest);
     const checkboxRef = useRef(null);
+    // The handle's follow-through animation only plays once the state has changed since mount.
+    const [initialChecked] = useState(!!checked);
+    const [hasChanged, setHasChanged] = useState(false);
+    if (!hasChanged && !!checked !== initialChecked) {
+        setHasChanged(true);
+    }
     const analyticsMetadata = {};
     const analyticsComponentMetadata = {
         name: 'awsui.Toggle',
@@ -46,7 +52,7 @@ const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, r
                 [styles['toggle-handle-checked']]: checked,
                 [styles['toggle-handle-disabled']]: disabled,
                 [styles['toggle-handle-readonly']]: readOnly,
-            }), style: getStyledControlStyle(style, checked, disabled, readOnly) }), style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: __internalRootRef, ...getAnalyticsMetadataAttribute(analyticsMetadata) }));
+            }), "data-awsui-motion-ready": hasChanged ? '' : undefined, 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 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"]}
+{"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, useState } 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    // The handle's follow-through animation only plays once the state has changed since mount.\n    const [initialChecked] = useState(!!checked);\n    const [hasChanged, setHasChanged] = useState(false);\n    if (!hasChanged && !!checked !== initialChecked) {\n      setHasChanged(true);\n    }\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            data-awsui-motion-ready={hasChanged ? '' : undefined}\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/styles.css.js

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_4yi2u_1gepn_40",
-  "outline": "awsui_outline_4yi2u_1gepn_73",
-  "toggle-control": "awsui_toggle-control_4yi2u_1gepn_95",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1gepn_115",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1gepn_118",
-  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1gepn_124",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_1gepn_128",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1gepn_153",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1gepn_160",
-  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1gepn_164"
+  "root": "awsui_root_4yi2u_e9sk2_40",
+  "outline": "awsui_outline_4yi2u_e9sk2_73",
+  "toggle-control": "awsui_toggle-control_4yi2u_e9sk2_95",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_e9sk2_115",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_e9sk2_118",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_e9sk2_124",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_e9sk2_127",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_e9sk2_152",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_e9sk2_159",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_e9sk2_163"
 };
   

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

@@ -34,10 +34,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   syntax: "*";
   inherits: false;
 }
-/* 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 */
-/* awsui:style-api-slot name=label tokens=color */
-/* awsui:style-api-slot name=description tokens=color */
-.awsui_root_4yi2u_1gepn_40:not(#\9) {
+/* 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 properties= */
+/* awsui:style-api-slot name=label tokens=color properties= */
+/* awsui:style-api-slot name=description tokens=color properties= */
+.awsui_root_4yi2u_e9sk2_40:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -70,14 +70,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_outline_4yi2u_1gepn_73:not(#\9) {
+.awsui_outline_4yi2u_e9sk2_73:not(#\9) {
   position: relative;
 }
-.awsui_outline_4yi2u_1gepn_73:not(#\9) {
+.awsui_outline_4yi2u_e9sk2_73:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, 2px) - 1px);
 }
-.awsui_outline_4yi2u_1gepn_73:not(#\9)::before {
+.awsui_outline_4yi2u_e9sk2_73:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -92,7 +92,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-style-focus-ring-border-width-ka4djm, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-style-focus-ring-border-color-ka4djm, var(--color-border-item-focused-sewkzn, #0073bb)));
 }
 
-.awsui_toggle-control_4yi2u_1gepn_95:not(#\9) {
+.awsui_toggle-control_4yi2u_e9sk2_95:not(#\9) {
   --awsui-internal-style-color: var(--awsui-style-color);
   --awsui-internal-style-background-color: var(--awsui-style-background-color);
   --awsui-internal-style-focus-ring-color: var(--awsui-style-focus-ring-color);
@@ -112,20 +112,19 @@ 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_1gepn_115:not(#\9) {
+.awsui_toggle-control-checked_4yi2u_e9sk2_115:not(#\9) {
   background: var(--awsui-internal-style-background-color, var(--color-background-control-checked-ksqwhc, #0073bb));
 }
-.awsui_toggle-control-disabled_4yi2u_1gepn_118:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_e9sk2_118:not(#\9) {
   background: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #d5dbdb));
 }
-.awsui_toggle-control-disabled_4yi2u_1gepn_118.awsui_toggle-control-checked_4yi2u_1gepn_115:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_e9sk2_118.awsui_toggle-control-checked_4yi2u_e9sk2_115:not(#\9) {
   background: var(--awsui-internal-style-background-color, var(--color-background-toggle-checked-disabled-81loy3, #99cbe4));
 }
-.awsui_toggle-control-readonly_4yi2u_1gepn_124:not(#\9) {
+.awsui_toggle-control-readonly_4yi2u_e9sk2_124:not(#\9) {
   background: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #d5dbdb));
 }
-
-.awsui_toggle-handle_4yi2u_1gepn_128:not(#\9) {
+.awsui_toggle-handle_4yi2u_e9sk2_127:not(#\9) {
   display: block;
   position: absolute;
   border-start-start-radius: 6px;
@@ -141,29 +140,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   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));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_toggle-handle_4yi2u_1gepn_128:not(#\9) {
+  .awsui_toggle-handle_4yi2u_e9sk2_127:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_toggle-handle_4yi2u_1gepn_128:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1gepn_128:not(#\9) {
+.awsui-motion-disabled .awsui_toggle-handle_4yi2u_e9sk2_127:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_e9sk2_127:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_toggle-handle-checked_4yi2u_1gepn_153:not(#\9) {
+.awsui_toggle-handle-checked_4yi2u_e9sk2_152:not(#\9) {
   transform: translateX(8px);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_toggle-handle-checked_4yi2u_1gepn_153:not(#\9):dir(rtl) {
+.awsui_toggle-handle-checked_4yi2u_e9sk2_152:not(#\9):dir(rtl) {
   transform: translateX(-8px);
 }
-.awsui_toggle-handle-disabled_4yi2u_1gepn_160:not(#\9) {
+.awsui_toggle-handle-disabled_4yi2u_e9sk2_159:not(#\9) {
   background: var(--awsui-internal-style-color, var(--color-foreground-control-disabled-bikivj, #ffffff));
   box-shadow: none;
 }
-.awsui_toggle-handle-readonly_4yi2u_1gepn_164:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1gepn_160) {
+.awsui_toggle-handle-readonly_4yi2u_e9sk2_163:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_e9sk2_159) {
   box-shadow: none;
 }
-.awsui_toggle-handle-readonly_4yi2u_1gepn_164:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1gepn_160).awsui_toggle-handle-checked_4yi2u_1gepn_153 {
+.awsui_toggle-handle-readonly_4yi2u_e9sk2_163:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_e9sk2_159).awsui_toggle-handle-checked_4yi2u_e9sk2_152 {
   background: var(--awsui-internal-style-color, var(--color-foreground-control-read-only-8sqxyy, #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_1gepn_40",
-  "outline": "awsui_outline_4yi2u_1gepn_73",
-  "toggle-control": "awsui_toggle-control_4yi2u_1gepn_95",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1gepn_115",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1gepn_118",
-  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1gepn_124",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_1gepn_128",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1gepn_153",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1gepn_160",
-  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1gepn_164"
+  "root": "awsui_root_4yi2u_e9sk2_40",
+  "outline": "awsui_outline_4yi2u_e9sk2_73",
+  "toggle-control": "awsui_toggle-control_4yi2u_e9sk2_95",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_e9sk2_115",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_e9sk2_118",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_e9sk2_124",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_e9sk2_127",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_e9sk2_152",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_e9sk2_159",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_e9sk2_163"
 };
   

package/package.json

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