diff --git a/1st-gen/packages/overlay/ACCESSIBILITY.md b/1st-gen/packages/overlay/ACCESSIBILITY.md
new file mode 100644
index 00000000000..0f4b1222473
--- /dev/null
+++ b/1st-gen/packages/overlay/ACCESSIBILITY.md
@@ -0,0 +1,516 @@
+# Accessibility
+
+This guide covers accessibility best practices for implementing overlays in Spectrum Web Components.
+
+## Table of contents
+
+- [Focus management](#focus-management)
+- [ARIA patterns](#aria-patterns)
+- [Keyboard navigation](#keyboard-navigation)
+- [Screen reader support](#screen-reader-support)
+- [Color contrast and visual indicators](#color-contrast-and-visual-indicators)
+- [Common accessibility issues](#common-accessibility-issues)
+
+## Focus management
+
+Proper focus management is critical for keyboard users and screen reader users to interact with overlays effectively.
+
+### Focus behavior by overlay type
+
+Different overlay types have different focus management behaviors:
+
+**`modal` and `page` overlays:**
+
+- Always trap focus within the overlay
+- Focus moves to first focusable element (or overlay container if none)
+- Cannot tab outside the overlay
+- ESC key behavior: `modal` cannot close with ESC, `page` can close with ESC
+
+```html
+
+
+
+
Confirm Action
+
Are you sure you want to proceed?
+ Confirm
+ Cancel
+
+
+
+```
+
+**`auto` overlays:**
+
+- Accept focus into the overlay content
+- Do not trap focus (user can tab outside)
+- Close automatically when focus moves outside
+- ESC key closes the overlay
+
+```html
+
+
+
+ Option 1
+ Option 2
+
+
+
+```
+
+**`hint` overlays:**
+
+- No focus management (non-interactive)
+- Close on any user interaction
+- Best for tooltips that provide supplementary information
+
+```html
+
+ This is helpful information
+
+```
+
+**`manual` overlays:**
+
+- Accept focus into the overlay content
+- Do not trap focus
+- Only close on ESC key or programmatic close
+- Best for persistent information popovers
+
+### Controlling focus with receives-focus
+
+Use the `receives-focus` attribute to control whether the overlay receives focus when opened:
+
+```html
+
+
+
+ ...
+
+
+
+
+
+
+
Informational content
+
+
+
+
+
+ ...
+
+```
+
+### Returning focus to trigger
+
+When an overlay closes, focus should return to the trigger element:
+
+```javascript
+const overlay = document.querySelector('sp-overlay');
+
+// Focus automatically returns to trigger when overlay closes
+overlay.addEventListener('sp-closed', () => {
+ console.log('Focus returned to trigger element');
+});
+```
+
+This is handled automatically by the overlay system for most cases.
+
+## ARIA patterns
+
+### Required ARIA attributes
+
+**Trigger elements:**
+
+```html
+
+
+ Actions
+
+
+
+
+ Open Dialog
+
+```
+
+**Overlay content:**
+
+```html
+
+
+
+
+
Dialog Title
+
Dialog content...
+
+
+
+
+
+
+
+
+ Copy
+ Paste
+
+
+
+```
+
+### Descriptive relationships
+
+Use `aria-describedby` to associate tooltip content with trigger elements:
+
+```html
+Save
+
+
+ Save your changes (Ctrl+S)
+
+```
+
+This relationship is automatically managed by `HoverController` and `LongpressController`.
+
+### Live regions for dynamic content
+
+For overlays with dynamic content that should be announced:
+
+```html
+
+
+
+
Loading...
+
+
+
+```
+
+## Keyboard navigation
+
+### Standard keyboard interactions
+
+**All overlays:**
+
+- **ESC** - Close overlay (except `modal` type)
+- **TAB** - Move focus forward (within overlay for modal, or to next element for non-modal)
+- **Shift+TAB** - Move focus backward
+
+**Menu overlays:**
+
+- **Arrow Up/Down** - Navigate menu items
+- **Home** - First menu item
+- **End** - Last menu item
+- **Enter/Space** - Activate menu item
+
+**Dialog overlays:**
+
+- **TAB** - Cycle through interactive elements
+- **Shift+TAB** - Cycle backward
+- Focus trapped within dialog for modal type
+
+**Longpress overlays:**
+
+- **Space** - Trigger longpress overlay
+- **Alt+Down Arrow** - Trigger longpress overlay
+
+### Implementing custom keyboard handlers
+
+For custom keyboard interactions:
+
+```javascript
+overlay.addEventListener('keydown', (event) => {
+ // Custom keyboard handling
+ if (event.key === 'Enter' && event.ctrlKey) {
+ event.preventDefault();
+ // Perform custom action
+ overlay.open = false;
+ }
+});
+```
+
+### Ensuring keyboard-only users can access hover content
+
+Hover tooltips should also be accessible via keyboard focus:
+
+```html
+
+ Help
+
+
+
+ Helpful information accessible to keyboard users
+
+
+```
+
+## Screen reader support
+
+### Announcing overlay state changes
+
+The overlay system dispatches events that can be used to announce state changes:
+
+```javascript
+overlay.addEventListener('sp-opened', () => {
+ // Optionally announce that overlay opened
+ // Most screen readers will announce this automatically via role/aria-modal
+});
+
+overlay.addEventListener('sp-closed', () => {
+ // Optionally announce that overlay closed
+});
+```
+
+### Proper heading structure
+
+Maintain logical heading hierarchy within overlay content:
+
+```html
+
+
+
+
Main Dialog Title
+
+
+
Subsection Title
+
Subsection content...
+
+
+
Another Subsection
+
More content...
+
+
+
+```
+
+### Descriptive labels for all interactive elements
+
+```html
+
+
+
+
+ Copy to clipboard
+ Delete permanently
+
+
+
+
+
+
+
+```
+
+### Error messages and validation
+
+Ensure error messages in overlays are announced:
+
+```html
+
+
+
+
Edit Profile
+
+ Username
+
+
+
+
+ Username must be at least 3 characters
+
+
+
+
+```
+
+## Color contrast and visual indicators
+
+### Focus indicators
+
+Ensure focus indicators meet WCAG AA standards (3:1 contrast ratio):
+
+```css
+/* Custom focus indicator for overlay content */
+sp-overlay sp-button:focus-visible {
+ outline: 2px solid var(--spectrum-blue-800);
+ outline-offset: 2px;
+}
+```
+
+### Visual distinction from page content
+
+Modal overlays should have a backdrop that clearly distinguishes them from the page:
+
+```html
+
+
+
+ ...
+
+
+```
+
+### High contrast mode support
+
+Test overlays in high contrast mode to ensure visibility:
+
+```css
+@media (prefers-contrast: high) {
+ sp-overlay[type='modal'] {
+ border: 2px solid currentColor;
+ }
+}
+```
+
+## Common accessibility issues
+
+### Issue: Trigger element is not keyboard accessible
+
+**Problem:**
+
+```html
+
+
Menu
+
+ ...
+
+```
+
+**Solution:**
+
+```html
+
+Menu
+
+ ...
+
+```
+
+### Issue: Hover content contains interactive elements
+
+**Problem:**
+
+```html
+
+
+ Help
+
+ Read more
+
+
+```
+
+**Solution:**
+
+```html
+
+
+ Help
+ Click for more information
+
+
+
Help
+
Detailed help content...
+ Read full documentation
+
+
+
+```
+
+### Issue: Missing ARIA attributes
+
+**Problem:**
+
+```html
+
+Open
+```
+
+**Solution:**
+
+```html
+
+
+ Open
+
+```
+
+### Issue: Focus not returned to trigger
+
+This is usually handled automatically, but if you're managing overlay lifecycle manually:
+
+```javascript
+const overlay = await openOverlay(content, options);
+const triggerElement = document.querySelector('#trigger');
+
+overlay.addEventListener(
+ 'sp-closed',
+ () => {
+ // Return focus to trigger
+ triggerElement.focus();
+ overlay.remove();
+ },
+ { once: true }
+);
+```
+
+### Issue: Insufficient color contrast
+
+Test with browser DevTools or accessibility tools to ensure:
+
+- Text has at least 4.5:1 contrast ratio (WCAG AA)
+- Large text (18pt+) has at least 3:1 contrast ratio
+- Focus indicators have at least 3:1 contrast ratio
+
+## Testing accessibility
+
+### Automated testing
+
+Use tools like:
+
+- **axe DevTools** - Browser extension for accessibility testing
+- **WAVE** - Web accessibility evaluation tool
+- **Lighthouse** - Built into Chrome DevTools
+
+### Manual testing checklist
+
+- [ ] Can you reach all interactive elements with keyboard only?
+- [ ] Is focus visible at all times?
+- [ ] Does ESC key close the overlay?
+- [ ] Is focus returned to trigger when overlay closes?
+- [ ] Are all interactive elements properly labeled?
+- [ ] Can screen readers access and understand all content?
+- [ ] Is the overlay announced when it opens?
+- [ ] Does the overlay work in high contrast mode?
+- [ ] Is color not the only means of conveying information?
+
+### Screen reader testing
+
+Test with at least one screen reader:
+
+- **NVDA** (Windows, free)
+- **JAWS** (Windows, commercial)
+- **VoiceOver** (macOS/iOS, built-in)
+- **TalkBack** (Android, built-in)
+
+## Resources
+
+- [W3C ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
+- [WebAIM Keyboard Accessibility](https://webaim.org/articles/keyboard/)
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+
+## See also
+
+- [ARCHITECTURE.md](./ARCHITECTURE.md) - Overlay system architecture
+- [TROUBLESHOOTING.md](./TROUBLESHOOTING.md) - Common issues and solutions
+- [overlay-trigger.md](./overlay-trigger.md) - Multi-interaction overlays
diff --git a/1st-gen/packages/overlay/ARCHITECTURE.md b/1st-gen/packages/overlay/ARCHITECTURE.md
new file mode 100644
index 00000000000..6c3b764f400
--- /dev/null
+++ b/1st-gen/packages/overlay/ARCHITECTURE.md
@@ -0,0 +1,775 @@
+# Overlay system architecture
+
+This document provides a deep dive into the technical architecture of the overlay system for contributors and advanced users.
+
+## System overview
+
+The overlay system is built on several key architectural patterns:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Entry Points │
+├───────────────┬──────────────┬───────────────┬──────────────┤
+│ │ │ │ directive │
+└───────┬───────┴───────┬──────┴───────┬───────┴──────┬───────┘
+ │ │ │ │
+ └───────────────┴──────────────┴──────────────┘
+ │
+ ┌───────────────▼──────────────────────────┐
+ │ Overlay Class │
+ │ ┌─────────────────────────────────────┐ │
+ │ │ AbstractOverlay │ │
+ │ │ + OverlayPopover / OverlayNoPopover│ │
+ │ └─────────────────────────────────────┘ │
+ └──────────┬────────────────────────────────┘
+ │
+ ┌──────────▼────────────┬─────────────────────┐
+ │ │ │
+┌───────▼─────────┐ ┌────────▼────────┐ ┌───────▼────────┐
+│ Interaction │ │ Placement │ │ Overlay │
+│ Controllers │ │ Controller │ │ Stack │
+├─────────────────┤ ├─────────────────┤ ├────────────────┤
+│ - Click │ │ Uses Floating │ │ Global state │
+│ - Hover │ │ UI for position │ │ Focus trapping │
+│ - Longpress │ │ and constraints │ │ ESC handling │
+└─────────────────┘ └─────────────────┘ └────────────────┘
+```
+
+## Core components
+
+### AbstractOverlay
+
+The `AbstractOverlay` class provides the foundational interface and minimal implementation that all overlay implementations build upon.
+
+**Key responsibilities:**
+
+- Defines property signatures and getters/setters
+- Provides lifecycle hooks (`applyFocus`, `dispose`)
+- Establishes the contract for reactive controllers
+- Minimal implementation allows mixins to add functionality
+
+**Design rationale:** Using an abstract base class allows the mixin pattern to work effectively. The `OverlayPopover` and `OverlayNoPopover` mixins add browser-specific functionality while the `Overlay` class adds the complete implementation.
+
+### Overlay class
+
+The `Overlay` class extends `AbstractOverlay` with a mixin (either `OverlayPopover` or `OverlayNoPopover` based on browser support) and implements the complete overlay functionality.
+
+**Key properties:**
+
+- `open`: Boolean controlling visibility
+- `type`: Determines interaction model (`modal`, `page`, `hint`, `auto`, `manual`)
+- `placement`: Position relative to trigger
+- `trigger`: String reference to trigger element with interaction type
+- `triggerElement`: Direct element or `VirtualTrigger` reference
+- `delayed`: Enables warm-up/cool-down timing
+- `receivesFocus`: Controls focus behavior
+
+**Key methods:**
+
+- `bindEvents()`: Sets up interaction controllers
+- `manageDelay()`: Handles delayed opening logic
+- `handleBeforetoggle()`: Prepares overlay state before visibility changes
+- `handleTransitionEvents()`: Tracks CSS transitions for `sp-opened`/`sp-closed` events
+
+### Mixin pattern: OverlayPopover and OverlayNoPopover
+
+The overlay system uses mixins to handle browser-specific behaviors:
+
+```typescript
+// Browser detection
+const browserSupportsPopover = 'showPopover' in document.createElement('div');
+
+// Apply appropriate mixin
+let ComputedOverlayBase = OverlayPopover(AbstractOverlay);
+if (!browserSupportsPopover) {
+ ComputedOverlayBase = OverlayNoPopover(AbstractOverlay);
+}
+
+// Overlay extends the computed base
+export class Overlay extends ComputedOverlayBase {
+ // Implementation
+}
+```
+
+**OverlayPopover:** Uses modern `popover` API for top-layer rendering
+
+**OverlayNoPopover:** Uses `