feat(drawer): add organism component

docs/COMPONENTS.md

@@ -925,7 +925,36 @@ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 
 ---
 
-### 3.16 Announcement Bar / Version Banner
+### 3.16 Drawer
+
+Drawer is a Radix Dialog-backed off-canvas dialog. It uses the approved compound anatomy: `Drawer.Trigger`, `Drawer.Content`, `Drawer.Header`, `Drawer.Title`, `Drawer.Description`, `Drawer.Body`, `Drawer.Footer`, and `Drawer.Close`. `Portal`, `Overlay`, and `Backdrop` remain internal to `Drawer.Content`.
+
+**Accessibility and anatomy:**
+
+- `Drawer.Title` is required so the dialog has an accessible name.
+- `Drawer.Description` is optional and should explain context when the title alone is not enough.
+- Built-in icon-only `Drawer.Close` is named `Close drawer`; custom close controls must provide visible text or their own accessible label.
+- Header and footer are non-scrolling; `Drawer.Body` is the internal scroll region for long content.
+
+**Placement and responsive behavior:**
+
+- `placement="start" | "end" | "top" | "bottom"`; default is `end`.
+- `start` and `end` are logical placements. On `md+`, LTR maps start/end to left/right and RTL maps start/end to right/left.
+- Below `md`, side placements adapt to effective bottom sheet layout.
+- Side sizes reuse `max-w-modal-*`; top, bottom, and mobile bottom layouts use `max-h-drawer-*` utilities based on `--size-drawer-block-viewport`.
+- Bottom and mobile-adapted drawers use safe-area padding for footer actions.
+
+**Dismissal and motion:**
+
+- `dismissible` controls outside/backdrop dismissal only.
+- `closeOnEscape` controls Escape-key dismissal only.
+- Explicit close controls remain available for non-dismissible drawers.
+- Overlay fades and panel slides by effective placement using `opacity` and `transform`; never use `transition: all`.
+- `motion-reduce` removes drawer entrance/exit motion while preserving focus management.
+
+---
+
+### 3.17 Announcement Bar / Version Banner
 
 **Announcement bar (Docusaurus global bar — full width above navbar):**
 

docs/DESIGN.md

@@ -318,6 +318,16 @@ font-size: 93%; /* --ifm-code-font-size */
 ```
 Highlighted line: `rgba(219,20,60,0.10)` (light) / `rgba(255,0,54,0.15)` (dark).
 
+### Drawer
+
+Drawer es una superficie flotante tipo dialog para tareas suplementarias, navegación, formularios y contenido largo. Usa el mismo overlay que Modal (`opacity`, `blur` o `transparent`) y un panel opaco `surface` con borde, sombra de modal y movimiento por `opacity` + `transform` solamente.
+
+- `start` y `end` son placements lógicos: en `md+` respetan LTR/RTL; en mobile se adaptan a bottom sheet.
+- `top`, `bottom` y el bottom sheet mobile usan utilidades `max-h-drawer-*` basadas en `--size-drawer-block-viewport`.
+- Los footers de bottom/mobile drawers usan safe area para no colisionar con home indicators.
+- Header y footer permanecen visibles; `Drawer.Body` es la región con scroll interno.
+- `prefers-reduced-motion` elimina las transiciones de entrada/salida sin cambiar semántica ni foco.
+
 ### Glow del GitHub Stars badge
 
 Patrón reutilizable para cualquier badge con métrica numérica: