@ccslabs/xtend 0.1.0-rc.1 → 0.1.2

package/docs/de/components/x-rmt-lifecycle-demo-build.md

@@ -0,0 +1,60 @@
+# x-rmt-lifecycle-demo-build - XTend Komponente
+
+## Uebersicht
+
+`<x-rmt-lifecycle-demo-build>` ist die aus `xtendrmt/rmt-lifecycle-demo.rmt` erzeugte RC1-Test-Build-Komponente. Sie dient als lokaler, manifestierter Nachweis fuer den RMT-vNext-App-Build-Pfad und verbindet Root-Lifecycle, Template-Extension, Scheduler-Handschlag, A11y-Profil und Performance-Profil in einem Custom Element.
+
+## Verwendung
+
+```html
+<x-rmt-lifecycle-demo-build
+  variant="rc1"
+  aria-label="RMT Lifecycle Demo Build">
+  Lifecycle Demo
+</x-rmt-lifecycle-demo-build>
+<script type="module" src="/components/x-rmt-lifecycle-demo-build.js"></script>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `variant` | String | Markiert die lokale Demo-Variante fuer Fixtures und Browser-Smokes. |
+| `aria-label` | String | Pflichtname fuer die semantische `region` im Shadow DOM. |
+
+## Scaffold Contracts
+
+Die generierte Komponente exposes folgende statische Contracts:
+
+- `xtendScaffoldWiring` mit `xtend.scaffold.feature-wiring.v1`
+- `xtendScaffoldExtensionPoints` mit `xtend.scaffold.component-extension-points.v1`
+- `xtendScaffoldA11yProfile` mit `xtend.a11y.profile.v1`
+- `xtendScaffoldPerformanceProfile` mit `xtend.performance.component-profile.v1`
+
+Der Root-Lifecycle nutzt `xtend.rmt.root-handshake.v1` und bleibt ueber Scheduler Endpoint Hints an den XTend Host Adapter gekoppelt. Der RMT Kernel liest die XTend-Komponente nicht direkt, sondern behandelt Component Refs, Templates und Events als Daten.
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `rmt-lifecycle-demo-build-ready` | im Scaffold-Wiring deklarierter Ready-Kanal fuer Host-Adapter. |
+| `rmt-lifecycle-demo-build-changed` | im Scaffold-Wiring deklarierter State-Change-Kanal fuer Host-Adapter. |
+
+## A11y-Profil
+
+Das A11y-Profil setzt `role="region"`, verlangt ein `aria-label`, beschreibt Screenreader-Signale fuer semantische Region und Statusaenderungen und fuehrt Reduced-Motion-/Forced-Colors-Regeln im Shadow DOM.
+
+## Performance-Profil
+
+Das Performance-Profil nutzt `xtend.performance.component-profile.v1`, `budgetClass: critical`, `lane: user-blocking` und `hydrationPolicy: visible`. Kritische Messpunkte sind Loader, Mount, Hydration, Render, Update, State-Sync und Event-Action.
+
+## RC1 Build Boundary
+
+Die Komponente ist absichtlich ein Build-Artefakt aus dem RMT-vNext-Pfad:
+
+- Source: `xtendrmt/rmt-lifecycle-demo.rmt`
+- Generator: `xtend-builder/generators/rmt-build.js`
+- Build-Komponente: `components/x-rmt-lifecycle-demo-build.js`
+- Browser Smoke: `tests/browser/fixtures/rmt-lifecycle-demo-rmt-build-smoke.html`
+
+Damit ist sie Teil der RC1-Test-Build-Recovery: Manifest, Docs, Suite, Fixture und Public Types bleiben im Component Catalog sichtbar.

package/docs/de/components/xalert.md

@@ -0,0 +1,81 @@
+# xalert - XTend Komponente
+
+## Uebersicht
+
+`<x-alert>` ist die prominente Feedback-Komponente fuer laenger sichtbare Hinweise, Warnungen und Fehler. Im Unterschied zu Toasts kann ein Alert blockierend oder explizit schliessbar auftreten.
+
+## Verwendung
+
+```html
+<x-alert type="error" closable overlay aria-label="Fehlerhinweis">
+  Ein Fehler ist aufgetreten
+</x-alert>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `type` | string | `info`, `success`, `warning`, `error` |
+| `closable` | boolean | zeigt einen Schliessen-Button |
+| `duration` | number | optionale Auto-Close-Dauer |
+| `overlay` | boolean | zeigt den Alert als zentriertes Overlay |
+| `aria-label` | string | Screenreader-Label |
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `alert-shown` | nach dem Anzeigen des Alerts |
+| `alert-dismissed` | nach dem Schliessen des Alerts |
+
+## State-Contract
+
+Die Instanz spiegelt ihren Zustand kompatibel in `xstate`:
+
+- `xtend.component.x-alert.<id>`
+- `xalert-state-<id>`
+
+Das Event-Detail enthaelt unter anderem:
+
+```js
+{
+  id: 'alert-abc123',
+  type: 'error',
+  closable: true,
+  overlay: true,
+  dismissed: false,
+  reason: 'connected'
+}
+```
+
+## Runtime-Contract
+
+- API-gemanagte Alerts werden aggregiert in `xstate.get('ui').alerts`
+- die Instanz selbst fuehrt ihren Lifecycle ueber `alert-shown` und `alert-dismissed`
+- API und Komponente sprechen keine separaten Close-Pfade mehr
+
+## Feedback Status UX ab WP-E11-09
+
+`<x-alert>` stellt `xtendFeedbackStatusUxProfile` mit `xtend.component.feedback-status-ux-profile.v1` bereit. Das Profil beschreibt `x-alert` als laenger sichtbare Feedback-Shell mit `alert-shown`, `alert-dismissed`, `xalert-state-<id>`, `a11y.announce`, Fabric-Lane `a11y` und RMT Shell Authoring.
+
+Fehler und Warnungen nutzen assertive Live Regions; neutrale und erfolgreiche Hinweise bleiben polite. Event-Details enthalten `source: 'x-alert'` und `stateKey`, sodass Form-, Router- oder RMT-Adapter Alerts konsistent schedulen und diagnostizieren koennen.
+
+## Kontrastfarben
+
+`<x-alert>` nutzt solide Kontrastfarben ohne Farbverlaeufe. Die Varianten `info`, `success`, `warning` und `error` setzen jeweils eigene Tokens fuer Hintergrund, Text, Border und Accent, damit Alerts in Light- und Dark-Mode lesbar bleiben und ihre Signalwirkung behalten.
+
+Die wichtigsten Theme-Tokens sind:
+
+- `--xtend-alert-info-bg`, `--xtend-alert-info-fg`, `--xtend-alert-info-border`, `--xtend-alert-info-accent`
+- `--xtend-alert-success-bg`, `--xtend-alert-success-fg`, `--xtend-alert-success-border`, `--xtend-alert-success-accent`
+- `--xtend-alert-warning-bg`, `--xtend-alert-warning-fg`, `--xtend-alert-warning-border`, `--xtend-alert-warning-accent`
+- `--xtend-alert-error-bg`, `--xtend-alert-error-fg`, `--xtend-alert-error-border`, `--xtend-alert-error-accent`
+
+Fuer Dark-Mode koennen dieselben Tokens mit dem Suffix `-dark` ueberschrieben werden, etwa `--xtend-alert-error-bg-dark`.
+
+## Hinweise
+
+- Alerts sind fuer inhaltlich wichtigere, laenger sichtbare oder blockierende Rueckmeldungen gedacht
+- `window.XAlert.show()` ist der bevorzugte Einstieg fuer API-gemanagte Alerts
+- fuer kurze, nicht blockierende Hinweise ist `x-toast` die passendere Komponente

package/docs/de/components/xbutton.md

@@ -0,0 +1,103 @@
+# xbutton – XTend Komponente
+
+> **Siehe auch:** [xalert](./xalert.md), [xstate](./xstate.md), [xtheme](./xtheme.md)
+
+## Uebersicht
+
+`<x-button>` ist der interaktive Basisbutton fuer XTend Apps. Die Komponente bietet Varianten, Groessen, Ladezustand, dekorative Icons, Focus-Visible-Styles, Reduced-Motion-/Forced-Colors-Pfade und seit `WP-E12-06` ein explizites Performance- und Interaction-Budget.
+
+## Features
+
+- Varianten: `primary`, `secondary`, `danger`
+- Groessen: `small`, normal, `large`
+- Ladezustand ueber `loading` und `aria-busy`
+- Disabled-/Busy-Guards fuer Click- und Keyboard-Aktivierung
+- Touch Target Token `--xtend-button-min-touch-target`
+- State-Integration ueber `xbutton-state-<id>`
+- Fabric-kompatible Events `button-interaction` und `button-performance-measured`
+- Slot-Fallback bleibt erhalten, damit spaet nachgereichte Inhalte wie `x-icon` sauber hydrieren
+
+## Verwendung
+
+```html
+<x-button variant="primary" size="large" icon="/icons/save.svg">Speichern</x-button>
+<x-button loading aria-label="Speichern laeuft">Bitte warten...</x-button>
+<x-button aria-label="Theme wechseln"><x-icon name="sun" decorative></x-icon></x-button>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `disabled` | Boolean | Deaktiviert Interaktion und setzt `aria-disabled` |
+| `label` | String | Fallback-Text, wenn kein Slot-Inhalt vorhanden ist |
+| `variant` | String | `primary`, `secondary`, `danger` oder Custom-Klasse |
+| `size` | String | `small`, normal oder `large` |
+| `icon` | String | SVG-String oder Icon-URL |
+| `loading` | Boolean | Zeigt Spinner, sperrt Interaktion und setzt Busy-State |
+| `aria-label` | String | Zugänglicher Name fuer Screenreader |
+| `aria-busy` | Boolean | Expliziter Busy-Status ohne zwingenden Loading-Spinner |
+
+## Events
+
+| Event | Beschreibung |
+|-------|--------------|
+| `click` | weitergeleiteter Click der internen Button-Shell |
+| `focus` / `blur` | weitergeleitete Focus-Events |
+| `loading-start` | `loading` wurde aktiviert |
+| `loading-end` | `loading` wurde deaktiviert |
+| `button-interaction` | Fabric-kompatible Interaktionsmessung fuer Click/Keyboard |
+| `button-performance-measured` | Performance-Messpunkt nach Hydration, Update oder Interaktion |
+
+## API
+
+| Methode | Zweck |
+|---------|-------|
+| `setLoading(loading, options?)` | toggelt den Ladezustand programmatisch |
+| `getPerformanceBudget()` | liefert die ms-Budgets des Performance-Profils |
+| `getInteractionBudget()` | liefert Click-, Keyboard-, Busy- und Touch-Target-Budgets |
+| `snapshotPerformance()` | liefert den aktuellen Snapshot `xtend.component.performance-snapshot.v1` |
+
+## Performance-Profil
+
+`x-button` besitzt das Runtime-Profil `xtend.performance.component-profile.v1` mit:
+
+- `budgetClass`: `interactive-small`
+- `lane`: `user-blocking`
+- `hydrationPolicy`: `visible`
+- `criticalMeasurements`: `xtend.component.hydrate`, `xtend.component.render`, `xtend.component.update`, `xtend.event.handler`, `xtend.interaction.click`, `xtend.interaction.keyboard`
+- `budgetsMs`: `hydrate`, `renderUpdate`, `eventAction`, `keyboardAction`, `busyToggle`, `stateSync`
+
+Damit kann der Button von Fabric, Regression-Gates und spaeteren RMT Shells als kleine, user-blocking Interaktion geplant werden.
+
+## RMT und Fabric
+
+Die Komponente deklariert `xtendRmtMetadata` mit `adapter: 'xtend.component'`, `templateMode: 'dom_descriptor'`, `eventBindingMode: 'dom-event-to-rmt-command'` und der Boundary `no-rmt-kernel-import-of-xtend-types`. RMT kann den Button damit authoren und schedulen, ohne XTend-Typen in den Kernel zu importieren.
+
+Fabric konsumiert:
+
+- `button-interaction`
+- `button-performance-measured`
+- `snapshotPerformance()`
+- State-Key `xbutton-state-<id>`
+
+## Styling & Theming
+
+```css
+x-button {
+  --primary-color: #007bff;
+  --focus-color: #80bfff;
+  --xtend-button-min-touch-target: 44px;
+}
+```
+
+Der Button respektiert `prefers-reduced-motion` und `forced-colors`. In Forced-Colors-Modus werden Systemfarben, sichtbarer Fokus und ein textuelles Busy-Signal genutzt.
+
+## Accessibility
+
+- nativer Button im Shadow DOM mit `role="button"`
+- sichtbarer `:focus-visible` Zustand
+- `aria-disabled` und `aria-busy`
+- dekorative Icons mit leerem `alt`
+- minimale Touch-Zielflaeche ueber Token
+- Keyboard-Aktivierung ueber native Button-Semantik plus Messpunkt fuer `Enter` und `Space`

package/docs/de/components/xcalendar.md

@@ -0,0 +1,82 @@
+# xcalendar – XTend Komponente
+
+> **Siehe auch:** [xcards](./xcards.md), [xform](./xform.md), [xstate](./xstate.md)
+
+## Übersicht
+
+`<x-calendar>` ist ein moderner, barrierearmer Kalender mit Form-Integration, State-Management und Theming. Er eignet sich für Datumsauswahl und Terminverwaltung.
+
+---
+
+## Features
+- Form-assoziiert (HTML5 Form API)
+- State-Integration via xstate
+- Theming via CSS Custom Properties
+- Responsive Design
+
+---
+
+## Verwendung
+
+```html
+<x-calendar></x-calendar>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `value`     | String  | Ausgewähltes Datum (ISO-Format)      |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| `change`      | Wird bei Datumsauswahl ausgelöst     |
+| `date-select` | aktueller XTend-Contract bei Datumsauswahl, Detail: `{ value, date }` |
+
+---
+
+## API
+- **Wert setzen/lesen:** `element.value = '2025-07-16'`
+- **State-Integration:** Automatisch via xstate
+
+## Component-Level-Contract ab ER-WP-33
+
+`<x-calendar>` ist form-associated, schreibt Auswahl und View-Date nach `xcalendar-state-<id>` und rendert die Monatsansicht als ARIA-Grid. Tageszellen nutzen `role="gridcell"` und `aria-selected`; Monatsnavigation wird ueber beschriftete Buttons angeboten.
+
+## Form Controls UX ab WP-E11-08
+
+`<x-calendar>` stellt `xtendFormControlUxProfile` mit `xtend.component.form-control-ux-profile.v1` bereit. Das Profil verbindet Datumsauswahl, `date-select`, `xcalendar-state-<id>`, `ui.user-blocking.input`, Grid-A11y, Fabric-Lane `user-blocking` und RMT Shell Authoring.
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const cal = document.createElement('x-calendar');
+cal.value = '2025-07-16';
+document.body.appendChild(cal);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-calendar {
+  --border-color: #ccc;
+  --background-color: #fff;
+}
+```
+
+---
+
+## Accessibility
+- ARIA-Rollen, Keyboard-Navigation
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*

package/docs/de/components/xcards.md

@@ -0,0 +1,128 @@
+# xcards – XTend Komponente
+
+> **Siehe auch:** [xmasonry](./xmasonry.md), [xcalendar](./xcalendar.md), [xstate](./xstate.md)
+
+## Übersicht
+
+`<x-cards>` ist ein flexibles Grid-Layout für beliebige Inhalte. Es unterstützt Responsive Design, Theming und State-Integration.
+
+---
+
+## Features
+- Grid-Layout mit variabler Spaltenzahl
+- Responsive (1 Spalte auf Mobilgeräten)
+- Theming via CSS Custom Properties
+- State-Integration via xstate
+
+---
+
+## Verwendung
+
+```html
+<x-cards columns="4" gap="2rem">
+  <div>Card 1</div>
+  <div>Card 2</div>
+</x-cards>
+```
+
+---
+
+## Attribute
+| Attribut    | Typ     | Beschreibung                        |
+|-------------|---------|-------------------------------------|
+| `columns`   | Number  | Anzahl der Spalten (default: 3)      |
+| `gap`       | String  | Abstand zwischen Karten (default: 1.5rem) |
+
+---
+
+## Events
+| Event         | Beschreibung                        |
+|---------------|-------------------------------------|
+| –             | –                                   |
+
+---
+
+## API
+- **Spalten dynamisch setzen:** `element.setAttribute('columns', 2)`
+- **State-Integration:** Automatisch via xstate
+
+---
+
+## Beispiel: Dynamisch per JS
+
+```js
+const cards = document.createElement('x-cards');
+cards.setAttribute('columns', 2);
+document.body.appendChild(cards);
+```
+
+---
+
+## Styling & Theming
+
+```css
+x-cards {
+  --card-columns: 4;
+  --card-gap: 2rem;
+}
+```
+
+---
+
+## Accessibility
+- Grid-Rolle, semantisches HTML
+
+---
+
+*Letzte Aktualisierung: 16. Juli 2025*
+
+## Layout Display Media UX Profil
+
+`x-cards` stellt ab `WP-E11-12` das Profil `xtend.component.layout-display-media-ux-profile.v1` bereit. Die Komponente beschreibt ein responsive Card-Grid fuer RMT Shell Authoring und nutzt den State-Key `xcards-state-<id>`.
+
+- Profil-Getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `layout.reflow.commit`
+- Event: `cards-layout`
+- Snapshot: `snapshot()`
+- CSS Parts: `root`, `grid`, `item`
+
+## ECH-WP-07 Token-Tabelle und signatureDesign
+
+`signatureDesign`: Eigenstaendiger Enterprise-Card-Rhythmus mit tokenisiertem Glas, Kante, Tiefe und Typografie. Das Default-Grid soll nicht wie ein generisches SaaS-Kartenraster wirken und trotzdem voll themebar bleiben.
+
+| Token | Zweck |
+| --- | --- |
+| `--xtend-layout-surface` | Card-Flaeche |
+| `--xtend-layout-text` | Card-Textfarbe |
+| `--xtend-layout-border-color` | Card-Kante |
+| `--xtend-layout-radius` | Card-Radius |
+| `--xtend-layout-elevation` | Card-Schatten |
+| `--xtend-layout-spacing` | Card-Padding |
+| `--xtend-layout-gap` | Grid-Abstand |
+| `--xtend-layout-font-family` | Card-Typografie |
+| `--xtend-layout-font-size` | Card-Textgroesse |
+| `--xtend-layout-media-radius` | Bild-/Medienradius |
+| `--xtend-layout-focus-ring` | Card-Fokus |
+| `--xtend-layout-grid-min` | Grid-Untergrenze |
+| `--xtend-layout-content-max` | Grid-Maximalbreite |
+
+## ECH-WP-07 Fremdtheme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-cards,
+[data-xtend-layout-theme="enterprise-foreign"] x-card {
+  --xtend-layout-surface: #f8f4ef;
+  --xtend-layout-text: #1b2823;
+  --xtend-layout-border-color: rgba(27, 40, 35, 0.18);
+  --xtend-layout-radius: 0.3rem;
+  --xtend-layout-elevation: 0 12px 30px rgba(27, 40, 35, 0.12);
+  --xtend-layout-spacing: 1.35rem;
+  --xtend-layout-gap: 1.1rem;
+  --xtend-layout-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-layout-font-size: 1rem;
+  --xtend-layout-media-radius: 0.25rem;
+  --xtend-layout-focus-ring: 3px solid #8f4f2a;
+  --xtend-layout-grid-min: minmax(15rem, 1fr);
+  --xtend-layout-content-max: 74rem;
+}
+```

package/docs/de/components/xcheckbox.md

@@ -0,0 +1,102 @@
+# xcheckbox – XTend Komponente
+
+> **Siehe auch:** [xform](./xform.md), [xinput](./xinput.md), [xstate](./xstate.md)
+
+## Uebersicht
+
+`<x-checkbox>` ist das TypeScript-first Binary-Control aus `WP-E10-09`. Es ist form-associated, unterstuetzt `checked` und `indeterminate`, meldet Aenderungen ueber XTend Events und kann von RMT als framework-agnostische UI-Komponente scheduled werden.
+
+## Verwendung
+
+```html
+<x-checkbox id="terms" name="terms" required checked>
+  <span slot="label">Nutzungsbedingungen akzeptieren</span>
+  <span slot="error">Die Zustimmung ist erforderlich.</span>
+</x-checkbox>
+```
+
+## Attribute
+
+| Attribut | Typ | Beschreibung |
+|----------|-----|--------------|
+| `name` | String | Formularname |
+| `value` | String | Formularwert bei aktivem Zustand, Standard `on` |
+| `checked` | Boolean | aktueller Auswahlzustand |
+| `indeterminate` | Boolean | visueller Mischzustand |
+| `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 |
+|-------|--------|
+| `checkbox-changed` | `{ checked, value, source: 'x-checkbox' }` |
+| `checkbox-invalid` | `{ checked, value, message, source: 'x-checkbox' }` |
+
+## API
+
+- `element.checked`
+- `element.value`
+- `element.indeterminate`
+- `element.toggle()`
+- `element.checkValidity()`
+- `element.reportValidity()`
+- `element.validate()`
+- `element.reset()`
+- `element.focus()`
+
+## State, RMT und Fabric
+
+`<x-checkbox>` schreibt nach `xcheckbox-checked-<id>`. RMT sieht die Komponente ueber `xtend.rmt.component-contract.v1` als DOM-Descriptor und nicht als XTend-Kernel-Abhaengigkeit. Die Fabric-Metadaten binden Events an die `user-blocking` Lane und halten den Boundary-String `no-rmt-kernel-import-of-xtend-types` sichtbar.
+
+## A11y und Performance
+
+Das Control spiegelt `aria-checked`, `aria-describedby`, `required` und `disabled` auf die native Checkbox. Das Performance-Profil nutzt `xtend.performance.component-profile.v1` mit `budgetClass: 'interactive-small'`, `lane: 'user-blocking'` und `hydrationPolicy: 'visible'`.
+
+## Form Controls UX ab WP-E11-08
+
+`<x-checkbox>` stellt `xtendFormControlUxProfile` mit `xtend.component.form-control-ux-profile.v1` bereit. Das Profil verbindet Label, Hint, Error, `checkbox-changed`, `checkbox-invalid`, `xcheckbox-checked-<id>`, `ui.user-blocking.input`, Fabric-Lane `user-blocking` und RMT Shell Authoring.
+
+## ECH-WP-08 Form Theme/A11y Hardening
+
+`signatureDesign`: Taktile Enterprise-Checkbox mit nativer Zuverlaessigkeit, separat themebarer Selection-Affordance und statusfestem Helper/Error-Rhythmus.
+
+| 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` | Native Control-/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` | Checkbox-Akzent |
+
+Density-Profile: `comfortable`, `compact`, `dense`. Invalid ist zusaetzlich zu Farbe durch Outline und Error-Marker erkennbar.
+
+```css
+[data-xtend-form-theme="enterprise-foreign"] x-checkbox {
+  --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;
+}
+```