Usa i componenti web nativi e i token di design pubblicati di Alberta per creare una lista di preparazione completa, con opzioni accessibili, avanzamento derivato e feedback di revisione trasparente.
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-font-size-2
.875rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-font-size-3
1rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-font-size-4
1.125rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-font-size-6
1.5rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-font-size-8
2rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-font-size-9
2.5rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-line-height-3
1.5rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-line-height-6
2.5rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-line-height-7
3rem
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-font-weight-regular
400
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
--goa-font-weight-bold
700
Qui è riportato il nome ufficiale della famiglia; l’esempio pubblico usa deliberatamente Arial come fallback anziché ridistribuire i file del font Acumin, soggetti a licenza.
03
Guida completa sistema di design Alberta
Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.
DESIGN-alberta.md
Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.
Sistema di design Alberta Web Components e limiti tra versioni
Inizia dall’implementazione effettivamente in uso
Questo esempio esegue @abgov/web-components 3.0.0. L’importazione del relativo JavaScript registra gli elementi personalizzati e l’importazione di index.css fornisce il livello globale dei token. Il grezzo HTML API usa elementi con prefisso goa; gli esempi React usano wrapper Goab con una superficie di eventi diversa. Non copiare direttamente le proprietà onChange di React sugli elementi personalizzati grezzi.
Distingui la versione del pacchetto da quella del design
La versione di un pacchetto e quella dello stile di un componente non sono lo stesso campo. Per alcuni controlli è documentato un attributo di versione indipendente. In questo esempio si mantengono i valori predefiniti del pacchetto bloccato, senza cambiare di nascosto la versione dello stile mentre si cita un altro insieme di valori dei token. La tabella riporta le esportazioni effettive del tema chiaro usate in questa compilazione.
Sistema di design Alberta Ruoli, ritmo e tipografia
Usa il colore per comunicare lo stato
L’azione primaria e l’accento di avanzamento usano il ruolo interactive-default. La revisione non valida mostra un messaggio di emergenza con un’istruzione utile; una revisione locale completata usa una superficie di supporto colorata per indicare il successo. Il colore di successo descrive lo stato della revisione locale, non una richiesta inviata a un servizio governativo. Le etichette testuali e il conteggio numerico riportano le stesse informazioni senza affidarsi alla tonalità.
Documenta i limiti dei font
La famiglia pubblicata inizia con Acumin e il foglio di stile include dichiarazioni per font ospitati esternamente. L’anteprima usa esplicitamente Arial come fallback e rimuove le richieste di font da remoto; non ridistribuisce Acumin. Il riferimento dei token conserva il nome effettivo della famiglia, così che un servizio autorizzato possa caricare i font approvati del brand. Ricontrolla gli a capo quando passi dal fallback a un font con licenza.
Sistema di design Alberta Etichette e descrizioni delle caselle di controllo
Usa scelte indipendenti per attività indipendenti
Quattro controlli goa-checkbox nativi rappresentano attività di preparazione che possono essere esaminate in qualsiasi ordine. Ognuno ha un nome univoco, un testo visibile e una descrizione che ne spiega lo scopo. I controlli radio implicherebbero una scelta unica e non rappresenterebbero correttamente l’attività. Un servizio reale deve sostituire i contenuti di preparazione fittizi con istruzioni verificate.
Assegna a ogni casella di controllo un nome univoco e stabile.
Mantieni concisa l’etichetta visibile e specifica la descrizione.
Usa caselle di controllo indipendenti solo quando sono significative più scelte.
Leggi il payload dell’evento personalizzato
Il web component grezzo emette _change con name, checked e value in event.detail. L’applicazione usa il valore booleano di checked per aggiornare un Set di indici selezionati. Non deduce lo stato dal testo dell’etichetta né richiede di fare clic su un piccolo input interno. Facendo clic sull’etichetta visibile o usando la tastiera si ottiene quindi la stessa transizione di stato.
Sistema di design Alberta Avanzamento e stato della revisione
Ricava l’avanzamento dalle selezioni
Il conteggio e l’elemento HTML progress nativo derivano dallo stesso Set. Selezionando due elementi si ottiene due su quattro; azzerando i controlli, entrambi gli indicatori tornano a zero. L’elemento progress ha un nome accessibile; il testo di stato adiacente fornisce un conteggio esplicito. Non vengono simulate operazioni di caricamento, richieste di rete o timer di completamento.
Annulla i riepiloghi precedenti dopo una modifica
Sistema di design Alberta Composizione reattiva della lista di controllo
Mantieni leggibili attività e contesto
Nel layout desktop la lista di controllo è affiancata da un pannello di supporto con l’avanzamento. Su schermi stretti, il pannello segue i controlli nell’ordine del documento. Le etichette delle attività restano di dimensioni leggibili e le descrizioni vanno a capo in modo naturale. La linea blu del pannello laterale è un riferimento visivo discreto: non introduce un’altra azione concorrente.
Mantieni intatte le aree interattive
La libreria di componenti fornisce lo stile di interazione per caselle di controllo e pulsanti. I controlli di spaziatura dell’applicazione CSS definiscono la griglia circostante senza sostituire le aree native attivabili. Le due azioni possono andare a capo sugli schermi piccoli. Rivedi è l’azione primaria; Azzera le selezioni ha uno stile secondario e non si presenta come il passaggio successivo di un’applicazione reale.
Sistema di design Alberta Implementazione completa della lista di controllo
Esegui il codice sorgente completo
Crea un progetto Vite vanilla, installa il pacchetto web-components con versione fissata e salva l’entry fornita e CSS. Mantieni l’elemento root di mount. JavaScript include tutte e quattro le attività definite, i binding degli eventi nativi, il conteggio derivato e le transizioni di revisione e ripristino. Non servono account, endpoint privati o dataset esterni.
Installa @abgov/web-components 3.0.0 e importa JavaScript e index.css.
Salva l’entry completa e alberta.css con l’elemento root di mount.
Seleziona più attività e verifica l’avanzamento derivato.
Rivedi, modifica una scelta, quindi deseleziona tutto.
Separa gli eventi dei componenti dalla logica della checklist
Usa event.detail.checked dall’evento _change grezzo come fonte attendibile per la selezione. Le proprietà del wrapper React e gli eventi grezzi di goa-checkbox sono interfacce diverse; copiare un handler da una all’altra senza adattarne il payload può disallineare l’avanzamento visualizzato dalla casella di controllo.
Il requisito minimo di un elemento nella checklist è una regola dell’applicazione, non una funzionalità integrata della casella di controllo. Deriva il conteggio, il valore di avanzamento e il testo della revisione da un unico Set di selezioni. Quando si seleziona Cancella selezioni, ripristina la proprietà checked di ogni elemento personalizzato oltre al Set. Modificare una scelta deve rimuovere subito la revisione precedente, così che non descriva una selezione ormai superata. Un vero servizio di preparazione potrebbe consentire checklist incomplete: stabilisci questa regola prima di usare l’avanzamento come requisito per procedere.
Esempi di componenti del sistema di design sistema di design Alberta
main.js — checklist nativa completa
Registrazione, contenuto delle attività definite, gestione delle selezioni e transizioni di revisione e ripristino.
javascript
import '@abgov/web-components';
import '@abgov/web-components/index.css';
import './alberta.css';
document.getElementById('root').innerHTML=`<main><p class="eyebrow">ALBERTA DESIGN SYSTEM / COMPONENT STUDY</p><h1>Prepare a submission</h1><p class="lead">Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.</p><div class="workspace"><section aria-labelledby="tasks-heading"><h2 id="tasks-heading">Your preparation checklist</h2><p>Check each item when you have reviewed it.</p><div id="tasks"></div><div class="actions"><goa-button id="review">Review checklist</goa-button><goa-button id="reset" type="tertiary">Clear selections</goa-button></div><p id="error" role="alert" hidden>Select at least one item before reviewing.</p><section id="result" hidden tabindex="-1" aria-labelledby="result-heading"><h3 id="result-heading">Local review</h3><p id="result-text"></p></section></section><aside><p class="eyebrow">YOUR PROGRESS</p><strong id="total">0 of 4</strong><progress id="progress" value="0" max="4" aria-label="Reviewed preparation items"></progress><p id="status" role="status">No items reviewed yet.</p><h3>What happens next</h3><p>Your selections stay only in this page. Review summarizes your progress; it does not submit an application.</p><ul><li>Use the real service’s current instructions.</li><li>Do not enter personal information in a public example.</li><li>Recheck the summary after changing a selection.</li></ul></aside></div></main>`;
const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()});
L’anteprima locale omette le importazioni di font esterni non utilizzate. Il foglio di stile completo del pacchetto può includere dichiarazioni di font esterni; l’override mantiene questo esempio su Arial.
04
Configurazione dell’agent sistema di design Alberta
Punto di partenza per l’implementazione
I controlli nativi con versione fissata sono stati testati nel browser in locale, senza un backend per l’invio.
sh
npm create vite@latest alberta-checklist -- --template vanilla
cd alberta-checklist
npm install
npm install @abgov/[email protected]
# Replace src/main.js and add src/alberta.css. Keep <div id="root"></div>.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Crea la checklist di preparazione dell’Alberta con web-components 3.0.0, veri ruoli semantici CSS e limiti espliciti sulle licenze dei font. Usa descrizioni native delle caselle di controllo, deriva l’avanzamento dalle selezioni, impedisci la revisione a selezione vuota, rimuovi i riepiloghi non più validi dopo le modifiche e ripristina i controlli effettivi. Mantieni tutti i risultati in locale e indica chiaramente che le attività definite sono illustrative.
05
Fonti e ambito di sistema di design Alberta
Uno studio sui componenti OpenDesign che utilizza i web components dell’Alberta 3.0.0 e un fallback esplicito per i font su Arial. Le attività definite sono fittizie e non stabiliscono i requisiti di idoneità o di invio del governo.
