@ccslabs/xtend 0.1.0-rc.1

package/docs/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/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/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/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/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`.

package/docs/components/xsurfacewindow.md

@@ -0,0 +1,21 @@
+# xsurfacewindow - XTend Komponente
+
+`x-surface-window` ist die erste sichtbare WindowManager-Surface fuer XTend. Sie registriert sich bei einem umgebenden `x-surface-manager`, stellt Window-Chrome, Aktionen, Bounds und Content-Slot bereit und spiegelt Controller-Snapshots in Attribute und CSS-Variablen.
+
+## Attribute
+
+- `surface-id`: stabile Surface-ID
+- `label`: Accessible Name und Window-Titel
+- `open`, `active`, `minimized`, `maximized`
+- `draggable`, `resizable`, `modal`
+- `initial-x`, `initial-y`, `initial-width`, `initial-height`
+
+## API
+
+`toSurfaceRecord(managerId)` erzeugt ein `xtend.surface.record.v1` fuer den Manager. `applySurfaceSnapshot(record)` aktualisiert sichtbaren Status, Bounds und z-Order.
+
+Commands: `openWindow()`, `closeWindow(reason)`, `focusWindow()`, `minimizeWindow()`, `maximizeWindow()` und `restoreWindow()`.
+
+Das Element sendet `surface-window-command` mit `open`, `close`, `focus`, `move`, `resize`, `minimize`, `maximize`, `restore` oder `update`. Der Manager uebersetzt diese Commands in Controller-Operationen.
+
+RMT: `xtend.rmt.component-contract.v1`, `xtend.surface.record.v1`, `surface.user-blocking.open`, `surface.user-blocking.close`, `surface.transition.layout`, `surface.diagnostics.snapshot`.

package/docs/components/xtabs.md

@@ -0,0 +1,160 @@
+# xtabs – XTend Komponente
+
+> **Siehe auch:** [xsection](./xsection.md), [xstate](./xstate.md)
+
+## Übersicht
+
+`<x-tabs>` ist eine Komponente für Tab-Navigation und strukturierte Inhalte. Sie unterstützt dynamische Tabs, Theming und State-Integration.
+
+---
+
+## Features
+- Dynamische Tab-Navigation
+- Slot für Tab-Inhalte
+- State-Integration via xstate
+- Theming via CSS Custom Properties
+
+---
+
+## Verwendung
+
+```html
+<x-tabs selected="0">
+  <x-tab name="Tab 1">Inhalt 1</x-tab>
+  <x-tab name="Tab 2">Inhalt 2</x-tab>
+</x-tabs>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| –           | –       | –                                   |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| `tab-selected` | Tab-Wechsel mit `{ index }`, `bubbles: true`, `composed: true` |
+
+---
+
+## API
+- **Tabs per Slot einfügen**
+- **State-Integration:** Automatisch via xstate
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const tabs = document.createElement('x-tabs');
+tabs.innerHTML = '<div slot="tab" label="A">A</div>';
+document.body.appendChild(tabs);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-tabs {
+  --tab-active-bg: #007bff;
+}
+```
+
+---
+
+## Accessibility
+
+`x-tabs` rendert einen `role="tablist"` Header, erzeugt pro Button `role="tab"` und verbindet Buttons und Panels ueber `aria-controls` sowie `aria-labelledby`.
+
+Die Keyboard-Navigation nutzt roving `tabindex`:
+
+| Taste | Verhalten |
+|-------|-----------|
+| `ArrowRight` | naechster Tab |
+| `ArrowLeft` | vorheriger Tab |
+| `Home` | erster Tab |
+| `End` | letzter Tab |
+| `Enter` / `Space` | fokussierten Tab aktivieren |
+
+Aktive Panels tragen `role="tabpanel"` und `aria-hidden="false"`; inaktive Panels werden mit `hidden` und `aria-hidden="true"` aus der sichtbaren Navigation genommen.
+
+## Performance-Profil ab WP-E12-02
+
+`x-tabs` besitzt ein explizites `xtendScaffoldPerformanceProfile` unter `xtend.performance.component-profile.v1`.
+
+| Feld | Wert |
+|------|------|
+| Budget-Klasse | `critical` |
+| Lane | `user-blocking` |
+| Hydration Policy | `visible` |
+| Tab-Switch Budget | `16 ms` |
+| Keyboard Budget | `16 ms` |
+| Render Update Budget | `28 ms` |
+
+RMT-Shells koennen `x-tabs` ueber `ui.user-blocking.tabs`, `route.transition.tab`, `component.visible.hydrate` und `diagnostics.snapshot` schedulen. Der RMT-Kernel bleibt dabei framework-agnostisch; die XTend-spezifischen Daten liegen im Component-Adapter-Metadatenprofil.
+
+Die Runtime stellt `getPerformanceBudget()` und `snapshotPerformance()` bereit. `snapshotPerformance()` liefert lokale Messpunkte fuer Hydration, Render, Tab-Switch und Keyboard-Interaktionen, damit Fabric oder ein spaeterer Reporter die Daten aufnehmen kann.
+
+## Component-Level-Contract ab ER-WP-33
+
+- `selected` bestimmt den aktiven Tab-Index.
+- `text-color` synchronisiert die Textfarbe in den Tab-Header.
+- `tab-selected` wird nach einem Tabwechsel mit `{ index }` emittiert.
+- `xtabs-selected` ist der kanonische `xstate`-Key fuer externe Tabwechsel.
+- Keyboard-Navigation umfasst `ArrowRight`, `ArrowLeft`, `Home`, `End`, `Enter` und `Space`.
+- `data-rmt-schedule="ui.user-blocking.tabs"` und `data-xtend-lane="user-blocking"` bilden die Fixture-Linie fuer RMT/Fabric-Scheduling.
+- `snapshotPerformance()` macht das WP-E12-02 Runtime-Budget testbar.
+- Seit `WP-E12-03` sind Browser-Smoke und Theme-Matrix explizit auf `x-tabs` Keyboard-, ARIA- und Theme-Shell-Journeys erweitert.
+
+---
+
+*Letzte Aktualisierung: 7. Mai 2026*
+
+## ECH-WP-09 Token-Tabelle und Navigation States
+
+`signatureDesign`: `x-tabs` erzeugt eine eigenstaendige Enterprise-Tabnavigation mit sichtbarer Selected-Schiene, wrap-sicheren Labels und frei austauschbarer Typografie. Active/Current/Selected, Hover, Focus und Disabled sind ueber gemeinsame Navigationstokens themebar.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-nav-surface` | Tablist-Surface |
+| `--xtend-nav-text` | Tab-Text |
+| `--xtend-nav-border-color` | Tab- und Tablist-Kanten |
+| `--xtend-nav-radius` | Tab-Radius |
+| `--xtend-nav-gap` | Abstand zwischen Tabs |
+| `--xtend-nav-font-family` | Tab-Typografie |
+| `--xtend-nav-font-size` | Tab-Textgroesse |
+| `--xtend-nav-active-surface` | Selected-Flaeche |
+| `--xtend-nav-active-text` | Selected-Text |
+| `--xtend-nav-current-indicator` | nicht farb-only Selected-Indikator |
+| `--xtend-nav-hover-surface` | Hover-Flaeche |
+| `--xtend-nav-focus-ring` | Tastaturfokus |
+| `--xtend-nav-disabled-opacity` | Disabled-Dimmung |
+
+## ECH-WP-09 Keyboard-Verhalten
+
+`ArrowRight`, `ArrowLeft`, `Home`, `End`, `Enter` und `Space` bleiben die verbindlichen Tasten. Disabled Tabs werden nicht fokussiert oder aktiviert. Active/Current/Selected wird ueber `aria-selected="true"` am Tab und `role="tabpanel"` am Panel gespiegelt; Route-Tabs koennen zusaetzlich `aria-current="page"` durch Host-Logik tragen.
+
+## ECH-WP-09 Fremdtheme
+
+```css
+[data-xtend-nav-theme="enterprise-foreign"] x-tabs {
+  --xtend-nav-surface: #f3f0e8;
+  --xtend-nav-text: #202520;
+  --xtend-nav-border-color: rgba(32, 37, 32, 0.24);
+  --xtend-nav-radius: 0.35rem;
+  --xtend-nav-gap: 0.4rem;
+  --xtend-nav-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-nav-font-size: 0.95rem;
+  --xtend-nav-active-surface: #243c34;
+  --xtend-nav-active-text: #fff9ed;
+  --xtend-nav-current-indicator: #a65f2d;
+  --xtend-nav-hover-surface: rgba(166, 95, 45, 0.14);
+  --xtend-nav-focus-ring: 3px solid #a65f2d;
+  --xtend-nav-disabled-opacity: 0.42;
+}
+```