@cloudscape-design/components 3.0.670 → 3.0.672

package/input/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/input/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseKeyDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\n\nexport interface BaseInputProps {\n  /**\n   * Specifies the text entered into the form element.\n   */\n  value: string;\n\n  /**\n   * Specifies the name of the control used in HTML forms.\n   */\n  name?: string;\n\n  /**\n   * Specifies the placeholder text rendered when the value is an empty string.\n   */\n  placeholder?: string;\n\n  /**\n   * Specifies if the control is disabled, which prevents the\n   * user from modifying the value and prevents the value from\n   * being included in a form submission. A disabled control can't\n   * receive focus.\n   */\n  disabled?: boolean;\n\n  /**\n   * Specifies if the control is read only, which prevents the\n   * user from modifying the value but includes it in a form\n   * submission. A read-only control can receive focus.\n   *\n   * Don't use read-only inputs outside a form.\n   */\n  readOnly?: boolean;\n\n  /**\n   * Indicates whether the control should be focused as\n   * soon as the page loads, which enables the user to\n   * start typing without having to manually focus the control. Don't\n   * use this option on pages where the control may be\n   * scrolled out of the viewport.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Adds an `aria-label` to the native control.\n   *\n   * Use this if you don't have a visible label for this control.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Specifies whether to add `aria-required` to the native control.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * Called when input focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler<null>;\n\n  /**\n   * Called when input focus is moved to the UI control.\n   */\n  onFocus?: NonCancelableEventHandler<null>;\n\n  /**\n   * Called whenever a user changes the input value (by typing or pasting).\n   * The event `detail` contains the current value of the field.\n   */\n  onChange?: NonCancelableEventHandler<InputProps.ChangeDetail>;\n}\n\nexport interface InputAutoCorrect {\n  /**\n   * Specifies whether to disable browser autocorrect and related features.\n   * If you set this to `true`, it disables any native browser capabilities\n   * that automatically correct user input, such as `autocorrect` and\n   * `autocapitalize`. If you don't set it, the behavior follows the default behavior\n   * of the user's browser.\n   */\n  disableBrowserAutocorrect?: boolean;\n}\n\nexport interface InputAutoComplete {\n  /**\n   * Specifies whether to enable a browser's autocomplete functionality for this input.\n   * In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields).\n   * To use it correctly, set the `name` property.\n   *\n   * You can either provide a boolean value to set the property to \"on\" or \"off\", or specify a string value\n   * for the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.\n   */\n  autoComplete?: boolean | string;\n}\n\nexport interface InputSpellcheck {\n  /**\n   * Specifies the value of the `spellcheck` attribute on the native control.\n   * This value controls the native browser capability to check for spelling/grammar errors.\n   * If not set, the browser default behavior is to perform spellchecking.\n   * For more details, check the [spellcheck MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).\n   *\n   * Enhanced spellchecking features of your browser and/or operating system may send input values to external parties.\n   * Make sure it’s deactivated for fields with sensitive information to prevent\n   * inadvertently sending data (such as user passwords) to third parties.\n   */\n  spellcheck?: boolean;\n}\n\nexport interface InputKeyEvents {\n  /**\n   * Called when the underlying native textarea emits a `keydown` event.\n   * The event `detail` contains the `keyCode` and information\n   * about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).\n   */\n  onKeyDown?: CancelableEventHandler<InputProps.KeyDetail>;\n\n  /**\n   * Called when the underlying native textarea emits a `keyup` event.\n   * The event `detail` contains the `keyCode` and information\n   * about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).\n   */\n  onKeyUp?: CancelableEventHandler<InputProps.KeyDetail>;\n}\n\nexport interface InputClearLabel {\n  /**\n   * Adds an `aria-label` to the clear button inside the search input.\n   * @i18n\n   */\n  clearAriaLabel?: string;\n}\n\nexport interface InputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputKeyEvents,\n    InputAutoCorrect,\n    InputAutoComplete,\n    InputSpellcheck,\n    InputClearLabel,\n    FormFieldValidationControlProps {\n  /**\n   * Specifies the type of control to render.\n   * Inputs with a `number` type use the native element behavior, which might\n   * be slightly different across browsers.\n   */\n  type?: InputProps.Type;\n\n  /**\n   * Adds a hint to the browser about the type of data a user may enter into this field.\n   * Some devices may render a different virtual keyboard depending on this value.\n   * This value may not be supported by all browsers or devices.\n   */\n  inputMode?: InputProps.InputMode;\n\n  /**\n   * The step attribute is a number that specifies the granularity that the value\n   * must adhere to or the keyword \"any\". It is valid for the numeric input types,\n   * including the date, month, week, time, datetime-local, number and range types.\n   */\n  step?: InputProps.Step;\n}\n\nexport namespace InputProps {\n  export type Type = 'text' | 'password' | 'search' | 'number' | 'email' | 'url';\n  export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  export type Step = number | 'any';\n\n  export type ChangeDetail = BaseChangeDetail;\n  export type KeyDetail = BaseKeyDetail;\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n\n    /**\n     * Selects all text in the input control.\n     */\n    select(): void;\n  }\n}\nexport interface BaseChangeDetail {\n  value: string;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/input/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseKeyDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\n\nexport interface BaseInputProps {\n  /**\n   * Specifies the text entered into the form element.\n   */\n  value: string;\n\n  /**\n   * Specifies the name of the control used in HTML forms.\n   */\n  name?: string;\n\n  /**\n   * Specifies the placeholder text rendered when the value is an empty string.\n   */\n  placeholder?: string;\n\n  /**\n   * Specifies if the control is disabled, which prevents the\n   * user from modifying the value and prevents the value from\n   * being included in a form submission. A disabled control can't\n   * receive focus.\n   */\n  disabled?: boolean;\n\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from modifying the value but includes it in a form\n   * submission. A read-only control can receive focus.\n   *\n   * Don't use read-only inputs outside a form.\n   */\n  readOnly?: boolean;\n\n  /**\n   * Indicates whether the control should be focused as\n   * soon as the page loads, which enables the user to\n   * start typing without having to manually focus the control. Don't\n   * use this option on pages where the control may be\n   * scrolled out of the viewport.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Adds an `aria-label` to the native control.\n   *\n   * Use this if you don't have a visible label for this control.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Specifies whether to add `aria-required` to the native control.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * Called when input focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler<null>;\n\n  /**\n   * Called when input focus is moved to the UI control.\n   */\n  onFocus?: NonCancelableEventHandler<null>;\n\n  /**\n   * Called whenever a user changes the input value (by typing or pasting).\n   * The event `detail` contains the current value of the field.\n   */\n  onChange?: NonCancelableEventHandler<InputProps.ChangeDetail>;\n}\n\nexport interface InputAutoCorrect {\n  /**\n   * Specifies whether to disable browser autocorrect and related features.\n   * If you set this to `true`, it disables any native browser capabilities\n   * that automatically correct user input, such as `autocorrect` and\n   * `autocapitalize`. If you don't set it, the behavior follows the default behavior\n   * of the user's browser.\n   */\n  disableBrowserAutocorrect?: boolean;\n}\n\nexport interface InputAutoComplete {\n  /**\n   * Specifies whether to enable a browser's autocomplete functionality for this input.\n   * In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields).\n   * To use it correctly, set the `name` property.\n   *\n   * You can either provide a boolean value to set the property to \"on\" or \"off\", or specify a string value\n   * for the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.\n   */\n  autoComplete?: boolean | string;\n}\n\nexport interface InputSpellcheck {\n  /**\n   * Specifies the value of the `spellcheck` attribute on the native control.\n   * This value controls the native browser capability to check for spelling/grammar errors.\n   * If not set, the browser default behavior is to perform spellchecking.\n   * For more details, check the [spellcheck MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).\n   *\n   * Enhanced spellchecking features of your browser and/or operating system may send input values to external parties.\n   * Make sure it’s deactivated for fields with sensitive information to prevent\n   * inadvertently sending data (such as user passwords) to third parties.\n   */\n  spellcheck?: boolean;\n}\n\nexport interface InputKeyEvents {\n  /**\n   * Called when the underlying native textarea emits a `keydown` event.\n   * The event `detail` contains the `keyCode` and information\n   * about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).\n   */\n  onKeyDown?: CancelableEventHandler<InputProps.KeyDetail>;\n\n  /**\n   * Called when the underlying native textarea emits a `keyup` event.\n   * The event `detail` contains the `keyCode` and information\n   * about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).\n   */\n  onKeyUp?: CancelableEventHandler<InputProps.KeyDetail>;\n}\n\nexport interface InputClearLabel {\n  /**\n   * Adds an `aria-label` to the clear button inside the search input.\n   * @i18n\n   */\n  clearAriaLabel?: string;\n}\n\nexport interface InputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputKeyEvents,\n    InputAutoCorrect,\n    InputAutoComplete,\n    InputSpellcheck,\n    InputClearLabel,\n    FormFieldValidationControlProps {\n  /**\n   * Specifies the type of control to render.\n   * Inputs with a `number` type use the native element behavior, which might\n   * be slightly different across browsers.\n   */\n  type?: InputProps.Type;\n\n  /**\n   * Adds a hint to the browser about the type of data a user may enter into this field.\n   * Some devices may render a different virtual keyboard depending on this value.\n   * This value may not be supported by all browsers or devices.\n   */\n  inputMode?: InputProps.InputMode;\n\n  /**\n   * The step attribute is a number that specifies the granularity that the value\n   * must adhere to or the keyword \"any\". It is valid for the numeric input types,\n   * including the date, month, week, time, datetime-local, number and range types.\n   */\n  step?: InputProps.Step;\n}\n\nexport namespace InputProps {\n  export type Type = 'text' | 'password' | 'search' | 'number' | 'email' | 'url';\n  export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  export type Step = number | 'any';\n\n  export type ChangeDetail = BaseChangeDetail;\n  export type KeyDetail = BaseKeyDetail;\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n\n    /**\n     * Selects all text in the input control.\n     */\n    select(): void;\n  }\n}\nexport interface BaseChangeDetail {\n  value: string;\n}\n"]}

package/internal/base-component/styles.scoped.css

@@ -289,6 +289,7 @@
   --color-border-tutorial-kk53ya:#d1d5db;
   --color-foreground-control-default-wq2gpa:#ffffff;
   --color-foreground-control-disabled-zmz2k2:#ffffff;
+  --color-foreground-control-read-only-ibiswj:#5f6b7a;
   --color-shadow-default-8jp634:rgba(0, 7, 22, 0.12);
   --color-stroke-chart-line-ppq5nh:#7d8998;
   --color-text-accent-n2acxv:#0972d3;
@@ -890,6 +891,7 @@
     --color-border-tutorial-kk53ya:#414d5c;
     --color-foreground-control-default-wq2gpa:#000716;
     --color-foreground-control-disabled-zmz2k2:#0f1b2a;
+    --color-foreground-control-read-only-ibiswj:#8d99a8;
     --color-shadow-default-8jp634:rgba(0, 7, 22, 1);
     --color-text-accent-n2acxv:#539fe5;
     --color-text-body-default-at06ol:#b6bec9;
@@ -1187,6 +1189,7 @@
   --color-border-tutorial-kk53ya:#414d5c;
   --color-foreground-control-default-wq2gpa:#000716;
   --color-foreground-control-disabled-zmz2k2:#0f1b2a;
+  --color-foreground-control-read-only-ibiswj:#8d99a8;
   --color-shadow-default-8jp634:rgba(0, 7, 22, 1);
   --color-text-accent-n2acxv:#539fe5;
   --color-text-body-default-at06ol:#b6bec9;
@@ -1382,6 +1385,7 @@
   --color-border-tutorial-kk53ya:#414d5c;
   --color-foreground-control-default-wq2gpa:#000716;
   --color-foreground-control-disabled-zmz2k2:#0f1b2a;
+  --color-foreground-control-read-only-ibiswj:#8d99a8;
   --color-shadow-default-8jp634:rgba(0, 7, 22, 1);
   --color-text-accent-n2acxv:#539fe5;
   --color-text-body-default-at06ol:#b6bec9;
@@ -1675,6 +1679,7 @@
   --color-border-tutorial-kk53ya:#414d5c;
   --color-foreground-control-default-wq2gpa:#000716;
   --color-foreground-control-disabled-zmz2k2:#0f1b2a;
+  --color-foreground-control-read-only-ibiswj:#8d99a8;
   --color-shadow-default-8jp634:rgba(0, 7, 22, 1);
   --color-text-accent-n2acxv:#539fe5;
   --color-text-body-default-at06ol:#b6bec9;

package/internal/components/abstract-switch/index.d.ts

@@ -6,6 +6,7 @@ export interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>,
     outlineClassName: string;
     showOutline?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
     nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;
     styledControl: React.ReactElement;
     label?: React.ReactNode;
@@ -17,5 +18,5 @@ export interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>,
     ariaControls?: string;
     onClick: () => void;
 }
-export default function AbstractSwitch({ controlId, controlClassName, outlineClassName, showOutline, disabled, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onClick, __internalRootRef, ...rest }: AbstractSwitchProps): JSX.Element;
+export default function AbstractSwitch({ controlId, controlClassName, outlineClassName, showOutline, disabled, readOnly, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onClick, __internalRootRef, ...rest }: AbstractSwitchProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/abstract-switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,0BAA0B;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1F,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAW,EACX,wBAAwB,EACxB,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,OAAO,EACP,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eAgErB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,0BAA0B;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1F,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAW,EACX,wBAAwB,EACxB,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,OAAO,EACP,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eAgErB"}

package/internal/components/abstract-switch/index.js

@@ -9,7 +9,7 @@ function joinString(values) {
     return values.filter((value) => !!value).join(' ');
 }
 export default function AbstractSwitch(_a) {
-    var { controlId, controlClassName, outlineClassName, showOutline, disabled, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onClick, __internalRootRef } = _a, rest = __rest(_a, ["controlId", "controlClassName", "outlineClassName", "showOutline", "disabled", "nativeControl", "styledControl", "label", "description", "descriptionBottomPadding", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "ariaControls", "onClick", "__internalRootRef"]);
+    var { controlId, controlClassName, outlineClassName, showOutline, disabled, readOnly, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onClick, __internalRootRef } = _a, rest = __rest(_a, ["controlId", "controlClassName", "outlineClassName", "showOutline", "disabled", "readOnly", "nativeControl", "styledControl", "label", "description", "descriptionBottomPadding", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "ariaControls", "onClick", "__internalRootRef"]);
     const uniqueId = useUniqueId();
     const id = controlId || uniqueId;
     const labelId = `${id}-label`;
@@ -29,7 +29,7 @@ export default function AbstractSwitch(_a) {
         ariaDescriptions.push(descriptionId);
     }
     return (React.createElement("span", Object.assign({}, rest, { className: clsx(styles.wrapper, rest.className), ref: __internalRootRef }),
-        React.createElement("span", { className: styles['label-wrapper'], "aria-disabled": disabled ? 'true' : undefined, onClick: disabled ? undefined : onClick },
+        React.createElement("span", { className: styles['label-wrapper'], "aria-disabled": disabled ? 'true' : undefined, onClick: disabled || readOnly ? undefined : onClick },
             React.createElement("span", { className: clsx(styles.control, controlClassName) },
                 styledControl,
                 nativeControl({

package/internal/components/abstract-switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js';\n\nexport interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {\n  controlId?: string;\n  controlClassName: string;\n  outlineClassName: string;\n  showOutline?: boolean;\n  disabled?: boolean;\n  nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;\n  styledControl: React.ReactElement;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  descriptionBottomPadding?: boolean;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  ariaControls?: string;\n  onClick: () => void;\n}\n\nfunction joinString(values: (string | undefined)[]) {\n  return values.filter((value): value is string => !!value).join(' ');\n}\n\nexport default function AbstractSwitch({\n  controlId,\n  controlClassName,\n  outlineClassName,\n  showOutline,\n  disabled,\n  nativeControl,\n  styledControl,\n  label,\n  description,\n  descriptionBottomPadding,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  ariaControls,\n  onClick,\n  __internalRootRef,\n  ...rest\n}: AbstractSwitchProps) {\n  const uniqueId = useUniqueId();\n  const id = controlId || uniqueId;\n\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n\n  const ariaLabelledByIds = [];\n  if (label && !ariaLabel) {\n    ariaLabelledByIds.push(labelId);\n  }\n  if (ariaLabelledby) {\n    ariaLabelledByIds.push(ariaLabelledby);\n  }\n\n  const ariaDescriptions = [];\n  if (ariaDescribedby) {\n    ariaDescriptions.push(ariaDescribedby);\n  }\n  if (description) {\n    ariaDescriptions.push(descriptionId);\n  }\n\n  return (\n    <span {...rest} className={clsx(styles.wrapper, rest.className)} ref={__internalRootRef}>\n      <span\n        className={styles['label-wrapper']}\n        aria-disabled={disabled ? 'true' : undefined}\n        onClick={disabled ? undefined : onClick}\n      >\n        <span className={clsx(styles.control, controlClassName)}>\n          {styledControl}\n          {nativeControl({\n            id,\n            disabled,\n            className: styles['native-input'],\n            'aria-describedby': ariaDescriptions.length ? joinString(ariaDescriptions) : undefined,\n            'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,\n            'aria-label': ariaLabel,\n            'aria-controls': ariaControls,\n          })}\n          <span className={clsx(styles.outline, outlineClassName, showOutline && styles['show-outline'])} />\n        </span>\n        <span className={clsx(styles.content, !label && !description && styles['empty-content'])}>\n          {label && (\n            <span id={labelId} className={clsx(styles.label, { [styles['label-disabled']]: disabled })}>\n              {label}\n            </span>\n          )}\n          {description && (\n            <span\n              id={descriptionId}\n              className={clsx(styles.description, {\n                [styles['description-disabled']]: disabled,\n                [styles['description-bottom-padding']]: descriptionBottomPadding,\n              })}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n      </span>\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js';\n\nexport interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {\n  controlId?: string;\n  controlClassName: string;\n  outlineClassName: string;\n  showOutline?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;\n  styledControl: React.ReactElement;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  descriptionBottomPadding?: boolean;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  ariaControls?: string;\n  onClick: () => void;\n}\n\nfunction joinString(values: (string | undefined)[]) {\n  return values.filter((value): value is string => !!value).join(' ');\n}\n\nexport default function AbstractSwitch({\n  controlId,\n  controlClassName,\n  outlineClassName,\n  showOutline,\n  disabled,\n  readOnly,\n  nativeControl,\n  styledControl,\n  label,\n  description,\n  descriptionBottomPadding,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  ariaControls,\n  onClick,\n  __internalRootRef,\n  ...rest\n}: AbstractSwitchProps) {\n  const uniqueId = useUniqueId();\n  const id = controlId || uniqueId;\n\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n\n  const ariaLabelledByIds = [];\n  if (label && !ariaLabel) {\n    ariaLabelledByIds.push(labelId);\n  }\n  if (ariaLabelledby) {\n    ariaLabelledByIds.push(ariaLabelledby);\n  }\n\n  const ariaDescriptions = [];\n  if (ariaDescribedby) {\n    ariaDescriptions.push(ariaDescribedby);\n  }\n  if (description) {\n    ariaDescriptions.push(descriptionId);\n  }\n\n  return (\n    <span {...rest} className={clsx(styles.wrapper, rest.className)} ref={__internalRootRef}>\n      <span\n        className={styles['label-wrapper']}\n        aria-disabled={disabled ? 'true' : undefined}\n        onClick={disabled || readOnly ? undefined : onClick}\n      >\n        <span className={clsx(styles.control, controlClassName)}>\n          {styledControl}\n          {nativeControl({\n            id,\n            disabled,\n            className: styles['native-input'],\n            'aria-describedby': ariaDescriptions.length ? joinString(ariaDescriptions) : undefined,\n            'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,\n            'aria-label': ariaLabel,\n            'aria-controls': ariaControls,\n          })}\n          <span className={clsx(styles.outline, outlineClassName, showOutline && styles['show-outline'])} />\n        </span>\n        <span className={clsx(styles.content, !label && !description && styles['empty-content'])}>\n          {label && (\n            <span id={labelId} className={clsx(styles.label, { [styles['label-disabled']]: disabled })}>\n              {label}\n            </span>\n          )}\n          {description && (\n            <span\n              id={descriptionId}\n              className={clsx(styles.description, {\n                [styles['description-disabled']]: disabled,\n                [styles['description-bottom-padding']]: descriptionBottomPadding,\n              })}\n            >\n              {description}\n            </span>\n          )}\n        </span>\n      </span>\n    </span>\n  );\n}\n"]}

package/internal/components/button-trigger/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAGxE,OAAO,EAA0C,sBAAsB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7G,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,MAAM,CAAC,EAAE,sBAAsB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA6ED,yBAAiB,kBAAkB,CAAC;IAClC,UAAiB,GAAG;QAClB,KAAK,IAAI,IAAI,CAAC;KACf;CACF;;AAED,wBAA+C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAGxE,OAAO,EAA0C,sBAAsB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7G,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,MAAM,CAAC,EAAE,sBAAsB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAoFD,yBAAiB,kBAAkB,CAAC;IAClC,UAAiB,GAAG;QAClB,KAAK,IAAI,IAAI,CAAC;KACf;CACF;;AAED,wBAA+C"}

package/internal/components/button-trigger/index.js

@@ -10,14 +10,17 @@ import { fireKeyboardEvent, fireCancelableEvent } from '../../events';
 const ButtonTrigger = (_a, ref) => {
     var { children, pressed = false, hideCaret = false, disabled = false, readOnly = false, invalid = false, warning = false, inlineTokens, inFilteringToken, ariaHasPopup, ariaLabel, ariaLabelledby, ariaDescribedby, ariaControls, onKeyDown, onKeyUp, onMouseDown, onClick, onFocus, onBlur, autoFocus } = _a, restProps = __rest(_a, ["children", "pressed", "hideCaret", "disabled", "readOnly", "invalid", "warning", "inlineTokens", "inFilteringToken", "ariaHasPopup", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "ariaControls", "onKeyDown", "onKeyUp", "onMouseDown", "onClick", "onFocus", "onBlur", "autoFocus"]);
     const baseProps = getBaseProps(restProps);
-    const attributes = Object.assign(Object.assign({}, baseProps), { type: 'button', className: clsx(styles['button-trigger'], baseProps.className, pressed && styles.pressed, disabled && styles.disabled, invalid && styles.invalid, warning && !invalid && styles.warning, !hideCaret && styles['has-caret'], readOnly && styles['read-only'], inFilteringToken && styles['in-filtering-token'], inlineTokens && styles['inline-tokens']), disabled: disabled || readOnly, 'aria-expanded': pressed, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup !== null && ariaHasPopup !== void 0 ? ariaHasPopup : 'listbox', 'aria-controls': ariaControls, onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)), onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)), onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)), onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)), onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)), onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)), autoFocus });
+    let attributes = Object.assign(Object.assign({}, baseProps), { type: 'button', className: clsx(styles['button-trigger'], baseProps.className, pressed && styles.pressed, disabled && styles.disabled, invalid && styles.invalid, warning && !invalid && styles.warning, !hideCaret && styles['has-caret'], readOnly && styles.readonly, inFilteringToken && styles['in-filtering-token'], inlineTokens && styles['inline-tokens']), disabled: disabled, 'aria-expanded': pressed, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup !== null && ariaHasPopup !== void 0 ? ariaHasPopup : 'listbox', 'aria-controls': ariaControls, 'aria-disabled': readOnly && !disabled ? 'true' : undefined, autoFocus });
+    if (!readOnly) {
+        attributes = Object.assign(Object.assign({}, attributes), { onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)), onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)), onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)), onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)), onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)), onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)) });
+    }
     if (invalid) {
         attributes['aria-invalid'] = invalid;
     }
     return (React.createElement("button", Object.assign({ ref: ref }, attributes),
         children,
         !hideCaret && (React.createElement("span", { className: styles.arrow },
-            React.createElement(InternalIcon, { name: "caret-down-filled", variant: disabled ? 'disabled' : 'normal' })))));
+            React.createElement(InternalIcon, { name: "caret-down-filled", variant: disabled || readOnly ? 'disabled' : 'normal' })))));
 };
 export default React.forwardRef(ButtonTrigger);
 //# sourceMappingURL=index.js.map

package/internal/components/button-trigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.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, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport InternalIcon from '../../../icon/internal';\nimport styles from './styles.css.js';\nimport { fireKeyboardEvent, fireCancelableEvent, CancelableEventHandler, BaseKeyDetail } from '../../events';\n\nexport interface ButtonTriggerProps extends BaseComponentProps {\n  children?: React.ReactNode;\n  pressed?: boolean;\n  hideCaret?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  inFilteringToken?: boolean;\n  inlineTokens?: boolean;\n  ariaHasPopup?: 'true' | 'listbox' | 'dialog';\n  ariaControls?: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onKeyUp?: CancelableEventHandler<BaseKeyDetail>;\n  onMouseDown?: CancelableEventHandler;\n  onClick?: CancelableEventHandler;\n  onFocus?: CancelableEventHandler;\n  onBlur?: CancelableEventHandler<{ relatedTarget: Node | null }>;\n  autoFocus?: boolean;\n}\n\nconst ButtonTrigger = (\n  {\n    children,\n    pressed = false,\n    hideCaret = false,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    warning = false,\n    inlineTokens,\n    inFilteringToken,\n    ariaHasPopup,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaControls,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onClick,\n    onFocus,\n    onBlur,\n    autoFocus,\n    ...restProps\n  }: ButtonTriggerProps,\n  ref: React.Ref<HTMLButtonElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  const attributes: ButtonHTMLAttributes<HTMLButtonElement> = {\n    ...baseProps,\n    type: 'button',\n    className: clsx(\n      styles['button-trigger'],\n      baseProps.className,\n      pressed && styles.pressed,\n      disabled && styles.disabled,\n      invalid && styles.invalid,\n      warning && !invalid && styles.warning,\n      !hideCaret && styles['has-caret'],\n      readOnly && styles['read-only'],\n      inFilteringToken && styles['in-filtering-token'],\n      inlineTokens && styles['inline-tokens']\n    ),\n    disabled: disabled || readOnly,\n    'aria-expanded': pressed,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    'aria-haspopup': ariaHasPopup ?? 'listbox',\n    'aria-controls': ariaControls,\n    onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n    onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n    onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)),\n    onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)),\n    onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)),\n    onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)),\n    autoFocus,\n  };\n\n  if (invalid) {\n    attributes['aria-invalid'] = invalid;\n  }\n\n  return (\n    <button ref={ref} {...attributes}>\n      {children}\n      {!hideCaret && (\n        <span className={styles.arrow}>\n          <InternalIcon name=\"caret-down-filled\" variant={disabled ? 'disabled' : 'normal'} />\n        </span>\n      )}\n    </button>\n  );\n};\n\nexport namespace ButtonTriggerProps {\n  export interface Ref {\n    focus(): void;\n  }\n}\n\nexport default React.forwardRef(ButtonTrigger);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.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, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport InternalIcon from '../../../icon/internal';\nimport styles from './styles.css.js';\nimport { fireKeyboardEvent, fireCancelableEvent, CancelableEventHandler, BaseKeyDetail } from '../../events';\n\nexport interface ButtonTriggerProps extends BaseComponentProps {\n  children?: React.ReactNode;\n  pressed?: boolean;\n  hideCaret?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  inFilteringToken?: boolean;\n  inlineTokens?: boolean;\n  ariaHasPopup?: 'true' | 'listbox' | 'dialog';\n  ariaControls?: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onKeyUp?: CancelableEventHandler<BaseKeyDetail>;\n  onMouseDown?: CancelableEventHandler;\n  onClick?: CancelableEventHandler;\n  onFocus?: CancelableEventHandler;\n  onBlur?: CancelableEventHandler<{ relatedTarget: Node | null }>;\n  autoFocus?: boolean;\n}\n\nconst ButtonTrigger = (\n  {\n    children,\n    pressed = false,\n    hideCaret = false,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    warning = false,\n    inlineTokens,\n    inFilteringToken,\n    ariaHasPopup,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaControls,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onClick,\n    onFocus,\n    onBlur,\n    autoFocus,\n    ...restProps\n  }: ButtonTriggerProps,\n  ref: React.Ref<HTMLButtonElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  let attributes: ButtonHTMLAttributes<HTMLButtonElement> = {\n    ...baseProps,\n    type: 'button',\n    className: clsx(\n      styles['button-trigger'],\n      baseProps.className,\n      pressed && styles.pressed,\n      disabled && styles.disabled,\n      invalid && styles.invalid,\n      warning && !invalid && styles.warning,\n      !hideCaret && styles['has-caret'],\n      readOnly && styles.readonly,\n      inFilteringToken && styles['in-filtering-token'],\n      inlineTokens && styles['inline-tokens']\n    ),\n    disabled: disabled,\n    'aria-expanded': pressed,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    'aria-haspopup': ariaHasPopup ?? 'listbox',\n    'aria-controls': ariaControls,\n    'aria-disabled': readOnly && !disabled ? 'true' : undefined,\n    autoFocus,\n  };\n\n  if (!readOnly) {\n    attributes = {\n      ...attributes,\n      onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n      onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n      onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)),\n      onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)),\n      onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)),\n      onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)),\n    };\n  }\n\n  if (invalid) {\n    attributes['aria-invalid'] = invalid;\n  }\n\n  return (\n    <button ref={ref} {...attributes}>\n      {children}\n      {!hideCaret && (\n        <span className={styles.arrow}>\n          <InternalIcon name=\"caret-down-filled\" variant={disabled || readOnly ? 'disabled' : 'normal'} />\n        </span>\n      )}\n    </button>\n  );\n};\n\nexport namespace ButtonTriggerProps {\n  export interface Ref {\n    focus(): void;\n  }\n}\n\nexport default React.forwardRef(ButtonTrigger);\n"]}

package/internal/components/button-trigger/styles.css.js

@@ -1,16 +1,16 @@
 
     import './styles.scoped.css';
     export default {
-  "button-trigger": "awsui_button-trigger_18eso_1ecvo_101",
-  "arrow": "awsui_arrow_18eso_1ecvo_101",
-  "has-caret": "awsui_has-caret_18eso_1ecvo_168",
-  "placeholder": "awsui_placeholder_18eso_1ecvo_171",
-  "pressed": "awsui_pressed_18eso_1ecvo_184",
-  "disabled": "awsui_disabled_18eso_1ecvo_187",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_1ecvo_197",
-  "read-only": "awsui_read-only_18eso_1ecvo_203",
-  "invalid": "awsui_invalid_18eso_1ecvo_225",
-  "warning": "awsui_warning_18eso_1ecvo_236",
-  "inline-tokens": "awsui_inline-tokens_18eso_1ecvo_274"
+  "button-trigger": "awsui_button-trigger_18eso_m2fj5_101",
+  "arrow": "awsui_arrow_18eso_m2fj5_101",
+  "has-caret": "awsui_has-caret_18eso_m2fj5_168",
+  "placeholder": "awsui_placeholder_18eso_m2fj5_171",
+  "pressed": "awsui_pressed_18eso_m2fj5_184",
+  "disabled": "awsui_disabled_18eso_m2fj5_187",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_m2fj5_197",
+  "readonly": "awsui_readonly_18eso_m2fj5_203",
+  "invalid": "awsui_invalid_18eso_m2fj5_225",
+  "warning": "awsui_warning_18eso_m2fj5_236",
+  "inline-tokens": "awsui_inline-tokens_18eso_m2fj5_274"
 };
   

package/internal/components/button-trigger/styles.scoped.css

@@ -98,16 +98,16 @@ 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_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   transition: transform var(--motion-duration-rotate-180-dpvl4m, 135ms) var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+  .awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui-motion-disabled .awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -116,7 +116,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_button-trigger_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -166,51 +166,51 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-default-1zl7hq, #7d8998);
   min-block-size: var(--size-vertical-input-v5iwwf, 32px);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_has-caret_18eso_1ecvo_168:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_has-caret_18eso_m2fj5_168:not(#\9) {
   padding-inline-end: var(--space-field-icon-offset-csk9vw, 36px);
 }
-.awsui_button-trigger_18eso_1ecvo_101 > .awsui_placeholder_18eso_1ecvo_171:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101 > .awsui_placeholder_18eso_m2fj5_171:not(#\9) {
   color: var(--color-text-input-placeholder-mx1ygd, #5f6b7a);
   font-style: italic;
 }
-.awsui_button-trigger_18eso_1ecvo_101 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-field-horizontal-gg19kw, 12px);
   inset-block-start: calc(50% - var(--line-height-body-m-30ar75, 20px) / 2);
   color: var(--color-text-button-inline-icon-default-s3yux9, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):hover > .awsui_arrow_18eso_1ecvo_101 {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):hover > .awsui_arrow_18eso_m2fj5_101 {
   color: var(--color-text-button-inline-icon-hover-my2daf, #033160);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_pressed_18eso_1ecvo_184 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_pressed_18eso_m2fj5_184 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_disabled_18eso_1ecvo_187:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187:not(#\9) {
   background-color: var(--color-background-input-disabled-ab59a3, #e9ebed);
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
   color: var(--color-text-input-disabled-f8pjm5, #9ba7b6);
   cursor: auto;
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_disabled_18eso_1ecvo_187 > .awsui_arrow_18eso_1ecvo_101:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187 > .awsui_arrow_18eso_m2fj5_101:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_disabled_18eso_1ecvo_187.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9) {
   border-color: var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_disabled_18eso_1ecvo_187 > .awsui_placeholder_18eso_1ecvo_171:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187 > .awsui_placeholder_18eso_m2fj5_171:not(#\9) {
   color: var(--color-text-input-placeholder-disabled-abhb0d, #9ba7b6);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_read-only_18eso_1ecvo_203:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_readonly_18eso_m2fj5_203:not(#\9):not(.awsui_button-trigger_18eso_m2fj5_101.awsui_disabled_18eso_m2fj5_187) {
   background-color: var(--color-background-input-default-igdh5e, #ffffff);
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-focused-3d15sl, #033160);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-focused-3d15sl, #033160);
@@ -220,10 +220,10 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101:not(#\
   border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197):invalid {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197):invalid {
   box-shadow: none;
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_invalid_18eso_1ecvo_225, .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_invalid_18eso_1ecvo_225:focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_invalid_18eso_m2fj5_225, .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_invalid_18eso_m2fj5_225:focus {
   color: var(--color-text-status-error-wdvepn, #d91515);
   border-color: var(--color-text-status-error-wdvepn, #d91515);
   padding-inline-start: calc(
@@ -231,10 +231,10 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101:not(#\
 );
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_invalid_18eso_1ecvo_225:focus, .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_invalid_18eso_1ecvo_225:focus:focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_invalid_18eso_m2fj5_225:focus, .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_invalid_18eso_m2fj5_225:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_warning_18eso_1ecvo_236, .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_warning_18eso_1ecvo_236:focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_warning_18eso_m2fj5_236, .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_warning_18eso_m2fj5_236:focus {
   color: var(--color-text-status-warning-yik8vi, #8d6605);
   border-color: var(--color-text-status-warning-yik8vi, #8d6605);
   padding-inline-start: calc(
@@ -242,23 +242,23 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101:not(#\
 );
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_warning_18eso_1ecvo_236:focus, .awsui_button-trigger_18eso_1ecvo_101:not(#\9):not(.awsui_in-filtering-token_18eso_1ecvo_197).awsui_warning_18eso_1ecvo_236:focus:focus {
+.awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_warning_18eso_m2fj5_236:focus, .awsui_button-trigger_18eso_m2fj5_101:not(#\9):not(.awsui_in-filtering-token_18eso_m2fj5_197).awsui_warning_18eso_m2fj5_236:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9) {
   border-color: var(--color-border-item-selected-k00wlz, #0972d3);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   block-size: 100%;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_m2fj5_101.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_m2fj5_101.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-0ailok, -5px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101.awsui_in-filtering-token_18eso_1ecvo_197:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_m2fj5_101.awsui_in-filtering-token_18eso_m2fj5_197:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -272,6 +272,6 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1ecvo_101.awsui_
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-.awsui_button-trigger_18eso_1ecvo_101.awsui_inline-tokens_18eso_1ecvo_274:not(#\9) {
+.awsui_button-trigger_18eso_m2fj5_101.awsui_inline-tokens_18eso_m2fj5_274:not(#\9) {
   padding-block: 0;
 }

package/internal/components/button-trigger/styles.selectors.js

@@ -2,16 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-trigger": "awsui_button-trigger_18eso_1ecvo_101",
-  "arrow": "awsui_arrow_18eso_1ecvo_101",
-  "has-caret": "awsui_has-caret_18eso_1ecvo_168",
-  "placeholder": "awsui_placeholder_18eso_1ecvo_171",
-  "pressed": "awsui_pressed_18eso_1ecvo_184",
-  "disabled": "awsui_disabled_18eso_1ecvo_187",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_1ecvo_197",
-  "read-only": "awsui_read-only_18eso_1ecvo_203",
-  "invalid": "awsui_invalid_18eso_1ecvo_225",
-  "warning": "awsui_warning_18eso_1ecvo_236",
-  "inline-tokens": "awsui_inline-tokens_18eso_1ecvo_274"
+  "button-trigger": "awsui_button-trigger_18eso_m2fj5_101",
+  "arrow": "awsui_arrow_18eso_m2fj5_101",
+  "has-caret": "awsui_has-caret_18eso_m2fj5_168",
+  "placeholder": "awsui_placeholder_18eso_m2fj5_171",
+  "pressed": "awsui_pressed_18eso_m2fj5_184",
+  "disabled": "awsui_disabled_18eso_m2fj5_187",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_m2fj5_197",
+  "readonly": "awsui_readonly_18eso_m2fj5_203",
+  "invalid": "awsui_invalid_18eso_m2fj5_225",
+  "warning": "awsui_warning_18eso_m2fj5_236",
+  "inline-tokens": "awsui_inline-tokens_18eso_m2fj5_274"
 };
   

package/internal/components/checkbox-icon/index.d.ts

@@ -4,6 +4,7 @@ export interface CheckboxIconProps extends BaseComponentProps {
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
 }
 export interface Dimension {
     viewBox: string;
@@ -14,6 +15,6 @@ export interface Dimension {
     size: number;
 }
 export declare const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension>;
-declare const CheckboxIcon: ({ checked, indeterminate, disabled, ...restProps }: CheckboxIconProps) => JSX.Element;
+declare const CheckboxIcon: ({ checked, indeterminate, disabled, readOnly, ...restProps }: CheckboxIconProps) => JSX.Element;
 export default CheckboxIcon;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/checkbox-icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAIxE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,SAAS,CAiBnF,CAAC;AAEF,QAAA,MAAM,YAAY,uDAAgE,iBAAiB,gBA2BlG,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAIxE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,SAAS,CAiBnF,CAAC;AAEF,QAAA,MAAM,YAAY,iEAMf,iBAAiB,gBA+BnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/internal/components/checkbox-icon/index.js

@@ -26,7 +26,7 @@ export const dimensionsByTheme = {
     },
 };
 const CheckboxIcon = (_a) => {
-    var { checked, indeterminate, disabled = false } = _a, restProps = __rest(_a, ["checked", "indeterminate", "disabled"]);
+    var { checked, indeterminate, disabled = false, readOnly = false } = _a, restProps = __rest(_a, ["checked", "indeterminate", "disabled", "readOnly"]);
     const baseProps = getBaseProps(restProps);
     const theme = useVisualRefresh() ? 'refresh' : 'default';
     const dimensions = dimensionsByTheme[theme];
@@ -35,8 +35,12 @@ const CheckboxIcon = (_a) => {
                 [styles['styled-box-checked']]: checked,
                 [styles['styled-box-indeterminate']]: indeterminate,
                 [styles['styled-box-disabled']]: disabled,
+                [styles['styled-box-readonly']]: readOnly,
             }), x: dimensions.xy, y: dimensions.xy, rx: dimensions.r, ry: dimensions.r, width: dimensions.size, height: dimensions.size }),
-        checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], { [styles['styled-line-disabled']]: disabled }), points: indeterminate ? dimensions.indeterminate : dimensions.checked })) : null));
+        checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], {
+                [styles['styled-line-disabled']]: disabled,
+                [styles['styled-line-readonly']]: readOnly,
+            }), points: indeterminate ? dimensions.indeterminate : dimensions.checked })) : null));
 };
 export default CheckboxIcon;
 //# sourceMappingURL=index.js.map

package/internal/components/checkbox-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAgBrC,6CAA6C;AAC7C,MAAM,CAAC,MAAM,iBAAiB,GAA0D;IACtF,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,GAAG;QACP,CAAC,EAAE,GAAG;QACN,IAAI,EAAE,EAAE;KACT;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,CAAC;QACL,CAAC,EAAE,CAAC;QACJ,IAAI,EAAE,EAAE;KACT;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAA6E,EAAE,EAAE;QAAjF,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,GAAG,KAAK,OAAmC,EAA9B,SAAS,cAAxD,wCAA0D,CAAF;IAC5E,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,2CAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,OAAO,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO,IAAK,SAAS;QAC1G,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;gBACpC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,OAAO;gBACvC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,aAAa;gBACnD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;aAC1C,CAAC,EACF,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,MAAM,EAAE,UAAU,CAAC,IAAI,GACvB;QACD,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,CAC1B,kCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EACtF,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,GACrE,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,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 from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface CheckboxIconProps extends BaseComponentProps {\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n}\nexport interface Dimension {\n  viewBox: string;\n  indeterminate: string;\n  checked: string;\n  xy: number;\n  r: number;\n  size: number;\n}\n\n// Can't use css variables for svg attributes\nexport const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension> = {\n  default: {\n    viewBox: '0 0 14 14',\n    indeterminate: '2.5,7 11.5,7',\n    checked: '2.5,7 6,10 11,3',\n    xy: 0.5,\n    r: 1.5,\n    size: 13,\n  },\n  refresh: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 1,\n    r: 2,\n    size: 14,\n  },\n};\n\nconst CheckboxIcon = ({ checked, indeterminate, disabled = false, ...restProps }: CheckboxIconProps) => {\n  const baseProps = getBaseProps(restProps);\n  const theme = useVisualRefresh() ? 'refresh' : 'default';\n  const dimensions = dimensionsByTheme[theme];\n  return (\n    <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n      <rect\n        className={clsx(styles['styled-box'], {\n          [styles['styled-box-checked']]: checked,\n          [styles['styled-box-indeterminate']]: indeterminate,\n          [styles['styled-box-disabled']]: disabled,\n        })}\n        x={dimensions.xy}\n        y={dimensions.xy}\n        rx={dimensions.r}\n        ry={dimensions.r}\n        width={dimensions.size}\n        height={dimensions.size}\n      />\n      {checked || indeterminate ? (\n        <polyline\n          className={clsx(styles['styled-line'], { [styles['styled-line-disabled']]: disabled })}\n          points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n        />\n      ) : null}\n    </svg>\n  );\n};\n\nexport default CheckboxIcon;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAiBrC,6CAA6C;AAC7C,MAAM,CAAC,MAAM,iBAAiB,GAA0D;IACtF,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,GAAG;QACP,CAAC,EAAE,GAAG;QACN,IAAI,EAAE,EAAE;KACT;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE,cAAc;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,EAAE,EAAE,CAAC;QACL,CAAC,EAAE,CAAC;QACJ,IAAI,EAAE,EAAE;KACT;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAMF,EAAE,EAAE;QANF,EACpB,OAAO,EACP,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,OAEE,EADf,SAAS,cALQ,oDAMrB,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,2CAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,OAAO,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO,IAAK,SAAS;QAC1G,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;gBACpC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,OAAO;gBACvC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,aAAa;gBACnD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;gBACzC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,QAAQ;aAC1C,CAAC,EACF,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,CAAC,EAAE,UAAU,CAAC,EAAE,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,EAAE,EAAE,UAAU,CAAC,CAAC,EAChB,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,MAAM,EAAE,UAAU,CAAC,IAAI,GACvB;QACD,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,CAC1B,kCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;gBACrC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ;gBAC1C,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,QAAQ;aAC3C,CAAC,EACF,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,GACrE,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,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 from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface CheckboxIconProps extends BaseComponentProps {\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n}\nexport interface Dimension {\n  viewBox: string;\n  indeterminate: string;\n  checked: string;\n  xy: number;\n  r: number;\n  size: number;\n}\n\n// Can't use css variables for svg attributes\nexport const dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension> = {\n  default: {\n    viewBox: '0 0 14 14',\n    indeterminate: '2.5,7 11.5,7',\n    checked: '2.5,7 6,10 11,3',\n    xy: 0.5,\n    r: 1.5,\n    size: 13,\n  },\n  refresh: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 1,\n    r: 2,\n    size: 14,\n  },\n};\n\nconst CheckboxIcon = ({\n  checked,\n  indeterminate,\n  disabled = false,\n  readOnly = false,\n  ...restProps\n}: CheckboxIconProps) => {\n  const baseProps = getBaseProps(restProps);\n  const theme = useVisualRefresh() ? 'refresh' : 'default';\n  const dimensions = dimensionsByTheme[theme];\n  return (\n    <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n      <rect\n        className={clsx(styles['styled-box'], {\n          [styles['styled-box-checked']]: checked,\n          [styles['styled-box-indeterminate']]: indeterminate,\n          [styles['styled-box-disabled']]: disabled,\n          [styles['styled-box-readonly']]: readOnly,\n        })}\n        x={dimensions.xy}\n        y={dimensions.xy}\n        rx={dimensions.r}\n        ry={dimensions.r}\n        width={dimensions.size}\n        height={dimensions.size}\n      />\n      {checked || indeterminate ? (\n        <polyline\n          className={clsx(styles['styled-line'], {\n            [styles['styled-line-disabled']]: disabled,\n            [styles['styled-line-readonly']]: readOnly,\n          })}\n          points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n        />\n      ) : null}\n    </svg>\n  );\n};\n\nexport default CheckboxIcon;\n"]}

package/internal/components/checkbox-icon/styles.css.js

@@ -1,12 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fn7j_qlcjn_97",
-  "styled-box": "awsui_styled-box_1fn7j_qlcjn_104",
-  "styled-box-checked": "awsui_styled-box-checked_1fn7j_qlcjn_110",
-  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_qlcjn_110",
-  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_qlcjn_114",
-  "styled-line": "awsui_styled-line_1fn7j_qlcjn_128",
-  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_qlcjn_133"
+  "root": "awsui_root_1fn7j_1yjhw_97",
+  "styled-box": "awsui_styled-box_1fn7j_1yjhw_104",
+  "styled-box-checked": "awsui_styled-box-checked_1fn7j_1yjhw_110",
+  "styled-box-indeterminate": "awsui_styled-box-indeterminate_1fn7j_1yjhw_110",
+  "styled-box-disabled": "awsui_styled-box-disabled_1fn7j_1yjhw_114",
+  "styled-box-readonly": "awsui_styled-box-readonly_1fn7j_1yjhw_114",
+  "styled-line": "awsui_styled-line_1fn7j_1yjhw_128",
+  "styled-line-disabled": "awsui_styled-line-disabled_1fn7j_1yjhw_133",
+  "styled-line-readonly": "awsui_styled-line-readonly_1fn7j_1yjhw_136"
 };
   

package/internal/components/checkbox-icon/styles.scoped.css

@@ -94,42 +94,45 @@ 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_1fn7j_qlcjn_97:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97:not(#\9) {
   position: absolute;
   inline-size: 100%;
   block-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box_1fn7j_qlcjn_104:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box_1fn7j_1yjhw_104:not(#\9) {
   fill: var(--color-background-control-default-qzruqy, #ffffff);
   stroke: var(--color-border-control-default-0fzxw0, #7d8998);
   stroke-width: var(--border-field-width-09w7vk, 2px);
   transition: fill var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear), stroke var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box-checked_1fn7j_qlcjn_110:not(#\9), .awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box-indeterminate_1fn7j_qlcjn_110:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box-checked_1fn7j_1yjhw_110:not(#\9), .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box-indeterminate_1fn7j_1yjhw_110:not(#\9) {
   fill: var(--color-background-control-checked-w517i0, #0972d3);
   stroke: var(--color-border-control-checked-wlsmbn, #0972d3);
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box-disabled_1fn7j_qlcjn_114:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box-disabled_1fn7j_1yjhw_114:not(#\9), .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box-readonly_1fn7j_1yjhw_114:not(#\9) {
   fill: var(--color-background-control-disabled-pwkvgd, #d1d5db);
   stroke: var(--color-border-control-disabled-bv2kkn, #d1d5db);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box_1fn7j_qlcjn_104:not(#\9) {
+  .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box_1fn7j_1yjhw_104:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box_1fn7j_qlcjn_104:not(#\9), .awsui-mode-entering .awsui_root_1fn7j_qlcjn_97 > .awsui_styled-box_1fn7j_qlcjn_104:not(#\9) {
+.awsui-motion-disabled .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box_1fn7j_1yjhw_104:not(#\9), .awsui-mode-entering .awsui_root_1fn7j_1yjhw_97 > .awsui_styled-box_1fn7j_1yjhw_104:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-line_1fn7j_qlcjn_128:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-line_1fn7j_1yjhw_128:not(#\9) {
   stroke: var(--color-foreground-control-default-wq2gpa, #ffffff);
   stroke-width: 2;
   fill: none;
 }
-.awsui_root_1fn7j_qlcjn_97 > .awsui_styled-line-disabled_1fn7j_qlcjn_133:not(#\9) {
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-line-disabled_1fn7j_1yjhw_133:not(#\9) {
   stroke: var(--color-foreground-control-disabled-zmz2k2, #ffffff);
+}
+.awsui_root_1fn7j_1yjhw_97 > .awsui_styled-line-readonly_1fn7j_1yjhw_136:not(#\9) {
+  stroke: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
 }