snice 4.28.0 → 4.30.0

package/docs/components/drawer.md

@@ -1,146 +1,104 @@
-<!-- AI: For a low-token version of this doc, use docs/ai/components/drawer.md instead -->
+<!-- AI: For the AI-optimized version of this doc, see docs/ai/components/drawer.md -->
 
 # Drawer Component
+`<snice-drawer>`
 
-The `<snice-drawer>` component provides a slide-out panel that appears from any side of the viewport. It's commonly used for navigation menus, filters, settings panels, or additional content that shouldn't occupy permanent screen space.
+Slide-out panel from any viewport side with focus trap and dismissal options. Supports inline mode for persistent sidebars and responsive breakpoint switching.
 
 ## Table of Contents
 - [Properties](#properties)
 - [Methods](#methods)
 - [Events](#events)
 - [Slots](#slots)
+- [CSS Custom Properties](#css-custom-properties)
 - [CSS Parts](#css-parts)
 - [Basic Usage](#basic-usage)
 - [Examples](#examples)
+- [Keyboard Navigation](#keyboard-navigation)
 - [Accessibility](#accessibility)
-- [Behavior](#behavior)
-- [Browser Support](#browser-support)
 
 ## Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `open` | `boolean` | `false` | Whether the drawer is visible |
-| `position` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'left'` | Side from which the drawer slides in |
-| `size` | `'small' \| 'medium' \| 'large' \| 'xl' \| 'xxl' \| 'xxxl' \| 'full'` | `'medium'` | Width/height of the drawer |
-| `noHeader` | `boolean` | `false` | Hide the header (title + close button) entirely |
-| `noFooter` | `boolean` | `false` | Hide the footer slot entirely |
-| `noBackdrop` | `boolean` | `false` | Hide the backdrop overlay |
-| `noBackdropDismiss` | `boolean` | `false` | Prevent closing when clicking backdrop |
-| `noEscapeDismiss` | `boolean` | `false` | Prevent closing with Escape key |
-| `noFocusTrap` | `boolean` | `false` | Disable focus trapping |
-| `persistent` | `boolean` | `false` | Hide close button and prevent all dismissal |
-| `pushContent` | `boolean` | `false` | Push main content instead of overlaying |
-| `contained` | `boolean` | `false` | Position relative to parent instead of viewport |
-| `inline` | `boolean` | `false` | Render in document flow as a persistent sidebar |
-| `breakpoint` | `number` | `0` | Viewport width (px) above which drawer switches to inline mode |
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `open` | `open` | `boolean` | `false` | Whether the drawer is visible |
+| `position` | `position` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'left'` | Side from which the drawer slides in |
+| `size` | `size` | `'small' \| 'medium' \| 'large' \| 'xl' \| 'xxl' \| 'xxxl' \| 'full'` | `'medium'` | Width/height of the drawer |
+| `inline` | `inline` | `boolean` | `false` | Render in document flow as a persistent sidebar |
+| `breakpoint` | `breakpoint` | `number` | `0` | Viewport width (px) above which drawer switches to inline mode |
+| `noHeader` | `no-header` | `boolean` | `false` | Hide the header (title + close button) entirely |
+| `noFooter` | `no-footer` | `boolean` | `false` | Hide the footer slot entirely |
+| `noBackdrop` | `no-backdrop` | `boolean` | `false` | Hide the backdrop overlay |
+| `noBackdropDismiss` | `no-backdrop-dismiss` | `boolean` | `false` | Prevent closing when clicking backdrop |
+| `noEscapeDismiss` | `no-escape-dismiss` | `boolean` | `false` | Prevent closing with Escape key |
+| `noFocusTrap` | `no-focus-trap` | `boolean` | `false` | Disable focus trapping |
+| `persistent` | `persistent` | `boolean` | `false` | Hide close button and prevent all dismissal |
+| `pushContent` | `push-content` | `boolean` | `false` | Push main content instead of overlaying |
+| `contained` | `contained` | `boolean` | `false` | Position relative to parent instead of viewport |
 
 ## Methods
 
-### `show(): void`
-Open the drawer.
-
-```typescript
-drawer.show();
-```
-
-### `hide(): void`
-Close the drawer.
-
-```typescript
-drawer.hide();
-```
-
-### `toggle(): void`
-Toggle the drawer open/closed state.
-
-```typescript
-drawer.toggle();
-```
+| Method | Arguments | Description |
+|--------|-----------|-------------|
+| `show()` | -- | Open the drawer |
+| `hide()` | -- | Close the drawer |
+| `toggle()` | -- | Toggle the drawer open/closed state |
 
 ## Events
 
-### `drawer-open`
-Fired when the drawer opens.
-
-**Event Detail:**
-```typescript
-{
-  drawer: SniceDrawerElement; // Reference to the drawer element
-}
-```
-
-**Usage:**
-```typescript
-drawer.addEventListener('drawer-open', (e) => {
-  console.log('Drawer opened:', e.detail.drawer);
-});
-```
-
-### `drawer-close`
-Fired when the drawer closes.
-
-**Event Detail:**
-```typescript
-{
-  drawer: SniceDrawerElement; // Reference to the drawer element
-}
-```
-
-**Usage:**
-```typescript
-drawer.addEventListener('drawer-close', (e) => {
-  console.log('Drawer closed:', e.detail.drawer);
-});
-```
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `drawer-open` | `{ drawer }` | Fired when the drawer opens |
+| `drawer-close` | `{ drawer }` | Fired when the drawer closes |
 
 ## Slots
 
-### `title` (named slot)
-Content for the drawer header/title area.
-
-```html
-<snice-drawer>
-  <h2 slot="title">Drawer Title</h2>
-</snice-drawer>
-```
-
-### Default slot
-Main content of the drawer body.
-
-```html
-<snice-drawer>
-  <p>This goes in the body</p>
-</snice-drawer>
-```
-
-### `footer` (named slot)
-Content for the drawer footer. Typically used for action buttons.
-
-```html
-<snice-drawer>
-  <div slot="footer">
-    <button>Action</button>
-  </div>
-</snice-drawer>
-```
+| Name | Description |
+|------|-------------|
+| (default) | Main content of the drawer body |
+| `title` | Content for the drawer header/title area |
+| `footer` | Content for the drawer footer, typically action buttons |
+
+## CSS Custom Properties
+
+| Property | Description | Default |
+|----------|-------------|---------|
+| `--drawer-width-small` | Small drawer width | `var(--snice-size-drawer-small, 15rem)` |
+| `--drawer-width-medium` | Medium drawer width | `var(--snice-size-drawer-medium, 20rem)` |
+| `--drawer-width-large` | Large drawer width | `var(--snice-size-drawer-large, 30rem)` |
+| `--drawer-width-xl` | XL drawer width | `var(--snice-size-drawer-xl, 40rem)` |
+| `--drawer-width-xxl` | XXL drawer width | `var(--snice-size-drawer-xxl, 50rem)` |
+| `--drawer-width-xxxl` | XXXL drawer width | `var(--snice-size-drawer-xxxl, 60rem)` |
+| `--drawer-height-small` | Small drawer height (top/bottom) | `12.5rem` |
+| `--drawer-height-medium` | Medium drawer height (top/bottom) | `25rem` |
+| `--drawer-height-large` | Large drawer height (top/bottom) | `37.5rem` |
+| `--drawer-height-xl` | XL drawer height (top/bottom) | `70vh` |
+| `--drawer-height-xxl` | XXL drawer height (top/bottom) | `80vh` |
+| `--drawer-height-xxxl` | XXXL drawer height (top/bottom) | `90vh` |
+| `--drawer-bg` | Drawer background color | `var(--snice-color-background, white)` |
+| `--drawer-shadow` | Drawer shadow | `var(--snice-shadow-lg)` |
+| `--drawer-backdrop` | Backdrop color | `rgba(0, 0, 0, 0.5)` |
+| `--drawer-transition` | Transition timing | `transform 250ms cubic-bezier(0.4, 0, 0.2, 1)` |
+| `--drawer-z-index` | Z-index | `var(--snice-z-index-modal, 1050)` |
 
 ## CSS Parts
 
-Style internal elements from outside the shadow DOM using `::part()`.
-
-| Part | Element | Description |
-|------|---------|-------------|
-| `backdrop` | `<div>` | Backdrop overlay |
-| `base` | `<div>` | The drawer panel container |
-| `header` | `<div>` | Header section |
-| `title` | `<h2>` | Title wrapper |
-| `close` | `<button>` | Close button |
-| `body` | `<div>` | Body content section |
-| `footer` | `<div>` | Footer section |
+| Part | Description |
+|------|-------------|
+| `backdrop` | Backdrop overlay |
+| `base` | The drawer panel container |
+| `header` | Header section |
+| `title` | Title wrapper (h2) |
+| `close` | Close button |
+| `body` | Body content section |
+| `footer` | Footer section |
 
 ## Basic Usage
 
+```typescript
+import 'snice/components/drawer/snice-drawer';
+```
+
 ```html
 <button id="openDrawer">Open Drawer</button>
 
@@ -160,55 +118,37 @@ Style internal elements from outside the shadow DOM using `::part()`.
 ```
 
 ```typescript
-import 'snice/components/drawer/snice-drawer';
-
 openDrawer.addEventListener('click', () => myDrawer.show());
 ```
 
-## Examples
-
-### Basic Drawer
-
+**CDN**
 ```html
-<button id="toggle">Toggle Drawer</button>
-
-<snice-drawer id="drawer">
-  <h2 slot="title">Navigation</h2>
-
-  <nav>
-    <a href="/">Home</a>
-    <a href="/products">Products</a>
-    <a href="/about">About</a>
-  </nav>
-</snice-drawer>
+<script src="snice-runtime.min.js"></script>
+<script src="snice-drawer.min.js"></script>
 ```
 
-```typescript
-toggle.addEventListener('click', () => drawer.toggle());
-```
+## Examples
 
 ### Position Variants
 
+Use the `position` attribute to control which side the drawer slides in from.
+
 ```html
-<!-- Left (default) -->
 <snice-drawer position="left">
   <h2 slot="title">Left Drawer</h2>
   <p>Slides in from the left</p>
 </snice-drawer>
 
-<!-- Right -->
 <snice-drawer position="right">
   <h2 slot="title">Right Drawer</h2>
   <p>Slides in from the right</p>
 </snice-drawer>
 
-<!-- Top -->
 <snice-drawer position="top">
   <h2 slot="title">Top Drawer</h2>
   <p>Slides in from the top</p>
 </snice-drawer>
 
-<!-- Bottom -->
 <snice-drawer position="bottom">
   <h2 slot="title">Bottom Drawer</h2>
   <p>Slides in from the bottom</p>
@@ -217,35 +157,20 @@ toggle.addEventListener('click', () => drawer.toggle());
 
 ### Size Variants
 
-```html
-<!-- Small -->
-<snice-drawer size="small">
-  <h2 slot="title">Small Drawer</h2>
-</snice-drawer>
+Use the `size` attribute to control the drawer's width (or height for top/bottom).
 
-<!-- Medium (default) -->
-<snice-drawer size="medium">
-  <h2 slot="title">Medium Drawer</h2>
-</snice-drawer>
-
-<!-- Large -->
-<snice-drawer size="large">
-  <h2 slot="title">Large Drawer</h2>
-</snice-drawer>
-
-<!-- Extra Large -->
-<snice-drawer size="xl">
-  <h2 slot="title">XL Drawer</h2>
-</snice-drawer>
-
-<!-- Full Width/Height -->
-<snice-drawer size="full">
-  <h2 slot="title">Full Drawer</h2>
-</snice-drawer>
+```html
+<snice-drawer size="small"><h2 slot="title">Small</h2></snice-drawer>
+<snice-drawer size="medium"><h2 slot="title">Medium</h2></snice-drawer>
+<snice-drawer size="large"><h2 slot="title">Large</h2></snice-drawer>
+<snice-drawer size="xl"><h2 slot="title">XL</h2></snice-drawer>
+<snice-drawer size="full"><h2 slot="title">Full</h2></snice-drawer>
 ```
 
 ### Without Backdrop
 
+Set `no-backdrop` to remove the background overlay.
+
 ```html
 <snice-drawer no-backdrop>
   <h2 slot="title">No Backdrop</h2>
@@ -255,6 +180,8 @@ toggle.addEventListener('click', () => drawer.toggle());
 
 ### Persistent Drawer
 
+Set `persistent` to hide the close button and prevent all user-initiated dismissal.
+
 ```html
 <snice-drawer persistent>
   <h2 slot="title">Persistent Drawer</h2>
@@ -264,7 +191,7 @@ toggle.addEventListener('click', () => drawer.toggle());
 
 ### Push Content
 
-Use `<snice-drawer-target>` to wrap content that should be pushed aside when a drawer opens. Link it to a drawer using the `for` attribute.
+Use `<snice-drawer-target>` to wrap content that should be pushed aside when a drawer opens.
 
 ```html
 <div style="position: relative; height: 400px; overflow: hidden;">
@@ -285,23 +212,18 @@ Use `<snice-drawer-target>` to wrap content that should be pushed aside when a d
 </div>
 ```
 
-The `<snice-drawer-target>` component:
-- Watches the linked drawer's `open` attribute via MutationObserver
-- Measures the drawer panel's actual width/height
-- Applies a smooth `translateX()` or `translateY()` transform
-- Automatically resets when the drawer closes
-- Handles `overflow:hidden` parent scroll reset
-
 #### Drawer Target Properties
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
 | `for` | `string` | `''` | ID of the linked `<snice-drawer>` element |
-| `push` | `string` | `''` | Current push amount (e.g. `'240px'`). Set automatically when linked to a drawer, or set manually for custom control. |
+| `push` | `string` | `''` | Current push amount (e.g. `'240px'`), set automatically |
+
+The target watches the drawer's `open` attribute via MutationObserver, measures the drawer panel's width/height, and applies a smooth CSS transform.
 
 ### Inline Mode
 
-The `inline` attribute renders the drawer directly in the document flow as a persistent sidebar. No overlay, backdrop, focus trap, or escape handler is used. The drawer is always visible and participates in the parent's layout.
+Set `inline` to render the drawer as a persistent sidebar in document flow.
 
 ```html
 <div style="display: flex; height: 100vh;">
@@ -316,73 +238,40 @@ The `inline` attribute renders the drawer directly in the document flow as a per
 
   <main style="flex: 1; padding: 1rem;">
     <h1>Main Content</h1>
-    <p>The sidebar sits alongside this content.</p>
   </main>
 </div>
 ```
 
-A border separator is automatically applied based on the `position`:
-- `left` → right border
-- `right` → left border
-- `top` → bottom border
-- `bottom` → top border
+In inline mode: no overlay, backdrop, focus trap, or escape handler. A border separator is applied based on position (left = right border, etc.).
 
 ### Responsive Breakpoint
 
-The `breakpoint` attribute enables responsive behavior: the drawer renders inline when the viewport is at or above the specified width (in pixels), and switches to a standard overlay drawer below it.
+Use `breakpoint` to switch between inline (above breakpoint) and overlay (below breakpoint) modes.
 
 ```html
-<!-- Inline sidebar on desktop (≥768px), overlay drawer on mobile (<768px) -->
 <snice-drawer breakpoint="768" position="left" size="small">
   <span slot="title">Navigation</span>
   <nav>
     <a href="/">Home</a>
     <a href="/products">Products</a>
-    <a href="/settings">Settings</a>
   </nav>
 </snice-drawer>
 ```
 
-The breakpoint uses `window.matchMedia` internally. When the viewport crosses the breakpoint:
-- **Above breakpoint**: The `inline` attribute is set automatically. Overlay behaviors (backdrop, focus trap, escape handler) are torn down.
-- **Below breakpoint**: The `inline` attribute is removed. The drawer reverts to standard overlay mode.
-
-You can combine `breakpoint` with `open` to control the overlay state on mobile:
-
-```html
-<snice-drawer id="nav" breakpoint="1024" position="left" size="small">
-  <span slot="title">Menu</span>
-  <nav>...</nav>
-</snice-drawer>
-
-<button onclick="document.getElementById('nav').toggle()">
-  Toggle Menu
-</button>
-```
+Uses `window.matchMedia` internally. Above the breakpoint, the `inline` attribute is set automatically. Below, it reverts to overlay mode.
 
 ### Filters Panel
 
-```html
-<button id="showFilters">Show Filters</button>
+Use a right-side drawer for filter controls.
 
+```html
 <snice-drawer id="filtersDrawer" position="right" size="small">
   <h2 slot="title">Filters</h2>
 
   <div style="display: flex; flex-direction: column; gap: 1rem;">
-    <div>
-      <label>
-        <input type="checkbox"> In Stock
-      </label>
-    </div>
-    <div>
-      <label>
-        <input type="checkbox"> On Sale
-      </label>
-    </div>
-    <div>
-      <label>Price Range</label>
-      <input type="range" min="0" max="1000">
-    </div>
+    <label><input type="checkbox"> In Stock</label>
+    <label><input type="checkbox"> On Sale</label>
+    <label>Price Range <input type="range" min="0" max="1000"></label>
   </div>
 
   <div slot="footer">
@@ -391,286 +280,32 @@ You can combine `breakpoint` with `open` to control the overlay state on mobile:
 </snice-drawer>
 ```
 
-```typescript
-showFilters.addEventListener('click', () => filtersDrawer.show());
-```
-
-### Settings Panel
-
-```html
-<button id="showSettings">Settings</button>
-
-<snice-drawer id="settingsDrawer" position="right">
-  <h2 slot="title">Settings</h2>
-
-  <form id="settingsForm">
-    <div style="display: flex; flex-direction: column; gap: 1rem;">
-      <div>
-        <label for="theme">Theme</label>
-        <select id="theme" name="theme">
-          <option>Light</option>
-          <option>Dark</option>
-          <option>Auto</option>
-        </select>
-      </div>
-
-      <div>
-        <label>
-          <input type="checkbox" name="notifications">
-          Enable notifications
-        </label>
-      </div>
-
-      <div>
-        <label>
-          <input type="checkbox" name="autoSave">
-          Auto-save
-        </label>
-      </div>
-    </div>
-  </form>
-
-  <div slot="footer">
-    <button type="button" onclick="this.closest('snice-drawer').hide()">
-      Cancel
-    </button>
-    <button type="submit" form="settingsForm">
-      Save
-    </button>
-  </div>
-</snice-drawer>
-```
-
-```typescript
-showSettings.addEventListener('click', () => settingsDrawer.show());
-
-settingsForm.addEventListener('submit', (e) => {
-  e.preventDefault();
-  const data = new FormData(settingsForm);
-  console.log('Settings:', Object.fromEntries(data));
-  settingsDrawer.hide();
-});
-```
-
-### Mobile Navigation
-
-```html
-<button id="menuBtn">Menu</button>
-
-<snice-drawer id="navDrawer" position="left" size="medium">
-  <h2 slot="title">Menu</h2>
-
-  <nav style="display: flex; flex-direction: column; gap: 0.5rem;">
-    <a href="/" style="padding: 0.5rem;">Home</a>
-    <a href="/products" style="padding: 0.5rem;">Products</a>
-    <a href="/services" style="padding: 0.5rem;">Services</a>
-    <a href="/about" style="padding: 0.5rem;">About</a>
-    <a href="/contact" style="padding: 0.5rem;">Contact</a>
-  </nav>
-</snice-drawer>
-```
-
-```typescript
-menuBtn.addEventListener('click', () => navDrawer.show());
-
-// Close drawer when clicking a link
-navDrawer.querySelectorAll('a').forEach(link => {
-  link.addEventListener('click', () => navDrawer.hide());
-});
-```
+### Event Handling
 
-### With Event Handling
+Listen for open/close events.
 
 ```typescript
 drawer.addEventListener('drawer-open', () => {
   console.log('Drawer opened');
-  // Pause video, load content, etc.
 });
 
 drawer.addEventListener('drawer-close', () => {
   console.log('Drawer closed');
-  // Resume video, save state, etc.
 });
-
-// Programmatic control
-drawer.show();
-drawer.hide();
-drawer.toggle();
 ```
 
-### Dynamic Content Loading
-
-```html
-<button id="showDetails">Show Details</button>
-
-<snice-drawer id="detailsDrawer" position="right">
-  <h2 slot="title" id="itemTitle">Loading...</h2>
-
-  <div id="itemContent">
-    <p>Loading...</p>
-  </div>
-</snice-drawer>
-```
-
-```typescript
-showDetails.addEventListener('click', async () => {
-  detailsDrawer.show();
-
-  // Fetch data
-  const response = await fetch('/api/item/123');
-  const item = await response.json();
-
-  // Update content
-  itemTitle.textContent = item.name;
-  itemContent.innerHTML = `
-    <dl>
-      <dt>Price:</dt>
-      <dd>$${item.price}</dd>
-      <dt>Description:</dt>
-      <dd>${item.description}</dd>
-    </dl>
-  `;
-});
-```
-
-### Complete Example
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    body {
-      margin: 0;
-      font-family: system-ui;
-    }
-
-    .app-header {
-      padding: 1rem;
-      background: #1f2937;
-      color: white;
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-    }
-
-    .content {
-      padding: 2rem;
-    }
-
-    snice-drawer nav {
-      display: flex;
-      flex-direction: column;
-    }
-
-    snice-drawer nav a {
-      padding: 0.75rem 1rem;
-      text-decoration: none;
-      color: inherit;
-      border-radius: 4px;
-    }
-
-    snice-drawer nav a:hover {
-      background: #f3f4f6;
-    }
-  </style>
-
-  <script type="module">
-    import 'snice/components/drawer/snice-drawer';
-
-    menuBtn.addEventListener('click', () => navDrawer.show());
-
-    // Close drawer on link click
-    navDrawer.querySelectorAll('a').forEach(link => {
-      link.addEventListener('click', (e) => {
-        e.preventDefault();
-        navDrawer.hide();
-        console.log('Navigate to:', link.getAttribute('href'));
-      });
-    });
-  </script>
-</head>
-<body>
-  <header class="app-header">
-    <button id="menuBtn">☰ Menu</button>
-    <h1>My App</h1>
-  </header>
-
-  <main class="content">
-    <h2>Welcome</h2>
-    <p>Click the menu button to open the navigation drawer.</p>
-  </main>
-
-  <snice-drawer id="navDrawer" position="left" size="medium">
-    <h2 slot="title">Navigation</h2>
+## Keyboard Navigation
 
-    <nav>
-      <a href="/">🏠 Home</a>
-      <a href="/dashboard">📊 Dashboard</a>
-      <a href="/products">📦 Products</a>
-      <a href="/orders">📋 Orders</a>
-      <a href="/customers">👥 Customers</a>
-      <a href="/analytics">📈 Analytics</a>
-      <a href="/settings">⚙️ Settings</a>
-    </nav>
-
-    <div slot="footer">
-      <button onclick="this.closest('snice-drawer').hide()">
-        Close
-      </button>
-    </div>
-  </snice-drawer>
-</body>
-</html>
-```
+- **Escape** - Close drawer (unless `no-escape-dismiss` or `persistent`)
+- **Tab** - Cycle through focusable elements within drawer (trapped)
+- **Shift + Tab** - Reverse cycle through focusable elements
 
 ## Accessibility
 
-The drawer component includes comprehensive accessibility features:
-
-- `role="dialog"` on the drawer container
-- `aria-modal="true"` to indicate modal behavior
-- `aria-hidden` reflects visibility state
-- Focus trap keeps keyboard navigation within drawer
-- Focus restoration returns focus to trigger element on close
-- Escape key support for closing
-- Close button is keyboard accessible
-
-### Keyboard Support
-
-- **Escape**: Close drawer (unless `noEscapeDismiss` or `persistent` is true)
-- **Tab**: Cycle through focusable elements within drawer (trapped)
-- **Shift + Tab**: Reverse cycle through focusable elements
-
-## Behavior
-
-### Focus Management
-
-When a drawer opens:
-1. Current focus is stored
-2. Focus moves to the drawer container
-3. Tab navigation is trapped within the drawer (unless `noFocusTrap` is true)
-
-When a drawer closes:
-1. Focus returns to the previously focused element
-
-### Dismissal
-
-By default, drawers can be dismissed by:
-- Clicking the close button
-- Clicking the backdrop
-- Pressing Escape
-
-This behavior can be customized:
-- `noBackdropDismiss`: Prevents backdrop click dismissal
-- `noEscapeDismiss`: Prevents Escape key dismissal
-- `persistent`: Hides close button and prevents all dismissal
-
-### Push Content Mode
-
-When `push-content` is set on a drawer, use `<snice-drawer-target for="drawer-id">` to wrap the content that should be pushed aside. The target element watches the drawer's open state and applies a CSS transform to slide its contents. This approach uses transforms (not margins) for smooth 60fps animations and avoids layout thrash.
-
-## Browser Support
-
-- Modern browsers (Chrome, Firefox, Safari, Edge)
-- Requires Custom Elements v1 and Shadow DOM support
+- `role="dialog"` and `aria-modal="true"` on the drawer container
+- `aria-hidden` reflects visibility state on the host element
+- Focus trap keeps keyboard navigation within the drawer
+- Focus restoration returns focus to the trigger element on close
+- Escape key support for closing (configurable)
+- Close button is keyboard accessible with `aria-label="Close"`
+- Contained mode skips focus trap and body scroll lock (in-page, not modal)