Copy-paste Examples

Examples exist in two places:

• Site examples under apps/site/src/examples/<adapter>/<primitive>/.
• Docs example manifests under packages/docs/examples/.

Site examples power live previews and adapter parity routes. Docs examples are small copyable bundles used by generated catalogs and agent artifacts.

Copy the full example for your adapter, including:

• Package imports.
• Required slots.
• Collection registrations or data arrays.
• Labels and ARIA attributes.
• Hidden inputs for form primitives.
• Cleanup logic for Vanilla and Svelte.
• Theme CSS import only if you want the starter visuals.

Do not copy only the visual wrapper around a primitive while leaving out controller binding, registration, or ARIA linkage.

Safe first changes:

• Visible labels.
• Option data.
• Controlled state owner.
• CSS classes and design tokens.
• Placement and offset values.

High-risk changes:

• Slot names.
• Generated IDs.
• Keyboard handlers.
• Portal location.
• Outside dismiss behavior.
• Value equality rules.

If you change high-risk behavior, add a regression test.

• React: keep compound component hierarchy intact and prefer public package exports.
• Vanilla: keep bind* return values and call destroy() when the host view unmounts.
• Vue: preserve template structure and remember that some roots may render fragments.
• Solid: keep signals live and avoid reading reactive values once into stale closures.
• Svelte: create actions once per instance and let action destroy clean up listeners.

Run or perform:

pnpm content:check
pnpm test:contracts

Application checks:

• Inspect rendered DOM.
• Use keyboard only.
• Test screen-reader naming with browser accessibility tools.
• Verify SSR output if the route server-renders.

Adapt the nake-ui Select example for @nake-ui/adapter-svelte.
Keep the slots trigger, value, content, option, and hidden-input.
Preserve aria-haspopup, aria-expanded, aria-controls, aria-selected,
data-state, data-selected, and cleanup behavior. Return the code and
a contract checklist.

• Example matches the current adapter route.
• All required slots are copied.
• ARIA links resolve.
• State is reflected through public attributes.
• Styling changes do not become semantic truth.
• Cleanup and SSR/client activation boundaries remain intact.