From 17916b411a0b23725d1084e0045a95147a4b4ded Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sun, 27 Sep 2026 01:33:37 +0200 Subject: [PATCH] docs(design): C4 as built, and its log row (E28 S3f1) --- docs/DESIGN.md | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/docs/DESIGN.md b/docs/DESIGN.md index ecb98ed8..bc6e28c6 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -446,12 +446,21 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen # screen, and the description opens from an ⓘ button, because a hover popover never opens on a tap (measured live). [WCAG 1.4.13] -## Dialogs — _Decided_ (C4) +## Dialogs — _Decided_ (C4, built in S3f) -- **Initial focus by purpose** (a `Modal` `initialFocus` rule): a form focuses its first field, a confirm its - least destructive button, anything else Close. [WAI-ARIA APG] -- **The header and the footer are fixed; only the body scrolls,** with the B9 fade at both edges, so the - primary action stays on screen when the on-screen keyboard takes half of it. [Nielsen #3, WCAG 2.4.11] +- **Initial focus by purpose** (`Modal`'s required `initialFocus`, so no dialog inherits "the first + focusable", which is always the ✕): `field` — a form opens on the body's first control, and one that + loads after opening moves the focus there when it arrives, as long as the focus still rests on the ✕; + `action` — a confirm, where the least destructive button takes `autoFocus`; `close` — anything to read, + browse or manage. [WAI-ARIA APG] +- **The header and the footer are fixed; only the body scrolls,** with the B9 fade at each edge, so the + primary action stays on screen when the on-screen keyboard takes half of it (the viewport's + `interactive-widget=resizes-content` makes the keyboard shrink the layout, where Chrome would otherwise + slide it over a fixed dialog). A fade shows only while content is under it (the body's scroll timeline): + a dialog that fits draws none. [Nielsen #3, WCAG 2.4.11] +- **The footer is the dialog's commit row** — Cancel / Save, Start, Retry / Close, a confirm's choices — + placed with `ModalFooter` from any depth of the body. A section's own buttons (a sub-form inside a + manager, a list row's Delete) stay in the body; a manager with no commit row has no footer. ## Copy @@ -532,9 +541,10 @@ pick a density step; it never changes the anatomy or loses an action. [Nielsen # | 2026-09-26 | Compact list row (B) | The title leads; a faint "…" at the end; the toggles float over the date on hover | A leading 128px action column | That column sat empty at rest, a hole at the start of every row | | 2026-09-26 | Media-info layout (B) | A main column (collections first, crew, cast) beside a facts sidebar; an empty column is not drawn | Every section full width, stacked | The collection is the most used; the keywords' column left a void beside a short details box | | 2026-09-26 | Mixed Home shelf (A) | Plex titles as wide art beside videos | Posters, with the videos not stretched | Stretching a video card to a poster's height left an ~80px gap | -| 2026-09-27 | Home hero | A card (hover row + Play on the picture, the whole menu, a touch "…"; owner: A); three quarters wide and centred on a wide window; one fact line; the summary at the measure | The hero's pin row alone; full width; an 18rem picture column | The one answer stands in focus, and it offers what the same card offers anywhere | +| 2026-09-27 | Home hero | A card (hover row + Play on the picture, the whole menu, a touch "…"; owner: A); three quarters wide and centred on a wide window; one fact line; the summary at the measure | The hero's pin row alone; full width; an 18rem picture column | The one answer stands in focus, and it offers what the same card offers anywhere | | 2026-09-27 | Home shelf tiles | A channel / playlist tile: Play, ↗ open, "…" with Open; a show acts on its next episode, ⓘ opens it; the shelf slot 232px | The tile's pin row alone; 200px | A tile without its object's actions read as broken; at 200 the Play touched the hover row | | 2026-09-27 | Synopsis preview (C) | A ~0.9 s mouse rest opens a passive panel beside the card | The synopsis as the picture's `title` tooltip; an ⓘ to hover; none | One long tooltip line fired anywhere on the art and clashed with the cut title's own tooltip | | 2026-09-27 | Reading measure | Prose capped at ~65 characters a line (`measure`) | The container's full width | At 110–130 characters a line the eye loses the next line's start | | 2026-09-24 | Chip family | One `Chip` (filter / token / tag / suggest / ghost) + `DismissibleChip`; nothing under 24; the lint rule "no raw `