diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index cf626c62aee..281c759c421 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -760,10 +760,14 @@ export const style = createTheme({
       code: 'source-code-pro, "Source Code Pro", Monaco, monospace'
     },
     fontSize: new ExpandedProperty<keyof typeof fontSize>(['fontSize', 'lineHeight'], (value) => {
-      return {
-        '--fs': `pow(1.125, ${value})`,
-        fontSize: `round(${fontSizeCalc} / 16 * 1rem, 1px)`
-      };
+      if (typeof value === 'number') {
+        return {
+          '--fs': `pow(1.125, ${value})`,
+          fontSize: `round(${fontSizeCalc} / 16 * 1rem, 1px)`
+        } as CSSProperties;
+      }
+
+      return {fontSize: value};
     }, fontSize),
     fontWeight: new ExpandedProperty<keyof typeof fontWeight>(['fontWeight', 'fontVariationSettings', 'fontSynthesisWeight'], (value) => {
       return {
diff --git a/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx b/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx
index 140e21dba65..49dd45914c4 100644
--- a/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx
@@ -5,8 +5,9 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['box'];
+export const version = 'alpha';
 
-# SelectBoxGroup <VersionBadge version="alpha" />
+# SelectBoxGroup
 
 <PageDescription>{docs.exports.SelectBoxGroup.description}</PageDescription>
 
diff --git a/packages/dev/s2-docs/pages/s2/Toast.mdx b/packages/dev/s2-docs/pages/s2/Toast.mdx
index 2ed3f80e3de..c240cbc4750 100644
--- a/packages/dev/s2-docs/pages/s2/Toast.mdx
+++ b/packages/dev/s2-docs/pages/s2/Toast.mdx
@@ -7,8 +7,9 @@ import {InterfaceType} from '../../src/types';
 import {VersionBadge} from '../../src/VersionBadge';
 
 export const tags = ['snackbar', 'notification', 'alert'];
+export const version = 'alpha';
 
-# Toast <VersionBadge version="alpha" />
+# Toast
 
 <PageDescription>{docs.exports.UNSTABLE_ToastContainer.description}</PageDescription>
 
diff --git a/packages/dev/s2-docs/src/Code.tsx b/packages/dev/s2-docs/src/Code.tsx
index 5fb710bdbe0..4bbf0940519 100644
--- a/packages/dev/s2-docs/src/Code.tsx
+++ b/packages/dev/s2-docs/src/Code.tsx
@@ -28,8 +28,10 @@ const mark = style({
   borderWidth: 0,
   borderStartWidth: 2,
   borderStyle: 'solid',
-  marginX: 'calc(var(--code-padding-x) * -1)',
-  paddingX: 'calc(var(--code-padding-x) - self(borderStartWidth))',
+  marginStart: 'calc(var(--code-padding-start) * -1)',
+  marginEnd: 'calc(var(--code-padding-end) * -1)',
+  paddingStart: 'calc(var(--code-padding-start) - self(borderStartWidth))',
+  paddingEnd: '--code-padding-end',
   color: 'inherit'
 });
 
diff --git a/packages/dev/s2-docs/src/CodeBlock.tsx b/packages/dev/s2-docs/src/CodeBlock.tsx
index 8a1264ca091..d5b016beb0e 100644
--- a/packages/dev/s2-docs/src/CodeBlock.tsx
+++ b/packages/dev/s2-docs/src/CodeBlock.tsx
@@ -24,11 +24,15 @@ const example = style({
 });
 
 const standaloneCode = style({
-  '--code-padding-x': {
-    type: 'paddingTop',
+  '--code-padding-start': {
+    type: 'paddingStart',
     value: 32
   },
-  padding: '--code-padding-x',
+  '--code-padding-end': {
+    type: 'paddingEnd',
+    value: 32
+  },
+  padding: '--code-padding-start',
   marginY: 32,
   backgroundColor: 'layer-1',
   borderRadius: 'xl',
@@ -89,7 +93,7 @@ export function CodeBlock({render, children, files, expanded, hidden, hideExampl
   );
 
   return (
-    <div className={example}>
+    <div role="group" aria-label="Example" className={example}>
       <ExampleOutput
         component={render}
         align={props.align} />
@@ -128,9 +132,11 @@ function TruncatedCode({children, maxLines = 6, ...props}: TruncatedCodeProps) {
     </ExpandableCode>
   )
   : (
-    <Pre>
-      <Code {...props}>{children}</Code>
-    </Pre>
+    <div className={style({overflow: 'auto'})}>
+      <Pre>
+        <Code {...props}>{children}</Code>
+      </Pre>
+    </div>
   );
 }
 
diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
index e687a89c5a7..ad7146a8651 100644
--- a/packages/dev/s2-docs/src/CodePlatter.tsx
+++ b/packages/dev/s2-docs/src/CodePlatter.tsx
@@ -7,27 +7,30 @@ import {createStackBlitz} from './StackBlitz';
 import Download from '@react-spectrum/s2/icons/Download';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Key} from 'react-aria';
+import {Library} from './library';
 import LinkIcon from '@react-spectrum/s2/icons/Link';
 import OpenIn from '@react-spectrum/s2/icons/OpenIn';
 import Polygon4 from '@react-spectrum/s2/icons/Polygon4';
 import Prompt from '@react-spectrum/s2/icons/Prompt';
-import React, {ReactNode, useEffect, useRef, useState} from 'react';
+import React, {createContext, ReactNode, useContext, useEffect, useRef, useState} from 'react';
 import {zip} from './zip';
 
 const platterStyle = style({
   backgroundColor: 'layer-2',
   borderRadius: 'lg',
-  '--code-padding-x': {
-    type: 'paddingTop',
+  '--code-padding-start': {
+    type: 'paddingStart',
+    value: 16
+  },
+  '--code-padding-end': {
+    type: 'paddingEnd',
     value: 16
   },
   '--code-padding-y': {
     type: 'paddingTop',
     value: 16
   },
-  position: 'relative',
-  maxHeight: 600,
-  overflow: 'auto'
+  position: 'relative'
 });
 
 interface CodePlatterProps {
@@ -38,21 +41,38 @@ interface CodePlatterProps {
   registryUrl?: string
 }
 
+interface CodePlatterContextValue {
+  library: Library
+}
+
+const CodePlatterContext = createContext<CodePlatterContextValue>({library: 'react-spectrum'});
+export function CodePlatterProvider(props: CodePlatterContextValue & {children: any}) {
+  return <CodePlatterContext.Provider value={props}>{props.children}</CodePlatterContext.Provider>;
+}
+
 export function CodePlatter({children, shareUrl, files, type, registryUrl}: CodePlatterProps) {
   let codeRef = useRef<HTMLDivElement | null>(null);
   let [showShadcn, setShowShadcn] = useState(false);
   let getText = () => codeRef.current!.querySelector('pre')!.textContent!;
+  let {library} = useContext(CodePlatterContext);
+  if (!type) {
+    if (library === 'react-aria') {
+      type = 'vanilla';
+    } else if (library === 'react-spectrum') {
+      type = 's2';
+    }
+  }
 
   return (
     <div className={platterStyle}>
-      <div className={style({display: 'flex', justifyContent: 'end', float: 'inline-end', padding: 16, position: 'relative', zIndex: 1})}>
+      <div className={style({display: 'flex', justifyContent: 'end', padding: 4, position: 'absolute', top: 8, insetEnd: 8, backgroundColor: 'layer-2', boxShadow: 'elevated', borderRadius: 'default', zIndex: 1})}>
         <ActionButtonGroup
           orientation="vertical"
           isQuiet
           density="regular"
           size="S">
           <CopyButton ariaLabel="Copy code" tooltip="Copy code" getText={getText} />
-          {(shareUrl || files || type || registryUrl) && <MenuTrigger>
+          {(shareUrl || files || type || registryUrl) && <MenuTrigger align="end">
             <TooltipTrigger placement="end">
               <ActionButton aria-label="Open in…">
                 <OpenIn />
@@ -167,9 +187,23 @@ export function CodePlatter({children, shareUrl, files, type, registryUrl}: Code
   );
 }
 
+const pre = style({
+  borderRadius: 'lg',
+  font: {
+    default: 'code-xs',
+    lg: 'code-sm'
+  },
+  margin: 0,
+  paddingStart: '--code-padding-start',
+  paddingEnd: '--code-padding-end',
+  paddingY: '--code-padding-y',
+  width: 'fit',
+  minWidth: 'full'
+});
+
 export function Pre({children}) {
   return (
-    <pre className={style({borderRadius: 'lg', font: {default: 'code-xs', lg: 'code-sm'}, whiteSpace: 'pre-wrap', margin: 0, paddingX: '--code-padding-x', paddingY: '--code-padding-y'})} style={{overflowWrap: 'break-word'}}>
+    <pre className={pre}>
       {children}
     </pre>
   );
@@ -250,7 +284,7 @@ function ShadcnDialog({registryUrl}) {
               flexDirection: 'column',
               gap: 16
             })}>
-            <SegmentedControl selectedKey={packageManager} onSelectionChange={onSelectionChange}>
+            <SegmentedControl aria-label="Package manager" selectedKey={packageManager} onSelectionChange={onSelectionChange}>
               <SegmentedControlItem id="npm">npm</SegmentedControlItem>
               <SegmentedControlItem id="yarn">yarn</SegmentedControlItem>
               <SegmentedControlItem id="pnpm">pnpm</SegmentedControlItem>
diff --git a/packages/dev/s2-docs/src/ExampleOutput.tsx b/packages/dev/s2-docs/src/ExampleOutput.tsx
index c633299c96d..9cbbce510b3 100644
--- a/packages/dev/s2-docs/src/ExampleOutput.tsx
+++ b/packages/dev/s2-docs/src/ExampleOutput.tsx
@@ -12,7 +12,9 @@ interface ExampleOutputProps {
 
 export function ExampleOutput({component, props = {}, align = 'center', orientation = 'horizontal'}: ExampleOutputProps) {
   return (
-    <div 
+    <div
+      role="group"
+      aria-label="Rendered component"
       className={style({
         display: 'flex',
         flexDirection: {
diff --git a/packages/dev/s2-docs/src/ExampleSwitcher.tsx b/packages/dev/s2-docs/src/ExampleSwitcher.tsx
index a7faad60a40..2df3daebce0 100644
--- a/packages/dev/s2-docs/src/ExampleSwitcher.tsx
+++ b/packages/dev/s2-docs/src/ExampleSwitcher.tsx
@@ -1,8 +1,8 @@
 'use client';
 
+import {Content, ContextualHelp, Heading, Picker, PickerItem, SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 import {createContext, useEffect, useState} from 'react';
 import {Key} from 'react-aria-components';
-import {Picker, PickerItem, SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 const exampleStyle = style({
@@ -123,7 +123,7 @@ export function ExampleSwitcher({type = 'style', examples = DEFAULT_EXAMPLES, ch
   return (
     <div className={exampleStyle} data-example-switcher>
       <div className={switcher}>
-        <SegmentedControl selectedKey={selected} onSelectionChange={onSelectionChange}>
+        <SegmentedControl aria-label={type || 'example'} selectedKey={selected} onSelectionChange={onSelectionChange}>
           {examples.map(example => <SegmentedControlItem key={example} id={example}>{example}</SegmentedControlItem>)}
         </SegmentedControl>
       </div>
@@ -133,7 +133,13 @@ export function ExampleSwitcher({type = 'style', examples = DEFAULT_EXAMPLES, ch
           labelPosition="side"
           value={theme}
           onChange={onThemeChange}
-          styles={themePicker}>
+          styles={themePicker}
+          contextualHelp={
+            <ContextualHelp>
+              <Heading>Vanilla CSS theme</Heading>
+              <Content>This sets the <code className={style({font: 'code-sm'})}>--tint</code> CSS variable used by the Vanilla CSS examples.</Content>
+            </ContextualHelp>
+          }>
           <PickerItem id="indigo">Indigo</PickerItem>
           <PickerItem id="blue">Blue</PickerItem>
           <PickerItem id="cyan">Cyan</PickerItem>
diff --git a/packages/dev/s2-docs/src/ExpandableCode.tsx b/packages/dev/s2-docs/src/ExpandableCode.tsx
index 73791ef27ca..53ae4d37fc3 100644
--- a/packages/dev/s2-docs/src/ExpandableCode.tsx
+++ b/packages/dev/s2-docs/src/ExpandableCode.tsx
@@ -9,11 +9,11 @@ const example = style({
   font: 'code-lg',
   maxHeight: {
     default: '[6lh]',
-    isExpanded: 'unset'
+    isExpanded: 800
   },
   overflow: {
     default: 'clip',
-    isExpanded: 'visible'
+    isExpanded: 'auto'
   },
   position: 'relative',
   width: 'full',
@@ -24,6 +24,13 @@ const example = style({
       default: 'none',
       isExpanded: 'inline'
     }
+  },
+  '--code-padding-end': {
+    type: 'paddingEnd',
+    value: {
+      default: 16,
+      isExpanded: 64 // Extra space for the toolbar
+    }
   }
 });
 
@@ -50,8 +57,8 @@ export function ExpandableCode({children, hasHighlightedLine}: {children: ReactN
       mask = 'linear-gradient(transparent, white 25% 50%, transparent), linear-gradient(to right, white 0% 85%, transparent)';
       padding = '0px';
     } else {
-      // only mask the bottom
-      mask = 'linear-gradient(white 0% 50%, transparent)';
+      // only mask the bottom and right
+      mask = 'linear-gradient(white 0% 50%, transparent), linear-gradient(to right, white 0% 85%, transparent)';
     }
   }
 
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 072dca8fd11..5deae053fe0 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -12,8 +12,10 @@ import './anatomy.css';
 import {ClassAPI} from './ClassAPI';
 import {Code} from './Code';
 import {CodeBlock} from './CodeBlock';
+import {CodePlatterProvider} from './CodePlatter';
 import {ExampleSwitcher} from './ExampleSwitcher';
-import {getLibraryFromPage, getLibraryLabel} from './library';
+import {getLibraryFromPage, getLibraryFromUrl, getLibraryLabel} from './library';
+import {getTextWidth} from './textWidth';
 import {H2, H3, H4} from './Headings';
 import Header from './Header';
 import {Link} from './Link';
@@ -23,10 +25,21 @@ import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {TypeLink} from './types';
+import {VersionBadge} from './VersionBadge';
 import {VisualExample} from './VisualExample';
 
+const h1 = style({
+  font: 'heading-3xl',
+  fontSize: {
+    // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
+    default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
+    lg: 'heading-3xl'
+  },
+  marginY: 0
+});
+
 const components = {
-  h1: ({children, ...props}) => <h1 {...props} id="top" className={style({font: {default: 'heading-2xl', lg: 'heading-3xl'}, marginY: 0})}>{children}</h1>,
+  h1: ({children, ...props}) => <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1}>{children}</h1>,
   h2: H2,
   h3: H3,
   h4: H4,
@@ -226,10 +239,13 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                   lg: 'auto'
                 }
               })}>
-              <article
-                className={articleStyles({isWithToC: hasToC})}>
-                {React.cloneElement(children, {components})}
-              </article>
+              <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
+                <article
+                  className={articleStyles({isWithToC: hasToC})}>
+                  {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
+                  {React.cloneElement(children, {components})}
+                </article>
+              </CodePlatterProvider>
               {hasToC && <aside
                 className={style({
                   position: 'sticky',
diff --git a/packages/dev/s2-docs/src/VisualExample.tsx b/packages/dev/s2-docs/src/VisualExample.tsx
index bdf9c52f8ce..6724d9e309f 100644
--- a/packages/dev/s2-docs/src/VisualExample.tsx
+++ b/packages/dev/s2-docs/src/VisualExample.tsx
@@ -166,9 +166,9 @@ export function VisualExample({component, docs, links, importSource, props, init
   // Render the corresponding client component to make the controls interactive.
   return (
     <VisualExampleClient component={component} name={docs.name} importSource={importSource} controls={controls} initialProps={initialProps} propsObject={propsObject}>
-      <div className={exampleStyle({layout: files || wide ? 'wide' : 'narrow'})}>
+      <div role="group" aria-label="Example" className={exampleStyle({layout: files || wide ? 'wide' : 'narrow'})}>
         <Output align={align} acceptOrientation={acceptOrientation} />
-        <div className={controlsStyle}>
+        <div role="group" aria-label="Controls" className={controlsStyle}>
           {Object.keys(controls).map(control => <Control key={control} name={control} />)}
         </div>
         <div style={{gridArea: 'files', overflow: 'hidden'}}>
diff --git a/packages/dev/s2-docs/src/textWidth.ts b/packages/dev/s2-docs/src/textWidth.ts
new file mode 100644
index 00000000000..531aaa48e21
--- /dev/null
+++ b/packages/dev/s2-docs/src/textWidth.ts
@@ -0,0 +1,97 @@
+// Map of characters to width per em, generated from Adobe Clean Spectrum VF.
+// Multiply by the font size to get the pixel width.
+let letters: Record<string, number> = {
+  '0': 0.5467998461797813,
+  '1': 0.33863281002940315,
+  '2': 0.4949392889121938,
+  '3': 0.5016111737184715,
+  '4': 0.5308981693435971,
+  '5': 0.5023057133155973,
+  '6': 0.5481826272455199,
+  '7': 0.46165110064312254,
+  '8': 0.5277358292705409,
+  '9': 0.5432406635520582,
+  A: 0.6059440599655305,
+  B: 0.5832495796806406,
+  C: 0.5565531328751679,
+  D: 0.6598042449318364,
+  E: 0.5300641635661462,
+  F: 0.5081749911055526,
+  G: 0.6455998072113557,
+  H: 0.6693259321022943,
+  I: 0.2697145809246694,
+  J: 0.32189760597286665,
+  K: 0.5840943795209466,
+  L: 0.501062476701323,
+  M: 0.8308132582427056,
+  N: 0.6825471255294288,
+  O: 0.6920027568250859,
+  P: 0.5665339951757473,
+  Q: 0.6920027568250859,
+  R: 0.5871806978309012,
+  S: 0.4962879123859901,
+  T: 0.5402653527717012,
+  U: 0.6519305325732583,
+  V: 0.6040336065898666,
+  W: 0.8548425854690754,
+  X: 0.5435315369653245,
+  Y: 0.537968827408557,
+  Z: 0.5471876252326289,
+  a: 0.4964378641768902,
+  b: 0.5449183176910446,
+  c: 0.43080009202470115,
+  d: 0.5425954554028817,
+  e: 0.5017767421059094,
+  f: 0.2770022918782831,
+  g: 0.5140052743477447,
+  h: 0.5515482646395446,
+  i: 0.24808137309258887,
+  j: 0.24821074492252418,
+  k: 0.4986819080010872,
+  l: 0.26457503647320485,
+  m: 0.8461911554090422,
+  n: 0.5513497527462953,
+  o: 0.5444509990673368,
+  p: 0.5447198057977952,
+  q: 0.5452413834173114,
+  r: 0.34813664273642425,
+  s: 0.4001812142580505,
+  t: 0.3153228837303483,
+  u: 0.5453896125268208,
+  v: 0.48007624993851516,
+  w: 0.7385096424408182,
+  x: 0.456618258856363,
+  y: 0.47805235885526454,
+  z: 0.4210896632430806,
+  ' ': 0.22853845854089036,
+  '!': 0.29312679093582983,
+  '@': 0.8559711917318172,
+  '#': 0.523247739616419,
+  '$': 0.5030891266153872,
+  '%': 0.8450454594859704,
+  '^': 0.5117092967393077,
+  '&': 0.6946158587165351,
+  '*': 0.4013355993759323,
+  '(': 0.35453398280709264,
+  ')': 0.3521490453929629,
+  _: 0.5150663688638459,
+  '-': 0.32678529376509985,
+  '+': 0.5590725652733067,
+  '=': 0.5494543793394757,
+  '.': 0.20820494555165425,
+  ',': 0.2075588140991205,
+  '/': 0.3632512652560671
+};
+
+// Gets the width of a string of text. Multiply by font size to get pixel width.
+export function getTextWidth(s: string) {
+  let width = 0;
+  for (let c of s) {
+    let w = letters[c];
+    if (w != null) {
+      width += w;
+    }
+  }
+
+  return width;
+}