Kit parts
A plate pinned to the page foot, hinged along its top edge. Closed, it reads as one line with Essential only, Choose and Accept all. Press Choose and the face tilts up while the compartment under it opens, baring three rocker switches, Necessary locked on. Press Save choices and the panel shuts and the face swings back down, latching flat with a small click.
One native form holds the face and the panel together, so every key, whichever one is pressed, is a submit that this part’s own handler reads and answers for. Lifting is a class and a CSS transform, rotateX on the face with its hinge pinned to its top edge by transform-origin, timed with the panel easing from a shut max-height to its content’s height so nothing jumps. Shutting adds is-latching for one short overshoot, a cubic-bezier past flat and back, which reduced motion drops to an instant state change. No external dependency and no storage read or write.
| Name | Kind | Description |
|---|---|---|
| [data-consentflap-toggle] | attribute | The key that lifts and lowers the face, pointing at the panel by id. |
| [data-consentflap-action] | attribute | On a submit key: which choice the form hands over when pressed. |
| hidden | attribute | Set while the face is shut, so the switches are out of the tab order until it lifts. |
Press Choose: the face lifts and three switches show, Necessary locked on. Set Analytics and Marketing, then press Save choices, and the face latches back down. Essential only and Accept all decide at once, with the face shut.
A strip the width of the page, above everything, for one announcement: a lamp, one line, an optional key that goes somewhere and a dismiss key. It is a raised plate, not a recess, so it reads as part of the frame and not as a message in the page. It is a labelled region, there on load, and says its thing once. When it goes it closes like a drawer, so the page glides up by its height instead of jumping.
A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
Related fields under one engraved legend, with one hint and one error line for the group. It is the browser’s own fieldset and legend, so the group has a name for a screen reader and a disabled fieldset disables every field inside. The legend runs on into a groove cut in the plate; the error waits at the foot, not drawn, until it has something to say.