# Sistema di design Duet

## Anteprima dell'interfaccia di sistema di design Duet

Imposta le date di partenza e ritorno, verifica un intervallo non valido e calcola il numero inclusivo di giorni.

## Riferimento di progettazione di sistema di design Duet

Istantanea della documentazione pubblica di Duet: componenti del sistema principale, token predefiniti di LocalTapiola e integrazione documentata 10.7.0/CDN. Non è il pacchetto distinto @duetds/date-picker 1.x. Alcuni token del raggio sono ancora contrassegnati In Review.

### Ruoli predefiniti e Turva

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --color-primary | #0077b3 | Azione LocalTapiola. |
| --color-primary-dark | #004b81 | Stato interattivo più scuro. |
| --color-primary-darker | #00619b | Ruolo dei link. |
| --color-primary-light | #c6e1ee | Tinta dell'intervallo. |
| --color-secondary | #082a4d | Testo del corpo. |
| --color-primary-turva | #e61740 | Azione Turva, tema distinto. |
| --color-danger | #d61c52 | Convalida. |
| --radius-default | 4px | Campi e contenitori. |
| --radius-pill | 20rem | Pulsanti. |
| --radius-medium | 8px; In Review | Non dichiararlo pronto per la produzione. |
### Token di spaziatura

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --space-xxx-small | 2px | Ristretto. |
| --space-xx-small | 4px | Ristretto. |
| --space-x-small | 8px | Compatto. |
| --space-small | 12px | Piccolo. |
| --space-medium | 16px | Predefinito. |
| --space-large | 20px | Tra i componenti. |
| --space-x-large | 28px | Spazio più ampio. |
| --space-xx-large | 36px | Spaziatura orizzontale interna del pulsante. |
| --space-xxx-large | 48px | Sezione. |
| --size-layout-max-width | 1110px | Larghezza massima documentata del layout. |
### Scala tipografica

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| $font-size-medium | 16px / 1rem | Corpo del testo e H5. |
| $font-size-large | 20px / 1.25rem | H4. |
| $font-size-x-large | 24px / 1.5rem | H3. |
| $font-size-xx-large | 36px / 2.25rem | H2. |
| $font-size-xxx-large | 48px / 3rem | H1. |
| $font-size-xxxx-large | 72px / 4.5rem | H0. |
### Contratto del Date Picker

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| value / min / max | YYYY-MM-DD strings | Il valore memorizzato è ISO, non il testo visualizzato. |
| duetChange | detail.value and detail.valueAsDate | Evento della data selezionata. |
| validity | badInput / valueMissing / rangeOverflow / rangeUnderflow / customError | Verifica prima di confermare. |
| setFocus() | Promise<void> | Focus sul campo; non focus(). dell'elemento contenitore. |
| show() / hide() | Promise<void> | Calendario e gestione del focus. |
| language | Deprecated | Usa html lang. |
| disallow-weekends | Boolean | Esclusione a livello di componente. |
### Proprietà delle azioni

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| variation="primary" | Main action | Una sola azione principale per visualizzazione. |
| submit | Boolean, default false | Attivazione esplicita dell'invio del modulo. |
| url | Anchor destination | Semantica di navigazione. |
| expand | 100% container | Azione estesa. |
| theme | default / turva / inherited empty | Selezione del marchio. |
| margin="none" | Remove automatic margin | I controlli dell'applicazione determinano la spaziatura. |
## Guida completa a sistema di design Duet

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 design Duet Il sistema principale Duet e il selettore open source sono distinti

### Mantieni il contratto del pacchetto insieme all'esempio

> Duet offre componenti e basi grafiche con tema per LocalTapiola e Turva. Il progetto @duetds/date-picker, pubblicato separatamente, è una distribuzione open source più circoscritta. Il fatto che condividano il nome di un tag non rende intercambiabili le proprietà, la configurazione della localizzazione o le variabili CSS con quelle dell'attuale sistema di progettazione principale.

Il codice di integrazione di questa pagina è destinato al sistema principale. L'anteprima offline usa campi data nativi e uno stile originale basato sui token Duet collegati. Mostra le regole degli intervalli senza dichiarare di eseguire il popup del calendario Duet o il suo modello di navigazione da tastiera.

Leggi la specifica di supporto

## Sistema di design Duet Il blu del marchio e il rosso di stato hanno funzioni diverse

### Usa un tema invece di sostituire un singolo colore d'accento

Il tema predefinito di LocalTapiola abbina un'azione blu a un testo del corpo blu scuro. Turva ha una propria azione rossa e un ruolo di testo secondario. Cambiare solo il colore dell'azione non tiene conto delle altre relazioni del tema. La tabella attuale contrassegna inoltre come deprecate le vecchie tinte di Turva; copiare tutte le voci storiche della palette manterrebbe indicazioni obsolete.

Il nostro esempio originale di pianificazione delle date di viaggio usa il blu per l'azione successiva e il rosso solo quando occorre correggere il periodo selezionato. È una dimostrazione di pianificazione, non un consiglio assicurativo, un preventivo o un acquisto.

Leggi la specifica di supporto

## Sistema di design Duet Il testo del corpo da 16px ancora la gerarchia

### La scala non richiede sempre un titolo enorme

La tabella di Duet passa per 16, 20, 24, 36, 48 e 72px ai livelli più grandi. Un pannello di pianificazione incorporato usa il livello da 24px per dare risalto all'azione e alle etichette delle date. Il livello da 72px, adatto alle dimensioni di una pagina promozionale, non è predefinito per un modulo compatto.

I pacchetti di font di LocalTapiola e Turva sono asset distinti. L'interpretazione offline usa un font di sistema alternativo e non include i file dei font del marchio. Un'applicazione autorizzata dovrebbe caricare la famiglia scelta tramite il percorso dei font documentato e poi usare i relativi token di peso.

Leggi la specifica di supporto

## Sistema di design Duet Usa gli incrementi effettivi da 20px e 28px

### Duet non usa una scala generica di otto pixel

Oltre alle potenze di due più note, la scala include 12, 20, 28 e 36px. Questi intervalli intermedi sono importanti per riprodurre il ritmo dei moduli del sistema. Nel layout largo, lascia 20px tra i due campi e, quando li disponi in colonna, mantieni ogni etichetta insieme al relativo campo. Il breakpoint dell'esempio dipende dall'applicazione.

Gli angoli dei controlli predefiniti hanno un raggio di 4px, mentre i pulsanti usano un raggio a capsula. Alcuni valori più recenti del raggio dei contenitori sono esplicitamente contrassegnati In Review nel riferimento dei token; questa guida ne mantiene lo stato invece di presentare come approvato ogni token elencato.

Leggi la specifica di supporto

## Sistema di design Duet Memorizza valori ISO e descrivi il formato visualizzato

### Non analizzare come dati le stringhe localizzate visualizzate

Il valore e i limiti del componente usano il formato YYYY-MM-DD. L'evento della data selezionata include sia una stringa sia un oggetto Date. Usa la stringa per i confronti e l'archiviazione; la visualizzazione localizzata nel campo riguarda la presentazione. La lingua del documento è il punto di accesso attuale per la localizzazione, mentre la vecchia proprietà language è deprecata.

L'esempio consente date solo durante il mese di giugno 2027. Questo intervallo fisso rende i test deterministici ed è indicato chiaramente come vincolo dell'esempio. In un modulo di produzione, l'intervallo consentito dovrebbe derivare dalla regola del prodotto, che andrebbe spiegata accanto al campo.

Leggi la specifica di supporto

## Sistema di design Duet Una data valida non implica necessariamente un intervallo valido

### Verifica la relazione dopo aver convalidato ciascun campo

L'oggetto validity del componente descrive gli errori dei singoli campi. Una data di ritorno precedente alla partenza può comunque essere una data di calendario valida, quindi l'applicazione deve verificare la coppia separatamente. L'esempio nativo assegna un errore chiaro e usa setFocus(), il metodo documentato che porta il focus sul campo interno.

Il conteggio è inclusivo: se la partenza e il ritorno avvengono lo stesso giorno, il risultato è un giorno di calendario. Convertire le date ISO alla mezzanotte UTC evita che il passaggio all'ora legale trasformi un intervallo di calendario in una durata frazionaria. Questo calcolo è una logica originale dell'applicazione, non una regola di prezzo Duet.

1. Rifiuta gli estremi mancanti, malformati o fuori dai limiti.

2. Rifiuta una data di ritorno precedente a quella di partenza.

3. Sposta il focus sul campo da correggere.

4. Calcola l'intervallo inclusivo solo dopo aver superato entrambi i controlli.

Leggi la specifica di supporto

## Sistema di design Duet L'azione principale non implica l'invio

### Duet usa una proprietà esplicita per l'invio

Il pulsante del sistema principale attiva l’invio del modulo con submit; il valore predefinito è false. La composizione fornita usa un’azione click che prepara un risultato locale, quindi non ha bisogno di questa proprietà. La destinazione va specificata in url, che imposta la semantica di un’ancora.

L’anteprima cancella il messaggio preparato ogni volta che cambia uno dei due campi. Altrimenti il messaggio potrebbe sembrare confermare valori che il visitatore ha già sostituito. Non viene mostrato alcuno spinner perché non ci sono operazioni asincrone.

- Usa una sola azione primaria di preparazione.

- Specifica che il risultato è locale.

- Non riutilizzare un messaggio di successo per far intendere che sia stata creata una polizza.

Leggi la specifica di supporto

## Sistema di design Duet Fissa gli asset del sistema principale come insieme compatibile

### L’esempio è uno snapshot documentato, non una promessa di usare la versione più recente

La pagina di utilizzo esaminata fornisce i componenti 10.7.0 con CSS 5.1.4; gli snapshot dell’indice di ricerca menzionano già versioni successive. L’esempio mantiene intenzionalmente insieme la coppia esaminata direttamente. Per l’adozione in produzione, scegli una release e verifica la corrispondenza di CSS, dei font e del comportamento dei componenti.

I campi data sono elementi personalizzati. Attendi che vengano definiti prima di chiamarne i metodi, associa gli ascoltatori a duetChange e leggi il payload documentato invece di presupporre un evento change nativo. Non combinare nella stessa pagina il modulo CDN del sistema principale con il selettore autonomo: entrambi definiscono lo stesso tag.

Leggi la specifica di supporto

## Sistema di design Duet Esempi di componenti del sistema di progettazione

### Esempio interattivo completo e autonomo

Salva l’intero documento come index.html e aprilo in un browser. Interpretazione di HTML offline con campi data nativi e valori verificati del tema predefinito Duet; non è il runtime del calendario Duet.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Duet travel period interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f7fa;color:#082a4d;font:16px/1.5 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:36px 28px}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}h1{font-size:36px;line-height:1.2;font-weight:600;margin:0 0 20px}p{margin:0 0 20px}.hero{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:center;margin-bottom:28px}.art{height:170px;position:relative;overflow:hidden;border-radius:50%;background:#c6e1ee}.sun{position:absolute;top:25px;right:60px;width:36px;height:36px;border-radius:50%;background:white}.hill{position:absolute;background:#0077b3;width:210px;height:170px;bottom:-95px;left:-10px;transform:rotate(25deg);border-radius:24px}.hill.two{left:135px;background:#00619b;bottom:-110px;transform:rotate(-25deg)}.road{position:absolute;width:150px;height:200px;border:12px solid white;border-radius:50%;top:65px;left:95px;transform:rotate(25deg)}.card{background:white;border-radius:4px;padding:28px;box-shadow:0 2px 8px #082a4d0d;display:grid;grid-template-columns:1fr 230px;gap:28px}h2{font-size:24px;line-height:1.3;margin:0 0 20px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:block;font-weight:600;margin-bottom:8px}input{width:100%;max-width:100%;min-width:0;border:1px solid #909599;border-radius:4px;font:inherit;color:inherit;padding:12px;background:white}input[aria-invalid=true]{border-color:#d61c52}button{background:#0077b3;color:white;border:0;border-radius:20rem;padding:12px 36px;font:600 16px/1.5 system-ui;cursor:pointer}button:hover{background:#004b81}button:focus-visible,input:focus-visible{outline:3px solid #082a4d;outline-offset:3px}.error{font-size:14px;color:#d61c52;min-height:24px;margin:8px 0 20px}.calendar{background:#f0f7fa;border-radius:4px;padding:20px}.calendar strong{display:block;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px;text-align:center}.grid span{padding:3px 0}.grid .in-range{background:#c6e1ee}.grid .endpoint{background:#0077b3;color:white;border-radius:50%}.caption{font-size:12px;margin:12px 0 0}.result{margin-top:20px;background:#e4f1f7;padding:20px;border-radius:4px}.result:empty{display:none}.boundary{font-size:12px;margin-top:28px}.hint{font-size:14px}@media(max-width:650px){main{padding:24px 16px}.hero{grid-template-columns:1fr}.art{display:none}h1{font-size:28px}.card{grid-template-columns:1fr;padding:20px}.fields{grid-template-columns:1fr;gap:16px}.calendar{max-width:300px;width:100%}button{width:100%;padding:12px 20px}}
</style><main><div class="hero"><div><div class="eyebrow">Travel period planner</div><h1>Make time for a change of scenery.</h1><p>Choose a departure and return date to explore an inclusive calendar-day count.</p></div><div class="art" aria-hidden="true"><div class="sun"></div><div class="hill"></div><div class="hill two"></div><div class="road"></div></div></div><div class="card"><section><h2>When will you travel?</h2><p class="hint" id="hint">Use dates from 1–30 June 2027. This fixed month is for demonstration.</p><form novalidate><div class="fields"><div><label for="start">Departure</label><input id="start" type="date" min="2027-06-01" max="2027-06-30" value="2027-06-10" required aria-describedby="hint error"></div><div><label for="end">Return</label><input id="end" type="date" min="2027-06-01" max="2027-06-30" value="2027-06-17" required aria-describedby="hint error"></div></div><div class="error" id="error" role="alert"></div><button type="submit">Prepare date range</button></form></section><aside class="calendar"><strong>June 2027</strong><div class="grid" id="calendar" aria-hidden="true"></div><p class="caption" id="range-caption">10–17 June selected</p></aside></div><div class="result" id="result" role="status"></div><p class="boundary">Independent HTML interpretation of Duet tokens with native date fields. The calendar image is a non-interactive range overview. No insurance quote, booking or policy is created.</p></main><script>const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result'),error=document.querySelector('#error');function valid(){return start.validity.valid&&end.validity.valid&&start.value&&end.value&&end.value>=start.value}function draw(){let days=['M','T','W','T','F','S','S'].map(d=>'<span>'+d+'</span>').join('')+'<span></span>';for(let i=1;i<=30;i++){let iso='2027-06-'+String(i).padStart(2,'0'),range=valid()&&iso>=start.value&&iso<=end.value,edge=range&&(iso===start.value||iso===end.value);days+='<span class="'+(edge?'endpoint':range?'in-range':'')+'">'+i+'</span>'}document.querySelector('#calendar').innerHTML=days;document.querySelector('#range-caption').textContent=valid()?start.value+' to '+end.value:'Choose a valid range to highlight it.'}function changed(){result.textContent='';error.textContent='';start.removeAttribute('aria-invalid');end.removeAttribute('aria-invalid');draw()}[start,end].forEach(el=>el.oninput=changed);document.querySelector('form').onsubmit=e=>{e.preventDefault();let bad;if(!start.value||!start.validity.valid){error.textContent='Choose a departure date in June 2027.';bad=start}else if(!end.value||!end.validity.valid){error.textContent='Choose a return date in June 2027.';bad=end}else if(end.value<start.value){error.textContent='Return must be on or after departure.';bad=end}if(bad){bad.setAttribute('aria-invalid','true');bad.focus();result.textContent='';return}const days=(Date.parse(end.value+'T00:00:00Z')-Date.parse(start.value+'T00:00:00Z'))/86400000+1;result.textContent=days+' calendar '+(days===1?'day':'days')+', including departure and return. Local draft: '+start.value+' to '+end.value+'. No policy created.'};draw();</script></html>
```

Riferimento del codice

- Questo documento usa controlli data nativi del browser. L’esempio Duet separato usa il selettore del sistema principale; non va confuso con il pacchetto autonomo open source del selettore data.

### Convalida una coppia di selettori data del sistema principale

Due campi con etichette, date di giugno con limiti, estremi in ordine, focus sul selettore non valido e conteggio inclusivo dei giorni.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Date range draft</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.4/lib/duet.min.css">
<script type="module" src="https://cdn.duetds.com/api/components/10.7.0/lib/duet/duet.esm.js"></script>
<style>main{max-width:680px;margin:auto;padding:28px}.range{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:576px){.range{grid-template-columns:1fr}}</style>
<main><h1>Choose a travel period</h1><p>Demonstration only. No insurance is quoted or purchased.</p><div class="range">
<duet-date-picker id="start" label="Departure" required expand value="2027-06-10" min="2027-06-01" max="2027-06-30"></duet-date-picker>
<duet-date-picker id="end" label="Return" required expand value="2027-06-17" min="2027-06-01" max="2027-06-30"></duet-date-picker></div>
<duet-button id="prepare" variation="primary">Prepare date range</duet-button>
<p id="result" role="status"></p></main><script type="module">
await customElements.whenDefined('duet-date-picker');
const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result');
function error(picker){const v=picker.validity;if(!picker.value)return 'Choose a date.';if(v&&!v.valid)return 'Choose a valid date in June 2027.';return '';}
function validate(){start.error=error(start);end.error=error(end);if(!start.error&&!end.error&&end.value<start.value)end.error='Return must be on or after departure.';return !start.error&&!end.error;}
[start,end].forEach(p=>p.addEventListener('duetChange',()=>{result.textContent='';validate()}));
document.querySelector('#prepare').addEventListener('click',async()=>{if(!validate()){await(start.error?start:end).setFocus();return;}const a=Date.parse(start.value+'T00:00:00Z'),b=Date.parse(end.value+'T00:00:00Z');result.textContent=`Local range: ${start.value} to ${end.value}, ${(b-a)/86400000+1} calendar days inclusive. No policy created.`;});
</script></html>
```

Riferimento del codice

- Usa @duetds/components tramite il CDN del sistema principale, non @duetds/date-picker 1.x.

- Gli intervalli che comprendono un solo giorno contengono un giorno di calendario, estremi inclusi.

- Il calcolo in UTC evita gli scarti dovuti all’ora legale.

## Sistema di design Duet Configurazione dell’agente AI

### Punto di partenza per l’implementazione

Composizione completa tramite CDN del sistema principale, con le versioni indicate esplicitamente nella pagina di integrazione esaminata. Gli snapshot pubblici della ricerca mostrano anche versioni più recenti; fissa una release compatibile invece di presumere che questa sia la più recente. I font non sono ridistribuiti qui.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Date range draft</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.4/lib/duet.min.css">
<script type="module" src="https://cdn.duetds.com/api/components/10.7.0/lib/duet/duet.esm.js"></script>
<style>main{max-width:680px;margin:auto;padding:28px}.range{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:576px){.range{grid-template-columns:1fr}}</style>
<main><h1>Choose a travel period</h1><p>Demonstration only. No insurance is quoted or purchased.</p><div class="range">
<duet-date-picker id="start" label="Departure" required expand value="2027-06-10" min="2027-06-01" max="2027-06-30"></duet-date-picker>
<duet-date-picker id="end" label="Return" required expand value="2027-06-17" min="2027-06-01" max="2027-06-30"></duet-date-picker></div>
<duet-button id="prepare" variation="primary">Prepare date range</duet-button>
<p id="result" role="status"></p></main><script type="module">
await customElements.whenDefined('duet-date-picker');
const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result');
function error(picker){const v=picker.validity;if(!picker.value)return 'Choose a date.';if(v&&!v.valid)return 'Choose a valid date in June 2027.';return '';}
function validate(){start.error=error(start);end.error=error(end);if(!start.error&&!end.error&&end.value<start.value)end.error='Return must be on or after departure.';return !start.error&&!end.error;}
[start,end].forEach(p=>p.addEventListener('duetChange',()=>{result.textContent='';validate()}));
document.querySelector('#prepare').addEventListener('click',async()=>{if(!validate()){await(start.error?start:end).setFocus();return;}const a=Date.parse(start.value+'T00:00:00Z'),b=Date.parse(end.value+'T00:00:00Z');result.textContent=`Local range: ${start.value} to ${end.value}, ${(b-a)/86400000+1} calendar days inclusive. No policy created.`;});
</script></html>
```

### Un prompt per il tuo progetto

```
Crea un intervallo di date Duet del sistema principale usando due selettori data con etichette, valori ISO e controlli di validità. Convalida separatamente l’ordine degli estremi, chiama setFocus in caso di errori e usa un’azione primaria esplicita per la preparazione locale. Non includere nella stessa pagina il pacchetto del selettore autonomo.
```

## Sistema di design Duet Fonti e ambito

Riferimento indipendente a OpenDesign. Pianificatore originale; non vengono create polizze, prenotazioni né preventivi. Duet del sistema principale e il suo selettore data open source separato hanno contratti diversi.

- Token di progettazione Colori del tema, spaziatura e stato dei token.

- Tipografia Scala tipografica e font del brand separati.

- Selettore data Valori ISO, convalida e metodi.

- Button Attivazione dell’invio e variazione.

- Utilizzo dei componenti CDN e pacchetti del sistema principale.

- Selettore autonomo Distribuzione open source separata; non è il codice di destinazione in questo caso.

## Sistema di design Duet Risorse correlate

### Elastic UI

Crea un esploratore di log Elastic UI con le scale Borealis verificate, controlli nativi per tabelle e ricerca, filtri per gravità, eventi salvati in locale e codice sorgente React completo.

### Emplifi Soul

Esamina il contratto delle tabelle dati di Soul insieme alla spaziatura di sei pixel, ai ruoli cromatici su più livelli e alla tipografia Inter compatta. Confronta la selezione multipla, la notazione dei dati mancanti e le righe di riepilogo, quindi consulta i punti di accesso verificati del pacchetto privato React.

### Esri Calcite

Una guida pratica a Calcite per strumenti spaziali progettati per un uso mirato: superfici semantiche e azioni blu, pannelli di ispezione compatti, API reali per gli input e un esempio completo, eseguibile in locale, per la revisione di un sito.


- [Riferimento per l’implementazione](https://www.duetds.com/components/date-picker/)
- [Fonte](https://www.duetds.com/tokens/)
- [Fonte](https://www.duetds.com/typography/)
- [Fonte](https://www.duetds.com/components/date-picker/)
- [Fonte](https://www.duetds.com/components/button/)
- [Leggi la specifica di supporto](https://www.duetds.com/using-components/)
- [Leggi la specifica di supporto](https://www.duetds.com/tokens/)
- [Leggi la specifica di supporto](https://www.duetds.com/typography/)
- [Leggi la specifica di supporto](https://www.duetds.com/components/date-picker/)
- [Leggi la specifica di supporto](https://www.duetds.com/components/button/)
- [Riferimento del codice](https://www.duetds.com/components/date-picker/)
- [Token di progettazione Colori del tema, spaziatura e stato dei token.](https://www.duetds.com/tokens/)
- [Tipografia Scala tipografica e font del brand separati.](https://www.duetds.com/typography/)
- [Selettore data Valori ISO, convalida e metodi.](https://www.duetds.com/components/date-picker/)
- [Button Attivazione dell’invio e variazione.](https://www.duetds.com/components/button/)
- [Utilizzo dei componenti CDN e pacchetti del sistema principale.](https://www.duetds.com/using-components/)
- [Selettore autonomo Distribuzione open source separata; non è il codice di destinazione in questo caso.](https://github.com/duetds/date-picker)