@cloudscape-design/components-themeable 3.0.1381 → 3.0.1382

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "818f03b7d0b724a127f867eea3baf00ec85440f4"
+  "commit": "ef70d2fa2db69a881f12085257fe32df66d54de8"
 }

package/lib/internal/scss/expandable-section/styles.scss

@@ -382,10 +382,13 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
     // manages its own inline overflow (e.g. a table) would stretch the box out of the container.
     min-inline-size: 0;
     opacity: 0;
+    transform: translateY(-4px);
 
-    // HIDE (collapsed state): quick opacity collapse, no delay.
+    // HIDE (collapsed state): quick opacity collapse and slide back up, no delay.
     @include styles.with-motion {
-      transition: opacity $reveal-exit-motion;
+      transition:
+        opacity $reveal-exit-motion,
+        transform $reveal-exit-motion;
     }
   }
 }
@@ -394,11 +397,14 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
   /* this comment keeps the class in the style sheet */
   @include theming.one-theme-only {
     opacity: 1;
+    transform: translateY(0);
 
-    // SHOW (expanded state): opacity fades in AFTER height has partially
-    // opened, creating a perceptible fade in the revealed space.
+    // SHOW (expanded state): opacity fades in and content slides down into place AFTER
+    // height has partially opened, creating a perceptible reveal in the opened space.
     @include styles.with-motion {
-      transition: opacity $reveal-enter-delayed-motion;
+      transition:
+        opacity $reveal-enter-delayed-motion,
+        transform $reveal-enter-delayed-motion;
     }
   }
 }
@@ -407,6 +413,9 @@ $nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
   /* this comment keeps the class in the style sheet */
   @include theming.one-theme-only {
     overflow-y: visible;
+    // Keeping translateY(0) here would leave this box as a stacking context, so a dropdown
+    // opened from the content would paint underneath whatever follows the section.
+    transform: none;
   }
 }
 

package/lib/internal/scss/internal/components/radio-button/motion.scss

@@ -0,0 +1,34 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+@use '../../styles/utils/theming' as theming;
+
+// Scopes @content to themes that opted in to $expressive-motion-themes in theming.scss.
+@mixin radio-expressive-with-motion {
+  @media (prefers-reduced-motion: no-preference) {
+    @include theming.expressive-motion-only(':not(.awsui-motion-disabled):not(.awsui-mode-entering)') {
+      @content;
+    }
+  }
+}
+
+// Include inside the fill circle rule. Grows the ring inward by widening its
+// stroke from a thin line to the resting width.
+@mixin select {
+  &.styled-circle-checked[data-awsui-motion-ready] {
+    @include radio-expressive-with-motion {
+      animation: awsui-radio-select 250ms cubic-bezier(0.2, 0, 0, 1);
+    }
+
+    @if theming.has-expressive-motion() {
+      @keyframes awsui-radio-select {
+        from {
+          stroke-width: 6px;
+        }
+        to {
+          stroke-width: 30px;
+        }
+      }
+    }
+  }
+}

package/lib/internal/scss/internal/components/radio-button/styles.scss

@@ -7,38 +7,42 @@
 @use '../../styles/tokens' as awsui;
 @use '../../styles/foundation' as foundation;
 @use '../../generated/custom-css-properties/index.scss' as custom-props;
+@use '../../styles/style-api' as style-api;
+@use './motion' as motion;
 
 $radio-size: awsui.$size-control;
 
+$_control-props: style-api.combine((color, background-color, border-color), style-api.$focus-ring);
+$_control-tokens: style-api.resolve($_control-props, carrier);
+
 .radio-control {
+  @include style-api.carriers($_control-tokens);
   @include styles.make-control-size($radio-size);
 }
 
 .outline {
-  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
-
-  @include styles.focus-highlight(
-    $gutter: 2px,
-    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
-    $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+  @include style-api.focus-highlight(
+    $gutter-block: 2px,
+    $gutter-inline: 2px,
+    $radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
+    $width: var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width),
+    $color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused)
   );
 }
 
 .styled-circle-border {
-  stroke: awsui.$color-border-control-default;
-  fill: awsui.$color-background-control-default;
+  stroke: style-api.value($_control-tokens, border-color, awsui.$color-border-control-default);
+  fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-default);
   &.styled-circle-disabled,
   &.styled-circle-readonly {
-    fill: awsui.$color-background-control-disabled;
-    stroke: awsui.$color-background-control-disabled;
+    fill: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
+    stroke: style-api.value($_control-tokens, border-color, awsui.$color-background-control-disabled);
   }
 }
 
 .styled-circle-fill {
-  stroke: awsui.$color-background-control-checked;
-  fill: awsui.$color-foreground-control-default;
+  stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-checked);
+  fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-default);
   opacity: 0;
   @include styles.with-motion {
     transition: opacity awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
@@ -47,11 +51,12 @@ $radio-size: awsui.$size-control;
     opacity: 1;
   }
   &.styled-circle-disabled {
-    fill: awsui.$color-foreground-control-disabled;
-    stroke: awsui.$color-background-control-disabled;
+    fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-disabled);
+    stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
   }
   &.styled-circle-readonly {
-    fill: awsui.$color-foreground-control-read-only;
-    stroke: awsui.$color-background-control-disabled;
+    fill: style-api.value($_control-tokens, color, awsui.$color-foreground-control-read-only);
+    stroke: style-api.value($_control-tokens, background-color, awsui.$color-background-control-disabled);
   }
+  @include motion.select;
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "818f03b7";
+    $awsui-commit-hash: "ef70d2fa";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-66120l;
 $minContentWidth: --awsui-min-content-width-66120l;

package/lib/internal/scss/popover/motion.scss

@@ -3,6 +3,34 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as tokens;
+@use '../internal/styles/utils/theming' as theming;
+
+// Scopes @content to themes that opted in to $expressive-motion-themes in theming.scss.
+@mixin popover-expressive-with-motion {
+  @media (prefers-reduced-motion: no-preference) {
+    @include theming.expressive-motion-only(':not(.awsui-motion-disabled):not(.awsui-mode-entering)') {
+      @content;
+    }
+  }
+}
+
+$settle-travel: 8px;
+
+@mixin settle-keyframes($name, $from) {
+  @keyframes #{$name} {
+    from {
+      opacity: 0;
+      transform: $from;
+    }
+    60% {
+      opacity: 1;
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}
 
 .container {
   @include styles.with-motion {
@@ -16,4 +44,45 @@
       @include styles.animation-fade-in;
     }
   }
+
+  // The popover travels out from its trigger as it appears.
+  @include popover-expressive-with-motion {
+    animation: awsui-popover-settle-down 250ms cubic-bezier(0.3, 0, 0.2, 1);
+  }
+
+  &:has(.container-arrow-position-top-left, .container-arrow-position-top-center, .container-arrow-position-top-right) {
+    @include popover-expressive-with-motion {
+      animation-name: awsui-popover-settle-up;
+    }
+  }
+
+  // Keyframes translate physically, so the horizontal ones swap in RTL.
+  &:has(.container-arrow-position-right-top, .container-arrow-position-right-bottom) {
+    @include popover-expressive-with-motion {
+      animation-name: awsui-popover-settle-end;
+    }
+    @include styles.with-direction('rtl') {
+      @include popover-expressive-with-motion {
+        animation-name: awsui-popover-settle-start;
+      }
+    }
+  }
+
+  &:has(.container-arrow-position-left-top, .container-arrow-position-left-bottom) {
+    @include popover-expressive-with-motion {
+      animation-name: awsui-popover-settle-start;
+    }
+    @include styles.with-direction('rtl') {
+      @include popover-expressive-with-motion {
+        animation-name: awsui-popover-settle-end;
+      }
+    }
+  }
+}
+
+@if theming.has-expressive-motion() {
+  @include settle-keyframes(awsui-popover-settle-down, translateY(-$settle-travel));
+  @include settle-keyframes(awsui-popover-settle-up, translateY($settle-travel));
+  @include settle-keyframes(awsui-popover-settle-end, translateX(-$settle-travel));
+  @include settle-keyframes(awsui-popover-settle-start, translateX($settle-travel));
 }

package/lib/internal/scss/radio-button/styles.scss

@@ -4,6 +4,13 @@
 */
 
 @use '../internal/styles' as styles;
+@use '../internal/styles/style-api' as style-api;
+
+// The control slot is painted by the shared internal radio button, which reads the same token map.
+$control-props: style-api.combine((color, background-color, border-color), style-api.$focus-ring);
+$control-tokens: style-api.resolve($control-props, carrier);
+@include style-api.register($control-tokens);
+@include style-api.docs('control', $control-tokens);
 
 .radio-button {
   @include styles.styles-reset;

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

@@ -56,5 +56,5 @@
   }
 }
 :root {
-  --awsui-version-info-818f03b7: true;
+  --awsui-version-info-ef70d2fa: true;
 }

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

@@ -3,8 +3,12 @@ import { RadioButtonProps } from '../../../radio-button/interfaces';
 import { InternalBaseComponentProps } from '../../hooks/use-base-component';
 import { SkipWarnings } from '../../utils/with-native-attributes';
 export interface InternalRadioButtonProps extends RadioButtonProps, InternalBaseComponentProps {
+    styleClassNames?: StyleClassNames;
     __skipNativeAttributesWarnings?: SkipWarnings;
 }
+interface StyleClassNames {
+    control?: string;
+}
 declare const _default: React.ForwardRefExoticComponent<InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAA6B,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAMxF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB,EAAE,0BAA0B;IAC5F,8BAA8B,CAAC,EAAE,YAAY,CAAC;CAC/C;;AAED,wBAkGG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAA6B,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAMxF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB,EAAE,0BAA0B;IAC5F,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,8BAA8B,CAAC,EAAE,YAAY,CAAC;CAC/C;AAGD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;;AAED,wBA2GG"}

package/lib/internal/template/internal/components/radio-button/index.js

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
@@ -12,12 +12,18 @@ import WithNativeAttributes from '../../utils/with-native-attributes';
 import { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from './style';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
-export default React.forwardRef(function RadioButton({ name, children, value, checked, ariaLabel, ariaLabelledby, ariaDescribedby, description, disabled, controlId, readOnly, className, style, nativeInputAttributes, onSelect, __skipNativeAttributesWarnings, ...rest }, ref) {
+export default React.forwardRef(function RadioButton({ name, children, value, checked, ariaLabel, ariaLabelledby, ariaDescribedby, description, disabled, controlId, readOnly, className, style, styleClassNames, nativeInputAttributes, onSelect, __skipNativeAttributesWarnings, ...rest }, ref) {
     const radioButtonRef = useRef(null);
     const mergedRefs = useMergeRefs(radioButtonRef, ref);
     const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);
     const baseProps = getBaseProps(rest);
-    return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(testUtilStyles.root, className), controlClassName: styles['radio-control'], outlineClassName: styles.outline, label: children, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, description: description, disabled: disabled, readOnly: readOnly, controlId: controlId, style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: rest.__internalRootRef, ...copyAnalyticsMetadataAttribute(rest), nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "RadioButton", nativeAttributes: nativeInputAttributes, skipWarnings: __skipNativeAttributesWarnings, tabIndex: tabIndex, type: "radio", ref: mergedRefs, name: name, value: value, checked: checked, "aria-disabled": readOnly && !disabled ? 'true' : undefined, 
+    // The select animation only plays once the state has changed since mount.
+    const [initialChecked] = useState(!!checked);
+    const [hasChanged, setHasChanged] = useState(false);
+    if (!hasChanged && !!checked !== initialChecked) {
+        setHasChanged(true);
+    }
+    return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(testUtilStyles.root, className), controlClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.control, styles['radio-control']), outlineClassName: styles.outline, label: children, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, description: description, disabled: disabled, readOnly: readOnly, controlId: controlId, style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: rest.__internalRootRef, ...copyAnalyticsMetadataAttribute(rest), nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "RadioButton", nativeAttributes: nativeInputAttributes, skipWarnings: __skipNativeAttributesWarnings, tabIndex: tabIndex, type: "radio", ref: mergedRefs, name: name, value: value, checked: checked, "aria-disabled": readOnly && !disabled ? 'true' : undefined, 
             // empty handler to suppress React controllability warning
             onChange: () => { } })), onClick: () => {
             var _a;
@@ -34,6 +40,6 @@ export default React.forwardRef(function RadioButton({ name, children, value, ch
                     [styles['styled-circle-disabled']]: disabled,
                     [styles['styled-circle-checked']]: checked,
                     [styles['styled-circle-readonly']]: readOnly,
-                }), strokeWidth: 30, cx: 50, cy: 50, r: 35, style: getInnerCircleStyle(style, checked, disabled, readOnly) })) }));
+                }), "data-awsui-motion-ready": hasChanged ? '' : undefined, strokeWidth: 30, cx: 50, cy: 50, r: 35, style: getInnerCircleStyle(style, checked, disabled, readOnly) })) }));
 });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { RadioButtonProps } from '../../../radio-button/interfaces';\nimport { getBaseProps } from '../../base-component';\nimport AbstractSwitch from '../../components/abstract-switch';\nimport { fireNonCancelableEvent } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport WithNativeAttributes, { SkipWarnings } from '../../utils/with-native-attributes';\nimport { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from './style';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport interface InternalRadioButtonProps extends RadioButtonProps, InternalBaseComponentProps {\n  __skipNativeAttributesWarnings?: SkipWarnings;\n}\n\nexport default React.forwardRef(function RadioButton(\n  {\n    name,\n    children,\n    value,\n    checked,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    description,\n    disabled,\n    controlId,\n    readOnly,\n    className,\n    style,\n    nativeInputAttributes,\n    onSelect,\n    __skipNativeAttributesWarnings,\n    ...rest\n  }: InternalRadioButtonProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const radioButtonRef = useRef<HTMLInputElement>(null);\n  const mergedRefs = useMergeRefs(radioButtonRef, ref);\n\n  const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);\n  const baseProps = getBaseProps(rest);\n\n  return (\n    <AbstractSwitch\n      {...baseProps}\n      className={clsx(testUtilStyles.root, className)}\n      controlClassName={styles['radio-control']}\n      outlineClassName={styles.outline}\n      label={children}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      ariaDescribedby={ariaDescribedby}\n      description={description}\n      disabled={disabled}\n      readOnly={readOnly}\n      controlId={controlId}\n      style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n      __internalRootRef={rest.__internalRootRef}\n      {...copyAnalyticsMetadataAttribute(rest)}\n      nativeControl={nativeControlProps => (\n        <WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>\n          {...nativeControlProps}\n          tag=\"input\"\n          componentName=\"RadioButton\"\n          nativeAttributes={nativeInputAttributes}\n          skipWarnings={__skipNativeAttributesWarnings}\n          tabIndex={tabIndex}\n          type=\"radio\"\n          ref={mergedRefs}\n          name={name}\n          value={value}\n          checked={checked}\n          aria-disabled={readOnly && !disabled ? 'true' : undefined}\n          // empty handler to suppress React controllability warning\n          onChange={() => {}}\n        />\n      )}\n      onClick={() => {\n        radioButtonRef.current?.focus();\n        if (!checked) {\n          fireNonCancelableEvent(onSelect);\n        }\n      }}\n      styledControl={\n        <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n          <circle\n            className={clsx(styles['styled-circle-border'], {\n              [styles['styled-circle-disabled']]: disabled,\n              [styles['styled-circle-readonly']]: readOnly,\n            })}\n            strokeWidth={6.25}\n            cx={50}\n            cy={50}\n            r={46}\n            style={getOuterCircleStyle(style, checked, disabled, readOnly)}\n          />\n          <circle\n            className={clsx(styles['styled-circle-fill'], {\n              [styles['styled-circle-disabled']]: disabled,\n              [styles['styled-circle-checked']]: checked,\n              [styles['styled-circle-readonly']]: readOnly,\n            })}\n            strokeWidth={30}\n            cx={50}\n            cy={50}\n            r={35}\n            style={getInnerCircleStyle(style, checked, disabled, readOnly)}\n          />\n        </svg>\n      }\n    />\n  );\n});\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/radio-button/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, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { RadioButtonProps } from '../../../radio-button/interfaces';\nimport { getBaseProps } from '../../base-component';\nimport AbstractSwitch from '../../components/abstract-switch';\nimport { fireNonCancelableEvent } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport WithNativeAttributes, { SkipWarnings } from '../../utils/with-native-attributes';\nimport { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from './style';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport interface InternalRadioButtonProps extends RadioButtonProps, InternalBaseComponentProps {\n  styleClassNames?: StyleClassNames;\n  __skipNativeAttributesWarnings?: SkipWarnings;\n}\n\n// Style API v2\ninterface StyleClassNames {\n  control?: string;\n}\n\nexport default React.forwardRef(function RadioButton(\n  {\n    name,\n    children,\n    value,\n    checked,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    description,\n    disabled,\n    controlId,\n    readOnly,\n    className,\n    style,\n    styleClassNames,\n    nativeInputAttributes,\n    onSelect,\n    __skipNativeAttributesWarnings,\n    ...rest\n  }: InternalRadioButtonProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const radioButtonRef = useRef<HTMLInputElement>(null);\n  const mergedRefs = useMergeRefs(radioButtonRef, ref);\n\n  const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);\n  const baseProps = getBaseProps(rest);\n\n  // The select animation only plays once the state has changed since mount.\n  const [initialChecked] = useState(!!checked);\n  const [hasChanged, setHasChanged] = useState(false);\n  if (!hasChanged && !!checked !== initialChecked) {\n    setHasChanged(true);\n  }\n\n  return (\n    <AbstractSwitch\n      {...baseProps}\n      className={clsx(testUtilStyles.root, className)}\n      controlClassName={clsx(styleClassNames?.control, styles['radio-control'])}\n      outlineClassName={styles.outline}\n      label={children}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      ariaDescribedby={ariaDescribedby}\n      description={description}\n      disabled={disabled}\n      readOnly={readOnly}\n      controlId={controlId}\n      style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n      __internalRootRef={rest.__internalRootRef}\n      {...copyAnalyticsMetadataAttribute(rest)}\n      nativeControl={nativeControlProps => (\n        <WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>\n          {...nativeControlProps}\n          tag=\"input\"\n          componentName=\"RadioButton\"\n          nativeAttributes={nativeInputAttributes}\n          skipWarnings={__skipNativeAttributesWarnings}\n          tabIndex={tabIndex}\n          type=\"radio\"\n          ref={mergedRefs}\n          name={name}\n          value={value}\n          checked={checked}\n          aria-disabled={readOnly && !disabled ? 'true' : undefined}\n          // empty handler to suppress React controllability warning\n          onChange={() => {}}\n        />\n      )}\n      onClick={() => {\n        radioButtonRef.current?.focus();\n        if (!checked) {\n          fireNonCancelableEvent(onSelect);\n        }\n      }}\n      styledControl={\n        <svg viewBox=\"0 0 100 100\" focusable=\"false\" aria-hidden=\"true\">\n          <circle\n            className={clsx(styles['styled-circle-border'], {\n              [styles['styled-circle-disabled']]: disabled,\n              [styles['styled-circle-readonly']]: readOnly,\n            })}\n            strokeWidth={6.25}\n            cx={50}\n            cy={50}\n            r={46}\n            style={getOuterCircleStyle(style, checked, disabled, readOnly)}\n          />\n          <circle\n            className={clsx(styles['styled-circle-fill'], {\n              [styles['styled-circle-disabled']]: disabled,\n              [styles['styled-circle-checked']]: checked,\n              [styles['styled-circle-readonly']]: readOnly,\n            })}\n            data-awsui-motion-ready={hasChanged ? '' : undefined}\n            strokeWidth={30}\n            cx={50}\n            cy={50}\n            r={35}\n            style={getInnerCircleStyle(style, checked, disabled, readOnly)}\n          />\n        </svg>\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_1jz0c_9",
-  "outline": "awsui_outline_1v1hk_1jz0c_17",
-  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1jz0c_40",
-  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1jz0c_44",
-  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1jz0c_44",
-  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1jz0c_49",
-  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1jz0c_65"
+  "radio-control": "awsui_radio-control_1v1hk_1uyuu_9",
+  "outline": "awsui_outline_1v1hk_1uyuu_25",
+  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1uyuu_47",
+  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1uyuu_51",
+  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1uyuu_51",
+  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1uyuu_56",
+  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1uyuu_72"
 };
   

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

@@ -6,7 +6,15 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* 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_1jz0c_9:not(#\9) {
+.awsui_radio-control_1v1hk_1uyuu_9:not(#\9) {
+  --awsui-internal-style-color: var(--awsui-style-color);
+  --awsui-internal-style-background-color: var(--awsui-style-background-color);
+  --awsui-internal-style-border-color: var(--awsui-style-border-color);
+  --awsui-internal-style-focus-ring-color: var(--awsui-style-focus-ring-color);
+  --awsui-internal-style-focus-ring-width: var(--awsui-style-focus-ring-width);
+  --awsui-internal-style-focus-ring-radius: var(--awsui-style-focus-ring-radius);
+  --awsui-internal-style-focus-ring-gutter-block: var(--awsui-style-focus-ring-gutter-block);
+  --awsui-internal-style-focus-ring-gutter-inline: var(--awsui-style-focus-ring-gutter-inline);
   margin-block-start: calc((var(--line-height-body-m-5xw6xo, 22px) - var(--size-control-jpgj8e, 14px)) / 2);
   min-block-size: var(--size-control-jpgj8e, 14px);
   min-inline-size: var(--size-control-jpgj8e, 14px);
@@ -14,62 +22,61 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: var(--size-control-jpgj8e, 14px);
 }
 
-.awsui_outline_1v1hk_1jz0c_17:not(#\9) {
-  --awsui-style-focus-ring-box-shadow-66120l: 0 0 0 var(--awsui-style-focus-ring-border-width-66120l, 2px) var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #0073bb));
+.awsui_outline_1v1hk_1uyuu_25:not(#\9) {
   position: relative;
 }
-.awsui_outline_1v1hk_1jz0c_17:not(#\9) {
+.awsui_outline_1v1hk_1uyuu_25:not(#\9) {
   outline: 2px dotted transparent;
-  outline-offset: calc(2px - 1px);
+  outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, 2px) - 1px);
 }
-.awsui_outline_1v1hk_1jz0c_17:not(#\9)::before {
+.awsui_outline_1v1hk_1uyuu_25:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
-  inset-inline-start: calc(-1 * 2px);
-  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-66120l, var(--border-radius-control-circular-focus-ring-go6crh, 50%));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-circular-focus-ring-go6crh, 50%));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-circular-focus-ring-go6crh, 50%));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-circular-focus-ring-go6crh, 50%));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-66120l);
+  inset-inline-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-inline, 2px));
+  inset-block-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-block, 2px));
+  inline-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-inline, 2px) + var(--awsui-internal-style-focus-ring-gutter-inline, 2px));
+  block-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-block, 2px) + var(--awsui-internal-style-focus-ring-gutter-block, 2px));
+  border-start-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-circular-focus-ring-go6crh, 50%)));
+  border-start-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-circular-focus-ring-go6crh, 50%)));
+  border-end-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-circular-focus-ring-go6crh, 50%)));
+  border-end-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-circular-focus-ring-go6crh, 50%)));
+  box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-style-focus-ring-border-width-66120l, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #0073bb)));
 }
 
-.awsui_styled-circle-border_1v1hk_1jz0c_40:not(#\9) {
-  stroke: var(--color-border-control-default-9qbus4, #687078);
-  fill: var(--color-background-control-default-9p1s17, #ffffff);
+.awsui_styled-circle-border_1v1hk_1uyuu_47:not(#\9) {
+  stroke: var(--awsui-internal-style-border-color, var(--color-border-control-default-9qbus4, #687078));
+  fill: var(--awsui-internal-style-background-color, var(--color-background-control-default-9p1s17, #ffffff));
 }
-.awsui_styled-circle-border_1v1hk_1jz0c_40.awsui_styled-circle-disabled_1v1hk_1jz0c_44:not(#\9), .awsui_styled-circle-border_1v1hk_1jz0c_40.awsui_styled-circle-readonly_1v1hk_1jz0c_44:not(#\9) {
-  fill: var(--color-background-control-disabled-m61b8s, #d5dbdb);
-  stroke: var(--color-background-control-disabled-m61b8s, #d5dbdb);
+.awsui_styled-circle-border_1v1hk_1uyuu_47.awsui_styled-circle-disabled_1v1hk_1uyuu_51:not(#\9), .awsui_styled-circle-border_1v1hk_1uyuu_47.awsui_styled-circle-readonly_1v1hk_1uyuu_51:not(#\9) {
+  fill: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #d5dbdb));
+  stroke: var(--awsui-internal-style-border-color, var(--color-background-control-disabled-m61b8s, #d5dbdb));
 }
 
-.awsui_styled-circle-fill_1v1hk_1jz0c_49:not(#\9) {
-  stroke: var(--color-background-control-checked-ksqwhc, #0073bb);
-  fill: var(--color-foreground-control-default-poakg0, #ffffff);
+.awsui_styled-circle-fill_1v1hk_1uyuu_56:not(#\9) {
+  stroke: var(--awsui-internal-style-background-color, var(--color-background-control-checked-ksqwhc, #0073bb));
+  fill: var(--awsui-internal-style-color, var(--color-foreground-control-default-poakg0, #ffffff));
   opacity: 0;
   transition: opacity var(--motion-duration-transition-quick-1p8yzt, 90ms) var(--motion-easing-transition-quick-afgcka, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_styled-circle-fill_1v1hk_1jz0c_49:not(#\9) {
+  .awsui_styled-circle-fill_1v1hk_1uyuu_56:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_styled-circle-fill_1v1hk_1jz0c_49:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1v1hk_1jz0c_49:not(#\9) {
+.awsui-motion-disabled .awsui_styled-circle-fill_1v1hk_1uyuu_56:not(#\9), .awsui-mode-entering .awsui_styled-circle-fill_1v1hk_1uyuu_56:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_styled-circle-fill_1v1hk_1jz0c_49.awsui_styled-circle-checked_1v1hk_1jz0c_65:not(#\9) {
+.awsui_styled-circle-fill_1v1hk_1uyuu_56.awsui_styled-circle-checked_1v1hk_1uyuu_72:not(#\9) {
   opacity: 1;
 }
-.awsui_styled-circle-fill_1v1hk_1jz0c_49.awsui_styled-circle-disabled_1v1hk_1jz0c_44:not(#\9) {
-  fill: var(--color-foreground-control-disabled-bikivj, #ffffff);
-  stroke: var(--color-background-control-disabled-m61b8s, #d5dbdb);
+.awsui_styled-circle-fill_1v1hk_1uyuu_56.awsui_styled-circle-disabled_1v1hk_1uyuu_51:not(#\9) {
+  fill: var(--awsui-internal-style-color, var(--color-foreground-control-disabled-bikivj, #ffffff));
+  stroke: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #d5dbdb));
 }
-.awsui_styled-circle-fill_1v1hk_1jz0c_49.awsui_styled-circle-readonly_1v1hk_1jz0c_44:not(#\9) {
-  fill: var(--color-foreground-control-read-only-8sqxyy, #687078);
-  stroke: var(--color-background-control-disabled-m61b8s, #d5dbdb);
+.awsui_styled-circle-fill_1v1hk_1uyuu_56.awsui_styled-circle-readonly_1v1hk_1uyuu_51:not(#\9) {
+  fill: var(--awsui-internal-style-color, var(--color-foreground-control-read-only-8sqxyy, #687078));
+  stroke: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #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_1jz0c_9",
-  "outline": "awsui_outline_1v1hk_1jz0c_17",
-  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1jz0c_40",
-  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1jz0c_44",
-  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1jz0c_44",
-  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1jz0c_49",
-  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1jz0c_65"
+  "radio-control": "awsui_radio-control_1v1hk_1uyuu_9",
+  "outline": "awsui_outline_1v1hk_1uyuu_25",
+  "styled-circle-border": "awsui_styled-circle-border_1v1hk_1uyuu_47",
+  "styled-circle-disabled": "awsui_styled-circle-disabled_1v1hk_1uyuu_51",
+  "styled-circle-readonly": "awsui_styled-circle-readonly_1v1hk_1uyuu_51",
+  "styled-circle-fill": "awsui_styled-circle-fill_1v1hk_1uyuu_56",
+  "styled-circle-checked": "awsui_styled-circle-checked_1v1hk_1uyuu_72"
 };
   

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (818f03b7)";
-export var GIT_SHA = "818f03b7";
+export var PACKAGE_VERSION = "3.0.0 (ef70d2fa)";
+export var GIT_SHA = "ef70d2fa";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (818f03b7)",
-  "GIT_SHA": "818f03b7",
+  "PACKAGE_VERSION": "3.0.0 (ef70d2fa)",
+  "GIT_SHA": "ef70d2fa",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false,

package/lib/internal/template/internal/generated/theming/index.cjs

@@ -16767,6 +16767,7 @@ module.exports.preset = {
     "colorBackgroundLayoutAiDrawer",
     "colorBackgroundBackdrop",
     "colorBackgroundLayoutPanel",
+    "colorBackgroundLayoutPanelContent",
     "colorBackgroundLayoutToolbar",
     "colorBackgroundLayoutToggleActive",
     "colorBackgroundLayoutToggleDefault",
@@ -17334,6 +17335,7 @@ module.exports.preset = {
     "colorBackgroundLayoutMain",
     "colorBackgroundBackdrop",
     "colorBackgroundLayoutPanel",
+    "colorBackgroundLayoutPanelContent",
     "colorBackgroundLayoutToolbar",
     "colorBackgroundLayoutToggleActive",
     "colorBackgroundLayoutToggleDefault",