# sistema de diseño .italia

## sistema de diseño .italia Vista previa de la interfaz

Recorre un plan local real de tres pasos, recupera la situación cuando no se elige una opción y vuelve atrás sin perder la nota.

## sistema de diseño .italia Referencia de diseño

Paquete instalado de Bootstrap Italia 2.18.3 y documentación oficial; se verificaron CSS nativo y la representación de fuentes en tres anchos.

### Tipografía y fuentes

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Main family | Titillium Web | La vista previa incluye pesos nativos WOFF2 400/600/700. |
| Long reading / code | Lora / Roboto Mono | font-serif y font-monospace; no uses monospace en toda la interfaz. |
| Body | 16px / 1.5 | Base predeterminada desde la revisión tipográfica 2.7. |
| H1 mobile | 40px / 48px | CSS 2.18.3 real por debajo de 576px. |
| H1 from 576px | 48px / 56px | CSS nativo medido; la tabla de la documentación sigue indicando un interlineado de 60px. |
| Responsive typography | 576px threshold | Distinto del umbral compacto de 992px de Stepper. |
### Tokens semánticos nativos

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --bs-primary | hsl(210,100%,40%) = #0066cc | Color de acción principal y de enlaces. |
| --bs-body-color | hsl(0,0%,10%) | Color de texto predeterminado. |
| --bs-success | hsl(160,100%,25%) | Significado de éxito, no un estado de finalización automático. |
| --bs-danger | hsl(350,60%,50%) | Significado de error o acción destructiva. |
| --bs-warning | hsl(36,100%,30%) | Rol de advertencia, distinto del amarillo de la paleta. |
| --bs-border-radius | 4px | También existen variantes pequeñas de 2px y grandes de 8px. |
### Espaciado y diseño

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Utility sizes 0–5 | 0, 4, 8, 16, 24, 48px | Con una raíz normal de 16px; por ejemplo, p-3=1rem y p-5=3rem. |
| Responsive thresholds | 576 / 768 / 992 / 1200 / 1400px | De sm a xxl. |
| Container maxima | 540 / 720 / 960 / 1176 / 1320px | CSS Italia real; xl difiere de los 1140px de Bootstrap estándar. |
| Preview width | 900px maximum | Elección de la aplicación para un plan local breve, no un token oficial de contenedor. |
| Stepper compact mode | Below 992px | Solo se muestran la etiqueta activa y el índice textual. |
### Estructura de Stepper

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Root/header | steppers / steppers-header | El encabezado contiene una lista de etapas. |
| Stage states | confirmed / active | El código de la aplicación debe actualizarlos tras la validación. |
| Mobile index | steppers-index | Mantén n/total sincronizado con la etapa activa. |
| Body | steppers-content; aria-live=polite | Anuncia los cambios en el contenido de una página única. |
| Navigation | steppers-nav; steppers-btn-prev / steppers-btn-next | Las clases definen la presentación, no la navegación automática del formulario. |
## sistema de diseño .italia Guía completa

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## sistema de diseño .italia Sistema e implementación

### Designers Italia a través de su biblioteca de código

> Designers Italia abarca más que un paquete CSS: incluye pautas de diseño de servicios, kits y recursos de implementación. Este ejemplo se centra en la implementación documentada de Bootstrap Italia, fijada en la versión 2.18.3. No implica que instalar la biblioteca complete el diseño de un servicio público ni que satisfaga todos los requisitos de un sitio web municipal.

En la versión inspeccionada, Bootstrap Italia incluye y personaliza Bootstrap 5.2.3. No añadas encima un segundo paquete estándar de Bootstrap. La vista previa usa su CSS nativo y archivos de fuente Titillium Web proporcionados localmente, junto con un flujo de planificación original de tres etapas para una visita a la biblioteca.

Consulta la especificación complementaria

## sistema de diseño .italia Tipografía y valores exactos

### Cada fuente cumple una función distinta

Titillium Web es la familia habitual de la interfaz. Lora es la opción serif para textos de lectura más extensos y Roboto Mono se usa para código o contenido de ancho fijo. La vista previa carga los pesos reales de Titillium Web que utiliza y conserva la licencia de la fuente, en lugar de sustituirla silenciosamente por una fuente del sistema.

El cuerpo del texto se mantiene en 16px. Los encabezados cambian en 576px: H1 mide 40px, con un interlineado de 48px, en pantallas pequeñas; luego pasa a 48px, con un interlineado de 56px, en la versión instalada de CSS. La tabla de la documentación indica un interlineado de escritorio de 60px; la tabla de referencia de aquí registra la versión inspeccionada y explica la discrepancia, en lugar de mezclar dos fuentes.

Consulta la especificación complementaria

## sistema de diseño .italia Etapas responsivas y espaciado

### Dos puntos de quiebre resuelven problemas distintos

El umbral tipográfico es de 576px, mientras que Stepper cambia la presentación de su encabezado por debajo de 992px. En pantallas compactas, se mantienen visibles la etiqueta actual y el índice n/total. Los nombres de las demás etapas no se comprimen en columnas ilegibles. Quienes visitan el sitio desde un móvil también necesitan un aviso de la etapa actual; el ejemplo lo proporciona mediante el foco en el encabezado y texto de estado accesible.

Las utilidades de espaciado siguen la escala rem verificada: 4, 8, 16, 24 y 48px para los tamaños del 1 al 5, con un tamaño de raíz normal. Los anchos máximos del contenedor de cuadrícula incluyen 1176px en xl, en lugar del valor estándar de Bootstrap que suele citarse de memoria. El plan independiente usa un límite más estrecho de 900px, como decisión explícita de la aplicación.

Consulta la especificación complementaria

## sistema de diseño .italia Anatomía y responsabilidades de Stepper

### El encabezado no controla el flujo de trabajo

La estructura documentada separa steppers-header, steppers-content y steppers-nav. Los elementos de la lista del encabezado reciben las clases confirmed y active; el índice indica la posición. Los botones anterior y siguiente reciben sus clases específicas. Estas clases describen la presentación. La aplicación debe decidir si el formulario actual es válido y si se puede acceder a una etapa posterior.

El ejemplo usa secciones comunes para cada paso y mantiene los controles en el DOM, ocultando las secciones inactivas. Por eso, al volver al paso de la nota de acceso, la nota se conserva. Un paso de revisión lee los controles existentes; no los recrea a partir de un resultado del servidor supuesto.

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

Referencia de código

Consulta la especificación complementaria

## sistema de diseño .italia Validación y progreso significativo

### Avanza solo después de elegir una opción obligatoria

El tipo de visita es obligatorio. Si se continúa sin elegirlo, el primer paso sigue activo, aparece un error específico y el foco pasa al primer botón de opción. Al elegir un tipo y continuar, la primera etapa queda marcada como completa. La nota es opcional y puede dejarse en blanco; en ese caso, la revisión indica que no se añadió ninguna nota.

El botón para volver lleva a la etapa anterior sin borrar la selección ni la nota. El botón para empezar de nuevo borra ambas deliberadamente y vuelve al inicio. La pantalla final se denomina plan local: nunca afirma que se haya enviado, aprobado ni guardado una reserva.

1. Pulsa Continuar sin seleccionar un botón de opción y comprueba el error.

2. Elige un tipo de visita, añade una nota breve y abre la revisión.

3. Vuelve a la nota, confirma que conserva su valor y luego empieza de nuevo para borrar el plan.

Consulta la especificación complementaria

## sistema de diseño .italia Estado accesible y foco

### Mantén alineadas la posición visual y la anunciada

El elemento de la lista activa tiene aria-current="step" y una etiqueta visualmente oculta que indica la etapa actual. Las etapas anteriores reciben un texto de finalización, además de la clase confirmed. El índice numérico compacto se oculta a las tecnologías de asistencia porque el encabezado actual y la semántica de la etapa ya indican la posición; se mantiene visible para facilitar la orientación visual.

El contenido dinámico usa aria-live="polite", tal como recomiendan las directrices oficiales para una secuencia de una sola página. El ejemplo también enfoca el nuevo encabezado para ofrecer a quienes usan el teclado un punto de inicio de lectura predecible. Prueba esa combinación con las tecnologías de asistencia compatibles para evitar anuncios demasiado repetitivos en formularios más complejos.

- Usa botones reales para cambiar de paso y desactiva el botón Atrás en la primera etapa.

- Mantén las etiquetas asociadas a los botones de opción y al área de texto; el texto del marcador de posición no sustituye a una etiqueta.

- Indica los estados actual y completado con texto, no solo con el color azul o un icono.

Consulta la especificación complementaria

## sistema de diseño .italia Recursos nativos e inicialización

### CSS, fuentes y JavaScript opcional

El paquete proporciona CSS, un script integrado, fuentes de origen y un sprite SVG. Este ejemplo de Stepper necesita CSS y las fuentes elegidas; su navegación es lógica de la aplicación. Otros widgets usan data-bs-toggle o los atributos de datos documentados para inicializarse automáticamente. No combines la inicialización automática con una segunda instancia manual del mismo widget.

Si usas módulos, importa solo los componentes que necesite la aplicación. Las directrices oficiales señalan que los métodos de transición devuelven el control antes de que termine la transición y que las llamadas realizadas durante una transición pueden ignorarse. En esos componentes, espera al evento de finalización correspondiente antes de encadenar acciones dependientes; este Stepper sencillo no inventa una transición nativa de API.

Consulta la especificación complementaria

## sistema de diseño .italia Límites de integración

### Usa el kit sin dar a entender que el servicio se ha completado

La documentación de la biblioteca recomienda mantenerla actualizada y desaconseja depender de una CDN pública en producción. La configuración fija la versión verificada y el ejemplo local incluye sus propios recursos y licencias. Un servicio real sigue necesitando diseño de contenido, gestión de datos, validación en el servidor y una respuesta de envío confirmada.

El ejemplo muestra una visita genérica a una biblioteca, sin logotipo municipal ni insignias oficiales. Es un ejemplo didáctico de OpenDesign, no un servicio de una autoridad pública. Mantén clara esa distinción en cualquier prototipo para que un estado de revisión visualmente pulido no se confunda con un registro de solicitud real.

Consulta la especificación complementaria

## Ejemplos de componentes del sistema de diseño de sistema de diseño .italia

### Estructura del Stepper en la segunda etapa

El código de la aplicación debe sincronizar los estados confirmado, activo y el índice móvil.

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

Referencia de código

### Flujo local completo de planificación

CSS/fuentes nativos, validación obligatoria de botones de opción, nota opcional, revisión, volver atrás y reinicio.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>
```

Referencia de código

## Configuración del agente de sistema de diseño .italia

### Punto de partida para la implementación

Configuración nativa de CSS y las fuentes. La navegación del Stepper es lógica de la aplicación; a continuación se incluye un ejemplo completo y funcional. El ZIP del ejemplo completo y funcional, disponible en Fuentes, también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/designers-italia.html. No abras ejemplos basados en módulos mediante file://.

```
npm install bootstrap-italia@2.18.3
# Copy dist/css/bootstrap-italia.min.css into public/vendor.
# Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face.
# CSS is sufficient for the Stepper presentation; application code owns navigation.
# For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once.
```

### Una instrucción para tu proyecto

```
Usa Bootstrap Italia 2.18.3 con CSS nativo y Titillium Web. Crea la estructura documentada de steppers, encabezado, contenido y navegación, con estados activo y confirmado, y el índice móvil sincronizado. Gestiona la validación y la navegación en el código de la aplicación, conserva los valores al volver atrás y etiqueta el estado final según la respuesta real del backend. No mezcles otro entorno de ejecución de Bootstrap ni afirmes que se ha enviado una revisión local.
```

## sistema de diseño .italia Fuentes y alcance

Ejemplo independiente de OpenDesign centrado en Bootstrap Italia. No representa la identidad de una autoridad pública ni un servicio real de reservas.

- Instalación y recursos CSS, módulos, paquete, fuentes y límites del entorno de ejecución.

- Steppers Estructura nativa, estados, modo compacto y región dinámica.

- Tipografía Familias tipográficas y encabezados adaptables.

- Espaciado Escala de utilidades y sintaxis.

- Fuente publicada Dimensiones de la versión fijada y variables semánticas.

- Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación.

## sistema de diseño .italia Recursos relacionados

### Designsystemet

Explora las funciones reales del tema, los modos de tamaño y el comportamiento nativo de los campos de Designsystemet mediante un editor completo de encargos con contador de caracteres y estado de presentación conservado.

### DSFR

Comprende la tipografía, la cuadrícula y el componente de acordeón API concretos del sistema del Estado francés dentro de su ámbito institucional. Compara los comportamientos de divulgación vinculados e independientes en un ejemplo educativo claramente neutral.

### Europa Component Library

Examina las funciones de color, tipografía y espaciado de EC en Europa mediante un encargo completo con acordeón nativo, navegación por teclado, opción para abrir todo y una alternativa legible sin JavaScript.


- [Referencia de implementación](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Fuente](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Fuente](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)
- [Fuente](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Fuente](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Consulta la especificación complementaria](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Consulta la especificación complementaria](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Consulta la especificación complementaria](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Referencia de código](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Consulta la especificación complementaria](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Instalación y recursos CSS, módulos, paquete, fuentes y límites del entorno de ejecución.](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Steppers Estructura nativa, estados, modo compacto y región dinámica.](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Tipografía Familias tipográficas y encabezados adaptables.](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Espaciado Escala de utilidades y sintaxis.](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Fuente publicada Dimensiones de la versión fijada y variables semánticas.](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)