#29596 TL Views: Gestaltungsoptionen für app-spezifische Oberflächen (css-class, Text-Varianten, Layout-Optionen, Anzeigevarianten für Eingaben, Theme-Tokens)

enhancement

major

#27490

Historie begrenzen/abschneiden/aufräumen

#29004

Allow to use a virus scanner for uploads

#29006

Uniqueness constraint

#29421

Add a React calendar view control and declarative <calendar> UIElement.

#29429

Complete the view designer so a view can be built with it end to end

#29462

React: Generisches Formularelement zum Bearbeiten von Konfigurationen

#29487

React view: <form> exposes neither column count nor label position, and there is no <group> element

#29499

Hinweis auf den Wartungsmodus in der React-Oberfläche

#29507

Hinweis auf den bevorstehenden Session-Timeout in der React-Oberfläche

#29523

<sidebar> exposes two of the five sidebar item kinds ReactSidebarControl renders, and none of the badge

#29525

Offer the app-bar user menu in the core view layer

#29528

Let the UI theme follow the system's dark/light preference

#29529

Stellvertreter als explizite Sicherheitsaktion im Einstellungsdialog der TL Views benennen (mit Passwortbestätigung, auch für die Passwortänderung)

#29530

URL routing in TL Views: model objects in route parameters, drill-down path in the URL, query bindings

#29531

Filterleiste für Tabellen: Presets, Freitextsuche über die sichtbaren Spalten und benutzereigene gespeicherte Filter

#29532

Object navigation in TL Views: display targets, a reveal protocol for containers, and a show-object action

#29540

Usability feedback on the user menu and the personal settings dialog

#29542

TL Views: channel-bound value inputs for every primitive and reference type, with a submit hook

#29543

TL Views: conditional branches in a generic-command action chain

#29544

TL Views table: row activation by double-click or Enter, and a grouping UI over the existing table model

#29545

TL Views table: drag and drop of rows between tables and onto rows

#29546

TL Views: colors for enumeration literals and classifier objects rendered as pills, and a progress control

#29547

Generierte React-Bundles nicht mehr einchecken

#29548

React view UI: URL, e-mail and phone attributes are edited as typed inputs and displayed as links

#29551

TL Views: only registered entry points may be loaded top-level via URL

#29557

React view commands: the ExecutableState reason of a disabled command never reaches the client, and there is no disabled-if rule beside visible-if

#29567

TL Views: Mehrfachauswahl für Tabellen und Bäume (selection-mode="multi")

#29575

TL Views: UI-Inspektor – Zustand eines Elements der React-Oberfläche einsehen (z. B. durch Zugriffsrechte ausgeblendete Tabellenzeilen) und als Skript-Zusicherung aufzeichnen

#29596

TL Views: Gestaltungsoptionen für app-spezifische Oberflächen (css-class, Text-Varianten, Layout-Optionen, Anzeigevarianten für Eingaben, Theme-Tokens)

#29597

TL Views: object-list als generischer Repeater (Elemente ohne Container, Raster-Layout, Index für gestaffelte Animation)

#29598

TL Views: image mit URL-/Ressourcen-Quelle, Seitenverhältnis, Füllmodus und überlagerten Inhalten; avatar mit Foto

#29599

TL Views: Wizard-/Stepper-Element für mehrstufige Dialogflüsse (statische und dynamische Schritte, Fortschritt, Übergänge, Auto-Weiter)

#29600

TL Views: Anzeige lang laufender Server-Aufträge (Phasen, Fortschritt, unbestimmter Fortschritt, verstrichene Zeit)

#29601

TL Views: Anzeige von HTML-Inhalten und HTML-Dokumenten (Agenten-Antworten, Exposés) mit Vorschau und Druck/PDF

#29603

Physisches Löschen gelöschter Objekte aus versionierten Tabellen (Purge): Abschlussmenge über Pflichtreferenzen und Inhalte, optionale Verweise werden geleert

#29605

TL Views table filter bar: an initially active preset, and the active preset and search term as channels for query bindings

#29607

TL Views: a display target reveals a tab inside a pushed frame (a <show> is located within the view shown before it)

#29608

TL Views: value-input mit Platzhalter, zugänglicher Name bei verborgenem Label, bedingte Anzeige von Elementen mit visible-if

#29615

TL Views: a <form> spanning a page does not take part in the fill contract, so a split panel or filling panel inside it is sized by its content

#29617

Design System: Tokens and base classes as own package (wave 0)

#29625

TL Views: a page layout of weighted columns (main 2/3, side 1/3) that reflows to one column on a narrow viewport; the split-panel keeps its sashes and clips the side pane at 400 px

#29629

TL Views: `<show-view>` / `<show-views>` actions reveal a mounted view by name and write its channels from a command chain without a model object

#29630

TL Views: a chunked, transactional job body for <start-job> - scripted init / elements / steps / finish, one transaction per chunk, per-item retry and skip, phases and progress derived from the steps

#29637

Modellbasierte Berechtigungsdefinition: Zugriffselternobjekt (Delegation der Zugriffsentscheidung an Container oder Referenz, Standard für Kompositionsteile, Entscheidungs-Cache je Interaktion), Rollenelternobjekt statt Security-Parent, Vollständigkeitsprüfung und Assistent

#29640

TL Views: Gruppen einer gruppierten Tabelle werden nach dem Komparator der Gruppierungsspalte sortiert, nicht in zufälliger Reihenfolge

#29641

TL Views: Der React-TL-Script-Editor zeigt Hilfetexte zu Funktionen und Modellelementen an (Kontexthilfe zur Vervollständigung, Hover-Tooltips) und springt beim Tippen nicht mehr an den Textanfang

#29643

TL Views: Anpassung der React-Oberfläche an das Corporate Design eines Kunden mit eigener React-Komponentenbibliothek (Leitfaden und fehlende Erweiterungspunkte)

#29671

TL Views: Drag & Drop in Tabellen nach Regeln einschränken, mit Rückmeldung pro Ziel während des Ziehens

#29681

TL-Script modifiedRevision() berücksichtigt Referenz- und Übersetzungsänderungen; Attribut-Storages "touchen" das Besitzerobjekt nicht mehr

#29690

Option zum Deaktivieren des Browserstarts beim Hochfahren

#29706

Speed up slow unit tests in tl-core and tl-element

minor

#28324

Create documentation for layout overlays

#29500

No way to show a master-detail as an overlay: the detail always costs the list half its width

#29506

A dashboard tile cannot be the entry point it looks like: neither <tile> nor <card> carries an action

#29550

React controls do not consume the theme's radius and surface tokens consistently; a flat theme needs per-component CSS overrides

#29553

React view <table>: <column> has no width, every column defaults to 150 px, so a table with more than six columns overflows a 940 px pane

#29611

TL Views: `<notify>` action shows a translated notice in a generic-command chain (snackbar or OK dialog, optionally stopping the chain); `<throw-error>` removed

#29624

SSO-Login ohne registrierten Benutzeraccount: konfigurierbare Hinweisseite (ApplicationPages.unknownAccountPage) statt Login-Maske, mit Standardseiten für die klassische und die React-Oberfläche

#29670

TL-Script: Funktionen trim, trimStart und trimEnd entfernen Leerraum am Anfang und Ende einer Zeichenkette

#29675

TL Views: Anlegen und Löschen richten sich nach den Modell-Zugriffsrechten, statt erst nach dem Ausfüllen mit „Kopieren nicht erlaubt“ abgelehnt zu werden

#29683

TL-Script: htmlText(html) cannot carry images, so an HTML text with <img> referencing files cannot become a structured text

defect

critical

#29665

TL Views: a click into a rich-text field with a hidden label focuses the editor's Bold button, so the typed text is lost

#29682

TL Views: ConcurrentModificationException in ReactToolbarControl.replaceGroups on a page reload shows the "Internal error" page

major

#25723

Missing check against attribute name clashes during inheritance

#29438

React view layer displays date attributes in a hard-wired format instead of the annotated one

#29474

Neither React drag handle shields the page (or locks the cursor) while dragging

#29502

<tree> does not follow model changes: a delete never arrives, a create collapses the whole tree

#29504

Zwangsabmeldung erreicht die React-Oberfläche nicht

#29509

Die Cookie-Prüfung weist den erneuten Aufruf ihrer eigenen URL ab und meldet dabei die Sitzung ab

#29512

Attribute in tl.model, die de-facto mandatory sind, auch als mandatory deklarieren

#29533

TL Views: executability rules and derived channels must follow changes of the object on a channel, not only of the channel value

#29534

TL Views tile-stack: frames get no definite height, and a frame that is uncovered again is rebuilt from scratch

#29535

TL Views table: a selection channel value that is not among the rows must not be cleared by the table

#29541

Single-valued drop-down select shows two clear buttons

#29554

React view <table>: Spalten für beliebige Zeilenobjekte – berechnete Spalten, eingebettete Spalten referenzierter Objekte, dynamische Spalten; transiente Zeilen

#29556

react-api/tooltip runs without a TLSubSessionContext: a cell tooltip over a derived attribute using label() answers HTTP 500 (NullPointerException in Label.eval)

#29560

React view <upload-command>: Fehler beim Upload (Ausnahme in der Aktionskette, überschrittenes Größenlimit) erreichen den Benutzer nicht; Upload-Größenlimit konfigurierbar

#29562

security.xml grants for a SecurityScopeService scope are lost on the start that introduces the scope: AccessConfigurationSetupService imports before the scope exists and stores the file hash anyway

#29564

SecurityConfigurationService: an application cannot add a role to a framework type's grant — a <class> grant is keyed by operation and replaces the earlier entry, silently revoking the framework's roles

#29568

TL Views: Eine ohne Anmeldung aufgerufene Route geht beim Login verloren

#29573

TestReactStylesheetTokens fails on master: the pill and progress rules of tlReactControls.css do not keep the theme-token contract

#29574

TL Views: Veto eines verschachtelten Channel-Schreibzugriffs bricht die Benachrichtigung des äußeren Channels ab (Tabelle und Detailbereich bleiben nach "Verwerfen" auf dem alten Objekt)

#29576

React-Controls-Bundle enthält eine zweite React-Instanz (createPortal-Import in TLDropdownSelect)

#29586

tl-layout-react test compilation fails on master: TestSelectValueObservation and TestResourceCellObservation use the DefaultReactContext constructor that #29552 removed

#29590

React view: Mehrwertige String-Werte werden in Tabellenzellen und Anzeigefeldern ohne Trennzeichen aneinandergehängt

#29602

TL Views: a URL adopted into an existing session keeps the slot content of the sidebar item that was active before

#29604

ElementSecurityUpdateManager: quadratic collection diff on commit (AbstractSet.removeAll over a List) makes appending to a large reference take seconds

#29609

TL Views: a `<progress>` (ChannelObjectObserver) evaluates its expression on a deleted object and logs an ERROR when an observed object is deleted

#29610

TL Views: a table on an inactive tab shows stale cell values after the displayed objects changed, until its rows are refreshed

#29613

TL Views: a `<dashboard>` tile gets no definite height, so a table in a tile grows with its rows instead of scrolling

#29618

TL Views: a URL switches the sidebar away from an item with unsaved changes without asking

#29619

TL Views: a warning-level configuration constraint is dropped, so the model editor shows nothing

#29620

TL Views: a tree node is never a link to where its object is displayed, although the display targets declare one

#29622

TL Views: a `<flow-diagram selection="ch">` writes its channel but does not follow it, so a node selected elsewhere is not marked in the diagram

#29623

Build: the translate goal re-translates committed German messages after a pull or branch switch when the doclet did not run in the same build

#29626

TL Views: a panel toolbar has no overflow mode; at 400 px width the ticket page's six commands run 908 px wide, three of them unreachable, and the panel title is pushed out

#29627

TL Views table: an I18NString cell wraps its text and is clipped mid-glyph by the 36 px row instead of ending in an ellipsis; header labels are cut without an ellipsis

#29631

TL Views: Escape closes a <window> dialog while a <start-job> it started is still running; the job runs on with nothing left to show or cancel it

#29634

TL Views: the configuration editor builds a text field for a property whose format is parse-only, so selecting a derived attribute in the model editor fails with "There is no normative way to serialize a locator configuration"

#29635

TL Views: a <tree> renders every node as a link, so a click on the label navigates away instead of just selecting the node

#29639

TL-Script objectResolve(id, typeOrTable): resolution via a type including its subtypes or via a table name, objectTable delivers the table of an object, and an object the current user may not read is not resolved

#29644

Inkrementelle Security unvollständig bei Verwendung von scripted-steps

#29648

TL Views: Die über ClientResources ausgelieferten Skripte und Stylesheets tragen keine Version in der URL, der Browser verwendet nach einer Aktualisierung veraltete Client-Dateien

#29649

TL Views: a job's final state is overwritten by a stale "running" snapshot, so <job-status> shows a completed job as running

#29666

TL Views: leaving a frame by breadcrumb, Back, navigate-pop, show-object or logout discards a form's unsaved changes without asking

#29667

TL Views: a form in edit mode keeps showing stale values after a command committed a change to the same object

#29672

TL Views: initial-edit-mode, an object switch and the edit-mode channel enter edit mode without asking <edit-executability>

#29674

TL Views: after a page load, app-bar command labels appear in the browser's language instead of the user's ("Record" in a German session)

#29677

TL Views: a card in a content-sized column stack shrinks below its content; a table beside it takes more height than it reports

#29678

BoundHelper: Einstellung use-default-security-parent entfernen – ohne konfigurierte Security-Parent-Regel hat ein Objekt keinen Security-Parent

#29680

Classic UI: the anonymous session is offered the developer options and can run "Ressourcen neu laden"

#29698

CollectionUtil.removeDuplicates() verliert die Reihenfolge der Elemente

#29705

Workspace/PathInfo: web-fragment.war eines Moduls wird nicht gefunden, wenn Jar und Fragment aus verschiedenen lokalen Maven-Repositories aufgelöst werden (maven.repo.local.tail)

minor

#27889

Switch to SNAPSHOT version does not work

#28474

Background colors of the buttons are not consistent

#29496

React table: a column resize is rejected with "Integer value expected" and the new width is lost when the client sends a fractional width

#29497

React UI tooltips: clipped table cells and column headers, compact toolbar buttons and attribute descriptions get tooltips; native title attributes replaced by bridge tooltips

#29503

TLResourceCell ships no CSS: icon and label touch wherever a resource cell shows both

#29505

Panel header changes height when its toolbar has no commands, so master-detail headers do not line up

#29508

Weitere QueryExecutor bedürfen keiner Security

#29552

TLPhotoViewer fetches its image after the control was disposed when a <switch> replaces it (404 on react-api/data, "Command target NOT FOUND" WARN)

#29555

TL-Script label(<constant>) is folded at compile time: the result is fixed to the compiling thread's locale instead of the reading user's

#29558

XMLInstanceImporter silently imports an internationalized attribute given as value="…" as empty, even when the attribute is mandatory

#29561

TL Views: display of a referenced object does not follow a change of its label (table cell, form field)

#29563

Standardgruppe: das persistierte Gruppen-Flag "defaultGroup" wird aus der Konfiguration abgeleitet statt in der Datenbank gespeichert; Semantik der Standardgruppe dokumentiert

#29591

ResKey.decode akzeptiert in #(…)-Literalen nur doppelt gequotete Übersetzungen — #('Travel'@en) schlägt fehl, obwohl TL-Script beide Quote-Arten erlaubt

#29606

TL Views: a `<color token>` naming a token the React theme does not emit renders the pill untinted, silently

#29628

TL Views: "Reset personal settings" clears the stored configuration, but the running session keeps its table state and writes it back; the declared column widths return only after a new login

#29636

TL Views: a click on a <tree> node clears the selection channel before setting it, so every dependent display and command flips to empty and back

#29663

TL Views: a <form> no longer insets itself; a <fields> grid inside a form got the page inset twice

#29664

TL Views: the form's Edit, Save, Cancel and Apply commands are labelled with a trailing period ("Bearbeiten.", "Speichern.")

#29668

TL Views: the rich-text editor's toolbar overflows a narrow field; table and undo/redo buttons are cut off

#29669

A request with a malformed query string ("?q=50%") is answered with an "Internal error" page (HTTP 500) instead of 400

#29673

TL Views: personalization commands ("Layout bearbeiten", "Diesen Filter speichern") are offered to the anonymous session

#29676

TL Views admin: deleting an account logs "Target object is deleted" from the still-open account form; delete asks for no confirmation

#29679

TL Views: a command refused by its executability rule is reported with the title "Interner Fehler"

task

minor

#29612

FAQ: Migration guide for upgrading an application from TL 7.11 to 8.0

#29702

Mindestversion von Maven im Build auf 3.8.9 anheben

enhancement

major

#29596

TL Views: Gestaltungsoptionen für app-spezifische Oberflächen (css-class, Text-Varianten, Layout-Optionen, Anzeigevarianten für Eingaben, Theme-Tokens)

ReactUI

Kontext

Eine Gap-Analyse der Immobilien-Anwendung (estate-agent, handgeschriebenes React-Frontend mit dunklem "Glas"-Design, Serifen-Überschriften, Foto-Kachelrastern, Filter-Seitenleiste mit Chips, Segment-Schaltern und Schiebereglern) gegen die React-Oberfläche (.view.xml-Ebene) hat ergeben: Die Struktur (App-Shell, Navigation, Routing, Tabellen, Formulare, Dialoge, Diagramme, Theme-System mit Dark-Mode) ist vorhanden, aber ein app-spezifisches Erscheinungsbild lässt sich nicht ausdrücken, weil die Elemente keine Stilanker und nur ein grobes Layout-Vokabular haben.

Das Theme selbst (Farben, Schriften, Icon-Sets) bleibt app-spezifisch und wird in der Anwendung konfiguriert. Das Engine-Ticket liefert nur die Optionen und Tokens, die dafür fehlen. Grundsatz: Optionen an bestehenden Elementen statt neuer Elemente.

Erweiterung

Das Ticket wird in Phasen auf einem Branch umgesetzt (mehrere Pushes/CI-Läufe).

Phase 1: `css-class` für alle Elemente

UIElement.Config erhält die Eigenschaft css-class, die jedes Control an sein Wurzelelement schreibt. Die bestehende gleichnamige Eigenschaft von <text> wandert in die Basis-Konfiguration; <chart cssClass> wird darauf umgestellt. Damit kann eine App-Stylesheet-Regel (registriert über ClientResources) einzelne Panels, Karten, Stacks, Bilder oder Buttons gestalten ("diese eine Karte ist eine Glas-Karte").

Phase 2: Text-Varianten, Ton und Pille

<text> erhält

variant (Typ-Rolle): display, headline, title, body (Standard), label, caption;
tone (Farbrolle): primary (Standard), secondary, helper, accent, success, warning, error, on-color;
appearance: text (Standard) oder pill (bestehende TLPill-Darstellung; Farbe aus tone).

Jede Ausprägung wird als stabile CSS-Klasse (tlText--display, tlText--tone-accent, …) gerendert und aus Theme-Tokens gespeist.

Neue Theme-Tokens mit neutralen Vorgabewerten, die die Controls konsumieren, damit ein App-Theme sie überschreiben kann:

font-family-display (Schrift für display/`headline`/`title`; Vorgabe = font-family),
border-radius-03 (dritte Radius-Stufe für große Flächen),
surface-blur (Backdrop-Weichzeichnung für Flächen; Vorgabe 0),
shadow-glow (Leuchtschatten für Fokus/Hervorhebung; Vorgabe = kein Schatten),
background-image (Hintergrund der App-Shell; Vorgabe = keiner).

Transparente Flächen, Körnung, Zweitakzent u. ä. bleiben App-Stylesheet.

Phase 3: Layout-Optionen

<stack>: wrap, justify und max-width (zentrierte Inhaltsspalte).
<grid>: max-width. (max-columns als Obergrenze für auto-fit, z. B. 3 Karten pro Zeile, liefert #29597 über die gemeinsamen Rasteroptionen von <grid> und <object-list layout="grid">.)

Hero-Abschnitte mit Hintergrundbild und Überlagerung werden per App-CSS auf einem css-class-Stack realisiert; dafür ist kein Engine-Element nötig.

Phase 4: Anzeigevarianten für Eingabefelder

Die Field-Control-Provider erhalten eine display-Option, die per <input-control>-Annotation am Attribut bzw. am <field> gesetzt wird:

SelectControlProvider: dropdown (Standard), chips (Mehrfachauswahl als Tag-Wolke mit umschaltbaren Pillen), segmented (Einfachauswahl als Segment-Schalter mit gleitender Markierung);
NumberInputControlProvider: input (Standard), slider (mit min, max, step, angezeigtem Wert);
BooleanControlProvider: checkbox (Standard), switch.

<value-input> nimmt dieselben Optionen entgegen.

Phase 5: `<value-input>` als Suchfeld

<value-input> erhält icon, placeholder, clearable und debounce (Verzögerung, bevor der Wert in den Kanal geschrieben wird), damit ein freistehendes Suchfeld mit Lupe ohne eigenes Element konfigurierbar ist (zusammen mit dem vorhandenen on-submit und <query-bindings>). (placeholder ist bereits mit #29608 geliefert.)

Phase 6: Übergangs-Anker

Dialog-Öffnen/-Schließen und Frame-Wechsel im tile-stack bekommen CSS-übergangsfähige Zustandsklassen, sodass App-CSS Ein-/Ausblendungen definieren kann. prefers-reduced-motion wird weiterhin beachtet. Die Animationen selbst bleiben App-CSS.

Lösung

Umgesetzt in zwei Pushes auf demselben Branch: Phasen 1, 2, 3 und 5, danach Phasen 4 und 6.

Phase 1

UIElement.Config#getCssClass() (css-class) ist die eine Konfigurationseigenschaft für alle Elemente. Auf Control-Seite gibt es genau einen Zustandsschlüssel cssClass an der Basisklasse ReactControl (setCssClass, in scriptingPresentationKeys() aufgenommen; Unterklassen ergänzen ihre Schlüssel per presentationKeys(super.scriptingPresentationKeys(), …)); die bisherigen gleichnamigen Einzelschlüssel von ReactTextControl, ReactHtmlControl, ReactImageControl, ReactStackControl, ReactOverlayControl, ReactResourceCellControl entfallen. Jedes der 66 Elemente reicht seine konfigurierte Klasse an das zurückgegebene Control weiter (es gibt keinen zentralen Erzeugungspunkt; Kind-Controls werden clientseitig ohne Wrapper-Element gemountet). Ein Element, das das Control eines anderen Elements durchreicht (view, tile), schreibt die Klasse nur, wenn es selbst eine konfiguriert hat. Clientseitig baut die Bridge-Funktion rootClassName(state, …) das className des Wurzelelements jeder der 78 registrierten Komponenten. <text> sendet seinen Überlauf-Modifikator als eigenen Zustandsschlüssel overflow statt in der Klassenzeichenkette; das Enum TextOverflow liegt beim Control. Die abweichend geschriebene Eigenschaft cssClass von <chart> entfällt; es gilt die geerbte css-class. FAQ: docs/faq/react-view-layer.md (Abschnitt „Styling a single element“), docs/faq/new-ui-element.md.

Phase 2

variant, tone, appearance sind drei ExternallyNamed-Enums (TextVariant, TextTone, TextAppearance in com.top_logic.layout.react.control.common) an TextElement.Config, die als getrennte Zustandsschlüssel an TLText gehen (Standardwerte werden mitgesendet) und dort zu tlText--<variant>, tlText--tone-<tone>, tlText--pill werden. Jeder Ton ist eine Regel, die die Custom Property --tlText-tone füllt; Textfarbe und Pillenfarbe lesen sie. appearance="text" behält das heutige Verhalten (ein Wert mit Modellfarbe wird als Pille dargestellt); appearance="pill" rendert immer eine Pille, deren Farbe aus tone kommt, sofern der Wert keine Modellfarbe trägt; ein Text ohne Inhalt zeichnet keine Pille. Die Umfärbung von Text in der primären App-Bar greift nur noch auf tlText--tone-primary, sodass ein explizit gesetzter Ton dort gewinnt.

Typografie: display und headline erhalten eigene Tokens (display-01-font-size/`-line-height`, heading-04-font-size/`-line-height`) und font-family-display; title = heading-03 (+ neues heading-03-line-height), body = body-compact-01, label = heading-compact-02, caption = label-01 (+ neues label-01-line-height). Töne: primary/`secondary`/`helper`/`on-color`/`error` nutzen die vorhandenen text-*-Tokens; neu als Ref-Tokens text-accent → interactive, text-success → support-success, text-warning → support-warning.

Weitere Tokens im default-Theme (Dark erbt): font-family-display (Ref auf font-family), border-radius-03 (1rem, dritte Radius-Stufe „große Fläche“; docs/faq/react-theme-tokens.md beschreibt drei Stufen), surface-blur (Länge, 0`; vom Dialog-Backdrop konsumiert), `shadow-glow (Text, none), background-image (Text, none; von body in tlReactBase.css konsumiert).

Phase 3

<stack>: wrap (boolean), justify (Enum ReactStackControl.StackJustify: start, center, end, space-between, space-around, space-evenly, Regeln .tlStack--justify-*) und max-width. max-width liegt an der gemeinsamen Basis ReactLayoutControl (Zustandsschlüssel maxWidth, Klasse tlBounded: width: 100%, margin-inline: auto) und für Raster auf den gemeinsamen GridOptions, gilt also für <grid> und <object-list> (Raster- und Listenanordnung). Typ ist wie bei <panel width> eine CSS-Länge als Zeichenkette. Die Anordnungsschlüssel des Stacks sind in der Headless-Projektion als reine Darstellung deklariert. FAQ-Abschnitt „Layout: stack and grid“.

Phase 4

Die Anzeigevarianten sind Optionen der vorhandenen Field-Control-Provider (com.top_logic.layout.view.form), gesetzt über den bestehenden <input-control>-Mechanismus: als TLInputControl-Annotation am Attribut oder Typ, als input-control eines <field> und - neu - als input-control eines <value-input> (ValueInputElement.Config; der typbasierte Pfad von FieldControlService.createFieldControl nimmt dafür eine Provider-Konfiguration als Vorrang-Parameter). Jede Variante ist ein reiner Darstellungs-Zustandsschlüssel (display, in scriptingPresentationKeys() deklariert), sodass die Headless-Projektion in jeder Form dieselben Optionen und denselben Wert liest.

Schalter: BooleanPresentation (Modell-Annotation <boolean-display presentation="switch"/>) erhält die Ausprägung switch; die klassische Oberfläche behandelt sie wie checkbox (CheckboxInputTag, PrimitiveColumn, AttributeOperations). BooleanControlProvider.Config#display (@NullDefault) überschreibt die Annotation für ein Feld. ReactCheckboxControl sendet display=switch; TLCheckbox rendert <input type=checkbox role=switch class="tlReactCheckbox--switch"> mit Schiene und Knopf aus Theme-Tokens. Ein Tristate-Wert bleibt Kontrollkästchen (ein Schalter hat keine dritte Stellung).
Chips / Segmente: SelectControlProvider.Config#display mit Enum SelectDisplay (dropdown, chips, segmented; com.top_logic.layout.react.control.select). Ein Server-Control ReactDropdownSelectControl hält Optionsindex und Werteprotokoll für alle Formen und wählt das React-Modul (TLDropdownSelect, TLOptionChips, TLSegmentedChoice); eine Form, die alle Optionen zeigt, bekommt die Optionsliste sofort und bei jeder Wertänderung (invalidateOptions()), das Dropdown lädt weiterhin erst beim Öffnen. Client: selectOptions.tsx (gemeinsamer Optionsdeskriptor, Pille, Bild, Nur-Lese-Wert), TLOptionChips (Toggle-Buttons aria-pressed; Einfachauswahl schaltet um, Mehrfachauswahl toggelt), TLSegmentedChoice (radiogroup/`radio` mit Pfeiltasten, gleitender Marker per ResizeObserver; bei Mehrfachauswahl gefüllte Segmente ohne Marker).
Schieberegler: NumberInputControlProvider.Config mit display (Enum NumberDisplay: input, slider), min, max, step. Die Gültigkeit erzwingen Konfigurations-Constraints, sodass ein Konfigurationsformular keine ungültige Konfiguration zulässt: min/`max` sind Pflicht, sobald display="slider" ist (neue allgemeine Annotation @MandatoryIf(other=@Ref(DISPLAY), value="slider") in com.top_logic.basic.config.constraint.annotation, vergleicht die Konfigurations-Schreibweise des anderen Werts), min < max (@ComparisonDependency), step > 0 (@Bound). Eigenes Control ReactSliderControl (Modul TLSlider): der Wert wird als Zahl ausgetauscht (nicht als Text im Locale-Format) und über NumberFormats.normalize in den Zahltyp des Felds gebracht; die Beschriftung neben dem Griff (valueLabel) schreibt der Server im Format des Felds. Client <input type=range> + <output>, Senden entprellt und beim Loslassen.

Tests: TestBooleanControlProvider, TestSelectControlProvider, TestNumberInputControlProvider (inkl. der Constraint-Fälle), TestMandatoryIf, TestValueInputElement. FAQ: docs/faq/react-view-layer.md, Abschnitt „Display variants of input fields“.

Phase 5

icon (kodiertes ThemeImage, z. B. css:fa-solid fa-magnifying-glass), clearable und debounce werden wie placeholder (#29608) Eigenschaften der FieldSpec, in ReactFieldControlProvider.createField auf jedes Feld-Control angewendet, als Zustandsschlüssel icon, clearable, debounceMs von ReactFormFieldControl an den Client geschickt (reine Darstellung; placeholder bleibt in der Projektion) und in TLTextInput umgesetzt: führendes Icon, Löschen-Schaltfläche (erscheint nur bei Inhalt, schreibt den leeren Wert sofort, Fokus zurück ins Feld), konfigurierbare Verzögerung. Die Konstante VALUE_DEBOUNCE_MS (300 ms) ist einmal in der Bridge definiert; Text-, Zahl- und Passwortfeld lesen debounceMs. Ein Feld, das erst beim Verlassen sendet (URL-Feld, Zahl), ignoriert die Verzögerung. <value-input> deklariert icon, clearable, debounce (@Format(MillisFormat.class), z. B. debounce="300ms").

Phase 6

Ein Bridge-Hook useKeyedTransition({keys, node, container, enterClass, exitClass}) (react-src/bridge/transition.ts, exportiert aus tl-react-bridge) markiert die Änderung dessen, was ein Control anzeigt: ein neu erscheinender Schlüssel bekommt an seinem Element die Eintritts-Klasse, ein verschwindender Schlüssel wird durch eine inerte Kopie seines zuletzt angezeigten Elements (aria-hidden, inert, ohne ids, pointer-events: none) mit der Austritts-Klasse im Container ersetzt. Beides endet mit animationend/`transitionend` am Element selbst, mit dem Wiedererscheinen des Schlüssels oder nach TRANSITION_FALLBACK_MS (1000 ms, einmal definiert). Die erste Anzeige und - unabhängig vom App-CSS - ein Viewer mit prefers-reduced-motion: reduce erhalten weder Klasse noch Kopie.

Konsumenten und Klassen:

Wizard: tlWizard__step--entering / tlWizard__step--exiting, tlWizard--forward|backward; behält seine Standardanimation. Der bisherige Inline-Code kopierte den Schritt nach dem DOM-Tausch und erwischte damit den ankommenden statt des verlassenen Schritts (im Browser bestätigt); der Hook merkt sich das Element jedes Schlüssels nach jedem Commit und kopiert das tatsächlich verlassene.
Dialog: tlDialog__backdrop--entering am Backdrop des geöffneten Dialogs, tlDialog__backdrop--exiting an der Kopie des geschlossenen (der TLDialogManager ist der Container und bleibt daher auch ohne Dialoge gerendert). Die Kopie deckt die Seite und lässt alle Eingaben durch.
Tile-Stack: tlTileStack__frame--entering / tlTileStack__frame--exiting und tlTileStack--forward|backward (aus der Änderung des activeIndex abgeleitet).

Die Engine liefert für Dialog und Tile-Stack nur die strukturellen Regeln der Kopie (position: absolute; inset: 0; pointer-events: none bzw. pointer-events: none), keine Animation. FAQ: Abschnitt „Transitions“ in docs/faq/react-view-layer.md.

Demo

com.top_logic.demo.react: Seite „Gestaltung“ (demo/styling-demo.view.xml) mit allen Text-Varianten und Tönen, Pillen aus Ton und aus Modellfarbe, Hero-Band und Glas-Karte über css-class aus tl-demo-react.css, Stack-/Raster-Optionen, Suchfeld sowie dem Abschnitt „Darstellungsvarianten einer Eingabe“ (Formular über ein transientes demo.react:Demo mit Chips, Segmenten, Schiebereglern und Schalter, dazu <value-input>`s mit `input-control). tl-demo-react.css animiert die Übergangs-Klassen (Dialog blendet ein/aus, Tile-Stack-Frames gleiten je nach Richtung). Zusätzliches Demo-Theme glass (erweitert default), das surface-blur, shadow-glow und font-family-display setzt.

Nicht Teil dieses Tickets: generischer Repeater (object-list), Bild-Erweiterung, Wizard/Stepper, Anzeige lang laufender Aufträge, Anzeige von HTML-Dokumenten/Druck. Dafür gibt es eigene Tickets.