# Map Zoom

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`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/?node-id=5714-266411)
contains required Plus and Minus instances. The [Map specification, node `5833:13685`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/?node-id=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](https://gitlab.com/polozovdaniel/logistics-2/-/work_items/39) ·
actor `artem-mokin` / GitLab `26942597` · agent `Specs subagent` ·
run/session `M-003-resumed-map-feedback-20260910`.