@ccslabs/xtend 0.1.0-rc.1

package/docs/components/xradio.md

@@ -0,0 +1,103 @@
+# xradio – XTend Komponente
+
+> **Siehe auch:** [xform](./xform.md), [xinput](./xinput.md), [xstate](./xstate.md)
+
+## Uebersicht
+
+`<x-radio>` vervollstaendigt die TypeScript-first Selection Controls aus `WP-E10-09`. Die Komponente koordiniert Gruppen ueber `name`, unterstuetzt Keyboard-Navigation und liefert RMT-, Fabric-, A11y- und Performance-Metadaten fuer RMT-first Apps.
+
+## Verwendung
+
+```html
+<x-radio id="plan-starter" name="plan" value="starter">
+  <span slot="label">Starter</span>
+</x-radio>
+<x-radio id="plan-pro" name="plan" value="pro" checked>
+  <span slot="label">Pro</span>
+</x-radio>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `name` | String | Gruppen- und Formularname |
+| `value` | String | Wert des Radio-Controls |
+| `checked` | Boolean | aktueller Auswahlzustand |
+| `required` | Boolean | aktiviert Validierung |
+| `disabled` | Boolean | deaktiviert das Control |
+| `label` | String | ARIA-/Textlabel ohne Slot |
+
+## Slots
+
+| Slot | Zweck |
+|------|-------|
+| `label` | sichtbares Label |
+| `hint` | zusaetzlicher Hinweistext |
+| `error` | Validierungsfehler |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `radio-changed` | `{ checked, value, name, source: 'x-radio' }` |
+| `radio-invalid` | `{ checked, value, name, message, source: 'x-radio' }` |
+
+## API
+
+- `element.checked`
+- `element.value`
+- `element.name`
+- `element.check()`
+- `element.checkValidity()`
+- `element.reportValidity()`
+- `element.validate()`
+- `element.reset()`
+- `element.focus()`
+
+## State, RMT und Fabric
+
+`<x-radio>` schreibt den Einzelzustand nach `xradio-checked-<id>` und den Gruppenwert nach `xradio-value-<name>`. Die RMT-Metadaten nutzen `xtend.rmt.component-contract.v1`; RMT kann eine Radio-Gruppe als DOM-Descriptor templaten und die UI ueber `xtend.component` schedulen, ohne XTend in den RMT-Kernel zu importieren.
+
+## A11y und Performance
+
+Die Komponente nutzt `role="radio"`, `aria-checked`, `aria-describedby`, Space-Aktivierung sowie Arrow-Key-Navigation innerhalb der Gruppe. Das Performance-Profil ist `xtend.performance.component-profile.v1` mit `budgetClass: 'interactive-small'`, `lane: 'user-blocking'` und `hydrationPolicy: 'visible'`.
+
+## Form Controls UX ab WP-E11-08
+
+`<x-radio>` stellt `xtendFormControlUxProfile` mit `xtend.component.form-control-ux-profile.v1` bereit. Das Profil verbindet Label, Hint, Error, `radio-changed`, `radio-invalid`, `xradio-value-<name>`, `ui.user-blocking.input`, Fabric-Lane `user-blocking` und RMT Shell Authoring.
+
+## ECH-WP-08 Form Theme/A11y Hardening
+
+`signatureDesign`: Enterprise-Radio-Option mit robuster nativer Fokusfuehrung, gruppensicherer Validierung und separat themebarem Selection-Icon.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-form-text` | Host-Textfarbe |
+| `--xtend-form-control-surface` | Native Control-Flaeche |
+| `--xtend-form-control-text` | Control-Text-Fallback |
+| `--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` | Radio-/Error-Radius |
+| `--xtend-form-gap` | Label-/Helper-Abstand |
+| `--xtend-form-font-family` | Form-Typografie |
+| `--xtend-form-control-font-size` | Label-Schrift |
+| `--xtend-form-helper-font-size` | Helper/Error-Schrift |
+| `--xtend-form-icon-color` | Radio-Akzent |
+
+Density-Profile: `comfortable`, `compact`, `dense`. Invalid ist nicht farb-only und wird per `aria-invalid` gespiegelt.
+
+```css
+[data-xtend-form-theme="enterprise-foreign"] x-radio {
+  --xtend-form-icon-color: #8f4f2a;
+  --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;
+}
+```

package/docs/components/xrouter.md

@@ -0,0 +1,260 @@
+# xrouter - XTend Komponente
+
+## Uebersicht
+
+`<x-router>` ist der clientseitige Router fuer XTend-SPAs. Er verarbeitet deklarative `<x-route>`-Definitionen, unterstuetzt Hash- und History-Mode und synchronisiert Navigation mit `xstate`.
+
+## Kernverhalten
+
+- nur direkte `<x-route>`-Kinder von `<x-router>` gelten als Top-Level-Routen
+- Nested Routes werden ausschliesslich ueber direkte Kind-Routen der jeweiligen Elternroute verarbeitet
+- Navigation kann deklarativ, per `x-link` oder programmatisch ueber `xstate.set('router-navigate', '/ziel')` angestossen werden
+
+## Verwendung
+
+```html
+<x-router mode="history">
+  <x-route path="/" component="x-home" import="/components/xhome.js" title="Home"></x-route>
+  <x-route path="/docs" component="x-docs" import="/components/xdocs.js" title="Docs">
+    <x-route path=":topic" component="x-doc-topic" import="/components/xdoctopic.js" title-template="{{params.topic}} | XTend Docs"></x-route>
+  </x-route>
+  <x-route path="*" component="x-notfound" import="/components/xnotfound.js"></x-route>
+</x-router>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `mode` | string | `hash` oder `history` |
+| `routesrc` | string | optionale JSON-Quelle fuer Routen |
+| `skeleton` | string | aktiviert einen nativen Route-Skeleton-Fallback waehrend Import, Definition und Hydration |
+| `skeleton-lines` | number | Anzahl der Skeleton-Zeilen fuer den Route-Fallback |
+| `skeleton-min-height` | string | stabile Mindesthoehe des Route-Fallbacks |
+| `title-template` / `document-title-template` | string | globales Template fuer den Dokumenttitel, z.B. `{{title}} | App` |
+| `title-prefix` / `title-suffix` | string | einfacher Prefix/Suffix fuer Routentitel ohne Template |
+| `default-title` | string | Fallback, wenn eine Route keinen Titel definiert |
+
+## Document Title Rewrite und SEO Meta
+
+XRouter schreibt nach jedem erfolgreichen Route-Match den Browser-Titel und die SEO-Metatags `description` und `keywords`. Dadurch bleibt eine SPA nicht auf dem Initialtitel stehen, und RMT-Routen koennen Titelinformationen ohne XTend-spezifische Runtime-Imports liefern.
+
+Direkte Route-Attribute:
+
+```html
+<x-router mode="hash" document-title-template="{{title}} | XTend">
+  <x-route
+    path="/components/x-router"
+    component="x-doc-page"
+    title="XRouter"
+    document-title="XRouter Routing und SEO"
+    meta-description="Routing, Seitentitel und RMT Route Metadata"
+    meta-keywords="xtend, xrouter, rmt">
+  </x-route>
+</x-router>
+```
+
+RMT kann dieselben Werte ueber Route-Records und `metadata` liefern:
+
+```json
+{
+  "id": "settings",
+  "path": "/settings",
+  "router": "xtend.xrouter",
+  "component": "page.settings",
+  "metadata": {
+    "title": "Settings",
+    "documentTitle": "Settings | XTend App",
+    "metaDescription": "Einstellungen der XTend RMT App",
+    "seo": {
+      "keywords": ["xtend", "rmt", "routing"]
+    }
+  }
+}
+```
+
+Unterstuetzte Template-Variablen sind `{{title}}`, `{{routeTitle}}`, `{{documentTitle}}`, `{{path}}`, `{{routeId}}`, `{{component}}`, `{{params.name}}`, `{{query.name}}` und `{{metadata.name}}`. Bei Nested Routes gewinnt die Leaf-Route, damit Deep Links eigene Titel bekommen.
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `xrouter-before-navigate` | cancelable, vor programmatischer Router-Navigation |
+| `route-changed` | wird nach erfolgreicher Navigation emittiert |
+| `routechange` | Legacy-Alias zu `route-changed` |
+| `xrouter-after-navigate` | Legacy-Window-Event nach dem Rendern einer Route |
+| `route-announced` | wird nach dem Schreiben der Route-Live-Region emittiert |
+| `xrouter-skeleton-shown` / `xrouter-skeleton-hidden` | markieren den nativen Route-Skeleton-Lifecycle |
+| `xrouter-route-hydrated` | wird nach Loader-basierter Hydration des gerenderten Route-Subtrees emittiert |
+| `xrouter-title-updated` | wird nach dem Schreiben von `document.title` und SEO-Metatags emittiert |
+| `xrouter-scroll-boundary-normalized` | wird emittiert, wenn der Router nach einem Route-Wechsel eine stale Scrollposition oder eine Deadzone unterhalb des Contentbereichs korrigiert |
+| `xrouter-navigation-overlays-closed` | wird emittiert, wenn der Router vor einem Route-Render offene App-Shell-Overlays wie `x-header` schliesst |
+
+## XState-Keys
+
+- `router-navigate`: programmatischer Navigationseingang
+- `router-navigated`: zuletzt angestossener Zielpfad
+- `router-current`: aktuell gerenderte Route
+- `router-rendered`: zuletzt erfolgreich gerenderte Route
+- `router-scroll-boundary`: Legacy-Snapshot der letzten Scroll-Boundary-Pruefung
+- `router-closed-navigation-overlays`: Legacy-Snapshot der vor dem Route-Render geschlossenen Navigationsoverlays
+- `xtend.router.current`: kanonischer Route Context
+- `xtend.router.announcement`: zuletzt angekuendigte Route
+- `xtend.router.documentMeta`: zuletzt gesetzter Dokumenttitel und SEO-Metatags
+- `xtend.router.skeleton`: aktueller Route-Skeleton-Lifecycle
+- `xtend.router.scrollBoundary`: kanonischer Snapshot der letzten Scroll-Boundary-Pruefung
+- `xtend.router.closedNavigationOverlays`: kanonischer Snapshot der vor dem Route-Render geschlossenen Navigationsoverlays
+
+Die kanonischen Spiegelpfade werden ebenfalls gepflegt:
+
+- `xtend.router.lastNavigated`
+- `xtend.router.current`
+- `xtend.router.lastRendered`
+
+## Route-Detail
+
+`route-changed` und `xrouter-after-navigate` liefern ein Detailobjekt mit:
+
+```js
+{
+  path: '/docs/router',
+  routeId: 'docs-topic',
+  component: 'x-doc-topic',
+  params: { topic: 'router' },
+  query: {},
+  template: 'docs.topic.shell',
+  scheduleRef: 'route.visible.render',
+  title: 'Router',
+  documentTitle: 'Router | XTend Docs',
+  meta: {
+    schema: 'xtend.router.document-meta.v1',
+    scheduleRef: 'route.document.title.rewrite'
+  },
+  metadata: {}
+}
+```
+
+Bei Nested Routes ist `component` die Leaf-Route; `params` werden aus der kompletten Match-Kette zusammengefuehrt.
+
+## Skeleton und Lazy Hydration
+
+XRouter kann Route-Komponenten shell-first laden:
+
+```html
+<x-router mode="hash" skeleton="article" skeleton-lines="8" skeleton-min-height="20rem">
+  <x-route
+    path="/docs"
+    component="xtend-doc-page"
+    import="/docs/utils/pageloader.js"
+    hydrate-schedule="docs.page.hydrate">
+  </x-route>
+</x-router>
+```
+
+Wenn der Component-Tag noch nicht definiert ist, nutzt XRouter zuerst das explizite `import` der Route. Fehlt ein Import, delegiert er an `window.XTendLoader.ensureComponent(componentTag)`, sodass Manifest-Komponenten route-nativ lazy geladen werden koennen. Nach dem Rendern hydriert XRouter den Route-Subtree ueber `window.XTendLoader.hydrateTree(...)`.
+
+## Navigation Routing UX Profil
+
+`<x-router>` stellt `xtendNavigationRoutingUxProfile` mit `xtend.component.navigation-routing-ux-profile.v1` bereit. Das Profil beschreibt `x-router` als Router-Outlet mit `route-changed`, `route-announced`, `xrouter-before-navigate`, `xtend.router.current`, `route.visible.render`, `route.focus.restore`, `a11y.announce`, Fabric-Lane `transition` und RMT Shell Authoring.
+
+Nach erfolgreichem Rendern fokussiert der Router sein Outlet und schreibt eine polite, atomare Live Region. Dadurch koennen RMT und Fabric Route-Render, Focus Restore und Screenreader-Announcement getrennt schedulen, ohne dass der RMT-Kernel XTend-Interna importiert.
+
+Die neuen Diagnostics-Details enthalten `source: 'x-router'`, `stateKey` und `scheduleRef`, sodass `x-link`, Feedback-Komponenten und RMT-Scheduler denselben Route Context teilen koennen.
+
+## Scroll Boundary, Overlays und Deadzone-Schutz
+
+Vor jedem erfolgreichen Route-Render schliesst `<x-router>` offene Navigationsoverlays, die einen stabilen Komponentenvertrag fuer `isMenuOpen()` und `toggleMenu(false, options)` anbieten. Aktuell wird dadurch vor allem `x-header` stabilisiert: Ein geoeffnetes Menue bleibt kein Layoutfaktor der vorherigen Seite und erzeugt beim Wechsel auf eine kuerzere Route keine Deadzone.
+
+Nach dem Render setzt `<x-router>` die native Scroll Restoration auf `manual`, scrollt zum Seitenanfang oder zum angegebenen `scroll-to`-Ziel und prueft die Dokumenthoehe in Microtask-, Frame- und Settled-Timeout-Phasen erneut. Wenn der Browser noch eine stale Scrollposition aus der vorherigen, laengeren Route haelt oder die aktuelle Position hinter dem neuen maximalen Scrollbereich liegt, normalisiert der Router die Position und schreibt einen Snapshot nach `xtend.router.scrollBoundary`.
+
+Der Snapshot folgt `xtend.router.scroll-boundary.v1` und enthaelt unter anderem `path`, `phase`, `strategy`, `viewportHeight`, `scrollHeight`, `maxScrollTop`, `previousTop`, `normalizedTop`, `normalized` und `deadzoneDetected`. Dadurch koennen Fabric/RMT-Diagnostics Deadzones sichtbar machen, ohne App-spezifische Scroll-Hacks zu brauchen.
+
+## RMT / XTendRMT Adapter
+
+Seit Epic 05 / `WP-E05-10` kann XRouter native RMT Routes ueber den Adapter-Contract `xtend.rmt.xrouter-adapter.v1` konsumieren.
+
+```js
+const adapter = window.xtend.rmt.createRmtXRouterAdapter({ routerElement });
+adapter.registerRoutes(runtimeRegistry);
+adapter.navigate({ routeId: 'home' }, { mapping });
+```
+
+Die stabile Adapter-ID ist `xtend.xrouter`. Der Adapter konsumiert `routeRegistry.byRouter["xtend.xrouter"]`, mappt `RmtRouteRegistryEntry` auf XRouter-kompatible Records und ruft am Zielrouter `registerRoutes(...)` bzw. `navigate(...)` auf.
+
+`<x-router>` stellt dafuer bereit:
+
+- `registerRoutes(routes, options)`
+- `navigate(to, options)`
+- `reuse-component` als opt-in fuer InsularHydration bei SPA-Routen, deren Ziel denselben Component-Tag nutzt und `updateRoute(context)` oder `routeChangedCallback(context)` implementiert
+
+RMT-relevante Route-Daten werden als Attribute auf `<x-route>` erhalten:
+
+- `data-rmt-route-id`
+- `data-rmt-router`
+- `data-rmt-template`
+- `data-rmt-schedule`
+- `data-rmt-params`
+- `data-rmt-query`
+- `data-rmt-metadata`
+
+XRouter bleibt damit produktiver Adapter fuer RMT Routes, aber kein RMT-Kernelwissen.
+
+Weitere Details:
+
+- [XTendRMT App-DSL Reference](../xtendrmt-app-dsl.md)
+- [XTendRMT Runtime Bridge](../xtendrmt-runtime-bridge.md)
+- [XTendRMT Native Authoring Guide](../xtendrmt-native-authoring.md)
+
+## Hinweise
+
+- `routesrc` wird vor dem ersten Rendern geladen.
+- Lazy Loading erfolgt ueber das `import`-Attribut der jeweiligen Route.
+- Guards (`before-enter`) und Lifecycle-Hooks bleiben unterstuetzt.
+- Mit `reuse-component` kann eine App-Shell ihre Route-Komponente behalten; XRouter aktualisiert dann Params, Query und State und feuert `xrouter-route-reused`.
+- RMT-Schedule-Refs werden ueber `data-rmt-schedule` an Route-Details weitergereicht.
+- Scroll-Boundary-Normalisierung laeuft zentral im Router und sollte nicht in App-Shells dupliziert werden.
+- Router-Aenderungen im Core sollten gegen `node scripts/verify_xtend_core_contracts.js` geprueft werden.
+
+## ECH-WP-09 Token-Tabelle und Navigation States
+
+`signatureDesign`: `x-router` ist die ruhige Route-Outlet-Basis fuer Enterprise-Shells. Der Router selbst delegiert Active/Current/Selected an `x-link`, `x-menu`, `x-tabs` und `x-header`, stellt aber denselben Navigation-State-Contract, Route Announcements und Focus Restore bereit.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-nav-surface` | optionale Outlet-/Route-Surface |
+| `--xtend-nav-text` | Outlet-Text und vererbte Navigationsfarbe |
+| `--xtend-nav-border-color` | geteilte Navigationskante fuer Route-Shells |
+| `--xtend-nav-radius` | geteilte Radius-Vorgabe |
+| `--xtend-nav-gap` | geteilte Navigation-Abstaende |
+| `--xtend-nav-font-family` | vererbte Navigationstypografie |
+| `--xtend-nav-font-size` | vererbte Navigationstextgroesse |
+| `--xtend-nav-active-surface` | Active/Current/Selected Flaeche fuer angeschlossene Navigation |
+| `--xtend-nav-active-text` | Active/Current/Selected Text |
+| `--xtend-nav-current-indicator` | nicht farb-only Current-Indikator |
+| `--xtend-nav-hover-surface` | Hover-Flaeche fuer angeschlossene Navigation |
+| `--xtend-nav-focus-ring` | Route-Focus und Navigation-Focus |
+| `--xtend-nav-disabled-opacity` | Disabled-Dimmung fuer angeschlossene Navigation |
+
+## ECH-WP-09 Keyboard-Verhalten
+
+Der Router fokussiert nach dem Rendern das Outlet und emittiert `route-announced` ueber eine polite Live Region. Link- und Menue-Keyboard-Verhalten bleibt in den jeweiligen Navigationselementen; der Router haelt den Route Context `xtend.router.current`, sodass Active/Current/Selected per `aria-current="page"` und `aria-selected="true"` synchronisiert werden koennen.
+
+## ECH-WP-09 Fremdtheme
+
+```css
+[data-xtend-nav-theme="enterprise-foreign"] x-router {
+  --xtend-nav-surface: transparent;
+  --xtend-nav-text: #17231f;
+  --xtend-nav-border-color: rgba(23, 35, 31, 0.22);
+  --xtend-nav-radius: 0.35rem;
+  --xtend-nav-gap: 0.45rem;
+  --xtend-nav-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-nav-font-size: 1rem;
+  --xtend-nav-active-surface: #173f35;
+  --xtend-nav-active-text: #fffaf0;
+  --xtend-nav-current-indicator: #b56b35;
+  --xtend-nav-hover-surface: rgba(181, 107, 53, 0.14);
+  --xtend-nav-focus-ring: 3px solid #b56b35;
+  --xtend-nav-disabled-opacity: 0.44;
+}
+```

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