@ccslabs/xtend 0.1.0-rc.1

package/docs/components/xcalendar.md

@@ -0,0 +1,82 @@
+# xcalendar – XTend Komponente
+
+> **Siehe auch:** [xcards](./xcards.md), [xform](./xform.md), [xstate](./xstate.md)
+
+## Übersicht
+
+`<x-calendar>` ist ein moderner, barrierearmer Kalender mit Form-Integration, State-Management und Theming. Er eignet sich für Datumsauswahl und Terminverwaltung.
+
+---
+
+## Features
+- Form-assoziiert (HTML5 Form API)
+- State-Integration via xstate
+- Theming via CSS Custom Properties
+- Responsive Design
+
+---
+
+## Verwendung
+
+```html
+<x-calendar></x-calendar>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `value`     | String  | Ausgewähltes Datum (ISO-Format)      |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| `change`      | Wird bei Datumsauswahl ausgelöst     |
+| `date-select` | aktueller XTend-Contract bei Datumsauswahl, Detail: `{ value, date }` |
+
+---
+
+## API
+- **Wert setzen/lesen:** `element.value = '2025-07-16'`
+- **State-Integration:** Automatisch via xstate
+
+## Component-Level-Contract ab ER-WP-33
+
+`<x-calendar>` ist form-associated, schreibt Auswahl und View-Date nach `xcalendar-state-<id>` und rendert die Monatsansicht als ARIA-Grid. Tageszellen nutzen `role="gridcell"` und `aria-selected`; Monatsnavigation wird ueber beschriftete Buttons angeboten.
+
+## Form Controls UX ab WP-E11-08
+
+`<x-calendar>` stellt `xtendFormControlUxProfile` mit `xtend.component.form-control-ux-profile.v1` bereit. Das Profil verbindet Datumsauswahl, `date-select`, `xcalendar-state-<id>`, `ui.user-blocking.input`, Grid-A11y, Fabric-Lane `user-blocking` und RMT Shell Authoring.
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const cal = document.createElement('x-calendar');
+cal.value = '2025-07-16';
+document.body.appendChild(cal);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-calendar {
+  --border-color: #ccc;
+  --background-color: #fff;
+}
+```
+
+---
+
+## Accessibility
+- ARIA-Rollen, Keyboard-Navigation
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*

package/docs/components/xcards.md

@@ -0,0 +1,128 @@
+# xcards – XTend Komponente
+
+> **Siehe auch:** [xmasonry](./xmasonry.md), [xcalendar](./xcalendar.md), [xstate](./xstate.md)
+
+## Übersicht
+
+`<x-cards>` ist ein flexibles Grid-Layout für beliebige Inhalte. Es unterstützt Responsive Design, Theming und State-Integration.
+
+---
+
+## Features
+- Grid-Layout mit variabler Spaltenzahl
+- Responsive (1 Spalte auf Mobilgeräten)
+- Theming via CSS Custom Properties
+- State-Integration via xstate
+
+---
+
+## Verwendung
+
+```html
+<x-cards columns="4" gap="2rem">
+  <div>Card 1</div>
+  <div>Card 2</div>
+</x-cards>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `columns`   | Number  | Anzahl der Spalten (default: 3)      |
+| `gap`       | String  | Abstand zwischen Karten (default: 1.5rem) |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| –             | –                                   |
+
+---
+
+## API
+- **Spalten dynamisch setzen:** `element.setAttribute('columns', 2)`
+- **State-Integration:** Automatisch via xstate
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const cards = document.createElement('x-cards');
+cards.setAttribute('columns', 2);
+document.body.appendChild(cards);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-cards {
+  --card-columns: 4;
+  --card-gap: 2rem;
+}
+```
+
+---
+
+## Accessibility
+- Grid-Rolle, semantisches HTML
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-cards` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Die Komponente beschreibt ein responsive Card-Grid fuer RMT Shell Authoring und nutzt den State-Key `xcards-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `layout.reflow.commit`
+- Event: `cards-layout`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `grid`, `item`
+
+## ECH-WP-07 Token-Tabelle und signatureDesign
+
+`signatureDesign`: Eigenstaendiger Enterprise-Card-Rhythmus mit tokenisiertem Glas, Kante, Tiefe und Typografie. Das Default-Grid soll nicht wie ein generisches SaaS-Kartenraster wirken und trotzdem voll themebar bleiben.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-layout-surface` | Card-Flaeche |
+| `--xtend-layout-text` | Card-Textfarbe |
+| `--xtend-layout-border-color` | Card-Kante |
+| `--xtend-layout-radius` | Card-Radius |
+| `--xtend-layout-elevation` | Card-Schatten |
+| `--xtend-layout-spacing` | Card-Padding |
+| `--xtend-layout-gap` | Grid-Abstand |
+| `--xtend-layout-font-family` | Card-Typografie |
+| `--xtend-layout-font-size` | Card-Textgroesse |
+| `--xtend-layout-media-radius` | Bild-/Medienradius |
+| `--xtend-layout-focus-ring` | Card-Fokus |
+| `--xtend-layout-grid-min` | Grid-Untergrenze |
+| `--xtend-layout-content-max` | Grid-Maximalbreite |
+
+## ECH-WP-07 Fremdtheme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-cards,
+[data-xtend-layout-theme="enterprise-foreign"] x-card {
+  --xtend-layout-surface: #f8f4ef;
+  --xtend-layout-text: #1b2823;
+  --xtend-layout-border-color: rgba(27, 40, 35, 0.18);
+  --xtend-layout-radius: 0.3rem;
+  --xtend-layout-elevation: 0 12px 30px rgba(27, 40, 35, 0.12);
+  --xtend-layout-spacing: 1.35rem;
+  --xtend-layout-gap: 1.1rem;
+  --xtend-layout-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-layout-font-size: 1rem;
+  --xtend-layout-media-radius: 0.25rem;
+  --xtend-layout-focus-ring: 3px solid #8f4f2a;
+  --xtend-layout-grid-min: minmax(15rem, 1fr);
+  --xtend-layout-content-max: 74rem;
+}
+```

package/docs/components/xcheckbox.md

@@ -0,0 +1,102 @@
+# xcheckbox – XTend Komponente
+
+> **Siehe auch:** [xform](./xform.md), [xinput](./xinput.md), [xstate](./xstate.md)
+
+## Uebersicht
+
+`<x-checkbox>` ist das TypeScript-first Binary-Control aus `WP-E10-09`. Es ist form-associated, unterstuetzt `checked` und `indeterminate`, meldet Aenderungen ueber XTend Events und kann von RMT als framework-agnostische UI-Komponente scheduled werden.
+
+## Verwendung
+
+```html
+<x-checkbox id="terms" name="terms" required checked>
+  <span slot="label">Nutzungsbedingungen akzeptieren</span>
+  <span slot="error">Die Zustimmung ist erforderlich.</span>
+</x-checkbox>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `name` | String | Formularname |
+| `value` | String | Formularwert bei aktivem Zustand, Standard `on` |
+| `checked` | Boolean | aktueller Auswahlzustand |
+| `indeterminate` | Boolean | visueller Mischzustand |
+| `required` | Boolean | aktiviert Validierung |
+| `disabled` | Boolean | deaktiviert das Control |
+| `label` | String | ARIA-/Textlabel ohne Slot |
+
+## Slots
+
+| Slot | Zweck |
+|------|-------|
+| `label` | sichtbares Label |
+| `hint` | zusaetzlicher Hinweistext |
+| `error` | Validierungsfehler |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `checkbox-changed` | `{ checked, value, source: 'x-checkbox' }` |
+| `checkbox-invalid` | `{ checked, value, message, source: 'x-checkbox' }` |
+
+## API
+
+- `element.checked`
+- `element.value`
+- `element.indeterminate`
+- `element.toggle()`
+- `element.checkValidity()`
+- `element.reportValidity()`
+- `element.validate()`
+- `element.reset()`
+- `element.focus()`
+
+## State, RMT und Fabric
+
+`<x-checkbox>` schreibt nach `xcheckbox-checked-<id>`. RMT sieht die Komponente ueber `xtend.rmt.component-contract.v1` als DOM-Descriptor und nicht als XTend-Kernel-Abhaengigkeit. Die Fabric-Metadaten binden Events an die `user-blocking` Lane und halten den Boundary-String `no-rmt-kernel-import-of-xtend-types` sichtbar.
+
+## A11y und Performance
+
+Das Control spiegelt `aria-checked`, `aria-describedby`, `required` und `disabled` auf die native Checkbox. Das Performance-Profil nutzt `xtend.performance.component-profile.v1` mit `budgetClass: 'interactive-small'`, `lane: 'user-blocking'` und `hydrationPolicy: 'visible'`.
+
+## Form Controls UX ab WP-E11-08
+
+`<x-checkbox>` stellt `xtendFormControlUxProfile` mit `xtend.component.form-control-ux-profile.v1` bereit. Das Profil verbindet Label, Hint, Error, `checkbox-changed`, `checkbox-invalid`, `xcheckbox-checked-<id>`, `ui.user-blocking.input`, Fabric-Lane `user-blocking` und RMT Shell Authoring.
+
+## ECH-WP-08 Form Theme/A11y Hardening
+
+`signatureDesign`: Taktile Enterprise-Checkbox mit nativer Zuverlaessigkeit, separat themebarer Selection-Affordance und statusfestem Helper/Error-Rhythmus.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-form-text` | Host-Textfarbe |
+| `--xtend-form-control-surface` | Native Control-Flaeche |
+| `--xtend-form-control-text` | Control-Text-Fallback |
+| `--xtend-form-label-text` | Label |
+| `--xtend-form-helper-text` | Helper |
+| `--xtend-form-error-text` | Fehlertext |
+| `--xtend-form-error-surface` | Fehlerflaeche |
+| `--xtend-form-error-border` | Fehlerkante und Marker |
+| `--xtend-form-focus-ring` | Focus-Outline |
+| `--xtend-form-radius` | Native Control-/Error-Radius |
+| `--xtend-form-gap` | Label-/Helper-Abstand |
+| `--xtend-form-font-family` | Form-Typografie |
+| `--xtend-form-control-font-size` | Label-Schrift |
+| `--xtend-form-helper-font-size` | Helper/Error-Schrift |
+| `--xtend-form-icon-color` | Checkbox-Akzent |
+
+Density-Profile: `comfortable`, `compact`, `dense`. Invalid ist zusaetzlich zu Farbe durch Outline und Error-Marker erkennbar.
+
+```css
+[data-xtend-form-theme="enterprise-foreign"] x-checkbox {
+  --xtend-form-icon-color: #8f4f2a;
+  --xtend-form-label-text: #22312c;
+  --xtend-form-helper-text: #596861;
+  --xtend-form-error-text: #7d231c;
+  --xtend-form-error-border: #a64036;
+  --xtend-form-focus-ring: 3px solid #8f4f2a;
+}
+```

package/docs/components/xcode.md

@@ -0,0 +1,126 @@
+# xcode – XTend Komponente
+
+> **Siehe auch:** [xwriter](./xwriter.md), [xstate](./xstate.md)
+
+## Übersicht
+
+`<x-code>` ist eine Komponente zur Anzeige und Bearbeitung von Quellcode mit Syntax-Highlighting, State-Integration und Theming.
+
+---
+
+## Features
+- Syntax-Highlighting (z.B. via Prism.js)
+- Sprache wählbar (`lang`-Attribut)
+- State-Integration via xstate
+- Theming via CSS Custom Properties
+
+---
+
+## Verwendung
+
+```html
+<x-code lang="js">
+  console.log('Hallo XTend!');
+</x-code>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `lang`      | String  | Programmiersprache (default: text)   |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| –             | –                                   |
+
+---
+
+## API
+- **Sprache setzen:** `element.setAttribute('lang', 'css')`
+- **State-Integration:** Automatisch via xstate
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const code = document.createElement('x-code');
+code.setAttribute('lang', 'html');
+code.textContent = '<h1>Hallo</h1>';
+document.body.appendChild(code);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-code {
+  --background: #222;
+  --color: #fff;
+}
+```
+
+---
+
+## Accessibility
+- Semantisches HTML, Copy-Support
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-code` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Code-Bloecke koennen damit als idle hydrierbare Display-Shell in RMT authoriert werden und nutzen den State-Key `xcode-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `component.idle.hydrate`
+- Event: `code-copied`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `copy`, `pre`, `code`
+
+## ECH-WP-07 Token-Tabelle und signatureDesign
+
+`signatureDesign`: Lesbare Enterprise-Codeflaeche mit klarem Copy-Control, internem Overflow und eigenstaendiger, themebarer Monospace-Persoenlichkeit. Docs-, IDE- und Corporate-Themes sollen ohne DOM-Aenderung funktionieren.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-layout-surface` | Code-Flaeche |
+| `--xtend-layout-text` | Code-Textfarbe |
+| `--xtend-layout-border-color` | Code- und Copy-Kante |
+| `--xtend-layout-radius` | Code- und Copy-Radius |
+| `--xtend-layout-elevation` | Code-Schatten |
+| `--xtend-layout-spacing` | Code-Padding |
+| `--xtend-layout-gap` | Theme-Abstand fuer Tooling |
+| `--xtend-layout-font-family` | Monospace-/Code-Typografie |
+| `--xtend-layout-font-size` | Code-Schriftgroesse |
+| `--xtend-layout-media-radius` | Copy-Control-Radius |
+| `--xtend-layout-focus-ring` | Copy-Control-Fokus |
+| `--xtend-layout-grid-min` | Code-Layout-Untergrenze |
+| `--xtend-layout-content-max` | Code-Maximalbreite |
+
+## ECH-WP-07 Fremdtheme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-code {
+  --xtend-layout-surface: #151b19;
+  --xtend-layout-text: #f7f1e7;
+  --xtend-layout-border-color: rgba(247, 241, 231, 0.18);
+  --xtend-layout-radius: 0.35rem;
+  --xtend-layout-elevation: 0 16px 40px rgba(21, 27, 25, 0.22);
+  --xtend-layout-spacing: 1.25rem 1.4rem;
+  --xtend-layout-gap: 0.75rem;
+  --xtend-layout-font-family: "Cascadia Code", "Fira Mono", monospace;
+  --xtend-layout-font-size: 0.95rem;
+  --xtend-layout-media-radius: 999px;
+  --xtend-layout-focus-ring: 3px solid #d48b57;
+  --xtend-layout-grid-min: minmax(0, 1fr);
+  --xtend-layout-content-max: 68rem;
+}
+```

package/docs/components/xdialog.md

@@ -0,0 +1,92 @@
+# xdialog - XTend Komponente
+
+## Uebersicht
+
+`<x-dialog>` ist die state-getriebene Dialog-Komponente fuer XTend. Sie verbindet Attributsteuerung, `xstate`-Open-Flags und den aggregierten `ui.dialogs`-State zu einem gemeinsamen Overlay-Contract.
+
+## Verwendung
+
+```html
+<x-dialog overlay title="Beispieldialog" width="400px">
+  <p>Inhalt</p>
+  <div slot="actions">
+    <button onclick="this.closest('x-dialog').close()">Schliessen</button>
+  </div>
+</x-dialog>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `open` | boolean | Dialog ist geoeffnet |
+| `overlay` | boolean | zeigt einen Overlay-Hintergrund |
+| `title` | string | Titelzeile des Dialogs |
+| `width` | string | Zielbreite des Dialogs |
+| `height` | string | Zielhoehe des Dialogs |
+
+## Slots
+
+| Slot | Beschreibung |
+|------|--------------|
+| default | Hauptinhalt des Dialogs |
+| `actions` | Aktionen im Footer |
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `dialog-opened` | nach erfolgreichem Oeffnen |
+| `dialog-closed` | nach erfolgreichem Schliessen |
+
+Die Events liefern:
+
+```js
+{
+  id: 'dialog-abc123',
+  open: false,
+  source: 'button'
+}
+```
+
+## API
+
+- `element.open()`
+- `element.close()`
+
+API- und XState-gesteuerte Dialoge verwenden dieselben Open-Flags:
+
+- `xtend.component.x-dialog.<id>.open`
+- `dialog-open-<id>`
+- `xdialog-open-<id>`
+
+## Runtime-Contract
+
+- API-gemanagte Dialoge lesen Titel, Inhalt und Aktionen aus `xstate.get('ui').dialogs`
+- Benutzerinteraktionen wie ESC, Overlay-Klick und Close-Button schreiben den Open-State zurueck
+- API-gemanagte Dialoge entfernen sich nach dem Schliessen aus `ui.dialogs` und aus dem DOM
+
+## Hinweise
+
+- direkte DOM-Nutzung ueber Slots bleibt unterstuetzt
+- fuer API-gemanagte Dialoge ist `window.XDialog.show()` der bevorzugte Einstieg
+- Fokusfalle, Rueckfokus und ARIA-Rollen sind Teil des Standardverhaltens
+
+## Overlay Interaction UX Profil
+
+Seit `WP-E11-11` deklariert `<x-dialog>` das Runtime-Profil `xtend.component.overlay-interaction-ux-profile.v1` ueber `xtendOverlayInteractionUxProfile`.
+
+| Feld | Wert |
+|------|------|
+| Family | `dialog` |
+| State Key | `dialog-open-<id>` |
+| Schedule | `overlay.stack.open` |
+| Commands | `open`, `close`, `focus-trap`, `apply-inert`, `lock-scroll`, `snapshot` |
+
+Das Profil standardisiert Focus Trap, Rueckfokus, Escape-Topmost-Regel, Background-Inert, balanced Scroll Lock und host-lokale Portal-Semantik. RMT kann den Dialog in Shell-first Templates planen, waehrend der RMT-Kernel durch `no-rmt-kernel-import-of-xtend-types` framework-agnostisch bleibt.
+
+## ECH-WP-06 Overlay-Paritaet
+
+`x-dialog` expose `surface`, `backdrop`, `close` und `content` als gemeinsame Overlay-Parts. `overlay` bleibt als Alias fuer `backdrop` erhalten. Surface, Text, Backdrop, Elevation, Radius, Z-Index, Action-Farben, Close-Flaeche und Focus Ring sind ueber `--xtend-overlay-*`, `--dialog-*` oder `--xdialog-*` Tokens ueberschreibbar.
+
+`x-dialog` ist modal: Focus Trap, Background-Inert, Scroll Lock, Escape und Rueckfokus bleiben im Standardpfad aktiv. Dialoge ohne `overlay` behalten die Surface-Parts, verzichten aber auf den visuellen Backdrop.

package/docs/components/xdrawer.md

@@ -0,0 +1,84 @@
+# xdrawer - XTend Komponente
+
+> **Siehe auch:** [xpopover](./xpopover.md), [xtooltip](./xtooltip.md), [xrouter](./xrouter.md), [xlink](./xlink.md)
+
+## Uebersicht
+
+`<x-drawer>` ist die Shell- und Navigationskomponente aus `WP-E10-11`. Sie liefert Side Panels und Navigation Drawer fuer RMT-first Apps, unterstuetzt Focus Trap, Escape Close, Outside Click und optional route-aware Verhalten.
+
+## Verwendung
+
+```html
+<x-drawer id="app-nav" placement="left" modal label="App navigation" route-aware>
+  <button slot="trigger" type="button">Open navigation</button>
+  <strong slot="header">Navigation</strong>
+  <a href="#/overview">Overview</a>
+  <small slot="footer">Signed in</small>
+</x-drawer>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `open` | Boolean | oeffnet den Drawer kontrolliert |
+| `placement` | String | `left`, `right` oder `bottom` |
+| `modal` | Boolean | aktiviert Focus Trap und `aria-modal` |
+| `label` | String | zugaenglicher Name fuer den Drawer |
+| `route-aware` | Boolean | schliesst nach XRouter-Routenwechseln und emittiert Routensignal |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `drawer-opened` | `{ id, open, source, placement, modal }` |
+| `drawer-closed` | `{ id, open, source, placement, modal }` |
+| `drawer-route-selected` | `{ id, routeRef, source: 'x-router' }` |
+
+## API
+
+- `openDrawer()`
+- `closeDrawer()`
+- `toggle()`
+
+## Theme und Tokens
+
+`<x-drawer>` synchronisiert `data-theme` vom `document.documentElement` und nutzt automatisch die globalen XTend-Tokens aus `x-theme`. Ohne eigene Drawer-Tokens fallen Hintergrund, Text, Border und Overlay auf `--xtend-surface`, `--xtend-text`, `--xtend-border-color` und `--xtend-overlay-bg` zurueck. Dadurch bleiben Navigation Drawer in Bright Mode und Dark Mode lesbar, auch wenn eine App Shell keine eigenen Drawer-Farben setzt.
+
+| Token | Zweck |
+|-------|-------|
+| `--drawer-bg` / `--drawer-bg-dark` | Surface-Hintergrund |
+| `--drawer-color` / `--drawer-color-dark` | Textfarbe |
+| `--drawer-border` / `--drawer-border-dark` | Rahmen und Trenner |
+| `--drawer-overlay-bg` / `--drawer-overlay-bg-dark` | Backdrop-Farbe |
+| `--drawer-focus` | Focus-Ring |
+| `--drawer-close-size` | Groesse des Close-Icon-Buttons |
+| `--drawer-close-border` / `--drawer-close-color` | Rahmen und Icon-Farbe des Close-Buttons |
+| `--drawer-close-hover-bg` / `--drawer-close-hover-bg-dark` | Hover-Flaeche des Close-Buttons |
+
+## State, RMT und Fabric
+
+`<x-drawer>` schreibt nach `xdrawer-open-<id>`. Der RMT Contract ist `xtend.rmt.component-contract.v1` und nutzt `component.lazy.hydrate`, `route.visible.render` und `overlay.drawer.transition`. Der Kernel Boundary bleibt `no-rmt-kernel-import-of-xtend-types`.
+
+## A11y und Performance
+
+Die Komponente nutzt `role="dialog"`, `aria-modal`, `aria-hidden`, `aria-expanded`, `inert`, Focus Trap und Focus Return. Beim Schliessen wird Fokus zuerst auf den Trigger oder das zuletzt aktive Element zurueckgegeben, bevor die Drawer-Surface vor Assistive Technology verborgen wird. Das Screenreader-Signal `route-change-announcement` ist fuer App-Shell-Navigation vorgesehen. Das Performance-Profil ist `xtend.performance.component-profile.v1` mit `budgetClass: 'overlay-large'`, `lane: 'visible'` und `hydrationPolicy: 'lazy'`.
+
+## Overlay Interaction UX Profil
+
+Seit `WP-E11-11` deklariert `<x-drawer>` das Runtime-Profil `xtend.component.overlay-interaction-ux-profile.v1` ueber `xtendOverlayInteractionUxProfile`.
+
+| Feld | Wert |
+|------|------|
+| Family | `drawer` |
+| State Key | `xdrawer-open-<id>` |
+| Schedule | `overlay.stack.open` |
+| Commands | `open`, `close`, `toggle`, `focus-trap`, `apply-inert`, `lock-scroll`, `snapshot` |
+
+Das Profil beschreibt Drawer als route-aware Overlay: modal optional, Focus Trap nur bei modalem Betrieb, Escape schliesst das oberste Overlay und XRouter-Routenwechsel duerfen den Drawer kontrolliert schliessen.
+
+## ECH-WP-06 Overlay-Paritaet
+
+`x-drawer` nutzt die gemeinsamen Overlay-Part-Aliase `surface`, `backdrop`, `close` und `content`. `overlay` bleibt als Legacy-Alias fuer `backdrop` erhalten. Host-Themes koennen Surface, Text, Border, Elevation, Backdrop, Z-Index und Focus Ring ueber `--xtend-overlay-*` oder die kompatiblen `--drawer-*` Tokens steuern.
+
+Modalitaet ist optional: `modal` aktiviert Focus Trap, Background-Inert und Scroll Lock; nicht-modale Drawer bleiben fuer App-Shell-Navigation offen steuerbar.