synthesisui 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/guide.js +17 -0
- package/package.json +1 -1
package/dist/guide.js
CHANGED
|
@@ -163,6 +163,23 @@ in its own \`<div data-ds="${slug}"${hasAlt ? ` data-scheme="…"` : ""}>\`, or
|
|
|
163
163
|
app root so everything (portals included) inherits it. Behavior (open/close, focus trap, positioning,
|
|
164
164
|
keyboard) is yours to wire — the system ships the **looks**, not the JavaScript.
|
|
165
165
|
|
|
166
|
+
### Interactive recipes — the behavior contract
|
|
167
|
+
Several recipes are **static surfaces**: they ship the styling for every state, but never any
|
|
168
|
+
JavaScript. You own the interaction and drive each state by toggling the documented \`data-*\`
|
|
169
|
+
attributes (listed per component below). The recipe restyles itself; you wire the logic.
|
|
170
|
+
- **Open / close** (menu, select, modal, tooltip, popover): render the surface, then handle show/hide,
|
|
171
|
+
outside-click, focus trap, positioning and \`Esc\` yourself (or with a headless lib).
|
|
172
|
+
- **Selection / active** (tabs, sidebar, pagination): set \`data-active="true"\` on the chosen item from
|
|
173
|
+
your own state/router — the recipe lifts it onto a surface.
|
|
174
|
+
- **On / off** (switch): toggle \`data-state="on"\` on the track **and** its thumb together.
|
|
175
|
+
- **Command bar / ⌘K** (if your system ships one): the recipe is only the styled input row — wire the
|
|
176
|
+
shortcut, the palette list and filtering yourself.
|
|
177
|
+
- **Select** (native vs custom): \`.ds-select\` strips native chrome (\`appearance:none\`). On a real
|
|
178
|
+
\`<select>\`, wrap it and overlay your own chevron; on a custom trigger, nest \`.ds-select-chevron\`.
|
|
179
|
+
|
|
180
|
+
Pair these with the right ARIA (\`aria-expanded\`, \`role="dialog"\`, \`aria-current\`, …) — the system
|
|
181
|
+
styles it, you make it work.
|
|
182
|
+
|
|
166
183
|
---
|
|
167
184
|
|
|
168
185
|
## Rules (follow them when creating components)
|