Theming

Target Touch (56 dp)

Area di tap da 56x56 dp per le app mobile — variante size="touch", preset di tema data-pz-touch e scala Tailwind esportata dalla libreria.

Le azioni primarie di un'app usata in campo richiedono un'area di tap di almeno 56×56 dp: uso con una sola mano, in piedi, eventualmente con i guanti.

È una soglia deliberatamente più severa dei due riferimenti abituali:

Riferimento	Minimo	Note
WCAG 2.2 — SC 2.5.8 Target Size (Minimum)	24×24 px	Livello AA
Material Design guidelines	48 dp	Raccomandazione generale
PZeta — target touch	56 dp (`3.5rem`)	Scelta per l'uso in campo

In tutte le forme descritte sotto cresce l'area interattiva, non la tipografia: il testo mantiene la sua scala e i layout desktop restano invariati.

Tre modi per applicarlo

Modo	Come si usa	Ambito
Variante di componente	`size="touch"`	Button, InputText, Select, Checkbox, RadioButton
Preset di tema mobile	attributo `data-pz-touch` sul contenitore	Tutti i controlli interattivi della libreria
Scala Tailwind	`min-h-touch`, `min-w-touch`, `p-touch` — oppure `presets: [touchPreset]`	Markup dell'app

I tre modi non sono alternativi: la variante è puntuale, il preset copre un intero sottoalbero, la scala serve al markup proprio dell'app.

1. Variante `size="touch"`

type SizeTouch = 'small' | 'medium' | 'large' | 'touch';

Confronto con la taglia desktop

Checkbox e RadioButton

Su questi due componenti il target non è la casella ma la label: è lì che finisce il dito. La variante touch porta a 56 dp l'altezza minima della label, oltre a ingrandire l'indicatore.

CSS applicato

.hs-button-touch {
  @apply px-6;
  min-block-size: var(--pz-touch-target);   /* 3.5rem */
  min-inline-size: var(--pz-touch-target);
}

.hs-inputtext-size-touch {
  @apply px-4 text-sm;                      /* la tipografia resta quella medium */
  min-block-size: var(--pz-touch-target);
}

.hs-checkbox-label.size-touch,
.hs-radiobutton-label.size-touch {
  @apply items-center;
  min-block-size: var(--pz-touch-target);
}

L'attributo data-pz-touch applica il target a tutti i controlli interattivi della libreria contenuti nel sottoalbero, anche a quelli senza variante touch dedicata. Fuori dal contenitore marcato non cambia nulla.

<template>
  <!-- Intera app mobile -->
  <div data-pz-touch>
    <Button label="Salva" />
    <InputText v-model="nota" label="Nota" />
    <Checkbox v-model="urgente" label="Urgente" />
  </div>
</template>

Attivazione condizionale, tipica di un'app che gira sia su desktop sia su tablet:

<script setup lang="ts">
import { TOUCH_THEME_ATTRIBUTE } from '@pzeta/vue-components'

const isMobile = /* ... */
</script>

<template>
  <div :data-pz-touch="isMobile ? '' : undefined">
    <slot />
  </div>
</template>

Su un'app interamente mobile (per esempio Capacitor) conviene marcare direttamente l'elemento radice:

<html data-pz-touch>

Controlli coperti dal preset: Button, InputText, InputNumber, Textarea, Select, MultiSelect, ToggleButton, SelectButton, ToggleSwitch, DatePicker, TimePicker, Checkbox e RadioButton (sulla label).

3. Scala Tailwind

La libreria definisce --spacing-touch: 3.5rem nel proprio @theme. Con Tailwind 4 le utility corrispondenti sono quindi già disponibili nelle app che importano il CSS della libreria — non serve più estendere la scala in proprio:

<template>
  <button class="min-h-touch min-w-touch px-touch">Azione primaria</button>
</template>

Le app che dichiarano ancora il tema in tailwind.config.js possono importare il preset:

// tailwind.config.js
import { touchPreset } from '@pzeta/vue-components'

export default {
  presets: [touchPreset],
  // ...
}

Export disponibili

Export	Tipo	Valore	Descrizione
`TOUCH_TARGET_SIZE`	`string`	`'3.5rem'`	Dimensione del target touch
`TOUCH_THEME_ATTRIBUTE`	`string`	`'data-pz-touch'`	Attributo che attiva il preset di tema mobile
`touchPreset`	`TouchPreset`	—	Preset Tailwind con la scala `touch` (`spacing`, `minHeight`, `minWidth`)

import {
  TOUCH_TARGET_SIZE,
  TOUCH_THEME_ATTRIBUTE,
  touchPreset,
} from '@pzeta/vue-components'
import type { TouchPreset, SizeTouch } from '@pzeta/vue-components'

Note

La prop size accetta 'touch' su tutti i componenti che derivano da BaseStyledProps e BaseDropdownProps, ma il CSS della variante esiste per Button, InputText, Select, Checkbox e RadioButton. Sugli altri componenti usare il preset data-pz-touch.
La variabile CSS --pz-touch-target è sovrascrivibile per adottare una soglia diversa senza toccare i componenti:
```
:root {
  --pz-touch-target: 3rem; /* 48 dp, allineato a Material Design */
}
```

Dark Mode

Configurazione dark mode con Tailwind 4 e CSS tokens.

MCP Overview

Il server MCP della documentazione @pzeta/vue-components per agenti AI.