Use Alberta’s native web components and published design tokens to build a complete preparation checklist with accessible choices, derived progress and honest review feedback.
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-font-size-2
.875rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-font-size-3
1rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-font-size-4
1.125rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-font-size-6
1.5rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-font-size-8
2rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-font-size-9
2.5rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-line-height-3
1.5rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-line-height-6
2.5rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-line-height-7
3rem
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-font-weight-regular
400
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
--goa-font-weight-bold
700
The official family export is recorded here; the public specimen deliberately uses Arial fallback rather than redistributing licensed Acumin font files.
03
Alberta Design System Complete Guide
A practical guide to choosing, applying, and reviewing this system for a real interface.
DESIGN-alberta.md
Complete guidance, an implementation starting point, and source links.
Alberta Design System Web Components and Version Boundaries
Start with the implementation actually running
This specimen runs @abgov/web-components 3.0.0. Importing its JavaScript registers the custom elements and importing index.css supplies the global token layer. The raw HTML API uses goa-prefixed elements; React examples use Goab wrappers with a different event surface. Do not copy React onChange props directly onto the raw custom elements.
Distinguish package and design versions
A package version and a component styling version are not the same field. Some controls document an independent version attribute. This example keeps the pinned package’s defaults instead of silently switching a styling version while citing another set of token values. The table records the actual light-theme exports used by this build.
Alberta Design System Roles, Rhythm and Typography
Use color to explain state
The primary action and progress accent use the interactive-default role. Invalid review shows emergency text with a useful instruction; a completed local review uses a success-colored supporting surface. A success color describes the local review state, not an application submitted to a government service. Text labels and the numeric count carry the same information without relying on hue.
Document the font boundary
The published family starts with Acumin, and the stylesheet includes externally hosted font declarations. The preview uses an explicit Arial fallback and removes those remote font requests; it does not redistribute Acumin. The token reference preserves the real family name so an authorized service can load its approved brand fonts. Recheck wrapping when switching from the fallback to a licensed face.
Alberta Design System Checkbox Labels and Descriptions
Use independent choices for independent tasks
Four native goa-checkbox controls model preparation items that can be reviewed in any order. Each has a unique name, visible text and a description that explains its purpose. Radio controls would imply a single choice and would misrepresent this task. A real service must replace the fictional preparation content with researched instructions.
Give each checkbox a stable, unique name.
Keep the visible label concise and the description specific.
Use independent checkboxes only when multiple choices are meaningful.
Read the custom event payload
The raw web component emits _change with name, checked and value in event.detail. The application uses the checked boolean to update a Set of selected indexes. It does not infer state from the label text or require a click on a tiny internal input. Clicking the visible label and using keyboard selection therefore share the same state transition.
Alberta Design System Progress and Review State
Keep progress derived from selection
The count and native HTML progress element are derived from the same Set. Selecting two items yields two of four, and clearing the controls returns both indicators to zero. The progress element has an accessible name; the adjacent status text gives an explicit count. There is no simulated upload, network request or completion timer.
Invalidate old summaries after an edit
Alberta Design System Responsive Checklist Composition
Keep the task and context legible
The desktop layout places the checklist beside a supporting progress panel. At a narrow width the panel follows the controls in document order. The task labels retain readable sizing, and descriptions wrap naturally below them. The side panel’s blue rule is a restrained signpost; it does not create another competing action.
Preserve interaction targets
The component library supplies checkbox and button interaction styling. Application CSS controls spacing and the surrounding grid without replacing the native hit areas. The two actions can wrap on small screens. Review is the primary action; Clear selections is visually secondary and does not masquerade as the next step in a real application.
Alberta Design System Complete Checklist Implementation
Run the complete source
Create a Vite vanilla project, install the pinned web-components package, and save the supplied entry and CSS. Keep the root mount element. The JavaScript includes all four authored tasks, the native event bindings, the derived count and the review/reset transitions. No account, private endpoint or external dataset is needed.
Install @abgov/web-components 3.0.0 and import JavaScript plus index.css.
Save the complete entry and alberta.css with the root mount.
Select multiple tasks and check the derived progress.
Review, edit a choice, then clear all native selections.
Separate component events from checklist policy
Use event.detail.checked from the raw _change event as the source of truth for selection. React wrapper props and raw goa-checkbox events are different interfaces; a handler copied between them without adapting its payload can leave the progress display out of sync with the visible checkbox.
The checklist’s one-item minimum is application policy, not a built-in checkbox rule. Derive the count, progress value and review text from one selection Set. On Clear selections, reset each custom element’s checked property as well as the Set. Editing a choice should retire the old review immediately so it cannot describe a previous selection. A real preparation service may permit incomplete checklists; choose that policy before making progress a gate.
Alberta Design System Design System Component Examples
main.js — complete native checklist
All registration, authored task content, selection handling and review/reset transitions.
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()});
The local preview omits unused external font imports. The complete package stylesheet can contain external font declarations; the override keeps this study on Arial.
04
Alberta Design System Agent Setup
Implementation Starting Point
The pinned native controls were browser-tested locally with no submission backend.
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
A Prompt for Your Project
Agent Prompt
Build the Alberta preparation checklist using web-components 3.0.0, real semantic CSS roles and explicit font licensing boundaries. Use native checkbox descriptions, derive progress from selection, reject empty review, clear stale summaries after edits and reset actual controls. Keep all results local and the authored tasks clearly illustrative.
05
Alberta Design System Sources and Scope
An OpenDesign component study running Alberta web components 3.0.0 with an explicit Arial font fallback. The authored tasks are fictional and do not define government eligibility or submission requirements.
