@ccslabs/xtend 0.1.0-rc.1

package/docs/components/xhero.md

@@ -0,0 +1,142 @@
+# xhero – XTend Komponente
+
+> **Siehe auch:** [xsection](./xsection.md), [xbutton](./xbutton.md)
+
+## Übersicht
+
+`<x-hero>` ist eine flexible Hero-Komponente für aufmerksamkeitsstarke Headerbereiche, Landingpages und Einstiege. Sie unterstützt Slots für Titel, Untertitel, Aktionen und Medien.
+
+---
+
+## Features
+- Flexibles Layout für Hero-Bereiche
+- Slots für Titel, Text, Aktionen, Medien
+- Theming via CSS Custom Properties
+- Theme-Varianten über `background-light`, `background-dark`, `font-color-light`, `font-color-dark`, `overlay-light` und `overlay-dark`
+- Responsive Design
+
+---
+
+## Verwendung
+
+```html
+<x-hero>
+  <h1 slot="title">Willkommen!</h1>
+  <p slot="subtitle">XTend macht Webentwicklung einfach.</p>
+  <x-button slot="action">Loslegen</x-button>
+</x-hero>
+```
+
+---
+
+## Attribute
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `background` | String | Fester Hintergrund oder CSS-Variable |
+| `background-light` | String | Hintergrund für helle Themes |
+| `background-dark` | String | Hintergrund für dunkle Themes |
+| `background-image` | String | Bildhintergrund |
+| `overlay` | Boolean | Aktiviert Overlay-Fläche |
+| `overlay-light` | String | Overlay-Farbe für helle Themes |
+| `overlay-dark` | String | Overlay-Farbe für dunkle Themes |
+| `font-color` | String | Feste Textfarbe |
+| `font-color-light` | String | Textfarbe für helle Themes |
+| `font-color-dark` | String | Textfarbe für dunkle Themes |
+| `animate` | Boolean | Aktiviert Einstiegstransition mit Reduced-Motion-Fallback |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| –             | –                                   |
+
+---
+
+## API
+- **Inhalte per Slot einfügen**
+- **State-Integration:** Optional via xstate
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const hero = document.createElement('x-hero');
+hero.innerHTML = '<h1 slot="title">Hallo XTend!</h1>';
+document.body.appendChild(hero);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-hero {
+  --hero-bg: #f5f5f5;
+  --hero-color: #222;
+}
+```
+
+## Viewport-Sicherheit
+
+`x-hero` begrenzt Host, Root und Content auf `max-width: 100%` und nutzt auf schmalen Viewports keine innere `100vw`-Breite. Dadurch bleibt die Komponente auch in gepaddeten App-Shells oder Docs-Layouts innerhalb des sichtbaren Viewports.
+
+---
+
+## Accessibility
+- Semantisches HTML, ARIA
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-hero` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Die Komponente bleibt Hero-/Display-Shell und kann in RMT mit `component.shell.render` zuerst gerendert werden. Der State-Key lautet `xhero-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `component.shell.render`
+- Events: `hero-rendered`, `hero-animated`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `overlay`, `content`, `scroll-button`
+
+## ECH-WP-07 Token-Tabelle und signatureDesign
+
+`signatureDesign`: Immersive Enterprise-Hero-Komposition mit editorialer Tiefe, medienfaehigem Surface und tokenisiertem Content-Block. Die Standardwirkung soll elegant und eigenstaendig sein, aber Bild-, App- und Corporate-Inszenierungen zulassen.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-layout-surface` | Hero- und Content-Flaeche |
+| `--xtend-layout-text` | Hero-Textfarbe |
+| `--xtend-layout-border-color` | Scroll-Control-Kante |
+| `--xtend-layout-radius` | Hero-, Content- und Titelradius |
+| `--xtend-layout-elevation` | Hero-, Content- und Titel-Schatten |
+| `--xtend-layout-spacing` | Hero- und Content-Padding |
+| `--xtend-layout-gap` | Kompositionsabstand fuer Theme-Autoren |
+| `--xtend-layout-font-family` | Hero-Typografie |
+| `--xtend-layout-font-size` | Control- und Content-Skalierung |
+| `--xtend-layout-media-radius` | Bild-/Hero-Radius |
+| `--xtend-layout-focus-ring` | Scroll-Control-Fokus |
+| `--xtend-layout-grid-min` | Responsive Kompositionsbasis |
+| `--xtend-layout-content-max` | Content-Breite |
+
+## ECH-WP-07 Fremdtheme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-hero {
+  --xtend-layout-surface: rgba(248, 244, 239, 0.88);
+  --xtend-layout-text: #15231d;
+  --xtend-layout-border-color: rgba(21, 35, 29, 0.22);
+  --xtend-layout-radius: 0.45rem;
+  --xtend-layout-elevation: 0 20px 60px rgba(21, 35, 29, 0.16);
+  --xtend-layout-spacing: 4rem 2rem;
+  --xtend-layout-gap: 1rem;
+  --xtend-layout-font-family: "Aptos Display", "Segoe UI", sans-serif;
+  --xtend-layout-font-size: 1.05rem;
+  --xtend-layout-media-radius: 0.65rem;
+  --xtend-layout-focus-ring: 3px solid #8f4f2a;
+  --xtend-layout-grid-min: minmax(0, 1fr);
+  --xtend-layout-content-max: 42rem;
+}
+```

package/docs/components/xicon.md

@@ -0,0 +1,125 @@
+# xicon – XTend Komponente
+
+> **Siehe auch:** [xbutton](./xbutton.md), [xtheme](./xtheme.md), [xrouter](./xrouter.md)
+
+## Uebersicht
+
+`<x-icon>` ist der universelle Ikonographie-Adapter fuer XTend Apps. Die Komponente rendert lokale Inline-SVG-Icons, registrierte Icon-Packs oder kontrollierte URL-Quellen und bleibt dabei framework-agnostisch, RMT-kompatibel und CDN-frei.
+
+Das mitgelieferte `core` Pack deckt die wichtigsten XTend-UI-Symbole ab. Der lokale `lucide` Adapter dient als groesseres Superset, wird aus lokalen ESM-Artefakten geladen und vermeidet externe CDN-Abhaengigkeiten, FCP-Bremsen und Datenschutzprobleme.
+
+## Features
+
+- lokales `core` Icon-Pack mit Basis-Icons fuer Shell, Docs, Status und Navigation
+- lokaler `lucide` IconPack Adapter als Superset ohne Remote Runtime Import
+- globale Registry `window.XTend.icons` fuer Custom Icon Packs und Corporate-Design-Sets
+- direkte Quellen ueber `src` fuer SVG-Dateien aus Repo, App-Bundle oder CDN-Policies des Hosts
+- rohe SVG-Pack-Eintraege werden vor dem Rendern auf erlaubte Knoten und Attribute reduziert
+- A11y-Modus fuer dekorative und semantische Icons
+- State-Integration ueber `xicon-state-<id>`
+- RMT Shell Authoring ueber `xtend.rmt.component-contract.v1`
+- Performance-Profil `xtend.performance.component-profile.v1` mit `display-micro` Budget
+
+## Verwendung
+
+```html
+<x-icon name="search" label="Suche"></x-icon>
+<x-icon name="gauge" pack="lucide" size="1.25rem" label="Performance"></x-icon>
+<x-icon src="/assets/icons/company.svg" label="Corporate Icon"></x-icon>
+<x-icon name="chevron-right" decorative></x-icon>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `name` | String | Icon-Name oder Alias aus der Registry |
+| `pack` | String | optionales Icon-Pack, z.B. `core` oder `lucide` |
+| `src` | String | kontrollierte URL-Quelle fuer ein Icon aus Repo, App-Bundle oder Host-Policy |
+| `label` | String | zugänglicher Name fuer Screenreader |
+| `size` | String | CSS-Groesse, z.B. `1em`, `20px`, `1.25rem` |
+| `stroke-width` | String | Strichstaerke fuer Inline-SVG-Pfade |
+| `color` | String | CSS-Farbwert; Standard ist `currentColor` |
+| `decorative` | Boolean | setzt `aria-hidden` und entfernt semantische Bildrolle |
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `icon-ready` | Icon wurde aus Pack oder `src` aufgeloest |
+| `icon-missing` | Registry konnte `name`/`pack` nicht aufloesen |
+| `icon-pack-registered` | ein Pack wurde in der globalen Registry registriert |
+
+## API
+
+| Methode | Zweck |
+|---------|-------|
+| `setIcon(name, options?)` | setzt Icon, Pack, Label oder `src` programmatisch |
+| `registerPack(pack, options?)` | registriert ein Pack ueber die Komponente |
+| `snapshot()` | liefert `xtend.component.x-icon.state.v1` inklusive Registry-Snapshot |
+| `window.XTend.icons.register(pack, options?)` | globale Pack-Registrierung |
+| `window.XTend.icons.resolve(name, options?)` | globale Aufloesung ohne Rendering |
+| `window.XTend.icons.snapshot()` | Registry-Snapshot fuer Diagnostics |
+
+## Custom Icon Packs
+
+```js
+window.XTend.icons.register({
+  id: 'brand',
+  label: 'Corporate Design Icons',
+  cdnAllowed: false,
+  icons: {
+    product: {
+      aliases: ['logo-mark'],
+      nodes: [
+        { tag: 'path', attrs: { d: 'M12 3 21 8v8l-9 5-9-5V8Z' } }
+      ]
+    }
+  }
+});
+```
+
+Packs koennen eigene SVG-Node-Descriptoren, einzelne Path-Strings, inline SVG-Records oder URL-Records enthalten. Remote-Quellen sind nicht Default von XTend; sie muessen bewusst vom Host als `src` oder Pack-URL bereitgestellt werden.
+
+## ECH-WP-04 Control-Regel
+
+Keine Textglyphen als Controls: Close-, Menu-, Disclosure-, Status- und Action-Controls duerfen nicht ueber sichtbare Zeichen wie `x`, `&times;`, Pfeile oder Emoji gestaltet werden. Verwende `x-icon`, Inline-SVG oder eine tokenisierte CSS-Grafik.
+
+Pflicht fuer Icon-Controls:
+
+- Der Button hat einen zugaenglichen Namen, z.B. `aria-label`.
+- Der Button exponiert einen stabilen Control-Part, z.B. `part="close control"`.
+- Die Grafik exponiert einen Icon-Part, z.B. `part="control icon"` oder `part="close-icon control icon"`.
+- Das Core-Pack enthaelt fuer Framework-Controls mindestens `close`, `menu`, `chevron-left`, `chevron-right`, `chevron-up`, `chevron-down`, `success`, `warning`, `error` und `info`.
+- Eigene Icon Packs muessen lokale SVG-Node-Descriptoren oder sichere `src`-Quellen verwenden; CDN-Abhaengigkeiten sind keine XTend-Default-Basis.
+
+## RMT und Fabric
+
+`x-icon` deklariert `xtendRmtMetadata` mit `adapter: 'xtend.component'`, `templateMode: 'dom_descriptor'`, `shellAuthoring.attributes` und der Boundary `no-rmt-kernel-import-of-xtend-types`. RMT kann Icons dadurch in App Shells, Navigationen, Buttons oder Docs-Templates authoren, ohne den XTend-Kernel oder einen Icon-Vendor zu importieren.
+
+Fabric konsumiert:
+
+- `icon-ready`
+- `icon-missing`
+- `icon-pack-registered`
+- State-Key `xicon-state-<id>`
+- `snapshot()`
+
+## Styling & Theming
+
+```css
+x-icon {
+  --xtend-icon-size: 1rem;
+  --xtend-icon-color: currentColor;
+  --xtend-icon-stroke-width: 2;
+}
+```
+
+Das Icon folgt `currentColor` und integriert sich dadurch in `x-theme`, `x-header`, `x-button`, `x-menu` und eigene Corporate-Design-Tokens. Im Forced-Colors-Modus bleibt die Komponente ueber Systemfarben lesbar.
+
+## Accessibility
+
+- mit `label` rendert der Host `role="img"` und `aria-label`
+- ohne Label oder mit `decorative` rendert die Komponente `aria-hidden`
+- URL-Icons erhalten ein leeres `alt`, wenn sie dekorativ sind
+- `icon-missing` ist als diagnostisches Event verfuegbar, ohne Screenreader mit Fehlersignalen zu belasten

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