From 70bcd1982b28a50420131240410916fd715e1578 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Fri, 5 Dec 2025 15:01:33 -0800
Subject: [PATCH 1/4] docs: add rc badge to react aria autocomplete (#9289)

---
 packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
index c3532067e88..c731bde7fe9 100644
--- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
@@ -6,6 +6,7 @@ import vanillaDocs from 'docs:vanilla-starter/CommandPalette';
 import '../../tailwind/tailwind.css';
 
 export const tags = ['combobox', 'typeahead', 'input'];
+export const version = 'rc';
 export const relatedPages = [{'title': 'useAutocomplete', 'url': 'https://react-spectrum.adobe.com/react-aria/useAutocomplete.html'}];
 export const description = 'Allows users to search or filter a list of suggestions.';
 

From a49b4aa63034bbd3c2728b0a6d6c30d51e3d795e Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Sat, 6 Dec 2025 10:21:26 +1100
Subject: [PATCH 2/4] fix: Toast tailwind example focus ring (#9262)

---
 starters/tailwind/src/Toast.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/starters/tailwind/src/Toast.tsx b/starters/tailwind/src/Toast.tsx
index cdb66c26ea2..d27252bc396 100644
--- a/starters/tailwind/src/Toast.tsx
+++ b/starters/tailwind/src/Toast.tsx
@@ -40,7 +40,7 @@ export function MyToastRegion() {
     // The ToastRegion should be rendered at the root of your app.
     <ToastRegion
       queue={queue}
-      className="fixed bottom-4 right-4 flex flex-col-reverse gap-2 outline-none focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2">
+      className="fixed bottom-4 right-4 flex flex-col-reverse gap-2 rounded-lg outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2">
       {({toast}) => (
         <MyToast toast={toast}>
           <ToastContent className="flex flex-col flex-1 min-w-0">
@@ -52,7 +52,7 @@ export function MyToastRegion() {
           <Button
             slot="close"
             aria-label="Close"
-            className="flex flex-none appearance-none w-8 h-8 rounded-sm bg-transparent border-none text-white p-0 outline-none hover:bg-white/10 pressed:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 items-center justify-center [-webkit-tap-highlight-color:transparent]">
+            className="flex flex-none appearance-none w-8 h-8 rounded-sm bg-transparent border-none text-white p-0 outline-none hover:bg-white/10 pressed:bg-white/15 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 items-center justify-center [-webkit-tap-highlight-color:transparent]">
             <XIcon className="w-4 h-4" />
           </Button>
         </MyToast>
@@ -68,7 +68,7 @@ export function MyToast(props: ToastProps<MyToastContent>) {
       style={{viewTransitionName: props.toast.key} as CSSProperties}
       className={composeTailwindRenderProps(
         props.className,
-        "flex items-center gap-4 bg-blue-600 px-4 py-3 rounded-lg outline-none forced-colors:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 [view-transition-class:toast] font-sans w-[230px]"
+        "flex items-center gap-4 bg-blue-600 px-4 py-3 rounded-lg outline-none forced-colors:outline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 [view-transition-class:toast] font-sans w-[230px]"
       )}
     />
   );

From a73ac9789a3ccf0e5c205ce7f015ebd399f03552 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 5 Dec 2025 15:52:17 -0800
Subject: [PATCH 3/4] fix: various S2 bug fixes from docs testing (#9272)

* remove allowsEmptycollection from our pickers since we dont support that behavior

* fix focusing DateFields on mobile tap

* fix SelectBoxGroup overflow when horizontal and only show checkbox in multiple selection

* fix taggroup remove button

* update link button to support genai and premium variants

* clear the context at the collapse collection level instead

* review comments

* chromatic fix

* make sure unavaliable dates are never marked as selected

* fix test case

* get rid of act
---
 .../calendar/src/useCalendarCell.ts           |  6 +-
 .../s2/chromatic/Button.stories.tsx           | 72 +++++++++++++++++--
 .../s2/chromatic/LinkButton.stories.tsx       | 16 +++++
 .../s2/chromatic/SelectBoxGroup.stories.tsx   | 56 ++++++++++++++-
 packages/@react-spectrum/s2/src/Button.tsx    | 63 ++++++++++------
 packages/@react-spectrum/s2/src/Field.tsx     |  3 +-
 packages/@react-spectrum/s2/src/Picker.tsx    |  2 +-
 .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 31 +++++---
 packages/@react-spectrum/s2/src/TagGroup.tsx  |  9 ++-
 .../@react-spectrum/s2/test/TagGroup.test.tsx | 55 ++++++++++++++
 .../s2/test/TextField.test.tsx                | 32 +++++++++
 packages/@react-types/select/src/index.d.ts   |  2 +-
 .../test/RangeCalendar.test.tsx               | 42 +++++++++++
 13 files changed, 344 insertions(+), 45 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/test/TagGroup.test.tsx
 create mode 100644 packages/@react-spectrum/s2/test/TextField.test.tsx

diff --git a/packages/@react-aria/calendar/src/useCalendarCell.ts b/packages/@react-aria/calendar/src/useCalendarCell.ts
index aabeac2f9a5..1c415d0b3d8 100644
--- a/packages/@react-aria/calendar/src/useCalendarCell.ts
+++ b/packages/@react-aria/calendar/src/useCalendarCell.ts
@@ -101,7 +101,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   );
 
   if (isInvalid) {
-    isSelected = true;
+    // don't mark unavaliable + invalid dates in range calendars as selected, that case only comes up via allowsNoncontiguousRanges
+    // and thus those unavailable dates shouldn't be selected. For single select calendars, we mark unavailble + invalid days as selected for styling reasons
+    if (!('highlightedRange' in state) || !isUnavailable) {
+      isSelected = true;
+    }
   }
 
   // For performance, reuse the same date object as before if the new date prop is the same.
diff --git a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
index 2ad49d90c26..0149063d3fb 100644
--- a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
@@ -40,18 +40,34 @@ let states = [
 
 let combinations = generatePowerset(states);
 
-const Template = (args: ButtonProps): ReactNode => {
-  let {children, ...otherArgs} = args;
+let premiumStates = [
+  {isDisabled: true},
+  {size: ['S', 'M', 'L', 'XL']}
+];
+
+let premiumCombinations = generatePowerset(premiumStates);
+
+let genaiStates = [
+  {isDisabled: true},
+  {size: ['S', 'M', 'L', 'XL']}
+];
+
+let genaiCombinations = generatePowerset(genaiStates);
+
+const Template = (args: ButtonProps & {combos?: any[]}): ReactNode => {
+  let {children, combos = combinations, variant, ...otherArgs} = args;
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
-      {combinations.map(c => {
+      {combos.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
         if (!key) {
           key = 'default';
         }
 
-        let button = <Button data-testid={fullComboName} key={key} {...otherArgs} {...c}>{children ? children : key}</Button>;
+        let finalVariant = c.variant ?? variant;
+        let buttonProps = {...otherArgs, ...c, ...(finalVariant && {variant: finalVariant})};
+        let button = <Button data-testid={fullComboName} key={key} {...buttonProps}>{children ? children : key}</Button>;
         if (c.staticColor != null) {
           return (
             <StaticColorProvider staticColor={c.staticColor}>
@@ -84,4 +100,52 @@ export const IconOnly: StoryObj<typeof Button> = {
   }
 };
 
+export const Premium: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} combos={premiumCombinations} />,
+  args: {
+    children: 'Press me',
+    variant: 'premium'
+  }
+};
+
+export const PremiumWithIcon: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} combos={premiumCombinations} />,
+  args: {
+    children: <><NewIcon /><Text>Press me</Text></>,
+    variant: 'premium'
+  }
+};
+
+export const PremiumIconOnly: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} combos={premiumCombinations} />,
+  args: {
+    children: <NewIcon />,
+    variant: 'premium'
+  }
+};
+
+export const GenAI: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} combos={genaiCombinations} />,
+  args: {
+    children: 'Press me',
+    variant: 'genai'
+  }
+};
+
+export const GenAIWithIcon: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} combos={genaiCombinations} />,
+  args: {
+    children: <><NewIcon /><Text>Press me</Text></>,
+    variant: 'genai'
+  }
+};
+
+export const GenAIIconOnly: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} combos={genaiCombinations} />,
+  args: {
+    children: <NewIcon />,
+    variant: 'genai'
+  }
+};
+
 export {WithWrapping};
diff --git a/packages/@react-spectrum/s2/chromatic/LinkButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/LinkButton.stories.tsx
index 36b7aa21a86..be13b5d8e00 100644
--- a/packages/@react-spectrum/s2/chromatic/LinkButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/LinkButton.stories.tsx
@@ -48,3 +48,19 @@ export const Example: Story = {
     target: '_blank'
   }
 };
+
+export const Premium: Story = {
+  ...Example,
+  args: {
+    ...Example.args,
+    variant: 'premium'
+  }
+};
+
+export const GenAI: Story = {
+  ...Example,
+  args: {
+    ...Example.args,
+    variant: 'genai'
+  }
+};
diff --git a/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx
index 8b180832471..c7512f7cf41 100644
--- a/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx
@@ -33,7 +33,30 @@ export const VerticalOrientation: Story = {
     <div style={{width: 600}}>
       <SelectBoxGroup
         aria-label="Vertical"
-        orientation="vertical" 
+        orientation="vertical"
+        onSelectionChange={action('onSelectionChange')}>
+        <SelectBox id="text-only" textValue="V: Text Only">
+          <Text slot="label">V: Text Only</Text>
+        </SelectBox>
+        <SelectBox id="illustration-text" textValue="V: Illustration + Text">
+          <Server />
+          <Text slot="label">V: Illustration + Text</Text>
+        </SelectBox>
+        <SelectBox id="illustration-desc" textValue="Send">
+          <PaperAirplane />
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
+
+export const VerticalOrientationMultiSelect: Story = {
+  render: () => (
+    <div style={{width: 600}}>
+      <SelectBoxGroup
+        selectionMode="multiple"
+        aria-label="Vertical"
+        orientation="vertical"
         onSelectionChange={action('onSelectionChange')}>
         <SelectBox id="text-only" textValue="V: Text Only">
           <Text slot="label">V: Text Only</Text>
@@ -55,7 +78,36 @@ export const HorizontalOrientation: Story = {
     <div style={{width: 800}}>
       <SelectBoxGroup
         aria-label="Horizontal"
-        orientation="horizontal" 
+        orientation="horizontal"
+        onSelectionChange={action('onSelectionChange')}>
+        <SelectBox id="text-only" textValue="Title Only">
+          <Text slot="label">Title Only</Text>
+        </SelectBox>
+        <SelectBox id="illustration-text" textValue="Illustration + Title">
+          <Server />
+          <Text slot="label">Illustration + Title</Text>
+        </SelectBox>
+        <SelectBox id="text-desc" textValue="Title + Description">
+          <Text slot="label">Title + Description</Text>
+          <Text slot="description">Additional description</Text>
+        </SelectBox>
+        <SelectBox id="h-all" textValue="Illustration + Title + Description">
+          <Server />
+          <Text slot="label">Illustration + Title + Description</Text>
+          <Text slot="description">Full horizontal layout with all elements</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
+
+export const HorizontalOrientationMultSelect: Story = {
+  render: () => (
+    <div style={{width: 800}}>
+      <SelectBoxGroup
+        selectionMode="multiple"
+        aria-label="Horizontal"
+        orientation="horizontal"
         onSelectionChange={action('onSelectionChange')}>
         <SelectBox id="text-only" textValue="Title Only">
           <Text slot="label">Title Only</Text>
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index acd77cb9721..37cb41e03a4 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -430,6 +430,14 @@ export const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps,
   props = useFormProps(props);
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
+  let {
+    fillStyle = 'fill',
+    size = 'M',
+    variant = 'primary',
+    staticColor,
+    styles,
+    children
+  } = props;
 
   return (
     <Link
@@ -440,28 +448,41 @@ export const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps,
         ...renderProps,
         // Retain hover styles when an overlay is open.
         isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
-        variant: props.variant || 'primary',
-        fillStyle: props.fillStyle || 'fill',
-        size: props.size || 'M',
-        staticColor: props.staticColor,
-        isStaticColor: !!props.staticColor,
+        variant,
+        fillStyle,
+        size,
+        staticColor,
+        isStaticColor: !!staticColor,
         isPending: false
-      }, props.styles)}>
-      <Provider
-        values={[
-          [SkeletonContext, null],
-          [TextContext, {
-            styles: style({paddingY: '--labelPadding', order: 1}),
-            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
-            'data-rsp-slot': 'text'
-          }],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
-          }]
-        ]}>
-        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-      </Provider>
+      }, styles)}>
+      {(renderProps) => (<>
+        {variant === 'genai' || variant === 'premium'
+          ? (
+            <span
+              className={gradient({
+                ...renderProps,
+                // Retain hover styles when an overlay is open.
+                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
+                variant
+              })} />
+             )
+          : null}
+        <Provider
+          values={[
+            [SkeletonContext, null],
+            [TextContext, {
+              styles: style({paddingY: '--labelPadding', order: 1}),
+              // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
+              'data-rsp-slot': 'text'
+            }],
+            [IconContext, {
+              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+            }]
+          ]}>
+          {typeof children === 'string' ? <Text>{children}</Text> : children}
+        </Provider>
+      </>)}
     </Link>
   );
 });
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index b05178ab5ee..eccfe89dc55 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -202,7 +202,8 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
         }
       }}
       onTouchEnd={e => {
-        if (!(e.target as Element).closest('button,input,textarea,[role="button"]')) {
+        let target = e.target as HTMLElement;
+        if (!target.isContentEditable && !target.closest('button,input,textarea,[role="button"]')) {
           e.preventDefault();
           (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();
         }
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index bc93a178e33..6140ae33e4b 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -98,7 +98,7 @@ export interface PickerStyleProps {
 
 type SelectionMode = 'single' | 'multiple';
 export interface PickerProps<T extends object, M extends SelectionMode = 'single'> extends
-  Omit<AriaSelectProps<T, M>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>,
+  Omit<AriaSelectProps<T, M>, 'children' | 'style' | 'className' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,
   PickerStyleProps,
   StyleProps,
   SpectrumLabelableProps,
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index 4944a228f1f..f3c0da4901c 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -105,12 +105,16 @@ const selectBoxStyles = style({
       horizontal: 188
     }
   },
-  maxWidth: {
-    default: 170,
-    orientation: {
-      horizontal: 480
+  '--select-box-max-width': {
+    type: 'width',
+    value: {
+      default: 170,
+      orientation: {
+        horizontal: 480
+      }
     }
   },
+  maxWidth: 'min(100%, var(--select-box-max-width))',
   minHeight: {
     default: 144,
     orientation: {
@@ -272,7 +276,7 @@ const gridStyles = style<{orientation?: Orientation}>({
   gridAutoRows: '1fr',
   gap: 24,
   justifyContent: 'center',
-  '--size': {
+  '--select-box-group-width': {
     type: 'width',
     value: {
       orientation: {
@@ -281,10 +285,19 @@ const gridStyles = style<{orientation?: Orientation}>({
       }
     }
   },
+  '--select-box-group-min-width': {
+    type: 'width',
+    value: {
+      orientation: {
+        horizontal: 188,
+        vertical: 144
+      }
+    }
+  },
   gridTemplateColumns: {
     orientation: {
-      horizontal: 'repeat(auto-fit, var(--size))',
-      vertical: 'repeat(auto-fit, var(--size))'
+      horizontal: 'repeat(auto-fit, minmax(var(--select-box-group-min-width), min(var(--select-box-group-width), 100%)))',
+      vertical: 'repeat(auto-fit, minmax(var(--select-box-group-min-width), min(var(--select-box-group-width), 100%)))'
     }
   }
 }, getAllowedOverrides());
@@ -315,7 +328,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
       }, styles)}
       style={pressScale(ref, UNSAFE_style)}
       {...otherProps}>
-      {({isSelected, isDisabled, isHovered}) => {
+      {({isSelected, isDisabled, isHovered, selectionMode}) => {
         return (
           <>
             <div
@@ -326,7 +339,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
                 pointerEvents: 'none'
               })}
               aria-hidden="true">
-              {!isDisabled && (
+              {!isDisabled && selectionMode === 'multiple' && (
                 <div
                   className={box({
                     isSelected,
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index 8a67d056c8c..cc87e336ce2 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -297,6 +297,7 @@ function TagGroupInner<T>({
           <Provider
             values={[
               [RACTextContext, undefined],
+              [RACButtonContext, undefined],
               [TagGroupContext, {size, isEmphasized}]
             ]}>
             {/* invisible collection for measuring */}
@@ -525,11 +526,9 @@ export const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({ch
 
 function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphasized, isSelected}) {
   let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};
+
   return (
-    <Provider
-      values={[
-        [RACButtonContext, null]
-      ]}>
+    <>
       {isInRealDOM && (
         <div
           className={style({
@@ -574,6 +573,6 @@ function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM, isEmphas
           isStaticColor={isEmphasized && isSelected}
           isDisabled={isDisabled} />
       )}
-    </Provider>
+    </>
   );
 }
diff --git a/packages/@react-spectrum/s2/test/TagGroup.test.tsx b/packages/@react-spectrum/s2/test/TagGroup.test.tsx
new file mode 100644
index 00000000000..55381107a14
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/TagGroup.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import {Tag, TagGroup} from '../src';
+import userEvent from '@testing-library/user-event';
+
+describe('TagGroup', () => {
+  let user;
+  beforeAll(() => {
+    jest.useFakeTimers();
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    act(() => jest.runAllTimers());
+  });
+
+  afterAll(function () {
+    jest.restoreAllMocks();
+  });
+
+  it('remove button should work', async () => {
+    let onRemove = jest.fn();
+    let {getAllByLabelText} = render(
+      <TagGroup
+        label="Ice cream categories"
+        size="M"
+        onRemove={onRemove}>
+        <Tag id="chocolate">Chocolate</Tag>
+        <Tag id="mint">Mint</Tag>
+        <Tag id="strawberry">Strawberry</Tag>
+        <Tag id="vanilla">Vanilla</Tag>
+      </TagGroup>
+    );
+
+    let removeButtons = getAllByLabelText('Remove');
+    expect(removeButtons).toHaveLength(4);
+    await user.click(removeButtons[0]);
+    act(() => {jest.runAllTimers();});
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onRemove).toHaveBeenCalledWith(new Set(['chocolate']));
+  });
+});
diff --git a/packages/@react-spectrum/s2/test/TextField.test.tsx b/packages/@react-spectrum/s2/test/TextField.test.tsx
new file mode 100644
index 00000000000..bad48cc0ccd
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/TextField.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {fireEvent, render} from '@react-spectrum/test-utils-internal';
+import {TextArea} from '../src';
+
+describe('TextField', () => {
+  it('should focus textarea when tapping invalid icon', async () => {
+    let {getByRole} = render(
+      <TextArea label="Description" isInvalid  />
+    );
+
+    let textarea = getByRole('textbox');
+    // svg doesn't have a role so grab it via queryselector
+    let icon = getByRole('presentation').querySelector('svg')!;
+    expect(icon).toBeInTheDocument();
+    // user event with touch doesn't cause touchEnd to trigger so using fireEvent
+    fireEvent.touchStart(icon);
+    fireEvent.touchEnd(icon);
+
+    expect(document.activeElement).toBe(textarea);
+  });
+});
diff --git a/packages/@react-types/select/src/index.d.ts b/packages/@react-types/select/src/index.d.ts
index 374e5aa7cdb..339f4163f9f 100644
--- a/packages/@react-types/select/src/index.d.ts
+++ b/packages/@react-types/select/src/index.d.ts
@@ -83,7 +83,7 @@ export interface AriaSelectProps<T, M extends SelectionMode = 'single'> extends
   form?: string
 }
 
-export interface SpectrumPickerProps<T> extends Omit<AriaSelectProps<T>, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange'>, Omit<SingleSelection, 'disallowEmptySelection'>, AsyncLoadable, SpectrumLabelableProps, StyleProps  {
+export interface SpectrumPickerProps<T> extends Omit<AriaSelectProps<T>, 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | 'allowsEmptyCollection'>, Omit<SingleSelection, 'disallowEmptySelection'>, AsyncLoadable, SpectrumLabelableProps, StyleProps  {
   /** Whether the textfield should be displayed with a quiet style. */
   isQuiet?: boolean,
   /** Alignment of the menu relative to the input target.
diff --git a/packages/react-aria-components/test/RangeCalendar.test.tsx b/packages/react-aria-components/test/RangeCalendar.test.tsx
index 03877e4bb47..40a905344e0 100644
--- a/packages/react-aria-components/test/RangeCalendar.test.tsx
+++ b/packages/react-aria-components/test/RangeCalendar.test.tsx
@@ -417,4 +417,46 @@ describe('RangeCalendar', () => {
     expect(cell).toHaveAttribute('aria-invalid', 'true');
     expect(cell).toHaveClass('invalid');
   });
+
+  it('should not mark unavailable dates as selected when range is invalid', () => {
+    let {getByRole} = renderCalendar({
+      value: {start: new CalendarDate(2025, 12, 1), end: new CalendarDate(2025, 12, 10)},
+      isDateUnavailable: (date) => {
+        return date.compare(new CalendarDate(2025, 12, 3)) >= 0 && date.compare(new CalendarDate(2025, 12, 6)) <= 0;
+      },
+      allowsNonContiguousRanges: true,
+      isInvalid: true
+    });
+
+    let grid = getByRole('grid');
+    let cells = within(grid).getAllByRole('button');
+
+    let dec2 = cells.find(cell => cell.textContent === '2');
+    let dec7 = cells.find(cell => cell.textContent === '7');
+
+    // available dates in the range should be selected and marked as invalid but unavaiable ones should not be selected
+    expect(dec2).toHaveAttribute('data-selected', 'true');
+    expect(dec2).not.toHaveAttribute('data-unavailable', 'true');
+    expect(dec2).toHaveAttribute('aria-invalid', 'true');
+    expect(dec7).toHaveAttribute('data-selected', 'true');
+    expect(dec7).not.toHaveAttribute('data-unavailable', 'true');
+    expect(dec7).toHaveAttribute('aria-invalid', 'true');
+
+    let dec3 = cells.find(cell => cell.textContent === '3');
+    let dec4 = cells.find(cell => cell.textContent === '4');
+    let dec5 = cells.find(cell => cell.textContent === '5');
+    let dec6 = cells.find(cell => cell.textContent === '6');
+    expect(dec3).not.toHaveAttribute('data-selected', 'true');
+    expect(dec3).toHaveAttribute('data-unavailable', 'true');
+    expect(dec3).toHaveAttribute('aria-invalid', 'true');
+    expect(dec4).not.toHaveAttribute('data-selected', 'true');
+    expect(dec4).toHaveAttribute('data-unavailable', 'true');
+    expect(dec4).toHaveAttribute('aria-invalid', 'true');
+    expect(dec5).not.toHaveAttribute('data-selected', 'true');
+    expect(dec5).toHaveAttribute('data-unavailable', 'true');
+    expect(dec5).toHaveAttribute('aria-invalid', 'true');
+    expect(dec6).not.toHaveAttribute('data-selected', 'true');
+    expect(dec6).toHaveAttribute('data-unavailable', 'true');
+    expect(dec6).toHaveAttribute('aria-invalid', 'true');
+  });
 });

From f0d808e729d48dabfd059a11e8a21d51d2aa350b Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Fri, 5 Dec 2025 16:25:40 -0800
Subject: [PATCH 4/4] docs: React Aria separator docs (#9288)

* update starter example

* add separator docs

* fix css conflict

* add min height
---
 .../s2-docs/pages/react-aria/Separator.mdx    | 37 +++++++++++++++++++
 .../react-aria-components/src/Separator.tsx   |  3 ++
 starters/docs/src/Menu.css                    |  4 +-
 starters/docs/src/Separator.css               | 15 ++++++++
 starters/docs/src/Separator.tsx               |  8 ++++
 starters/tailwind/src/Separator.tsx           |  4 +-
 6 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 packages/dev/s2-docs/pages/react-aria/Separator.mdx
 create mode 100644 starters/docs/src/Separator.css
 create mode 100644 starters/docs/src/Separator.tsx

diff --git a/packages/dev/s2-docs/pages/react-aria/Separator.mdx b/packages/dev/s2-docs/pages/react-aria/Separator.mdx
new file mode 100644
index 00000000000..471b3d87224
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/Separator.mdx
@@ -0,0 +1,37 @@
+import {Layout} from '../../src/Layout';
+export default Layout;
+
+import docs from 'docs:react-aria-components';
+import {Separator as VanillaSeparator} from 'vanilla-starter/Separator';
+import {Separator as TailwindSeparator} from 'tailwind-starter/Separator';
+import tailwindDocs from 'docs:tailwind-starter/Separator';
+import vanillaDocs from 'docs:vanilla-starter/Separator';
+import '../../tailwind/tailwind.css';
+
+export const relatedPages = [{'title': 'useSeparator', 'url': 'https://react-spectrum.adobe.com/react-aria/useSeparator.html'}];
+export const description = 'A separator is a visual divider between two groups of content.';
+
+# Separator
+
+<PageDescription>{docs.exports.Separator.description}</PageDescription>
+
+<ExampleSwitcher examples={['Vanilla', 'Tailwind']}>
+  <VisualExample
+    component={VanillaSeparator}
+    docs={vanillaDocs.exports.Separator}
+    links={vanillaDocs.links}
+    props={['orientation']}
+    type="vanilla"
+    files={["starters/docs/src/Separator.tsx", "starters/docs/src/Separator.css"]} />
+  <VisualExample
+    component={TailwindSeparator}
+    docs={tailwindDocs.exports.Separator}
+    links={tailwindDocs.links}
+    props={['orientation']}
+    type="tailwind"
+    files={["starters/tailwind/src/Separator.tsx"]} />
+</ExampleSwitcher>
+
+## API
+
+<PropTable component={docs.exports.Separator} links={docs.links}/>
\ No newline at end of file
diff --git a/packages/react-aria-components/src/Separator.tsx b/packages/react-aria-components/src/Separator.tsx
index 7a6da74022d..48d26b282e6 100644
--- a/packages/react-aria-components/src/Separator.tsx
+++ b/packages/react-aria-components/src/Separator.tsx
@@ -42,6 +42,9 @@ export class SeparatorNode extends CollectionNode<any> {
   }
 }
 
+/**
+ * A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.
+ */
 export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, SeparatorContext);
 
diff --git a/starters/docs/src/Menu.css b/starters/docs/src/Menu.css
index bd599720dfb..e2c867663fa 100644
--- a/starters/docs/src/Menu.css
+++ b/starters/docs/src/Menu.css
@@ -170,12 +170,14 @@
   }
 }
 
-.react-aria-Separator {
+.react-aria-Menu .react-aria-Separator {
   grid-column-start: 1;
   grid-column-end: -1;
   margin: 0 var(--spacing-2);
   border: 0;
   border-top: 0.5px solid var(--border-color);
+  height: auto;
+  width: auto;
 
   .react-aria-MenuItem + & {
     margin-block-start: var(--spacing-1);
diff --git a/starters/docs/src/Separator.css b/starters/docs/src/Separator.css
new file mode 100644
index 00000000000..35b10aef072
--- /dev/null
+++ b/starters/docs/src/Separator.css
@@ -0,0 +1,15 @@
+@import "./theme.css";
+
+.react-aria-Separator {
+  background-color: var(--gray-800);
+  border-style: none;
+  border-radius: 1px;
+  height: 2px;
+  width: 100%;
+  
+  &[aria-orientation="vertical"] {
+    width: 2px;
+    min-height: 32px;
+    height: 100%;
+  }
+}
diff --git a/starters/docs/src/Separator.tsx b/starters/docs/src/Separator.tsx
new file mode 100644
index 00000000000..419dd3e2e42
--- /dev/null
+++ b/starters/docs/src/Separator.tsx
@@ -0,0 +1,8 @@
+'use client';
+import {Separator as RACSeparator, SeparatorProps} from 'react-aria-components';
+import React from 'react';
+import './Separator.css';
+
+export function Separator(props: SeparatorProps) {
+  return <RACSeparator {...props} />
+}
\ No newline at end of file
diff --git a/starters/tailwind/src/Separator.tsx b/starters/tailwind/src/Separator.tsx
index f4ac33b5f11..4b9c7eb13b2 100644
--- a/starters/tailwind/src/Separator.tsx
+++ b/starters/tailwind/src/Separator.tsx
@@ -4,11 +4,11 @@ import { Separator as RACSeparator, SeparatorProps } from 'react-aria-components
 import { tv } from 'tailwind-variants';
 
 const styles = tv({
-  base: 'bg-neutral-300 dark:bg-neutral-600 forced-colors:bg-[ButtonBorder]',
+  base: 'bg-neutral-300 dark:bg-neutral-600 forced-colors:bg-[ButtonBorder] border-none',
   variants: {
     orientation: {
       horizontal: 'h-px w-full',
-      vertical: 'w-px'
+      vertical: 'w-px min-h-8 h-full'
     }
   },
   defaultVariants: {