@flood-md/agent 0.2.4 → 0.2.5
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/DESIGN.md +10 -10
- package/README.md +1 -1
- package/manifest.json +1 -1
- package/package.json +1 -1
- package/references/composition.md +108 -0
package/DESIGN.md
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
# Flood design system · 0.2.
|
|
1
|
+
# Flood design system · 0.2.5
|
|
2
2
|
|
|
3
3
|
Read project-root flood.json and installed declarations with this contract.
|
|
4
4
|
The source bundle's SKILL.md routes to focused composition, accessibility,
|
|
5
5
|
customization and verification references. Its routing matrix names prerequisites
|
|
6
6
|
and sources of truth; flood/rules.json indexes observable checks. Read only the
|
|
7
|
-
relevant reference. This expanded bundle belongs to 0.2.
|
|
7
|
+
relevant reference. This expanded bundle belongs to 0.2.5; existing installations
|
|
8
8
|
keep their matching guide set.
|
|
9
9
|
|
|
10
10
|
React + TypeScript and Next.js App Router. Use this guide with matching installed
|
|
11
11
|
Flood packages and flood.json. The source repository's release status does not
|
|
12
12
|
grant permission to publish or assume a version is available on npm.
|
|
13
13
|
|
|
14
|
-
This guide covers the supported exports in 0.2.
|
|
14
|
+
This guide covers the supported exports in 0.2.5 and their layout refinements. Confirm
|
|
15
15
|
the matching installed declarations before using APIs absent from older versions.
|
|
16
16
|
|
|
17
17
|
## Connect
|
|
@@ -160,15 +160,15 @@ export function Profile() {
|
|
|
160
160
|
```
|
|
161
161
|
|
|
162
162
|
|
|
163
|
-
0.2.
|
|
163
|
+
0.2.5 adds Badge, Spinner, Skeleton and Avatar. Read references/composition.md and references/accessibility.md for status announcements, fallback geometry and decorative naming. Button loading reuses Spinner. These APIs are not present in 0.2.3.
|
|
164
164
|
|
|
165
|
-
Progress, Meter and Alert are also available in 0.2.
|
|
165
|
+
Progress, Meter and Alert are also available in 0.2.5. Distinguish task completion from bounded measurements, preserve names/units, and select alert announcement priority explicitly.
|
|
166
166
|
|
|
167
|
-
DescriptionList and Table are also available in 0.2.
|
|
167
|
+
DescriptionList and Table are also available in 0.2.5. Preserve native description-list/table structure, table captions and header relationships. Range of displayed data and formatting remain host-owned; DataTable behavior is outside these primitives.
|
|
168
168
|
|
|
169
|
-
Menu adds a real action-menu keyboard contract in 0.2.
|
|
169
|
+
Menu adds a real action-menu keyboard contract in 0.2.5; it reuses the layer engine and ScrollArea while remaining distinct from Select and Popover. onAction business effects belong to the host.
|
|
170
170
|
|
|
171
|
-
### Toolbar and Kbd (0.2.
|
|
171
|
+
### Toolbar and Kbd (0.2.5)
|
|
172
172
|
|
|
173
173
|
Toolbar groups Button, IconButton, Toggle, native buttons/links and Menu triggers
|
|
174
174
|
under one named action panel. After hydration it uses one Tab entry, directional
|
|
@@ -193,7 +193,7 @@ interactive. Menu shortcut hints reuse Kbd and remain hidden from item names.
|
|
|
193
193
|
<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>
|
|
194
194
|
```
|
|
195
195
|
|
|
196
|
-
### Card (0.2.
|
|
196
|
+
### Card (0.2.5)
|
|
197
197
|
|
|
198
198
|
Card composes Surface into a header, body and footer. Optional title, description,
|
|
199
199
|
actions and footer accept React content; children are the body. Missing slots
|
|
@@ -217,7 +217,7 @@ No data access, selection or interactive-card behavior is implied.
|
|
|
217
217
|
</Card>
|
|
218
218
|
```
|
|
219
219
|
|
|
220
|
-
## Structural, media and accessible primitives · 0.2.
|
|
220
|
+
## Structural, media and accessible primitives · 0.2.5
|
|
221
221
|
|
|
222
222
|
Container centers a max-width box with logical gutters. size sm/md/lg uses
|
|
223
223
|
40/64/80rem bounds including padding; full removes the max. gutter uses Space.
|
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @flood-md/agent
|
|
2
2
|
|
|
3
3
|
Version-matched guidance for Flood React/Next.js projects. Read the installed
|
|
4
|
-
contract before composing screens. The 0.2.
|
|
4
|
+
contract before composing screens. The 0.2.5 reference bundle includes spacing
|
|
5
5
|
guidance, routing and observable rules. These files grant
|
|
6
6
|
no authority to modify external services.
|
|
7
7
|
|
package/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -159,3 +159,111 @@ Toolbar groups actions with one Tab entry after hydration. Use Button/IconButton
|
|
|
159
159
|
Card is structured Surface containment: title/description/header actions, body children and footer. Missing slots add no empty sections. Choose compact/comfortable density; preserve the tight title-description relationship. Use appropriate headingLevel. Keep root noninteractive and place named controls inside, never a card-wide click handler around nested actions. Use Surface for unstructured containment.
|
|
160
160
|
|
|
161
161
|
Compose lower-level responsibilities: Container/Grid and Stack/Inline arrange; Surface contains; Card structures; Image/AspectRatio reserve media; List preserves native li. EmptyState composes the shared typography/icon/action atoms. Use VisuallyHidden for supplemental noninteractive text or focusable reveal for skip links. Do not replace native caption/legend structures with generic wrappers solely for reuse. Mixed Checkbox is host-owned aggregation, with checked still controlling submission.
|
|
162
|
+
|
|
163
|
+
NumberInput composes InputGroup/Input/IconButton for finite numeric values or null.
|
|
164
|
+
Use Field for label and feedback, min/max/step for native validity and explicit
|
|
165
|
+
translated increaseLabel/decreaseLabel for step actions. Do not replace it with a
|
|
166
|
+
styled text box that loses numeric forms. Slider receives an array of one value or
|
|
167
|
+
an ordered pair; use thumbLabels to distinguish bounds, preserve native keyboard
|
|
168
|
+
controls and keep explanatory feedback visible. Range handles cannot cross.
|
|
169
|
+
Both support controlled/uncontrolled state, form reset and read-only presentation.
|
|
170
|
+
Available in 0.2.5; do not imply registry availability.
|
|
171
|
+
|
|
172
|
+
Combobox is editable single selection from explicit option values. Use Field for
|
|
173
|
+
its input name/description associations, never submit typed search text as an ID.
|
|
174
|
+
Arrow keys move the active suggestion; Enter commits, Escape cancels the search.
|
|
175
|
+
Use descriptive labels/keywords, keep disabled choices inert, and translate the
|
|
176
|
+
list/clear/toggle/empty/validation messages. Read-only selection remains selectable
|
|
177
|
+
for copying. Native forms/reset and required validity apply to the selected ID.
|
|
178
|
+
Do not imply freeform values, async fetching, multiple selection or virtualization.
|
|
179
|
+
|
|
180
|
+
Tag is label content with an optional named native removal action; it is not a
|
|
181
|
+
status Badge or Toggle. The host owns removal/state and standalone focus recovery.
|
|
182
|
+
Provide removeLabel for rich content and localization. MultiSelect composes Tag
|
|
183
|
+
and the shared Combobox search/layer model with an array of selected option IDs.
|
|
184
|
+
Never pass arrays to Combobox or submit search text as selected values. Use Field
|
|
185
|
+
for associations/feedback. Preserve repeated form entries, reset and required
|
|
186
|
+
selection validity. Disabled selected items stay selected through clear/remove;
|
|
187
|
+
read-only blocks edits. Do not shrink touch targets to force tags into a row.
|
|
188
|
+
Let tags wrap while the search editor and its suffix actions remain together.
|
|
189
|
+
|
|
190
|
+
Keep selection-field chrome calm: Combobox/MultiSelect show only the chevron by
|
|
191
|
+
default. Add clearable=true only when a separate clear-selection action is useful;
|
|
192
|
+
individual MultiSelect tags already expose named removal actions.
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
SearchInput and PasswordInput are field controls in 0.2.5.
|
|
196
|
+
Compose them with Field and pass its control props. SearchInput uses native search
|
|
197
|
+
editing and one clear action (clearable=true); the host owns filtering/submission.
|
|
198
|
+
Read-only hides clear. PasswordInput has a single show/hide action with localized
|
|
199
|
+
showPasswordLabel/hidePasswordLabel, controlled visible/onVisibleChange or initial
|
|
200
|
+
defaultVisible. Read-only still allows reveal. Native refs, autocomplete and forms
|
|
201
|
+
remain owned by the host. Do not add another suffix chevron or browser clear icon.
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
FileInput (0.2.5) composes a native file input with Flood field geometry,
|
|
205
|
+
IconSlot and one optional clear IconButton. Pass Field's render props for its
|
|
206
|
+
accessible name/description/status. Native name, form, required, accept, multiple,
|
|
207
|
+
capture and input ref remain available. onChange is a native React change handler;
|
|
208
|
+
onFilesChange receives a new readonly File array for selection and clear. Do not
|
|
209
|
+
pass value/defaultValue/readOnly; FileList belongs to the browser. Uncontrolled
|
|
210
|
+
form reset clears the summary; cancelling the chooser keeps its prior selection.
|
|
211
|
+
Localize placeholder and clearLabel. Long names truncate visually, and the host
|
|
212
|
+
owns upload, file validation and progress. accept only guides the chooser.
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
FileInput multiple selection exposes a collapsible file list with full names and
|
|
216
|
+
localized file sizes (lang controls number formatting), and a count in the picker.
|
|
217
|
+
Translate selectionLabel and removeFileLabel. Individual removal updates the native
|
|
218
|
+
FileList through DataTransfer, then emits the same change callbacks as selection.
|
|
219
|
+
Focus moves to the next/previous remove action, or back to the input when empty.
|
|
220
|
+
clearable=false disables individual and global removal UI. In multiple mode, picking again appends files to the current selection; cancel
|
|
221
|
+
preserves it. Repeated files are deduplicated by name, size, type, lastModified and
|
|
222
|
+
relative path, without reading their contents. Single mode replaces its selection. The host remains responsible for upload.
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
AlertDialog (0.2.5) is a concise confirmation, composed from Flood's
|
|
226
|
+
native modal layer and Button. Supply title, description, trigger and onConfirm.
|
|
227
|
+
Cancel receives initial focus; Escape cancels; outside clicks do not dismiss.
|
|
228
|
+
Tab containment, background inertness, scroll lock and return focus reuse Dialog.
|
|
229
|
+
Translate confirmLabel/cancelLabel. onConfirm runs before requesting close, while
|
|
230
|
+
onCancel covers Cancel/Escape. Use open/onOpenChange for controlled state and
|
|
231
|
+
confirmDisabled to disable confirmation. Callbacks are not awaited; the host owns
|
|
232
|
+
async requests, pending UI and errors. Use Dialog for forms/complex content.
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
Drawer (0.2.5) reuses Dialog's modal behavior with an edge-panel layout.
|
|
236
|
+
side is logical start/end (default end) or top/bottom; size sm/md/lg sets the
|
|
237
|
+
cross-axis extent to 20/26/34rem within the viewport. Vertical panels fill height,
|
|
238
|
+
horizontal panels fill width. Use footer for host-owned actions; only body content
|
|
239
|
+
scrolls with Flood ScrollArea. Header/close action/footer remain visible. Native
|
|
240
|
+
ref, controlled open/onOpenChange, outside dismissal and initialFocusRef match
|
|
241
|
+
Dialog. Translate closeLabel/title/description; reduced motion disables entry
|
|
242
|
+
animation. Closing is immediate. There is no swipe/drag gesture or auto-save logic.
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
The 0.2.5 separates floating surfaces from modal surfaces.
|
|
246
|
+
Nine additional semantic roles bring the dark profile to 193 roles; previous token
|
|
247
|
+
values remain intact. surface.floating is the opaque fallback;
|
|
248
|
+
surface.floating-translucent, border.floating, selection.floating, shadow.floating
|
|
249
|
+
and effect.floating blur/saturation/shadow-offset/shadow-blur define the floating
|
|
250
|
+
material. Select, Combobox, MultiSelect, Menu, Popover and Tooltip share it; Dialog
|
|
251
|
+
and Drawer retain surface.overlay. Backdrop filtering is progressive enhancement;
|
|
252
|
+
reduced transparency uses the opaque fill and forced colors use system colors.
|
|
253
|
+
Keep text opaque and evaluate it against the actual composited background.
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
Version 0.2.5 expansion includes AvatarGroup/StatusIndicator/Figure/
|
|
257
|
+
Blockquote/InlineCode/Metric/Timeline; NavigationList/Steps/Section/Split/Center/
|
|
258
|
+
SkipLink; ListBox/PinInput/Rating/Dropzone/CharacterCount; CopyButton/ToastRegion.
|
|
259
|
+
Compose these before inventing equivalent host wrappers. Read each generated
|
|
260
|
+
component contract and docs/base-components.md. Keep collection IDs stable, form
|
|
261
|
+
names explicit, labels localized, state meaning independent of color and visible
|
|
262
|
+
content within relative geometry. Native chooser/clipboard/OTP semantics do not
|
|
263
|
+
supply upload/auth/server logic. Toast queues, actions and navigation state remain
|
|
264
|
+
host-owned. No third-party component implementation was introduced.
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
Section headingLevel controls native h2–h6 semantics. Its independent headingSize
|
|
268
|
+
uses the existing Heading roles (section/page/large/display), defaulting to section.
|
|
269
|
+
Keep document hierarchy meaningful when changing visual emphasis.
|