@cloudscape-design/components 3.0.671 → 3.0.672

package/tiles/styles.selectors.js

@@ -2,34 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "column-layout": "awsui_column-layout_vj6p7_h9y4z_97",
-  "grid": "awsui_grid_vj6p7_h9y4z_132",
-  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_h9y4z_138",
-  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_h9y4z_142",
-  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_h9y4z_150",
-  "grid-columns-1": "awsui_grid-columns-1_vj6p7_h9y4z_153",
-  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153",
-  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_h9y4z_156",
-  "grid-columns-2": "awsui_grid-columns-2_vj6p7_h9y4z_159",
-  "grid-columns-3": "awsui_grid-columns-3_vj6p7_h9y4z_165",
-  "grid-columns-4": "awsui_grid-columns-4_vj6p7_h9y4z_171",
-  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_h9y4z_187",
-  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_h9y4z_220",
-  "root": "awsui_root_vj6p7_h9y4z_274",
-  "tile-container": "awsui_tile-container_vj6p7_h9y4z_312",
-  "refresh": "awsui_refresh_vj6p7_h9y4z_327",
-  "has-metadata": "awsui_has-metadata_vj6p7_h9y4z_331",
-  "selected": "awsui_selected_vj6p7_h9y4z_337",
-  "disabled": "awsui_disabled_vj6p7_h9y4z_342",
-  "columns": "awsui_columns_vj6p7_h9y4z_358",
-  "column-1": "awsui_column-1_vj6p7_h9y4z_364",
-  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_h9y4z_371",
-  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_h9y4z_375",
-  "column-2": "awsui_column-2_vj6p7_h9y4z_379",
-  "column-3": "awsui_column-3_vj6p7_h9y4z_394",
-  "column-4": "awsui_column-4_vj6p7_h9y4z_409",
-  "control": "awsui_control_vj6p7_h9y4z_425",
-  "no-image": "awsui_no-image_vj6p7_h9y4z_429",
-  "image": "awsui_image_vj6p7_h9y4z_433"
+  "column-layout": "awsui_column-layout_vj6p7_tp6ux_97",
+  "grid": "awsui_grid_vj6p7_tp6ux_132",
+  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_tp6ux_138",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_tp6ux_142",
+  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_tp6ux_150",
+  "grid-columns-1": "awsui_grid-columns-1_vj6p7_tp6ux_153",
+  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153",
+  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_tp6ux_156",
+  "grid-columns-2": "awsui_grid-columns-2_vj6p7_tp6ux_159",
+  "grid-columns-3": "awsui_grid-columns-3_vj6p7_tp6ux_165",
+  "grid-columns-4": "awsui_grid-columns-4_vj6p7_tp6ux_171",
+  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_tp6ux_187",
+  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_tp6ux_220",
+  "root": "awsui_root_vj6p7_tp6ux_274",
+  "tile-container": "awsui_tile-container_vj6p7_tp6ux_312",
+  "refresh": "awsui_refresh_vj6p7_tp6ux_327",
+  "has-metadata": "awsui_has-metadata_vj6p7_tp6ux_331",
+  "selected": "awsui_selected_vj6p7_tp6ux_337",
+  "disabled": "awsui_disabled_vj6p7_tp6ux_342",
+  "readonly": "awsui_readonly_vj6p7_tp6ux_347",
+  "columns": "awsui_columns_vj6p7_tp6ux_363",
+  "column-1": "awsui_column-1_vj6p7_tp6ux_369",
+  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_tp6ux_376",
+  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_tp6ux_380",
+  "column-2": "awsui_column-2_vj6p7_tp6ux_384",
+  "column-3": "awsui_column-3_vj6p7_tp6ux_399",
+  "column-4": "awsui_column-4_vj6p7_tp6ux_414",
+  "control": "awsui_control_vj6p7_tp6ux_430",
+  "no-image": "awsui_no-image_vj6p7_tp6ux_434",
+  "image": "awsui_image_vj6p7_tp6ux_438"
 };
   

package/tiles/tile.d.ts

@@ -7,6 +7,7 @@ interface TileProps {
     name: string;
     breakpoint: ReturnType<typeof useContainerBreakpoints>[0];
     onChange: TilesProps['onChange'];
+    readOnly?: boolean;
 }
 export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/tiles/tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAK9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,oFA4ChB,CAAC"}
+{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAK9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,oFA8ChB,CAAC"}

package/tiles/tile.js

@@ -7,13 +7,13 @@ import styles from './styles.css.js';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange }, forwardedRef) => {
+export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange, readOnly }, forwardedRef) => {
     const internalRef = useRef(null);
     const isVisualRefresh = useVisualRefresh();
     const mergedRef = useMergeRefs(internalRef, forwardedRef);
-    return (React.createElement("div", { className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
+    return (React.createElement("div", { className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.readonly]: readOnly }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
             var _a;
-            if (item.disabled) {
+            if (item.disabled || readOnly) {
                 return;
             }
             (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -22,7 +22,7 @@ export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChan
             }
         } },
         React.createElement("div", { className: clsx(styles.control, { [styles['no-image']]: !item.image }) },
-            React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId })),
+            React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly: readOnly })),
         item.image && React.createElement("div", { className: clsx(styles.image, { [styles.disabled]: !!item.disabled }) }, item.image)));
 });
 //# sourceMappingURL=tile.js.map

package/tiles/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAUrE,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAa,EAAE,YAAyC,EAAE,EAAE;IACvG,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,EAC5D,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EACtC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe,EAAE,EACrC,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,GAAG,EAAE;;YACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,GACzB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\ninterface TileProps {\n  item: TilesProps.TilesDefinition;\n  selected: boolean;\n  name: string;\n  breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n  onChange: TilesProps['onChange'];\n}\n\nexport const Tile = React.forwardRef(\n  ({ item, selected, name, breakpoint, onChange }: TileProps, forwardedRef: React.Ref<HTMLInputElement>) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n    const isVisualRefresh = useVisualRefresh();\n\n    const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n    return (\n      <div\n        className={clsx(\n          styles['tile-container'],\n          { [styles['has-metadata']]: item.description || item.image },\n          { [styles.selected]: selected },\n          { [styles.disabled]: !!item.disabled },\n          { [styles.refresh]: isVisualRefresh },\n          styles[`breakpoint-${breakpoint}`]\n        )}\n        data-value={item.value}\n        onClick={() => {\n          if (item.disabled) {\n            return;\n          }\n          internalRef.current?.focus();\n          if (!selected) {\n            fireNonCancelableEvent(onChange, { value: item.value });\n          }\n        }}\n      >\n        <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n          <RadioButton\n            checked={selected}\n            ref={mergedRef}\n            name={name}\n            value={item.value}\n            label={item.label}\n            description={item.description}\n            disabled={item.disabled}\n            controlId={item.controlId}\n          />\n        </div>\n        {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAWrE,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAa,EAAE,YAAyC,EAAE,EAAE;IACjH,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,EAC5D,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EACtC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe,EAAE,EACrC,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,GAAG,EAAE;;YACZ,IAAI,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;gBAC7B,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,QAAQ,GAClB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\ninterface TileProps {\n  item: TilesProps.TilesDefinition;\n  selected: boolean;\n  name: string;\n  breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n  onChange: TilesProps['onChange'];\n  readOnly?: boolean;\n}\n\nexport const Tile = React.forwardRef(\n  ({ item, selected, name, breakpoint, onChange, readOnly }: TileProps, forwardedRef: React.Ref<HTMLInputElement>) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n    const isVisualRefresh = useVisualRefresh();\n\n    const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n    return (\n      <div\n        className={clsx(\n          styles['tile-container'],\n          { [styles['has-metadata']]: item.description || item.image },\n          { [styles.selected]: selected },\n          { [styles.disabled]: !!item.disabled },\n          { [styles.readonly]: readOnly },\n          { [styles.refresh]: isVisualRefresh },\n          styles[`breakpoint-${breakpoint}`]\n        )}\n        data-value={item.value}\n        onClick={() => {\n          if (item.disabled || readOnly) {\n            return;\n          }\n          internalRef.current?.focus();\n          if (!selected) {\n            fireNonCancelableEvent(onChange, { value: item.value });\n          }\n        }}\n      >\n        <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n          <RadioButton\n            checked={selected}\n            ref={mergedRef}\n            name={name}\n            value={item.value}\n            label={item.label}\n            description={item.description}\n            disabled={item.disabled}\n            controlId={item.controlId}\n            readOnly={readOnly}\n          />\n        </div>\n        {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n      </div>\n    );\n  }\n);\n"]}

package/toggle/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,QAAA,MAAM,cAAc,uHAwEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,QAAA,MAAM,cAAc,uHA6EnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/toggle/internal.js

@@ -10,7 +10,7 @@ import { getBaseProps } from '../internal/base-component';
 import styles from './styles.css.js';
 import { useFormFieldContext } from '../internal/context/form-field-context';
 const InternalToggle = React.forwardRef((_a, ref) => {
-    var { controlId, checked, name, disabled, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef"]);
+    var { controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "readOnly", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef"]);
     const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
     const baseProps = getBaseProps(rest);
     const checkboxRef = useRef(null);
@@ -18,7 +18,8 @@ const InternalToggle = React.forwardRef((_a, ref) => {
     return (React.createElement(AbstractSwitch, Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], {
             [styles['toggle-control-checked']]: checked,
             [styles['toggle-control-disabled']]: disabled,
-        }), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, nativeControl: nativeControlProps => (React.createElement("input", Object.assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur), 
+            [styles['toggle-control-readonly']]: readOnly,
+        }), 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("input", Object.assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-disabled": readOnly && !disabled ? 'true' : undefined, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur), 
             // empty handler to suppress React controllability warning
             onChange: () => { } }))), onClick: () => {
             var _a;
@@ -29,6 +30,7 @@ const InternalToggle = React.forwardRef((_a, ref) => {
         React.createElement("span", { className: clsx(styles['toggle-handle'], {
                 [styles['toggle-handle-checked']]: checked,
                 [styles['toggle-handle-disabled']]: disabled,
+                [styles['toggle-handle-readonly']]: readOnly,
             }) }), __internalRootRef: __internalRootRef })));
 });
 export default InternalToggle;

package/toggle/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAI7E,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAcC,EACD,GAAG,EACH,EAAE;QAhBF,EACE,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEzB,EADI,IAAI,cAbT,0JAcC,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;IACnD,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;SAC9C,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,SAAS,EAAE,SAAS,EACpB,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,EACV,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;aAC7C,CAAC,GACF,EAEJ,iBAAiB,EAAE,iBAAiB,IACpC,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 clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ToggleProps } from './interfaces';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\n\ntype InternalToggleProps = ToggleProps & InternalBaseComponentProps;\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n  (\n    {\n      controlId,\n      checked,\n      name,\n      disabled,\n      children,\n      description,\n      ariaLabel,\n      ariaControls,\n      onFocus,\n      onBlur,\n      onChange,\n      __internalRootRef = null,\n      ...rest\n    },\n    ref\n  ) => {\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const baseProps = getBaseProps(rest);\n    const checkboxRef = useRef<HTMLInputElement>(null);\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        })}\n        outlineClassName={styles.outline}\n        controlId={controlId}\n        disabled={disabled}\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            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            })}\n          />\n        }\n        __internalRootRef={__internalRootRef}\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,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAI7E,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAeC,EACD,GAAG,EACH,EAAE;QAjBF,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,iBAAiB,GAAG,IAAI,OAEzB,EADI,IAAI,cAdT,sKAeC,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;IACnD,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,GACF,EAEJ,iBAAiB,EAAE,iBAAiB,IACpC,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 clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ToggleProps } from './interfaces';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\n\ntype InternalToggleProps = ToggleProps & InternalBaseComponentProps;\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      ...rest\n    },\n    ref\n  ) => {\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const baseProps = getBaseProps(rest);\n    const checkboxRef = useRef<HTMLInputElement>(null);\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      />\n    );\n  }\n);\n\nexport default InternalToggle;\n"]}

package/toggle/styles.css.js

@@ -1,13 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_4yi2u_qlz8j_97",
-  "outline": "awsui_outline_4yi2u_qlz8j_133",
-  "toggle-control": "awsui_toggle-control_4yi2u_qlz8j_155",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_qlz8j_168",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_qlz8j_171",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_qlz8j_178",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_qlz8j_193",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_qlz8j_200"
+  "root": "awsui_root_4yi2u_1w171_97",
+  "outline": "awsui_outline_4yi2u_1w171_133",
+  "toggle-control": "awsui_toggle-control_4yi2u_1w171_155",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1w171_168",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1w171_171",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1w171_177",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_1w171_181",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1w171_196",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1w171_203",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1w171_207"
 };
   

package/toggle/styles.scoped.css

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_4yi2u_qlz8j_97:not(#\9) {
+.awsui_root_4yi2u_1w171_97:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -131,14 +131,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_outline_4yi2u_qlz8j_133:not(#\9) {
+.awsui_outline_4yi2u_1w171_133:not(#\9) {
   position: relative;
 }
-.awsui_outline_4yi2u_qlz8j_133:not(#\9) {
+.awsui_outline_4yi2u_1w171_133:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_outline_4yi2u_qlz8j_133:not(#\9)::before {
+.awsui_outline_4yi2u_1w171_133:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -153,7 +153,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_toggle-control_4yi2u_qlz8j_155:not(#\9) {
+.awsui_toggle-control_4yi2u_1w171_155:not(#\9) {
   forced-color-adjust: none;
   margin-block-start: calc((var(--line-height-body-m-30ar75, 20px) - 16px) / 2);
   min-block-size: 16px;
@@ -166,17 +166,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_qlz8j_168:not(#\9) {
+.awsui_toggle-control-checked_4yi2u_1w171_168:not(#\9) {
   background: var(--color-background-control-checked-w517i0, #0972d3);
 }
-.awsui_toggle-control-disabled_4yi2u_qlz8j_171:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_1w171_171:not(#\9) {
   background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
 }
-.awsui_toggle-control-disabled_4yi2u_qlz8j_171.awsui_toggle-control-checked_4yi2u_qlz8j_168:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_1w171_171.awsui_toggle-control-checked_4yi2u_1w171_168:not(#\9) {
   background: var(--color-background-toggle-checked-disabled-uqvx2z, #b5d6f4);
 }
+.awsui_toggle-control-readonly_4yi2u_1w171_177:not(#\9) {
+  background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+}
 
-.awsui_toggle-handle_4yi2u_qlz8j_178:not(#\9) {
+.awsui_toggle-handle_4yi2u_1w171_181:not(#\9) {
   display: block;
   position: absolute;
   border-start-start-radius: 6px;
@@ -191,24 +194,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-start: 2px;
   transition: transform var(--motion-duration-fast-sbm3r7, 90ms) var(--motion-easing-ease-out-quart-rrej5m, cubic-bezier(0.165, 0.84, 0.44, 1)), background-color var(--motion-duration-fast-sbm3r7, 90ms) var(--motion-easing-ease-out-quart-rrej5m, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
-.awsui_toggle-handle-checked_4yi2u_qlz8j_193:not(#\9) {
+.awsui_toggle-handle-checked_4yi2u_1w171_196:not(#\9) {
   transform: translateX(8px);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_toggle-handle-checked_4yi2u_qlz8j_193:not(#\9):dir(rtl) {
+.awsui_toggle-handle-checked_4yi2u_1w171_196:not(#\9):dir(rtl) {
   transform: translateX(-8px);
 }
-.awsui_toggle-handle-disabled_4yi2u_qlz8j_200:not(#\9) {
+.awsui_toggle-handle-disabled_4yi2u_1w171_203:not(#\9) {
   background: var(--color-foreground-control-disabled-zmz2k2, #ffffff);
   box-shadow: none;
 }
+.awsui_toggle-handle-readonly_4yi2u_1w171_207:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1w171_203) {
+  box-shadow: none;
+}
+.awsui_toggle-handle-readonly_4yi2u_1w171_207:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1w171_203).awsui_toggle-handle-checked_4yi2u_1w171_196 {
+  background: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+}
 @media (prefers-reduced-motion: reduce) {
-  .awsui_toggle-handle_4yi2u_qlz8j_178:not(#\9) {
+  .awsui_toggle-handle_4yi2u_1w171_181:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_toggle-handle_4yi2u_qlz8j_178:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_qlz8j_178:not(#\9) {
+.awsui-motion-disabled .awsui_toggle-handle_4yi2u_1w171_181:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1w171_181:not(#\9) {
   animation: none;
   transition: none;
 }

package/toggle/styles.selectors.js

@@ -2,13 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_4yi2u_qlz8j_97",
-  "outline": "awsui_outline_4yi2u_qlz8j_133",
-  "toggle-control": "awsui_toggle-control_4yi2u_qlz8j_155",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_qlz8j_168",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_qlz8j_171",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_qlz8j_178",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_qlz8j_193",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_qlz8j_200"
+  "root": "awsui_root_4yi2u_1w171_97",
+  "outline": "awsui_outline_4yi2u_1w171_133",
+  "toggle-control": "awsui_toggle-control_4yi2u_1w171_155",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1w171_168",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1w171_171",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1w171_177",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_1w171_181",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1w171_196",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1w171_203",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1w171_207"
 };
   

package/token-group/dismiss-button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface DismissButtonProps {
     disabled?: boolean;
+    readOnly?: boolean;
     onDismiss?: () => void;
     dismissLabel?: string;
 }

package/token-group/dismiss-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AAED,wBAAyC"}
+{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AAED,wBAAyC"}

package/token-group/dismiss-button.js

@@ -4,8 +4,13 @@ import React, { forwardRef } from 'react';
 import styles from './styles.css.js';
 import InternalIcon from '../icon/internal';
 export default forwardRef(DismissButton);
-function DismissButton({ disabled, dismissLabel, onDismiss }, ref) {
-    return (React.createElement("button", { ref: ref, type: "button", className: styles['dismiss-button'], "aria-disabled": disabled ? true : undefined, onClick: !disabled && onDismiss ? () => onDismiss() : undefined, "aria-label": dismissLabel },
+function DismissButton({ disabled, dismissLabel, onDismiss, readOnly }, ref) {
+    return (React.createElement("button", { ref: ref, type: "button", className: styles['dismiss-button'], "aria-disabled": disabled || readOnly ? true : undefined, onClick: () => {
+            if (disabled || readOnly || !onDismiss) {
+                return;
+            }
+            onDismiss();
+        }, "aria-label": dismissLabel },
         React.createElement(InternalIcon, { name: "close" })));
 }
 //# sourceMappingURL=dismiss-button.js.map

package/token-group/dismiss-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAQ5C,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAsB,EAAE,GAA2B;IAC3G,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,mBACpB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,gBACnD,YAAY;QAExB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport styles from './styles.css.js';\nimport InternalIcon from '../icon/internal';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  onDismiss?: () => void;\n  dismissLabel?: string;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton({ disabled, dismissLabel, onDismiss }: DismissButtonProps, ref: Ref<HTMLButtonElement>) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={styles['dismiss-button']}\n      aria-disabled={disabled ? true : undefined}\n      onClick={!disabled && onDismiss ? () => onDismiss() : undefined}\n      aria-label={dismissLabel}\n    >\n      <InternalIcon name=\"close\" />\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAS5C,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAsB,EACnE,GAA2B;IAE3B,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,mBACpB,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE;gBACtC,OAAO;aACR;YAED,SAAS,EAAE,CAAC;QACd,CAAC,gBACW,YAAY;QAExB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport styles from './styles.css.js';\nimport InternalIcon from '../icon/internal';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  readOnly?: boolean;\n  onDismiss?: () => void;\n  dismissLabel?: string;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton(\n  { disabled, dismissLabel, onDismiss, readOnly }: DismissButtonProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={styles['dismiss-button']}\n      aria-disabled={disabled || readOnly ? true : undefined}\n      onClick={() => {\n        if (disabled || readOnly || !onDismiss) {\n          return;\n        }\n\n        onDismiss();\n      }}\n      aria-label={dismissLabel}\n    >\n      <InternalIcon name=\"close\" />\n    </button>\n  );\n}\n"]}

package/token-group/interfaces.d.ts

@@ -52,6 +52,11 @@ export interface TokenGroupProps extends BaseComponentProps {
      * Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.
      */
     limitShowMoreAriaLabel?: string;
+    /**
+     * Specifies if the control is read-only, which prevents the
+     * user from modifying the value. A read-only control is still focusable.
+     */
+    readOnly?: boolean;
 }
 export declare namespace TokenGroupProps {
     type Alignment = 'horizontal' | 'vertical';

package/token-group/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IACrE;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;IAClD,UAAiB,IAAI;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;IAED,UAAiB,aAAa;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,WAAW;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IACrE;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;IAClD,UAAiB,IAAI;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;IAED,UAAiB,aAAa;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,WAAW;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;CACF"}

package/token-group/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token-group/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';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { IconProps } from '../icon/interfaces';\n\nexport interface TokenGroupProps extends BaseComponentProps {\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TokenGroupProps.I18nStrings;\n\n  /**\n   * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  limit?: number;\n\n  /**\n   * Specifies the direction in which tokens are aligned (`horizontal | vertical`).\n   */\n  alignment?: TokenGroupProps.Alignment;\n\n  /**\n   * Removes any outer padding from the component.\n   * We recommend to always enable this property.\n   */\n  disableOuterPadding?: boolean;\n\n  /**\n   *\n   * An array of objects representing token items. Each token has the following properties:\n   *\n   * - `label` (string) - Title text of the token.\n   * - `description` (string) - (Optional) Further information about the token that appears below the label.\n   * - `disabled` [boolean] - (Optional) Determines whether the token is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the token.\n   * - `dismissLabel` (string) - (Optional) Adds an `aria-label` to the dismiss button.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the token.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   */\n  items?: ReadonlyArray<TokenGroupProps.Item>;\n  /**\n   *  Called when the user clicks on the dismiss button. The token won't be automatically removed.\n   *  Make sure that you add a listener to this event to update your application state.\n   */\n  onDismiss?: NonCancelableEventHandler<TokenGroupProps.DismissDetail>;\n  /**\n   * Adds an `aria-label` to the \"Show fewer\" button.\n   * Use to assign unique labels when there are multiple token groups with the same `limitShowFewer` label on one page.\n   */\n  limitShowFewerAriaLabel?: string;\n  /**\n   * Adds an `aria-label` to the \"Show more\" button.\n   * Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.\n   */\n  limitShowMoreAriaLabel?: string;\n}\n\nexport namespace TokenGroupProps {\n  export type Alignment = 'horizontal' | 'vertical';\n  export interface Item {\n    label?: string;\n    disabled?: boolean;\n    labelTag?: string;\n    description?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    tags?: ReadonlyArray<string>;\n    dismissLabel?: string;\n  }\n\n  export interface DismissDetail {\n    itemIndex: number;\n  }\n\n  export interface I18nStrings {\n    limitShowFewer?: string;\n    limitShowMore?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token-group/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';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { IconProps } from '../icon/interfaces';\n\nexport interface TokenGroupProps extends BaseComponentProps {\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TokenGroupProps.I18nStrings;\n\n  /**\n   * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  limit?: number;\n\n  /**\n   * Specifies the direction in which tokens are aligned (`horizontal | vertical`).\n   */\n  alignment?: TokenGroupProps.Alignment;\n\n  /**\n   * Removes any outer padding from the component.\n   * We recommend to always enable this property.\n   */\n  disableOuterPadding?: boolean;\n\n  /**\n   *\n   * An array of objects representing token items. Each token has the following properties:\n   *\n   * - `label` (string) - Title text of the token.\n   * - `description` (string) - (Optional) Further information about the token that appears below the label.\n   * - `disabled` [boolean] - (Optional) Determines whether the token is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the token.\n   * - `dismissLabel` (string) - (Optional) Adds an `aria-label` to the dismiss button.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the token.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   */\n  items?: ReadonlyArray<TokenGroupProps.Item>;\n  /**\n   *  Called when the user clicks on the dismiss button. The token won't be automatically removed.\n   *  Make sure that you add a listener to this event to update your application state.\n   */\n  onDismiss?: NonCancelableEventHandler<TokenGroupProps.DismissDetail>;\n  /**\n   * Adds an `aria-label` to the \"Show fewer\" button.\n   * Use to assign unique labels when there are multiple token groups with the same `limitShowFewer` label on one page.\n   */\n  limitShowFewerAriaLabel?: string;\n  /**\n   * Adds an `aria-label` to the \"Show more\" button.\n   * Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.\n   */\n  limitShowMoreAriaLabel?: string;\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from modifying the value. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n}\n\nexport namespace TokenGroupProps {\n  export type Alignment = 'horizontal' | 'vertical';\n  export interface Item {\n    label?: string;\n    disabled?: boolean;\n    labelTag?: string;\n    description?: string;\n    iconAlt?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    tags?: ReadonlyArray<string>;\n    dismissLabel?: string;\n  }\n\n  export interface DismissDetail {\n    itemIndex: number;\n  }\n\n  export interface I18nStrings {\n    limitShowFewer?: string;\n    limitShowMore?: string;\n  }\n}\n"]}

package/token-group/internal.d.ts

@@ -3,6 +3,6 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
 import { TokenGroupProps } from './interfaces';
 import { SomeRequired } from '../internal/types';
 type InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;
-export default function InternalTokenGroup({ alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, __internalRootRef, ...props }: InternalTokenGroupProps): JSX.Element;
+export default function InternalTokenGroup({ alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, __internalRootRef, ...props }: InternalTokenGroupProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/token-group/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,KAAK,uBAAuB,GAAG,YAAY,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,CAAC,GAAG,0BAA0B,CAAC;AAEjH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,uBAAuB,eAiDzB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,KAAK,uBAAuB,GAAG,YAAY,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,CAAC,GAAG,0BAA0B,CAAC;AAEjH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,uBAAuB,eAkDzB"}

package/token-group/internal.js

@@ -11,7 +11,7 @@ import styles from './styles.css.js';
 import TokenList from '../internal/components/token-list';
 import { Token } from './token';
 export default function InternalTokenGroup(_a) {
-    var { alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, __internalRootRef } = _a, props = __rest(_a, ["alignment", "items", "onDismiss", "limit", "i18nStrings", "disableOuterPadding", "limitShowFewerAriaLabel", "limitShowMoreAriaLabel", "__internalRootRef"]);
+    var { alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, __internalRootRef } = _a, props = __rest(_a, ["alignment", "items", "onDismiss", "limit", "i18nStrings", "disableOuterPadding", "limitShowFewerAriaLabel", "limitShowMoreAriaLabel", "readOnly", "__internalRootRef"]);
     checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);
     const [removedItemIndex, setRemovedItemIndex] = useState(null);
     const baseProps = getBaseProps(props);
@@ -20,7 +20,7 @@ export default function InternalTokenGroup(_a) {
         React.createElement(TokenList, { alignment: alignment, items: items, limit: limit, renderItem: (item, itemIndex) => (React.createElement(Token, { ariaLabel: item.label, dismissLabel: item.dismissLabel, onDismiss: () => {
                     fireNonCancelableEvent(onDismiss, { itemIndex });
                     setRemovedItemIndex(itemIndex);
-                }, disabled: item.disabled },
+                }, disabled: item.disabled, readOnly: readOnly },
                 React.createElement(Option, { option: item, isGenericGroup: false }))), i18nStrings: i18nStrings, limitShowFewerAriaLabel: limitShowFewerAriaLabel, limitShowMoreAriaLabel: limitShowMoreAriaLabel, moveFocusNextToIndex: removedItemIndex, onExpandedClick: isExpanded => {
                 if (isExpanded && limit) {
                     setRemovedItemIndex(limit);

package/token-group/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAKjE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAWjB;QAXiB,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,OAEO,EADrB,KAAK,cAViC,4JAW1C,CADS;IAER,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE9E,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,QAAQ,IAAI,MAAM,CAAC,WAAW,CAAC,EAC/B,mBAAmB,IAAI,MAAM,CAAC,YAAY,CAAC,CAC5C,EACD,GAAG,EAAE,iBAAiB;QAEtB,oBAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC/B,oBAAC,KAAK,IACJ,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,GAAG,EAAE;oBACd,sBAAsB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;oBACjD,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,GAAI,CACzC,CACT,EACD,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,EAChD,sBAAsB,EAAE,sBAAsB,EAC9C,oBAAoB,EAAE,gBAAgB,EACtC,eAAe,EAAE,UAAU,CAAC,EAAE;gBAC5B,IAAI,UAAU,IAAI,KAAK,EAAE;oBACvB,mBAAmB,CAAC,KAAK,CAAC,CAAC;iBAC5B;qBAAM;oBACL,mBAAmB,CAAC,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC,GACD,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport Option from '../internal/components/option';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { TokenGroupProps } from './interfaces';\nimport { SomeRequired } from '../internal/types';\nimport { getBaseProps } from '../internal/base-component';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport TokenList from '../internal/components/token-list';\nimport { Token } from './token';\n\ntype InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;\n\nexport default function InternalTokenGroup({\n  alignment,\n  items,\n  onDismiss,\n  limit,\n  i18nStrings,\n  disableOuterPadding,\n  limitShowFewerAriaLabel,\n  limitShowMoreAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalTokenGroupProps) {\n  checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);\n\n  const [removedItemIndex, setRemovedItemIndex] = useState<null | number>(null);\n\n  const baseProps = getBaseProps(props);\n  const hasItems = items.length > 0;\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        hasItems && styles['has-items'],\n        disableOuterPadding && styles['no-padding']\n      )}\n      ref={__internalRootRef}\n    >\n      <TokenList\n        alignment={alignment}\n        items={items}\n        limit={limit}\n        renderItem={(item, itemIndex) => (\n          <Token\n            ariaLabel={item.label}\n            dismissLabel={item.dismissLabel}\n            onDismiss={() => {\n              fireNonCancelableEvent(onDismiss, { itemIndex });\n              setRemovedItemIndex(itemIndex);\n            }}\n            disabled={item.disabled}\n          >\n            <Option option={item} isGenericGroup={false} />\n          </Token>\n        )}\n        i18nStrings={i18nStrings}\n        limitShowFewerAriaLabel={limitShowFewerAriaLabel}\n        limitShowMoreAriaLabel={limitShowMoreAriaLabel}\n        moveFocusNextToIndex={removedItemIndex}\n        onExpandedClick={isExpanded => {\n          if (isExpanded && limit) {\n            setRemovedItemIndex(limit);\n          } else {\n            setRemovedItemIndex(null);\n          }\n        }}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAKjE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAYjB;QAZiB,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,OAEO,EADrB,KAAK,cAXiC,wKAY1C,CADS;IAER,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE9E,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,QAAQ,IAAI,MAAM,CAAC,WAAW,CAAC,EAC/B,mBAAmB,IAAI,MAAM,CAAC,YAAY,CAAC,CAC5C,EACD,GAAG,EAAE,iBAAiB;QAEtB,oBAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC/B,oBAAC,KAAK,IACJ,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,GAAG,EAAE;oBACd,sBAAsB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;oBACjD,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,QAAQ;gBAElB,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,GAAI,CACzC,CACT,EACD,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,EAChD,sBAAsB,EAAE,sBAAsB,EAC9C,oBAAoB,EAAE,gBAAgB,EACtC,eAAe,EAAE,UAAU,CAAC,EAAE;gBAC5B,IAAI,UAAU,IAAI,KAAK,EAAE;oBACvB,mBAAmB,CAAC,KAAK,CAAC,CAAC;iBAC5B;qBAAM;oBACL,mBAAmB,CAAC,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC,GACD,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport Option from '../internal/components/option';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { TokenGroupProps } from './interfaces';\nimport { SomeRequired } from '../internal/types';\nimport { getBaseProps } from '../internal/base-component';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport TokenList from '../internal/components/token-list';\nimport { Token } from './token';\n\ntype InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;\n\nexport default function InternalTokenGroup({\n  alignment,\n  items,\n  onDismiss,\n  limit,\n  i18nStrings,\n  disableOuterPadding,\n  limitShowFewerAriaLabel,\n  limitShowMoreAriaLabel,\n  readOnly,\n  __internalRootRef,\n  ...props\n}: InternalTokenGroupProps) {\n  checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);\n\n  const [removedItemIndex, setRemovedItemIndex] = useState<null | number>(null);\n\n  const baseProps = getBaseProps(props);\n  const hasItems = items.length > 0;\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        hasItems && styles['has-items'],\n        disableOuterPadding && styles['no-padding']\n      )}\n      ref={__internalRootRef}\n    >\n      <TokenList\n        alignment={alignment}\n        items={items}\n        limit={limit}\n        renderItem={(item, itemIndex) => (\n          <Token\n            ariaLabel={item.label}\n            dismissLabel={item.dismissLabel}\n            onDismiss={() => {\n              fireNonCancelableEvent(onDismiss, { itemIndex });\n              setRemovedItemIndex(itemIndex);\n            }}\n            disabled={item.disabled}\n            readOnly={readOnly}\n          >\n            <Option option={item} isGenericGroup={false} />\n          </Token>\n        )}\n        i18nStrings={i18nStrings}\n        limitShowFewerAriaLabel={limitShowFewerAriaLabel}\n        limitShowMoreAriaLabel={limitShowMoreAriaLabel}\n        moveFocusNextToIndex={removedItemIndex}\n        onExpandedClick={isExpanded => {\n          if (isExpanded && limit) {\n            setRemovedItemIndex(limit);\n          } else {\n            setRemovedItemIndex(null);\n          }\n        }}\n      />\n    </div>\n  );\n}\n"]}

package/token-group/styles.css.js

@@ -1,14 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_dm8gx_1tp36_101",
-  "has-items": "awsui_has-items_dm8gx_1tp36_135",
-  "no-padding": "awsui_no-padding_dm8gx_1tp36_135",
-  "dismiss-button": "awsui_dismiss-button_dm8gx_1tp36_139",
-  "token": "awsui_token_dm8gx_1tp36_181",
-  "token-box": "awsui_token-box_dm8gx_1tp36_188",
-  "token-box-error": "awsui_token-box-error_dm8gx_1tp36_207",
-  "token-box-warning": "awsui_token-box-warning_dm8gx_1tp36_218",
-  "token-box-disabled": "awsui_token-box-disabled_dm8gx_1tp36_229"
+  "root": "awsui_root_dm8gx_r6wxu_101",
+  "has-items": "awsui_has-items_dm8gx_r6wxu_135",
+  "no-padding": "awsui_no-padding_dm8gx_r6wxu_135",
+  "dismiss-button": "awsui_dismiss-button_dm8gx_r6wxu_139",
+  "token": "awsui_token_dm8gx_r6wxu_181",
+  "token-box": "awsui_token-box_dm8gx_r6wxu_188",
+  "token-box-error": "awsui_token-box-error_dm8gx_r6wxu_207",
+  "token-box-warning": "awsui_token-box-warning_dm8gx_r6wxu_218",
+  "token-box-readonly": "awsui_token-box-readonly_dm8gx_r6wxu_229",
+  "token-box-disabled": "awsui_token-box-disabled_dm8gx_r6wxu_243"
 };