@ccslabs/xtend 0.1.0-rc.1 → 0.1.2

package/docs/de/components/xinput.md

@@ -0,0 +1,129 @@
+# xinput – XTend Komponente
+
+> **Siehe auch:** [xform](./xform.md), [xstate](./xstate.md)
+
+## Übersicht
+
+`<x-input>` ist ein vielseitiges Eingabefeld mit Theming, State-Integration und voller Unterstützung für Formulare.
+
+---
+
+## Features
+- Standard-Input mit Slot für Label
+- State-Integration via xstate
+- Theming via CSS Custom Properties
+- Form-Integration
+
+---
+
+## Verwendung
+
+```html
+<x-input value="Hallo"></x-input>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `value`     | String  | Wert des Eingabefelds                |
+| `type`      | String  | Typ des Inputs (text, number, etc.)  |
+| `placeholder`| String | Platzhaltertext                      |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| `input`       | Bei Eingabe ausgelöst                |
+| `change`      | Bei Wertänderung ausgelöst           |
+| `input-changed` | aktueller XTend-Contract bei Wertänderung, Detail: `{ value }` |
+| `validation-failed` | Validierungsfehler, Detail: `{ value }` |
+
+---
+
+## API
+- **Wert setzen/lesen:** `element.value = 'Text'`
+- **State-Integration:** Automatisch via xstate
+- **Validierung:** `element.checkValidity()`, `element.reportValidity()`
+- **Reset:** `element.reset()`
+
+## State-Contract ab ER-WP-33
+
+`<x-input>` schreibt seinen Wert nach `xinput-value-<id>` und reagiert auf externe Änderungen dieses Keys. Die Validierungsregion nutzt `role="alert"` und `aria-live="assertive"`, sodass Formularfehler nicht nur farblich, sondern auch semantisch sichtbar werden.
+
+## Form Controls UX ab WP-E11-08
+
+`<x-input>` stellt `xtendFormControlUxProfile` mit `xtend.component.form-control-ux-profile.v1` bereit. Das Profil bindet Label, Hint, Error, `input-changed`, `validation-failed`, `xinput-value-<id>`, `ui.user-blocking.input`, Fabric-Lane `user-blocking` und RMT Shell Authoring zusammen.
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const input = document.createElement('x-input');
+input.value = 'Hallo';
+document.body.appendChild(input);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-input {
+  --input-border: 1px solid #ccc;
+  --input-bg: #fff;
+  --input-bg-dark: #0f0f12;
+  --input-placeholder-color-dark: #b8c4d4;
+}
+```
+
+`<x-input>` nutzt automatisch `--xtend-surface` und `--xtend-text` aus `x-theme`. In `data-theme="dark"` wird ein dunkler Hintergrund ueber `--input-bg-dark`, `--xtend-control-bg-dark` oder den Theme-Surface-Fallback gesetzt, damit Text und Suchfelder in der Docs-App lesbar bleiben.
+
+---
+
+## Accessibility
+- Label-Slot, ARIA, Form-Integration
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## ECH-WP-08 Form Theme/A11y Hardening
+
+`signatureDesign`: Praezises Enterprise-Textfeld mit ruhiger Flaeche, klarer Status-Typografie und dichter, aber lesbarer Form-Rhythmik.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-form-text` | Host-Textfarbe |
+| `--xtend-form-control-surface` | Eingabeflaeche |
+| `--xtend-form-control-text` | Eingabetext |
+| `--xtend-form-label-text` | Label |
+| `--xtend-form-helper-text` | Helper/Hinweis |
+| `--xtend-form-error-text` | Fehlertext |
+| `--xtend-form-error-surface` | Fehlerflaeche |
+| `--xtend-form-error-border` | Fehlerkante und Marker |
+| `--xtend-form-focus-ring` | Native Focus-Outline |
+| `--xtend-form-radius` | Control- und Error-Radius |
+| `--xtend-form-gap` | Label-, Helper- und Error-Abstand |
+| `--xtend-form-font-family` | Form-Typografie |
+| `--xtend-form-control-font-size` | Control-Schrift |
+| `--xtend-form-helper-font-size` | Helper/Error-Schrift |
+| `--xtend-form-icon-color` | Icon-/Affordance-Farbe fuer Controls mit Icon |
+
+Density-Profile: `density="comfortable"`, `density="compact"` und `density="dense"`. Invalid/Error ist nicht farb-only: Control-Kante, innerer Ring und Error-Marker bleiben auch in Dark/Forced-Colors erkennbar.
+
+```css
+[data-xtend-form-theme="enterprise-foreign"] x-input {
+  --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/xlightbox.md

@@ -0,0 +1,98 @@
+# xlightbox – XTend Komponente
+
+> **Siehe auch:** [xplayer](./xplayer.md)
+
+## Übersicht
+
+`<x-lightbox>` ist eine Komponente zur Anzeige von Bildern im viewportweiten Overlay. Sie unterstuetzt Trigger-Slots, API-gesteuertes Oeffnen, Escape Close, Focus Return und viewport-bounded Media-Skalierung.
+
+---
+
+## Features
+- Overlay für Bilder und Medien
+- Trigger-Slot und globale Helper-API
+- Keyboard-Support mit Escape Close
+- Viewport-bounded Bildskalierung mit Body-Portal
+- Theming via CSS Custom Properties
+
+---
+
+## Verwendung
+
+```html
+<x-lightbox id="logo-lightbox" src="/assets/logo.png" alt="XTend Logo">
+  <x-button slot="trigger" variant="secondary">Logo ansehen</x-button>
+</x-lightbox>
+
+<img src="/assets/preview.jpg" data-xlightbox alt="Preview" />
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `src`       | String  | Bildquelle fuer Trigger, API und `data-xlightbox` |
+| `open`      | Boolean | oeffnet die Lightbox kontrolliert, sofern `src` gesetzt ist |
+| `alt`       | String  | Alternativtext fuer das angezeigte Bild |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| `lightbox-opened` | Wird beim Oeffnen ausgelöst, Detail: `{ src }` |
+| `lightbox-closed` | Wird beim Schliessen ausgelöst |
+
+---
+
+## API
+- **Oeffnen:** `element.open(src)`
+- **Schliessen:** `element.close()`
+- **Globaler Helper:** `window.showLightbox(src)`
+- **State:** `xlightbox-open-<id>`
+
+`src` konfiguriert die Bildquelle, oeffnet die Lightbox aber nicht automatisch. Fuer direkte UI-Nutzung wird ein Element im Slot `trigger` verwendet. Beim Oeffnen portalt sich die Lightbox auf `document.body`, damit Overlay und Bild nicht von App-Shell-Containern, `main`, Cards oder transformierten Demo-Frames abgeschnitten werden.
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const lightbox = document.createElement('x-lightbox');
+document.body.appendChild(lightbox);
+lightbox.open('/assets/bild.jpg');
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-lightbox {
+  --lightbox-bg: rgba(0,0,0,0.9);
+  --lightbox-padding: clamp(0.75rem, 2vw, 2rem);
+  --lightbox-radius: 0.75rem;
+}
+```
+
+---
+
+## Accessibility
+- Fokus-Management, Keyboard-Navigation und Focus Return
+- `role="dialog"`, `aria-modal="true"` und geschlossener Zustand mit `aria-hidden` und `inert`
+- Bildskalierung via `object-fit: contain` und `max-height: calc(100dvh - padding)`
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-lightbox` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Die Komponente verbindet Overlay- und Media-Reife und nutzt den State-Key `xlightbox-open-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `media.lazy.load`
+- Events: `lightbox-opened`, `lightbox-closed`
+- Snapshot: `snapshot()`
+- CSS Parts: `overlay`, `content`, `close`, `media`

package/docs/de/components/xlink.md

@@ -0,0 +1,109 @@
+# xlink - XTend Komponente
+
+## Uebersicht
+
+`<x-link>` ist die deklarative Link-Komponente fuer XTend-SPAs. Sie arbeitet mit `<x-router>` zusammen, erkennt Hash- und History-Mode und haelt den Active-State auch bei programmatischer Navigation aktuell.
+
+## Verwendung
+
+```html
+<x-link href="/docs">Zur Dokumentation</x-link>
+<x-link href="https://example.com">Externer Link</x-link>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `href` | string | Zielpfad oder externe URL |
+| `active` | boolean | wird gesetzt, wenn der Link aktuell aktiv ist |
+| `state` | string | optionales JSON fuer `history.pushState()` |
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `before-navigate` | cancelable, vor der Navigation |
+| `after-navigate` | nach erfolgreicher Navigation |
+
+`before-navigate` und `after-navigate` liefern:
+
+```js
+{
+  href: '/docs',
+  mode: 'history',
+  state: { ... },
+  source: 'x-link',
+  stateKey: 'xlink-active-link-123',
+  scheduleRef: 'ui.user-blocking.navigation'
+}
+```
+
+## Contract
+
+- interne Links werden normalisiert und spa-konform navigiert
+- externe Links behalten Standardverhalten und erhalten automatisch `target="_blank"` plus `rel="noopener noreferrer"`
+- Active-State wird bei `popstate`, `hashchange`, `x-navigate` und `xrouter-after-navigate` aktualisiert
+- aktive Links spiegeln `aria-current="page"` und `xlink-active-<id>`
+- Enter und Space aktivieren denselben Navigationspfad
+- lange Labels und slotted Icon-/Text-Inhalte bleiben overflow-sicher in engen Menüs, Sidebars und Header-Drawern
+
+## Navigation Routing UX Profil
+
+`<x-link>` stellt `xtendNavigationRoutingUxProfile` mit `xtend.component.navigation-routing-ux-profile.v1` bereit. Das Profil beschreibt `x-link` als Router-Link mit `before-navigate`, `after-navigate`, `x-navigate`, `xlink-active-<id>`, `ui.user-blocking.navigation`, Active State, Keyboard-Aktivierung, Fabric-Lane `user-blocking` und RMT Shell Authoring.
+
+Die Link-Komponente delegated Route Announcements an `x-router`, bleibt aber selbst fuer sichtbaren Active State, Keyboard-Aktivierung und sichere externe Links verantwortlich.
+
+## Overflow-Sicherheit
+
+`x-link` ist fuer App-Shell-Navigation, Menues und Sidebars overflow-sicher. Der Host begrenzt sich auf den verfuegbaren Container, slotted Inhalte erhalten `min-width: 0`, und lange Labels duerfen umbrechen. Fuer bewusst einzeilige Links kann `--xtend-link-white-space: nowrap` gesetzt werden.
+
+## Hinweise
+
+- der Router-Mode wird am ersten gefundenen `<x-router>` erkannt
+- gleiche Zielpfade fuehren keinen redundanten URL-Wechsel aus
+- `x-link` nutzt denselben Navigationsvertrag wie `x-router`
+
+## ECH-WP-09 Token-Tabelle und Navigation States
+
+`signatureDesign`: `x-link` ist der kompakte Enterprise-Router-Link mit sichtbarem Current-Indikator und tokenisiertem Active/Disabled-Verhalten. Active/Current/Selected, Hover, Focus und Disabled muessen auch in dichten Headern, Sidebars und Menues lesbar bleiben.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-nav-surface` | Link-Surface |
+| `--xtend-nav-text` | Link-Text |
+| `--xtend-nav-border-color` | geteilte Navigationskante |
+| `--xtend-nav-radius` | Link-Radius |
+| `--xtend-nav-gap` | Abstand zwischen Icon und Label |
+| `--xtend-nav-font-family` | Link-Typografie |
+| `--xtend-nav-font-size` | Link-Textgroesse |
+| `--xtend-nav-active-surface` | Active/Current/Selected Flaeche |
+| `--xtend-nav-active-text` | Active/Current/Selected Text |
+| `--xtend-nav-current-indicator` | nicht farb-only Current-Indikator |
+| `--xtend-nav-hover-surface` | Hover-Flaeche |
+| `--xtend-nav-focus-ring` | Tastaturfokus |
+| `--xtend-nav-disabled-opacity` | Disabled-Dimmung |
+
+## ECH-WP-09 Keyboard-Verhalten
+
+`Enter` und `Space` aktivieren interne Links ueber denselben Navigationspfad wie Click. Disabled Links entfernen den internen `href`, setzen `aria-disabled="true"` und sind nicht tastaturaktivierbar. Active/Current wird ueber `aria-current="page"` gespiegelt; Composite-Navigation kann `aria-selected="true"` auf dem Host ergaenzen.
+
+## ECH-WP-09 Fremdtheme
+
+```css
+[data-xtend-nav-theme="enterprise-foreign"] x-link {
+  --xtend-nav-surface: transparent;
+  --xtend-nav-text: #17231f;
+  --xtend-nav-border-color: transparent;
+  --xtend-nav-radius: 0.3rem;
+  --xtend-nav-gap: 0.4rem;
+  --xtend-nav-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-nav-font-size: 0.96rem;
+  --xtend-nav-active-surface: rgba(181, 107, 53, 0.16);
+  --xtend-nav-active-text: #173f35;
+  --xtend-nav-current-indicator: #b56b35;
+  --xtend-nav-hover-surface: rgba(181, 107, 53, 0.1);
+  --xtend-nav-focus-ring: 3px solid #b56b35;
+  --xtend-nav-disabled-opacity: 0.44;
+}
+```

package/docs/de/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/de/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;
+}
+```