[pull] main from adobe:main

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

@@ -13,10 +13,10 @@
 import {AlertDialog} from 'tailwind-starter/AlertDialog';
 import {Arrow} from './components';
 import {Button} from 'tailwind-starter/Button';
-import {Cell, Column, Row, Table, TableHeader} from 'tailwind-starter/Table';
+import {Cell, Column, Row, Table, TableBody, 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, ModalOverlay, ModalOverlayProps, Modal as RACModal, Selection, SortDescriptor, TableBody, Text, ToggleButton, ToggleButtonProps, TooltipTrigger} from 'react-aria-components';
+import {ColumnProps, Dialog, DialogTrigger, DropZone, Form, Heading, isFileDropItem, Key, ModalOverlay, ModalOverlayProps, Modal as RACModal, Selection, SortDescriptor, 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';
@@ -177,7 +177,7 @@ export function ExampleApp(): React.ReactNode {
         <SearchField aria-label="Search" value={search} onChange={setSearch} className="col-span-3 sm:col-span-1" />
         <DialogTrigger>
           <TooltipTrigger>
-            <Button aria-label="Filters" variant="secondary" className="w-9 h-9 shrink-0 p-0 relative">
+            <Button aria-label="Filters" variant="secondary" className="w-9 h-9 shrink-0 p-0 px-2 relative">
               <FilterIcon aria-hidden className="block w-5 h-5" />
               {filters > 0 && <div className="absolute -top-2 -right-2 rounded-full h-4 aspect-square text-white text-xs bg-blue-600">{filters}</div>}
             </Button>
@@ -239,7 +239,7 @@ export function ExampleApp(): React.ReactNode {
                 <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 placement="bottom end" >
-                  <Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center"><MoreHorizontal className="w-5 h-5" /></Button>
+                  <Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center bg-transparent dark:bg-transparent border-transparent dark:border-transparent !p-1"><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>
@@ -266,7 +266,7 @@ export function ExampleApp(): React.ReactNode {
           <TableHeader columns={columns}>
             {column => <Column {...column} />}
           </TableHeader>
-          <TableBody items={items} dependencies={[columns]}>
+          <TableBody items={items} dependencies={[columns]} renderEmptyState={() => 'No results. Try changing the filters.'}>
             {item => (
               <Row columns={columns}>
                 {column => {

packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx

@@ -11,7 +11,7 @@ export const description = 'A GridList with Framer Motion swipe gestures and lay
 
 # iOS List View
 
-<PageDescription>A re-creation of the iOS List View built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription>
+<PageDescription>A re-creation of the iOS List View built with React Aria Components, [Motion](https://motion.dev/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription>
 
 ```tsx render type="tailwind" expanded
 "use client";
@@ -191,7 +191,7 @@ function ListItem({ id, children, textValue, onRemove }) {
     <MotionItem
       id={id}
       textValue={textValue}
-      className="outline-hidden group relative overflow-clip border-t border-0 border-solid last:border-b border-gray-200 dark:border-gray-800 pressed:bg-gray-200 dark:pressed:bg-gray-800 selected:bg-gray-200 dark:selected:bg-gray-800 focus-visible:outline focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
+      className="outline-hidden group relative overflow-clip border-t border-0 border-solid last:border-b border-gray-200 dark:border-gray-800 pressed:bg-gray-200 dark:pressed:bg-gray-800 selected:bg-gray-200 dark:selected:bg-gray-800 focus-visible:outline-solid focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
       layout
       transition={{ duration: 0.25 }}
       exit={{ opacity: 0 }}

packages/dev/s2-docs/pages/react-aria/examples/photos/Sidebar.css

@@ -78,7 +78,7 @@
     outline-offset: 2px;
   }
 
-  [slot=chevron] {
+  .chevron {
     all: unset;
     margin-right: 4px;
     transition: rotate 200ms;
@@ -87,11 +87,11 @@
     }
   }
 
-  &[data-expanded] [slot=chevron] {
+  &[data-expanded] .chevron {
     rotate: 90deg;
   }
 
-  &:not(:has([slot=chevron]))::before {
+  &:not(:has(.chevron))::before {
     content: '';
     width: 20px;
   }

packages/dev/s2-docs/pages/react-aria/examples/photos/Sidebar.tsx

@@ -30,7 +30,11 @@ export function Sidebar({selectedAlbum, onSelectionChange, isVisible, onDrop}: S
   let renderAlbum = (album: Album) => (
     <TreeItem textValue={album.name} className="sidebar-TreeItem">
       <TreeItemContent>
-        {album.children && <Button slot="chevron"><ChevronRight size={16} /></Button>}
+        {album.children &&
+          <Button slot="chevron" className="chevron">
+            <ChevronRight size={16} />
+          </Button>
+        }
         <span>{album.name}</span>
       </TreeItemContent>
       {album.children && <Collection items={album.children}>{renderAlbum}</Collection>}

packages/dev/s2-docs/pages/react-aria/examples/plants/PlantActionMenu.tsx

@@ -14,7 +14,7 @@ export function PlantActionMenu(props: PlantActionMenuProps) {
   let {item, onFavoriteChange, onEdit, onDelete} = props;
   return (
     <MenuTrigger>
-      <Button aria-label="Actions" variant="secondary">
+      <Button aria-label="Actions" variant="secondary" className="row-span-2 place-self-center bg-transparent dark:bg-transparent border-transparent dark:border-transparent !p-1">
         <MoreHorizontal aria-hidden className="w-5 h-5" />
       </Button>
       <Menu>

packages/dev/s2-docs/pages/react-aria/examples/plants/PlantList.tsx

@@ -23,7 +23,7 @@ export function PlantList(props: PlantListProps) {
       {item => (
         <GridListItem textValue={item.common_name}>
           <div className="grid grid-cols-[40px_1fr_auto] gap-x-2 w-full">
-            <img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-3 object-contain h-[40px]" />
+            <img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-2 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>
             <PlantActionMenu

packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx

@@ -11,7 +11,7 @@ export const description = 'An iOS-style gesture driven modal sheet built with F
 
 # Gesture Driven Sheet
 
-<PageDescription>An iOS-style gesture driven sheet built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/).</PageDescription>
+<PageDescription>An iOS-style gesture driven sheet built with React Aria Components, [Motion](https://motion.dev/), and [Tailwind CSS](https://tailwindcss.com/).</PageDescription>
 
 ```tsx render type="tailwind" expanded
 "use client";
@@ -38,7 +38,7 @@ const staticTransition = {
 const SHEET_MARGIN = 34;
 const SHEET_RADIUS = 12;
 
-const root = typeof document !== 'undefined' ? document.body.firstChild as HTMLElement : null;
+const root = typeof document !== 'undefined' ? document.querySelector('body > div:first-of-type') as HTMLElement : null;
 
 function Sheet() {
   let [isOpen, setOpen] = useState(false);
@@ -126,7 +126,7 @@ function Sheet() {
           background: black;
         }
 
-        body > :first-child {
+        body > div:first-of-type {
           background: var(--s2-container-bg);
           translate: 0;
           transform-origin: center 0;

packages/dev/s2-docs/pages/react-aria/examples/tabs/TabSelectionIndicator.tsx

@@ -25,7 +25,7 @@ export function TabSelectionIndicator() {
         `}
       </style>
       <div
-        className="absolute z-10 bg-white rounded-full mix-blend-difference contain-strict transition-[inset]"
+        className="absolute z-10 bg-white forced-color-adjust-none rounded-full mix-blend-difference contain-strict transition-[inset]"
         style={{
           animationName: animationId,
           animationTimingFunction: 'linear',

packages/dev/s2-docs/pages/react-aria/index.mdx

@@ -392,45 +392,97 @@ export const hideFromSearch = true;
 
         <Scrollable className="relative flex-1 -mx-6 -mb-6 mt-6 [&_pre]:m-0 [&_.source]:px-6 [&_.source]:text-[15px] [&_.source]:leading-snug lg:[&_.source]:text-sm isolate rounded-b-2xl">
 
-    <div className="highlight-tags [--delay:2.5s] h-full *:h-full cross-fade [--fade-from:1] [--fade-to:0]">
-
-    ```tsx
-    <Select>
-      <Label>Permissions</Label>
-      <Button>
-        <SelectValue />
-        <span>▼</span>
-      </Button>
-      <Popover>
-        <ListBox>
-          <ListBoxItem>Read Only</ListBoxItem>
-          <ListBoxItem>Edit</ListBoxItem>
-          <ListBoxItem>Admin</ListBoxItem>
-        </ListBox>
-      </Popover>
-    </Select>
-    ```
-
-    </div>
+          <div className="highlight-tags [--delay:2.5s] h-full *:h-full cross-fade [--fade-from:1] [--fade-to:0]">
+            <div className="hidden md:contents">
+              ```tsx
+              <Select>
+                <Label>Permissions</Label>
+                <Button>
+                  <SelectValue />
+                  <span>▼</span>
+                </Button>
+                <Popover>
+                  <ListBox>
+                    <ListBoxItem>Read Only</ListBoxItem>
+                    <ListBoxItem>Edit</ListBoxItem>
+                    <ListBoxItem>Admin</ListBoxItem>
+                  </ListBox>
+                </Popover>
+              </Select>
+              ```
+            </div>
+            <div className="contents md:hidden">
+              ```tsx
+              <Select>
+                <Label>
+                  Permissions
+                </Label>
+                <Button>
+                  <SelectValue />
+                  <span>▼</span>
+                </Button>
+                <Popover>
+                  <ListBox>
+                    <ListBoxItem>
+                      Read Only
+                    </ListBoxItem>
+                    <ListBoxItem>
+                      Edit
+                    </ListBoxItem>
+                    <ListBoxItem>
+                      Admin
+                    </ListBoxItem>
+                  </ListBox>
+                </Popover>
+              </Select>
+              ```
+            </div>
+          </div>
           <div className="absolute top-0 left-0 highlight-tags cross-fade">
-
-    ```tsx
-    <ComboBox>
-      <Label>Permissions</Label>
-      <Group>
-        <Input />
-        <Button>▼</Button>
-      </Group>
-      <Popover>
-        <ListBox>
-          <ListBoxItem>Read Only</ListBoxItem>
-          <ListBoxItem>Edit</ListBoxItem>
-          <ListBoxItem>Admin</ListBoxItem>
-        </ListBox>
-      </Popover>
-    </ComboBox>
-    ```
-
+            <div className="hidden md:contents">
+              ```tsx
+              <ComboBox>
+                <Label>Permissions</Label>
+                <Group>
+                  <Input />
+                  <Button>▼</Button>
+                </Group>
+                <Popover>
+                  <ListBox>
+                    <ListBoxItem>Read Only</ListBoxItem>
+                    <ListBoxItem>Edit</ListBoxItem>
+                    <ListBoxItem>Admin</ListBoxItem>
+                  </ListBox>
+                </Popover>
+              </ComboBox>
+              ```
+            </div>
+            <div className="contents md:hidden">
+              ```tsx
+              <ComboBox>
+                <Label>
+                  Permissions
+                </Label>
+                <Group>
+                  <Input />
+                  <Button>▼</Button>
+                </Group>
+                <Popover>
+                  <ListBox>
+                    <ListBoxItem>
+                      Read Only
+                    </ListBoxItem>
+                    <ListBoxItem>
+                      Edit
+                    </ListBoxItem>
+                    <ListBoxItem>
+                      Admin
+                    </ListBoxItem>
+                  </ListBox>
+                </Popover>
+              </ComboBox>
+              ```
+            </div>
           </div>
         </Scrollable>
       </Card>

packages/dev/s2-docs/pages/s2/TagGroup.mdx

@@ -60,7 +60,7 @@ function PhotoCategories() {
   return (
     <TagGroup
       label="Photo categories"
-      styles={style({width: 320})}
+      styles={style({maxWidth: 320})}
       /*- begin highlight -*/
       items={list.items}
       onRemove={(keys) => list.remove(...keys)}>

packages/dev/s2-docs/pages/s2/TreeView.mdx

@@ -299,11 +299,11 @@ function Example(props) {
   let [selected, setSelected] = useState<Selection>(new Set());
 
   return (
-    <div>
+    <div className={style({width: 'full'})}>
       <TreeView
         {...props}
         aria-label="Pokemon evolution"
-        styles={style({height: 250, width: 300})}
+        styles={style({height: 250, width: 'full', maxWidth: 300})}
         ///- begin highlight -///
         /* PROPS */
         selectedKeys={selected}