# Drawer

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`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/?node-id=22170-4962),
key `04b59583bece8ac2afcb896aa0a71ed4a3927104`, and selected variant `22167:4802`,
key `1fd48f370ed8cf2c4eb1b8a5564dce631d6e6302`. Destination instance
`a4vtV4rec2pbdez1NApxc2 / 7866:45006` resolves to that variant.

The [Drawer assembly sidecar](drawer.figma.md) owns construction rules.

## Documentation Task

`LUU-427` · [GitHub Issue 10](https://github.com/logisticsdesign/logistics-2/issues/10) ·
verified member `danil-lebedev`, GitHub ID `50231562` · agent `Codex` / Specs ·
run/session `luu427-drawer-20260922`.