Level: molecule.
Purpose and use
Anchor a nonmodal instructional step to an existing control. Use Tooltip for a short description and Modal for a task requiring focus containment.
Anatomy, behavior, and accessibility
[wblOnboardingTarget]anchors a CDK overlay with a pointer tail. Optional title/subtitle, default content slot, back/next actions, step text and close button form the card. Tail placement follows overlay fallback positioning.- opened defaults true. Close emits dismiss and openedChange(false) and updates internal visibility. Actions only emit events; step progression, target changes and persistence belong to the flow. The second action and stepper need actions=true.
- The section is a nonmodal dialog named by the title, or subtitle when title is hidden; description is linked when both are present. Use one concrete instruction per step and make stepperText match the current step count.
Open Questions
There is no Escape dismissal, focus transfer/trap/restoration or fallback accessible name when all text is hidden. These behaviors must be resolved before using a textless or keyboard-critical guided flow.
Local component contract
This is the active owned contract for component.onboarding. 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
WblOnboardingComponent—wbl-onboarding(src/app/design-system/patterns/onboarding/onboarding.component.ts).
Inputs
WblOnboardingComponent.size = input<WblOnboardingSize>('S')WblOnboardingComponent.opened = input(true)WblOnboardingComponent.closable = input(true)WblOnboardingComponent.text = input(true)WblOnboardingComponent.title = input(true)WblOnboardingComponent.textTitle = input('Title')WblOnboardingComponent.subtitle = input(true)WblOnboardingComponent.textSubtitle = input('Subtitle')WblOnboardingComponent.slot = input(true)WblOnboardingComponent.actions = input(true)WblOnboardingComponent.actionLabel = input('Назад')WblOnboardingComponent.action2 = input(true)WblOnboardingComponent.action2Label = input('Далее')WblOnboardingComponent.stepper = input(true)WblOnboardingComponent.stepperText = input('1 из 3')
Public types and allowed values
type WblOnboardingSize = 'M' | 'S';
Models
- None.
Outputs
WblOnboardingComponent.openedChange = output<boolean>()WblOnboardingComponent.dismiss = output<void>()WblOnboardingComponent.actionClick = output<void>()WblOnboardingComponent.action2Click = output<void>()
Slots and projection markers
WblOnboardingComponent: <ng-content select="[wblOnboardingTarget]">WblOnboardingComponent: <ng-content>
Local evidence
- Code:
src/app/design-system/patterns/onboarding/onboarding.component.ts. - Focused test:
src/app/design-system/patterns/onboarding/onboarding.component.spec.ts. - Public export:
export * from './patterns/onboarding/onboarding.component';insrc/app/design-system/index.ts. - Storybook:
storybook/stories/onboarding.stories.ts(Design System/Patterns/wbl-onboarding).
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.