Level: molecule.
Purpose and use
Render the visual account-menu trigger in a sidebar. Use the enclosing account menu composition when the actual menu and selection behavior are required.
Anatomy, behavior, and accessibility
- A native button contains profile icon, fixed person/role text and chevron. active changes expanded semantics and chevron; focused adds a visual helper class.
- The button advertises aria-haspopup=menu and aria-expanded from active. It has no custom output, popup, state toggle or account-data input; activation can be observed through the native event by a parent composition.
- Visible name/role text contributes to the button name. focused does not move actual keyboard focus. Preserve a concise readable identity in any future data API.
Open Questions
The identity «Иван Иванов» and role are hardcoded fixtures. A real account display, menu ownership and aria-controls relationship are not provided by this component.
Local component contract
This is the active owned contract for component.sidebar-account. 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
WblSidebarAccountComponent—wbl-sidebar-account(src/app/design-system/patterns/sidebar-account/sidebar-account.component.ts).
Inputs
WblSidebarAccountComponent.active = input(false)WblSidebarAccountComponent.focused = input(false)
Models
- None.
Outputs
- None.
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
- Code:
src/app/design-system/patterns/sidebar-account/sidebar-account.component.ts. - Focused test:
src/app/design-system/patterns/sidebar-account/sidebar-account.component.spec.ts. - Public export:
export * from './patterns/sidebar-account/sidebar-account.component';insrc/app/design-system/index.ts. - Storybook:
storybook/stories/sidebar-account.stories.ts(Design System/Patterns/wbl-sidebar-account).
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.