[pull] main from adobe:main

.storybook-s2/docs/Migrating.jsx

@@ -300,6 +300,7 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>PickerItem</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Change <Code>isLoading</Code> to <Code>loadingState</Code> and provide the appropriate loading state.</li>
+          <li className={style({font: 'body', marginY: 8})}><Code>defaultSelectedKey</Code> and <Code>selectedKey</Code> have been deprecated in favor of <Code>defaultValue</Code> and <Code>value</Code> respectively. See the <Link href="?path=/docs/picker--docs">props table</Link> for the new accepted types.</li>
         </ul>
 
         <H3>ProgressBar</H3>

packages/@react-spectrum/s2/src/Disclosure.tsx

@@ -299,7 +299,10 @@ const panelStyles = style({
   font: 'body',
   height: '--disclosure-panel-height',
   overflow: 'clip',
-  transition: '[height]'
+  transition: {
+    default: '[height]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  }
 });
 
 const panelInner = style({

packages/@react-spectrum/s2/stories/Picker.stories.tsx

@@ -48,7 +48,9 @@ const meta: Meta<typeof Picker<any>> = {
     description: {control: {type: 'text'}},
     errorMessage: {control: {type: 'text'}},
     children: {table: {disable: true}},
-    contextualHelp: {table: {disable: true}}
+    contextualHelp: {table: {disable: true}},
+    defaultSelectedKey: {table: {disable: true}},
+    selectedKey: {table: {disable: true}}
   },
   args: {...getActionArgs(events)},
   title: 'Picker'

packages/dev/s2-docs/pages/react-aria/SegmentedControl.css

@@ -17,6 +17,10 @@
     border-radius: 8px;
     background: var(--gray-50);
     outline: 2px solid var(--gray-600);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   .segmented-control-item {

packages/react-aria-components/docs/Disclosure.mdx

@@ -99,6 +99,10 @@ import {ChevronRight} from 'lucide-react';
   height: var(--disclosure-panel-height);
   transition: height 250ms;
   overflow: clip;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 ```
 

packages/react-aria-components/docs/Tabs.mdx

@@ -123,6 +123,10 @@ import {Tabs, TabList, Tab, TabPanel, SelectionIndicator} from 'react-aria-compo
     position: absolute;
     transition-property: translate, width, height;
     transition-duration: 200ms;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-hovered],

packages/react-aria-components/docs/ToggleButtonGroup.mdx

@@ -242,6 +242,10 @@ import {ToggleButtonGroup, ToggleButton, SelectionIndicator} from 'react-aria-co
     border-radius: 8px;
     background: var(--gray-50);
     outline: 2px solid var(--gray-600);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   .react-aria-ToggleButton {

starters/docs/src/Disclosure.css

@@ -38,4 +38,8 @@
   height: var(--disclosure-panel-height);
   transition: height 250ms;
   overflow: clip;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }

starters/docs/src/Tabs.css

@@ -59,6 +59,10 @@
     position: absolute;
     transition-property: translate, width, height;
     transition-duration: 200ms;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-selected] {

starters/tailwind/src/Disclosure.tsx

@@ -97,7 +97,7 @@ export interface DisclosurePanelProps extends AriaDisclosurePanelProps {
 
 export function DisclosurePanel({ children, ...props }: DisclosurePanelProps) {
   return (
-    <AriaDisclosurePanel {...props} className={composeTailwindRenderProps(props.className, 'h-(--disclosure-panel-height) transition-[height] overflow-clip')}>
+    <AriaDisclosurePanel {...props} className={composeTailwindRenderProps(props.className, 'h-(--disclosure-panel-height) motion-safe:transition-[height] overflow-clip')}>
       <div className="px-4 py-2">{children}</div>
     </AriaDisclosurePanel>
   );

starters/tailwind/src/Tabs.tsx

@@ -77,7 +77,7 @@ export function Tab(props: TabProps) {
       )}>
       {composeRenderProps(props.children, children => (<>
         {children}
-        <SelectionIndicator className="absolute top-0 left-0 w-full h-full z-10 bg-white rounded-full mix-blend-difference transition-[translate,width,height]" />
+        <SelectionIndicator className="absolute top-0 left-0 w-full h-full z-10 bg-white rounded-full mix-blend-difference motion-safe:transition-[translate,width,height] " />
       </>))}
     </RACTab>
   );