Level: organism. Inventory status: figma-only.
Purpose and Use
Display a focused record or task in an edge panel with a title, content region, optional close/navigation affordances and optional footer actions. Content, record identity, action availability and dismissal policy belong to the screen. This contract does not prescribe a browser shell or replace the existing target frame when an individual Drawer is requested.
Anatomy and States
Verified published Drawer / v2 has Header, native Body Slot and optional Footer.
The selected desktop composition is Placement=End, Size=M, Padding=Default:
680px wide, with a reference height of 908px. Body fills remaining height.
The source set also exposes Start/S/M/L, Top/Bottom Custom and Padding=None;
only the selected End/M/Default anatomy was inspected in depth for this task.
Title, subtitle and record counter have text properties. Close, Back, record navigation, metadata, header actions, subheader, footer content, secondary, tertiary and leading actions, resize handle and scroll treatments have published controls. Native Slots are Body, Subheader, Header actions, Header metadata and Footer content. Slot content remains screen-owned and requires its own component contracts when reusable elements are inserted.
The verified standard view shows Close and footer primary/secondary Buttons. The screen may hide unused controls through their published properties. Hidden Tag/Badge placeholder instances in the source title area are not approved additional anatomy in this selected scope; enabling them needs fresh verification and their own resolved contracts.
Content and Accessibility
Use a clear record-specific title and concise action labels. Keep all essential record information readable at the panel width. A static Figma Drawer does not establish focus trapping, Escape dismissal, returned focus, keyboard interaction, scroll locking or a production modal model. Those remain screen/runtime concerns and must be verified if implemented. The Close control's actual action and accessible name belong to the enclosing screen.
Tokens and Layout
Retain published header/footer bg/level 1 base, body shell bg/level-1, native
spacing and typography. The selected header uses 19px/22px Google Sans Bold;
Body has 24px padding and 16px gap. The footer uses 16px vertical and 24px
horizontal padding and a 44px action rail. See the sibling assembly contract
for exact verified anatomy and allowed controls.
Runtime Boundary
No public Angular selector, code, test, export or Storybook story is claimed. This task documents the Figma component only; none of its property names infer an Angular API or backend capability.
Figma Evidence
Fresh read-only Plugin API inspection and screenshot on 2026-09-22 verified
set 22170:4962,
key 04b59583bece8ac2afcb896aa0a71ed4a3927104, and selected variant 22167:4802,
key 1fd48f370ed8cf2c4eb1b8a5564dce631d6e6302. Destination instance
a4vtV4rec2pbdez1NApxc2 / 7866:45006 resolves to that variant.
The Drawer assembly sidecar owns construction rules.
Documentation Task
LUU-427 · GitHub Issue 10 ·
verified member danil-lebedev, GitHub ID 50231562 · agent Codex / Specs ·
run/session luu427-drawer-20260922.