# Sistema di progettazione Aksel

## Anteprima dell’interfaccia del sistema di progettazione sistema di design Aksel

Ordina per giorni di attesa, seleziona i record, cambia densità e confronta i ruoli del tema chiaro e scuro.

## Riferimento di progettazione del sistema di progettazione sistema di design Aksel

Foglio di stile nativo di @navikt/ds-css 8.18.0 esaminato e documentazione aggiornata della versione 8. I valori chiari e scuri sono circoscritti; l’anteprima sostituisce i caratteri remoti con Arial e usa i record di esempio originali.

### Tipografia della versione 8

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --ax-font-family | Source Sans 3, Source Sans Pro, Arial, sans-serif | L’anteprima usa esplicitamente Arial come fallback. |
| --ax-font-weight-regular / bold | 400 / 600 | Non considerare il token in grassetto indicato equivalente a 700. |
| --ax-font-size-medium / large | 1rem / 1.125rem | 16px / 18px con dimensione standard della radice. |
| --ax-font-size-heading-xlarge / 2xlarge | 2rem / 2.5rem | 32px / 40px. |
### Spaziatura e breakpoint

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --ax-space-8 / 16 / 24 / 32 | 0.5 / 1 / 1.5 / 2rem | I nomi dei token indicano gli equivalenti in pixel standard. |
| --ax-radius-2 / 4 / 8 / 12 / 16 | 2 / 4 / 8 / 12 / 16px | Ruoli dei raggi. |
| sm / md / lg / xl / 2xl | 480 / 768 / 1024 / 1280 / 1440px | Valori esaminati in CSS con versione specificata. |
### Geometria della tabella nativa

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Medium cell padding | 12px 8px | Spaziatura predefinita verticale / orizzontale. |
| Small / large vertical padding | 4px / 16px | Modificatori di densità nativi; la spaziatura orizzontale resta 8px. |
| Header divider | 2px | Il separatore delle righe del corpo resta di 1px. |
### Ruoli del tema

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --ax-bg-default | #fff light / #0e151f dark | Superficie radice. |
| --ax-text-neutral | #202733 light / #dfe1e5 dark | Valori neutral-1000 risolti. |
| --ax-bg-accent-strong | #2176d4 light / #4580ca dark | Valori accent-600 risolti; nel codice usa il ruolo. |
## Guida completa al sistema di progettazione sistema di design Aksel

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## Sistema di progettazione sistema di design Aksel: parti dalle specifiche della versione 8

### Non mescolare le vecchie classi con i nuovi token

> Aksel v8 usa i token --ax-* e le classi dei componenti .aksel. La guida alla migrazione specifica che le vecchie classi .navds non funzionano più e che i token specifici dei componenti sono stati rimossi. Un tutorial basato su uno screenshot precedente può quindi sembrare plausibile, pur fornendo indicazioni di implementazione errate.

Questa pagina fissa CSS nativo alla versione 8.18.0 e indica l’installazione del corrispondente React. L’anteprima usa le classi native della tabella esaminate con un normale HTML; la selezione e l’ordinamento sono gestiti dal JavaScript dell’applicazione. Non afferma che scaricare un foglio di stile crei un Table di React.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Aksel: ruoli tipografici e caricamento dei caratteri

### Usa 600 per il token in grassetto.

Il riferimento dei token definisce Source Sans 3, Source Sans Pro, Arial e sans-serif come stack di font. Il peso Regular è 400 e il token denominato bold è 600. Le dimensioni del testo del corpo includono 14, 16, 18 e 20px; gli stili per i titoli arrivano a 24, 28, 32 e 40px.

L’anteprima locale imposta il token del font su Arial e sovrascrive esplicitamente l’uso del font ereditato, così da non effettuare richieste a font remoti. È una scelta dichiarata di fallback, non l’affermazione che Arial sia il carattere tipografico principale di Aksel. Le dimensioni del testo dei componenti sono fornite da CSS.

Leggi la specifica di supporto

## Sistema di design Aksel: spaziatura, raggio e layout

### I token denominati in pixel corrispondono a valori rem

--ax-space-16 corrisponde a 1rem e --ax-space-24 a 1.5rem. La sintassi dei primitivi v8 segue questi nomi: padding="space-16" e gap={{xs:"space-8",md:"space-16"}}. Non sostituire una precedente proprietà numerica di spaziatura senza prima consultare le indicazioni per la migrazione.

I ruoli dei raggi documentati includono 2, 4, 8, 12 e 16px, oltre a full. L’anteprima mantiene la geometria nativa della tabella e applica space-24 attorno ai controlli dell’applicazione. La larghezza di lettura di 64rem è una scelta locale; i valori dei breakpoint provengono dal foglio di stile esaminato.

Leggi la specifica di supporto

## Sistema di design Aksel: colori semantici compatibili con il tema

### Mantieni il ruolo, non un singolo valore esadecimale

Il foglio di stile nativo risolve --ax-text-neutral in neutral-1000, che corrisponde a #202733 in modalità chiara e a #dfe1e5 in modalità scura. --ax-bg-default passa dal bianco a #0e151f. Inserire il valore del testo chiaro direttamente in un contenitore scuro vanificherebbe la mappatura dei ruoli.

L’anteprima alterna la classe del tema .light/.dark e lascia che i colori delle righe alternate, dei bordi e della riga selezionata seguano i token ufficiali. La selezione mantiene una casella di controllo spuntata e un conteggio visibile. Una riga colorata da sola non costituisce un’interfaccia di selezione.

Leggi la specifica di supporto

## Sistema di design Aksel: struttura semantica della tabella

### Le intestazioni non sono normali celle

La tabella nativa ha classi distinte per intestazione, corpo, riga, cella d’intestazione e cella di dati. L’equivalente in React usa Table.Header, Table.Body, Table.Row, Table.HeaderCell e Table.DataCell. La colonna dei riferimenti è un’intestazione di riga e ogni intestazione di colonna ha scope=col.

La didascalia dà un nome alla raccolta. I giorni di attesa sono quantità e sono allineati a destra; gli identificativi di riferimento restano allineati a sinistra. Alle larghezze ridotte, l’anteprima mantiene lo scorrimento orizzontale in un’area etichettata e raggiungibile tramite tastiera, invece di compromettere le relazioni della tabella trasformando le righe in schede.

- Usa celle d’intestazione sia per le etichette delle colonne sia per gli identificativi delle righe.

- Allinea a destra i valori quantitativi, non i codici postali o gli identificativi.

- Aggiungi una didascalia per dare alla tabella un nome significativo.

Leggi la specifica di supporto

## Sistema di design Aksel: densità e ordinamento

### Modificare la densità cambia la spaziatura interna

Nella versione nativa di CSS esaminata, le celle di dimensione media usano space-12 in verticale e space-8 in orizzontale. La dimensione piccola usa space-4 in verticale, mentre quella grande usa space-16 in verticale. Il selettore della densità cambia la classe modificatrice nativa; non riduce la dimensione del font del corpo per forzare più informazioni nella finestra.

L’intestazione Giorni di attesa è un pulsante di ordinamento in stile nativo. Il relativo gestore ordina i valori numerici e aggiorna aria-sort su quell’intestazione. Questa trasformazione è responsabilità dell’applicazione: anche React API espone lo stato dell’ordinamento e onSortChange, invece di ordinare automaticamente record di dominio arbitrari.

Leggi la specifica di supporto

## Sistema di design Aksel: selezione delle righe accessibile da tastiera

### Assegna a ogni riga un controllo esplicito

La documentazione di Table avverte che onRowClick da solo non è accessibile da tastiera. L’esempio fornisce quindi una casella di controllo con etichetta per ogni riferimento e una casella per selezionarli tutti. La casella aggregata diventa indeterminata quando è selezionato solo un sottoinsieme delle righe.

L’ordinamento mantiene la selezione usando l’identificativo stabile del riferimento. Non usa mai l’indice corrente della riga come chiave di selezione, perché al cambio di ordinamento la spunta finirebbe su un record diverso. Il conteggio della selezione si aggiorna in un’area di stato con annuncio discreto. I record selezionati non vengono inviati da nessuna parte.

Leggi la specifica di supporto

## Sistema di design Aksel: caricare CSS e React compatibili

### Mantieni allineate le versioni dei pacchetti

Installa @navikt/ds-react e @navikt/ds-css alla stessa versione, poi importa CSS una sola volta, vicino alla radice dell’applicazione. Il pacchetto include già i token. La guida ufficiale all’importazione di CSS supporta anche file globali e dei componenti granulari, ma il baseline è obbligatorio e i font e i token devono essere forniti o sostituiti esplicitamente.

Aksel usa i livelli CSS. Evita selettori ampi non associati a un livello, che potrebbero sovrascrivere involontariamente gli stili dei componenti. Il layout personalizzato dell’applicazione va applicato alle classi definite da te. L’anteprima autonoma include una versione locale di CSS e sostituisce intenzionalmente il font; l’esempio con React è un percorso d’integrazione distinto, verificato sul codice sorgente.

1. Fissa insieme le versioni dei pacchetti React e CSS.

2. Importa il foglio di stile una sola volta e usa i figli semantici di Table.

3. Gestisci ordinamento e selezione nello stato dell’applicazione.

4. Verifica il cambio di tema, i controlli da tastiera e l’area di scorrimento per schermi stretti.

Leggi la specifica di supporto

## Esempi di componenti del sistema di design Aksel

### Tabella Table semantica di React

Figli Table effettivi e un’intestazione di riga; i valori quantitativi sono allineati a destra.

```
import { Table } from '@navikt/ds-react';
import '@navikt/ds-css';

export function CaseTable() {
  return <Table size="medium" zebraStripes>
    <caption>Fictional follow-up records</caption>
    <Table.Header><Table.Row>
      <Table.HeaderCell scope="col">Reference</Table.HeaderCell>
      <Table.HeaderCell scope="col">Next activity</Table.HeaderCell>
      <Table.HeaderCell scope="col" align="right">Waiting days</Table.HeaderCell>
    </Table.Row></Table.Header>
    <Table.Body><Table.Row>
      <Table.HeaderCell scope="row">DEMO-204</Table.HeaderCell>
      <Table.DataCell>Confirm appointment preference</Table.DataCell>
      <Table.DataCell align="right">4</Table.DataCell>
    </Table.Row></Table.Body>
  </Table>;
}
```

Riferimento del codice

### Sintassi attuale dei primitivi responsive

Usa i nomi dei token v8 nelle proprietà dei primitivi.

```
import { HStack, Box } from '@navikt/ds-react';
<HStack gap={{ xs: 'space-8', md: 'space-16' }}>
  <Box padding="space-16">First region</Box>
  <Box padding="space-16">Second region</Box>
</HStack>
```

Riferimento del codice

### Esempio autonomo completo

Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Aksel table workbench</title><link rel="stylesheet" href="vendor/aksel-8.18.0/index.css"><style>:root{--ax-font-family:Arial,sans-serif}body,body *,body *:before,body *:after{font-family:Arial,sans-serif!important}body{background:var(--ax-bg-default);color:var(--ax-text-neutral);font-size:18px;line-height:1.5}main{max-width:64rem;padding:32px 24px;margin:auto}h1{font-size:32px;font-weight:600;line-height:1.25;margin:16px 0 24px}p{margin:16px 0}.toolbar{display:flex;gap:24px;flex-wrap:wrap;padding:24px;background:var(--ax-bg-sunken);margin:24px 0}select{font-size:16px;padding:8px;background:var(--ax-bg-input);color:var(--ax-text-neutral);border:1px solid var(--ax-border-neutral)}label{font-size:16px;display:flex;gap:8px;align-items:center}.scroll{overflow-x:auto}table{min-width:38rem}caption{text-align:left;font-weight:600;margin-bottom:16px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--ax-bg-accent-strong);cursor:pointer}small{font-size:14px;display:block;margin-top:24px;color:var(--ax-text-neutral-subtle)}:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}@media(max-width:767px){main{padding:24px 16px}.toolbar{padding:16px;gap:16px}h1{font-size:28px}}</style><body class="light"><main><p>AKSEL v8 · NATIVE TABLE CSS</p><h1>Follow-up record workbench</h1><p>Compare density and theme while sorting and selecting fictional records. Selection follows each reference when the rows move.</p><div class="toolbar"><label>Density <select id="density"><option value="medium">Medium</option><option value="small">Small</option><option value="large">Large</option></select></label><label>Theme <select id="theme"><option value="light">Light</option><option value="dark">Dark</option></select></label></div><p id="selection" role="status">0 records selected</p><div class="scroll" tabindex="0" role="region" aria-label="Fictional follow-up records, horizontally scrollable"><table class="aksel-table aksel-table--zebra-stripes" id="records"><caption>Fictional follow-up records</caption><thead class="aksel-table__header"><tr class="aksel-table__row"><th class="aksel-table__header-cell" scope="col"><input id="all" type="checkbox" aria-label="Select all records"></th><th class="aksel-table__header-cell" scope="col">Reference</th><th class="aksel-table__header-cell" scope="col">Next activity</th><th class="aksel-table__header-cell" id="sort-header" scope="col" aria-sort="ascending"><button id="sort" type="button" class="aksel-table__sort-button">Waiting days ↑</button></th></tr></thead><tbody class="aksel-table__body" id="rows"></tbody></table></div><small>OpenDesign specimen using native Aksel 8.18.0 CSS and an explicit Arial fallback. Fictional data, no NAV identity or external actions.</small></main><script>const data=[{id:'DEMO-204',activity:'Confirm appointment preference',days:4},{id:'DEMO-218',activity:'Read the submitted example note',days:12},{id:'DEMO-231',activity:'Arrange an example callback',days:7}];let ascending=true;const selected=new Set(),all=document.querySelector('#all');function render(){const body=document.querySelector('#rows');body.replaceChildren();for(const r of [...data].sort((a,b)=>ascending?a.days-b.days:b.days-a.days)){const tr=document.createElement('tr');tr.className='aksel-table__row'+(selected.has(r.id)?' aksel-table__row--selected':'');const td=document.createElement('td');td.className='aksel-table__data-cell';const c=document.createElement('input');c.type='checkbox';c.setAttribute('aria-label','Select '+r.id);c.checked=selected.has(r.id);c.onchange=()=>{c.checked?selected.add(r.id):selected.delete(r.id);updateSelection();tr.classList.toggle('aksel-table__row--selected',c.checked)};td.append(c);const th=document.createElement('th');th.scope='row';th.className='aksel-table__header-cell';th.textContent=r.id;const activity=document.createElement('td');activity.className='aksel-table__data-cell';activity.textContent=r.activity;const days=document.createElement('td');days.className='aksel-table__data-cell aksel-table__data-cell--align-right';days.textContent=r.days;tr.append(td,th,activity,days);body.append(tr)}updateSelection()}function updateSelection(){all.checked=selected.size===data.length;all.indeterminate=selected.size>0&&selected.size<data.length;document.querySelector('#selection').textContent=selected.size+' records selected'}all.onchange=()=>{selected.clear();if(all.checked)data.forEach(r=>selected.add(r.id));render()};document.querySelector('#sort').onclick=()=>{ascending=!ascending;document.querySelector('#sort-header').setAttribute('aria-sort',ascending?'ascending':'descending');document.querySelector('#sort').textContent='Waiting days '+(ascending?'↑':'↓');render()};document.querySelector('#density').onchange=e=>document.querySelector('table').className='aksel-table aksel-table--zebra-stripes aksel-table--'+e.target.value;document.querySelector('#theme').onchange=e=>document.body.className=e.target.value;render();</script></body></html>
```

Riferimento del codice

- Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale.

- Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima.

## Configurazione dell’agente per il sistema di design Aksel

### Punto di partenza per l’implementazione

Nell’anteprima viene renderizzata localmente la versione nativa 8.18.0 di CSS. La composizione di React è verificata sul codice sorgente, ma non è stata compilata separatamente. Mantieni allineate le versioni; non combinare le classi navds v7 con CSS v8. Il file ZIP dell’esempio completo funzionante, disponibile in Sources, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory e poi apri http://localhost:8080/nav-aksel.html. Non aprire con file:// gli esempi basati su moduli.

```
npm install @navikt/ds-react@8.18.0 @navikt/ds-css@8.18.0
# React entry:
# import "@navikt/ds-css";
# import { Table, HStack, Box } from "@navikt/ds-react";
```

### Un prompt per il tuo progetto

```
Crea una tabella semantica Aksel v8 usando pacchetti CSS/React compatibili, versione 8.18.0. Mantieni la didascalia, le intestazioni di colonna e le intestazioni di riga per i riferimenti. Usa i token ax reali e le proprietà dei primitivi space-*. Implementa l’ordinamento numerico con aria-sort, la selezione tramite caselle di controllo con identificativi stabili e la selezione multipla indeterminata. Non affidarti a onRowClick per l’interazione da tastiera. Supporta i token di ruolo per i temi chiaro e scuro e un’area di scorrimento orizzontale etichettata sugli schermi stretti.
```

## Sistema di design Aksel: fonti e ambito

Record di esempio indipendenti e nessuna identità NAV. Si usa il foglio di stile nativo, dichiarando il font di fallback. Ordinamento, selezione e layout sono comportamenti dell’applicazione; non vengono mostrati dati reali su benefici o casi.

- sistema di design Aksel Componenti ufficiali, primitivi, pattern e indicazioni per l’implementazione.

- Token di progettazione Riferimento ufficiale dei token.

- codice sorgente di Aksel Progetto sorgente ufficiale e cronologia dello sviluppo.

- Scarica l’esempio completo e funzionante ZIP con HTML completo, dipendenze locali CSS/JavaScript, licenze fornite e istruzioni esatte per l’avvio. Non è necessario alcun passaggio di compilazione.

## Risorse correlate al sistema di design Aksel

### NHS sistema di design

Usa la tipografia NHS.UK, spaziature responsive, opzioni radio raggruppate e dettagli contestuali per creare un percorso chiaro di scelta delle preferenze per un appuntamento.

### NL sistema di design

Componi un’interfaccia per i servizi pubblici usando componenti reali dei contributori e un tema esplicito. Questo riferimento usa Utrecht CSS per illustrare la mappatura dei token, la struttura di un elenco di dati e due temi originali con lo stesso flusso di modifica.

### NSW sistema di design

Esplora i token di design NSW, la tipografia Public Sans e le schede native accessibili da tastiera attraverso una guida completa al workshop con un elenco di letture locale e indipendente.


- [Riferimento per l’implementazione](https://aksel.nav.no/komponenter/core/table)
- [Fonte](https://aksel.nav.no/grunnleggende/styling/design-tokens)
- [Fonte](https://aksel.nav.no/komponenter/core/table)
- [Leggi la specifica di supporto](https://aksel.nav.no/grunnleggende/migreringsguider/versjon-8)
- [Leggi la specifica di supporto](https://aksel.nav.no/grunnleggende/styling/design-tokens)
- [Leggi la specifica di supporto](https://aksel.nav.no/grunnleggende/kode/komponent-api)
- [Leggi la specifica di supporto](https://aksel.nav.no/komponenter/core/table)
- [Leggi la specifica di supporto](https://aksel.nav.no/grunnleggende/kode/css-import)
- [Riferimento del codice](https://aksel.nav.no/komponenter/core/table)
- [Riferimento del codice](https://aksel.nav.no/grunnleggende/kode/komponent-api)
- [sistema di design Aksel Componenti ufficiali, primitivi, pattern e indicazioni per l’implementazione.](https://aksel.nav.no/designsystemet)
- [Token di progettazione Riferimento ufficiale dei token.](https://aksel.nav.no/grunnleggende/styling/design-tokens)
- [codice sorgente di Aksel Progetto sorgente ufficiale e cronologia dello sviluppo.](https://github.com/navikt/aksel)