From 2fc8a30b2265f418a5c6efc3dab1daccc21fceae Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 20 May 2026 23:58:30 +0200 Subject: [PATCH] drawer: PASS audit + texts.label + Baseline/Gaps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Full walk of drawer (modal slide-in, parallel to dialog): - Morfo: validated. 6 events (present/save/cancel/dismiss/dismiss- outside/after-fail). Focus policy with trap/return/restore. 9 parts (Provider/Trigger/Content/Overlay/Handle + Header/Footer/Title/ Description/Close). - `texts.label` added with catalog entry. Drawer was already wired in the langs barrel. - README `## Baseline` section added (drawer DOES have an air baseline at `glm-5:src/uix/air/components/drawer`, plus the soma additions for drag/snap points). `## Gaps` with dispositions: shouldScaleBackground (descartar — shell-level concern), free-resize without snap points (diferir), Handle ARIA slider role (implementar — accessibility gap for snap points), pulse-to-peek (diferir), nested visual stacking (implementar — same gap as dialog), AlertDrawer variant (descartar — compose AlertDialog inside). Audit: PASS 10 → 11. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/eidos/components/drawer/README.md | 26 +++++++++++++++++++++++ src/uix/langs/components/drawer.ts | 8 +++++-- src/uix/morfo/components/drawer.ts | 1 + 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/uix/eidos/components/drawer/README.md b/src/uix/eidos/components/drawer/README.md index 7320f0b7d..ded899355 100644 --- a/src/uix/eidos/components/drawer/README.md +++ b/src/uix/eidos/components/drawer/README.md @@ -6,6 +6,20 @@ Air envolvia Terra y exponia `Root`, `Trigger`, `Portal`, `Overlay`, `Content`, y anade lo que Air no tenia: `Handle`, snap points, drag/resize, variantes `overlay/inline/persistent` y overrides visuales. +## Baseline + +- **air**: tenía `Drawer.Root` + parts compound sobre Terra. Cubría + modal overlay, side direction, focus trap/restore, scroll lock, + escape/outside dismissal, nested drawers. Tamaños `sm/md/lg/full`. +- **soma actual**: cubre todo lo de Air + lo que Air NO tenía: drag + handle, snap points (`activeSnapPoint` controlled), drag-to-dismiss, + variantes `overlay/inline/persistent`, RTL-aware `start/end` + direction, outcome-specific close events. +- **morfo**: declara `present` + 5 close variants (save/cancel/ + dismiss/dismiss-outside/after-fail), focus policy con + trap/return/restore, parts Provider/Trigger/Content/Overlay/Handle + + Header/Footer/Title/Description/Close. + ## Superficie ```svelte @@ -91,6 +105,18 @@ Partes publicas: `Trigger`, `Portal`, `Overlay`, `Content`, `Handle`, `Title`, | Variantes | Terra modal-ish | `overlay`, `inline`, `persistent` | | Exit cause | No | `data-last-action` y eventos causales | +## Gaps + +| Gap | Disposición | Detalle | +| --- | --- | --- | +| `shouldScaleBackground` (vaul) | **descartar** | Es un efecto sobre el shell de aplicación, no sobre el drawer aislado. Si se añade, debe vivir en una capa de layout/DOM con ownership claro. | +| Drag-to-resize sin snap points | **diferir** | Soma soporta `dragToDismiss` y snap points; falta la API de free resize sin discretización. Sin caso urgente. | +| `Handle` con ARIA role completo | **implementar** | Hoy es un visual hint. Falta `role="slider"` con `aria-valuenow`/`min`/`max` cuando hay snap points, para que screen readers anuncien la posición. | +| Pulse-to-peek (drawer asoma y oculta) | **diferir** | Patrón móvil para discovery. Sin caso de uso confirmado. | +| Stacking visual de drawers anidados | **implementar** | Soma emite `data-depth` + `data-nested`; falta la receta CSS canónica para inset/blur por depth. Mismo gap que dialog. | +| Backdrop blur progresivo según snap point | **diferir** | Visual fancy, requiere coordinar la receta con la posición actual del drawer. Sin demanda. | +| `Drawer.AlertDrawer` variant destructiva | **descartar** | Si se necesita confirmar una acción crítica desde un drawer, el consumer monta `` dentro. Una variante separada duplicaría intent management. | + ## Referencias - Air anterior: `glm-5:src/uix/air/components/drawer`. diff --git a/src/uix/langs/components/drawer.ts b/src/uix/langs/components/drawer.ts index 6a1616612..9490a17a3 100644 --- a/src/uix/langs/components/drawer.ts +++ b/src/uix/langs/components/drawer.ts @@ -8,8 +8,12 @@ import type { LangNode } from '$libs/langs'; * `'#?components.drawer.{key}|fallback'`. */ export const drawerLangs = { + label: { + es: 'Cajón', + en: 'Drawer' + }, trigger: { - es: "Abrir cajón", - en: "Open drawer" + es: 'Abrir cajón', + en: 'Open drawer' } } satisfies LangNode; diff --git a/src/uix/morfo/components/drawer.ts b/src/uix/morfo/components/drawer.ts index 103e01002..344450748 100644 --- a/src/uix/morfo/components/drawer.ts +++ b/src/uix/morfo/components/drawer.ts @@ -7,6 +7,7 @@ export const drawerMorfo = { scope: ['soma', 'sema'], apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/', texts: { + label: '#?components.drawer.label|Drawer', trigger: '#?components.drawer.trigger|Open drawer' },