tobias
0fd81df700
Ziehen zum Aktualisieren funktionierte auf keinem Geraet, in keiner der beiden Anwendungen - und der Grund entwertet zugleich, wie es bisher geprueft wurde. Beide trieben die Geste ueber pointermove und riefen dort preventDefault(). Das verhindert laut Spezifikation kein Scrollen; darueber entscheidet allein touch-action. Auf echtem Touch uebernimmt der Browser die senkrechte Geste, schickt pointercancel und stellt pointermove ein - der Zug wird zurueckgesetzt, lange bevor er die Schwelle erreicht. Eine Maus kennt diese Uebernahme nicht, synthetische PointerEvents ebenso wenig: genau deshalb lief die Geste 2026-08-17 im Test sauber durch und am Geraet nie. Jetzt laeuft sie auf Touch-Ereignissen, touchmove zwingend mit passive:false (sonst ist preventDefault() wirkungslos); der Zeigerweg bleibt fuer Maus und Stift und ignoriert pointerType "touch". Mit echten TouchEvents geprueft, inklusive defaultPrevented - dem einzigen Signal, das belegt, dass das native Ueberscrollen wirklich unterbunden ist. Der zuletzt nicht nachstellbare Befund war nachtmodus-spezifisch: --tile ist dort ein durchscheinender Schleier, und die Wischzeilen malten ihn ein zweites Mal auf die Kachel, auf der sie ohnehin liegen. Am Tag sind beide deckend weiss, deshalb war nichts zu sehen. Das Panel nutzt an dieser Stelle --tile-deckend; dieses Token fehlte im Design-System und ist jetzt da. Ausserdem: steht das Auto auf einem benannten Platz, zeigen beide dessen Namen statt der naechsten Hausnummer - Nominatim liefert ihn mit, die Pruefung auf die Art der Flaeche verhindert, dass irgendein benanntes Gebaeude die Anschrift verdraengt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@audi-dash/ui
Generisches React-Komponenten-Set, das die visuelle Sprache des Audi-Dashboards (Kacheln,
Formularzeilen, Toggle, Segmented Control, Popups, Statusanzeigen, Fortschrittsanzeigen …)
nachbildet. Enthält keine Audi-Marken-Assets (Font "Audi Type", Ringe, Typenschild) - diese
sind laut Lizenzvereinbarung ausschließlich für die private Home-Assistant-Installation
freigegeben. Diese Bibliothek nutzt einen neutralen Fallback-Font-Stack (Helvetica, Arial, sans-serif).
Verwendung
Konsumierende Apps legen die .ads-root-Klasse um den Baum, der die Bibliothek nutzt, und setzen
data-theme="nacht" (Standard) oder data-theme="tag":
import { Tile, Feld, Switch } from "@audi-dash/ui";
import "@audi-dash/ui/styles.css";
function App() {
return (
<div className="ads-root" data-theme="nacht">
<Tile>
<Feld label="Beispiel">
<Switch checked={true} onChange={() => {}} />
</Feld>
</Tile>
</div>
);
}
Design-Tokens
Alle Farben/Radien/Abstände liegen als CSS-Custom-Properties in src/tokens/tokens.css vor -
Komponenten referenzieren ausschließlich var(--token), nie Literal-Hex-Werte. Siehe die Datei
für die vollständige Liste (--red, --canvas, --tile, --fg/--fg2/--fg3, --ok/--warn/
--bad, --r-tile/--r-pill/--r-func, --sp-1…--sp-5).
Typografie-Utility-Klassen
Reine Textstil-Hooks ohne eigene Komponentenstruktur (in tokens.css definiert) - direkt als
className anwenden:
| Klasse | Verwendung |
|---|---|
.ads-eyebrow |
Kleine Überschrift über einem Seitentitel (10px, uppercase, --fg3) |
.ads-title |
Seitentitel (23px, einzeilig, ellipsis) |
.ads-label |
Feld-/Kachel-Label (10px, uppercase, --fg3) |
.ads-sport |
Kursiver Akzenttext |
Die einzige Ausnahme mit echter interner Struktur ist die Fig-Komponente (großer Zahlenwert +
Einheit) - sie wird intern auch von ProgressRing und StatGrid genutzt.
Komponenten
Pill, IconButton, Fig, StatusRow, ActionButton, Switch, Seg, RowList, LeafRow, Tile, Feld,
ProgressRing, ProgressBar, StatGrid, Accordion, SwipeRow, TabBar, Popup (+PopupMenuItem),
ImagePlaceholder. Props-Referenz: .d.ts-Dateien im Build bzw. die jeweilige <Name>.tsx.
Build
npm install
npm run typecheck
npm run build