@ccslabs/xtend 0.1.0-rc.1

package/docs/components/xmasonry.md

@@ -0,0 +1,124 @@
+# xmasonry – XTend Komponente
+
+> **Siehe auch:** [xcards](./xcards.md), [xsection](./xsection.md)
+
+## Übersicht
+
+`<x-masonry>` ist ein flexibles Grid-Layout für kachelartige Anordnungen (Masonry-Layout). Es eignet sich für Galerien, Cards und dynamische Inhalte.
+
+---
+
+## Features
+- Masonry-Layout (Pinterest-Style)
+- Responsive Design
+- Theming via CSS Custom Properties
+
+---
+
+## Verwendung
+
+```html
+<x-masonry>
+  <div>Item 1</div>
+  <div>Item 2</div>
+</x-masonry>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `columns`   | Number  | Anzahl der Spalten (default: 3)      |
+| `gap`       | String  | Abstand zwischen Items (default: 1rem) |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| –             | –                                   |
+
+---
+
+## API
+- **Spalten dynamisch setzen:** `element.setAttribute('columns', 4)`
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const masonry = document.createElement('x-masonry');
+masonry.setAttribute('columns', 4);
+document.body.appendChild(masonry);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-masonry {
+  --masonry-gap: 2rem;
+}
+```
+
+---
+
+## Accessibility
+- Semantisches HTML
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-masonry` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Die Komponente ist als responsive Layout-Grid mit deterministischem Reflow-Schedule authorierbar und nutzt den State-Key `xmasonry-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `layout.reflow.commit`
+- Event: `masonry-layout`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `grid`, `item`, `toggle`, `content`
+
+## ECH-WP-07 Token-Tabelle und signatureDesign
+
+`signatureDesign`: Reorderable Enterprise-Masonry mit taktiler Tiefe, icon-only Toggle-Control und themebarem Drag-Feedback. Die Komponente eignet sich fuer Galerien, Dashboards und Knowledge-Layouts ohne Textzeichen-Controls.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-layout-surface` | Masonry-Item-Flaeche |
+| `--xtend-layout-text` | Item-Textfarbe |
+| `--xtend-layout-border-color` | Item- und Drop-Kanten |
+| `--xtend-layout-radius` | Item-Radius |
+| `--xtend-layout-elevation` | Item- und Drag-Schatten |
+| `--xtend-layout-spacing` | Item-Padding |
+| `--xtend-layout-gap` | Grid-Abstand |
+| `--xtend-layout-font-family` | Masonry-Typografie |
+| `--xtend-layout-font-size` | Item-Textgroesse |
+| `--xtend-layout-media-radius` | Toggle-/Medienradius |
+| `--xtend-layout-focus-ring` | Toggle-Fokus |
+| `--xtend-layout-grid-min` | Grid-Untergrenze |
+| `--xtend-layout-content-max` | Masonry-Maximalbreite |
+
+## ECH-WP-07 Fremdtheme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-masonry {
+  --xtend-layout-surface: #fbf7f1;
+  --xtend-layout-text: #1b2823;
+  --xtend-layout-border-color: rgba(27, 40, 35, 0.2);
+  --xtend-layout-radius: 0.35rem;
+  --xtend-layout-elevation: 0 10px 28px rgba(27, 40, 35, 0.12);
+  --xtend-layout-spacing: 1.25rem;
+  --xtend-layout-gap: 1rem;
+  --xtend-layout-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-layout-font-size: 1rem;
+  --xtend-layout-media-radius: 999px;
+  --xtend-layout-focus-ring: 3px solid #8f4f2a;
+  --xtend-layout-grid-min: minmax(14rem, 1fr);
+  --xtend-layout-content-max: 72rem;
+}
+```

package/docs/components/xmenu.md

@@ -0,0 +1,158 @@
+# xmenu – XTend Komponente
+
+> **Siehe auch:** [xlink](./xlink.md), [xrouter](./xrouter.md), [xheader](./xheader.md), [xfooter](./xfooter.md)
+
+## Übersicht
+
+`<x-menu>` ist die Enterprise-Navigationskomponente fuer Menuebars, Toolbars und App-Navigation. Seit `WP-E12-07` besitzt sie einen expliziten Performance-, RMT-, Fabric- und Routing-Contract. RMT kann Menueintraege deklarativ als DOM-Descriptoren erzeugen; der XTend Host Adapter uebernimmt Hydration, Keyboard-Navigation, Active-State-Sync und XRouter-Kompatibilitaet.
+
+## Features
+
+- Slotted Eintraege fuer `a`, `button`, `x-link` und `[role="menuitem"]`
+- ARIA-Rollen mit `role="menubar"` und `role="menuitem"`
+- Keyboard-Navigation mit Arrow Keys, `Home`, `End`, `Enter` und `Space`
+- Roving `tabindex` und `aria-current="page"` fuer aktive Eintraege
+- `x-link`- und `x-router`-Kompatibilitaet ueber `x-navigate` und `router-navigate`
+- `xtend.performance.component-profile.v1` mit Navigation- und Interaction-Budgets
+- Fabric-kompatible Events fuer Navigation, Keyboard und Performance
+
+## Verwendung
+
+```html
+<x-menu data-rmt-schedule="ui.user-blocking.navigation" data-xtend-lane="user-blocking">
+  <a href="/overview">Overview</a>
+  <x-link href="/settings">Settings</x-link>
+  <button type="button">Action</button>
+</x-menu>
+```
+
+## Events
+
+| Event | Detail | Beschreibung |
+|-------|--------|--------------|
+| `menu-item-clicked` | `{ href, index, label, source, scheduleRef }` | Wird bei Click oder Keyboard-Aktivierung eines Eintrags emittiert |
+| `menu-navigate` | `{ href, path, mode, scheduleRef }` | Signalisiert eine interne Navigation an XRouter/RMT |
+| `menu-keyboard-navigation` | `{ key, fromIndex, toIndex }` | Misst Roving-Focus-Navigation |
+| `menu-performance-measured` | `xtend.performance.measurement.v1` | Fabric-/Diagnostics-Messpunkt fuer Hydration, Slotchange, Keyboard und Route Activation |
+
+## Runtime API
+
+```js
+const menu = document.querySelector('x-menu');
+
+menu.getPerformanceBudget();
+menu.getInteractionBudget();
+menu.snapshotPerformance();
+```
+
+`snapshotPerformance()` liefert `xtend.component.performance-snapshot.v1` mit Countern, Budgets und den letzten Messpunkten.
+
+## Performance Contract
+
+`x-menu` nutzt:
+
+- Schema: `xtend.performance.component-profile.v1`
+- `componentRef`: `x-menu`
+- Profile: `interactive`, `routing`
+- Budget Class: `navigation-small`
+- Lane: `user-blocking`
+- Hydration Policy: `visible`
+- kritische Messpunkte:
+  - `xtend.component.hydrate`
+  - `xtend.component.render`
+  - `xtend.component.slotchange`
+  - `xtend.interaction.keyboard`
+  - `xtend.route.navigate`
+  - `xtend.state.sync`
+
+Das Interaction Budget enthaelt `keyboardBudgetMs`, `routeActivationBudgetMs`, `touchTargetMinPx: 44`, `rovingTabindexRequired`, `xLinkCompatible` und `xRouterCompatible`.
+
+## RMT und Fabric
+
+Der RMT Contract bleibt host-neutral:
+
+- Adapter: `xtend.component`
+- Template Mode: `dom_descriptor`
+- Event Binding Mode: `dom-event-to-rmt-command`
+- Schedule Refs: `component.visible.hydrate`, `ui.user-blocking.navigation`, `route.transition.navigate`, `diagnostics.snapshot`
+- Boundary: `no-rmt-kernel-import-of-xtend-types`
+
+Fabric kann die Komponente ueber `menu-performance-measured`, `menu-keyboard-navigation`, `menu-navigate` und `snapshotPerformance()` anbinden.
+
+## State und Routing
+
+- `xmenu-active` ist der kanonische `xstate`-Key fuer den aktiven Eintrag.
+- `xmenu-state-<id>` enthaelt den vollstaendigen lokalen State inklusive Performance Snapshot.
+- Interne Links schreiben `router-navigate` und emittieren `x-navigate`, damit XRouter Hash- und History-Mode ausloesen kann.
+- Aktive Eintraege erhalten `aria-current="page"` und bleiben im Roving-Tabindex fokussierbar.
+
+## Styling & Theming
+
+```css
+x-menu {
+  --xtend-menu-bg: rgba(40, 60, 120, 0.25);
+  --xtend-menu-color: #fff;
+  --xtend-menu-min-touch-target: 44px;
+}
+```
+
+## Accessibility
+
+- ARIA-Rollen: `menubar` auf der Shell, `menuitem` auf slotted Items.
+- Keyboard-Navigation: `ArrowRight`, `ArrowDown`, `ArrowLeft`, `ArrowUp`, `Home`, `End`, `Enter`, `Space`.
+- Focus Visible und Forced Colors werden ohne Bewegungsabhaengigkeit unterstuetzt.
+- `prefers-reduced-motion` deaktiviert nicht notwendige Transitions.
+
+## Component-Level-Contract ab WP-E12-07
+
+- `xtendComponentContract`, `xtendRmtMetadata`, `xtendComponentLifecycleTelemetry`, `xtendScaffoldA11yProfile` und `xtendScaffoldPerformanceProfile` sind in der Runtime vorhanden.
+- `menu-item-clicked`, `menu-navigate`, `menu-keyboard-navigation` und `menu-performance-measured` bilden die oeffentliche Event-Oberflaeche.
+- `snapshotPerformance()`, `getPerformanceBudget()` und `getInteractionBudget()` machen die Komponente fuer Fabric, RMT Adapter und lokale Gates testbar.
+
+---
+
+*Letzte Aktualisierung: 7. Mai 2026*
+
+## ECH-WP-09 Token-Tabelle und Navigation States
+
+`signatureDesign`: `x-menu` nutzt eine ruhige Enterprise-Menueleiste mit klar sichtbarer aktiver Route, nicht farb-only Current-Indikator und frei ersetzbarer Typografie. Active/Current/Selected, Hover, Focus und Disabled muessen in Fremdthemes sichtbar bleiben.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-nav-surface` | Menue-Surface |
+| `--xtend-nav-text` | Menue- und Item-Text |
+| `--xtend-nav-border-color` | Menuekante |
+| `--xtend-nav-radius` | Menue- und Item-Radius |
+| `--xtend-nav-gap` | Abstand zwischen Navigationseintraegen |
+| `--xtend-nav-font-family` | Navigationstypografie |
+| `--xtend-nav-font-size` | Navigationstextgroesse |
+| `--xtend-nav-active-surface` | Active/Current/Selected Flaeche |
+| `--xtend-nav-active-text` | Active/Current/Selected Text |
+| `--xtend-nav-current-indicator` | nicht farb-only Route-Indikator |
+| `--xtend-nav-hover-surface` | Hover-Flaeche |
+| `--xtend-nav-focus-ring` | Tastaturfokus |
+| `--xtend-nav-disabled-opacity` | Disabled-Dimmung |
+
+## ECH-WP-09 Keyboard-Verhalten
+
+`ArrowRight`, `ArrowDown`, `ArrowLeft`, `ArrowUp`, `Home`, `End`, `Enter` und `Space` bleiben gatebar. Disabled Items werden nicht aktiviert und beim Roving Focus uebersprungen. Verschachtelte Menues duerfen Disclosure Controls nur mit Icon Controls wie `part="disclosure-icon control icon"` oder autorisierten `x-icon`-Elementen darstellen, nicht mit Textglyphen.
+
+## ECH-WP-09 Fremdtheme
+
+```css
+[data-xtend-nav-theme="enterprise-foreign"] x-menu {
+  --xtend-nav-surface: #f7f4ee;
+  --xtend-nav-text: #19231f;
+  --xtend-nav-border-color: rgba(25, 35, 31, 0.24);
+  --xtend-nav-radius: 0.4rem;
+  --xtend-nav-gap: 0.35rem;
+  --xtend-nav-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-nav-font-size: 0.96rem;
+  --xtend-nav-active-surface: #173f35;
+  --xtend-nav-active-text: #fffaf0;
+  --xtend-nav-current-indicator: #b56b35;
+  --xtend-nav-hover-surface: rgba(181, 107, 53, 0.14);
+  --xtend-nav-focus-ring: 3px solid #b56b35;
+  --xtend-nav-disabled-opacity: 0.44;
+}
+```

package/docs/components/xmodal.md

@@ -0,0 +1,82 @@
+# xmodal - XTend Komponente
+
+## Uebersicht
+
+`<x-modal>` ist die state-getriebene Modal-Komponente fuer XTend. Sie wird vor allem ueber `window.XModal.show()` verwendet, kann aber auch direkt im DOM mit Attributen und Slots betrieben werden.
+
+## Verwendung
+
+```html
+<x-modal title="Hinweis" open>
+  <p>Modal-Inhalt</p>
+</x-modal>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `open` | boolean | Modal ist geoeffnet |
+| `overlay` | boolean | zeigt einen Overlay-Hintergrund |
+| `title` | string | Titel des Modals |
+| `content` | string | textueller Inhalt |
+| `actions` | string | JSON-Array fuer Action-Buttons |
+
+## Slots
+
+| Slot | Beschreibung |
+|------|--------------|
+| default | Hauptinhalt des Modals |
+| `actions` | optionaler Action-Bereich |
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `modal-opened` | nach erfolgreichem Oeffnen |
+| `modal-closed` | nach erfolgreichem Schliessen |
+| `modal-action` | wenn ein konfigurierte Action ausgewaehlt wird |
+
+## API
+
+- `element.open()`
+- `element.close()`
+
+Open-State wird ueber dieselben Pfade gefuehrt:
+
+- `xtend.component.x-modal.<id>.open`
+- `modal-open-<id>`
+
+## Runtime-Contract
+
+- API-gemanagte Modals lesen Titel, Inhalt und Aktionen aus `xstate.get('ui').modals`
+- ESC, Overlay-Klick und Close-Button schreiben den Open-State zurueck
+- API-gemanagte Modals entfernen sich nach dem Schliessen aus `ui.modals` und aus dem DOM
+- direkt eingebettete Overlay-Modals werden waehrend `open` in eine `document.body` Portal-Schicht gehoben, damit Blur und Overlay den gesamten Viewport abdecken
+
+## Hinweise
+
+- `modal-action` enthaelt die ausgewaehlte Action-Definition im Event-Detail
+- fuer API-gemanagte Modals ist `window.XModal.show()` der bevorzugte Einstieg
+- der Focus-Ruecksprung zum zuletzt aktiven Element ist Teil des Standardverhaltens
+
+## Overlay Interaction UX Profil
+
+Seit `WP-E11-11` deklariert `<x-modal>` das Runtime-Profil `xtend.component.overlay-interaction-ux-profile.v1` ueber `xtendOverlayInteractionUxProfile`.
+
+| Feld | Wert |
+|------|------|
+| Family | `modal-dialog` |
+| State Key | `modal-open-<id>` |
+| Schedule | `overlay.stack.open` |
+| Commands | `open`, `close`, `focus-trap`, `apply-inert`, `lock-scroll`, `snapshot` |
+
+Das Profil legt Focus Trap, Rueckfokus, Escape-Topmost-Regel, Background-Inert, balanced Scroll Lock und eine dokumentweite Portal-Schicht fest. RMT beschreibt diese Regeln shell-first ueber `tests/fixtures/rmt-overlay-interaction-ux.rmt`; der RMT-Kernel importiert weiterhin keine XTend-Typen.
+
+Die Portal-Schicht ist dokumentweit: Wenn ein Modal mit `overlay` in verschachtelten App-Shells, XRouter-Routen oder transformierten Layout-Containern geoeffnet wird, wird der Host temporaer unter `document.body` geparkt und nach dem Schliessen an seine urspruengliche Position zurueckgesetzt. Dadurch bleibt die Slot-Faehigkeit erhalten, waehrend Overlay und Blur nicht auf den lokalen `main`- oder Route-Container begrenzt sind.
+
+## ECH-WP-06 Overlay-Paritaet
+
+`x-modal` expose `surface`, `backdrop`, `close` und `content` als gemeinsame Overlay-Parts. `overlay` bleibt als Alias fuer `backdrop` erhalten. Host-Themes koennen Backdrop, Surface, Text, Elevation, Radius, Z-Index, Action-Text, Close-Flaeche und Focus Ring ueber `--xtend-overlay-*`, `--modal-*` oder `--xmodal-*` Tokens steuern.
+
+`x-modal` ist modal: Focus Trap, Background-Inert, Scroll Lock, Escape und Rueckfokus sind Teil des Standardpfads. Ein Modal ohne `overlay` behält die Surface-Parts, rendert aber keinen visuellen Backdrop.

package/docs/components/xplayer.md

@@ -0,0 +1,104 @@
+# xplayer – XTend Komponente
+
+> **Siehe auch:** [xlightbox](./xlightbox.md)
+
+## Übersicht
+
+`<x-player>` ist eine vielseitige Media-Player-Komponente für Audio und Video. Sie unterstützt Playlists, Custom Controls, Theming, State-Integration, Download, Media-Chooser und Vollbild.
+
+---
+
+## Features
+- Wiedergabe von Audio/Video
+- Playlists und Media-Controls
+- Download-Button (optional)
+- Media-Chooser (Quellenauswahl)
+- Poster-Bild für Videos
+- Vollbildmodus
+- State-Integration via xstate
+- Theming via CSS Custom Properties
+
+---
+
+## Verwendung
+
+```html
+<x-player src="song.mp3" type="audio"></x-player>
+<x-player src="video.mp4" poster="cover.jpg" type="video" title="Demo Video" downloadable="true"></x-player>
+```
+
+---
+
+## Attribute
+| Attribut         | Typ     | Beschreibung                                              |
+|------------------|---------|----------------------------------------------------------|
+| `src`            | String  | Media-URL (Audio/Video)                                  |
+| `poster`         | String  | Vorschaubild für Video                                   |
+| `type`           | String  | Medientyp (`audio` oder `video`, Standard: `video`)      |
+| `media-chooser`  | String  | `true` für Quellenauswahl (Dropdown)                     |
+| `downloadable`   | String  | `true` für Download-Button                               |
+| `autoplay`       | Boolean | Autoplay beim Laden                                      |
+| `title`          | String  | Titelanzeige im Player                                   |
+| `height`         | String  | Höhe (z.B. `360`)                                        |
+| `width`          | String  | Breite (z.B. `640`)                                      |
+
+---
+
+## Events
+| Event             | Beschreibung                                 |
+|-------------------|----------------------------------------------|
+| `xplayer-play`    | Wiedergabe gestartet, Detail: `{ currentTime }` |
+| `xplayer-pause`   | Wiedergabe pausiert, Detail: `{ currentTime }`  |
+| `xplayer-mute`    | Stummschaltung geändert, Detail: `{ muted }`   |
+| `xplayer-volume`  | Lautstärke geändert, Detail: `{ volume }`      |
+
+---
+
+## API
+- **Abspielen:** `element.play()`
+- **Pausieren:** `element.pause()`
+- **State-Integration:** Automatisch via xstate
+- **Vollbild:** `element.requestFullscreen()`
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const player = document.createElement('x-player');
+player.setAttribute('src', 'song.mp3');
+document.body.appendChild(player);
+player.play();
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-player {
+  --primary-color: #4fc3f7;
+  --border-radius: 8px;
+  /* Weitere Custom Properties siehe CSS */
+}
+```
+
+---
+
+## Accessibility
+- Semantisches HTML, ARIA
+- Tastaturbedienung
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-player` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Media kann dadurch shell-first gerendert und erst ueber `media.lazy.load` bzw. `media.playback.user` geplant werden. Der State-Key lautet `xplayer-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `media.lazy.load`
+- Events: `xplayer-play`, `xplayer-pause`, `xplayer-fullscreen`, `xplayer-pip`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `media`, `controls`, `progress`, `overlay`

package/docs/components/xpopover.md

@@ -0,0 +1,67 @@
+# xpopover - XTend Komponente
+
+> **Siehe auch:** [xtooltip](./xtooltip.md), [xdrawer](./xdrawer.md), [xdialog](./xdialog.md), [xmodal](./xmodal.md)
+
+## Uebersicht
+
+`<x-popover>` ist ein interaktives, verankertes Overlay aus `WP-E10-11`. Es eignet sich fuer Filter, Menues, Toolbars und kontextuelle Aktionen, kann modal betrieben werden und bleibt als Custom Element ueber RMT beschreibbar.
+
+## Verwendung
+
+```html
+<x-popover id="filters" placement="bottom" modal label="Filter options">
+  <button slot="trigger" type="button">Open filters</button>
+  <p>Filter content can be mounted by RMT.</p>
+  <button slot="actions" type="button">Apply</button>
+</x-popover>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `open` | Boolean | oeffnet das Popover kontrolliert |
+| `placement` | String | `top`, `right`, `bottom` oder `left` |
+| `modal` | Boolean | aktiviert Focus Trap und `aria-modal` |
+| `anchor` | String | vorbereitetes Anchor-Mapping fuer RMT Authoring |
+| `label` | String | zugaenglicher Name fuer den Dialog |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `popover-opened` | `{ id, open, source, placement, modal }` |
+| `popover-closed` | `{ id, open, source, placement, modal }` |
+
+## API
+
+- `show()`
+- `hide()`
+- `toggle()`
+
+## State, RMT und Fabric
+
+`<x-popover>` schreibt nach `xpopover-open-<id>`. RMT nutzt `xtend.rmt.component-contract.v1`, `dom_descriptor` Templates und kann Events als `dom-event-to-rmt-command` binden. Fuer interaktive UIs ist die Lane `user-blocking`; der Kernel Boundary bleibt `no-rmt-kernel-import-of-xtend-types`.
+
+## A11y und Performance
+
+Das Popover nutzt `role="dialog"`, `aria-expanded`, `aria-controls`, optional `aria-modal` und Focus Return. `Escape`, Outside Click und `focus-return` sind Pflichtsignale. Das Performance-Profil ist `xtend.performance.component-profile.v1` mit `budgetClass: 'overlay-medium'`, `lane: 'user-blocking'` und `hydrationPolicy: 'visible'`.
+
+## Overlay Interaction UX Profil
+
+Seit `WP-E11-11` deklariert `<x-popover>` das Runtime-Profil `xtend.component.overlay-interaction-ux-profile.v1` ueber `xtendOverlayInteractionUxProfile`.
+
+| Feld | Wert |
+|------|------|
+| Family | `popover` |
+| State Key | `xpopover-open-<id>` |
+| Schedule | `overlay.position.update` |
+| Commands | `show`, `hide`, `toggle`, `focus-trap`, `snapshot` |
+
+Das Profil trennt die leichte Anchor-Schicht vom modal optionalen Betrieb. Focus Trap wird nur bei `modal` aktiviert, Escape schliesst das oberste Popover und Outside Click bleibt als bewusstes Dismiss-Verhalten dokumentiert.
+
+## ECH-WP-06 Overlay-Paritaet
+
+`x-popover` expose `surface`, `backdrop`, `close` und `content` als gemeinsame Overlay-Parts. Der Backdrop wird nur bei `modal` sichtbar; der Close-Button ist tokenisiert und kann ueber `--popover-close-display` sowie `--xpopover-close-*` an Corporate-Patterns angepasst werden.
+
+Der Default bleibt nicht-modal: kein Inert und kein Scroll Lock. Mit `modal` aktiviert das Popover Backdrop, Focus Trap, Escape und Rueckfokus. Surface, Text, Border, Elevation, Radius, Backdrop und Z-Index laufen ueber `--xtend-overlay-*`, `--popover-*` oder `--xpopover-*` Tokens.

package/docs/components/xprogress.md

@@ -0,0 +1,56 @@
+# xprogress - XTend Komponente
+
+> **Siehe auch:** [xstatus](./xstatus.md), [xspinner](./xspinner.md), [xstate](./xstate.md)
+
+## Uebersicht
+
+`<x-progress>` ist das RMT-first Progress-Control aus `WP-E10-10`. Es visualisiert determinate und indeterminate Fortschritte, meldet Fortschrittsereignisse an Fabric/Telemetry und kann in Shell-first RMT-Templates fuer Hydration, Upload, Route- oder Worker-Aufgaben eingesetzt werden.
+
+## Verwendung
+
+```html
+<x-progress id="route-progress" value="64" max="100" status="Hydrating route" busy>
+  <span slot="label">Route hydration</span>
+</x-progress>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `value` | Number | aktueller Wert |
+| `max` | Number | Maximalwert |
+| `label` | String | Label ohne Slot |
+| `status` | String | Statusmeldung fuer Screenreader und UI |
+| `indeterminate` | Boolean | aktiviert unbestimmten Fortschritt |
+| `busy` | Boolean | setzt `aria-busy` |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `progress-changed` | `{ value, max, percent, source: 'x-progress' }` |
+| `progress-complete` | `{ value, max, percent: 100, source: 'x-progress' }` |
+
+## API
+
+- `element.value`
+- `element.max`
+- `element.percent`
+- `element.setProgress(value)`
+- `element.complete()`
+- `element.reset()`
+
+## State, RMT und Fabric
+
+`<x-progress>` schreibt nach `xprogress-value-<id>` und ist fuer `feedback.progress.update` vorbereitet. Die RMT-Metadaten nutzen `xtend.rmt.component-contract.v1`, `adapter: 'xtend.component'` und `kernelBoundary: 'no-rmt-kernel-import-of-xtend-types'`. Dadurch kann RMT Progress als scheduled UI-Feedback behandeln, waehrend XTend die Web Component rendert.
+
+## A11y und Performance
+
+Das Control nutzt `role="progressbar"`, `aria-valuenow`, `aria-valuemax`, `aria-valuetext`, `aria-busy` und eine polite Statusregion. Das Performance-Profil ist `xtend.performance.component-profile.v1` mit `budgetClass: 'feedback-small'`, `lane: 'background'` und `hydrationPolicy: 'visible'`.
+
+## Feedback Status UX ab WP-E11-09
+
+`<x-progress>` stellt `xtendFeedbackStatusUxProfile` mit `xtend.component.feedback-status-ux-profile.v1` bereit. Das Profil beschreibt Progress als scheduled Feedback mit `progress-changed`, `progress-complete`, `xprogress-value-<id>`, `feedback.progress.update`, Fabric-Lane `background`, A11y-Lane `a11y` und RMT Shell Authoring.
+
+Determinate und indeterminate Progress-Zustaende duerfen nicht nur ueber Farbe oder Animation vermittelt werden. `aria-valuetext`, die Statusregion und Reduced-Motion-Regeln bleiben deshalb Teil der Public UX-Oberflaeche.