From 77a15bb9028562da147ab733d3c682ba773d06d7 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 11 Nov 2025 11:38:12 -0800
Subject: [PATCH 1/9] strip markdown from blog post card descriptions

---
 packages/dev/s2-docs/src/MobileSearchMenu.tsx | 5 +++--
 packages/dev/s2-docs/src/SearchMenu.tsx       | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index 684f5a4ada6..d8287476c45 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -10,6 +10,7 @@ import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchRes
 import {OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps, TabProps as RACTabProps, Tabs as RACTabs, SelectionIndicator, TabRenderProps} from 'react-aria-components';
 import type {PageProps} from '@parcel/rsc';
 import React, {ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {stripMarkdown} from './SearchMenu';
 import {useId} from '@react-aria/utils';
 
 
@@ -326,7 +327,7 @@ function MobileNav({pages, currentPage}: PageProps) {
 
     return filteredPages
       .sort((a, b) => title(a).localeCompare(title(b)))
-      .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: page.exports?.description}));
+      .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: stripMarkdown(page.exports?.description)}));
   };
 
   let getAllContent = (libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
@@ -335,7 +336,7 @@ function MobileNav({pages, currentPage}: PageProps) {
     let filteredPages = filterPages(allPages, searchValue);
     return filteredPages
       .sort((a, b) => title(a).localeCompare(title(b)))
-      .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: page.exports?.description}));
+      .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url, description: stripMarkdown(page.exports?.description)}));
   };
 
   let getItemsForSelection = (section: string | undefined, libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index cd388e8ced7..bac5a524757 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -17,6 +17,10 @@ import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from './Tabs';
 import {TextFieldRef} from '@react-types/textfield';
 
+export function stripMarkdown(description: string | undefined) {
+  return (description || '').replace(/\[(.*?)\]\(.*?\)/g, '$1');
+}
+
 export const divider = style({
   marginY: 8,
   marginStart: -8,
@@ -96,7 +100,7 @@ export function SearchMenu(props: SearchMenuProps) {
         const title = page.tableOfContents?.[0]?.title || name;
         const section: string = (page.exports?.section as string) || 'Components';
         const tags: string[] = (page.exports?.tags || page.exports?.keywords as string[]) || [];
-        const description: string = page.exports?.description;
+        const description: string = stripMarkdown(page.exports?.description);
         const date: string | undefined = page.exports?.date;
         return {
           id: name,

From fa204519d9c97a318ff211ba05f846ff15b0941d Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 11 Nov 2025 11:53:20 -0800
Subject: [PATCH 2/9] fix release notes link

---
 packages/dev/s2-docs/pages/s2/index.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/s2/index.mdx b/packages/dev/s2-docs/pages/s2/index.mdx
index c6774e6e4ed..120c41c33de 100644
--- a/packages/dev/s2-docs/pages/s2/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/index.mdx
@@ -84,5 +84,5 @@ export const title = 'Home';
   {id: 'ToggleButtonGroup', name: 'ToggleButtonGroup', href: 'ToggleButtonGroup.html'},
   {id: 'Tooltip', name: 'Tooltip', href: 'Tooltip.html'},
   {id: 'TreeView', name: 'TreeView', href: 'TreeView.html'},
-  {id: 'Release Notes', name: 'Release Notes', href: 'release-notes.html'}
+  {id: 'Release Notes', name: 'Release Notes', href: 'releases/index.html'}
 ]}/>

From b2abef9b2f452c1d75addaefe99d9196a81d0fb8 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 12 Nov 2025 10:11:55 -0800
Subject: [PATCH 3/9] fix icon search overflow and focus visible style

---
 packages/dev/s2-docs/src/IconSearchView.tsx | 18 +++++++++---------
 packages/dev/s2-docs/src/ReleasesList.tsx   |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index da720249066..d88fab55d79 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -80,7 +80,7 @@ function IconListBox({items, copiedId, onAction, listBoxClassName}: IconListBoxP
         onAction={(item) => onAction(item.toString())}
         items={items}
         layout="grid"
-        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4})}
+        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4, overflow: 'auto'})}
         dependencies={[copiedId]}
         renderEmptyState={() => (
           <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
@@ -101,7 +101,7 @@ const itemStyle = style({
   backgroundColor: {
     default: 'gray-50',
     isHovered: 'gray-100',
-    isFocused: 'gray-100',
+    isFocusVisible: 'gray-100',
     isSelected: 'neutral'
   },
   '--iconPrimary': {
@@ -160,7 +160,7 @@ function IconItem({item, isCopied = false}: {item: typeof iconList[number], isCo
 export function SkeletonIconItem({item}: {item: {id: string}}) {
   const PlaceholderIcon = Close;
   const ref = useRef(null);
-  
+
   const itemStyle = style({
     ...focusRing(),
     size: 'full',
@@ -189,11 +189,11 @@ export function SkeletonIconItem({item}: {item: {id: string}}) {
   });
 
   return (
-    <ListBoxItem 
-      id={item.id} 
-      value={item} 
-      textValue="skeleton" 
-      className={itemStyle} 
+    <ListBoxItem
+      id={item.id}
+      value={item}
+      textValue="skeleton"
+      className={itemStyle}
       ref={ref}>
       <PlaceholderIcon styles={iconStyle({size: 'XL'})} />
       <div
@@ -218,7 +218,7 @@ export function IconSearchSkeleton() {
         <ListBox
           items={mockItems}
           layout="grid"
-          className={style({width: '100%', scrollPaddingY: 4})}>
+          className={style({width: '100%', scrollPaddingY: 4, overflow: 'auto'})}>
           {(item) => <SkeletonIconItem item={item} />}
         </ListBox>
       </Virtualizer>
diff --git a/packages/dev/s2-docs/src/ReleasesList.tsx b/packages/dev/s2-docs/src/ReleasesList.tsx
index 2874614d850..962cee08796 100644
--- a/packages/dev/s2-docs/src/ReleasesList.tsx
+++ b/packages/dev/s2-docs/src/ReleasesList.tsx
@@ -19,7 +19,7 @@ export function ReleasesList({pages}: {pages: Page[]}) {
           <p className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(release.exports?.description, {})}</p>
         </div>
       ))}
-      <p className={style({font: 'body', margin: 0})}>For all previous releases or React Spectrum v3, see the <Link href="https://react-spectrum.adobe.com/releases/index.html">Archived releases</Link> page.</p>
+      <p className={style({font: 'body', margin: 0})}>For all previous releases of React Spectrum v3, see the <Link href="https://react-spectrum.adobe.com/releases/index.html">Archived releases</Link> page.</p>
     </article>
   );
 }

From 8acc27b98e80cdfa3112f37881da813bfa618e36 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 12 Nov 2025 11:03:42 -0800
Subject: [PATCH 4/9] add color swatch

---
 .../react-aria/blog/ColorEditorExample.tsx    | 76 +++++++++++++++++++
 .../blog/accessible-color-descriptions.mdx    | 19 +----
 2 files changed, 78 insertions(+), 17 deletions(-)
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx

diff --git a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
new file mode 100644
index 00000000000..202a0dbef49
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+'use client';
+import {ColorPicker} from 'react-aria-components';
+import {ColorArea, ColorSlider, ColorField, ColorSwatch, Picker, PickerItem} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {getColorChannels} from '@react-stately/color';
+import {useState} from 'react';
+import type {ColorSpace} from 'react-aria-components';
+
+interface ColorEditorProps {
+  hideAlphaChannel?: boolean;
+}
+
+function ColorEditor({hideAlphaChannel = false}: ColorEditorProps) {
+  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
+
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})}>
+      <div style={{display: 'flex', gap: 8}}>
+        <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
+        <ColorSlider colorSpace="hsb" channel="hue" orientation="vertical" />
+        {!hideAlphaChannel && (
+          <ColorSlider channel="alpha" orientation="vertical" />
+        )}
+      </div>
+      <div className={style({display: 'flex', gap: 4})}>
+        <Picker
+          aria-label={'color format'}
+          isQuiet
+          styles={style({width: 70})}
+          value={format}
+          onChange={(key) => setFormat(key as typeof format)}>
+          <PickerItem id="hex">Hex</PickerItem>
+          <PickerItem id="rgb">RGB</PickerItem>
+          <PickerItem id="hsl">HSL</PickerItem>
+          <PickerItem id="hsb">HSB</PickerItem>
+        </Picker>
+        {format === 'hex'
+          ? <ColorField aria-label="Hex" />
+          : getColorChannels(format).map(channel => (
+              <ColorField key={channel} colorSpace={format} channel={channel} />
+            ))}
+        {!hideAlphaChannel && (
+          <ColorField channel="alpha" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ColorEditorExample() {
+  return (
+    <ColorPicker defaultValue="#5100FF">
+      {({color}) => (
+        <>
+          <ColorEditor />
+          <div style={{display: 'flex', gap: 8, alignItems: 'center', marginTop: 16}}>
+            <ColorSwatch color={color} size="L" />
+            <span style={{fontSize: 16, fontWeight: 500}}>{color.getColorName(navigator.language || 'en-US')}</span>
+          </div>
+        </>
+      )}
+    </ColorPicker>
+  );
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
index 9f959fbb21b..9b79af60bb3 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
@@ -17,6 +17,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 import {Byline} from '../../../src/BlogList';
+import {ColorEditorExample} from './ColorEditorExample';
 
 export const tags = ['color picker', 'color', 'internationalization', 'localization', 'components', 'accessibility', 'react spectrum', 'react'];
 export const description = 'Recently, we released a suite of color picker components in React Aria and React Spectrum. Since colors are inherently visual, ensuring these components are accessible to users with visual impairments presented a significant challenge. In this post, we\'ll discuss how we developed an algorithm that generates clear color descriptions for screen readers in multiple languages, while minimizing bundle size.';
@@ -157,23 +158,7 @@ The order that the hue, chroma, and lightness descriptors are combined varies by
 
 Check out the color picker below to see the results of this algorithm:
 
-```tsx render
-'use client';
-import {ColorPicker} from 'react-aria-components';
-import {ColorSwatch} from '@react-spectrum/s2';
-
-// TODO: No ColorEditor in S2
-<ColorPicker label="Fill" defaultValue="#5100FF">
-  {({color}) =>
-    <div style={{display: 'flex', flexWrap: 'wrap', gap: 24}}>
-      <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
-        <ColorSwatch size="L" />
-        <span>{color.getColorName(navigator.language || 'en-US')}</span>
-      </div>
-    </div>
-  }
-</ColorPicker>
-```
+<ColorEditorExample />
 
 ## Final result
 

From b85d5a909cd332041760fe07f1569fc597a47763 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 12 Nov 2025 11:33:39 -0800
Subject: [PATCH 5/9] translations

---
 .../react-aria/blog/ColorEditorExample.tsx     | 18 +++++++++++-------
 .../pages/react-aria/blog/intl/ar-AE.json      |  7 +++++++
 .../pages/react-aria/blog/intl/bg-BG.json      |  7 +++++++
 .../pages/react-aria/blog/intl/cs-CZ.json      |  7 +++++++
 .../pages/react-aria/blog/intl/da-DK.json      |  7 +++++++
 .../pages/react-aria/blog/intl/de-DE.json      |  7 +++++++
 .../pages/react-aria/blog/intl/el-GR.json      |  7 +++++++
 .../pages/react-aria/blog/intl/en-US.json      |  7 +++++++
 .../pages/react-aria/blog/intl/es-ES.json      |  7 +++++++
 .../pages/react-aria/blog/intl/et-EE.json      |  7 +++++++
 .../pages/react-aria/blog/intl/fi-FI.json      |  7 +++++++
 .../pages/react-aria/blog/intl/fr-FR.json      |  7 +++++++
 .../pages/react-aria/blog/intl/he-IL.json      |  7 +++++++
 .../pages/react-aria/blog/intl/hr-HR.json      |  7 +++++++
 .../pages/react-aria/blog/intl/hu-HU.json      |  7 +++++++
 .../pages/react-aria/blog/intl/it-IT.json      |  7 +++++++
 .../pages/react-aria/blog/intl/ja-JP.json      |  7 +++++++
 .../pages/react-aria/blog/intl/ko-KR.json      |  7 +++++++
 .../pages/react-aria/blog/intl/lt-LT.json      |  7 +++++++
 .../pages/react-aria/blog/intl/lv-LV.json      |  7 +++++++
 .../pages/react-aria/blog/intl/nb-NO.json      |  7 +++++++
 .../pages/react-aria/blog/intl/nl-NL.json      |  7 +++++++
 .../pages/react-aria/blog/intl/pl-PL.json      |  7 +++++++
 .../pages/react-aria/blog/intl/pt-BR.json      |  7 +++++++
 .../pages/react-aria/blog/intl/pt-PT.json      |  7 +++++++
 .../pages/react-aria/blog/intl/ro-RO.json      |  7 +++++++
 .../pages/react-aria/blog/intl/ru-RU.json      |  7 +++++++
 .../pages/react-aria/blog/intl/sk-SK.json      |  7 +++++++
 .../pages/react-aria/blog/intl/sl-SI.json      |  7 +++++++
 .../pages/react-aria/blog/intl/sr-SP.json      |  7 +++++++
 .../pages/react-aria/blog/intl/sv-SE.json      |  7 +++++++
 .../pages/react-aria/blog/intl/tr-TR.json      |  7 +++++++
 .../pages/react-aria/blog/intl/uk-UA.json      |  7 +++++++
 .../pages/react-aria/blog/intl/zh-CN.json      |  7 +++++++
 .../pages/react-aria/blog/intl/zh-TW.json      |  7 +++++++
 35 files changed, 249 insertions(+), 7 deletions(-)
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/ar-AE.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/bg-BG.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/cs-CZ.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/da-DK.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/de-DE.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/el-GR.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/en-US.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/es-ES.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/et-EE.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/fi-FI.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/fr-FR.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/he-IL.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/hr-HR.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/hu-HU.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/it-IT.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/ja-JP.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/ko-KR.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/lt-LT.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/lv-LV.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/nb-NO.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/nl-NL.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/pl-PL.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/pt-BR.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/pt-PT.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/ro-RO.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/ru-RU.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/sk-SK.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/sl-SI.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/sr-SP.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/sv-SE.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/tr-TR.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/uk-UA.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/zh-CN.json
 create mode 100644 packages/dev/s2-docs/pages/react-aria/blog/intl/zh-TW.json

diff --git a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
index 202a0dbef49..37ffad88d1c 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
@@ -17,6 +17,9 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {getColorChannels} from '@react-stately/color';
 import {useState} from 'react';
 import type {ColorSpace} from 'react-aria-components';
+// @ts-ignore
+import intlMessages from './intl/*.json';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 interface ColorEditorProps {
   hideAlphaChannel?: boolean;
@@ -24,10 +27,11 @@ interface ColorEditorProps {
 
 function ColorEditor({hideAlphaChannel = false}: ColorEditorProps) {
   let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
+  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
 
   return (
     <div className={style({display: 'flex', flexDirection: 'column', gap: 4})}>
-      <div style={{display: 'flex', gap: 8}}>
+      <div style={{display: 'flex', gap: 12}}>
         <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
         <ColorSlider colorSpace="hsb" channel="hue" orientation="vertical" />
         {!hideAlphaChannel && (
@@ -36,18 +40,18 @@ function ColorEditor({hideAlphaChannel = false}: ColorEditorProps) {
       </div>
       <div className={style({display: 'flex', gap: 4})}>
         <Picker
-          aria-label={'color format'}
+          aria-label={formatter.format('colorFormat')}
           isQuiet
           styles={style({width: 70})}
           value={format}
           onChange={(key) => setFormat(key as typeof format)}>
-          <PickerItem id="hex">Hex</PickerItem>
-          <PickerItem id="rgb">RGB</PickerItem>
-          <PickerItem id="hsl">HSL</PickerItem>
-          <PickerItem id="hsb">HSB</PickerItem>
+          <PickerItem id="hex">{formatter.format('hex')}</PickerItem>
+          <PickerItem id="rgb">{formatter.format('rgb')}</PickerItem>
+          <PickerItem id="hsl">{formatter.format('hsl')}</PickerItem>
+          <PickerItem id="hsb">{formatter.format('hsb')}</PickerItem>
         </Picker>
         {format === 'hex'
-          ? <ColorField aria-label="Hex" />
+          ? <ColorField aria-label={formatter.format('hex')} />
           : getColorChannels(format).map(channel => (
               <ColorField key={channel} colorSpace={format} channel={channel} />
             ))}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/ar-AE.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/ar-AE.json
new file mode 100644
index 00000000000..b6678b071a4
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/ar-AE.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "تنسيق اللون",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/bg-BG.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/bg-BG.json
new file mode 100644
index 00000000000..27c41644ca7
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/bg-BG.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Цветен формат",
+  "hex": "шестнадесетичен",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/cs-CZ.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/cs-CZ.json
new file mode 100644
index 00000000000..c81961067a9
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/cs-CZ.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Barevný formát",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/da-DK.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/da-DK.json
new file mode 100644
index 00000000000..0b8d5f08f14
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/da-DK.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Farveformat",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/de-DE.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/de-DE.json
new file mode 100644
index 00000000000..99673b88f25
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/de-DE.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Farbformat",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/el-GR.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/el-GR.json
new file mode 100644
index 00000000000..39874b13ab9
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/el-GR.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Μορφή χρώματος",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/en-US.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/en-US.json
new file mode 100644
index 00000000000..875d85ac4a2
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/en-US.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Color format",
+  "hex": "Hex",
+  "rgb": "RGB",
+  "hsl": "HSL",
+  "hsb": "HSB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/es-ES.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/es-ES.json
new file mode 100644
index 00000000000..67ef8cad893
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/es-ES.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Formato en color",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/et-EE.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/et-EE.json
new file mode 100644
index 00000000000..2b9f7e64e5a
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/et-EE.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Värvivorming",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/fi-FI.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/fi-FI.json
new file mode 100644
index 00000000000..6fd911a471a
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/fi-FI.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Värimuoto",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/fr-FR.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/fr-FR.json
new file mode 100644
index 00000000000..247fc4bdadc
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/fr-FR.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Format de couleur",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "TSL",
+  "rgb": "RVB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/he-IL.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/he-IL.json
new file mode 100644
index 00000000000..53b2f3e5e80
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/he-IL.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "פורמט צבע",
+  "hex": "משושה",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/hr-HR.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/hr-HR.json
new file mode 100644
index 00000000000..9a1de55306c
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/hr-HR.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Format boja",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/hu-HU.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/hu-HU.json
new file mode 100644
index 00000000000..35ab5ff857a
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/hu-HU.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Színformátum",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/it-IT.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/it-IT.json
new file mode 100644
index 00000000000..81448d6d4f5
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/it-IT.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Formato colore",
+  "hex": "Esadecimale",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/ja-JP.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/ja-JP.json
new file mode 100644
index 00000000000..d57dcd6dfe8
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/ja-JP.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "カラーフォーマット",
+  "hex": "16 進数",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/ko-KR.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/ko-KR.json
new file mode 100644
index 00000000000..d7d27fbf9a8
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/ko-KR.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "색상 형식",
+  "hex": "HEX",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/lt-LT.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/lt-LT.json
new file mode 100644
index 00000000000..2c0ad0d7961
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/lt-LT.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Spalvų formatas",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/lv-LV.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/lv-LV.json
new file mode 100644
index 00000000000..b2cb861e4eb
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/lv-LV.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Krāsu formāts",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/nb-NO.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/nb-NO.json
new file mode 100644
index 00000000000..7e5fcf667b8
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/nb-NO.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Fargeformat",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/nl-NL.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/nl-NL.json
new file mode 100644
index 00000000000..7df6b21dd87
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/nl-NL.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Kleuropmaak",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/pl-PL.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/pl-PL.json
new file mode 100644
index 00000000000..aad3a8685b5
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/pl-PL.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Format koloru",
+  "hex": "Szesnastkowy",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/pt-BR.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/pt-BR.json
new file mode 100644
index 00000000000..b10da4eeb2a
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/pt-BR.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Formato da cor",
+  "hex": "Hexagonal",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/pt-PT.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/pt-PT.json
new file mode 100644
index 00000000000..623eb82e92d
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/pt-PT.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Formato da cor",
+  "hex": "Hexadecimal",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/ro-RO.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/ro-RO.json
new file mode 100644
index 00000000000..ea32089b2c5
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/ro-RO.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Format de culoare",
+  "hex": "Hexazecimal",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/ru-RU.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/ru-RU.json
new file mode 100644
index 00000000000..f37c7d0ccbe
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/ru-RU.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Формат цвета",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/sk-SK.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/sk-SK.json
new file mode 100644
index 00000000000..6246d22e5ba
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/sk-SK.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Farebný formát",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/sl-SI.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/sl-SI.json
new file mode 100644
index 00000000000..f1e0c059a10
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/sl-SI.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Format barv",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/sr-SP.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/sr-SP.json
new file mode 100644
index 00000000000..364a7d25900
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/sr-SP.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Format boje",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/sv-SE.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/sv-SE.json
new file mode 100644
index 00000000000..f7960088d35
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/sv-SE.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Färgformat",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/tr-TR.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/tr-TR.json
new file mode 100644
index 00000000000..35a27fcfe54
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/tr-TR.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Renk formatı",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/uk-UA.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/uk-UA.json
new file mode 100644
index 00000000000..71781c27ce3
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/uk-UA.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "Кольоровий формат",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/zh-CN.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/zh-CN.json
new file mode 100644
index 00000000000..103f5e97a1b
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/zh-CN.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "颜色格式",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/intl/zh-TW.json b/packages/dev/s2-docs/pages/react-aria/blog/intl/zh-TW.json
new file mode 100644
index 00000000000..61e088dba9c
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/intl/zh-TW.json
@@ -0,0 +1,7 @@
+{
+  "colorFormat": "顏色格式",
+  "hex": "Hex",
+  "hsb": "HSB",
+  "hsl": "HSL",
+  "rgb": "RGB"
+}

From f114e6b17cab13847608cae6212c388b7194e064 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 12 Nov 2025 12:58:42 -0800
Subject: [PATCH 6/9] fix styling/layout and add background

---
 .../react-aria/blog/ColorEditorExample.tsx    | 43 ++++++++++++-------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
index 37ffad88d1c..2794f68a93d 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
@@ -30,8 +30,8 @@ function ColorEditor({hideAlphaChannel = false}: ColorEditorProps) {
   let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
 
   return (
-    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})}>
-      <div style={{display: 'flex', gap: 12}}>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 4, minWidth: 380})}>
+      <div className={style({display: 'flex', gap: 12})}>
         <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
         <ColorSlider colorSpace="hsb" channel="hue" orientation="vertical" />
         {!hideAlphaChannel && (
@@ -51,12 +51,12 @@ function ColorEditor({hideAlphaChannel = false}: ColorEditorProps) {
           <PickerItem id="hsb">{formatter.format('hsb')}</PickerItem>
         </Picker>
         {format === 'hex'
-          ? <ColorField aria-label={formatter.format('hex')} />
+          ? <ColorField styles={style({width: 120})} aria-label={formatter.format('hex')} />
           : getColorChannels(format).map(channel => (
-              <ColorField key={channel} colorSpace={format} channel={channel} />
+              <ColorField styles={style({width: 70})} key={channel} colorSpace={format} channel={channel} />
             ))}
         {!hideAlphaChannel && (
-          <ColorField channel="alpha" />
+          <ColorField styles={style({width: 70})} channel="alpha" />
         )}
       </div>
     </div>
@@ -65,16 +65,29 @@ function ColorEditor({hideAlphaChannel = false}: ColorEditorProps) {
 
 export function ColorEditorExample() {
   return (
-    <ColorPicker defaultValue="#5100FF">
-      {({color}) => (
-        <>
-          <ColorEditor />
-          <div style={{display: 'flex', gap: 8, alignItems: 'center', marginTop: 16}}>
-            <ColorSwatch color={color} size="L" />
-            <span style={{fontSize: 16, fontWeight: 500}}>{color.getColorName(navigator.language || 'en-US')}</span>
+    <div
+      role="group"
+      aria-label="Example"
+      className={style({
+        backgroundColor: 'layer-1',
+        borderRadius: 'xl',
+        marginY: 32,
+        padding: {
+          default: 12,
+          lg: 24
+        }
+      })}>
+      <ColorPicker defaultValue="#5100FF">
+        {({color}) => (
+          <div className={style({display: 'flex', flexWrap: 'wrap', gap: 24})}>
+            <ColorEditor />
+            <div className={style({display: 'flex', flexDirection: 'column', gap: 8, marginTop: 16})}>
+              <ColorSwatch color={color} size="L" />
+              <span className={style({font: 'body'})}>{color.getColorName(navigator.language || 'en-US')}</span>
+            </div>
           </div>
-        </>
-      )}
-    </ColorPicker>
+        )}
+      </ColorPicker>
+    </div>
   );
 }

From cd46ad9a2532aca9fc42e817296188a84fc59d38 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 12 Nov 2025 13:05:33 -0800
Subject: [PATCH 7/9] add background to submenu animation

---
 .../react-aria/blog/SubmenuAnimation.tsx      | 43 ++++++++++++-------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx b/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx
index b4fb3b27dfa..2114063e38d 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx
@@ -114,21 +114,33 @@ export function SubmenuAnimation(): JSX.Element {
   }, []);
 
   return (
-    <div ref={ref} role="img" aria-label="Animation showing a submenu closing when the cursor leaves the trigger item to go to the submenu">
-      <svg
-        ref={mouseRef}
-        viewBox="0 0 12 19"
-        width={mouseWidth}
-        height={19}
-        aria-hidden="true"
-        style={{position: 'absolute', filter: 'drop-shadow(0 1px 1px #aaa)', transform: 'translate(-1000px, -1000px)'}}>
-        <g transform="matrix(1, 0, 0, 1, -150, -63.406998)">
-          <path d="M150 79.422V63.407l11.591 11.619h-6.781l-.411.124Z" fill="#fff" fillRule="evenodd" />
-          <path d="m159.084 80.1-3.6 1.535-4.684-11.093 3.686-1.553Z" fill="#fff" fillRule="evenodd" />
-          <path d="m157.751 79.416-1.844.774-3.1-7.374 1.841-.775Z" fillRule="evenodd" />
-          <path d="M151 65.814V77l2.969-2.866.431-.134h4.768Z" fillRule="evenodd" />
-        </g>
-      </svg>
+    <div
+      role="group"
+      aria-label="Example"
+      className={style({
+        backgroundColor: 'layer-1',
+        borderRadius: 'xl',
+        marginY: 32,
+        padding: {
+          default: 12,
+          lg: 24
+        }
+      })}>
+      <div ref={ref} role="img" aria-label="Animation showing a submenu closing when the cursor leaves the trigger item to go to the submenu">
+        <svg
+          ref={mouseRef}
+          viewBox="0 0 12 19"
+          width={mouseWidth}
+          height={19}
+          aria-hidden="true"
+          style={{position: 'absolute', filter: 'drop-shadow(0 1px 1px #aaa)', transform: 'translate(-1000px, -1000px)'}}>
+          <g transform="matrix(1, 0, 0, 1, -150, -63.406998)">
+            <path d="M150 79.422V63.407l11.591 11.619h-6.781l-.411.124Z" fill="#fff" fillRule="evenodd" />
+            <path d="m159.084 80.1-3.6 1.535-4.684-11.093 3.686-1.553Z" fill="#fff" fillRule="evenodd" />
+            <path d="m157.751 79.416-1.844.774-3.1-7.374 1.841-.775Z" fillRule="evenodd" />
+            <path d="M151 65.814V77l2.969-2.866.431-.134h4.768Z" fillRule="evenodd" />
+          </g>
+        </svg>
 
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -352,6 +364,7 @@ export function SubmenuAnimation(): JSX.Element {
             data-name="Option 2 arrow" />
         </g>
       </svg>
+      </div>
     </div>
   );
 }

From 611ecf2227afb9cfb33cef176fdf312374b847df Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 12 Nov 2025 13:13:06 -0800
Subject: [PATCH 8/9] make videos full width

---
 .../blog/accessible-color-descriptions.mdx    |  4 ++--
 .../blog/building-a-button-part-1.mdx         |  6 ++---
 .../blog/building-a-button-part-2.mdx         |  5 ++--
 .../blog/building-a-button-part-3.mdx         |  3 +--
 .../react-aria/blog/building-a-combobox.mdx   |  9 ++++----
 .../blog/date-and-time-pickers-for-all.mdx    |  7 +++---
 .../pages/react-aria/blog/drag-and-drop.mdx   |  7 +++---
 .../pages/react-aria/blog/rtl-date-time.mdx   | 23 +++++++++----------
 8 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
index 9b79af60bb3..27eceaf3178 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
@@ -38,7 +38,7 @@ Accessibility is at the core of all of our work on the React Spectrum team, and
 
 Our initial implementation followed the typical ARIA patterns such as [slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) to implement ColorArea, ColorSlider, and ColorWheel, and [listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) to implement ColorSwatchPicker. This provided good support for mouse, touch, and keyboard input, but the screen reader experience left something to be desired. Out of the box, screen readers would only announce raw channel values like “Red: 182, Green: 96, Blue: 38”. I don’t know about you, but I can’t imagine what color that is just by hearing those numbers!
 
-<video src={initialVideoUrl} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={initialVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
 
 ## Improving screen reader announcements
 
@@ -166,6 +166,6 @@ After developing this algorithm to generate color descriptions, we integrated it
 
 The video below shows interacting with a ColorArea with color descriptions. You can also try it yourself with a screen reader in the example above.
 
-<video src={finalVideoUrl} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={finalVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
 
 Check out our [ColorPicker](../ColorPicker.html) components in React Aria to build accessible, customizable, and styleable color pickers in your own applications.
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
index b4aa72203b9..955db4e3e37 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
@@ -63,7 +63,7 @@ Mobile browsers often introduce delays before emulated mouse events like onClick
 
 The CSS `:active` and `:hover` pseudo-classes are also affected by mouse event emulation. For example, when tapping down on a button and dragging your finger off, the active state persists even when your finger is not over it. This makes it appear like lifting your finger will activate the button when it will not. This is not how native buttons behave, so it can feel inconsistent with user expectations.
 
-<video src={draggingVideoUrl} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={draggingVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
 
 ## Pointer events
 
@@ -83,7 +83,7 @@ Touch events can also be canceled by scrolling. If you touch a button and then s
 
 Text selection gestures are another case where we need to determine the user's intent. On iOS, for example, a long press begins text selection. However, when pressing a button, you wouldn't usually expect text selection to start.
 
-<video src={textSelectionVideoUrl} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={textSelectionVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
 
 It is possible to add the `user-select: none` CSS property to the button to make it non-selectable, but even with that enabled, Safari still tries to select elements nearby. The only way to avoid this is to add `user-select: none` to the entire page. We wouldn't want to do this all the time though, because some elements should allow text selection to occur. React Aria automatically handles adding `user-select: none` to the page on touch start on a pressable element, and removes it after a short delay on press up. The delay is necessary because iOS may begin selecting even after touch up within some threshold.
 
@@ -107,7 +107,7 @@ Each of these events receive a unified `PressEvent` object rather than the under
 
 With the [usePress](../usePress.html) hook, our buttons handle interactions consistently. Dragging your pointer off the button correctly removes the active state, text selection is canceled, and issues with emulated mouse events are avoided.
 
-<video src={buttonVideoUrl} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={buttonVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
 
 Try a live example for yourself in our [Button](../../s2/Button.html) docs!
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
index 19f6be8a89c..d008df84af3 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
@@ -44,7 +44,7 @@ The first thing that may come to mind when you think about implementing a hover
 
 On touch devices, `:hover` is emulated for backward compatibility with older apps that weren't designed with touch in mind. Depending on the browser, `:hover` might never match, might match only while the user is touching an element, or may be sticky and act more like focus. On iOS for example, tapping once on an element shows the hover style, and tapping away from the element removes it.
 
-<video src={hoverVideoUrl} loop autoPlay muted style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} />
+<video src={hoverVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 This is not how you'd usually expect a button to behave, but browsers need to do this kind of emulation for apps that may only show or hide content on hover (e.g. navigation menus). If they did not, then perhaps this content would not be accessible at all to touch users. Unfortunately, there is no built-in way of opting out of this behavior, so we need to find another way to apply our hover styles.
 
@@ -76,7 +76,7 @@ We've wrapped all of this behavior into the [useHover](../useHover.html) hook in
 
 The [Button](../../s2/Button.html) component, and all other components in React Spectrum that support hover states, use the [useHover](../useHover.html) hook to handle interactions, and apply a CSS class when they are hovered. This ensures that hover states are only applied when interacting with a mouse, which avoids unexpected behavior on touch devices.
 
-<video src={hoveriPadVideoUrl} loop autoPlay muted style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} />
+<video src={hoveriPadVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 Try a live example for yourself in our [Button](../../s2/Button.html) docs!
 
@@ -85,4 +85,3 @@ Try a live example for yourself in our [Button](../../s2/Button.html) docs!
 As we've seen, cross-device interactions are difficult to handle across so many different types of devices. Even "simple" components like buttons are much more complicated than they seem at first. If you're building your own button component, I'd recommend checking out the [useButton](https://react-spectrum.adobe.com/react-aria/useButton.html) and [useHover](../useHover.html) hooks, which will help ensure that everything works as expected across a wide variety of devices.
 
 In the [next part](building-a-button-part-3.html) of this series, we'll cover how React Spectrum and React Aria handle focus behavior across devices and browsers.
-
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
index 1fde9f1988f..392a7fc22bc 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
@@ -44,7 +44,7 @@ There are many aspects of focus management, and perhaps we will cover more in fu
 
 An important feature for keyboard users is a **focus ring**. This is a visual affordance for the currently focused element, which allows a keyboard user to know which element they are currently on. It may only be visible when navigating with a keyboard, however, so as not to distract mouse and touchscreen users.
 
-<video src={focusRingVideoUrl} loop autoPlay muted style={{maxWidth: 'min(100%, 640px)', display: 'block', margin: '20px auto'}} />
+<video src={focusRingVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 As you can see in the above video, the focus ring appears around each button when it receives keyboard focus, but when the user interacts with a mouse it does not appear. To implement this, we attach global event listeners for pointer, keyboard, and focus events at the document level and keep track of the most recent input modality that the user was interacting with. If the user most recently interacted with a keyboard or assistive technology, we show the focus ring, otherwise we do not show it.
 
@@ -79,4 +79,3 @@ This focus normalization behavior is implemented by the [usePress](../usePress.h
 ## Conclusion
 
 In this series, you've seen how complicated even "simple" components like buttons can be when you consider all of the interactions they can support. React Aria aims to simplify this complexity and provide consistent behavior out of the box, while giving you complete rendering and styling control for your own components. This lets you focus on your unique design requirements, and build high quality components much faster. If you're working on a design system, check it out!
-
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
index 1f455bc54d7..4b66fb3ec14 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
@@ -39,7 +39,7 @@ After many months of research, development, and extensive testing across browser
 - **Asynchronous loading** — Autocomplete suggestions can be loaded asynchronously, and large lists can be loaded on demand through infinite scrolling.
 - **Customizability** — React Aria hooks allow full control over the rendering and styling of your ComboBox component, while letting us take care of the behavioral complexities for you. Use our default filter or you can provide custom filtering for complete control.
 
-<video src={comboboxVideoUrl} loop autoPlay muted style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}} />
+<video src={comboboxVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## Building a ComboBox
 
@@ -71,7 +71,7 @@ Luckily for us, iOS 13 added support for the [VisualViewport](https://developer.
 when the onscreen keyboard was opened or dismissed by listening to the VisualViewport's `resize` event. Leveraging these two allowed us to create a tray that properly adjusts to the presence of iOS onscreen keyboard. Check out the video below
 to see how the ComboBox tray worked before and after we switched to the VisualViewport API. If you'd like to track the visual viewport size in your own app, you can use the [useViewportSize](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/useViewportSize.ts) hook available in the `@react-aria/utils` package.
 
-<video src={comboboxVisualViewportUrl} loop autoPlay muted style={{maxWidth: 'min(80%, 350px)', display: 'block', margin: '20px auto'}} />
+<video src={comboboxVisualViewportUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 ### Page Scrolling
 
@@ -80,7 +80,7 @@ now that our ComboBox tray sizes itself to fit in the visual viewport, users cou
 or root element of the document. This preserves the user's ability to scroll through the options in the tray but blocks any attempt to scroll the page itself until the tray is closed. The video below
 illustrates the difference in scrolling behavior before and after our fix. If you are building your own overlays and would like to prevent this kind of document scrolling behavior, check out the [usePreventScroll](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts) hook in the `react-aria/overlays` package.
 
-<video src={comboboxScrollingUrl} loop autoPlay muted style={{maxWidth: 'min(80%, 350px)', display: 'block', margin: '20px auto'}} />
+<video src={comboboxScrollingUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 ## Accessibility
 
@@ -141,10 +141,9 @@ we only trigger the `LiveAnnouncer` on Apple devices to avoid announcement overl
 
 If you are interested in using this `LiveAnnouncer` yourself, check out [LiveAnnouncer](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx) in `@react-aria/live-announcer`. Otherwise, the [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook provides you with all of the custom messaging out of the box. See the video below for a sneak peek!
 
-<video src={comboboxAccessibilityUrl} loop autoPlay muted style={{maxWidth: 'min(80%, 700px)', display: 'block', margin: '20px auto'}} />
+<video src={comboboxAccessibilityUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 ## Conclusion
 
 When we first set off to build ComboBox, we had no idea of the complexity that awaited us. If you're building your own combo box component for your design system, I'd recommend checking out the [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook which handles all of this complexity and has been tested across a wide variety of devices, browsers, and assistive technology combinations.
 It really just goes to show how important cross browser and device testing is when building a component.
-
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
index 17cf182fadb..33ab37f3624 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
@@ -44,7 +44,7 @@ In building these components, we have focused on the following areas:
 - **Accessibility** – All of our date and time picker components have been tested across desktop and mobile devices, and with many different input methods including mouse, touch, and keyboard. We have worked hard to ensure screen reader announcements are clear and consistent.
 - **Customizability** – As with all of React Aria, our hooks give you full control over the rendering and styling of your components, while letting us handle the internationalization and accessibility challenges for you. We have examples using many different styling libraries, such as Tailwind CSS, Styled Components, CSS modules, and Chakra UI.
 
-<video src={datepickerVideo} loop autoPlay muted style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}} />
+<video src={datepickerVideo} loop autoPlay muted style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## User experience
 
@@ -66,7 +66,7 @@ We took a different approach, and followed the lead of native date picker UIs on
 
 This approach has benefits for internationalization and accessibility, as well as usability on mobile. For internationalization, individual segments avoid the problem of parsing dates in various formats entirely. The date format is automatically determined based on the locale, and the user only needs to fill in the values and not worry about messing up the separators or getting the order wrong. Each segment is also individually labeled for accessibility, so users always know which field they are on (e.g. "year", "month", "day", etc.). This is much easier to use for screen reader users than a plain text field where the expected format is unknown. Finally, on mobile, we can take advantage of the numeric software keyboard, which is nicer to use than a full QWERTY keyboard.
 
-<video src={datepickerScreenReader} loop autoPlay muted style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}} />
+<video src={datepickerScreenReader} loop autoPlay muted style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 The [useDateField](https://react-spectrum.adobe.com/react-aria/useDateField.html) and [useTimeField](https://react-spectrum.adobe.com/react-aria/useTimeField.html) hooks (or the [DateField](../../s2/DateField.html) and [TimeField](../../s2/TimeField.html) React Spectrum components) may be used standalone in cases where the user is likely to already know the date they need to enter, or the date is far in the past or future, e.g. a birthday or passport expiration date. In these cases, browsing through a calendar UI to find a date is tedious, and entering the date with a keyboard is much more efficient.
 
@@ -84,7 +84,7 @@ For range calendars, we also ensure that the selected date range is clearly comm
 
 Another important area we considered with our calendar components was mobile. With touch screen readers, users access each control on screen using swipe gestures to move a virtual cursor forward and backward. Because of this, calendars can be quite tedious to navigate because they contain so many elements, especially when multiple months are displayed at once. We made sure to provide context when a user enters a calendar of the whole range of visible dates, and included an extra visually hidden "next" button at the end of the dates so a user doesn't need to swipe all the way back to the start to navigate to the next month. The column headers are also skipped to improve ease of navigation, since the day names are already included in the label of each cell.
 
-<video src={calendarMobileScreenReader + '#t=0.1'} preload="metadata" controls aria-label="Demo of the Calendar component using VoiceOver on iOS" style={{maxHeight: '600px', maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}}>
+<video src={calendarMobileScreenReader + '#t=0.1'} preload="metadata" controls aria-label="Demo of the Calendar component using VoiceOver on iOS" style={{maxHeight: '600px', width: '100%', display: 'block', margin: '40px auto'}}>
   <track src={calendarMobileScreenReaderVTT} default kind="captions" label="English Captions" srcLang="en-us" type="text/vtt" />
 </video>
 
@@ -189,4 +189,3 @@ See [the docs](../../internationalized/date/ZonedDateTime.html#setting-fields) f
 Correctly manipulating dates and times is *really hard*. Making assumptions about calendar systems, time zones, locales, date and time arithmetic, etc. is a recipe for bugs when users around the world interact with your app. [@internationalized/date](../../internationalized/date/index.html) provides a library of objects and functions that help handle these differences and allow you to manipulate dates from all users consistently. It is a completely independent library, so even if you aren't using React Aria, React Spectrum, or even React, you can still take advantage of it for all your date and time manipulation needs!
 
 In addition, React Aria hooks such as [useDatePicker](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [useCalendar](https://react-spectrum.adobe.com/react-aria/useCalendar.html) can help you build international and accessible date and time picking components with completely customizable styles. We've been working on these components for a [long time](https://x.com/devongovett/status/1136402636754673664), and we really hope you like them!
-
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
index 80ddfdbc5f0..5e419d48479 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
@@ -42,7 +42,7 @@ We are excited to announce the release of drag and drop support in [React Aria](
 - **Interoperability** – Drag data can be provided in multiple data formats for compatibility with many targets and external applications via the native HTML drag and drop API. Drag and drop integrates with multiple selection to allow dragging many objects at once.
 - **Customizability** – Interactions such as hit testing, keyboard navigation, and drop operations can be customized, as well as UIs for drag previews and drop indicators.
 
-<video src={heroVideo} loop autoPlay muted style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}} />
+<video src={heroVideo} loop autoPlay muted style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## Introduction
 
@@ -64,13 +64,13 @@ For mouse and touch screen users, React Aria uses the native [HTML drag and drop
 
 In addition to native drag and drop, we have also implemented keyboard and screen reader accessible interactions from scratch. Keyboard users can focus a draggable element and press the `Enter` key to start dragging it. This enters a drag and drop mode across the whole page, which allows the user to press `Tab` to navigate only between drop targets that accept the dragged data, while skipping over all other elements. This reduces the number of elements on the page that must be traversed to find a drop target, and removes the guess work often found with other alternatives such as copy and paste. Once a target is chosen, pressing the `Enter` key again performs the drop.
 
-<video src={dndKeyboard} loop autoPlay muted style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}} />
+<video src={dndKeyboard} loop autoPlay muted style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 For screen reader users, the interactions are similar. We've taken great care to include prompts and announcements to help guide the user through the process, which adapt to the device, and are localized into over 30 languages. Drag sources and drop targets include ARIA descriptions indicating that the user can press `Enter` or double tap to drag or drop, depending on their device. We also use an ARIA live region to announce when a drag starts, with instructions on how to navigate and perform a drop, and to announce when a drop is completed successfully or canceled by the user.
 
 In addition, while in drag and drop mode, all elements other than valid drop targets are hidden from screen readers. Desktop screen reader users can use the `Tab` key to navigate as described earlier, but touch screen readers navigate by swiping through elements using a virtual cursor, and double tapping to drop. Hiding all non-drop target elements makes it much easier to find valid places to drop, without needing to swipe through potentially hundreds of unrelated elements.
 
-<video src={dndMobile} loop autoPlay muted style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}}>
+<video src={dndMobile} loop autoPlay muted style={{width: '100%', display: 'block', margin: '40px auto'}}>
   <track src={dndMobileVTT} default kind="captions" label="English Captions" srcLang="en-us" type="text/vtt" />
 </video>
 
@@ -116,4 +116,3 @@ You can use our React Aria hooks standalone, or integrate with existing collecti
 For React Spectrum, the [useDragAndDrop](../../s2/dnd.html) hook can be used to enable drag and drop in the components that support it. This returns an object containing implementations of the React Aria hooks used to implement drag and drop, keeping bundle size small when drag and drop is unused. Currently support is limited to [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html), but we will be adding drag and drop to other components soon.
 
 We hope these new hooks help make accessible drag and drop interactions easier to build, and we can't wait to see what you create!
-
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
index a5f89fabbee..eec59365a6b 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
@@ -37,11 +37,11 @@ Internationalization is a core feature of our Date and Time components. We suppo
 
 In a [previous blog post](date-and-time-pickers-for-all.html#date-fields), we discussed the reasoning behind the component structure of our date and time components. In short, we designed these components to render individually focusable segments for each date and time unit, eliminating the challenges of parsing various date formats — an issue commonly encountered with free-form text fields. Since the date and time format is automatically determined based on the user's locale, the user only needs to fill in the values without worrying about the appropriate separators or the order. This made for a smoother, more intuitive experience for the user, removing the guesswork associated with formatting and parsing dates in various locales.
 
-<video src={localeVideoURL} muted controls aria-label="Example of a React Spectrum DateField component in various locales" style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}} />
+<video src={localeVideoURL} muted controls aria-label="Example of a React Spectrum DateField component in various locales" style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## Unicode Bidirectional Algorithm
 
-To format the segments according to the user locale, we relied on the [Intl.DateTimeFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) to help localize our dates and flexbox to handle the layout. Flexbox conveniently handled the right-to-left layouts by mirroring the segment order provided by the API which typically works well for RTL languages. However, in some cases, it is more complex. RTL languages often have bidirectional text, meaning it contains a mix of right-to-left and left-to-right elements. For example, in Arabic and Hebrew, numbers are always written from left-to-right. In cases where numbers are combined with text, the general flow proceeds right to left, but the numbers are written from left to right. 
+To format the segments according to the user locale, we relied on the [Intl.DateTimeFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) to help localize our dates and flexbox to handle the layout. Flexbox conveniently handled the right-to-left layouts by mirroring the segment order provided by the API which typically works well for RTL languages. However, in some cases, it is more complex. RTL languages often have bidirectional text, meaning it contains a mix of right-to-left and left-to-right elements. For example, in Arabic and Hebrew, numbers are always written from left-to-right. In cases where numbers are combined with text, the general flow proceeds right to left, but the numbers are written from left to right.
 
 We found that dates behave bidirectionally in right-to-left languages and just mirroring the segment order was too simplistic for this complex behavior. As a result, some of our date fields were formatted incorrectly. For instance, in Hebrew (`he-IL`), the proper numeric date format should be `DD.MM.YYYY`, but our date component was displaying `YYYY.MM.DD`. This issue varied across different RTL languages for date fields, but for time fields, we observed a consistent problem across all RTL languages where time segments were flipped, rendering `MM:HH` instead of the correct `HH:MM` format.
 
@@ -55,11 +55,11 @@ Below is an example of how the dates were being formatted based on user-entered
 
 <RTLActualPlaceholder role="img" aria-label="SVG diagram showing RTL actual placeholder issue" />
 
-<video src={placeholderVideoURL} muted controls aria-label="Demo of the date segments shifting when backspacing" style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}} />
+<video src={placeholderVideoURL} muted controls aria-label="Demo of the date segments shifting when backspacing" style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 ## TimeFields
 
-We first addressed time fields since they were easier to fix. As mentioned earlier, the segments in time fields for RTL languages were flipped. We learned that regardless of locale, all time fields should follow the `HH:MM` format. Knowing this, we could apply a direction of left-to-right (LTR) on the numeric values across all segments in a time field. We could do this by wrapping the time field in a [`<bdo>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdo) tag and setting the `dir` attribute to `ltr` which would override the current text direction from `rtl` to `ltr`. 
+We first addressed time fields since they were easier to fix. As mentioned earlier, the segments in time fields for RTL languages were flipped. We learned that regardless of locale, all time fields should follow the `HH:MM` format. Knowing this, we could apply a direction of left-to-right (LTR) on the numeric values across all segments in a time field. We could do this by wrapping the time field in a [`<bdo>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdo) tag and setting the `dir` attribute to `ltr` which would override the current text direction from `rtl` to `ltr`.
 
 However, instead of changing the DOM structure and introducing potential side effects, we chose to use the [LRI (left-to-right isolate) Unicode character](https://www.w3.org/International/questions/qa-bidi-unicode-controls) to encapsulate the time segments and force an LTR direction. This sets the text direction to `ltr` and isolates the time field from the surrounding text. Adding this Unicode character is the equivalent of wrapping the time segments in a `<bdo>` tag but offers several advantages. Since the character is invisible, there are no visual changes, and by adding it as a sibling to the segments, we avoided major structural changes to the DOM. Additionally, by enforcing a LTR direction, we no longer had to worry about whether the time field consisted of placeholders or numeric values. Lastly, it ensured that when a date field included a time, that the time field appeared in the correct order with respect to the date field (e.g. `8:45 1/31/2025` instead of `1/31/2025 8:45`).
 
@@ -81,9 +81,9 @@ Below is a simplified code example of how we utilize Unicode characters to enfor
 
 ## DateFields
 
-Date fields, on the other hand, were much more complicated to solve in comparsion. Since we were relying on `display: flex` to format the date segments, the resulting format appeared to mirror the order in which the segments were stored, as returned by [DateFormatter](../../internationalized/date/DateFormatter.html#dateformatter). This suggested that we could apply a similar approach to what we used for time fields — forcing a left-to-right direction on the date segments. 
+Date fields, on the other hand, were much more complicated to solve in comparsion. Since we were relying on `display: flex` to format the date segments, the resulting format appeared to mirror the order in which the segments were stored, as returned by [DateFormatter](../../internationalized/date/DateFormatter.html#dateformatter). This suggested that we could apply a similar approach to what we used for time fields — forcing a left-to-right direction on the date segments.
 
-However, this assumption proved too broad. In some locales, such as Arabic (`ar-AE`), the date segments were already correctly formatted. In particular, we found that in Arabic, the separators between date segments contained [right-to-left marks](https://en.wikipedia.org/wiki/Implicit_directional_marks) which were returned by the `Intl.DateTimeFormat` API. This causes the separators to be positioned to the left of the preceding text. When we tried enforcing a left-to-right direction like we did in time field using the same solution, the date field was formatted as `2 2022/ 12/` instead of `2022/12/2` due to the presence of the right-to-left marks interfering with the LRI Unicode. In contrast, Hebrew did not have such markers. Therefore, we had to adopt a different approach that accounted for these variations. 
+However, this assumption proved too broad. In some locales, such as Arabic (`ar-AE`), the date segments were already correctly formatted. In particular, we found that in Arabic, the separators between date segments contained [right-to-left marks](https://en.wikipedia.org/wiki/Implicit_directional_marks) which were returned by the `Intl.DateTimeFormat` API. This causes the separators to be positioned to the left of the preceding text. When we tried enforcing a left-to-right direction like we did in time field using the same solution, the date field was formatted as `2 2022/ 12/` instead of `2022/12/2` due to the presence of the right-to-left marks interfering with the LRI Unicode. In contrast, Hebrew did not have such markers. Therefore, we had to adopt a different approach that accounted for these variations.
 
 ```tsx
 // An example of a date field in ar-AE
@@ -94,7 +94,7 @@ However, this assumption proved too broad. In some locales, such as Arabic (`ar-
   {/*- end highlight -*/}
   <span aria-label="month">11</span>
   {/*- begin highlight -*/}
-  <span>&rlm;/</span>  
+  <span>&rlm;/</span>
   {/*- end highlight -*/}
   <span aria-label="year">2020</span>
 </div>
@@ -127,18 +127,18 @@ After fixing the formatting, we also needed to update the keyboard navigation. P
   <span aria-label="day">3</span>
   <span>.</span>
   <span aria-label="month">11</span>
-  <span>.</span>  
+  <span>.</span>
   <span aria-label="year">2020</span>
   <span>,</span>
   <span aria-label="hour">8</span>
-  <span>:</span>  
+  <span>:</span>
   <span aria-label="minute">45</span>
 </div>
 ```
 
-Below is an example of a date field in Hebrew with the correct date format but incorrect keyboard navigation. Pressing the left arrow key should navigate you to the segment to the immediate left, while the right arrow key should navigate you to the segment to the immediate right. 
+Below is an example of a date field in Hebrew with the correct date format but incorrect keyboard navigation. Pressing the left arrow key should navigate you to the segment to the immediate left, while the right arrow key should navigate you to the segment to the immediate right.
 
-<video src={keyboardVideoURL} muted controls aria-label="Demo of keyboard navigation prior to fixes" style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '40px auto'}} />
+<video src={keyboardVideoURL} muted controls aria-label="Demo of keyboard navigation prior to fixes" style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
 As a result, we updated the keyboard navigation in right-to-left langauges to calculate the distance between the currently focused segment and other segments to identify the closest node based on whether the left or right arrow key was pressed, rather than reying on the DOM order.
 
@@ -147,4 +147,3 @@ As a result, we updated the keyboard navigation in right-to-left langauges to ca
 As you can see, formatting dates correctly is quite challenging, especially in right-to-left languages. Fortunately, tools like the Unicode Bidirectional Algorithm help with formatting so we don't have to handle everything manually. However, as we discovered with this bug, it doesn't always work as expected and unexpected factors can interfere with it.
 
 After extensive testing, we developed a solution that ensures proper formatting for users of [React Spectrum](../../s2/DateField.html), [React Aria Components](../DateField.html), and our [hooks](https://react-spectrum.adobe.com/react-aria/useDateField.html#usedatefield). If you haven't tried our date and time components yet, we encourage you to check them out! And if you're already using them, be sure to update to at least the March 2025 release to ensure correct formatting in right-to-left languages and to make the appropriate changes noted in the [release notes](https://react-spectrum.adobe.com/releases/2025-03-05.html#date-and-time-formatting-in-rtl-languages)!
-

From 460dd6ed6601f2e116830f5165859f31f30fc186 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 12 Nov 2025 13:59:29 -0800
Subject: [PATCH 9/9] make release and blog list full width since no ToC exists

---
 packages/dev/s2-docs/src/BlogList.tsx     | 5 ++---
 packages/dev/s2-docs/src/ReleasesList.tsx | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/dev/s2-docs/src/BlogList.tsx b/packages/dev/s2-docs/src/BlogList.tsx
index 4ac707eba60..8dfbe64df0a 100644
--- a/packages/dev/s2-docs/src/BlogList.tsx
+++ b/packages/dev/s2-docs/src/BlogList.tsx
@@ -10,7 +10,7 @@ export function BlogList({pages}: {pages: Page[]}) {
   });
 
   return (
-    <article className={style({marginY: 40, display: 'flex', flexDirection: 'column', gap: 40, maxWidth: 600})}>
+    <article className={style({marginY: 40, display: 'flex', flexDirection: 'column', gap: 40})}>
       {blogPosts.map(post => (
         <div key={post.name}>
           <header className={style({marginBottom: 12})}>
@@ -26,7 +26,7 @@ export function BlogList({pages}: {pages: Page[]}) {
 
 export function Byline({author, authorLink, date}: {author?: string, authorLink?: string, date: string}) {
   let formattedDate = new Date(date).toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'});
-  
+
   return (
     <div className={style({font: 'detail'})}>
       {author && (
@@ -39,4 +39,3 @@ export function Byline({author, authorLink, date}: {author?: string, authorLink?
     </div>
   );
 }
-
diff --git a/packages/dev/s2-docs/src/ReleasesList.tsx b/packages/dev/s2-docs/src/ReleasesList.tsx
index 962cee08796..ac43d7829a0 100644
--- a/packages/dev/s2-docs/src/ReleasesList.tsx
+++ b/packages/dev/s2-docs/src/ReleasesList.tsx
@@ -9,7 +9,7 @@ export function ReleasesList({pages}: {pages: Page[]}) {
     return new Date(b.exports?.date).getTime() - new Date(a.exports?.date).getTime();
   });
   return (
-    <article className={style({marginY: 40, display: 'flex', flexDirection: 'column', gap: 40, maxWidth: 600})}>
+    <article className={style({marginY: 40, display: 'flex', flexDirection: 'column', gap: 40})}>
       {releases.map(release => (
         <div key={release.name}>
           <header className={style({marginBottom: 12})}>