#700
Chromeless, full bleed on phones
A chromeless drawer for a detail view with its own header, close button and scrolling list; full width and height on phones.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Chromeless, full bleed on phones" pattern (@codeatlasdev/ui demo #700, feedback/drawer) in my app.
Call get_demo({ ids: ["#700"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Side detail panels on desktop that become full-screen panels on phones, where the view owns its header and scroll (no double close button, no 48px page strip).
Keep these library parts, with the props and tokens the demo uses:
- Drawer, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<Drawer bind:open chromeless width="26rem" fullBleedBelow="sm" aria-labelledby="detail-title">`
- A column `.detail` with `<header class="head">` holding `<h2 id="detail-title" class="name">Order 1042</h2>` and a ghost small button with `aria-label="Close detail"` that sets `open = false`
- A `.scroll` area with `flex: 1; min-height: 0; overflow-y: auto` listing 24 `Line item` rows
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<Drawer bind:open chromeless width="26rem" fullBleedBelow="sm" aria-labelledby="detail-title">`
- A column `.detail` with `<header class="head">` holding `<h2 id="detail-title" class="name">Order 1042</h2>` and a ghost small button with `aria-label="Close detail"` that sets `open = false`
- A `.scroll` area with `flex: 1; min-height: 0; overflow-y: auto` listing 24 `Line item` rows
Related
Loading source.