# Onboarding

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

```ts
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';` in `src/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.