Map controls

What goes over a map and which variant it uses — every control on a map is `floating`, so search, mode switches and zoom read as one family.

One rule

Everything laid over a map uses the floating variant: popover surface, no visible edge, --shadow-floating. Don’t restyle secondary/outline controls by hand (bg-popover, custom shadows, an app-level .map-controls class) — that is what the variant replaces.

Control	Component
Zoom in / out, locate, fit all	`ButtonGroup orientation="vertical"` of `Button variant="floating" size="icon"`
Expand / open the full map	`Button variant="floating"` with icon + label
Mode switch (pick by sites / postal codes / districts)	`ToggleGroup variant="floating"` — icon + label
Layer switch (map / satellite)	`ToggleGroup variant="floating" orientation="vertical"` — icon only
Place search	`InputGroup variant="floating"` with a search icon addon and a clear button
A bare field with no icon	`Input variant="floating"`

Placement

Top-left: search and the controls that change what is picked (mode switch, hints).
Top-right: the view — zoom stack, expand.
Bottom-right: the layer switch.
Keep a gap-2 between neighbouring controls and top-3/left-3/right-3 from the map’s edge. [proposal]

States

Selected toggle items use the library-wide pressed fill (bg-secondary). An app that themes --secondary to its popover white loses the selection — don’t. [proposal]
Disabled floating controls stay opaque and dim their content; the map never shows through a control.

Accessibility

Every icon-only control gets an aria-label; every group and toggle group gets one too (“Map zoom”, “Pick by”). [a11y]
A hint that answers the current map state (“Zoom in to pick postal code areas”) sits in a role="status" region so it is announced when it changes. [a11y]

Never

A control over a map that is not floating — it reads as part of a different surface.
Two zoom stacks on one map.
Shadows or rounded corners on the individual buttons of a floating stack — the group owns them.