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

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 contains S/M/L Number and Icon plus M Pointer. The Map specification, node 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 verifies the separate 29 × 36 silhouette, 10 × 10 white center and Notification shadow.

Documentation task

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