Name the FAB menu, scroll it, and let its items leave
Its trigger holds two aria-hidden icons and wrote aria-label only when a caller passed `label`, so an unnamed button was the default; `label` now falls back to "Toggle menu" and is always written. The list had no ceiling, so six items ran off a landscape phone — it now scrolls under the FAB, which stays put — and its items rose into place but vanished on close, because the popover took its display away before they could move. Plan step 18, actions.md ACT-21, ACT-32, ACT-33. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
deb7ff8ab5
commit
eac7f6a1de
@@ -68,3 +68,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* A FAB menu's items rise into place as the list opens and sink back as it closes. The entry is
|
||||
* `@starting-style` on the item itself; the exit needs the state to be readable while the popover
|
||||
* is on its way out, which is what `:not(:popover-open)` is — the popover keeps `display: flex`
|
||||
* for the length of its own discrete transition, so the items have somewhere to animate to.
|
||||
*
|
||||
* Unlayered (a plain rule, not an `@utility`), so it beats the item's own utilities.
|
||||
*/
|
||||
[data-fab-menu]:not(:popover-open) > * {
|
||||
translate: 0 0.5rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user