@ccslabs/xtend 0.1.0-rc.1 → 0.1.2

package/docs/de/components/xsection.md

@@ -0,0 +1,125 @@
+# xsection – XTend Komponente
+
+> **Siehe auch:** [xhero](./xhero.md), [xmasonry](./xmasonry.md)
+
+## Übersicht
+
+`<x-section>` ist eine flexible Layout-Komponente für Seitenabschnitte, Container und strukturierte Bereiche. Sie unterstützt Slots, Theming und Responsive Design.
+
+---
+
+## Features
+- Container für beliebige Inhalte
+- Slots für flexible Struktur
+- Theming via CSS Custom Properties
+- Responsive Design
+
+---
+
+## Verwendung
+
+```html
+<x-section>
+  <h2>Abschnitt</h2>
+  <p>Inhalt…</p>
+</x-section>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `variant`   | String  | Layout-Variante (z.B. primary, secondary) |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| –             | –                                   |
+
+---
+
+## API
+- **Variante setzen:** `element.setAttribute('variant', 'primary')`
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const section = document.createElement('x-section');
+section.setAttribute('variant', 'primary');
+document.body.appendChild(section);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-section {
+  --section-bg: #f9f9f9;
+  --section-color: #222;
+}
+```
+
+---
+
+## Accessibility
+- Semantisches HTML
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-section` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Die Komponente ist als Shell-first Layout-Surface fuer RMT geeignet und nutzt den State-Key `xsection-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `layout.measure`
+- Event: `section-rendered`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `container`, `header`, `aside`, `content`, `footer`
+
+## ECH-WP-07 Token-Tabelle und signatureDesign
+
+`signatureDesign`: Editoriale Enterprise-Section mit kontrollierter Flaechenhierarchie, optionaler Kante und overflow-sicheren Inhaltsbahnen. Sie kann plain, framed oder dichtes Dashboard-Layout sein, ohne neue Attribute zu brauchen.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-layout-surface` | Section-Flaeche |
+| `--xtend-layout-text` | Haupttextfarbe |
+| `--xtend-layout-border-color` | Optionale Section-Kante |
+| `--xtend-layout-radius` | Section-Radius |
+| `--xtend-layout-elevation` | Optionaler Section-Schatten |
+| `--xtend-layout-spacing` | Section- und Content-Padding |
+| `--xtend-layout-gap` | Slot-Abstand |
+| `--xtend-layout-font-family` | Section-Typografie |
+| `--xtend-layout-font-size` | Content-Schriftgroesse |
+| `--xtend-layout-media-radius` | Medienradius fuer slotted Content |
+| `--xtend-layout-focus-ring` | Fokus innerhalb der Section |
+| `--xtend-layout-grid-min` | Responsive Inhaltsbasis |
+| `--xtend-layout-content-max` | Section-Maximalbreite |
+
+## ECH-WP-07 Fremdtheme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-section {
+  --xtend-layout-surface: #fffaf2;
+  --xtend-layout-text: #1d2722;
+  --xtend-layout-border-color: rgba(29, 39, 34, 0.18);
+  --xtend-layout-radius: 0.4rem;
+  --xtend-layout-elevation: none;
+  --xtend-layout-spacing: 1.6rem;
+  --xtend-layout-gap: 1.2rem;
+  --xtend-layout-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-layout-font-size: 1rem;
+  --xtend-layout-media-radius: 0.35rem;
+  --xtend-layout-focus-ring: 3px solid #8f4f2a;
+  --xtend-layout-grid-min: minmax(14rem, 1fr);
+  --xtend-layout-content-max: 76rem;
+}
+```

package/docs/de/components/xselect.md

@@ -0,0 +1,105 @@
+# xselect – XTend Komponente
+
+> **Siehe auch:** [xform](./xform.md), [xinput](./xinput.md), [xstate](./xstate.md)
+
+## Uebersicht
+
+`<x-select>` ist das TypeScript-first Selection-Control aus `WP-E10-09`. Die Komponente kapselt ein natives `select`, bleibt form-associated, schreibt ihren Wert nach `xstate` und besitzt RMT-, Fabric-, A11y- und Performance-Metadaten ohne XTend in den RMT-Kernel einzubetten.
+
+## Verwendung
+
+```html
+<x-select id="plan-select" name="plan" value="pro" required>
+  <span slot="label">Plan</span>
+  <option value="starter">Starter</option>
+  <option value="pro">Pro</option>
+  <span slot="error">Bitte einen Plan waehlen.</span>
+</x-select>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `name` | String | Formularname |
+| `value` | String | aktueller Wert |
+| `multiple` | Boolean | erlaubt Mehrfachauswahl |
+| `required` | Boolean | aktiviert native Validierung |
+| `disabled` | Boolean | deaktiviert das Control |
+| `placeholder` | String | optionale Platzhalteroption |
+| `label` | String | ARIA-/Textlabel ohne Slot |
+
+## Slots
+
+| Slot | Zweck |
+|------|-------|
+| default | `option`-Elemente fuer das native Select |
+| `label` | sichtbares Label |
+| `hint` | zusaetzlicher Hinweistext |
+| `error` | Validierungsfehler |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `select-changed` | `{ value, values, source: 'x-select' }` |
+| `select-invalid` | `{ value, message, source: 'x-select' }` |
+
+## API
+
+- `element.value`
+- `element.values`
+- `element.checkValidity()`
+- `element.reportValidity()`
+- `element.validate()`
+- `element.reset()`
+- `element.focus()`
+
+## State, RMT und Fabric
+
+`<x-select>` schreibt nach `xselect-value-<id>` und reagiert auf externe Wertupdates. Die RMT-Metadaten nutzen `xtend.rmt.component-contract.v1`, `adapter: 'xtend.component'` und `kernelBoundary: 'no-rmt-kernel-import-of-xtend-types'`. Shell-first Templates koennen die Komponente als DOM-Descriptor schedulen, waehrend XTend die UI-Oberflaeche bleibt.
+
+## A11y und Performance
+
+Das Control nutzt `role="combobox"`, `aria-describedby`, sichtbare Label-/Hint-/Error-Slots und eine assertive Fehlerregion. Das Performance-Profil ist `xtend.performance.component-profile.v1` mit `budgetClass: 'interactive-medium'`, `lane: 'user-blocking'` und `hydrationPolicy: 'visible'`.
+
+## Form Controls UX ab WP-E11-08
+
+`<x-select>` stellt `xtendFormControlUxProfile` mit `xtend.component.form-control-ux-profile.v1` bereit. Das Profil verbindet Label, Hint, Error, `select-changed`, `select-invalid`, `xselect-value-<id>`, `ui.user-blocking.input`, Fabric-Lane `user-blocking` und RMT Shell Authoring.
+
+## ECH-WP-08 Form Theme/A11y Hardening
+
+`signatureDesign`: Enterprise-Select mit klarer nativer Affordance, nicht-farblicher Validierung und density-sicherem Label-/Helper-Rhythmus.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-form-text` | Host-Textfarbe |
+| `--xtend-form-control-surface` | Select-Flaeche |
+| `--xtend-form-control-text` | Select-Text |
+| `--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` | Select- und Error-Radius |
+| `--xtend-form-gap` | Vertikaler Rhythmus |
+| `--xtend-form-font-family` | Form-Typografie |
+| `--xtend-form-control-font-size` | Select-Schrift |
+| `--xtend-form-helper-font-size` | Helper/Error-Schrift |
+| `--xtend-form-icon-color` | Native Select-Affordance |
+
+Density-Profile: `comfortable`, `compact`, `dense`. Invalid, `disabled`, `required` und `busy` werden visuell und per ARIA gespiegelt.
+
+```css
+[data-xtend-form-theme="enterprise-foreign"] x-select {
+  --xtend-form-control-surface: #fbf8f2;
+  --xtend-form-control-text: #16231f;
+  --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;
+  --xtend-form-radius: 0.35rem;
+}
+```

package/docs/de/components/xsidepanel.md

@@ -0,0 +1,30 @@
+# xsidepanel - XTend Komponente
+
+`x-side-panel` ist die App-Shell-nahe SidePanel-Surface fuer XTend. Sie registriert sich bei einem umgebenden `x-surface-manager`, nutzt den Surface Controller aus `WP-SM-02` und spiegelt Snapshots in Placement, Mode, Pinning, Collapse-State, Groesse und z-Order.
+
+## Attribute
+
+- `surface-id`: stabile Surface-ID
+- `label`: Accessible Name und Panel-Titel
+- `open`, `active`, `collapsed`, `pinned`
+- `placement`: `left`, `right`, `bottom` oder `inline`
+- `mode`: `docked`, `overlay`, `pinned`, `collapsed` oder `fullscreen`
+- `responsive-mode`: Standard `fullscreen-under-720`
+- `resizable`, `route-aware`, `modal`
+- `initial-width`, `initial-height`
+
+## API
+
+`toSurfaceRecord(managerId)` erzeugt ein `xtend.surface.record.v1` mit `type: "side-panel"`. `applySurfaceSnapshot(record)` aktualisiert sichtbaren Status, Bounds, Placement, Mode und A11y-State.
+
+Commands: `openPanel()`, `closePanel(reason)`, `focusPanel()`, `pinPanel()`, `collapsePanel()`, `expandPanel(mode)`, `setPanelMode(mode, placement)`, `resizePanel(bounds)` und `restorePanel()`.
+
+Das Element sendet `surface-panel-command` mit `open`, `close`, `focus`, `resize`, `pin`, `unpin`, `collapse`, `expand`, `dock`, `restore` oder `update`. Der Manager uebersetzt diese Commands in Controller-Operationen beziehungsweise `updateSurface`.
+
+RMT: `xtend.rmt.component-contract.v1`, `xtend.surface.record.v1`, `surface.visible.render`, `surface.user-blocking.open`, `surface.user-blocking.close`, `surface.transition.layout`, `surface.diagnostics.snapshot`.
+
+## ECH-WP-06 Overlay-Paritaet
+
+`x-side-panel` expose `surface`, `backdrop`, `close` und `content` als gemeinsame Overlay-Parts. Der bisherige `scrim` Part bleibt als Alias fuer `backdrop` erhalten. Surface, Text, Border, Elevation, Backdrop, Z-Index und Focus Ring laufen ueber `--xtend-overlay-*` und die komponentennahen `--side-panel-*` Tokens.
+
+`mode="docked"` und `mode="pinned"` bleiben nicht-modal und app-shell-nah. `mode="overlay"` oder `modal` aktivieren den Backdrop und die Overlay-Steuerung fuer SurfaceManager-Orchestrierung.

package/docs/de/components/xspinner.md

@@ -0,0 +1,102 @@
+# xspinner – XTend Komponente
+
+> **Siehe auch:** [xtoast](./xtoast.md), [xalert](./xalert.md)
+
+## Übersicht
+
+`<x-spinner>` ist eine animierte, barrierearme Ladeanzeige für asynchrone Prozesse, Ladezustände und Feedback. Sie ist vielseitig, themable und unterstützt verschiedene Varianten, Overlay-Modus sowie State- und Accessibility-Integration.
+
+---
+
+## Features
+- Animierte Ladeanzeige (Kreis, Dots)
+- Größe, Farbe, Geschwindigkeit, Typ per Attribut
+- Overlay-Modus (zentriert, halbtransparent)
+- Slot für eigenen Inhalt
+- State-Integration via xstate
+- Events für Pause/Resume
+- Theming via CSS Custom Properties & XTheme
+- Accessibility: ARIA, aria-busy, aria-label, aria-valuetext
+- prefers-reduced-motion Support
+
+---
+
+## Verwendung
+
+```html
+<x-spinner size="32" color="#C70039" speed="0.7s" type="dots"></x-spinner>
+```
+
+---
+
+## Attribute
+| Attribut        | Typ     | Beschreibung                                      |
+|-----------------|---------|---------------------------------------------------|
+| `size`          | String  | Größe des Spinners (z.B. 32, 48, 64)              |
+| `color`         | String  | Farbe (CSS-Farbwert, z.B. #007bff)                |
+| `speed`         | String  | Animationsdauer (z.B. 1s, 0.7s)                   |
+| `type`          | String  | "circle" (Standard), "dots"                      |
+| `paused`        | Boolean | Animation pausieren                               |
+| `overlay`       | Boolean | Spinner als Overlay über die Seite                |
+| `aria-label`    | String  | Zugänglicher Text für Screenreader                |
+| `aria-busy`     | String  | ARIA-Status (true/false)                          |
+| `aria-valuetext`| String  | Fortschrittstext für Screenreader                 |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| `spinner-started` | Wird beim Einfügen ausgelöst     |
+| `spinner-stopped` | Wird beim Entfernen ausgelöst    |
+| `paused`          | Animation wurde pausiert         |
+| `resumed`         | Animation wurde fortgesetzt      |
+
+---
+
+## API
+- **Größe setzen:** `element.setAttribute('size', '48')`
+- **Typ ändern:** `element.setAttribute('type', 'dots')`
+- **Pause/Resume:** `element.setAttribute('paused', '')` / `element.removeAttribute('paused')`
+- **Imperative Pause/Resume:** `element.pause()` / `element.resume()`
+- **Snapshot:** `element.snapshot()`
+- **Overlay aktivieren:** `element.setAttribute('overlay', '')`
+- **State-Integration:** `xstate.set('xspinner-paused-'+element.id, true)`
+
+## Feedback Status UX ab WP-E11-09
+
+`<x-spinner>` stellt `xtendFeedbackStatusUxProfile` mit `xtend.component.feedback-status-ux-profile.v1` bereit. Das Profil beschreibt Spinner als Busy-Status mit `spinner-started`, `spinner-stopped`, `paused`, `resumed`, `xspinner-paused-<id>`, `component.visible.mount`, Fabric-Lane `feedback`, A11y-Lane `a11y` und RMT Shell Authoring.
+
+Die Komponente meldet Pause/Resume ueber Events mit `source: 'x-spinner'` und `stateKey`. Animationen sind reduced-motion-safe; Busy-Status und `aria-valuetext` bleiben fuer Screenreader auch ohne sichtbare Bewegung erhalten.
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const spinner = document.createElement('x-spinner');
+spinner.setAttribute('size', '48');
+spinner.setAttribute('type', 'dots');
+document.body.appendChild(spinner);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-spinner {
+  --spinner-color: #007bff;
+  --spinner-size: 40px;
+}
+```
+
+---
+
+## Accessibility
+- ARIA-Rolle, aria-busy, aria-label, aria-valuetext
+- prefers-reduced-motion wird beachtet
+
+---
+
+*Letzte Aktualisierung: 18. Juli 2025*

package/docs/de/components/xstate.md

@@ -0,0 +1,148 @@
+# xstate – XTend Komponente
+
+> **Siehe auch:** [xalert](./xalert.md), [xtoast](./xtoast.md), [xbutton](./xbutton.md), [xtheme](./xtheme.md)
+
+## Übersicht
+
+`xstate` ist das zentrale State-Management-Modul für XTend-Komponenten. Es ermöglicht globale und lokale Zustände, Abonnements und reaktive Updates.
+
+Seit `WP-E12-08` ist `xstate` ausdruecklich als nicht-visuelle **Boundary-Probe** dokumentiert. Das Modul wird nicht zu einem Custom Element umgedeutet. Es stellt stattdessen eine gatebare Adapter-, Typing- und Lifecycle-Oberflaeche fuer XTend UI, Fabric und XTendRMT bereit.
+
+---
+
+## Features
+- Globales und komponentenbasiertes State-Management
+- Abonnements für State-Änderungen mit Key-Filter
+- Reaktive Updates für Komponenten
+- Pfad-Updates, Batch-Updates und Storage-Helfer
+- Kompatibilitäts-Fassade für `on/off`
+- Lifecycle Events fuer State-Operationen
+- Fabric-kompatible Diagnostics Snapshots
+- RMT State Scheduler Adapter ohne Kernel-Kopplung
+
+---
+
+## Verwendung
+
+```js
+import { xstate } from 'components/xstate.js';
+
+xstate.set('key', 'value');
+const value = xstate.get('key');
+const unsubscribe = xstate.subscribe((key, value, allData) => { ... }, 'key');
+```
+
+---
+
+## API
+| Methode | Beschreibung |
+|---------|--------------|
+| `get(key)` | Gibt den Wert für einen Schlüssel zurück |
+| `set(key, val)` | Setzt einen Wert und benachrichtigt Listener |
+| `subscribe(fn, keyFilter?)` | Kanonischer Subscription-Contract mit optionalem Key-Filter |
+| `remove(key)` | Entfernt einen Schlüssel aus dem State |
+| `getPath(path)` | Liest verschachtelte Werte über Dot-Notation |
+| `setPath(path, value)` | Schreibt verschachtelte Werte über Dot-Notation |
+| `batchUpdate(updates)` | Führt mehrere Updates in einem Schritt aus |
+| `saveToStorage(type?, key?)` | Persistiert den State in Local- oder Session-Storage |
+| `loadFromStorage(type?, key?)` | Lädt den State aus Browser-Storage |
+| `on(key, fn)` | Legacy-Kompatibilität für key-basierte Listener |
+| `off(key, fn)` | Entfernt einen per `on` registrierten Listener |
+| `subscribeLifecycle(fn)` | Abonniert Lifecycle-/Diagnostics-Events der State-Boundary |
+| `snapshot()` | Liefert einen stabilen State-Snapshot fuer Tests und Adapter |
+| `snapshotDiagnostics()` | Liefert Fabric-kompatible Diagnostics |
+| `createRmtStateAdapter(options?)` | Erstellt einen host-neutralen RMT State Adapter |
+
+---
+
+## Beispiel: State in Komponente nutzen
+
+```js
+xstate.set('user', { name: 'Konni' });
+const unsubscribe = xstate.subscribe((key, value) => {
+  if (key === 'user') {
+    // Reagiere auf Änderungen
+  }
+});
+```
+
+### Kanonische Empfehlung
+
+- Neue Core-Implementierungen sollen `subscribe(fn, keyFilter)` verwenden.
+- `on/off` bleiben als Kompatibilitäts-Fassade erlaubt, sind aber nicht der kanonische Contract.
+
+---
+
+## Boundary-Probe Contract
+
+`xstate` ist kein visuelles Element. Die Component-Catalog-Haertung prueft es deshalb als Infrastruktur-Boundary:
+
+- Boundary Schema: `xtend.state.boundary-probe.v1`
+- Snapshot Schema: `xtend.state.snapshot.v1`
+- Lifecycle Schema: `xtend.state.lifecycle-event.v1`
+- Diagnostics Schema: `xtend.fabric.state-diagnostics.v1`
+- RMT Compatibility Schema: `xtend.rmt.state-scheduler-compatibility.v1`
+- Kernel Boundary: `no-rmt-kernel-import-of-xtend-types`
+
+```js
+import { xstate } from '/components/xstate.js';
+
+const unsubscribeLifecycle = xstate.subscribeLifecycle((event, diagnostics) => {
+  console.log(event.type, diagnostics.operationCounts);
+});
+
+xstate.set('rmt.bridge.ready', true);
+
+const snapshot = xstate.snapshot();
+const diagnostics = xstate.snapshotDiagnostics();
+
+unsubscribeLifecycle();
+```
+
+## RMT State Scheduler Compatibility
+
+RMT darf `xstate` nicht direkt importieren. Ein XTend Host kann aber bewusst einen Adapter erzeugen und an die State-/Scheduler-/Diagnostics-Bridge uebergeben:
+
+```js
+const stateAdapter = xstate.createRmtStateAdapter({
+  schedulerId: 'docs.app.shell'
+});
+
+stateAdapter.set('rmt.scheduler.lastEndpoint', {
+  id: 'docs.header.search',
+  lane: 'user-blocking'
+});
+
+stateAdapter.snapshot();
+stateAdapter.diagnostics();
+```
+
+Damit bleibt XTendRMT framework-agnostisch. `xstate` ist eine optionale Host-Capability und keine Kernel-Abhaengigkeit.
+
+---
+
+## XTendRMT Bridge State
+
+XTendRMT nutzt `xstate` optional als Host-State-Spiegel. Die State-/Scheduler-/Diagnostics Bridge schreibt nur dann in `xstate`, wenn ein Host ihr ein kompatibles Ziel uebergibt. Ohne `xstate` bleibt ein in-memory State Handle aktiv.
+
+Aktuelle Bridge-Keys:
+
+- `rmt.bridge.ready`
+- `rmt.scheduler.lastEndpoint`
+- `rmt.adapter.lastResult`
+- `rmt.diagnostics.last`
+- `rmt.route.<id>.lastResult`
+- `rmt.component.<id>.lastResult`
+
+Die Implementierung liegt in `createRmtStateSchedulerDiagnosticsBridge`; Details stehen in [XTendRMT Runtime Bridge](../xtendrmt-runtime-bridge.md).
+
+---
+
+## Hinweise
+- Wird von fast allen XTend-Komponenten genutzt
+- Kann auch für eigene Zwecke verwendet werden
+- Im XTend-Core ist `xstate` das erste Bootstrap-Basismodul
+
+---
+
+*Letzte Aktualisierung: 7. Mai 2026*

package/docs/de/components/xstatus.md

@@ -0,0 +1,55 @@
+# xstatus - XTend Komponente
+
+> **Siehe auch:** [xalert](./xalert.md), [xtoast](./xtoast.md), [xprogress](./xprogress.md), [xstate](./xstate.md)
+
+## Uebersicht
+
+`<x-status>` ist ein Fabric- und RMT-faehiges Status-Control aus `WP-E10-10`. Es stellt Scheduler-, Validierungs- und Systemrueckmeldungen als Live Region dar und bleibt bewusst klein genug, um in RMT-Shells als Feedback-Baustein genutzt zu werden.
+
+## Verwendung
+
+```html
+<x-status id="route-status" type="warning" state="validating" message="Validation is running" dismissible busy>
+  <span slot="label">Scheduler status</span>
+</x-status>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `type` | String | `info`, `success`, `warning` oder `error` |
+| `state` | String | fachlicher Status-Key |
+| `message` | String | sichtbare Meldung |
+| `dismissible` | Boolean | zeigt Schliessen-Aktion |
+| `busy` | Boolean | setzt `aria-busy` |
+| `polite` | Boolean | erzwingt polite Live Region |
+| `label` | String | Label ohne Slot |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `status-changed` | `{ type, status, message, busy, source: 'x-status' }` |
+| `status-dismissed` | `{ type, status, message, busy, source: 'x-status' }` |
+
+## API
+
+- `element.state`
+- `element.setStatus(nextState)`
+- `element.announce(message?)`
+- `element.dismiss()`
+
+## State, RMT und Fabric
+
+`<x-status>` schreibt nach `xstatus-state-<id>`. RMT kann ueber `xtend.rmt.component-contract.v1` Status-Updates auf `feedback.status.update` schedulen, ohne XTend intern zu importieren. Der Kernel Boundary bleibt `no-rmt-kernel-import-of-xtend-types`; die UI-Komponente ist der Adapter nach aussen.
+
+## A11y und Performance
+
+Das Control nutzt `role="status"` fuer polite Meldungen und `role=alert` fuer kritische Warn-/Fehlerpfade. `scheduler-feedback`, `status-update` und `validation-feedback` sind als Screenreader-Signale dokumentiert. Das Performance-Profil ist `xtend.performance.component-profile.v1` mit `budgetClass: 'feedback-small'`, `lane: 'feedback'` und `hydrationPolicy: 'visible'`.
+
+## Feedback Status UX ab WP-E11-09
+
+`<x-status>` stellt `xtendFeedbackStatusUxProfile` mit `xtend.component.feedback-status-ux-profile.v1` bereit. Das Profil verbindet `status-changed`, `status-dismissed`, `xstatus-state-<id>`, `feedback.status.update`, Fabric-Lane `feedback`, A11y-Lane `a11y` und RMT Shell Authoring.
+
+Die Komponente ist der gemeinsame Inline-Status fuer Forms, Scheduler, Route-Feedback und Diagnostics. Sie vermeidet reine Farbkommunikation, bleibt forced-colors-safe und kann per `announce()` explizit als Live-Region aktualisiert werden.

package/docs/de/components/xsummary.md

@@ -0,0 +1,78 @@
+# xsummary - XTend Komponente
+
+## Uebersicht
+
+`<x-summary>` ist eine ausklappbare Disclosure-Komponente fuer kompakte Detailbereiche. Sie nutzt native `<details>`/`<summary>` Semantik, spiegelt ihren Open-State in `xstate` und eignet sich fuer FAQ-Bloecke, technische Details, Inline-Hilfen oder Dashboard-Zusammenfassungen.
+
+## Verwendung
+
+```html
+<x-summary id="billing-details" type="info" open>
+  <span slot="title">Abrechnungsdetails</span>
+  <p>Alle Rechnungspositionen werden nach Projekt und Zeitraum gruppiert.</p>
+</x-summary>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `open` | boolean | oeffnet den Detailbereich |
+| `type` | string | visuelle Variante: `info`, `success`, `warning`, `danger` |
+
+## Slots
+
+| Slot | Beschreibung |
+|------|--------------|
+| `title` | Inhalt des klickbaren Summary-Kopfs |
+| default | ausklappbarer Inhalt |
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `open` | wird beim Oeffnen ausgelöst |
+| `close` | wird beim Schliessen ausgeloest |
+
+Das Event-Detail enthaelt:
+
+```js
+{
+  open: true
+}
+```
+
+## State-Contract
+
+Die Instanz nutzt einen kompatiblen `xstate`-Key:
+
+```js
+xsummary-open-<id>
+```
+
+Wenn keine `id` gesetzt ist, erzeugt die Komponente eine stabile Runtime-ID fuer die aktuelle Instanz. Externe State-Aenderungen auf den Key koennen die Komponente oeffnen oder schliessen.
+
+Die Synchronisierung ist reentrant-sicher: Attribute, nativer `<details>`-State und `xstate` werden ueber eine zentrale Open-State-Routine abgeglichen. Unveraenderte Werte werden nicht erneut in `xstate` publiziert, damit externe State-Updates keine rekursive `open()`/`close()`-Schleife ausloesen.
+
+## A11y
+
+- Das native `<summary>` bleibt die primaere Tastatur- und Screenreader-Oberflaeche.
+- `Enter` und `Space` toggeln den Zustand.
+- `aria-expanded` wird mit dem aktuellen Open-State synchronisiert.
+- Der Summary-Kopf ist fokussierbar und besitzt einen sichtbaren Fokuszustand.
+
+## Hinweise
+
+- `x-summary` ist eine interaktive Display-Komponente und seit `ER-WP-33` component-suite-gated.
+- Die Catalog Coverage Matrix fuehrt die Komponente nun als `contract-gated`.
+- Weitere Contract-Haertung fuer Performance, Browser-Regression und Long-Tail-Abdeckung folgt in `ER-WP-35`; Public Types und Event Details sind seit `ER-WP-34` vorhanden.
+
+## Layout Display Media UX Profil
+
+`x-summary` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Die Komponente bleibt Disclosure-Display-Shell und nutzt den State-Key `xsummary-open-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `component.visible.mount`
+- Events: `open`, `close`
+- Snapshot: `snapshot()`
+- CSS Parts: `container`, `summary`, `content`

package/docs/de/components/xsurfacemanager.md

@@ -0,0 +1,27 @@
+# xsurfacemanager - XTend Komponente
+
+`x-surface-manager` ist die App-Shell-Surface-Wurzel fuer Multi Window Oberflaechen. Die Komponente instanziiert den `xtend.surface.controller.v1`, registriert slotted `x-surface-window`, `x-side-panel` und kompatible Overlay-Elemente und spiegelt Layout-, Fokus- und Lifecycle-Aenderungen als `xtend.surface.snapshot.v1`.
+
+## Attribute
+
+- `manager-id`: stabile Manager-ID fuer Surface Records
+- `state-key`: xstate Registry-Key, standardmaessig `xtend.surface.registry`
+- `layout`: Layout-Profil fuer die Surface-Zone
+- `restore-key`: spaeterer Persistence-Key fuer Layout-Restore
+- `route-aware`: markiert Route-gebundene Surface-Verwaltung
+- `modal-policy`: Policy fuer spaetere modale Surface-Stacks
+
+## Slots
+
+- `windows`: frei positionierbare Windows
+- `panels`: `x-side-panel` Surfaces mit Docked/Pinned/Overlay/Collapsed Modes
+- `overlays`: optionale Overlay-Bridge fuer `x-modal`, `x-dialog` und `x-drawer`
+- `default`: einfache Light-DOM-Fallbacks
+
+## API
+
+`registerSurface(surface)`, `openSurface(id)`, `closeSurface(id)`, `focusSurface(id)`, `updateSurface(id, patch)`, `moveSurface(id, bounds)`, `resizeSurface(id, bounds)`, `minimizeSurface(id)`, `maximizeSurface(id)`, `restoreSurface(id)`, `pinSurface(id)`, `collapseSurface(id)`, `expandSurface(id)`, `dockSurface(id)` und `snapshot()` delegieren auf den Surface Controller.
+
+Events: `surface-manager-ready`, `surface-registered`, `surface-opened`, `surface-closed`, `surface-focused`, `surface-updated`, `surface-layout-changed`, `surface-window-command`, `surface-panel-command` und `surface-overlay-command`.
+
+RMT: `xtend.rmt.component-contract.v1`, `xtend.surface.manager.v1`, `xtend.surface.controller.v1`, `xtend.surface.overlay-stack-bridge.v1`, `surface.visible.render`, `surface.user-blocking.open`, `surface.user-blocking.close`, `surface.transition.layout`, `surface.diagnostics.snapshot`.