@ccslabs/xtend 0.1.0-rc.1 → 0.1.2

package/docs/de/components/xcode.md

@@ -0,0 +1,156 @@
+# xcode - XTend Komponente
+
+> Siehe auch: [xwriter](./xwriter.md), [xstate](./xstate.md)
+
+## Uebersicht
+
+`<x-code>` rendert Codebeispiele als XTend Web Component mit Copy-Control,
+State-Integration, Theming und optionalem Prism.js Syntax Highlighting. Die
+Komponente ist Shadow-DOM-basiert und kann deshalb in jeder App- oder
+Developer-Center-Surface eingesetzt werden, ohne dass globale `pre code`
+Selektoren in den Host hineinreichen muessen.
+
+Prism bleibt optional und host-neutral. Wenn `window.Prism` oder ein
+registrierter XCode-Highlighter vorhanden ist, rendert XCode Token-Spans. Wenn
+keine Grammatik verfuegbar ist, bleibt der Code sicher escaped als Plaintext
+sichtbar.
+
+## Verwendung
+
+```html
+<x-code lang="js">
+  <template data-x-code-mode="text">console.log('Hallo XTend!');</template>
+</x-code>
+```
+
+Das Alias-Attribut `language` ist fuer bestehende Fixtures und fremde Hosts
+unterstuetzt:
+
+```html
+<x-code language="rmt">
+  <template data-x-code-mode="text">template docs.demo { surface root { lane visible { hydrate page } } }</template>
+</x-code>
+```
+
+## Prism und RMT
+
+Das Developer Center laedt `components/prism.js` und danach
+`components/prism-rmt.js`. Die RMT-Middleware registriert
+`Prism.languages.rmt` sowie die Aliase `rmt-vnext` und `xtendrmt`. Damit kann
+jede XCode-Instanz RMT-vNext-App-Shells, Primitives, Lanes, Events und
+Boundary-Regeln highlighten:
+
+- `template`, `state`, `selector`, `datasource`, `action`, `portal`,
+  `overlay`, `resource`, `surface`, `remote surface`
+- `lane`, Lifecycle-Operationen, `when`, `slot`, `trust boundary`, `sanitize`
+- Event-Bindings, Payloads, Reducer, Effects, dotted Primitive IDs und
+  Component-Tags
+
+Hosts koennen einen eigenen Highlighter registrieren:
+
+```js
+customElements.get('x-code')?.registerHighlighter({
+  highlight({ code, language }) {
+    return { html: code, highlighted: false, engine: 'plain-text', language };
+  }
+});
+```
+
+## Developer Center
+
+Markdown-Codefences aus Parsedown werden nach dem Trusted-DOM-Sanitizing in
+`<x-code>` ueberfuehrt. Dadurch laufen alle Codeflaechen im Developer Center
+ueber denselben Pfad:
+
+- Copy-Control und A11y-Signale aus XCode
+- `docs.syntax.highlight` als RMT-Schedule
+- Prism-Highlighting im Shadow DOM
+- Fallback auf Plaintext ohne Raw-HTML-Sink
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+| --- | --- | --- |
+| `lang` | String | Primaere Sprache, z. B. `js`, `html`, `rmt` |
+| `language` | String | Kompatibilitaetsalias, wenn `lang` nicht gesetzt ist |
+
+## Events
+
+| Event | Beschreibung |
+| --- | --- |
+| `code-copied` | Wird nach erfolgreichem Copy-Control ausgeloest |
+
+## API
+
+- `hydrate()` rendert Code und Highlighting neu.
+- `snapshot()` liefert Sprache, Code-Laenge und Highlighting-Metadaten.
+- `customElements.get('x-code').registerHighlighter(provider)` registriert
+  einen optionalen Host-Highlighter.
+
+Der Snapshot enthaelt nicht-brechend zusaetzlich:
+
+- `highlighted`
+- `highlightEngine`
+- `highlightLanguage`
+- `languageAlias`
+
+## Layout Display Media UX Profil
+
+`x-code` stellt das Profil
+`xtend.component.layout-display-media-ux-profile.v1` bereit. Code-Bloecke
+koennen damit als idle hydrierbare Display-Shell in RMT authoriert werden und
+nutzen den State-Key `xcode-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `component.idle.hydrate`
+- Event: `code-copied`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `copy`, `pre`, `code`
+
+## Token-Tabelle
+
+ECH-WP-07 bleibt als Tokenization-Contract sichtbar. `signatureDesign`:
+Lesbare Enterprise-Codeflaeche mit klarem Copy-Control, internem Overflow,
+Prism-kompatibler Token-Farbgebung und eigenstaendiger, themebarer
+Monospace-Persoenlichkeit.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-layout-surface` | Code-Flaeche |
+| `--xtend-layout-text` | Code-Textfarbe |
+| `--xtend-layout-border-color` | Code- und Copy-Kante |
+| `--xtend-layout-radius` | Code- und Copy-Radius |
+| `--xtend-layout-elevation` | Code-Schatten |
+| `--xtend-layout-spacing` | Code-Padding |
+| `--xtend-layout-gap` | Theme-Abstand fuer Tooling |
+| `--xtend-layout-font-family` | Monospace-/Code-Typografie |
+| `--xtend-layout-font-size` | Code-Schriftgroesse |
+| `--xtend-layout-media-radius` | Copy-Control-Radius |
+| `--xtend-layout-focus-ring` | Copy-Control-Fokus |
+| `--xtend-layout-grid-min` | Code-Layout-Untergrenze |
+| `--xtend-layout-content-max` | Code-Maximalbreite |
+| `--x-code-token-keyword` | Prism Keyword und RMT Primitive |
+| `--x-code-token-string` | Prism String |
+| `--x-code-token-property` | Prism Property und RMT IDs |
+| `--x-code-token-class` | Component Tags |
+| `--x-code-token-comment` | Kommentare |
+
+## Fremdtheme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-code {
+  --xtend-layout-surface: #151b19;
+  --xtend-layout-text: #f7f1e7;
+  --xtend-layout-border-color: rgba(247, 241, 231, 0.18);
+  --xtend-layout-radius: 0.35rem;
+  --xtend-layout-elevation: 0 16px 40px rgba(21, 27, 25, 0.22);
+  --xtend-layout-spacing: 1.25rem 1.4rem;
+  --xtend-layout-gap: 0.75rem;
+  --xtend-layout-font-family: "Cascadia Code", "Fira Mono", monospace;
+  --xtend-layout-font-size: 0.95rem;
+  --xtend-layout-media-radius: 999px;
+  --xtend-layout-focus-ring: 3px solid #d48b57;
+  --xtend-layout-grid-min: minmax(0, 1fr);
+  --xtend-layout-content-max: 68rem;
+}
+```

package/docs/de/components/xdialog.md

@@ -0,0 +1,92 @@
+# xdialog - XTend Komponente
+
+## Uebersicht
+
+`<x-dialog>` ist die state-getriebene Dialog-Komponente fuer XTend. Sie verbindet Attributsteuerung, `xstate`-Open-Flags und den aggregierten `ui.dialogs`-State zu einem gemeinsamen Overlay-Contract.
+
+## Verwendung
+
+```html
+<x-dialog overlay title="Beispieldialog" width="400px">
+  <p>Inhalt</p>
+  <div slot="actions">
+    <button onclick="this.closest('x-dialog').close()">Schliessen</button>
+  </div>
+</x-dialog>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `open` | boolean | Dialog ist geoeffnet |
+| `overlay` | boolean | zeigt einen Overlay-Hintergrund |
+| `title` | string | Titelzeile des Dialogs |
+| `width` | string | Zielbreite des Dialogs |
+| `height` | string | Zielhoehe des Dialogs |
+
+## Slots
+
+| Slot | Beschreibung |
+|------|--------------|
+| default | Hauptinhalt des Dialogs |
+| `actions` | Aktionen im Footer |
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `dialog-opened` | nach erfolgreichem Oeffnen |
+| `dialog-closed` | nach erfolgreichem Schliessen |
+
+Die Events liefern:
+
+```js
+{
+  id: 'dialog-abc123',
+  open: false,
+  source: 'button'
+}
+```
+
+## API
+
+- `element.open()`
+- `element.close()`
+
+API- und XState-gesteuerte Dialoge verwenden dieselben Open-Flags:
+
+- `xtend.component.x-dialog.<id>.open`
+- `dialog-open-<id>`
+- `xdialog-open-<id>`
+
+## Runtime-Contract
+
+- API-gemanagte Dialoge lesen Titel, Inhalt und Aktionen aus `xstate.get('ui').dialogs`
+- Benutzerinteraktionen wie ESC, Overlay-Klick und Close-Button schreiben den Open-State zurueck
+- API-gemanagte Dialoge entfernen sich nach dem Schliessen aus `ui.dialogs` und aus dem DOM
+
+## Hinweise
+
+- direkte DOM-Nutzung ueber Slots bleibt unterstuetzt
+- fuer API-gemanagte Dialoge ist `window.XDialog.show()` der bevorzugte Einstieg
+- Fokusfalle, Rueckfokus und ARIA-Rollen sind Teil des Standardverhaltens
+
+## Overlay Interaction UX Profil
+
+Seit `WP-E11-11` deklariert `<x-dialog>` das Runtime-Profil `xtend.component.overlay-interaction-ux-profile.v1` ueber `xtendOverlayInteractionUxProfile`.
+
+| Feld | Wert |
+|------|------|
+| Family | `dialog` |
+| State Key | `dialog-open-<id>` |
+| Schedule | `overlay.stack.open` |
+| Commands | `open`, `close`, `focus-trap`, `apply-inert`, `lock-scroll`, `snapshot` |
+
+Das Profil standardisiert Focus Trap, Rueckfokus, Escape-Topmost-Regel, Background-Inert, balanced Scroll Lock und host-lokale Portal-Semantik. RMT kann den Dialog in Shell-first Templates planen, waehrend der RMT-Kernel durch `no-rmt-kernel-import-of-xtend-types` framework-agnostisch bleibt.
+
+## ECH-WP-06 Overlay-Paritaet
+
+`x-dialog` expose `surface`, `backdrop`, `close` und `content` als gemeinsame Overlay-Parts. `overlay` bleibt als Alias fuer `backdrop` erhalten. Surface, Text, Backdrop, Elevation, Radius, Z-Index, Action-Farben, Close-Flaeche und Focus Ring sind ueber `--xtend-overlay-*`, `--dialog-*` oder `--xdialog-*` Tokens ueberschreibbar.
+
+`x-dialog` ist modal: Focus Trap, Background-Inert, Scroll Lock, Escape und Rueckfokus bleiben im Standardpfad aktiv. Dialoge ohne `overlay` behalten die Surface-Parts, verzichten aber auf den visuellen Backdrop.

package/docs/de/components/xdrawer.md

@@ -0,0 +1,84 @@
+# xdrawer - XTend Komponente
+
+> **Siehe auch:** [xpopover](./xpopover.md), [xtooltip](./xtooltip.md), [xrouter](./xrouter.md), [xlink](./xlink.md)
+
+## Uebersicht
+
+`<x-drawer>` ist die Shell- und Navigationskomponente aus `WP-E10-11`. Sie liefert Side Panels und Navigation Drawer fuer RMT-first Apps, unterstuetzt Focus Trap, Escape Close, Outside Click und optional route-aware Verhalten.
+
+## Verwendung
+
+```html
+<x-drawer id="app-nav" placement="left" modal label="App navigation" route-aware>
+  <button slot="trigger" type="button">Open navigation</button>
+  <strong slot="header">Navigation</strong>
+  <a href="#/overview">Overview</a>
+  <small slot="footer">Signed in</small>
+</x-drawer>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `open` | Boolean | oeffnet den Drawer kontrolliert |
+| `placement` | String | `left`, `right` oder `bottom` |
+| `modal` | Boolean | aktiviert Focus Trap und `aria-modal` |
+| `label` | String | zugaenglicher Name fuer den Drawer |
+| `route-aware` | Boolean | schliesst nach XRouter-Routenwechseln und emittiert Routensignal |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `drawer-opened` | `{ id, open, source, placement, modal }` |
+| `drawer-closed` | `{ id, open, source, placement, modal }` |
+| `drawer-route-selected` | `{ id, routeRef, source: 'x-router' }` |
+
+## API
+
+- `openDrawer()`
+- `closeDrawer()`
+- `toggle()`
+
+## Theme und Tokens
+
+`<x-drawer>` synchronisiert `data-theme` vom `document.documentElement` und nutzt automatisch die globalen XTend-Tokens aus `x-theme`. Ohne eigene Drawer-Tokens fallen Hintergrund, Text, Border und Overlay auf `--xtend-surface`, `--xtend-text`, `--xtend-border-color` und `--xtend-overlay-bg` zurueck. Dadurch bleiben Navigation Drawer in Bright Mode und Dark Mode lesbar, auch wenn eine App Shell keine eigenen Drawer-Farben setzt.
+
+| Token | Zweck |
+|-------|-------|
+| `--drawer-bg` / `--drawer-bg-dark` | Surface-Hintergrund |
+| `--drawer-color` / `--drawer-color-dark` | Textfarbe |
+| `--drawer-border` / `--drawer-border-dark` | Rahmen und Trenner |
+| `--drawer-overlay-bg` / `--drawer-overlay-bg-dark` | Backdrop-Farbe |
+| `--drawer-focus` | Focus-Ring |
+| `--drawer-close-size` | Groesse des Close-Icon-Buttons |
+| `--drawer-close-border` / `--drawer-close-color` | Rahmen und Icon-Farbe des Close-Buttons |
+| `--drawer-close-hover-bg` / `--drawer-close-hover-bg-dark` | Hover-Flaeche des Close-Buttons |
+
+## State, RMT und Fabric
+
+`<x-drawer>` schreibt nach `xdrawer-open-<id>`. Der RMT Contract ist `xtend.rmt.component-contract.v1` und nutzt `component.lazy.hydrate`, `route.visible.render` und `overlay.drawer.transition`. Der Kernel Boundary bleibt `no-rmt-kernel-import-of-xtend-types`.
+
+## A11y und Performance
+
+Die Komponente nutzt `role="dialog"`, `aria-modal`, `aria-hidden`, `aria-expanded`, `inert`, Focus Trap und Focus Return. Beim Schliessen wird Fokus zuerst auf den Trigger oder das zuletzt aktive Element zurueckgegeben, bevor die Drawer-Surface vor Assistive Technology verborgen wird. Das Screenreader-Signal `route-change-announcement` ist fuer App-Shell-Navigation vorgesehen. Das Performance-Profil ist `xtend.performance.component-profile.v1` mit `budgetClass: 'overlay-large'`, `lane: 'visible'` und `hydrationPolicy: 'lazy'`.
+
+## Overlay Interaction UX Profil
+
+Seit `WP-E11-11` deklariert `<x-drawer>` das Runtime-Profil `xtend.component.overlay-interaction-ux-profile.v1` ueber `xtendOverlayInteractionUxProfile`.
+
+| Feld | Wert |
+|------|------|
+| Family | `drawer` |
+| State Key | `xdrawer-open-<id>` |
+| Schedule | `overlay.stack.open` |
+| Commands | `open`, `close`, `toggle`, `focus-trap`, `apply-inert`, `lock-scroll`, `snapshot` |
+
+Das Profil beschreibt Drawer als route-aware Overlay: modal optional, Focus Trap nur bei modalem Betrieb, Escape schliesst das oberste Overlay und XRouter-Routenwechsel duerfen den Drawer kontrolliert schliessen.
+
+## ECH-WP-06 Overlay-Paritaet
+
+`x-drawer` nutzt die gemeinsamen Overlay-Part-Aliase `surface`, `backdrop`, `close` und `content`. `overlay` bleibt als Legacy-Alias fuer `backdrop` erhalten. Host-Themes koennen Surface, Text, Border, Elevation, Backdrop, Z-Index und Focus Ring ueber `--xtend-overlay-*` oder die kompatiblen `--drawer-*` Tokens steuern.
+
+Modalitaet ist optional: `modal` aktiviert Focus Trap, Background-Inert und Scroll Lock; nicht-modale Drawer bleiben fuer App-Shell-Navigation offen steuerbar.

package/docs/de/components/xfooter.md

@@ -0,0 +1,126 @@
+# xfooter – XTend Komponente
+
+> **Siehe auch:** [xheader](./xheader.md), [xtheme](./xtheme.md)
+
+## Übersicht
+
+`<x-footer>` ist eine anpassbare Footer-Komponente mit Logo, Sticky-Option und State-Integration. Sie eignet sich für Branding und Navigation am Seitenende.
+
+---
+
+## Features
+- Optionales Logo (src-Attribut)
+- Sticky-Funktion (bleibt am unteren Rand)
+- State-Integration via xstate
+- Theming via CSS Custom Properties
+
+---
+
+## Verwendung
+
+```html
+<x-footer src="logo.svg" logo-size="48" sticky></x-footer>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `src`       | String  | Logo-URL                            |
+| `logo-size` | String  | Größe des Logos (z.B. 48, 64px)      |
+| `sticky`    | Boolean | Footer bleibt am unteren Rand        |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| –             | –                                   |
+
+---
+
+## API
+- **Logo dynamisch setzen:** `element.setAttribute('src', 'logo.svg')`
+- **Sticky aktivieren:** `element.setAttribute('sticky', '')`
+- **State-Integration:** Automatisch via xstate
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const footer = document.createElement('x-footer');
+footer.setAttribute('src', 'logo.svg');
+document.body.appendChild(footer);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-footer {
+  --header-bg: #222;
+  --header-fg: #fff;
+}
+```
+
+---
+
+## Accessibility
+- Semantisches HTML, ARIA
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-footer` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Die Komponente kann als RMT Shell Footer sichtbar gemountet werden und nutzt den State-Key `xfooter-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `component.visible.mount`
+- Events: `footer-ready`, `theme-applied`, `logo-loaded`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `title`, `logo`, `nav`, `extra`
+
+## ECH-WP-07 Token-Tabelle und signatureDesign
+
+`signatureDesign`: Ruhiger Enterprise-Footer mit praeziser Navigation, logo-sicherem Medienbereich und dezenter Signature-Tiefe. Das Default-Design bleibt hochwertig, laesst sich aber durch Corporate-Themes vollstaendig ueberschreiben.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-layout-surface` | Footer-Flaeche |
+| `--xtend-layout-text` | Text- und Linkfarbe |
+| `--xtend-layout-border-color` | Footer- und Linkkante |
+| `--xtend-layout-radius` | Footer- und Linkradius |
+| `--xtend-layout-elevation` | Footer-Schatten |
+| `--xtend-layout-spacing` | Footer-Padding |
+| `--xtend-layout-gap` | Titel-, Nav- und Inhaltsabstand |
+| `--xtend-layout-font-family` | Footer-Typografie |
+| `--xtend-layout-font-size` | Footer-Schriftgroesse |
+| `--xtend-layout-media-radius` | Logo-Radius |
+| `--xtend-layout-focus-ring` | Link-Fokus |
+| `--xtend-layout-grid-min` | Responsive Footer-Zellbreite |
+| `--xtend-layout-content-max` | Footer-Maximalbreite |
+
+## ECH-WP-07 Fremdtheme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-footer {
+  --xtend-layout-surface: #f8f4ef;
+  --xtend-layout-text: #1e2420;
+  --xtend-layout-border-color: rgba(30, 36, 32, 0.2);
+  --xtend-layout-radius: 0.25rem;
+  --xtend-layout-elevation: 0 8px 24px rgba(30, 36, 32, 0.1);
+  --xtend-layout-spacing: 1.15rem;
+  --xtend-layout-gap: 0.85rem;
+  --xtend-layout-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-layout-font-size: 0.95rem;
+  --xtend-layout-media-radius: 0.15rem;
+  --xtend-layout-focus-ring: 3px solid #8f4f2a;
+  --xtend-layout-grid-min: minmax(11rem, 1fr);
+  --xtend-layout-content-max: 72rem;
+}
+```

package/docs/de/components/xform.md

@@ -0,0 +1,128 @@
+# xform – XTend Komponente
+
+> **Siehe auch:** [xinput](./xinput.md), [xselect](./xselect.md), [xcheckbox](./xcheckbox.md), [xradio](./xradio.md), [xtextarea](./xtextarea.md), [xcalendar](./xcalendar.md), [xstate](./xstate.md)
+
+## Übersicht
+
+`<x-form>` ist eine flexible Formular-Komponente, die beliebige Inhalte kapselt und State-Integration sowie Theming unterstützt.
+
+---
+
+## Features
+- Flexibles Layout für Formulare
+- Slot für beliebige Inhalte
+- State-Integration via xstate
+- Aggregation von `x-input`, `x-slider`, `x-calendar`, `x-select`, `x-checkbox`, `x-radio` und `x-textarea`
+- Theming via CSS Custom Properties
+
+---
+
+## Verwendung
+
+```html
+<x-form>
+  <input type="text" />
+  <x-button>Absenden</x-button>
+</x-form>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| –           | –       | –                                   |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| `submit`      | Wird beim Absenden ausgelöst         |
+| `invalid`     | Wird bei fehlgeschlagener Kind-Validierung ausgelöst |
+| `reset`       | Wird nach Formular-Reset ausgelöst |
+
+---
+
+## API
+- **Formular per JS absenden:** `element.submit()`
+- **Formulardaten lesen:** `element.getFormData()`
+- **State-Integration:** Automatisch via xstate
+
+## State- und Validierungscontract ab ER-WP-33
+
+`<x-form>` sammelt Werte aus `x-input`, `x-slider`, `x-calendar`, `x-select`, `x-checkbox`, `x-radio`, `x-textarea` und `x-writer`, spiegelt sie nach `xform-data-<id>` und aktualisiert diesen Key bei `input-changed`, `select-changed`, `checkbox-changed`, `radio-changed`, `textarea-changed`, `date-select` und `writer:change`. Checkboxen liefern Boolean-Werte, Radio-Gruppen liefern den Wert des aktivierten Controls. Der Shadow DOM enthaelt `role="form"`, eine `role="status"` Region fuer Submit/Reset-Rueckmeldungen und eine `role="alert"` Region fuer Validierungsfehler.
+
+## Form Controls UX ab WP-E11-08
+
+`<x-form>` stellt `xtendFormControlUxProfile` mit `xtend.component.form-control-ux-profile.v1` bereit. Das Profil beschreibt den Form Host, `submit`, `invalid`, `reset`, `xform-data-<id>`, Validation Aggregation, Fabric-Lane `user-blocking` und RMT Shell Authoring.
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const form = document.createElement('x-form');
+form.innerHTML = '<input type="text" />';
+document.body.appendChild(form);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-form {
+  --form-gap: 2em;
+  --form-border: 2px solid #007bff;
+}
+```
+
+---
+
+## Accessibility
+- Semantisches HTML, ARIA
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## ECH-WP-08 Form Theme/A11y Hardening
+
+`signatureDesign`: Enterprise-Formhost mit hochwertiger Surface-Komposition, aggregierten Statusregionen und density-sicherem Rhythmus fuer verschachtelte Controls.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-form-text` | Form-Textfarbe |
+| `--xtend-form-surface` | Form-Flaeche |
+| `--xtend-form-control-surface` | Child-Control-Flaeche |
+| `--xtend-form-control-text` | Child-Control-Text |
+| `--xtend-form-label-text` | Label-Cascade |
+| `--xtend-form-helper-text` | Helper-Cascade |
+| `--xtend-form-error-text` | Error-Cascade |
+| `--xtend-form-error-surface` | Error-Cascade-Flaeche |
+| `--xtend-form-error-border` | Form- und Error-Kante |
+| `--xtend-form-focus-ring` | Focus-Cascade |
+| `--xtend-form-radius` | Form- und Control-Radius |
+| `--xtend-form-gap` | Form- und Control-Abstand |
+| `--xtend-form-font-family` | Form-Typografie |
+| `--xtend-form-control-font-size` | Control-Schrift |
+| `--xtend-form-helper-font-size` | Helper-/Error-Schrift fuer Child Controls |
+| `--xtend-form-icon-color` | Child-Control-Icon-Akzent |
+
+Density-Profile: `comfortable`, `compact`, `dense`. `busy`, `disabled` und Invalid werden am Formhost als Flaechenzustand und via ARIA gespiegelt.
+
+```css
+[data-xtend-form-theme="enterprise-foreign"] x-form {
+  --xtend-form-surface: #fffaf2;
+  --xtend-form-control-surface: #fbf8f2;
+  --xtend-form-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.45rem;
+  --xtend-form-gap: 0.8rem;
+}
+```