# Map Pin

Level: molecule. Inventory status: `local-code`.

## Purpose

Represent one map location or a compact cluster count. Use Pointer for a single
location shape; use Number or Icon when the map also needs visible category or
count content. Every interactive variant still requires an accessible label.

## Confirmed correction target

The resumed M-003 correction keeps Number and Icon as circular pins and renders
Pointer as its own 29 × 36 anatomy without an optional glyph.

## Anatomy and variants

- `number`: accent circular pin with centered text.
- `icon`: accent circular pin with an exact shared glyph.
- `pointer`: one medium 29 × 36 teardrop silhouette with a centered 10 × 10
  constant-white circle; it has no glyph or number content.
- Circular sizes are S 20 × 20, M 24 × 24 and L 32 × 32.
- Only L Number and L Icon may show one Map Subpin at the top-right.

Unsupported combinations must not be rendered: Pointer has size M only and
never carries a Subpin.

## Behavior and accessibility

Map Pin renders the native marker button used by the Map organism. Its required
`label` names the location, `selected` exposes `aria-pressed`, and `disabled`
retains native disabled behavior. It emits `activated` only for an enabled
activation. Decorative icon and Subpin content remain hidden from assistive
technology; the marker label must communicate their meaning when relevant.

Dense map placement may require small markers, but consumers must provide an
equivalent location list or other accessible alternative when individual pins
cannot be reliably targeted.

## Token use

- Accent fill: `--color-background-accent`; hover/focus/selected use the owned
  primary-button hover semantic color.
- Constant white content/stroke: `--color-text-icon-white-constant` and
  `--color-stroke-white-contrast`; 2 px stroke.
- S number: `--typography-caption-cat`; M number:
  `--typography-description-accent-lion`; L number:
  `--typography-body-accent-buffalo`.
- Circular radius: `--radius-xxl`; gap/padding use `--space-50` and
  `--space-100`.
- Circular pins use `--shadow-default`; focus adds the owned focused-stroke
  ring.
- Pointer uses `--shadow-notification`, whose verified value is `#33333333`
  with y-offset 8 px and blur 16 px; do not substitute `--shadow-default` or
  another near match.

## Local component contract

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

### Public types

```ts
export type WblMapPinSize = 's' | 'm' | 'l';

export type WblMapPinContent =
  | { readonly kind: 'number'; readonly value: number | string }
  | { readonly kind: 'icon'; readonly iconName: WblIconName }
  | { readonly kind: 'pointer' };

export interface WblMapPinConfig {
  readonly id: string;
  readonly coordinates: readonly [longitude: number, latitude: number];
  readonly label: string;
  readonly size?: WblMapPinSize;
  readonly content: WblMapPinContent;
  readonly subpin?: WblMapSubpinContent;
  readonly disabled?: boolean;
  /** A-005: Tooltip text above the pin. */
  readonly tooltip?: string;
}
```

A-005: `tooltip` shows the owned `wbl-tooltip` (placement `top`, dark default
appearance, 240px max width) over the pin on hover and keyboard focus — the
route point «Разгрузка:  г. Зеленогорск, ул. Камина д.7» in Figma
`jwmCEMZZjn9cieKYqxI6FL`, node `17792:98735`. `null` or blank renders no
Tooltip. `wbl-map` forwards `WblMapPinConfig.tooltip` to each pin. The pin
keeps `label` as its accessible name; the open Tooltip is linked through
`aria-describedby`.

### Class and selector

- `WblMapPinComponent` — `wbl-map-pin`.

### Inputs

- `content = input.required<WblMapPinContent>()`
- `label = input.required<string>()`
- `size = input<WblMapPinSize>('m')`
- `subpin = input<WblMapSubpinContent | null>(null)`
- `selected = input(false)`
- `disabled = input(false)`
- `tooltip = input<string | null>(null)` (A-005)

### Models

- None.

### Outputs

- `activated = output<void>()`

### Slots

- None. Icons and Subpin are typed component anatomy.

### Local evidence target

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

## Figma evidence

[Exact Pin component set, node `10031:62593`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/?node-id=10031-62593)
contains S/M/L Number and Icon plus M Pointer. The [Map specification, node `5833:13685`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/?node-id=5833-13685)
states that L may carry a secondary icon. Exact-node metadata, design context,
variables and screenshot were read on 2026-09-10. Published component keys were
unavailable, so no assembly sidecar is claimed yet.

[Pointer correction, node `18205:808`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/?node-id=18205-808)
verifies the separate 29 × 36 silhouette, 10 × 10 white center and Notification
shadow.

## 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`.