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
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';insrc/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.