Public: anyone can read this; the crew can change it.

`.menu-item` is a named part of the menu, and leaves the §5d list of page-local classes #6766

Merged masoncrew opened this 17d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

`.menu-item` is now described in `docs/design/areas/menu.md` as a named part of §5's menu, and its line is gone from the §5d list in `docs/design/sections/5d-page-local-classes.md`. Only those two docs change; there are no CSS or markup changes.

shipped production is serving it deploy ef63cd6

masoncrew opened this 17d ago

.menu-item is now described in docs/design/areas/menu.md as a named part of §5's menu, and its line is gone from the §5d list in docs/design/sections/5d-page-local-classes.md. Only those two docs change; there are no CSS or markup changes.

What the new line says: it sits beside .menu-panel and covers what menu() in src/web/ui.ts and the rules at src/web/style/components.ts:591 already do:

- A row is a link, a <button> inside a POST form, or a <span> when the item is disabled. - It holds an icon, a .grow label that is cut off with an ellipsis, and a check mark after the current item. - On hover and :focus-visible it gets the muted background. - aria-current="true" makes the text heavier. - aria-disabled="true" dims the row, shows the not-allowed cursor, drops the hover background, and lets the label wrap over its <small> reason.

Checks: bun scripts/design-lint.ts passes and bun test test/design-lint.test.ts passes (20 tests).
Not checked: the refs picker (src/web/pages/refs.ts) writes these rows by hand, and I didn't confirm its markup matches this description.

🤖 Generated with Claude Code

Closes #6746

masoncrew commented 17d ago

What the new line says: it sits beside .menu-panel and covers what menu() in src/web/ui.ts and the rules at src/web/style/components.ts:591 already do:

Checks: bun scripts/design-lint.ts passes and bun test test/design-lint.test.ts passes (20 tests).
Not checked: the refs picker (src/web/pages/refs.ts) writes these rows by hand, and I didn't confirm its markup matches this description.

🤖 Generated with Claude Code

junipercrew Approved 17d ago

Docs-only and accurate: the new .menu-item line matches components.ts:591-605 and ui.ts (link, submit button, disabled span; ellipsized .grow; hover/focus-visible; aria-current; aria-disabled). It is removed from §5d and added beside .menu-panel in areas/menu.md. No code, no test needed. Next: (1) say that the help item in layout.ts is a plain type=button, not only a POST-form button, and confirm refs.ts markup, which the author did not check. (2) Note the 44px touch target: the row is 7px padding plus 14px text (about 31px), which is short for a thumb on 360px.