audi-app/design/_ds/audi-dashboard-ui-27d66fd4-ed86-43b2-b8bf-61e281a5a1a5

Usage conventions

• Always wrap the tree that uses these components in <div className="ads-root" data-theme="nacht"> (or data-theme="tag" for the light theme). Color tokens (--fg, --canvas, --tile, etc.) are defined on :root and work anywhere, but text color and page background are only applied via the .ads-root class — content rendered outside it falls back to browser-default black-on-white.
• Default theme is Nacht (dark) — this is what :root sets without any data-theme override. Use data-theme="tag" for the light variant.
• No Audi brand assets (font, rings, nameplate) are included in this bundle — it uses a neutral Helvetica, Arial, sans-serif fallback stack by design.
• Popup renders via a React portal into document.body by default (position: fixed, centers or anchors relative to the viewport) — it doesn't need to sit inside .ads-root itself since its own CSS sets background/color explicitly rather than inheriting them.
• SwipeRow is a controlled/uncontrolled swipe-to-reveal row: swiping (or setting swiped) slides content left to reveal a delete action on the right, clipping the row's left edge by design — this is the intended interaction, not a layout bug.

AudiDashUI (@audi-dash/ui@0.1.0)

This design system is the published @audi-dash/ui React library, bundled as a single browser global. All 20 components are the real upstream code.

Where things are

• _ds_bundle.js — the whole-DS bundle at the project root; loads every component to window.AudiDashUI. First line is a /* @ds-bundle: … */ metadata header.
• styles.css — the single stylesheet entry: it @imports the tokens, fonts, and component styles (_ds_bundle.css). Link this one file.
• components/<group>/<Name>/<Name>.prompt.md (example JSX + variants), <Name>.d.ts (types), <Name>.html (variant grid).
• tokens/*.css — CSS custom properties, names verbatim from upstream.
• fonts/ — @font-face files + fonts.css (when the package ships fonts).

For a specific component, read_file("components/<group>/<Name>/<Name>.prompt.md").

Loading

Add these two lines to your page once (React must be on the page first):

<link rel="stylesheet" href="styles.css">
<script src="_ds_bundle.js"></script>

Components are then available at window.AudiDashUI.*. Mount into a dedicated child node (e.g. <div id="ds-root">), not the host page's own React root, so the two trees don't collide:

const { Accordion } = window.AudiDashUI;
ReactDOM.createRoot(document.getElementById('ds-root')).render(<Accordion />);

Tokens

23 CSS custom properties from @audi-dash/ui. Names are preserved verbatim from upstream. They are declared inside _ds_bundle.css (this DS ships one compiled stylesheet rather than separate token files).

• typography (1): --font-stack
• other (22): --red, --r-tile, --r-pill, …

Components

general

• Accordion
• ActionButton
• Feld
• Fig
• IconButton
• ImagePlaceholder
• Pill
• Popup
• PopupMenuItem
• ProgressBar
• ProgressRing
• RowList
• Seg
• StatGrid
• StatusRow
• SwipeRow
• Switch
• TabBar
• Tile

accordion

• LeafRow