Map Zoom · WB Design Wiki

Level: molecule. Inventory status: local-code.

Purpose

Provide the paired zoom-in and zoom-out controls for an interactive map.

Confirmed correction target

The resumed M-003 correction fixes both nested Tooltip placements to left and the Map-owned right inset to 20 px.

Anatomy and layout

One zoom-in Map Control Button above one zoom-out Map Control Button.
Fixed 32 px width and 64 px total height.
Shared outer 8 px clipping radius and dropdown shadow; the nested buttons own the secondary stroke and joined edge.
Placement is owned by Map: vertically centered at the right edge with a 20 px inset. Map Zoom itself does not use fixed screen positioning.

Behavior and states

Zoom-in and zoom-out emit separate actions.
Either control may be independently disabled at the map engine's zoom bound.
Hover/focus tooltips expose the action names supplied through the label inputs and open to the left of both controls.
The molecule does not own zoom state or call a map provider directly.

Accessibility

Both controls remain separate native buttons in sequential focus order, with zoom-in first. Labels must describe the result: “Приблизить” and “Отдалить”; glyph-only naming is insufficient.

Token use

Use Map Control Button tokens. The group itself uses --radius-s and --shadow-dropdown; no duplicate surface, stroke or icon values are introduced.

Local component contract

This is the M-003 owned contract for component.map-zoom.

Class and selector

WblMapZoomComponent — wbl-map-zoom.

Inputs

zoomInLabel = input('Приблизить')
zoomOutLabel = input('Отдалить')
zoomInDisabled = input(false)
zoomOutDisabled = input(false)
theme = input<WblMapTheme>('light')

Models

None.

Outputs

zoomIn = output<void>()
zoomOut = output<void>()

Slots

None.

Local evidence target

Code: src/app/design-system/patterns/map-zoom/map-zoom.component.ts.
Focused test: src/app/design-system/patterns/map-zoom/map-zoom.component.spec.ts.
Public export: src/app/design-system/index.ts.
Storybook: storybook/stories/map-zoom.stories.ts.

Figma evidence

Exact Map Zoom node 5714:266411 contains required Plus and Minus instances. The Map specification, node 5833:13685 places the group on the right center and requires hover hints. Exact-node metadata and design context were read on 2026-09-10. Published component keys were unavailable, so no assembly sidecar is claimed yet.

Documentation task

M-003 · GitLab issue · actor artem-mokin / GitLab 26942597 · agent Specs subagent · run/session M-003-resumed-map-feedback-20260910.