Search results

Datasheet

Mechanism

Global search results, Live count and tab counts, Kind tabs, Filter chip group, Result order segmented, Result rows as links, Two line snippet, Snippet marker draw, Result fade, Paginated results, Compact phone pager, Empty state with clear filters, Loading skeleton rows, Error banner over last results, Keyboard field to results, Command k focus, Phone scrolling rows, Finish following, Quiet volume

Stack

Vanilla ES modules, CSS

Needs

Nothing, no dependencies

States

13 documented

Version

0.1.0

Licence

With a Pass

States

1. At restThe breadcrumb Ledgerly, Search, Results; the label Ledgerly · Search, the title and the lead; the Search field at 640px with ostrander overdue in it, the count 18 results for ostrander overdue under it and the Mod+K Kbd beside the sentence about what can be searched. The Order control at Best match, the filters This year, Overdue only and Has PDF up, and the tabs All 18, Invoices 11, Clients 2, Notes 5. Four result rows, each a link with a marker, the title, the meta line, a two-line snippet and its kind on a Tag. The pager shows one page.
2. TypingThe count line, the four tab counts and the rows update as you type, and none of them moves the field. A typed question searches the four sample rows by every word in it; clearing the field brings all four back. The count and the tabs fall back to the account's totals only with the sample question in the field and no filters down.
3. TabsAll keeps every result; Invoices, Clients and Notes keep one kind each, and the rows and the count follow. The tablist is one tab stop: Left and Right move and select, Home and End go to the ends.
4. FiltersThis year, Overdue only and Has PDF press down in the kit's Chip group and narrow the rows; the count and the tabs recount. Overdue only keeps INV-2418; Has PDF keeps the two invoices. The group's own polite line says how many are chosen.
5. OrderThe Segmented control switches the rows between the recipe's order as Best match and newest first under Newest; the marker and the row fade run again as the rows arrive.
6. LoadingFour Skeleton rows stand under the live count, and the panel status says Searching with a blinking amber lamp. The field, the count and the tabs stay exactly where they are.
7. EmptyThe count reads No results for ostrander overdue, the tabs read zero, and the Empty state shows the same line over Check the spelling or search just the client name. The words search just the client name are a Link that puts ostrander in the field; Clear the filters is the one contrast key and returns the sample.
8. ErrorThe last results stay under a Banner that reads Search is unavailable for a moment. These are the last results. with an amber lamp and a Try again key; the panel status says Could not search with a red lamp. Try again puts the results back at once.
9. SuccessThe field holds INV-2418, the count reads 1 result for INV-2418, the tabs read All 1, Invoices 1, Clients 0, Notes 0 and the one invoice row shows. The field has not moved.
10. PhoneUnder 700px the search well is the full width at 48px, the tabs scroll sideways in their own row, the filters sit in a second scrolling row with the Order control at its start, the kind tag makes way, the snippet keeps its two lines, the tab marker stays, and the numbered pager becomes Previous and Next keys around an LCD count.
11. KeyboardType in the field. Down moves into the first result, Up and Down move between results, Up from the first returns to the field, and Enter opens the focused row. Cmd/Ctrl K focuses the field from anywhere on the page. Escape in the field clears it through the Search field's own key.
12. Reduced motionA result appears with no fade and the snippet marker is printed whole; nothing else moves.
13. Finishes and volumeEvery surface and lamp reads the kit's tokens, so all fourteen finishes follow. The screen is set in the Quiet volume; its parts keep their sizes and draw hairlines and a whisper of depth.