# Sistema di design Alberta ## Sistema di design Alberta Anteprima dell’interfaccia Seleziona attività indipendenti, controlla i progressi, esamina i risultati localmente e azzera i controlli nativi. ## Sistema di design Alberta Riferimento di design Esportazioni effettive di CSS per il tema chiaro in @abgov/web-components 3.0.0; Acumin, soggetto a licenza, non è incluso. ### Ruoli di interazione e stato del tema chiaro | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --goa-color-interactive-default | #006dcc | Valori estratti dal foglio di stile 3.0.0 bloccato, prima delle sovrascritture del tema scuro. Usa i ruoli semantici per lo stato previsto. | | --goa-color-interactive-hover | #045092 | Valori estratti dal foglio di stile 3.0.0 bloccato, prima delle sovrascritture del tema scuro. Usa i ruoli semantici per lo stato previsto. | | --goa-color-interactive-focus | #006dcc | Valori estratti dal foglio di stile 3.0.0 bloccato, prima delle sovrascritture del tema scuro. Usa i ruoli semantici per lo stato previsto. | | --goa-color-text-default | var(--goa-color-greyscale-black) | Valori estratti dal foglio di stile 3.0.0 bloccato, prima delle sovrascritture del tema scuro. Usa i ruoli semantici per lo stato previsto. | | --goa-color-greyscale-100 | #f2f0f0 | Valori estratti dal foglio di stile 3.0.0 bloccato, prima delle sovrascritture del tema scuro. Usa i ruoli semantici per lo stato previsto. | | --goa-color-emergency-default | #da291c | Valori estratti dal foglio di stile 3.0.0 bloccato, prima delle sovrascritture del tema scuro. Usa i ruoli semantici per lo stato previsto. | | --goa-color-success-default | #006f4c | Valori estratti dal foglio di stile 3.0.0 bloccato, prima delle sovrascritture del tema scuro. Usa i ruoli semantici per lo stato previsto. | | --goa-color-success-light | #d8f7e6 | Valori estratti dal foglio di stile 3.0.0 bloccato, prima delle sovrascritture del tema scuro. Usa i ruoli semantici per lo stato previsto. | ### Scala di spaziatura e angoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --goa-space-3xs | .125rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-space-2xs | .25rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-space-xs | .5rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-space-s | .75rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-space-m | 1rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-space-l | 1.5rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-space-xl | 2rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-space-2xl | 3rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-space-3xl | 4rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-border-radius-xs | .25rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-border-radius-s | .375rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-border-radius-m | .5rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | | --goa-border-radius-l | .625rem | Primitiva di spaziatura o raggio pubblicata. Il punto di interruzione a due colonne dell’applicazione è una scelta di layout definita appositamente. | ### Primitive tipografiche | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --goa-font-family-sans | acumin-variable, helvetica-neue, arial, sans-serif | 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. | ## Guida completa sistema di design Alberta 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 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 La revisione crea un riepilogo testuale locale solo se è selezionato almeno un elemento. Se non è selezionato nulla, mostra un messaggio e porta il focus sulla prima casella di controllo. Ogni modifica successiva alle caselle nasconde la revisione precedente, evitando che sembri riferita alle nuove scelte. Anche l’operazione di azzeramento aggiorna i controlli nativi effettivi, non solo il conteggio visivo. ## 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. 1. Installa @abgov/web-components 3.0.0 e importa JavaScript e index.css. 2. Salva l’entry completa e alberta.css con l’elemento root di mount. 3. Seleziona più attività e verifica l’avanzamento derivato. 4. 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. ``` import '@abgov/web-components'; import '@abgov/web-components/index.css'; import './alberta.css'; document.getElementById('root').innerHTML=`

ALBERTA DESIGN SYSTEM / COMPONENT STUDY

Prepare a submission

Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.

Your preparation checklist

Check each item when you have reviewed it.

Review checklistClear selections
`; 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()}); ``` Riferimento del codice - Gli elementi personalizzati grezzi usano gli eventi _change e _click; non sostituirli con i callback del wrapper React. ### alberta.css — layout delle attività e fallback esplicito per i font Composizione originale responsive attorno ai controlli nativi. ``` main{padding:32px;max-width:1200px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:700}h1{margin:16px 0 24px}.lead{max-width:65ch}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:40px}h2{margin-top:0}goa-checkbox{display:block;margin-bottom:24px}.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}aside{padding:24px;background:var(--goa-color-greyscale-100);border-top:4px solid var(--goa-color-interactive-default);align-self:start}aside strong{display:block;font:var(--goa-typography-heading-l)}progress{display:block;width:100%;height:12px;margin:24px 0;accent-color:var(--goa-color-interactive-default)}aside li{margin:12px 0}#error{margin-top:24px;color:var(--goa-color-emergency-default)}#result{margin-top:24px;padding:24px;border-left:4px solid var(--goa-color-success-default);background:var(--goa-color-success-light)}#result h3{margin-top:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr;gap:32px}h1{font-size:32px;line-height:1.2}} /* Public specimen font fallback; load approved Acumin only where licensed. */ :root{--goa-font-family-sans:Arial,sans-serif;--goa-font-family-mono:monospace;} ``` Riferimento del codice - 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. ## 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. ``` npm create vite@latest alberta-checklist -- --template vanilla cd alberta-checklist npm install npm install @abgov/web-components@3.0.0 # Replace src/main.js and add src/alberta.css. Keep
. npm run dev ``` ### Un prompt per il tuo progetto ``` 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. ``` ## 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. - Configurazione per sviluppatori Importazioni dei pacchetti e implementazioni supportate. - Checkbox API Attributi ed eventi degli elementi personalizzati grezzi. - Button API Tipi di azione e comportamento dei componenti. - Fonte pubblica Implementazione dei componenti con versione e importazioni CSS. ## Risorse correlate sistema di design Alberta ### Amsterdam Usa il contratto reale e open source di Switch di Amsterdam, con un tema neutro completo, etichette accessibili e preferenze di lettura applicate immediatamente. ### B.C. sistema di design Crea un modulo per le preferenze dei promemoria nello stile di B.C., con token semantici reali, controlli React Aria nativi, campi di contatto condizionali e comportamento completo di convalida. ### Canada.ca sistema di design Esplora la tipografia, i token semantici e i componenti web nativi di GC Design System con una guida completa e consultabile per la preparazione, dotata di sezioni a scomparsa e gestione degli stati vuoti. - [Riferimento per l’implementazione](https://design.alberta.ca/components/checkbox/) - [Fonte](https://github.com/GovAlta/ui-components) - [Riferimento del codice](https://design.alberta.ca/components/checkbox/) - [Riferimento del codice](https://design.alberta.ca/get-started/developers/setup/) - [Configurazione per sviluppatori Importazioni dei pacchetti e implementazioni supportate.](https://design.alberta.ca/get-started/developers/setup/) - [Checkbox API Attributi ed eventi degli elementi personalizzati grezzi.](https://design.alberta.ca/components/checkbox/) - [Button API Tipi di azione e comportamento dei componenti.](https://design.alberta.ca/components/button/) - [Fonte pubblica Implementazione dei componenti con versione e importazioni CSS.](https://github.com/GovAlta/ui-components)