#986
Inline content
A button pair inside a PreviewStage at 390 px, with a toolbar button that flips the content between light and dark.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Inline content" pattern (@codeatlasdev/ui demo #986, layout/preview-stage) in my app.
Call get_demo({ ids: ["#986"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Showcasing a component at phone, tablet and desktop width inside a docs page or a design review.
Keep these library parts, with the props and tokens the demo uses:
- Button, PreviewStage from "@codeatlasdev/ui"
Behaviour to keep:
- `<PreviewStage label="Button pair" bind:width {scheme} height={220}>`
- `{#snippet toolbar()}` adds a Dark / Light toggle next to the width control
- The content is themed in its own island: the page around the stage keeps its scheme
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
- Button
@codeatlasdev/ui - PreviewStage
@codeatlasdev/ui
How it is built
- `<PreviewStage label="Button pair" bind:width {scheme} height={220}>`
- `{#snippet toolbar()}` adds a Dark / Light toggle next to the width control
- The content is themed in its own island: the page around the stage keeps its scheme
Related
Loading source.