@cloudscape-design/components-themeable 3.0.1210 → 3.0.1212

package/lib/internal/template/internal/components/dropdown/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { NonCancelableEventHandler } from '../../events';\n\nexport type OptionsFilteringType = 'none' | 'auto' | 'manual';\nexport interface OptionsLoadItemsDetail {\n  filteringText: string;\n  firstPage: boolean;\n  samePage: boolean;\n}\n\nexport interface BaseDropdownHostProps extends ExpandToViewport {\n  /**\n   * If you have more than 500 options, enable this flag to apply a performance optimization\n   * that makes the filtering experience smoother. We don't recommend enabling the feature if you\n   * have less than 500 options, because the improvements to performance are offset by a\n   * visible scrolling lag.\n   *\n   * When you set this flag to `true`, it removes options that are not currently in view from the DOM.\n   * If your test accesses such options, you need to first scroll the options container\n   * to the correct offset, before performing any operations on them. Use the element returned\n   * by the `findOptionsContainer` test utility for this.\n   */\n  virtualScroll?: boolean;\n\n  /**\n   * Use this event to implement the asynchronous behavior for the component.\n   *\n   * The event is called in the following situations:\n   * * The user scrolls to the end of the list of options, if `statusType` is set to `pending`.\n   * * The user clicks on the recovery button in the error state.\n   * * The user types inside the input field.\n   * * The user focuses the input field.\n   *\n   * The detail object contains the following properties:\n   * * `filteringText` - The value that you need to use to fetch options.\n   * * `firstPage` - Indicates that you should fetch the first page of options that match the `filteringText`.\n   * * `samePage` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).\n   **/\n  onLoadItems?: NonCancelableEventHandler<OptionsLoadItemsDetail>;\n}\n\nexport interface DropdownProps extends ExpandToViewport {\n  /**\n   * Trigger element.\n   */\n  trigger: React.ReactNode;\n  /**\n   * \"Sticky\" header of the dropdown content\n   */\n  header?: React.ReactNode;\n  /**\n   * Footer slot fixed at the bottom of the dropdown\n   */\n  footer?: React.ReactNode;\n  /**\n   * Dropdown content elements.\n   */\n  content?: React.ReactNode;\n  /**\n   * Updating content key triggers dropdown position re-evaluation.\n   */\n  contentKey?: string;\n  /**\n   * Open state of the dropdown.\n   */\n  open?: boolean;\n  /**\n   * Called when a user clicks outside of the dropdown content, when it is open.\n   */\n  onDropdownClose?: NonCancelableEventHandler<null>;\n  /**\n   * Called when a mouse button is pressed inside the dropdown content.\n   */\n  onMouseDown?: React.MouseEventHandler;\n  /**\n   * Dropdown id\n   */\n  dropdownId?: string;\n  /**\n   * Stretches dropdown to occupy entire width.\n   */\n  stretchWidth?: boolean;\n  /**\n   * Stretches dropdown to occupy entire height.\n   */\n  stretchHeight?: boolean;\n\n  /**\n   * Stretches the trigger to the height of the dropdown container.\n   */\n  stretchTriggerHeight?: boolean;\n\n  /**\n   * Whether the dropdown content should be at least as wide as the trigger.\n   *\n   * @defaultValue true\n   */\n  stretchToTriggerWidth?: boolean;\n\n  /**\n   * Whether the dropdown content can grow beyond the width of the trigger.\n   */\n  stretchBeyondTriggerWidth?: boolean;\n\n  /**\n   * Determines that the dropdown should preferably be aligned to the center of the trigger\n   * instead of dropping left or right.\n   */\n  preferCenter?: boolean;\n\n  /**\n   * Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out).\n   */\n  interior?: boolean;\n  /**\n   * Sets the min width of the dropdown (in px)\n   */\n  minWidth?: number;\n  /**\n   * Whether the dropdown will have a scrollbar or not\n   */\n  scrollable?: boolean;\n\n  /**\n   * Whether the dropdown will have a focus loop including trigger, header, content and footer.\n   */\n  loopFocus?: boolean;\n\n  /**\n   * Called when focus enters the trigger or dropdown content.\n   */\n  onFocus?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n\n  /**\n   * Called when focus leaves the trigger or dropdown content.\n   */\n  onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n\n  /**\n   * ID for the dropdown content wrapper\n   */\n  dropdownContentId?: string;\n  /**\n   * HTML role for the dropdown content wrapper\n   */\n  dropdownContentRole?: string;\n  /**\n   * Labelledby for the dropdown (required when role=\"dialog\")\n   */\n  ariaLabelledby?: string;\n  /**\n   * Describedby for the dropdown (recommended when role=\"dialog\")\n   */\n  ariaDescribedby?: string;\n}\n\nexport interface ExpandToViewport {\n  /**\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  expandToViewport?: boolean;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { NonCancelableEventHandler } from '../../events';\n\nexport type OptionsFilteringType = 'none' | 'auto' | 'manual';\n\n/**\n * Alignment of the dropdown relative to its trigger.\n */\nexport type DropdownAlignment =\n  | 'start' // Aligns to the start edge of trigger (default)\n  | 'center'; // Centers dropdown on trigger\n\n/**\n * Width constraint for the dropdown.\n * - 'trigger': references the trigger element's width\n * - number: width in pixels\n */\nexport type DropdownWidthConstraint = 'trigger' | number;\n\nexport interface OptionsLoadItemsDetail {\n  filteringText: string;\n  firstPage: boolean;\n  samePage: boolean;\n}\n\nexport interface BaseDropdownHostProps extends ExpandToViewport {\n  /**\n   * If you have more than 500 options, enable this flag to apply a performance optimization\n   * that makes the filtering experience smoother. We don't recommend enabling the feature if you\n   * have less than 500 options, because the improvements to performance are offset by a\n   * visible scrolling lag.\n   *\n   * When you set this flag to `true`, it removes options that are not currently in view from the DOM.\n   * If your test accesses such options, you need to first scroll the options container\n   * to the correct offset, before performing any operations on them. Use the element returned\n   * by the `findOptionsContainer` test utility for this.\n   */\n  virtualScroll?: boolean;\n\n  /**\n   * Use this event to implement the asynchronous behavior for the component.\n   *\n   * The event is called in the following situations:\n   * * The user scrolls to the end of the list of options, if `statusType` is set to `pending`.\n   * * The user clicks on the recovery button in the error state.\n   * * The user types inside the input field.\n   * * The user focuses the input field.\n   *\n   * The detail object contains the following properties:\n   * * `filteringText` - The value that you need to use to fetch options.\n   * * `firstPage` - Indicates that you should fetch the first page of options that match the `filteringText`.\n   * * `samePage` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).\n   **/\n  onLoadItems?: NonCancelableEventHandler<OptionsLoadItemsDetail>;\n}\n\nexport interface DropdownProps extends ExpandToViewport {\n  /**\n   * Trigger element.\n   */\n  trigger: React.ReactNode;\n\n  /**\n   * \"Sticky\" header of the dropdown content\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Footer slot fixed at the bottom of the dropdown\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Dropdown content elements.\n   */\n  content?: React.ReactNode;\n\n  /**\n   * Updating content key triggers dropdown position re-evaluation.\n   */\n  contentKey?: string;\n\n  /**\n   * Open state of the dropdown.\n   */\n  open?: boolean;\n\n  /**\n   * Called when a user clicks outside of the dropdown content, when it is open.\n   */\n  onDropdownClose?: NonCancelableEventHandler<null>;\n\n  /**\n   * Called when a mouse button is pressed inside the dropdown content.\n   */\n  onMouseDown?: React.MouseEventHandler;\n\n  /**\n   * Dropdown id\n   */\n  dropdownId?: string;\n\n  /**\n   * Stretches dropdown to occupy entire height.\n   */\n  stretchHeight?: boolean;\n\n  /**\n   * Stretches the trigger to the height of the dropdown container.\n   */\n  stretchTriggerHeight?: boolean;\n\n  /**\n   * Minimum width constraint for the dropdown.\n   * - Number: minimum width in pixels\n   * - 'trigger': dropdown will be at least as wide as the trigger\n   * - undefined: no minimum constraint (fits content)\n   */\n  minWidth?: DropdownWidthConstraint;\n\n  /**\n   * Maximum width constraint for the dropdown.\n   * - Number: maximum width in pixels\n   * - 'trigger': dropdown cannot exceed the trigger width\n   * - undefined: fit to content width (no max constraint)\n   */\n  maxWidth?: DropdownWidthConstraint;\n\n  /**\n   * Preferred alignment of the dropdown relative to its trigger.\n   * The dropdown will attempt this alignment first, but will automatically\n   * adjust if there's insufficient space on the preferred side.\n   */\n  preferredAlignment?: DropdownAlignment;\n\n  /**\n   * Hides the block (top/bottom) borders of the dropdown content wrapper.\n   */\n  hideBlockBorder?: boolean;\n\n  /**\n   * Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out).\n   */\n  interior?: boolean;\n\n  /**\n   * Whether the dropdown will have a scrollbar or not\n   */\n  scrollable?: boolean;\n\n  /**\n   * Whether the dropdown will have a focus loop including trigger, header, content and footer.\n   */\n  loopFocus?: boolean;\n\n  /**\n   * Called when focus enters the trigger or dropdown content.\n   */\n  onFocus?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n\n  /**\n   * Called when focus leaves the trigger or dropdown content.\n   */\n  onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n\n  /**\n   * ID for the dropdown content wrapper\n   */\n  dropdownContentId?: string;\n\n  /**\n   * HTML role for the dropdown content wrapper\n   */\n  ariaRole?: string;\n\n  /**\n   * Aria label for the dropdown content wrapper\n   */\n  ariaLabel?: string;\n\n  /**\n   * Labelledby for the dropdown (required when role=\"dialog\")\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Describedby for the dropdown (recommended when role=\"dialog\")\n   */\n  ariaDescribedby?: string;\n}\n\nexport interface ExpandToViewport {\n  /**\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  expandToViewport?: boolean;\n}\n"]}

package/lib/internal/template/internal/components/dropdown/styles.css.js

@@ -1,25 +1,25 @@
 
     import './styles.scoped.css';
     export default {
-  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_qwoo0_lescr_153",
-  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_qwoo0_lescr_1",
-  "refresh": "awsui_refresh_qwoo0_lescr_174",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_qwoo0_lescr_1",
-  "root": "awsui_root_qwoo0_lescr_199",
-  "interior": "awsui_interior_qwoo0_lescr_232",
-  "dropdown": "awsui_dropdown_qwoo0_lescr_153",
-  "use-portal": "awsui_use-portal_qwoo0_lescr_242",
-  "is-empty": "awsui_is-empty_qwoo0_lescr_288",
-  "dropdown-drop-up": "awsui_dropdown-drop-up_qwoo0_lescr_295",
-  "with-limited-width": "awsui_with-limited-width_qwoo0_lescr_299",
-  "dropdown-drop-left": "awsui_dropdown-drop-left_qwoo0_lescr_302",
-  "dropdown-drop-right": "awsui_dropdown-drop-right_qwoo0_lescr_305",
-  "occupy-entire-width": "awsui_occupy-entire-width_qwoo0_lescr_308",
-  "stretch-beyond-trigger-width": "awsui_stretch-beyond-trigger-width_qwoo0_lescr_311",
-  "hide-block-border": "awsui_hide-block-border_qwoo0_lescr_318",
-  "open": "awsui_open_qwoo0_lescr_327",
-  "nowrap": "awsui_nowrap_qwoo0_lescr_336",
-  "dropdown-content": "awsui_dropdown-content_qwoo0_lescr_153",
-  "stretch-trigger-height": "awsui_stretch-trigger-height_qwoo0_lescr_347"
+  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_qwoo0_k3boe_153",
+  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_qwoo0_k3boe_1",
+  "refresh": "awsui_refresh_qwoo0_k3boe_174",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_qwoo0_k3boe_1",
+  "root": "awsui_root_qwoo0_k3boe_199",
+  "interior": "awsui_interior_qwoo0_k3boe_232",
+  "dropdown": "awsui_dropdown_qwoo0_k3boe_153",
+  "use-portal": "awsui_use-portal_qwoo0_k3boe_242",
+  "is-empty": "awsui_is-empty_qwoo0_k3boe_288",
+  "dropdown-drop-up": "awsui_dropdown-drop-up_qwoo0_k3boe_295",
+  "with-limited-width": "awsui_with-limited-width_qwoo0_k3boe_299",
+  "dropdown-drop-left": "awsui_dropdown-drop-left_qwoo0_k3boe_302",
+  "dropdown-drop-right": "awsui_dropdown-drop-right_qwoo0_k3boe_305",
+  "occupy-entire-width": "awsui_occupy-entire-width_qwoo0_k3boe_308",
+  "use-flexible-width": "awsui_use-flexible-width_qwoo0_k3boe_311",
+  "hide-block-border": "awsui_hide-block-border_qwoo0_k3boe_319",
+  "open": "awsui_open_qwoo0_k3boe_328",
+  "nowrap": "awsui_nowrap_qwoo0_k3boe_337",
+  "dropdown-content": "awsui_dropdown-content_qwoo0_k3boe_153",
+  "stretch-trigger-height": "awsui_stretch-trigger-height_qwoo0_k3boe_348"
 };
   

package/lib/internal/template/internal/components/dropdown/styles.scoped.css

@@ -150,10 +150,10 @@ 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_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-dropdown_qwoo0_lescr_1 var(--motion-duration-show-quick-i2gulq, 135ms) var(--motion-easing-show-quick-xucy9w, ease-out);
+.awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-dropdown_qwoo0_k3boe_1 var(--motion-duration-show-quick-i2gulq, 135ms) var(--motion-easing-show-quick-xucy9w, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in-dropdown_qwoo0_lescr_1 {
+@keyframes awsui_awsui-motion-fade-in-dropdown_qwoo0_k3boe_1 {
   from {
     opacity: 0.4;
   }
@@ -162,22 +162,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+  .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+.awsui-motion-disabled .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_dropdown-content-wrapper_qwoo0_lescr_153.awsui_refresh_qwoo0_lescr_174:not(#\9) {
+.awsui_dropdown-content-wrapper_qwoo0_k3boe_153.awsui_refresh_qwoo0_k3boe_174:not(#\9) {
   transform-origin: top;
-  animation-name: awsui_awsui-motion-fade-in-0_qwoo0_lescr_1;
+  animation-name: awsui_awsui-motion-fade-in-0_qwoo0_k3boe_1;
   animation-duration: var(--motion-duration-show-quick-i2gulq, 135ms);
   animation-timing-function: var(--motion-easing-show-quick-xucy9w, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in-0_qwoo0_lescr_1 {
+@keyframes awsui_awsui-motion-fade-in-0_qwoo0_k3boe_1 {
   from {
     opacity: 0;
   }
@@ -186,17 +186,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dropdown-content-wrapper_qwoo0_lescr_153.awsui_refresh_qwoo0_lescr_174:not(#\9) {
+  .awsui_dropdown-content-wrapper_qwoo0_k3boe_153.awsui_refresh_qwoo0_k3boe_174:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dropdown-content-wrapper_qwoo0_lescr_153.awsui_refresh_qwoo0_lescr_174:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_qwoo0_lescr_153.awsui_refresh_qwoo0_lescr_174:not(#\9) {
+.awsui-motion-disabled .awsui_dropdown-content-wrapper_qwoo0_k3boe_153.awsui_refresh_qwoo0_k3boe_174:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_qwoo0_k3boe_153.awsui_refresh_qwoo0_k3boe_174:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_qwoo0_lescr_199:not(#\9) {
+.awsui_root_qwoo0_k3boe_199:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -229,34 +229,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
   white-space: inherit;
 }
-.awsui_root_qwoo0_lescr_199.awsui_interior_qwoo0_lescr_232:not(#\9) {
+.awsui_root_qwoo0_k3boe_199.awsui_interior_qwoo0_k3boe_232:not(#\9) {
   position: static;
 }
 
-.awsui_dropdown_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153:not(#\9) {
   position: absolute;
   display: none;
   z-index: 2000;
   transform-origin: top;
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_use-portal_qwoo0_lescr_242:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_use-portal_qwoo0_k3boe_242:not(#\9) {
   z-index: 7000;
 }
-.awsui_dropdown_qwoo0_lescr_153:not(#\9):not(.awsui_interior_qwoo0_lescr_232) {
+.awsui_dropdown_qwoo0_k3boe_153:not(#\9):not(.awsui_interior_qwoo0_k3boe_232) {
   transform: translateY(0px);
   transition: transform var(--motion-duration-show-quick-i2gulq, 135ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dropdown_qwoo0_lescr_153:not(#\9):not(.awsui_interior_qwoo0_lescr_232) {
+  .awsui_dropdown_qwoo0_k3boe_153:not(#\9):not(.awsui_interior_qwoo0_k3boe_232) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dropdown_qwoo0_lescr_153:not(#\9):not(.awsui_interior_qwoo0_lescr_232), .awsui-mode-entering .awsui_dropdown_qwoo0_lescr_153:not(#\9):not(.awsui_interior_qwoo0_lescr_232) {
+.awsui-motion-disabled .awsui_dropdown_qwoo0_k3boe_153:not(#\9):not(.awsui_interior_qwoo0_k3boe_232), .awsui-mode-entering .awsui_dropdown_qwoo0_k3boe_153:not(#\9):not(.awsui_interior_qwoo0_k3boe_232) {
   animation: none;
   transition: none;
 }
-.awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
   position: relative;
   background-color: var(--color-background-dropdown-item-default-fhmksr, #ffffff);
   outline: none;
@@ -268,7 +268,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block: var(--border-divider-list-width-8ggz94, 1px) solid var(--color-border-container-top-svitxz, #eaeded);
   box-sizing: border-box;
 }
-.awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9)::after {
+.awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9)::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -285,65 +285,66 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-dropdown-oaxffg, 0px);
   pointer-events: none;
 }
-.awsui_dropdown-content-wrapper_qwoo0_lescr_153.awsui_is-empty_qwoo0_lescr_288:not(#\9)::after {
+.awsui_dropdown-content-wrapper_qwoo0_k3boe_153.awsui_is-empty_qwoo0_k3boe_288:not(#\9)::after {
   display: none;
 }
-.awsui_dropdown_qwoo0_lescr_153 > .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153 > .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
   border-block-start: var(--border-divider-list-width-8ggz94, 1px) solid var(--color-border-container-top-svitxz, #eaeded);
   border-block-end: var(--border-divider-list-width-8ggz94, 1px) solid var(--color-border-dropdown-group-dg9zg5, #eaeded);
 }
-.awsui_dropdown-drop-up_qwoo0_lescr_295 > .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown-drop-up_qwoo0_k3boe_295 > .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
   transform-origin: bottom;
   box-shadow: var(--shadow-dropup-44quix, 0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_dropdown-drop-up_qwoo0_lescr_295.awsui_with-limited-width_qwoo0_lescr_299 > .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown-drop-up_qwoo0_k3boe_295.awsui_with-limited-width_qwoo0_k3boe_299 > .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
   border-block-start: none;
 }
-.awsui_dropdown-drop-left_qwoo0_lescr_302:not(#\9) {
+.awsui_dropdown-drop-left_qwoo0_k3boe_302:not(#\9) {
   inset-inline-end: 0;
 }
-.awsui_dropdown-drop-right_qwoo0_lescr_305:not(#\9) {
+.awsui_dropdown-drop-right_qwoo0_k3boe_305:not(#\9) {
   inset-inline-start: 0;
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_occupy-entire-width_qwoo0_lescr_308:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_occupy-entire-width_qwoo0_k3boe_308:not(#\9) {
   min-inline-size: 100%;
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_stretch-beyond-trigger-width_qwoo0_lescr_311:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_use-flexible-width_qwoo0_k3boe_311:not(#\9) {
   inline-size: max-content;
-  max-inline-size: var(--awsui-dropdown-default-max-width-4hh3rt, 100%);
+  max-inline-size: var(--awsui-dropdown-default-max-width-c5ek4l, none);
+  min-inline-size: var(--awsui-dropdown-default-min-width-c5ek4l, auto);
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_interior_qwoo0_lescr_232 > .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_interior_qwoo0_k3boe_232 > .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
   margin-block-start: -1px;
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_hide-block-border_qwoo0_lescr_318 > .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_hide-block-border_qwoo0_k3boe_319 > .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
   border-block-start: none;
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_hide-block-border_qwoo0_lescr_318:not(#\9):not(.awsui_dropdown-drop-up_qwoo0_lescr_295) > .awsui_dropdown-content-wrapper_qwoo0_lescr_153 {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_hide-block-border_qwoo0_k3boe_319:not(#\9):not(.awsui_dropdown-drop-up_qwoo0_k3boe_295) > .awsui_dropdown-content-wrapper_qwoo0_k3boe_153 {
   border-block-end: none;
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_hide-block-border_qwoo0_lescr_318.awsui_refresh_qwoo0_lescr_174 > .awsui_dropdown-content-wrapper_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_hide-block-border_qwoo0_k3boe_319.awsui_refresh_qwoo0_k3boe_174 > .awsui_dropdown-content-wrapper_qwoo0_k3boe_153:not(#\9) {
   border-block-end: none;
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_open_qwoo0_lescr_327:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_open_qwoo0_k3boe_328:not(#\9) {
   display: block;
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_open_qwoo0_lescr_327:not(#\9):not(.awsui_interior_qwoo0_lescr_232).awsui_refresh_qwoo0_lescr_174[data-animating=true] {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_open_qwoo0_k3boe_328:not(#\9):not(.awsui_interior_qwoo0_k3boe_232).awsui_refresh_qwoo0_k3boe_174[data-animating=true] {
   transform: translateY(4px);
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_open_qwoo0_lescr_327:not(#\9):not(.awsui_interior_qwoo0_lescr_232).awsui_refresh_qwoo0_lescr_174[data-animating=true].awsui_dropdown-drop-up_qwoo0_lescr_295 {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_open_qwoo0_k3boe_328:not(#\9):not(.awsui_interior_qwoo0_k3boe_232).awsui_refresh_qwoo0_k3boe_174[data-animating=true].awsui_dropdown-drop-up_qwoo0_k3boe_295 {
   transform: translateY(-4px);
 }
-.awsui_dropdown_qwoo0_lescr_153.awsui_open_qwoo0_lescr_327.awsui_nowrap_qwoo0_lescr_336:not(#\9) {
+.awsui_dropdown_qwoo0_k3boe_153.awsui_open_qwoo0_k3boe_328.awsui_nowrap_qwoo0_k3boe_337:not(#\9) {
   white-space: nowrap;
   overflow: scroll;
 }
 
-.awsui_dropdown-content_qwoo0_lescr_153:not(#\9) {
+.awsui_dropdown-content_qwoo0_k3boe_153:not(#\9) {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
 
-.awsui_stretch-trigger-height_qwoo0_lescr_347:not(#\9) {
+.awsui_stretch-trigger-height_qwoo0_k3boe_348:not(#\9) {
   block-size: 100%;
 }

package/lib/internal/template/internal/components/dropdown/styles.selectors.js

@@ -2,25 +2,25 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_qwoo0_lescr_153",
-  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_qwoo0_lescr_1",
-  "refresh": "awsui_refresh_qwoo0_lescr_174",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_qwoo0_lescr_1",
-  "root": "awsui_root_qwoo0_lescr_199",
-  "interior": "awsui_interior_qwoo0_lescr_232",
-  "dropdown": "awsui_dropdown_qwoo0_lescr_153",
-  "use-portal": "awsui_use-portal_qwoo0_lescr_242",
-  "is-empty": "awsui_is-empty_qwoo0_lescr_288",
-  "dropdown-drop-up": "awsui_dropdown-drop-up_qwoo0_lescr_295",
-  "with-limited-width": "awsui_with-limited-width_qwoo0_lescr_299",
-  "dropdown-drop-left": "awsui_dropdown-drop-left_qwoo0_lescr_302",
-  "dropdown-drop-right": "awsui_dropdown-drop-right_qwoo0_lescr_305",
-  "occupy-entire-width": "awsui_occupy-entire-width_qwoo0_lescr_308",
-  "stretch-beyond-trigger-width": "awsui_stretch-beyond-trigger-width_qwoo0_lescr_311",
-  "hide-block-border": "awsui_hide-block-border_qwoo0_lescr_318",
-  "open": "awsui_open_qwoo0_lescr_327",
-  "nowrap": "awsui_nowrap_qwoo0_lescr_336",
-  "dropdown-content": "awsui_dropdown-content_qwoo0_lescr_153",
-  "stretch-trigger-height": "awsui_stretch-trigger-height_qwoo0_lescr_347"
+  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_qwoo0_k3boe_153",
+  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_qwoo0_k3boe_1",
+  "refresh": "awsui_refresh_qwoo0_k3boe_174",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_qwoo0_k3boe_1",
+  "root": "awsui_root_qwoo0_k3boe_199",
+  "interior": "awsui_interior_qwoo0_k3boe_232",
+  "dropdown": "awsui_dropdown_qwoo0_k3boe_153",
+  "use-portal": "awsui_use-portal_qwoo0_k3boe_242",
+  "is-empty": "awsui_is-empty_qwoo0_k3boe_288",
+  "dropdown-drop-up": "awsui_dropdown-drop-up_qwoo0_k3boe_295",
+  "with-limited-width": "awsui_with-limited-width_qwoo0_k3boe_299",
+  "dropdown-drop-left": "awsui_dropdown-drop-left_qwoo0_k3boe_302",
+  "dropdown-drop-right": "awsui_dropdown-drop-right_qwoo0_k3boe_305",
+  "occupy-entire-width": "awsui_occupy-entire-width_qwoo0_k3boe_308",
+  "use-flexible-width": "awsui_use-flexible-width_qwoo0_k3boe_311",
+  "hide-block-border": "awsui_hide-block-border_qwoo0_k3boe_319",
+  "open": "awsui_open_qwoo0_k3boe_328",
+  "nowrap": "awsui_nowrap_qwoo0_k3boe_337",
+  "dropdown-content": "awsui_dropdown-content_qwoo0_k3boe_153",
+  "stretch-trigger-height": "awsui_stretch-trigger-height_qwoo0_k3boe_348"
 };
   

package/lib/internal/template/internal/components/radio-button/interfaces.d.ts

@@ -59,6 +59,8 @@ export interface RadioButtonProps extends BaseComponentProps {
      */
     readOnly?: boolean;
     /**
+     * An object containing CSS properties to customize the radio button's visual appearance.
+     * Refer to the [style](/components/radio-button/?tabId=style) tab for more details.
      * @awsuiSystem core
      */
     style?: RadioButtonProps.Style;

package/lib/internal/template/internal/components/radio-button/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACzD;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;;;;;;OASG;IACH,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEtF;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;IAE/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,yBAAiB,gBAAgB,CAAC;IAChC,UAAiB,YAAY;QAC3B,OAAO,EAAE,OAAO,CAAC;KAClB;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,KAAK;QACpB,KAAK,CAAC,EAAE;YACN,IAAI,CAAC,EAAE;gBACL,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,IAAI,CAAC,EAAE;oBACL,OAAO,CAAC,EAAE,MAAM,CAAC;oBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;oBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;iBACnB,CAAC;aACH,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;QACF,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;QACF,WAAW,CAAC,EAAE;YACZ,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;KACH;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACzD;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;;;;;;OASG;IACH,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEtF;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;IAE/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,yBAAiB,gBAAgB,CAAC;IAChC,UAAiB,YAAY;QAC3B,OAAO,EAAE,OAAO,CAAC;KAClB;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,KAAK;QACpB,KAAK,CAAC,EAAE;YACN,IAAI,CAAC,EAAE;gBACL,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;YACF,MAAM,CAAC,EAAE;gBACP,IAAI,CAAC,EAAE;oBACL,OAAO,CAAC,EAAE,MAAM,CAAC;oBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;oBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;iBACnB,CAAC;aACH,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;QACF,KAAK,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;QACF,WAAW,CAAC,EAAE;YACZ,KAAK,CAAC,EAAE;gBACN,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;KACH;CACF"}

package/lib/internal/template/internal/components/radio-button/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../../base-component';\nimport { NonCancelableEventHandler } from '../../events';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../../utils/with-native-attributes';\n\nexport interface RadioButtonProps extends BaseComponentProps {\n  /**\n   * Specifies if the component is selected.\n   */\n  checked: boolean;\n\n  /**\n   * Specifies the ID of the native form element. You can use it to relate\n   * a label element's `for` attribute to this control.\n   */\n  controlId?: string;\n\n  /**\n   * Name of the group that the radio button belongs to.\n   */\n  name: string;\n\n  /**\n   * Description that appears below the label.\n   */\n  description?: React.ReactNode;\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   * The control's label that's displayed next to the radio button. A state change occurs when a user clicks on it.\n   * @displayname label\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Attributes to add to the native `input` element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeInputAttributes?: NativeAttributes<React.InputHTMLAttributes<HTMLInputElement>>;\n\n  /**\n   * Called when the user clicks on the radio button and it is not disabled or read-only.\n   */\n  onSelect?: NonCancelableEventHandler;\n\n  /**\n   * Specifies if the radio button is read-only, which prevents the\n   * user from modifying the value, but does not prevent the value from\n   * being included in a form submission. A read-only control is still focusable.\n   *\n   * This property should be set for either all or none of the radio buttons in a group.\n   */\n  readOnly?: boolean;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: RadioButtonProps.Style;\n\n  /**\n   * Sets the value attribute to the native control.\n   * If using native form submission, this value is sent to the server if the radio button is checked.\n   * It is never shown to the user by their user agent.\n   * For more details, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio#value).\n   */\n  value?: string;\n}\n\nexport namespace RadioButtonProps {\n  export interface ChangeDetail {\n    checked: boolean;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n\n  export interface Style {\n    input?: {\n      fill?: {\n        checked?: string;\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n      stroke?: {\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n      circle?: {\n        fill?: {\n          checked?: string;\n          disabled?: string;\n          readOnly?: string;\n        };\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    label?: {\n      color?: {\n        checked?: string;\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n    };\n    description?: {\n      color?: {\n        checked?: string;\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n    };\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../../base-component';\nimport { NonCancelableEventHandler } from '../../events';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../../utils/with-native-attributes';\n\nexport interface RadioButtonProps extends BaseComponentProps {\n  /**\n   * Specifies if the component is selected.\n   */\n  checked: boolean;\n\n  /**\n   * Specifies the ID of the native form element. You can use it to relate\n   * a label element's `for` attribute to this control.\n   */\n  controlId?: string;\n\n  /**\n   * Name of the group that the radio button belongs to.\n   */\n  name: string;\n\n  /**\n   * Description that appears below the label.\n   */\n  description?: React.ReactNode;\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   * The control's label that's displayed next to the radio button. A state change occurs when a user clicks on it.\n   * @displayname label\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Attributes to add to the native `input` element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeInputAttributes?: NativeAttributes<React.InputHTMLAttributes<HTMLInputElement>>;\n\n  /**\n   * Called when the user clicks on the radio button and it is not disabled or read-only.\n   */\n  onSelect?: NonCancelableEventHandler;\n\n  /**\n   * Specifies if the radio button is read-only, which prevents the\n   * user from modifying the value, but does not prevent the value from\n   * being included in a form submission. A read-only control is still focusable.\n   *\n   * This property should be set for either all or none of the radio buttons in a group.\n   */\n  readOnly?: boolean;\n\n  /**\n   * An object containing CSS properties to customize the radio button's visual appearance.\n   * Refer to the [style](/components/radio-button/?tabId=style) tab for more details.\n   * @awsuiSystem core\n   */\n  style?: RadioButtonProps.Style;\n\n  /**\n   * Sets the value attribute to the native control.\n   * If using native form submission, this value is sent to the server if the radio button is checked.\n   * It is never shown to the user by their user agent.\n   * For more details, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio#value).\n   */\n  value?: string;\n}\n\nexport namespace RadioButtonProps {\n  export interface ChangeDetail {\n    checked: boolean;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n\n  export interface Style {\n    input?: {\n      fill?: {\n        checked?: string;\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n      stroke?: {\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n      circle?: {\n        fill?: {\n          checked?: string;\n          disabled?: string;\n          readOnly?: string;\n        };\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    label?: {\n      color?: {\n        checked?: string;\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n    };\n    description?: {\n      color?: {\n        checked?: string;\n        default?: string;\n        disabled?: string;\n        readOnly?: string;\n      };\n    };\n  }\n}\n"]}

package/lib/internal/template/internal/components/radio-button/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "radio-control": "awsui_radio-control_1v1hk_b8apg_145",
-  "outline": "awsui_outline_1v1hk_b8apg_153",
-  "styled-circle-border": "awsui_styled-circle-border_1v1hk_b8apg_176",
-  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_b8apg_180",
-  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_b8apg_180",
-  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_b8apg_185",
-  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_b8apg_201"
+  "radio-control": "awsui_radio-control_1v1hk_1ynnp_145",
+  "outline": "awsui_outline_1v1hk_1ynnp_153",
+  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1ynnp_176",
+  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1ynnp_180",
+  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1ynnp_180",
+  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1ynnp_185",
+  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1ynnp_201"
 };
   

package/lib/internal/template/internal/components/radio-button/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_radio-control_1v1hk_b8apg_145:not(#\9) {
+.awsui_radio-control_1v1hk_1ynnp_145:not(#\9) {
   margin-block-start: calc((var(--line-height-body-m-bedeoh, 22px) - var(--size-control-lkpwjy, 14px)) / 2);
   min-block-size: var(--size-control-lkpwjy, 14px);
   min-inline-size: var(--size-control-lkpwjy, 14px);
@@ -150,15 +150,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: var(--size-control-lkpwjy, 14px);
 }
 
-.awsui_outline_1v1hk_b8apg_153:not(#\9) {
-  --awsui-style-focus-ring-box-shadow-4hh3rt: 0 0 0 var(--awsui-style-focus-ring-border-width-4hh3rt, 2px) var(--awsui-style-focus-ring-border-color-4hh3rt, var(--color-border-item-focused-r5f6xl, #0073bb));
+.awsui_outline_1v1hk_1ynnp_153:not(#\9) {
+  --awsui-style-focus-ring-box-shadow-c5ek4l: 0 0 0 var(--awsui-style-focus-ring-border-width-c5ek4l, 2px) var(--awsui-style-focus-ring-border-color-c5ek4l, var(--color-border-item-focused-r5f6xl, #0073bb));
   position: relative;
 }
-.awsui_outline_1v1hk_b8apg_153:not(#\9) {
+.awsui_outline_1v1hk_1ynnp_153:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_outline_1v1hk_b8apg_153:not(#\9)::before {
+.awsui_outline_1v1hk_1ynnp_153:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -166,46 +166,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: calc(-1 * 2px);
   inline-size: calc(100% + 2px + 2px);
   block-size: calc(100% + 2px + 2px);
-  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-4hh3rt, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-4hh3rt, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-4hh3rt, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-4hh3rt, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-4hh3rt);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-c5ek4l, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-c5ek4l, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-c5ek4l, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-c5ek4l, var(--border-radius-control-circular-focus-ring-0v2apg, 50%));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-c5ek4l);
 }
 
-.awsui_styled-circle-border_1v1hk_b8apg_176:not(#\9) {
+.awsui_styled-circle-border_1v1hk_1ynnp_176:not(#\9) {
   stroke: var(--color-border-control-default-e686ow, #687078);
   fill: var(--color-background-control-default-wjdczs, #ffffff);
 }
-.awsui_styled-circle-border_1v1hk_b8apg_176.awsui_styled-circle-disabled_1v1hk_b8apg_180:not(#\9), .awsui_styled-circle-border_1v1hk_b8apg_176.awsui_styled-circle-readonly_1v1hk_b8apg_180:not(#\9) {
+.awsui_styled-circle-border_1v1hk_1ynnp_176.awsui_styled-circle-disabled_1v1hk_1ynnp_180:not(#\9), .awsui_styled-circle-border_1v1hk_1ynnp_176.awsui_styled-circle-readonly_1v1hk_1ynnp_180:not(#\9) {
   fill: var(--color-background-control-disabled-2ixett, #d5dbdb);
   stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
 }
 
-.awsui_styled-circle-fill_1v1hk_b8apg_185:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1ynnp_185:not(#\9) {
   stroke: var(--color-background-control-checked-se0x0e, #0073bb);
   fill: var(--color-foreground-control-default-rf7v4a, #ffffff);
   opacity: 0;
   transition: opacity var(--motion-duration-transition-quick-ucajl5, 90ms) var(--motion-easing-transition-quick-034duw, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_styled-circle-fill_1v1hk_b8apg_185:not(#\9) {
+  .awsui_styled-circle-fill_1v1hk_1ynnp_185:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_styled-circle-fill_1v1hk_b8apg_185:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1v1hk_b8apg_185:not(#\9) {
+.awsui-motion-disabled .awsui_styled-circle-fill_1v1hk_1ynnp_185:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1v1hk_1ynnp_185:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_styled-circle-fill_1v1hk_b8apg_185.awsui_styled-circle-checked_1v1hk_b8apg_201:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1ynnp_185.awsui_styled-circle-checked_1v1hk_1ynnp_201:not(#\9) {
   opacity: 1;
 }
-.awsui_styled-circle-fill_1v1hk_b8apg_185.awsui_styled-circle-disabled_1v1hk_b8apg_180:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1ynnp_185.awsui_styled-circle-disabled_1v1hk_1ynnp_180:not(#\9) {
   fill: var(--color-foreground-control-disabled-kj751b, #ffffff);
   stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
 }
-.awsui_styled-circle-fill_1v1hk_b8apg_185.awsui_styled-circle-readonly_1v1hk_b8apg_180:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1ynnp_185.awsui_styled-circle-readonly_1v1hk_1ynnp_180:not(#\9) {
   fill: var(--color-foreground-control-read-only-cgy3yn, #687078);
   stroke: var(--color-background-control-disabled-2ixett, #d5dbdb);
 }

package/lib/internal/template/internal/components/radio-button/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "radio-control": "awsui_radio-control_1v1hk_b8apg_145",
-  "outline": "awsui_outline_1v1hk_b8apg_153",
-  "styled-circle-border": "awsui_styled-circle-border_1v1hk_b8apg_176",
-  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_b8apg_180",
-  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_b8apg_180",
-  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_b8apg_185",
-  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_b8apg_201"
+  "radio-control": "awsui_radio-control_1v1hk_1ynnp_145",
+  "outline": "awsui_outline_1v1hk_1ynnp_153",
+  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1ynnp_176",
+  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1ynnp_180",
+  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1ynnp_180",
+  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1ynnp_185",
+  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1ynnp_201"
 };
   

package/lib/internal/template/internal/components/token-list/styles.css.js

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_gfwv3_1xycb_193",
-  "horizontal": "awsui_horizontal_gfwv3_1xycb_196",
-  "vertical": "awsui_vertical_gfwv3_1xycb_202",
-  "list": "awsui_list_gfwv3_1xycb_207",
-  "grid": "awsui_grid_gfwv3_1xycb_226",
-  "list-item": "awsui_list-item_gfwv3_1xycb_238",
-  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_1xycb_245",
-  "toggle": "awsui_toggle_gfwv3_1xycb_245",
-  "description": "awsui_description_gfwv3_1xycb_337",
-  "separator": "awsui_separator_gfwv3_1xycb_341"
+  "root": "awsui_root_gfwv3_1eux3_193",
+  "horizontal": "awsui_horizontal_gfwv3_1eux3_196",
+  "vertical": "awsui_vertical_gfwv3_1eux3_202",
+  "list": "awsui_list_gfwv3_1eux3_207",
+  "grid": "awsui_grid_gfwv3_1eux3_226",
+  "list-item": "awsui_list-item_gfwv3_1eux3_238",
+  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_1eux3_245",
+  "toggle": "awsui_toggle_gfwv3_1eux3_245",
+  "description": "awsui_description_gfwv3_1eux3_337",
+  "separator": "awsui_separator_gfwv3_1eux3_341"
 };