# Popup

Level: molecule.

## Purpose and use

Group compact explanatory content and actions in a surface supplied by the caller.
Use Modal for blocking interaction; Popup is not an overlay controller.

## Anatomy, behavior, and accessibility

- Sizes S/M support optional title, subtitle, `[wblPopupContent]` and
  `[wblPopupActions]` regions plus a native close button.
- Close emits dismiss only. The parent removes or hides the surface and implements
  action behavior. Popup has no opened state, positioning, backdrop or timeout.
- The section uses role=group and accepts ariaLabel; visible title/subtitle do not
  automatically name the group. Use concise explanatory text and meaningful action
  labels in projected content. Close is named «Закрыть popup».

## Open Questions

Escape, initial/return focus and focus containment are not provided. If composed
inside an overlay, that enclosing composition must define its interaction policy.

## Local component contract

This is the active owned contract for `component.popup`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblPopupComponent` — `wbl-popup` (src/app/design-system/patterns/popup/popup.component.ts).

### Inputs

- `WblPopupComponent.size = input<WblPopupSize>('S')`
- `WblPopupComponent.title = input(true)`
- `WblPopupComponent.titleText = input('Title')`
- `WblPopupComponent.subtitle = input(true)`
- `WblPopupComponent.subtitleText = input('Subtitle')`
- `WblPopupComponent.content = input(true)`
- `WblPopupComponent.actions = input(true)`
- `WblPopupComponent.closable = input(true)`
- `WblPopupComponent.ariaLabel = input<string | null>(null)`

### Public types and allowed values

```ts
type WblPopupSize = 'S' | 'M';
```

### Models

- None.

### Outputs

- `WblPopupComponent.dismiss = output<void>()`

### Slots and projection markers

- `WblPopupComponent: <ng-content select="[wblPopupContent]">`
- `WblPopupComponent: <ng-content select="[wblPopupActions]">`

### Local evidence

- Code: `src/app/design-system/patterns/popup/popup.component.ts`.
- Focused test: `src/app/design-system/patterns/popup/popup.component.spec.ts`.
- Public export: `export * from './patterns/popup/popup.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/popup.stories.ts` (`Design System/Patterns/wbl-popup`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.