Layout

Stepper

Wizard multi-step composto da cinque sub-componenti (Stepper, StepList, Step, StepPanels, StepPanel). Supporta modalità lineare (blocca l'avanzamento), orientamento orizzontale/verticale e tracciamento completamento automatico.

Import

import { Stepper, StepList, Step, StepPanels, StepPanel } from '@pzeta/vue-components'

Esempio Base

Stepper (root)

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| number`	—	Step corrente (v-model)
`value`	`string \| number`	`''`	Alias di `modelValue`
`linear`	`boolean`	`false`	Modalità lineare: blocca il click diretto sugli step non raggiunti
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento del wizard
`severity`	`Severity`	`undefined`	Colore dell'indicatore step
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione degli indicatori

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| number`	Aggiornamento del v-model
`update:value`	`string \| number`	Alias per compatibilità
`stepChange`	`{ previousValue: string \| number; currentValue: string \| number }`	Emesso al cambio di step

Metodi esposti (`defineExpose`)

Metodo	Firma	Descrizione
`selectStep`	`(value: string \| number) => void`	Naviga a uno step specifico
`completeStep`	`(value: string \| number) => void`	Marca uno step come completato
`uncompleteStep`	`(value: string \| number) => void`	Rimuove il completamento da uno step
`resetCompleted`	`() => void`	Azzera tutti gli step completati
`isStepCompleted`	`(value: string \| number) => boolean`	Verifica se uno step è completato

StepList

Container per la lista degli step.

Props

Prop	Tipo	Default	Descrizione
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento (eredita da Stepper)

Step

Singolo elemento step con indicatore visivo, label e connettore.

Props

Prop	Tipo	Default	Descrizione
`value`	`string \| number`	—	Identificatore univoco dello step
`label`	`string`	—	Etichetta dello step. È anche il nome usato negli annunci per gli screen reader; se assente si usa il testo dello slot di default, mai il `value`
`description`	`string`	—	Descrizione sotto la label
`icon`	`string`	—	Icona nell'indicatore (classe CSS)
`disabled`	`boolean`	`false`	Disabilita il click sullo step
`showConnector`	`boolean`	`true`	Mostra la linea connettore prima dell'indicatore
`as`	`string \| null`	`null`	Tag HTML da renderizzare
`asChild`	`boolean`	`false`	Modalità headless

Emits

Evento	Payload	Descrizione
`click`	`MouseEvent`	Click sullo step

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto personalizzato dell'indicatore (numero, testo)
`indicator`	`{ isActive, isCompleted }`	Sovrascrive l'indicatore visivo

StepPanels

Container per i pannelli di contenuto.

Props

Prop	Tipo	Default	Descrizione
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento

StepPanel

Contenuto associato a uno step.

Props

Prop	Tipo	Default	Descrizione
`value`	`string \| number`	—	Valore corrispondente allo Step
`as`	`string \| null`	`null`	Tag HTML del wrapper
`asChild`	`boolean`	`false`	Modalità headless

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto del pannello

Esempi

Stepper lineare orizzontale con navigazione

Stepper verticale non lineare

Accessibilità

StepList usa role="tablist"
In modalità non lineare ogni Step ha role="tab", aria-selected, aria-controls e aria-disabled quando disabilitato; in modalità lineare non è un tab e il passo attivo ha aria-current="step"
In modalità non lineare ogni StepPanel ha role="tabpanel" e aria-labelledby verso il suo Step
In modalità lineare, il click su step non raggiunti è bloccato a livello logico
Contrasto nel tema scuro (dalla 1.24.0): il pallino di uno step non attivo ha il fondo della superficie in cui si trova (--color-surface, quindi uguale al Dialog) e il bordo neutral-400 (neutral-600 era 1,94:1, sotto il 3:1 di WCAG 1.4.11); lo step attivo usa la tinta 400 della severity con il numero scuro (primary-700 su slate-800 era 1,8:1). Il tema chiaro non cambia

Nome dei passi e annuncio del cambio passo

Ogni Step ha un aria-label nella forma "Passo N di M: <etichetta> (<stato>)", e a ogni cambio di passo una live region (role="status") annuncia "Passo N di M: <etichetta>". Tutti i testi arrivano dall'i18n (sezione stepper, disponibile in it/en/de/fr/es):

Chiave	Italiano
`stepper.stepPosition`	`Passo {current} di {total}`
`stepper.stepLabel`	`Passo` (se la posizione non è nota)
`stepper.stateCompleted`	`completato`
`stepper.stateCurrent`	`corrente`
`stepper.stateDisabled`	`disabilitato`
`stepper.statePending`	`da completare`

L'etichetta è la prop label dello Step oppure, se manca, il testo del suo slot di default. Il value non viene più letto agli utenti: è un identificativo tecnico, quindi può restare 'anagrafica' o 2 senza doverlo trasformare in un testo leggibile.

<Step value="anagrafica" label="Dati cliente" />
<!-- aria-label="Passo 1 di 3: Dati cliente (corrente)" -->

Focus al cambio di passo

Nella modalità di default il pannello nascosto è rimosso dalla vista con v-show (display: none) e non riceve più aria-hidden: metterlo mentre il focus era ancora dentro (es. sul pulsante "Avanti") faceva segnalare al browser "Blocked aria-hidden on an element because its descendant retained focus" a ogni cambio. Se il focus si trova nel pannello uscente, viene spostato sul pannello entrante (che è focalizzabile), così lo screen reader non perde il punto e il focus non finisce sul body. Non serve più spostare il focus a mano prima di cambiare passo.

In modalità asChild la visibilità la decide il consumer: a11yAttrs include ancora aria-hidden sui pannelli non attivi e lo spostamento del focus resta a carico del consumer.

TypeScript

import type {
  StepperProps,
  StepperEmits,
  StepProps,
  StepEmits,
  StepPanelProps,
  StepListProps,
  StepPanelsProps,
  StepperOrientation,
} from '@pzeta/vue-components'

Splitter

Layout con pannelli ridimensionabili tramite divisore drag-and-drop. Composto da Splitter e SplitterPanel. Supporta orientamento orizzontale/verticale, dimensioni percentuali, minSize e persistenza stato.

Tabs

Navigazione a schede composta da cinque sub-componenti (Tabs, TabList, Tab, TabPanels, TabPanel). Supporta varianti visive, orientamento, badge, scroll e modalità closable.