desy-html 16.0.3 → 17.0.0

package/docs/sprints/02-combobox-styles.md

@@ -0,0 +1,291 @@
+# Fase 2: Combobox - CSS con Tailwind v4
+
+## Deliverables
+
+| Archivo | Accion |
+|---------|--------|
+| `src/templates/components/combobox/_styles.combobox.css` | Crear |
+| `src/css/styles.css` | Modificar (anadir import) |
+
+## Dependencias
+
+- **Fase 1 completada**: Los templates Nunjucks deben existir con las clases CSS referenciadas.
+
+## PROMPT
+
+```
+Eres un desarrollador CSS especializado en design systems con Tailwind CSS v4. Vas a crear los estilos del componente combobox para el proyecto desy-html (Design System del Gobierno de Aragon).
+
+## Contexto del proyecto
+
+desy-html usa Tailwind CSS v4 con @layer components y @apply para definir estilos de componentes. Los estilos se organizan en archivos CSS individuales por componente e importan desde `src/css/styles.css`.
+
+## MCP Server DESY
+
+Antes de implementar, consulta las guias del design system:
+1. Usa `mcp__DESY-MCP-Server__get_guideline` para obtener guias de:
+   - Estilos y tokens del design system
+   - Patrones visuales de formularios
+   - Estados de interaccion (focus, hover, active, disabled, error)
+
+## Skills y agentes disponibles
+
+- Usa la skill `desy` para consultar tokens y patrones visuales
+- Usa la skill `ux-designer` para decisiones de diseno visual
+- Al finalizar, usa el agente `code-simplifier:code-simplifier` para simplificar el CSS
+
+## Tokens de tema disponibles
+
+El tema se define en `src/css/styles.css` con variables CSS en @theme:
+
+```css
+/* Colores clave */
+--color-black: #1f2331;
+--color-white: #ffffff;
+--color-neutral-dark: #5e616b;
+--color-neutral-base: #92949b;
+--color-neutral-light: #ededec;
+--color-primary-base: #00607a;
+--color-primary-light: #d6eaf0;
+--color-primary-dark: #00475c;
+--color-warning-base: #fdcb33;
+--color-alert-base: #d22333;
+
+/* Spacing */
+--spacing-xs: 0.25rem;
+--spacing-sm: 0.5rem;
+--spacing-base: 1rem;
+
+/* Shadows (focus) */
+--shadow-outline-black: 0 0 0 3px var(--color-black);
+--shadow-outline-focus-input: inset 0 0 0 3px var(--color-black);
+
+/* Radius */
+--radius-DEFAULT: 0.1875rem;
+```
+
+## Archivo de referencia: estilos listbox
+
+Archivo: `src/templates/components/listbox/_styles.listbox.css`
+
+El listbox usa:
+- `@layer components` para encapsular estilos
+- `@apply` para usar utilidades Tailwind
+- Patron de estados: default > hover > focus > active > disabled
+- Focus state: `bg-warning-base`, `shadow-outline-black`, `text-black`, `outline-hidden`
+- Opciones seleccionadas: `font-bold` + checkmark via `::before` pseudo-elemento
+- Variantes de tamano: `--base`, `--lg`, `--sm`
+- Tooltip: clase `.c-listbox__tooltip` con `hidden` por defecto
+
+## Archivo de referencia: import en styles.css
+
+Archivo: `src/css/styles.css` (lineas 11-40)
+
+Los imports de componentes estan ordenados alfabeticamente:
+```css
+@import '../templates/components/checkboxes/_styles.checkboxes.css';
+@import '../templates/components/collapsible/_styles.collapsible.css';
+@import '../templates/components/datepicker/_styles.datepicker.css';
+/* ... */
+@import '../templates/components/listbox/_styles.listbox.css';
+```
+
+El nuevo import para combobox debe ir entre `collapsible` y `datepicker` (orden alfabetico):
+```css
+@import '../templates/components/combobox/_styles.combobox.css';
+```
+
+## Decisiones de diseno
+
+| Aspecto | Decision |
+|---------|----------|
+| Input | Reutiliza estilos de c-select (border, padding, font, transitions) |
+| Focus input | `border-black` + `shadow-outline-focus-input` + `ring-4 ring-warning-base` |
+| Error input | `border-alert-base` + `ring-2 ring-alert-base` |
+| Disabled | `bg-neutral-light` + `border-neutral-base` + `cursor-not-allowed` |
+| Popup | Borde `border-neutral-base`, sombra `shadow-md`, fondo `bg-white` |
+| Max-height popup | Fijo con scroll: `max-h-60 overflow-y-auto` en el `<ul>` |
+| Opciones hover | `bg-primary-base` + `text-white` |
+| Opciones focus/active-descendant | `bg-warning-base` + `shadow-outline-black` + `text-black` |
+| Opcion seleccionada | `font-bold` + checkmark `::before` (mismo patron que listbox) |
+| Clear button | Posicion absoluta derecha, visible solo con texto |
+| Clear button focus | `bg-warning-base` + `shadow-outline-black` |
+| Sin resultados | Texto italic, color `text-neutral-dark` |
+
+## Especificacion tecnica
+
+### Archivo: `_styles.combobox.css`
+
+```css
+/* ==========================================================================
+   _styles.combobox.css
+   ========================================================================== */
+@layer components {
+  /* Input wrapper */
+  .c-combobox__input-wrapper {
+    @apply relative;
+    @apply flex;
+    @apply items-center;
+  }
+
+  /* Input field */
+  .c-combobox__input {
+    @apply block;
+    @apply w-full;
+    @apply px-3;
+    @apply py-2;
+    @apply bg-white;
+    @apply border;
+    @apply border-black;
+    @apply rounded-sm;
+    @apply font-semibold;
+    @apply transition;
+    @apply duration-150;
+    @apply ease-in-out;
+    @apply pr-10;
+
+    @apply focus:border-black;
+    @apply focus:shadow-outline-focus-input;
+    @apply focus:ring-4;
+    @apply focus:ring-warning-base;
+    @apply focus:outline-hidden;
+
+    &[disabled],
+    &[aria-disabled="true"] {
+      @apply bg-neutral-light;
+      @apply border-neutral-base;
+      @apply cursor-not-allowed;
+    }
+  }
+
+  /* Input en estado error */
+  .c-form-group--error .c-combobox__input {
+    @apply border-alert-base;
+    @apply ring-2;
+    @apply ring-alert-base;
+  }
+
+  /* Clear button */
+  .c-combobox__clear {
+    @apply absolute;
+    @apply right-2;
+    @apply top-1/2;
+    @apply -translate-y-1/2;
+    @apply p-1;
+    @apply text-neutral-dark;
+    @apply rounded-sm;
+    @apply cursor-pointer;
+
+    &:hover {
+      @apply text-black;
+    }
+
+    &:focus {
+      @apply outline-hidden;
+      @apply bg-warning-base;
+      @apply shadow-outline-black;
+      @apply text-black;
+    }
+  }
+
+  /* Tooltip / popup container */
+  .c-combobox__tooltip {
+    @apply hidden;
+    @apply absolute;
+    @apply z-50;
+    @apply min-w-full;
+    @apply mt-1;
+    @apply border;
+    @apply border-neutral-base;
+    @apply shadow-md;
+    @apply bg-white;
+    @apply rounded-sm;
+  }
+
+  /* Options */
+  .c-combobox__option {
+    @apply flex;
+    @apply items-center;
+    @apply px-base;
+    @apply py-sm;
+    @apply cursor-pointer;
+    @apply relative;
+
+    &:hover {
+      @apply bg-primary-base;
+      @apply text-white;
+    }
+
+    /* Active descendant (focused via keyboard) */
+    &.focused,
+    &.ds-focus {
+      @apply bg-warning-base;
+      @apply shadow-outline-black;
+      @apply text-black;
+      @apply outline-hidden;
+    }
+
+    /* Selected option */
+    &[aria-selected='true'] {
+      @apply font-bold;
+
+      &::before {
+        @apply bg-center bg-no-repeat bg-cover;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cpath d='M4,12.5a2,2,0,0,1-1.55-.78L.25,9.23A1,1,0,0,1,.34,7.81a1,1,0,0,1,1.41.1l2.06,2.33a.21.21,0,0,0,.18.09.23.23,0,0,0,.18-.08l8.11-8.44a1,1,0,0,1,1.44,1.38l-8.2,8.63A1.94,1.94,0,0,1,4,12.5Z' style='fill: %23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+        content: '';
+        @apply w-3;
+        @apply h-3;
+        @apply absolute;
+        @apply top-3;
+        @apply left-2;
+      }
+    }
+
+    /* When option has checkmark, add left padding */
+    &[aria-selected='true'] {
+      @apply pl-lg;
+    }
+  }
+
+  /* No results message */
+  .c-combobox__no-results {
+    @apply hidden;
+    @apply px-base;
+    @apply py-sm;
+    @apply text-sm;
+    @apply text-neutral-dark;
+    @apply italic;
+  }
+}
+```
+
+### Modificacion en `src/css/styles.css`
+
+Anadir el import entre `collapsible` y `datepicker` (orden alfabetico):
+
+```css
+@import '../templates/components/collapsible/_styles.collapsible.css';
+@import '../templates/components/combobox/_styles.combobox.css';
+@import '../templates/components/datepicker/_styles.datepicker.css';
+```
+
+## Criterios de aceptacion
+
+- [ ] Archivo `_styles.combobox.css` creado dentro de `src/templates/components/combobox/`
+- [ ] Estilos envueltos en `@layer components`
+- [ ] Usa `@apply` con utilidades Tailwind v4 (mismo patron que listbox)
+- [ ] Input: border, padding, font-semibold, transition, rounded-sm
+- [ ] Focus input: `border-black` + `shadow-outline-focus-input` + `ring-4 ring-warning-base`
+- [ ] Error input: `border-alert-base` + `ring-2 ring-alert-base` (via `.c-form-group--error`)
+- [ ] Disabled: `bg-neutral-light` + `border-neutral-base` + `cursor-not-allowed`
+- [ ] Popup: border, shadow-md, bg-white, z-50, `hidden` por defecto
+- [ ] Opciones hover: `bg-primary-base` + `text-white`
+- [ ] Opciones focused (active-descendant): `bg-warning-base` + `shadow-outline-black`
+- [ ] Opcion seleccionada: `font-bold` + checkmark SVG via `::before`
+- [ ] Clear button: posicion absoluta, focus con `bg-warning-base` + `shadow-outline-black`
+- [ ] No-results: `hidden` por defecto, italic, color neutral
+- [ ] Max-height popup: el `<ul>` tiene `max-h-60 overflow-y-auto` (en template, no en CSS)
+- [ ] Import anadido en `styles.css` en orden alfabetico correcto
+- [ ] No hay clases duplicadas entre el CSS y las clases inline del template
+- [ ] El CSS compila sin errores con Tailwind v4
+```