From 7d3f499acc6623f37ba561e6404320f7aae45991 Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Mon, 20 Oct 2025 23:12:37 +0800
Subject: [PATCH 1/6] fix: remove obsolete textarea validation workaround
 (#9019)

---
 .../@react-aria/textfield/src/useTextField.ts | 21 +------------
 .../test/TextField.test.js                    | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts
index e232514d052..18f2942a90c 100644
--- a/packages/@react-aria/textfield/src/useTextField.ts
+++ b/packages/@react-aria/textfield/src/useTextField.ts
@@ -12,14 +12,13 @@
 
 import {AriaTextFieldProps} from '@react-types/textfield';
 import {DOMAttributes, ValidationResult} from '@react-types/shared';
-import {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
 import React, {
   ChangeEvent,
   HTMLAttributes,
   type JSX,
   LabelHTMLAttributes,
   RefObject,
-  useEffect,
   useState
 } from 'react';
 import {useControlledState} from '@react-stately/utils';
@@ -147,24 +146,6 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
   useFormReset(ref, props.defaultValue ?? initialValue, setValue);
   useFormValidation(props, validationState, ref);
 
-  useEffect(() => {
-    // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
-    // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
-    // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
-    // textareas are always controlled. React is planning on removing this synchronization in a
-    // future major version.
-    // https://github.com/facebook/react/issues/19474
-    // https://github.com/facebook/react/issues/11896
-    if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) {
-      let input = ref.current;
-      Object.defineProperty(input, 'defaultValue', {
-        get: () => input.value,
-        set: () => {},
-        configurable: true
-      });
-    }
-  }, [ref]);
-
   return {
     labelProps,
     inputProps: mergeProps(
diff --git a/packages/react-aria-components/test/TextField.test.js b/packages/react-aria-components/test/TextField.test.js
index a5d354ee4c7..b89e35f82b1 100644
--- a/packages/react-aria-components/test/TextField.test.js
+++ b/packages/react-aria-components/test/TextField.test.js
@@ -266,5 +266,35 @@ describe('TextField', () => {
       let input = getByRole('textbox');
       expect(input).toHaveAttribute('form', 'test');
     });
+
+    if (parseInt(React.version, 10) >= 19) {
+      it('resets to defaultValue when submitting form action', async () => {
+        const Component = component;
+        function Test() {
+          const [value, formAction] = React.useActionState((_, formData) => formData.get('value'), 'initial');
+
+          return (
+            <form action={formAction}>
+              <TextField defaultValue={value} name="value">
+                <Label>Value</Label>
+                <Component data-testid="input" />
+              </TextField>
+              <input data-testid="submit" type="submit" />
+            </form>
+          );
+        }
+
+        const {getByTestId} = render(<Test />);
+        const input = getByTestId('input');
+        expect(input).toHaveValue('initial');
+
+        await user.tab();
+        await user.keyboard('Devon');
+
+        const button = getByTestId('submit');
+        await user.click(button);
+        expect(input).toHaveValue('Devon');
+      });
+    }
   });
 });

From 4b8c6eb326ddb9461c4fdab8fc9d97f69e4ed635 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Mon, 20 Oct 2025 09:56:23 -0700
Subject: [PATCH 2/6] chore: add cursor rule for release notes (#9033)

* chore: add cursor rule for release notes

* update cursor rules

* add space
---
 .cursor/rules/add-subheadings.mdc        | 22 +++++++++++++++
 .cursor/rules/categorize-commits.mdc     | 36 ++++++++++++++++++++++++
 .cursor/rules/rewrite-commit-message.mdc | 27 ++++++++++++++++++
 3 files changed, 85 insertions(+)
 create mode 100644 .cursor/rules/add-subheadings.mdc
 create mode 100644 .cursor/rules/categorize-commits.mdc
 create mode 100644 .cursor/rules/rewrite-commit-message.mdc

diff --git a/.cursor/rules/add-subheadings.mdc b/.cursor/rules/add-subheadings.mdc
new file mode 100644
index 00000000000..d723ca3dfd5
--- /dev/null
+++ b/.cursor/rules/add-subheadings.mdc
@@ -0,0 +1,22 @@
+---
+alwaysApply: false
+---
+
+# Step 3: Add sub-headings
+
+Within the Enhancements, Fixes, and Under Construction categories, group commits by UI component under sub-headings.
+
+### Sub-heading rules:
+- Use sub-headings ONLY for:
+  - Enhancements
+  - Fixes
+  - Under Construction
+- Do NOT create sub-headings for:
+  - Documentation
+  - To Be Categorized
+  - S2
+- Sub-headings should be in alphabetical order
+- Use "Miscellaneous" as a sub-heading for commits that do not belong to a specific component
+- Each category can have its own Miscellaneous sub-heading
+- Write sub-headings and commits as unordered lists using a hyphen (-)
+- Do NOT bold the sub-heading text
diff --git a/.cursor/rules/categorize-commits.mdc b/.cursor/rules/categorize-commits.mdc
new file mode 100644
index 00000000000..466190cfadf
--- /dev/null
+++ b/.cursor/rules/categorize-commits.mdc
@@ -0,0 +1,36 @@
+---
+alwaysApply: false
+---
+
+# Step 1: Categorize commits 
+
+Sort ALL commit messages into one of six main categories. The main categories are the following:
+- Enhancements
+- Fixes
+- Documentation
+- Under Construction
+- To Be Categorized
+- S2
+
+Before categorizing commits into other groups, check whether each commit should be classified as “Under Construction.”
+- Follow the steps below in order:
+  1. Identify pre-release packages
+    - Use a command such as grep to scan the repository for package versions that include prerelease identifiers (e.g., alpha, beta, rc)
+  2. Extract component keywords from commit messages
+    - Parse each commit message to identify possible component names
+    - Normalize these keywords (e.g., lowercase, remove punctuation) for easier comparison.
+  3. Compare extracted keywords with pre-release packages
+    - If any keyword matches a package in the list, mark the commit as Under Construction.
+  4. Check for explicit prerelease keywords in commit text
+    - If the commit message directly includes alpha, beta, or rc, classify it as Under Construction, regardless of package matches.
+
+Next, categorize the remaining commits not categorized as "Under Construction". Use the following keywords to determine the category:
+| Keyword                    | Category |
+|----------------------------|----------|
+| feat                       | Enhancements|
+| fix                        | Fixes |
+| docs                       | Documentation |
+| chore, revert, bump, build | To Be Categorized |
+| S2                         | S2 |
+
+Do not duplicate commits. In terms of priority, it should be Under Construction > S2 > To Be Categorized > Enhancements > Fixes > Documentation
diff --git a/.cursor/rules/rewrite-commit-message.mdc b/.cursor/rules/rewrite-commit-message.mdc
new file mode 100644
index 00000000000..a2d68af8858
--- /dev/null
+++ b/.cursor/rules/rewrite-commit-message.mdc
@@ -0,0 +1,27 @@
+---
+alwaysApply: false
+---
+
+You are a expert technical writer for front-end development.
+
+# Step 2: Rewrite commit messages
+
+Original format: Type (Scope): Summary of changes - [@username](link to username) - [PR](link to PR)
+New Format: Summary of changes - [@username](link to username) - [PR](link to PR)
+
+### General Guidelines:
+- Keep the summary as a single, grammatically correct sentence
+- Verbs should be first person present tense but do NOT include the subject (e.g. I)
+- The message should be concise and easy to read
+- Wrap any camelCase or code-like terms (e.g. onClick, onAction, isDisabled) in backticks (``)
+  - Do NOT use backticks for component names
+- Replace specific terms:
+  - RAC -> React Aria
+  - V3 -> React Spectrum
+- ALWAYS capitalize UI component names
+  - Example:
+    - toast -> Toast
+    - inline alert -> InlineAlert
+
+### Component Names to Capitalize:
+Accordion, Autocomplete, Badge, Breadcrumbs, Buttons, Calendar, Checkbox, CheckboxGroup, Collections, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, ComboBox, Date and Time, DateField, DatePicker, DateRangePicker, Dialog, Disclosure, DisclosureGroup, Drag and Drop, DropZone, FileTrigger, Form, InlineAlert, Link, Listbox, ListView, Menu, Meter, Modal, NotificationBadge, NumberField, Picker, ProgressBar, ProgressCircle, RadioGroup, RangeCalendar, SearchField, Select, Slider, StatusLight, Switch, Table, Tabs, TagGroup, TextArea, TextField, TimeField, Toast, ToggleButton, ToggleButtonGroup, Tooltip, Tree, Virtualizer.

From 25b305bb52eed3b6709000a8ea8a4db75aab9882 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 20 Oct 2025 09:57:24 -0700
Subject: [PATCH 3/6] docs: Update React Aria example styling (#9049)

* Add isPressed to table column header render props

* docs: Update React Aria example styling

* fix

* lint

* Fixes and improvements

* fix ts and test

* fix disclosure

* more fixes
---
 .../disclosure/src/useDisclosure.ts           |   4 +-
 .../disclosure/test/useDisclosure.test.ts     |   6 +-
 .../table/src/useTableColumnHeader.ts         |   9 +-
 .../docs/pages/react-aria/home/ExampleApp.tsx |  14 +-
 .../dev/s2-docs/pages/react-aria/Button.mdx   |   9 +-
 .../dev/s2-docs/pages/react-aria/Calendar.mdx |  31 +-
 .../dev/s2-docs/pages/react-aria/Checkbox.mdx |   2 +-
 .../pages/react-aria/CheckboxGroup.mdx        |   2 +-
 .../s2-docs/pages/react-aria/ColorField.mdx   |   9 +-
 .../dev/s2-docs/pages/react-aria/ComboBox.mdx |  30 +-
 .../s2-docs/pages/react-aria/DateField.mdx    |   2 +-
 .../s2-docs/pages/react-aria/DatePicker.mdx   |   2 +-
 .../pages/react-aria/DateRangePicker.mdx      |   2 +-
 .../s2-docs/pages/react-aria/Disclosure.mdx   |   4 +-
 .../dev/s2-docs/pages/react-aria/Form.mdx     |  26 +-
 .../dev/s2-docs/pages/react-aria/GridList.mdx | 798 ++++++++++++++++--
 .../dev/s2-docs/pages/react-aria/ListBox.mdx  |  61 +-
 .../dev/s2-docs/pages/react-aria/Menu.mdx     | 140 ++-
 .../dev/s2-docs/pages/react-aria/Modal.mdx    |  28 +-
 .../pages/react-aria/MonthDropdown.tsx        |   2 +-
 .../s2-docs/pages/react-aria/NumberField.mdx  |   2 +-
 .../pages/react-aria/PokemonGridList.tsx      |  10 +-
 .../dev/s2-docs/pages/react-aria/Popover.mdx  |  23 +-
 .../s2-docs/pages/react-aria/RadioGroup.mdx   |   2 +-
 .../pages/react-aria/RangeCalendar.mdx        |  31 +-
 .../s2-docs/pages/react-aria/SearchField.mdx  |   8 +-
 .../dev/s2-docs/pages/react-aria/Select.mdx   |  39 +-
 .../pages/react-aria/SelectionIndicator.css   |   4 +-
 .../dev/s2-docs/pages/react-aria/Switch.mdx   |   2 +-
 .../dev/s2-docs/pages/react-aria/Table.mdx    |  81 +-
 .../s2-docs/pages/react-aria/TextField.mdx    |  12 +-
 .../s2-docs/pages/react-aria/TimeField.mdx    |   2 +-
 .../pages/react-aria/ToggleButtonGroup.mdx    |  11 +-
 .../dev/s2-docs/pages/react-aria/Toolbar.mdx  |   2 +-
 .../dev/s2-docs/pages/react-aria/Tooltip.mdx  |   2 +-
 .../dev/s2-docs/pages/react-aria/Tree.mdx     |  17 +-
 .../s2-docs/pages/react-aria/Virtualizer.mdx  |  36 +-
 .../s2-docs/pages/react-aria/YearDropdown.tsx |   2 +-
 packages/dev/s2-docs/pages/react-aria/dnd.mdx |  48 +-
 .../s2-docs/pages/react-aria/selection.mdx    | 191 +++--
 packages/dev/s2-docs/pages/s2/ColorField.mdx  |   2 +-
 packages/dev/s2-docs/pages/s2/ComboBox.mdx    |   4 +-
 packages/dev/s2-docs/src/ExampleOutput.tsx    |   5 +-
 packages/dev/s2-docs/src/ExampleSwitcher.tsx  |  93 +-
 packages/dev/s2-docs/tailwind/tailwind.css    |  11 +
 packages/react-aria-components/src/Table.tsx  |  15 +-
 starters/docs/src/Autocomplete.css            |  29 +-
 starters/docs/src/Breadcrumbs.css             |  18 +-
 starters/docs/src/Breadcrumbs.tsx             |   2 +-
 starters/docs/src/Button.css                  |  45 +-
 starters/docs/src/Button.tsx                  |  12 +-
 starters/docs/src/Calendar.css                |  52 +-
 starters/docs/src/Calendar.tsx                |  13 +-
 starters/docs/src/Checkbox.css                |  71 +-
 starters/docs/src/Checkbox.tsx                |   8 +-
 starters/docs/src/CheckboxGroup.css           |  16 +-
 starters/docs/src/CheckboxGroup.tsx           |  20 +-
 starters/docs/src/ColorArea.css               |   2 +-
 starters/docs/src/ColorField.css              |  37 +-
 starters/docs/src/ColorField.tsx              |   6 +-
 starters/docs/src/ColorPicker.css             |  15 +-
 starters/docs/src/ColorPicker.tsx             |   2 +-
 starters/docs/src/ColorSlider.css             |  11 +-
 starters/docs/src/ColorSwatch.css             |   8 +-
 starters/docs/src/ColorSwatchPicker.css       |   3 +-
 starters/docs/src/ColorThumb.css              |   8 +-
 starters/docs/src/ComboBox.css                |  86 +-
 starters/docs/src/ComboBox.tsx                |  39 +-
 starters/docs/src/DateField.css               |  40 +-
 starters/docs/src/DateField.tsx               |  24 +-
 starters/docs/src/DatePicker.css              |  26 +-
 starters/docs/src/DatePicker.tsx              |  36 +-
 starters/docs/src/DateRangePicker.css         |  47 +-
 starters/docs/src/DateRangePicker.tsx         |  44 +-
 starters/docs/src/Dialog.css                  |   4 +-
 starters/docs/src/Disclosure.css              |  45 +-
 starters/docs/src/Disclosure.tsx              |   6 +-
 starters/docs/src/DisclosureGroup.css         |   2 +-
 starters/docs/src/DropZone.css                |   2 +-
 starters/docs/src/Form.css                    |  66 +-
 starters/docs/src/Form.tsx                    |   8 +-
 starters/docs/src/GridList.css                | 288 ++++---
 starters/docs/src/GridList.tsx                |  17 +-
 starters/docs/src/InputGroup.css              |  24 +-
 starters/docs/src/InputGroup.tsx              |   5 +-
 starters/docs/src/Link.css                    |  16 +-
 starters/docs/src/ListBox.css                 | 372 +++++---
 starters/docs/src/ListBox.tsx                 |  36 +-
 starters/docs/src/Menu.css                    | 193 +++--
 starters/docs/src/Menu.tsx                    |  16 +-
 starters/docs/src/Meter.css                   |  29 +-
 starters/docs/src/Meter.tsx                   |   9 +-
 starters/docs/src/Modal.css                   |  13 +-
 starters/docs/src/NumberField.css             |  79 +-
 starters/docs/src/NumberField.tsx             |  13 +-
 starters/docs/src/Popover.css                 |  28 +-
 starters/docs/src/Popover.tsx                 |  18 +-
 starters/docs/src/ProgressBar.css             |  77 +-
 starters/docs/src/ProgressBar.tsx             |   4 +-
 starters/docs/src/ProgressCircle.tsx          |   2 +-
 starters/docs/src/RadioGroup.css              |  89 +-
 starters/docs/src/RadioGroup.tsx              |  36 +-
 starters/docs/src/RangeCalendar.css           |  94 ++-
 starters/docs/src/RangeCalendar.tsx           |  31 +-
 starters/docs/src/SearchField.css             |  91 +-
 starters/docs/src/SearchField.tsx             |  12 +-
 .../docs/src}/SegmentedControl.css            |  27 +-
 starters/docs/src/SegmentedControl.tsx        |  18 +
 starters/docs/src/Select.css                  | 103 +--
 starters/docs/src/Select.tsx                  |  16 +-
 starters/docs/src/Sheet.css                   |   2 +-
 starters/docs/src/Slider.css                  |  94 ++-
 starters/docs/src/Slider.tsx                  |  16 +-
 starters/docs/src/Switch.css                  |  75 +-
 starters/docs/src/Switch.tsx                  |  12 +-
 starters/docs/src/Table.css                   | 373 ++++----
 starters/docs/src/Table.tsx                   |  59 +-
 starters/docs/src/Tabs.css                    |  45 +-
 starters/docs/src/TagGroup.css                | 107 +--
 starters/docs/src/TagGroup.tsx                |   8 +-
 starters/docs/src/TextField.css               |  61 +-
 starters/docs/src/TextField.tsx               |  18 +-
 starters/docs/src/TimeField.css               |  10 -
 starters/docs/src/TimeField.tsx               |  22 +-
 starters/docs/src/ToggleButton.css            |  50 +-
 starters/docs/src/ToggleButton.tsx            |  18 +-
 starters/docs/src/ToggleButtonGroup.css       |  29 +-
 starters/docs/src/Toolbar.css                 |   8 +-
 starters/docs/src/Tooltip.css                 |  17 +-
 starters/docs/src/Tree.css                    | 240 +++---
 starters/docs/src/Tree.tsx                    |  67 +-
 starters/docs/src/theme.css                   | 244 ++++--
 starters/docs/src/utilities.css               | 277 ++++++
 starters/docs/stories/Breadcrumbs.stories.tsx |  12 +-
 starters/docs/stories/TextField.stories.tsx   |   5 +-
 starters/tailwind/src/Button.tsx              |   9 +-
 starters/tailwind/src/Calendar.tsx            |  16 +-
 starters/tailwind/src/Checkbox.tsx            |  10 +-
 starters/tailwind/src/ColorField.tsx          |   4 +-
 starters/tailwind/src/ColorPicker.tsx         |   2 +-
 starters/tailwind/src/ColorSlider.tsx         |   2 +-
 starters/tailwind/src/ColorSwatch.tsx         |   2 +-
 starters/tailwind/src/ColorSwatchPicker.tsx   |   2 +-
 starters/tailwind/src/ComboBox.tsx            |   8 +-
 starters/tailwind/src/DateField.tsx           |   2 +-
 starters/tailwind/src/DatePicker.tsx          |   8 +-
 starters/tailwind/src/DateRangePicker.tsx     |   8 +-
 starters/tailwind/src/Disclosure.tsx          |   4 +-
 starters/tailwind/src/DropZone.tsx            |   2 +-
 starters/tailwind/src/Field.tsx               |   2 +-
 starters/tailwind/src/FieldButton.tsx         |  34 +
 starters/tailwind/src/GridList.tsx            |   9 +-
 starters/tailwind/src/ListBox.tsx             |   4 +-
 starters/tailwind/src/Menu.tsx                |  46 +-
 starters/tailwind/src/Meter.tsx               |   2 +-
 starters/tailwind/src/NumberField.tsx         |   4 +-
 starters/tailwind/src/Popover.tsx             |   3 -
 starters/tailwind/src/ProgressBar.tsx         |   2 +-
 starters/tailwind/src/RadioGroup.tsx          |  10 +-
 starters/tailwind/src/RangeCalendar.tsx       |   6 +-
 starters/tailwind/src/SearchField.tsx         |   8 +-
 starters/tailwind/src/Select.tsx              |   6 +-
 starters/tailwind/src/Slider.tsx              |   8 +-
 starters/tailwind/src/Switch.tsx              |   2 +-
 starters/tailwind/src/Table.tsx               |  18 +-
 starters/tailwind/src/Tabs.tsx                |   2 +-
 starters/tailwind/src/TagGroup.tsx            |  10 +-
 starters/tailwind/src/TextField.tsx           |   4 +-
 starters/tailwind/src/TimeField.tsx           |   3 +-
 starters/tailwind/src/ToggleButton.tsx        |   4 +-
 starters/tailwind/src/Toolbar.tsx             |   2 +-
 starters/tailwind/src/Tooltip.tsx             |   4 +-
 starters/tailwind/src/Tree.tsx                |   2 +-
 starters/tailwind/stories/Popover.stories.tsx |   2 +-
 174 files changed, 4063 insertions(+), 2527 deletions(-)
 rename {packages/dev/s2-docs/pages/react-aria => starters/docs/src}/SegmentedControl.css (63%)
 create mode 100644 starters/docs/src/SegmentedControl.tsx
 create mode 100644 starters/docs/src/utilities.css
 create mode 100644 starters/tailwind/src/FieldButton.tsx

diff --git a/packages/@react-aria/disclosure/src/useDisclosure.ts b/packages/@react-aria/disclosure/src/useDisclosure.ts
index ab55538a91f..34b254afce6 100644
--- a/packages/@react-aria/disclosure/src/useDisclosure.ts
+++ b/packages/@react-aria/disclosure/src/useDisclosure.ts
@@ -73,7 +73,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
     if (raf.current) {
       cancelAnimationFrame(raf.current);
     }
-    if (ref.current && !isDisabled && !isSSR) {
+    if (ref.current && !isSSR) {
       let panel = ref.current;
 
       if (isExpandedRef.current == null || typeof panel.getAnimations !== 'function') {
@@ -155,7 +155,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
       role: 'group',
       'aria-labelledby': triggerId,
       'aria-hidden': !state.isExpanded,
-      hidden: !state.isExpanded || undefined
+      hidden: isSSR ? !state.isExpanded : undefined
     }
   };
 }
diff --git a/packages/@react-aria/disclosure/test/useDisclosure.test.ts b/packages/@react-aria/disclosure/test/useDisclosure.test.ts
index b3bcf38ffe5..9f2932acc93 100644
--- a/packages/@react-aria/disclosure/test/useDisclosure.test.ts
+++ b/packages/@react-aria/disclosure/test/useDisclosure.test.ts
@@ -91,7 +91,7 @@ describe('useDisclosure', () => {
   });
 
   it('should keep panel hidden when toggling disabled state', () => {
-    let {result, rerender} = renderHook(({isDisabled}: {isDisabled: boolean}) => {
+    let {rerender} = renderHook(({isDisabled}: {isDisabled: boolean}) => {
       let state = useDisclosureState({});
       return useDisclosure({isDisabled}, state, ref);
     }, {initialProps: {isDisabled: false}});
@@ -100,13 +100,13 @@ describe('useDisclosure', () => {
       rerender({isDisabled: true});
     });
 
-    expect(result.current.panelProps.hidden).toBe(true);
+    expect(ref.current.hidden).toBe(true);
 
     act(() => {
       rerender({isDisabled: false});
     });
 
-    expect(result.current.panelProps.hidden).toBe(true);
+    expect(ref.current.hidden).toBe(true);
   });
 
   it('should set correct IDs for accessibility', () => {
diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts
index b352ff98c22..e6ac331c1cd 100644
--- a/packages/@react-aria/table/src/useTableColumnHeader.ts
+++ b/packages/@react-aria/table/src/useTableColumnHeader.ts
@@ -31,7 +31,9 @@ export interface AriaTableColumnHeaderProps<T> {
 
 export interface TableColumnHeaderAria {
   /** Props for the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) element. */
-  columnHeaderProps: DOMAttributes
+  columnHeaderProps: DOMAttributes,
+  /** Whether the column is currently in a pressed state. */
+  isPressed: boolean
 }
 
 /**
@@ -48,7 +50,7 @@ export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, st
 
   let isSelectionCellDisabled = node.props.isSelectionCell && state.selectionManager.selectionMode === 'single';
 
-  let {pressProps} = usePress({
+  let {pressProps, isPressed} = usePress({
     isDisabled: !allowsSorting || isSelectionCellDisabled,
     onPress() {
       state.sort(node.key);
@@ -100,6 +102,7 @@ export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, st
       id: getColumnHeaderId(state, node.key),
       'aria-colspan': node.colSpan && node.colSpan > 1 ? node.colSpan : undefined,
       'aria-sort': ariaSort
-    }
+    },
+    isPressed
   };
 }
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index eb2b75a46c0..f835f94e8e1 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -15,13 +15,13 @@ import {Button} from 'tailwind-starter/Button';
 import {Cell, Column, Row, TableHeader} from 'tailwind-starter/Table';
 import {Checkbox} from 'tailwind-starter/Checkbox';
 import {CloudSun, Dessert, Droplet, Droplets, FilterIcon, Mail, MoreHorizontal, PencilIcon, PlusIcon, RefreshCw, ShareIcon, SlidersIcon, StarIcon, Sun, SunDim, TrashIcon, Twitter} from 'lucide-react';
-import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, MenuTrigger, ModalOverlay, ModalOverlayProps, Modal as RACModal, ResizableTableContainer, Selection, SortDescriptor, SubmenuTrigger, Table, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
+import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, ModalOverlay, ModalOverlayProps, Modal as RACModal, ResizableTableContainer, Selection, SortDescriptor, Table, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
 import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox';
 import {DatePicker} from 'tailwind-starter/DatePicker';
 import {focusRing} from 'tailwind-starter/utils';
 import {getLocalTimeZone, today} from '@internationalized/date';
 import {GridList, GridListItem} from 'tailwind-starter/GridList';
-import {Menu, MenuItem} from 'tailwind-starter/Menu';
+import {Menu, MenuItem, MenuTrigger, SubmenuTrigger} from 'tailwind-starter/Menu';
 import {Modal} from 'tailwind-starter/Modal';
 import plants, {Plant} from './plants';
 import {Popover} from 'tailwind-starter/Popover';
@@ -41,7 +41,7 @@ const allColumns: ColumnProps[] = [
   {id: 'cycle', children: 'Cycle', defaultWidth: 120, allowsSorting: true},
   {id: 'sunlight', children: 'Sunlight', defaultWidth: 120, allowsSorting: true},
   {id: 'watering', children: 'Watering', defaultWidth: 120, allowsSorting: true},
-  {id: 'actions', children: <VisuallyHidden>Actions</VisuallyHidden>, width: 44, minWidth: 44}
+  {id: 'actions', children: <VisuallyHidden>Actions</VisuallyHidden>, width: 64, minWidth: 64}
 ];
 
 let hideOnScroll = document.getElementById('hideOnScroll');
@@ -237,9 +237,9 @@ export function ExampleApp(): React.ReactNode {
                 <img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-3 object-contain h-[40px]" />
                 <span className="truncate capitalize">{item.common_name}</span>
                 <span className="truncate text-xs text-gray-600 dark:text-zinc-400 col-start-2 row-start-2">{item.scientific_name}</span>
-                <MenuTrigger>
-                  <Button aria-label="Actions" variant="icon" className="row-span-2 place-self-center"><MoreHorizontal className="w-5 h-5" /></Button>
-                  <Menu placement="bottom end" onAction={action => onAction(item, action)}>
+                <MenuTrigger placement="bottom end" >
+                  <Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center"><MoreHorizontal className="w-5 h-5" /></Button>
+                  <Menu onAction={action => onAction(item, action)}>
                     <MenuItem id="favorite"><StarIcon aria-hidden className="w-4 h-4" /> {item.isFavorite ? 'Unfavorite' : 'Favorite'}</MenuItem>
                     <MenuItem id="edit"><PencilIcon aria-hidden className="w-4 h-4" /> Edit…</MenuItem>
                     <MenuItem id="delete"><TrashIcon aria-hidden className="w-4 h-4" /> Delete…</MenuItem>
@@ -296,7 +296,7 @@ export function ExampleApp(): React.ReactNode {
                       return (
                         <Cell>
                           <MenuTrigger>
-                            <Button aria-label="Actions" variant="icon">
+                            <Button aria-label="Actions" variant="secondary">
                               <MoreHorizontal aria-hidden className="w-5 h-5" />
                             </Button>
                             <Menu onAction={action => onAction(item, action)}>
diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx
index e9d2f02b200..452dd693ed5 100644
--- a/packages/dev/s2-docs/pages/react-aria/Button.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx
@@ -6,6 +6,7 @@ import docs from 'docs:react-aria-components';
 import {Button as VanillaButton} from 'vanilla-starter/Button';
 import {Button as TailwindButton} from 'tailwind-starter/Button';
 /* import {Button as MacroButton} from './ButtonExample'; */
+import vanillaDocs from 'docs:vanilla-starter/Button';
 import tailwindDocs from 'docs:tailwind-starter/Button';
 import '../../tailwind/tailwind.css';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
@@ -19,9 +20,9 @@ export const tags = ['btn'];
 <ExampleSwitcher examples={['Vanilla CSS', 'Tailwind'/*, 'Style Macro'*/]}>
   <VisualExample
     component={VanillaButton}
-    docs={docs.exports.Button}
-    links={docs.links}
-    props={['isPending', 'isDisabled']}
+    docs={vanillaDocs.exports.Button}
+    links={vanillaDocs.links}
+    props={['variant', 'isPending', 'isDisabled']}
     initialProps={{children: 'Press me'}}
     type="vanilla"
     files={["starters/docs/src/Button.tsx", "starters/docs/src/Button.css"]} />
@@ -114,7 +115,7 @@ The `Button` component always represents a button semantically. To create a link
 "use client";
 import {Link} from 'react-aria-components';
 
-<Link className="react-aria-Button" href="https://adobe.com/" target="_blank">
+<Link className="react-aria-Button button-base" href="https://adobe.com/" target="_blank">
   Adobe
 </Link>
 ```
diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
index 560fed91a6b..4325cdc604c 100644
--- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
@@ -183,8 +183,11 @@ Set the `visibleDuration` prop and render multiple `CalendarGrid` elements to di
 
 ```tsx render docs={docs.exports.Calendar} links={docs.links} props={['visibleDuration', 'pageBehavior', 'firstDayOfWeek']} initialProps={{visibleDuration: {months: 2}}} wide
 "use client";
-import {Calendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {Calendar, Heading} from 'react-aria-components';
+import {CalendarGrid, CalendarCell} from 'vanilla-starter/Calendar';
+import {Button} from 'vanilla-starter/Button';
 import {useDateFormatter} from 'react-aria';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 // TODO: move this into the starter example.
 function Example(props) {
@@ -201,18 +204,22 @@ function Example(props) {
       ///- begin highlight -///
       /* PROPS */
       ///- end highlight -///
-      style={{display: 'flex', gap: 30, overflow: 'auto'}}
+      style={{display: 'flex', gap: 12, overflow: 'auto'}}
     >
       {({state}) => (
         [...Array(props.visibleDuration.months).keys()].map(i => (
           <div key={i} style={{flex: 1}}>
-            <header>
+            <header style={{minHeight: 32}}>
               {i === 0 && 
-                <Button slot="previous">◀</Button>
+                <Button slot="previous" variant="quiet">
+                  <ChevronLeft />
+                </Button>
               }
-              <h2 style={{flex: 1, textAlign: 'center'}}>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate('UTC'))}</h2>
+              <Heading>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))}</Heading>
               {i === props.visibleDuration.months - 1 && 
-                <Button slot="next">▶</Button>
+                <Button slot="next" variant="quiet">
+                  <ChevronRight />
+                </Button>
               }
             </header>
             <CalendarGrid offset={{months: i}}>
@@ -265,19 +272,25 @@ You can also control the focused date via `CalendarStateContext`. This example s
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx', 'packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx']}
 "use client";
-import {Calendar, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {Calendar} from 'react-aria-components';
+import {CalendarGrid, CalendarCell} from 'vanilla-starter/Calendar';
 import {MonthDropdown} from './MonthDropdown';
 import {YearDropdown} from './YearDropdown';
 import {Button} from 'vanilla-starter/Button';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 <Calendar>
   <header style={{display: 'flex', gap: 4}}>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous" variant="quiet">
+      <ChevronLeft />
+    </Button>
     {/*- begin highlight -*/}
     <MonthDropdown />
     <YearDropdown />
     {/*- end highlight -*/}
-    <Button slot="next">▶</Button>
+    <Button slot="next" variant="quiet">
+      <ChevronRight />
+    </Button>
   </header>
   <CalendarGrid>
     {(date) => <CalendarCell date={date} />}
diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
index 19ba646d98d..42195a062d2 100644
--- a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx
@@ -70,7 +70,7 @@ Use the `name` and `value` props to submit the checkbox to the server. Set the `
 "use client";
 import {Checkbox} from 'vanilla-starter/Checkbox';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <Checkbox
diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
index 553cd6a3d0b..95c6e3260b5 100644
--- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx
@@ -77,7 +77,7 @@ Use the `name` prop to submit the selected checkboxes to the server. Set the `is
 import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup';
 import {Checkbox} from 'vanilla-starter/Checkbox';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <div style={{display: 'flex', gap: 32, flexWrap: 'wrap'}}>
diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
index 3db74874820..c4ac7c62928 100644
--- a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx
@@ -20,7 +20,7 @@ export const tags = ['input'];
     docs={vanillaDocs.exports.ColorField}
     links={vanillaDocs.links}
     props={['label', 'colorSpace', 'channel', 'description', 'isDisabled']}
-    initialProps={{label: 'Color', defaultValue: '#ff0000'}}
+    initialProps={{label: 'Color', defaultValue: '#ff0000', placeholder: 'Enter a color'}}
     type="vanilla"
     files={["starters/docs/src/ColorField.tsx", "starters/docs/src/ColorField.css"]} />
   <VisualExample
@@ -28,7 +28,7 @@ export const tags = ['input'];
     docs={vanillaDocs.exports.ColorField}
     links={vanillaDocs.links}
     props={['label', 'colorSpace', 'channel', 'description', 'isDisabled']}
-    initialProps={{label: 'Color', defaultValue: '#ff0000'}}
+    initialProps={{label: 'Color', defaultValue: '#ff0000', placeholder: 'Enter a color'}}
     type="tailwind"
     files={["starters/tailwind/src/ColorField.tsx", "starters/tailwind/src/index.css"]} />
 </ExampleSwitcher>
@@ -50,9 +50,10 @@ function Example() {
     <div>
       <ColorField
         label="Primary color"
+        placeholder="Enter a color"
         value={value}
         onChange={setValue} />
-      <pre style={{fontSize: 12}}>Current value: {value.toString('hex')}</pre>
+      <pre style={{fontSize: 12}}>Current value: {value?.toString('hex')}</pre>
     </div>
   );
 }
@@ -75,6 +76,7 @@ function Example() {
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       <ColorField
         label="Hue"
+        
         value={color}
         onChange={setColor}
         /*- begin highlight -*/
@@ -115,6 +117,7 @@ function Example(props) {
       <ColorField
         {...props}
         label="Brand color"
+        placeholder="Enter a color"
         ///- begin highlight -///
         name="brandColor"
         isRequired />
diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
index c6091720d43..0efd57fda82 100644
--- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx
@@ -14,7 +14,7 @@ export const tags = ['autocomplete', 'search', 'typeahead', 'input'];
 <PageDescription>{docs.exports.ComboBox.description}</PageDescription>
 
 <ExampleSwitcher>
-  ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal'}} type="vanilla" files={["starters/docs/src/ComboBox.tsx", "starters/docs/src/ComboBox.css"]}
+  ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal', placeholder: 'Select a flavor'}} type="vanilla" files={["starters/docs/src/ComboBox.tsx", "starters/docs/src/ComboBox.css"]}
   "use client";
   import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 
@@ -28,7 +28,7 @@ export const tags = ['autocomplete', 'search', 'typeahead', 'input'];
   </ComboBox>
   ```
 
-  ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal'}} type="tailwind" files={["starters/tailwind/src/ComboBox.tsx"]}
+  ```tsx render docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['label', 'isDisabled']} initialProps={{label: 'Favorite Animal', placeholder: 'Select a flavor'}} type="tailwind" files={["starters/tailwind/src/ComboBox.tsx"]}
   "use client";
   import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox';
 
@@ -52,8 +52,8 @@ The following example shows a dynamic collection of items, grouped into sections
 
 ```tsx render
 "use client";
-import {ComboBox} from 'vanilla-starter/ComboBox';
-import {ListBoxSection, ListBoxItem, Collection, Header} from 'react-aria-components';
+import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
+import {ListBoxSection, Collection, Header} from 'react-aria-components';
 
 function Example() {
   /*- begin collapse -*/
@@ -82,16 +82,21 @@ function Example() {
   /*- end collapse -*/
 
   return (
-    <ComboBox label="Preferred fruit or vegetable" items={options}>
+    /*- begin highlight -*/
+    <ComboBox
+      label="Preferred fruit or vegetable"
+      placeholder="Select an option"
+      defaultItems={options}>
       {section => (
         <ListBoxSection id={section.name}>
           <Header>{section.name}</Header>
           <Collection items={section.children}>
-            {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
+            {item => <ComboBoxItem id={item.name}>{item.name}</ComboBoxItem>}
           </Collection>
         </ListBoxSection>
       )}
     </ComboBox>
+    /*- end highlight -*/
   );
 }
 ```
@@ -112,7 +117,8 @@ function Example() {
   return (
     <div>
       <ComboBox
-        label="Pick an animal"
+        label="Favorite Animal"
+        placeholder="Select an animal"
         /*- begin highlight -*/
         selectedKey={animal}
         onSelectionChange={setAnimal}>
@@ -148,6 +154,7 @@ function Example(props) {
       <ComboBox
         {...props}
         label="Favorite Animal"
+        placeholder="Select an animal"
         /*- begin highlight -*/
         /* PROPS */
         inputValue={value}
@@ -215,7 +222,8 @@ function ControlledComboBox() {
   return (
     <div>
        <ComboBox
-        label="Pick a engineering major"
+        label="Engineering major"
+        placeholder="Select a major"
         /*- begin highlight -*/
         defaultItems={options}
         selectedKey={fieldState.selectedKey}
@@ -249,6 +257,7 @@ function Example() {
   return (
     <ComboBox
       label="Favorite Animal"
+      placeholder="Select an animal"
       allowsEmptyCollection
       inputValue={inputValue}
       onInputChange={setInputValue}>
@@ -278,11 +287,12 @@ Use the `name` prop to submit the `id` of the selected item to the server. Set t
 "use client";
 import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <ComboBox
     label="Animal"
+    placeholder="e.g. Cat"
     /*- begin highlight -*/
     name="animal"
     isRequired
@@ -309,7 +319,7 @@ Use the `menuTrigger` prop to control when the popover opens:
 
 Use `allowsEmptyCollection` to keep the popover open when there are no items available in the list.
 
-```tsx render wide docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['menuTrigger', 'allowsEmptyCollection']} initialProps={{label: 'Favorite Animal'}}
+```tsx render wide docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['menuTrigger', 'allowsEmptyCollection']} initialProps={{label: 'Favorite Animal', placeholder: 'Select an animal'}}
 "use client";
 import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 
diff --git a/packages/dev/s2-docs/pages/react-aria/DateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField.mdx
index 0d590f6135b..49c0ce59549 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx
@@ -99,7 +99,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
 import {today, getLocalTimeZone} from '@internationalized/date';
 import {DateField} from 'vanilla-starter/DateField';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <DateField
diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
index fb2fc58d2a8..66003457fc9 100644
--- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
@@ -100,7 +100,7 @@ import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
 import {useLocale} from 'react-aria';
 import {DatePicker} from 'vanilla-starter/DatePicker';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 function Example() {
   let {locale} = useLocale();
diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
index 7b14ba61960..f90eb01e22d 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
@@ -113,7 +113,7 @@ import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
 import {useLocale} from 'react-aria';
 import {DateRangePicker} from 'vanilla-starter/DateRangePicker';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 function Example(props) {
   let {locale} = useLocale();
diff --git a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx
index 8ba5acedbb4..34e1ff9be59 100644
--- a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx
@@ -70,10 +70,10 @@ import {Button} from 'vanilla-starter/Button';
 import {Settings} from 'lucide-react';
 
 <Disclosure style={{width: 200}}>
-  <div style={{display: 'flex', alignItems: 'center'}}>
+  <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
     {/*- begin highlight -*/}
     <DisclosureHeader style={{flex: 1}}>Files</DisclosureHeader>
-    <Button aria-label="Settings"><Settings size={16} /></Button>
+    <Button aria-label="Settings"><Settings /></Button>
     {/*- end highlight -*/}
   </div>
   <DisclosurePanel>Files content</DisclosurePanel>
diff --git a/packages/dev/s2-docs/pages/react-aria/Form.mdx b/packages/dev/s2-docs/pages/react-aria/Form.mdx
index 88a106efb32..c0b65dfd57b 100644
--- a/packages/dev/s2-docs/pages/react-aria/Form.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Form.mdx
@@ -18,11 +18,11 @@ export const tags = ['input', 'field'];
   import {Button} from 'vanilla-starter/Button';
 
   <Form/* PROPS */>
-    <TextField label="Name" name="name" isRequired />
-    <TextField label="Email" name="email" type="email" isRequired />
+    <TextField label="Name" name="name" isRequired placeholder="Enter your full name" />
+    <TextField label="Email" name="email" type="email" isRequired placeholder="Enter your email" />
     <div style={{display: 'flex', gap: 8}}>
       <Button type="submit">Submit</Button>
-      <Button type="reset">Reset</Button>
+      <Button type="reset" variant="secondary">Reset</Button>
     </div>
   </Form>
   ```
@@ -34,11 +34,11 @@ export const tags = ['input', 'field'];
   import {Button} from 'tailwind-starter/Button';
 
   <Form/* PROPS */>
-    <TextField label="Name" name="name" isRequired />
-    <TextField label="Email" name="email" type="email" isRequired />
+    <TextField label="Name" name="name" isRequired placeholder="Enter your full name" />
+    <TextField label="Email" name="email" type="email" isRequired placeholder="Enter your email" />
     <div style={{display: 'flex', gap: 8}}>
       <Button type="submit">Submit</Button>
-      <Button type="reset">Reset</Button>
+      <Button type="reset" variant="secondary">Reset</Button>
     </div>
   </Form>
   ```
@@ -64,7 +64,7 @@ import {Button} from 'vanilla-starter/Button';
     alert(`Hello, ${name}!`);
   }}>
   {/*- end highlight -*/}
-  <TextField name="name" label="Name" />
+  <TextField name="name" label="Name" placeholder="Enter your full name" />
   <Button type="submit">Submit</Button>
 </Form>
 ```
@@ -90,7 +90,7 @@ import {Button} from 'vanilla-starter/Button';
     event.target.reset();
   }}>
   {/*- end highlight -*/}
-  <TextField name="name" label="Name" />
+  <TextField name="name" label="Name" placeholder="Enter your full name" />
   <Button type="submit">Submit</Button>
 </Form>
 ```
@@ -110,6 +110,7 @@ import {Button} from 'vanilla-starter/Button';
 <Form/* PROPS */>
   <TextField
     label="Username"
+    placeholder="Choose a username"
     isRequired
     validate={value => value === 'admin' ? 'Nice try.' : null}
     name="username"
@@ -136,6 +137,7 @@ import {TextField} from 'vanilla-starter/TextField';
   <TextField
     name="username"
     label="Username"
+    placeholder="Choose a username"
     defaultValue="admin" />
 </Form>
 ```
@@ -176,14 +178,16 @@ function Example() {
       <TextField
         name="firstName"
         isRequired
-        label="First Name" />
+        label="First Name"
+        placeholder="Enter your first name" />
       <TextField
         name="lastName"
         isRequired
-        label="Last Name" />
+        label="Last Name"
+        placeholder="Enter your last name" />
       <div style={{display: 'flex', gap: 8}}>
         <Button type="submit">Submit</Button>
-        <Button type="reset">Reset</Button>
+        <Button type="reset" variant="secondary">Reset</Button>
       </div>
     </Form>
   );
diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
index d03c53afdd6..1f068c35ac3 100644
--- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
@@ -14,27 +14,62 @@ export const tags = ['list view'];
 <PageDescription>{docs.exports.GridList.description}</PageDescription>
 
 <ExampleSwitcher>
-  ```tsx render docs={docs.exports.GridList} links={docs.links} props={['selectionMode']} initialProps={{'aria-label': 'Favorite pokemon', selectionMode: 'multiple'}} type="vanilla" files={["starters/docs/src/GridList.tsx", "starters/docs/src/GridList.css"]}
+  ```tsx render docs={docs.exports.GridList} links={docs.links} props={['layout', 'selectionMode']} initialProps={{'aria-label': 'Favorite pokemon', selectionMode: 'multiple', layout: 'grid'}} type="vanilla" files={["starters/docs/src/GridList.tsx", "starters/docs/src/GridList.css"]}
   "use client";
+  import {Text} from 'react-aria-components';
   import {GridList, GridListItem} from 'vanilla-starter/GridList';
   import {Button} from 'vanilla-starter/Button';
 
   <GridList/* PROPS */>
-    <GridListItem textValue="Charizard">
-      Charizard
-      <Button aria-label="Info">ⓘ</Button>
+    <GridListItem textValue="Desert Sunset">
+      <img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
+      <Text>Desert Sunset</Text>
+      <Text slot="description">PNG • 2/3/2024</Text>
     </GridListItem>
-    <GridListItem textValue="Blastoise">
-      Blastoise
-      <Button aria-label="Info">ⓘ</Button>
+    <GridListItem textValue="Hiking Trail">
+      <img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+      <Text>Hiking Trail</Text>
+      <Text slot="description">JPEG • 1/10/2022</Text>
     </GridListItem>
-    <GridListItem textValue="Venusaur">
-      Venusaur
-      <Button aria-label="Info">ⓘ</Button>
+    <GridListItem textValue="Lion">
+      <img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
+      <Text>Lion</Text>
+      <Text slot="description">JPEG • 8/28/2021</Text>
     </GridListItem>
-    <GridListItem textValue="Pikachu">
-      Pikachu
-      <Button aria-label="Info">ⓘ</Button>
+    <GridListItem textValue="Mountain Sunrise">
+      <img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+      <Text>Mountain Sunrise</Text>
+      <Text slot="description">PNG • 3/15/2015</Text>
+    </GridListItem>
+    <GridListItem textValue="Giraffe tongue">
+      <img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+      <Text>Giraffe tongue</Text>
+      <Text slot="description">PNG • 11/27/2019</Text>
+    </GridListItem>
+    <GridListItem textValue="Golden Hour">
+      <img src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} />
+      <Text>Golden Hour</Text>
+      <Text slot="description">WEBP • 7/24/2024</Text>
+    </GridListItem>
+    <GridListItem textValue="Architecture">
+      <img src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
+      <Text>Architecture</Text>
+      <Text slot="description">PNG • 12/24/2016</Text>
+    </GridListItem>
+    <GridListItem textValue="Peeking leopard">
+      <img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
+      <Text>Peeking leopard</Text>
+      <Text slot="description">JPEG • 3/2/2016</Text>
+    </GridListItem>
+    <GridListItem textValue="Roofs">
+      <img src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
+      <Text>Roofs</Text>
+      <Text slot="description">JPEG • 4/24/2025</Text>
+    </GridListItem>
+    <GridListItem textValue="Half Dome Deer">
+      <img src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={990} />
+      <Text>Half Dome Deer</Text>
+      <Text slot="description">DNG • 8/28/2018</Text>
     </GridListItem>
   </GridList>
   ```
@@ -62,26 +97,262 @@ export const tags = ['list view'];
 ```tsx render
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
+import {Text} from 'react-aria-components';
+
+///- begin collapse -///
+let images = [
+  {
+    id: "8SXaMMWCTGc",
+    title: "A Ficus Lyrata Leaf",
+    user: "Clay Banks",
+    image: "https://images.unsplash.com/photo-1580133318324-f2f76d987dd8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "pYjCqqDEOFo",
+    title: "Italian beach",
+    user: "Alan Bajura",
+    image: "https://images.unsplash.com/photo-1737100522891-e8946ac97fd1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "CF-2tl6MQj0",
+    title: "Forest road",
+    user: "Artem Stoliar",
+    image: "https://images.unsplash.com/photo-1738249034651-1896f689be58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 300
+  },
+  {
+    id: "OW97sLU0cOw",
+    title: "Snowy Aurora",
+    user: "Janosch Diggelmann",
+    image: "https://images.unsplash.com/photo-1738189669835-61808a9d5981?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "WfeLZ02IhkM",
+    title: "A blue and white firework is seen from above",
+    user: "Janosch Diggelmann",
+    image: "https://images.unsplash.com/photo-1738168601630-1c1f3ef5a95a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 300
+  },
+  {
+    id: "w1GpST72Bg8",
+    title: "Snowy Mountain",
+    user: "Daniil Silantev",
+    image: "https://images.unsplash.com/photo-1738165170747-ecc6e3a4d97c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 267
+  },
+  {
+    id: "0iN0KIt6lYI",
+    title: "Pastel Sunset",
+    user: "Marek Piwnicki",
+    image: "https://images.unsplash.com/photo-1737917818689-f3b3708de5d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 640
+  },
+  {
+    id: "-mFKPfXXUG0",
+    title: "Snowy Birches",
+    user: "Simon Berger",
+    image: "https://images.unsplash.com/photo-1737972970322-cc2e255021bd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 400
+  },
+  {
+    id: "y36Nj_edtRE",
+    title: "Snowy Lake Reflections",
+    user: "Daniel Seßler",
+    image: "https://images.unsplash.com/photo-1736018545810-3de4c7ec25fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "NvBV-YwlgBw",
+    title: "Rocky night sky",
+    user: "Dennis Haug",
+    image: "https://images.unsplash.com/photo-1735528655501-cf671a3323c3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 400
+  },
+  {
+    id: "UthQdrPFxt0",
+    title: "A pine tree covered in snow in a forest",
+    user: "Anita Austvika",
+    image: "https://images.unsplash.com/photo-1737312905026-5dfdff1097bc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "2k74xaf8dfc",
+    title: "The sun shines through the trees in the forest",
+    user: "Joyce G",
+    image: "https://images.unsplash.com/photo-1736185597807-371cae1c7e4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "Yje5kgfvCm0",
+    title: "A blurry photo of a field of flowers",
+    user: "Eugene Golovesov",
+    image: "https://images.unsplash.com/photo-1736483065204-e55e62092780?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "G2bsj2LVttI",
+    title: "A foggy road lined with trees and grass",
+    user: "Ingmar H",
+    image: "https://images.unsplash.com/photo-1737903071772-4d20348b4d81?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 533
+  },
+  {
+    id: "ppyNBOkfiuY",
+    title: "A close up of a green palm tree",
+    user: "Junel Mujar",
+    image: "https://images.unsplash.com/photo-1736849544918-6ddb5cfc2c42?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 533
+  },
+  {
+    id: "UcWUMqIsld8",
+    title: "A green leaf floating on top of a body of water",
+    user: "Allec Gomes",
+    image: "https://images.unsplash.com/photo-1737559217439-a5703e9b65cb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "xHqOVq9w8OI",
+    title: "Leafy plants",
+    user: "Joshua Michaels",
+    image: "https://images.unsplash.com/photo-1563364664-399838d1394c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 266
+  },
+  {
+    id: "uWx3_XEc-Jw",
+    title: "A view of a mountain covered in fog",
+    user: "iuliu illes",
+    image: "https://images.unsplash.com/photo-1737403428945-c584529b7b17?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 298
+  },
+  {
+    id: "2_3lhGt8i-Y",
+    title: "A field with tall grass and fog in the background",
+    user: "Ingmar H",
+    image: "https://images.unsplash.com/photo-1737439987404-a3ee9fb95351?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "FV-__IOxb08",
+    title: "A close up of a wave on a sandy beach",
+    user: "Jonathan Borba",
+    image: "https://images.unsplash.com/photo-1726502102472-2108ef2a5cae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "_BS-vK3boOU",
+    title: "Desert textures",
+    user: "Braden Jarvis",
+    image: "https://images.unsplash.com/photo-1722359546494-8e3a00f88e95?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 561
+  },
+  {
+    id: "LjAcS9lJdBg",
+    title: "Tew Falls, waterfall, in Hamilton, Canada.",
+    user: "Andre Portolesi",
+    image: "https://images.unsplash.com/photo-1705021246536-aecfad654893?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 500
+  },
+  {
+    id: "hlj6xJG30FE",
+    title: "Cave light rays",
+    user: "Intricate Explorer",
+    image: "https://images.unsplash.com/photo-1631641551473-fbe46919289d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 267
+  },
+  {
+    id: "vMoZvKeZOhw",
+    title: "Salt Marshes, Isle of Harris, Scotland",
+    user: "Nils Leonhardt",
+    image: "https://images.unsplash.com/photo-1585951301678-8fd6f3b32c7e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "wCLCK9LDDjI",
+    title: "An aerial view of a snow covered forest",
+    user: "Lukas Hädrich",
+    image: "https://images.unsplash.com/photo-1737405555489-78b3755eaa81?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 267
+  },
+  {
+    id: "OdDx3_NB-Wk",
+    title: "Tall grass",
+    user: "Ingmar H",
+    image: "https://images.unsplash.com/photo-1737301519296-062cd324dbfa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "Gn-FOw1geFc",
+    title: "Larches on Maple Pass, Washington",
+    user: "Noelle",
+    image: "https://images.unsplash.com/photo-1737496538329-a59d10148a08?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "VhKJHOz2tJ8",
+    title: "Heart Nebula",
+    user: "Arnaud Girault",
+    image: "https://images.unsplash.com/photo-1737478598284-b9bc11cb1e9b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 266
+  },
+  {
+    id: "w5QmH_uqB0U",
+    title: "A pile of shells sitting on top of a sandy beach",
+    user: "Toa Heftiba",
+    image: "https://images.unsplash.com/photo-1725366351350-a64a1be919ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  }
+];
+///- end collapse -///
 
 function Example() {
-  let options = [
-    { id: 1, name: 'Aardvark' },
-    { id: 2, name: 'Cat' },
-    { id: 3, name: 'Dog' },
-    { id: 4, name: 'Kangaroo' },
-    { id: 5, name: 'Koala' },
-    { id: 6, name: 'Penguin' },
-    { id: 7, name: 'Snake' },
-    { id: 8, name: 'Turtle' },
-    { id: 9, name: 'Wombat' }
-  ];
-
   return (
-    /*- begin highlight -*/
-    <GridList aria-label="Animals" items={options} selectionMode="multiple">
-      {(item) => <GridListItem>{item.name}</GridListItem>}
+    <GridList
+      aria-label="Nature photos"
+      selectionMode="multiple"
+      layout="grid"
+      /*- begin highlight -*/
+      items={images}>
+      {/*- end highlight -*/}
+      {(image) => (
+        <GridListItem textValue={image.title}>
+          <img src={image.image} width={image.width} height={image.height} />
+          <Text>{image.title}</Text>
+          <Text slot="description">By {image.user}</Text>
+        </GridListItem>
+      )}
     </GridList>
-    /*- end highlight -*/
   );
 }
 ```
@@ -92,51 +363,48 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T
 
 ```tsx render
 "use client";
-import {Collection, GridListLoadMoreItem} from 'react-aria-components';
-import {GridList, GridListItem} from 'vanilla-starter/GridList';
+import {GridList, GridListItem, GridListLoadMoreItem} from 'vanilla-starter/GridList';
+import {Collection, Text} from 'react-aria-components';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
 import {useAsyncList} from '@react-stately/data';
 
-interface Character {
-  name: string
-}
-
 function AsyncLoadingExample() {
-  let list = useAsyncList<Character>({
-    async load({ signal, cursor }) {
-      if (cursor) {
-        cursor = cursor.replace(/^http:\/\//i, 'https://');
-      }
-
+  let list = useAsyncList<Item, number | null>({
+    async load({signal, cursor, items}) {
+      let page = cursor || 1;
       let res = await fetch(
-        cursor || `https://swapi.py4e.com/api/people/?search=`,
-        { signal }
+        `https://api.unsplash.com/topics/nature/photos?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
+        {signal}
       );
-      let json = await res.json();
-
-      return {
-        items: json.results,
-        cursor: json.next
-      };
+      let nextItems = await res.json();
+      // Filter duplicates which might be returned by the API.
+      let existingKeys = new Set(items.map(i => i.id));
+      nextItems = nextItems.filter(i => !existingKeys.has(i.id) && (i.description || i.alt_description));
+      return {items: nextItems, cursor: nextItems.length ? page + 1 : null};
     }
   });
 
   return (
     <GridList
-      aria-label="Star Wars Characters"
+      aria-label="Nature photos"
+      layout="grid"
       selectionMode="multiple"
       renderEmptyState={() => (
         <ProgressCircle isIndeterminate aria-label="Loading..." />
       )}>
       <Collection items={list.items}>
-        {(item) => <GridListItem id={item.name}>{item.name}</GridListItem>}
+        {(item) => (
+          <GridListItem textValue={item.description || item.alt_description}>
+            <img src={item.urls.regular} width={item.width} height={item.height} />
+            <Text>{item.description || item.alt_description}</Text>
+            <Text slot="description">By {item.user.name}</Text>
+          </GridListItem>
+        )}
       </Collection>
       {/*- begin highlight -*/}
       <GridListLoadMoreItem
         onLoadMore={list.loadMore}
-        isLoading={list.loadingState === 'loadingMore'}>
-        <ProgressCircle isIndeterminate aria-label="Loading more..." />
-      </GridListLoadMoreItem>
+        isLoading={list.loadingState === 'loadingMore'} />
       {/*- end highlight -*/}
     </GridList>
   );
@@ -150,14 +418,89 @@ Use the `href` prop on a `<GridListItem>` to create a link. See the **client sid
 ```tsx render docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Links', selectionMode: 'multiple'}} wide
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
-
-<GridList/* PROPS */>
-  {/*- begin highlight -*/}
-  <GridListItem href="https://adobe.com/" target="_blank">Adobe</GridListItem>
-  {/*- end highlight -*/}
-  <GridListItem href="https://apple.com/" target="_blank">Apple</GridListItem>
-  <GridListItem href="https://google.com/" target="_blank">Google</GridListItem>
-  <GridListItem href="https://microsoft.com/" target="_blank">Microsoft</GridListItem>
+import {Text} from 'react-aria-components';
+
+///- begin collapse -///
+let images = [
+  {
+    id: "dxylfBs2Xzc",
+    title: "Tropical island",
+    image: "https://images.unsplash.com/photo-1757258632083-e9b8a5345047?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2MDYyMjY4NHw&ixlib=rb-4.1.0&q=80&w=1080",
+    width: 5464,
+    height: 3640,
+    href: "https://unsplash.com/photos/aerial-view-of-a-tropical-island-coastline-with-clear-blue-water-dxylfBs2Xzc"
+  },
+  {
+    id: "xloDEfz0X7g",
+    title: "Bryce Canyon",
+    image: "https://images.unsplash.com/photo-1759872409669-05565abbb575?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2MDYyMjY4NHw&ixlib=rb-4.1.0&q=80&w=1080",
+    width: 4032,
+    height: 3024,
+    href: "https://unsplash.com/photos/orange-rock-formations-with-green-trees-and-blue-sky-xloDEfz0X7g"
+  },
+  {
+    id: "oTBY78rZcEU",
+    title: "Snowy river",
+    image: "https://images.unsplash.com/photo-1735577561802-380c3afb0146?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2MDYyMjY4NHw&ixlib=rb-4.1.0&q=80&w=1080",
+    width: 3264,
+    height: 4896,
+    href: "https://unsplash.com/photos/a-river-surrounded-by-snow-covered-trees-and-mountains-oTBY78rZcEU"
+  },
+  {
+    id: "Go811IU9a2g",
+    title: "Ocean waves",
+    image: "https://images.unsplash.com/photo-1759997604062-c31f20012ac1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2MDYyMjY4NHw&ixlib=rb-4.1.0&q=80&w=1080",
+    width: 5250,
+    height: 3500,
+    href: "https://unsplash.com/photos/a-large-wave-crashes-on-a-sandy-beach-Go811IU9a2g"
+  },
+  {
+    id: "B0mydNIV-sI",
+    title: "Mount Kazbek at Dawn",
+    image: "https://images.unsplash.com/photo-1760464864365-2188cd2afcde?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2MDYyMjY4NHw&ixlib=rb-4.1.0&q=80&w=1080",
+    width: 3947,
+    height: 5920,
+    href: "https://unsplash.com/photos/snow-capped-mountain-peak-illuminated-by-sunrise-B0mydNIV-sI"
+  },
+  {
+    id: "IHfbPJYsnsI",
+    title: "Snowy mountain sunrise",
+    image: "https://images.unsplash.com/photo-1759675795062-a657fcb278b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2MDYyMjY4NHw&ixlib=rb-4.1.0&q=80&w=1080",
+    width: 5794,
+    height: 3360,
+    href: "https://unsplash.com/photos/snowy-mountains-rise-from-the-ocean-at-sunrise-IHfbPJYsnsI"
+  },
+  {
+    id: "mmcSaJrRuCM",
+    title: "Mount Blum",
+    image: "https://images.unsplash.com/photo-1760301269447-fbc82b5a8d14?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2MDYyMjY4NHw&ixlib=rb-4.1.0&q=80&w=1080",
+    width: 5862,
+    height: 4000,
+    href: "https://unsplash.com/photos/majestic-mountain-peak-illuminated-by-sunrise-light-mmcSaJrRuCM"
+  },
+  {
+    id: "SSpEIUBRG9s",
+    title: "Sunset",
+    image: "https://images.unsplash.com/photo-1760199025509-2ecc68d39acd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTc2MDYyMjY4NHw&ixlib=rb-4.1.0&q=80&w=1080",
+    width: 6000,
+    height: 4000,
+    href: "https://unsplash.com/photos/silhouette-of-trees-and-plants-against-a-sunset-sky-SSpEIUBRG9s"
+  }
+];
+///- end collapse -///
+
+<GridList layout="grid" items={images}/* PROPS */>
+  {image => (
+    <GridListItem
+      /*- begin highlight -*/
+      href={image.href}
+      target="_blank"
+      /*- end highlight -*/
+      textValue={image.title}>
+      <img src={image.image} width={image.width} height={image.height} />
+      <Text>{image.title}</Text>
+    </GridListItem>
+  )}
 </GridList>
 ```
 
@@ -180,7 +523,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte
 
 ```tsx render docs={docs.exports.GridList} links={docs.links} props={['selectionMode', 'selectionBehavior', 'disabledBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide
 "use client";
-import type {Selection} from 'react-aria-components';
+import {type Selection, Text} from 'react-aria-components';
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
 import {useState} from 'react';
 
@@ -188,10 +531,11 @@ function Example(props) {
   let [selected, setSelected] = useState<Selection>(new Set());
 
   return (
-    <div>
+    <>
       <GridList
         {...props}
-        aria-label="Sandwich contents"
+        aria-label="Nature photos"
+        layout="grid"
         ///- begin highlight -///
         /* PROPS */
         selectedKeys={selected}
@@ -199,15 +543,59 @@ function Example(props) {
         onAction={key => alert(`Clicked ${key}`)}
         ///- end highlight -///
       >
-        <GridListItem id="lettuce">Lettuce</GridListItem>
-        <GridListItem id="tomato">Tomato</GridListItem>
-        <GridListItem id="cheese">Cheese</GridListItem>
-        <GridListItem id="tuna" isDisabled>Tuna Salad</GridListItem>
-        <GridListItem id="egg">Egg Salad</GridListItem>
-        <GridListItem id="ham">Ham</GridListItem>
+        <GridListItem id={1} textValue="Desert Sunset">
+          <img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
+          <Text>Desert Sunset</Text>
+          <Text slot="description">PNG • 2/3/2024</Text>
+        </GridListItem>
+        <GridListItem id={2} isDisabled textValue="Hiking Trail">
+          <img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+          <Text>Hiking Trail</Text>
+          <Text slot="description">JPEG • 1/10/2022</Text>
+        </GridListItem>
+        <GridListItem id={3} textValue="Lion">
+          <img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
+          <Text>Lion</Text>
+          <Text slot="description">JPEG • 8/28/2021</Text>
+        </GridListItem>
+        <GridListItem id={4} textValue="Mountain Sunrise">
+          <img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+          <Text>Mountain Sunrise</Text>
+          <Text slot="description">PNG • 3/15/2015</Text>
+        </GridListItem>
+        <GridListItem id={5} textValue="Giraffe tongue">
+          <img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+          <Text>Giraffe tongue</Text>
+          <Text slot="description">PNG • 11/27/2019</Text>
+        </GridListItem>
+        <GridListItem id={6} textValue="Golden Hour">
+          <img src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} />
+          <Text>Golden Hour</Text>
+          <Text slot="description">WEBP • 7/24/2024</Text>
+        </GridListItem>
+        <GridListItem id={7} textValue="Architecture">
+          <img src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
+          <Text>Architecture</Text>
+          <Text slot="description">PNG • 12/24/2016</Text>
+        </GridListItem>
+        <GridListItem id={8} textValue="Peeking leopard">
+          <img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
+          <Text>Peeking leopard</Text>
+          <Text slot="description">JPEG • 3/2/2016</Text>
+        </GridListItem>
+        <GridListItem id={9} textValue="Roofs">
+          <img src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
+          <Text>Roofs</Text>
+          <Text slot="description">JPEG • 4/24/2025</Text>
+        </GridListItem>
+        <GridListItem id={10} textValue="Half Dome Deer">
+          <img src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={990} />
+          <Text>Half Dome Deer</Text>
+          <Text slot="description">DNG • 8/28/2018</Text>
+        </GridListItem>
       </GridList>
       <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -220,22 +608,261 @@ GridList supports drag and drop interactions when the `dragAndDropHooks` prop is
 "use client";
 import {useListData} from 'react-stately';
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
-import {useDragAndDrop} from 'react-aria-components';
+import {useDragAndDrop, Text} from 'react-aria-components';
+
+///- begin collapse -///
+let images = [
+  {
+    id: "8SXaMMWCTGc",
+    title: "A Ficus Lyrata Leaf in the sunlight (2/2) (IG: @clay.banks)",
+    user: "Clay Banks",
+    image: "https://images.unsplash.com/photo-1580133318324-f2f76d987dd8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "pYjCqqDEOFo",
+    title: "beach of Italy",
+    user: "alan bajura",
+    image: "https://images.unsplash.com/photo-1737100522891-e8946ac97fd1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "CF-2tl6MQj0",
+    title: "A winding road in the middle of a forest",
+    user: "Artem Stoliar",
+    image: "https://images.unsplash.com/photo-1738249034651-1896f689be58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 300
+  },
+  {
+    id: "OW97sLU0cOw",
+    title: "A green and purple aurora over a snow covered forest",
+    user: "Janosch Diggelmann",
+    image: "https://images.unsplash.com/photo-1738189669835-61808a9d5981?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "WfeLZ02IhkM",
+    title: "A blue and white firework is seen from above",
+    user: "Janosch Diggelmann",
+    image: "https://images.unsplash.com/photo-1738168601630-1c1f3ef5a95a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 300
+  },
+  {
+    id: "w1GpST72Bg8",
+    title: "A snow covered mountain with a sky background",
+    user: "Daniil Silantev",
+    image: "https://images.unsplash.com/photo-1738165170747-ecc6e3a4d97c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 267
+  },
+  {
+    id: "0iN0KIt6lYI",
+    title: "\"Pastel Sunset\"",
+    user: "Marek Piwnicki",
+    image: "https://images.unsplash.com/photo-1737917818689-f3b3708de5d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 640
+  },
+  {
+    id: "-mFKPfXXUG0",
+    title: "Leave the weight behind! You must make yourself light to strive upwards — to reach the light. (A serene winter landscape featuring a dense collection of bare, white trees.)",
+    user: "Simon Berger",
+    image: "https://images.unsplash.com/photo-1737972970322-cc2e255021bd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 400
+  },
+  {
+    id: "MOk6URQ28R4",
+    title: "A snow covered tree with a sky background",
+    user: "Daniil Silantev",
+    image: "https://images.unsplash.com/photo-1738081359113-a7a33c509cf9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "y36Nj_edtRE",
+    title: "A lake surrounded by trees covered in snow",
+    user: "Daniel Seßler",
+    image: "https://images.unsplash.com/photo-1736018545810-3de4c7ec25fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "NvBV-YwlgBw",
+    title: "The night sky with stars above a rock formation",
+    user: "Dennis Haug",
+    image: "https://images.unsplash.com/photo-1735528655501-cf671a3323c3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 400
+  },
+  {
+    id: "UthQdrPFxt0",
+    title: "A pine tree covered in snow in a forest",
+    user: "Anita Austvika",
+    image: "https://images.unsplash.com/photo-1737312905026-5dfdff1097bc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "2k74xaf8dfc",
+    title: "The sun shines through the trees in the forest",
+    user: "Joyce G",
+    image: "https://images.unsplash.com/photo-1736185597807-371cae1c7e4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "Yje5kgfvCm0",
+    title: "A blurry photo of a field of flowers",
+    user: "Eugene Golovesov",
+    image: "https://images.unsplash.com/photo-1736483065204-e55e62092780?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "G2bsj2LVttI",
+    title: "A foggy road lined with trees and grass",
+    user: "Ingmar H",
+    image: "https://images.unsplash.com/photo-1737903071772-4d20348b4d81?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 533
+  },
+  {
+    id: "ppyNBOkfiuY",
+    title: "A close up of a green palm tree",
+    user: "Junel Mujar",
+    image: "https://images.unsplash.com/photo-1736849544918-6ddb5cfc2c42?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 533
+  },
+  {
+    id: "UcWUMqIsld8",
+    title: "A green leaf floating on top of a body of water",
+    user: "Allec Gomes",
+    image: "https://images.unsplash.com/photo-1737559217439-a5703e9b65cb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "xHqOVq9w8OI",
+    title: "green-leafed plant",
+    user: "Joshua Michaels",
+    image: "https://images.unsplash.com/photo-1563364664-399838d1394c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 266
+  },
+  {
+    id: "uWx3_XEc-Jw",
+    title: "A view of a mountain covered in fog",
+    user: "iuliu illes",
+    image: "https://images.unsplash.com/photo-1737403428945-c584529b7b17?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 298
+  },
+  {
+    id: "2_3lhGt8i-Y",
+    title: "A field with tall grass and fog in the background",
+    user: "Ingmar H",
+    image: "https://images.unsplash.com/photo-1737439987404-a3ee9fb95351?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "FV-__IOxb08",
+    title: "A close up of a wave on a sandy beach",
+    user: "Jonathan Borba",
+    image: "https://images.unsplash.com/photo-1726502102472-2108ef2a5cae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "_BS-vK3boOU",
+    title: "Desert textures",
+    user: "Braden Jarvis",
+    image: "https://images.unsplash.com/photo-1722359546494-8e3a00f88e95?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 561
+  },
+  {
+    id: "LjAcS9lJdBg",
+    title: "Tew Falls, waterfall, in Hamilton, Canada.",
+    user: "Andre Portolesi",
+    image: "https://images.unsplash.com/photo-1705021246536-aecfad654893?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 500
+  },
+  {
+    id: "hlj6xJG30FE",
+    title: "Find me on Instagram! @intricateexplorer",
+    user: "Intricate Explorer",
+    image: "https://images.unsplash.com/photo-1631641551473-fbe46919289d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 267
+  },
+  {
+    id: "vMoZvKeZOhw",
+    title: "Salt Marshes, Isle of Harris, Scotland by Nils Leonhardt. Visit my website: https://nilsleonhardt.com/storytelling-harris/ Instagram: @am.basteir",
+    user: "Nils Leonhardt",
+    image: "https://images.unsplash.com/photo-1585951301678-8fd6f3b32c7e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "wCLCK9LDDjI",
+    title: "An aerial view of a snow covered forest",
+    user: "Lukas Hädrich",
+    image: "https://images.unsplash.com/photo-1737405555489-78b3755eaa81?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 267
+  },
+  {
+    id: "OdDx3_NB-Wk",
+    title: "A close up of a tall grass with a sky in the background",
+    user: "Ingmar H",
+    image: "https://images.unsplash.com/photo-1737301519296-062cd324dbfa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "Gn-FOw1geFc",
+    title: "Larches on Maple Pass, Washington",
+    user: "noelle",
+    image: "https://images.unsplash.com/photo-1737496538329-a59d10148a08?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    id: "VhKJHOz2tJ8",
+    title: "IC 1805 La nébuleuse du coeur",
+    user: "arnaud girault",
+    image: "https://images.unsplash.com/photo-1737478598284-b9bc11cb1e9b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 266
+  },
+  {
+    id: "w5QmH_uqB0U",
+    title: "A pile of shells sitting on top of a sandy beach",
+    user: "Toa Heftiba",
+    image: "https://images.unsplash.com/photo-1725366351350-a64a1be919ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  }
+];
+///- end collapse -///
 
 function Example() {
   let list = useListData({
-    initialItems: [
-      {id: 1, name: 'Adobe Photoshop'},
-      {id: 2, name: 'Adobe XD'},
-      {id: 3, name: 'Adobe Dreamweaver'},
-      {id: 4, name: 'Adobe InDesign'},
-      {id: 5, name: 'Adobe Connect'}
-    ]
+    initialItems: images
   });
 
   ///- begin highlight -///
   let {dragAndDropHooks} = useDragAndDrop({
-    getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).name})),
+    getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).title})),
     onReorder(e) {
       if (e.target.dropPosition === 'before') {
         list.moveBefore(e.target.key, e.keys);
@@ -249,13 +876,20 @@ function Example() {
   return (
     <GridList
       aria-label="Reorderable list"
+      layout="grid"
       selectionMode="multiple"
       items={list.items}
       ///- begin highlight -///
       dragAndDropHooks={dragAndDropHooks}
       ///- end highlight -///
     >
-      {item => <GridListItem>{item.name}</GridListItem>}
+      {image => (
+        <GridListItem textValue={image.title}>
+          <img src={image.image} width={image.width} height={image.height} />
+          <Text>{image.title}</Text>
+          <Text slot="description">{image.user}</Text>
+        </GridListItem>
+      )}
     </GridList>
   );
 }
diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
index 3e1c7218b4e..b39702a53a1 100644
--- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
@@ -15,7 +15,7 @@ export const tags = ['options'];
 <PageDescription>{docs.exports.ListBox.description}</PageDescription>
 
 <ExampleSwitcher>
-  ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionMode']} type="vanilla" files={["starters/docs/src/ListBox.tsx", "starters/docs/src/ListBox.css"]}
+  ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionMode']} initialProps={{selectionMode: 'multiple'}} type="vanilla" files={["starters/docs/src/ListBox.tsx", "starters/docs/src/ListBox.css"]}
   "use client";
   import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
 
@@ -29,7 +29,7 @@ export const tags = ['options'];
   </ListBox>
   ```
 
-  ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionMode']} type="tailwind" files={["starters/tailwind/src/ListBox.tsx"]}
+  ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionMode']} initialProps={{selectionMode: 'multiple'}} type="tailwind" files={["starters/tailwind/src/ListBox.tsx"]}
   "use client";
   import {ListBox, ListBoxItem} from 'tailwind-starter/ListBox';
 
@@ -145,9 +145,9 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T
 
 ```tsx render
 "use client";
-import {Collection, ListBoxLoadMoreItem} from 'react-aria-components';
-import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
+import {ListBox, ListBoxItem, ListBoxLoadMoreItem} from 'vanilla-starter/ListBox';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
+import {Collection} from 'react-aria-components';
 import {useAsyncList} from 'react-stately';
 
 interface Character {
@@ -183,9 +183,7 @@ function AsyncLoadingExample() {
       {/*- begin highlight -*/}
       <ListBoxLoadMoreItem
         onLoadMore={list.loadMore}
-        isLoading={list.loadingState === 'loadingMore'}>
-        <ProgressCircle isIndeterminate aria-label="Loading more..." />
-      </ListBoxLoadMoreItem>
+        isLoading={list.loadingState === 'loadingMore'} />
       {/*- end highlight -*/}
     </ListBox>
   );
@@ -271,52 +269,61 @@ Use the `layout` and `orientation` props to create horizontal and vertical stack
 import {ListBox, ListBoxItem, Text} from 'react-aria-components';
 
 ///- begin collapse -///
-let albums = [
+let planets = [
   {
     id: 1,
-    image: 'https://images.unsplash.com/photo-1593958812614-2db6a598c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGlzY298ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
-    title: 'Euphoric Echoes',
-    artist: 'Luna Solstice'
+    title: 'Mercury',
+    description: 'A year lasts 88 days'
   },
   {
     id: 2,
-    image: 'https://images.unsplash.com/photo-1601042879364-f3947d3f9c16?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmVvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=900&q=60',
-    title: 'Neon Dreamscape',
-    artist: 'Electra Skyline'
+    title: 'Venus',
+    description: 'Spins backwards!'
   },
   {
     id: 3,
-    image: 'https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHNwYWNlfGVufDB8fDB8fHww&auto=format&fit=crop&w=900&q=60',
-    title: 'Cosmic Serenade',
-    artist: 'Orion\'s Symphony'
+    title: 'Earth',
+    description: 'Only planet with life'
   },
   {
     id: 4,
-    image: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bXVzaWN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
-    title: 'Melancholy Melodies',
-    artist: 'Violet Mistral'
+    title: 'Mars',
+    description: 'Has the tallest volcano'
   },
   {
     id: 5,
-    image: 'https://images.unsplash.com/photo-1608433319511-dfe8ea4cbd3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGJlYXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
-    title: 'Rhythmic Illusions',
-    artist: 'Mirage Beats'
+    title: 'Jupiter',
+    description: 'Can fit 1,300 Earths'
+  },
+  {
+    id: 6,
+    title: 'Saturn',
+    description: 'Rings made of ice'
+  },
+  {
+    id: 7,
+    title: 'Uranus',
+    description: 'Rolls on its side'
+  },
+  {
+    id: 8,
+    title: 'Neptune',
+    description: 'Fastest winds in space'
   }
 ];
 ///- end collapse -///
 
 <ListBox
-  aria-label="Albums"
+  aria-label="Planets"
   /*- begin highlight -*/
   /* PROPS */
   /*- end highlight -*/
-  items={albums}
+  items={planets}
   selectionMode="multiple">
   {item => (
     <ListBoxItem textValue={item.title}>
-      <img src={item.image} alt="" />
       <Text slot="label">{item.title}</Text>
-      <Text slot="description">{item.artist}</Text>
+      <Text slot="description">{item.description}</Text>
     </ListBoxItem>
   )}
 </ListBox>
diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx
index bbfcde42091..e58ab58f55a 100644
--- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx
@@ -15,29 +15,61 @@ export const tags = ['dropdown'];
 <ExampleSwitcher>
   ```tsx render type="vanilla" files={["starters/docs/src/Menu.tsx", "starters/docs/src/Menu.css"]}
   "use client";
-  import {MenuTrigger, Menu, Popover, SubmenuTrigger, MenuSection, Separator} from 'react-aria-components';
+  import {MenuTrigger, SubmenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu';
+  import {Separator, Text, Keyboard} from 'react-aria-components';
+  import {Popover} from 'vanilla-starter/Popover';
   import {Button} from 'vanilla-starter/Button';
-  import {MenuItem} from 'vanilla-starter/Menu';
+  import {Button} from 'vanilla-starter/Button';
+  import {Ellipsis, FolderOpen, Pencil, Copy, Trash, Share, Mail, Smartphone, Instagram} from 'lucide-react';
 
   <MenuTrigger>
-    <Button aria-label="Actions">☰</Button>
+    <Button aria-label="Actions">
+      <Ellipsis size={18} />
+    </Button>
     <Popover>
       <Menu>
-        <MenuItem onAction={() => alert('open')}>Open</MenuItem>
-        <MenuItem onAction={() => alert('rename')}>Rename…</MenuItem>
-        <MenuItem onAction={() => alert('duplicate')}>Duplicate</MenuItem>
-        <MenuItem onAction={() => alert('share')}>Share…</MenuItem>
-        <SubmenuTrigger>
-          <MenuItem>Share</MenuItem>
-          <Popover>
+        <MenuSection>
+          <MenuItem onAction={() => alert('open')}>
+            <FolderOpen />
+            <Text slot="label">Open</Text>
+            <Keyboard>⌘O</Keyboard>
+          </MenuItem>
+          <MenuItem onAction={() => alert('rename')}>
+            <Pencil />
+            <Text slot="label">Rename…</Text>
+            <Keyboard>⌘R</Keyboard>
+          </MenuItem>
+          <MenuItem onAction={() => alert('duplicate')}>
+            <Copy />
+            <Text slot="label">Duplicate</Text>
+            <Keyboard>⌘D</Keyboard>
+          </MenuItem>
+          <MenuItem onAction={() => alert('delete')}>
+            <Trash />
+            <Text slot="label">Delete…</Text>
+            <Keyboard>⌘⌫</Keyboard>
+          </MenuItem>
+          <SubmenuTrigger>
+            <MenuItem>
+              <Share />
+              <Text slot="label">Share</Text>
+            </MenuItem>
             <Menu>
-              <MenuItem>Email</MenuItem>
-              <MenuItem>SMS</MenuItem>
-              <MenuItem>Instagram</MenuItem>
+              <MenuItem>
+                <Mail />
+                <Text slot="label">Email</Text>
+              </MenuItem>
+              <MenuItem>
+                <Smartphone />
+                <Text slot="label">SMS</Text>
+              </MenuItem>
+              <MenuItem>
+                <Instagram />
+                <Text slot="label">Instagram</Text>
+              </MenuItem>
             </Menu>
-          </Popover>
-        </SubmenuTrigger>
-        <MenuItem onAction={() => alert('delete')}>Delete…</MenuItem>
+          </SubmenuTrigger>
+        </MenuSection>
         <Separator />
         <MenuSection selectionMode="multiple" defaultSelectedKeys={['files']}>
           <MenuItem id="files">Show files</MenuItem>
@@ -50,20 +82,19 @@ export const tags = ['dropdown'];
 
   ```tsx render type="tailwind" files={["starters/tailwind/src/Menu.tsx"]}
   "use client";
-  import {MenuTrigger, SubmenuTrigger} from 'react-aria-components';
-  import {Menu, MenuItem, MenuSection, MenuSeparator} from 'tailwind-starter/Menu';
+  import {MenuTrigger, SubmenuTrigger, Menu, MenuItem, MenuSection, MenuSeparator} from 'tailwind-starter/Menu';
   import {Button} from 'tailwind-starter/Button';
   import {MoreHorizontal} from 'lucide-react';
 
   <MenuTrigger>
-    <Button aria-label="Actions" variant="icon">
+    <Button aria-label="Actions" variant="secondary">
       <MoreHorizontal className="w-5 h-5" />
     </Button>
     <Menu>
       <MenuItem onAction={() => alert('open')}>Open</MenuItem>
       <MenuItem onAction={() => alert('rename')}>Rename…</MenuItem>
       <MenuItem onAction={() => alert('duplicate')}>Duplicate</MenuItem>
-      <MenuItem onAction={() => alert('share')}>Share…</MenuItem>
+      <MenuItem onAction={() => alert('delete')}>Delete…</MenuItem>
       <SubmenuTrigger>
         <MenuItem>Share</MenuItem>
         <Menu>
@@ -72,7 +103,6 @@ export const tags = ['dropdown'];
           <MenuItem>Instagram</MenuItem>
         </Menu>
       </SubmenuTrigger>
-      <MenuItem onAction={() => alert('delete')}>Delete…</MenuItem>
       <MenuSeparator />
       <MenuSection selectionMode="multiple" defaultSelectedKeys={['files']}>
         <MenuItem id="files">Show files</MenuItem>
@@ -90,7 +120,9 @@ export const tags = ['dropdown'];
 
 ```tsx render hideImports
 "use client";
-import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
+import {Popover} from 'vanilla-starter/Popover';
+import {Button} from 'vanilla-starter/Button';
 
 function Example() {
   let items = [
@@ -126,7 +158,10 @@ Use the `"label"` and `"description"` slots to separate primary and secondary co
 
 ```tsx render hideImports
 "use client";
-import {MenuTrigger, Menu, MenuItem, Text, Keyboard, Button, Popover} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
+import {Text, Keyboard} from 'react-aria-components';
+import {Popover} from 'vanilla-starter/Popover';
+import {Button} from 'vanilla-starter/Button';
 
 <MenuTrigger>
   <Button>Permissions</Button>
@@ -165,7 +200,10 @@ Use the `<MenuSection>` component to group options. A `<Header>` element may als
 
 ```tsx render hideImports
 "use client";
-import {MenuTrigger, Menu, MenuItem, MenuSection, Header, Button, Popover} from 'react-aria-components';
+import {Header} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu';
+import {Popover} from 'vanilla-starter/Popover';
+import {Button} from 'vanilla-starter/Button';
 
 <MenuTrigger>
   <Button>Publish</Button>
@@ -196,8 +234,9 @@ Wrap a `<MenuItem>` and a `<Popover>` with a `<SubmenuTrigger>` to create a subm
 
 ```tsx render hideImports
 "use client";
-import {MenuTrigger, Menu, Popover, SubmenuTrigger, Button, Popover} from 'react-aria-components';
-import {MenuItem} from 'vanilla-starter/Menu';
+import {MenuTrigger, SubmenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu';
+import {Popover} from 'vanilla-starter/Popover';
+import {Button} from 'vanilla-starter/Button';
 
 <MenuTrigger>
   <Button>Actions</Button>
@@ -215,12 +254,10 @@ import {MenuItem} from 'vanilla-starter/Menu';
           <MenuItem>Instagram</MenuItem>
           <SubmenuTrigger>
             <MenuItem>Email</MenuItem>
-            <Popover>
-              <Menu>
-                <MenuItem>Work</MenuItem>
-                <MenuItem>Personal</MenuItem>
-              </Menu>
-            </Popover>
+            <Menu>
+              <MenuItem>Work</MenuItem>
+              <MenuItem>Personal</MenuItem>
+            </Menu>
           </SubmenuTrigger>
         </Menu>
       </SubmenuTrigger>
@@ -235,7 +272,10 @@ Separators may be added between menu items or sections in order to create non-la
 
 ```tsx render hideImports
 "use client";
-import {MenuTrigger, Menu, MenuItem, Separator, Button, Popover} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu';
+import {Separator} from 'react-aria-components';
+import {Popover} from 'vanilla-starter/Popover';
+import {Button} from 'vanilla-starter/Button';
 
 <MenuTrigger>
   <Button>Actions</Button>
@@ -263,7 +303,9 @@ Use the `href` prop on a `<MenuItem>` to create a link. See the **client side ro
 
 ```tsx render hideImports
 "use client";
-import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu';
+import {Popover} from 'vanilla-starter/Popover';
+import {Button} from 'vanilla-starter/Button';
 
 <MenuTrigger>
   <Button>Links</Button>
@@ -298,11 +340,11 @@ function Example() {
   return (
     <MenuTrigger>
       <Button>Add tag...</Button>
-      <Popover>
+      <Popover style={{display: 'flex', flexDirection: 'column'}}>
         {/*- begin highlight -*/}
         <Autocomplete filter={contains}>
-          <SearchField label="Search tags" autoFocus />
-          <Menu>
+          <SearchField aria-label="Search tags" placeholder="Search tags" autoFocus style={{margin: 4}} />
+          <Menu style={{flex: 1}}>
             {/*- end highlight -*/}
             <MenuItem>News</MenuItem>
             <MenuItem>Travel</MenuItem>
@@ -328,7 +370,9 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte
 ```tsx render docs={docs.exports.Menu} links={docs.links} props={['selectionMode', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide align="start"
 "use client";
 import type {Selection} from 'react-aria-components';
-import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
+import {Button} from 'vanilla-starter/Button';
+import {Popover} from 'vanilla-starter/Popover';
 import {useState} from 'react';
 
 function Example(props) {
@@ -368,7 +412,10 @@ Each section in a menu may have independent selection states by passing `selecti
 ```tsx render hideImports
 "use client";
 import type {Selection} from 'react-aria-components';
-import {MenuTrigger, Menu, MenuItem, MenuSection, Header, Button, Popover} from 'react-aria-components';
+import {Header} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu';
+import {Button} from 'vanilla-starter/Button';
+import {Popover} from 'vanilla-starter/Popover';
 import {useState} from 'react';
 
 function Example() {
@@ -417,7 +464,10 @@ function Example() {
 
 ```tsx render hideImports
 "use client";
-import {MenuTrigger, Menu, MenuItem, Button, Popover, Pressable} from 'react-aria-components';
+import {Pressable} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
+import {Button} from 'vanilla-starter/Button';
+import {Popover} from 'vanilla-starter/Popover';
 
 <MenuTrigger>
   {/*- begin highlight -*/}
@@ -453,10 +503,16 @@ Use `trigger="longPress"` to open the menu on long press instead of on click/tap
 
 ```tsx render hideImports
 "use client";
-import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-components';
+import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
+import {Button} from 'vanilla-starter/Button';
+import {Popover} from 'vanilla-starter/Popover';
+import {ChevronDown} from 'lucide-react';
 
 <MenuTrigger trigger="longPress">
-  <Button onPress={() => alert('crop')}>Crop ▼</Button>
+  <Button onPress={() => alert('crop')}>
+    <span>Crop</span>
+    <ChevronDown size={18} />
+  </Button>
   <Popover>
     <Menu>
       <MenuItem>Rotate</MenuItem>
diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx
index e2f5b0ca18b..9b317e3048f 100644
--- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx
@@ -19,8 +19,9 @@ export const tags = ['dialog', 'popup', 'overlay'];
   import {DialogTrigger, Heading} from 'react-aria-components';
   import {Modal} from 'vanilla-starter/Modal';
   import {Dialog} from 'vanilla-starter/Dialog';
-  import {Button} from 'vanilla-starter/Button';
+  import {Form} from 'vanilla-starter/Form';
   import {TextField} from 'vanilla-starter/TextField';
+  import {Button} from 'vanilla-starter/Button';
 
   function Example(props) {
     return (
@@ -28,12 +29,16 @@ export const tags = ['dialog', 'popup', 'overlay'];
         <Button>Sign up…</Button>
         <Modal {...props}/* PROPS */>
           <Dialog>
-            <form>
-              <Heading slot="title">Sign up</Heading>
-              <TextField autoFocus label="First Name" />
-              <TextField label="Last Name" />
-              <Button slot="close">Submit</Button>
-            </form>
+            <Heading slot="title">Subscribe to our newsletter</Heading>
+            <p>Enter your information to subscribe to our newsletter and receive updates about new features and announcements.</p>
+            <Form>
+              <TextField autoFocus label="Name" placeholder="Enter your full name" />
+              <TextField label="Email" placeholder="Enter your email" />
+              <div style={{display: 'flex', gap: 8, alignSelf: 'end'}}>
+                <Button slot="close" variant="secondary">Cancel</Button>
+                <Button slot="close">Subscribe</Button>
+              </div>
+            </Form>
           </Dialog>
         </Modal>
       </DialogTrigger>
@@ -46,8 +51,9 @@ export const tags = ['dialog', 'popup', 'overlay'];
   import {DialogTrigger, Heading} from 'react-aria-components';
   import {Modal} from 'tailwind-starter/Modal';
   import {Dialog} from 'tailwind-starter/Dialog';
-  import {Button} from 'tailwind-starter/Button';
+  import {Form} from 'tailwind-starter/Form';
   import {TextField} from 'tailwind-starter/TextField';
+  import {Button} from 'tailwind-starter/Button';
 
   function Example(props) {
     return (
@@ -55,12 +61,12 @@ export const tags = ['dialog', 'popup', 'overlay'];
         <Button>Sign up…</Button>
         <Modal {...props}/* PROPS */>
           <Dialog>
-            <form>
+            <Form>
               <Heading slot="title">Sign up</Heading>
               <TextField autoFocus label="First Name" />
               <TextField label="Last Name" />
-              <Button slot="close">Submit</Button>
-            </form>
+              <Button slot="close" className="self-end">Submit</Button>
+            </Form>
           </Dialog>
         </Modal>
       </DialogTrigger>
diff --git a/packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx b/packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx
index 68b6279cc9f..84c57a9e83b 100644
--- a/packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx
@@ -37,7 +37,7 @@ export function MonthDropdown(): ReactElement {
   return (
     <Select
       aria-label="Month"
-      style={{flex: 1}}
+      style={{flex: 1, width: 'fit-content'}}
       selectedKey={state.focusedDate.month}
       onSelectionChange={key => {
         if (typeof key === 'number') {
diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
index c5370d5e72c..33e2dba7671 100644
--- a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx
@@ -116,7 +116,7 @@ Use the `name` prop to submit the raw number value (not a formatted string) to t
 "use client";
 import {NumberField} from 'vanilla-starter/NumberField';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <NumberField label="Width" name="width" isRequired />
diff --git a/packages/dev/s2-docs/pages/react-aria/PokemonGridList.tsx b/packages/dev/s2-docs/pages/react-aria/PokemonGridList.tsx
index e6a12b4d67e..d41fd63fd5f 100644
--- a/packages/dev/s2-docs/pages/react-aria/PokemonGridList.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/PokemonGridList.tsx
@@ -1,6 +1,6 @@
 'use client';
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
-import {DragAndDropHooks} from 'react-aria-components';
+import {DragAndDropHooks, Text} from 'react-aria-components';
 
 export interface Pokemon {
   id: number,
@@ -32,10 +32,14 @@ export function PokemonGridList(props: PokemonGridListProps) {
       selectionMode="multiple"
       items={items}
       renderEmptyState={() => 'Drop items here'}
-      dragAndDropHooks={dragAndDropHooks}>
+      dragAndDropHooks={dragAndDropHooks}
+      data-size="small"
+      style={{border: '1px solid var(--border-color'}}>
       {(item) => (
         <GridListItem textValue={item.name}>
-          <strong>{item.name}</strong> – <em>{item.type}</em>
+          <img src={`https://img.pokemondb.net/sprites/home/normal/2x/avif/${item.name.toLowerCase()}.avif`} />
+          <Text>{item.name}</Text>
+          <Text slot="description">{item.type}</Text>
         </GridListItem>
       )}
     </GridList>
diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx
index be564168bc6..b96e7c50461 100644
--- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx
@@ -30,9 +30,11 @@ export const tags = ['popup', 'overlay'];
         </Button>
         {/*- begin focus -*/}
         <Popover {...props}/* PROPS */>
-          <Switch defaultSelected>Wi-Fi</Switch>
-          <Switch defaultSelected>Bluetooth</Switch>
-          <Switch>Mute</Switch>
+          <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+            <Switch defaultSelected>Wi-Fi</Switch>
+            <Switch defaultSelected>Bluetooth</Switch>
+            <Switch>Mute</Switch>
+          </div>
         </Popover>
         {/*- end focus -*/}
       </DialogTrigger>
@@ -51,11 +53,15 @@ export const tags = ['popup', 'overlay'];
   function Example(props) {
     return (
       <DialogTrigger>
-        <Button aria-label="Settings" variant="icon">
+        <Button aria-label="Settings" variant="secondary">
           <Settings2 size={20} />
         </Button>
         {/*- begin focus -*/}
-        <Popover/* PROPS */ className="p-4" {...props}>
+        <Popover
+          /* PROPS */
+          className="flex flex-col gap-2 p-4"
+          showArrow
+          {...props}>
           <Switch defaultSelected>Wi-Fi</Switch>
           <Switch defaultSelected>Bluetooth</Switch>
           <Switch>Mute</Switch>
@@ -82,8 +88,8 @@ import {Popover} from 'vanilla-starter/Popover';
     <span role="button">Custom trigger</span>
   </Pressable>
   {/*- end highlight -*/}
-  <Popover>
-    <p>This popover was triggered by a custom button.</p>
+  <Popover style={{padding: 16}}>
+    This popover was triggered by a custom button.
   </Popover>
 </DialogTrigger>
 ```
@@ -119,12 +125,13 @@ function Example() {
       <Button onPress={() => setOpen(true)}>Trigger</Button>
       <span ref={triggerRef} style={{paddingLeft: 12}}>Popover will be positioned relative to me</span>
       <Popover
+        style={{padding: 16}}
         /*- begin highlight -*/
         triggerRef={triggerRef}
         isOpen={isOpen}
         onOpenChange={setOpen}>
         {/*- end highlight -*/}
-        <div>I'm over here!</div>
+        I'm over here!
       </Popover>
     </div>
   );
diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
index 67de917d92d..c412c6dd29a 100644
--- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx
@@ -74,7 +74,7 @@ Use the `name` prop to submit the selected radio to the server. Set the `isRequi
 "use client";
 import {RadioGroup, Radio} from 'vanilla-starter/RadioGroup';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <RadioGroup
diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
index f8fd68b60c7..7d746d4392b 100644
--- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
@@ -202,8 +202,11 @@ Set the `visibleDuration` prop and render multiple `CalendarGrid` elements to di
 
 ```tsx render docs={docs.exports.RangeCalendar} links={docs.links} props={['visibleDuration', 'pageBehavior', 'firstDayOfWeek']} initialProps={{visibleDuration: {months: 2}}} wide
 "use client";
-import {RangeCalendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {RangeCalendar, Heading} from 'react-aria-components';
+import {CalendarGrid, CalendarCell} from 'vanilla-starter/RangeCalendar';
+import {Button} from 'vanilla-starter/Button';
 import {useDateFormatter} from 'react-aria';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 // TODO: move this into the starter example.
 function Example(props) {
@@ -219,18 +222,22 @@ function Example(props) {
       ///- begin highlight -///
       /* PROPS */
       ///- end highlight -///
-      style={{display: 'flex', gap: 30, overflow: 'auto'}}
+      style={{display: 'flex', gap: 12, overflow: 'auto'}}
     >
       {({state}) => (
         [...Array(props.visibleDuration.months).keys()].map(i => (
           <div key={i} style={{flex: 1}}>
-            <header>
+            <header style={{minHeight: 32}}>
               {i === 0 && 
-                <Button slot="previous">◀</Button>
+                <Button slot="previous" variant="quiet">
+                  <ChevronLeft />
+                </Button>
               }
-              <h2 style={{flex: 1, textAlign: 'center'}}>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))}</h2>
+              <Heading>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))}</Heading>
               {i === props.visibleDuration.months - 1 && 
-                <Button slot="next">▶</Button>
+                <Button slot="next" variant="quiet">
+                  <ChevronRight />
+                </Button>
               }
             </header>
             <CalendarGrid offset={{months: i}}>
@@ -283,19 +290,25 @@ You can also control the focused date via `CalendarStateContext`. This example s
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx', 'packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx']}
 "use client";
-import {RangeCalendar, CalendarGrid, CalendarCell} from 'react-aria-components';
+import {RangeCalendar} from 'react-aria-components';
+import {CalendarGrid, CalendarCell} from 'vanilla-starter/RangeCalendar';
 import {MonthDropdown} from './MonthDropdown';
 import {YearDropdown} from './YearDropdown';
 import {Button} from 'vanilla-starter/Button';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
 
 <RangeCalendar>
   <header style={{display: 'flex', gap: 4}}>
-    <Button slot="previous">◀</Button>
+    <Button slot="previous" variant="quiet">
+      <ChevronLeft />
+    </Button>
     {/*- begin highlight -*/}
     <MonthDropdown />
     <YearDropdown />
     {/*- end highlight -*/}
-    <Button slot="next">▶</Button>
+    <Button slot="next" variant="quiet">
+      <ChevronRight />
+    </Button>
   </header>
   <CalendarGrid>
     {(date) => <CalendarCell date={date} />}
diff --git a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
index 951c041678d..7a56fa880d8 100644
--- a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx
@@ -20,7 +20,7 @@ export const tags = ['input'];
     docs={vanillaDocs.exports.SearchField}
     links={vanillaDocs.links}
     props={['label', 'description', 'isDisabled']}
-    initialProps={{label: 'Search'}}
+    initialProps={{label: 'Search', placeholder: 'Search documents'}}
     type="vanilla"
     files={["starters/docs/src/SearchField.tsx", "starters/docs/src/SearchField.css"]} />
   <VisualExample
@@ -28,7 +28,7 @@ export const tags = ['input'];
     docs={vanillaDocs.exports.SearchField}
     links={vanillaDocs.links}
     props={['label', 'description', 'isDisabled']}
-    initialProps={{label: 'Search'}}
+    initialProps={{label: 'Search', placeholder: 'Search documents'}}
     type="tailwind"
     files={["starters/tailwind/src/SearchField.tsx", "starters/tailwind/src/index.css"]} />
 </ExampleSwitcher>
@@ -50,6 +50,7 @@ function Example() {
     <div>
       <SearchField
         label="Search"
+        placeholder="Search documents"
         ///- begin highlight -///
         value={search}
         onChange={setSearch}
@@ -72,7 +73,7 @@ Use the `name` prop to submit the text value to the server. Set the `isRequired`
 "use client";
 import {SearchField} from 'vanilla-starter/SearchField';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 function Example(props) {
   return (
@@ -80,6 +81,7 @@ function Example(props) {
       <SearchField
         {...props}
         label="Search"
+        placeholder="Search documents"
         ///- begin highlight -///
         name="search"
         /* PROPS */
diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx
index de2d08e1ebe..4ed87caf461 100644
--- a/packages/dev/s2-docs/pages/react-aria/Select.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx
@@ -51,8 +51,8 @@ The following example shows a dynamic collection of items, grouped into sections
 
 ```tsx render
 "use client";
-import {Select} from 'vanilla-starter/Select';
-import {ListBoxSection, ListBoxItem, Collection, Header} from 'react-aria-components';
+import {Select, SelectItem} from 'vanilla-starter/Select';
+import {ListBoxSection, Collection, Header} from 'react-aria-components';
 
 function Example() {
   /*- begin collapse -*/
@@ -86,7 +86,7 @@ function Example() {
         <ListBoxSection id={section.name}>
           <Header>{section.name}</Header>
           <Collection items={section.children}>
-            {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
+            {item => <SelectItem id={item.name}>{item.name}</SelectItem>}
           </Collection>
         </ListBoxSection>
       )}
@@ -101,8 +101,13 @@ function Example() {
 
 ```tsx render
 "use client";
-import {Select, Label, Button, SelectValue, Popover, ListBox, ListBoxItem, Autocomplete, useFilter} from 'react-aria-components';
+import {Select, Label, SelectValue, Autocomplete, useFilter} from 'react-aria-components';
+import {Button} from 'vanilla-starter/Button';
+import {SelectItem} from 'vanilla-starter/Select';
+import {Popover} from 'vanilla-starter/Popover';
+import {ListBox} from 'vanilla-starter/ListBox';
 import {SearchField} from 'vanilla-starter/SearchField';
+import {ChevronDown} from 'lucide-react';
 
 function Example() {
   let {contains} = useFilter({sensitivity: 'base'});
@@ -112,23 +117,23 @@ function Example() {
       <Label>Add tag...</Label>
       <Button>
         <SelectValue />
-        <span aria-hidden="true">▼</span>
+        <ChevronDown size={18} />
       </Button>
-      <Popover>
+      <Popover hideArrow>
         {/*- begin highlight -*/}
         <Autocomplete filter={contains}>
-          <SearchField label="Search tags" autoFocus />
+          <SearchField aria-label="Search tags" placeholder="Search tags" autoFocus style={{margin: 4}} />
           <ListBox>
             {/*- end highlight -*/}
-            <ListBoxItem>News</ListBoxItem>
-            <ListBoxItem>Travel</ListBoxItem>
-            <ListBoxItem>Shopping</ListBoxItem>
-            <ListBoxItem>Business</ListBoxItem>
-            <ListBoxItem>Entertainment</ListBoxItem>
-            <ListBoxItem>Food</ListBoxItem>
-            <ListBoxItem>Technology</ListBoxItem>
-            <ListBoxItem>Health</ListBoxItem>
-            <ListBoxItem>Science</ListBoxItem>
+            <SelectItem>News</SelectItem>
+            <SelectItem>Travel</SelectItem>
+            <SelectItem>Shopping</SelectItem>
+            <SelectItem>Business</SelectItem>
+            <SelectItem>Entertainment</SelectItem>
+            <SelectItem>Food</SelectItem>
+            <SelectItem>Technology</SelectItem>
+            <SelectItem>Health</SelectItem>
+            <SelectItem>Science</SelectItem>
           </ListBox>
         </Autocomplete>
       </Popover>
@@ -181,7 +186,7 @@ Use the `name` prop to submit the `id` of the selected item to the server. Set t
 "use client";
 import {Select, SelectItem} from 'vanilla-starter/Select';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';
 
 <Form>
   <Select
diff --git a/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css b/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css
index 27e53546519..c5d5a81b9a8 100644
--- a/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css
+++ b/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css
@@ -1,4 +1,4 @@
-.animated-GridListItem {
+.animated-ListBoxItem {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -26,7 +26,7 @@
     width: 3px;
     height: 20px;
     border-radius: 4px;
-    background: var(--gray-600);
+    background: var(--highlight-background);
     transition-property: translate, opacity;
     transition-duration: 250ms;
 
diff --git a/packages/dev/s2-docs/pages/react-aria/Switch.mdx b/packages/dev/s2-docs/pages/react-aria/Switch.mdx
index 8d0add22ee0..cfc8f56445d 100644
--- a/packages/dev/s2-docs/pages/react-aria/Switch.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Switch.mdx
@@ -69,7 +69,7 @@ Use the `name` and `value` props to submit the switch to the server. See the For
 "use client";
 import {Switch} from 'vanilla-starter/Switch';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';
 
 <Form>
   {/*- begin highlight -*/}
diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx
index d1edbdb9d86..74556365ad2 100644
--- a/packages/dev/s2-docs/pages/react-aria/Table.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx
@@ -16,8 +16,7 @@ export const tags = ['data', 'grid'];
 <ExampleSwitcher>
   ```tsx render docs={docs.exports.Table} links={docs.links} props={['selectionMode']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple'}} type="vanilla" files={["starters/docs/src/Table.tsx", "starters/docs/src/Table.css"]}
   "use client";
-  import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-  import {TableBody, Cell} from 'react-aria-components';
+  import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
 
   <Table/* PROPS */>
     <TableHeader>
@@ -95,8 +94,7 @@ In this example, both the columns and the rows are provided to the table via a r
 
 ```tsx render
 "use client";
-import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-import {TableBody, Cell} from 'react-aria-components';
+import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
 import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup';
 import {Checkbox} from 'vanilla-starter/Checkbox';
 import {Button} from 'vanilla-starter/Button';
@@ -134,7 +132,7 @@ function FileTable() {
 
   return (
     <div style={{display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'start', width: '100%'}}>
-      <CheckboxGroup aria-label="Show columns" value={showColumns} onChange={setShowColumns} style={{flexDirection: 'row'}}>
+      <CheckboxGroup aria-label="Show columns" value={showColumns} onChange={setShowColumns} orientation="horizontal">
         <Checkbox value="type">Type</Checkbox>
         <Checkbox value="date">Date Modified</Checkbox>
       </CheckboxGroup>
@@ -174,8 +172,8 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T
 
 ```tsx render
 "use client";
-import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
-import {Collection, TableLoadMoreItem} from 'react-aria-components';
+import {Table, TableHeader, Column, Row, TableBody, Cell, TableLoadMoreItem} from 'vanilla-starter/Table';
+import {Collection} from 'react-aria-components';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
 import {useAsyncList} from 'react-stately';
 
@@ -211,8 +209,8 @@ function AsyncSortTable() {
       style={{
         height: 150,
         overflow: 'auto',
-        border: '1px solid var(--border-color)',
-        borderRadius: 6
+        border: '0.5px solid var(--border-color)',
+        borderRadius: 'var(--radius)'
       }}>
       <Table
         aria-label="Star Wars characters"
@@ -224,10 +222,10 @@ function AsyncSortTable() {
             background: 'var(--overlay-background)',
             zIndex: 1
           }}>
-          <Column id="name" isRowHeader allowsSorting>Name</Column>
-          <Column id="height" allowsSorting>Height</Column>
-          <Column id="mass" allowsSorting>Mass</Column>
-          <Column id="birth_year" allowsSorting>Birth Year</Column>
+          <Column id="name" isRowHeader>Name</Column>
+          <Column id="height">Height</Column>
+          <Column id="mass">Mass</Column>
+          <Column id="birth_year">Birth Year</Column>
         </TableHeader>
         <TableBody
           renderEmptyState={() => (
@@ -246,9 +244,7 @@ function AsyncSortTable() {
           {/*- begin highlight -*/}
           <TableLoadMoreItem
             onLoadMore={list.loadMore}
-            isLoading={list.loadingState === 'loadingMore'}>
-            <ProgressCircle isIndeterminate aria-label="Loading more..." />
-          </TableLoadMoreItem>
+            isLoading={list.loadingState === 'loadingMore'} />
           {/*- end highlight -*/}
         </TableBody>
       </Table>
@@ -263,8 +259,7 @@ Use the `href` prop on a `<Row>` to create a link. See the **client side routing
 
 ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Bookmarks', selectionMode: 'multiple'}} wide
 "use client";
-import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-import {TableBody, Cell} from 'react-aria-components';
+import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
 
 <Table/* PROPS */>
   <TableHeader>
@@ -298,8 +293,7 @@ import {TableBody, Cell} from 'react-aria-components';
 
 ```tsx render hideImports
 "use client";
-import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-import {TableBody, Cell} from 'react-aria-components';
+import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
 
 <Table aria-label="Search results">
   <TableHeader>
@@ -322,15 +316,14 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte
 ```tsx render docs={docs.exports.Table} links={docs.links} props={['selectionMode', 'selectionBehavior', 'disabledBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide
 "use client";
 import type {Selection} from 'react-aria-components';
-import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-import {TableBody, Cell} from 'react-aria-components';
+import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
 import {useState} from 'react';
 
 function Example(props) {
   let [selected, setSelected] = useState<Selection>(new Set());
 
   return (
-    <div>
+    <>
       <Table
         {...props}
         aria-label="Favorite pokemon"
@@ -370,7 +363,7 @@ function Example(props) {
         </TableBody>
       </Table>
       <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
-    </div>
+    </>
   );
 }
 ```
@@ -381,8 +374,8 @@ Set the `allowsSorting` prop on a `<Column>` to make it sortable. When the colum
 
 ```tsx render
 "use client";
-import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-import {TableBody, Cell, type SortDescriptor} from 'react-aria-components';
+import {type SortDescriptor} from 'react-aria-components';
+import {Table, TableHeader, Column, TableBody, Row, Cell} from 'vanilla-starter/Table';
 import {useState} from 'react';
 
 ///- begin collapse -///
@@ -395,7 +388,11 @@ const rows = [
 ///- end collapse -///
 
 function SortableTable() {
-  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | null>(null);
+  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
+    column: 'name',
+    direction: 'ascending'
+  });
+
   let sortedRows = rows;
   if (sortDescriptor) {
     sortedRows = rows.toSorted((a, b) => {
@@ -442,8 +439,8 @@ Wrap the `<Table>` with a `<ResizableTableContainer>`, and add a `<ColumnResizer
 
 ```tsx render
 "use client";
-import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-import {ResizableTableContainer, ColumnResizer, TableBody, Cell} from 'react-aria-components';
+import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
+import {ResizableTableContainer} from 'react-aria-components';
 
 ///- begin collapse -///
 const rows = [
@@ -458,19 +455,9 @@ const rows = [
   <Table aria-label="Table with resizable columns">
     <TableHeader>
       {/*- begin highlight -*/}
-      <Column id="file" isRowHeader maxWidth={500}>
-        <div style={{display: 'flex', alignItems: 'center'}}>
-          <span tabIndex={-1} className="column-name">File Name</span>
-          <ColumnResizer />
-        </div>
-      </Column>
-      <Column id="size" width={80}>Size</Column>
-      <Column id="date" minWidth={100}>
-        <div style={{display: 'flex', alignItems: 'center'}}>
-          <span tabIndex={-1} className="column-name">Date Modified</span>
-          <ColumnResizer />
-        </div>
-      </Column>
+      <Column id="file" isRowHeader allowsResizing maxWidth={500}>File Name</Column>
+      <Column id="size" allowsResizing defaultWidth={80}>Size</Column>
+      <Column id="date" minWidth={100}>Date Modified</Column>
       {/*- end highlight -*/}
     </TableHeader>
     <TableBody items={rows}>
@@ -492,8 +479,8 @@ The ResizableTableContainer's `onResize` event is called when a column resizer i
 
 ```tsx render
 "use client";
-import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-import {ResizableTableContainer, ColumnResizer, TableBody, Cell} from 'react-aria-components';
+import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
+import {ResizableTableContainer} from 'react-aria-components';
 import {useSyncExternalStore} from 'react';
 
 ///- begin collapse -///
@@ -533,14 +520,12 @@ export default function ResizableTable() {
           {column => (
             <Column
               isRowHeader={column.id === 'file'}
+              allowsResizing
               ///- begin highlight -///
               width={columnWidths.get(column.id)}
               ///- end highlight -///
             >
-              <div style={{display: 'flex', alignItems: 'center'}}>
-                <span tabIndex={-1} className="column-name">{column.name}</span>
-                <ColumnResizer />
-              </div>
+              {column.name}
             </Column>
           )}
         </TableHeader>
diff --git a/packages/dev/s2-docs/pages/react-aria/TextField.mdx b/packages/dev/s2-docs/pages/react-aria/TextField.mdx
index 55deb3f373b..ab9d9c0702e 100644
--- a/packages/dev/s2-docs/pages/react-aria/TextField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TextField.mdx
@@ -20,7 +20,7 @@ export const tags = ['input'];
     docs={vanillaDocs.exports.TextField}
     links={vanillaDocs.links}
     props={['label', 'description', 'isReadOnly', 'isDisabled']}
-    initialProps={{label: 'Name'}}
+    initialProps={{label: 'Name', placeholder: 'Enter your full name'}}
     type="vanilla"
     files={["starters/docs/src/TextField.tsx", "starters/docs/src/TextField.css"]} />
   <VisualExample
@@ -28,7 +28,7 @@ export const tags = ['input'];
     docs={vanillaDocs.exports.TextField}
     links={vanillaDocs.links}
     props={['label', 'description', 'isReadOnly', 'isDisabled']}
-    initialProps={{label: 'Name'}}
+    initialProps={{label: 'Name', placeholder: 'Enter your full name'}}
     type="tailwind"
     files={["starters/tailwind/src/TextField.tsx", "starters/tailwind/src/index.css"]} />
 </ExampleSwitcher>
@@ -49,6 +49,7 @@ function Example() {
     <>
       <TextField
         label="Name"
+        placeholder="Enter your full name"
         ///- begin highlight -///
         value={name}
         onChange={setName} />
@@ -67,7 +68,7 @@ Use the `name` prop to submit the text value to the server. Set the `isRequired`
 "use client";
 import {TextField} from 'vanilla-starter/TextField';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 function Example(props) {
   return (
@@ -75,6 +76,7 @@ function Example(props) {
       <TextField
         {...props}
         label="Email"
+        placeholder="Enter your email"
         ///- begin highlight -///
         name="email"
         /* PROPS */
@@ -96,7 +98,9 @@ import {TextField, Label, TextArea} from 'react-aria-components';
 
 <TextField>
   <Label>Comment</Label>
-  <TextArea />
+  <TextArea
+    className="react-aria-TextArea inset"
+    placeholder="Enter a comment" />
 </TextField>
 ```
 
diff --git a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
index c369a981148..9a5d4e97b53 100644
--- a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx
@@ -82,7 +82,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
 import {Time} from '@internationalized/date';
 import {TimeField} from 'vanilla-starter/TimeField';
 import {Button} from 'vanilla-starter/Button';
-import {Form} from 'react-aria-components';
+import {Form} from 'vanilla-starter/Form';;
 
 <Form>
   <TimeField
diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
index 9a983a54e4b..6b64edf956b 100644
--- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx
@@ -83,18 +83,18 @@ function Example(props) {
 
 ### Animation
 
-Render a `SelectionIndicator` within each `ToggleButton` to animate selection changes.
+Render a [SelectionIndicator](selection.html#animated-selectionindicator) within each `ToggleButton` to animate selection changes.
 
-```tsx render files={['packages/dev/s2-docs/pages/react-aria/SegmentedControl.css']}
+```tsx render files={['starters/docs/src/SegmentedControl.css']}
 "use client";
 import {ToggleButtonGroup, ToggleButton, ToggleButtonProps, SelectionIndicator} from 'react-aria-components';
-import './SegmentedControl.css';
+import 'vanilla-starter/SegmentedControl.css';
 
 function SegmentedControlItem(props: ToggleButtonProps) {
   return (
     <ToggleButton {...props} className="segmented-control-item">
       {/*- begin highlight -*/}
-      <SelectionIndicator />
+      <SelectionIndicator className="react-aria-SelectionIndicator button-base" data-selected />
       {/*- end highlight -*/}
       <span>{props.children}</span>
     </ToggleButton>
@@ -102,7 +102,8 @@ function SegmentedControlItem(props: ToggleButtonProps) {
 }
 
 <ToggleButtonGroup
-  className="segmented-control"
+  className="segmented-control button-base"
+  data-variant="secondary"
   defaultSelectedKeys={['day']}
   disallowEmptySelection>
   <SegmentedControlItem id="day">Day</SegmentedControlItem>
diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
index 7cae69228ee..5cce32bd8b7 100644
--- a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx
@@ -77,7 +77,7 @@ export const tags = ['group'];
         <Underline size={16} />
       </ToggleButton>
     </ToggleButtonGroup>
-    <Group aria-label="Clipboard">
+    <Group aria-label="Clipboard" className="flex gap-1">
       <Button aria-label="Copy" variant="secondary">
         <ClipboardCopy size={16} />
       </Button>
diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
index 0948d740c9c..bdbba2423e6 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
@@ -47,7 +47,7 @@ export const tags = ['hint', 'popup', 'info'];
   function Example(props) {
     return (
       <TooltipTrigger>
-        <Button aria-label="Edit" variant="icon">
+        <Button aria-label="Edit" variant="secondary">
           <Edit size={18} />
         </Button>
         {/*- begin highlight -*/}
diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
index ebaa21fad39..ad7c3ef923c 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
@@ -105,9 +105,9 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T
 
 ```tsx render
 "use client";
-import {Collection, TreeLoadMoreItem} from 'react-aria-components';
-import {Tree, TreeItem} from 'vanilla-starter/Tree';
+import {Tree, TreeItem, TreeLoadMoreItem} from 'vanilla-starter/Tree';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
+import {Collection} from 'react-aria-components';
 import {useAsyncList} from 'react-stately';
 
 interface Character {
@@ -153,7 +153,10 @@ function AsyncLoadingExample() {
   return (
     <Tree
       aria-label="Async loading tree"
-      style={{height: 300}}>
+      style={{height: 300}}
+      renderEmptyState={() => (
+        <ProgressCircle isIndeterminate aria-label="Loading..." />
+      )}>
       <TreeItem title="Pokemon">
         <Collection items={pokemonList.items}>
           {(item) => <TreeItem id={item.name} title={item.name} />}
@@ -161,9 +164,7 @@ function AsyncLoadingExample() {
         {/*- begin highlight -*/}
         <TreeLoadMoreItem
           onLoadMore={pokemonList.loadMore}
-          isLoading={pokemonList.loadingState === 'loadingMore'}>
-          <ProgressCircle isIndeterminate aria-label="Loading more..." />
-        </TreeLoadMoreItem>
+          isLoading={pokemonList.loadingState === 'loadingMore'} />
         {/*- end highlight -*/}
       </TreeItem>
       <TreeItem title="Star Wars">
@@ -173,9 +174,7 @@ function AsyncLoadingExample() {
         {/*- begin highlight -*/}
         <TreeLoadMoreItem
           onLoadMore={starWarsList.loadMore}
-          isLoading={starWarsList.loadingState === 'loadingMore'}>
-          <ProgressCircle isIndeterminate aria-label="Loading more..." />
-        </TreeLoadMoreItem>
+          isLoading={starWarsList.loadingState === 'loadingMore'} />
         {/*- end highlight -*/}
       </TreeItem>
     </Tree>
diff --git a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx
index f05b92efac4..dae384deca9 100644
--- a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx
@@ -47,7 +47,7 @@ Virtualizer uses <TypeLink links={docs.links} type={docs.exports.Layout} /> obje
 ```tsx render docs={docs.exports.ListLayoutOptions} links={docs.links} props={['gap', 'padding']} initialProps={{estimatedRowHeight: 75, gap: 4, padding: 4}} propsObject="layoutOptions" wide
 "use client";
 import {Virtualizer, ListLayout} from 'react-aria-components';
-import {GridList, GridListItem} from 'vanilla-starter/GridList';
+import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
 
 let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.'.split(' ');
 let items = [];
@@ -63,13 +63,13 @@ for (let i = 0; i < 5000; i++) {
   /* PROPS */
 >
   {/*- end highlight -*/}
-  <GridList
-    aria-label="Virtualized GridList"
+  <ListBox
+    aria-label="Virtualized ListBox"
     selectionMode="multiple"
     items={items}
     style={{display: 'block', padding: 0}}>
-    {(item) => <GridListItem>{item.name}</GridListItem>}
-  </GridList>
+    {(item) => <ListBoxItem>{item.name}</ListBoxItem>}
+  </ListBox>
 </Virtualizer>
 ```
 
@@ -80,7 +80,7 @@ for (let i = 0; i < 5000; i++) {
 ```tsx render docs={docs.exports.GridLayoutOptions} links={docs.links} props={['minItemSize', 'maxItemSize', 'minSpace', 'maxColumns', 'preserveAspectRatio']} initialProps={{minItemSize: {width: 100, height: 140}, minSpace: {width: 8, height: 8}}} propsObject="layoutOptions" wide
 "use client";
 import {Virtualizer, GridLayout, Size, Text} from 'react-aria-components';
-import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
+import {GridList, GridListItem} from 'vanilla-starter/GridList';
 
 ///- begin collapse -///
 let albumOptions = [
@@ -129,22 +129,23 @@ function Example(props) {
         /* PROPS */
         {...props}>
         {/*- end highlight -*/}
-        <ListBox
+        <GridList
           /*- begin highlight -*/
           layout="grid"
           /*- end highlight -*/
           aria-label="Virtualized grid layout"
           selectionMode="multiple"
           items={albums}
+          data-size="small"
           style={{display: 'block', padding: 0, height: 300, width: '100%'}}>
           {item => (
-            <ListBoxItem textValue={item.title}>
+            <GridListItem textValue={item.title} style={{height: '100%'}}>
               <img src={item.image} alt="" />
-              <Text slot="label" style={{fontSize: 12}}>{item.title}</Text>
+              <Text>{item.title}</Text>
               <Text slot="description">{item.artist}</Text>
-            </ListBoxItem>
+            </GridListItem>
           )}
-        </ListBox>
+        </GridList>
       </Virtualizer>
     </div>
   );
@@ -168,7 +169,7 @@ function Example(props) {
 ```tsx render docs={docs.exports.WaterfallLayoutOptions} links={docs.links} props={['minItemSize', 'maxItemSize', 'minSpace', 'maxColumns']} initialProps={{minItemSize: {width: 150, height: 150}, minSpace: {width: 8, height: 8}}} propsObject="layoutOptions" wide
 "use client";
 import {Virtualizer, WaterfallLayout, Size, Text} from 'react-aria-components';
-import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
+import {GridList, GridListItem} from 'vanilla-starter/GridList';
 
 ///- begin collapse -///
 let images = [
@@ -395,20 +396,21 @@ for (let i = 0; images.length < 500; i++) {
   /* PROPS */
   /*- end highlight -*/
 >
-  <ListBox
+  <GridList
     layout="grid"
     aria-label="Virtualized waterfall layout"
     selectionMode="multiple"
     items={images}
+    data-size="small"
     style={{display: 'block', padding: 0, height: 400, width: '100%'}}>
     {item => (
-      <ListBoxItem textValue={item.title}>
+      <GridListItem textValue={item.title}>
         <img src={item.image} alt="" style={{aspectRatio: item.aspectRatio, maxWidth: 'none'}} />
-        <Text slot="label" style={{fontSize: 12}}>{item.title}</Text>
+        <Text>{item.title}</Text>
         <Text slot="description">{item.user}</Text>
-      </ListBoxItem>
+      </GridListItem>
     )}
-  </ListBox>
+  </GridList>
 </Virtualizer>
 ```
 
diff --git a/packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx b/packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx
index 38a6df4df44..429c10d0195 100644
--- a/packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx
@@ -38,7 +38,7 @@ export function YearDropdown(): ReactElement {
   return (
     <Select
       aria-label="Year"
-      style={{flex: 1}}
+      style={{flex: 1, width: 'fit-content'}}
       // The selected year is always at the center of the 40 year range we display.
       selectedKey={20}
       onSelectionChange={key => {
diff --git a/packages/dev/s2-docs/pages/react-aria/dnd.mdx b/packages/dev/s2-docs/pages/react-aria/dnd.mdx
index 7c4eea7874c..79df37572a1 100644
--- a/packages/dev/s2-docs/pages/react-aria/dnd.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/dnd.mdx
@@ -59,7 +59,7 @@ function DraggableCOMPONENT() {
   return <PokemonCOMPONENT dragAndDropHooks={dragAndDropHooks} />;
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DraggableCOMPONENT />
   <DroppableCOMPONENT />
 </div>
@@ -173,7 +173,7 @@ function DroppableCOMPONENT() {
   return <PokemonCOMPONENT items={items} dragAndDropHooks={dragAndDropHooks} />;
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DraggableCOMPONENT />
   <DroppableCOMPONENT />
 </div>
@@ -188,7 +188,7 @@ A <TypeLink links={docs.links} type={docs.links[docs.exports.FileDropItem.id]} /
 ```tsx render
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
-import {useDragAndDrop, isFileDropItem} from 'react-aria-components';
+import {useDragAndDrop, isFileDropItem, Text} from 'react-aria-components';
 import {useState} from 'react';
 
 interface ImageItem {
@@ -222,13 +222,12 @@ function DroppableGridList() {
       items={items}
       dragAndDropHooks={dragAndDropHooks}
       renderEmptyState={() => "Drop images here"}
-      style={{height: 250}}>
+      style={{height: 250}}
+      data-size="small">
       {item => (
         <GridListItem textValue={item.name}>
-          <div style={{display: 'flex', height: 50, gap: 8, alignItems: 'center', width: '100%'}}>
-            <img src={item.url} style={{height: '100%', aspectRatio: '1/1', objectFit: 'contain'}} />
-            <span style={{flex: 1, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}>{item.name}</span>
-          </div>
+          <img src={item.url} />
+          <Text>{item.name}</Text>
         </GridListItem>
       )}
     </GridList>
@@ -360,7 +359,7 @@ function DroppableCOMPONENT() {
   return <PokemonCOMPONENT items={items} dragAndDropHooks={dragAndDropHooks} />;
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DraggableCOMPONENT />
   <DroppableCOMPONENT />
 </div>
@@ -401,7 +400,7 @@ function DroppableCOMPONENT() {
   );
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DraggableCOMPONENT />
   <DroppableCOMPONENT />
 </div>
@@ -456,11 +455,7 @@ function DroppableCOMPONENT() {
       }
     },
     renderDropIndicator(target) {
-      return (
-        <DropIndicator
-          target={target}
-          className="drop-indicator" />
-      );
+      return <DropIndicator target={target} />;
     }
     ///- end highlight -///
   });
@@ -468,7 +463,7 @@ function DroppableCOMPONENT() {
   return <PokemonCOMPONENT items={list.items} dragAndDropHooks={dragAndDropHooks} />;
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DraggableCOMPONENT />
   <DroppableCOMPONENT />
 </div>
@@ -476,19 +471,6 @@ function DroppableCOMPONENT() {
 
 </ExampleSwitcher>
 
-```css render hidden
-.drop-indicator {
-  &[data-drop-target] {
-    outline: 1px solid var(--highlight-background);;
-  }
-
-  @supports not selector(:has(.foo)) {
-    /* Undo gap in browsers that don't support :has */
-    margin-bottom: -2px;
-  }
-}
-```
-
 ### Reordering items
 
 Use the `onReorder` event to enable reordering items. For components with hierarchy like [Tree](Tree.html), this only allows reordering within the same level. Use `onMove` to allow moving items between levels.
@@ -694,7 +676,7 @@ function DndCOMPONENT(props: DndCOMPONENTProps) {
   return <PokemonCOMPONENT items={list.items} dragAndDropHooks={dragAndDropHooks} />
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DndCOMPONENT
     initialItems={defaultItems}
     aria-label="Drag and drop COMPONENT" />
@@ -757,7 +739,7 @@ function DroppableCOMPONENT() {
   return <PokemonCOMPONENT items={items} dragAndDropHooks={dragAndDropHooks} />;
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DraggableCOMPONENT />
   <DroppableCOMPONENT />
 </div>
@@ -805,7 +787,7 @@ function DraggableCOMPONENT() {
   return <PokemonCOMPONENT items={list.items} dragAndDropHooks={dragAndDropHooks} />
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DraggableCOMPONENT />
   <DroppableCOMPONENT />
 </div>
@@ -859,7 +841,7 @@ function DraggableCOMPONENT() {
   return <PokemonCOMPONENT items={list.items} dragAndDropHooks={dragAndDropHooks} />
 }
 
-<div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+<div style={{display: 'flex', gap: 12, flexWrap: 'wrap', width: '100%', justifyContent: 'center'}}>
   <DraggableCOMPONENT />
   <DroppableCOMPONENT />
 </div>
diff --git a/packages/dev/s2-docs/pages/react-aria/selection.mdx b/packages/dev/s2-docs/pages/react-aria/selection.mdx
index c7800d9ed3e..f934083f163 100644
--- a/packages/dev/s2-docs/pages/react-aria/selection.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/selection.mdx
@@ -53,14 +53,14 @@ function Example() {
 ```tsx render
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
-import {Button, type Selection} from 'react-aria-components';
+import {Text, type Selection} from 'react-aria-components';
 import {useState} from 'react';
 
 export default function Example() {
-  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));
+  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['Blastoise']));
 
   return (
-    <div>
+    <>
       <GridList
         aria-label="Sandwich contents"
         ///- begin highlight -///
@@ -68,25 +68,23 @@ export default function Example() {
         selectedKeys={selectedKeys}
         onSelectionChange={setSelectedKeys}
         ///- end highlight -///
-      >
-        <SandwichItem id="lettuce">Lettuce</SandwichItem>
-        <SandwichItem id="tomato">Tomato</SandwichItem>
-        <SandwichItem id="cheese">Cheese</SandwichItem>
-        <SandwichItem id="tuna">Tuna Salad</SandwichItem>
-        <SandwichItem id="egg">Egg Salad</SandwichItem>
-        <SandwichItem id="ham">Ham</SandwichItem>
+        data-size="small">
+        <PokemonItem name="Charizard" />
+        <PokemonItem name="Blastoise" />
+        <PokemonItem name="Venusaur" />
+        <PokemonItem name="Pikachu" />
       </GridList>
       <p>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
-    </div>
+    </>
   );
 }
 
 ///- begin collapse -///
-function SandwichItem(props: GridListItemProps) {
+function PokemonItem(props: {name: string}) {
   return (
-    <GridListItem {...props} textValue={props.children}>
-      {props.children}
-      <Button aria-label="Info">ⓘ</Button>
+    <GridListItem id={props.name} textValue={props.name}>
+      <img src={`https://img.pokemondb.net/sprites/home/normal/2x/avif/${props.name.toLowerCase()}.avif`} />
+      <Text>{props.name}</Text>
     </GridListItem>
   );
 }
@@ -322,6 +320,7 @@ function Example(props) {
 ```tsx render wide docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']}
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
+import {Text} from 'react-aria-components';
 import {useState} from 'react';
 
 function Example(props) {
@@ -336,10 +335,23 @@ function Example(props) {
       /* PROPS */
       /*- end highlight -*/
       selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}>
-      <GridListItem id="one">One</GridListItem>
-      <GridListItem id="two">Two</GridListItem>
-      <GridListItem id="three">Three</GridListItem>
+      onSelectionChange={setSelectedKeys}
+      data-size="small">
+      <GridListItem textValue="Desert Sunset">
+        <img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
+        <Text>Desert Sunset</Text>
+        <Text slot="description">PNG • 2/3/2024</Text>
+      </GridListItem>
+      <GridListItem textValue="Hiking Trail">
+        <img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+        <Text>Hiking Trail</Text>
+        <Text slot="description">JPEG • 1/10/2022</Text>
+      </GridListItem>
+      <GridListItem textValue="Lion">
+        <img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
+        <Text>Lion</Text>
+        <Text slot="description">JPEG • 8/28/2021</Text>
+      </GridListItem>
     </GridList>
   );
 }
@@ -463,14 +475,12 @@ function Example(props) {
 
 ## Single selection
 
-In some components, like a [Select](Select.html) or [ComboBox](ComboBox.html), only single selection is supported. In this case, the singular `selectedKey` and `defaultSelectedKey` props are available instead of their plural variants. These accept a single id instead of a `Set` as their value.
-
-<ExampleSwitcher type="component" examples={['Select', 'ComboBox']}>
+In some components like [ComboBox](ComboBox.html), only single selection is supported. In this case, the singular `selectedKey` and `defaultSelectedKey` props are available instead of their plural variants. These accept a single id instead of a `Set` as their value.
 
 ```tsx render
 "use client";
 import type {Key} from 'react-aria-components';
-import {COMPONENT, COMPONENTItem} from 'vanilla-starter/COMPONENT';
+import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 import {useState} from 'react';
 
 function Example() {
@@ -478,24 +488,22 @@ function Example() {
 
   return (
     <div>
-      <COMPONENT
-        label="COMPONENT"
+      <ComboBox
+        label="ComboBox"
         ///- begin highlight -///
         selectedKey={selectedKey}
         ///- end highlight -///
         onSelectionChange={setSelectedKey}>
-        <COMPONENTItem id="one">One</COMPONENTItem>
-        <COMPONENTItem id="two">Two</COMPONENTItem>
-        <COMPONENTItem id="three">Three</COMPONENTItem>
-      </COMPONENT>
+        <ComboBoxItem id="one">One</ComboBoxItem>
+        <ComboBoxItem id="two">Two</ComboBoxItem>
+        <ComboBoxItem id="three">Three</ComboBoxItem>
+      </ComboBox>
       <p>selectedKey: {String(selectedKey)}</p>
     </div>
   );
 }
 ```
 
-</ExampleSwitcher>
-
 In components which support multiple selection, you can limit the selection to a single item using the
 `selectionMode` prop. This continues to accept `selectedKeys` and `defaultSelectedKeys` as a `Set`, but it will
 only contain a single id at a time.
@@ -506,27 +514,28 @@ Render a `<SelectionIndicator />` within each collection item to animate selecti
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css']}
 "use client";
-import {GridList, GridListItem, SelectionIndicator} from 'react-aria-components';
+import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
+import {SelectionIndicator} from 'react-aria-components';
 import './SelectionIndicator.css';
 
 function SelectableItem({id, children}) {
   return (
-    <GridListItem id={id} className="animated-GridListItem">
+    <ListBoxItem id={id} className="animated-ListBoxItem">
       {/*- begin highlight -*/}
       <SelectionIndicator />
       {/*- end highlight -*/}
       {children}
-    </GridListItem>
+    </ListBoxItem>
   );
 }
 
-<GridList
-  aria-label="Animated GridList"
+<ListBox
+  aria-label="Animated ListBox"
   selectionMode="single">
   <SelectableItem>Home</SelectableItem>
   <SelectableItem>Getting Started</SelectableItem>
   <SelectableItem>Components</SelectableItem>
-</GridList>
+</ListBox>
 ```
 
 <PropTable component={docs.exports.SelectionIndicator} links={docs.links} />
@@ -539,21 +548,34 @@ In the `"replace"` selection behavior, selection is the primary interaction. Cli
 
 <ExampleSwitcher type="component" examples={['GridList', 'Tree', 'Table']}>
 
-```tsx render wide docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple'}}
+```tsx render wide docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple', 'data-size': 'small'}}
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
+import {Text} from 'react-aria-components';
 
 <GridList/* PROPS */>
-  {/*- begin highlight -*/}
-  <GridListItem onAction={() => alert('Opening Games')}>
-    {/*- end highlight -*/}
-    Games
+  <GridListItem
+    /*- begin highlight -*/
+    onAction={() => alert('Opening "Mountain Sunrise"')}
+    /*- end highlight -*/
+    textValue="Mountain Sunrise">
+    <img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+    <Text>Mountain Sunrise</Text>
+    <Text slot="description">PNG • 3/15/2015</Text>
   </GridListItem>
-  <GridListItem onAction={() => alert('Opening Documents')}>
-    Documents
+  <GridListItem
+    onAction={() => alert('Opening "Architecture"')}
+    textValue="Architecture">
+    <img src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
+    <Text>Architecture</Text>
+    <Text slot="description">PNG • 12/24/2016</Text>
   </GridListItem>
-  <GridListItem onAction={() => alert('Opening Photos')}>
-    Photos
+  <GridListItem
+    onAction={() => alert('Opening "Golden Hour"')}
+    textValue="Golden Hour">
+    <img src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} />
+    <Text>Golden Hour</Text>
+    <Text slot="description">WEBP • 7/24/2024</Text>
   </GridListItem>
 </GridList>
 ```
@@ -629,24 +651,50 @@ In dynamic collections, it may be more convenient to use the `onAction` prop at
 ```tsx render wide docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']}
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
+import {Text} from 'react-aria-components';
 
 ///- begin collapse -///
-const files = [
-  {id: 'games', name: 'Games'},
-  {id: 'documents', name: 'Documents'},
-  {id: 'photos', name: 'Photos'}
+let images = [
+  {
+    title: "Rays of sun in the forest",
+    user: "Joyce G",
+    image: "https://images.unsplash.com/photo-1736185597807-371cae1c7e4e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    title: "Tall grass",
+    user: "Ingmar H",
+    image: "https://images.unsplash.com/photo-1737301519296-062cd324dbfa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 600
+  },
+  {
+    title: "Winding Road",
+    user: "Artem Stoliar",
+    image: "https://images.unsplash.com/photo-1738249034651-1896f689be58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDA4NDh8MHwxfHRvcGljfHw2c01WalRMU2tlUXx8fHx8Mnx8MTczODM2NzE4M3w&ixlib=rb-4.0.3&q=80&w=400",
+    width: 400,
+    height: 300
+  }
 ];
 ///- end collapse -///
 
 <GridList
   aria-label="Files"
   selectionMode="multiple"
+  data-size="small"
   /* PROPS */
-  items={files}
+  items={images}
   /*- begin highlight -*/
-  onAction={id => alert(`Opening ${id}`)}>
+  onAction={id => alert(`Opening "${id}"`)}>
   {/*- end highlight -*/}
-  {item => <GridListItem>{item.name}</GridListItem>}
+  {image => (
+    <GridListItem id={image.title} textValue={image.title}>
+      <img src={image.image} width={image.width} height={image.height} />
+      <Text>{image.title}</Text>
+      <Text slot="description">By {image.user}</Text>
+    </GridListItem>
+  )}
 </GridList>
 ```
 
@@ -738,17 +786,34 @@ import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
 </ListBox>
 ```
 
-```tsx render wide docs={docs.exports.GridList} links={docs.links} props={['disabledBehavior']} initialProps={{'aria-label': 'Pokemon', selectionMode: 'multiple'}}
+```tsx render wide docs={docs.exports.GridList} links={docs.links} props={['disabledBehavior']} initialProps={{'aria-label': 'Pokemon', selectionMode: 'multiple', 'data-size': 'small'}}
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
+import {Text} from 'react-aria-components';
 
 <GridList/* PROPS */>
-  <GridListItem>Charizard</GridListItem>
-  <GridListItem>Blastoise</GridListItem>
+  <GridListItem textValue="Desert Sunset">
+    <img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
+    <Text>Desert Sunset</Text>
+    <Text slot="description">PNG • 2/3/2024</Text>
+  </GridListItem>
   {/*- begin highlight -*/}
-  <GridListItem isDisabled>Venusaur</GridListItem>
+  <GridListItem isDisabled textValue="Hiking Trail">
   {/*- end highlight -*/}
-  <GridListItem>Pikachu</GridListItem>
+    <img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+    <Text>Hiking Trail</Text>
+    <Text slot="description">JPEG • 1/10/2022</Text>
+  </GridListItem>
+  <GridListItem textValue="Lion">
+    <img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
+    <Text>Lion</Text>
+    <Text slot="description">JPEG • 8/28/2021</Text>
+  </GridListItem>
+  <GridListItem textValue="Mountain Sunrise">
+    <img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
+    <Text>Mountain Sunrise</Text>
+    <Text slot="description">PNG • 3/15/2015</Text>
+  </GridListItem>
 </GridList>
 ```
 
@@ -863,6 +928,7 @@ const items = [
   ///- begin highlight -///
   disabledKeys={[3]}
   ///- end highlight -///
+  selectionMode="multiple"
   items={items}>
   {item => <ListBoxItem>{item.name}</ListBoxItem>}
 </ListBox>
@@ -872,6 +938,7 @@ const items = [
 ```tsx render wide docs={docs.exports.GridList} links={docs.links} props={['disabledBehavior']} initialProps={{'aria-label': 'Pokemon', selectionMode: 'multiple'}}
 "use client";
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
+import {Text} from 'react-aria-components';
 
 ///- begin collapse -///
 const items = [
@@ -884,12 +951,18 @@ const items = [
 
 <GridList
   aria-label="Pokemon"
+  data-size="small"
   /* PROPS */
   ///- begin highlight -///
   disabledKeys={[3]}
   ///- end highlight -///
   items={items}>
-  {item => <GridListItem>{item.name}</GridListItem>}
+  {item => (
+    <GridListItem textValue={item.name}>
+      <img src={`https://img.pokemondb.net/sprites/home/normal/2x/avif/${item.name.toLowerCase()}.avif`} />
+      <Text>{item.name}</Text>
+    </GridListItem>
+  )}
 </GridList>
 ```
 
diff --git a/packages/dev/s2-docs/pages/s2/ColorField.mdx b/packages/dev/s2-docs/pages/s2/ColorField.mdx
index 7e4f6ef6262..a876d7194cc 100644
--- a/packages/dev/s2-docs/pages/s2/ColorField.mdx
+++ b/packages/dev/s2-docs/pages/s2/ColorField.mdx
@@ -40,7 +40,7 @@ function Example() {
         placeholder="Enter a color"
         value={value}
         onChange={setValue} />
-      <pre className={style({font: 'body'})}>Current value: {value.toString('hex')}</pre>
+      <pre className={style({font: 'body'})}>Current value: {value?.toString('hex')}</pre>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
index bec8a9e7981..45a7218308a 100644
--- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
@@ -45,7 +45,7 @@ function Example() {
 
   return (
     /*- begin highlight -*/
-    <ComboBox label="Animals" items={options} selectionMode="single" placeholder="Select an animal">
+    <ComboBox label="Animals" defaultItems={options} selectionMode="single" placeholder="Select an animal">
       {(item) => <ComboBoxItem>{item.name}</ComboBoxItem>}
     </ComboBox>
     /*- end highlight -*/
@@ -92,7 +92,7 @@ const users = Array.from({length: 5}, (_, i) => ({
       <Text slot="description">Full access</Text>
     </ComboBoxItem>
   </ComboBox>
-  <ComboBox label="Share" items={users} defaultSelectedKey="user1" placeholder="Select a user">
+  <ComboBox label="Share" defaultItems={users} defaultSelectedKey="user1" placeholder="Select a user">
     {(item) => (
       <ComboBoxItem id={item.id} textValue={item.name}>
         {/*- begin highlight -*/}
diff --git a/packages/dev/s2-docs/src/ExampleOutput.tsx b/packages/dev/s2-docs/src/ExampleOutput.tsx
index c93452a5989..c633299c96d 100644
--- a/packages/dev/s2-docs/src/ExampleOutput.tsx
+++ b/packages/dev/s2-docs/src/ExampleOutput.tsx
@@ -34,7 +34,10 @@ export function ExampleOutput({component, props = {}, align = 'center', orientat
         gridArea: 'example',
         borderRadius: 'lg',
         font: 'ui',
-        padding: 24,
+        padding: {
+          default: 12,
+          lg: 24
+        },
         boxSizing: 'border-box'
       })({align, orientation})}
       style={{background: getBackgroundColor(props.staticColor || (props.isOverBackground ? 'white' : undefined))}}>
diff --git a/packages/dev/s2-docs/src/ExampleSwitcher.tsx b/packages/dev/s2-docs/src/ExampleSwitcher.tsx
index e407f92fa1e..841d8ea7c94 100644
--- a/packages/dev/s2-docs/src/ExampleSwitcher.tsx
+++ b/packages/dev/s2-docs/src/ExampleSwitcher.tsx
@@ -2,25 +2,53 @@
 
 import {createContext, useEffect, useState} from 'react';
 import {Key} from 'react-aria-components';
-import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
+import {Picker, PickerItem, SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 const exampleStyle = style({
   backgroundColor: 'layer-1',
   marginY: 20,
   borderRadius: 'xl',
-  display: 'flex',
-  flexDirection: 'column'
+  display: 'grid',
+  gridTemplateColumns: {
+    default: [12, '1fr', 12],
+    lg: [24, '1fr', 'auto', 24]
+  },
+  gridTemplateAreas: {
+    default: [
+      '. switcher .',
+      '. theme .',
+      'example example example'
+    ],
+    lg: [
+      '. switcher theme .',
+      'example example example example'
+    ]
+  },
+  paddingTop: {
+    default: 12,
+    lg: 24
+  }
 });
 
 const switcher = style({
+  gridArea: 'switcher',
+  justifySelf: {
+    default: 'center',
+    lg: 'start'
+  }
+});
+
+const themePicker = style({
+  gridArea: 'theme',
+  width: 182,
   marginTop: {
     default: 12,
-    lg: 24
+    lg: 0
   },
-  marginStart: {
-    default: 12,
-    lg: 24
+  justifySelf: {
+    default: 'center',
+    lg: 'start'
   }
 });
 
@@ -30,6 +58,7 @@ const DEFAULT_EXAMPLES = ['Vanilla CSS', 'Tailwind'] as Key[];
 
 export function ExampleSwitcher({type = 'style', examples = DEFAULT_EXAMPLES, children}) {
   let [selected, setSelected] = useState<Key>(examples[0]);
+  let [theme, setTheme] = useState('indigo');
 
   useEffect(() => {
     if (!type) {
@@ -42,15 +71,28 @@ export function ExampleSwitcher({type = 'style', examples = DEFAULT_EXAMPLES, ch
       setSelected(exampleType);
     }
 
+    let theme = localStorage.getItem('theme');
+    if (theme) {
+      setTheme(theme);
+    }
+
     let controller = new AbortController();
     window.addEventListener('storage', e => {
       if (e.key === type && e.newValue && examples.includes(e.newValue)) {
         setSelected(e.newValue);
       }
+
+      if (e.key === 'theme' && e.newValue) {
+        setTheme(e.newValue);
+      }
     }, {signal: controller.signal});
     return () => controller.abort();
   }, [type, examples]);
 
+  useEffect(() => {
+    document.documentElement.style.setProperty('--tint', `var(--${theme})`);
+  }, [theme]);
+
   let onSelectionChange = key => {
     setSelected(key);
     
@@ -64,14 +106,45 @@ export function ExampleSwitcher({type = 'style', examples = DEFAULT_EXAMPLES, ch
     }
   };
 
+  let onThemeChange = key => {
+    setTheme(key);
+    localStorage.setItem('theme', key);
+    window.dispatchEvent(new StorageEvent('storage', {
+      key: 'theme',
+      oldValue: String(theme),
+      newValue: String(key)
+    }));
+  };
+
   return (
     <div className={exampleStyle} data-example-switcher>
       <SegmentedControl selectedKey={selected} onSelectionChange={onSelectionChange} styles={switcher}>
         {examples.map(example => <SegmentedControlItem key={example} id={example}>{example}</SegmentedControlItem>)}
       </SegmentedControl>
-      <ExampleSwitcherContext.Provider value={selected}>
-        {children[examples.indexOf(selected)]}
-      </ExampleSwitcherContext.Provider>
+      {selected === 'Vanilla CSS' &&
+        <Picker
+          label="Theme"
+          labelPosition="side"
+          value={theme}
+          onChange={onThemeChange}
+          styles={themePicker}>
+          <PickerItem id="indigo">Indigo</PickerItem>
+          <PickerItem id="blue">Blue</PickerItem>
+          <PickerItem id="cyan">Cyan</PickerItem>
+          <PickerItem id="turquoise">Turquoise</PickerItem>
+          <PickerItem id="green">Green</PickerItem>
+          <PickerItem id="yellow">Yellow</PickerItem>
+          <PickerItem id="orange">Orange</PickerItem>
+          <PickerItem id="red">Red</PickerItem>
+          <PickerItem id="pink">Pink</PickerItem>
+          <PickerItem id="purple">Purple</PickerItem>
+        </Picker>
+      }
+      <div style={{gridArea: 'example'}}>
+        <ExampleSwitcherContext.Provider value={selected}>
+          {children[examples.indexOf(selected)]}
+        </ExampleSwitcherContext.Provider>
+      </div>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/tailwind/tailwind.css b/packages/dev/s2-docs/tailwind/tailwind.css
index f2a57ecc5e7..fa9afc4c2e3 100644
--- a/packages/dev/s2-docs/tailwind/tailwind.css
+++ b/packages/dev/s2-docs/tailwind/tailwind.css
@@ -5,3 +5,14 @@
 @source "../pages/**/*.mdx";
 @plugin 'tailwindcss-react-aria-components';
 @plugin 'tailwindcss-animate';
+
+@media (min-resolution: 200dpi) {
+  :root {
+    --spacing: calc(0.25rem * 1.25);
+    --text-xs: calc(0.75rem * 1.25);
+    --text-sm: calc(0.875rem * 1.25);
+    --text-base: calc(1rem * 1.25);
+    --text-lg: calc(1.125rem * 1.25);
+    --text-xl: calc(1.25rem * 1.25);
+  }
+}
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 03bbb3395a0..8b26e7565c0 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -663,17 +663,22 @@ function TableHeaderRow({item}: {item: GridNode<any>}) {
 
 export interface ColumnRenderProps {
   /**
-   * Whether the item is currently hovered with a mouse.
+   * Whether the column is currently hovered with a mouse.
    * @selector [data-hovered]
    */
   isHovered: boolean,
   /**
-   * Whether the item is currently focused.
+   * Whether the column is currently in a pressed state.
+   * @selector [data-pressed]
+   */
+  isPressed: boolean,
+  /**
+   * Whether the column is currently focused.
    * @selector [data-focused]
    */
   isFocused: boolean,
   /**
-   * Whether the item is currently keyboard focused.
+   * Whether the column is currently keyboard focused.
    * @selector [data-focus-visible]
    */
   isFocusVisible: boolean,
@@ -737,7 +742,7 @@ export const Column = /*#__PURE__*/ createLeafComponent(TableColumnNode, (props:
   let ref = useObjectRef<HTMLTableCellElement | HTMLDivElement>(forwardedRef);
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
-  let {columnHeaderProps} = useTableColumnHeader(
+  let {columnHeaderProps, isPressed} = useTableColumnHeader(
     {node: column, isVirtualized},
     state,
     ref
@@ -764,6 +769,7 @@ export const Column = /*#__PURE__*/ createLeafComponent(TableColumnNode, (props:
     defaultClassName: 'react-aria-Column',
     values: {
       isHovered,
+      isPressed,
       isFocused,
       isFocusVisible,
       allowsSorting: column.props.allowsSorting,
@@ -801,6 +807,7 @@ export const Column = /*#__PURE__*/ createLeafComponent(TableColumnNode, (props:
       style={style}
       ref={ref as any}
       data-hovered={isHovered || undefined}
+      data-pressed={isPressed || undefined}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-resizing={isResizing || undefined}
diff --git a/starters/docs/src/Autocomplete.css b/starters/docs/src/Autocomplete.css
index 0a590df704c..1ac2bf5a647 100644
--- a/starters/docs/src/Autocomplete.css
+++ b/starters/docs/src/Autocomplete.css
@@ -3,32 +3,15 @@
 .my-autocomplete {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--spacing-1);
   max-width: 300px;
   height: 180px;
-  border: 1px solid var(--border-color);
-  padding: 16px;
-  border-radius: 10px;
+  border: 0.5px solid var(--overlay-border);
+  padding: var(--spacing-4);
+  border-radius: var(--radius);
   background: var(--overlay-background);
-}
-
-.react-aria-SearchField {
-  width: 100%;
-}
 
-.react-aria-Label {
-  margin-bottom: .5em;
-}
-
-.react-aria-Menu {
-  &[data-empty] {
-    align-items: center;
-    justify-content: center;
-    font-style: italic;
+  .react-aria-Menu {
+    flex: 1;
   }
 }
-
-.react-aria-MenuItem[href] {
-  text-decoration: none;
-  cursor: pointer;
-}
diff --git a/starters/docs/src/Breadcrumbs.css b/starters/docs/src/Breadcrumbs.css
index 951d9aa6b38..2620ace30fc 100644
--- a/starters/docs/src/Breadcrumbs.css
+++ b/starters/docs/src/Breadcrumbs.css
@@ -6,7 +6,6 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  font-size: 18px;
   color: var(--text-color);
 
   .react-aria-Breadcrumb {
@@ -15,31 +14,28 @@
   }
 
   .react-aria-Link {
+    font: var(--font-size) system-ui;
     color: var(--link-color-secondary);
     outline: none;
     position: relative;
     text-decoration: none;
     cursor: pointer;
 
-    &[data-hovered] {
+    &[data-hovered],
+    &[data-focus-visible] {
       text-decoration: underline;
     }
 
     &[data-current] {
       color: var(--text-color);
-      font-weight: bold;
+      font-weight: 600;
     }
 
-    &[data-focus-visible]:after {
-      content: '';
-      position: absolute;
-      inset: -2px -4px;
-      border-radius: 6px;
-      border: 2px solid var(--focus-ring-color);
+    &[data-focus-visible] {
+      border-radius: var(--radius-sm);
+      outline: 2px solid var(--focus-ring-color);
     }
-  }
 
-  .react-aria-Link {
     &[data-disabled] {
       cursor: default;
 
diff --git a/starters/docs/src/Breadcrumbs.tsx b/starters/docs/src/Breadcrumbs.tsx
index 6121ab3c79b..0070e0d2ddd 100644
--- a/starters/docs/src/Breadcrumbs.tsx
+++ b/starters/docs/src/Breadcrumbs.tsx
@@ -12,7 +12,7 @@ export function Breadcrumb(props: BreadcrumbProps & Omit<LinkProps, 'className'>
     <RACBreadcrumb {...props}>
       {({isCurrent}) => (<>
         <Link {...props} />
-        {!isCurrent && <ChevronRight size={18} />}
+        {!isCurrent && <ChevronRight size={14} />}
       </>)}
     </RACBreadcrumb>
   );
diff --git a/starters/docs/src/Button.css b/starters/docs/src/Button.css
index 043fef99f4c..65e6aee0873 100644
--- a/starters/docs/src/Button.css
+++ b/starters/docs/src/Button.css
@@ -1,36 +1,41 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-Button {
-  color: var(--text-color);
-  background: var(--button-background);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border: none;
+  border-radius: var(--radius);
   appearance: none;
-  vertical-align: middle;
-  font-size: 0.875rem;
-  text-align: center;
+  font: var(--font-size) system-ui;
+  font-weight: 500;
   margin: 0;
-  outline: none;
-  padding: 6px 10px;
+  height: var(--spacing-8);
+  padding: 0 var(--spacing-3);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--spacing-1);
+  -webkit-tap-highlight-color: transparent;
 
-  &[data-pressed] {
-    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
-    background: var(--button-background-pressed);
-    border-color: var(--border-color-pressed);
+  > svg {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+
+  &:has(> svg:only-child) {
+    width: var(--spacing-8);
+    flex-shrink: 0;
+    padding: 0;
+    border-radius: 9999px;
   }
 
-  &[data-focus-visible] {
-    outline: 2px solid var(--focus-ring-color);
-    outline-offset: -1px;
+  &[data-pressed] {
+    scale: 0.95;
   }
 
-  &[data-disabled]{
-    border-color: var(--border-color-disabled);
-    color: var(--text-color-disabled);
+  .react-aria-ProgressBar {
+    @media (prefers-color-scheme: dark) {
+      --highlight-background: var(--gray-1600);
+    }
   }
 }
diff --git a/starters/docs/src/Button.tsx b/starters/docs/src/Button.tsx
index e976a2b7c04..8f471c09359 100644
--- a/starters/docs/src/Button.tsx
+++ b/starters/docs/src/Button.tsx
@@ -1,11 +1,19 @@
 'use client';
-import {Button as RACButton, ButtonProps, composeRenderProps} from 'react-aria-components';
+import {Button as RACButton, ButtonProps as RACButtonProps, composeRenderProps} from 'react-aria-components';
 import {ProgressCircle} from './ProgressCircle';
 import './Button.css';
 
+interface ButtonProps extends RACButtonProps {
+  /**
+   * The visual style of the button (Vanilla CSS implementation specific).
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary' | 'quiet'
+}
+
 export function Button(props: ButtonProps) {
   return (
-    <RACButton {...props}>
+    <RACButton {...props} className="react-aria-Button button-base" data-variant={props.variant || 'primary'}>
       {composeRenderProps(props.children, (children, {isPending}) => (
         <>
           {!isPending && children}
diff --git a/starters/docs/src/Calendar.css b/starters/docs/src/Calendar.css
index 08aad0b450e..9556f7fdfa0 100644
--- a/starters/docs/src/Calendar.css
+++ b/starters/docs/src/Calendar.css
@@ -1,65 +1,54 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-Calendar {
   width: fit-content;
   max-width: 100%;
   color: var(--text-color);
+  font: var(--font-size) system-ui;
 
   header {
     display: flex;
     align-items: center;
-    margin: 0 4px 0.4375rem 4px;
+    margin: 0 var(--spacing-1) var(--spacing-4) var(--spacing-1);
 
     .react-aria-Heading {
       flex: 1;
       margin: 0;
       text-align: center;
-      font-size: 1.203125rem;
+      font-size: var(--font-size-lg);
     }
   }
 
-  .react-aria-Button[slot=previous],
-  .react-aria-Button[slot=next] {
-    width: 1.75rem;
-    height: 1.75rem;
-    padding: 0;
-  }
-
   [slot=errorMessage] {
-    font-size: 12px;
+    font: var(--font-size-sm) system-ui;
     color: var(--invalid-color);
   }
 }
 
+
+.react-aria-CalendarHeaderCell {
+  font-size: var(--font-size-sm);
+}
+
 .react-aria-CalendarCell {
-  width: 2.00025rem;
-  line-height: 2.00025rem;
+  width: var(--spacing-8);
+  line-height: var(--spacing-8);
+  margin: calc(var(--spacing-1) / 2);
+  font-size: var(--font-size);
   text-align: center;
-  border-radius: 6px;
+  border-radius: 9999px;
   cursor: default;
-  outline: none;
   forced-color-adjust: none;
+  transition: scale 200ms;
+  -webkit-tap-highlight-color: transparent;
 
   &[data-outside-month] {
     display: none;
   }
 
   &[data-pressed] {
-    background: var(--gray-100);
-  }
-
-  &[data-focus-visible] {
-    outline: 2px solid var(--focus-ring-color);
-    outline-offset: 2px;
-  }
-
-  &[data-selected] {
-    background: var(--highlight-background);
-    color: var(--highlight-foreground);
-  }
-
-  &[data-disabled] {
-    color: var(--text-color-disabled);
+    scale: 0.9;
   }
 
   &[data-unavailable] {
@@ -68,7 +57,6 @@
   }
 
   &[data-invalid] {
-    background: var(--invalid-color);
-    color: var(--highlight-foreground);
+    --button-color: var(--invalid-color);
   }
-}
\ No newline at end of file
+}
diff --git a/starters/docs/src/Calendar.tsx b/starters/docs/src/Calendar.tsx
index 2ead4ec991d..1af061acae7 100644
--- a/starters/docs/src/Calendar.tsx
+++ b/starters/docs/src/Calendar.tsx
@@ -6,7 +6,8 @@ import {
   CalendarProps as AriaCalendarProps,
   DateValue,
   CalendarCellProps,
-  CalendarGridProps
+  CalendarGridProps,
+  composeRenderProps
 } from 'react-aria-components';
 import {Heading, Text} from './Content';
 import {ChevronLeft, ChevronRight} from 'lucide-react';
@@ -27,9 +28,9 @@ export function Calendar<T extends DateValue>(
     (
       <AriaCalendar {...props}>
         <header>
-          <Button slot="previous"><ChevronLeft size={16} /></Button>
+          <Button slot="previous" variant="quiet"><ChevronLeft /></Button>
           <Heading />
-          <Button slot="next"><ChevronRight size={16} /></Button>
+          <Button slot="next" variant="quiet"><ChevronRight /></Button>
         </header>
         <CalendarGrid>
           {(date) => <CalendarCell date={date} />}
@@ -41,9 +42,11 @@ export function Calendar<T extends DateValue>(
 }
 
 export function CalendarCell(props: CalendarCellProps) {
-  return <AriaCalendarCell {...props} />;
+  return (
+    <AriaCalendarCell {...props} className="react-aria-CalendarCell button-base" data-variant="quiet" />
+  );
 }
 
 export function CalendarGrid(props: CalendarGridProps) {
   return <AriaCalendarGrid {...props} />;
-}
\ No newline at end of file
+}
diff --git a/starters/docs/src/Checkbox.css b/starters/docs/src/Checkbox.css
index b51b5036da5..b11495a1244 100644
--- a/starters/docs/src/Checkbox.css
+++ b/starters/docs/src/Checkbox.css
@@ -1,24 +1,24 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-Checkbox {
-  --selected-color: var(--highlight-background);
-  --selected-color-pressed: var(--highlight-background-pressed);
   --checkmark-color: var(--highlight-foreground);
 
   display: flex;
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
   align-items: center;
-  gap: 0.499625rem;
-  font-size: 1.000125rem;
+  gap: var(--spacing-2);
+  font: var(--font-size) system-ui;
   color: var(--text-color);
   forced-color-adjust: none;
+  -webkit-tap-highlight-color: transparent;
 
-  .checkbox {
-    width: 1.000125rem;
-    height: 1.000125rem;
-    border: 2px solid var(--border-color);
-    border-radius: 4px;
+  .indicator {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+    box-sizing: border-box;
+    border-radius: var(--radius-sm);
     transition: all 200ms;
     display: flex;
     align-items: center;
@@ -27,76 +27,33 @@
   }
 
   svg {
-    width: 0.875rem;
-    height: 0.875rem;
+    width: calc(100% - var(--spacing-2));
+    height: calc(100% - var(--spacing-2));
     fill: none;
     stroke: var(--checkmark-color);
     stroke-width: 3px;
     stroke-dasharray: 22px;
     stroke-dashoffset: 66;
+    stroke-linecap: round;
+    stroke-linejoin: round;
     transition: all 200ms;
   }
 
-  &[data-pressed] .checkbox {
-    border-color: var(--border-color-pressed);
-  }
-
-  &[data-focus-visible] .checkbox {
-    outline: 2px solid var(--focus-ring-color);
-    outline-offset: 2px;
-  }
-
   &[data-selected],
   &[data-indeterminate] {
-    .checkbox {
-      border-color: var(--selected-color);
-      background: var(--selected-color);
-    }
-
-    &[data-pressed] .checkbox {
-      border-color: var(--selected-color-pressed);
-      background: var(--selected-color-pressed);
-    }
-
     svg {
       stroke-dashoffset: 44;
     }
   }
 
   &[data-indeterminate] {
-    & svg {
+    svg {
       stroke: none;
       fill: var(--checkmark-color);
     }
   }
 
-  &[data-invalid] {
-    .checkbox {
-      --checkmark-color: var(--gray-50);
-      border-color: var(--invalid-color);
-    }
-
-    &[data-pressed] .checkbox {
-      border-color: var(--invalid-color-pressed);
-    }
-
-    &[data-selected],
-    &[data-indeterminate] {
-      .checkbox {
-        background: var(--invalid-color);
-      }
-
-      &[data-pressed] .checkbox {
-        background: var(--invalid-color-pressed);
-      }
-    }
-  }
-
   &[data-disabled] {
     color: var(--text-color-disabled);
-
-    .checkbox {
-      border-color: var(--border-color-disabled);
-    }
   }
 }
diff --git a/starters/docs/src/Checkbox.tsx b/starters/docs/src/Checkbox.tsx
index 01ece6db704..20342e1077d 100644
--- a/starters/docs/src/Checkbox.tsx
+++ b/starters/docs/src/Checkbox.tsx
@@ -13,11 +13,11 @@ export function Checkbox(
       <AriaCheckbox {...props}>
         {({ isIndeterminate }) => (
           <>
-            <div className="checkbox">
-              <svg viewBox="0 0 18 18" aria-hidden="true">
+            <div className="indicator">
+              <svg viewBox="0 0 18 18" aria-hidden="true" key={isIndeterminate ? 'indeterminate' : 'check'}>
                 {isIndeterminate
-                  ? <rect x={1} y={7.5} width={15} height={3} />
-                  : <polyline points="1 9 7 14 15 4" />}
+                  ? <rect x={1} y={7.5} width={16} height={3} />
+                  : <polyline points="2 9 7 14 16 4" />}
               </svg>
             </div>
             {children}
diff --git a/starters/docs/src/CheckboxGroup.css b/starters/docs/src/CheckboxGroup.css
index e5f01cab4de..b1356fd8b07 100644
--- a/starters/docs/src/CheckboxGroup.css
+++ b/starters/docs/src/CheckboxGroup.css
@@ -3,10 +3,18 @@
 .react-aria-CheckboxGroup {
   display: flex;
   flex-direction: column;
-  gap: 0.499625rem;
-  color: var(--text-color);
+  
+  .checkbox-items {
+    display: flex;
+    gap: var(--spacing-3);
+    flex-direction: column;
+  }
+
+  &[data-orientation=vertical] .checkbox-items {
+    flex-direction: column;
+  }
 
-  [slot=description] {
-    font-size: 12px;
+  &[data-orientation=horizontal] .checkbox-items {
+    flex-direction: row;
   }
 }
diff --git a/starters/docs/src/CheckboxGroup.tsx b/starters/docs/src/CheckboxGroup.tsx
index 4d5f0e25257..644da0a1ebc 100644
--- a/starters/docs/src/CheckboxGroup.tsx
+++ b/starters/docs/src/CheckboxGroup.tsx
@@ -4,9 +4,7 @@ import {
   CheckboxGroupProps as AriaCheckboxGroupProps,
   ValidationResult
 } from 'react-aria-components';
-import {Text} from './Content';
-import {Label, FieldError} from './Form';
-
+import {Label, FieldError, Description} from './Form';
 import './CheckboxGroup.css';
 
 export interface CheckboxGroupProps
@@ -15,6 +13,7 @@ export interface CheckboxGroupProps
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
+  orientation?: 'horizontal' | 'vertical'
 }
 
 export function CheckboxGroup(
@@ -23,17 +22,18 @@ export function CheckboxGroup(
     description,
     errorMessage,
     children,
+    orientation = 'vertical',
     ...props
   }: CheckboxGroupProps
 ) {
   return (
-    (
-      <AriaCheckboxGroup {...props}>
-        {label && <Label>{label}</Label>}
+    <AriaCheckboxGroup {...props} data-orientation={orientation}>
+      {label && <Label>{label}</Label>}
+      <div className="checkbox-items">
         {children}
-        {description && <Text slot="description">{description}</Text>}
-        <FieldError>{errorMessage}</FieldError>
-      </AriaCheckboxGroup>
-    )
+      </div>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </AriaCheckboxGroup>
   );
 }
diff --git a/starters/docs/src/ColorArea.css b/starters/docs/src/ColorArea.css
index 420833d8e06..4be762f0c7d 100644
--- a/starters/docs/src/ColorArea.css
+++ b/starters/docs/src/ColorArea.css
@@ -2,7 +2,7 @@
 .react-aria-ColorArea {
   width: 192px;
   height: 192px;
-  border-radius: 4px;
+  border-radius: var(--radius);
   flex-shrink: 0;
 }
 
diff --git a/starters/docs/src/ColorField.css b/starters/docs/src/ColorField.css
index ee8974f8443..df5451645fe 100644
--- a/starters/docs/src/ColorField.css
+++ b/starters/docs/src/ColorField.css
@@ -1,42 +1,7 @@
 @import "./theme.css";
+@import "./TextField.css";
 
 .react-aria-ColorField {
   display: flex;
   flex-direction: column;
-  color: var(--text-color);
-
-  .react-aria-Input {
-    padding: 0.25025rem;
-    margin: 0;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background: var(--field-background);
-    font-size: 1.000125rem;
-    color: var(--field-text-color);
-    width: 100%;
-    max-width: 12ch;
-    box-sizing: border-box;
-
-    &[data-focused] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -1px;
-    }
-  }
-
-  &[data-invalid] {
-    .react-aria-Input {
-      border-color: var(--invalid-color);
-    }
-  }
-
-  [slot=description] {
-    font-size: 12px;
-  }
-
-  .react-aria-Input {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-      color: var(--text-color-disabled);
-    }
-  }
 }
diff --git a/starters/docs/src/ColorField.tsx b/starters/docs/src/ColorField.tsx
index 800ec34abe1..415df12f706 100644
--- a/starters/docs/src/ColorField.tsx
+++ b/starters/docs/src/ColorField.tsx
@@ -6,7 +6,7 @@ import {
   ValidationResult
 } from 'react-aria-components';
 import {Text} from './Content';
-import {Label, FieldError} from './Form';
+import {Label, FieldError, Description} from './Form';
 
 import './ColorField.css';
 
@@ -23,8 +23,8 @@ export function ColorField(
     (
       <AriaColorField {...props}>
         {label && <Label>{label}</Label>}
-        <Input />
-        {description && <Text slot="description">{description}</Text>}
+        <Input className="react-aria-Input inset" />
+        {description && <Description>{description}</Description>}
         <FieldError>{errorMessage}</FieldError>
       </AriaColorField>
     )
diff --git a/starters/docs/src/ColorPicker.css b/starters/docs/src/ColorPicker.css
index ea8e88f6ff7..ea05e05b90f 100644
--- a/starters/docs/src/ColorPicker.css
+++ b/starters/docs/src/ColorPicker.css
@@ -6,13 +6,13 @@
   padding: 0;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-2);
   outline: none;
-  border-radius: 4px;
   appearance: none;
   vertical-align: middle;
-  font-size: 0.875rem;
+  font: var(--font-size) system-ui;
   color: var(--text-color);
+  -webkit-tap-highlight-color: transparent;
 
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
@@ -20,14 +20,11 @@
   }
 }
 
-.color-picker-dialog {
-  outline: none;
-  padding: 15px;
+.react-aria-Popover.color-picker-dialog {
+  padding: var(--spacing-3);
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--spacing-2);
   min-width: 192px;
   max-height: inherit;
-  box-sizing: border-box;
-  overflow: auto;
 }
diff --git a/starters/docs/src/ColorPicker.tsx b/starters/docs/src/ColorPicker.tsx
index 218ee783c10..71059433db1 100644
--- a/starters/docs/src/ColorPicker.tsx
+++ b/starters/docs/src/ColorPicker.tsx
@@ -1,10 +1,10 @@
 'use client';
 import {
+  Button,
   ColorPicker as AriaColorPicker,
   ColorPickerProps as AriaColorPickerProps
 } from 'react-aria-components';
 import {DialogTrigger} from './Dialog';
-import {Button} from './Button';
 import {ColorSwatch} from './ColorSwatch';
 import {ColorSlider} from './ColorSlider';
 import {ColorArea} from './ColorArea';
diff --git a/starters/docs/src/ColorSlider.css b/starters/docs/src/ColorSlider.css
index ac637899065..64afc887dbb 100644
--- a/starters/docs/src/ColorSlider.css
+++ b/starters/docs/src/ColorSlider.css
@@ -3,30 +3,29 @@
   grid-template-areas: "label output"
                        "track track";
   grid-template-columns: 1fr auto;
-  gap: 4px;
+  gap: var(--spacing-1);
   width: 100%;
   max-width: 300px;
 
   .react-aria-Label {
     grid-area: label;
-    color: var(--text-color);
   }
 
   .react-aria-SliderOutput {
     grid-area: output;
-    width: 4ch;
     text-align: end;
+    font: var(--font-size) system-ui;
     color: var(--text-color);
   }
 
   .react-aria-SliderTrack {
     grid-area: track;
-    border-radius: 4px;
+    border-radius: var(--radius);
   }
 
   &[data-orientation=horizontal] {
     .react-aria-SliderTrack {
-      height: 28px;
+      height: var(--spacing-7);
     }
 
     .react-aria-ColorThumb {
@@ -44,7 +43,7 @@
     }
 
     .react-aria-SliderTrack {
-      width: 28px;
+      width: var(--spacing-7);
       height: 100%;
     }
 
diff --git a/starters/docs/src/ColorSwatch.css b/starters/docs/src/ColorSwatch.css
index 0b02eecc3fe..c7cbc1c6d96 100644
--- a/starters/docs/src/ColorSwatch.css
+++ b/starters/docs/src/ColorSwatch.css
@@ -1,6 +1,8 @@
+@import "./theme.css";
+
 .react-aria-ColorSwatch {
-  width: 32px;
-  height: 32px;
-  border-radius: 4px;
+  width: var(--spacing-8);
+  height: var(--spacing-8);
+  border-radius: 9999px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
diff --git a/starters/docs/src/ColorSwatchPicker.css b/starters/docs/src/ColorSwatchPicker.css
index 55afb7361bc..eef9ad77ee6 100644
--- a/starters/docs/src/ColorSwatchPicker.css
+++ b/starters/docs/src/ColorSwatchPicker.css
@@ -9,9 +9,10 @@
 .react-aria-ColorSwatchPickerItem {
   position: relative;
   outline: none;
-  border-radius: 4px;
+  border-radius: 9999px;
   width: fit-content;
   forced-color-adjust: none;
+  -webkit-tap-highlight-color: transparent;
 
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
diff --git a/starters/docs/src/ColorThumb.css b/starters/docs/src/ColorThumb.css
index a2f0d0e5d2a..f13045448a4 100644
--- a/starters/docs/src/ColorThumb.css
+++ b/starters/docs/src/ColorThumb.css
@@ -3,14 +3,14 @@
 .react-aria-ColorThumb {
   border: 2px solid white;
   box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
-  width: 20px;
-  height: 20px;
+  width: var(--spacing-5);
+  height: var(--spacing-5);
   border-radius: 50%;
   box-sizing: border-box;
 
   &[data-focus-visible] {
-    width: 24px;
-    height: 24px;
+    width: var(--spacing-6);
+    height: var(--spacing-6);
   }
 
   &[data-disabled] {
diff --git a/starters/docs/src/ComboBox.css b/starters/docs/src/ComboBox.css
index 09a7e8d3e70..18b123754c7 100644
--- a/starters/docs/src/ComboBox.css
+++ b/starters/docs/src/ComboBox.css
@@ -1,38 +1,26 @@
 @import "./theme.css";
+@import "./TextField.css";
 
 .react-aria-ComboBox {
   color: var(--text-color);
+  width: calc(var(--spacing) * 50);
 
-  > div:has(.react-aria-Input) {
+  .combobox-field {
     display: flex;
     align-items: center;
+    height: var(--spacing-8);
+    width: 100%;
   }
 
   .react-aria-Input {
-    margin: 0;
-    font-size: 0.9380000000000001rem;
-    background: var(--field-background);
-    color: var(--field-text-color);
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 0.25025rem 1.75rem 0.25025rem 0.499625rem;
-    vertical-align: middle;
-    outline: none;
-    min-width: 0;
-
-    &[data-focused] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -1px;
-    }
-  }
-
-  .field-Button {
-    margin-left: -1.49975rem;
+    width: 100%;
+    padding: 0 calc(var(--spacing-3) + var(--spacing-6)) 0 var(--spacing-3);
   }
 }
 
 .react-aria-Popover[data-trigger=ComboBox] {
   width: var(--trigger-width);
+  padding: 0;
 
   .react-aria-ListBox {
     display: block;
@@ -45,62 +33,4 @@
       padding-left: 1.374625rem;
     }
   }
-
-  .react-aria-ListBoxItem {
-    padding: 0 0.499625rem 0 1.374625rem;
-
-    &[data-focus-visible] {
-      outline: none;
-    }
-
-    &[data-selected] {
-      font-weight: 600;
-      background: unset;
-      color: var(--text-color);
-
-      &::before {
-        content: '✓';
-        content: '✓' / '';
-        alt: ' ';
-        position: absolute;
-        top: 4px;
-        left: 4px;
-      }
-    }
-
-    &[data-focused],
-    &[data-pressed] {
-      background: var(--highlight-background);
-      color: var(--highlight-foreground);
-    }
-  }
-}
-
-.react-aria-ListBoxItem[href] {
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.react-aria-ComboBox {
-  .react-aria-Input {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-    }
-  }
-
-  .react-aria-Button {
-    &[data-disabled] {
-      background: var(--border-color-disabled);
-    }
-  }
-
-  .react-aria-Input {
-    &[data-invalid]:not([data-focused]) {
-      border-color: var(--invalid-color);
-    }
-  }
-
-  [slot=description] {
-    font-size: 12px;
-  }
 }
diff --git a/starters/docs/src/ComboBox.tsx b/starters/docs/src/ComboBox.tsx
index c9ad4ea8221..ffad81d59ea 100644
--- a/starters/docs/src/ComboBox.tsx
+++ b/starters/docs/src/ComboBox.tsx
@@ -6,9 +6,8 @@ import {
   ListBoxItemProps,
   ValidationResult
 } from 'react-aria-components';
-import {Label, FieldError, FieldButton} from './Form';
-import {Text} from './Content';
-import {ListBox, ListBoxItem} from './ListBox';
+import {Label, FieldError, FieldButton, Description} from './Form';
+import {DropdownItem, ListBox} from './ListBox';
 import {Popover} from './Popover';
 import {ChevronDown} from 'lucide-react';
 
@@ -26,27 +25,23 @@ export function ComboBox<T extends object>(
   { label, description, errorMessage, children, ...props }: ComboBoxProps<T>
 ) {
   return (
-    (
-      <AriaComboBox {...props}>
-        {({isInvalid}) => (<>
-          <Label>{label}</Label>
-          <div className="my-combobox-container">
-            <Input />
-            <FieldButton><ChevronDown size={16} /></FieldButton>
-          </div>
-          {description && !isInvalid && <Text slot="description">{description}</Text>}
-          <FieldError>{errorMessage}</FieldError>
-          <Popover hideArrow>
-            <ListBox>
-              {children}
-            </ListBox>
-          </Popover>
-        </>)}
-      </AriaComboBox>
-    )
+    <AriaComboBox {...props}>
+      <Label>{label}</Label>
+      <div className="combobox-field">
+        <Input className="react-aria-Input inset" />
+        <FieldButton><ChevronDown size={16} /></FieldButton>
+      </div>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+      <Popover hideArrow>
+        <ListBox>
+          {children}
+        </ListBox>
+      </Popover>
+    </AriaComboBox>
   );
 }
 
 export function ComboBoxItem(props: ListBoxItemProps) {
-  return <ListBoxItem {...props} />;
+  return <DropdownItem {...props} />;
 }
diff --git a/starters/docs/src/DateField.css b/starters/docs/src/DateField.css
index b7de2feec2f..4d78ed363aa 100644
--- a/starters/docs/src/DateField.css
+++ b/starters/docs/src/DateField.css
@@ -1,21 +1,25 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-DateField {
-  color: var(--text-color);
   display: flex;
   flex-direction: column;
 }
 
 .react-aria-DateInput {
   display: inline;
-  padding: 4px;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  background: var(--field-background);
+  padding: 0 var(--spacing-3);
+  box-sizing: border-box;
+  border-radius: var(--radius);
+  font: var(--font-size) system-ui;
+  color: var(--field-text-color);
+  height: var(--spacing-8);
+  line-height: var(--spacing-8);
   width: fit-content;
   min-width: 150px;
   white-space: nowrap;
   forced-color-adjust: none;
+  cursor: text;
 
   &[data-focus-within] {
     outline: 2px solid var(--focus-ring-color);
@@ -23,22 +27,17 @@
   }
 
   &[data-disabled] {
-    border-color: var(--border-color-disabled);
-    color: var(--text-color-disabled);
-  }
-}
-
-.react-aria-DateField[data-disabled] {
-  .react-aria-DateSegment {
     color: var(--text-color-disabled);
   }
 }
 
 .react-aria-DateSegment {
-  padding: 0 2px;
+  padding: 2px;
+  font-size: var(--font-size);
   font-variant-numeric: tabular-nums;
   text-align: end;
-  color: var(--text-color);
+  color: var(--field-text-color);
+  -webkit-tap-highlight-color: transparent;
 
   &[data-type=literal] {
     padding: 0;
@@ -46,7 +45,6 @@
 
   &[data-placeholder] {
     color: var(--text-color-placeholder);
-    font-style: italic;
   }
 
   &:focus {
@@ -65,15 +63,9 @@
       color: var(--highlight-foreground);
     }
   }
-}
 
-.react-aria-DateField {
-  .react-aria-FieldError {
-    font-size: 12px;
-    color: var(--invalid-color);
-  }
-
-  [slot=description] {
-    font-size: 12px;
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+    cursor: default;
   }
 }
diff --git a/starters/docs/src/DateField.tsx b/starters/docs/src/DateField.tsx
index b7863acf478..2d47fc52550 100644
--- a/starters/docs/src/DateField.tsx
+++ b/starters/docs/src/DateField.tsx
@@ -9,9 +9,7 @@ import {
   DateValue,
   ValidationResult
 } from 'react-aria-components';
-import {Label, FieldError} from './Form';
-import {Text} from './Content';
-
+import {Label, FieldError, Description} from './Form';
 import './DateField.css';
 
 export interface DateFieldProps<T extends DateValue>
@@ -25,16 +23,14 @@ export function DateField<T extends DateValue>(
   { label, description, errorMessage, ...props }: DateFieldProps<T>
 ) {
   return (
-    (
-      <AriaDateField {...props}>
-        <Label>{label}</Label>
-        <DateInput>
-          {(segment) => <DateSegment segment={segment} />}
-        </DateInput>
-        {description && <Text slot="description">{description}</Text>}
-        <FieldError>{errorMessage}</FieldError>
-      </AriaDateField>
-    )
+    <AriaDateField {...props}>
+      <Label>{label}</Label>
+      <DateInput>
+        {(segment) => <DateSegment segment={segment} />}
+      </DateInput>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </AriaDateField>
   );
 }
 
@@ -43,5 +39,5 @@ export function DateSegment(props: DateSegmentProps) {
 }
 
 export function DateInput(props: DateInputProps) {
-  return <AriaDateInput {...props} />;
+  return <AriaDateInput {...props} className="react-aria-DateInput inset" />;
 }
diff --git a/starters/docs/src/DatePicker.css b/starters/docs/src/DatePicker.css
index 3f0113572ad..b5662674b01 100644
--- a/starters/docs/src/DatePicker.css
+++ b/starters/docs/src/DatePicker.css
@@ -1,34 +1,14 @@
 @import "./theme.css";
 
 .react-aria-DatePicker {
-  color: var(--text-color);
-
   .react-aria-Group {
     display: flex;
-    width: fit-content;
+    width: 100%;
     align-items: center;
+    height: var(--spacing-8);
   }
 
   .react-aria-DateInput {
-    padding: 4px 2.1875rem 4px 8px;
-  }
-
-  &[data-invalid] {
-    .react-aria-DateInput:after {
-      content: '🚫' / '';
-      content: '🚫';
-      alt: ' ';
-      flex: 1;
-      text-align: end;
-    }
+    width: 100%;
   }
-
-  [slot=description] {
-    font-size: 12px;
-  }
-}
-
-.react-aria-Popover[data-trigger=DatePicker] {
-  max-width: unset;
-  padding: 15px;
 }
diff --git a/starters/docs/src/DatePicker.tsx b/starters/docs/src/DatePicker.tsx
index 6eded1646ee..4fe3d4c7ef7 100644
--- a/starters/docs/src/DatePicker.tsx
+++ b/starters/docs/src/DatePicker.tsx
@@ -7,8 +7,7 @@ import {
   ValidationResult
 } from 'react-aria-components';
 import {DateInput, DateSegment} from './DateField';
-import {Label, FieldError} from './Form';
-import {Text} from './Content';
+import {Label, FieldError, Description} from './Form';
 import {FieldButton} from './Form';
 import {Calendar} from './Calendar';
 import {Popover} from './Popover';
@@ -23,25 +22,22 @@ export interface DatePickerProps<T extends DateValue> extends AriaDatePickerProp
 }
 
 export function DatePicker<T extends DateValue>(
-  { label, description, errorMessage, ...props }:
-    DatePickerProps<T>
+  { label, description, errorMessage, ...props }: DatePickerProps<T>
 ) {
   return (
-    (
-      <AriaDatePicker {...props}>
-        <Label>{label}</Label>
-        <Group>
-          <DateInput>
-            {(segment) => <DateSegment segment={segment} />}
-          </DateInput>
-          <FieldButton><ChevronDown size={16} /></FieldButton>
-        </Group>
-        {description && <Text slot="description">{description}</Text>}
-        <FieldError>{errorMessage}</FieldError>
-        <Popover hideArrow>
-          <Calendar />
-        </Popover>
-      </AriaDatePicker>
-    )
+    <AriaDatePicker {...props}>
+      <Label>{label}</Label>
+      <Group>
+        <DateInput>
+          {(segment) => <DateSegment segment={segment} />}
+        </DateInput>
+        <FieldButton><ChevronDown size={16} /></FieldButton>
+      </Group>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+      <Popover hideArrow>
+        <Calendar />
+      </Popover>
+    </AriaDatePicker>
   );
 }
diff --git a/starters/docs/src/DateRangePicker.css b/starters/docs/src/DateRangePicker.css
index 971af2700a4..e73cb6552c3 100644
--- a/starters/docs/src/DateRangePicker.css
+++ b/starters/docs/src/DateRangePicker.css
@@ -1,4 +1,5 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-DateRangePicker {
   color: var(--text-color);
@@ -9,31 +10,32 @@
     width: fit-content;
     min-width: 220px;
     max-width: 100%;
+    height: var(--spacing-8);
     box-sizing: border-box;
     overflow: clip;
     position: relative;
-    padding: 4px 4px 4px 8px;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background: var(--field-background);
+    padding: 0 var(--spacing-1) 0 var(--spacing-3);
+    border-radius: var(--radius);
+    font-size: var(--font-size);
+    color: var(--field-text-color);
     white-space: nowrap;
-
-    &[data-pressed] {
-      box-shadow: none;
-      background: var(--highlight-background);
-    }
+    cursor: text;
 
     &[data-focus-within] {
       outline: 2px solid var(--focus-ring-color);
       outline-offset: -1px;
     }
+
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
   }
 
   .field-Button {
     margin-left: auto;
   }
 
-  [slot=start] + span {
+  [slot=start] ~ span {
     padding: 0 4px;
   }
 
@@ -47,29 +49,12 @@
     min-width: unset;
     padding: unset;
     border: unset;
+    box-shadow: none;
+    background: none;
+    height: auto;
+    line-height: normal;
     &[data-focus-within] {
       outline: unset;
     }
   }
-
-  &[data-invalid] {
-    [slot=end]:after {
-      content: '🚫' / '';
-      content: '🚫';
-      alt: ' ';
-      flex: 1;
-      text-align: end;
-      margin-left: 1.3125rem;
-      margin-right: -1.3125rem;
-    }
-  }
-
-  [slot=description] {
-    font-size: 12px;
-  }
-}
-
-.react-aria-Popover[data-trigger=DateRangePicker] {
-  max-width: unset;
-  padding: 15px;
 }
diff --git a/starters/docs/src/DateRangePicker.tsx b/starters/docs/src/DateRangePicker.tsx
index 9de0ab7e10c..237932e2c60 100644
--- a/starters/docs/src/DateRangePicker.tsx
+++ b/starters/docs/src/DateRangePicker.tsx
@@ -7,10 +7,9 @@ import {
   ValidationResult
 } from 'react-aria-components';
 import {DateInput, DateSegment} from './DateField';
-import {FieldButton} from './Form';
+import {Description, FieldButton} from './Form';
 import {Popover} from './Popover';
 import {Label, FieldError} from './Form';
-import {Text} from './Content';
 import {RangeCalendar} from './RangeCalendar';
 import {ChevronDown} from 'lucide-react';
 import './DateRangePicker.css';
@@ -23,29 +22,26 @@ export interface DateRangePickerProps<T extends DateValue>
 }
 
 export function DateRangePicker<T extends DateValue>(
-  { label, description, errorMessage, ...props }:
-    DateRangePickerProps<T>
+  { label, description, errorMessage, ...props }: DateRangePickerProps<T>
 ) {
   return (
-    (
-      <AriaDateRangePicker {...props}>
-        <Label>{label}</Label>
-        <Group>
-          <DateInput slot="start">
-            {(segment) => <DateSegment segment={segment} />}
-          </DateInput>
-          <span aria-hidden="true">–</span>
-          <DateInput slot="end">
-            {(segment) => <DateSegment segment={segment} />}
-          </DateInput>
-          <FieldButton><ChevronDown size={16} /></FieldButton>
-        </Group>
-        {description && <Text slot="description">{description}</Text>}
-        <FieldError>{errorMessage}</FieldError>
-        <Popover hideArrow>
-          <RangeCalendar />
-        </Popover>
-      </AriaDateRangePicker>
-    )
+    <AriaDateRangePicker {...props}>
+      <Label>{label}</Label>
+      <Group className="react-aria-Group inset">
+        <DateInput slot="start">
+          {(segment) => <DateSegment segment={segment} />}
+        </DateInput>
+        <span aria-hidden="true">–</span>
+        <DateInput slot="end">
+          {(segment) => <DateSegment segment={segment} />}
+        </DateInput>
+        <FieldButton><ChevronDown size={16} /></FieldButton>
+      </Group>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+      <Popover hideArrow>
+        <RangeCalendar />
+      </Popover>
+    </AriaDateRangePicker>
   );
 }
diff --git a/starters/docs/src/Dialog.css b/starters/docs/src/Dialog.css
index 8fd78c0c062..f5fb12d40e4 100644
--- a/starters/docs/src/Dialog.css
+++ b/starters/docs/src/Dialog.css
@@ -5,10 +5,10 @@
   max-height: inherit;
   box-sizing: border-box;
   overflow: auto;
-  padding: 30px;
+  padding: var(--spacing-10);
 
   .react-aria-Heading[slot=title] {
-    line-height: 1em;
     margin-top: 0;
+    margin-bottom: 1em;
   }
 }
diff --git a/starters/docs/src/Disclosure.css b/starters/docs/src/Disclosure.css
index 71f42ac205d..972dad68934 100644
--- a/starters/docs/src/Disclosure.css
+++ b/starters/docs/src/Disclosure.css
@@ -1,22 +1,48 @@
 @import "./theme.css";
 
 .react-aria-Disclosure {
-  width: 100%;
+  width: calc(var(--spacing) * 50);
 
   .react-aria-Heading {
     margin: 0;
-    padding: 0.5em 0;
   }
 
-  .react-aria-Button[slot=trigger] {
+  .disclosure-button {
     background: none;
     border: none;
     box-shadow: none;
-    font-weight: bold;
-    font-size: 16px;
+    text-shadow: none;
+    width: 100%;
+    color: var(--text-color);
+    font: var(--font-size) system-ui;
+    font-weight: 600;
     display: flex;
     align-items: center;
-    gap: 8px;
+    text-align: start;
+    gap: var(--spacing-1);
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius);
+    transition: all 200ms;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+
+    &[data-hovered],
+    &[data-pressed] {
+      background: var(--gray-300);
+      color: var(--text-color-hover)
+    }
+
+    &[data-pressed] {
+      scale: 0.97;
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+    }
+
+    &[data-disabled] {
+      color: var(--text-color-disabled);
+    }
 
     svg {
       rotate: 0deg;
@@ -27,13 +53,12 @@
     }
   }
 
-  &[data-expanded] .react-aria-Button[slot=trigger] svg {
+  &[data-expanded] .disclosure-button svg {
     rotate: 90deg;
   }
 }
 
 .react-aria-DisclosurePanel {
-  margin-left: 26px;
   color: var(--text-color);
   height: var(--disclosure-panel-height);
   transition: height 250ms;
@@ -42,4 +67,8 @@
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
+
+  div {
+    padding: var(--spacing-2) var(--spacing-4);
+  }
 }
diff --git a/starters/docs/src/Disclosure.tsx b/starters/docs/src/Disclosure.tsx
index 559b4de8a6e..6522aec4d0f 100644
--- a/starters/docs/src/Disclosure.tsx
+++ b/starters/docs/src/Disclosure.tsx
@@ -18,9 +18,9 @@ export function Disclosure(props: DisclosureProps) {
 export function DisclosureHeader({children, ...props}: HeadingProps) {
   return (
     <Heading {...props}>
-      <Button slot="trigger">
-        <ChevronRight size={18} />
-        {children}
+      <Button slot="trigger" className="disclosure-button">
+        <ChevronRight size={16} />
+        <span>{children}</span>
       </Button>
     </Heading>
   );
diff --git a/starters/docs/src/DisclosureGroup.css b/starters/docs/src/DisclosureGroup.css
index f5460549745..f80885e85f6 100644
--- a/starters/docs/src/DisclosureGroup.css
+++ b/starters/docs/src/DisclosureGroup.css
@@ -1,5 +1,5 @@
 @import "./theme.css";
 
 .react-aria-DisclosureGroup {
-  width: 100%;
+  width: 200px;
 }
diff --git a/starters/docs/src/DropZone.css b/starters/docs/src/DropZone.css
index ce4030d364f..efd8a1600e9 100644
--- a/starters/docs/src/DropZone.css
+++ b/starters/docs/src/DropZone.css
@@ -5,7 +5,7 @@
   background: var(--overlay-background);
   border: 1px solid var(--border-color);
   forced-color-adjust: none;
-  border-radius: 4px;
+  border-radius: var(--radius);
   appearance: none;
   vertical-align: middle;
   font-size: 1rem;
diff --git a/starters/docs/src/Form.css b/starters/docs/src/Form.css
index c319c6172b5..b22f0406ae9 100644
--- a/starters/docs/src/Form.css
+++ b/starters/docs/src/Form.css
@@ -3,8 +3,11 @@
 .react-aria-Form {
   display: flex;
   flex-direction: column;
-  align-items: start;
-  gap: 8px;
+  gap: var(--spacing-6);
+
+  > .react-aria-Button {
+    align-self: start;
+  }
 }
 
 .react-aria-Form [role=alert] {
@@ -30,40 +33,71 @@
 }
 
 .react-aria-Label {
+  display: block;
+  font: var(--font-size) system-ui;
   color: var(--text-color);
-  margin-bottom: 0.5em;
-  font-size: 16px;
+  margin-bottom: var(--spacing-2);
+  font-weight: 500;
+  contain: inline-size;
 }
 
 .react-aria-FieldError {
-  font-size: 12px;
+  display: block;
+  font: var(--font-size-sm) system-ui;
   color: var(--invalid-color);
+  margin-top: var(--spacing-1);
+  contain: inline-size;
+}
+
+.field-description {
+  display: block;
+  font: var(--font-size-sm) system-ui;
+  margin-top: var(--spacing-1);
+  contain: inline-size;
+
+  [data-invalid] > & {
+    display: none;
+  }
 }
 
 .field-Button {
-  background: var(--highlight-background);
-  color: var(--highlight-foreground);
-  border: 2px solid var(--field-background);
+  background: var(--tint-200);
+  color: var(--tint-1400);
   forced-color-adjust: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   border: none;
-  margin-left: -1.687875rem;
-  width: 1.250375rem;
-  height: 1.250375rem;
+  margin-left: calc(-1 * var(--spacing-8) + 4px);
+  height: calc(100% - 8px);
+  aspect-ratio: 1/1;
   padding: 0;
-  font-size: 0.749875rem;
-  box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition-property: scale, background;
+  transition-duration: 200ms;
+  -webkit-tap-highlight-color: transparent;
+
+  &:where([data-hovered], [data-pressed]) {
+    background: var(--tint-300);
+    color: var(--tint-1200);
+  }
+
+  @media (forced-colors: active) {
+    background: Highlight;
+    color: HighlightText;
+  }
 
   &[data-pressed] {
-    box-shadow: none;
-    background: var(--highlight-background);
+    scale: 0.9;
   }
 
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
     outline-offset: 2px;
   }
+
+  &[data-disabled] {
+    background: none;
+    color: var(--text-color-disabled);
+  }
 }
\ No newline at end of file
diff --git a/starters/docs/src/Form.tsx b/starters/docs/src/Form.tsx
index 8eb18e49273..745e5e738d0 100644
--- a/starters/docs/src/Form.tsx
+++ b/starters/docs/src/Form.tsx
@@ -7,9 +7,11 @@ import {
   FieldErrorProps,
   FieldError as RACFieldError,
   ButtonProps,
-  Button
+  Button,
+  TextProps
 } from 'react-aria-components';
 import './Form.css';
+import { Text } from './Content';
 
 export function Form(props: FormProps) {
   return <RACForm {...props} />;
@@ -23,6 +25,10 @@ export function FieldError(props: FieldErrorProps) {
   return <RACFieldError {...props} />;
 }
 
+export function Description(props: TextProps) {
+  return <Text slot="description" className="field-description" {...props} />
+}
+
 export function FieldButton(props: ButtonProps) {
   return <Button {...props} className="field-Button" />;
 }
diff --git a/starters/docs/src/GridList.css b/starters/docs/src/GridList.css
index 5aece571555..2799d11cfba 100644
--- a/starters/docs/src/GridList.css
+++ b/starters/docs/src/GridList.css
@@ -1,188 +1,214 @@
 @import "./theme.css";
 
 .react-aria-GridList {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+  display: grid;
+  justify-content: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-2);
+  scroll-padding: var(--spacing-2);
+  border-radius: var(--radius);
   max-height: inherit;
   overflow: auto;
-  padding: 4px;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  background: var(--overlay-background);
   forced-color-adjust: none;
   outline: none;
-  width: 250px;
-  max-height: 300px;
+  width: 100%;
+  max-height: 500px;
   min-height: 100px;
   box-sizing: border-box;
+  --grid-item-size: 200px;
+
+  &[data-layout=grid] {
+    grid-template-columns: repeat(auto-fit, minmax(100px, var(--grid-item-size)));
+    grid-auto-rows: min-content;
+  }
+
+  &[data-size=small] {
+    --grid-item-size: 150px;
+  }
+
+  &[data-layout=stack] {
+    grid-template-columns: auto;
+    align-items: center;
+  }
 
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
-    outline-offset: -1px;
   }
 
-  .react-aria-GridListItem {
+  &[data-empty] {
     display: flex;
     align-items: center;
-    gap: 0.499625rem;
-    min-height: 28px;
-    padding: 0.25025rem 0.25025rem 0.25025rem 0.499625rem;
-    border-radius: 6px;
-    outline: none;
-    cursor: default;
-    color: var(--text-color);
-    font-size: 0.9380000000000001rem;
-    position: relative;
-    transform: translateZ(0);
+    justify-content: center;
+    font-style: italic;
+  }
 
-    &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -2px;
-    }
+  &[data-drop-target] {
+    outline: 2px solid var(--highlight-background);
+    outline-offset: -1px;
+    background: var(--highlight-overlay);
+  }
 
-    &[data-pressed] {
-      background: var(--gray-100);
+  .react-aria-DropIndicator {
+    display: none;
+    &[data-drop-target] {
+      display: block;
+      outline: 2px solid var(--highlight-background);
+      outline-offset: -1px;
+      background: var(--highlight-overlay);
+      border-radius: var(--radius);
     }
+  }
+}
 
-    &[data-selected] {
-      background: var(--highlight-background);
-      color: var(--highlight-foreground);
-      --focus-ring-color: var(--highlight-foreground);
+.react-aria-GridListItem {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  border-radius: var(--radius);
+  outline: none;
+  cursor: default;
+  color: var(--text-color);
+  font: var(--font-size) system-ui;
+  box-sizing: border-box;
+  padding-bottom: var(--spacing-4);
+  background: var(--overlay-background);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
+  max-width: 250px;
+  overflow: clip;
+  position: relative;
+  transform: translateZ(0);
+  transition-property: scale;
+  transition-duration: 200ms;
+  -webkit-tap-highlight-color: transparent;
 
-      &[data-focus-visible] {
-        outline-color: var(--highlight-foreground);
-        outline-offset: -4px;
-      }
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
 
-      .react-aria-Button {
-        color: var(--highlight-foreground);
-        --highlight-hover: rgb(255 255 255 / 0.1);
-        --highlight-pressed: rgb(255 255 255 / 0.2);
-      }
-    }
+  &[data-pressed] {
+    scale: 0.98;
+  }
 
-    &[data-disabled] {
-      color: var(--text-color-disabled);
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    border: 2px solid light-dark(black, white);
+    outline: 2px solid light-dark(rgb(255 255 255 / 0.7), rgb(0 0 0 / 0.7));
+    outline-offset: -4px;
+    opacity: 0;
+    transition: opacity 200ms;
+  }
 
-    .react-aria-Button:not([slot]) {
-      margin-left: auto;
+  &[data-selected] {
+    &::after {
+      opacity: 1;
     }
+  }
 
-    .react-aria-Button {
-      background: transparent;
-      border: none;
-      font-size: 1.05rem;
-      line-height: 1.2em;
-      padding: 0.25025rem 0.375375rem;
-      transition: background 200ms;
+  &[data-href] {
+    cursor: pointer;
+  }
 
-      &[data-hovered] {
-        background: var(--highlight-hover);
-      }
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+  }
 
-      &[data-pressed] {
-        background: var(--highlight-pressed);
-        box-shadow: none;
-      }
-    }
+  .react-aria-Checkbox {
+    position: absolute;
+    top: var(--spacing-4);
+    inset-inline-start: var(--spacing-4);
+    --focus-ring-color: var(--highlight-foreground);
+    --checkmark-color: light-dark(white, black);
+
+    .indicator {
+      --indicator-border: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.7));
 
-    .react-aria-Button[slot='drag'] {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      @media (forced-colors: active) {
+        --indicator-border: ButtonBorder;
+      }
     }
-  }
 
-  /* join selected items if :has selector is supported */
-  @supports selector(:has(.foo)) {
-    gap: 0;
+    &[data-selected] .indicator {
+      --indicator-color: light-dark(black, var(--highlight-foreground));
+      --indicator-shadow: transparent;
 
-    .react-aria-GridListItem[data-selected]:has(+ [data-selected]),
-    .react-aria-GridListItem[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
-      border-end-start-radius: 0;
-      border-end-end-radius: 0;
+      @media (forced-colors: active) {
+        --indicator-color: Highlight;
+        --checkmark-color: HighlightText;
+      }
     }
 
-    .react-aria-GridListItem[data-selected] + [data-selected],
-    .react-aria-GridListItem[data-selected] + .react-aria-DropIndicator + [data-selected] {
-      border-start-start-radius: 0;
-      border-start-end-radius: 0;
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -4px;
+      background: light-dark(rgb(255 255 255 / 0.51), rgb(0 0 0 / 0.56));
+      box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px 0px;
+      border-radius: var(--radius);
     }
   }
 
-  :where(.react-aria-GridListItem) .react-aria-Checkbox {
-    --selected-color: var(--highlight-foreground);
-    --selected-color-pressed: var(--highlight-foreground-pressed);
-    --checkmark-color: var(--highlight-background);
-    --background-color: var(--highlight-background);
+  img {
+    width: 100%;
+    height: var(--grid-item-size);
+    object-fit: cover;
+    padding-bottom: var(--spacing-2);
+    -webkit-user-drag: none;
+    flex-shrink: 0;
   }
-}
-
-.react-aria-GridListItem[data-href] {
-  cursor: pointer;
-}
 
-.react-aria-GridList {
-  &[data-empty] {
-    align-items: center;
-    justify-content: center;
-    font-style: italic;
-  }
-}
+  .react-aria-Text {
+    padding: 0 var(--spacing-4);
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
 
-.react-aria-GridListItem {
-  &[data-allows-dragging] {
-    padding-left: 4px;
-  }
+    &:not([slot]) {
+      font-weight: 500;
+    }
 
-  &[data-dragging] {
-    opacity: 0.6;
+    &[slot=description] {
+      font-size: var(--font-size-sm);
+    }
   }
 
-  [slot=drag] {
+  .react-aria-Button[slot=drag] {
     all: unset;
-    width: 15px;
-    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: var(--spacing-2);
+    inset-inline-end: var(--spacing-2);
+    border-radius: var(--radius);
+    color: var(--text-color);
 
     &[data-focus-visible] {
       border-radius: 4px;
       outline: 2px solid var(--focus-ring-color);
     }
   }
-}
 
-.react-aria-DropIndicator {
-  &[data-drop-target] {
-    outline: 1px solid var(--highlight-background);
-  }
-
-  @supports not selector(:has(.foo)) {
-    /* Undo gap in browsers that don't support :has */
-    margin-bottom: -2px;
+  &[data-dragging] {
+    opacity: 0.6;
   }
-}
-
-.react-aria-GridList[data-drop-target] {
-  outline: 2px solid var(--highlight-background);
-  outline-offset: -1px;
-  background: var(--highlight-overlay);
-}
-
-.react-aria-GridListItem[data-drop-target] {
-  outline: 2px solid var(--highlight-background);
-  background:var(--highlight-overlay);
-}
 
-.react-aria-DropIndicator {
   &[data-drop-target] {
-    outline: 1px solid var(--highlight-background);
-  }
-
-  @supports not selector(:has(.foo)) {
-    /* Undo gap in browsers that don't support :has */
-    margin-bottom: -2px;
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      z-index: 5;
+      outline: 2px solid var(--highlight-background);
+      outline-offset: -2px;
+      background: var(--highlight-overlay);
+    }
   }
 }
 
diff --git a/starters/docs/src/GridList.tsx b/starters/docs/src/GridList.tsx
index 4bdcbbc7841..f654de19e51 100644
--- a/starters/docs/src/GridList.tsx
+++ b/starters/docs/src/GridList.tsx
@@ -4,18 +4,21 @@ import {
   GridList as AriaGridList,
   GridListItem as AriaGridListItem,
   GridListItemProps,
-  GridListProps
+  GridListProps,
+  GridListLoadMoreItem as AriaGridListLoadMoreItem,
+  GridListLoadMoreItemProps
 } from 'react-aria-components';
 import {Checkbox} from './Checkbox';
 import {GripVertical} from 'lucide-react';
+import {ProgressCircle} from './ProgressCircle';
 import './GridList.css';
 
 export function GridList<T extends object>(
-  { children, ...props }: GridListProps<T>
+  { children, layout = 'grid', ...props }: GridListProps<T>
 ) {
   return (
     (
-      <AriaGridList {...props}>
+      <AriaGridList {...props} layout={layout}>
         {children}
       </AriaGridList>
     )
@@ -45,3 +48,11 @@ export function GridListItem(
     )
   );
 }
+
+export function GridListLoadMoreItem(props: GridListLoadMoreItemProps) {
+  return (
+    <AriaGridListLoadMoreItem {...props}>
+      <ProgressCircle isIndeterminate aria-label="Loading more..." />
+    </AriaGridListLoadMoreItem>
+  );
+}
diff --git a/starters/docs/src/InputGroup.css b/starters/docs/src/InputGroup.css
index 3ee8563f912..aa18c992183 100644
--- a/starters/docs/src/InputGroup.css
+++ b/starters/docs/src/InputGroup.css
@@ -1,43 +1,37 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .input-group {
   .react-aria-Group {
     display: flex;
     align-items: center;
     width: fit-content;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    background: var(--field-background);
+    padding: 0 var(--spacing-2);
+    border-radius: var(--radius);
+    font-size: var(--font-size);
+    color: var(--field-text-color);
     overflow: hidden;
-    transition: all 200ms;
-
-    &[data-hovered] {
-      border-color: var(--border-color-hover);
-    }
+    height: 32px;
 
     &[data-focus-within] {
       outline: 2px solid var(--focus-ring-color);
       outline-offset: -1px;
     }
 
-    &[data-invalid] {
-      border-color: var(--invalid-color);
-    }
-
     &[data-disabled] {
-      border-color: var(--border-color-disabled);
       color: var(--text-color-disabled);
     }
   }
 
   .react-aria-Input {
-    padding: 0.286rem;
+    padding: var(--spacing-1);
     margin: 0;
-    font-size: 1rem;
+    font: var(--font-size) system-ui;
     color: var(--text-color);
     outline: none;
     border: none;
     background: transparent;
+    box-shadow: none;
 
     &:disabled {
       color: var(--text-color-disabled);
diff --git a/starters/docs/src/InputGroup.tsx b/starters/docs/src/InputGroup.tsx
index 80bcbb1dd46..62fca3eeec2 100644
--- a/starters/docs/src/InputGroup.tsx
+++ b/starters/docs/src/InputGroup.tsx
@@ -1,5 +1,6 @@
 'use client';
 import {composeRenderProps, Group, GroupProps, InputContext} from 'react-aria-components';
+import {Label} from './Form';
 import {useId} from 'react';
 import './InputGroup.css';
 
@@ -11,8 +12,8 @@ export function InputGroup(props: InputGroupProps) {
   let id = useId();
   return (
     <div className="input-group">
-      {props.label && <span id={id}>{props.label}</span>}
-      <Group {...props} aria-labelledby={id}>
+      {props.label && <Label elementType="span" id={id}>{props.label}</Label>}
+      <Group {...props} aria-labelledby={id} className="react-aria-Group inset">
         {composeRenderProps(props.children, (children, renderProps) => (
           <InputContext.Provider value={{disabled: renderProps.isDisabled}}>
             {children}
diff --git a/starters/docs/src/Link.css b/starters/docs/src/Link.css
index 6e582149850..8197ccbf053 100644
--- a/starters/docs/src/Link.css
+++ b/starters/docs/src/Link.css
@@ -2,27 +2,25 @@
 
 .react-aria-Link {
   color: var(--link-color);
-  font-size: 18px;
-  transition: all 200ms;
+  font-size: var(--font-size);
+  transition-property: color, text-decoration-thickness;
+  transition-duration: 200ms;
   text-decoration: underline;
   cursor: pointer;
   outline: none;
   position: relative;
+  border-radius: var(--radius-sm);
 
   &[data-hovered] {
-    text-decoration-style: wavy;
+    text-decoration-thickness: 1.5px;
   }
 
   &[data-pressed] {
     color: var(--link-color-pressed);
   }
 
-  &[data-focus-visible]:after {
-    content: '';
-    position: absolute;
-    inset: -3px -6px;
-    border-radius: 6px;
-    border: 2px solid var(--focus-ring-color);
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
   }
 
   &[data-disabled] {
diff --git a/starters/docs/src/ListBox.css b/starters/docs/src/ListBox.css
index 62043da1b33..36fbc1a1e94 100644
--- a/starters/docs/src/ListBox.css
+++ b/starters/docs/src/ListBox.css
@@ -1,78 +1,134 @@
 @import "./theme.css";
 
 .react-aria-ListBox {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
   max-height: inherit;
   overflow: auto;
-  padding: 4px;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border: 0.5px solid var(--border-color);
+  border-radius: calc(var(--radius) + var(--spacing-1));
   background: var(--overlay-background);
   forced-color-adjust: none;
   outline: none;
-  width: 250px;
-  max-height: 300px;
-  min-height: 100px;
   box-sizing: border-box;
+  font: var(--font-size) system-ui;
+  color: var(--text-color);
 
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
     outline-offset: -1px;
   }
 
-  .react-aria-ListBoxSection:not(:first-child) {
-    margin-top: 12px;
+  &[data-empty] {
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
   }
 
+  &[data-drop-target] {
+    outline: 2px solid var(--highlight-background);
+    outline-offset: -1px;
+    background: var(--highlight-overlay)
+  }
+
+  .react-aria-DropIndicator[data-drop-target] {
+    z-index: 3;
+    outline: 1px solid var(--highlight-background);
+  }
+}
+
+.react-aria-ListBoxSection {
   .react-aria-Header {
-    font-size: 1.000125rem;
-    font-weight: bold;
+    position: sticky;
+    top: -0.5px;
+    z-index: 2;
+    font-size: var(--font-size-sm);
+    font-weight: 600;
     font-variation-settings: initial;
-    padding: 0 0.6247499999999999rem;
+    padding: var(--spacing-1) var(--spacing-4);
+    background: var(--gray-100);
+    border-block: 0.5px solid var(--gray-400);
+    cursor: default;
+    user-select: none;
+    box-shadow: inset 0px 1px 0px white, inset 0px -4px 8px var(--gray-200);
+
+    @media (prefers-color-scheme: dark) {
+      box-shadow: inset 0px 4px 8px var(--gray-200);
+    }
   }
 
-  &[data-empty] {
-    align-items: center;
-    justify-content: center;
-    font-style: italic;
+  &:first-child .react-aria-Header {
+    margin-top: -0.5px;
   }
 }
 
 .react-aria-ListBoxItem {
-  padding: 0 0.499625rem;
-  border-radius: 6px;
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius);
   outline: none;
   cursor: default;
   color: var(--text-color);
-  font-size: 0.9380000000000001rem;
+  font: var(--font-size) system-ui;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 32px;
+  min-height: var(--spacing-8);
+  box-sizing: border-box;
+  position: relative;
+  transition-property: background, color, border-radius;
+  transition-duration: 200ms;
+  -webkit-tap-highlight-color: transparent;
+
+  --border-color: var(--gray-300);
+  &:not(:last-child)::after {
+    content: '';
+    display: block;
+    position: absolute;
+  }
+
+  &[data-pressed] {
+    background: var(--highlight-hover);
+    border-radius: var(--radius);
+    --border-color: transparent;
+  }
 
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
     outline-offset: -2px;
+    z-index: 2;
   }
 
   &[data-selected] {
     background: var(--highlight-background);
     color: var(--highlight-foreground);
+    --border-color: transparent;
 
     &[data-focus-visible] {
       outline-color: var(--highlight-foreground);
       outline-offset: -4px;
     }
+
+    &[data-pressed] {
+      background: var(--highlight-background-pressed);
+    }
+
+    &:has(+ [data-selected]),
+    &:has(+ .react-aria-DropIndicator + [data-selected]) {
+      --border-color: rgb(255 255 255 / 0.3);
+    }
   }
+
   [slot=label] {
-    font-weight: bold;
+    font-weight: 500;
   }
 
   [slot=description] {
-    font-size: small;
+    font-size: var(--font-size-sm);
+  }
+
+  &[href] {
+    text-decoration: none;
+    cursor: pointer;
+    -webkit-touch-callout: none;
   }
 
   &[data-disabled] {
@@ -82,130 +138,117 @@
   &[data-dragging] {
     opacity: 0.6;
   }
-}
 
-.react-aria-ListBoxItem[href] {
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-touch-callout: none;
+  &[data-drop-target] {
+    outline: 2px solid var(--highlight-background);
+    background: var(--highlight-overlay)
+  }
 }
 
+.react-aria-ListBox {
+  &[data-layout=stack] {
+    display: flex;
+
+    &[data-orientation=vertical] {
+      flex-direction: column;
+      width: 250px;
+      max-height: 300px;
+      min-height: 100px;
 
-.react-aria-ListBox[data-orientation=horizontal],
-.react-aria-ListBox[data-layout=grid] {
-  flex-direction: row;
-  width: fit-content;
-  max-width: 100%;
-  padding: 4px;
-
-  .react-aria-ListBoxItem {
-    position: relative;
-    margin: 0;
-    padding: 4px;
-
-    & img {
-      object-fit: cover;
-      aspect-ratio: 1/1;
-      max-width: 150px;
-      margin-bottom: 4px;
-      border-radius: 4px;
-    }
+      .react-aria-ListBoxItem {
+        margin-inline: var(--spacing-1);
+
+        &:where(:nth-child(1 of .react-aria-ListBoxItem)) {
+          margin-top: var(--spacing);
+        }
 
-    &[data-selected] {
-      background: none;
-      color: inherit;
-
-      &:after {
-        content: '✓';
-        content: '✓' / '';
-        alt: ' ';
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        background: var(--highlight-background);
-        border: 2px solid var(--highlight-foreground);
-        color: var(--highlight-foreground);
-        width: 22px;
-        height: 22px;
-        border-radius: 22px;
-        box-sizing: border-box;
-        font-size: 14px;
-        line-height: 1em;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 0 0 8px rgb(0 0 0 / .5);
+        &:where(:nth-last-child(1 of .react-aria-ListBoxItem)) {
+          margin-bottom: var(--spacing);
+        }
+
+        [role=presentation] > & {
+          margin: 0; /* virtualizer */
+        }
+
+        &:not(:last-child)::after {
+          bottom: 0;
+          width: calc(100% - var(--spacing-6));
+          border-bottom: 0.5px solid var(--border-color);
+        }
+
+        &[data-selected] {
+          &:has(+ [data-selected]),
+          &:has(+ .react-aria-DropIndicator + [data-selected]) {
+            border-end-start-radius: 0;
+            border-end-end-radius: 0;
+          }
+
+          + [data-selected],
+          + .react-aria-DropIndicator + [data-selected] {
+            border-start-start-radius: 0;
+            border-start-end-radius: 0;
+          }
+        }
       }
     }
 
-    &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -2px;
-    }
-  }
-}
+    &[data-orientation=horizontal] {
+      flex-direction: row;
+      width: 100%;
 
-.react-aria-ListBox[data-layout=grid] {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  scrollbar-gutter: stable;
-}
+      .react-aria-ListBoxItem {
+        min-width: max-content;
+        margin-block: var(--spacing-1);
 
-.react-aria-ListBox[data-layout=grid][data-orientation=horizontal] {
-  width: 100%;
-  max-width: none;
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-rows: 58px 58px;
-  grid-template-columns: none;
-  grid-auto-columns: 250px;
-  max-height: 200px;
-  gap: 8px;
-
-  .react-aria-ListBoxItem {
-    display: grid;
-    grid-template-areas: "image ."
-                         "image title"
-                         "image description"
-                         "image .";
-    grid-template-columns: auto 1fr;
-    grid-template-rows: 1fr auto auto 1fr;
-    column-gap: 8px;
-
-    & img {
-      width: 50px;
-      height: 50px;
-      grid-area: image;
-      margin-bottom: 0;
-    }
+        &:nth-child(1 of .react-aria-ListBoxItem) {
+          margin-inline-start: var(--spacing);
+        }
 
-    [slot=label] {
-      grid-area: title;
-    }
+        &:nth-last-child(1 of .react-aria-ListBoxItem) {
+          margin-inline-end: var(--spacing);
+        }
+
+        &:not(:last-child)::after {
+          inset-inline-end: 0;
+          height: calc(100% - var(--spacing-2));
+          border-inline-end: 0.5px solid var(--border-color);
+        }
 
-    [slot=description] {
-      grid-area: description;
+        &[data-selected] {
+          &:has(+ [data-selected]),
+          &:has(+ .react-aria-DropIndicator + [data-selected]) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+          }
+
+          + [data-selected],
+          + .react-aria-DropIndicator + [data-selected] {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+          }
+        }
+      }
     }
   }
-}
-
-.react-aria-DropIndicator[data-drop-target] {
-  outline: 1px solid var(--highlight-background);
-}
 
-.react-aria-ListBox[data-drop-target] {
-  outline: 2px solid var(--highlight-background);
-  outline-offset: -1px;
-  background: var(--highlight-overlay)
-}
+  &[data-layout=grid] {
+    display: grid;
+    gap: var(--spacing-1);
+    width: fit-content;
+    max-width: 100%;
+    padding: var(--spacing-1);
 
-.react-aria-ListBoxItem[data-drop-target] {
-  outline: 2px solid var(--highlight-background);
-  background: var(--highlight-overlay)
-}
+    &[data-orientation=vertical] {
+      grid-template-columns: 1fr 1fr;
+    }
 
-.react-aria-DropIndicator[data-drop-target] {
-  outline: 1px solid var(--highlight-background);
+    &[data-orientation=horizontal] {
+      grid-auto-flow: column;
+      grid-template-rows: auto auto;
+      grid-template-columns: none;
+      grid-auto-columns: 160px;
+    }
+  }
 }
 
 .react-aria-ListBoxLoadingIndicator {
@@ -215,3 +258,70 @@
   height: 24px;
   width: 100%;
 }
+
+.dropdown-item {
+  padding: calc((var(--spacing-8) - 1lh) / 2) var(--spacing-3) calc((var(--spacing-8) - 1lh) / 2) var(--spacing-6);
+  box-sizing: border-box;
+  border-radius: var(--radius);
+  outline: none;
+  cursor: default;
+  color: var(--text-color);
+  font: var(--font-size) system-ui;
+  font-weight: 500;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: var(--spacing-8);
+  margin-inline: var(--spacing-1);
+  -webkit-tap-highlight-color: transparent;
+
+  &:first-of-type {
+    margin-top: var(--spacing);
+  }
+
+  &:last-of-type {
+    margin-bottom: var(--spacing);
+  }
+
+  &[data-selected] {
+    font-weight: 500;
+    color: var(--text-color);
+
+    .lucide-check {
+      position: absolute;
+      top: 50%;
+      left: var(--spacing-1);
+      translate: 0 -50%;
+      stroke-width: 3px;
+      width: var(--spacing-4);
+      height: var(--spacing-4);
+    }
+  }
+
+  &[data-pressed] {
+    background: var(--highlight-hover);
+  }
+
+  &[data-focused] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+  }
+
+  [slot=label] {
+    font-weight: 500;
+  }
+
+  [slot=description] {
+    font-size: var(--font-size-sm);
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+  }
+
+  &[href] {
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
diff --git a/starters/docs/src/ListBox.tsx b/starters/docs/src/ListBox.tsx
index d077c1a81da..590cee8f358 100644
--- a/starters/docs/src/ListBox.tsx
+++ b/starters/docs/src/ListBox.tsx
@@ -3,11 +3,16 @@ import {
   ListBox as AriaListBox,
   ListBoxItem as AriaListBoxItem,
   ListBoxSection as AriaListBoxSection,
+  composeRenderProps,
   ListBoxItemProps,
+  ListBoxLoadMoreItem as AriaListBoxLoadMoreItem,
+  ListBoxLoadMoreItemProps,
   ListBoxProps,
   ListBoxSectionProps
 } from 'react-aria-components';
-
+import {Check} from 'lucide-react';
+import {Text} from './Content';
+import {ProgressCircle} from './ProgressCircle';
 import './ListBox.css';
 
 export function ListBox<T extends object>(
@@ -23,9 +28,36 @@ export function ListBox<T extends object>(
 }
 
 export function ListBoxItem(props: ListBoxItemProps) {
-  return <AriaListBoxItem {...props} />;
+  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
+  return (
+    <AriaListBoxItem {...props} textValue={textValue}>
+      {composeRenderProps(props.children, (children) => (
+        typeof children === 'string' ? <Text slot="label">{children}</Text> : children
+      ))}
+    </AriaListBoxItem>
+  );
 }
 
 export function ListBoxSection<T extends object>(props: ListBoxSectionProps<T>) {
   return <AriaListBoxSection {...props} />;
 }
+
+export function DropdownItem(props: ListBoxItemProps) {
+  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
+  return (
+    <ListBoxItem {...props} textValue={textValue} className="dropdown-item">
+      {composeRenderProps(props.children, (children, {isSelected}) => (<>
+        {isSelected && <Check />}
+        {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+      </>))}
+    </ListBoxItem>
+  );
+}
+
+export function ListBoxLoadMoreItem(props: ListBoxLoadMoreItemProps) {
+  return (
+    <AriaListBoxLoadMoreItem {...props}>
+      <ProgressCircle isIndeterminate aria-label="Loading more..." />
+    </AriaListBoxLoadMoreItem>
+  );
+}
diff --git a/starters/docs/src/Menu.css b/starters/docs/src/Menu.css
index 1ac8a5924d7..109aa67a2c8 100644
--- a/starters/docs/src/Menu.css
+++ b/starters/docs/src/Menu.css
@@ -1,118 +1,185 @@
 @import "./theme.css";
 
 .react-aria-Menu {
+  min-height: 0;
   max-height: inherit;
   box-sizing: border-box;
   overflow: auto;
-  padding: 2px;
   min-width: 150px;
   box-sizing: border-box;
   outline: none;
+  border-radius: inherit;
+  display: grid;
+  --check-width: 0;
+  grid-template-columns: var(--spacing-3) var(--check-width) auto 1fr auto var(--spacing-3);
+  grid-auto-rows: max-content;
+
+  &:has(> [data-selection-mode]) {
+    --check-width: var(--spacing-6);
+  }
+
+  &[data-empty] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-style: italic;
+  }
 }
 
 .react-aria-MenuItem {
-  margin: 2px;
-  padding: 0.25025rem 0.499625rem;
-  border-radius: 6px;
+  margin-inline: var(--spacing-1);
+  padding: calc((var(--spacing-8) - 1lh) / 2) 0;
+  border-radius: calc(var(--radius-lg) - var(--spacing-1));
   outline: none;
   cursor: default;
   color: var(--text-color);
-  font-size: 0.9380000000000001rem;
+  font: var(--font-size) system-ui;
   position: relative;
   display: grid;
-  grid-template-areas: "label chevron";
-  grid-template-columns: 1fr auto;
+  grid-column-start: 1;
+  grid-column-end: -1;
+  grid-template-areas: ". check icon label end ."
+                       ". . . desc end .";
+  grid-template-columns: subgrid;
   align-items: center;
-  column-gap: 20px;
   forced-color-adjust: none;
+  -webkit-tap-highlight-color: transparent;
+
+  > svg:not(.lucide-check, .lucide-dot, .lucide-chevron-right) {
+    grid-area: icon;
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+    justify-self: center;
+    margin-inline-end: var(--spacing-2);
+  }
+
+  &:first-of-type {
+    margin-top: var(--spacing);
+  }
+
+  &:last-of-type {
+    margin-bottom: var(--spacing);
+  }
+
+  &[data-open],
+  &[data-pressed] {
+    background: var(--highlight-hover);
+  }
 
-  &[data-focused],
-  &[data-open] {
+  &[data-focused] {
     background: var(--highlight-background);
     color: var(--highlight-foreground);
   }
-}
 
-.react-aria-MenuItem {
   &[data-selection-mode] {
-    padding-left: 24px;
-
-    &::before {
-      position: absolute;
-      left: 4px;
-      font-weight: 600;
+    .lucide-check,
+    .lucide-dot {
+      grid-area: check;
+      width: var(--spacing-4);
+      height: var(--spacing-4);
     }
 
-    &[data-selection-mode=multiple][data-selected]::before {
-      content: '✓';
-      content: '✓' / '';
-      alt: ' ';
-      position: absolute;
-      left: 4px;
-      font-weight: 600;
+    .lucide-check {
+      stroke-width: 3px;
     }
 
-    &[data-selection-mode=single][data-selected]::before {
-      content: '●';
-      content: '●' / '';
-      transform: scale(0.7)
+    .lucide-dot {
+      scale: 3;
     }
   }
-}
-
-.react-aria-MenuItem[href] {
-  text-decoration: none;
-  cursor: pointer;
-}
 
-.react-aria-Menu {
-  .react-aria-MenuSection:not(:first-child) {
-    margin-top: 12px;
+  &[href] {
+    text-decoration: none;
+    cursor: pointer;
   }
 
-  .react-aria-Header {
-    font-size: 1.000125rem;
-    font-weight: bold;
-    padding: 0 0.6247499999999999rem;
+  &[data-disabled] {
+    color: var(--text-color-disabled);
   }
-}
 
-.react-aria-Separator {
-  margin: 6px 8px;
-  border: 0;
-  border-top: 1px solid var(--border-color);
-}
-
-.react-aria-MenuItem {
   [slot=label] {
-    font-weight: bold;
     grid-area: label;
+    font-weight: 500;
   }
 
   [slot=description] {
-    font-size: small;
+    font-size: var(--font-size-sm);
     grid-area: desc;
   }
 
   kbd {
-    grid-area: kbd;
-    font-family: monospace;
+    grid-area: end;
+    justify-self: end;
+    margin-inline-start: var(--spacing-4);
+    font-family: system-ui;
+    font-size: var(--font-size-sm);
     text-align: end;
+    background: var(--highlight-hover);
+    border: 0.5px solid var(--highlight-pressed);
+    padding: 0 var(--spacing-1);
+    border-radius: var(--radius-sm);
   }
 
-  &[data-disabled] {
-    color: var(--text-color-disabled);
+  &[data-focused] kbd {
+    background: rgb(255 255 255 / 0.1);
+    border-color: rgb(255 255 255 / 0.2);
   }
-}
 
-.react-aria-Popover[data-trigger=SubmenuTrigger][data-placement="right"] {
-  margin-left: -5px;
+  .lucide-chevron-right {
+    grid-area: end;
+    margin-left: var(--spacing-1);
+    justify-self: end;
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+  }
 }
 
-.react-aria-Popover[data-trigger=SubmenuTrigger][data-placement="left"] {
-  margin-right: -5px;
+.react-aria-MenuSection {
+  display: grid;
+  grid-column-start: 1;
+  grid-column-end: -1;
+  --check-width: 0;
+  grid-template-columns: var(--spacing-3) var(--check-width) auto 1fr auto var(--spacing-3);
+
+  &:has(> [data-selection-mode]) {
+    --check-width: var(--spacing-6);
+  }
+
+  .react-aria-Header {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    font-variation-settings: initial;
+    padding: var(--spacing-1) var(--spacing-3);
+    background: var(--gray-100);
+    border-block: 0.5px solid var(--gray-400);
+    cursor: default;
+    user-select: none;
+    box-shadow: inset 0px 1px 0px white, inset 0px -4px 8px var(--gray-200);
+
+    @media (prefers-color-scheme: dark) {
+      box-shadow: inset 0px 4px 8px var(--gray-200);
+    }
+  }
+
+  &:first-child .react-aria-Header {
+    margin-top: -0.5px;
+  }
 }
 
-.react-aria-Popover[data-trigger=SubmenuTrigger] .react-aria-SearchField {
-  margin: 4px 8px;
+.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);
+
+  .react-aria-MenuItem + & {
+    margin-block-start: var(--spacing-1);
+  }
+
+  &:has(+ .react-aria-MenuItem) {
+    margin-block-end: var(--spacing-1);
+  }
 }
diff --git a/starters/docs/src/Menu.tsx b/starters/docs/src/Menu.tsx
index d6c7a574dbd..8e06978b03f 100644
--- a/starters/docs/src/Menu.tsx
+++ b/starters/docs/src/Menu.tsx
@@ -1,6 +1,6 @@
 'use client';
 import {Button} from './Button';
-import {ChevronRight} from 'lucide-react';
+import {Check, ChevronRight, Dot} from 'lucide-react';
 import {
   Menu as AriaMenu,
   MenuItem as AriaMenuItem,
@@ -14,9 +14,9 @@ import {
   SubmenuTriggerProps,
 } from 'react-aria-components';
 import {Popover} from './Popover';
-
-import './Menu.css';
+import { Text } from './Content';
 import React from 'react';
+import './Menu.css';
 
 export interface MenuButtonProps<T extends object>
   extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {
@@ -59,11 +59,13 @@ export function MenuItem(
   return (
     (
       <AriaMenuItem {...props} textValue={textValue}>
-        {({ hasSubmenu }) => (
+        {({ hasSubmenu, isSelected, selectionMode }) => (
           <>
-            {props.children}
+            {isSelected && selectionMode === 'multiple' ? <Check /> : null}
+            {isSelected && selectionMode === 'single' ? <Dot /> : null}
+            {typeof props.children === 'string' ? <Text slot="label">{props.children}</Text> : props.children}
             {hasSubmenu && (
-              <ChevronRight size={18} />
+              <ChevronRight />
             )}
           </>
         )}
@@ -83,7 +85,7 @@ export function SubmenuTrigger(
   return (
     <AriaSubmenuTrigger {...props}>
       {trigger}
-      <Popover hideArrow>
+      <Popover hideArrow offset={-2} crossOffset={-4}>
         {menu}
       </Popover>
     </AriaSubmenuTrigger>
diff --git a/starters/docs/src/Meter.css b/starters/docs/src/Meter.css
index 6fe0833fe62..c8a570fda7d 100644
--- a/starters/docs/src/Meter.css
+++ b/starters/docs/src/Meter.css
@@ -1,37 +1,38 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-Meter {
-  --fill-color: forestgreen;
-
   display: grid;
   grid-template-areas: "label value"
                        "bar bar";
   grid-template-columns: 1fr auto;
-  gap: 4px;
   width: 250px;
   color: var(--text-color);
+  font: var(--font-size) system-ui;
 
   .value {
     grid-area: value;
   }
 
-  .bar {
+  .track {
     grid-area: bar;
-    box-shadow: inset 0px 0px 0px 1px var(--border-color);
     forced-color-adjust: none;
-    height: 10px;
-    border-radius: 5px;
+    height: calc(var(--spacing-2) + 2px);
+    border-radius: 9999px;
     overflow: hidden;
   }
 
   .fill {
-    background: var(--fill-color);
-    height: 100%;
-  }
-}
+    --fill-color: var(--green);
+    background: oklch(from var(--fill-color) var(--lightness-700) c h);
+    height: calc(100% - 2px);
+    margin: 1px 0 0 1px;
+    border-radius: inherit;
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 1px 0 lch(from var(--fill-color) 42% c h), 0 0 0 1px var(--fill-color);
 
-@media (forced-colors: active) {
-  .react-aria-Meter {
-    --fill-color: Highlight;
+    @media (forced-colors: active) {
+      box-shadow: none;
+      background: Highlight;
+    }
   }
 }
diff --git a/starters/docs/src/Meter.tsx b/starters/docs/src/Meter.tsx
index cca81170153..401e53edf0a 100644
--- a/starters/docs/src/Meter.tsx
+++ b/starters/docs/src/Meter.tsx
@@ -18,8 +18,13 @@ export function Meter({ label, ...props }: MeterProps) {
           <>
             <Label>{label}</Label>
             <span className="value">{valueText}</span>
-            <div className="bar">
-              <div className="fill" style={{ width: percentage + '%' }} />
+            <div className="track inset">
+              <div
+                className="fill"
+                style={{
+                  width: percentage + '%',
+                  '--fill-color': percentage < 70 ? 'var(--green)' : percentage < 90 ? 'var(--orange)' : 'var(--red)'
+                } as any} />
             </div>
           </>
         )}
diff --git a/starters/docs/src/Modal.css b/starters/docs/src/Modal.css
index 9125a4713e0..848e09bb8c7 100644
--- a/starters/docs/src/Modal.css
+++ b/starters/docs/src/Modal.css
@@ -9,7 +9,7 @@
   background: rgba(0 0 0 / .5);
   z-index: 100;
   font-family: system-ui;
-  font-size: 0.875rem;
+  font-size: var(--font-size);
 
   &[data-entering] {
     animation: modal-fade 200ms;
@@ -22,18 +22,17 @@
 
 .react-aria-Modal {
   position: sticky;
-  max-height: var(--visual-viewport-height);
+  max-height: calc(var(--visual-viewport-height) * 0.9);
   top: calc(var(--visual-viewport-height) / 2);
   margin-left: 50vw;
   translate: -50% -50%;
-  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
-  border-radius: 6px;
+  box-shadow: 0 8px 32px rgba(0 0 0 / 0.2);
+  border-radius: var(--radius-xl);
   background: var(--overlay-background);
   color: var(--text-color);
-  border: 1px solid var(--gray-400);
-  outline: none;
+  outline: 1px solid var(--overlay-border);
   width: max-content;
-  max-width: 300px;
+  max-width: min(500px, 90vw);
 
   &[data-entering] {
     animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
diff --git a/starters/docs/src/NumberField.css b/starters/docs/src/NumberField.css
index 72eb4ea95ce..c9fe11c50c0 100644
--- a/starters/docs/src/NumberField.css
+++ b/starters/docs/src/NumberField.css
@@ -1,90 +1,69 @@
 @import "./theme.css";
+@import "./TextField.css";
 
 .react-aria-NumberField {
-  margin-bottom: 8px;
   color: var(--text-color);
 
   .react-aria-Group {
     display: flex;
     width: fit-content;
-    border-radius: 4px;
+    border-radius: var(--radius);
+    position: relative;
+    box-shadow: 0 1px 0 var(--gray-50);
 
-    &[data-focus-within] {
-      outline: 1px solid var(--focus-ring-color);
-      .react-aria-Input,
-      .react-aria-Button {
-        border-color: var(--focus-ring-color);
-      }
+    &[data-invalid]::after {
+      content: '';
+      position: absolute;
+      inset: 1px;
+      z-index: 2;
+      pointer-events: none;
+      border-radius: inherit;
+      outline: 1px solid var(--invalid-color);
+    }
+
+    &[data-focus-within]::after {
+      content: '';
+      position: absolute;
+      inset: 1px;
+      z-index: 2;
+      pointer-events: none;
+      border-radius: inherit;
+      outline: 2px solid var(--focus-ring-color);
     }
   }
 
   .react-aria-Button {
-    font-size: 1.2249999999999999rem;
-    width: 2.0124999999999997rem;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    margin-inline-start: -1px;
 
     &[slot=decrement] {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
+      border-radius: 0;
     }
 
     &[slot=increment] {
+      border-radius: var(--radius);
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
   }
 
   .react-aria-Input {
-    background: var(--field-background);
-    border: 1px solid var(--border-color);
-    border-radius: 0;
-    color: var(--field-text-color);
-    margin: 0 -1px;
     z-index: 1;
-    font-size: 0.875rem;
-    padding: 0.375375rem 0.499625rem;
     outline: none;
     width: 5.25rem;
     flex: 1;
-  }
-
-  &[data-invalid] {
-    .react-aria-Input,
-    .react-aria-Button {
-      border-color: var(--invalid-color);
-    }
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
 
-    &:focus-within {
-      .react-aria-Input,
-      .react-aria-Button {
-        border-color: var(--focus-ring-color);
-      }
+    &[data-invalid] {
+      border-color: var(--border-color);
     }
   }
 
-  .react-aria-FieldError {
-    font-size: 12px;
-    color: var(--invalid-color);
-  }
-
   [slot=description] {
     font-size: 12px;
   }
-
-  .react-aria-Button {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-      color: var(--text-color-disabled);
-    }
-  }
-
-  .react-aria-Input {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-      color: var(--text-color-disabled);
-    }
-  }
 }
diff --git a/starters/docs/src/NumberField.tsx b/starters/docs/src/NumberField.tsx
index 460ecb1436c..289a61d9065 100644
--- a/starters/docs/src/NumberField.tsx
+++ b/starters/docs/src/NumberField.tsx
@@ -1,15 +1,14 @@
 'use client';
 import {
-  Button,
   Group,
   Input,
   NumberField as AriaNumberField,
   NumberFieldProps as AriaNumberFieldProps,
   ValidationResult
 } from 'react-aria-components';
+import {Button} from './Button';
 import {Plus, Minus} from 'lucide-react';
-import {Label, FieldError} from './Form';
-import {Text} from './Content';
+import {Label, FieldError, Description} from './Form';
 import './NumberField.css';
 
 export interface NumberFieldProps extends AriaNumberFieldProps {
@@ -26,11 +25,11 @@ export function NumberField(
       <AriaNumberField {...props}>
         <Label>{label}</Label>
         <Group>
-          <Button slot="decrement"><Minus size={18} /></Button>
-          <Input />
-          <Button slot="increment"><Plus size={18} /></Button>
+          <Input className="react-aria-Input inset" />
+          <Button slot="decrement" variant="secondary"><Minus /></Button>
+          <Button slot="increment" variant="secondary"><Plus /></Button>
         </Group>
-        {description && <Text slot="description">{description}</Text>}
+        {description && <Description>{description}</Description>}
         <FieldError>{errorMessage}</FieldError>
       </AriaNumberField>
     )
diff --git a/starters/docs/src/Popover.css b/starters/docs/src/Popover.css
index b28417b9dfc..31918bcb35c 100644
--- a/starters/docs/src/Popover.css
+++ b/starters/docs/src/Popover.css
@@ -1,26 +1,29 @@
-@import "./Dialog.css";
 @import "./theme.css";
 
 .react-aria-Popover {
   --background-color: var(--overlay-background);
 
-  border: 1px solid var(--border-color);
-  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
-  border-radius: 6px;
+  outline: 1px solid var(--overlay-border);
+  box-sizing: border-box;
+  filter: drop-shadow(var(--popover-shadow));
+  border-radius: var(--radius-lg);
   background: var(--background-color);
   color: var(--text-color);
-  outline: none;
-  max-width: 250px;
   transition: transform 200ms, opacity 200ms;
-  font-family: system-ui;
-  font-size: 0.875rem;
+  font: var(--font-size) system-ui;
   padding: 8px;
 
+  &[data-trigger=MenuTrigger],
+  &[data-trigger=SubmenuTrigger] {
+    padding: 0;
+  }
+
   .react-aria-OverlayArrow svg {
     display: block;
     fill: var(--background-color);
-    stroke: var(--border-color);
-    stroke-width: 1px;
+    stroke: var(--overlay-border);
+    paint-order: stroke;
+    stroke-width: 2px;
   }
 
   &[data-entering],
@@ -73,8 +76,3 @@
     }
   }
 }
-
-/* Extra padding for custom trigger example content */
-.react-aria-Popover :where(p, div) {
-  margin: 0;
-}
diff --git a/starters/docs/src/Popover.tsx b/starters/docs/src/Popover.tsx
index 82fb3348c99..f3d6d341fb0 100644
--- a/starters/docs/src/Popover.tsx
+++ b/starters/docs/src/Popover.tsx
@@ -17,14 +17,16 @@ export function Popover({ children, hideArrow, ...props }: PopoverProps) {
   return (
     (
       <AriaPopover {...props} className={clsx("react-aria-Popover", props.className)}>
-        {!hideArrow && (
-          <OverlayArrow>
-            <svg width={12} height={12} viewBox="0 0 12 12">
-              <path d="M0 0 L6 6 L12 0" />
-            </svg>
-          </OverlayArrow>
-        )}
-        {children}
+        {({trigger}) => <>
+          {!hideArrow && trigger !== 'MenuTrigger' && trigger !== 'SubmenuTrigger' && (
+            <OverlayArrow>
+              <svg width={12} height={12} viewBox="0 0 12 12">
+                <path d="M0 0 L6 6 L12 0" />
+              </svg>
+            </OverlayArrow>
+          )}
+          {children}
+        </>}
       </AriaPopover>
     )
   );
diff --git a/starters/docs/src/ProgressBar.css b/starters/docs/src/ProgressBar.css
index de35556b806..d47eb398150 100644
--- a/starters/docs/src/ProgressBar.css
+++ b/starters/docs/src/ProgressBar.css
@@ -1,49 +1,94 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-ProgressBar {
   display: grid;
   grid-template-areas: "label value"
                        "bar bar";
   grid-template-columns: 1fr auto;
-  gap: 4px;
   width: 250px;
   color: var(--text-color);
+  font: var(--font-size) system-ui;
 
   .value {
     grid-area: value;
   }
 
-  .bar {
+  .track {
     grid-area: bar;
-    box-shadow: inset 0px 0px 0px 1px var(--border-color);
     forced-color-adjust: none;
-    height: 10px;
-    border-radius: 5px;
-    overflow: hidden;
+    height: calc(var(--spacing-2) + 2px);
+    border-radius: 9999px;
+    overflow: clip;
     will-change: transform;
   }
 
   .fill {
-    background: var(--highlight-background);
-    height: 100%;
+    background: linear-gradient(
+      to right,
+      oklch(from var(--tint) 58% c h) 0px,
+      oklch(from var(--tint) 72% c h) 20px,
+      oklch(from var(--tint) 58% c h) 40px
+    );
+    background-size: 40px 100%;
+    height: calc(100% - 2px);
+    width: calc(var(--percent) - 2px);
+    margin: 1px 0 0 1px;
+    border-radius: inherit;
+    animation: progress-fill 1s infinite linear;
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.3), /* top specular highlight */
+      inset 0 2px 2px rgb(255 255 255 / 0.2), /* 3d effect */
+      0 1px 0 lch(from var(--tint) 42% c h), /* bottom shadow */
+      0 0 0 1px var(--tint-900); /* border */
+
+    @media (prefers-color-scheme: dark) {
+      box-shadow:
+        0 -1px 0 rgb(255 255 255 / 0.6), /* top specular highlight */
+        inset 0 2px 2px rgb(255 255 255 / 0.2), /* 3d effect */
+        0 1px 0 lch(from var(--tint) 42% c h), /* bottom shadow */
+        0 0 0 1px var(--tint-900); /* border */
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      background: var(--highlight-background);
+      animation: none;
+    }
+
+    @media (forced-colors: active) {
+      background-image: none;
+      background-color: Highlight;
+      box-shadow: none;
+    }
   }
 
+  /* indeterminate */
   &:not([aria-valuenow]) {
     .fill {
-      width: 120px;
-      border-radius: inherit;
-      animation: indeterminate 1.5s infinite ease-in-out;
-      will-change: transform;
+      --fill-dark: oklch(from var(--tint) 58% c h);
+      --fill-light: var(--tint-200);
+      background-image: linear-gradient(
+        45deg,
+        var(--fill-dark) 0px 12px,
+        var(--fill-light) 15px 25px,
+        var(--fill-dark) 28px
+      );
+      animation-duration: 0.5s;
+
+      @media (forced-colors: active) {
+        --fill-dark: Highlight;
+        --fill-light: HighlightText;
+      }
     }
   }
 }
 
-@keyframes indeterminate {
+@keyframes progress-fill {
   from {
-    transform: translateX(-100%);
+    background-position-x: 0;
   }
 
   to {
-    transform: translateX(250px);
+    background-position-x: -40px;
   }
-}
+}
\ No newline at end of file
diff --git a/starters/docs/src/ProgressBar.tsx b/starters/docs/src/ProgressBar.tsx
index 1862f0869f5..8837634fd51 100644
--- a/starters/docs/src/ProgressBar.tsx
+++ b/starters/docs/src/ProgressBar.tsx
@@ -18,8 +18,8 @@ export function ProgressBar({ label, ...props }: ProgressBarProps) {
           <>
             <Label>{label}</Label>
             <span className="value">{valueText}</span>
-            <div className="bar">
-              <div className="fill" style={{ width: (isIndeterminate ? 40 : percentage) + '%' }} />
+            <div className="track inset">
+              <div className="fill" style={{ '--percent': (isIndeterminate ? 100 : percentage) + '%' } as any} />
             </div>
           </>
         )}
diff --git a/starters/docs/src/ProgressCircle.tsx b/starters/docs/src/ProgressCircle.tsx
index c03a60175c0..8a4651cc1c7 100644
--- a/starters/docs/src/ProgressCircle.tsx
+++ b/starters/docs/src/ProgressCircle.tsx
@@ -30,7 +30,7 @@ export function ProgressCircle(props: ProgressCircleProps) {
                 cx="50%"
                 cy="50%"
                 r={radius}
-                stroke="var(--gray-100)"
+                stroke="var(--highlight-pressed)"
                 strokeWidth={strokeWidth} />
               <circle
                 cx="50%"
diff --git a/starters/docs/src/RadioGroup.css b/starters/docs/src/RadioGroup.css
index 1c047bfba09..5ba376b9505 100644
--- a/starters/docs/src/RadioGroup.css
+++ b/starters/docs/src/RadioGroup.css
@@ -1,13 +1,22 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-RadioGroup {
   display: flex;
   flex-direction: column;
-  gap: 8px;
   color: var(--text-color);
 
-  [slot=description] {
-    font-size: 12px;
+  .radio-items {
+    display: flex;
+    gap: var(--spacing-3);
+  }
+
+  &[data-orientation=vertical] .radio-items {
+    flex-direction: column;
+  }
+
+  &[data-orientation=horizontal] .radio-items {
+    flex-direction: row;
   }
 }
 
@@ -16,71 +25,43 @@
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
   align-items: center;
-  gap: 0.499625rem;
-  font-size: 1.000125rem;
+  gap: var(--spacing-2);
+  font: var(--font-size) system-ui;
   color: var(--text-color);
   forced-color-adjust: none;
+  -webkit-tap-highlight-color: transparent;
 
-  &:before {
-    content: '';
-    display: block;
-    width: 1.12525rem;
-    height: 1.12525rem;
+  .indicator {
+    position: relative;
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
     box-sizing: border-box;
-    border: 0.125125rem solid var(--border-color);
-    background: var(--field-background);
-    border-radius: 1.12525rem;
+    border-radius: 50%;
     transition: all 200ms;
-  }
-
-  &[data-pressed]:before {
-    border-color: var(--border-color-pressed);
-  }
-
-  &[data-selected] {
-    &:before {
-      border-color: var(--highlight-background);
-      border-width: 0.375375rem;
-    }
 
-    &[data-pressed]:before {
-      border-color: var(--highlight-background-pressed);
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 1px;
+      border-radius: inherit;
+      background: transparent;
+      transition: scale 200ms;
+      scale: 0;
     }
   }
 
-  &[data-focus-visible]:before {
-    outline: 2px solid var(--focus-ring-color);
-    outline-offset: 2px;
-  }
-
-  &[data-invalid] {
-    &:before {
-      border-color: var(--invalid-color);
-    }
+  &[data-selected] {
+    .indicator::after {
+      background: white;
+      scale: 0.37;
 
-    &[data-pressed]:before {
-      border-color: var(--invalid-color-pressed);
+      @media (forced-colors: active) {
+        background: HighlightText;
+      }
     }
   }
 
   &[data-disabled] {
     color: var(--text-color-disabled);
-
-    &:before {
-      border-color: var(--border-color-disabled);
-    }
   }
 }
-
-.react-aria-RadioGroup .radio-items {
-  display: flex;
-  gap: 8px;
-}
-
-.react-aria-RadioGroup[data-orientation=vertical] .radio-items {
-  flex-direction: column;
-}
-
-.react-aria-RadioGroup[data-orientation=horizontal] .radio-items {
-  flex-direction: row;
-}
diff --git a/starters/docs/src/RadioGroup.tsx b/starters/docs/src/RadioGroup.tsx
index ef9af5ec468..1e7a871c2f3 100644
--- a/starters/docs/src/RadioGroup.tsx
+++ b/starters/docs/src/RadioGroup.tsx
@@ -4,11 +4,12 @@ import {
   RadioGroupProps as AriaRadioGroupProps,
   ValidationResult,
   RadioProps,
-  Radio as AriaRadio
+  Radio as AriaRadio,
+  composeRenderProps
 } from 'react-aria-components';
-import {Label, FieldError} from './Form';
-import {Text} from './Content';
+import {Label, FieldError, Description} from './Form';
 import './RadioGroup.css';
+import './utilities.css';
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
   children?: React.ReactNode;
@@ -27,19 +28,26 @@ export function RadioGroup(
   }: RadioGroupProps
 ) {
   return (
-    (
-      <AriaRadioGroup {...props}>
-        <Label>{label}</Label>
-        <div className="radio-items">
-          {children}
-        </div>
-        {description && <Text slot="description">{description}</Text>}
-        <FieldError>{errorMessage}</FieldError>
-      </AriaRadioGroup>
-    )
+    <AriaRadioGroup {...props}>
+      <Label>{label}</Label>
+      <div className="radio-items">
+        {children}
+      </div>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </AriaRadioGroup>
   );
 }
 
 export function Radio(props: RadioProps) {
-  return <AriaRadio {...props} />;
+  return (
+    <AriaRadio {...props}>
+      {composeRenderProps(props.children, (children) => (
+        <>
+          <div className="indicator" />
+          {children}
+        </>
+      ))}
+    </AriaRadio>
+  )
 }
diff --git a/starters/docs/src/RangeCalendar.css b/starters/docs/src/RangeCalendar.css
index 9535523e0f0..350fd10c7bd 100644
--- a/starters/docs/src/RangeCalendar.css
+++ b/starters/docs/src/RangeCalendar.css
@@ -3,54 +3,104 @@
 .react-aria-RangeCalendar {
   width: fit-content;
   max-width: 100%;
+  font: var(--font-size) system-ui;
   color: var(--text-color);
 
-  & header {
+  header {
     display: flex;
     align-items: center;
-    margin: 0 4px 0.4375rem 4px;
+    margin: 0 var(--spacing-1) var(--spacing-4) var(--spacing-1);
 
     .react-aria-Heading {
       flex: 1;
       margin: 0;
       text-align: center;
-      font-size: 1.203125rem;
+      font-size: var(--font-size-lg);
     }
   }
 
-  .react-aria-Button[slot=previous],
-  .react-aria-Button[slot=next] {
-    width: 1.75rem;
-    height: 1.75rem;
-    padding: 0;
-  }
-
-  & table {
+  table {
     border-collapse: collapse;
-
-    & td {
-      padding: 2px 0;
-    }
   }
 
   [slot=errorMessage] {
-    font-size: 12px;
+    font-size: var(--font-size-sm);
     color: var(--invalid-color);
   }
 
   .react-aria-CalendarCell {
+    margin: 2px 0;
+    padding: 0 2px;
+    position: relative;
+    z-index: 1;
+
+    span {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: 9999px;
+      transition: scale 200ms;
+    }
+
     &[data-selected] {
       border-radius: 0;
+      background: var(--button-background);
+      border-color: var(--tint-700);
+      border-style: solid;
+      border-width: 0;
+      border-top-width: 0.5px;
+      border-bottom-width: 0.5px;
+      margin: 1.5px 0;
+
+      @media (forced-colors: active) {
+        border-color: Highlight;
+      }
+
+      &[data-selection-start],
+      &:is(td:first-child > *, [aria-disabled] + td > *)  {
+        border-start-start-radius: 9999px;
+        border-end-start-radius: 9999px;
+        border-inline-start-width: 0.5px;
+        margin-inline-start: 1.5px;
+        padding-inline-start: 0;
+      }
+
+      &[data-selection-end],
+      &:is(td:last-child > *, td:has(+ [aria-disabled]) > *) {
+        border-end-end-radius: 9999px;
+        border-start-end-radius: 9999px;
+        border-inline-end-width: 0.5px;
+        margin-inline-end: 1.5px;
+        padding-inline-end: 0;
+      }
+
+      &[data-selection-start],
+      &[data-selection-end] {
+        z-index: 2;
+      }
+
+      &:not([data-selection-start], [data-selection-end]) span {
+        color: var(--tint-1200);
+        @media (forced-colors: active) {
+          color: ButtonText;
+        }
+      }
     }
 
-    &[data-selection-start] {
-      border-start-start-radius: 6px;
-      border-end-start-radius: 6px;
+    &[data-pressed] {
+      scale: 1;
+      span {
+        scale: 0.9;
+      }
     }
 
-    &[data-selection-end] {
-      border-start-end-radius: 6px;
-      border-end-end-radius: 6px;
+    &[data-focus-visible] {
+      outline: none;
+      z-index: 2;
+      span {
+        outline: 2px solid var(--focus-ring-color);
+        outline-offset: 2px;
+      }
     }
   }
 }
diff --git a/starters/docs/src/RangeCalendar.tsx b/starters/docs/src/RangeCalendar.tsx
index e5e6af9e829..fd9b9594163 100644
--- a/starters/docs/src/RangeCalendar.tsx
+++ b/starters/docs/src/RangeCalendar.tsx
@@ -1,14 +1,17 @@
 'use client';
 import {
+  CalendarCell as AriaCalendarCell,
   DateValue,
   Heading,
   RangeCalendar as AriaRangeCalendar,
   RangeCalendarProps as AriaRangeCalendarProps,
-  Text
+  Text,
+  composeRenderProps,
+  CalendarCellProps
 } from 'react-aria-components';
 import {Button} from './Button';
 import {ChevronLeft, ChevronRight} from 'lucide-react';
-import {CalendarCell, CalendarGrid} from './Calendar';
+import {CalendarGrid} from './Calendar';
 import './RangeCalendar.css';
 
 export interface RangeCalendarProps<T extends DateValue>
@@ -23,9 +26,9 @@ export function RangeCalendar<T extends DateValue>(
     (
       <AriaRangeCalendar {...props}>
         <header>
-          <Button slot="previous"><ChevronLeft size={16} /></Button>
+          <Button slot="previous" variant="quiet"><ChevronLeft size={18} /></Button>
           <Heading />
-          <Button slot="next"><ChevronRight size={16} /></Button>
+          <Button slot="next" variant="quiet"><ChevronRight size={18} /></Button>
         </header>
         <CalendarGrid>
           {(date) => <CalendarCell date={date} />}
@@ -35,3 +38,23 @@ export function RangeCalendar<T extends DateValue>(
     )
   );
 }
+
+
+export {CalendarGrid};
+export function CalendarCell(props: CalendarCellProps) {
+  return (
+    <AriaCalendarCell {...props}>
+      {composeRenderProps(props.children, (children, {defaultChildren, isHovered, isPressed, isSelectionStart, isSelectionEnd, isDisabled}) => 
+        <span
+          className="button-base"
+          data-variant="quiet"
+          data-hovered={isHovered || undefined}
+          data-pressed={isPressed || undefined}
+          data-selected={isSelectionStart || isSelectionEnd || undefined}
+          data-disabled={isDisabled || undefined}>
+          {children || defaultChildren}
+        </span>
+      )}
+    </AriaCalendarCell>
+  );
+}
diff --git a/starters/docs/src/SearchField.css b/starters/docs/src/SearchField.css
index 1ebc0a9f504..6fca2f48ff7 100644
--- a/starters/docs/src/SearchField.css
+++ b/starters/docs/src/SearchField.css
@@ -1,88 +1,73 @@
 @import "./theme.css";
+@import "./TextField.css";
 
 .react-aria-SearchField {
   display: grid;
-  grid-template-areas: "label label"
-                       "input button"
-                       "help  help";
-  grid-template-columns: 1fr auto;
+  grid-template-areas: "label label label"
+                       "icon input button"
+                       "help help  help";
+  grid-template-columns: 0px 1fr auto;
   align-items: center;
-  width: fit-content;
+  width: auto;
   color: var(--text-color);
 
+  .lucide-search {
+    grid-area: icon;
+    z-index: 2;
+    margin-inline-start: var(--spacing-2);
+  }
+
+  &[data-disabled] .lucide-search {
+    color: var(--text-color-disabled);
+  }
+
+  .react-aria-Label {
+    grid-area: label;
+  }
+
   .react-aria-Input {
     grid-area: input;
     width: 100%;
-    padding: 0.25025rem 1.49975rem 0.25025rem 0.25025rem;
-    margin: 0;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background: var(--field-background);
-    font-size: 1.000125rem;
-    color: var(--field-text-color);
-    outline: none;
+    border-radius: 9999px;
+    padding: 0 var(--spacing-8);
 
     &::-webkit-search-cancel-button,
     &::-webkit-search-decoration {
       -webkit-appearance: none;
     }
-
-    &::placeholder {
-      color: var(--text-color-placeholder);
-      opacity: 1;
-    }
-
-    &[data-focused] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -1px;
-    }
   }
 
-  .react-aria-Button {
+  .clear-button {
+    all: unset;
     grid-area: button;
-    width: 1.000125rem;
-    height: 1.000125rem;
-    border-radius: 1.000125rem;
-    margin-left: -1.250375rem;
-    font-size: 0.749875rem;
-    line-height: 0.749875rem;
-    vertical-align: middle;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 9999px;
+    margin-left: -24px;
     text-align: center;
-    background: var(--gray-500);
+    background: var(--gray-700);
     color: var(--gray-50);
     border: none;
     padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &[data-pressed] {
-      background: var(--gray-600);
+      background: var(--gray-800);
     }
-  }
 
-  &[data-empty] button {
-    display: none;
-  }
-
-  .react-aria-Input{
-    &[data-invalid] {
-      border-color: var(--invalid-color);
+    &[data-disabled] {
+      background: var(--text-color-disabled);
     }
   }
 
-  .react-aria-FieldError {
-    grid-area: help;
-    font-size: 12px;
-    color: var(--invalid-color);
+  &[data-empty] .clear-button {
+    display: none;
   }
 
+  .react-aria-FieldError,
   [slot=description] {
     grid-area: help;
-    font-size: 12px;
-  }
-
-  .react-aria-Input {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-      color: var(--text-color-disabled);
-    }
   }
 }
diff --git a/starters/docs/src/SearchField.tsx b/starters/docs/src/SearchField.tsx
index 3b365598e07..ed5ce0c9af8 100644
--- a/starters/docs/src/SearchField.tsx
+++ b/starters/docs/src/SearchField.tsx
@@ -6,9 +6,8 @@ import {
   SearchFieldProps as AriaSearchFieldProps,
   ValidationResult
 } from 'react-aria-components';
-import {Label, FieldError} from './Form';
-import {Text} from './Content';
-import {X} from 'lucide-react';
+import {Label, FieldError, Description} from './Form';
+import {Search, X} from 'lucide-react';
 import './SearchField.css';
 
 export interface SearchFieldProps extends AriaSearchFieldProps {
@@ -25,9 +24,10 @@ export function SearchField(
     (
       <AriaSearchField {...props}>
         {label && <Label>{label}</Label>}
-        <Input placeholder={placeholder} />
-        <Button><X size={14} /></Button>
-        {description && <Text slot="description">{description}</Text>}
+        <Search size={18} />
+        <Input placeholder={placeholder} className="react-aria-Input inset" />
+        <Button className="clear-button"><X size={14} /></Button>
+        {description && <Description>{description}</Description>}
         <FieldError>{errorMessage}</FieldError>
       </AriaSearchField>
     )
diff --git a/packages/dev/s2-docs/pages/react-aria/SegmentedControl.css b/starters/docs/src/SegmentedControl.css
similarity index 63%
rename from packages/dev/s2-docs/pages/react-aria/SegmentedControl.css
rename to starters/docs/src/SegmentedControl.css
index 640c14470a5..8e585099062 100644
--- a/packages/dev/s2-docs/pages/react-aria/SegmentedControl.css
+++ b/starters/docs/src/SegmentedControl.css
@@ -1,9 +1,10 @@
+@import "./theme.css";
+@import "./utilities.css";
+
 .segmented-control {
   display: flex;
-  background: var(--gray-100);
   width: fit-content;
-  padding: 2px;
-  border-radius: 8px;
+  border-radius: 9999px;
 
   .react-aria-SelectionIndicator {
     position: absolute;
@@ -14,9 +15,7 @@
     z-index: -1;
     transition-property: translate, width;
     transition-duration: 200ms;
-    border-radius: 8px;
-    background: var(--gray-50);
-    outline: 2px solid var(--gray-600);
+    border-radius: 9999px;
 
     @media (prefers-reduced-motion: reduce) {
       transition: none;
@@ -26,25 +25,29 @@
   .segmented-control-item {
     all: unset;
     display: block;
-    color: var(--text-color);
-    font-size: 1rem;
+    color: var(--gray-1200);
+    font: var(--font-size) system-ui;
+    font-weight: 500;
+    height: var(--spacing-8);
     outline: none;
-    padding: 6px 16px;
+    padding: 0 var(--spacing-3);
     position: relative;
     z-index: 1;
-    border-radius: 8px;
+    transition: color 200ms;
+    -webkit-tap-highlight-color: transparent;
 
     span {
       display: inline-block;
       transition: scale 200ms;
     }
 
-     &[data-pressed] span {
-      scale: 0.95;
+    &[data-pressed] span {
+      scale: 0.9;
     }
 
     &[data-selected] {
       z-index: 0;
+      color: var(--highlight-foreground);
     }
 
     &[data-focus-visible] {
diff --git a/starters/docs/src/SegmentedControl.tsx b/starters/docs/src/SegmentedControl.tsx
new file mode 100644
index 00000000000..9a6caa83e2c
--- /dev/null
+++ b/starters/docs/src/SegmentedControl.tsx
@@ -0,0 +1,18 @@
+'use client';
+import {ToggleButtonGroup as RACToggleButtonGroup, SelectionIndicator, ToggleButton, ToggleButtonProps, ToggleButtonGroupProps, composeRenderProps} from 'react-aria-components';
+import './SegmentedControl.css';
+
+export function SegmentedControl(props: ToggleButtonGroupProps) {
+  return <RACToggleButtonGroup {...props} className="segmented-control button-base" data-variant="secondary" />;
+}
+
+export function SegmentedControlItem(props: ToggleButtonProps) {
+  return (
+    <ToggleButton {...props} className="segmented-control-item">
+      {composeRenderProps(props.children, children => (<>
+        <SelectionIndicator className="react-aria-SelectionIndicator button-base" data-selected />
+        <span>{children}</span>
+      </>))}
+    </ToggleButton>
+  );
+}
diff --git a/starters/docs/src/Select.css b/starters/docs/src/Select.css
index 8efe89a5e7a..c7aa184a3a6 100644
--- a/starters/docs/src/Select.css
+++ b/starters/docs/src/Select.css
@@ -3,36 +3,16 @@
 .react-aria-Select {
   color: var(--text-color);
   position: relative;
-  max-width: 250px;
-  width: fit-content;
+  width: 200px;
 
   .react-aria-Button {
-    box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
-    border-radius: 6px;
-    font-size: 0.9380000000000001rem;
-    padding: 0.25025rem 0.25025rem 0.25025rem 0.499625rem;
-    display: flex;
-    align-items: center;
+    --button-color: var(--gray);
+    padding: 0 var(--spacing-2) 0 var(--spacing-3);
     width: 100%;
+    min-width: 0;
 
-    &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -1px;
-    }
-
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-      color: var(--text-color-disabled);
-      span[aria-hidden] {
-        background: var(--border-color-disabled);
-        color: var(--text-color-disabled);
-      }
-
-      .react-aria-SelectValue {
-        &[data-placeholder] {
-          color: var(--text-color-disabled);
-        }
-      }
+    &[data-pressed] {
+      scale: 1;
     }
   }
 
@@ -44,25 +24,13 @@
     white-space: nowrap;
 
     &[data-placeholder] {
-      font-style: italic;
       color: var(--text-color-placeholder);
+      font-weight: normal;
     }
   }
 
-  span[aria-hidden] {
-    width: 1.429rem;
-    height: 1.429rem;
-    line-height: 1.375rem;
-    margin-left: 1rem;
-    padding: 1px;
-    background: var(--highlight-background);
-    color: var(--highlight-foreground);
-    forced-color-adjust: none;
-    border-radius: 4px;
-    font-size: 0.857rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .lucide-chevron-down {
+    margin-inline-start: var(--spacing-2);
   }
 
   .react-aria-SelectValue {
@@ -70,14 +38,11 @@
       display: none;
     }
   }
-
-  [slot=description] {
-    font-size: 12px;
-  }
 }
 
 .react-aria-Popover[data-trigger=Select] {
-  min-width: var(--trigger-width);
+  width: var(--trigger-width);
+  padding: 0;
 
   .react-aria-ListBox {
     display: block;
@@ -87,51 +52,7 @@
     border: none;
 
     .react-aria-Header {
-      padding-left: 1.374625rem;
-    }
-  }
-
-  .react-aria-ListBoxItem {
-    padding: 0 0.499625rem 0 1.374625rem;
-
-    &[data-focus-visible] {
-      outline: none;
-    }
-
-    &[data-selected] {
-      font-weight: 600;
-      background: unset;
-      color: var(--text-color);
-
-      &::before {
-        content: '✓';
-        content: '✓' / '';
-        alt: ' ';
-        position: absolute;
-        top: 4px;
-        left: 4px;
-      }
-    }
-
-    &[data-focused],
-    &[data-pressed] {
-      background: var(--highlight-background);
-      color: var(--highlight-foreground);
-    }
-  }
-}
-
-.react-aria-ListBoxItem[href] {
-  text-decoration: none;
-  cursor: pointer;
-}
-
-@media (forced-colors: active) {
-  .react-aria-Select {
-    .react-aria-Button {
-      &[data-disabled] span[aria-hidden] {
-        background: 0 0;
-      }
+      padding-left: var(--spacing-7);
     }
   }
 }
diff --git a/starters/docs/src/Select.tsx b/starters/docs/src/Select.tsx
index 7c2068c69fd..c8ef0527a06 100644
--- a/starters/docs/src/Select.tsx
+++ b/starters/docs/src/Select.tsx
@@ -4,14 +4,14 @@ import {
   Select as AriaSelect,
   SelectProps as AriaSelectProps,
   SelectValue,
-  ValidationResult
+  ValidationResult,
+  composeRenderProps
 } from 'react-aria-components';
 import {Button} from './Button';
-import {ListBox, ListBoxItem} from './ListBox';
+import {DropdownItem, ListBox} from './ListBox';
 import {ChevronDown} from 'lucide-react';
 import {Popover} from './Popover';
-import {Text} from './Content';
-import {Label, FieldError} from './Form';
+import {Label, FieldError, Description} from './Form';
 import './Select.css';
 
 export interface SelectProps<T extends object>
@@ -31,12 +31,12 @@ export function Select<T extends object>(
   return (
     (
       <AriaSelect {...props}>
-        <Label>{label}</Label>
+        {label && <Label>{label}</Label>}
         <Button>
           <SelectValue />
-          <span aria-hidden="true"><ChevronDown size={16} /></span>
+          <ChevronDown />
         </Button>
-        {description && <Text slot="description">{description}</Text>}
+        {description && <Description>{description}</Description>}
         <FieldError>{errorMessage}</FieldError>
         <Popover hideArrow>
           <ListBox items={items}>
@@ -49,5 +49,5 @@ export function Select<T extends object>(
 }
 
 export function SelectItem(props: ListBoxItemProps) {
-  return <ListBoxItem {...props} />;
+  return <DropdownItem {...props} />;
 }
diff --git a/starters/docs/src/Sheet.css b/starters/docs/src/Sheet.css
index 1a221f4c92d..aa316fb74d1 100644
--- a/starters/docs/src/Sheet.css
+++ b/starters/docs/src/Sheet.css
@@ -28,7 +28,7 @@
   margin-left: auto;
   background: var(--overlay-background);
   outline: none;
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--overlay-border);
   box-shadow: -8px 0 20px rgba(0 0 0 / 0.1);
   font-family: system-ui;
   font-size: 0.875rem;
diff --git a/starters/docs/src/Slider.css b/starters/docs/src/Slider.css
index 0a35daba55f..1a65adb5a88 100644
--- a/starters/docs/src/Slider.css
+++ b/starters/docs/src/Slider.css
@@ -1,11 +1,13 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-Slider {
   display: grid;
   grid-template-areas: "label output"
                        "track track";
   grid-template-columns: 1fr auto;
-  max-width: 300px;
+  max-width: min(100%, 300px);
+  font: var(--font-size) system-ui;
   color: var(--text-color);
 
   .react-aria-Label {
@@ -14,52 +16,73 @@
 
   .react-aria-SliderOutput {
     grid-area: output;
+    font-size: var(--font-size);
   }
 
   .react-aria-SliderTrack {
     grid-area: track;
     position: relative;
 
-    /* track line */
-    &:before {
-      content: '';
+    .track {
       display: block;
       position: absolute;
-      background: var(--border-color);
+      border-radius: 9999px;
+    }
+
+    .fill {
+      position: absolute;
+      margin: 1px 0 0 1px;
+      border-radius: inherit;
+      background: var(--tint-900);
+
+      @media (forced-colors: active) {
+        background: Highlight;
+      }
     }
   }
 
   .react-aria-SliderThumb {
-    width: 1.250375rem;
-    height: 1.250375rem;
+    width: calc(var(--spacing) * 5.5);
+    height: calc(var(--spacing) * 5.5);
     border-radius: 50%;
-    background: var(--highlight-background);
-    border: 2px solid var(--background-color);
     forced-color-adjust: none;
+    --indicator-color: var(--tint);
+    --indicator-drop-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
 
     &[data-dragging] {
-      background: var(--highlight-background-pressed);
-    }
-
-    &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
+      background: var(--button-background-pressed);
     }
   }
 
   &[data-orientation=horizontal] {
     flex-direction: column;
-    width: 300px;
+    width: 100%;
 
     .react-aria-SliderTrack {
-      height: 30px;
+      height: var(--spacing-5);
       width: 100%;
 
-      &:before {
-        height: 3px;
+      .track {
+        height: var(--spacing-2);
         width: 100%;
         top: 50%;
         transform: translateY(-50%);
       }
+
+      .fill {
+        inset-inline-start: var(--start, 0);
+        width: var(--size);
+        height: calc(100% - 2px);
+        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 2px 2px rgb(255 255 255 / 0.2), 0 1px 0 lch(from var(--tint) 42% c h), 0 0 0 1px var(--tint-900);
+    
+        @media (prefers-color-scheme: dark) {
+          box-shadow: 0 -1px 0 rgb(255 255 255 / 0.6), inset 0 2px 2px rgb(255 255 255 / 0.2), 0 1px 0 lch(from var(--tint) 42% c h), 0 0 0 1px var(--tint-900);
+        }
+
+        @media (forced-colors: active) {
+          box-shadow: none;
+        }
+      }
     }
 
     .react-aria-SliderThumb {
@@ -77,15 +100,30 @@
     }
 
     .react-aria-SliderTrack {
-      width: 30px;
+      width: var(--spacing-5);
       height: 100%;
 
-      &:before {
-        width: 3px;
+      .track {
+        width: var(--spacing-2);
         height: 100%;
         left: 50%;
         transform: translateX(-50%);
       }
+
+      .fill {
+        inset-block-end: var(--start, 0);
+        height: var(--size);
+        width: calc(100% - 2px);
+        box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.3), inset 2px 0 2px rgb(255 255 255 / 0.2), 1px 0 0 lch(from var(--tint) 42% c h), 0 0 0 1px var(--tint-900);
+    
+        @media (prefers-color-scheme: dark) {
+          box-shadow: -1px 0 0 rgb(255 255 255 / 0.6), inset 2px 0 2px rgb(255 255 255 / 0.2), 1px 0 0 lch(from var(--tint) 42% c h), 0 0 0 1px var(--tint-900);
+        }
+
+        @media (forced-colors: active) {
+          box-shadow: none;
+        }
+      }
     }
 
     .react-aria-SliderThumb {
@@ -94,12 +132,16 @@
   }
 
   &[data-disabled] {
-    .react-aria-SliderTrack:before {
-      background: var(--border-color-disabled);
-    }
+    .react-aria-SliderTrack {
+      .track {
+        background: var(--field-background);
+        --border-color: var(--border-color-disabled);
+      }
 
-    .react-aria-SliderThumb {
-      background: var(--border-color-disabled);
+      .fill {
+        background: var(--border-color-disabled);
+        box-shadow: none;
+      }
     }
   }
 }
diff --git a/starters/docs/src/Slider.tsx b/starters/docs/src/Slider.tsx
index b69010961b1..10edd58c4d2 100644
--- a/starters/docs/src/Slider.tsx
+++ b/starters/docs/src/Slider.tsx
@@ -26,10 +26,20 @@ export function Slider<T extends number | number[]>(
             state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
         </SliderOutput>
         <SliderTrack>
-          {({ state }) =>
-            state.values.map((_, i) => (
-              <SliderThumb key={i} index={i} aria-label={thumbLabels?.[i]} />
+          {({ state, isDisabled }) => (<>
+            <div className="track inset" data-disabled={isDisabled || undefined}>
+              {state.values.length === 1
+                // Single thumb, render fill from the end
+                ? <div className="fill" style={{'--size': state.getThumbPercent(0) * 100 + '%'} as any} />
+                : state.values.length === 2
+                  // Range slider, render fill between the thumbs
+                  ? <div className="fill" style={{'--start': state.getThumbPercent(0) * 100 + '%', '--size': (state.getThumbPercent(1) - state.getThumbPercent(0)) * 100 + '%'} as any} />
+                  : null}
+            </div>
+            {state.values.map((_, i) => (
+              <SliderThumb key={i} index={i} aria-label={thumbLabels?.[i]} className="react-aria-SliderThumb indicator" />
             ))}
+          </>)}
         </SliderTrack>
       </AriaSlider>
     )
diff --git a/starters/docs/src/Switch.css b/starters/docs/src/Switch.css
index 88dc3691a8a..0d667e1430a 100644
--- a/starters/docs/src/Switch.css
+++ b/starters/docs/src/Switch.css
@@ -1,76 +1,69 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-Switch {
   display: flex;
   /* This is needed so the HiddenInput is positioned correctly */
   position: relative;
   align-items: center;
-  gap: 0.499625rem;
-  font-size: 1.000125rem;
+  gap: var(--spacing-2);
+  font: var(--font-size) system-ui;
   color: var(--text-color);
   forced-color-adjust: none;
+  -webkit-tap-highlight-color: transparent;
 
-  .indicator {
-    width: 1.75rem;
-    height: 1.000125rem;
-    border: 2px solid var(--border-color);
-    background: var(--background-color);
-    border-radius: 1.000125rem;
+  .track {
+    --height: calc(var(--spacing) * 5.5);
+    height: var(--height);
+    width: calc(var(--spacing) * 9.5);
+    border-radius: var(--height);
     transition: all 200ms;
+    scale: 1;
 
-    &:before {
-      content: '';
+    .handle {
       display: block;
-      margin: 0.125125rem;
-      width: 0.749875rem;
-      height: 0.749875rem;
-      background: var(--highlight-background);
-      border-radius: 16px;
+      height: 100%;
+      aspect-ratio: 1;
+      border-radius: var(--height);
       transition: all 200ms;
+      transform-origin: 0 50%;
+      will-change: transform;
+      --indicator-color: var(--tint);
     }
   }
 
-  &[data-pressed] .indicator {
-    border-color: var(--border-color-pressed);
-
-    &:before {
-      background: var(--highlight-background-pressed);
-    }
+  &[data-pressed] .handle {
+    scale: 1.2 1;
+    border-radius: var(--height) / calc(var(--height) * 1.2);
+    background: var(--button-background-pressed);
   }
 
   &[data-selected] {
-    .indicator {
-      border-color: var(--highlight-background);
-      background: var(--highlight-background);
+    --border-color: var(--highlight-background-pressed);
+    .handle {
+      transform: translateX(var(--spacing-4));
+      transform-origin: var(--spacing-9) 50%;
+      background: white;
+      box-shadow: inset 0 0 0 1px var(--border-color), inset 0 -4px 4px oklch(from var(--tint) 85% c h / 0.3);
 
-      &:before {
-        background: var(--field-background);
-        transform: translateX(100%);
-      }
-    }
-
-    &[data-pressed] {
-      .indicator {
-        border-color: var(--highlight-background-pressed);
-        background: var(--highlight-background-pressed);
+      @media (forced-colors: active) {
+        background: HighlightText;
+        box-shadow: inset 0 0 0 1px Highlight;
       }
     }
   }
 
-  &[data-focus-visible] .indicator {
+  &[data-focus-visible] .track {
     outline: 2px solid var(--focus-ring-color);
     outline-offset: 2px;
   }
 
   &[data-disabled] {
     color: var(--text-color-disabled);
+    --border-color: var(--border-color-disabled);
 
-    .indicator {
-      border-color: var(--border-color-disabled);
-
-      &:before {
-        background: var(--border-color-disabled);
-      }
+    .track {
+      box-shadow: 0 0 0 1px var(--border-color);
     }
   }
 }
diff --git a/starters/docs/src/Switch.tsx b/starters/docs/src/Switch.tsx
index 704b449a7b7..eddc086c22c 100644
--- a/starters/docs/src/Switch.tsx
+++ b/starters/docs/src/Switch.tsx
@@ -12,11 +12,13 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'children'> {
 
 export function Switch({ children, ...props }: SwitchProps) {
   return (
-    (
-      <AriaSwitch {...props}>
-        <div className="indicator" />
+    <AriaSwitch {...props}>
+      {({isSelected}) => (<>
+        <div className="track indicator">
+          <div className={isSelected ? 'handle' : 'handle indicator'} />
+        </div>
         {children}
-      </AriaSwitch>
-    )
+      </>)}
+    </AriaSwitch>
   );
 }
diff --git a/starters/docs/src/Table.css b/starters/docs/src/Table.css
index e4f1483d6e4..dd1761ea0e8 100644
--- a/starters/docs/src/Table.css
+++ b/starters/docs/src/Table.css
@@ -1,17 +1,19 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-Table {
-  padding: 0.25025rem;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border: 0.5px solid var(--border-color);
+  border-radius: var(--radius);
   background: var(--overlay-background);
+  overflow: clip;
   outline: none;
   border-spacing: 0;
   min-height: 100px;
   align-self: start;
-  max-width: 100%;
+  width: 100%;
   word-break: break-word;
   forced-color-adjust: none;
+  font: var(--font-size) system-ui;
 
   &div {
     padding: 0;
@@ -22,239 +24,235 @@
     outline-offset: -1px;
   }
 
+  &[data-drop-target] {
+    outline: 2px solid var(--highlight-background);
+    outline-offset: -1px;
+    background: var(--highlight-overlay)
+  }
+
   .react-aria-TableHeader {
     color: var(--text-color);
+  }
 
-    &:after {
-      content: '';
-      display: table-row;
-      height: 2px;
-    }
+  .react-aria-TableBody {
+    padding: var(--spacing-1);
 
-    & tr:last-child .react-aria-Column {
-      border-bottom: 1px solid var(--border-color);
-      cursor: default;
+    &[data-empty] {
+      text-align: center;
+      font-style: italic;
     }
   }
+}
 
-  .react-aria-Row {
-    --radius-top: 6px;
-    --radius-bottom: 6px;
-    --radius: var(--radius-top) var(--radius-top) var(--radius-bottom) var(--radius-bottom);
-    border-radius: var(--radius);
-    clip-path: inset(0 round var(--radius)); /* firefox */
-    outline: none;
-    cursor: default;
-    color: var(--text-color);
-    font-size: 0.9380000000000001rem;
-    position: relative;
-    transform: scale(1);
+.react-aria-Row {
+  outline: none;
+  cursor: default;
+  color: var(--text-color);
+  position: relative;
+  transform: scale(1);
+  transition-property: background, color;
+  transition-duration: 200ms;
+  -webkit-tap-highlight-color: transparent;
 
-    &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -2px;
-    }
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -2px;
+  }
 
-    &[data-pressed] {
-      background: var(--gray-100);
-    }
+  &[data-pressed] {
+    background: var(--gray-100);
+  }
 
-    &[data-selected] {
-      background: var(--highlight-background);
-      color: var(--highlight-foreground);
-      --focus-ring-color: var(--highlight-foreground);
+  &[data-selected] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    --focus-ring-color: var(--highlight-foreground);
 
-      &[data-focus-visible],
-      .react-aria-Cell[data-focus-visible] {
-        outline-offset: -4px;
-      }
+    &[data-focus-visible],
+    .react-aria-Cell[data-focus-visible] {
+      outline-offset: -4px;
     }
 
-    &[data-disabled] {
-      color: var(--text-color-disabled);
+    &[data-pressed] {
+      background: var(--highlight-background-pressed);
     }
   }
 
-  .react-aria-Cell,
-  .react-aria-Column {
-    padding: 4px 8px;
-    text-align: left;
-    outline: none;
-    box-sizing: border-box;
-
-    &div {
-      display: flex;
-      align-items: center;
-      height: 100%;
-    }
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+  }
 
-    &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -2px;
-    }
+  &[data-href] {
+    cursor: pointer;
   }
 
-  .react-aria-Cell {
+  &[data-dragging] {
+    opacity: 0.6;
     transform: translateZ(0);
+  }
 
-    &:first-child {
-      border-radius: var(--radius-top) 0 0 var(--radius-bottom);
-    }
-
-    &:last-child {
-      border-radius: 0 var(--radius-top) var(--radius-bottom) 0;
-    }
+  &[data-drop-target] {
+    outline: 2px solid var(--highlight-background);
+    background: var(--highlight-overlay)
   }
 
-  /* join selected items if :has selector is supported */
-  @supports selector(:has(.foo)) {
-    .react-aria-Row[data-selected]:has(+ [data-selected]),
-    .react-aria-Row[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
-      --radius-bottom: 0px;
+  .drag-button {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    text-align: center;
+
+    svg {
+      width: var(--spacing-4);
+      height: var(--spacing-4);
     }
 
-    .react-aria-Row[data-selected] + [data-selected],
-    .react-aria-Row[data-selected] + .react-aria-DropIndicator + [data-selected]{
-      --radius-top: 0px;
+    &[data-focus-visible] {
+      border-radius: 4px;
+      outline: 2px solid var(--focus-ring-color);
     }
   }
 
-  .react-aria-ProgressBar {
-    margin: auto;
+  .react-aria-DropIndicator[data-drop-target] {
+    outline: 1px solid var(--highlight-background);
+    transform: translateZ(0);
   }
 }
 
-:where(.react-aria-Row) .react-aria-Checkbox {
-  --selected-color: var(--highlight-foreground);
-  --selected-color-pressed: var(--highlight-foreground-pressed);
-  --checkmark-color: var(--highlight-background);
-  --background-color: var(--highlight-background);
-}
-
-.react-aria-Row[data-href] {
-  cursor: pointer;
-}
-
+.react-aria-Cell,
 .react-aria-Column {
-  .column-header {
+  padding: var(--spacing-2);
+  text-align: left;
+  outline: none;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+
+  &div {
     display: flex;
     align-items: center;
-    font-weight: bold;
+    height: 100%;
   }
 
-  .sort-indicator {
-    padding: 0 2px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -2px;
   }
+}
 
-  &:not([data-sort-direction]) .sort-indicator {
-    visibility: hidden;
+.react-aria-Column {
+  --button-color: var(--gray);
+  --button-border: transparent;
+  --button-shadow: transparent;
+  --button-border-size: 0px;
+  cursor: default;
+  border-bottom: 0.5px solid var(--border-color);
+  border-inline-end: 0.5px solid var(--border-color);
+  position: relative;
+  z-index: calc(sibling-count() - sibling-index());
+
+  &:last-child {
+    border-inline-end: none;
   }
-}
 
-.react-aria-TableBody {
-  &[data-empty] {
-    text-align: center;
-    font-style: italic;
+  &[data-pressed] {
+    background: var(--gray-200);
   }
-}
 
-.react-aria-ResizableTableContainer {
-  max-width: 400px;
-  overflow: auto;
-  position: relative;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  background: var(--background-color);
+  &[data-sort-direction] {
+    --button-color: var(--tint);
 
-  .react-aria-Table {
-    border: none;
+    &[data-pressed] {
+      background: var(--tint-200);
+    }
+  }
+
+  .column-header {
+    display: flex;
+    align-items: center;
+    font-weight: 600;
   }
 
-  .column-name,
-  .react-aria-Button {
-    --background-color: var(--overlay-background);
+  .column-name {
     flex: 1;
     font: inherit;
     text-align: start;
     color: inherit;
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     border-color: transparent;
-    transition: background 200ms;
-    &[data-hovered] {
-      background: var(--highlight-hover);
-    }
-
-    &[data-pressed] {
-      background: var(--highlight-pressed);
-      box-shadow: none;
-    }
+    border-radius: var(--radius-sm);
 
-    &:focus-visible {
+    &[data-focus-visible] {
       outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
     }
   }
 
-  .react-aria-ColumnResizer {
-    width: 15px;
-    background-color: grey;
-    height: 25px;
-    flex: 0 0 auto;
-    touch-action: none;
-    box-sizing: border-box;
-    border: 5px;
-    border-style: none solid;
-    border-color: transparent;
-    background-clip: content-box;
+  .sort-indicator {
+    padding: 0 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-    &[data-resizable-direction=both] {
-      cursor: ew-resize;
-    }
+  &:not([data-sort-direction]) .sort-indicator {
+    visibility: hidden;
+  }
+}
 
-    &[data-resizable-direction=left] {
-      cursor: e-resize;
-    }
+.react-aria-ColumnResizer {
+  width: 1px;
+  border-radius: var(--radius-sm);
+  background-color: var(--gray-500);
+  padding: 0 var(--spacing-2);
+  translate: var(--spacing-4) 0;
+  height: 32px;
+  margin: -16px 0;
+  flex: 0 0 auto;
+  touch-action: none;
+  box-sizing: content-box;
+  background-clip: content-box;
+
+  &[data-resizable-direction=both] {
+    cursor: ew-resize;
+  }
 
-    &[data-resizable-direction=right] {
-      cursor: w-resize;
-    }
+  &[data-resizable-direction=left] {
+    cursor: e-resize;
+  }
 
-    &[data-focus-visible] {
-      background-color: var(--focus-ring-color);
-    }
+  &[data-resizable-direction=right] {
+    cursor: w-resize;
+  }
 
-    &[data-resizing] {
-      border-color: var(--focus-ring-color);
-      background-color: transparent;
-    }
+  &[data-focus-visible] {
+    background-color: var(--focus-ring-color);
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -2px;
   }
 
-  .react-aria-Column,
-  .react-aria-Cell {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  &[data-resizing] {
+    width: 2px;
+    background-color: var(--highlight-background);
   }
 }
 
-.react-aria-Row {
-  &[data-dragging] {
-    opacity: 0.6;
-    transform: translateZ(0);
+.react-aria-Cell {
+  transform: translateZ(0);
+  --border-color: var(--gray-300);
+  tr:not(:last-child) & {
+    border-bottom: 0.5px solid var(--border-color);
   }
 
-  [slot=drag] {
-    all: unset;
-    width: 15px;
-    text-align: center;
+  [data-selected]:has(+ [data-selected]) & {
+    --border-color: rgb(255 255 255 / 0.3);
+  }
 
-    &[data-focus-visible] {
-      border-radius: 4px;
-      outline: 2px solid var(--focus-ring-color);
-    }
+  @media (forced-colors: active) {
+    --border-color: ButtonBorder;
   }
 }
 
@@ -263,20 +261,31 @@
   transform: translateZ(0);
 }
 
-.react-aria-Table[data-drop-target] {
-  outline: 2px solid var(--highlight-background);
-  outline-offset: -1px;
-  background: var(--highlight-overlay)
+:where(.react-aria-Row) .react-aria-Checkbox {
+  --checkmark-color: var(--highlight-background);
+  &[data-selected] .indicator {
+    --indicator-color: var(--highlight-foreground);
+    --indicator-shadow: transparent;
+  }
 }
 
-.react-aria-Row[data-drop-target] {
-  outline: 2px solid var(--highlight-background);
-  background: var(--highlight-overlay)
-}
+.react-aria-ResizableTableContainer {
+  width: 100%;
+  overflow: auto;
+  position: relative;
+  border: 0.5px solid var(--border-color);
+  border-radius: var(--radius);
+  background: var(--background-color);
 
-.react-aria-DropIndicator[data-drop-target] {
-  outline: 1px solid var(--highlight-background);
-  transform: translateZ(0);
+  .react-aria-Table {
+    border: none;
+  }
+
+  .react-aria-Cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .react-aria-Cell img {
@@ -287,6 +296,12 @@
 }
 
 .react-aria-TableLoadingIndicator {
-  height: 24px;
+  height: 32px;
   position: relative;
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
diff --git a/starters/docs/src/Table.tsx b/starters/docs/src/Table.tsx
index 365268e0de2..23bb721cbdd 100644
--- a/starters/docs/src/Table.tsx
+++ b/starters/docs/src/Table.tsx
@@ -3,7 +3,7 @@ import {
   Button,
   Collection,
   Column as AriaColumn,
-  ColumnProps,
+  ColumnProps as AriaColumnProps,
   Row as AriaRow,
   RowProps,
   Table as AriaTable,
@@ -14,9 +14,14 @@ import {
   TableBodyProps,
   TableBody as AriaTableBody,
   CellProps,
-  Cell as AriaCell
+  Cell as AriaCell,
+  ColumnResizer,
+  Group,
+  TableLoadMoreItem as AriaTableLoadMoreItem,
+  TableLoadMoreItemProps
 } from 'react-aria-components';
 import {Checkbox} from './Checkbox';
+import {ProgressCircle} from './ProgressCircle';
 import {ChevronUp, ChevronDown, GripVertical} from 'lucide-react';
 import './Table.css';
 
@@ -24,24 +29,32 @@ export function Table(props: TableProps) {
   return <AriaTable {...props} />;
 }
 
+interface ColumnProps extends AriaColumnProps {
+  allowsResizing?: boolean
+}
+
 export function Column(
   props: Omit<ColumnProps, 'children'> & { children?: React.ReactNode }
 ) {
   return (
-    (
-      <AriaColumn {...props}>
-        {({ allowsSorting, sortDirection }) => (
-          <div className="column-header">
+    <AriaColumn {...props} className="react-aria-Column button-base">
+      {({ allowsSorting, sortDirection }) => (
+        <div className="column-header">
+          <Group
+            role="presentation"
+            tabIndex={-1}
+            className="column-name">
             {props.children}
-            {allowsSorting && (
-              <span aria-hidden="true" className="sort-indicator">
-                {sortDirection === 'ascending' ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-              </span>
-            )}
-          </div>
-        )}
-      </AriaColumn>
-    )
+          </Group>
+          {allowsSorting && (
+            <span aria-hidden="true" className="sort-indicator">
+              {sortDirection === 'ascending' ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+            </span>
+          )}
+          {props.allowsResizing && <ColumnResizer />}
+        </div>
+      )}
+    </AriaColumn>
   );
 }
 
@@ -54,9 +67,9 @@ export function TableHeader<T extends object>(
     (
       <AriaTableHeader {...otherProps}>
         {/* Add extra columns for drag and drop and selection. */}
-        {allowsDragging && <AriaColumn />}
+        {allowsDragging && <AriaColumn width={20} minWidth={20} style={{width: 20}} className="react-aria-Column button-base" />}
         {selectionBehavior === 'toggle' && (
-          <AriaColumn width={40} minWidth={0}>
+          <AriaColumn width={32} minWidth={32} style={{width: 32}} className="react-aria-Column button-base">
             {selectionMode === 'multiple' && <Checkbox slot="selection" />}
           </AriaColumn>
         )}
@@ -78,7 +91,7 @@ export function Row<T extends object>(
       <AriaRow id={id} {...otherProps}>
         {allowsDragging && (
           <Cell>
-            <Button slot="drag"><GripVertical size={16} /></Button>
+            <Button slot="drag" className="drag-button"><GripVertical /></Button>
           </Cell>
         )}
         {selectionBehavior === 'toggle' && (
@@ -101,3 +114,13 @@ export function TableBody<T extends object>(props: TableBodyProps<T>) {
 export function Cell(props: CellProps) {
   return <AriaCell {...props} />;
 }
+
+export function TableLoadMoreItem(props: TableLoadMoreItemProps) {
+  return (
+    <AriaTableLoadMoreItem {...props}>
+      <div>
+        <ProgressCircle isIndeterminate aria-label="Loading more..." />
+      </div>
+    </AriaTableLoadMoreItem>
+  );
+}
diff --git a/starters/docs/src/Tabs.css b/starters/docs/src/Tabs.css
index c89fae89a23..fd96c3a72d7 100644
--- a/starters/docs/src/Tabs.css
+++ b/starters/docs/src/Tabs.css
@@ -16,26 +16,31 @@
 .react-aria-TabList {
   display: flex;
 
+  .react-aria-SelectionIndicator {
+    background: var(--border-color);
+  }
+
   &[data-orientation=horizontal] {
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 0.5px solid var(--border-color);
 
     .react-aria-SelectionIndicator {
       left: 0;
-      bottom: 0;
+      bottom: -1.5px;
       width: 100%;
-      border-bottom: 3px solid var(--border-color);
+      height: 3px;
+      border-radius: 3px;
     }
   }
 
   &[data-orientation=vertical] {
     flex-direction: column;
-    border-inline-end: 1px solid gray;
+    border-inline-end: 1px solid var(--border-color);
 
     .react-aria-SelectionIndicator {
       top: 0;
-      right: 0;
+      right: -1.5px;
       height: 100%;
-      border-inline-end: 3px solid var(--border-color, transparent);
+      width: 3px;
     }
   }
 }
@@ -45,13 +50,15 @@
   cursor: default;
   outline: none;
   position: relative;
-  color: var(--text-color-base);
+  font: var(--font-size) system-ui;
+  color: var(--text-color);
   transition: color 200ms;
   --border-color: transparent;
   forced-color-adjust: none;
+  -webkit-tap-highlight-color: transparent;
 
   &[data-hovered],
-  &[data-focused] {
+  &[data-focus-visible] {
     color: var(--text-color-hover);
   }
 
@@ -67,7 +74,7 @@
 
   &[data-selected] {
     --border-color: var(--highlight-background);
-    color: var(--text-color);
+    color: var(--text-color-hover);
   }
 
   &[data-disabled] {
@@ -77,12 +84,15 @@
     }
   }
 
-  &[data-focus-visible]:after {
-    content: '';
-    position: absolute;
-    inset: 4px;
-    border-radius: 4px;
-    border: 2px solid var(--focus-ring-color);
+  &[data-focus-visible] {
+    border-radius: calc(var(--radius-sm) + 8px);
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -8px;
+  }
+
+  &[href] {
+    text-decoration: none;
+    cursor: pointer;
   }
 }
 
@@ -96,8 +106,3 @@
     outline: 2px solid var(--focus-ring-color);
   }
 }
-
-.react-aria-Tab[href] {
-  text-decoration: none;
-  cursor: pointer;
-}
diff --git a/starters/docs/src/TagGroup.css b/starters/docs/src/TagGroup.css
index d72cd89433f..84efa4c71c2 100644
--- a/starters/docs/src/TagGroup.css
+++ b/starters/docs/src/TagGroup.css
@@ -1,68 +1,95 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-TagGroup {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  font-size: small;
+  font: var(--font-size) system-ui;
   color: var(--text-color);
+
+  [slot=errorMessage] {
+    margin-top: var(--spacing);
+    font-size: var(--font-size-sm);
+    color: var(--invalid-color);
+  }
 }
 
 .react-aria-TagList {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: var(--spacing-2);
 }
 
 .react-aria-Tag {
-  color: var(--text-color);
-  border: 1px solid var(--border-color);
+  --button-color: var(--gray);
+  --button-gradient-size: 4px;
+  text-shadow: none;
   forced-color-adjust: none;
-  border-radius: 4px;
-  padding: 2px 8px;
-  font-size: 0.812875rem;
-  outline: none;
+  border-radius: 9999px;
+  height: var(--spacing-5);
+  padding: 0 var(--spacing-3);
+  font: var(--font-size-sm) system-ui;
   cursor: default;
   display: flex;
   align-items: center;
-  transition: border-color 200ms;
+  gap: var(--spacing-1);
+  transition-property: scale, background, border-color, box-shadow, text-shadow;
+  transition-duration: 200ms;;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  -webkit-tap-highlight-color: transparent;
 
-  &[data-hovered] {
-    border-color: var(--border-color-hover);
+  &:has(.remove-button) {
+    padding: 0 var(--spacing-1) 0 var(--spacing-2);
   }
 
-  &[data-focus-visible] {
-    outline: 2px solid var(--focus-ring-color);
-    outline-offset: 2px;
+  &[data-pressed] {
+    scale: 0.96;
   }
 
   &[data-selected] {
-    border-color: var(--highlight-background);
-    background: var(--highlight-background);
-    color: var(--highlight-foreground);
+    --button-color: var(--tint);
+  }
+
+  &[data-href] {
+    text-decoration: none;
+    cursor: pointer;
   }
 
-  [slot=remove] {
+  .remove-button {
     background: none;
-    border: 1px solid var(--border-color);
+    border: none;
     padding: 0;
-    margin-left: 4px;
-    color: var(--text-color-base);
+    color: var(--gray-1000);
     transition: color 200ms;
     outline: none;
-    font-size: 0.95em;
     border-radius: 100%;
     aspect-ratio: 1/1;
     height: calc(100% - 4px);
     display: flex;
     align-items: center;
     justify-content: center;
+    transition-property: background, color, scale;
+    transition-duration: 200ms;
 
-    &[data-hovered] {
-      color: var(--text-color-hover);
+    svg {
+      width: calc(100% - 2px);
+      height: calc(100% - 2px);
+    }
+
+    &:where([data-hovered], [data-pressed]) {
+      background: var(--gray-300);
+      color: var(--gray-1200);
+    }
+
+    @media (forced-colors: active) {
+      background: ButtonFace;
+      color: ButtonText;
+    }
+
+    &[data-pressed] {
+      scale: 0.9;
     }
 
     &[data-focus-visible] {
@@ -72,33 +99,11 @@
   }
 
   &[data-selected] {
-    [slot=remove] {
+    .remove-button {
       color: inherit;
+      &[data-hovered] {
+        background: rgb(255 255 255 / 0.2);
+      }
     }
   }
 }
-
-.react-aria-Tag[data-href] {
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.react-aria-TagList {
-  .react-aria-Tag {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-      color: var(--text-color-disabled);
-    }
-  }
-}
-
-.react-aria-TagGroup {
-  [slot=description] {
-    font-size: 12px;
-  }
-
-  [slot=errorMessage] {
-    font-size: 12px;
-    color: var(--invalid-color);
-  }
-}
diff --git a/starters/docs/src/TagGroup.tsx b/starters/docs/src/TagGroup.tsx
index 4ce35017cce..35eae1becb7 100644
--- a/starters/docs/src/TagGroup.tsx
+++ b/starters/docs/src/TagGroup.tsx
@@ -8,7 +8,7 @@ import {
   TagListProps,
   TagProps,
 } from 'react-aria-components';
-import {Label} from './Form';
+import {Description, Label} from './Form';
 import {Text} from './Content';
 import {X} from 'lucide-react';
 import './TagGroup.css';
@@ -40,7 +40,7 @@ export function TagGroup<T extends object>(
         <TagList items={items} renderEmptyState={renderEmptyState}>
           {children}
         </TagList>
-        {description && <Text slot="description">{description}</Text>}
+        {description && <Description>{description}</Description>}
         {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
       </AriaTagGroup>
     )
@@ -55,11 +55,11 @@ export function Tag(
   let textValue = typeof children === 'string' ? children : undefined;
   return (
     (
-      <AriaTag textValue={textValue} {...props}>
+      <AriaTag textValue={textValue} {...props} className="react-aria-Tag button-base">
         {({ allowsRemoving }) => (
           <>
             {children}
-            {allowsRemoving && <Button slot="remove"><X size={12} /></Button>}
+            {allowsRemoving && <Button slot="remove" className="remove-button"><X /></Button>}
           </>
         )}
       </AriaTag>
diff --git a/starters/docs/src/TextField.css b/starters/docs/src/TextField.css
index cb180f58f0a..cd613396730 100644
--- a/starters/docs/src/TextField.css
+++ b/starters/docs/src/TextField.css
@@ -1,48 +1,43 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-TextField {
   display: flex;
   flex-direction: column;
-  width: fit-content;
-  color: var(--text-color);
+}
 
-  .react-aria-Input,
-  .react-aria-TextArea {
-    padding: 0.25025rem;
-    margin: 0;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background: var(--field-background);
-    font-size: 1.000125rem;
-    color: var(--field-text-color);
+.react-aria-Input,
+.react-aria-TextArea {
+  width: 100%;
+  min-height: var(--spacing-8);
+  padding: 0 var(--spacing-3);
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  border-radius: var(--radius);
+  font: var(--font-size) system-ui;
+  color: var(--field-text-color);
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
 
-    &[data-focused] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -1px;
-    }
-  }
-
-  .react-aria-Input,
-  .react-aria-TextArea {
-    &[data-invalid] {
-      border-color: var(--invalid-color);
-    }
+  &::placeholder {
+    color: var(--text-color-placeholder);
   }
 
-  .react-aria-FieldError {
-    font-size: 12px;
-    color: var(--invalid-color);
+  &[data-focused] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
   }
 
-  [slot=description] {
-    font-size: 12px;
-  }
-
-  .react-aria-Input,
-  .react-aria-TextArea {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+    &::placeholder {
       color: var(--text-color-disabled);
     }
   }
 }
+
+.react-aria-TextArea {
+  min-height: 64px;
+  padding: var(--spacing-2) var(--spacing-3);
+}
diff --git a/starters/docs/src/TextField.tsx b/starters/docs/src/TextField.tsx
index 7c144e105d7..efc445e32a0 100644
--- a/starters/docs/src/TextField.tsx
+++ b/starters/docs/src/TextField.tsx
@@ -5,9 +5,7 @@ import {
   TextFieldProps as AriaTextFieldProps,
   ValidationResult
 } from 'react-aria-components';
-import {Label, FieldError} from './Form';
-import {Text} from './Content';
-
+import {Label, FieldError, Description} from './Form';
 import './TextField.css';
 
 export interface TextFieldProps extends AriaTextFieldProps {
@@ -20,13 +18,11 @@ export function TextField(
   { label, description, errorMessage, ...props }: TextFieldProps
 ) {
   return (
-    (
-      <AriaTextField {...props}>
-        <Label>{label}</Label>
-        <Input />
-        {description && <Text slot="description">{description}</Text>}
-        <FieldError>{errorMessage}</FieldError>
-      </AriaTextField>
-    )
+    <AriaTextField {...props}>
+      <Label>{label}</Label>
+      <Input className="react-aria-Input inset" />
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </AriaTextField>
   );
 }
diff --git a/starters/docs/src/TimeField.css b/starters/docs/src/TimeField.css
index 385cd4eb9ae..0a504061eb3 100644
--- a/starters/docs/src/TimeField.css
+++ b/starters/docs/src/TimeField.css
@@ -1,16 +1,6 @@
 @import "./theme.css";
 
 .react-aria-TimeField {
-  color: var(--text-color);
   display: flex;
   flex-direction: column;
-
-  .react-aria-FieldError {
-    font-size: 12px;
-    color: var(--invalid-color);
-  }
-
-  [slot=description] {
-    font-size: 12px;
-  }
 }
diff --git a/starters/docs/src/TimeField.tsx b/starters/docs/src/TimeField.tsx
index 7bf56e490c8..8f556aef3b2 100644
--- a/starters/docs/src/TimeField.tsx
+++ b/starters/docs/src/TimeField.tsx
@@ -5,10 +5,8 @@ import {
   TimeValue,
   ValidationResult
 } from 'react-aria-components';
-import {Label, FieldError} from './Form';
-import {Text} from './Content';
+import {Label, FieldError, Description} from './Form';
 import {DateInput, DateSegment} from './DateField';
-
 import './TimeField.css';
 
 export interface TimeFieldProps<T extends TimeValue>
@@ -22,15 +20,13 @@ export function TimeField<T extends TimeValue>(
   { label, description, errorMessage, ...props }: TimeFieldProps<T>
 ) {
   return (
-    (
-      <AriaTimeField {...props}>
-        <Label>{label}</Label>
-        <DateInput>
-          {(segment) => <DateSegment segment={segment} />}
-        </DateInput>
-        {description && <Text slot="description">{description}</Text>}
-        <FieldError>{errorMessage}</FieldError>
-      </AriaTimeField>
-    )
+    <AriaTimeField {...props}>
+      <Label>{label}</Label>
+      <DateInput>
+        {(segment) => <DateSegment segment={segment} />}
+      </DateInput>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </AriaTimeField>
   );
 }
diff --git a/starters/docs/src/ToggleButton.css b/starters/docs/src/ToggleButton.css
index ab44aa03aae..ed6889619cc 100644
--- a/starters/docs/src/ToggleButton.css
+++ b/starters/docs/src/ToggleButton.css
@@ -1,47 +1,43 @@
 @import "./theme.css";
+@import "./utilities.css";
 
 .react-aria-ToggleButton {
-  color: var(--text-color);
-  background: var(--button-background);
-  border: 1px solid var(--border-color);
+  border: none;
   forced-color-adjust: none;
-  border-radius: 4px;
+  border-radius: var(--radius);
   appearance: none;
   vertical-align: middle;
-  font-size: 0.875rem;
+  font: var(--font-size) system-ui;
+  font-weight: 500;
   text-align: center;
   margin: 0;
-  outline: none;
-  padding: 6px 10px;
+  height: var(--spacing-8);
+  padding: 0 var(--spacing-3);
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  transition-property: background, box-shadow, text-shadow, scale;
+  transition-duration: 200ms;
+  -webkit-tap-highlight-color: transparent;
 
-  &[data-pressed] {
-    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
-    background: var(--button-background-pressed);
-    border-color: var(--border-color-pressed);
+  > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  &[data-selected] {
-    background: var(--highlight-background);
-    border-color: var(--highlight-background);
-    color: var(--highlight-foreground);
-
-    &[data-pressed] {
-      background: var(--highlight-background-pressed);
-      border-color: var(--highlight-background-pressed);
-    }
+  > span > svg {
+    width: var(--spacing-4);
+    height: var(--spacing-4);
   }
 
-  &[data-focus-visible] {
-    outline: 2px solid var(--focus-ring-color);
-    outline-offset: 2px;
+  &:has(> span > svg:only-child) {
+    width: var(--spacing-8);
+    padding: 0;
+    border-radius: 9999px;
   }
 
-  &[data-disabled] {
-    border-color: var(--border-color-disabled);
-    background: var(--button-background);
-    color: var(--text-color-disabled);
+  &[data-pressed] {
+    scale: 0.95;
   }
 }
diff --git a/starters/docs/src/ToggleButton.tsx b/starters/docs/src/ToggleButton.tsx
index cc8c4f666f2..26de30d61cb 100644
--- a/starters/docs/src/ToggleButton.tsx
+++ b/starters/docs/src/ToggleButton.tsx
@@ -1,7 +1,21 @@
 'use client';
-import {ToggleButton as RACToggleButton, ToggleButtonProps} from 'react-aria-components';
+import {composeRenderProps, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components';
 import './ToggleButton.css';
 
+interface ToggleButtonProps extends RACToggleButtonProps {
+  /**
+   * The visual style of the button (Vanilla CSS implementation specific).
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary' | 'quiet'
+}
+
 export function ToggleButton(props: ToggleButtonProps) {
-  return <RACToggleButton {...props} />;
+  return (
+    <RACToggleButton {...props} className="react-aria-ToggleButton button-base" data-variant={props.variant || 'primary'}>
+      {composeRenderProps(props.children, children => (
+        <span>{children}</span>
+      ))}
+    </RACToggleButton>
+  );
 }
diff --git a/starters/docs/src/ToggleButtonGroup.css b/starters/docs/src/ToggleButtonGroup.css
index cd74b2e8263..399360ba440 100644
--- a/starters/docs/src/ToggleButtonGroup.css
+++ b/starters/docs/src/ToggleButtonGroup.css
@@ -3,10 +3,21 @@
 .react-aria-ToggleButtonGroup {
   display: flex;
 
-  > button {
-    border-radius: 0;
+  > .react-aria-ToggleButton {
     z-index: 1;
 
+    > span {
+      transition: scale 200ms;
+    }
+
+    &[data-pressed] {
+      scale: 1;
+
+      > span {
+        scale: 0.9;
+      }
+    }
+
     &[data-disabled] {
       z-index: 0;
     }
@@ -21,16 +32,17 @@
 .react-aria-ToggleButtonGroup[data-orientation=horizontal] {
   flex-direction: row;
 
-  > button {
+  > .react-aria-ToggleButton {
     margin-inline-start: -1px;
+    border-radius: 0;
 
     &:first-child {
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--radius) 0 0 var(--radius);
       margin-inline-start: 0;
     }
 
     &:last-child {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 var(--radius) var(--radius) 0;
     }
   }
 }
@@ -39,16 +51,17 @@
   flex-direction: column;
   width: fit-content;
 
-  > button {
+  > .react-aria-ToggleButton {
     margin-block-start: -1px;
+    border-radius: 0;
 
     &:first-child {
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--radius) var(--radius) 0 0;
       margin-block-start: 0;
     }
 
     &:last-child {
-      border-radius: 0 0 4px 4px;
+      border-radius: 0 0 var(--radius) var(--radius);
     }
   }
 }
diff --git a/starters/docs/src/Toolbar.css b/starters/docs/src/Toolbar.css
index c93ac925e2f..ce52d1f84a0 100644
--- a/starters/docs/src/Toolbar.css
+++ b/starters/docs/src/Toolbar.css
@@ -3,12 +3,14 @@
 .react-aria-Toolbar {
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
+  align-items: center;
+  gap: var(--spacing-1);
   width: fit-content;
 
   &[data-orientation=horizontal] {
     flex-direction: row;
   }
+  
   &[data-orientation=vertical] {
     flex-direction: column;
     align-items: start;
@@ -24,13 +26,13 @@
 
     &:not([aria-orientation=vertical]) {
       border: none;
-      height: 1px;
+      height: 0.5px;
       width: 100%;
       margin: 10px 0;
     }
 
     &[aria-orientation=vertical] {
-      width: 1px;
+      width: 0.5px;
       margin: 0px 10px;
     }
   }
diff --git a/starters/docs/src/Tooltip.css b/starters/docs/src/Tooltip.css
index 78897d98c97..228d416c026 100644
--- a/starters/docs/src/Tooltip.css
+++ b/starters/docs/src/Tooltip.css
@@ -2,18 +2,17 @@
 
 .react-aria-Tooltip {
   box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
-  border-radius: 4px;
+  border-radius: var(--radius);
   background: var(--highlight-background);
   color: var(--highlight-foreground);
   forced-color-adjust: none;
   outline: none;
-  padding: 2px 8px;
+  padding: var(--spacing-1) var(--spacing-2);
   max-width: 150px;
   /* fixes FF gap */
   transform: translate3d(0, 0, 0);
   transition: transform 200ms, opacity 200ms;
-  font-family: system-ui;
-  font-size: 0.875rem;
+  font: var(--font-size) system-ui;
 
   &[data-entering],
   &[data-exiting] {
@@ -22,12 +21,12 @@
   }
 
   &[data-placement=top] {
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     --origin: translateY(4px);
   }
 
   &[data-placement=bottom] {
-    margin-top: 8px;
+    margin-top: 10px;
     --origin: translateY(-4px);
     & .react-aria-OverlayArrow svg {
       transform: rotate(180deg);
@@ -35,7 +34,7 @@
   }
 
   &[data-placement=right] {
-    margin-left: 8px;
+    margin-left: 10px;
     --origin: translateX(-4px);
     & .react-aria-OverlayArrow svg {
       transform: rotate(90deg);
@@ -43,14 +42,14 @@
   }
 
   &[data-placement=left] {
-    margin-right: 8px;
+    margin-right: 10px;
     --origin: translateX(4px);
     & .react-aria-OverlayArrow svg {
       transform: rotate(-90deg);
     }
   }
 
-  & .react-aria-OverlayArrow svg {
+  .react-aria-OverlayArrow svg {
     display: block;
     fill: var(--highlight-background);
   }
diff --git a/starters/docs/src/Tree.css b/starters/docs/src/Tree.css
index 1257bea9d8d..7654b83739a 100644
--- a/starters/docs/src/Tree.css
+++ b/starters/docs/src/Tree.css
@@ -3,11 +3,10 @@
 .react-aria-Tree {
   display: flex;
   flex-direction: column;
-  gap: 2px;
   overflow: auto;
-  padding: 4px;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  padding: var(--spacing-1);
+  border: 0.5px solid var(--border-color);
+  border-radius: calc(var(--radius) + var(--spacing-1));
   background: var(--overlay-background);
   forced-color-adjust: none;
   outline: none;
@@ -20,142 +19,124 @@
     outline-offset: -1px;
   }
 
-  .react-aria-TreeItem {
-    display: flex;
+  &[data-empty] {
     align-items: center;
-    gap: 0.499625rem;
-    min-height: 28px;
-    padding: 0.25025rem 0.25025rem 0.25025rem 0.499625rem;
-    --padding: 16px;
-    border-radius: 6px;
-    outline: none;
-    cursor: default;
-    color: var(--text-color);
-    font-size: 0.9380000000000001rem;
-    position: relative;
-    transform: translateZ(0);
-
-    .react-aria-Button[slot=chevron] {
-      all: unset;
-      display: flex;
-      visibility: hidden;
-      align-items: center;
-      justify-content: center;
-      width: 1.1375rem;
-      height: 100%;
-      padding-left: calc((var(--tree-item-level) - 1) * var(--padding));
-
-      svg {
-        rotate: 0deg;
-        transition: rotate 200ms;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 3px;
-      }
-    }
+    justify-content: center;
+    font-style: italic;
+    min-height: 100px;
+  }
 
-    &[data-has-child-items] .react-aria-Button[slot=chevron] {
-      visibility: visible;
-    }
+  &[data-selection-mode=multiple] {
+    --checkbox-width: 28px;
+  }
 
-    &[data-expanded] .react-aria-Button[slot=chevron] svg {
-      rotate: 90deg;
-    }
+  &[data-allows-dragging] {
+    --drag-button-width: 23px;
+  }
 
-    &[data-focus-visible] {
-      outline: 2px solid var(--focus-ring-color);
-      outline-offset: -2px;
-    }
+  &[data-drop-target] {
+    outline: 2px solid var(--highlight-background);
+    outline-offset: -1px;
+    background: var(--highlight-overlay);
+  }
 
-    &[data-pressed] {
-      background: var(--gray-100);
+  .react-aria-DropIndicator {
+    &[data-drop-target] {
+      outline: 1px solid var(--highlight-background);
+      margin-left: calc(8px + var(--checkbox-width, 0px) + var(--drag-button-width, 0px) + 26px + (var(--tree-item-level) - 1) * 16px);
     }
+  }
+}
 
-    &[data-selected] {
-      background: var(--highlight-background);
-      color: var(--highlight-foreground);
-      --focus-ring-color: var(--highlight-foreground);
-
-      &[data-focus-visible] {
-        outline-color: var(--highlight-foreground);
-        outline-offset: -4px;
-      }
-
-      .react-aria-Button {
-        color: var(--highlight-foreground);
-        --highlight-hover: rgb(255 255 255 / 0.1);
-        --highlight-pressed: rgb(255 255 255 / 0.2);
-      }
+.react-aria-TreeItem {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: 28px;
+  padding: 0.25025rem 0.25025rem 0.25025rem 0.499625rem;
+  --padding: var(--spacing-4);
+  border-radius: var(--radius);
+  outline: none;
+  cursor: default;
+  color: var(--text-color);
+  font: var(--font-size) system-ui;
+  position: relative;
+  transform: translateZ(0);
+  transition-property: background, color, border-radius;
+  transition-duration: 200ms;
+  -webkit-tap-highlight-color: transparent;
+
+  .react-aria-Button[slot=chevron] {
+    all: unset;
+    display: flex;
+    visibility: hidden;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacing-4);
+    height: 100%;
+    padding-left: calc((var(--tree-item-level) - 1) * var(--padding));
+
+    svg {
+      rotate: 0deg;
+      transition: rotate 200ms;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 3px;
     }
+  }
 
-    &[data-disabled] {
-      color: var(--text-color-disabled);
-    }
+  &[data-has-child-items] .react-aria-Button[slot=chevron] {
+    visibility: visible;
+  }
 
-    .react-aria-Button:not([slot]) {
-      margin-left: auto;
-      background: transparent;
-      border: none;
-      font-size: 1.05rem;
-      line-height: 1.2em;
-      padding: 0.25025rem 0.375375rem;
-      transition: background 200ms;
-
-      &[data-hovered] {
-        background: var(--highlight-hover);
-      }
-
-      &[data-pressed] {
-        background: var(--highlight-pressed);
-        box-shadow: none;
-      }
-    }
+  &[data-expanded] .react-aria-Button[slot=chevron] svg {
+    rotate: 90deg;
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -2px;
   }
 
-  /* join selected items if :has selector is supported */
-  @supports selector(:has(.foo)) {
-    gap: 0;
+  &[data-pressed] {
+    background: var(--highlight-hover);
+  }
+
+  &[data-selected] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    --focus-ring-color: var(--highlight-foreground);
+
+    &[data-focus-visible] {
+      outline-color: var(--highlight-foreground);
+      outline-offset: -4px;
+    }
 
-    .react-aria-TreeItem[data-selected]:has(+ [data-selected]) {
+    &:has(+ [data-selected]),
+    &:has(+ .react-aria-DropIndicator + [data-selected]) {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    .react-aria-TreeItem[data-selected] + [data-selected] {
+    + [data-selected],
+    + .react-aria-DropIndicator + [data-selected] {
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
   }
 
-  :where(.react-aria-TreeItem) .react-aria-Checkbox {
-    --selected-color: var(--highlight-foreground);
-    --selected-color-pressed: var(--highlight-foreground-pressed);
-    --checkmark-color: var(--highlight-background);
-    --background-color: var(--highlight-background);
+  &[data-href] {
+    cursor: pointer;
   }
-}
-
-.react-aria-TreeLoader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 28px;
-}
 
-.react-aria-TreeItem[data-href] {
-  cursor: pointer;
-}
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+  }
 
-.react-aria-Tree {
-  &[data-empty] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-style: italic;
+  .react-aria-Button:not([slot]) {
+    margin-left: auto;
   }
-}
 
-.react-aria-TreeItem {
   &[data-allows-dragging] {
     padding-left: 4px;
   }
@@ -169,8 +150,11 @@
     background: var(--highlight-overlay);
   }
 
-  [slot=drag] {
+  .react-aria-Button[slot=drag] {
     all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: 15px;
     text-align: center;
 
@@ -181,25 +165,17 @@
   }
 }
 
-.react-aria-Tree {
-  &[data-selection-mode=multiple] {
-    --checkbox-width: 28px;
-  }
-
-  &[data-allows-dragging] {
-    --drag-button-width: 23px;
-  }
-
-  .react-aria-DropIndicator {
-    &[data-drop-target] {
-      outline: 1px solid var(--highlight-background);
-      margin-left: calc(8px + var(--checkbox-width, 0px) + var(--drag-button-width, 0px) + 26px + (var(--tree-item-level) - 1) * 16px);
-    }
+:where(.react-aria-TreeItem) .react-aria-Checkbox {
+  --checkmark-color: var(--highlight-background);
+  &[data-selected] .indicator {
+    --indicator-color: var(--highlight-foreground);
+    --indicator-shadow: transparent;
   }
 }
 
-.react-aria-Tree[data-drop-target] {
-  outline: 2px solid var(--highlight-background);
-  outline-offset: -1px;
-  background: var(--highlight-overlay);
+.react-aria-TreeLoader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
 }
diff --git a/starters/docs/src/Tree.tsx b/starters/docs/src/Tree.tsx
index 9c42d110da6..821723de330 100644
--- a/starters/docs/src/Tree.tsx
+++ b/starters/docs/src/Tree.tsx
@@ -7,12 +7,13 @@ import {
   TreeItemContentProps,
   TreeItemContentRenderProps,
   TreeItemProps as AriaTreeItemProps,
-  TreeProps
+  TreeProps,
+  TreeLoadMoreItem as AriaTreeLoadMoreItem,
+  TreeLoadMoreItemProps
 } from 'react-aria-components';
-import {ChevronRight} from 'lucide-react';
-
+import {ChevronRight, GripVertical} from 'lucide-react';
 import {Checkbox} from './Checkbox';
-
+import {ProgressCircle} from './ProgressCircle';
 import './Tree.css';
 
 export function Tree<T extends object>(props: TreeProps<T>) {
@@ -23,25 +24,23 @@ export function TreeItemContent(
   props: Omit<TreeItemContentProps, 'children'> & { children?: React.ReactNode }
 ) {
   return (
-    (
-      <AriaTreeItemContent>
-        {(
-          { selectionBehavior, selectionMode, allowsDragging }:
-            TreeItemContentRenderProps
-        ) => (
-          <>
-            {allowsDragging && <Button slot="drag">≡</Button>}
-            {selectionBehavior === 'toggle' && selectionMode !== 'none' && (
-              <Checkbox slot="selection" />
-            )}
-            <Button slot="chevron">
-              <ChevronRight />
-            </Button>
-            {props.children}
-          </>
-        )}
-      </AriaTreeItemContent>
-    )
+    <AriaTreeItemContent>
+      {(
+        { selectionBehavior, selectionMode, allowsDragging }:
+          TreeItemContentRenderProps
+      ) => (
+        <>
+          {allowsDragging && <Button slot="drag"><GripVertical size={16} /></Button>}
+          {selectionBehavior === 'toggle' && selectionMode !== 'none' && (
+            <Checkbox slot="selection" />
+          )}
+          <Button slot="chevron">
+            <ChevronRight />
+          </Button>
+          {props.children}
+        </>
+      )}
+    </AriaTreeItemContent>
   );
 }
 
@@ -51,13 +50,19 @@ export interface TreeItemProps extends Partial<AriaTreeItemProps> {
 
 export function TreeItem(props: TreeItemProps) {
   return (
-    (
-      <AriaTreeItem textValue={props.title} {...props}>
-        <TreeItemContent>
-          {props.title}
-        </TreeItemContent>
-        {props.children}
-      </AriaTreeItem>
-    )
+    <AriaTreeItem textValue={props.title} {...props}>
+      <TreeItemContent>
+        {props.title}
+      </TreeItemContent>
+      {props.children}
+    </AriaTreeItem>
+  );
+}
+
+export function TreeLoadMoreItem(props: TreeLoadMoreItemProps) {
+  return (
+    <AriaTreeLoadMoreItem {...props}>
+      <ProgressCircle isIndeterminate aria-label="Loading more..." />
+    </AriaTreeLoadMoreItem>
   );
 }
diff --git a/starters/docs/src/theme.css b/starters/docs/src/theme.css
index e754f609ef3..ed23b038483 100644
--- a/starters/docs/src/theme.css
+++ b/starters/docs/src/theme.css
@@ -1,88 +1,162 @@
-/* color themes for dark and light modes, generated with Leonardo.
- * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
+/* colors */
+:root {
+  /* Change this variable to set the theme color for all components. */
+  /* You can use the below presets, or choose a custom color. */
+  --tint: var(--indigo);
+
+  /* theme colors */
+  /* lightness channel is only used as a multiplier for chroma (see below) */
+  --gray: oklch(0.5 0 0);
+  --red: oklch(0.6 .181447 27.0726);
+  --orange: oklch(0.7 .150492 54);
+  --yellow: oklch(0.8 .128516 73.8032);
+  --turquoise: oklch(0.5 .081146 205.114);
+  --cyan: oklch(0.4 .142107 243.926);
+  --green: oklch(0.5 .121276 155.372);
+  --blue: oklch(0.5 .22049 266.315);
+  --indigo: oklch(1 .25049 284.23);
+  --purple: oklch(0.7 .223324 302);
+  --pink: oklch(0.6 .177717 347.813);
+
+  /** tint color scale */
+  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
+  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
+  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
+  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
+  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
+  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
+  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
+  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
+  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
+  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
+  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
+  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
+  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
+  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
+  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
+  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
+
+  /* gray scale */
+  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
+  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
+  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
+  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
+  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
+  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
+  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
+  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
+  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
+  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
+  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
+  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
+  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
+  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
+  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
+  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
+}
+
+/* light mode colors */
 :root {
   --background-color: #f8f8f8;
   --gray-50: #ffffff;
-  --gray-100: #d0d0d0;
-  --gray-200: #afafaf;
-  --gray-300: #8f8f8f;
-  --gray-400: #717171;
-  --gray-500: #555555;
-  --gray-600: #393939;
-  --purple-100: #d5c9fa;
-  --purple-200: #b8a3f6;
-  --purple-300: #997cf2;
-  --purple-400: #7a54ef;
-  --purple-500: #582ddc;
-  --purple-600: #3c1e95;
-  --red-100: #f7c4ba;
-  --red-200: #f29887;
-  --red-300: #eb664d;
-  --red-400: #de2300;
-  --red-500: #a81b00;
-  --red-600: #731200;
+
+  --lightness-100: 98.1187%;
+  --lightness-200: 95.2045%;
+  --lightness-300: 91.1434%;
+  --lightness-400: 85.1751%;
+  --lightness-500: 79.1773%;
+  --lightness-600: 72.3297%;
+  --lightness-700: 67.0121%;
+  --lightness-800: 62.3039%;
+  --lightness-900: 57.9699%;
+  --lightness-1000: 51.9076%;
+  --lightness-1100: 46.9058%;
+  --lightness-1200: 41.0821%;
+  --lightness-1300: 35.3616%;
+  --lightness-1400: 29.6725%;
+  --lightness-1500: 24.5366%;
+  --lightness-1600: 16.6959%;
+
+  /* lower chroma at low lightness levels */
+  --chroma-100: calc(l * c * 0.5);
+  --chroma-200: calc(l * c * 0.6);
+  --chroma-300: calc(l * c * 0.7);
+  --chroma-400: calc(l * c * 0.8);
+  --chroma-500: calc(l * c * 0.9);
+  --chroma-600: c;
+  --chroma-700: c;
+  --chroma-800: c;
+  --chroma-900: c;
+  --chroma-1000: c;
+  --chroma-1200: c;
+  --chroma-1300: c;
+  --chroma-1400: c;
+  --chroma-1500: c;
+  --chroma-1600: c;
+
   --highlight-hover: rgb(0 0 0 / 0.07);
   --highlight-pressed: rgb(0 0 0 / 0.15);
+  --overlay-background: var(--gray-50);
+  --overlay-border: rgb(0 0 0 / 0.06);
+  --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.12);
 }
 
-/* Dark: https://leonardocolor.io/theme.html?name=Dark&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A11%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
+/* dark mode colors */
 @media (prefers-color-scheme: dark) {
   :root {
-    --background-color: #1d1d1d;
-    --gray-50: #101010;
-    --gray-100: #393939;
-    --gray-200: #4f4f4f;
-    --gray-300: #686868;
-    --gray-400: #848484;
-    --gray-500: #a7a7a7;
-    --gray-600: #cfcfcf;
-    --purple-100: #3c1e95;
-    --purple-200: #522acd;
-    --purple-300: #6f46ed;
-    --purple-400: #8e6ef1;
-    --purple-500: #b099f5;
-    --purple-600: #d5c8fa;
-    --red-100: #721200;
-    --red-200: #9c1900;
-    --red-300: #cc2000;
-    --red-400: #e95034;
-    --red-500: #f08c79;
-    --red-600: #f7c3ba;
+    --background-color: #1b1b1b;
+    --gray-50: oklch(22% 0 0);
+
+    --lightness-100: 29.6725%;
+    --lightness-200: 35.3616%;
+    --lightness-300: 41.0821%;
+    --lightness-400: 46.9058%;
+    --lightness-500: 51.9076%;
+    --lightness-600: 57.9699%;
+    --lightness-700: 56.1347%;
+    --lightness-800: 59.2866%;
+    --lightness-900: 62.3039%;
+    --lightness-1000: 67.0121%;
+    --lightness-1100: 72.3297%;
+    --lightness-1200: 79.1773%;
+    --lightness-1300: 85.1751%;
+    --lightness-1400: 91.1434%;
+    --lightness-1500: 95.2045%;
+    --lightness-1600: 100%;
+
     --highlight-hover: rgb(255 255 255 / 0.1);
     --highlight-pressed: rgb(255 255 255 / 0.2);
+    --overlay-background: var(--gray-100);
+    --overlay-border: rgb(255 255 255 / 0.2);
+    --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.5);
   }
 }
 
 /* Semantic colors */
 :root {
-  --focus-ring-color: var(--purple-400);
-  --text-color: var(--gray-600);
-  --text-color-base: var(--gray-500);
-  --text-color-hover: var(--gray-600);
-  --text-color-disabled: var(--gray-200);
-  --text-color-placeholder: var(--gray-400);
-  --link-color: var(--purple-500);
-  --link-color-secondary: var(--gray-500);
-  --link-color-pressed: var(--purple-600);
-  --border-color: var(--gray-300);
-  --border-color-hover: var(--gray-400);
-  --border-color-pressed: var(--gray-400);
-  --border-color-disabled: var(--gray-100);
-  --field-background: var(--gray-50);
-  --field-text-color: var(--gray-600);
-  --overlay-background: var(--gray-50);
-  --button-background: var(--gray-50);
-  --button-background-pressed: var(--background-color);
+  --focus-ring-color: var(--tint-1000);
+  --text-color: var(--gray-1200);
+  --text-color-hover: var(--gray-1300);
+  --text-color-disabled: var(--gray-600);
+  --text-color-placeholder: var(--gray-1000);
+  --link-color: var(--tint-1200);
+  --link-color-secondary: var(--gray-1200);
+  --link-color-pressed: var(--tint-1300);
+  --border-color: var(--gray-400);
+  --border-color-hover: var(--gray-500);
+  --border-color-disabled: var(--gray-300);
+  --field-text-color: var(--gray-1400);
+  --button-background: var(--tint-100);
+  --button-background-pressed: var(--tint-200);
   /* these colors are the same between light and dark themes
    * to ensure contrast with the foreground color */
-  --highlight-background: #6f46ed; /* purple-300 from dark theme, 3.03:1 against background-color */
-  --highlight-background-pressed: #522acd; /* purple-200 from dark theme */
-  --highlight-background-invalid: #cc2000; /* red-300 from dark theme */
-  --highlight-foreground: white; /* 5.56:1 against highlight-background */
-  --highlight-foreground-pressed: #ddd;
-  --highlight-overlay: rgb(from #6f46ed r g b / 15%);
-  --invalid-color: var(--red-400);
-  --invalid-color-pressed: var(--red-500);
+  --highlight-background: oklch(from var(--tint) 55% c h);
+  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
+  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
+  --highlight-foreground: white;
+  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
+  --invalid-color: oklch(from var(--red) var(--lightness-900) c h);
+  --field-background: var(--gray-50);
 }
 
 /* Windows high contrast mode overrides */
@@ -91,7 +165,6 @@
     --background-color: Canvas;
     --focus-ring-color: Highlight;
     --text-color: ButtonText;
-    --text-color-base: ButtonText;
     --text-color-hover: ButtonText;
     --text-color-disabled: GrayText;
     --text-color-placeholder: ButtonText;
@@ -105,14 +178,45 @@
     --field-background: Field;
     --field-text-color: FieldText;
     --overlay-background: Canvas;
+    --overlay-border: ButtonBorder;
     --button-background: ButtonFace;
     --button-background-pressed: ButtonFace;
     --highlight-background: Highlight;
     --highlight-background-pressed: Highlight;
     --highlight-background-invalid: LinkText;
     --highlight-foreground: HighlightText;
-    --highlight-foreground-pressed: HighlightText;
     --invalid-color: LinkText;
-    --invalid-color-pressed: LinkText;
+  }
+}
+
+/* typography and spacing scale */
+:root {
+  --font-size: 0.875rem; /* 14px */
+  --font-size-sm: 0.75rem; /* 12px */
+  --font-size-lg: 1rem; /* 16px */
+  --radius: 8px;
+  --radius-sm: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 16px;
+  --spacing: 0.25rem; /* 4px */
+  --spacing-1: var(--spacing);
+  --spacing-2: calc(2 * var(--spacing));
+  --spacing-3: calc(3 * var(--spacing));
+  --spacing-4: calc(4 * var(--spacing));
+  --spacing-5: calc(5 * var(--spacing));
+  --spacing-6: calc(6 * var(--spacing));
+  --spacing-7: calc(7 * var(--spacing));
+  --spacing-8: calc(8 * var(--spacing));
+  --spacing-9: calc(9 * var(--spacing));
+  --spacing-10: calc(10 * var(--spacing));
+}
+
+/* Scale up hit targets on high resolution mobile devices. */
+@media (min-resolution: 200dpi) {
+  :root {
+    --spacing: calc(0.25rem * 1.25);
+    --font-size: 1.0625rem; /* 17px */
+    --font-size-sm: 0.9375rem; /* 15px */
+    --font-size-lg: 1.25rem; /* 20px */
   }
 }
diff --git a/starters/docs/src/utilities.css b/starters/docs/src/utilities.css
new file mode 100644
index 00000000000..e250809b331
--- /dev/null
+++ b/starters/docs/src/utilities.css
@@ -0,0 +1,277 @@
+@layer utilities {
+  /* utility that creates a button-like element, which can be optionally selected */
+  .button-base {
+    --button-color: var(--tint);
+    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);
+    --button-gradient: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
+    --button-border: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);
+    --button-highlight: rgb(255 255 255 / 0.8);
+    --button-shadow: oklch(from var(--button-color) var(--lightness-400) var(--chroma-400) h);
+    --button-border-size: 1px;
+    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);
+    --button-gradient-size: 8px;
+
+    background: var(--button-background);
+    color: var(--button-text);
+    box-shadow: 
+      inset 0 -1px 0 var(--button-shadow), /* bottom shadow */
+      inset 0 0 0 var(--button-border-size) var(--button-border), /* border */
+      inset 0px calc(var(--button-border-size) + 1px) 0px var(--button-highlight), /* top specular highlight */
+      inset 0px calc(-1 * var(--button-gradient-size)) var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */
+    outline: none;
+    transition-property: background, color, scale, box-shadow;
+    transition-duration: 200ms;
+    will-change: scale;
+    forced-color-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+
+    @media (prefers-color-scheme: dark) {
+      --button-shadow: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
+      --button-highlight: rgb(255 255 255 / 0.15);
+      box-shadow:
+        inset 0 var(--button-border-size) 0 var(--button-highlight), /* top specular highlight */
+        inset 0 calc(-1 * var(--button-border-size)) 0 var(--button-shadow), /* bottom shadow */
+        inset 0 0 0 var(--button-border-size) var(--button-border), /* border */
+        inset 0 var(--button-gradient-size) var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */
+    }
+
+    &:where([data-pressed]) {
+      --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
+    }
+
+    &:where([data-focus-visible]) {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
+    }
+
+    &:where([data-variant=secondary]) {
+      --button-color: var(--gray);
+    }
+
+    &:where([data-variant=quiet]) {
+      --button-background: none;
+      --button-text: var(--text-color);
+      box-shadow: 0 0 0 1px transparent;
+
+      &:where([data-hovered], [data-pressed]) {
+        --button-background: var(--tint-200);
+        --button-text: var(--tint-1400);
+        box-shadow: 0 0 0 1px var(--tint-200);
+      }
+    }
+
+    &:where([data-selected]) {
+      --button-background: oklch(from var(--button-color) 55% c h);
+      --button-border: oklch(from var(--button-color) 50% c h);
+      --button-gradient: var(--button-border);
+      --button-highlight: rgb(255 255 255 / 0.2);
+      --button-shadow: oklch(from var(--button-color) 30% c h);
+      --button-text: var(--highlight-foreground);
+
+      box-shadow:
+        inset 0 -1px 0 var(--button-shadow), /* bottom shadow */
+        inset 0 0 0 1px var(--button-border), /* border */
+        inset 0 2px 0 var(--button-highlight), /* top specular highlight */
+        inset 0 calc(-1 * var(--button-gradient-size)) var(--button-gradient-size) var(--button-gradient); /* inner gradient */
+
+      @media (prefers-color-scheme: dark) {
+        --button-highlight: rgb(255 255 255 / 0.4);
+        --button-gradient: rgb(255 255 255 / 0.2);
+        --button-shadow: var(--button-border);
+        box-shadow:
+          inset 0 1px 0 var(--button-highlight), /* top specular highlight */
+          inset 0 var(--button-gradient-size) var(--button-gradient-size) var(--button-gradient), /* inner gradient */
+          inset 0 0 0 1px var(--button-border); /* border */
+      }
+
+      &:where([data-pressed]) {
+        --button-background: oklch(from var(--button-color) 50% c h);
+      }
+    }
+
+    &:where([data-disabled]) {
+      box-shadow: none;
+      --button-background: var(--border-color-disabled);
+      --button-text: var(--text-color-disabled);
+
+      &:where([data-variant=quiet]) {
+        --button-background: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      --button-background: ButtonFace;
+      --button-text: ButtonText;
+      --button-border: ButtonBorder;
+      box-shadow: inset 0 0 0 var(--button-border-size) var(--button-border);
+
+      &:where([data-variant=quiet]) {
+        --button-border: transparent;
+        &:where([data-hovered], [data-pressed]) {
+          --button-border: ButtonBorder;
+        }
+      }
+
+      &:where([data-selected]) {
+        --button-background: Highlight;
+        --button-text: HighlightText;
+        --button-border: Highlight;
+      }
+
+      &:where([data-disabled]) {
+        --button-background: ButtonFace;
+        --button-text: GrayText;
+        --button-border: GrayText;
+
+        &:where([data-variant=quiet]) {
+          --button-border: transparent;
+        }
+      }
+    }
+  }
+
+  /* utility that creates a small indicator, such as a checkbox, radio, switch, or slider thumb */
+  .indicator {
+    --indicator-color: var(--gray);
+    --indicator-background: oklch(from var(--indicator-color) var(--lightness-100) var(--chroma-100) h);
+    --indicator-border: oklch(from var(--indicator-color) var(--lightness-800) var(--chroma-800) h);
+    --indicator-drop-shadow: 0 0;
+
+    background: var(--indicator-background);
+    box-shadow:
+      inset 0 0 0 1px var(--indicator-border), /* border */
+      inset 0 2px 0 white, /* top specular highlight */
+      inset 0 -4px 2px oklch(from var(--indicator-color) 30% c h / 0.08), /* inner gradient */
+      var(--indicator-drop-shadow); /* optional drop shadow */
+    will-change: scale;
+
+    @media (prefers-color-scheme: dark) {
+      box-shadow:
+        inset 0 1px 0 rgb(255 255 255 / 0.4), /* top specular highlight */
+        inset 0 4px 2px rgb(255 255 255 / 0.1), /* inner shadow */
+        inset 0 0 0 1px var(--indicator-border), /* border */
+        var(--indicator-drop-shadow); /* optional drop shadow */
+    }
+
+    @media (forced-colors: active) {
+      --indicator-background: ButtonFace;
+      --indicator-border: ButtonBorder;
+      box-shadow: inset 0 0 0 1px var(--indicator-border);
+    }
+
+    &[data-pressed],
+    [data-pressed] & {
+      scale: 0.9;
+    }
+
+    [data-selected] &,
+    [data-indeterminate] & {
+      --indicator-color: var(--highlight-background);
+      --indicator-background: var(--indicator-color);
+      --indicator-highlight: rgb(255 255 255 / 0.3);
+      --indicator-shadow: oklch(from var(--indicator-color) 45% c h);
+      --indicator-border: var(--indicator-background);
+      box-shadow:
+        inset 0 -1px 0 var(--indicator-shadow), /* bottom shadow */
+        inset 0 0 0 1px var(--indicator-border), /* border */
+        inset 0 2px 0 var(--indicator-highlight), /* top specular highlight */
+        var(--indicator-drop-shadow); /* optional drop shadow */
+
+      @media (prefers-color-scheme: dark) {
+        --indicator-highlight: rgb(255 255 255 / 0.5);
+        --indicator-gradient: rgb(255 255 255 / 0.12);
+        box-shadow:
+          inset 0 1px 0 var(--indicator-highlight), /* top specular highlight */
+          inset 0 4px 2px var(--indicator-gradient), /* inner gradient */
+          inset 0 0 0 1px var(--indicator-border), /* border */
+          var(--indicator-drop-shadow); /* optional drop shadow */
+      }
+
+      @media (forced-colors: active) {
+        box-shadow: none;
+      }
+    }
+
+    [data-invalid] & {
+      --indicator-color: var(--invalid-color);
+
+      @media (forced-colors: active) {
+        --indicator-border: var(--invalid-color);
+      }
+    }
+
+    &[data-focus-visible],
+    [data-focus-visible] > & {
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: 2px;
+    }
+
+    [data-disabled] & {
+      background: var(--field-background);
+      box-shadow: inset 0 0 0 1px var(--border-color-disabled)
+    }
+  }
+
+  /* utility that creates an inset effect, used for form fields, slider/progress tracks, etc. */
+  .inset {
+    --inset-background: var(--field-background);
+    --inset-border: var(--border-color);
+    --inset-border-size: 1px;
+    --inset-shadow-offset: 2px;
+    --inset-shadow-size: 4px;
+
+    background: var(--inset-background);
+    box-shadow:
+      inset 0 0 0 var(--inset-border-size) var(--inset-border), /* border */
+      inset 0 var(--inset-shadow-offset) var(--inset-shadow-size) rgb(0 0 0 / 0.15), /* inner shadow */
+      0 1px 0 var(--gray-50); /* bottom specular highlight */
+    transition: box-shadow 200ms;
+    forced-color-adjust: none;
+
+    @media (prefers-color-scheme: dark) {
+      --inset-border: var(--gray-200);
+      --border-color-hover: var(--gray-300);
+      --inset-highlight: var(--gray-400);
+      --inset-shadow-size: 6px;
+      box-shadow:
+        inset 0 calc(-1 * var(--inset-border-size)) 0 var(--inset-highlight), /* bottom specular highlight */
+        inset 0 0 0 var(--inset-border-size) var(--inset-border), /* border */
+        inset 0 1px var(--inset-shadow-size) rgb(0 0 0); /* inner shadow */
+    }
+
+    &:where([data-hovered], [data-pressed]) {
+      --inset-border: var(--border-color-hover);
+    }
+
+    @media (forced-colors: active) {
+      --inset-border: ButtonBorder;
+      box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);
+    }
+
+    &:where([data-invalid]) {
+      --inset-border: var(--invalid-color);
+      --inset-highlight: var(--inset-border);
+    }
+
+    &:where([data-disabled]) {
+      box-shadow: inset 0 0 0 1px var(--border-color-disabled);
+    }
+
+    &.track {
+      --inset-shadow-offset: 1px;
+      --inset-shadow-size: 3px;
+
+      @media (prefers-color-scheme: light) {
+        --inset-background: var(--gray-300);
+        --inset-border: var(--gray-500);
+        --inset-border-size: 0.5px;
+      }
+
+      @media (forced-colors: active) {
+        --inset-background: Field;
+        --inset-border: ButtonBorder;
+        --inset-border-size: 1px;
+      }
+    }
+  }
+}
diff --git a/starters/docs/stories/Breadcrumbs.stories.tsx b/starters/docs/stories/Breadcrumbs.stories.tsx
index 4fd5ee3215e..50caecfed07 100644
--- a/starters/docs/stories/Breadcrumbs.stories.tsx
+++ b/starters/docs/stories/Breadcrumbs.stories.tsx
@@ -16,14 +16,8 @@ type Story = StoryFn<typeof Breadcrumbs>;
 
 export const Example: Story = (args) => (
   <Breadcrumbs {...args}>
-    <Breadcrumb>
-      <Link href="/">Home</Link>
-    </Breadcrumb>
-    <Breadcrumb>
-      <Link href="/react-aria/">React Aria</Link>
-    </Breadcrumb>
-    <Breadcrumb>
-      <Link>Breadcrumbs</Link>
-    </Breadcrumb>
+    <Breadcrumb href="/">Home</Breadcrumb>
+    <Breadcrumb href="/react-aria/">React Aria</Breadcrumb>
+    <Breadcrumb>Breadcrumbs</Breadcrumb>
   </Breadcrumbs>
 );
diff --git a/starters/docs/stories/TextField.stories.tsx b/starters/docs/stories/TextField.stories.tsx
index 0eb42385414..515e3039070 100644
--- a/starters/docs/stories/TextField.stories.tsx
+++ b/starters/docs/stories/TextField.stories.tsx
@@ -7,7 +7,10 @@ const meta: Meta<typeof TextField> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  args: {
+    placeholder: 'Enter your full name'
+  }
 };
 
 export default meta;
diff --git a/starters/tailwind/src/Button.tsx b/starters/tailwind/src/Button.tsx
index 02ac8fffba6..053e35a2c52 100644
--- a/starters/tailwind/src/Button.tsx
+++ b/starters/tailwind/src/Button.tsx
@@ -6,18 +6,17 @@ import { focusRing } from './utils';
 
 export interface ButtonProps extends RACButtonProps {
   /** @default 'primary' */
-  variant?: 'primary' | 'secondary' | 'destructive' | 'icon'
+  variant?: 'primary' | 'secondary' | 'destructive'
 }
 
 let button = tv({
   extend: focusRing,
-  base: 'relative border-0 px-5 py-2 text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default',
+  base: 'relative inline-flex items-center border-0 px-5 [&:has(svg:only-child)]:px-2 py-2 font-sans text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default',
   variants: {
     variant: {
       primary: 'bg-blue-600 hover:bg-blue-700 pressed:bg-blue-800 text-white',
-      secondary: 'bg-gray-100 hover:bg-gray-200 pressed:bg-gray-300 text-gray-800 dark:bg-zinc-600 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 dark:text-zinc-100',
-      destructive: 'bg-red-700 hover:bg-red-800 pressed:bg-red-900 text-white',
-      icon: 'border-0 p-1 flex items-center justify-center text-gray-600 hover:bg-black/[5%] pressed:bg-black/10 dark:text-zinc-400 dark:hover:bg-white/10 dark:pressed:bg-white/20 disabled:bg-transparent'
+      secondary: 'bg-gray-50 hover:bg-gray-100 pressed:bg-gray-200 text-gray-800 dark:bg-zinc-600 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 dark:text-zinc-100',
+      destructive: 'bg-red-700 hover:bg-red-800 pressed:bg-red-900 text-white'
     },
     isDisabled: {
       true: 'bg-gray-100 dark:bg-zinc-800 text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText] border-black/5 dark:border-white/5'
diff --git a/starters/tailwind/src/Calendar.tsx b/starters/tailwind/src/Calendar.tsx
index a95e1fa8582..418c5c40e80 100644
--- a/starters/tailwind/src/Calendar.tsx
+++ b/starters/tailwind/src/Calendar.tsx
@@ -16,7 +16,7 @@ import {
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 import { Button } from './Button';
-import { focusRing } from './utils';
+import { composeTailwindRenderProps, focusRing } from './utils';
 
 const cellStyles = tv({
   extend: focusRing,
@@ -40,7 +40,7 @@ export function Calendar<T extends DateValue>(
   { errorMessage, ...props }: CalendarProps<T>
 ) {
   return (
-    <AriaCalendar {...props}>
+    <AriaCalendar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col font-sans')}>
       <CalendarHeader />
       <CalendarGrid>
         <CalendarGridHeader />
@@ -57,13 +57,13 @@ export function CalendarHeader() {
   let {direction} = useLocale();
 
   return (
-    <header className="flex items-center gap-1 pb-4 px-1 w-full">
-      <Button variant="icon" slot="previous">
-        {direction === 'rtl' ? <ChevronRight aria-hidden /> : <ChevronLeft aria-hidden />}
+    <header className="flex items-center gap-1 pb-4 px-1 border-box">
+      <Button variant="secondary" slot="previous">
+        {direction === 'rtl' ? <ChevronRight aria-hidden size={18} /> : <ChevronLeft aria-hidden size={18} />}
       </Button>
-      <Heading className="flex-1 font-sans font-semibold text-xl text-center mx-2 text-zinc-900 dark:text-zinc-200" />
-      <Button variant="icon" slot="next">
-        {direction === 'rtl' ? <ChevronLeft aria-hidden /> : <ChevronRight aria-hidden />}
+      <Heading className="flex-1 font-sans font-semibold [font-variation-settings:normal] text-lg text-center mx-2 text-zinc-900 dark:text-zinc-200" />
+      <Button variant="secondary" slot="next">
+        {direction === 'rtl' ? <ChevronLeft aria-hidden size={18} /> : <ChevronRight aria-hidden size={18} />}
       </Button>
     </header>
   );
diff --git a/starters/tailwind/src/Checkbox.tsx b/starters/tailwind/src/Checkbox.tsx
index ef2cfde5cf5..bf030006906 100644
--- a/starters/tailwind/src/Checkbox.tsx
+++ b/starters/tailwind/src/Checkbox.tsx
@@ -15,7 +15,7 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'childr
 
 export function CheckboxGroup(props: CheckboxGroupProps) {
   return (
-    <AriaCheckboxGroup {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2')}>
+    <AriaCheckboxGroup {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans')}>
       <Label>{props.label}</Label>
       {props.children}
       {props.description && <Description>{props.description}</Description>}
@@ -25,7 +25,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 }
 
 const checkboxStyles = tv({
-  base: 'flex gap-2 items-center group text-sm transition relative',
+  base: 'flex gap-2 items-center group font-sans text-sm transition relative',
   variants: {
     isDisabled: {
       false: 'text-gray-800 dark:text-zinc-200',
@@ -56,7 +56,7 @@ const iconStyles = 'w-4 h-4 text-white group-disabled:text-gray-400 dark:text-sl
 export function Checkbox(props: CheckboxProps) {
   return (
     <AriaCheckbox {...props} className={composeRenderProps(props.className, (className, renderProps) => checkboxStyles({...renderProps, className}))}>
-      {({isSelected, isIndeterminate, ...renderProps}) => (
+      {composeRenderProps(props.children, (children, {isSelected, isIndeterminate, ...renderProps}) => (
         <>
           <div className={boxStyles({isSelected: isSelected || isIndeterminate, ...renderProps})}>
             {isIndeterminate
@@ -66,9 +66,9 @@ export function Checkbox(props: CheckboxProps) {
                 : null
             }
           </div>
-          {props.children}
+          {children}
         </>
-      )}
+      ))}
     </AriaCheckbox>
   );
 }
diff --git a/starters/tailwind/src/ColorField.tsx b/starters/tailwind/src/ColorField.tsx
index a82409b65b2..78da5d85e1d 100644
--- a/starters/tailwind/src/ColorField.tsx
+++ b/starters/tailwind/src/ColorField.tsx
@@ -11,7 +11,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const inputStyles = tv({
   extend: focusRing,
-  base: 'border-2 rounded-md',
+  base: 'border-2 rounded-lg',
   variants: {
     isFocused: fieldBorderStyles.variants.isFocusWithin,
     ...fieldBorderStyles.variants,
@@ -28,7 +28,7 @@ export function ColorField(
   { label, description, errorMessage, ...props }: ColorFieldProps
 ) {
   return (
-    <AriaColorField {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1')}>
+    <AriaColorField {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1 font-sans')}>
       {label && <Label>{label}</Label>}
       <Input className={inputStyles} />
       {description && <Description>{description}</Description>}
diff --git a/starters/tailwind/src/ColorPicker.tsx b/starters/tailwind/src/ColorPicker.tsx
index 3ae89717e28..8525c399662 100644
--- a/starters/tailwind/src/ColorPicker.tsx
+++ b/starters/tailwind/src/ColorPicker.tsx
@@ -12,7 +12,7 @@ import { focusRing } from './utils';
 
 const buttonStyles = tv({
   extend: focusRing,
-  base: 'border-0 bg-transparent flex gap-2 items-center cursor-default rounded-xs text-sm text-gray-800 dark:text-gray-200'
+  base: 'border-0 bg-transparent flex gap-2 items-center cursor-default rounded-xs font-sans text-sm text-gray-800 dark:text-gray-200'
 });
 
 export interface ColorPickerProps extends Omit<AriaColorPickerProps, 'children'> {
diff --git a/starters/tailwind/src/ColorSlider.tsx b/starters/tailwind/src/ColorSlider.tsx
index 5f6b26507f1..60960ed339c 100644
--- a/starters/tailwind/src/ColorSlider.tsx
+++ b/starters/tailwind/src/ColorSlider.tsx
@@ -30,7 +30,7 @@ interface ColorSliderProps extends AriaColorSliderProps {
 
 export function ColorSlider({ label, ...props }: ColorSliderProps) {
   return (
-    <AriaColorSlider {...props} className={composeTailwindRenderProps(props.className, 'orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-56')}>
+    <AriaColorSlider {...props} className={composeTailwindRenderProps(props.className, 'font-sans orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-56')}>
       <Label>{label}</Label>
       <SliderOutput className="text-sm text-gray-500 dark:text-zinc-400 font-medium orientation-vertical:hidden" />
       <SliderTrack
diff --git a/starters/tailwind/src/ColorSwatch.tsx b/starters/tailwind/src/ColorSwatch.tsx
index bfd40bc022b..4e198abee88 100644
--- a/starters/tailwind/src/ColorSwatch.tsx
+++ b/starters/tailwind/src/ColorSwatch.tsx
@@ -7,7 +7,7 @@ export function ColorSwatch(props: ColorSwatchProps) {
   return (
     <AriaColorSwatch 
       {...props}
-      className={composeTailwindRenderProps(props.className, 'w-8 h-8 box-border rounded-xs border border-black/10')}
+      className={composeTailwindRenderProps(props.className, 'w-8 h-8 box-border rounded border border-black/10')}
       style={({color}) => ({
         background: `linear-gradient(${color}, ${color}),
           repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
diff --git a/starters/tailwind/src/ColorSwatchPicker.tsx b/starters/tailwind/src/ColorSwatchPicker.tsx
index 90f1bac7813..53e2e28ab13 100644
--- a/starters/tailwind/src/ColorSwatchPicker.tsx
+++ b/starters/tailwind/src/ColorSwatchPicker.tsx
@@ -41,7 +41,7 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {
     <AriaColorSwatchPickerItem {...props} className={itemStyles}>
       {({isSelected}) => <>
         <ColorSwatch />
-        {isSelected && <div className="absolute top-0 left-0 w-full h-full box-border border border-2 border-black dark:border-white outline outline-2 outline-white dark:outline-black -outline-offset-4 rounded-xs forced-color-adjust-none" />}
+        {isSelected && <div className="absolute top-0 left-0 w-full h-full box-border border border-2 border-black dark:border-white outline outline-2 outline-white dark:outline-black -outline-offset-4 rounded forced-color-adjust-none" />}
       </>}
     </AriaColorSwatchPickerItem>
   );
diff --git a/starters/tailwind/src/ComboBox.tsx b/starters/tailwind/src/ComboBox.tsx
index 6636a3fe496..94038bc8889 100644
--- a/starters/tailwind/src/ComboBox.tsx
+++ b/starters/tailwind/src/ComboBox.tsx
@@ -8,11 +8,11 @@ import {
   ListBoxItemProps,
   ValidationResult
 } from 'react-aria-components';
-import { Button } from './Button';
 import { Description, FieldError, FieldGroup, Input, Label } from './Field';
 import { DropdownItem, DropdownSection, DropdownSectionProps } from './ListBox';
 import { Popover } from './Popover';
 import { composeTailwindRenderProps } from './utils';
+import { FieldButton } from './FieldButton';
 
 export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children'> {
   label?: string;
@@ -25,13 +25,13 @@ export function ComboBox<T extends object>(
   { label, description, errorMessage, children, items, ...props }: ComboBoxProps<T>
 ) {
   return (
-    <AriaComboBox {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1')}>
+    <AriaComboBox {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 font-sans')}>
       <Label>{label}</Label>
       <FieldGroup>
         <Input />
-        <Button variant="icon" className="w-6 mr-1 rounded-xs outline-offset-0 ">
+        <FieldButton className="w-6 mr-1 rounded-sm outline-offset-0">
           <ChevronDown aria-hidden className="w-4 h-4" />
-        </Button>
+        </FieldButton>
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
diff --git a/starters/tailwind/src/DateField.tsx b/starters/tailwind/src/DateField.tsx
index 96360b355fb..24d16712e79 100644
--- a/starters/tailwind/src/DateField.tsx
+++ b/starters/tailwind/src/DateField.tsx
@@ -49,7 +49,7 @@ const segmentStyles = tv({
 
 export function DateInput(props: Omit<DateInputProps, 'children'>) {
   return (
-    <AriaDateInput className={renderProps => fieldGroupStyles({...renderProps, class: 'block min-w-[150px] px-2 py-1.5 text-sm'})} {...props}>
+    <AriaDateInput className={renderProps => fieldGroupStyles({...renderProps, class: 'block min-w-[150px] px-2 py-1.5 text-sm font-sans'})} {...props}>
       {(segment) => <DateSegment segment={segment} className={segmentStyles} />}
     </AriaDateInput>
   );
diff --git a/starters/tailwind/src/DatePicker.tsx b/starters/tailwind/src/DatePicker.tsx
index 57666c84e98..e1f4cf5f8d9 100644
--- a/starters/tailwind/src/DatePicker.tsx
+++ b/starters/tailwind/src/DatePicker.tsx
@@ -7,13 +7,13 @@ import {
   DateValue,
   ValidationResult
 } from 'react-aria-components';
-import { Button } from './Button';
 import { Calendar } from './Calendar';
 import { DateInput } from './DateField';
 import { Dialog } from './Dialog';
 import { Description, FieldError, FieldGroup, Label } from './Field';
 import { Popover } from './Popover';
 import { composeTailwindRenderProps } from './utils';
+import { FieldButton } from './FieldButton';
 
 export interface DatePickerProps<T extends DateValue>
   extends AriaDatePickerProps<T> {
@@ -26,13 +26,13 @@ export function DatePicker<T extends DateValue>(
   { label, description, errorMessage, ...props }: DatePickerProps<T>
 ) {
   return (
-    <AriaDatePicker {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1')}>
+    <AriaDatePicker {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 font-sans')}>
       {label && <Label>{label}</Label>}
       <FieldGroup className="min-w-[208px] w-auto">
         <DateInput className="flex-1 min-w-[150px] px-2 py-1.5 text-sm" />
-        <Button variant="icon" className="w-6 mr-1 rounded-xs outline-offset-0">
+        <FieldButton className="w-6 mr-1 rounded-sm outline-offset-0">
           <CalendarIcon aria-hidden className="w-4 h-4" />
-        </Button>
+        </FieldButton>
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
diff --git a/starters/tailwind/src/DateRangePicker.tsx b/starters/tailwind/src/DateRangePicker.tsx
index 79c56c736d4..feb6cf8f5a9 100644
--- a/starters/tailwind/src/DateRangePicker.tsx
+++ b/starters/tailwind/src/DateRangePicker.tsx
@@ -7,13 +7,13 @@ import {
   DateValue,
   ValidationResult
 } from 'react-aria-components';
-import { Button } from './Button';
 import { DateInput } from './DateField';
 import { Dialog } from './Dialog';
 import { Description, FieldError, FieldGroup, Label } from './Field';
 import { Popover } from './Popover';
 import { RangeCalendar } from './RangeCalendar';
 import { composeTailwindRenderProps } from './utils';
+import { FieldButton } from './FieldButton';
 
 export interface DateRangePickerProps<T extends DateValue>
   extends AriaDateRangePickerProps<T> {
@@ -26,15 +26,15 @@ export function DateRangePicker<T extends DateValue>(
   { label, description, errorMessage, ...props }: DateRangePickerProps<T>
 ) {
   return (
-    <AriaDateRangePicker {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1')}>
+    <AriaDateRangePicker {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 font-sans')}>
       {label && <Label>{label}</Label>}
       <FieldGroup className="min-w-[208px] w-auto">
         <DateInput slot="start" className="px-2 py-1.5 text-sm" />
         <span aria-hidden="true" className="text-gray-800 dark:text-zinc-200 forced-colors:text-[ButtonText] group-disabled:text-gray-200 dark:group-disabled:text-zinc-600 forced-colors:group-disabled:text-[GrayText]">–</span>
         <DateInput slot="end" className="flex-1 px-2 py-1.5 text-sm" />
-        <Button variant="icon" className="w-6 mr-1 rounded-xs outline-offset-0">
+        <FieldButton className="w-6 mr-1 rounded-md outline-offset-0">
           <CalendarIcon aria-hidden className="w-4 h-4" />
-        </Button>
+        </FieldButton>
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
diff --git a/starters/tailwind/src/Disclosure.tsx b/starters/tailwind/src/Disclosure.tsx
index f94b8a434c0..e49228c4a42 100644
--- a/starters/tailwind/src/Disclosure.tsx
+++ b/starters/tailwind/src/Disclosure.tsx
@@ -18,7 +18,7 @@ import { composeTailwindRenderProps, focusRing } from "./utils";
 import { DisclosureGroupStateContext } from "react-aria-components";
 
 const disclosure = tv({
-  base: "group min-w-64 border border-gray-200 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-zinc-200",
+  base: "group min-w-64 bg-white font-sans dark:bg-gray-900 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-zinc-200",
   variants: {
     isInGroup: {
       true: "border-0 border-b last:border-b-0 rounded-b-none last:rounded-b-lg",
@@ -109,7 +109,7 @@ export interface DisclosureGroupProps extends AriaDisclosureGroupProps {
 
 export function DisclosureGroup({ children, ...props }: DisclosureGroupProps) {
   return (
-    <AriaDisclosureGroup {...props} className={composeTailwindRenderProps(props.className, 'border border-gray-200 dark:border-zinc-600 rounded-lg')}>
+    <AriaDisclosureGroup {...props} className={composeTailwindRenderProps(props.className, 'border border-gray-300 dark:border-zinc-600 rounded-lg')}>
       {children}
     </AriaDisclosureGroup>
   );
diff --git a/starters/tailwind/src/DropZone.tsx b/starters/tailwind/src/DropZone.tsx
index 5de07a64a8b..322dd967803 100644
--- a/starters/tailwind/src/DropZone.tsx
+++ b/starters/tailwind/src/DropZone.tsx
@@ -4,7 +4,7 @@ import {composeRenderProps, DropZoneProps, DropZone as RACDropZone} from 'react-
 import { tv } from "tailwind-variants";
 
 const dropZone = tv({
-  base: "flex items-center justify-center p-8 min-h-24 w-[30%] text-base text-balance text-center rounded border border-1 border-gray-300 dark:border-zinc-800 bg-white dark:bg-zinc-900",
+  base: "flex items-center justify-center p-8 min-h-24 w-[30%] font-sans text-base text-balance text-center rounded-lg border border-1 border-gray-300 dark:border-zinc-800 bg-white dark:bg-zinc-900",
   variants: {
     isFocusVisible: {
       true: "outline outline-2 -outline-offset-1 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight]"
diff --git a/starters/tailwind/src/Field.tsx b/starters/tailwind/src/Field.tsx
index 0ac3136cdc8..885efb00752 100644
--- a/starters/tailwind/src/Field.tsx
+++ b/starters/tailwind/src/Field.tsx
@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 import { composeTailwindRenderProps, focusRing } from "./utils";
 
 export function Label(props: LabelProps) {
-  return <RACLabel {...props} className={twMerge('text-sm text-gray-500 dark:text-zinc-400 font-medium cursor-default w-fit', props.className)} />;
+  return <RACLabel {...props} className={twMerge('text-sm text-gray-600 dark:text-zinc-400 font-medium cursor-default w-fit', props.className)} />;
 }
 
 export function Description(props: TextProps) {
diff --git a/starters/tailwind/src/FieldButton.tsx b/starters/tailwind/src/FieldButton.tsx
new file mode 100644
index 00000000000..38cb51f355c
--- /dev/null
+++ b/starters/tailwind/src/FieldButton.tsx
@@ -0,0 +1,34 @@
+'use client';
+import React from 'react';
+import { composeRenderProps, Button as RACButton, ButtonProps as RACButtonProps } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { focusRing } from './utils';
+
+export interface ButtonProps extends RACButtonProps {
+  /** @default 'primary' */
+  variant?: 'primary' | 'secondary' | 'destructive' | 'icon'
+}
+
+let button = tv({
+  extend: focusRing,
+  base: 'relative inline-flex items-center border-0 font-sans text-sm text-center transition rounded-lg cursor-default p-1 flex items-center justify-center text-gray-600 hover:bg-black/[5%] pressed:bg-black/10 dark:text-zinc-400 dark:hover:bg-white/10 dark:pressed:bg-white/20 disabled:bg-transparent',
+  variants: {
+    isDisabled: {
+      true: 'bg-gray-100 dark:bg-zinc-800 text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText] border-black/5 dark:border-white/5'
+    }
+  }
+});
+
+export function FieldButton(props: ButtonProps) {
+  return (
+    <RACButton
+      {...props}
+      className={composeRenderProps(
+        props.className,
+        (className, renderProps) => button({...renderProps, className})
+      )}
+    >
+      {props.children}
+    </RACButton>
+  );
+}
diff --git a/starters/tailwind/src/GridList.tsx b/starters/tailwind/src/GridList.tsx
index 7e46dee8cc2..ff0b021d0d8 100644
--- a/starters/tailwind/src/GridList.tsx
+++ b/starters/tailwind/src/GridList.tsx
@@ -4,6 +4,7 @@ import {
   GridList as AriaGridList,
   GridListItem as AriaGridListItem,
   Button,
+  composeRenderProps,
   GridListItemProps,
   GridListProps
 } from 'react-aria-components';
@@ -15,7 +16,7 @@ export function GridList<T extends object>(
   { children, ...props }: GridListProps<T>
 ) {
   return (
-    <AriaGridList {...props} className={composeTailwindRenderProps(props.className, 'overflow-auto relative border border-gray-200 dark:border-zinc-600 rounded-lg')}>
+    <AriaGridList {...props} className={composeTailwindRenderProps(props.className, 'overflow-auto w-[200px] relative bg-white dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg font-sans')}>
       {children}
     </AriaGridList>
   );
@@ -23,7 +24,7 @@ export function GridList<T extends object>(
 
 const itemStyles = tv({
   extend: focusRing,
-  base: 'relative flex gap-3 cursor-default select-none py-2 px-3 text-sm text-gray-900 dark:text-zinc-200 border-y dark:border-y-zinc-700 border-transparent first:border-t-0 last:border-b-0 first:rounded-t-md last:rounded-b-md -mb-px last:mb-0 -outline-offset-2',
+  base: 'relative flex gap-3 cursor-default select-none py-2 px-3 text-sm text-gray-900 dark:text-zinc-200 border-y dark:border-y-zinc-700 border-transparent first:border-t-0 last:border-b-0 first:rounded-t-lg last:rounded-b-lg -mb-px last:mb-0 -outline-offset-2',
   variants: {
     isSelected: {
       false: 'hover:bg-gray-100 dark:hover:bg-zinc-700/60',
@@ -39,7 +40,7 @@ export function GridListItem({ children, ...props }: GridListItemProps) {
   let textValue = typeof children === 'string' ? children : undefined;
   return (
     <AriaGridListItem textValue={textValue} {...props} className={itemStyles}>
-      {({ selectionMode, selectionBehavior, allowsDragging }) => (
+      {composeRenderProps(children, (children, {selectionMode, selectionBehavior, allowsDragging}) => (
         <>
           {/* Add elements for drag and drop and selection. */}
           {allowsDragging && <Button slot="drag">≡</Button>}
@@ -48,7 +49,7 @@ export function GridListItem({ children, ...props }: GridListItemProps) {
           )}
           {children}
         </>
-      )}
+      ))}
     </AriaGridListItem>
   );
 }
diff --git a/starters/tailwind/src/ListBox.tsx b/starters/tailwind/src/ListBox.tsx
index ba954e4a88d..8a051d46cf6 100644
--- a/starters/tailwind/src/ListBox.tsx
+++ b/starters/tailwind/src/ListBox.tsx
@@ -21,7 +21,7 @@ export function ListBox<T extends object>(
   { children, ...props }: ListBoxProps<T>
 ) {
   return (
-    <AriaListBox {...props} className={composeTailwindRenderProps(props.className, 'outline-0 p-1 border border-gray-300 dark:border-zinc-600 rounded-lg')}>
+    <AriaListBox {...props} className={composeTailwindRenderProps(props.className, 'outline-0 p-1 w-[200px] bg-white dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg font-sans')}>
       {children}
     </AriaListBox>
   );
@@ -54,7 +54,7 @@ export function ListBoxItem(props: ListBoxItemProps) {
 }
 
 export const dropdownItemStyles = tv({
-  base: 'group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none',
+  base: 'group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer',
   variants: {
     isDisabled: {
       false: 'text-gray-900 dark:text-zinc-100',
diff --git a/starters/tailwind/src/Menu.tsx b/starters/tailwind/src/Menu.tsx
index 1b13faa6655..1aa7d969919 100644
--- a/starters/tailwind/src/Menu.tsx
+++ b/starters/tailwind/src/Menu.tsx
@@ -4,28 +4,26 @@ import React from 'react';
 import {
   Menu as AriaMenu,
   MenuItem as AriaMenuItem,
-  MenuProps as AriaMenuProps,
+  MenuProps,
   MenuItemProps,
   MenuSection as AriaMenuSection,
   MenuSectionProps as AriaMenuSectionProps,
+  MenuTrigger as AriaMenuTrigger,
+  SubmenuTrigger as AriaSubmenuTrigger,
   Separator,
   SeparatorProps,
   composeRenderProps,
   Header,
-  Collection
+  Collection,
+  SubmenuTriggerProps,
+  MenuTriggerProps as AriaMenuTriggerProps
 } from 'react-aria-components';
 import { dropdownItemStyles } from './ListBox';
 import { Popover, PopoverProps } from './Popover';
 
-interface MenuProps<T> extends AriaMenuProps<T> {
-  placement?: PopoverProps['placement']
-}
-
 export function Menu<T extends object>(props: MenuProps<T>) {
   return (
-    <Popover placement={props.placement} className="min-w-[150px]">
-      <AriaMenu {...props} className="p-1 outline outline-0 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]" />
-    </Popover>
+    <AriaMenu {...props} className="font-sans p-1 outline outline-0 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]" />
   );
 }
 
@@ -69,3 +67,33 @@ export function MenuSection<T extends object>(props: MenuSectionProps<T>) {
     </AriaMenuSection>
   )
 }
+
+interface MenuTriggerProps extends AriaMenuTriggerProps {
+  placement?: PopoverProps['placement']
+}
+
+export function MenuTrigger(props: MenuTriggerProps) {
+  let [trigger, menu] = React.Children.toArray(props.children) as [React.ReactElement, React.ReactElement];
+  return (
+    <AriaMenuTrigger {...props}>
+      {trigger}
+      <Popover placement={props.placement} className="min-w-[150px]">
+        {menu}
+      </Popover>
+    </AriaMenuTrigger>
+  );
+}
+
+export function SubmenuTrigger(
+  props: SubmenuTriggerProps
+) {
+  let [trigger, menu] = React.Children.toArray(props.children) as [React.ReactElement, React.ReactElement];
+  return (
+    <AriaSubmenuTrigger {...props}>
+      {trigger}
+      <Popover offset={-2} crossOffset={-4}>
+        {menu}
+      </Popover>
+    </AriaSubmenuTrigger>
+  );
+}
diff --git a/starters/tailwind/src/Meter.tsx b/starters/tailwind/src/Meter.tsx
index 87cbe78fbed..382f2c7efb9 100644
--- a/starters/tailwind/src/Meter.tsx
+++ b/starters/tailwind/src/Meter.tsx
@@ -14,7 +14,7 @@ export interface MeterProps extends AriaMeterProps {
 
 export function Meter({ label, ...props }: MeterProps) {
   return (
-    <AriaMeter {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1')}>
+    <AriaMeter {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans')}>
       {({ percentage, valueText }) => (
         <>
           <div className="flex justify-between gap-2">
diff --git a/starters/tailwind/src/NumberField.tsx b/starters/tailwind/src/NumberField.tsx
index 0387a8bad6f..ac51df05f28 100644
--- a/starters/tailwind/src/NumberField.tsx
+++ b/starters/tailwind/src/NumberField.tsx
@@ -21,7 +21,7 @@ export function NumberField(
   { label, description, errorMessage, ...props }: NumberFieldProps
 ) {
   return (
-    <AriaNumberField {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1')}>
+    <AriaNumberField {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 font-sans')}>
       <Label>{label}</Label>
       <FieldGroup>
         {renderProps => (<>
@@ -44,5 +44,5 @@ export function NumberField(
 }
 
 function StepperButton(props: ButtonProps) {
-  return <Button {...props} className="border-0 py-0 px-0.5 box-border cursor-default text-gray-500 pressed:bg-gray-100 group-disabled:text-gray-200 dark:text-zinc-400 dark:pressed:bg-zinc-800 dark:group-disabled:text-zinc-600 forced-colors:group-disabled:text-[GrayText]" />
+  return <Button {...props} className="flex border-0 py-0 px-0.5 box-border cursor-default text-gray-500 bg-transparent pressed:bg-gray-100 group-disabled:text-gray-200 dark:text-zinc-400 dark:pressed:bg-zinc-800 dark:group-disabled:text-zinc-600 forced-colors:group-disabled:text-[GrayText]" />
 }
diff --git a/starters/tailwind/src/Popover.tsx b/starters/tailwind/src/Popover.tsx
index ed4b6b73c4a..c0f471bd838 100644
--- a/starters/tailwind/src/Popover.tsx
+++ b/starters/tailwind/src/Popover.tsx
@@ -28,10 +28,7 @@ const styles = tv({
 });
 
 export function Popover({ children, showArrow, className, ...props }: PopoverProps) {
-  let popoverContext = useSlottedContext(PopoverContext)!;
-  let isSubmenu = popoverContext?.trigger === 'SubmenuTrigger';
   let offset = showArrow ? 12 : 8;
-  offset = isSubmenu ? offset - 6 : offset;
   return (
     <AriaPopover
       offset={offset}
diff --git a/starters/tailwind/src/ProgressBar.tsx b/starters/tailwind/src/ProgressBar.tsx
index c227ec62854..3108725237a 100644
--- a/starters/tailwind/src/ProgressBar.tsx
+++ b/starters/tailwind/src/ProgressBar.tsx
@@ -13,7 +13,7 @@ export interface ProgressBarProps extends AriaProgressBarProps {
 
 export function ProgressBar({ label, ...props }: ProgressBarProps) {
   return (
-    <AriaProgressBar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1')}>
+    <AriaProgressBar {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2 font-sans')}>
       {({ percentage, valueText, isIndeterminate }) => (
         <>
           <div className="flex justify-between gap-2">
diff --git a/starters/tailwind/src/RadioGroup.tsx b/starters/tailwind/src/RadioGroup.tsx
index adef9e501cf..67efc464df1 100644
--- a/starters/tailwind/src/RadioGroup.tsx
+++ b/starters/tailwind/src/RadioGroup.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { ReactNode } from 'react';
-import { Radio as RACRadio, RadioGroup as RACRadioGroup, RadioGroupProps as RACRadioGroupProps, RadioProps, ValidationResult } from 'react-aria-components';
+import { composeRenderProps, Radio as RACRadio, RadioGroup as RACRadioGroup, RadioGroupProps as RACRadioGroupProps, RadioProps, ValidationResult } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 import { Description, FieldError, Label } from './Field';
 import { composeTailwindRenderProps, focusRing } from './utils';
@@ -14,7 +14,7 @@ export interface RadioGroupProps extends Omit<RACRadioGroupProps, 'children'> {
 
 export function RadioGroup(props: RadioGroupProps) {
   return (
-    <RACRadioGroup {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-2')}>
+    <RACRadioGroup {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-2 font-sans')}>
       <Label>{props.label}</Label>
       <div className="flex group-orientation-vertical:flex-col gap-2 group-orientation-horizontal:gap-4">
         {props.children}
@@ -45,10 +45,10 @@ const styles = tv({
 export function Radio(props: RadioProps) {
   return (
     <RACRadio {...props} className={composeTailwindRenderProps(props.className, 'flex relative gap-2 items-center group text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
-      {renderProps => <>
+      {composeRenderProps(props.children, (children, renderProps) => <>
         <div className={styles(renderProps)} />
-        {props.children}
-      </>}
+        {children}
+      </>)}
     </RACRadio>
   );
 }
diff --git a/starters/tailwind/src/RangeCalendar.tsx b/starters/tailwind/src/RangeCalendar.tsx
index bf4ec069e0b..d3423713fbc 100644
--- a/starters/tailwind/src/RangeCalendar.tsx
+++ b/starters/tailwind/src/RangeCalendar.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 import { CalendarGridHeader, CalendarHeader } from './Calendar';
-import { focusRing } from './utils';
+import { composeTailwindRenderProps, focusRing } from './utils';
 
 export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<T>, 'visibleDuration'> {
   errorMessage?: string;
@@ -41,9 +41,9 @@ export function RangeCalendar<T extends DateValue>(
   { errorMessage, ...props }: RangeCalendarProps<T>
 ) {
   return (
-    <AriaRangeCalendar {...props}>
+    <AriaRangeCalendar {...props} className={composeTailwindRenderProps(props.className, 'font-sans')}>
       <CalendarHeader />
-      <CalendarGrid className="[&_td]:px-0 [&_td]:py-px">
+      <CalendarGrid className="[&_td]:px-0 [&_td]:py-px border-spacing-0">
         <CalendarGridHeader />
         <CalendarGridBody>
           {(date) => <CalendarCell date={date} className="group w-9 h-9 text-sm outline outline-0 cursor-default outside-month:text-gray-300 selected:bg-blue-100 dark:selected:bg-blue-700/30 forced-colors:selected:bg-[Highlight] invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30 forced-colors:invalid:selected:bg-[Mark] [td:first-child_&]:rounded-s-full selection-start:rounded-s-full [td:last-child_&]:rounded-e-full selection-end:rounded-e-full">
diff --git a/starters/tailwind/src/SearchField.tsx b/starters/tailwind/src/SearchField.tsx
index cd76516ad55..115eddc6f50 100644
--- a/starters/tailwind/src/SearchField.tsx
+++ b/starters/tailwind/src/SearchField.tsx
@@ -6,9 +6,9 @@ import {
   SearchFieldProps as AriaSearchFieldProps,
   ValidationResult
 } from 'react-aria-components';
-import { Button } from './Button';
 import { Description, FieldError, FieldGroup, Input, Label } from './Field';
 import { composeTailwindRenderProps } from './utils';
+import { FieldButton } from './FieldButton';
 
 export interface SearchFieldProps extends AriaSearchFieldProps {
   label?: string;
@@ -20,14 +20,14 @@ export function SearchField(
   { label, description, errorMessage, ...props }: SearchFieldProps
 ) {
   return (
-    <AriaSearchField {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 min-w-[40px]')}>
+    <AriaSearchField {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 min-w-[40px] font-sans')}>
       {label && <Label>{label}</Label>}
       <FieldGroup>
         <SearchIcon aria-hidden className="w-4 h-4 ml-2 text-gray-500 dark:text-zinc-400 forced-colors:text-[ButtonText] group-disabled:text-gray-200 dark:group-disabled:text-zinc-600 forced-colors:group-disabled:text-[GrayText]" />
         <Input className="[&::-webkit-search-cancel-button]:hidden" />
-        <Button variant="icon" className="mr-1 w-6 group-empty:invisible">
+        <FieldButton className="mr-1 w-6 group-empty:invisible">
           <XIcon aria-hidden className="w-4 h-4" />
-        </Button>
+        </FieldButton>
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
diff --git a/starters/tailwind/src/Select.tsx b/starters/tailwind/src/Select.tsx
index 084b9217d1b..478263197d5 100644
--- a/starters/tailwind/src/Select.tsx
+++ b/starters/tailwind/src/Select.tsx
@@ -18,10 +18,10 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const styles = tv({
   extend: focusRing,
-  base: 'flex items-center text-start gap-4 w-full cursor-default border border-black/10 dark:border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none rounded-lg pl-3 pr-2 py-2 min-w-[150px] transition bg-gray-50 dark:bg-zinc-700',
+  base: 'flex items-center text-start gap-4 w-full cursor-default border border-black/10 dark:border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none rounded-lg pl-3 pr-2 py-2 min-w-[150px] transition bg-gray-50 dark:bg-zinc-900',
   variants: {
     isDisabled: {
-      false: 'text-gray-800 dark:text-zinc-300 hover:bg-gray-100 pressed:bg-gray-200 dark:hover:bg-zinc-600 dark:pressed:bg-zinc-500 group-invalid:border-red-600 forced-colors:group-invalid:border-[Mark]',
+      false: 'text-gray-800 dark:text-zinc-300 hover:bg-gray-100 pressed:bg-gray-200 dark:hover:bg-zinc-800 dark:pressed:bg-zinc-700 group-invalid:border-red-600 forced-colors:group-invalid:border-[Mark]',
       true: 'text-gray-200 dark:text-zinc-600 forced-colors:text-[GrayText] dark:bg-zinc-800 dark:border-white/5 forced-colors:border-[GrayText]'
     }
   }
@@ -39,7 +39,7 @@ export function Select<T extends object>(
   { label, description, errorMessage, children, items, ...props }: SelectProps<T>
 ) {
   return (
-    <AriaSelect {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 relative')}>
+    <AriaSelect {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 relative font-sans')}>
       {label && <Label>{label}</Label>}
       <Button className={styles}>
         <SelectValue className="flex-1 text-sm placeholder-shown:italic">
diff --git a/starters/tailwind/src/Slider.tsx b/starters/tailwind/src/Slider.tsx
index 448c6abbee1..66c96ce635d 100644
--- a/starters/tailwind/src/Slider.tsx
+++ b/starters/tailwind/src/Slider.tsx
@@ -20,14 +20,14 @@ const trackStyles = tv({
     },
     isDisabled: {
       false: 'bg-gray-300 dark:bg-zinc-500 forced-colors:bg-[ButtonBorder]',
-      true: 'bg-gray-100 dark:bg-zinc-800 forced-colors:bg-[GrayText]'
+      true: 'bg-gray-200 dark:bg-zinc-800 forced-colors:bg-[GrayText]'
     }
   }
 });
 
 const thumbStyles = tv({
   extend: focusRing,
-  base: 'w-6 h-6 group-orientation-horizontal:mt-6 group-orientation-vertical:ml-3 rounded-full bg-gray-50 dark:bg-zinc-900 border-2 border-gray-700 dark:border-gray-300',
+  base: 'w-5 h-5 group-orientation-horizontal:mt-6 group-orientation-vertical:ml-3 rounded-full bg-gray-50 dark:bg-zinc-900 border-2 border-gray-700 dark:border-gray-300',
   variants: {
     isDragging: {
       true: 'bg-gray-700 dark:bg-gray-300 forced-colors:bg-[ButtonBorder]'
@@ -47,12 +47,12 @@ export function Slider<T extends number | number[]>(
   { label, thumbLabels, ...props }: SliderProps<T>
 ) {
   return (
-    <AriaSlider {...props} className={composeTailwindRenderProps(props.className, 'orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-64')}>
+    <AriaSlider {...props} className={composeTailwindRenderProps(props.className, 'font-sans orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-64')}>
       <Label>{label}</Label>
       <SliderOutput className="text-sm text-gray-500 dark:text-zinc-400 font-medium orientation-vertical:hidden">
         {({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
       </SliderOutput>
-      <SliderTrack className="group col-span-2 orientation-horizontal:h-6 orientation-vertical:w-6 orientation-vertical:h-64 flex items-center">
+      <SliderTrack className="group col-span-2 orientation-horizontal:h-5 orientation-vertical:w-5 orientation-vertical:h-64 flex items-center">
         {({ state, ...renderProps }) => <>
           <div className={trackStyles(renderProps)} />
           {state.values.map((_, i) => <SliderThumb key={i} index={i} aria-label={thumbLabels?.[i]} className={thumbStyles} />)}
diff --git a/starters/tailwind/src/Switch.tsx b/starters/tailwind/src/Switch.tsx
index 363afb6dc47..f9edef5afaf 100644
--- a/starters/tailwind/src/Switch.tsx
+++ b/starters/tailwind/src/Switch.tsx
@@ -13,7 +13,7 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'children'> {
 
 const track = tv({
   extend: focusRing,
-  base: 'flex h-4 w-7 box-border px-px items-center shrink-0 cursor-default rounded-full transition duration-200 ease-in-out shadow-inner border border-transparent',
+  base: 'flex h-4 w-7 box-border px-px items-center shrink-0 cursor-default rounded-full transition duration-200 ease-in-out shadow-inner border border-transparent font-sans',
   variants: {
     isSelected: {
       false: 'bg-gray-400 dark:bg-zinc-400 group-pressed:bg-gray-500 dark:group-pressed:bg-zinc-300',
diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx
index bd49e2528ee..ba2f1cdd9a5 100644
--- a/starters/tailwind/src/Table.tsx
+++ b/starters/tailwind/src/Table.tsx
@@ -16,7 +16,7 @@ import {
   ResizableTableContainer,
   RowProps,
   TableHeaderProps,
-  TableProps,
+  TableProps as AriaTableProps,
   composeRenderProps,
   useTableOptions
 } from 'react-aria-components';
@@ -25,17 +25,21 @@ import { tv } from 'tailwind-variants';
 import { Checkbox } from './Checkbox';
 import { composeTailwindRenderProps, focusRing } from './utils';
 
+interface TableProps extends Omit<AriaTableProps, 'className'> {
+  className?: string
+}
+
 export function Table(props: TableProps) {
   return (
-    <ResizableTableContainer className="max-h-[320px] max-w-[480px] overflow-auto scroll-pt-[2.281rem] relative border border-gray-200 dark:border-zinc-600 rounded-lg">
-      <AriaTable {...props} className="border-separate border-spacing-0" />
+    <ResizableTableContainer onScroll={props.onScroll} className={twMerge('w-full max-h-[320px] overflow-auto scroll-pt-[2.281rem] relative bg-white dark:bg-zinc-900 box-border border border-gray-300 dark:border-zinc-600 rounded-lg font-sans', props.className)}>
+      <AriaTable {...props} className="border-separate border-spacing-0 box-border overflow-hidden" />
     </ResizableTableContainer>
   );
 }
 
 const columnStyles = tv({
   extend: focusRing,
-  base: 'px-2 h-5 flex-1 flex gap-1 items-center overflow-hidden'
+  base: 'px-2 h-5 box-border flex-1 flex gap-1 items-center overflow-hidden'
 });
 
 const resizerStyles = tv({
@@ -45,7 +49,7 @@ const resizerStyles = tv({
 
 export function Column(props: ColumnProps) {
   return (
-    <AriaColumn {...props} className={composeTailwindRenderProps(props.className, '[&:hover]:z-20 focus-within:z-20 text-start text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-default')}>
+    <AriaColumn {...props} className={composeTailwindRenderProps(props.className, 'box-border [&:hover]:z-20 focus-within:z-20 text-start text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-default')}>
       {composeRenderProps(props.children, (children, { allowsSorting, sortDirection }) => (
         <div className="flex items-center">
           <Group
@@ -79,7 +83,7 @@ export function TableHeader<T extends object>(props: TableHeaderProps<T>) {
       {/* Add extra columns for drag and drop and selection. */}
       {allowsDragging && <Column />}
       {selectionBehavior === 'toggle' && (
-        <AriaColumn width={36} minWidth={36} className="p-2 text-sm font-semibold cursor-default text-start">
+        <AriaColumn width={36} minWidth={36} className="box-border p-2 text-sm font-semibold cursor-default text-start">
           {selectionMode === 'multiple' && <Checkbox slot="selection" />}
         </AriaColumn>
       )}
@@ -121,7 +125,7 @@ export function Row<T extends object>(
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'border-b border-b-gray-200 dark:border-b-zinc-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2'
+  base: 'box-border border-b border-b-gray-200 dark:border-b-zinc-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2'
 });
 
 export function Cell(props: CellProps) {
diff --git a/starters/tailwind/src/Tabs.tsx b/starters/tailwind/src/Tabs.tsx
index fe7320d218b..05bf8c673d9 100644
--- a/starters/tailwind/src/Tabs.tsx
+++ b/starters/tailwind/src/Tabs.tsx
@@ -16,7 +16,7 @@ import { tv } from 'tailwind-variants';
 import { focusRing } from './utils';
 
 const tabsStyles = tv({
-  base: 'flex gap-4',
+  base: 'flex gap-4 font-sans',
   variants: {
     orientation: {
       horizontal: 'flex-col',
diff --git a/starters/tailwind/src/TagGroup.tsx b/starters/tailwind/src/TagGroup.tsx
index 2dc2d840827..883c3b58088 100644
--- a/starters/tailwind/src/TagGroup.tsx
+++ b/starters/tailwind/src/TagGroup.tsx
@@ -18,7 +18,7 @@ import { Description, Label } from './Field';
 import { focusRing } from './utils';
 
 const colors = {
-  gray: 'bg-gray-100 text-gray-600 border-gray-200 hover:border-gray-300 dark:bg-zinc-700 dark:text-zinc-300 dark:border-zinc-600 dark:hover:border-zinc-500',
+  gray: 'bg-white text-gray-600 border-gray-200 hover:border-gray-300 dark:bg-zinc-900 dark:text-zinc-300 dark:border-zinc-600 dark:hover:border-zinc-500',
   green: 'bg-green-100 text-green-700 border-green-200 hover:border-green-300 dark:bg-green-300/20 dark:text-green-400 dark:border-green-300/10 dark:hover:border-green-300/20',
   yellow: 'bg-yellow-100 text-yellow-700 border-yellow-200 hover:border-yellow-300 dark:bg-yellow-300/20 dark:text-yellow-400 dark:border-yellow-300/10 dark:hover:border-yellow-300/20',
   blue: 'bg-blue-100 text-blue-700 border-blue-200 hover:border-blue-300 dark:bg-blue-400/20 dark:text-blue-300 dark:border-blue-400/10 dark:hover:border-blue-400/20'
@@ -29,7 +29,7 @@ const ColorContext = createContext<Color>('gray');
 
 const tagStyles = tv({
   extend: focusRing,
-  base: 'transition cursor-default text-xs rounded-full border px-3 py-0.5 flex items-center max-w-fit gap-1',
+  base: 'transition cursor-default text-xs rounded-full border px-3 py-0.5 flex items-center max-w-fit gap-1 font-sans',
   variants: {
     color: {
       gray: '',
@@ -78,7 +78,7 @@ export function TagGroup<T extends object>(
   }: TagGroupProps<T>
 ) {
   return (
-    <AriaTagGroup {...props} className={twMerge('flex flex-col gap-1', props.className)}>
+    <AriaTagGroup {...props} className={twMerge('flex flex-col gap-2 font-sans', props.className)}>
       <Label>{label}</Label>
       <ColorContext.Provider value={props.color || 'gray'}>
         <TagList items={items} renderEmptyState={renderEmptyState} className="flex flex-wrap gap-1">
@@ -107,7 +107,7 @@ export function Tag({ children, color, ...props }: TagProps) {
         props.className,
         (className, renderProps) => tagStyles({...renderProps, className, color: color || groupColor})
       )}>
-      {({ allowsRemoving }) => (
+      {composeRenderProps(children, (children, { allowsRemoving }) => (
         <>
           {children}
           {allowsRemoving &&
@@ -116,7 +116,7 @@ export function Tag({ children, color, ...props }: TagProps) {
             </Button>
           }
         </>
-      )}
+      ))}
     </AriaTag>
   );
 }
diff --git a/starters/tailwind/src/TextField.tsx b/starters/tailwind/src/TextField.tsx
index 6b359951b01..012d7cf7ff8 100644
--- a/starters/tailwind/src/TextField.tsx
+++ b/starters/tailwind/src/TextField.tsx
@@ -11,7 +11,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const inputStyles = tv({
   extend: focusRing,
-  base: 'border-2 rounded-md',
+  base: 'border-2 rounded-lg',
   variants: {
     isFocused: fieldBorderStyles.variants.isFocusWithin,
     isInvalid: fieldBorderStyles.variants.isInvalid,
@@ -29,7 +29,7 @@ export function TextField(
   { label, description, errorMessage, ...props }: TextFieldProps
 ) {
   return (
-    <AriaTextField {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1')}>
+    <AriaTextField {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1 font-sans')}>
       {label && <Label>{label}</Label>}
       <Input className={inputStyles} />
       {description && <Description>{description}</Description>}
diff --git a/starters/tailwind/src/TimeField.tsx b/starters/tailwind/src/TimeField.tsx
index 0a08a74e19a..4b7f686fbce 100644
--- a/starters/tailwind/src/TimeField.tsx
+++ b/starters/tailwind/src/TimeField.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react-aria-components';
 import { DateInput } from './DateField';
 import { Description, FieldError, Label } from './Field';
+import { composeTailwindRenderProps } from './utils';
 
 export interface TimeFieldProps<T extends TimeValue>
   extends AriaTimeFieldProps<T> {
@@ -20,7 +21,7 @@ export function TimeField<T extends TimeValue>(
   { label, description, errorMessage, ...props }: TimeFieldProps<T>
 ) {
   return (
-    <AriaTimeField {...props}>
+    <AriaTimeField {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1 font-sans')}>
       <Label>{label}</Label>
       <DateInput />
       {description && <Description>{description}</Description>}
diff --git a/starters/tailwind/src/ToggleButton.tsx b/starters/tailwind/src/ToggleButton.tsx
index 2aeb42b0d17..e2a18c062e1 100644
--- a/starters/tailwind/src/ToggleButton.tsx
+++ b/starters/tailwind/src/ToggleButton.tsx
@@ -6,10 +6,10 @@ import { focusRing } from './utils';
 
 let styles = tv({
   extend: focusRing,
-  base: 'px-5 py-2 [&:has(svg:only-child)]:px-2 text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 forced-colors:border-[ButtonBorder] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default forced-color-adjust-none',
+  base: 'font-sans px-5 py-2 [&:has(svg:only-child)]:px-2 inline-flex items-center text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 forced-colors:border-[ButtonBorder] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default forced-color-adjust-none',
   variants: {
     isSelected: {
-      false: 'bg-gray-100 hover:bg-gray-200 pressed:bg-gray-300 text-gray-800 dark:bg-zinc-600 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 dark:text-zinc-100 forced-colors:bg-[ButtonFace]! forced-colors:text-[ButtonText]!',
+      false: 'bg-gray-50 hover:bg-gray-100 pressed:bg-gray-200 text-gray-800 dark:bg-zinc-600 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 dark:text-zinc-100 forced-colors:bg-[ButtonFace]! forced-colors:text-[ButtonText]!',
       true: 'bg-gray-700 hover:bg-gray-800 pressed:bg-gray-900 text-white dark:bg-slate-300 dark:hover:bg-slate-200 dark:pressed:bg-slate-100 dark:text-black forced-colors:bg-[Highlight]! forced-colors:text-[HighlightText]!'
     },
     isDisabled: {
diff --git a/starters/tailwind/src/Toolbar.tsx b/starters/tailwind/src/Toolbar.tsx
index 3e13f9c8898..ad965ae47a7 100644
--- a/starters/tailwind/src/Toolbar.tsx
+++ b/starters/tailwind/src/Toolbar.tsx
@@ -7,7 +7,7 @@ const styles = tv({
   base: 'flex gap-2',
   variants: {
     orientation: {
-      horizontal: 'flex-row',
+      horizontal: 'flex-row items-center',
       vertical: 'flex-col items-start'
     }
   }
diff --git a/starters/tailwind/src/Tooltip.tsx b/starters/tailwind/src/Tooltip.tsx
index 2302e474fa8..d42140bb2a7 100644
--- a/starters/tailwind/src/Tooltip.tsx
+++ b/starters/tailwind/src/Tooltip.tsx
@@ -13,7 +13,7 @@ export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
 }
 
 const styles = tv({
-  base: 'group bg-slate-700 dark:bg-slate-600 border border-slate-800 dark:border-white/10 shadow-[inset_0_1px_0_0_var(--color-gray-600)] dark:shadow-none text-white text-sm rounded-lg drop-shadow-lg will-change-transform px-3 py-1',
+  base: 'group bg-slate-700 dark:bg-slate-600 border border-slate-800 dark:border-white/10 shadow-[inset_0_1px_0_0_var(--color-gray-600)] dark:shadow-none font-sans text-white text-sm rounded-lg drop-shadow-lg will-change-transform px-3 py-1 box-border',
   variants: {
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200'
@@ -28,7 +28,7 @@ export function Tooltip({ children, ...props }: TooltipProps) {
   return (
     <AriaTooltip {...props} offset={10} className={composeRenderProps(props.className, (className, renderProps) => styles({...renderProps, className}))}>
       <OverlayArrow>
-        <svg width={8} height={8} viewBox="0 0 8 8" className="fill-slate-700 dark:fill-slate-600 forced-colors:fill-[Canvas] stroke-gray-800 dark:stroke-white/10 forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90">
+        <svg width={8} height={8} viewBox="0 0 8 8" className="block fill-slate-700 dark:fill-slate-600 forced-colors:fill-[Canvas] stroke-gray-800 dark:stroke-white/10 forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90">
           <path d="M0 0 L4 4 L8 0" />
         </svg>
       </OverlayArrow>
diff --git a/starters/tailwind/src/Tree.tsx b/starters/tailwind/src/Tree.tsx
index 7c9b833daf9..703c25209c8 100644
--- a/starters/tailwind/src/Tree.tsx
+++ b/starters/tailwind/src/Tree.tsx
@@ -16,7 +16,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const itemStyles = tv({
   extend: focusRing,
-  base: 'relative w-48 flex group gap-3 cursor-default select-none py-2 px-3 text-sm text-gray-900 dark:text-zinc-200 bg-white dark:bg-zinc-900 border-y dark:border-y-zinc-700 border-transparent first:border-t-0 last:border-b-0 -mb-px last:mb-0 -outline-offset-2',
+  base: 'relative font-sans w-48 flex group gap-3 cursor-default select-none py-1 px-3 text-sm text-gray-900 dark:text-zinc-200 bg-white dark:bg-zinc-900 border-y dark:border-y-zinc-700 border-transparent first:border-t-0 last:border-b-0 -mb-px last:mb-0 -outline-offset-2',
   variants: {
     isSelected: {
       false: 'hover:bg-gray-100 dark:hover:bg-zinc-700/60',
diff --git a/starters/tailwind/stories/Popover.stories.tsx b/starters/tailwind/stories/Popover.stories.tsx
index a91bd74b8af..170eab407fd 100644
--- a/starters/tailwind/stories/Popover.stories.tsx
+++ b/starters/tailwind/stories/Popover.stories.tsx
@@ -21,7 +21,7 @@ export default meta;
 
 export const Example = (args: any) => (
   <DialogTrigger>
-    <Button variant="icon" aria-label="Help"><HelpCircle className="w-4 h-4" /></Button>
+    <Button variant="secondary" aria-label="Help"><HelpCircle className="w-4 h-4" /></Button>
     <Popover {...args} className="max-w-[250px]">
       <Dialog>
         <Heading slot="title" className="text-lg font-semibold mb-2">Help</Heading>

From e6d4db7c86eaa6bfb65f65b49f14a53dec6b96f8 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Mon, 20 Oct 2025 10:00:59 -0700
Subject: [PATCH 4/6] chore: get commits for testing (#9050)

* chore: automate building our testing sheet

* write csv

* update comments

* filter PRs using label

* get all commits, verify date arguments
---
 scripts/getCommitsForTesting.js | 162 ++++++++++++++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 scripts/getCommitsForTesting.js

diff --git a/scripts/getCommitsForTesting.js b/scripts/getCommitsForTesting.js
new file mode 100644
index 00000000000..bae0c91c8d9
--- /dev/null
+++ b/scripts/getCommitsForTesting.js
@@ -0,0 +1,162 @@
+const Octokit = require('@octokit/rest');
+const fs = require('fs');
+let {parseArgs} = require('util');
+
+const octokit = new Octokit();
+
+let options = {
+  startDate: {
+    type: 'string'
+  },
+  endDate: {
+    type: 'string'
+  }
+};
+
+writeTestingCSV();
+
+async function writeTestingCSV() {
+  let data = await listCommits();
+
+  let s2PRs = [];
+  let racPRs = [];
+  let v3PRs = [];
+  let otherPRs = [];
+
+  for (let d of data) {
+    let row = [];
+
+    // Get the PR Title from the commit
+    let regex = /\(#(\d+)\)/g;
+    let messages = d.commit.message.split('\n');
+    let title = messages[0];
+    row.push(title);
+
+    // Get info about the PR using PR number
+    if (regex.test(title)) {
+      let num = title.match(regex)[0].replace(/[\(\)#]/g, '');
+      let info = await getPR(num);
+
+      // Get testing instructions if it exists
+      let content = info.data.body;
+      const match = content.match(/## 📝 Test Instructions:\s*([\s\S]*?)(?=##|$)/);
+      let testInstructions = '';
+      if (match) {
+        testInstructions = match[1];
+        testInstructions = testInstructions.replace(/<!--[\s\S]*?-->/g, '');
+        testInstructions = testInstructions.trim();
+        testInstructions = escapeCSV(testInstructions);
+      }
+
+      if (testInstructions.length > 350) {
+        row.push('See PR for testing instructions');
+      } else {
+        row.push(testInstructions);
+      }
+      row.push(info.data.html_url);
+
+      if ((/\bs2\b/gi).test(title)) {
+        s2PRs.push(row);
+      } else if ((/\brac\b/gi).test(title)) {
+        racPRs.push(row);
+      } else if ((/\bv3\b/gi).test(title)) {
+        v3PRs.push(row);
+      } else {
+        otherPRs.push(row);
+      }
+    }
+  }
+
+  let csvRows = '';
+  csvRows += 'V3 \n';
+  for (let v3 of v3PRs) {
+    csvRows += v3.join() + '\n';
+  }
+
+  csvRows += '\nRainbow \n'
+  for (let s2 of s2PRs) {
+    csvRows += s2.join() + '\n';
+  }
+
+  csvRows += '\nRAC \n'
+  for (let rac of racPRs) {
+    csvRows += rac.join() + '\n';
+  }
+
+  csvRows += '\nOther \n'
+  for (let other of otherPRs) {
+    csvRows += other.join() + '\n';
+  }
+
+  fs.writeFileSync('output.csv', csvRows, 'utf-8');
+}
+
+async function listCommits() {
+  let args = parseArgs({options, allowPositionals: true});
+  if (args.positionals.length < 2) {
+    console.error('Expected at least two arguments');
+    process.exit(1);
+  }
+
+  let start = new Date(args.positionals[0]);
+  let end = new Date(args.positionals[1]);
+
+  if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+    console.error('Please verify that your date is correctly formatted')
+    process.exit(1)
+  }
+
+  let startDate = new Date(start).toISOString();
+  let endDate = new Date(end).toISOString();
+
+  let res = await octokit.request(`GET /repos/adobe/react-spectrum/commits?sha=main&since=${startDate}&until=${endDate}`, {
+    owner: 'adobe',
+    repo: 'react-spectrum',
+    headers: {
+      'X-GitHub-Api-Version': '2022-11-28'
+    }
+  });
+
+  return res.data;
+}
+
+async function getPR(num) {
+  let res = await octokit.request(`GET /repos/adobe/react-spectrum/pulls/${num}`, {
+    owner: 'adobe',
+    repo: 'react-spectrum',
+    pull_number: `${num}`,
+    headers: {
+      'X-GitHub-Api-Version': '2022-11-28'
+    }
+  });
+  return res;
+}
+
+function escapeCSV(value) {
+  if (!value) {
+    return '';
+  }
+
+  // Normalize newlines for CSV compatibility
+  let stringValue = String(value).replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+  // Escape any internal double quotes
+  let escaped = stringValue.replace(/"/g, '""');
+
+  // Wrap in quotes so commas/newlines don't break the cell
+  return `"${escaped}"`;
+}
+
+// We can bring this back if we start using the "needs testing" label
+// function isReadyForTesting(labels){
+//   if (labels.length === 0) {
+//     return false;
+//   }
+//   for (let label of labels) {
+//     if (label.name === 'needs testing') {
+//       return true;
+//     }
+//   }
+
+//   return false;
+// }

From 6fe98be24a5726b900ac1696609855a164f6ce17 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 20 Oct 2025 12:11:46 -0500
Subject: [PATCH 5/6] docs: new component illustrations (#9060)

---
 .../component-illustrations/ActionBar.svg     | 19 ++++++
 .../component-illustrations/AdobeDefault.svg  |  8 +++
 .../component-illustrations/Autocomplete.svg  | 46 +++++++++++++
 .../assets/component-illustrations/Avatar.svg | 12 ++++
 .../component-illustrations/AvatarGroup.svg   | 26 ++++++++
 .../assets/component-illustrations/Card.svg   | 11 ++++
 .../component-illustrations/CardView.svg      | 27 ++++++++
 .../component-illustrations/ComingSoon.svg    |  3 -
 .../component-illustrations/Divider.svg       |  4 ++
 .../assets/component-illustrations/Group.svg  | 16 +++++
 .../assets/component-illustrations/Icons.svg  | 17 +++++
 .../IllustratedMessage.svg                    | 10 +++
 .../component-illustrations/Illustrations.svg |  6 ++
 .../assets/component-illustrations/Image.svg  |  9 +++
 .../component-illustrations/InlineAlert.svg   | 10 +++
 .../InternationalizedDefault.svg              | 15 +++++
 .../assets/component-illustrations/Modal.svg  | 44 +++++++++++++
 .../ReactAriaDefault.svg                      | 16 +++++
 .../SegmentedControl.svg                      | 14 ++++
 .../SelectBoxGroup.svg                        | 40 ++++++++++++
 .../component-illustrations/Skeleton.svg      | 11 ++++
 .../component-illustrations/Toolbar.svg       | 48 ++++++++++++++
 .../component-illustrations/Virtualizer.svg   | 33 ++++++++++
 .../dev/s2-docs/src/ComponentCardView.tsx     | 64 +++++++++++++++++--
 24 files changed, 501 insertions(+), 8 deletions(-)
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/ActionBar.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/AdobeDefault.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Autocomplete.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Avatar.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/AvatarGroup.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Card.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/CardView.svg
 delete mode 100644 packages/dev/docs/pages/assets/component-illustrations/ComingSoon.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Divider.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Group.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Icons.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/IllustratedMessage.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Illustrations.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Image.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/InlineAlert.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/InternationalizedDefault.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Modal.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/ReactAriaDefault.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/SegmentedControl.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/SelectBoxGroup.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Skeleton.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Toolbar.svg
 create mode 100644 packages/dev/docs/pages/assets/component-illustrations/Virtualizer.svg

diff --git a/packages/dev/docs/pages/assets/component-illustrations/ActionBar.svg b/packages/dev/docs/pages/assets/component-illustrations/ActionBar.svg
new file mode 100644
index 00000000000..064297572f9
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/ActionBar.svg
@@ -0,0 +1,19 @@
+<svg style="background:var(--anatomy-gray-100); padding: 60px 10px" height="48" viewBox="0 0 240 48">
+  <rect id="Placement_Area" data-name="Placement Area" width="240" height="48" fill="red" opacity="0"/>
+  <g id="Background" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1">
+    <rect width="240" height="48" rx="6" stroke="none"/>
+    <rect x="0.5" y="0.5" width="239" height="47" rx="5.5" fill="none"/>
+  </g>
+  <g id="Close_Button" transform="translate(20 24)">
+    <path d="M-4,-4 L4,4 M4,-4 L-4,4" stroke="var(--anatomy-gray-700)" stroke-width="1.5" stroke-linecap="round"/>
+  </g>
+  <text id="Selected_Text" transform="translate(40 28)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)" font-weight="600"><tspan x="0" y="0">3 selected</tspan></text>
+  <g id="Edit_Button" transform="translate(154 12)">
+    <rect width="36" height="24" rx="4" fill="var(--anatomy-gray-600)"/>
+    <text transform="translate(18 16)" fill="white" font-size="11" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">Edit</tspan></text>
+  </g>
+  <g id="Delete_Button" transform="translate(196 12)">
+    <rect width="36" height="24" rx="4" fill="var(--anatomy-gray-600)"/>
+    <text transform="translate(18 16)" fill="white" font-size="11" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">Delete</tspan></text>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/AdobeDefault.svg b/packages/dev/docs/pages/assets/component-illustrations/AdobeDefault.svg
new file mode 100644
index 00000000000..ddbd6687c5e
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/AdobeDefault.svg
@@ -0,0 +1,8 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <rect id="Placement_Area" data-name="Placement Area" width="120" height="120" fill="red" opacity="0"/>
+  <g id="Adobe_Logo" transform="translate(35 38)">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501.71 444.05" width="50" height="44.4">
+      <path d="m297.58 444.05-36.45-101.4h-91.46l76.87-193.53 116.65 294.93h138.52L316.8 0H186.23L0 444.05h297.58z" fill="var(--anatomy-gray-500)" stroke-width="0"/>
+    </svg>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Autocomplete.svg b/packages/dev/docs/pages/assets/component-illustrations/Autocomplete.svg
new file mode 100644
index 00000000000..f8be774678c
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Autocomplete.svg
@@ -0,0 +1,46 @@
+<svg style="background:var(--anatomy-gray-100); width: calc(100% - 20px); padding: 10px; max-height: 205px;" viewBox="0 0 176 205">
+  <defs>
+    <filter id="Background_AC" x="0" y="57" width="176" height="148" filterUnits="userSpaceOnUse">
+      <feOffset dy="1" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="2" result="blur"/>
+      <feFlood flood-opacity="0.149"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="Autocomplete">
+    <g id="Input_Field" data-name="Input Field">
+      <g id="Placement_Area" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="176" height="56" stroke="none"/>
+        <rect x="0.5" y="0.5" width="175" height="55" fill="none"/>
+      </g>
+      <text id="Label" transform="translate(0 16)" fill="var(--anatomy-gray-700)" font-size="12" font-family="var(--anatomy-font)"><tspan x="0" y="0">Favorite animal</tspan></text>
+      <g id="Text_Area" data-name="Text Area" transform="translate(0 24)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-600)" stroke-width="1">
+        <rect width="176" height="32" rx="4" stroke="none"/>
+        <rect x="0.5" y="0.5" width="175" height="31" rx="3.5" fill="none"/>
+      </g>
+      <text id="Text" transform="translate(12 44)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Ca</tspan></text>
+      <line id="Cursor" x1="0" y1="0" x2="0" y2="14" transform="translate(28 31)" stroke="var(--anatomy-gray-900)" stroke-width="1"/>
+    </g>
+    <g id="Menu">
+      <g id="Placement_Area-2" data-name="Placement Area" transform="translate(0 62)" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="176" height="136" stroke="none"/>
+        <rect x="0.5" y="0.5" width="175" height="135" fill="none"/>
+      </g>
+      <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Background_AC)">
+        <g id="Background-2" data-name="Background" transform="translate(0 62)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1">
+          <rect width="176" height="136" rx="4" stroke="none"/>
+          <rect x="0.5" y="0.5" width="175" height="135" rx="3.5" fill="none"/>
+        </g>
+      </g>
+      <g id="Hover" transform="translate(2 130)" fill="var(--anatomy-gray-900)" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0.04">
+        <rect width="172" height="32" stroke="none"/>
+        <rect x="0.5" y="0.5" width="171" height="31" fill="none"/>
+      </g>
+      <text id="Camel" transform="translate(12 86)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Camel</tspan></text>
+      <text id="Capybara" transform="translate(12 118)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Capybara</tspan></text>
+      <text id="Caribou" transform="translate(12 150)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Caribou</tspan></text>
+      <text id="Cat" transform="translate(12 182)" fill="var(--anatomy-gray-800)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Cat</tspan></text>
+    </g>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Avatar.svg b/packages/dev/docs/pages/assets/component-illustrations/Avatar.svg
new file mode 100644
index 00000000000..1e345904ffe
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Avatar.svg
@@ -0,0 +1,12 @@
+<svg style="background:var(--anatomy-gray-100); padding: 60px 10px" height="32" viewBox="0 0 32 32">
+  <rect id="Placement_Area" data-name="Placement Area" width="32" height="32" fill="red" opacity="0"/>
+  <g clip-path="url(#clip0_avatar)">
+    <rect width="32" height="32" rx="16" fill="var(--anatomy-gray-600)"/>
+  </g>
+  <text id="Initials" transform="translate(16 21)" fill="white" font-size="14" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">RS</tspan></text>
+  <defs>
+    <clipPath id="clip0_avatar">
+      <rect width="32" height="32" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/AvatarGroup.svg b/packages/dev/docs/pages/assets/component-illustrations/AvatarGroup.svg
new file mode 100644
index 00000000000..4d2e914ba0b
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/AvatarGroup.svg
@@ -0,0 +1,26 @@
+<svg style="background:var(--anatomy-gray-100); padding: 60px 10px" height="32" viewBox="0 0 84 32">
+  <rect id="Placement_Area" data-name="Placement Area" width="84" height="32" fill="red" opacity="0"/>
+  <g id="Avatar_3" clip-path="url(#clip2_avatargroup)">
+    <rect x="52" width="32" height="32" rx="16" fill="var(--anatomy-gray-500)"/>
+  </g>
+  <text transform="translate(68 21)" fill="white" font-size="14" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">IN</tspan></text>
+  <g id="Avatar_2" clip-path="url(#clip1_avatargroup)">
+    <rect x="26" width="32" height="32" rx="16" fill="var(--anatomy-gray-600)"/>
+  </g>
+  <text transform="translate(42 21)" fill="white" font-size="14" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">RA</tspan></text>
+  <g id="Avatar_1" clip-path="url(#clip0_avatargroup)">
+    <rect width="32" height="32" rx="16" fill="var(--anatomy-gray-700)"/>
+  </g>
+  <text transform="translate(16 21)" fill="white" font-size="14" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">RS</tspan></text>
+  <defs>
+    <clipPath id="clip0_avatargroup">
+      <rect width="32" height="32" fill="white"/>
+    </clipPath>
+    <clipPath id="clip1_avatargroup">
+      <rect width="32" height="32" fill="white" transform="translate(26)"/>
+    </clipPath>
+    <clipPath id="clip2_avatargroup">
+      <rect width="32" height="32" fill="white" transform="translate(52)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Card.svg b/packages/dev/docs/pages/assets/component-illustrations/Card.svg
new file mode 100644
index 00000000000..06d78046ff7
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Card.svg
@@ -0,0 +1,11 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="100" viewBox="0 0 140 100">
+  <rect id="Placement_Area" data-name="Placement Area" width="140" height="100" fill="red" opacity="0"/>
+  <g id="Card">
+    <rect id="Background" width="140" height="100" rx="6" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-300)" stroke-width="1"/>
+    <rect id="Image_Placeholder" x="10" y="10" width="120" height="50" rx="4" fill="var(--anatomy-gray-200)"/>
+    <rect id="Icon" x="60" y="27.5" width="16" height="16" fill="var(--anatomy-gray-400)" opacity="0"/>
+    <path id="Image_Icon" d="M1.5,0H14.5A1.5,1.5,0,0,1,16,1.5v13A1.5,1.5,0,0,1,14.5,16H1.5A1.5,1.5,0,0,1,0,14.5V1.5A1.5,1.5,0,0,1,1.5,0ZM4,6.5a2.5,2.5,0,1,0-2.5-2.5A2.5,2.5,0,0,0,4,6.5ZM15.5,14l-4-4-2.5,2.5L6,9.5,0.5,14Z" transform="translate(60 27.5)" fill="var(--anatomy-gray-500)"/>
+    <rect id="Title" x="10" y="68" width="80" height="10" rx="2" fill="var(--anatomy-gray-500)"/>
+    <rect id="Description" x="10" y="82" width="110" height="6" rx="2" fill="var(--anatomy-gray-300)"/>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/CardView.svg b/packages/dev/docs/pages/assets/component-illustrations/CardView.svg
new file mode 100644
index 00000000000..e5b3451024e
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/CardView.svg
@@ -0,0 +1,27 @@
+<svg style="background:var(--anatomy-gray-100); padding: 30px 10px" height="160" viewBox="0 0 260 160">
+  <rect id="Placement_Area" data-name="Placement Area" width="260" height="160" fill="red" opacity="0"/>
+  <g id="Card_1">
+    <rect width="124" height="76" rx="4" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-300)" stroke-width="1"/>
+    <rect x="6" y="6" width="112" height="42" rx="2" fill="var(--anatomy-gray-200)"/>
+    <rect x="6" y="56" width="65" height="7" rx="1.5" fill="var(--anatomy-gray-500)"/>
+    <rect x="6" y="66" width="90" height="5" rx="1.5" fill="var(--anatomy-gray-300)"/>
+  </g>
+  <g id="Card_2" transform="translate(136 0)">
+    <rect width="124" height="76" rx="4" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-300)" stroke-width="1"/>
+    <rect x="6" y="6" width="112" height="42" rx="2" fill="var(--anatomy-gray-200)"/>
+    <rect x="6" y="56" width="65" height="7" rx="1.5" fill="var(--anatomy-gray-500)"/>
+    <rect x="6" y="66" width="90" height="5" rx="1.5" fill="var(--anatomy-gray-300)"/>
+  </g>
+  <g id="Card_3" transform="translate(0 84)">
+    <rect width="124" height="76" rx="4" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-300)" stroke-width="1"/>
+    <rect x="6" y="6" width="112" height="42" rx="2" fill="var(--anatomy-gray-200)"/>
+    <rect x="6" y="56" width="65" height="7" rx="1.5" fill="var(--anatomy-gray-500)"/>
+    <rect x="6" y="66" width="90" height="5" rx="1.5" fill="var(--anatomy-gray-300)"/>
+  </g>
+  <g id="Card_4" transform="translate(136 84)">
+    <rect width="124" height="76" rx="4" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-300)" stroke-width="1"/>
+    <rect x="6" y="6" width="112" height="42" rx="2" fill="var(--anatomy-gray-200)"/>
+    <rect x="6" y="56" width="65" height="7" rx="1.5" fill="var(--anatomy-gray-500)"/>
+    <rect x="6" y="66" width="90" height="5" rx="1.5" fill="var(--anatomy-gray-300)"/>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/ComingSoon.svg b/packages/dev/docs/pages/assets/component-illustrations/ComingSoon.svg
deleted file mode 100644
index 66e8701aa2c..00000000000
--- a/packages/dev/docs/pages/assets/component-illustrations/ComingSoon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg style="background:var(--anatomy-gray-100); padding: calc((152px - 17px) / 2) 10px" height="17" viewBox="0 0 135 17">
-  <text id="Link" transform="translate(0 14)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)"><tspan x="0" y="0">Image Coming Soon</tspan></text>
-</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Divider.svg b/packages/dev/docs/pages/assets/component-illustrations/Divider.svg
new file mode 100644
index 00000000000..e89adb45ba4
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Divider.svg
@@ -0,0 +1,4 @@
+<svg style="background:var(--anatomy-gray-100); padding: 60px 10px" height="1" viewBox="0 0 180 1">
+  <rect id="Placement_Area" data-name="Placement Area" width="180" height="1" fill="red" opacity="0"/>
+  <rect id="Divider" width="180" height="1" fill="var(--anatomy-gray-400)"/>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Group.svg b/packages/dev/docs/pages/assets/component-illustrations/Group.svg
new file mode 100644
index 00000000000..76b750a742f
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Group.svg
@@ -0,0 +1,16 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="100" viewBox="0 0 200 100">
+  <rect id="Placement_Area" data-name="Placement Area" width="200" height="100" fill="red" opacity="0"/>
+  <g id="Group">
+    <rect id="Group_Container" width="200" height="100" rx="6" fill="none" stroke="var(--anatomy-gray-400)" stroke-width="1" stroke-dasharray="4 4"/>
+    <text id="Group_Label" transform="translate(10 20)" fill="var(--anatomy-gray-700)" font-size="12" font-family="var(--anatomy-font)" font-weight="600"><tspan x="0" y="0">Group Label</tspan></text>
+    <g id="Item_1" transform="translate(10 32)">
+      <rect width="180" height="28" rx="4" fill="var(--anatomy-gray-200)"/>
+      <text transform="translate(10 18)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)"><tspan x="0" y="0">Item 1</tspan></text>
+    </g>
+    <g id="Item_2" transform="translate(10 64)">
+      <rect width="180" height="28" rx="4" fill="var(--anatomy-gray-200)"/>
+      <text transform="translate(10 18)" fill="var(--anatomy-gray-700)" font-size="13" font-family="var(--anatomy-font)"><tspan x="0" y="0">Item 2</tspan></text>
+    </g>
+  </g>
+</svg>
+
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Icons.svg b/packages/dev/docs/pages/assets/component-illustrations/Icons.svg
new file mode 100644
index 00000000000..1144fc40318
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Icons.svg
@@ -0,0 +1,17 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="32" viewBox="0 0 120 32">
+  <rect id="Placement_Area" data-name="Placement Area" width="120" height="32" fill="red" opacity="0"/>
+  <g id="Heart_Icon">
+    <rect width="32" height="32" fill="var(--anatomy-gray-300)" opacity="0"/>
+    <path d="M16,28 C16,28 4,20 4,12 C4,8 6,6 9,6 C11,6 13,7 16,10 C19,7 21,6 23,6 C26,6 28,8 28,12 C28,20 16,28 16,28 Z" fill="var(--anatomy-gray-700)"/>
+  </g>
+  <g id="Star_Icon" transform="translate(44 0)">
+    <rect width="32" height="32" fill="var(--anatomy-gray-300)" opacity="0"/>
+    <path d="M16,4 L19,13 L28,14 L22,20 L24,28 L16,24 L8,28 L10,20 L4,14 L13,13 Z" fill="var(--anatomy-gray-700)"/>
+  </g>
+  <g id="Warning_Icon" transform="translate(88 0)">
+    <rect width="32" height="32" fill="var(--anatomy-gray-300)" opacity="0"/>
+    <path d="M16,6 L26,26 L6,26 Z" fill="none" stroke="var(--anatomy-gray-700)" stroke-width="2"/>
+    <circle cx="16" cy="22" r="1.2" fill="var(--anatomy-gray-700)"/>
+    <path d="M16,12 L16,18" stroke="var(--anatomy-gray-700)" stroke-width="2" stroke-linecap="round"/>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/IllustratedMessage.svg b/packages/dev/docs/pages/assets/component-illustrations/IllustratedMessage.svg
new file mode 100644
index 00000000000..e9e7a833d9c
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/IllustratedMessage.svg
@@ -0,0 +1,10 @@
+<svg style="background:var(--anatomy-gray-100); padding: 20px 10px" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
+  <rect id="Placement_Area" data-name="Placement Area" width="140" height="140" fill="red" opacity="0"/>
+  <g id="Cloud" transform="translate(22 0)">
+    <path d="M69.9137 41.5243C69.9162 41.3982 69.9229 41.2732 69.9229 41.1464C69.9229 31.2765 62.2568 23.2754 52.8003 23.2754C45.1714 23.2754 38.7107 28.484 36.4972 35.6788C35.0284 35.0457 33.4208 34.6919 31.733 34.6919C24.8317 34.6919 19.2372 40.531 19.2372 47.7339C19.2372 48.7486 19.3592 49.7316 19.5692 50.6797C15.0107 51.9829 11.6562 56.326 11.6562 61.4973C11.6562 67.6348 16.3767 72.6141 22.234 72.7151V72.7246H68.9728V72.7224C69.0008 72.7225 69.0283 72.7246 69.0564 72.7246C77.3185 72.7246 84.0162 65.7341 84.0162 57.1108C84.0162 48.7881 77.7766 41.9883 69.9137 41.5243Z" fill="var(--anatomy-gray-500)"/>
+  </g>
+  <g id="Message">
+    <text transform="translate(70 100)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">No results</tspan></text>
+    <text transform="translate(70 116)" fill="var(--anatomy-gray-600)" font-size="11" font-family="var(--anatomy-font)" text-anchor="middle"><tspan x="0" y="0">Try another search</tspan></text>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Illustrations.svg b/packages/dev/docs/pages/assets/component-illustrations/Illustrations.svg
new file mode 100644
index 00000000000..ed92ec03566
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Illustrations.svg
@@ -0,0 +1,6 @@
+<svg style="background:var(--anatomy-gray-100); padding: 30px 10px" height="96" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+  <rect id="Placement_Area" data-name="Placement Area" width="96" height="96" fill="red" opacity="0"/>
+  <g id="Cloud">
+    <path d="M69.9137 41.5243C69.9162 41.3982 69.9229 41.2732 69.9229 41.1464C69.9229 31.2765 62.2568 23.2754 52.8003 23.2754C45.1714 23.2754 38.7107 28.484 36.4972 35.6788C35.0284 35.0457 33.4208 34.6919 31.733 34.6919C24.8317 34.6919 19.2372 40.531 19.2372 47.7339C19.2372 48.7486 19.3592 49.7316 19.5692 50.6797C15.0107 51.9829 11.6562 56.326 11.6562 61.4973C11.6562 67.6348 16.3767 72.6141 22.234 72.7151V72.7246H68.9728V72.7224C69.0008 72.7225 69.0283 72.7246 69.0564 72.7246C77.3185 72.7246 84.0162 65.7341 84.0162 57.1108C84.0162 48.7881 77.7766 41.9883 69.9137 41.5243Z" fill="var(--anatomy-gray-500)"/>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Image.svg b/packages/dev/docs/pages/assets/component-illustrations/Image.svg
new file mode 100644
index 00000000000..a3558a25f6d
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Image.svg
@@ -0,0 +1,9 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="90" viewBox="0 0 120 90">
+  <rect id="Placement_Area" data-name="Placement Area" width="120" height="90" fill="red" opacity="0"/>
+  <g id="Image">
+    <rect id="Background" width="120" height="90" rx="4" fill="var(--anatomy-gray-300)" stroke="var(--anatomy-gray-400)" stroke-width="1"/>
+    <rect id="Icon_Frame" x="50" y="35" width="20" height="20" fill="var(--anatomy-gray-500)" opacity="0"/>
+    <path id="Image_Icon" d="M2,0H18a2,2,0,0,1,2,2V18a2,2,0,0,1-2,2H2a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0ZM5,8a3,3,0,1,0-3-3A3,3,0,0,0,5,8ZM19,17l-5-5-3,3-4-4L1,17Z" transform="translate(50 35)" fill="var(--anatomy-gray-600)"/>
+  </g>
+</svg>
+
diff --git a/packages/dev/docs/pages/assets/component-illustrations/InlineAlert.svg b/packages/dev/docs/pages/assets/component-illustrations/InlineAlert.svg
new file mode 100644
index 00000000000..4705688d192
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/InlineAlert.svg
@@ -0,0 +1,10 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="48" viewBox="0 0 200 48">
+  <rect id="Placement_Area" data-name="Placement Area" width="200" height="48" fill="red" opacity="0"/>
+  <g id="Alert">
+    <rect id="Background" width="200" height="48" rx="4" fill="var(--anatomy-gray-200)" stroke="var(--anatomy-gray-400)" stroke-width="1"/>
+    <circle id="Icon_Background" cx="8" cy="8" r="8" transform="translate(8 16)" fill="var(--anatomy-gray-600)"/>
+    <text id="Icon" transform="translate(16 28)" fill="white" font-size="12" font-family="var(--anatomy-font)" font-weight="700" text-anchor="middle"><tspan x="0" y="0">i</tspan></text>
+    <rect id="Text_Line_1" x="32" y="14" width="140" height="8" rx="2" fill="var(--anatomy-gray-500)"/>
+    <rect id="Text_Line_2" x="32" y="26" width="110" height="8" rx="2" fill="var(--anatomy-gray-400)"/>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/InternationalizedDefault.svg b/packages/dev/docs/pages/assets/component-illustrations/InternationalizedDefault.svg
new file mode 100644
index 00000000000..11a4e08b82b
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/InternationalizedDefault.svg
@@ -0,0 +1,15 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="intl-clip">
+      <path d="M23.98 79.99c0-17.01 7.58-32.25 19.54-42.52.92 2.02 2.32 4.67 4 7.13 1.05 1.54 2.28 3.1 3.65 4.41 1.33 1.27 3.04 2.55 5.08 3.13 3.29.94 7.1.8 9.98.7l.88-.03c1.63-.05 2.94-.07 4.03.05 1.11.11 1.57.33 1.71.42.31.2.39.37.41.43.03.08.07.22.03.46-.09.52-.53 1.28-1.4 1.76-2.07 1.15-4.14 2.6-5.69 4.59-1.63 2.09-2.54 4.6-2.54 7.55 0 .86-.07 1.4-.15 1.72v.03c-.28.06-.81.1-1.7.03-.27-.02-.55-.05-.86-.07-2.32-.21-5.69-.5-8.87-.17-3.54.37-8.1 1.64-10.56 5.96-1.08 1.89-2.33 5.04-2.03 8.8.31 3.92 2.27 7.99 6.71 11.55 5.12 4.1 10.75 4.98 18.12 5.8 4.2.47 6.58 1.37 7.94 2.33 1.19.84 1.85 1.9 2.18 3.55.58 2.88-.4 7.19-2.43 12.45-.97 2.52-2.11 5.05-3.24 7.52-.25.54-.5 1.08-.74 1.61-.81 1.76-1.61 3.47-2.27 5.03C41.73 127.9 24 106.03 24 80.02Zm26.36-46.91c-.07-.17-.15-.33-.24-.49a55.64 55.64 0 0 1 12.37-5.84c.05.3.14.6.26.89 2.06 4.9 8.3 10.94 16.68 10.94 4.33 0 7.8-1.86 10.35-3.97 2.53-2.1 4.34-4.6 5.47-6.33.41-.63.62-1.34.65-2.04.69.2 1.37.42 2.05.65-.06.18-.1.37-.13.57-.67 4.46-1.44 10.7-.74 16.34.69 5.54 3.01 11.91 9.76 14.25 5.36 1.86 10.66.94 14.8-.9 2.74-1.22 5.23-2.96 7.07-4.9 2.11 3.7 3.81 7.65 5.04 11.81l-1.75-.36c-3.01-.59-7.06-1.26-11.28-1.54-4.16-.28-8.77-.19-12.78.91-4.02 1.1-8.1 3.44-9.84 8.13-4.86 13.11 1.7 21.06 3.39 22.75 2.55 2.55 5.17 3.75 7.1 4.62.23.11.46.21.67.31 1.86.87 3.19 1.63 4.54 3.58.47.67.94 1.89 1.3 3.74.34 1.8.52 3.89.58 6.11.07 2.2.02 4.41-.04 6.43l-.06 1.63c-.04 1.08-.07 2.1-.09 2.95a55.775 55.775 0 0 1-35.48 12.67c-2.09 0-4.15-.11-6.18-.34.44-.97.91-1.99 1.41-3.08.26-.55.52-1.12.79-1.71 1.15-2.49 2.37-5.21 3.44-7.97 2.05-5.28 3.89-11.54 2.82-16.9-.67-3.35-2.3-6.32-5.41-8.51-2.94-2.07-6.85-3.21-11.67-3.74-7.46-.83-10.89-1.6-14.01-4.09-2.9-2.32-3.62-4.43-3.74-5.93-.13-1.67.44-3.21 1-4.2.51-.9 1.72-1.68 4.44-1.97 2.35-.25 4.9-.03 7.3.18.31.03.62.05.93.08 2.86.24 5.98-.1 8.18-2.42 2.06-2.18 2.33-5.13 2.33-7.33 0-1.17.32-1.95.86-2.64.61-.79 1.63-1.6 3.26-2.51 2.83-1.57 4.87-4.32 5.4-7.4.56-3.26-.64-6.73-3.89-8.9-1.72-1.14-3.68-1.55-5.33-1.72-1.68-.17-3.48-.13-5.1-.08-.22 0-.44.01-.65.02-3.22.11-5.75.19-7.75-.38-.27-.08-.86-.38-1.74-1.22-.84-.8-1.72-1.89-2.58-3.15-1.73-2.53-3.12-5.37-3.79-7Zm73.36 81.97a55.79 55.79 0 0 0 12.32-35.06c0-2.49-.16-4.94-.48-7.34-.05 0-.09-.02-.12-.02-.14-.03-.29-.06-.42-.09-.2-.04-.45-.1-.74-.16l-.35-.08c-.87-.2-2.06-.46-3.47-.73-2.84-.56-6.52-1.16-10.27-1.41-3.81-.25-7.38-.11-10.13.64-2.73.75-3.97 1.89-4.45 3.2-3.38 9.13 1.14 13.91 1.55 14.32 1.49 1.49 2.84 2.11 4.77 3 .23.11.47.22.73.34 2.42 1.13 5.22 2.64 7.73 6.27 1.39 2 2.14 4.47 2.58 6.79.46 2.38.65 4.94.72 7.37.03 1 .04 1.99.03 2.96Zm.28-69.78a56.276 56.276 0 0 0-18.47-15.18c-.57 4.1-.99 8.75-.5 12.73.56 4.56 2.1 6.86 4.44 7.68 2.96 1.03 6.11.6 8.92-.65 2.91-1.3 4.85-3.21 5.46-4.32.05-.09.1-.18.16-.26ZM80 23.96c2.75 0 5.46.2 8.11.58-.9 1.31-2.06 2.75-3.46 3.91-1.61 1.33-3.33 2.13-5.24 2.13-4.39 0-7.99-3.27-9.19-5.78 3.17-.56 6.44-.85 9.78-.85Z" style="fill:none"/>
+    </clipPath>
+  </defs>
+  <rect id="Placement_Area" data-name="Placement Area" width="120" height="120" fill="red" opacity="0"/>
+  <g id="Internationalized_Logo" transform="translate(32.5 38)">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="15 17 135 128" width="55" height="52">
+      <g clip-path="url(#intl-clip)">
+        <path d="M15 17h135v128H15z" fill="var(--anatomy-gray-500)"/>
+      </g>
+    </svg>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Modal.svg b/packages/dev/docs/pages/assets/component-illustrations/Modal.svg
new file mode 100644
index 00000000000..0bac9e694b0
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Modal.svg
@@ -0,0 +1,44 @@
+<svg style="background:var(--anatomy-gray-100); padding: 30px 10px" height="180" viewBox="0 0 220 180">
+  <defs>
+    <filter id="Modal_Shadow" x="14" y="14" width="192" height="152" filterUnits="userSpaceOnUse">
+      <feOffset dy="2" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood flood-opacity="0.2"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <rect id="Placement_Area" data-name="Placement Area" width="220" height="180" fill="red" opacity="0"/>
+  <g id="Modal_Container">
+    <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Modal_Shadow)">
+      <g id="Modal_Background" transform="translate(20 20)" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1">
+        <rect width="180" height="140" rx="8" stroke="none"/>
+        <rect x="0.5" y="0.5" width="179" height="139" rx="7.5" fill="none"/>
+      </g>
+    </g>
+    <g id="Modal_Content">
+      <g id="Header">
+        <text transform="translate(32 42)" fill="var(--anatomy-gray-800)" font-size="16" font-family="var(--anatomy-font)" font-weight="600"><tspan x="0" y="0">Modal Title</tspan></text>
+        <g id="Close_Button" transform="translate(182 32)">
+          <path d="M-4,-4 L4,4 M4,-4 L-4,4" stroke="var(--anatomy-gray-700)" stroke-width="1.5" stroke-linecap="round"/>
+        </g>
+      </g>
+      <rect id="Divider" x="32" y="52" width="156" height="1" fill="var(--anatomy-gray-300)"/>
+      <g id="Content">
+        <rect x="32" y="64" width="120" height="8" rx="2" fill="var(--anatomy-gray-300)"/>
+        <rect x="32" y="76" width="140" height="8" rx="2" fill="var(--anatomy-gray-300)"/>
+        <rect x="32" y="88" width="100" height="8" rx="2" fill="var(--anatomy-gray-300)"/>
+      </g>
+      <g id="Footer" transform="translate(0 122)">
+        <rect id="Footer_Divider" x="32" y="0" width="156" height="1" fill="var(--anatomy-gray-300)"/>
+        <g id="Cancel_Button">
+          <rect x="102" y="12" width="40" height="20" rx="4" fill="var(--anatomy-gray-200)" stroke="none"/>
+          <rect x="102.5" y="12.5" width="39" height="19" rx="3.5" fill="none" stroke="var(--anatomy-gray-400)" stroke-width="1"/>
+        </g>
+        <text transform="translate(122 26)" fill="var(--anatomy-gray-700)" font-size="11" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">Cancel</tspan></text>
+        <rect id="Confirm_Button" x="148" y="12" width="40" height="20" rx="4" fill="var(--anatomy-gray-700)"/>
+        <text transform="translate(168 26)" fill="white" font-size="11" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">Confirm</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/ReactAriaDefault.svg b/packages/dev/docs/pages/assets/component-illustrations/ReactAriaDefault.svg
new file mode 100644
index 00000000000..710808881b9
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/ReactAriaDefault.svg
@@ -0,0 +1,16 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="react-aria-clip">
+      <path d="M80 136c30.93 0 56-25.07 56-56s-25.07-56-56-56-56 25.07-56 56 25.07 56 56 56Zm8.48-86.3c0 4.69-3.8 8.48-8.48 8.48s-8.48-3.8-8.48-8.48 3.8-8.48 8.48-8.48 8.48 3.8 8.48 8.48ZM51.09 61.78c.52-1.8 2.39-2.85 4.2-2.33a89.865 89.865 0 0 0 48.82.17l.64-.18c1.81-.5 3.68.55 4.18 2.36a3.39 3.39 0 0 1-2.36 4.18l-.64.18a97.139 97.139 0 0 1-15.51 2.98c-1.03.11-1.82.97-1.82 2.01v14.89c0 .18.03.37.08.55 1.37 4.83 2.94 10.39 4.32 15.27.98 3.46 1.86 6.58 2.49 8.85.32 1.14.58 2.06.76 2.71l.04.15c.13.48.27.97.31 1.16a3.38 3.38 0 0 1-2.66 3.99 3.38 3.38 0 0 1-3.99-2.66c.02.09 0 .04-.08-.27-.04-.13-.09-.31-.15-.54-.18-.65-.44-1.57-.76-2.7-.64-2.27-1.52-5.39-2.49-8.85l-3.74-13.21a1.992 1.992 0 0 0-1.92-1.45h-1.6c-.89 0-1.68.59-1.92 1.45-1.22 4.3-2.55 9.01-3.74 13.21-.98 3.46-1.85 6.58-2.49 8.85-.32 1.13-.58 2.06-.76 2.7-.06.23-.11.41-.15.54-.09.31-.1.36-.08.27a3.39 3.39 0 1 1-6.65-1.33c.04-.18.18-.68.31-1.16l.04-.15c.18-.65.44-1.58.76-2.71.64-2.27 1.52-5.39 2.49-8.85 1.38-4.88 2.95-10.44 4.32-15.27.05-.18.08-.36.08-.55V71.16c0-1.04-.79-1.9-1.82-2.01a96.504 96.504 0 0 1-16.17-3.17 3.395 3.395 0 0 1-2.33-4.2Z" style="fill:none"/>
+    </clipPath>
+  </defs>
+  <rect id="Placement_Area" data-name="Placement Area" width="120" height="120" fill="red" opacity="0"/>
+  <g id="React_Aria_Logo" transform="translate(32.5 38)">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="15.79 17.64 131.21 126.14" width="55" height="53">
+      <circle cx="80" cy="80" r="50.83" fill="white"/>
+      <g clip-path="url(#react-aria-clip)">
+        <path d="M15.79 17.64H147v126.14H15.79z" fill="var(--anatomy-gray-500)"/>
+      </g>
+    </svg>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/SegmentedControl.svg b/packages/dev/docs/pages/assets/component-illustrations/SegmentedControl.svg
new file mode 100644
index 00000000000..a6120c2011b
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/SegmentedControl.svg
@@ -0,0 +1,14 @@
+<svg style="background:var(--anatomy-gray-100); padding: 60px 10px" height="32" viewBox="0 0 180 32">
+  <rect id="Placement_Area" data-name="Placement Area" width="180" height="32" fill="red" opacity="0"/>
+  <g id="Container" fill="var(--anatomy-gray-200)" stroke="var(--anatomy-gray-400)" stroke-width="1">
+    <rect width="180" height="32" rx="8" stroke="none"/>
+    <rect x="0.5" y="0.5" width="179" height="31" rx="7.5" fill="none"/>
+  </g>
+  <g id="Selected_Segment" transform="translate(2 2)" fill="var(--anatomy-gray-700)" stroke="rgba(0,0,0,0)" stroke-width="1">
+    <rect width="58" height="28" rx="6" stroke="none"/>
+    <rect x="0.5" y="0.5" width="57" height="27" rx="5.5" fill="none"/>
+  </g>
+  <text id="Text_1" transform="translate(31 20)" fill="white" font-size="12" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">Day</tspan></text>
+  <text id="Text_2" transform="translate(90 20)" fill="var(--anatomy-gray-700)" font-size="12" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">Week</tspan></text>
+  <text id="Text_3" transform="translate(149 20)" fill="var(--anatomy-gray-700)" font-size="12" font-family="var(--anatomy-font)" font-weight="600" text-anchor="middle"><tspan x="0" y="0">Month</tspan></text>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/SelectBoxGroup.svg b/packages/dev/docs/pages/assets/component-illustrations/SelectBoxGroup.svg
new file mode 100644
index 00000000000..91d8e296318
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/SelectBoxGroup.svg
@@ -0,0 +1,40 @@
+<svg style="background:var(--anatomy-gray-100); padding: 30px 10px" height="180" viewBox="0 0 240 180">
+  <rect id="Placement_Area" data-name="Placement Area" width="240" height="180" fill="red" opacity="0"/>
+  <g id="Box_1" fill="var(--anatomy-gray-700)" stroke="var(--anatomy-gray-700)" stroke-width="2">
+    <rect width="110" height="80" rx="4" stroke="none" fill="var(--anatomy-gray-200)"/>
+    <rect x="1" y="1" width="108" height="78" rx="3" fill="none"/>
+    <g id="Checkbox" transform="translate(10 10)">
+      <rect width="14" height="14" rx="2" fill="none" stroke="var(--anatomy-gray-700)" stroke-width="1.5"/>
+      <path d="M3.5,7 L6,9.5 L10.5,4.5" fill="none" stroke="var(--anatomy-gray-700)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <rect id="Icon" x="38" y="22" width="34" height="24" rx="3" fill="var(--anatomy-gray-500)" stroke="none"/>
+    <rect id="Text" x="30" y="54" width="50" height="6" rx="2" fill="var(--anatomy-gray-600)" stroke="none"/>
+  </g>
+  <g id="Box_2" transform="translate(130 0)" fill="var(--anatomy-gray-400)" stroke="var(--anatomy-gray-400)" stroke-width="2">
+    <rect width="110" height="80" rx="4" stroke="none" fill="var(--anatomy-gray-200)"/>
+    <rect x="1" y="1" width="108" height="78" rx="3" fill="none"/>
+    <g id="Checkbox" transform="translate(10 10)">
+      <rect width="14" height="14" rx="2" fill="none" stroke="var(--anatomy-gray-400)" stroke-width="1.5"/>
+    </g>
+    <rect id="Icon" x="38" y="22" width="34" height="24" rx="3" fill="var(--anatomy-gray-400)" stroke="none"/>
+    <rect id="Text" x="30" y="54" width="50" height="6" rx="2" fill="var(--anatomy-gray-500)" stroke="none"/>
+  </g>
+  <g id="Box_3" transform="translate(0 100)" fill="var(--anatomy-gray-400)" stroke="var(--anatomy-gray-400)" stroke-width="2">
+    <rect width="110" height="80" rx="4" stroke="none" fill="var(--anatomy-gray-200)"/>
+    <rect x="1" y="1" width="108" height="78" rx="3" fill="none"/>
+    <g id="Checkbox" transform="translate(10 10)">
+      <rect width="14" height="14" rx="2" fill="none" stroke="var(--anatomy-gray-400)" stroke-width="1.5"/>
+    </g>
+    <rect id="Icon" x="38" y="22" width="34" height="24" rx="3" fill="var(--anatomy-gray-400)" stroke="none"/>
+    <rect id="Text" x="30" y="54" width="50" height="6" rx="2" fill="var(--anatomy-gray-500)" stroke="none"/>
+  </g>
+  <g id="Box_4" transform="translate(130 100)" fill="var(--anatomy-gray-400)" stroke="var(--anatomy-gray-400)" stroke-width="2">
+    <rect width="110" height="80" rx="4" stroke="none" fill="var(--anatomy-gray-200)"/>
+    <rect x="1" y="1" width="108" height="78" rx="3" fill="none"/>
+    <g id="Checkbox" transform="translate(10 10)">
+      <rect width="14" height="14" rx="2" fill="none" stroke="var(--anatomy-gray-400)" stroke-width="1.5"/>
+    </g>
+    <rect id="Icon" x="38" y="22" width="34" height="24" rx="3" fill="var(--anatomy-gray-400)" stroke="none"/>
+    <rect id="Text" x="30" y="54" width="50" height="6" rx="2" fill="var(--anatomy-gray-500)" stroke="none"/>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Skeleton.svg b/packages/dev/docs/pages/assets/component-illustrations/Skeleton.svg
new file mode 100644
index 00000000000..3e6c0752a40
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Skeleton.svg
@@ -0,0 +1,11 @@
+<svg style="background:var(--anatomy-gray-100); padding: 50px 10px" height="80" viewBox="0 0 200 80">
+  <rect id="Placement_Area" data-name="Placement Area" width="200" height="80" fill="red" opacity="0"/>
+  <g id="Skeleton">
+    <rect id="Line_1" width="200" height="12" rx="2" fill="var(--anatomy-gray-300)"/>
+    <rect id="Line_2" y="20" width="180" height="12" rx="2" fill="var(--anatomy-gray-300)"/>
+    <rect id="Line_3" y="40" width="160" height="12" rx="2" fill="var(--anatomy-gray-300)"/>
+    <circle id="Circle" cx="12" cy="12" r="12" transform="translate(0 56)" fill="var(--anatomy-gray-300)"/>
+    <rect id="Short_Line" x="32" y="62" width="80" height="12" rx="2" fill="var(--anatomy-gray-300)"/>
+  </g>
+</svg>
+
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Toolbar.svg b/packages/dev/docs/pages/assets/component-illustrations/Toolbar.svg
new file mode 100644
index 00000000000..c1a0015cebf
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Toolbar.svg
@@ -0,0 +1,48 @@
+<svg style="background:var(--anatomy-gray-100); padding: 60px 10px" height="32" viewBox="0 0 222 32">
+  <rect id="Placement_Area" data-name="Placement Area" width="222" height="32" fill="red" opacity="0"/>
+  <g id="Toolbar" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1">
+    <rect width="222" height="32" rx="4" stroke="none"/>
+    <rect x="0.5" y="0.5" width="221" height="31" rx="3.5" fill="none"/>
+  </g>
+  
+  <!-- Text Alignment Group -->
+  <g id="Align_Left" transform="translate(4 4)">
+    <rect width="24" height="24" rx="4" fill="var(--anatomy-gray-700)"/>
+    <path d="M6,8 L18,8 M6,12 L14,12 M6,16 L18,16" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+  </g>
+  <g id="Align_Center" transform="translate(32 4)">
+    <rect width="24" height="24" rx="4" fill="var(--anatomy-gray-200)"/>
+    <path d="M6,8 L18,8 M8,12 L16,12 M6,16 L18,16" stroke="var(--anatomy-gray-700)" stroke-width="1.5" stroke-linecap="round"/>
+  </g>
+  <g id="Align_Right" transform="translate(60 4)">
+    <rect width="24" height="24" rx="4" fill="var(--anatomy-gray-200)"/>
+    <path d="M6,8 L18,8 M10,12 L18,12 M6,16 L18,16" stroke="var(--anatomy-gray-700)" stroke-width="1.5" stroke-linecap="round"/>
+  </g>
+  
+  <rect id="Separator_1" x="90" y="6" width="1" height="20" fill="var(--anatomy-gray-400)"/>
+  
+  <!-- Text Formatting Group -->
+  <g id="Bold" transform="translate(97 4)">
+    <rect width="24" height="24" rx="4" fill="var(--anatomy-gray-200)"/>
+    <text transform="translate(12 16)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)" font-weight="700" text-anchor="middle"><tspan x="0" y="0">B</tspan></text>
+  </g>
+  <g id="Italic" transform="translate(125 4)">
+    <rect width="24" height="24" rx="4" fill="var(--anatomy-gray-200)"/>
+    <text transform="translate(12 16)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)" font-weight="700" text-anchor="middle" font-style="italic"><tspan x="0" y="0">I</tspan></text>
+  </g>
+  <g id="Underline" transform="translate(153 4)">
+    <rect width="24" height="24" rx="4" fill="var(--anatomy-gray-200)"/>
+    <text transform="translate(12 15)" fill="var(--anatomy-gray-700)" font-size="14" font-family="var(--anatomy-font)" font-weight="700" text-anchor="middle"><tspan x="0" y="0">U</tspan></text>
+    <line x1="7" y1="18" x2="17" y2="18" stroke="var(--anatomy-gray-700)" stroke-width="1.5"/>
+  </g>
+  
+  <rect id="Separator_2" x="183" y="6" width="1" height="20" fill="var(--anatomy-gray-400)"/>
+  
+  <!-- More Options -->
+  <g id="More_Options" transform="translate(190 4)">
+    <rect width="24" height="24" rx="4" fill="var(--anatomy-gray-200)"/>
+    <circle cx="12" cy="8" r="1.5" fill="var(--anatomy-gray-700)"/>
+    <circle cx="12" cy="12" r="1.5" fill="var(--anatomy-gray-700)"/>
+    <circle cx="12" cy="16" r="1.5" fill="var(--anatomy-gray-700)"/>
+  </g>
+</svg>
diff --git a/packages/dev/docs/pages/assets/component-illustrations/Virtualizer.svg b/packages/dev/docs/pages/assets/component-illustrations/Virtualizer.svg
new file mode 100644
index 00000000000..6931cf40fe3
--- /dev/null
+++ b/packages/dev/docs/pages/assets/component-illustrations/Virtualizer.svg
@@ -0,0 +1,33 @@
+<svg style="background:var(--anatomy-gray-100); padding: 40px 10px" height="160" viewBox="0 0 200 160">
+  <rect id="Placement_Area" data-name="Placement Area" width="200" height="160" fill="red" opacity="0"/>
+  <g id="Container" fill="var(--anatomy-gray-50)" stroke="var(--anatomy-gray-400)" stroke-width="1">
+    <rect width="200" height="160" rx="4" stroke="none"/>
+    <rect x="0.5" y="0.5" width="199" height="159" rx="3.5" fill="none"/>
+  </g>
+  <g id="Visible_Items">
+    <g id="Item_1" transform="translate(8 8)">
+      <rect width="176" height="28" rx="2" fill="var(--anatomy-gray-200)"/>
+      <rect x="8" y="10" width="80" height="8" rx="2" fill="var(--anatomy-gray-600)"/>
+    </g>
+    <g id="Item_2" transform="translate(8 40)">
+      <rect width="176" height="28" rx="2" fill="var(--anatomy-gray-200)"/>
+      <rect x="8" y="10" width="100" height="8" rx="2" fill="var(--anatomy-gray-600)"/>
+    </g>
+    <g id="Item_3" transform="translate(8 72)">
+      <rect width="176" height="28" rx="2" fill="var(--anatomy-gray-200)"/>
+      <rect x="8" y="10" width="90" height="8" rx="2" fill="var(--anatomy-gray-600)"/>
+    </g>
+    <g id="Item_4_Partial" transform="translate(8 104)">
+      <rect width="176" height="28" rx="2" fill="var(--anatomy-gray-200)"/>
+      <rect x="8" y="10" width="110" height="8" rx="2" fill="var(--anatomy-gray-600)"/>
+    </g>
+    <g id="Item_5_Partial" transform="translate(8 136)" opacity="0.5">
+      <rect width="176" height="20" rx="2" fill="var(--anatomy-gray-200)"/>
+      <rect x="8" y="6" width="70" height="8" rx="2" fill="var(--anatomy-gray-600)"/>
+    </g>
+  </g>
+  <g id="Scrollbar">
+    <rect x="188" y="8" width="4" height="144" rx="2" fill="var(--anatomy-gray-200)"/>
+    <rect x="188" y="8" width="4" height="40" rx="2" fill="var(--anatomy-gray-600)"/>
+  </g>
+</svg>
diff --git a/packages/dev/s2-docs/src/ComponentCardView.tsx b/packages/dev/s2-docs/src/ComponentCardView.tsx
index 9a0397b3bee..cfc7d1d516d 100644
--- a/packages/dev/s2-docs/src/ComponentCardView.tsx
+++ b/packages/dev/s2-docs/src/ComponentCardView.tsx
@@ -2,14 +2,21 @@
 /* eslint-disable monorepo/no-internal-import */
 'use client';
 
+import ActionBarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ActionBar.svg';
 import ActionButtonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg';
 import ActionGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ActionGroup.svg';
+import AdobeDefaultSvg from '@react-spectrum/docs/pages/assets/component-illustrations/AdobeDefault.svg';
+import AutocompleteSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Autocomplete.svg';
+import AvatarGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/AvatarGroup.svg';
+import AvatarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Avatar.svg';
 import BadgeSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Badge.svg';
 import BreadcrumbsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Breadcrumbs.svg';
 import ButtonGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ButtonGroup.svg';
 import ButtonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Button.svg';
 import CalendarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Calendar.svg';
 import {Card, CardPreview, CardView, Collection, Content, Text} from '@react-spectrum/s2';
+import CardSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Card.svg';
+import CardViewSvg from '@react-spectrum/docs/pages/assets/component-illustrations/CardView.svg';
 import CheckboxGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/CheckboxGroup.svg';
 import CheckboxSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Checkbox.svg';
 import CollectionsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Collections.svg';
@@ -21,7 +28,6 @@ import ColorSwatchPickerSvg from '@react-spectrum/docs/pages/assets/component-il
 import ColorSwatchSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorSwatch.svg';
 import ColorWheelSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ColorWheel.svg';
 import ComboBoxSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ComboBox.svg';
-import ComingSoonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ComingSoon.svg';
 import ContextualHelpSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ContextualHelp.svg';
 import DateFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DateField.svg';
 import DatePickerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DatePicker.svg';
@@ -29,13 +35,21 @@ import DateRangePickerSvg from '@react-spectrum/docs/pages/assets/component-illu
 import DialogSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Dialog.svg';
 import DisclosureGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DisclosureGroup.svg';
 import DisclosureSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Disclosure.svg';
+import DividerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Divider.svg';
 import DragAndDropSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DragAndDrop.svg';
 import DropZoneSvg from '@react-spectrum/docs/pages/assets/component-illustrations/DropZone.svg';
 import FileTriggerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/FileTrigger.svg';
 import FocusScopeSvg from '@react-spectrum/docs/pages/assets/component-illustrations/FocusScope.svg';
 import FormSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Form.svg';
+import GroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Group.svg';
+import IconsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Icons.svg';
+import IllustratedMessageSvg from '@react-spectrum/docs/pages/assets/component-illustrations/IllustratedMessage.svg';
+import IllustrationsSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Illustrations.svg';
+import ImageSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Image.svg';
+import InlineAlertSvg from '@react-spectrum/docs/pages/assets/component-illustrations/InlineAlert.svg';
 import InputSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Input.svg';
 import InternationalizedDateSvg from '@react-spectrum/docs/pages/assets/component-illustrations/InternationalizedDate.svg';
+import InternationalizedDefaultSvg from '@react-spectrum/docs/pages/assets/component-illustrations/InternationalizedDefault.svg';
 import {Key} from 'react-aria-components';
 import LabeledValueSvg from '@react-spectrum/docs/pages/assets/component-illustrations/LabeledValue.svg';
 import LabelSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Label.svg';
@@ -45,6 +59,7 @@ import ListViewSvg from '@react-spectrum/docs/pages/assets/component-illustratio
 import mcpSvg from './icons/mcp.svg';
 import MenuSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Menu.svg';
 import MeterSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Meter.svg';
+import ModalSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Modal.svg';
 import NumberFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/NumberField.svg';
 import PickerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Picker.svg';
 import PopoverSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Popover.svg';
@@ -54,8 +69,12 @@ import RadioGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrat
 import RangeCalendarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/RangeCalendar.svg';
 import RangeSliderSvg from '@react-spectrum/docs/pages/assets/component-illustrations/RangeSlider.svg';
 import React from 'react';
+import ReactAriaDefaultSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ReactAriaDefault.svg';
 import SearchFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/SearchField.svg';
+import SegmentedControlSvg from '@react-spectrum/docs/pages/assets/component-illustrations/SegmentedControl.svg';
+import SelectBoxGroupSvg from '@react-spectrum/docs/pages/assets/component-illustrations/SelectBoxGroup.svg';
 import SelectionSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Selection.svg';
+import SkeletonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Skeleton.svg';
 import SliderSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Slider.svg';
 import StatusLightSvg from '@react-spectrum/docs/pages/assets/component-illustrations/StatusLight.svg';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
@@ -68,6 +87,7 @@ import TextFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrati
 import TimeFieldSvg from '@react-spectrum/docs/pages/assets/component-illustrations/TimeField.svg';
 import ToastSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Toast.svg';
 import ToggleButtonSvg from '@react-spectrum/docs/pages/assets/component-illustrations/ToggleButton.svg';
+import ToolbarSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Toolbar.svg';
 import TooltipSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Tooltip.svg';
 import TreeSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Tree.svg';
 import useFocusRingSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useFocusRing.svg';
@@ -78,6 +98,8 @@ import useKeyboardSvg from '@react-spectrum/docs/pages/assets/component-illustra
 import useLongPressSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useLongPress.svg';
 import useMoveSvg from '@react-spectrum/docs/pages/assets/component-illustrations/useMove.svg';
 import usePressSvg from '@react-spectrum/docs/pages/assets/component-illustrations/usePress.svg';
+import VirtualizerSvg from '@react-spectrum/docs/pages/assets/component-illustrations/Virtualizer.svg';
+
 export interface ComponentCardItem {
   id: string,
   name: string,
@@ -86,15 +108,21 @@ export interface ComponentCardItem {
 
 const componentIllustrations: Record<string, React.ComponentType | undefined> = {
   'Accordion': DisclosureGroupSvg,
+  'ActionBar': ActionBarSvg,
   'ActionButton': ActionButtonSvg,
   'ActionButtonGroup': ButtonGroupSvg, // TODO: get better illustration
   'ActionGroup': ActionGroupSvg,
   'ActionMenu': MenuSvg,
+  'Autocomplete': AutocompleteSvg,
+  'Avatar': AvatarSvg,
+  'AvatarGroup': AvatarGroupSvg,
   'Badge': BadgeSvg,
   'Breadcrumbs': BreadcrumbsSvg,
   'Button': ButtonSvg,
   'ButtonGroup': ButtonGroupSvg,
   'Calendar': CalendarSvg,
+  'Card': CardSvg,
+  'CardView': CardViewSvg,
   'Checkbox': CheckboxSvg,
   'CheckboxGroup': CheckboxGroupSvg,
   'Collections': CollectionsSvg,
@@ -113,12 +141,19 @@ const componentIllustrations: Record<string, React.ComponentType | undefined> =
   'Dialog': DialogSvg,
   'Disclosure': DisclosureSvg,
   'DisclosureGroup': DisclosureGroupSvg,
+  'Divider': DividerSvg,
   'Drag and Drop': DragAndDropSvg,
   'DropZone': DropZoneSvg,
   'FileTrigger': FileTriggerSvg,
   'FocusScope': FocusScopeSvg,
   'Form': FormSvg,
   'GridList': ListViewSvg, // GridList -> ListView
+  'Group': GroupSvg,
+  'Icons': IconsSvg,
+  'IllustratedMessage': IllustratedMessageSvg,
+  'Illustrations': IllustrationsSvg,
+  'Image': ImageSvg,
+  'InlineAlert': InlineAlertSvg,
   'Input': InputSvg,
   'InternationalizedDate': InternationalizedDateSvg,
   'Label': LabelSvg,
@@ -129,6 +164,7 @@ const componentIllustrations: Record<string, React.ComponentType | undefined> =
   'ListView': ListViewSvg,
   'Menu': MenuSvg,
   'Meter': MeterSvg,
+  'Modal': ModalSvg,
   'NumberField': NumberFieldSvg,
   'Picker': PickerSvg,
   'Popover': PopoverSvg,
@@ -138,8 +174,11 @@ const componentIllustrations: Record<string, React.ComponentType | undefined> =
   'RangeCalendar': RangeCalendarSvg,
   'RangeSlider': RangeSliderSvg,
   'SearchField': SearchFieldSvg,
+  'SegmentedControl': SegmentedControlSvg,
   'Select': PickerSvg, // Select -> Picker
+  'SelectBoxGroup': SelectBoxGroupSvg,
   'Selection': SelectionSvg,
+  'Skeleton': SkeletonSvg,
   'Slider': SliderSvg,
   'StatusLight': StatusLightSvg,
   'Switch': SwitchSvg,
@@ -153,9 +192,11 @@ const componentIllustrations: Record<string, React.ComponentType | undefined> =
   'Toast': ToastSvg,
   'ToggleButton': ToggleButtonSvg,
   'ToggleButtonGroup': ActionGroupSvg, // ToggleButtonGroup -> ActionGroup
+  'Toolbar': ToolbarSvg,
   'Tooltip': TooltipSvg,
   'Tree': TreeSvg,
   'TreeView': TreeSvg,
+  'Virtualizer': VirtualizerSvg,
   'useFocus': useFocusSvg,
   'useFocusRing': useFocusRingSvg,
   'useFocusWithin': useFocusWithinSvg,
@@ -169,6 +210,9 @@ const componentIllustrations: Record<string, React.ComponentType | undefined> =
 
 // Overrides for specific illustrations so they fit within the cards.
 const propOverrides = {
+  Autocomplete: {
+    style: {height: 'calc(100% - 16px)'}
+  },
   DateField: {
     viewBox: '0 -56 276 276'
   },
@@ -222,15 +266,25 @@ interface ComponentCardGridProps {
   renderEmptyState?: () => React.ReactNode
 }
 
+function getDefaultIllustration(href: string) {
+  if (href.includes('/react-aria/')) {
+    return ReactAriaDefaultSvg;
+  } else if (href.includes('/internationalized/')) {
+    return InternationalizedDefaultSvg;
+  }
+  return AdobeDefaultSvg;
+}
+
 export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, styles, renderEmptyState}: ComponentCardGridProps) {
   return (
     <CardView aria-label={ariaLabel} onAction={onAction} styles={styles} renderEmptyState={renderEmptyState}>
       <Collection items={items}>
         {(item) => {
-          let IllustrationComponent = componentIllustrations[item.name] || ComingSoonSvg;
-          let overrides = propOverrides[item.name] || {};
+          let name = item.name.trim();
+          let IllustrationComponent = componentIllustrations[name] || getDefaultIllustration(item.href);
+          let overrides = propOverrides[name] || {};
           return (
-            <Card key={item.id} id={item.id} href={item.href} size={size} textValue={item.name}>
+            <Card key={item.id} id={item.id} href={item.href} size={size} textValue={name}>
               <CardPreview>
                 <div className={illustrationContainer}>
                   <IllustrationComponent
@@ -245,7 +299,7 @@ export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAct
                 </div>
               </CardPreview>
               <Content>
-                <Text slot="title">{item.name}</Text>
+                <Text slot="title">{name}</Text>
               </Content>
             </Card>
           );

From f48d2c872be62799ff8ce475ca8cd5f41629de23 Mon Sep 17 00:00:00 2001
From: XiaoYan Li <lxy.lixiaoyan@gmail.com>
Date: Tue, 21 Oct 2025 01:29:24 +0800
Subject: [PATCH 6/6] feat(RAC): SearchField: add readonly/required render
 props (#9025)

* feat(RAC): SearchField: add readonly/required render props

* Update packages/react-aria-components/src/SearchField.tsx

---------

Co-authored-by: Reid Barber <reid@reidbarber.com>
Co-authored-by: Daniel Lu <dl1644@gmail.com>
---
 .../react-aria-components/src/SearchField.tsx    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx
index 7bfdc703008..4a86b4f4ace 100644
--- a/packages/react-aria-components/src/SearchField.tsx
+++ b/packages/react-aria-components/src/SearchField.tsx
@@ -54,6 +54,16 @@ export interface SearchFieldRenderProps {
    * @selector [data-invalid]
    */
   isInvalid: boolean,
+  /**
+   * Whether the search field is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the search field is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
   /**
    * State of the search field.
    */
@@ -99,6 +109,8 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
       isEmpty: state.value === '',
       isDisabled: props.isDisabled || false,
       isInvalid: validation.isInvalid || false,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false,
       state
     },
     defaultClassName: 'react-aria-SearchField'
@@ -115,7 +127,9 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
       slot={props.slot || undefined}
       data-empty={state.value === '' || undefined}
       data-disabled={props.isDisabled || undefined}
-      data-invalid={validation.isInvalid || undefined}>
+      data-invalid={validation.isInvalid || undefined}
+      data-readonly={props.isReadOnly || undefined}
+      data-required={props.isRequired || undefined}>
       <Provider
         values={[
           [LabelContext, {...labelProps, ref: labelRef}],