Layout
DrylList
A token-driven list container. Pick a marker Variant (DRYL dot, disc,
dash or ordered decimal), a Density, and optional hairline
Dividers. Items take an Icon, Start / End
slots, Selected / Disabled states and become keyboard-focusable
when given an OnClick. Nest a DrylList inside an item for sub-lists.
Markers
- Light & dark, one identity
- Translucent glass layers
- Violet → cyan accents
- Design tokens
- Motion vocabulary
- AI-native states
- No mode-specific literals
- No external JS
- No hardcoded colors
- Sketch the API
- Use existing classes
- Verify in the prototype
Interactive rows, icons & slots
- Production environmentLive
- Archived environmentRead-only
Nesting
- Components
- Layout
- DrylList.razor
- DrylStack.razor
- Data
- DrylImage.razor
- dryl.css